feat: highlight parsing errors in the code

demo/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <main style="text-align: center;">
+  <main style="text-align: center">
     <h1>Vue Live renders vue code in the browser</h1>
     <p class="description">
       <em>vue-live</em> is a VueJs component. It renders the code passed in prop
@@ -35,9 +35,7 @@
       <h2>Pure JavaScript code</h2>
       <p>Or if you prefer to, use the <b>new Vue()</b> format</p>
       <VueLive :code="codeJs" :layout="CustomLayout" />
-      <h2>
-        Extra dependencies
-      </h2>
+      <h2>Extra dependencies</h2>
       <p>
         Use the <b>requires</b> prop to make libraries and packages available in
         the browser
@@ -60,7 +58,7 @@
       />
 
       <h2>Default Layout</h2>
-      <div style="width: 950px; max-width: 95vw; margin: 20px auto;">
+      <div style="width: 950px; max-width: 95vw; margin: 20px auto">
         <VueLive :code="`<input type='button' value='I am Groot' />`" />
       </div>
       <h2>Custom Layout</h2>
@@ -84,11 +82,19 @@
       <h2>Separate components for Editor and Preview</h2>
       <div class="separate">
         <div class="preview-separate">
-          <VueLivePreview :code="separateCode" />
+          <VueLivePreview
+            :code="separateCode"
+            @error="(e) => (error = e)"
+            @success="error = undefined"
+          />
         </div>
-        <hr style="width: 950px;" />
+        <hr style="width: 950px" />
         <p>Edit the code here</p>
-        <VueLiveEditor :code="separateCode" @change="updateCode" />
+        <VueLiveEditor
+          :code="separateCode"
+          @change="updateCode"
+          :error="error"
+        />
         <div class="button-bar"><button>Save</button></div>
       </div>
     </div>
@@ -128,6 +134,7 @@ export default {
       realjsx,
       separateCode: codeSfc,
       openExamples: false,
+      error: undefined,
     };
   },
   methods: {

package.json

@@ -22,7 +22,7 @@
     "hash-sum": "^2.0.0",
     "prismjs": "^1.21.0",
     "recast": "^0.19.1",
-    "vue-inbrowser-compiler": "^4.32.1",
+    "vue-inbrowser-compiler": "^4.33.4",
     "vue-prism-editor": "^1.2.2",
     "vue-template-compiler": "^2.6.12"
   },

src/Editor.vue

@@ -9,55 +9,14 @@
 
 <script>
 import { PrismEditor } from "vue-prism-editor";
+import debounce from "debounce";
 
-import {
-  highlight as prismHighlight,
-  languages,
-} from "prismjs/components/prism-core";
-import "prismjs/components/prism-clike";
-import "prismjs/components/prism-markup";
-import "prismjs/components/prism-javascript";
-import "prismjs/components/prism-jsx";
 import "vue-prism-editor/dist/prismeditor.min.css";
 
-import debounce from "debounce";
-import getScript from "./utils/getScript";
+import highlight from "./utils/highlight";
 
 const UPDATE_DELAY = 300;
 
-const highlight = (lang, jsxInExamples) => {
-  if (lang === "vsg") {
-    return (code) => {
-      if (!code) {
-        return "";
-      }
-      const scriptCode = getScript(code, jsxInExamples);
-      const scriptCodeHighlighted = prismHighlight(
-        scriptCode,
-        languages[jsxInExamples ? "jsx" : "js"],
-        lang
-      );
-      if (code.length === scriptCode.length) {
-        return scriptCodeHighlighted;
-      }
-      const templateCode = code.slice(scriptCode.length);
-      const templateHighlighted = prismHighlight(templateCode, languages["html"], lang)
-      return (
-        scriptCodeHighlighted +
-        templateHighlighted
-      );
-    };
-  } else {
-    return (code) => {
-      const langScheme = languages[lang];
-      if(!langScheme){
-        return code
-      }
-      return prismHighlight(code, langScheme, lang);
-    }
-  }
-};
-
 export default {
   name: "VueLiveEditor",
   components: { PrismEditor },
@@ -66,6 +25,10 @@ export default {
       type: String,
       required: true,
     },
+    error: {
+      type: [Error, Object],
+      default: undefined,
+    },
     delay: {
       type: Number,
       default: UPDATE_DELAY,
@@ -83,6 +46,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    squiggles: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
@@ -97,7 +64,10 @@ export default {
   },
   methods: {
     highlighter(code) {
-      return highlight(this.prismLang, this.jsx)(code);
+      return highlight(this.prismLang, this.jsx)(
+        code,
+        this.squiggles && this.error && this.error.loc
+      );
     },
   },
   watch: {
@@ -113,3 +83,15 @@ export default {
   },
 };
 </script>
+
+<style>
+.VueLive-squiggles-wrapper {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.VueLive-squiggles {
+  border-bottom: 2px dotted red;
+}
+</style>

src/Preview.vue

@@ -134,7 +134,7 @@ export default {
           // if so, change scheme used by editor
           // NOTE: vsg is a superset of JavaScript allowing
           // the template to succeed litterally code, very useful for examples
-          // vsg stands for vue-styleguidist
+          // NOTE2: vsg stands for vue-styleguidist
           this.$emit("detect-language", isCodeVueSfc(code) ? "vue" : "vsg");
 
           // compile and execute the script
@@ -192,9 +192,10 @@ export default {
       } else {
         this.handleError({
           message:
-            "[Vue Live] no template or render function specified, you might have an issue in your example",
+            "[Vue Live] no template or render function specified. Example cannot be rendered.",
         });
       }
+      this.$emit("success");
     },
   },
 };

src/VueLive.vue

@@ -15,7 +15,9 @@
         :delay="delay"
         :prism-lang="prismLang"
         :editor-props="editorProps"
+        :error="error"
         :jsx="jsx"
+        :squiggles="squiggles"
         @change="updatePreview"
       />
     </template>
@@ -30,7 +32,8 @@
         :key="codeKey"
         :code="model"
         @detect-language="switchLanguage"
-        @error="(e) => $emit('error', e)"
+        @error="handleError"
+        @success="error = undefined"
         :components="components"
         :requires="requires"
         :jsx="jsx"
@@ -55,7 +58,7 @@ const LANG_TO_PRISM = {
 const UPDATE_DELAY = 300;
 
 export default {
-  name: "VueLivePreview",
+  name: "VueLive",
   components: { Preview, Editor },
   props: {
     /**
@@ -139,6 +142,14 @@ export default {
       type: Boolean,
       default: true,
     },
+    /**
+     * Show the red markings
+     * where the compiler found errors
+     */
+    squiggles: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
@@ -152,6 +163,7 @@ export default {
        * editor repainted every keystroke
        */
       stableCode: this.code,
+      error: undefined,
     };
   },
   computed: {
@@ -169,7 +181,6 @@ export default {
     updatePreview(code) {
       this.stableCode = code;
       this.model = code;
-
       this.$emit("change", code);
     },
     switchLanguage(newLang) {
@@ -180,6 +191,10 @@ export default {
         this.stableCode = this.model;
       }
     },
+    handleError(e) {
+      this.error = e;
+      this.$emit("error", e);
+    },
   },
 };
 </script>

src/utils/__tests__/checkTemplate.js

@@ -109,7 +109,7 @@ test("parse invalid template with an error if the value is not in data", () => {
   );
 });
 
-test("parse template interpolatio and detect undefined variables", () => {
+test("parse template interpolation and detect lonely undefined variables", () => {
   expect(() =>
     checkTemplate({
       template: "<div><compo>{{ hello }}</compo></div>",
@@ -119,6 +119,27 @@ test("parse template interpolatio and detect undefined variables", () => {
   );
 });
 
+test("parse template interpolation and detect impacted undefined variables", () => {
+  expect(() =>
+    checkTemplate({
+      template: "<div><compo>{{ hello + 'bonjour' }}</compo></div>",
+    })
+  ).toThrowErrorMatchingInlineSnapshot(
+    `"Variable \\"hello\\" is not defined."`
+  );
+});
+
+test("parse template interpolation and detect impacted right variables", () => {
+  expect(() =>
+    checkTemplate({
+      template:
+        "<div><compo>{{ 'bonjour' + hello + 'sayonara' }}</compo></div>",
+    })
+  ).toThrowErrorMatchingInlineSnapshot(
+    `"Variable \\"hello\\" is not defined."`
+  );
+});
+
 test("parse invalid : template by throwing an error", () => {
   expect(() =>
     checkTemplate({