Moving to monaco-editor loader #patch

package.json

@@ -4,6 +4,10 @@
  "license": "Apache-2.0",
  "type": "module",
  "gobl_cli_version": "0.64.0",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/invopop/gobl.builder.git"
+ },
  "scripts": {
  "dev": "vite dev --port 3000",
  "build": "vite build",
@@ -16,6 +20,23 @@
  "lint": "prettier --check . && eslint .",
  "format": "prettier --write ."
  },
+ "svelte": "./dist/index.js",
+ "types": "./dist/index.d.ts",
+ "exports": {
+ ".": {
+ "svelte": "./dist/index.js",
+ "types": "./dist/index.d.ts"
+ },
+ "./editor/EditorProblem.svelte": {
+ "svelte": "./dist/editor/EditorProblem.svelte",
+ "types": "./dist/editor/EditorProblem.svelte.d.ts"
+ }
+ },
+ "files": [
+ "dist",
+ "!dist/**/*.test.*",
+ "!dist/**/*.spec.*"
+ ],
  "devDependencies": {
  "@sveltejs/adapter-static": "^2.0.3",
  "@sveltejs/kit": "^1.22.4",
@@ -44,32 +65,24 @@
  "tslib": "^2.6.1",
  "typescript": "^5.1.6",
  "vite": ">=4.4.9",
- "vite-plugin-monaco-editor": "^1.1.0",
  "vscode-uri": "^3.0.7"
  },
  "dependencies": {
- "svelte": "^4.1.2",
  "@fontsource/fira-code": "^5.0.8",
+ "@monaco-editor/loader": "^1.3.3",
  "base-64": "^1.0.0",
  "clsx": "^2.0.0",
  "country-list": "^2.3.0",
  "file-saver": "^2.0.5",
- "monaco-editor": "^0.40.0",
+ "monaco-editor": "0.40.0",
+ "svelte": "^4.1.2",
  "svelte-floating-ui": "^1.5.3",
- "utf8": "^3.0.0"
+ "utf8": "^3.0.0",
+ "vscode-json-languageservice": "5.3.5"
  },
  "overrides": {
  "monaco-editor": {
  "vscode-json-languageservice": "$vscode-json-languageservice"
  }
- },
- "files": [
- "dist"
- ],
- "exports": {
- "./gobl-builder": {
- "types": "./dist/GOBLBuilder.svelte.d.ts",
- "svelte": "./dist/GOBLBuilder.svelte"
- }
  }
 }

src/lib/editor/Editor.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
- import * as monaco from "monaco-editor";
- import JSONWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
- import EditorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
- import type { Environment } from "monaco-editor";
+ // import * as monaco from "monaco-editor";
+ import loader from "@monaco-editor/loader";
+ import type * as Monaco from "monaco-editor/esm/vs/editor/editor.api";
+ // import JSONWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
+ // import EditorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
  import type { Unsubscriber } from "svelte/store";
 
  import { onDestroy, onMount } from "svelte";
@@ -21,20 +22,22 @@
  import SuccessIcon from "$lib/ui/icons/SuccessIcon.svelte";
  import LightbulbIcon from "$lib/ui/icons/LightbulbIcon.svelte";
 
- const modelUri = monaco.Uri.parse("gobl://doc.json");
+ let monaco: typeof Monaco;
 
  export let jsonSchemaURL: string;
 
  let editorEl: HTMLElement;
- let monacoEditor: monaco.editor.IStandaloneCodeEditor;
- let model: monaco.editor.ITextModel;
- let readOnlyEditHandler: monaco.IDisposable;
+ let monacoEditor: Monaco.editor.IStandaloneCodeEditor;
+ let model: Monaco.editor.ITextModel;
+ let readOnlyEditHandler: Monaco.IDisposable;
  let lineNumber = 1;
  let column = 1;
  let drawerClosed = false;
 
  let unsubscribeEditor: Unsubscriber;
 
+ const goblDocURL = "gobl://doc.json";
+
  // Sort by `monaco.MarkerSeverity` enum value descending, most severe shown first.
  $: sortedProblems = $problems.sort((a, b) => b.severity - a.severity);
  $: warningCount = $problems.filter((problem) => problem.severity === monaco.MarkerSeverity.Warning).length;
@@ -45,14 +48,17 @@
  }
 
  function setSchemaURI(uri: string) {
+ if (!monaco) {
+ return;
+ }
  monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
  validate: true,
  enableSchemaRequest: true,
  schemaValidation: "warning",
  schemas: uri
  ? [
  {
- fileMatch: [modelUri.toString()],
+ fileMatch: [goblDocURL],
  uri,
  },
  ]
@@ -64,23 +70,16 @@
  }
  }
 
- onMount(() => {
- (<Environment>self.MonacoEnvironment) = {
- getWorker: function (_: string, label: string) {
- switch (label) {
- case "json":
- return new JSONWorker();
- default:
- return new EditorWorker();
- }
- },
- };
+ onMount(async () => {
+ const monacoEditorImport = await import("monaco-editor");
+ loader.config({ monaco: monacoEditorImport.default });
+
+ monaco = await loader.init();
 
+ let modelUri = monaco.Uri.parse(goblDocURL);
  model = monaco.editor.createModel("", "json", modelUri);
 
- if (jsonSchemaURL) {
- setSchemaURI(jsonSchemaURL);
- }
+ setSchemaURI(jsonSchemaURL);
 
  monacoEditor = monaco.editor.create(editorEl, {
  model,
@@ -203,8 +202,9 @@
 
  onDestroy(() => {
  unsubscribeEditor();
- model.dispose();
- monacoEditor.dispose();
+ // model.dispose();
+ monaco?.editor.getModels().forEach((m) => m.dispose());
+ // monacoEditor.dispose();
  readOnlyEditHandler.dispose();
  document.removeEventListener("undoButtonClick", handleUndoButtonClick, true);
  document.removeEventListener("redoButtonClick", handleRedoButtonClick, true);
@@ -247,7 +247,7 @@
  monacoEditor.trigger("redoButton", "redo", null);
  }
 
- function handleProblemClick(problem: monaco.editor.IMarker) {
+ function handleProblemClick(problem: Monaco.editor.IMarker) {
  return function () {
  monacoEditor.setPosition({ lineNumber: problem.startLineNumber, column: problem.startColumn });
  monacoEditor.revealLineInCenter(problem.startLineNumber);