modern-monaco 0.1.7 → 0.1.8

package/dist/core.js

@@ -83,75 +83,75 @@ var editorProps = [
 var errors = {
   NotFound: ErrorNotFound
 };
-var builtinLSPProviders = {};
-var builtinSyntaxes = [];
+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);
 async function init(options) {
-  const langs = (options?.langs ?? []).concat(builtinSyntaxes);
+  const langs = (options?.langs ?? []).concat(syntaxes);
   const hightlighter = await initShiki({ ...options, langs });
   return loadMonaco(hightlighter, options?.workspace, options?.lsp);
 }
-async function lazy(options, hydrate2) {
-  const { promise: editorWorkerPromise, resolve: onDidEditorWorkerResolve } = promiseWithResolvers();
-  const getAttr = (el, name) => el.getAttribute(name);
-  const setStyle = (el, style) => Object.assign(el.style, style);
-  let monacoPromise = null;
-  customElements.define(
-    "monaco-editor",
-    class extends HTMLElement {
-      async connectedCallback() {
-        const workspace = options?.workspace;
-        const renderOptions = {};
-        for (const attrName of this.getAttributeNames()) {
-          const key = editorProps.find((k) => k.toLowerCase() === attrName);
-          if (key) {
-            let value = getAttr(this, attrName);
-            if (value === "") {
-              value = key === "minimap" || key === "stickyScroll" ? { enabled: true } : true;
-            } else {
-              value = value.trim();
-              if (value === "true") {
-                value = true;
-              } else if (value === "false") {
-                value = false;
-              } else if (value === "null") {
-                value = null;
-              } else if (/^\d+$/.test(value)) {
-                value = Number(value);
-              } else if (/^\{.+\}$/.test(value)) {
-                try {
-                  value = JSON.parse(value);
-                } catch (error) {
-                  value = void 0;
+async function lazy(options) {
+  if (!customElements.get("monaco-editor")) {
+    let monacoPromise = null;
+    customElements.define(
+      "monaco-editor",
+      class extends HTMLElement {
+        async connectedCallback() {
+          const workspace = options?.workspace;
+          const renderOptions = {};
+          for (const attrName of this.getAttributeNames()) {
+            const key = editorProps.find((k) => k.toLowerCase() === attrName);
+            if (key) {
+              let value = attr(this, attrName);
+              if (value === "") {
+                value = key === "minimap" || key === "stickyScroll" ? { enabled: true } : true;
+              } else {
+                value = value.trim();
+                if (value === "true") {
+                  value = true;
+                } else if (value === "false") {
+                  value = false;
+                } else if (value === "null") {
+                  value = null;
+                } else if (/^\d+$/.test(value)) {
+                  value = Number(value);
+                } else if (/^\{.+\}$/.test(value)) {
+                  try {
+                    value = JSON.parse(value);
+                  } catch (error) {
+                    value = void 0;
+                  }
                 }
               }
-            }
-            if (key === "padding") {
-              if (typeof value === "number") {
-                value = { top: value, bottom: value };
-              } else if (/^\d+\s+\d+$/.test(value)) {
-                const [top, bottom] = value.split(/\s+/);
-                if (top && bottom) {
-                  value = { top: Number(top), bottom: Number(bottom) };
+              if (key === "padding") {
+                if (typeof value === "number") {
+                  value = { top: value, bottom: value };
+                } else if (/^\d+\s+\d+$/.test(value)) {
+                  const [top, bottom] = value.split(/\s+/);
+                  if (top && bottom) {
+                    value = { top: Number(top), bottom: Number(bottom) };
+                  }
+                } else {
+                  value = void 0;
                 }
-              } else {
-                value = void 0;
               }
-            }
-            if (key === "wordWrap" && (value === "on" || value === true)) {
-              value = "on";
-            }
-            if (value !== void 0) {
-              renderOptions[key] = value;
+              if (key === "wordWrap" && (value === "on" || value === true)) {
+                value = "on";
+              }
+              if (value !== void 0) {
+                renderOptions[key] = value;
+              }
             }
           }
-        }
-        let filename;
-        let code;
-        if (hydrate2) {
-          const optionsEl = this.children[0];
-          if (optionsEl && optionsEl.tagName === "SCRIPT" && optionsEl.className === "monaco-editor-options") {
+          let filename;
+          let code;
+          const firstEl = this.firstElementChild;
+          if (firstEl && firstEl.tagName === "SCRIPT" && firstEl.className === "monaco-editor-options") {
             try {
-              const v = JSON.parse(optionsEl.textContent);
+              const v = JSON.parse(firstEl.textContent);
               if (Array.isArray(v) && v.length === 2) {
                 const [input, opts] = v;
                 Object.assign(renderOptions, opts);
@@ -167,164 +167,176 @@ async function lazy(options, hydrate2) {
               }
             } catch {
             }
-            optionsEl.remove();
-          }
-        }
-        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);
-          setStyle(this, { width: width + "px", height: height + "px" });
-          renderOptions.dimension = { width, height };
-        } else {
-          if (isDigital(widthAttr)) {
-            widthAttr += "px";
+            firstEl.remove();
           }
-          if (isDigital(heightAttr)) {
-            heightAttr += "px";
-          }
-          this.style.width ||= widthAttr ?? "100%";
-          this.style.height ||= heightAttr ?? "100%";
-        }
-        const containerEl = document.createElement("div");
-        containerEl.className = "monaco-editor-container";
-        setStyle(containerEl, { width: "100%", height: "100%" });
-        this.appendChild(containerEl);
-        if (!filename && workspace) {
-          if (workspace.history.state.current) {
-            filename = workspace.history.state.current;
-          } else if (workspace.entryFile) {
-            filename = workspace.entryFile;
-            workspace.history.replace(filename);
+          style(this, { display: "block", position: "relative" });
+          let widthAttr = attr(this, "width");
+          let heightAttr = attr(this, "height");
+          if (isDigital(widthAttr) && isDigital(heightAttr)) {
+            const width = Number(widthAttr);
+            const height = Number(heightAttr);
+            style(this, { width: width + "px", height: height + "px" });
+            renderOptions.dimension = { width, height };
           } else {
-            const rootFiles = (await workspace.fs.readDirectory("/")).filter(([name, type]) => type === 1).map(([name]) => name);
-            filename = rootFiles.includes("index.html") ? "index.html" : rootFiles[0];
-            if (filename) {
-              workspace.history.replace(filename);
+            if (isDigital(widthAttr)) {
+              widthAttr += "px";
             }
+            if (isDigital(heightAttr)) {
+              heightAttr += "px";
+            }
+            this.style.width ||= widthAttr ?? "100%";
+            this.style.height ||= heightAttr ?? "100%";
           }
-        }
-        const langs = (options?.langs ?? []).concat(builtinSyntaxes);
-        if (renderOptions.language || filename) {
-          const lang = renderOptions.language ?? getLanguageIdFromPath(filename) ?? "plaintext";
-          if (!builtinSyntaxes.find((s) => s.name === lang)) {
-            langs.push(lang);
-          }
-        }
-        if (renderOptions.theme) {
-          renderOptions.theme = renderOptions.theme.toLowerCase().replace(/ +/g, "-");
-        }
-        const highlighter = await initShiki({
-          ...options,
-          theme: renderOptions.theme ?? options?.theme,
-          langs
-        });
-        let prerenderEl = hydrate2 ? this.querySelector(".monaco-editor-prerender") : void 0;
-        if (!prerenderEl && filename && workspace) {
-          try {
-            const code2 = await workspace.fs.readFile(filename);
-            const language = getLanguageIdFromPath(filename);
-            prerenderEl = containerEl.cloneNode(true);
-            prerenderEl.className = "monaco-editor-prerender";
-            prerenderEl.innerHTML = render(highlighter, decode(code2), { ...renderOptions, language });
-          } catch (error) {
-            if (error instanceof ErrorNotFound) {
+          const containerEl = document.createElement("div");
+          containerEl.className = "monaco-editor-container";
+          style(containerEl, { width: "100%", height: "100%" });
+          this.appendChild(containerEl);
+          if (!filename && workspace) {
+            if (workspace.history.state.current) {
+              filename = workspace.history.state.current;
+            } else if (workspace.entryFile) {
+              filename = workspace.entryFile;
+              workspace.history.replace(filename);
             } else {
-              throw error;
+              const rootFiles = (await workspace.fs.readDirectory("/")).filter(([name, type]) => type === 1).map(([name]) => name);
+              filename = rootFiles.includes("index.html") ? "index.html" : rootFiles[0];
+              if (filename) {
+                workspace.history.replace(filename);
+              }
             }
           }
-        }
-        if (prerenderEl) {
-          setStyle(prerenderEl, { position: "absolute", top: "0", left: "0" });
-          this.appendChild(prerenderEl);
-          if (filename && workspace) {
-            const viewState = await workspace.viewState.get(filename);
-            const scrollTop = viewState?.viewState.scrollTop ?? 0;
-            if (scrollTop) {
-              const mockEl = prerenderEl.querySelector(".mock-monaco-editor");
-              if (mockEl) {
-                mockEl.scrollTop = scrollTop;
-              }
+          const langs = (options?.langs ?? []).concat(syntaxes);
+          if (renderOptions.language || filename) {
+            const lang = renderOptions.language ?? getLanguageIdFromPath(filename) ?? "plaintext";
+            if (!syntaxes.find((s) => s.name === lang)) {
+              langs.push(lang);
             }
           }
-        }
-        async function createEditor() {
-          const monaco = await (monacoPromise ?? (monacoPromise = loadMonaco(highlighter, workspace, options?.lsp, onDidEditorWorkerResolve)));
-          const editor = monaco.editor.create(containerEl, renderOptions);
-          if (workspace) {
-            const storeViewState = () => {
-              const currentModel = editor.getModel();
-              if (currentModel?.uri.scheme === "file") {
-                const state = editor.saveViewState();
-                if (state) {
-                  state.viewState.scrollTop ??= editor.getScrollTop();
-                  workspace.viewState.save(currentModel.uri.toString(), Object.freeze(state));
-                }
-              }
-            };
-            editor.onDidChangeCursorSelection(debunce(storeViewState, 500));
-            editor.onDidScrollChange(debunce(storeViewState, 500));
-            workspace.history.onChange((state) => {
-              if (editor.getModel()?.uri.toString() !== state.current) {
-                workspace._openTextDocument(state.current, editor);
-              }
-            });
+          if (renderOptions.theme) {
+            renderOptions.theme = renderOptions.theme.toLowerCase().replace(/ +/g, "-");
           }
-          if (filename && workspace) {
+          const highlighter = await initShiki({
+            ...options,
+            theme: renderOptions.theme ?? options?.theme,
+            langs
+          });
+          let prerenderEl;
+          for (const el of this.children) {
+            if (el.className === "monaco-editor-prerender") {
+              prerenderEl = el;
+              break;
+            }
+          }
+          if (!prerenderEl && filename && workspace) {
             try {
-              const model = await workspace._openTextDocument(filename, editor);
-              if (code && code !== model.getValue()) {
-                model.setValue(code);
-              }
+              const code2 = await workspace.fs.readFile(filename);
+              const language = getLanguageIdFromPath(filename);
+              prerenderEl = containerEl.cloneNode(true);
+              prerenderEl.className = "monaco-editor-prerender";
+              prerenderEl.innerHTML = render(highlighter, decode(code2), { ...renderOptions, language });
             } catch (error) {
               if (error instanceof ErrorNotFound) {
-                if (code) {
-                  const dirname = filename.split("/").slice(0, -1).join("/");
-                  if (dirname) {
-                    await workspace.fs.createDirectory(dirname);
-                  }
-                  await workspace.fs.writeFile(filename, code);
-                  workspace._openTextDocument(filename, editor);
-                } else {
-                  editor.setModel(monaco.editor.createModel(""));
-                }
               } else {
                 throw error;
               }
             }
-          } else if (code && (renderOptions.language || filename)) {
-            const model = monaco.editor.createModel(code, renderOptions.language, filename);
-            editor.setModel(model);
-          } else {
-            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());
+            style(prerenderEl, { position: "absolute", top: "0", left: "0" });
+            this.appendChild(prerenderEl);
+            if (filename && workspace) {
+              const viewState = await workspace.viewState.get(filename);
+              const scrollTop = viewState?.viewState.scrollTop ?? 0;
+              if (scrollTop) {
+                const mockEl = prerenderEl.querySelector(".mock-monaco-editor");
+                if (mockEl) {
+                  mockEl.scrollTop = scrollTop;
+                }
+              }
+            }
+          }
+          async function createEditor() {
+            const monaco = await (monacoPromise ?? (monacoPromise = loadMonaco(highlighter, workspace, options?.lsp, onDidEditorWorkerResolve)));
+            const editor = monaco.editor.create(containerEl, renderOptions);
+            if (workspace) {
+              const storeViewState = () => {
+                const currentModel = editor.getModel();
+                if (currentModel?.uri.scheme === "file") {
+                  const state = editor.saveViewState();
+                  if (state) {
+                    state.viewState.scrollTop ??= editor.getScrollTop();
+                    workspace.viewState.save(currentModel.uri.toString(), Object.freeze(state));
+                  }
+                }
+              };
+              editor.onDidChangeCursorSelection(debunce(storeViewState, 500));
+              editor.onDidScrollChange(debunce(storeViewState, 500));
+              workspace.history.onChange((state) => {
+                if (editor.getModel()?.uri.toString() !== state.current) {
+                  workspace._openTextDocument(state.current, editor);
+                }
+              });
+            }
+            if (filename && workspace) {
+              try {
+                const model = await workspace._openTextDocument(filename, editor);
+                if (code && code !== model.getValue()) {
+                  model.setValue(code);
+                }
+              } catch (error) {
+                if (error instanceof ErrorNotFound) {
+                  if (code) {
+                    const dirname = filename.split("/").slice(0, -1).join("/");
+                    if (dirname) {
+                      await workspace.fs.createDirectory(dirname);
+                    }
+                    await workspace.fs.writeFile(filename, code);
+                    workspace._openTextDocument(filename, editor);
+                  } else {
+                    editor.setModel(monaco.editor.createModel(""));
+                  }
                 } else {
-                  setTimeout(() => prerenderEl.remove(), 150);
+                  throw error;
                 }
-              }, 100);
-            });
+              }
+            } else if (code && (renderOptions.language || filename)) {
+              const modelUri = filename ? monaco.Uri.file(filename) : void 0;
+              let model = modelUri ? monaco.editor.getModel(modelUri) : null;
+              if (!model) {
+                model = monaco.editor.createModel(code, renderOptions.language, modelUri);
+              } else if (code !== model.getValue()) {
+                model.setValue(code);
+              }
+              editor.setModel(model);
+            } else {
+              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);
+              });
+            }
           }
+          await createEditor();
         }
-        await createEditor();
       }
-    }
-  );
+    );
+  }
   await editorWorkerPromise;
 }
 function hydrate(options) {
-  return lazy(options, true);
+  return lazy(options);
 }
-async function loadMonaco(highlighter, workspace, lsp, onDidEditorWorkerResolve) {
+async function loadMonaco(highlighter, workspace, lsp, onDidEditorWorkerResolve2) {
   const monaco = await import("./editor-core.js");
-  const lspProviders = { ...builtinLSPProviders, ...lsp?.providers };
+  const lspProviders = { ...lSPProviders, ...lsp?.providers };
   workspace?.setupMonaco(monaco);
   if (Object.keys(lspProviders).length > 0) {
     initLS(monaco);
@@ -352,7 +364,7 @@ async function loadMonaco(highlighter, workspace, lsp, onDidEditorWorkerResolve)
       const worker = createWebWorker(url, void 0);
       if (!provider) {
         const onMessage = (e) => {
-          onDidEditorWorkerResolve?.();
+          onDidEditorWorkerResolve2?.();
           worker.removeEventListener("message", onMessage);
         };
         worker.addEventListener("message", onMessage);
@@ -447,17 +459,17 @@ async function loadMonaco(highlighter, workspace, lsp, onDidEditorWorkerResolve)
   initShikiMonacoTokenizer(monaco, highlighter);
   return monaco;
 }
-function registerLSPProvider(lang, provider) {
-  builtinLSPProviders[lang] = provider;
-}
-function registerSyntax(...syntaxes) {
-  builtinSyntaxes.push(...syntaxes);
+function registerSyntax(...syntaxes2) {
+  syntaxes2.push(...syntaxes2);
 }
 function registerTheme(theme) {
   if (theme.name) {
     themes.set(theme.name, theme);
   }
 }
+function registerLSPProvider(lang, provider) {
+  lSPProviders[lang] = provider;
+}
 setDefaultWasmLoader(getWasmInstance);
 export {
   Workspace,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-monaco",
   "description": "A modern version of Monaco Editor",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/types/core.d.ts

@@ -1,4 +1,7 @@
-export function registerLSPProvider(lang: string, provider: import("./lsp.d.ts").LSPProvider): void;
-export function registerSyntax(...syntaxes: import("./index.d.ts").TextmateGrammar[]): void;
-export function registerTheme(theme: import("./index.d.ts").TextmateTheme): void;
+import type { TextmateGrammar, TextmateTheme } from "./index.d.ts";
+import type { LSPProvider } from "./lsp.d.ts";
+
+export function registerSyntax(...syntaxes: TextmateGrammar[]): void;
+export function registerTheme(theme: TextmateTheme): void;
+export function registerLSPProvider(lang: string, provider: LSPProvider): void;
 export * from "./index";