feat: migrate to latest Refina

Quasi-Studio · Mar 13, 2024 · 56c5e80 · 56c5e80
1 parent fe51046
commit 56c5e80
Show file tree

Hide file tree

Showing 55 changed files with 1,612 additions and 735 deletions.
diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
   },
   "devDependencies": {
     "husky": "^8.0.3",
-    "lint-staged": "^14.0.0",
+    "lint-staged": "^14.0.1",
     "prettier": "3.0.0"
   },
   "lint-staged": {

diff --git a/packages/browser-tailwind/package.json b/packages/browser-tailwind/package.json
@@ -20,7 +20,7 @@
   "devDependencies": {
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "typescript": "^5.1.6",
+    "typescript": "^5.4.2",
     "vite": "^4.4.8"
   },
   "dependencies": {

diff --git a/packages/compiler/package.json b/packages/compiler/package.json
@@ -12,7 +12,7 @@
     "check": "tsc --noEmit"
   },
   "devDependencies": {
-    "typescript": "^5.1.6"
+    "typescript": "^5.4.2"
   },
   "dependencies": {
     "prettier": "3.0.0"

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

diff --git a/packages/compiler/src/viewCompiler.ts b/packages/compiler/src/viewCompiler.ts
@@ -97,8 +97,8 @@ ${linesDef}
 ${impsDef}
 
 const ${this.view.name}_view = ${
-      this.view.name === "app" ? "app.use(QuasiRuntime)" : "defineView"
-    }(_ => {
+      this.view.name === "app" ? "$app({plugins:[QuasiRuntime]}," : "$view("
+    }_ => {
   ${mainFunc}
 });
 `;

diff --git a/packages/mdui2-dts/package.json b/packages/mdui2-dts/package.json
@@ -18,7 +18,7 @@
   "devDependencies": {
     "@microsoft/api-extractor": "^7.38.3",
     "mdui": "^2.0.2",
-    "typescript": "^5.0.2",
+    "typescript": "^5.4.2",
     "vite": "^4.4.8"
   }
 }
diff --git a/packages/monaco-editor/package.json b/packages/monaco-editor/package.json
@@ -9,8 +9,8 @@
     "check": "tsc --noEmit"
   },
   "devDependencies": {
-    "@refina/tsconfig": "link:..\\..\\..\\refina\\packages\\tsconfig",
-    "typescript": "^5.0.2"
+    "@refina/tsconfig": "^0.6.0",
+    "typescript": "^5.4.2"
   },
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -22,6 +22,6 @@
   },
   "dependencies": {
     "monaco-editor": "^0.44.0",
-    "refina": "link:..\\..\\..\\refina\\packages\\core"
+    "refina": "^0.6.1"
   }
 }
diff --git a/packages/monaco-editor/src/component.r.ts b/packages/monaco-editor/src/component.r.ts
@@ -1,49 +1,36 @@
 import * as monaco from "monaco-editor";
-import { HTMLElementComponent, ref } from "refina";
-import Monaco from "./plugin";
+import { HTMLElementComponent, TriggerComponent, _, ref } from "refina";
 
-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 (
+export class MonacoEditor extends TriggerComponent {
+  containerRef = ref<HTMLElementComponent<"div">>();
+  editor: monaco.editor.IStandaloneCodeEditor | null = null;
+  $main(
     initialValue: string,
     language: string,
-    options: Omit<
+    options?: Omit<
       monaco.editor.IStandaloneEditorConstructionOptions,
       "value" | "language"
-    > = {},
-  ) => {
+    >,
+  ): this is {
+    $ev: string;
+  } {
     _.$css`height:100%`;
-    _.$ref(containerRef) && _._div();
+    _.$ref(this.containerRef) && _._div();
 
     if (_.$updateContext) {
       _.$app.pushOnetimeHook("afterModifyDOM", () => {
         setTimeout(() => {
-          if (!editor) {
-            const node = containerRef.current!.node;
+          if (!this.editor) {
+            const node = this.containerRef.current!.node;
 
-            editor = monaco.editor.create(node, {
+            this.editor = monaco.editor.create(node, {
               ...options,
               value: initialValue,
               language,
             });
 
-            editor.getModel()?.onDidChangeContent(ev => {
-              const newValue = editor!.getValue();
+            this.editor.getModel()?.onDidChangeContent(ev => {
+              const newValue = this.editor!.getValue();
               this.$fire(newValue);
             });
 
@@ -52,13 +39,13 @@ Monaco.triggerComponents.monacoEditor = function (_) {
             if (_.$updateContext)
               window.addEventListener("resize", () => {
                 // make editor as small as possible
-                editor!.layout({ width: 0, height: 0 });
+                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();
-                  editor!.layout({
+                  this.editor!.layout({
                     width: rect.width,
                     height: rect.height,
                   });
@@ -68,5 +55,6 @@ Monaco.triggerComponents.monacoEditor = function (_) {
         });
       });
     }
-  };
-};
+    return this.$fired;
+  }
+}
diff --git a/packages/monaco-editor/src/index.ts b/packages/monaco-editor/src/index.ts
@@ -1,7 +1,13 @@
 import * as monaco from "monaco-editor";
-export { monaco };
+import { Plugin } from "refina";
+import { MonacoEditor } from "./component.r";
 
-import Monaco from "./plugin";
-export default Monaco;
+export default {
+  name: "monaco-editor",
+  components: {
+    monacoEditor: MonacoEditor,
+  },
+} satisfies Plugin;
 
 export * from "./component.r";
+export { monaco };
diff --git a/packages/monaco-editor/src/plugin.ts b/packages/monaco-editor/src/plugin.ts
diff --git a/packages/northstar/index.html b/packages/northstar/index.html
@@ -30,6 +30,6 @@
     <script type="module" src="./src/app.r.ts"></script>
   </head>
   <body>
-    <div id="root"></div>
+    <div id="app"></div>
   </body>
 </html>
diff --git a/packages/northstar/package.json b/packages/northstar/package.json
@@ -11,17 +11,18 @@
   },
   "packageManager": "[email protected]",
   "devDependencies": {
-    "@refina/transformer": "link:..\\..\\..\\refina\\packages\\transformer",
-    "@refina/tsconfig": "link:..\\..\\..\\refina\\packages\\tsconfig",
-    "@types/wicg-file-system-access": "^2023.10.2",
-    "autoprefixer": "^10.4.15",
-    "postcss": "^8.4.27",
-    "tailwindcss": "^3.3.3",
-    "typescript": "^5.1.6",
-    "vite": "^4.4.8",
+    "@refina/transformer": "^0.6.0",
+    "@refina/tsconfig": "^0.6.0",
+    "@types/wicg-file-system-access": "^2023.10.5",
+    "autoprefixer": "^10.4.18",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.4.2",
+    "vite": "^4.5.2",
+    "vite-plugin-inspect": "^0.8.3",
     "vite-plugin-monaco-editor": "^1.1.0",
-    "vite-plugin-refina": "link:..\\..\\..\\refina\\packages\\vite-plugin",
-    "vite-plugin-static-copy": "^0.17.0"
+    "vite-plugin-refina": "^0.6.0",
+    "vite-plugin-static-copy": "^0.17.1"
   },
   "dependencies": {
     "@quasi-dev/browser-tailwind": "workspace:^",
@@ -30,12 +31,12 @@
     "@quasi-dev/monaco-editor": "workspace:^",
     "@quasi-dev/runtime": "workspace:^",
     "@quasi-dev/visual-flow": "workspace:^",
-    "@refina/basic-components": "link:..\\..\\..\\refina\\packages\\basic-components",
-    "@refina/fluentui": "link:..\\..\\..\\refina\\packages\\fluentui",
-    "@refina/fluentui-icons": "link:..\\..\\..\\refina\\packages\\fluentui-icons",
-    "@refina/griffel": "link:..\\..\\..\\refina\\packages\\griffel",
-    "modern-screenshot": "^4.4.33",
+    "@refina/basic-components": "^0.6.0",
+    "@refina/fluentui": "^0.6.1",
+    "@refina/fluentui-icons": "^0.6.1",
+    "@refina/griffel": "^0.6.0",
+    "modern-screenshot": "^4.4.38",
     "prettier": "3.0.0",
-    "refina": "link:..\\..\\..\\refina\\packages\\core"
+    "refina": "^0.6.1"
   }
 }