fix: use vue-inbrowser-compiler

Author: elevatebart

package.json

@@ -12,23 +12,18 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
-    "acorn": "^6.1.1",
-    "acorn-jsx": "^5.0.1",
-    "buble": "^0.19.7",
     "lodash.debounce": "^4.0.8",
     "prismjs": "^1.16.0",
-    "rewrite-imports": "^2.0.3",
     "vue": "^2.6.10",
-    "vue-prism-editor": "^0.2.0",
-    "vue-template-compiler": "^2.5.21",
-    "walkes": "^0.2.1"
+    "vue-inbrowser-compiler": "^3.13.8",
+    "vue-prism-editor": "^0.2.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.6.0",
-    "@vue/cli-plugin-e2e-cypress": "^3.7.0",
-    "@vue/cli-plugin-eslint": "^3.6.0",
-    "@vue/cli-plugin-unit-jest": "^3.6.3",
-    "@vue/cli-service": "^3.6.0",
+    "@vue/cli-plugin-babel": "^3.8.0",
+    "@vue/cli-plugin-e2e-cypress": "^3.8.0",
+    "@vue/cli-plugin-eslint": "^3.8.0",
+    "@vue/cli-plugin-unit-jest": "^3.8.0",
+    "@vue/cli-service": "^3.8.0",
     "@vue/test-utils": "1.0.0-beta.29",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
@@ -37,12 +32,12 @@
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
     "raw-loader": "^2.0.0",
-    "rollup": "^1.11.2",
+    "rollup": "^1.12.4",
     "rollup-plugin-babel": "^4.3.2",
     "rollup-plugin-commonjs": "^9.3.4",
     "rollup-plugin-css-only": "^1.0.0",
     "rollup-plugin-json": "^4.0.0",
-    "rollup-plugin-node-resolve": "^4.2.3",
+    "rollup-plugin-node-resolve": "^5.0.0",
     "rollup-plugin-vue": "^5.0.0",
     "validate-commit-msg": "^2.14.0",
     "vuejs-datepicker": "^1.5.4"

src/Preview.vue

@@ -6,10 +6,10 @@
 </template>
 
 <script>
-import compileCode, { isCodeVueSfc } from "./utils/compileCode";
-import getVars from "./utils/getVars";
-import getVueConfigObject from "./utils/getVueConfigObject";
+import { compile, isCodeVueSfc } from "vue-inbrowser-compiler";
 import addScopedStyle from "./utils/addScopedStyle";
+import evalInContext from "./utils/evalInContext";
+import requireAtRuntime from "./utils/requireAtRuntime";
 
 export default {
   name: "VueLivePreviewComponent",
@@ -69,21 +69,10 @@ export default {
     },
     renderComponent(code) {
       let data = {};
-      let listVars = [];
-      let script;
       let style;
-      let template;
       try {
-        const renderedComponent = compileCode(code);
+        const renderedComponent = compile(code);
         style = renderedComponent.style;
-        if (renderedComponent.html && renderedComponent.script.length) {
-          // When it's a template preceeded by a script (vsg format)
-          // NOTA: if it is an SFC, the html template will be added in the script
-
-          // extract all variable to set them up as data in the component
-          // this way we can use in the template what is defined in the script
-          listVars = getVars(renderedComponent.script);
-        }
         if (renderedComponent.script) {
           // if the compiled code contains a script it might be "just" a script
           // if so, change scheme used by editor
@@ -93,14 +82,16 @@ export default {
           // it can be:
           // - a script setting up variables => we set up the data property of renderedComponent
           // - a `new Vue()` script that will return a full config object
-          script = renderedComponent.script;
-          data = getVueConfigObject(script, listVars, this.requires) || {};
+          const script = renderedComponent.script;
+          data =
+            evalInContext(script, filepath =>
+              requireAtRuntime(this.requires, filepath)
+            ) || {};
         }
-        if (renderedComponent.html) {
+        if (renderedComponent.template) {
           // if this is a pure template or if we are in hybrid vsg mode,
           // we need to set the template up.
-          template = `<div>${renderedComponent.html}</div>`;
-          data.template = template;
+          data.template = `<div>${renderedComponent.template}</div>`;
         }
       } catch (e) {
         this.handleError(e);
@@ -116,6 +107,11 @@ export default {
 
       if (data.template || data.render) {
         this.previewedComponent = data;
+      } else {
+        this.handleError({
+          message:
+            "[Vue Live] no template or render function specified, you might have an issue in your example"
+        });
       }
     }
   }