Fix relationship between editor <> parent app and implement some of the page logic.

README.md

@@ -9,3 +9,6 @@ https://itnext.io/vuejs-and-webpack-4-from-scratch-part-1-94c9c28a534a
 
 For devserver:
 https://itnext.io/vue-js-and-webpack-4-from-scratch-part-2-5038cc9deffb
+
+Pass "reference" to child components
+https://stackoverflow.com/questions/40915436/vuejs-update-parent-data-from-child-component

package-lock.json

@@ -3948,8 +3948,7 @@
     "lodash": {
       "version": "4.17.11",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
-      "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==",
-      "dev": true
+      "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
     },
     "lodash.assign": {
       "version": "4.2.0",

package.json

@@ -26,6 +26,7 @@
     "webpack-dev-server": "^3.1.9"
   },
   "dependencies": {
+    "lodash": "^4.17.11",
     "monaco-editor": "^0.14.3",
     "monaco-editor-webpack-plugin": "^1.5.4",
     "monaco-vim": "0.0.7",

src/App.vue

@@ -74,7 +74,7 @@
                   </ul>
                 </div>
 
-                <editor-component name="cpp" language="cpp" height="70vh" :code="cpp_code" :vim_mode="vim_mode" />
+                <editor-component v-model="cpp_code" name="cpp" language="cpp" height="50vh" :vim_mode="vim_mode" />
 
               </div>
               <div class="row">
@@ -84,7 +84,7 @@
                     <li class="is-active"><a>HTML</a></li>
                   </ul>
                 </div>
-                <editor-component name="html" language="html" height="30vh"  :code="html_code" :vim_mode="vim_mode" />
+                <editor-component v-model="html_code" name="html" language="html" height="50vh" :vim_mode="vim_mode" />
               </div>
             </div>
 
@@ -97,7 +97,7 @@
                     <li class="is-active"><a>Javascript</a></li>
                   </ul>
                 </div>
-                <editor-component name="js" language="javascript" height="70vh" :code="js_code" :vim_mode="vim_mode" />
+                <editor-component v-model="js_code" name="js" language="javascript" height="50vh" :vim_mode="vim_mode" />
               </div>
               <div class="row">
                 <div class="tabs">
@@ -106,7 +106,10 @@
                     <li><a>Run output</a></li>
                   </ul>
                 </div>
+                <!--
                 <textarea class="textarea" placeholder="Compiler output will be displayed here."></textarea>
+                -->
+               <iframe src="about:blank" v-on:load="onLoadIframe" name="myIframe"></iframe>
               </div>
             </div>
           </div>
@@ -119,6 +122,7 @@
 
 <script>
 import EditorComponent from './components/EditorComponent.vue'
+const _ = require('lodash');
 
 const cpp_code = `
 #include <cheerp/client.h>
@@ -201,6 +205,10 @@ var _$pstr=new Uint8Array([112,97,103,101,116,105,116,108,101,0]);
 var _$pstr1=new Uint8Array([76,105,116,101,114,97,108,32,67,43,43,32,115,116,114,105,110,103,0]);
 __Z7webMainv();`.trim();
 
+function findIframeByName(name) {
+  return _.find(window.frames, frame => frame.name === name);
+}
+
 export default {
   props: {
     vim_mode: {
@@ -222,6 +230,30 @@ export default {
   },
   components: {
     EditorComponent
+  },
+  methods: {
+    update_iframe(name) {
+      const iframe = findIframeByName(name);
+      iframe.document.body.innerHTML = '';
+      iframe.document.write(this.html_code);
+      iframe.document.write("<script>");
+      iframe.document.write(this.js_code);
+      iframe.document.write("<\/script>");
+    },
+    onLoadIframe(event) {
+      // iframe ready
+      this.update_iframe(event.currentTarget.name);
+    }
+  },
+  watch: {
+    html_code(new_val) {
+      this.update_iframe('myIframe');
+    },
+    cpp_code(new_val) {
+    },
+    js_code(new_val) {
+      this.update_iframe('myIframe');
+    },
   }
 }
 </script>

src/components/EditorComponent.vue

@@ -22,7 +22,7 @@ export default {
       type: String,
       required: true
     },
-    code: {
+    value: {
       type: String,
       required: false
     },
@@ -37,17 +37,26 @@ export default {
   },
   mounted() {
     this.editor = monaco.editor.create(document.getElementById(this.name), {
-      value: this.code,
+      value: this.value,
       language: this.language,
       automaticLayout: true
     });
+
+    this.editor.onDidChangeModelContent(event => {
+      const value = this.editor.getValue()
+      if (this.value !== value) {
+        this.$emit('input', value, event)
+      }
+    });
+
     this.vimMode_1 = initVimMode(this.editor, document.getElementById(this.name + "_status"))
   },
   watch: {
-    code(new_val) {
+    value(new_val) {
       if (this.editor) {
         if (new_val !== this.editor.getValue()) {
           this.editor.setValue(new_val)
+          this.$emit('input', new_val);
         }
       }
     },

src/mystyles.scss

@@ -5,10 +5,10 @@
     height: calc(100vh - ( 3.25rem - .75rem ) );
 }
 
-textarea.textarea {
+iframe, textarea.textarea {
     width: calc(100vh - ( 6rem) );
     min-width: calc(100vh - ( 6rem) );
-    height: calc(30vh - ( 8rem) );
+    height: calc(50vh - ( 8rem) );
 }
 
 .tags {