From 4dd93f6978aa59a9e9d80aaf385123abb0ea4fd0 Mon Sep 17 00:00:00 2001
From: Tony Germaneri <Tony.Germaneri@gmail.com>
Date: Sat, 23 Sep 2023 02:06:41 -0700
Subject: [PATCH] better error handling in mounted component.  Web worker proxy
 state sync.  Popout editor cursor replace.

---
 packages/CodeEditor/Editor.vue           | 17 +++++++--
 packages/CompileTemplate/importVue.ts    |  2 +
 packages/Node/Node.vue                   | 18 +++++++--
 packages/Node/NodeComponent.vue          | 13 ++++++-
 packages/Orchestrator/main.ts            | 25 +++++++++++--
 packages/Orchestrator/proxy.ts           | 17 +++++++++
 packages/Orchestrator/schedulerWorker.ts | 47 ++++++++++++++++++++----
 7 files changed, 119 insertions(+), 20 deletions(-)
 create mode 100644 packages/Orchestrator/proxy.ts

diff --git a/packages/CodeEditor/Editor.vue b/packages/CodeEditor/Editor.vue
index 3fceae9..bedd5dd 100644
--- a/packages/CodeEditor/Editor.vue
+++ b/packages/CodeEditor/Editor.vue
@@ -160,6 +160,8 @@ export default {
   data() {
     return {
       id: newId(),
+      cursorLocation: null,
+      updatingValue: false,
       editorHasFocus: false,
       autosave: true,
       messageIds: [],
@@ -241,6 +243,14 @@ export default {
       });
       editor.getModel().onDidChangeContent((event) => {
         this.update();
+        if (this.updatingValue && this.cursorLocation) {
+          this.$refs.editor.pinstance.setPosition(this.cursorLocation);
+        }
+      });
+      editor.onDidChangeCursorPosition(e => {
+        if (!this.updatingValue) {
+          this.cursorLocation = this.$refs.editor.pinstance.getPosition();
+        }
       });
       // HACK: if editor is attached to "this" it will freeze the system
       this.$refs.editor.pinstance = editor;
@@ -447,7 +457,9 @@ export default {
       if (!this.$refs.editor || !this.$refs.editor.pinstance) {
         return;
       }
-      this.$refs.editor.pinstance.setValue(val, monaco.editor.StableMarker);
+      this.updatingValue = true;
+      this.$refs.editor.pinstance.setValue(val);
+      this.updatingValue = false;
     },
     getValue() {
       return this.$refs.editor.pinstance.getValue();
@@ -507,10 +519,9 @@ export default {
       this.loadFromCache();
     },
     value() {
-      console.log('watch value update');
       this.localValue = this.value;
       if (this.$refs.editor) {
-        this.$refs.editor.pinstance.value = this.localValue;
+        this.setValue(this.localValue);
       }
     },
     navWidth() {
diff --git a/packages/CompileTemplate/importVue.ts b/packages/CompileTemplate/importVue.ts
index 17aeec5..146c3ec 100644
--- a/packages/CompileTemplate/importVue.ts
+++ b/packages/CompileTemplate/importVue.ts
@@ -26,6 +26,8 @@ const _createElementBlock = self.dependencies.vue.createElementBlock;
 const _resolveComponent = self.dependencies.vue.resolveComponent;
 const _withCtx = self.dependencies.vue.withCtx;
 const _createBlock = self.dependencies.vue.createBlock;
+const _withDirectives = self.dependencies.vue.withDirectives;
+const _vModelText = self.dependencies.vue.vModelText;
 `);
 
     const script = compiler.compileScript(blocks.descriptor, {
diff --git a/packages/Node/Node.vue b/packages/Node/Node.vue
index ccdd391..ba3610b 100644
--- a/packages/Node/Node.vue
+++ b/packages/Node/Node.vue
@@ -5,7 +5,7 @@
             :nodeId="node.id"
             :hovered="localHoveredNode"/>
         <div
-            v-if="loaded[nodeComponentName] && visible"
+            v-if="loaded && visible"
             ref="node"
             class="node"
             :key="localNode.id"
@@ -28,6 +28,7 @@
                 <v-card v-if="broken">
                     <v-card-title>
                         <v-icon icon="mdi-robot-dead-outline" color="warning" size="xx-large"/>
+                        <pre v-if="errorMessage">{{errorMessage}}</pre>
                     </v-card-title>
                 </v-card>
                 <node-component
@@ -39,6 +40,7 @@
                     :state="scheduler.state"
                     :nodeProps="nodeProps"
                     :hostNode="hostNode"
+                    @mountError="mountError"
                     @dataChange="dataChange"
                     @set="set"
                 />
@@ -90,6 +92,9 @@ export default {
         graph: Graph,
         presentation: Boolean,
     },
+    errorCaptured(err) {
+        this.mountError(err);
+    },
     watch: {
         compiledTemplate: {
             handler: function () {
@@ -169,7 +174,8 @@ export default {
             showSetEditor: false,
             longLoadingTimer: null,
             longLoading: false,
-            loaded: {} as any,
+            loaded: false,
+            errorMessage: "",
             localHoveredNode: null,
             localSelectedNodes: [],
             nodeEvents: {},
@@ -201,7 +207,7 @@ export default {
         }, 500);
         this.clearErrors(this.localNode.id);
         await this.importRoot(this.localNode);
-        this.loaded[this.nodeComponentName] = true;
+        this.loaded = true;
     },
     methods: {
         ...mapActions(useOrchestratorStore, [
@@ -213,6 +219,10 @@ export default {
             "updateNodeData",
             "clearArtifact",
         ]),
+        mountError(err) {
+            this.broken = true;
+            this.raiseError(this.localNode.id, err, 'vue');
+        },
         setLinkedNode(e) {
             console.log("setLinkedNode", e);
         },
@@ -279,7 +289,7 @@ export default {
         },
         async importGraph(g) {
             this.compiledTemplate = await compileTemplate(this, this.nodeComponentName, g.properties.presentationTemplate);
-            this.loaded[this.nodeComponentName] = true;
+            this.loaded = true;
         },
         async importNode(v, artifactKey) {
             v.artifact = this.node.artifact;
diff --git a/packages/Node/NodeComponent.vue b/packages/Node/NodeComponent.vue
index cf70d46..11d3051 100644
--- a/packages/Node/NodeComponent.vue
+++ b/packages/Node/NodeComponent.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { markRaw, h, defineComponent, SetupContext } from "vue";
+  import { markRaw, h, defineComponent, SetupContext, watch, onErrorCaptured, emit } from "vue";
   export default defineComponent({
     name: 'node-component',
     props: {
@@ -18,6 +18,14 @@
           };
       });
 
+      const mountError = (error) => {
+        emit('mountError', new Error('Error mounting node component. ' + error));
+        return false;
+      }
+
+      // Capture errors from child components
+      onErrorCaptured(mountError);
+
       return () => {
         const importedProps = {
           graph: props.graph,
@@ -30,10 +38,11 @@
             emit('dataChange', e);
           },
         };
-        return h(
+        const comp = h(
           {...props.component},
           importedProps,
         );
+        return comp;
       };
     }
   });
diff --git a/packages/Orchestrator/main.ts b/packages/Orchestrator/main.ts
index 9dfafcd..3bd780a 100644
--- a/packages/Orchestrator/main.ts
+++ b/packages/Orchestrator/main.ts
@@ -2,6 +2,7 @@ import { defineStore } from 'pinia';
 import type {Graph, Node} from "@plastic-io/plastic-io";
 import {fromJSON} from 'flatted';
 import RegistrySettingsPanel from "./RegistrySettings.vue";
+import {createDeepProxy, type Path} from "./proxy";
 import getRandomName from "@plastic-io/graph-editor-names";
 import {helpTopics} from "@plastic-io/graph-editor-vue3-help-overlay";
 import type AuthenticationProvider from "@plastic-io/graph-editor-vue3-authentication-provider";
@@ -273,6 +274,15 @@ export const useStore = defineStore('orchestrator', {
       }
     },
     createScheduler() {
+
+        this.scheduleWorker = new SchedulerWorker();
+
+        const sendUpdateToWorker = (path: Path, value: any): void => {
+          this.scheduleWorker.postMessage({ path, value });
+        };
+
+        const mainObjProxy = createDeepProxy(this.scheduler.state, [], sendUpdateToWorker);
+
         // performance hack.  Avoid using the store on messages from
         // scheduler to avoid any sort of long term memory leaks/GCing
         const beginconnector = (e: any) => {
@@ -353,7 +363,6 @@ export const useStore = defineStore('orchestrator', {
             });
           };
         }
-        this.scheduleWorker = new SchedulerWorker();
         this.scheduleWorker.postMessage({
           method: 'init',
           args: [
@@ -365,6 +374,16 @@ export const useStore = defineStore('orchestrator', {
         (this.scheduleWorker.onmessage as any) = (e: any) => {
           const methodName = e.data.source;
           const args = fromJSON(e.data.event);
+          if (methodName === 'state-update') {
+            const { path, value } = args;
+            let obj: any = this.scheduler.state;
+            for (let i = 0; i < path.length - 1; i++) {
+              obj = obj[path[i]];
+            }
+            obj[path[path.length - 1]] = value;
+            return;
+          }
+          
           if (methodName === 'beginconnector') {
             return beginconnector(args);
           }
@@ -378,10 +397,10 @@ export const useStore = defineStore('orchestrator', {
             return;
           }
           const method = (this as any)[methodName];
-          if (!method) {
+          if (method) {
+            method(args);
             return;
           }
-          method(args);
         };
         (this.scheduler.instance as any) = {
           url: sendMessage('url'),
diff --git a/packages/Orchestrator/proxy.ts b/packages/Orchestrator/proxy.ts
new file mode 100644
index 0000000..1534cae
--- /dev/null
+++ b/packages/Orchestrator/proxy.ts
@@ -0,0 +1,17 @@
+export type Path = (string | number)[];
+export const createDeepProxy = (obj: any, path: Path = [], handler: (path: Path, value: any) => void): any => {
+  return new Proxy(obj, {
+    set(target: any, key: string | number, value: any): boolean {
+      const newPath: Path = [...path, key];
+      handler(newPath, value);
+      target[key] = value;
+      return true;
+    },
+    get(target: any, key: string | number): any {
+      if (typeof target[key] === "object" && target[key] !== null) {
+        return createDeepProxy(target[key], [...path, key], handler);
+      }
+      return target[key];
+    },
+  });
+};
diff --git a/packages/Orchestrator/schedulerWorker.ts b/packages/Orchestrator/schedulerWorker.ts
index 56b2abd..97e2e65 100644
--- a/packages/Orchestrator/schedulerWorker.ts
+++ b/packages/Orchestrator/schedulerWorker.ts
@@ -1,4 +1,5 @@
 import Scheduler from "@plastic-io/plastic-io";
+import {createDeepProxy, type Path} from "./proxy";
 import {toJSON} from 'flatted';
 const messenger = (source: any) => {
   return (event: any) => {
@@ -23,6 +24,20 @@ const loader = async (e: any): Promise<any> => {
       e.setValue(item);
   }
 };
+
+const sendUpdateToMain = (path: Path, value: any): void => {
+  postMessage({
+    source: 'state-update',
+    event: toJSON({ path, value }),
+  });
+};
+
+const workerObj: { [key: string]: any } = {foo: 'bar'};
+
+const workerObjProxy = createDeepProxy(workerObj, [], sendUpdateToMain);
+
+let obj: any = workerObj;
+
 const logger = {
   info(){},
   log(){},
@@ -32,7 +47,7 @@ const logger = {
 };
 const rpc = {
   init(e: any) {
-    scheduler = new Scheduler(e.graph, {}, {}, logger);
+    scheduler = new Scheduler(e.graph, e, workerObjProxy, logger);
     scheduler.addEventListener("load", loader);
     scheduler.addEventListener("beginconnector", messenger('beginconnector'));
     scheduler.addEventListener("endconnector", messenger('endconnector'));
@@ -44,22 +59,38 @@ const rpc = {
     scheduler.addEventListener("end", messenger('end'));
   }
 } as any;
+const panic = () => {
+  const panic = () => {
+    scheduler.removeEventListener("beginedge", panic);
+    throw new Error('PANIC!');
+  };
+  scheduler.addEventListener("beginedge", panic);
+  return;
+}
 onmessage = function(e: any) {
   if (e.data.method === 'panic') {
-    const panic = () => {
-      scheduler.removeEventListener("beginedge", panic);
-      throw new Error('PANIC!');
-    };
-    scheduler.addEventListener("beginedge", panic);
-    return;
+    panic();
   }
   if (e.data.method === 'init') {
     return rpc.init.apply(null, e.data.args);
   }
   if (e.data.method === 'change') {
     // HACK: probably needs some sort of GC here
+    panic();
     rpc.init({graph: e.data.args[0]});
     return;
   }
-  (scheduler as any)[e.data.method].apply(scheduler, e.data.args);
+  if (typeof (scheduler as any)[e.data.method] === 'function') {
+    (scheduler as any)[e.data.method].apply(scheduler, e.data.args);
+    return;
+  }
+
+  const { path, value } = e.data;
+
+  for (let i = 0; i < path.length - 1; i++) {
+    obj = obj[path[i]];
+  }
+
+  obj[path[path.length - 1]] = value;
+
 }