allow script and script setup in same example (#104)

* allow script and script setup in same example

* fix build

* use highlighter from vsg

* fix editor line numbers

* build editor errors

Author: elevatebart

package-lock.json

@@ -23,7 +23,8 @@
     "debounce": "^1.2.1",
     "hash-sum": "^2.0.0",
     "prismjs": "^1.29.0",
-    "vue-inbrowser-compiler-sucrase": "^4.62.1",
+    "vue-inbrowser-compiler-sucrase": "^4.64.1",
+    "vue-inbrowser-prismjs-highlighter": "^4.69.1",
     "vue-prism-editor": "^2.0.0-alpha.2"
   },
   "devDependencies": {

package.json

@@ -1,15 +1,16 @@
 <template>
-  <PrismEditor v-model="stableCode" @update:modelValue="updatePreview" :highlight="highlighter" v-bind="editorProps" />
+  <PrismEditor :class="{ 'VueLive-LineNumbers': editorProps.lineNumbers }" v-model="stableCode"
+    @update:modelValue="updatePreview" :highlight="highlighter" v-bind="editorProps" :lineNumbers="false" />
 </template>
 
 <script lang="ts">
 import { defineComponent, type PropType } from "vue";
 import { PrismEditor } from "vue-prism-editor";
+import makeHighlight, { CONFIGURED_LANGS, type CONFIGURED_LANGS_TYPE } from "vue-inbrowser-prismjs-highlighter";
 import debounce from "debounce";
 
 import "vue-prism-editor/dist/prismeditor.min.css";
 
-import makeHighlight, { CONFIGURED_LANGS, type CONFIGURED_LANGS_TYPE } from "./utils/highlight";
 
 const UPDATE_DELAY = 300;
 
@@ -37,7 +38,7 @@ export default defineComponent({
     prismLang: {
       type: String as PropType<CONFIGURED_LANGS_TYPE>,
       default: "html",
-      validator: (val: string) => CONFIGURED_LANGS.includes(val as CONFIGURED_LANGS_TYPE),
+      validator: (val: CONFIGURED_LANGS_TYPE) => CONFIGURED_LANGS.includes(val),
     },
     jsx: {
       type: Boolean,
@@ -57,10 +58,7 @@ export default defineComponent({
        * editor repainted every keystroke
        */
       stableCode: this.code,
-      highlight: (() => (code: string) => code) as (
-        lang: CONFIGURED_LANGS_TYPE,
-        jsxInExamples: boolean
-      ) => (code: string, errorLoc: any) => string,
+      highlight: (() => (code: string) => code) as Awaited<ReturnType<typeof makeHighlight>>,
     };
   },
   async beforeMount() {
@@ -69,16 +67,51 @@ export default defineComponent({
      * load javascript first then load jsx
      * order is not guaranteed to work in ESmodules imports
      */
-    this.highlight = await makeHighlight();
+    this.highlight = await makeHighlight('VueLive-squiggles');
   },
   methods: {
     highlighter(code: string) {
       return this.highlight(this.prismLang, this.jsx)(
         code,
-        this.squiggles && this.error && this.error.loc
+        this.squiggles && this.adaptedErrorLoc ? this.adaptedErrorLoc : undefined
       );
     },
   },
+  computed: {
+    adaptedErrorLoc() {
+      // for now, we only support error in vsg format. 
+      // TODO: figure out how SourceMaps work and use them to support vue-sfc format
+      if (this.prismLang !== 'vsg') {
+        return undefined
+      }
+
+      const scriptEnd = /\n[\t ]*</.exec(this.stableCode)
+      const scriptCode = scriptEnd ? this.stableCode.slice(0, scriptEnd.index + 1) : ''
+      const linesInScriptCode = (/^[\t ]*</.test(scriptCode) ? 0 : (scriptCode.match(/\n/g)?.length || 0)) + 1
+
+      return this.error && this.error.loc ?
+        this.error.loc.start ?
+          {
+            start: {
+              ...this.error.loc.start,
+              line: this.error.loc.start.line + linesInScriptCode,
+            },
+            end: {
+              ...this.error.loc.end,
+              line: this.error.loc.end.line + linesInScriptCode,
+            },
+          } : this.error.loc.line ? {
+            start: {
+              ...this.error.loc,
+              line: this.error.loc.line + linesInScriptCode,
+            },
+            end: {
+              ...this.error.loc,
+              line: this.error.loc.line + linesInScriptCode,
+            },
+          } : undefined : undefined
+    },
+  },
   watch: {
     code(value) {
       this.updatePreview(value);
@@ -103,4 +136,31 @@ export default defineComponent({
 .VueLive-squiggles {
   border-bottom: 2px dotted red;
 }
+
+.VueLive-LineNumbers.prism-editor-wrapper pre.prism-editor__editor,
+.VueLive-LineNumbers.prism-editor-wrapper textarea.prism-editor__textarea {
+  padding-left: 2.5rem;
+}
+
+
+.VueLive-LineNumbers pre.prism-editor__editor {
+  counter-reset: step;
+  counter-increment: step 0;
+}
+
+.VueLive-LineNumbers pre .line {
+  position: relative;
+}
+
+.VueLive-LineNumbers pre .line::before {
+  content: counter(step);
+  counter-increment: step;
+  white-space: nowrap;
+  width: 2rem;
+  position: absolute;
+  left: -2.5rem;
+  display: inline-block;
+  text-align: right;
+  color: rgba(255, 255, 255, .4)
+}
 </style>

src/Editor.vue

@@ -25,7 +25,7 @@ import hash from "hash-sum";
 import Preview from "./Preview.vue";
 import Editor from "./Editor.vue";
 import VueLiveDefaultLayout from "./VueLiveDefaultLayout.vue";
-import type { CONFIGURED_LANGS_TYPE } from "./utils/highlight";
+import type { CONFIGURED_LANGS_TYPE } from "vue-inbrowser-prismjs-highlighter";
 
 const LANG_TO_PRISM = {
   vue: "html",