CoffeeScript support for vue-cli and parcel templates (codesandbox#1467)

* CoffeeScript support for vue-cli template

This is based off the work done by @zephraph on codesandbox#443 and is not quite yet working.

* match syntax

* Update icons.js

* match syntax

* invoke babel from the preset, not from the coffeescript compiler

* use more consistent syntax

* use babel as the last stage of <style lang="coffee"> blocks in .vue files

* doesn't seem to work here, I had to add a postLoader for coffee

* move coffeescript transpiler higher up the food chain

* simpler coffeescript -> babel -> js transpilation

* add to contributors file

* re-enable the babel transpiler after coffeescript

* doesn't seem like this is needed?

* add coffeescript support to parcel

Author: shreeve

.all-contributorsrc

@@ -699,6 +699,15 @@
         "code"
       ]
     },
+    {
+      "login": "shreeve",
+      "name": "Steve Shreeve",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/142875?s=460&v=4",
+      "profile": "https://github.com/shreeve",
+      "contributions": [
+        "code"
+      ]
+    },
   ],
   "repoType": "github"
 }

packages/app/src/sandbox/eval/presets/parcel/index.js

@@ -14,13 +14,27 @@ import vueStyleLoader from '../../transpilers/vue/style-loader';
 import cssLoader from '../../transpilers/vue/css-loader';
 import htmlTranspiler from './transpilers/html-transpiler';
 import pugTranspiler from '../../transpilers/pug';
+import coffeeTranspiler from '../../transpilers/coffee';
+import noopTranspiler from '../../transpilers/noop';
 
 import Preset from '../';
 
 export default function initialize() {
   const parcelPreset = new Preset(
     'parcel',
-    ['js', 'jsx', 'ts', 'tsx', 'json', 'less', 'scss', 'sass', 'styl', 'css'],
+    [
+      'js',
+      'jsx',
+      'ts',
+      'tsx',
+      'json',
+      'less',
+      'scss',
+      'sass',
+      'styl',
+      'css',
+      'vue',
+    ],
     {},
     {
       htmlDisabled: true,
@@ -34,6 +48,11 @@ export default function initialize() {
     }
   );
 
+  parcelPreset.registerTranspiler(module => /\.coffee$/.test(module.path), [
+    { transpiler: coffeeTranspiler },
+    { transpiler: babelTranspiler },
+  ]);
+
   parcelPreset.registerTranspiler(module => /\.jsx?$/.test(module.path), [
     {
       transpiler: babelTranspiler,
@@ -121,5 +140,9 @@ export default function initialize() {
 
   parcelPreset.registerTranspiler(() => true, [{ transpiler: rawTranspiler }]);
 
+  parcelPreset.registerTranspiler(() => false, [
+    { transpiler: noopTranspiler },
+  ]);
+
   return parcelPreset;
 }

packages/app/src/sandbox/eval/presets/vue-cli/index.js

@@ -20,6 +20,7 @@ import vueStyleLoader from '../../transpilers/vue/style-loader';
 import cssLoader from '../../transpilers/vue/css-loader';
 import base64Transpiler from '../../transpilers/base64';
 import pugTranspiler from '../../transpilers/pug';
+import coffeeTranspiler from '../../transpilers/coffee';
 
 import Preset from '../';
 
@@ -127,6 +128,10 @@ export default function initialize() {
   vuePreset.registerTranspiler(module => /\.vue$/.test(module.path), [
     { transpiler: vueTranspiler },
   ]);
+  vuePreset.registerTranspiler(module => /\.coffee$/.test(module.path), [
+    { transpiler: coffeeTranspiler },
+    { transpiler: babelTranspiler },
+  ]);
 
   registerStyleTranspilers();
 
@@ -148,7 +153,7 @@ export default function initialize() {
     { transpiler: noopTranspiler },
   ]);
   vuePreset.registerTranspiler(() => true, [{ transpiler: rawTranspiler }]);
-  vuePreset.registerTranspiler(m => m.path.endsWith('pug'), [
+  vuePreset.registerTranspiler(module => /\.pug$/.test(module.path), [
     { transpiler: pugTranspiler },
   ]);
 

packages/app/src/sandbox/eval/transpilers/coffee/coffee-worker.js

@@ -0,0 +1,30 @@
+import { buildWorkerError } from '../utils/worker-error-handler';
+
+self.importScripts(
+  `${process.env.CODESANDBOX_HOST || ''}/static/js/coffeescript.2.3.2.js`
+);
+self.postMessage('ready');
+
+self.addEventListener('message', event => {
+  const { code, path } = event.data;
+
+  try {
+    const compiled = CoffeeScript.compile(code, {
+      filename: path,
+      sourceFiles: [path],
+      bare: true,
+      literate: false,
+      inlineMap: true,
+      sourceMap: false,
+    });
+    return self.postMessage({
+      type: 'result',
+      transpiledCode: compiled,
+    });
+  } catch (err) {
+    return self.postMessage({
+      type: 'error',
+      error: buildWorkerError(err),
+    });
+  }
+});

packages/app/src/sandbox/eval/transpilers/coffee/index.js

@@ -0,0 +1,45 @@
+// @flow
+import CoffeeWorker from 'worker-loader?publicPath=/&name=coffee-transpiler.[hash:8].worker.js!./coffee-worker.js';
+
+import WorkerTranspiler from '../worker-transpiler';
+import { type LoaderContext } from '../../transpiled-module';
+
+class CoffeeTranspiler extends WorkerTranspiler {
+  worker: Worker;
+
+  constructor() {
+    super('coffee-loader', CoffeeWorker, 1);
+
+    this.cacheable = false;
+  }
+
+  doTranspilation(code: string, loaderContext: LoaderContext) {
+    return new Promise((resolve, reject) => {
+      const path = loaderContext.path;
+
+      this.queueTask(
+        {
+          code,
+          path,
+        },
+        loaderContext._module.getId(),
+        loaderContext,
+        (err, data) => {
+          if (err) {
+            loaderContext.emitError(err);
+
+            return reject(err);
+          }
+
+          return resolve(data);
+        }
+      );
+    });
+  }
+}
+
+const transpiler = new CoffeeTranspiler();
+
+export { CoffeeTranspiler };
+
+export default transpiler;

packages/app/src/sandbox/eval/transpilers/vue/loader.js

@@ -122,6 +122,7 @@ export default function(content: string, loaderContext: LoaderContext) {
     ts: ['ts-loader'],
     typescript: ['ts-loader'],
     pug: ['pug-loader'],
+    coffee: ['babel-loader', 'coffee-loader'],
   };
 
   const loaders = Object.assign({}, defaultLoaders, codeSandboxLoaders);

packages/app/static/js/coffeescript.2.3.2.js

@@ -7,6 +7,7 @@ import babelSvg from './babel.png';
 import cssSvg from './css.png';
 import htmlSvg from './html.png';
 import pugSvg from './pug.png';
+import coffeescriptSvg from './coffeescript.png';
 import imageSvg from './image.png';
 import lessSvg from './less.png';
 import scssSvg from './scss.png';
@@ -41,5 +42,6 @@ export const stylus = { svg: stylusSvg, title: 'stylus', extension: 'styl' };
 export const image = { svg: imageSvg, title: 'image', extension: 'png' };
 export const html = { svg: htmlSvg, title: 'html', extension: 'html' };
 export const pug = { svg: pugSvg, title: 'pug', extension: 'pug' };
+export const coffee = { svg: coffeescriptSvg, title: 'coffeescript', extension: 'coffee' };
 export const cssGlobal = { svg: cssSvg, title: 'css', extension: 'css' };
 export const vue = { svg: vueSvg, title: 'vue', extension: 'vue' };