update: adapt to new Refina APIs

packages/compiler/src/compiler.ts

@@ -14,7 +14,7 @@ export class Compiler {
     const code = `
 import QuasiRuntime, * as $quasi from "${this.runtimeModuleURL}";
 
-const { app, view } = $quasi.refina;
+const { app, defineView } = $quasi.refina;
 
 ${this.input.views
   .map((v) => {

packages/compiler/src/viewCompiler.ts

@@ -97,7 +97,7 @@ ${linesDef}
 ${impsDef}
 
 const ${this.view.name}_view = ${
-      this.view.name === "app" ? "app.use(QuasiRuntime)" : "view"
+      this.view.name === "app" ? "app.use(QuasiRuntime)" : "defineView"
     }(_ => {
   ${mainFunc}
 });

packages/monaco-editor/src/component.r.ts

@@ -1,52 +1,64 @@
 import * as monaco from "monaco-editor";
-import { Context, HTMLElementComponent, TriggerComponent, ref } from "refina";
+import { HTMLElementComponent, 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(
-    _: Context,
+declare module "refina" {
+  interface Components {
+    monacoEditor(
+      initialValue: string,
+      language: string,
+      options?: Omit<
+        monaco.editor.IStandaloneEditorConstructionOptions,
+        "value" | "language"
+      >,
+    ): this is {
+      $ev: string;
+    };
+  }
+}
+Monaco.triggerComponents.monacoEditor = function (_) {
+  const containerRef = ref<HTMLElementComponent<"div">>();
+  let editor: monaco.editor.IStandaloneCodeEditor | null = null;
+  return (
     initialValue: string,
     language: string,
     options: Omit<
       monaco.editor.IStandaloneEditorConstructionOptions,
       "value" | "language"
     > = {},
-  ): void {
+  ) => {
     _.$css`height:100%`;
-    _.$ref(this.containerRef) && _._div();
+    _.$ref(containerRef) && _._div();
 
-    if (_.$updateState) {
+    if (_.$updateContext) {
       _.$app.pushOnetimeHook("afterModifyDOM", () => {
         setTimeout(() => {
-          if (!this.editor) {
-            const node = this.containerRef.current!.node;
+          if (!editor) {
+            const node = containerRef.current!.node;
 
-            this.editor = monaco.editor.create(node, {
+            editor = monaco.editor.create(node, {
               ...options,
               value: initialValue,
               language,
             });
 
-            this.editor.getModel()?.onDidChangeContent(ev => {
-              const newValue = this.editor!.getValue();
+            editor.getModel()?.onDidChangeContent(ev => {
+              const newValue = editor!.getValue();
               this.$fire(newValue);
             });
 
             const parent = node.parentElement!;
 
-            if (_.$updateState)
+            if (_.$updateContext)
               window.addEventListener("resize", () => {
                 // make editor as small as possible
-                this.editor!.layout({ width: 0, height: 0 });
+                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({
+                  editor!.layout({
                     width: rect.width,
                     height: rect.height,
                   });
@@ -56,11 +68,5 @@ export class MonacoEditor extends TriggerComponent<string> {
         });
       });
     }
-  }
-}
-
-declare module "refina" {
-  interface TriggerComponents {
-    monacoEditor: MonacoEditor;
-  }
-}
+  };
+};

packages/northstar/src/blocks/component/getContent.r.ts

@@ -1,5 +1,4 @@
-import { FUnderlineTextInput } from "@refina/fluentui";
-import { Context, ref } from "refina";
+import { Context, MainElRef, ref } from "refina";
 import { currentProject } from "../../project";
 import { ComponentBlock } from "./block";
 
@@ -25,22 +24,28 @@ export function getContent(block: ComponentBlock) {
         onkeydown: propagationStopper,
       },
       _ => {
-        const inputRef = ref<FUnderlineTextInput>();
+        const inputRef: MainElRef = ref();
         _.$css`font-family: Consolas; max-width: 108px; padding-left:4px`;
         _.$ref(inputRef) &&
-          _.fUnderlineTextInput(
+          _.fUnderlineInput(
             block.primaryValue,
             false,
             primaryInputInfo.displayName,
           );
-        if (_.$updateState) {
-          inputRef.current!.inputRef.current!.node.onchange = () => {
-            currentProject.activeGraph.pushRecord();
-          };
-          inputRef.current!.inputRef.current!.node.onfocus = () => {
-            currentProject.activeGraph.addSelectedBlock(block, false);
-            _.$update();
-          };
+        if (_.$updateContext) {
+          setTimeout(() => {
+            const inputEl = inputRef.current!.$mainEl!.node.firstChild as
+              | HTMLInputElement
+              | undefined;
+            if (!inputEl) return;
+            inputEl.onchange = () => {
+              currentProject.activeGraph.pushRecord();
+            };
+            inputEl.onfocus = () => {
+              currentProject.activeGraph.addSelectedBlock(block, false);
+              _.$update();
+            };
+          }, 5);
         }
       },
     );

packages/northstar/src/blocks/special/FuncBlockBase.r.ts

@@ -19,9 +19,8 @@ import {
   directionMap,
   directionNameMap,
 } from "@quasi-dev/visual-flow";
-import { FTextarea, FUnderlineTextInput } from "@refina/fluentui";
 import "@refina/fluentui-icons/expandUpLeft.r.ts";
-import { Context, bySelf, d, ref } from "refina";
+import { Context, MainElRef, bySelf, d, ref } from "refina";
 import { setExtraLib } from "../../utils";
 import { PropData, PropsData } from "../../utils/props";
 import { multiOutSocketToOutput } from "../../utils/toOutput";
@@ -64,18 +63,24 @@ export abstract class FuncBlockBase extends RectBlock implements SpecialBlock {
         onkeydown: ev => ev.stopPropagation(),
       },
       _ => {
-        const inputRef = ref<FTextarea | FUnderlineTextInput>();
+        const inputRef: MainElRef = ref();
         _.$css`--fontFamilyBase: Consolas,'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif`;
         _.$ref(inputRef) &&
           (this.useTextarea
             ? _.$css`margin-top:4px;max-width:180px` &&
               _.fTextarea(this.inputValue, false, this.placeholder, "none")
             : _.$css`min-height:24px;margin-left:-4px` &&
-              _.fUnderlineTextInput(this.inputValue, false, this.placeholder));
-        if (_.$updateState) {
-          inputRef.current!.inputRef.current!.node.onchange = () => {
-            currentProject.activeGraph.pushRecord();
-          };
+              _.fUnderlineInput(this.inputValue, false, this.placeholder));
+        if (_.$updateContext) {
+          setTimeout(() => {
+            const inputEl = inputRef.current!.$mainEl!.node.firstChild as
+              | HTMLElement
+              | undefined;
+            if (!inputEl) return;
+            inputEl.onchange = () => {
+              currentProject.activeGraph.pushRecord();
+            };
+          }, 5);
         }
 
         if (this.useTextarea) {

packages/northstar/src/views/blocks.r.ts

@@ -1,13 +1,13 @@
 import { componentInfoArray } from "@quasi-dev/runtime";
 import "@refina/fluentui-icons/edit.r.ts";
-import { byIndex, bySelf, view } from "refina";
+import { byIndex, defineView } from "refina";
 import { ComponentBlock } from "../blocks/component/block";
 import special from "../blocks/special";
 import { ViewBlock } from "../blocks/special/view.r";
 import { currentProject } from "../project";
 
-export default view(_ => {
-  if (_.fAccordionDefaultOpen("Special")) {
+export default defineView(_ => {
+  if (_.fAccordion("Special", false, true)) {
     _.$cls`grid grid-cols-3 justify-items-center`;
     _.div(_ => {
       _.for(
@@ -34,7 +34,7 @@ export default view(_ => {
       );
     });
   }
-  if (_.fAccordionDefaultOpen("Components")) {
+  if (_.fAccordion("Components", false, true)) {
     _.$cls`grid grid-cols-3 justify-items-center`;
     _.div(_ => {
       _.for(
@@ -62,7 +62,7 @@ export default view(_ => {
       );
     });
   }
-  if (_.fAccordionDefaultOpen("Views")) {
+  if (_.fAccordion("Views", false, true)) {
     _.$cls`grid grid-cols-3 justify-items-center`;
     _.div(_ => {
       _.for(currentProject.views, byIndex, (view, id) => {

packages/northstar/src/views/preview.r.ts

@@ -1,5 +1,5 @@
 /// <reference types="vite/client" />
-import { HTMLElementComponent, ref, view } from "refina";
+import { HTMLElementComponent, defineView, ref } from "refina";
 
 import runtimeURL from "@quasi-dev/runtime/src/index.ts?url";
 import mduiStyleContent from "@quasi-dev/runtime/styles.css?inline"; // Used in production
@@ -42,7 +42,7 @@ export async function startPreview() {
   errorMsg = "";
 }
 
-export default view(_ => {
+export default defineView(_ => {
   if (errorMsg.length > 0) {
     _.$cls`text-red-900 border border-red-500`;
     _._pre({}, errorMsg);
@@ -56,9 +56,9 @@ export default view(_ => {
       height: "100%",
     });
 
-  _.$updateState &&
+  _.$updateContext &&
     _.$app.pushOnetimeHook("afterModifyDOM", () => {
-      if (!_.$updateState || !codeModified) return;
+      if (!_.$updateContext || !codeModified) return;
       codeModified = false;
       const iframeNode = iframe.current!.node;
 

packages/northstar/src/views/properties.r.ts

@@ -1,9 +1,9 @@
 import "@refina/fluentui-icons/add.r.ts";
 import "@refina/fluentui-icons/subtract.r.ts";
-import { $clsFunc, MainElRef, ref, view } from "refina";
+import { $clsFunc, MainElRef, defineView, ref } from "refina";
 import { getSelectedProps } from "../utils/props";
 
-export default view(_ => {
+export default defineView(_ => {
   const props = getSelectedProps();
   _.for(props, "key", p => {
     const r = ref() as MainElRef;
@@ -24,7 +24,7 @@ export default view(_ => {
     _.$cls`col-span-2 h-8`;
     if (p.type === "text") {
       _.$ref(r);
-      _.fUnderlineTextInput(p.getVal(), false, "unset") && p.setVal(_.$ev);
+      _.fUnderlineInput(p.getVal(), false, "unset") && p.setVal(_.$ev);
     } else if (p.type === "switch") {
       _.$cls`ml-4`;
       _.fSwitch("", p.getVal()) && p.setVal(_.$ev);

packages/northstar/src/views/toolbar.r.ts

@@ -17,7 +17,14 @@ import "@refina/fluentui-icons/imageBorder.r.ts";
 import "@refina/fluentui-icons/resizeLarge.r.ts";
 import "@refina/fluentui-icons/resizeSmall.r.ts";
 import { domToBlob } from "modern-screenshot";
-import { Content, HTMLElementComponent, d, fromProp, ref, view } from "refina";
+import {
+  Content,
+  HTMLElementComponent,
+  d,
+  defineView,
+  fromProp,
+  ref,
+} from "refina";
 import {
   Project,
   currentProject,
@@ -39,7 +46,7 @@ import iconURL from "/favicon.ico?url";
 
 export const previewMode = d(false);
 
-const toolItem = view(
+const toolItem = defineView(
   (
     _,
     tip: string,
@@ -66,7 +73,7 @@ let exportToPNGMessage = `Click the "Export" button above to start`;
 
 export const graphElRef = ref<HTMLElementComponent<"div">>();
 
-export default view(_ => {
+export default defineView(_ => {
   _.$cls`flex items-center h-full`;
   _.div(_ => {
     _.$cls`w-[2em] h-[2em] invert`;
@@ -339,7 +346,7 @@ export default view(_ => {
                 onkeydown: ev => ev.stopPropagation(),
               },
               _ =>
-                _.fUnderlineTextInput(
+                _.fUnderlineInput(
                   fromProp(currentProject.activeView, "name"),
                 ),
             );

packages/runtime/package.json

@@ -20,7 +20,6 @@
   ],
   "exports": {
     ".": "./src/index.ts",
-    "./styles.css": "./node_modules/@refina/mdui2/node_modules/mdui/mdui.css",
     "./*": "./*"
   },
   "dependencies": {

packages/runtime/src/components/appLayout.r.ts

@@ -1,11 +1,5 @@
 /// <reference types="vite/client" />
-import {
-  Content,
-  Context,
-  HTMLElementComponent,
-  OutputComponent,
-  ref,
-} from "refina";
+import { Content, HTMLElementComponent, ref } from "refina";
 import QuasiRuntime from "../plugin";
 import { Direction, component, content, textProp } from "../types";
 
@@ -37,10 +31,15 @@ export class AppLayoutModel {
   current: string;
 }
 
-@QuasiRuntime.outputComponent("qAppLayout")
-export class QAppLayout extends OutputComponent {
-  navRailRef = ref<HTMLElementComponent<"mdui-navigation-rail">>();
-  main(_: Context, model: AppLayoutModel, props: AppLayoutProps): void {
+declare module "refina" {
+  interface Components {
+    qAppLayout(model: AppLayoutModel, props: AppLayoutProps): void;
+  }
+}
+
+QuasiRuntime.outputComponents.qAppLayout = function (_) {
+  const navRailRef = ref<HTMLElementComponent<"mdui-navigation-rail">>();
+  return (model, props) => {
     _.$cls(props.class);
     _.$css`position:fixed;width:100%;height:100%`;
     _.mdLayout(_ => {
@@ -77,11 +76,5 @@ export class QAppLayout extends OutputComponent {
         );
       });
     });
-  }
-}
-
-declare module "refina" {
-  interface OutputComponents {
-    qAppLayout: QAppLayout;
-  }
-}
+  };
+};