modern-monaco 0.0.0-beta.0

package/dist/index.js

@@ -0,0 +1,635 @@
+// src/lsp/index.ts
+var builtinProviders = {
+  html: {
+    // @ts-expect-error 'setup.js' is generated at build time
+    import: () => import("./lsp/html/setup.js")
+  },
+  css: {
+    aliases: ["less", "sass"],
+    // @ts-expect-error 'setup.js' is generated at build time
+    import: () => import("./lsp/css/setup.js")
+  },
+  json: {
+    // @ts-expect-error 'setup.js' is generated at build time
+    import: () => import("./lsp/json/setup.js")
+  },
+  typescript: {
+    aliases: ["javascript", "jsx", "tsx"],
+    // @ts-expect-error 'setup.js' is generated at build time
+    import: () => import("./lsp/typescript/setup.js")
+  }
+};
+function createWebWorker(url, name) {
+  let workerUrl = url;
+  if (url.origin !== location.origin) {
+    workerUrl = URL.createObjectURL(new Blob([`import "${url.href}"`], { type: "application/javascript" }));
+  }
+  return new Worker(workerUrl, {
+    type: "module",
+    name: name ?? url.pathname.slice(1).split("/").slice(-2).join("/")
+  });
+}
+function margeProviders(config) {
+  return { ...builtinProviders, ...config?.providers };
+}
+
+// src/syntaxes/(html)json-script-tag.json
+var html_json_script_tag_default = {
+  name: "JSON Script Tag in HTML",
+  scopeName: "text.html.json-script-tag",
+  injectTo: [
+    "text.html.basic"
+  ],
+  injectionSelector: "L:text.html.basic -comment",
+  patterns: [
+    {
+      begin: `(<)(script)\\b(?=[^>]*type=(importmap|'importmap'|"importmap"|json|'json'|"json"|'application/json'|"application/json"))(?![^/>]*/>\\s*$)`,
+      beginCaptures: {
+        "1": {
+          name: "punctuation.definition.tag.begin.html"
+        },
+        "2": {
+          name: "entity.name.tag.html"
+        }
+      },
+      end: "(</)(script)(>)",
+      endCaptures: {
+        "1": {
+          name: "punctuation.definition.tag.begin.html"
+        },
+        "2": {
+          name: "entity.name.tag.html"
+        },
+        "3": {
+          name: "punctuation.definition.tag.end.html"
+        }
+      },
+      patterns: [
+        {
+          name: "entity.other.attribute-name.html",
+          match: "\\b([a-zA-Z\\-:_]+)"
+        },
+        {
+          name: "punctuation.separator.key-value.html",
+          match: "="
+        },
+        {
+          name: "string.quoted.double.html",
+          match: `("|').*?("|')`
+        },
+        {
+          begin: "(>)",
+          beginCaptures: {
+            "0": {
+              name: "meta.tag.metadata.json.start.html"
+            },
+            "1": {
+              name: "punctuation.definition.tag.end.html"
+            }
+          },
+          end: "(?=<\/script>)",
+          endCaptures: {
+            "0": {
+              name: "meta.tag.metadata.json.end.html"
+            }
+          },
+          patterns: [
+            {
+              include: "source.json"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
+
+// src/syntaxes/(js)inline-html.json
+var js_inline_html_default = {
+  $license: "https://github.com/pushqrdx/vscode-inline-html/blob/master/LICENSE",
+  name: "Inline HTML in JavaScript",
+  scopeName: "text.html.inline",
+  injectTo: [
+    "source.js",
+    "source.jsx",
+    "source.ts",
+    "source.tsx"
+  ],
+  injectionSelector: "L:source.js -comment -string, L:source.jsx -comment -string, L:source.ts -comment -string, L:source.tsx -comment -string, L:source.js (string.quoted.double.html, string.quoted.single.html), L:source.jsx (string.quoted.double.html, string.quoted.single.html), L:source.js.jsx (string.quoted.double.html, string.quoted.single.html), L:source.ts (string.quoted.double.html, string.quoted.single.html), L:source.tsx (string.quoted.double.html, string.quoted.single.html)",
+  injections: {
+    "L:source": {
+      patterns: [
+        {
+          match: "<",
+          name: "invalid.illegal.bad-angle-bracket.html"
+        }
+      ]
+    }
+  },
+  patterns: [
+    {
+      contentName: "meta.embedded.block.html",
+      begin: "(?ix)(\\s*?(\\w+\\.)?(?:html|/\\*\\s*html\\s*\\*/)\\s*)(`)",
+      beginCaptures: {
+        "0": {
+          name: "string.template.ts, punctuation.definition.string.template.begin.ts"
+        },
+        "1": {
+          name: "entity.name.function.tagged-template.ts"
+        }
+      },
+      end: "(`)",
+      endCaptures: {
+        "0": {
+          name: "string.template.ts, punctuation.definition.string.template.end.ts"
+        }
+      },
+      patterns: [
+        {
+          include: "source.ts#template-substitution-element"
+        },
+        {
+          include: "text.html.basic"
+        }
+      ]
+    },
+    {
+      include: "source.ts#template-substitution-element"
+    }
+  ]
+};
+
+// src/syntaxes/(js)inline-css.json
+var js_inline_css_default = {
+  $license: "https://github.com/pushqrdx/vscode-inline-html/blob/master/LICENSE",
+  name: "Inline CSS in JavaScript",
+  scopeName: "source.css.inline",
+  injectTo: [
+    "source.js",
+    "source.jsx",
+    "source.ts",
+    "source.tsx"
+  ],
+  injectionSelector: "L:source.js -comment -string, L:source.jsx -comment -string, L:source.ts -comment -string, L:source.tsx -comment -string",
+  patterns: [
+    {
+      contentName: "meta.embedded.block.css",
+      begin: "(?ix)(\\s*?(\\w+\\.)?(?:css|/\\*\\s*css\\s*\\*/)\\s*)(`)",
+      beginCaptures: {
+        "0": {
+          name: "string.template.ts, punctuation.definition.string.template.begin.ts"
+        },
+        "1": {
+          name: "entity.name.function.tagged-template.ts"
+        }
+      },
+      end: "(`)",
+      endCaptures: {
+        "0": {
+          name: "string.template.ts, punctuation.definition.string.template.end.ts"
+        }
+      },
+      patterns: [
+        {
+          include: "source.ts#template-substitution-element"
+        },
+        {
+          include: "source.css"
+        }
+      ]
+    },
+    {
+      include: "source.ts#template-substitution-element"
+    }
+  ]
+};
+
+// src/syntaxes/index.ts
+var syntaxes_default = [
+  html_json_script_tag_default,
+  js_inline_html_default,
+  js_inline_css_default
+];
+
+// src/index.ts
+import { getLanguageIdFromPath, initShiki, setDefaultWasmLoader, tmGrammars } from "./shiki.js";
+import { initShikiMonacoTokenizer, registerShikiMonacoTokenizer } from "./shiki.js";
+import { render } from "./shiki.js";
+import { getWasmInstance } from "./shiki-wasm.js";
+import { ErrorNotFound, Workspace } from "./workspace.js";
+
+// src/util.ts
+var enc = new TextEncoder();
+var dec = new TextDecoder();
+function decode(data) {
+  return data instanceof Uint8Array ? dec.decode(data) : data;
+}
+function debunce(fn, delay = 500) {
+  let timer = null;
+  return () => {
+    if (timer !== null) {
+      clearTimeout(timer);
+    }
+    timer = setTimeout(() => {
+      timer = null;
+      fn();
+    }, delay);
+  };
+}
+
+// src/index.ts
+setDefaultWasmLoader(getWasmInstance);
+var editorProps = [
+  "autoDetectHighContrast",
+  "automaticLayout",
+  "contextmenu",
+  "cursorBlinking",
+  "cursorSmoothCaretAnimation",
+  "cursorStyle",
+  "cursorWidth",
+  "fontFamily",
+  "fontLigatures",
+  "fontSize",
+  "fontVariations",
+  "fontWeight",
+  "letterSpacing",
+  "lineHeight",
+  "lineNumbers",
+  "lineNumbersMinChars",
+  "matchBrackets",
+  "minimap",
+  "mouseStyle",
+  "multiCursorModifier",
+  "padding",
+  "readOnly",
+  "readOnlyMessage",
+  "rulers",
+  "scrollbar",
+  "stickyScroll",
+  "tabSize",
+  "theme",
+  "wordWrap"
+];
+var preloadGrammars = [
+  "html",
+  "css",
+  "javascript",
+  "json"
+];
+async function loadMonaco(highlighter, workspace, lsp, onDidEditorWorkerReady) {
+  const monaco = await import("./editor-core.js");
+  const lspProviders = margeProviders(lsp);
+  workspace?.init(monaco);
+  if (!document.getElementById("monaco-editor-core-css")) {
+    const styleEl = document.createElement("style");
+    styleEl.id = "monaco-editor-core-css";
+    styleEl.media = "screen";
+    styleEl.textContent = monaco.CSS;
+    document.head.appendChild(styleEl);
+  }
+  Reflect.set(globalThis, "MonacoEnvironment", {
+    getWorker: async (_workerId, label) => {
+      let provider = lspProviders[label];
+      if (!provider) {
+        provider = Object.values(lspProviders).find((p) => p.aliases?.includes(label));
+      }
+      const url = provider ? (await provider.import()).getWorkerUrl() : monaco.getWorkerUrl();
+      if (label === "typescript") {
+        const tsVersion = lsp?.typescript?.tsVersion;
+        if (tsVersion && (url.hostname === "esm.sh" || url.hostname.endsWith(".esm.sh"))) {
+          url.searchParams.set("deps", `typescript@${tsVersion}`);
+        }
+      }
+      const worker = createWebWorker(url, void 0);
+      if (!provider) {
+        const onMessage = (e) => {
+          onDidEditorWorkerReady?.();
+          worker.removeEventListener("message", onMessage);
+        };
+        worker.addEventListener("message", onMessage);
+      }
+      return worker;
+    },
+    getLanguageIdFromUri: (uri) => getLanguageIdFromPath(uri.path)
+  });
+  monaco.editor.registerLinkOpener({
+    async open(link) {
+      if ((link.scheme === "https" || link.scheme === "http") && monaco.editor.getModel(link)) {
+        return true;
+      }
+      return false;
+    }
+  });
+  monaco.editor.registerEditorOpener({
+    openCodeEditor: async (editor, resource, selectionOrPosition) => {
+      if (workspace && resource.scheme === "file") {
+        try {
+          await workspace._openTextDocument(resource.toString(), editor, selectionOrPosition);
+          return true;
+        } catch (err) {
+          if (err instanceof ErrorNotFound) {
+            return false;
+          }
+          throw err;
+        }
+      }
+      try {
+        const model = monaco.editor.getModel(resource);
+        if (model) {
+          editor.setModel(model);
+          if (selectionOrPosition) {
+            if ("startLineNumber" in selectionOrPosition) {
+              editor.setSelection(selectionOrPosition);
+            } else {
+              editor.setPosition(selectionOrPosition);
+            }
+            const pos = editor.getPosition();
+            if (pos) {
+              const svp = editor.getScrolledVisiblePosition(new monaco.Position(pos.lineNumber - 7, pos.column));
+              if (svp) {
+                editor.setScrollTop(svp.top);
+              }
+            }
+          }
+          const isHttpUrl = resource.scheme === "https" || resource.scheme === "http";
+          editor.updateOptions({ readOnly: isHttpUrl });
+          return true;
+        }
+      } catch (error) {
+      }
+      return false;
+    }
+  });
+  if (globalThis.navigator?.userAgent?.includes("Macintosh")) {
+    monaco.editor.addKeybindingRule({
+      keybinding: monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyK,
+      command: "editor.action.quickCommand"
+    });
+  }
+  const allLanguages = new Set(tmGrammars.filter((g) => !g.injectTo).map((g) => g.name));
+  allLanguages.forEach((id) => {
+    const languages = monaco.languages;
+    languages.register({ id, aliases: tmGrammars.find((g) => g.name === id)?.aliases });
+    languages.onLanguage(id, async () => {
+      const config = monaco.languageConfigurations[monaco.languageConfigurationAliases[id] ?? id];
+      const loadedGrammars = new Set(highlighter.getLoadedLanguages());
+      const reqiredGrammars = [id].concat(tmGrammars.find((g) => g.name === id)?.embedded ?? []).filter((id2) => !loadedGrammars.has(id2));
+      if (config) {
+        languages.setLanguageConfiguration(id, monaco.convertVscodeLanguageConfiguration(config));
+      }
+      if (reqiredGrammars.length > 0) {
+        await highlighter.loadGrammarFromCDN(...reqiredGrammars);
+      }
+      registerShikiMonacoTokenizer(monaco, highlighter, id);
+      let lspLabel = id;
+      let lspProvider = lspProviders[lspLabel];
+      if (!lspProvider) {
+        const alias = Object.entries(lspProviders).find(([, lsp2]) => lsp2.aliases?.includes(id));
+        if (alias) {
+          [lspLabel, lspProvider] = alias;
+        }
+      }
+      if (lspProvider) {
+        lspProvider.import().then(({ setup }) => setup(monaco, id, workspace, lsp?.[lspLabel], lsp?.formatting));
+      }
+    });
+  });
+  initShikiMonacoTokenizer(monaco, highlighter);
+  return monaco;
+}
+async function init(options) {
+  const langs = (options?.langs ?? []).concat(preloadGrammars, syntaxes_default);
+  const hightlighter = await initShiki({ ...options, langs });
+  return loadMonaco(hightlighter, options?.workspace, options?.lsp);
+}
+async function lazy(options, hydrate2) {
+  const workspace = options?.workspace;
+  let monacoCore = null;
+  let onDidEditorWorkerReady;
+  let editorWorkerPromise = new Promise((resolve) => {
+    onDidEditorWorkerReady = resolve;
+  });
+  function load(highlighter) {
+    if (monacoCore) {
+      return monacoCore;
+    }
+    return monacoCore = loadMonaco(highlighter, workspace, options?.lsp, onDidEditorWorkerReady).then((m) => monacoCore = m);
+  }
+  function setStyle(el, style) {
+    Object.assign(el.style, style);
+  }
+  customElements.define(
+    "monaco-editor",
+    class extends HTMLElement {
+      async connectedCallback() {
+        const renderOptions = {};
+        for (const attrName of this.getAttributeNames()) {
+          const key = editorProps.find((k) => k.toLowerCase() === attrName);
+          if (key) {
+            let value = this.getAttribute(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) };
+                }
+              } else {
+                value = void 0;
+              }
+            }
+            if (key === "wordWrap" && (value === "on" || value === true)) {
+              value = "on";
+            }
+            if (value !== void 0) {
+              renderOptions[key] = value;
+            }
+          }
+        }
+        if (hydrate2) {
+          const optionsScript = this.children[0];
+          if (optionsScript && optionsScript.tagName === "SCRIPT" && optionsScript.className === "monaco-editor-options") {
+            const opts = JSON.parse(optionsScript.textContent);
+            if (opts.fontDigitWidth) {
+              Reflect.set(globalThis, "__monaco_maxDigitWidth", opts.fontDigitWidth);
+            }
+            Object.assign(renderOptions, opts);
+            optionsScript.remove();
+          }
+        }
+        setStyle(this, { display: "block", position: "relative" });
+        const width = Number(this.getAttribute("width"));
+        const height = Number(this.getAttribute("height"));
+        if (width > 0 && height > 0) {
+          setStyle(this, { width: `${width}px`, height: `${height}px` });
+          renderOptions.dimension = { width, height };
+        } else {
+          setStyle(this, { width: "100%", height: "100%" });
+        }
+        const containerEl = document.createElement("div");
+        containerEl.className = "monaco-editor-container";
+        containerEl.style.width = "100%";
+        containerEl.style.height = "100%";
+        this.appendChild(containerEl);
+        let filename = renderOptions.filename ?? this.getAttribute("file");
+        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 {
+            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);
+            }
+          }
+        }
+        const langs = (options?.langs ?? []).concat(preloadGrammars, syntaxes_default);
+        if (renderOptions.language || filename) {
+          langs.push(renderOptions.language ?? getLanguageIdFromPath(filename) ?? "plaintext");
+        }
+        if (renderOptions.theme) {
+          renderOptions.theme = renderOptions.theme.toLowerCase().replace(/ +/g, "-");
+        }
+        const highlighter = await initShiki({
+          theme: renderOptions.theme,
+          ...options,
+          langs
+        });
+        let prerenderEl = hydrate2 ? this.querySelector(".monaco-editor-prerender") : void 0;
+        if (!prerenderEl && filename && workspace) {
+          try {
+            const code = await workspace.fs.readFile(filename);
+            const language = getLanguageIdFromPath(filename);
+            prerenderEl = containerEl.cloneNode(true);
+            prerenderEl.className = "monaco-editor-prerender";
+            prerenderEl.innerHTML = render(highlighter, {
+              ...renderOptions,
+              code: decode(code),
+              language
+            });
+          } catch (error) {
+            if (error instanceof ErrorNotFound) {
+            } else {
+              throw error;
+            }
+          }
+        }
+        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;
+              }
+            }
+          }
+        }
+        async function createMonaco() {
+          const monaco = await load(highlighter);
+          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));
+            editor.onDidScrollChange(debunce(storeViewState));
+            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 (renderOptions.filename === filename && renderOptions.code && renderOptions.code !== model.getValue()) {
+                model.setValue(renderOptions.code);
+              }
+            } catch (error) {
+              if (error instanceof ErrorNotFound) {
+                if (renderOptions.code && renderOptions.filename) {
+                  await workspace.fs.writeFile(renderOptions.filename, renderOptions.code);
+                  workspace._openTextDocument(renderOptions.filename, editor);
+                } else {
+                  editor.setModel(monaco.editor.createModel(""));
+                }
+              } else {
+                throw error;
+              }
+            }
+          } else if (renderOptions.code && (renderOptions.language || renderOptions.filename)) {
+            const model = monaco.editor.createModel(
+              renderOptions.code,
+              renderOptions.language,
+              renderOptions.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());
+                } else {
+                  setTimeout(() => prerenderEl.remove(), 150);
+                }
+              }, 100);
+            });
+          }
+        }
+        await createMonaco();
+      }
+    }
+  );
+  await editorWorkerPromise;
+  return {
+    workspace
+  };
+}
+function hydrate(options) {
+  return lazy(options, true);
+}
+export {
+  Workspace,
+  hydrate,
+  init,
+  lazy
+};

package/dist/lsp/css/setup.js

@@ -0,0 +1,43 @@
+// src/lsp/css/setup.ts
+import * as ls from "../language-service.js";
+async function setup2(monaco, languageId, workspace, languageSettings, formattingOptions) {
+  const { tabSize, insertSpaces, insertFinalNewline, trimFinalNewlines } = formattingOptions ?? {};
+  const createData = {
+    language: languageId,
+    data: {
+      useDefaultDataProvider: true
+      // todo: custom data provider
+    },
+    format: {
+      tabSize,
+      insertFinalNewline,
+      insertSpaces,
+      preserveNewLines: !trimFinalNewlines,
+      newlineBetweenSelectors: true,
+      newlineBetweenRules: true,
+      spaceAroundSelectorSeparator: false,
+      braceStyle: "collapse"
+    }
+  };
+  const worker = monaco.editor.createWebWorker({
+    moduleId: "lsp/css/worker",
+    label: languageId,
+    createData,
+    host: ls.createHost(workspace)
+  });
+  ls.setup(monaco);
+  ls.enableBasicFeatures(languageId, worker, ["/", "-", ":", "("], workspace);
+  ls.enableCodeAction(languageId, worker);
+  ls.enableColorPresentation(languageId, worker);
+  ls.enableDocumentLinks(languageId, worker);
+}
+function getWorkerUrl() {
+  const i = () => import("./worker.js");
+  const m = getWorkerUrl.toString().match(/import\(['"](.+?)['"]\)/);
+  if (!m) throw new Error("worker url not found", { cause: i });
+  return new URL(m[1], import.meta.url);
+}
+export {
+  getWorkerUrl,
+  setup2 as setup
+};