Monaco Editor Served Webpack

brimdata · Dec 7, 2023 · 32c464e · 32c464e
1 parent 4893b15
commit 32c464e
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 22 deletions.
diff --git a/apps/zui/next.config.js b/apps/zui/next.config.js
@@ -1,3 +1,5 @@
+const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin")
+
 /**
  * @type {import('next').NextConfig}
  */
@@ -13,6 +15,12 @@ const nextConfig = {
     ignoreBuildErrors: true,
   },
   transpilePackages: ["@brimdata/zed-js"],
+  webpack: (config) => {
+    config.plugins.push(
+      new MonacoWebpackPlugin({filename: "static/[name].worker.js"})
+    )
+    return config
+  },
 }
 
 module.exports = nextConfig
diff --git a/apps/zui/package.json b/apps/zui/package.json
@@ -42,7 +42,7 @@
     "@brimdata/zed-js": "workspace:*",
     "@brimdata/zed-node": "workspace:*",
     "@js-joda/core": "^3.2.0",
-    "@monaco-editor/react": "^4.5.1",
+    "@monaco-editor/react": "^4.6.0",
     "@reduxjs/toolkit": "^1.9.3",
     "@swc/cli": "^0.1.55",
     "@swc/core": "^1.2.144",
@@ -118,6 +118,7 @@
     "moment": "^2.27.0",
     "moment-timezone": "^0.5.31",
     "monaco-editor": "^0.44.0",
+    "monaco-editor-webpack-plugin": "^7.1.0",
     "mousetrap": "^1.6.5",
     "msw": "^0.36.8",
     "next": "^13.3.0",

diff --git a/apps/zui/src/js/initializers/init-monaco.ts b/apps/zui/src/js/initializers/init-monaco.ts
@@ -167,7 +167,8 @@ const bracketRule = [/[{}()[]]/, "@brackets"]
 
 export async function initializeMonaco() {
   try {
-    loader.config({paths: {vs: "/monaco-editor/min/vs"}})
+    const monaco = await import("monaco-editor")
+    loader.config({monaco})
     const instance = await loader.init()
     instance.languages.register({id: "zed"})
     instance.languages.setMonarchTokensProvider("zed", {

diff --git a/apps/zui/src/js/initializers/initialize.ts b/apps/zui/src/js/initializers/initialize.ts
@@ -53,7 +53,7 @@ export default async function initialize(
   menus.setContext({api})
   invoke("windowInitialized", global.windowId)
   initializeTabs(store)
-  initializeMonaco()
+  await initializeMonaco()
   initializePluginContextSync(store)
   return {store, api}
 }
diff --git a/apps/zui/tsconfig.json b/apps/zui/tsconfig.json
@@ -9,21 +9,49 @@
     "strict": false,
     "moduleResolution": "node",
     "resolveJsonModule": true,
-    "typeRoots": ["src/js/@types", "node_modules/@types"],
+    "typeRoots": [
+      "src/js/@types",
+      "node_modules/@types"
+    ],
     "esModuleInterop": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "incremental": true,
     "isolatedModules": true,
     "baseUrl": ".",
     "paths": {
-      "@brimdata/zed-js": ["../../packages/zed-js/src/index.ts"],
-      "@brimdata/zed-node": ["../../packages/zed-node/src/index.ts"],
-      "zui-test-data": ["../../packages/zui-test-data/src/index.ts"],
-    }
+      "@brimdata/zed-js": [
+        "../../packages/zed-js/src/index.ts"
+      ],
+      "@brimdata/zed-node": [
+        "../../packages/zed-node/src/index.ts"
+      ],
+      "zui-test-data": [
+        "../../packages/zui-test-data/src/index.ts"
+      ]
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "strictNullChecks": true
   },
-  "exclude": ["scripts", "dist", "run"],
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
+  "exclude": [
+    "scripts",
+    "dist",
+    "run"
+  ],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ]
 }
diff --git a/yarn.lock b/yarn.lock
@@ -3295,27 +3295,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@monaco-editor/loader@npm:^1.3.3":
-  version: 1.3.3
-  resolution: "@monaco-editor/loader@npm:1.3.3"
+"@monaco-editor/loader@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "@monaco-editor/loader@npm:1.4.0"
   dependencies:
     state-local: ^1.0.6
   peerDependencies:
     monaco-editor: ">= 0.21.0 < 1"
-  checksum: 037dd4758651cb623482398fba884c0ddec1ed40502185f1fa417e54f47485291e236eb13bcdffb7bca292edd97ca8e3c51c2c3505e17a3184f4c6d11016fcac
+  checksum: 374ec0ea872ee15b33310e105a43217148161480d3955c5cece87d0f801754cd2c45a3f6c539a75da18a066c1615756fb87eaf1003f1df6a64a0cbce5d2c3749
   languageName: node
   linkType: hard
 
-"@monaco-editor/react@npm:^4.5.1":
-  version: 4.5.1
-  resolution: "@monaco-editor/react@npm:4.5.1"
+"@monaco-editor/react@npm:^4.6.0":
+  version: 4.6.0
+  resolution: "@monaco-editor/react@npm:4.6.0"
   dependencies:
-    "@monaco-editor/loader": ^1.3.3
+    "@monaco-editor/loader": ^1.4.0
   peerDependencies:
     monaco-editor: ">= 0.25.0 < 1"
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 989b98f5750f0b0ad54dc1dd7da8e92c67fcab55e89e26465ab7312fae87b3795f2e4603e7979e9545b7ad5d00fbcb3f21d20144d9e7eafa6f6989a76ad78c3a
+  checksum: 9d44e76c5baad6db5f84c90a5540fbd3c9af691b97d76cf2a99b3c8273004d0efe44c2572d80e9d975c9af10022c21e4a66923924950a5201e82017c8b20428c
   languageName: node
   linkType: hard
 
@@ -6681,6 +6681,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"big.js@npm:^5.2.2":
+  version: 5.2.2
+  resolution: "big.js@npm:5.2.2"
+  checksum: b89b6e8419b097a8fb4ed2399a1931a68c612bce3cfd5ca8c214b2d017531191070f990598de2fc6f3f993d91c0f08aa82697717f6b3b8732c9731866d233c9e
+  languageName: node
+  linkType: hard
+
 "bin-check@npm:^4.1.0":
   version: 4.1.0
   resolution: "bin-check@npm:4.1.0"
@@ -8940,6 +8947,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"emojis-list@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "emojis-list@npm:3.0.0"
+  checksum: ddaaa02542e1e9436c03970eeed445f4ed29a5337dfba0fe0c38dfdd2af5da2429c2a0821304e8a8d1cadf27fdd5b22ff793571fa803ae16852a6975c65e8e70
+  languageName: node
+  linkType: hard
+
 "encoding@npm:^0.1.12":
   version: 0.1.13
   resolution: "encoding@npm:0.1.13"
@@ -13085,7 +13099,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"json5@npm:^2.2.0, json5@npm:^2.2.2, json5@npm:^2.2.3":
+"json5@npm:^2.1.2, json5@npm:^2.2.0, json5@npm:^2.2.2, json5@npm:^2.2.3":
   version: 2.2.3
   resolution: "json5@npm:2.2.3"
   bin:
@@ -13363,6 +13377,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"loader-utils@npm:^2.0.2":
+  version: 2.0.4
+  resolution: "loader-utils@npm:2.0.4"
+  dependencies:
+    big.js: ^5.2.2
+    emojis-list: ^3.0.0
+    json5: ^2.1.2
+  checksum: a5281f5fff1eaa310ad5e1164095689443630f3411e927f95031ab4fb83b4a98f388185bb1fe949e8ab8d4247004336a625e9255c22122b815bb9a4c5d8fc3b7
+  languageName: node
+  linkType: hard
+
 "locate-path@npm:^5.0.0":
   version: 5.0.0
   resolution: "locate-path@npm:5.0.0"
@@ -14054,6 +14079,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"monaco-editor-webpack-plugin@npm:^7.1.0":
+  version: 7.1.0
+  resolution: "monaco-editor-webpack-plugin@npm:7.1.0"
+  dependencies:
+    loader-utils: ^2.0.2
+  peerDependencies:
+    monaco-editor: ">= 0.31.0"
+    webpack: ^4.5.0 || 5.x
+  checksum: e77cf5230c1b886fe0f1be3ecd8baea57795b93681783c5554bdf3aa256317a570bf546bbf17439f4c547182c9e70d8cb31d76715b3af0a8ec88e9cff054e4bd
+  languageName: node
+  linkType: hard
+
 "monaco-editor@npm:^0.44.0":
   version: 0.44.0
   resolution: "monaco-editor@npm:0.44.0"
@@ -19154,7 +19191,7 @@ __metadata:
     "@brimdata/zed-js": "workspace:*"
     "@brimdata/zed-node": "workspace:*"
     "@js-joda/core": ^3.2.0
-    "@monaco-editor/react": ^4.5.1
+    "@monaco-editor/react": ^4.6.0
     "@reduxjs/toolkit": ^1.9.3
     "@swc/cli": ^0.1.55
     "@swc/core": ^1.2.144
@@ -19231,6 +19268,7 @@ __metadata:
     moment: ^2.27.0
     moment-timezone: ^0.5.31
     monaco-editor: ^0.44.0
+    monaco-editor-webpack-plugin: ^7.1.0
     mousetrap: ^1.6.5
     msw: ^0.36.8
     next: ^13.3.0