modern-monaco 0.2.1 → 0.3.0

package/README.md

@@ -249,7 +249,7 @@ lazy({
     },
   ],
   // The CDN for loading language grammars and themes. Default is "https://esm.sh"
-  tmDownloadCDN: "https://esm.sh",
+  cdn: "https://esm.sh",
 });
 ```
 

package/dist/cache.mjs

@@ -1,5 +1,5 @@
 // src/cache.ts
-import { defineProperty, openIDB, promisifyIDBRequest, toURL } from "./util.mjs";
+import { defineProperty, normalizeURL, openIDB, promisifyIDBRequest } from "./util.mjs";
 var IndexedDB = class {
   #db;
   constructor(name) {
@@ -43,7 +43,7 @@ var Cache = class {
     }
   }
   async fetch(url) {
-    url = toURL(url);
+    url = normalizeURL(url);
     const storedRes = await this.query(url);
     if (storedRes) {
       return storedRes;
@@ -75,7 +75,7 @@ var Cache = class {
     return res;
   }
   async query(key) {
-    const url = toURL(key).href;
+    const url = normalizeURL(key).href;
     const file = await this._db.get(url);
     if (file && file.headers) {
       const headers = new Headers(file.headers);

package/dist/core.mjs

@@ -1,42 +1,55 @@
-// src/core.ts
-import { getExtnameFromLanguageId, getLanguageIdFromPath, grammars, initShiki, setDefaultWasmLoader, themes } from "./shiki.mjs";
-import { initShikiMonacoTokenizer, registerShikiMonacoTokenizer } from "./shiki.mjs";
-import { render } from "./shiki.mjs";
-import { getWasmInstance } from "./shiki-wasm.mjs";
-import { ErrorNotFound, Workspace } from "./workspace.mjs";
-
-// src/util.ts
-var dec = /* @__PURE__ */ new TextDecoder();
-function decode(data) {
-  return data instanceof Uint8Array ? dec.decode(data) : data;
+// node_modules/.pnpm/@esm.sh+import-map@0.1.1/node_modules/@esm.sh/import-map/dist/import-map.mjs
+function parseImportMapFromJson(json, baseURL) {
+  const importMap = {
+    $baseURL: new URL(baseURL ?? ".", "file:///").href,
+    imports: {},
+    scopes: {}
+  };
+  const v = JSON.parse(json);
+  if (isObject(v)) {
+    const { imports, scopes } = v;
+    if (isObject(imports)) {
+      validateImports(imports);
+      importMap.imports = imports;
+    }
+    if (isObject(scopes)) {
+      validateScopes(scopes);
+      importMap.scopes = scopes;
+    }
+  }
+  return importMap;
 }
-function isDigital(v) {
-  return typeof v === "number" || typeof v === "string" && /^\d+$/.test(v);
+function validateImports(imports) {
+  for (const [k, v] of Object.entries(imports)) {
+    if (!v || typeof v !== "string") {
+      delete imports[k];
+    }
+  }
 }
-function debunce(fn, delay) {
-  let timer = null;
-  return () => {
-    if (timer !== null) {
-      clearTimeout(timer);
+function validateScopes(imports) {
+  for (const [k, v] of Object.entries(imports)) {
+    if (isObject(v)) {
+      validateImports(v);
+    } else {
+      delete imports[k];
     }
-    timer = setTimeout(() => {
-      timer = null;
-      fn();
-    }, delay);
-  };
+  }
 }
-function promiseWithResolvers() {
-  let resolve;
-  let reject;
-  const promise = new Promise((res, rej) => {
-    resolve = res;
-    reject = rej;
-  });
-  return { promise, resolve, reject };
+function isObject(v) {
+  return typeof v === "object" && v !== null && !Array.isArray(v);
 }
 
+// package.json
+var version = "0.3.0";
+
 // src/core.ts
-import { init as initLS } from "./lsp/language-service.mjs";
+import { getExtnameFromLanguageId, getLanguageIdFromPath, grammars, initShiki, setDefaultWasmLoader, themes } from "./shiki.mjs";
+import { initShikiMonacoTokenizer, registerShikiMonacoTokenizer } from "./shiki.mjs";
+import { render } from "./shiki.mjs";
+import { getWasmInstance } from "./shiki-wasm.mjs";
+import { NotFoundError, Workspace } from "./workspace.mjs";
+import { debunce, decode, getCDNUrl, isDigital } from "./util.mjs";
+import { init as initLspClient } from "./lsp/client.mjs";
 var editorProps = [
   "autoDetectHighContrast",
   "automaticLayout",
@@ -69,19 +82,18 @@ var editorProps = [
   "wordWrap"
 ];
 var errors = {
-  NotFound: ErrorNotFound
+  NotFound: NotFoundError
 };
 var syntaxes = [];
 var lspProviders = {};
-var { promise: editorWorkerPromise, resolve: onDidEditorWorkerResolve } = promiseWithResolvers();
-var attr = (el, name) => el.getAttribute(name);
-var style = (el, style2) => Object.assign(el.style, style2);
+var getAttr = (el, name) => el.getAttribute(name);
+var setStyle = (el, style) => Object.assign(el.style, style);
 async function init(options) {
   const langs = (options?.langs ?? []).concat(syntaxes);
-  const hightlighter = await initShiki({ ...options, langs });
-  return loadMonaco(hightlighter, options?.workspace, options?.lsp);
+  const shiki = await initShiki({ ...options, langs });
+  return loadMonaco(shiki, options?.workspace, options?.lsp, options?.cdn);
 }
-async function lazy(options) {
+function lazy(options) {
   if (!customElements.get("monaco-editor")) {
     let monacoPromise = null;
     customElements.define(
@@ -93,7 +105,7 @@ async function lazy(options) {
           for (const attrName of this.getAttributeNames()) {
             const key = editorProps.find((k) => k.toLowerCase() === attrName);
             if (key) {
-              let value = attr(this, attrName);
+              let value = getAttr(this, attrName);
               if (value === "") {
                 value = key === "minimap" || key === "stickyScroll" ? { enabled: true } : true;
               } else {
@@ -157,13 +169,13 @@ async function lazy(options) {
             }
             firstEl.remove();
           }
-          style(this, { display: "block", position: "relative" });
-          let widthAttr = attr(this, "width");
-          let heightAttr = attr(this, "height");
+          setStyle(this, { display: "block", position: "relative" });
+          let widthAttr = getAttr(this, "width");
+          let heightAttr = getAttr(this, "height");
           if (isDigital(widthAttr) && isDigital(heightAttr)) {
             const width = Number(widthAttr);
             const height = Number(heightAttr);
-            style(this, { width: width + "px", height: height + "px" });
+            setStyle(this, { width: width + "px", height: height + "px" });
             renderOptions.dimension = { width, height };
           } else {
             if (isDigital(widthAttr)) {
@@ -177,7 +189,7 @@ async function lazy(options) {
           }
           const containerEl = document.createElement("div");
           containerEl.className = "monaco-editor-container";
-          style(containerEl, { width: "100%", height: "100%" });
+          setStyle(containerEl, { width: "100%", height: "100%" });
           this.appendChild(containerEl);
           if (!filename && workspace) {
             if (workspace.history.state.current) {
@@ -200,14 +212,12 @@ async function lazy(options) {
               langs.push(lang);
             }
           }
-          if (renderOptions.theme) {
-            renderOptions.theme = renderOptions.theme.toLowerCase().replace(/ +/g, "-");
+          let theme = options?.theme ?? renderOptions.theme;
+          if (typeof theme === "string") {
+            theme = theme.toLowerCase().replace(/ +/g, "-");
           }
-          const highlighter = await initShiki({
-            ...options,
-            theme: renderOptions.theme ?? options?.theme,
-            langs
-          });
+          const highlighter = await initShiki({ ...options, theme, langs });
+          renderOptions.theme = highlighter.getLoadedThemes()[0];
           let prerenderEl;
           for (const el of this.children) {
             if (el.className === "monaco-editor-prerender") {
@@ -223,14 +233,14 @@ async function lazy(options) {
               prerenderEl.className = "monaco-editor-prerender";
               prerenderEl.innerHTML = render(highlighter, decode(code2), { ...renderOptions, language });
             } catch (error) {
-              if (error instanceof ErrorNotFound) {
+              if (error instanceof NotFoundError) {
               } else {
                 throw error;
               }
             }
           }
           if (prerenderEl) {
-            style(prerenderEl, { position: "absolute", top: "0", left: "0" });
+            setStyle(prerenderEl, { position: "absolute", top: "0", left: "0" });
             this.appendChild(prerenderEl);
             if (filename && workspace) {
               const viewState = await workspace.viewState.get(filename);
@@ -243,8 +253,8 @@ async function lazy(options) {
               }
             }
           }
-          async function createEditor() {
-            const monaco = await (monacoPromise ?? (monacoPromise = loadMonaco(highlighter, workspace, options?.lsp)));
+          {
+            const monaco = await (monacoPromise ?? (monacoPromise = loadMonaco(highlighter, workspace, options?.lsp, options?.cdn)));
             const editor = monaco.editor.create(containerEl, renderOptions);
             if (workspace) {
               const storeViewState = () => {
@@ -272,7 +282,7 @@ async function lazy(options) {
                   model.setValue(code);
                 }
               } catch (error) {
-                if (error instanceof ErrorNotFound) {
+                if (error instanceof NotFoundError) {
                   if (code) {
                     const dirname = filename.split("/").slice(0, -1).join("/");
                     if (dirname) {
@@ -300,34 +310,49 @@ async function lazy(options) {
               editor.setModel(monaco.editor.createModel(""));
             }
             if (prerenderEl) {
-              editorWorkerPromise.then(() => {
-                setTimeout(() => {
-                  const animate = prerenderEl.animate?.([{ opacity: 1 }, { opacity: 0 }], { duration: 150 });
-                  if (animate) {
-                    animate.finished.then(() => prerenderEl.remove());
-                  } else {
-                    setTimeout(() => prerenderEl.remove(), 150);
-                  }
-                }, 100);
-              });
+              setTimeout(() => {
+                const animate = prerenderEl.animate?.([{ opacity: 1 }, { opacity: 0 }], { duration: 200 });
+                if (animate) {
+                  animate.finished.then(() => prerenderEl.remove());
+                } else {
+                  setTimeout(() => prerenderEl.remove(), 200);
+                }
+              }, 200);
             }
           }
-          await createEditor();
         }
       }
     );
   }
-  await editorWorkerPromise;
 }
 function hydrate(options) {
   return lazy(options);
 }
-async function loadMonaco(highlighter, workspace, lsp) {
-  const monaco = await import("./editor-core.mjs");
-  const lspProviderMap = { ...lspProviders, ...lsp?.providers };
+async function loadMonaco(highlighter, workspace, lsp, cdn) {
+  let editorCoreModuleUrl = getCDNUrl(`/modern-monaco@${version}/dist/editor-core.mjs`, cdn);
+  let lspModuleUrl = getCDNUrl(`/modern-monaco@${version}/dist/lsp/index.mjs`, cdn);
+  let importmapEl = null;
+  if (importmapEl = document.querySelector("script[type='importmap']")) {
+    try {
+      const { imports = {} } = parseImportMapFromJson(importmapEl.textContent);
+      if (imports["modern-monaco/editor-core"]) {
+        editorCoreModuleUrl = imports["modern-monaco/editor-core"];
+      }
+      if (imports["modern-monaco/lsp"]) {
+        lspModuleUrl = imports["modern-monaco/lsp"];
+      }
+    } catch (error) {
+    }
+  }
+  const useBuiltinLSP = globalThis.MonacoEnvironment?.useBuiltinLSP;
+  const [monaco, { builtinLSPProviders }] = await Promise.all([
+    import(editorCoreModuleUrl),
+    useBuiltinLSP ? import(lspModuleUrl) : Promise.resolve({ builtinLSPProviders: {} })
+  ]);
+  const allLspProviders = { ...builtinLSPProviders, ...lspProviders, ...lsp?.providers };
   workspace?.setupMonaco(monaco);
-  if (Object.keys(lspProviderMap).length > 0) {
-    initLS(monaco);
+  if (Object.keys(allLspProviders).length > 0) {
+    initLspClient(monaco);
   }
   if (!document.getElementById("monaco-editor-core-css")) {
     const styleEl = document.createElement("style");
@@ -339,13 +364,7 @@ async function loadMonaco(highlighter, workspace, lsp) {
   Reflect.set(globalThis, "MonacoEnvironment", {
     getWorker: async (_workerId, label) => {
       if (label === "editorWorkerService") {
-        const worker = monaco.createEditorWorkerMain();
-        const onMessage = (e) => {
-          worker.removeEventListener("message", onMessage);
-          onDidEditorWorkerResolve();
-        };
-        worker.addEventListener("message", onMessage);
-        return worker;
+        return monaco.createEditorWorkerMain();
       }
     },
     getLanguageIdFromUri: (uri) => getLanguageIdFromPath(uri.path),
@@ -366,7 +385,7 @@ async function loadMonaco(highlighter, workspace, lsp) {
           await workspace._openTextDocument(resource.toString(), editor, selectionOrPosition);
           return true;
         } catch (err) {
-          if (err instanceof ErrorNotFound) {
+          if (err instanceof NotFoundError) {
             return false;
           }
           throw err;
@@ -421,9 +440,9 @@ async function loadMonaco(highlighter, workspace, lsp) {
       }
       registerShikiMonacoTokenizer(monaco, highlighter, id);
       let lspLabel = id;
-      let lspProvider = lspProviderMap[lspLabel];
+      let lspProvider = allLspProviders[lspLabel];
       if (!lspProvider) {
-        const alias = Object.entries(lspProviderMap).find(([, lsp2]) => lsp2.aliases?.includes(id));
+        const alias = Object.entries(allLspProviders).find(([, lsp2]) => lsp2.aliases?.includes(id));
         if (alias) {
           [lspLabel, lspProvider] = alias;
         }