Add Vue JSX support

Author: Ives van Hoorne

package.json

@@ -80,13 +80,16 @@
   "dependencies": {
     "@emmetio/codemirror-plugin": "^0.3.5",
     "axios": "^0.16.2",
+    "babel-helper-vue-jsx-merge-props": "^2.0.2",
     "babel-plugin-detective": "^2.0.0",
     "babel-plugin-dynamic-import-node": "^1.0.2",
+    "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-system-import": "^1.1.5",
     "babel-plugin-system-import-transformer": "3.1.0",
     "babel-plugin-transform-async-to-generator": "^6.24.1",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-remove-strict-mode": "^0.0.2",
+    "babel-plugin-transform-vue-jsx": "^3.5.0",
     "babel-polyfill": "^6.23.0",
     "babel-preset-stage-0": "^6.24.1",
     "babel-standalone": "^6.25.0",

src/sandbox/eval/transpilers/babel/babel-worker.js

@@ -1,6 +1,7 @@
 // @flow
 
 import dynamicImportPlugin from 'babel-plugin-dynamic-import-node';
+import vuePlugin from 'babel-plugin-transform-vue-jsx';
 
 import { buildWorkerError } from '../utils/worker-error-handler';
 
@@ -22,13 +23,20 @@ declare var Babel: {
 };
 
 Babel.registerPlugin('dynamic-import-node', dynamicImportPlugin);
+Babel.registerPlugin('transform-vue-jsx', vuePlugin);
 
 self.addEventListener('message', event => {
   const { code, path, config } = event.data;
 
+  const plugins = [...config.plugins, 'dynamic-import-node'];
+
+  if (path.includes('.vue')) {
+    plugins.push('transform-vue-jsx');
+  }
+
   const customConfig = {
     ...config,
-    plugins: [...config.plugins, 'dynamic-import-node'],
+    plugins,
   };
 
   try {

yarn.lock

@@ -737,6 +737,10 @@ babel-helper-to-multiple-sequence-expressions@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/babel-helper-to-multiple-sequence-expressions/-/babel-helper-to-multiple-sequence-expressions-0.1.1.tgz#5f1b832b39e4acf954e9137f0251395c71196b35"
 
+babel-helper-vue-jsx-merge-props@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.2.tgz#aceb1c373588279e2755ea1cfd35c22394fd33f8"
+
 babel-helpers@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-helpers/-/babel-helpers-6.24.1.tgz#3471de9caec388e5c850e597e58a26ddf37602b2"
@@ -917,7 +921,7 @@ babel-plugin-syntax-function-bind@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-function-bind/-/babel-plugin-syntax-function-bind-6.13.0.tgz#48c495f177bdf31a981e732f55adc0bdd2601f46"
 
-babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0:
+babel-plugin-syntax-jsx@^6.18.0, babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
 
@@ -1304,6 +1308,12 @@ babel-plugin-transform-undefined-to-void@^6.8.2:
   version "6.8.3"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-undefined-to-void/-/babel-plugin-transform-undefined-to-void-6.8.3.tgz#fc52707f6ee1ddc71bb91b0d314fbefdeef9beb4"
 
+babel-plugin-transform-vue-jsx@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-3.5.0.tgz#6b1ad29351ad753919403675f0bf8b2a43e17671"
+  dependencies:
+    esutils "^2.0.2"
+
 babel-polyfill@^6.23.0:
   version "6.23.0"
   resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.23.0.tgz#8364ca62df8eafb830499f699177466c3b03499d"
@@ -5686,8 +5696,6 @@ moment@^2.18.1:
 monaco-editor@CompuIves/codesandbox-monaco-editor:
   version "0.9.0"
   resolved "https://codeload.github.com/CompuIves/codesandbox-monaco-editor/tar.gz/e4e1efb582934ffd8fb135b1cfa1af82cdbc85e3"
-  dependencies:
-    monaco-typescript CompuIves/monaco-typescript
 
 [email protected]:
   version "2.0.0"