online_editor: Restructure the project

Use the typical src/ setup used in TS projects and split out the code for the workers into src/worker so that this can get its own configuration for the typescript compiler. This is necessary as the web workers run in a more restricted environment as the rest of the code and because `dom` and `webworker` can not be used together.
tay64 · Aug 24, 2022 · fb97a24 · fb97a24
1 parent f7cb7e7
commit fb97a24
Show file tree

Hide file tree

Showing 13 changed files with 90 additions and 65 deletions.
diff --git a/tools/online_editor/index.html b/tools/online_editor/index.html
@@ -14,7 +14,7 @@
         touch-action: none;
       }
     </style>
-    <script type="module" src="./index.ts"></script>
+    <script type="module" src="./src/index.ts"></script>
   </head>
 
   <body>

diff --git a/tools/online_editor/package.json b/tools/online_editor/package.json
@@ -6,10 +6,10 @@
   "scripts": {
     "build": "rimraf dist pkg && npx vite build",
     "build:wasm_preview": "wasm-pack build --target web ../../api/wasm-interpreter",
-    "lint": "eslint *.ts",
-    "start": "rimraf dist && npm run build:wasm_preview && npn start:vite",
+    "lint": "eslint src",
+    "start": "rimraf dist && npm run build:wasm_preview && npm run start:vite",
     "start:vite": "vite --open",
-    "syntax_check": "tsc --noemit"
+    "syntax_check": "tsc --build"
   },
   "keywords": [],
   "author": "",

diff --git a/tools/online_editor/preview.html b/tools/online_editor/preview.html
@@ -31,7 +31,7 @@
         touch-action: none;
       }
     </style>
-    <script type="module" src="./preview.ts"></script>
+    <script type="module" src="./src/preview.ts"></script>
   </head>
 
   <body>

diff --git a/tools/online_editor/highlighting.ts → tools/online_editor/src/highlighting.ts b/tools/online_editor/highlighting.ts → tools/online_editor/src/highlighting.ts
diff --git a/tools/online_editor/index.ts → tools/online_editor/src/index.ts b/tools/online_editor/index.ts → tools/online_editor/src/index.ts
@@ -1,24 +1,26 @@
 // Copyright © SixtyFPS GmbH <[email protected]>
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial
 
+// cSpell: ignore mimetypes
+
 import { slint_language } from "./highlighting";
 
 import "monaco-editor/esm/vs/editor/editor.all.js";
 import "monaco-editor/esm/vs/editor/standalone/browser/accessibilityHelp/accessibilityHelp.js";
 import "monaco-editor/esm/vs/editor/standalone/browser/iPadShowKeyboard/iPadShowKeyboard.js";
 import "monaco-editor/esm/vs/editor/standalone/browser/inspectTokens/inspectTokens.js";
-import "monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneHelpQuickAccess.js";
+import "monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneCommandsQuickAccess.js";
 import "monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneGotoLineQuickAccess.js";
 import "monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneGotoSymbolQuickAccess.js";
-import "monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneCommandsQuickAccess.js";
+import "monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneHelpQuickAccess.js";
 import "monaco-editor/esm/vs/editor/standalone/browser/referenceSearch/standaloneReferenceSearch.js";
 
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 (self as any).MonacoEnvironment = {
   getWorker(_: unknown, _label: unknown) {
-    return new Worker(new URL("monaco_worker.js", import.meta.url), {
+    return new Worker(new URL("worker/monaco_worker.mjs", import.meta.url), {
       type: "module",
     });
   },
@@ -31,17 +33,22 @@ import slint_init, * as slint from "@preview/slint_wasm_interpreter.js";
 
   monaco.languages.register({
     id: "slint",
+    extensions: [".slint"],
+    aliases: ["Slint", "slint"],
+    mimetypes: ["application/slint"],
   });
   monaco.languages.onLanguage("slint", () => {
     monaco.languages.setMonarchTokensProvider("slint", slint_language);
   });
-  const editor_element = document.getElementById("editor");
-  if (!editor_element) {
-    return;
-  }
+  const editor_element = document.getElementById("editor")!;
   const editor = monaco.editor.create(editor_element, {
     language: "slint",
+    glyphMargin: true,
+    lightbulb: {
+      enabled: true,
+    },
   });
+
   let base_url = "";
 
   interface ModelAndViewState {
@@ -79,7 +86,7 @@ export Demo := Window {
     );
   }
 
-  const select = <HTMLInputElement>document.getElementById("select_combo");
+  const select = document.getElementById("select_combo")! as HTMLInputElement;
   function select_combo_changed() {
     if (select.value) {
       let tag = "master";
@@ -103,21 +110,23 @@ export Demo := Window {
   }
   select.onchange = select_combo_changed;
 
-  const style_combo = <HTMLInputElement>document.getElementById("style_combo");
+  const style_combo = document.getElementById(
+    "style_combo"
+  ) as HTMLInputElement;
   if (style_combo) {
     style_combo.onchange = update_preview;
   }
 
-  const compile_button = <HTMLButtonElement>(
-    document.getElementById("compile_button")
-  );
+  const compile_button = document.getElementById(
+    "compile_button"
+  ) as HTMLButtonElement;
   compile_button.onclick = function () {
     update_preview();
   };
 
-  const auto_compile = <HTMLInputElement>(
-    document.getElementById("auto_compile")
-  );
+  const auto_compile = document.getElementById(
+    "auto_compile"
+  ) as HTMLInputElement;
   auto_compile.onchange = function () {
     if (auto_compile.checked) {
       update_preview();
@@ -152,7 +161,9 @@ export Demo := Window {
   ): monaco.editor.ITextModel {
     const model = monaco.editor.createModel(source, "slint");
     model.onDidChangeContent(function () {
-      const permalink = <HTMLAnchorElement>document.getElementById("permalink");
+      const permalink = document.getElementById(
+        "permalink"
+      ) as HTMLAnchorElement;
       const params = new URLSearchParams();
       params.set("snippet", editor.getModel()?.getValue() || "");
       const this_url = new URL(window.location.toString());
@@ -194,13 +205,11 @@ export Demo := Window {
     if (current_tab != undefined) {
       current_tab.className = "nav-link";
 
-      const url = current_tab.parentElement?.dataset.url;
-      if (url != undefined) {
-        const model_and_state = editor_documents.get(url);
-        if (model_and_state !== undefined) {
-          model_and_state.view_state = editor.saveViewState();
-          editor_documents.set(url, model_and_state);
-        }
+      const url = current_tab.parentElement!.dataset.url!;
+      const model_and_state = editor_documents.get(url);
+      if (model_and_state !== undefined) {
+        model_and_state.view_state = editor.saveViewState();
+        editor_documents.set(url, model_and_state);
       }
     }
     const new_current = document.querySelector(
@@ -209,21 +218,16 @@ export Demo := Window {
     if (new_current != undefined) {
       new_current.className = "nav-link active";
     }
-    const model_and_state = editor_documents.get(url);
-    if (model_and_state != undefined) {
-      editor.setModel(model_and_state.model);
-      if (model_and_state.view_state != null) {
-        editor.restoreViewState(model_and_state.view_state);
-      }
-      editor.focus();
+    const model_and_state = editor_documents.get(url)!;
+    editor.setModel(model_and_state.model);
+    if (model_and_state.view_state != null) {
+      editor.restoreViewState(model_and_state.view_state);
     }
+    editor.focus();
   }
 
   function update_preview() {
-    const main_model_and_state = editor_documents.get(base_url);
-    if (main_model_and_state === undefined) {
-      return;
-    }
+    const main_model_and_state = editor_documents.get(base_url)!;
     const source = main_model_and_state.model.getValue();
     const div = document.getElementById("preview") as HTMLDivElement;
     setTimeout(function () {
@@ -237,7 +241,7 @@ export Demo := Window {
     div: HTMLDivElement
   ) {
     const style =
-      (<HTMLInputElement>document.getElementById("style_combo"))?.value ??
+      (document.getElementById("style_combo") as HTMLInputElement)?.value ??
       "fluent";
 
     const canvas_id = "canvas_" + Math.random().toString(36).slice(2, 11);
@@ -291,10 +295,8 @@ export Demo := Window {
         endColumn: -1,
       };
     });
-    const model = editor.getModel();
-    if (model !== null) {
-      monaco.editor.setModelMarkers(model, "slint", markers);
-    }
+    const model = editor.getModel()!;
+    monaco.editor.setModelMarkers(model, "slint", markers);
 
     if (component !== undefined) {
       component.run(canvas_id);

diff --git a/tools/online_editor/preview.ts → tools/online_editor/src/preview.ts b/tools/online_editor/preview.ts → tools/online_editor/src/preview.ts
diff --git a/tools/online_editor/src/tsconfig.json b/tools/online_editor/src/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig.default.json",
+  "compilerOptions": {
+    "lib": ["dom", "es2020"]
+  },
+  "include": ["./*.ts"],
+  "references": [{ "path": "worker" }]
+}
diff --git a/tools/online_editor/src/types.ts b/tools/online_editor/src/types.ts
@@ -0,0 +1,2 @@
+// eslint-disable-next-line
+type DedicatedWorkerGlobalScope = any; // This type is defined in the `webworker` library, which is not compatible with `dom`
diff --git a/tools/online_editor/monaco_worker.js → ...nline_editor/src/worker/monaco_worker.mjs b/tools/online_editor/monaco_worker.js → ...nline_editor/src/worker/monaco_worker.mjs
diff --git a/tools/online_editor/src/worker/tsconfig.json b/tools/online_editor/src/worker/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.default.json",
+  "compilerOptions": {
+    "lib": ["webworker", "es6"]
+  },
+  "include": ["./*.mjs", "./*.ts"]
+}
diff --git a/tools/online_editor/tsconfig.default.json b/tools/online_editor/tsconfig.default.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./node_modules",
+    "composite": true,
+    "declaration": true,
+    "declarationMap": true,
+    "lib": ["es2020"],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "outDir": "./dist",
+    "paths": {
+      "@preview/*": ["../../../api/wasm-interpreter/pkg/*"],
+      "@lsp/*": ["../../lsp/pkg/*"]
+    },
+    "rootDir": ".",
+    "strict": true,
+    "target": "es6",
+    "typeRoots": ["./node_modules/@types"]
+  }
+}
diff --git a/tools/online_editor/tsconfig.json b/tools/online_editor/tsconfig.json
@@ -1,19 +1,4 @@
 {
-  "compilerOptions": {
-    "sourceMap": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "strict": true,
-    "target": "es2020",
-    "outDir": "./dist",
-    "lib": ["dom", "es6"],
-    "baseUrl": "./node_modules",
-    "jsx": "preserve",
-    "paths": {
-      "@preview/*": ["../../../api/wasm-interpreter/pkg/*"]
-    },
-    "typeRoots": ["node_modules/@types"]
-  },
-  "include": ["./*.ts"],
-  "exclude": ["node_modules"]
+  "files": [],
+  "references": [{ "path": "src" }]
 }
diff --git a/tools/online_editor/vite.config.js b/tools/online_editor/vite.config.js
@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial
 
 import { defineConfig } from "vite";
+
 export default defineConfig(({ command, _mode }) => {
   const base_config = {
     server: {
@@ -10,14 +11,14 @@ export default defineConfig(({ command, _mode }) => {
         allow: ["../../"],
       },
     },
-    base: "",
+    base: "./",
   };
 
   if (command === "serve") {
     // For development builds, serve the wasm interpreter straight out of the local file system.
     base_config.resolve = {
       alias: {
-        "@preview/": "../../api/wasm-interpreter/pkg/",
+        "@preview/": "../../../api/wasm-interpreter/pkg/",
       },
     };
   } else {
@@ -26,12 +27,12 @@ export default defineConfig(({ command, _mode }) => {
     // relative path to the interpreter is as below.
     base_config.build = {};
     base_config.build.rollupOptions = {
-      external: ["../../../wasm-interpreter/slint_wasm_interpreter.js"],
+      external: ["../../../../wasm-interpreter/slint_wasm_interpreter.js"],
       input: ["index.html", "preview.html"],
     };
     base_config.resolve = {
       alias: {
-        "@preview/": "../../../wasm-interpreter/",
+        "@preview/": "../../../../wasm-interpreter/",
       },
     };
   }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// eslint-disable-next-line
		type DedicatedWorkerGlobalScope = any; // This type is defined in the `webworker` library, which is not compatible with `dom`