copy worker code from old app

package-lock.json

@@ -11,6 +11,7 @@
         "@codemirror/lang-javascript": "^6.1.1",
         "@codemirror/theme-one-dark": "^6.1.0",
         "codemirror": "^6.0.1",
+        "javascript-stringify": "^2.1.0",
         "normalize.css": "^8.0.1",
         "primevue": "^3.18.0",
         "vue": "^3.2.41",
@@ -1213,6 +1214,11 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "dev": true
     },
+    "node_modules/javascript-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/javascript-stringify/-/javascript-stringify-2.1.0.tgz",
+      "integrity": "sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg=="
+    },
     "node_modules/js-sdsl": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.5.tgz",
@@ -2954,6 +2960,11 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "dev": true
     },
+    "javascript-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/javascript-stringify/-/javascript-stringify-2.1.0.tgz",
+      "integrity": "sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg=="
+    },
     "js-sdsl": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.5.tgz",

package.json

@@ -11,6 +11,7 @@
     "@codemirror/lang-javascript": "^6.1.1",
     "@codemirror/theme-one-dark": "^6.1.0",
     "codemirror": "^6.0.1",
+    "javascript-stringify": "^2.1.0",
     "normalize.css": "^8.0.1",
     "primevue": "^3.18.0",
     "vue": "^3.2.41",

src/app.config.mjs

@@ -0,0 +1,3 @@
+
+export const MAX_DATA_SIZE = 1e5;
+export const ERROR_MAX_DATA_SIZE = 'Error: Output exceeded maximum size allowed';

src/file.worker.js

@@ -1,3 +1,65 @@
 
-console.log('Hello Worker!');
+import { stringify } from 'javascript-stringify';
+import { MAX_DATA_SIZE } from './app.config';
 
+const log = console.log;
+console.log = (...a) => l(a);
+console.error = a => e(a);
+
+// limit chunk of data sent to browser, to avoid eventloop blocking
+const limitData = data => {
+  if (data.length > MAX_DATA_SIZE) {
+    return data.substr(0, MAX_DATA_SIZE);
+  }
+  return data;
+};
+
+const throttledPM = (() => {
+  const pm = postMessage;
+  self['postMessage'] = log;
+  const updateFreq = 50; // times per sec
+  const updateDelay = 1e3 / updateFreq;
+  let dataCache = [];
+  let lastUpdate = +new Date() - updateDelay;
+
+  return (data, finish = false, tryAgain = true) => {
+    const now = +new Date();
+    if (typeof data !== 'undefined') {
+      dataCache.push(data);
+    }
+
+    if (lastUpdate + updateDelay <= now || finish) {
+      pm(limitData(dataCache.join('\n')));
+      lastUpdate = now;
+      dataCache = [];
+    }
+
+    if (tryAgain) {
+      const nextTick = fn => setTimeout(fn, 0);
+      const tryAgainFn = _ => throttledPM([][0], false, false);
+      // try push data asap
+      setTimeout(tryAgainFn, 0);
+      // try push possibly cached data for async code
+      setTimeout(tryAgainFn, updateDelay);
+    }
+  };
+})();
+
+const l = args => {
+  const data = args.map(el => stringify(el, null, '  ')).join(', ');
+  throttledPM(data);
+};
+
+const e = err => {
+  const data = stringify(err);
+  throttledPM(data, true);
+};
+
+addEventListener('message', ({ data }) => {
+  try {
+    const code = new Function(data);
+    code();
+  } catch (e) {
+    console.error(e);
+  }
+});

src/views/HomeView.vue

@@ -19,8 +19,14 @@ export default defineComponent({
     Codemirror,
     Splitter, SplitterPanel,
   },
-  setup() {
+  data() {
-    const code = `console.log('Hello, world!')`;
+    const code = `
+
+for (let i = 0; i < 42; ++i) {
+  console.log(i);
+}
+
+`;
     const extensions = [javascript(), oneDark]
 
     // Codemirror EditorView instance ref
@@ -41,12 +47,40 @@ export default defineComponent({
       // return ...
     }
 
+    this.run(code);
+
     return {
       code,
       extensions,
       handleReady,
       log: console.log,
+      worker,
+      result: '',
     }
+  },
+  methods: {
+    run(code) {
+      this.terminate();
+      this.result = '';
+
+      this.worker = new Worker();
+
+      this.worker.onmessage = ({ data }) => {
+        this.result += `${data}\n`;
+      };
+
+      this.worker.onerror = error => {
+        this.result += error.message;
+      };
+
+      this.worker.postMessage(code);
+    },
+    terminate() {
+      if (this.worker) {
+        this.worker.terminate();
+        this.worker = null;
+      }
+    },
   }
 })
 
@@ -66,6 +100,18 @@ 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>
@@ -90,13 +136,13 @@ main {
           :tab-size="2"
           :extensions="extensions"
           @ready="handleReady"
-          @change="log('change', $event)"
+          @change="run($event)"
           @focus="log('focus', $event)"
           @blur="log('blur', $event)"
         />
       </SplitterPanel>
       <SplitterPanel class="right-pane">
-        <pre>Right Pane</pre>
+        <pre class="result">{{ result }}</pre>
       </SplitterPanel>
     </Splitter>
   </main>