move code editor to separate component

src/components/Code.vue

@@ -0,0 +1,76 @@
+<script>
+import { defineComponent, shallowRef } from 'vue';
+
+import { Codemirror } from 'vue-codemirror'
+import { javascript } from '@codemirror/lang-javascript'
+import { oneDark } from '@codemirror/theme-one-dark'
+
+export default defineComponent({
+  name: 'Code',
+  props: [
+    'code',
+  ],
+  components: {
+    Codemirror,
+  },
+  data() {
+    const extensions = [javascript(), oneDark]
+
+    // Codemirror EditorView instance ref
+    const view = shallowRef();
+    const handleReady = payload => {
+      view.value = payload.view;
+    };
+
+    // Status is available at all times via Codemirror EditorView
+    const getCodemirrorStates = () => {
+      const state = view.value.state;
+      const ranges = state.selection.ranges;
+      const selected = ranges.reduce((r, range) => r + range.to - range.from, 0);
+      const cursor = ranges[0].anchor;
+      const length = state.doc.length;
+      const lines = state.doc.lines;
+      // more state info ...
+      // return ...
+    }
+
+    return {
+      extensions,
+      handleReady,
+    }
+  },
+});
+</script>
+
+<style scoped>
+.code {
+  height: 100%;
+}
+</style>
+<style>
+.p-splitter {
+  border: none !important;
+}
+.p-splitter-gutter {
+  outline-width: 0;
+}
+.p-splitter-gutter-handle:focus {
+  box-shadow: none !important;
+}
+</style>
+
+<template>
+  <div class="code">
+    <codemirror
+      v-model="code.value"
+      placeholder="Code goes here..."
+      :style="{ height: '100%' }"
+      :autofocus="true"
+      :indent-with-tab="true"
+      :tab-size="2"
+      :extensions="extensions"
+      @ready="handleReady"
+      @change="$emit('change', $event)"
+    />
+  </div>
+</template>

src/views/HomeView.vue

@@ -1,9 +1,9 @@
 <script>
 
 import Result from '../components/Result.vue';
+import Code from '../components/Code.vue';
 
 import Worker from '../file.worker.js?worker';
-// const worker = new Worker();
 
 // const lodash = await fetch('https://registry.npmjs.org/lodash');
 
@@ -11,15 +11,11 @@ import Splitter from 'primevue/splitter';
 import SplitterPanel from 'primevue/splitterpanel';
 
 import { defineComponent, shallowRef } from 'vue';
-import { Codemirror } from 'vue-codemirror'
-import { javascript } from '@codemirror/lang-javascript'
-import { oneDark } from '@codemirror/theme-one-dark'
 
 export default defineComponent({
   components: {
-    Codemirror,
     Splitter, SplitterPanel,
-    Result,
+    Result, Code,
   },
   data() {
     const code = `
@@ -34,37 +30,14 @@ for (let i = 0; i < 42; ++i) {
 }
 
 `;
-    const extensions = [javascript(), oneDark]
-
-    // Codemirror EditorView instance ref
-    const view = shallowRef()
-    const handleReady = (payload) => {
-      view.value = payload.view
-    }
-
-    // Status is available at all times via Codemirror EditorView
-    const getCodemirrorStates = () => {
-      const state = view.value.state
-      const ranges = state.selection.ranges
-      const selected = ranges.reduce((r, range) => r + range.to - range.from, 0)
-      const cursor = ranges[0].anchor
-      const length = state.doc.length
-      const lines = state.doc.lines
-      // more state info ...
-      // return ...
-    }
-
     return {
-      code,
-      extensions,
-      handleReady,
-      log: _ => _, // console.log,
+      code: { value: code },
       worker: null,
       result: '',
     }
   },
   mounted() {
-    this.run(this.code);
+    this.run(this.code.value);
   },
   methods: {
     run(code) {
@@ -109,49 +82,13 @@ main {
   overflow-y: auto;
   outline-width: 0;
 }
-
-.result {
-  overflow-x: auto;
-  overflow-y: auto;
-  margin: 0;
-  padding: 8px;
-  height: 100%;
-  display: block;
-  font-family: monospace;
-  white-space: pre;
-  line-height: normal;
-}
-</style>
-
-<style>
-.p-splitter {
-  border: none !important;
-}
-.p-splitter-gutter {
-  outline-width: 0;
-}
-.p-splitter-gutter-handle:focus {
-  box-shadow: none !important;
-}
 </style>
 
 <template>
   <main>
     <Splitter style="height: 100%" :step="50" :gutterSize="8" layout="horizontal">
       <SplitterPanel class="left-pane">
-        <codemirror
-          v-model="code"
-          placeholder="Code goes here..."
-          :style="{ height: '100%' }"
-          :autofocus="true"
-          :indent-with-tab="true"
-          :tab-size="2"
-          :extensions="extensions"
-          @ready="handleReady"
-          @change="run($event)"
-          @focus="log('focus', $event)"
-          @blur="log('blur', $event)"
-        />
+        <Code :code="code" @change="run($event)"/>
       </SplitterPanel>
       <SplitterPanel class="right-pane">
         <Result :data="result"/>