modern-monaco 0.2.2 → 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/core.mjs

@@ -40,15 +40,15 @@ function isObject(v) {
 }
 
 // package.json
-var version = "0.2.2";
+var version = "0.3.0";
 
 // 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";
-import { debunce, decode, isDigital } from "./util.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",
@@ -82,19 +82,18 @@ var editorProps = [
   "wordWrap"
 ];
 var errors = {
-  NotFound: ErrorNotFound
+  NotFound: NotFoundError
 };
-var cdnUrl = `https://esm.sh/modern-monaco@${version}`;
 var syntaxes = [];
 var lspProviders = {};
-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(
@@ -106,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 {
@@ -170,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)) {
@@ -190,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) {
@@ -213,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") {
@@ -236,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);
@@ -257,7 +254,7 @@ async function lazy(options) {
             }
           }
           {
-            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 = () => {
@@ -285,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) {
@@ -331,13 +328,13 @@ async function lazy(options) {
 function hydrate(options) {
   return lazy(options);
 }
-async function loadMonaco(highlighter, workspace, lsp) {
-  let importmap = null;
-  let editorCoreModuleUrl = `${cdnUrl}/es2022/editor-core.mjs`;
-  let lspModuleUrl = `${cdnUrl}/es2022/lsp.mjs`;
-  if (importmap = document.querySelector("script[type='importmap']")) {
+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(importmap.textContent);
+      const { imports = {} } = parseImportMapFromJson(importmapEl.textContent);
       if (imports["modern-monaco/editor-core"]) {
         editorCoreModuleUrl = imports["modern-monaco/editor-core"];
       }
@@ -347,14 +344,14 @@ async function loadMonaco(highlighter, workspace, lsp) {
     } catch (error) {
     }
   }
-  const builtinLSP = globalThis.MonacoEnvironment?.builtinLSP;
+  const useBuiltinLSP = globalThis.MonacoEnvironment?.useBuiltinLSP;
   const [monaco, { builtinLSPProviders }] = await Promise.all([
     import(editorCoreModuleUrl),
-    builtinLSP ? import(lspModuleUrl) : Promise.resolve({ builtinLSPProviders: {} })
+    useBuiltinLSP ? import(lspModuleUrl) : Promise.resolve({ builtinLSPProviders: {} })
   ]);
-  const lspProviderMap = { ...builtinLSPProviders, ...lspProviders, ...lsp?.providers };
+  const allLspProviders = { ...builtinLSPProviders, ...lspProviders, ...lsp?.providers };
   workspace?.setupMonaco(monaco);
-  if (Object.keys(lspProviderMap).length > 0) {
+  if (Object.keys(allLspProviders).length > 0) {
     initLspClient(monaco);
   }
   if (!document.getElementById("monaco-editor-core-css")) {
@@ -388,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;
@@ -443,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;
         }