First release of a vue 3 compatible vue-live

.releaserc.js

@@ -1,8 +1,12 @@
 module.exports = {
+  branches: [
+    { name: "master" },
+    { name: "next", channel: "next", prerelease: "alpha" }, // Only after the `next` is created in the repo
+  ],
   plugins: [
     "@semantic-release/commit-analyzer",
     "@semantic-release/release-notes-generator",
     "@semantic-release/npm",
-    "@semantic-release/github"
-  ]
+    "@semantic-release/github",
+  ],
 };

demo/App.vue

@@ -18,6 +18,7 @@
         :editorProps="{ lineNumbers: true }"
         :code="codeTemplate"
         :layout="CustomLayout"
+        :components="registeredComponents"
         @error="(e) => log('Error on first example', e)"
       />
     </div>
@@ -98,6 +99,7 @@
 </template>
 <script>
 import { markRaw } from "vue";
+import DatePicker from "vue3-datepicker";
 import { VueLive, VueLiveEditor, VueLivePreview } from "../src";
 import CustomLayout from "./CustomLayout";
 import codeSfc from "!!raw-loader!./assets/Button.vue";
@@ -107,6 +109,7 @@ import codeTemplate from "!!raw-loader!./assets/PureTemplate.html";
 import codeChicago from "!!raw-loader!./assets/Chicago.jsx";
 import all from "./assets/chicagoNeighbourhoods";
 import "prismjs/themes/prism-tomorrow.css";
+import "vue3-datepicker/dist/vue3-datepicker.css";
 
 import GithubCorners from "vue-github-corners";
 
@@ -115,6 +118,7 @@ export default {
   components: { VueLive, VueLiveEditor, VueLivePreview, GithubCorners },
   data() {
     return {
+      registeredComponents: { DatePicker: markRaw(DatePicker) },
       codeSfc,
       codeTemplate,
       codeJs,

demo/assets/PureTemplate.html

@@ -2,4 +2,7 @@
 let today = new Date();
 
 <input type="checkbox" v-model="show">
-<h1 v-if="show">Hello World</h1>
+<date-picker 
+  style="text-align:center;" 
+  v-if="show" 
+  v-model="today"/>

package.json

@@ -51,7 +51,7 @@
     "vue": "^3.0.0",
     "vue-gh-corners": "^3.0.1",
     "vue-github-corners": "^1.2.3",
-    "vuejs-datepicker": "^1.6.2"
+    "vue3-datepicker": "^0.1.0"
   },
   "peerDependencies": {
     "vue": ">= 2.6.0"

src/Editor.vue

@@ -1,7 +1,7 @@
 <template>
   <PrismEditor
     v-model="stableCode"
-    @input="updatePreview"
+    @update:modelValue="updatePreview"
     :highlight="highlighter"
     v-bind="editorProps"
   />
@@ -41,20 +41,21 @@ const highlight = (lang, jsxInExamples) => {
         return scriptCodeHighlighted;
       }
       const templateCode = code.slice(scriptCode.length);
-      const templateHighlighted = prismHighlight(templateCode, languages["html"], lang)
-      return (
-        scriptCodeHighlighted +
-        templateHighlighted
+      const templateHighlighted = prismHighlight(
+        templateCode,
+        languages["html"],
+        lang
       );
+      return scriptCodeHighlighted + templateHighlighted;
     };
   } else {
     return (code) => {
       const langScheme = languages[lang];
-      if(!langScheme){
-        return code
+      if (!langScheme) {
+        return code;
       }
       return prismHighlight(code, langScheme, lang);
-    }
+    };
   }
 };
 

src/Preview.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import { markRaw } from "vue";
+import { markRaw, h } from "vue";
 import {
   compile as compileScript,
   isCodeVueSfc,
@@ -148,7 +148,8 @@ export default {
               script,
               (filepath) => requireAtRuntime(this.requires, filepath),
               adaptCreateElement,
-              concatenate
+              concatenate,
+              h
             ) || {};
 
           if (this.dataScope) {

src/utils/evalInContext.js

@@ -8,10 +8,18 @@ export default function evalInContext(
   code,
   require,
   adaptCreateElement,
-  concatenate
+  concatenate,
+  h
 ) {
   // eslint-disable-next-line no-new-func
-  const func = new Function("require", "__pragma__", "__concatenate__", code);
+  const func = new Function(
+    "require",
+    "__pragma__",
+    "__concatenate__",
+    "h",
+    // FIXME: this "replace" should be removed as soona s the compiler utils are updated to vue 3
+    code.replace(/var h = this\.\$createElement;/, "")
+  );
 
-  return func(require, adaptCreateElement, concatenate);
+  return func(require, adaptCreateElement, concatenate, h);
 }

src/utils/getScript.js

@@ -23,6 +23,8 @@ export default function(code, jsxInExamples) {
     return code;
   }
 
+  code = code || "";
+
   //else it will be considered pseudo jsx of vue-styleguidist
   return /^</.test(code.trim()) ? "" : code.split(/\n[\t ]*</)[0];
 }