Merge pull request #17 from vue-styleguidist/refactor-useinbrowsercompiler

feat: use vue-inbrowser-compiler

Author: elevatebart

demo/App.vue

@@ -43,7 +43,7 @@ export default {
       codeJs,
       codeChicago,
       CustomLayout,
-      chicagoRequires: { chicagoNeighbourhoods: all }
+      chicagoRequires: { "./chicagoNeighbourhoods": all }
     };
   }
 };

demo/assets/Chicago.jsx

@@ -1,4 +1,4 @@
-import all from "chicagoNeighbourhoods";
+import all from "./chicagoNeighbourhoods";
 let i = 4;
 const sel = [];
 const getIndex = () => {

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,9 @@
 </template>
 
 <script>
-import compileCode, { isCodeVueSfc } from "./utils/compileCode";
-import getVars from "./utils/getVars";
-import getVueConfigObject from "./utils/getVueConfigObject";
-import addScopedStyle from "./utils/addScopedStyle";
+import { compile, isCodeVueSfc, addScopedStyle } from "vue-inbrowser-compiler";
+import evalInContext from "./utils/evalInContext";
+import requireAtRuntime from "./utils/requireAtRuntime";
 
 export default {
   name: "VueLivePreviewComponent",
@@ -69,21 +68,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,17 +81,20 @@ 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);
+        return;
       }
 
       data.components = this.components;
@@ -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"
+        });
       }
     }
   }

src/VueLive.vue

@@ -1,7 +1,7 @@
 <template>
-  <component :is="this.layout ? this.layout : VueLiveDefaultLayout">
+  <component :is="layout ? layout : VueLiveDefaultLayout">
     <template v-slot:editor>
-      <PrismEditor :code="code" @change="updatePreview" :language="prismLang"/>
+      <PrismEditor v-model="stableCode" @change="updatePreview" :language="prismLang"/>
     </template>
     <template v-slot:preview>
       <Preview
@@ -31,6 +31,8 @@ const LANG_TO_PRISM = {
   js: "jsx"
 };
 
+const UPDATE_DELAY = 300;
+
 export default {
   name: "VueLivePreview",
   components: { PrismEditor, Preview },
@@ -73,7 +75,13 @@ export default {
     return {
       model: this.code,
       prismLang: "html",
-      VueLiveDefaultLayout
+      VueLiveDefaultLayout,
+      /**
+       * this data only gets changed when changing language.
+       * it allows for copy and pasting without having the code
+       * editor repainted every keystroke
+       */
+      stableCode: this.code
     };
   },
   computed: {
@@ -83,11 +91,15 @@ export default {
   },
   methods: {
     switchLanguage(newLang) {
-      this.prismLang = LANG_TO_PRISM[newLang];
+      const newPrismLang = LANG_TO_PRISM[newLang];
+      if (this.prismLang !== newPrismLang) {
+        this.prismLang = newPrismLang;
+        this.stableCode = this.model;
+      }
     },
     updatePreview: debounce(function(value) {
       this.model = value;
-    }, 300)
+    }, UPDATE_DELAY)
   }
 };
 </script>