upd: adapt to changes in refina

Quasi-Studio · Nov 30, 2023 · f4996ca · f4996ca
1 parent 041adde
commit f4996ca
Show file tree

Hide file tree

Showing 24 changed files with 225 additions and 231 deletions.
diff --git a/packages/monaco-editor/src/component.r.ts b/packages/monaco-editor/src/component.r.ts
@@ -1,20 +1,13 @@
 import * as monaco from "monaco-editor";
-import {
-  ComponentContext,
-  D,
-  HTMLElementComponent,
-  TriggerComponent,
-  getD,
-  ref,
-} from "refina";
+import { Context, HTMLElementComponent, TriggerComponent, ref } from "refina";
 import Monaco from "./plugin";
 
 @Monaco.triggerComponent("monacoEditor")
 export class MonacoEditor extends TriggerComponent<string> {
   containerRef = ref<HTMLElementComponent<"div">>();
   editor: monaco.editor.IStandaloneCodeEditor | null = null;
   main(
-    _: ComponentContext,
+    _: Context,
     initialValue: string,
     language: string,
     options: Omit<
@@ -25,8 +18,8 @@ export class MonacoEditor extends TriggerComponent<string> {
     _.$css`height:100%`;
     _.$ref(this.containerRef) && _._div();
 
-    if (_.$updating) {
-      _.$app.pushHook("afterModifyDOM", () => {
+    if (_.$updateState) {
+      _.$app.pushOnetimeHook("afterModifyDOM", () => {
         setTimeout(() => {
           if (!this.editor) {
             const node = this.containerRef.current!.node;
@@ -44,17 +37,21 @@ export class MonacoEditor extends TriggerComponent<string> {
 
             const parent = node.parentElement!;
 
-            window.addEventListener("resize", () => {
-              // make editor as small as possible
-              this.editor!.layout({ width: 0, height: 0 });
+            if (_.$updateState)
+              window.addEventListener("resize", () => {
+                // make editor as small as possible
+                this.editor!.layout({ width: 0, height: 0 });
 
-              // wait for next frame to ensure last layout finished
-              window.requestAnimationFrame(() => {
-                // get the parent dimensions and re-layout the editor
-                const rect = parent.getBoundingClientRect();
-                this.editor!.layout({ width: rect.width, height: rect.height });
+                // wait for next frame to ensure last layout finished
+                window.requestAnimationFrame(() => {
+                  // get the parent dimensions and re-layout the editor
+                  const rect = parent.getBoundingClientRect();
+                  this.editor!.layout({
+                    width: rect.width,
+                    height: rect.height,
+                  });
+                });
               });
-            });
           }
         });
       });

diff --git a/packages/northstar/src/app.r.ts b/packages/northstar/src/app.r.ts
@@ -28,7 +28,9 @@ setAutoSaveInterval();
 initMonaco();
 
 app.use(FluentUI).use(Vf).use(Basics).use(Monaco)(_ => {
-  _.$rootCls`fixed top-0 left-0 right-0 bottom-0`;
+  if (_.$updateState) {
+    _.$root.addCls(`fixed top-0 left-0 right-0 bottom-0`);
+  }
 
   _.documentTitle("Quasi Studio");
 
@@ -84,29 +86,30 @@ app.use(FluentUI).use(Vf).use(Basics).use(Monaco)(_ => {
       _.$ref(graphElRef) &&
         _._div({}, _ => _.vfGraph(currentProject.activeGraph));
 
-      _.$app.registerDocumentEventListener("keydown", ev => {
-        if (ev.ctrlKey) {
-          if (ev.key === "z" && currentProject.activeGraph.canUndo) {
-            currentProject.activeGraph.undo();
-            _.$update();
-          } else if (ev.key === "y" && currentProject.activeGraph.canRedo) {
-            currentProject.activeGraph.redo();
-            _.$update();
-          } else if (ev.key === "s") {
-            saveAs();
-          } else if (ev.key === "d" && hasBlocksToDuplicate()) {
-            duplicateBlocks();
-            _.$update();
-          }
-          ev.preventDefault();
-        } else if (ev.key === "Delete") {
-          if (hasBlocksToRemove()) {
-            removeBlocks();
-            _.$update();
+      if (_.$updateState)
+        _.$window.addEventListener("keydown", ev => {
+          if (ev.ctrlKey) {
+            if (ev.key === "z" && currentProject.activeGraph.canUndo) {
+              currentProject.activeGraph.undo();
+              _.$update();
+            } else if (ev.key === "y" && currentProject.activeGraph.canRedo) {
+              currentProject.activeGraph.redo();
+              _.$update();
+            } else if (ev.key === "s") {
+              saveAs();
+            } else if (ev.key === "d" && hasBlocksToDuplicate()) {
+              duplicateBlocks();
+              _.$update();
+            }
+            ev.preventDefault();
+          } else if (ev.key === "Delete") {
+            if (hasBlocksToRemove()) {
+              removeBlocks();
+              _.$update();
+            }
+            ev.preventDefault();
           }
-          ev.preventDefault();
-        }
-      });
+        });
 
       // a workaround to update the position of the graph
       setTimeout(() => currentProject.activeGraph.updatePosition());

diff --git a/packages/northstar/src/blocks/component/getContent.r.ts b/packages/northstar/src/blocks/component/getContent.r.ts
@@ -33,13 +33,15 @@ export function getContent(block: ComponentBlock) {
             false,
             primaryInputInfo.displayName,
           );
-        inputRef.current!.inputRef.current!.node.onchange = () => {
-          currentProject.activeGraph.pushRecord();
-        };
-        inputRef.current!.inputRef.current!.node.onfocus = () => {
-          currentProject.activeGraph.addSelectedBlock(block, false);
-          _.$update();
-        };
+        if (_.$updateState) {
+          inputRef.current!.inputRef.current!.node.onchange = () => {
+            currentProject.activeGraph.pushRecord();
+          };
+          inputRef.current!.inputRef.current!.node.onfocus = () => {
+            currentProject.activeGraph.addSelectedBlock(block, false);
+            _.$update();
+          };
+        }
       },
     );
   };

diff --git a/packages/northstar/src/blocks/special/FuncBlockBase.r.ts b/packages/northstar/src/blocks/special/FuncBlockBase.r.ts
@@ -72,9 +72,11 @@ export abstract class FuncBlockBase extends RectBlock implements SpecialBlock {
               _.fTextarea(this.inputValue, false, this.placeholder, "none")
             : _.$css`min-height:24px;margin-left:-4px` &&
               _.fUnderlineTextInput(this.inputValue, false, this.placeholder));
-        inputRef.current!.inputRef.current!.node.onchange = () => {
-          currentProject.activeGraph.pushRecord();
-        };
+        if (_.$updateState) {
+          inputRef.current!.inputRef.current!.node.onchange = () => {
+            currentProject.activeGraph.pushRecord();
+          };
+        }
 
         if (this.useTextarea) {
           const slots = this.slots;

diff --git a/packages/northstar/src/views/preview.r.ts b/packages/northstar/src/views/preview.r.ts
@@ -48,7 +48,6 @@ export default view(_ => {
     _._pre({}, errorMsg);
   }
 
-  _.$noPreserve();
   _.$ref(iframe) &&
     _._iframe({
       // src: iframeURL,
@@ -57,65 +56,66 @@ export default view(_ => {
       height: "100%",
     });
 
-  _.$app.pushHook("afterModifyDOM", () => {
-    if (!_.$updating || !codeModified) return;
-    codeModified = false;
-    const iframeNode = iframe.current!.node;
-
-    iframeNode.src = iframeURL;
-    iframeNode.onload = () => {
-      if (errorMsg !== "") {
-        errorMsg = "";
-        _.$update();
-      }
-
-      iframeNode.contentWindow!.onerror = (
-        event: Event | string,
-        source?: string,
-        lineno?: number,
-        colno?: number,
-        error?: Error,
-      ) => {
-        if (errorReported) return;
-
-        errorMsg = `ERROR: ${event}
+  _.$updateState &&
+    _.$app.pushOnetimeHook("afterModifyDOM", () => {
+      if (!_.$updateState || !codeModified) return;
+      codeModified = false;
+      const iframeNode = iframe.current!.node;
+
+      iframeNode.src = iframeURL;
+      iframeNode.onload = () => {
+        if (errorMsg !== "") {
+          errorMsg = "";
+          _.$update();
+        }
+
+        iframeNode.contentWindow!.onerror = (
+          event: Event | string,
+          source?: string,
+          lineno?: number,
+          colno?: number,
+          error?: Error,
+        ) => {
+          if (errorReported) return;
+
+          errorMsg = `ERROR: ${event}
 
 source: ${source}
 lineno: ${lineno}
 colno: ${colno}
 error: ${error}`;
 
-        _.$update();
-        errorReported = true;
-      };
-      //@ts-ignore
-      iframeNode.contentWindow!.console.error = (...args: any[]) => {
-        errorMsg += "\nCONSOLE ERROR: \n" + args.join(" ");
-        console.error(...args);
-        _.$update();
-      };
-
-      const scriptNode = iframeNode.contentDocument!.getElementById(
-        "app-script",
-      ) as HTMLScriptElement;
-      scriptNode.innerHTML = code.js;
-
-      const styleNode = iframeNode.contentDocument!.getElementById(
-        "app-style",
-      ) as HTMLStyleElement;
-      styleNode.innerHTML = code.css;
+          _.$update();
+          errorReported = true;
+        };
+        //@ts-ignore
+        iframeNode.contentWindow!.console.error = (...args: any[]) => {
+          errorMsg += "\nCONSOLE ERROR: \n" + args.join(" ");
+          console.error(...args);
+          _.$update();
+        };
+
+        const scriptNode = iframeNode.contentDocument!.getElementById(
+          "app-script",
+        ) as HTMLScriptElement;
+        scriptNode.innerHTML = code.js;
 
-      if (import.meta.env.DEV) {
         const styleNode = iframeNode.contentDocument!.getElementById(
-          "mdui-style-dev",
-        ) as HTMLLinkElement;
-        styleNode.href = mduiStyleUrl;
-      } else {
-        const styleNode = iframeNode.contentDocument!.getElementById(
-          "mdui-style",
+          "app-style",
         ) as HTMLStyleElement;
-        styleNode.innerHTML = mduiStyleContent;
-      }
-    };
-  });
+        styleNode.innerHTML = code.css;
+
+        if (import.meta.env.DEV) {
+          const styleNode = iframeNode.contentDocument!.getElementById(
+            "mdui-style-dev",
+          ) as HTMLLinkElement;
+          styleNode.href = mduiStyleUrl;
+        } else {
+          const styleNode = iframeNode.contentDocument!.getElementById(
+            "mdui-style",
+          ) as HTMLStyleElement;
+          styleNode.innerHTML = mduiStyleContent;
+        }
+      };
+    });
 });
diff --git a/packages/northstar/src/views/properties.r.ts b/packages/northstar/src/views/properties.r.ts
@@ -12,7 +12,10 @@ export default view(_ => {
       {
         onclick: () => {
           (
-            r.current?.$mainEl?.firstChild as HTMLElement | null | undefined
+            r.current?.$mainEl?.node.firstChild as
+              | HTMLElement
+              | null
+              | undefined
           )?.focus();
         },
       },

diff --git a/packages/runtime/src/components/appLayout.r.ts b/packages/runtime/src/components/appLayout.r.ts
@@ -1,7 +1,7 @@
 /// <reference types="vite/client" />
 import {
-  ComponentContext,
   Content,
+  Context,
   HTMLElementComponent,
   OutputComponent,
   ref,
@@ -40,11 +40,7 @@ export class AppLayoutModel {
 @QuasiRuntime.outputComponent("qAppLayout")
 export class QAppLayout extends OutputComponent {
   navRailRef = ref<HTMLElementComponent<"mdui-navigation-rail">>();
-  main(
-    _: ComponentContext,
-    model: AppLayoutModel,
-    props: AppLayoutProps,
-  ): void {
+  main(_: Context, model: AppLayoutModel, props: AppLayoutProps): void {
     _.$cls(props.class);
     _.$css`position:fixed;width:100%;height:100%`;
     _.mdLayout(_ => {

diff --git a/packages/runtime/src/components/button.r.ts b/packages/runtime/src/components/button.r.ts
@@ -1,4 +1,4 @@
-import { ComponentContext, Content, OutputComponent } from "refina";
+import { Content, Context, OutputComponent } from "refina";
 import QuasiRuntime from "../plugin";
 import { component, content, event, input, textProp } from "../types";
 
@@ -27,7 +27,7 @@ export interface ButtonProps {
 
 @QuasiRuntime.outputComponent("qButton")
 export class QButton extends OutputComponent {
-  main(_: ComponentContext, props: ButtonProps): void {
+  main(_: Context, props: ButtonProps): void {
     _.$cls(props.class);
     if (_.mdButton(props.inner, props.disabled)) {
       props.onClick();

diff --git a/packages/runtime/src/components/card.r.ts b/packages/runtime/src/components/card.r.ts
@@ -1,6 +1,6 @@
-import { OutputComponent, ComponentContext, Content } from "refina";
+import { Content, Context, OutputComponent } from "refina";
+import { Direction, component, content, textProp } from "..";
 import QuasiRuntime from "../plugin";
-import { component, content, Direction, textProp } from "..";
 
 export default component({
   displayName: () => "Card",
@@ -21,7 +21,7 @@ export interface CardProps {
 
 @QuasiRuntime.outputComponent("qCard")
 export class QCard extends OutputComponent {
-  main(_: ComponentContext, props: CardProps): void {
+  main(_: Context, props: CardProps): void {
     _.$css`width:100%;padding:18px;padding-top:0`;
     _.$cls(props.class);
     _._mdui_card(

diff --git a/packages/runtime/src/components/div.r.ts b/packages/runtime/src/components/div.r.ts
@@ -1,4 +1,4 @@
-import { ComponentContext, Content, OutputComponent } from "refina";
+import { Content, Context, OutputComponent } from "refina";
 import QuasiRuntime from "../plugin";
 import { component, content, textProp } from "../types";
 
@@ -19,7 +19,7 @@ export interface DivProps {
 
 @QuasiRuntime.outputComponent("qDiv")
 export class QDiv extends OutputComponent {
-  main(_: ComponentContext, props: DivProps): void {
+  main(_: Context, props: DivProps): void {
     _.$cls(props.class);
     _._div({}, props.inner);
   }

diff --git a/packages/runtime/src/components/forEach.r.ts b/packages/runtime/src/components/forEach.r.ts
@@ -1,4 +1,4 @@
-import { ComponentContext, Content, OutputComponent } from "refina";
+import { Content, Context, OutputComponent } from "refina";
 import QuasiRuntime from "../plugin";
 import { component, content, input, output } from "../types";
 
@@ -27,7 +27,7 @@ export class ForEachModel {
 
 @QuasiRuntime.outputComponent("qForEach")
 export class QForEach extends OutputComponent {
-  main(_: ComponentContext, model: ForEachModel, props: ForEachProps): void {
+  main(_: Context, model: ForEachModel, props: ForEachProps): void {
     let index = 0;
     for (const v of props.iterable) {
       model.current = v;