CoffeeScript support for vue-cli and parcel templates #1467

shreeve · 2019-01-14T21:08:46Z

This is a first attempt at adding CoffeeScript support to the vue-cli template for Codesandbox.

@SaraVieira recommended the Parcel template first, but I couldn't get it working. I decided to try the vue-cli template, and made some progress. This is based off the work done by @zephraph on #443, but this version is not quite yet working.

I'm submitting here to see if someone with more familiarity with Codesandbox can help make whatever adjustments for CoffeeScript support.

What kind of change does this PR introduce?
Feature; adds support for CoffeeScript in vue single file components and elsewhere.

What is the current behavior?
Addresses #1384.

<script lang="coffee">
  export default

    data: ->
      name: "Bob"
      age: 34

    computed:
      retired: -> @age > 80

    methods:
      yelp: -> console.log "Hey!"
</script>

What is the new behavior?
.coffee files will be supported generally and in <script lang="coffee"> sections of .vue files.

Checklist:

Documentation - not much to add, just use it as normal
Tests - same
Ready to be merged - lgtm
Added myself to contributors table - done

@zephraph

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

shreeve · 2019-01-14T22:21:02Z

I have a .vue file that looks like this:

<script lang="coffee">

  import HelloWorld from "./components/HelloWorld"

  export default
    name: "App"
    components: { HelloWorld }

</script>

It does correctly get compiled by the CoffeeScript compiler and then injected into some code to eval.

But, the eval code looks like this:

(function evaluate(require, module, exports, process, setImmediate, global, afterAll, afterEach, beforeAll, beforeEach, describe, it, test, expect, jest, __dirname, __filename) {
  
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {HelloWorld}
};

})

The following error is shown when it runs:

It sort of like the movie "Inception" to me, so I'm not really sure in which context there is an unexpected identifier.

Is it complaining about the import statement? Or is something else fishy?

shreeve · 2019-01-15T07:25:34Z

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

+      literate: false,
+      inlineMap: true,
+      sourceMap: false,
+      transpile: false,


This is where we are supposed to supply the transpiler details. Something like this:

transpile: { transpile: require('@babel/core'), // this doesn't work, since no require() presets: ['@babel/env'], // this doesn't work, what should it say? },

Wouldn't it make sense to only use coffeescript for the transpilation from .coffee to .js and then run the Babel transpiler on that output?

@CompuIves - Yes, I just couldn't figure out how to do it.

CompuIves · 2019-01-15T09:46:52Z

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

@@ -151,6 +152,9 @@ export default function initialize() {
  vuePreset.registerTranspiler(m => m.path.endsWith('pug'), [
    { transpiler: pugTranspiler },
  ]);
+  vuePreset.registerTranspiler(m => m.path.endsWith('coffee'), [
+    { transpiler: coffeeTranspiler },


I think it would be solved by appending

{ transpiler: babelTranspiler }

to the array!

Ah, I will try to get this to work!

Actually, I tried this but it didn't work. Instead, I had to add const postLoaders = { coffee: 'babel-loader' }; to transpilers/vue/loader.js, which made it all work.

I tried this, but it didn't work. I added const postLoaders = { coffee: 'babel-loader' }; to eval/transpilers/vue/loader.js and it worked!

shreeve · 2019-01-15T16:32:32Z

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

@@ -148,9 +149,13 @@ 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), [


I updated the pug section also, just so all sections in this file use the same syntax.

shreeve · 2019-01-15T16:34:20Z

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

+      bare: true,
+      literate: false,
+      inlineMap: true,
+      sourceMap: false,


I removed the transpile: ... entry here.

…iles

shreeve · 2019-01-15T20:12:28Z

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

  };

  const loaders = Object.assign({}, defaultLoaders, codeSandboxLoaders);
  const preLoaders = {};
-  const postLoaders = {};
+  const postLoaders = { coffee: 'babel-loader' };


This seemed like the clencher... only by having this could I get the <script lang='coffee'> sections of the .vue files to work.

shreeve · 2019-01-15T20:16:29Z

This PR seems to make it so that <script lang='coffee'> works in .vue files.

However, when I import *.coffee files from the file system, I see something like this:

(function evaluate(require, module, exports, process, setImmediate, global, afterAll, afterEach, beforeAll, beforeEach, describe, it, test, expect, jest, __dirname, __filename

) {
      module.exports = "alert \"Hello world!\"";
//# sourceURL=http://localhost:3002/src/top.coffee
})

What is needed to be able to import *.coffee files using import 'foo.coffee'?

shreeve · 2019-01-15T20:20:17Z

shreeve · 2019-01-15T22:18:30Z

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

@@ -39,7 +40,7 @@ const getFileNameFromVm = vm => {
 export default function initialize() {
  const vuePreset = new Preset(
    'vue-cli',
-    ['vue', 'json', 'js', 'ts'],
+    ['vue', 'json', 'js', 'ts', 'coffee'],


Is adding coffee necessary here? Seems to work with or without it.

It's used to allow import './test' to resolve to test.coffee. I think it would be useful 😄

shreeve · 2019-01-15T22:19:41Z

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

@@ -127,6 +128,9 @@ export default function initialize() {
  vuePreset.registerTranspiler(module => /\.vue$/.test(module.path), [
    { transpiler: vueTranspiler },
  ]);
+  vuePreset.registerTranspiler(module => /\.coffee$/.test(module.path), [
+    { transpiler: coffeeTranspiler },
+  ]);


I originally added this coffee transpiler to the end of the file, but realized that it was not being executed since the level or declaration determines its priority and it was lower than the raw-loader.

shreeve · 2019-01-15T22:20:17Z

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

+import { buildWorkerError } from '../utils/worker-error-handler';
+
+self.importScripts(
+  `${process.env.CODESANDBOX_HOST || ''}/static/js/coffeescript.2.3.2.js`


Would it be better to pull this from a CDN instead of including this always?

Hmm, I think it doesn't really matter where we get it from. CDN works too, might be a bit faster even, but not noticeably I think.

shreeve · 2019-01-15T23:18:32Z

@SaraVieira, @CompuIves - Does everything seem ok? If so, I believe it will be easy to add support for the parcel template also.

shreeve · 2019-01-16T06:21:22Z

Once coffeescript support was in for vue-cli, it was just a small tweak to add support for parcel also. So, I just added it in.

shreeve · 2019-01-16T06:22:53Z

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

+  worker: Worker;
+
+  constructor() {
+    super('coffee-loader', CoffeeWorker, 1);


Does this 1 mean the number of concurrent workers? Should we change it or keep it at 1?

Yep! I think 1 is enough for the amount of coffee files in a project (since node_modules doesn't have coffee files it should be a low amount)

shreeve · 2019-01-16T06:23:48Z

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'],


Why is the 'babel-loader' needed to make this work?

babel-loader also checks all the require statements and adds them to the dependency graph. So this is required to make import statements work properly.

Oh, wow. I'm glad I asked! :-)

shreeve · 2019-01-16T06:26:48Z

@SaraVieira, @CompuIves - I think this is ready for a review. I can launch a new vue-cli or parcel codesandbox and add *.coffee files or add <script lang='coffee'> sections to *.vue files and it works right away.

shreeve · 2019-01-16T06:42:25Z

I see that some checks in ci/circleci: test-integrations are failing, but I'm not sure how to verify or fix those.

shreeve · 2019-01-16T08:59:49Z

Should address #1384 - CoffeeScript not working

SaraVieira · 2019-01-16T09:45:52Z

I see that some checks in ci/circleci: test-integrations are failing, but I'm not sure how to verify or fix those.

It's also failing on master :(

Don't worry, that is on us

shreeve · 2019-01-16T09:52:29Z

@SaraVieira - Ok, cool

shreeve · 2019-01-16T19:33:09Z

@SaraVieira, @CompuIves - If this PR looks good and gets merged, how long does it usually take before this version of the repo is deployed on the live codesandbox.io site?

SaraVieira · 2019-01-16T21:07:32Z

Hey!

Our deploys are ad-hock so I would say one or two days max

shreeve · 2019-01-16T21:37:22Z

Great!

…

On Wed, Jan 16, 2019 at 2:07 PM Sara Vieira ***@***.***> wrote: Hey! Our deploys are ad-hock so I would say one or two days max — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#1467 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAIuGzNJJwvb5DeYNEem9cP6D2G77XBbks5vD5SXgaJpZM4Z_wAh> .

CompuIves · 2019-01-17T10:46:44Z

This looks really good! Exactly the way I would implement it as well. I'm going to do some testing today and merge it in if it works properly!

AlexGrafe · 2019-01-17T13:00:06Z

At the end of all of this, could someone summarize what to do as a normal user to get CoffeeScript working on parcel ?
Thanks to everyone involved. This is amazing!

AlexGrafe · 2019-01-17T13:02:05Z

@GeoffreyBooth: CoffeeScript working soon on CodeSandbox done by @shreeve

GeoffreyBooth · 2019-01-17T15:10:13Z

Congrats! Thanks @shreeve!

shreeve · 2019-01-18T08:26:36Z

I made a quick screencast of how this works with the vue-cli template:

https://youtu.be/eHxDezrYRa4

shreeve · 2019-01-18T09:30:20Z

Here's another showing how to support the parcel template:

https://youtu.be/12d13-s-JBQ

shreeve · 2019-01-18T09:37:20Z

main.coffee

import Vue from "vue"
import App from "./App"

Vue.config.productionTip = false

new Vue
  el: "#app"
  render: (h) -> h App

App.vue

<template lang="pug">
  .example
    h3 Important Stuff
    p Maybe we should start with some {{ active }}...
    p How about:
    ul: li(v-for='item in this[active]') {{ item.join(', by ') }}
    button(@click='surprise') Surprise Me!
</template>

<script lang="coffee">
export default
  data: ->
    active: 'jokes'
    genres:
      jokes: 'funny jokes'
      poems: 'beautiful poems'
      thoughts: 'deep thoughts'
    jokes: [
      [ 'How many foos does it take', 'my son Sailor' ]
      [ 'Knock, knock...', 'my friend Batman' ]
      [ 'So, this guy walks into a bar', 'your crazy neighbor' ] ]
    poems: [
      [ 'The Gods of the Copybook Headings', 'Rudyard Kipling' ]
      [ 'Daffodils', 'William Wordsworth' ]
      [ 'Fire and Ice', 'Robert Frost' ] ]
    thoughts: [
      [ 'Time is relative', 'Albert Einstein' ]
      [ 'The quintic is unsolveable', 'Evariste Galois' ]
      [ 'Frankly my darling...', 'Rhett Butler' ] ]
  methods:
    pick: (ary) ->
      ary[Math.floor(Math.random() * ary.length)]
    surprise: ->
      list = Object.keys @genres
      item = @active
      item = @pick(list) until item isnt @active
      @active = item
</script>

<style lang="stylus">
  .example
    font-family: Avenir
</style>

AlexGrafe · 2019-01-18T09:38:25Z

Thanks @shreeve. This is amazing! Thanks for all the digging and work!

shreeve · 2019-01-19T00:36:05Z

@CompuIves / @SaraVieira - I'm not sure if there is some kind of CI check that needs to be fixed prior to this being merged, or if that top CircleCI issue is "no big deal". Is this PR able to merged or not quite yet? Thanks!

CompuIves · 2019-01-20T14:57:53Z

Great! Tested it and everything works! Merging in now.

shreeve added 4 commits January 14, 2019 13:58

CoffeeScript support for vue-cli template

7e4fd93

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

match syntax

bebbdb8

Update icons.js

62682e6

match syntax

61e7315

This was referenced Jan 14, 2019

CoffeeScript not working #1384

Closed

Meta Language support in .vue files #199

Closed

shreeve commented Jan 15, 2019

View reviewed changes

CompuIves reviewed Jan 15, 2019

View reviewed changes

shreeve added 2 commits January 15, 2019 09:14

invoke babel from the preset, not from the coffeescript compiler

b411ea9

use more consistent syntax

c8c51ba

shreeve commented Jan 15, 2019

View reviewed changes

shreeve added 2 commits January 15, 2019 12:13

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

c4508bd

…iles

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

6304745

shreeve commented Jan 15, 2019

View reviewed changes

shreeve closed this Jan 15, 2019

shreeve reopened this Jan 15, 2019

move coffeescript transpiler higher up the food chain

08443a5

shreeve commented Jan 15, 2019

View reviewed changes

shreeve added 2 commits January 15, 2019 16:10

simpler coffeescript -> babel -> js transpilation

a0a0333

add to contributors file

d40ce45

shreeve added 3 commits January 15, 2019 16:50

re-enable the babel transpiler after coffeescript

6d415d3

doesn't seem like this is needed?

7cd03ed

add coffeescript support to parcel

38579d2

shreeve changed the title ~~CoffeeScript support for vue-cli template~~ CoffeeScript support for vue-cli and parcel templates Jan 16, 2019

shreeve commented Jan 16, 2019

View reviewed changes

shreeve closed this Jan 16, 2019

shreeve reopened this Jan 16, 2019

CompuIves merged commit 2cb8a47 into codesandbox:master Jan 20, 2019

SaraVieira mentioned this pull request Mar 31, 2019

Loader 'coffee-loader' could not be found. #1090

Closed

adamlaska mentioned this pull request Jul 6, 2022

[Snyk] Fix for 13 vulnerabilities adamlaska/codesandbox-client#156

Open

CoffeeScript support for vue-cli and parcel templates #1467

CoffeeScript support for vue-cli and parcel templates #1467

Conversation

shreeve commented Jan 14, 2019 • edited Loading

shreeve commented Jan 14, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shreeve commented Jan 15, 2019 • edited Loading

shreeve commented Jan 15, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shreeve commented Jan 15, 2019

shreeve commented Jan 16, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shreeve commented Jan 16, 2019

shreeve commented Jan 16, 2019

shreeve commented Jan 16, 2019

SaraVieira commented Jan 16, 2019

shreeve commented Jan 16, 2019

shreeve commented Jan 16, 2019

SaraVieira commented Jan 16, 2019

shreeve commented Jan 16, 2019 via email

CompuIves commented Jan 17, 2019

AlexGrafe commented Jan 17, 2019

AlexGrafe commented Jan 17, 2019

GeoffreyBooth commented Jan 17, 2019

shreeve commented Jan 18, 2019

shreeve commented Jan 18, 2019

shreeve commented Jan 18, 2019

main.coffee

App.vue

AlexGrafe commented Jan 18, 2019

shreeve commented Jan 19, 2019

CompuIves commented Jan 20, 2019

shreeve commented Jan 14, 2019 •

edited

Loading

shreeve commented Jan 14, 2019 •

edited

Loading

shreeve commented Jan 15, 2019 •

edited

Loading