fix: A bunch of fixes for the next branch (#55)

* refactor: abandon functional components

* fix: avoid warning of VueLiveDefaultLayout made reactive

* fix: prevent PrismEditor from inheriting Editor props

Otherwise the event onChange is triggered twice, once by PrismEditor textarea (payload: Event) and once by the Editor (payload: code string)

* fix: externalize Vue from library bundle

Author: LeBenLeBen

demo/CustomLayout.vue

@@ -1,4 +1,4 @@
-<template functional>
+<template>
   <div class="preview-code">
     <div>
       <slot name="editor"></slot>

rollup.config.js

@@ -36,6 +36,7 @@ const rootConfig = {
     "prismjs/components/prism-javascript",
     "prismjs/components/prism-jsx",
     "@vue/compiler-core/dist/compiler-core.cjs",
+    "vue"
   ],
 };
 

src/Editor.vue

@@ -61,6 +61,7 @@ const highlight = (lang, jsxInExamples) => {
 
 export default {
   name: "VueLiveEditor",
+  inheritAttrs: false,
   components: { PrismEditor },
   props: {
     code: {

src/VueLive.vue

@@ -20,11 +20,11 @@
       />
     </template>
     <template v-slot:preview>
-      <!-- 
+      <!--
         * Emitted every time the component rendered throws an error
         * Catches runtime and compilation errors
         * @event error
-        * @property { Error } - the error thrown 
+        * @property { Error } - the error thrown
       -->
       <Preview
         :key="codeKey"
@@ -41,6 +41,7 @@
   </component>
 </template>
 <script>
+import { markRaw } from "vue";
 import hash from "hash-sum";
 
 import Preview from "./Preview.vue";
@@ -145,7 +146,7 @@ export default {
       model: this.code,
       lang: "vue",
       prismLang: "html",
-      VueLiveDefaultLayout,
+      VueLiveDefaultLayout: markRaw(VueLiveDefaultLayout),
       /**
        * this data only gets changed when changing language.
        * it allows for copy and pasting without having the code

src/VueLiveDefaultLayout.vue

@@ -1,4 +1,4 @@
-<template functional>
+<template>
   <div class="VueLive-container">
     <div class="VueLive-editor">
       <slot name="editor" />