Merge pull request #11 from plastic-io/ghpages-deploy

better error handling in mounted component.  Web worker proxy state s…

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() {

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, {

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;

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;
  };
  }
  });

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'),

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];
+ },
+ });
+};

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;
+
 }