modern-monaco 0.0.0-beta.1 → 0.0.0-beta.3

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2020-2024 Je Xia <i@jex.me>
+Copyright (c) 2025 Je Xia <i@jex.me>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,5 +1,6 @@
 > [!WARNING]
-> **This project is currently under active development and is not ready for production use.**
+> **This project is currently under active development, the API may change at any time. Use at your own risk.**
+> Please report any issues or feature requests on the [issues](https://github.com/esm-dev/modern-monaco/issues) page.
 
 # Modern Monaco
 
@@ -8,7 +9,7 @@ Meeting the modern version of [Monaco Editor](https://www.npmjs.com/package/mona
 - Easy to use, no `MonacoEnvironment` setup and web-worker/css loader needed.
 - Using [Shiki](https://shiki.style) for syntax highlighting with tons of grammars and themes.
 - Lazy loading: pre-highlighting code with Shiki while loading `monaco-editor-core` in background.
-- Support **server-side rendering(SSR)**.
+- Support server-side rendering(SSR).
 - Workspace (edit history, file system provider, persist protocol, etc).
 - Automatically loading `.d.ts` from [esm.sh](https://esm.sh) CDN for type checking.
 - Using [import maps](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap) for resolving **bare specifier** imports in JavaScript/TypeScript.
@@ -17,25 +18,9 @@ Meeting the modern version of [Monaco Editor](https://www.npmjs.com/package/mona
 - Inline `html` and `css` in JavaScript/TypeScript.
 - Auto-closing HTML/JSX tags.
 
-Planned features:
-
-- [ ] Built-in sidebar
-  - [ ] file explorer
-  - [ ] chat
-- [ ] Workspace persist API
-- [ ] Show a loading indicator while loading the editor
-- [ ] Quick open menu (only if a workspace is provided)
-- [ ] Drag and drop file (only if a workspace is provided)
-- [ ] Display non-code files, like images, videos, etc
-- [ ] VSCode `window.show<XXX>Message` APIs
-- [ ] Emmet
-- [ ] Markdown language service
-- [ ] [Volar](https://github.com/volarjs/volar.js) integration
-- [ ] Support [Shiki JS RegExp Engine](https://shiki.style/guide/regex-engines#javascript-regexp-engine-experimental)
-
 ## Installation
 
-You can install the package from NPM in your node project with a bundler like [vite](http://vitejs.dev).
+You can install `modern-monaco` from NPM:
 
 ```bash
 npm i modern-monaco typescript
@@ -44,7 +29,7 @@ npm i modern-monaco typescript
 > [!Note]
 > The `typescript` package is required by JavaScript/TypeScript LSP worker. We recommend `typescript@5.5.x` or later.
 
-or import it from [esm.sh](https://esm.sh/) in browser without build step:
+or import it from [esm.sh](https://esm.sh/) CDN in browser without build step:
 
 ```js
 import * from "https://esm.sh/modern-monaco"
@@ -237,7 +222,7 @@ lazy({
 
 > [!Note]
 > By default, `modern-monaco` uses `react` or `preact` in the `importmap` script as the `jsxImportSource` option for typescript worker.
-> To use a custom `jsxImportSource` option, add `@jsxRuntime` specifier in the `importmap` script. For example, [solid-js](https://esm.sh/solid-js/jsx-runtime).
+> To use a custom `jsxImportSource` option, add `@jsxRuntime` specifier in the `importmap` script.
 
 ## Editor Theme & Language Grammars
 
@@ -345,17 +330,17 @@ For manual mode, check [here](https://microsoft.github.io/monaco-editor/docs.htm
 
 `modern-monaco` by default supports full LSP features for the following languages:
 
-- **HTML**
-- **CSS/SCSS/LESS**
-- **JavaScript/TypeScript**
-- **JSON**
+- HTML
+- CSS/SCSS/LESS
+- JavaScript/TypeScript
+- JSON
 
 Plus, `modern-monaco` also supports features like:
 
-- **File System Provider for import completions**
-- **Embedded languages in HTML**
-- **Inline `html` and `css` in JavaScript/TypeScript.**
-- **Auto-closing HTML/JSX tags**
+- File System Provider for import completions
+- Embedded languages in HTML
+- Inline `html` and `css` in JavaScript/TypeScript.
+- Auto-closing HTML/JSX tags
 
 > [!Note]
 > You don't need to set the `MonacoEnvironment.getWorker` for LSP support.
@@ -401,11 +386,7 @@ export interface LSPLanguageConfig {
 }
 ```
 
-### Custom LSP
-
-[TODO]
-
-### Using `core` module
+## Using `core` module
 
 `modern-monaco` includes built-in grammars and LSP providers for HTML, CSS, JavaScript/TypeScript, and JSON. If you don't need these features, you can use the `modern-monaco/core` sub-module to reduce the bundle size.
 
@@ -414,3 +395,7 @@ import { lazy } from "modern-monaco/core";
 
 lazy();
 ```
+
+## License
+
+[MIT License](https://opensource.org/licenses/MIT)

package/dist/core.js

@@ -22,7 +22,10 @@ var dec = /* @__PURE__ */ new TextDecoder();
 function decode(data) {
   return data instanceof Uint8Array ? dec.decode(data) : data;
 }
-function debunce(fn, delay = 500) {
+function isDigital(v) {
+  return typeof v === "number" || typeof v === "string" && /^\d+$/.test(v);
+}
+function debunce(fn, delay) {
   let timer = null;
   return () => {
     if (timer !== null) {
@@ -34,6 +37,15 @@ function debunce(fn, delay = 500) {
     }, delay);
   };
 }
+function promiseWithResolvers() {
+  let resolve;
+  let reject;
+  const promise = new Promise((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+  return { promise, resolve, reject };
+}
 
 // src/core.ts
 import { init as initLS } from "./lsp/language-service.js";
@@ -80,20 +92,20 @@ async function init(options) {
 }
 async function lazy(options, hydrate2) {
   const workspace = options?.workspace;
+  const { promise: editorWorkerPromise, resolve: onDidEditorWorkerResolve } = promiseWithResolvers();
   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);
+    return monacoCore = loadMonaco(highlighter, workspace, options?.lsp, onDidEditorWorkerResolve).then((m) => monacoCore = m);
   }
   function setStyle(el, style) {
     Object.assign(el.style, style);
   }
+  function getAttr(el, name) {
+    return el.getAttribute(name);
+  }
   customElements.define(
     "monaco-editor",
     class extends HTMLElement {
@@ -102,7 +114,7 @@ async function lazy(options, hydrate2) {
         for (const attrName of this.getAttributeNames()) {
           const key = editorProps.find((k) => k.toLowerCase() === attrName);
           if (key) {
-            let value = this.getAttribute(attrName);
+            let value = getAttr(this, attrName);
             if (value === "") {
               value = key === "minimap" || key === "stickyScroll" ? { enabled: true } : true;
             } else {
@@ -169,18 +181,26 @@ async function lazy(options, hydrate2) {
           }
         }
         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` });
+        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 {
-          setStyle(this, { width: "100%", height: "100%" });
+          if (isDigital(widthAttr)) {
+            widthAttr += "px";
+          }
+          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";
-        containerEl.style.width = "100%";
-        containerEl.style.height = "100%";
+        setStyle(containerEl, { width: "100%", height: "100%" });
         this.appendChild(containerEl);
         if (!filename && workspace) {
           if (workspace.history.state.current) {
@@ -240,7 +260,7 @@ async function lazy(options, hydrate2) {
             }
           }
         }
-        async function createMonaco() {
+        async function createEditor() {
           const monaco = await load(highlighter);
           const editor = monaco.editor.create(containerEl, renderOptions);
           if (workspace) {
@@ -254,8 +274,8 @@ async function lazy(options, hydrate2) {
                 }
               }
             };
-            editor.onDidChangeCursorSelection(debunce(storeViewState));
-            editor.onDidScrollChange(debunce(storeViewState));
+            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);
@@ -299,7 +319,7 @@ async function lazy(options, hydrate2) {
             });
           }
         }
-        await createMonaco();
+        await createEditor();
       }
     }
   );
@@ -311,7 +331,7 @@ async function lazy(options, hydrate2) {
 function hydrate(options) {
   return lazy(options, true);
 }
-async function loadMonaco(highlighter, workspace, lsp, onDidEditorWorkerReady) {
+async function loadMonaco(highlighter, workspace, lsp, onDidEditorWorkerResolve) {
   const monaco = await import("./editor-core.js");
   const lspProviders = { ...builtinLSPProviders, ...lsp?.providers };
   workspace?.setupMonaco(monaco);
@@ -341,7 +361,7 @@ async function loadMonaco(highlighter, workspace, lsp, onDidEditorWorkerReady) {
       const worker = createWebWorker(url, void 0);
       if (!provider) {
         const onMessage = (e) => {
-          onDidEditorWorkerReady?.();
+          onDidEditorWorkerResolve?.();
           worker.removeEventListener("message", onMessage);
         };
         worker.addEventListener("message", onMessage);

package/dist/util.js

@@ -27,7 +27,10 @@ function filenameToURL(filename) {
 function isPlainObject(v) {
   return typeof v === "object" && v !== null && v.constructor === Object;
 }
-function debunce(fn, delay = 500) {
+function isDigital(v) {
+  return typeof v === "number" || typeof v === "string" && /^\d+$/.test(v);
+}
+function debunce(fn, delay) {
   let timer = null;
   return () => {
     if (timer !== null) {
@@ -182,6 +185,7 @@ export {
   defineProperty,
   encode,
   filenameToURL,
+  isDigital,
   isPlainObject,
   openIDB,
   openIDBCursor,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-monaco",
   "description": "A modern version of Monaco Editor",
-  "version": "0.0.0-beta.1",
+  "version": "0.0.0-beta.3",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -37,8 +37,8 @@
     "./shiki": {
       "import": "./dist/shiki.js"
     },
-    "./utils": {
-      "import": "./dist/utils.js"
+    "./util": {
+      "import": "./dist/util.js"
     },
     "./lsp/*": {
       "import": "./dist/lsp/*.js"