feat: export preview and editor (#29)

Author: magersoft

demo/App.vue

@@ -54,10 +54,17 @@
       href="https://fonts.googleapis.com/css?family=Roboto+Mono"
       rel="stylesheet"
     />
+    <h2>Separate use Editor and Preview with change event</h2>
+    <div class="separate">
+      <div class="preview-separate">
+        <VueLivePreview :code="separateCode" />
+      </div>
+      <VueLiveEditor :code="separateCode" @change="updateCode" />
+    </div>
   </main>
 </template>
 <script>
-import VueLive from "../src/VueLive";
+import { VueLive, VueLiveEditor, VueLivePreview } from '../src';
 import CustomLayout from "./CustomLayout";
 import DatePicker from "vuejs-datepicker";
 import codeSfc from "!!raw-loader!./assets/Button.vue";
@@ -72,7 +79,7 @@ import "vue-prism-editor/dist/VuePrismEditor.css";
 
 export default {
   name: "VueLiveDemo",
-  components: { VueLive },
+  components: { VueLive, VueLiveEditor, VueLivePreview },
   data() {
     return {
       registeredComponents: { DatePicker },
@@ -82,8 +89,14 @@ export default {
       codeChicago,
       CustomLayout,
       chicagoRequires: { "./chicagoNeighbourhoods": all },
-      realjsx
+      realjsx,
+      separateCode: codeSfc
     };
+  },
+  methods: {
+    updateCode(code) {
+      this.separateCode = code;
+    }
   }
 };
 </script>
@@ -97,4 +110,18 @@ body {
 body .prism-editor__line-numbers {
   box-sizing: border-box;
 }
+
+.separate {
+  display: flex;
+  flex-direction: column;
+  width: 950px;
+  margin: 30px auto;
+}
+
+.preview-separate {
+  padding: 30px;
+  background-color: #fff;
+  text-align: center;
+  border-radius: 0 10px 10px 0;
+}
 </style>

src/Editor.vue

@@ -0,0 +1,65 @@
+<template>
+  <PrismEditor
+    v-model="stableCode"
+    :language="prismLang"
+    @change="updatePreview"
+    v-bind="editorProps"
+  />
+</template>
+
+<script>
+//load prism somewhere
+import "prismjs";
+import "prismjs/components/prism-jsx.min";
+
+import PrismEditor from "vue-prism-editor";
+import debounce from "debounce";
+
+const UPDATE_DELAY = 300;
+
+export default {
+  name: 'VueLiveEditor',
+  components: { PrismEditor },
+  props: {
+    code: {
+      type: String,
+      required: true
+    },
+    delay: {
+      type: Number,
+      default: UPDATE_DELAY
+    },
+    editorProps: {
+      type: Object,
+      default: () => ({})
+    },
+    prismLang: {
+      type: String,
+      default: 'html'
+    }
+  },
+  data() {
+    return {
+      updatePreview: () => {},
+      /**
+       * this data only gets changed when changing language.
+       * it allows for copy and pasting without having the code
+       * editor repainted every keystroke
+       */
+      stableCode: this.code
+    }
+  },
+  watch: {
+    code(value) {
+      this.updatePreview(value);
+    }
+  },
+  created() {
+    this.updatePreview = debounce(value => {
+      this.stableCode = value;
+
+      this.$emit('change', value);
+    }, this.delay)
+  }
+}
+</script>

src/Preview.vue

@@ -61,6 +61,11 @@ export default {
   created() {
     this.renderComponent(this.code.trim());
   },
+  watch: {
+    code(value) {
+      this.renderComponent(value.trim());
+    }
+  },
   methods: {
     /**
      * Generates the Scope Id attribute value. It will be added to each

src/VueLive.vue

@@ -9,11 +9,12 @@
     :components="components"
   >
     <template v-slot:editor>
-      <PrismEditor
-        v-model="stableCode"
+      <Editor
+        :code="stableCode"
+        :delay="delay"
+        :prism-lang="prismLang"
+        :editor-props="editorProps"
         @change="updatePreview"
-        :language="prismLang"
-        v-bind="editorProps"
       />
     </template>
     <template v-slot:preview>
@@ -29,15 +30,10 @@
   </component>
 </template>
 <script>
-//load prism somewhere
-import "prismjs";
-import "prismjs/components/prism-jsx.min";
-
-import PrismEditor from "vue-prism-editor";
 import hash from "hash-sum";
-import debounce from "debounce";
 
 import Preview from "./Preview.vue";
+import Editor from './Editor.vue';
 import VueLiveDefaultLayout from "./VueLiveDefaultLayout.vue";
 
 const LANG_TO_PRISM = {
@@ -49,7 +45,7 @@ const UPDATE_DELAY = 300;
 
 export default {
   name: "VueLivePreview",
-  components: { PrismEditor, Preview },
+  components: { Preview, Editor },
   props: {
     /**
      * code rendered in the preview and the editor
@@ -122,7 +118,6 @@ export default {
       lang: "vue",
       prismLang: "html",
       VueLiveDefaultLayout,
-      updatePreview: () => {},
       /**
        * this data only gets changed when changing language.
        * it allows for copy and pasting without having the code
@@ -131,11 +126,6 @@ export default {
       stableCode: this.code
     };
   },
-  created() {
-    this.updatePreview = debounce(value => {
-      this.model = value;
-    }, this.delay);
-  },
   computed: {
     codeKey() {
       return hash(this.model);
@@ -148,6 +138,12 @@ export default {
     }
   },
   methods: {
+    updatePreview(code) {
+      this.stableCode = code;
+      this.model = code;
+
+      this.$emit('change', code);
+    },
     switchLanguage(newLang) {
       this.lang = newLang;
       const newPrismLang = LANG_TO_PRISM[newLang];

src/index.js

@@ -0,0 +1,5 @@
+import VueLive from './VueLive';
+import VueLiveEditor from './Editor';
+import VueLivePreview from './Preview';
+
+export { VueLive, VueLiveEditor, VueLivePreview };

src/main.js

@@ -1,14 +1,17 @@
 import VueLive from "./VueLive.vue";
 import VueLivePreview from "./Preview.vue";
+import VueLiveEditor from './Editor.vue';
 
 // Export components individually
 export { VueLive };
 export { VueLivePreview };
+export { VueLiveEditor };
 
 // What should happen if the user installs the library as a plugin
 function install(Vue) {
   Vue.component("VueLive", VueLive);
   Vue.component("VueLivePreview", VueLivePreview);
+  Vue.component("VueLiveEditor", VueLiveEditor);
 }
 
 // Export the library as a plugin