Compatibility with script setup (#100)

* add setup example

* add test for checkTemplate

* upgrade compiler and fix checkTemplate

* fix ci from missing script

* remove empty line on top of example

Author: elevatebart

.github/workflows/pr.yml

@@ -20,7 +20,7 @@ jobs:
         run: npm ci
 
       - name: Check types
-        run: npm run types:check
+        run: npm run types
 
       - name: Test unit
         run: npm run test:unit

demo/App.vue

@@ -27,6 +27,8 @@
         file components as well
       </p>
       <VueLive :code="codeSfc" :layout="CustomLayout" />
+			<h2>SFC with setup</h2>
+      <VueLive :code="codeSfcSetup" :layout="CustomLayout" />
       <h2>Pure JavaScript code</h2>
       <p>Or if you prefer to, use the <b>new Vue()</b> format</p>
       <VueLive :code="codeJs" :layout="CustomLayout" />
@@ -87,6 +89,7 @@ import DatePicker from "vue3-datepicker";
 import { VueLive, VueLiveEditor, VueLivePreview } from "../src";
 import CustomLayout from "./CustomLayout.vue";
 import codeSfc from "./assets/Button.vue?raw";
+import codeSfcSetup from "./assets/ButtonSetup.vue?raw";
 import codeJs from "./assets/input.js?raw";
 import realjsx from "./assets/real.jsx?raw";
 import codeTemplate from "./assets/PureTemplate.html?raw";
@@ -106,6 +109,7 @@ export default defineComponent({
     return {
       registeredComponents: { DatePicker: markRaw(DatePicker) },
       codeSfc,
+			codeSfcSetup,
       codeTemplate,
       codeJs,
       codeChicago,

demo/assets/ButtonSetup.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const msg = ref("Push Me")
+</script>
+
+<template>
+  <div class="hello">
+    <h1>Colored Text</h1>
+    <button>{{ msg }}</button>
+  </div>
+</template>
+
+<style>
+.hello {
+  text-align: center;
+  color: #900;
+}
+</style>

package-lock.json

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

package.json

@@ -60,6 +60,22 @@ test("parse valid template without error with a value in methods", () => {
   ).not.toThrow();
 });
 
+test("parse valid template without error with values returned from setup", () => {
+  expect(() =>
+    checkTemplate({
+      template: '<div><compo :value="today">{{ msg }}</compo></div>',
+      setup() {
+        return {
+          today() {
+						return "bonjour";
+					},
+					msg: "hello"
+        }
+      },
+    })
+  ).not.toThrow();
+});
+
 test("parse false value as a valid value", () => {
   expect(() =>
     checkTemplate({

src/utils/checkTemplate.spec.ts

@@ -15,6 +15,7 @@ interface Options {
   computed?: Record<string, any>;
   methods?: Record<string, any>;
   attrAllowList?: string[];
+	setup?: () => (Record<string, any> | void)
 }
 
 export default function (
@@ -48,12 +49,16 @@ export default function (
 
   const methodsArray =
     $options && $options.methods ? Object.keys($options.methods) : [];
+	
+	const setupOutput =
+    $options && typeof $options.setup === 'function' ? Object.keys($options.setup() ?? {}) : [];
 
   const scriptVars = [
     ...propNamesArray,
     ...dataArray,
     ...computedArray,
     ...methodsArray,
+		...setupOutput
   ];
 
   // Define list of attributes for which name check will be skipped. Defaults to known camelCased SVG attributes.