From 97cccc956e6ce0539f90372ab81c88046f456a50 Mon Sep 17 00:00:00 2001
From: ElevateBart <ledouxb@gmail.com>
Date: Thu, 22 Oct 2020 00:12:49 -0500
Subject: [PATCH 1/8] feat: display squiggles on error

---
 src/Editor.vue             | 66 +++++++++++++-------------------------
 src/Preview.vue            |  5 +--
 src/VueLive.vue            | 12 +++++--
 src/utils/checkTemplate.js | 14 +++++---
 src/utils/highlight.js     | 66 ++++++++++++++++++++++++++++++++++++++
 5 files changed, 109 insertions(+), 54 deletions(-)
 create mode 100644 src/utils/highlight.js

diff --git a/src/Editor.vue b/src/Editor.vue
index e31e593..7d52ce7 100644
--- a/src/Editor.vue
+++ b/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,
@@ -97,7 +60,10 @@ export default {
   },
   methods: {
     highlighter(code) {
-      return highlight(this.prismLang, this.jsx)(code);
+      return highlight(this.prismLang, this.jsx)(
+        code,
+        this.error && this.error.loc
+      );
     },
   },
   watch: {
@@ -113,3 +79,15 @@ export default {
   },
 };
 </script>
+
+<style>
+.VueLive-squiggles-wrapper {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.VueLive-squiggles {
+  border-bottom: 2px dotted red;
+}
+</style>
diff --git a/src/Preview.vue b/src/Preview.vue
index b799953..f5ac6ce 100644
--- a/src/Preview.vue
+++ b/src/Preview.vue
@@ -166,7 +166,7 @@ export default {
       }
 
       try {
-        checkTemplate(options, this.checkVariableAvailability);
+        checkTemplate(options, this.checkVariableAvailability, code);
       } catch (e) {
         this.handleError(e);
         return;
@@ -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");
     },
   },
 };
diff --git a/src/VueLive.vue b/src/VueLive.vue
index f9009c2..cffe010 100644
--- a/src/VueLive.vue
+++ b/src/VueLive.vue
@@ -15,6 +15,7 @@
         :delay="delay"
         :prism-lang="prismLang"
         :editor-props="editorProps"
+        :error="error"
         :jsx="jsx"
         @change="updatePreview"
       />
@@ -30,7 +31,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 +57,7 @@ const LANG_TO_PRISM = {
 const UPDATE_DELAY = 300;
 
 export default {
-  name: "VueLivePreview",
+  name: "VueLive",
   components: { Preview, Editor },
   props: {
     /**
@@ -152,6 +154,7 @@ export default {
        * editor repainted every keystroke
        */
       stableCode: this.code,
+      error: undefined,
     };
   },
   computed: {
@@ -169,7 +172,6 @@ export default {
     updatePreview(code) {
       this.stableCode = code;
       this.model = code;
-
       this.$emit("change", code);
     },
     switchLanguage(newLang) {
@@ -180,6 +182,10 @@ export default {
         this.stableCode = this.model;
       }
     },
+    handleError(e) {
+      this.error = e;
+      this.$emit("error", e);
+    },
   },
 };
 </script>
diff --git a/src/utils/checkTemplate.js b/src/utils/checkTemplate.js
index 41470a4..51a4beb 100644
--- a/src/utils/checkTemplate.js
+++ b/src/utils/checkTemplate.js
@@ -1,4 +1,5 @@
 import { parse as parseVue } from "@vue/compiler-dom";
+// force proper english errors
 import { createCompilerError } from "@vue/compiler-core/dist/compiler-core.cjs";
 import { parse as parseEs } from "acorn";
 import { visit } from "recast";
@@ -7,7 +8,7 @@ const ELEMENT = 1;
 const SIMPLE_EXPRESSION = 4;
 const INTERPOLATION = 5;
 
-export default function($options, checkVariableAvailability) {
+export default function($options, checkVariableAvailability, code) {
   if (!$options.template) {
     return;
   }
@@ -15,7 +16,7 @@ export default function($options, checkVariableAvailability) {
   try {
     ast = parseVue($options.template);
   } catch (e) {
-    throw createCompilerError(e.code);
+    throw createCompilerError(e.code, e.loc);
   }
 
   if (!checkVariableAvailability) {
@@ -95,7 +96,7 @@ export default function($options, checkVariableAvailability) {
                 ...templateVars,
               ]);
             } catch (e) {
-              throw new VueLiveParseTemplateError(e.message, exp, e);
+              throw new VueLiveParseTemplateError(e.message, exp, e, attr.loc);
             }
           }
         });
@@ -112,7 +113,9 @@ export default function($options, checkVariableAvailability) {
           throw new VueLiveParseTemplateError(
             e.message,
             templateAst.content,
-            e
+            e,
+            templateAst.loc,
+            code
           );
         }
       }
@@ -183,8 +186,9 @@ export function VueLiveUndefinedVariableError(message, varName) {
   this.varName = varName;
 }
 
-export function VueLiveParseTemplateError(message, expression, subError) {
+export function VueLiveParseTemplateError(message, expression, subError, loc) {
   this.message = message;
   this.expression = expression;
   this.subError = subError;
+  this.loc = loc;
 }
diff --git a/src/utils/highlight.js b/src/utils/highlight.js
new file mode 100644
index 0000000..33d71a6
--- /dev/null
+++ b/src/utils/highlight.js
@@ -0,0 +1,66 @@
+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 getScript from "./getScript";
+
+export default (lang, jsxInExamples) => {
+  if (lang === "vsg") {
+    return (code, errorLoc) => {
+      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 (
+        getSquiggles(errorLoc, scriptCode.split("\n").length) +
+        scriptCodeHighlighted +
+        templateHighlighted
+      );
+    };
+  } else {
+    return (code, errorLoc) => {
+      const langScheme = languages[lang];
+      if (!langScheme) {
+        return code;
+      }
+
+      return getSquiggles(errorLoc) + prismHighlight(code, langScheme, lang);
+    };
+  }
+};
+
+function getSquiggles(errorLoc, lineOffset = 0) {
+  const errorWidth =
+    errorLoc && errorLoc.end
+      ? errorLoc.end.column - errorLoc.start.column + 1
+      : 2;
+  let { line, column } = errorLoc ? errorLoc.start || errorLoc : {};
+  return errorLoc
+    ? '<span class="VueLive-squiggles-wrapper"> ' +
+        Array(errorLoc.start ? line + lineOffset - 1 : line).join("\n") +
+        Array(column).join(" ") +
+        '<span class="VueLive-squiggles">' +
+        Array(errorWidth).join(" ") +
+        "</span></span>"
+    : "";
+}

From fcc1255e2374f45d45fcedba29c5e9340bd2db16 Mon Sep 17 00:00:00 2001
From: ElevateBart <ledouxb@gmail.com>
Date: Thu, 22 Oct 2020 00:20:58 -0500
Subject: [PATCH 2/8] docs: fix comment

---
 src/Preview.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Preview.vue b/src/Preview.vue
index f5ac6ce..1b0e256 100644
--- a/src/Preview.vue
+++ b/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

From 2e91e4b5506405a4c7154f153957929c7f346cab Mon Sep 17 00:00:00 2001
From: ElevateBart <ledouxb@gmail.com>
Date: Thu, 22 Oct 2020 01:04:50 -0500
Subject: [PATCH 3/8] fix: invalid attributenames blocking

---
 src/Preview.vue            |  2 +-
 src/utils/checkTemplate.js | 16 ++++++++---
 src/utils/highlight.js     | 55 +++++++++++++++++++++++++++-----------
 3 files changed, 53 insertions(+), 20 deletions(-)

diff --git a/src/Preview.vue b/src/Preview.vue
index 1b0e256..270e808 100644
--- a/src/Preview.vue
+++ b/src/Preview.vue
@@ -166,7 +166,7 @@ export default {
       }
 
       try {
-        checkTemplate(options, this.checkVariableAvailability, code);
+        checkTemplate(options, this.checkVariableAvailability);
       } catch (e) {
         this.handleError(e);
         return;
diff --git a/src/utils/checkTemplate.js b/src/utils/checkTemplate.js
index 51a4beb..63d2aaf 100644
--- a/src/utils/checkTemplate.js
+++ b/src/utils/checkTemplate.js
@@ -8,7 +8,7 @@ const ELEMENT = 1;
 const SIMPLE_EXPRESSION = 4;
 const INTERPOLATION = 5;
 
-export default function($options, checkVariableAvailability, code) {
+export default function($options, checkVariableAvailability) {
   if (!$options.template) {
     return;
   }
@@ -49,6 +49,12 @@ export default function($options, checkVariableAvailability, code) {
       const templateVars = [];
       if (templateAst.type === ELEMENT) {
         templateAst.props.forEach((attr) => {
+          if (!/^[a-z,-,:]+$/g.test(attr.name)) {
+            throw new VueLiveParseTemplateAttrError(
+              "[VueLive] Invalid attribute name: " + attr.name,
+              attr.loc
+            );
+          }
           const exp =
             attr.type !== SIMPLE_EXPRESSION && attr.exp
               ? attr.exp.content
@@ -114,8 +120,7 @@ export default function($options, checkVariableAvailability, code) {
             e.message,
             templateAst.content,
             e,
-            templateAst.loc,
-            code
+            templateAst.loc
           );
         }
       }
@@ -186,6 +191,11 @@ export function VueLiveUndefinedVariableError(message, varName) {
   this.varName = varName;
 }
 
+export function VueLiveParseTemplateAttrError(message, loc) {
+  this.message = message;
+  this.loc = loc;
+}
+
 export function VueLiveParseTemplateError(message, expression, subError, loc) {
   this.message = message;
   this.expression = expression;
diff --git a/src/utils/highlight.js b/src/utils/highlight.js
index 33d71a6..fba9a98 100644
--- a/src/utils/highlight.js
+++ b/src/utils/highlight.js
@@ -32,7 +32,10 @@ export default (lang, jsxInExamples) => {
       );
 
       return (
-        getSquiggles(errorLoc, scriptCode.split("\n").length) +
+        getSquiggles(
+          errorLoc,
+          errorLoc && errorLoc.start ? scriptCode.split("\n").length : 0
+        ) +
         scriptCodeHighlighted +
         templateHighlighted
       );
@@ -44,23 +47,43 @@ export default (lang, jsxInExamples) => {
         return code;
       }
 
-      return getSquiggles(errorLoc) + prismHighlight(code, langScheme, lang);
+      let lineOffset = 0;
+      // if we look at a SFC code
+      if (lang === "html" && errorLoc && errorLoc.start) {
+        // offset the line to the block where the error has been discovered
+        // in the template if errorLoc has a start & end
+        const codeBeforeTemplate = code.split(/<template/)[0];
+
+        lineOffset = codeBeforeTemplate.split("\n").length;
+      }
+
+      return (
+        getSquiggles(errorLoc, lineOffset) +
+        prismHighlight(code, langScheme, lang)
+      );
     };
   }
 };
 
-function getSquiggles(errorLoc, lineOffset = 0) {
-  const errorWidth =
-    errorLoc && errorLoc.end
-      ? errorLoc.end.column - errorLoc.start.column + 1
-      : 2;
-  let { line, column } = errorLoc ? errorLoc.start || errorLoc : {};
-  return errorLoc
-    ? '<span class="VueLive-squiggles-wrapper"> ' +
-        Array(errorLoc.start ? line + lineOffset - 1 : line).join("\n") +
-        Array(column).join(" ") +
-        '<span class="VueLive-squiggles">' +
-        Array(errorWidth).join(" ") +
-        "</span></span>"
-    : "";
+function getSquiggles(errorLoc, lineOffset = 0, columnOffSet = 0) {
+  if (!errorLoc) return "";
+  const errorWidth = errorLoc.end
+    ? errorLoc.end.column - errorLoc.start.column + 1
+    : 2;
+  let line, column;
+  if (errorLoc.start) {
+    line = errorLoc.start.line - 1;
+    column = errorLoc.start.column;
+  } else {
+    line = errorLoc.line;
+    column = errorLoc.column;
+  }
+  return (
+    '<span class="VueLive-squiggles-wrapper"> ' +
+    Array(line + lineOffset).join("\n") +
+    Array(column + columnOffSet).join(" ") +
+    '<span class="VueLive-squiggles">' +
+    Array(errorWidth).join(" ") +
+    "</span></span>"
+  );
 }

From ad5291b7c26b1e22bbb3ca0e503c450d1c48799b Mon Sep 17 00:00:00 2001
From: ElevateBart <ledouxb@gmail.com>
Date: Thu, 22 Oct 2020 11:50:55 -0500
Subject: [PATCH 4/8] fix: template check expressions

---
 src/utils/__tests__/checkTemplate.js | 23 ++++++++++++++++++++++-
 src/utils/checkTemplate.js           |  2 ++
 src/utils/highlight.js               | 13 ++-----------
 3 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/utils/__tests__/checkTemplate.js b/src/utils/__tests__/checkTemplate.js
index c276534..9041266 100644
--- a/src/utils/__tests__/checkTemplate.js
+++ b/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({
diff --git a/src/utils/checkTemplate.js b/src/utils/checkTemplate.js
index 63d2aaf..d8014bc 100644
--- a/src/utils/checkTemplate.js
+++ b/src/utils/checkTemplate.js
@@ -142,6 +142,8 @@ export function checkExpression(expression, availableVars, templateVars) {
       if (
         identifier.name === "expression" ||
         identifier.name === "argument" ||
+        identifier.name === "left" ||
+        identifier.name === "right" ||
         identifier.parentPath.name === "arguments"
       ) {
         if (
diff --git a/src/utils/highlight.js b/src/utils/highlight.js
index fba9a98..3de8ee9 100644
--- a/src/utils/highlight.js
+++ b/src/utils/highlight.js
@@ -47,18 +47,9 @@ export default (lang, jsxInExamples) => {
         return code;
       }
 
-      let lineOffset = 0;
-      // if we look at a SFC code
-      if (lang === "html" && errorLoc && errorLoc.start) {
-        // offset the line to the block where the error has been discovered
-        // in the template if errorLoc has a start & end
-        const codeBeforeTemplate = code.split(/<template/)[0];
-
-        lineOffset = codeBeforeTemplate.split("\n").length;
-      }
-
       return (
-        getSquiggles(errorLoc, lineOffset) +
+        // if the error is in the template no need for column padding
+        getSquiggles(errorLoc, 1, errorLoc && errorLoc.start ? 0 : 1) +
         prismHighlight(code, langScheme, lang)
       );
     };

From d843ce7b49031404f8d0fd8b63e2eac862c58690 Mon Sep 17 00:00:00 2001
From: ElevateBart <ledouxb@gmail.com>
Date: Thu, 22 Oct 2020 11:53:59 -0500
Subject: [PATCH 5/8] feat: make squiggles optional

---
 src/Editor.vue  | 6 +++++-
 src/VueLive.vue | 9 +++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/Editor.vue b/src/Editor.vue
index 7d52ce7..6776030 100644
--- a/src/Editor.vue
+++ b/src/Editor.vue
@@ -46,6 +46,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    squiggles: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
@@ -62,7 +66,7 @@ export default {
     highlighter(code) {
       return highlight(this.prismLang, this.jsx)(
         code,
-        this.error && this.error.loc
+        this.squiggles && this.error && this.error.loc
       );
     },
   },
diff --git a/src/VueLive.vue b/src/VueLive.vue
index cffe010..7df628e 100644
--- a/src/VueLive.vue
+++ b/src/VueLive.vue
@@ -17,6 +17,7 @@
         :editor-props="editorProps"
         :error="error"
         :jsx="jsx"
+        :squiggles="squiggles"
         @change="updatePreview"
       />
     </template>
@@ -141,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 {

From 8b27667a69752454ff677bea7be6101f9947f2e0 Mon Sep 17 00:00:00 2001
From: ElevateBart <ledouxb@gmail.com>
Date: Thu, 22 Oct 2020 17:57:12 -0500
Subject: [PATCH 6/8] fix: highlight properly the errors

---
 demo/App.vue           | 23 +++++++++++++++--------
 package-lock.json      | 26 +++++++++++++-------------
 package.json           |  2 +-
 src/utils/highlight.js |  5 ++++-
 4 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/demo/App.vue b/demo/App.vue
index 0b39a33..5cfaa05 100644
--- a/demo/App.vue
+++ b/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: {
diff --git a/package-lock.json b/package-lock.json
index 08b4721..de420fd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6625,9 +6625,9 @@
       },
       "dependencies": {
         "acorn": {
-          "version": "6.4.1",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
-          "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA=="
+          "version": "6.4.2",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.2.tgz",
+          "integrity": "sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ=="
         },
         "os-homedir": {
           "version": "2.0.0",
@@ -19365,29 +19365,29 @@
       "dev": true
     },
     "vue-inbrowser-compiler": {
-      "version": "4.32.1",
-      "resolved": "https://registry.npmjs.org/vue-inbrowser-compiler/-/vue-inbrowser-compiler-4.32.1.tgz",
-      "integrity": "sha512-eHNJ6fenrTISxS2t540eB6K7O4AcZX7x73ZHHkK78sGAFeRDaxB17gEqtPPY2mgSi124gEy1I0MzFo+cHEJNSA==",
+      "version": "4.33.4",
+      "resolved": "https://registry.npmjs.org/vue-inbrowser-compiler/-/vue-inbrowser-compiler-4.33.4.tgz",
+      "integrity": "sha512-7CmoZaXMLQlA8DH3849OOeuYIhHTC0jHYNsrCxN/nBp/1wD+4e6tAedE5yqcy0zw8qfXRmK5Sl/TZW4GZA8lzg==",
       "requires": {
         "acorn": "^6.1.1",
         "acorn-jsx": "^5.0.1",
         "buble": "^0.19.7",
         "camelcase": "^5.3.1",
-        "vue-inbrowser-compiler-utils": "^4.32.1",
+        "vue-inbrowser-compiler-utils": "^4.33.4",
         "walkes": "^0.2.1"
       },
       "dependencies": {
         "acorn": {
-          "version": "6.4.1",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
-          "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA=="
+          "version": "6.4.2",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.2.tgz",
+          "integrity": "sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ=="
         }
       }
     },
     "vue-inbrowser-compiler-utils": {
-      "version": "4.32.1",
-      "resolved": "https://registry.npmjs.org/vue-inbrowser-compiler-utils/-/vue-inbrowser-compiler-utils-4.32.1.tgz",
-      "integrity": "sha512-IL8rBV3lCyHErqD8sBdQhWz3zJ/wLzG6JfoSzZ3K6HShS5QqIQfJN0GESvzIos6EGvmtByEf4TTJnjm12b51VQ==",
+      "version": "4.33.4",
+      "resolved": "https://registry.npmjs.org/vue-inbrowser-compiler-utils/-/vue-inbrowser-compiler-utils-4.33.4.tgz",
+      "integrity": "sha512-8/YvqKy0s7UUUdR8eHLwbuAEb3qs5SfM4Og21E9scKxAwfFBw20YJCLnXB/uEbYsGGpuMg/oY0P7lehfBhm1Tw==",
       "requires": {
         "camelcase": "^5.3.1"
       }
diff --git a/package.json b/package.json
index 2e0d282..e6a5e11 100644
--- a/package.json
+++ b/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"
   },
diff --git a/src/utils/highlight.js b/src/utils/highlight.js
index 3de8ee9..dc6c91d 100644
--- a/src/utils/highlight.js
+++ b/src/utils/highlight.js
@@ -47,9 +47,12 @@ export default (lang, jsxInExamples) => {
         return code;
       }
 
+      const lineOffset = errorLoc && errorLoc.start ? 1 : 0;
+      const colOffset = errorLoc && errorLoc.start ? 0 : 1;
+
       return (
         // if the error is in the template no need for column padding
-        getSquiggles(errorLoc, 1, errorLoc && errorLoc.start ? 0 : 1) +
+        getSquiggles(errorLoc, lineOffset, colOffset) +
         prismHighlight(code, langScheme, lang)
       );
     };

From 7d4c7f41e064a3703f608bcc02b67de6d2e79592 Mon Sep 17 00:00:00 2001
From: ElevateBart <ledouxb@gmail.com>
Date: Thu, 22 Oct 2020 18:18:47 -0500
Subject: [PATCH 7/8] fix: simplify the squiggles

---
 src/utils/highlight.js | 21 +++++----------------
 1 file changed, 5 insertions(+), 16 deletions(-)

diff --git a/src/utils/highlight.js b/src/utils/highlight.js
index dc6c91d..5d1252a 100644
--- a/src/utils/highlight.js
+++ b/src/utils/highlight.js
@@ -34,7 +34,7 @@ export default (lang, jsxInExamples) => {
       return (
         getSquiggles(
           errorLoc,
-          errorLoc && errorLoc.start ? scriptCode.split("\n").length : 0
+          errorLoc && errorLoc.start ? scriptCode.split("\n").length - 1 : 0
         ) +
         scriptCodeHighlighted +
         templateHighlighted
@@ -47,13 +47,9 @@ export default (lang, jsxInExamples) => {
         return code;
       }
 
-      const lineOffset = errorLoc && errorLoc.start ? 1 : 0;
-      const colOffset = errorLoc && errorLoc.start ? 0 : 1;
-
       return (
         // if the error is in the template no need for column padding
-        getSquiggles(errorLoc, lineOffset, colOffset) +
-        prismHighlight(code, langScheme, lang)
+        getSquiggles(errorLoc) + prismHighlight(code, langScheme, lang)
       );
     };
   }
@@ -64,18 +60,11 @@ function getSquiggles(errorLoc, lineOffset = 0, columnOffSet = 0) {
   const errorWidth = errorLoc.end
     ? errorLoc.end.column - errorLoc.start.column + 1
     : 2;
-  let line, column;
-  if (errorLoc.start) {
-    line = errorLoc.start.line - 1;
-    column = errorLoc.start.column;
-  } else {
-    line = errorLoc.line;
-    column = errorLoc.column;
-  }
+  let { line, column } = errorLoc.start ? errorLoc.start : errorLoc;
   return (
-    '<span class="VueLive-squiggles-wrapper"> ' +
+    '<span class="VueLive-squiggles-wrapper">' +
     Array(line + lineOffset).join("\n") +
-    Array(column + columnOffSet).join(" ") +
+    Array(column + columnOffSet + 1).join(" ") +
     '<span class="VueLive-squiggles">' +
     Array(errorWidth).join(" ") +
     "</span></span>"

From cb10dafee95dc27a5a7fa41bf77fb9b980fbbe6f Mon Sep 17 00:00:00 2001
From: ElevateBart <ledouxb@gmail.com>
Date: Thu, 22 Oct 2020 18:20:13 -0500
Subject: [PATCH 8/8] fix: add squiggles to script only

---
 src/utils/highlight.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/utils/highlight.js b/src/utils/highlight.js
index 5d1252a..35bf3fc 100644
--- a/src/utils/highlight.js
+++ b/src/utils/highlight.js
@@ -22,7 +22,7 @@ export default (lang, jsxInExamples) => {
         lang
       );
       if (code.length === scriptCode.length) {
-        return scriptCodeHighlighted;
+        return getSquiggles(errorLoc) + scriptCodeHighlighted;
       }
       const templateCode = code.slice(scriptCode.length);
       const templateHighlighted = prismHighlight(
@@ -57,6 +57,7 @@ export default (lang, jsxInExamples) => {
 
 function getSquiggles(errorLoc, lineOffset = 0, columnOffSet = 0) {
   if (!errorLoc) return "";
+  columnOffSet = errorLoc.start ? 0 : 1;
   const errorWidth = errorLoc.end
     ? errorLoc.end.column - errorLoc.start.column + 1
     : 2;
@@ -64,7 +65,7 @@ function getSquiggles(errorLoc, lineOffset = 0, columnOffSet = 0) {
   return (
     '<span class="VueLive-squiggles-wrapper">' +
     Array(line + lineOffset).join("\n") +
-    Array(column + columnOffSet + 1).join(" ") +
+    Array(column + columnOffSet).join(" ") +
     '<span class="VueLive-squiggles">' +
     Array(errorWidth).join(" ") +
     "</span></span>"