Dreaming of dynamic CoffeeScripted JavaScript


#1

I love programming in CoffeeScript but lately a lot of great tooling exists for JS but not for CS.

What I love most is the clean lines due to the absence of block start/stop markers (({,;})).

I’m wondering if it would be possible to have the editor dynamically insert those in regular JS, showing the markers only lightly or not at all while strongly enforcing indenting.

So for example, a typical JSON object looks like

{
  "devDependencies": {
    "webpack-dev-server": "^1.9.0"
  },
  "scripts": {
    "start": "webpack-dev-server --config=webpack.config.coffee",
    "build": "NODE_ENV=production webpack --config=webpack.config.coffee -p"
  }
}

but the editor might show it as

  devDependencies:
    "webpack-dev-server": "^1.9.0"

  scripts:
    start: "webpack-dev-server --config=webpack.config.coffee"
    build: "NODE_ENV=production webpack --config=webpack.config.coffee -p"


with invisibles turned off, and with perhaps collapsed markers with invisibles turned on. Multiple lines with invisibles could be automatically collapsed so the line numbers are correct. Markers that would cause confusion if missing, like an array, would be shown (basically apply the coffeescript rules).

Things that fit on one line show that way but once the line gets too long it is split with the proper indentation, but only in the editor. The source remains one line.

It would also be great if some words could be replaced by symbols, like the verbose “function” with the short and recognizable “⨏”.

While you are editing, the editor should automatically indent and add/adjust all the markers as needed.

So the editor is a mix between XO and a minifier.

Is this something that’s feasible with Atom?


#2

There is a discussion of some of the more advanced of these ideas here:

Currently, Atom isn’t quite capable of this, but it is getting closer I think. As far as “dimming out” the braces, Atom is capable of that. There is also a discussion of some similar syntax highlighting concepts here:


#3

FYI I worked on a project that gives ES6 a syntax wrapper with CS syntax. It would give you what you want in Atom. You could load a JS file, edit in a CS-like syntax, and save back in pure JS.


Optional reading

It would not be a trans-compiler, just syntax converter. I would switch to this if it existed even though I would lose some semantic features. It would solve all problems including the non-contributor problem since it would be two-way and allow one person to edit with the wrapper while others see clean ES6.


repo: https://github.com/mark-hahn/jsw

Unfortunately I am stuck on the two-way feature at the moment and it may not be possible. My current solution adds a lot of superfluous git changes. Without the two-way feature it isn’t worth doing.


#4

Ever since that thread that @mark_hahn started, I’ve been using ‘dimmed’ separators and other tokens for JS and TS. I still have to write them of course, but I find it way more readable.

It looks like this (notice the semicolos etc are still there, just very dim):

It’s just a bit of css. I was thinking I should put it in a package, but haven’t gotten around to it yet since I’ve never done an Atom package.


#5

Nice! However, to prevent mistakes, it would be great if inconsistent whitespacing is marked in red.

And for ES6 the problem is that arrow notation can be () => (foo) as well as () => {return foo} and it is quite easy to forget to add a return in the {} case…


#6

Well this is still ES6, so whitespace doesn’t cause errors. atom-beautify is what would take care of formatting whitespace.