npm - modern-monaco - Versions diffs - 0.1.4 → 0.1.6 - Mend

modern-monaco 0.1.4 → 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/README.md +131 -118
package/dist/cache.js +43 -35
package/dist/core.js +7 -2
package/dist/editor-core.js +5 -0
package/dist/lsp/typescript/worker.js +183 -182
package/dist/shiki.js +27 -8
package/dist/ssr/index.js +2 -2
package/dist/ssr/workerd.js +2 -2
package/package.json +1 -1

package/README.md CHANGED Viewed

@@ -20,15 +20,12 @@ Meet the modern version of [Monaco Editor](https://www.npmjs.com/package/monaco-
 ## Installation
-You can install `modern-monaco` from NPM:
+You can install modern-monaco from NPM:
 ```bash
-npm i modern-monaco typescript
+npm i modern-monaco
 ```
-> [!Note]
-> The `typescript` package is required by the JavaScript/TypeScript LSP worker. We recommend `typescript@5.5.x` or later.
 Or import it from [esm.sh](https://esm.sh/) CDN in the browser without a build step:
 ```js
@@ -37,7 +34,7 @@ import * from "https://esm.sh/modern-monaco"
 ## Usage
-`modern-monaco` provides three modes to create a browser-based code editor:
+modern-monaco provides three modes to create a browser-based code editor:
 - **Lazy**: pre-highlight code with Shiki while loading the `editor-core.js` in the background.
 - **SSR**: render a mock editor on the server side and hydrates it on the client side.
@@ -45,11 +42,11 @@ import * from "https://esm.sh/modern-monaco"
 ### Lazy Mode
-[monaco-editor](https://www.npmjs.com/package/monaco-editor) is a large package with additional CSS/Worker modules that requires `MonacoEnvironment` setup for language service support. `modern-monaco` provides a simple yet smart way to load editor modules on demand.
+[monaco-editor](https://www.npmjs.com/package/monaco-editor) is a large package with additional CSS/Worker modules that requires `MonacoEnvironment` setup for language service support. modern-monaco provides a simple yet smart way to load editor modules on demand.
-By pre-highlighting code with Shiki while loading editor modules in the background, `modern-monaco` can significantly reduce loading screen time.
+By pre-highlighting code with Shiki while loading editor modules in the background, modern-monaco can significantly reduce loading screen time.
-To create a Monaco editor lazily, you need to add a `<monaco-editor>` custom element in your app's HTML, then call the `lazy` function from modern-monaco. You also need to provide a workspace object to manage files for the editor.
+To create a Monaco editor lazily, you need to add a `<monaco-editor>` custom element in the HTML of your app, then call the `lazy` function provided by modern-monaco. You may also need a `Workspace` object to manage editor models without calling the native Monaco APIs.
 ```html
 <!-- index.html -->
@@ -64,8 +61,8 @@ import { lazy, Workspace } from "modern-monaco";
 // create a workspace with initial files
 const workspace = new Workspace({
   initialFiles: {
-    "index.html": `<html>...</body></html>`,
-    "main.js": `console.log("Hello, world!")`
+    "index.html": `<html><body>...</body></html>`,
+    "main.js": `console.log("Hello, world!")`,
   },
   entryFile: "index.html",
 });
@@ -73,8 +70,9 @@ const workspace = new Workspace({
 // initialize the editor lazily
 await lazy({ workspace });
-// open a file in the workspace
-workspace.openTextDocument("main.js");
+// write a file and open it in the editor
+workspace.fs.writeFile("util.js", "export function add(a, b) { return a + b; }");
+workspace.openTextDocument("util.js");
 ```
 ### SSR Mode
@@ -86,29 +84,31 @@ import { renderToWebComponent } from "modern-monaco/ssr";
 export default {
   async fetch(req) {
-    const ssrOut = await renderToWebComponent(
+    const editorHTML = await renderToWebComponent(
       `console.log("Hello, world!")`,
       {
-        theme: "OneDark-Pro",
         language: "javascript",
+        theme: "vitesse-dark",
         userAgent: req.headers.get("user-agent"), // detect default font for different platforms
       },
     );
     return new Response(
-      html`
-      ${ssrOut}
-      <script type="module">
-        import { hydrate } from "https://esm.sh/modern-monaco";
-        // hydrate the editor
-        hydrate();
-      </script>
-    `,
+      /* html */`
+        ${editorHTML}
+        <script type="module">
+          import { hydrate } from "https://esm.sh/modern-monaco";
+          // hydrate the editor
+          hydrate();
+        </script>
+      `,
       { headers: { "Content-Type": "text/html" } },
     );
   },
 };
 ```
+SSR Demo: https://modern-monaco-demo.vercel.app ([Source](https://github.com/pi0/modern-monaco-demo) by [@pi0](https://github.com/pi0))
 ### Manual Mode
 You can also create a [Monaco editor](https://microsoft.github.io/monaco-editor/docs.html) instance manually. It loads themes and language grammars automatically.
@@ -132,12 +132,12 @@ You can also create a [Monaco editor](https://microsoft.github.io/monaco-editor/
 ## Using Workspace
-`modern-monaco` provides VSCode-like workspace features, such as edit history, file system provider, and more.
+modern-monaco provides VSCode-like workspace features, such as edit history, file system provider, and more.
 ```js
 import { lazy, Workspace } from "modern-monaco";
-// 1. create a workspace with initial files
+// create a workspace with initial files
 const workspace = new Workspace({
   /** The name of the workspace, used for project isolation. Default is "default". */
   name: "project-name",
@@ -150,94 +150,19 @@ const workspace = new Workspace({
   entryFile: "index.html",
 });
-// 2. use the workspace in lazy mode
+// use the workspace in lazy mode
 lazy({ workspace });
-// 3. open a file in the workspace
+// open a file in the workspace
 workspace.openTextDocument("main.js");
 ```
-### Adding `tsconfig.json`
+### Custom Workspace FileSystem
-You can add a `tsconfig.json` file to configure the TypeScript compiler options for the TypeScript language service.
-```js
-const tsconfig = {
-  "compilerOptions": {
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-  },
-};
-const workspace = new Workspace({
-  initialFiles: {
-    "tsconfig.json": JSON.stringify(tsconfig, null, 2),
-  },
-});
-```
-### Using Import Maps
-`modern-monaco` uses [import maps](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap) to resolve **bare specifier** imports in JavaScript/TypeScript. By default, `modern-monaco` detects the `importmap` from the root `index.html` in the workspace.
-```js
-const indexHtml = html`<!DOCTYPE html>
-<html>
-  <head>
-    <script type="importmap">
-      {
-        "imports": {
-          "react": "https://esm.sh/react@18",
-          "react-dom/": "https://esm.sh/react-dom@18/"
-        }
-      }
-    </script>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="app.tsx"></script>
-  </body>
-</html>
-`;
-const appTsx = `import { createRoot } from "react-dom/client";
-createRoot(document.getElementById("root")).render(<div>Hello, world!</div>);
-`;
-const workspace = new Workspace({
-  initialFiles: {
-    "index.html": indexHtml,
-    "app.tsx": appTsx,
-  },
-});
-```
-You can also provide an import map object as the `lsp.typescript.importMap` option in the `lazy`, `init`, or `hydrate` functions.
-```js
-lazy({
-  lsp: {
-    typescript: {
-      importMap: {
-        "react": "https://esm.sh/react@18",
-        "react-dom/": "https://esm.sh/react-dom@18/",
-      },
-    },
-  },
-});
-```
-> [!Note]
-> By default, `modern-monaco` uses `react` or `preact` in the `importmap` script as the `jsxImportSource` option for the TypeScript worker.
-> To use a custom `jsxImportSource` option, add the `@jsxRuntime` specifier in the `importmap` script.
-### Using Custom FileSystem
-You can provide a custom filesystem implementation to override the default IndexedDB filesystem.
+By default, modern-monaco uses `IndexedDB` as the workspace filesystem to persist the editor changes. With a custom filesystem, you can implement your own persistence logic.
 ```ts
-import { lazy, type FileSystem, Workspace } from "modern-monaco";
+import { type FileSystem, lazy, Workspace } from "modern-monaco";
 class CustomFileSystem implements FileSystem {
   // Custom FileSystem implementation
@@ -250,35 +175,39 @@ const workspace = new Workspace({
   },
   customFS: new CustomFileSystem(),
 });
+lazy({ workspace });
 ```
+Please refer to the [FileSystem](./types/workspace.d.ts#L54) interface for more details.
 ## Editor Theme & Language Grammars
-`modern-monaco` uses [Shiki](https://shiki.style) for syntax highlighting with extensive grammars and themes. By default, it loads themes and grammars from esm.sh on demand.
+modern-monaco uses [Shiki](https://shiki.style) for syntax highlighting with extensive grammars and themes. By default, it loads themes and grammars from esm.sh on demand.
 ### Setting the Editor Theme
 To set the editor theme, you can add a `theme` attribute to the `<monaco-editor>` element.
 ```html
-<monaco-editor theme="OneDark-Pro"></monaco-editor>
+<monaco-editor theme="vitesse-dark"></monaco-editor>
 ```
 Or set it in the `lazy`, `init`, or `hydrate` function.
 ```js
 lazy({
-  theme: "OneDark-Pro",
+  theme: "vitesse-dark",
 });
 ```
 > [!Note]
 > The theme ID should be one of the [Shiki Themes](https://shiki.style/themes).
-`modern-monaco` loads the theme data from the CDN when a theme ID is provided. You can also use a theme from the `tm-themes` package:
+modern-monaco loads the theme data from the CDN when a theme ID is provided. You can also use a theme from the `tm-themes` package:
 ```js
-import OneDark from "tm-themes/themes/OneDark-Pro.json" with { type: "json" };
+import OneDark from "tm-themes/themes/vitesse-dark.json" with { type: "json" };
 lazy({
   theme: OneDark,
@@ -287,14 +216,14 @@ lazy({
 ### Pre-loading Language Grammars
-By default, `modern-monaco` loads language grammars when a specific language mode is attached to the editor. You can also pre-load language grammars by adding the `langs` option to the `lazy`, `init`, or `hydrate` functions. The `langs` option is an array of language grammars, which can be a language grammar object, a language ID, or a URL to the language grammar.
+By default, modern-monaco loads language grammars when a specific language mode is attached to the editor. You can also pre-load language grammars by adding the `langs` option to the `lazy`, `init`, or `hydrate` functions. The `langs` option is an array of language grammars, which can be a language grammar object, a language ID, or a URL to the language grammar.
 ```js
 import markdown from "tm-grammars/markdown.json" with { type: "json" };
 lazy({
   langs: [
-    // load language grammars from CDN
+    // load language grammars from CDN, these language ids must be defined in the `tm-grammars` package
     "html",
     "css",
     "javascript",
@@ -330,7 +259,7 @@ You can set editor options as attributes in the `<monaco-editor>` element. The e
 ```html
 <monaco-editor
-  theme="OneDark-Pro"
+  theme="vitesse-dark"
   fontFamily="Geist Mono"
   fontSize="16"
 ></monaco-editor>
@@ -344,7 +273,7 @@ import { renderToWebComponent } from "modern-monaco/ssr";
 const html = await renderToWebComponent(
   `console.log("Hello, world!")`,
   {
-    theme: "OneDark-Pro",
+    theme: "vitesse-dark",
     language: "javascript",
     fontFamily: "Geist Mono",
     fontSize: 16,
@@ -356,14 +285,14 @@ For manual mode, check [here](https://microsoft.github.io/monaco-editor/docs.htm
 ## Language Server Protocol (LSP)
-`modern-monaco` by default supports full LSP features for the following languages:
+modern-monaco by default supports full LSP features for the following languages:
 - HTML
 - CSS/SCSS/LESS
 - JavaScript/TypeScript
 - JSON
-Additionally, `modern-monaco` supports features like:
+Additionally, modern-monaco supports features like:
 - File System Provider for import completions
 - Embedded languages in HTML
@@ -372,7 +301,7 @@ Additionally, `modern-monaco` supports features like:
 > [!Note]
 > You don't need to set `MonacoEnvironment.getWorker` for LSP support.
-> `modern-monaco` automatically loads the required LSP workers.
+> modern-monaco automatically loads the required LSP workers.
 ### LSP Language Configuration
@@ -414,9 +343,93 @@ export interface LSPLanguageConfig {
 }
 ```
+### Import Maps
+modern-monaco uses [import maps](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap) to resolve **bare specifier** imports in JavaScript/TypeScript. By default, modern-monaco detects the `importmap` from the root `index.html` in the workspace.
+```js
+const indexHtml = /* html */`<!DOCTYPE html>
+<html>
+  <head>
+    <script type="importmap">
+      {
+        "imports": {
+          "react": "https://esm.sh/react@18",
+          "react-dom/": "https://esm.sh/react-dom@18/"
+        }
+      }
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="app.tsx"></script>
+  </body>
+</html>
+`;
+const appTsx = `import { createRoot } from "react-dom/client";
+createRoot(document.getElementById("root")).render(<div>Hello, world!</div>);
+`;
+const workspace = new Workspace({
+  initialFiles: {
+    "index.html": indexHtml,
+    "app.tsx": appTsx,
+  },
+});
+```
+You can also provide an import map object as the `lsp.typescript.importMap` option in the `lazy`, `init`, or `hydrate` functions.
+```js
+lazy({
+  lsp: {
+    typescript: {
+      importMap: {
+        "react": "https://esm.sh/react@18",
+        "react-dom/": "https://esm.sh/react-dom@18/",
+      },
+    },
+  },
+});
+```
+### Adding `tsconfig.json`
+You can add a `tsconfig.json` file to configure the TypeScript compiler options for the TypeScript language service.
+```js
+const tsconfig = {
+  "compilerOptions": {
+    "target": "ES2022",
+    "strict": true,
+  },
+};
+const workspace = new Workspace({
+  initialFiles: {
+    "tsconfig.json": JSON.stringify(tsconfig, null, 2),
+  },
+});
+```
+You can also manually add the TypeScript compiler options as the `lsp.typescript.compilerOptions` option in the `lazy`, `init`, or `hydrate` functions.
+```js
+lazy({
+  lsp: {
+    typescript: {
+      compilerOptions: {
+        target: "ES2022",
+        strict: true,
+      },
+    },
+  },
+});
+```
 ## Using the `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.
+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.
 ```js
 import { lazy } from "modern-monaco/core";

package/dist/cache.js CHANGED Viewed

@@ -1,24 +1,47 @@
 // src/cache.ts
 import { defineProperty, openIDB, promisifyIDBRequest, toURL } from "./util.js";
-var Cache = class {
-  _db = null;
+var IndexedDB = class {
+  #db;
   constructor(name) {
-    if (globalThis.indexedDB) {
-      this._db = this._openDB(name);
-    }
+    this.#db = this.#openDB(name);
   }
-  _openDB(name) {
-    return openIDB(
-      name,
-      1,
-      { name: "store", keyPath: "url" }
-    ).then((db) => {
+  #openDB(name) {
+    return openIDB(name, 1, { name: "store", keyPath: "url" }).then((db) => {
       db.onclose = () => {
-        this._db = this._openDB(name);
+        this.#db = this.#openDB(name);
       };
-      return this._db = db;
+      return this.#db = db;
     });
   }
+  async get(url) {
+    const db = await this.#db;
+    const tx = db.transaction("store", "readonly").objectStore("store");
+    return promisifyIDBRequest(tx.get(url));
+  }
+  async put(file) {
+    const db = await this.#db;
+    const tx = db.transaction("store", "readwrite").objectStore("store");
+    await promisifyIDBRequest(tx.put(file));
+  }
+};
+var MemoryCache = class {
+  #cache = /* @__PURE__ */ new Map();
+  async get(url) {
+    return this.#cache.get(url) ?? null;
+  }
+  async put(file) {
+    this.#cache.set(file.url, file);
+  }
+};
+var Cache = class {
+  _db;
+  constructor(name) {
+    if (globalThis.indexedDB) {
+      this._db = new IndexedDB(name);
+    } else {
+      this._db = new MemoryCache();
+    }
+  }
   async fetch(url) {
     url = toURL(url);
     const storedRes = await this.query(url);
@@ -26,17 +49,15 @@ var Cache = class {
       return storedRes;
     }
     const res = await fetch(url);
-    if (res.ok && this._db) {
-      const db = await this._db;
+    if (res.ok) {
       const file = {
         url: url.href,
         content: null,
         ctime: Date.now()
       };
       if (res.redirected) {
-        const tx = db.transaction("store", "readwrite").objectStore("store");
         file.headers = [["location", res.url]];
-        await promisifyIDBRequest(tx.put(file));
+        this._db.put(file);
       }
       const content = await res.arrayBuffer();
       const headers = [...res.headers.entries()].filter(
@@ -45,7 +66,7 @@ var Cache = class {
       file.url = res.url;
       file.headers = headers;
       file.content = content;
-      await this.store(file);
+      this._db.put(file);
       const resp = new Response(content, { headers });
       defineProperty(resp, "url", res.url);
       defineProperty(resp, "redirected", res.redirected);
@@ -54,15 +75,10 @@ var Cache = class {
     return res;
   }
   async query(key) {
-    if (!this._db) {
-      return null;
-    }
     const url = toURL(key).href;
-    const db = await this._db;
-    const tx = db.transaction("store", "readonly").objectStore("store");
-    const ret = await promisifyIDBRequest(tx.get(url));
-    if (ret && ret.headers) {
-      const headers = new Headers(ret.headers);
+    const file = await this._db.get(url);
+    if (file && file.headers) {
+      const headers = new Headers(file.headers);
       if (headers.has("location")) {
         const redirectedUrl = headers.get("location");
         const res2 = await this.query(redirectedUrl);
@@ -71,20 +87,12 @@ var Cache = class {
         }
         return res2;
       }
-      const res = new Response(ret.content, { headers });
+      const res = new Response(file.content, { headers });
       defineProperty(res, "url", url);
       return res;
     }
     return null;
   }
-  async store(file) {
-    if (!this._db) {
-      return;
-    }
-    const db = await this._db;
-    const tx = db.transaction("store", "readwrite").objectStore("store");
-    await promisifyIDBRequest(tx.put(file));
-  }
 };
 var cache = new Cache("modern-monaco-cache");
 var cache_default = cache;

package/dist/core.js CHANGED Viewed

@@ -11,7 +11,7 @@ function createWebWorker(url, name) {
 }
 // src/core.ts
-import { getLanguageIdFromPath, initShiki, setDefaultWasmLoader, tmGrammars, tmThemes } from "./shiki.js";
+import { getExtnameFromLanguageId, getLanguageIdFromPath, initShiki, setDefaultWasmLoader, tmGrammars, tmThemes } from "./shiki.js";
 import { initShikiMonacoTokenizer, registerShikiMonacoTokenizer } from "./shiki.js";
 import { render } from "./shiki.js";
 import { getWasmInstance } from "./shiki-wasm.js";
@@ -281,6 +281,10 @@ async function lazy(options, hydrate2) {
             } 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 {
@@ -355,7 +359,8 @@ async function loadMonaco(highlighter, workspace, lsp, onDidEditorWorkerResolve)
       }
       return worker;
     },
-    getLanguageIdFromUri: (uri) => getLanguageIdFromPath(uri.path)
+    getLanguageIdFromUri: (uri) => getLanguageIdFromPath(uri.path),
+    getExtnameFromLanguageId
   });
   monaco.editor.registerLinkOpener({
     async open(link) {

package/dist/editor-core.js CHANGED Viewed

@@ -177729,6 +177729,11 @@ Object.assign(editor, {
     if (!language2 && uri) {
       language2 = MonacoEnvironment.getLanguageIdFromUri?.(uri);
     }
+    if (!uri) {
+      const extname3 = MonacoEnvironment.getExtnameFromLanguageId?.(language2) ?? "txt";
+      const uuid = Math.round((Date.now() + Math.random()) * 1e3).toString(36);
+      uri = "file:///.inmemory/" + uuid + "." + extname3;
+    }
     return createModel2(value, language2, uri);
   },
   getModel: (uri) => {