feat: add custom delay prop

Author: elevatebart

demo/App.vue

@@ -12,9 +12,15 @@
     <VueLive :code="codeJs" :layout="CustomLayout"/>
     <h2>Use the requires prop to make libraries and packages available in the browser</h2>
     <VueLive :code="codeChicago" :layout="CustomLayout" :requires="chicagoRequires"/>
+    <h2>With a custom update delay of 2 seconds</h2>
+    <VueLive
+      :code="`<input type='button' value='update me' />`"
+      :layout="CustomLayout"
+      :delay="2000"
+    />
     <h2>Default Layout</h2>
     <div style="width:950px; width:950px; max-width:95vw; margin:20px auto;">
-      <VueLive :code="`<input type='button' value='I am Groot'>`"/>
+      <VueLive :code="`<input type='button' value='I am Groot' />`"/>
     </div>
     <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
   </main>

src/VueLive.vue

@@ -69,13 +69,21 @@ export default {
     requires: {
       type: Object,
       default: () => {}
+    },
+    /**
+     * Time in ms debouncing updates to the preview
+     */
+    delay: {
+      type: Number,
+      default: UPDATE_DELAY
     }
   },
   data() {
     return {
       model: this.code,
       prismLang: "html",
       VueLiveDefaultLayout,
+      updatePreview: () => {},
       /**
        * this data only gets changed when changing language.
        * it allows for copy and pasting without having the code
@@ -84,6 +92,11 @@ export default {
       stableCode: this.code
     };
   },
+  beforeMount() {
+    this.updatePreview = debounce(value => {
+      this.model = value;
+    }, this.delay);
+  },
   computed: {
     codeKey() {
       return hash(this.model);
@@ -96,10 +109,7 @@ export default {
         this.prismLang = newPrismLang;
         this.stableCode = this.model;
       }
-    },
-    updatePreview: debounce(function(value) {
-      this.model = value;
-    }, UPDATE_DELAY)
+    }
   }
 };
 </script>