From d49df4ec692374bfe6f7041d1d141f7563d65e46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benoi=CC=82t=20Burgener?= <benoit.burgener@gmail.com>
Date: Wed, 21 Oct 2020 11:48:11 +0200
Subject: [PATCH 1/4] refactor: abandon functional components

---
 demo/CustomLayout.vue        | 2 +-
 src/VueLiveDefaultLayout.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/demo/CustomLayout.vue b/demo/CustomLayout.vue
index bbc9d69..8634ecb 100644
--- a/demo/CustomLayout.vue
+++ b/demo/CustomLayout.vue
@@ -1,4 +1,4 @@
-<template functional>
+<template>
   <div class="preview-code">
     <div>
       <slot name="editor"></slot>
diff --git a/src/VueLiveDefaultLayout.vue b/src/VueLiveDefaultLayout.vue
index 9a71b4e..f95e887 100644
--- a/src/VueLiveDefaultLayout.vue
+++ b/src/VueLiveDefaultLayout.vue
@@ -1,4 +1,4 @@
-<template functional>
+<template>
   <div class="VueLive-container">
     <div class="VueLive-editor">
       <slot name="editor" />

From 52272cd0088ab01185c763dc9f57ef8a0cbcb2bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benoi=CC=82t=20Burgener?= <benoit.burgener@gmail.com>
Date: Wed, 21 Oct 2020 11:48:40 +0200
Subject: [PATCH 2/4] fix: avoid warning of VueLiveDefaultLayout made reactive

---
 src/VueLive.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/VueLive.vue b/src/VueLive.vue
index f9009c2..ef29fc0 100644
--- a/src/VueLive.vue
+++ b/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

From 3015d851535b68dcda8c76a82dc72e58b192289e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benoi=CC=82t=20Burgener?= <benoit.burgener@gmail.com>
Date: Wed, 21 Oct 2020 11:50:30 +0200
Subject: [PATCH 3/4] 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)
---
 src/Editor.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Editor.vue b/src/Editor.vue
index 91734bf..44da6d4 100644
--- a/src/Editor.vue
+++ b/src/Editor.vue
@@ -61,6 +61,7 @@ const highlight = (lang, jsxInExamples) => {
 
 export default {
   name: "VueLiveEditor",
+  inheritAttrs: false,
   components: { PrismEditor },
   props: {
     code: {

From 709eb0d69bbec6cb2e5ffef3d7f0411b8df63458 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benoi=CC=82t=20Burgener?= <benoit.burgener@gmail.com>
Date: Wed, 21 Oct 2020 11:50:50 +0200
Subject: [PATCH 4/4] fix: externalize Vue from library bundle

---
 rollup.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/rollup.config.js b/rollup.config.js
index 9079962..4cfce0f 100644
--- a/rollup.config.js
+++ b/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"
   ],
 };