modern-monaco 0.0.0-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2020-2024 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
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,359 @@
+> [!WARNING]
+> **This project is currently under active development and is not ready for production use.**
+
+# Modern Monaco
+
+Meeting the modern version of [Monaco Editor](https://www.npmjs.com/package/monaco-editor):
+
+- Easy to use, no `MonacoEnvironment` setup and web-worker/css loader
+- 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)**.
+- Workspace (edit history, file system provider, etc).
+- Automatically loading `.d.ts` from [esm.sh](https://esm.sh) CDN for type checking.
+- Using [import maps](https://github.com/WICG/import-maps) for resolving **bare specifier** imports in JavaScript/TypeScript.
+- VSCode `window` APIs like `showInputBox`, `showQuickPick`, etc.
+- Embedded languages(importmap/CSS/JavaScript) in HTML.
+- Inline `html` and `css` in JavaScript/TypeScript.
+- Auto-closing HTML/JSX tags.
+
+Planned features:
+
+- [ ] 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 `winodow.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).
+
+```bash
+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:
+
+```js
+import * from "https://esm.sh/modern-monaco"
+```
+
+## Usage
+
+`modern-monaco` provides three modes to create a browser based code editor:
+
+- **Lazy**: pre-hightlight code with Shiki while loading the `editor-core.js` in background.
+- **SSR**: render the editor in server side, and hydrate it in client side.
+- **Manual**: create a monaco editor instance manually.
+
+### Lazy Mode
+
+[monaco-editor](https://www.npmjs.com/package/monaco-editor) is a large package with extra CSS/Worker dependencies, not mention the `MonacoEnvironment` setup. `modern-monaco` provides a lazy but smart way to load the editor on demand, and it pre-highlights code with Shiki while loading the `editor-core.js` in background.
+
+```html
+<monaco-editor></monaco-editor>
+
+<script type="module">
+  import { lazy, Workspace } from "modern-monaco";
+
+  // create a workspace with initial files
+  const workspace = new Workspace({
+    initialFiles: {
+      "index.html": `<html><head><title>Hello, world!</title></head><body><script src="main.js"></script></body></html>`,
+      "main.js": `console.log("Hello, world!")`
+    },
+    entryFile: "index.html",
+  });
+
+  // initialize the editor lazily
+  lazy({ workspace });
+</script>
+```
+
+### SSR Mode
+
+SSR mode returns a instant rendered editor in server side, and hydrate it in client side.
+
+```js
+import { renderToWebComponent } from "modern-monaco/ssr";
+
+export default {
+  fetch(req) => {
+    const ssrOut = renderToWebComponent({
+      filename: "main.js",
+      code: `console.log("Hello, world!")`,
+      userAgent: req.headers.get("user-agent"), // detecte default font for different platforms
+      theme: "theme-id",
+    });
+    return new Response(html`
+      ${ssrOut}
+      <script type="module">
+        import { hydrate } from "https://esm.sh/modern-monaco";
+        // hydrate the editor
+        hydrate();
+      </script>
+    `, { headers: { "Content-Type": "text/html" }});
+  }
+}
+```
+
+### Manual Mode
+
+You can also create a [monaco editor](https://microsoft.github.io/monaco-editor/docs.html) instance manually.
+
+```html
+<div id="editor"></div>
+
+<script type="module">
+  import { init } from "modern-monaco";
+
+  // load monaco-editor-core.js
+  const monaco = await init();
+
+  // create a monaco editor instance
+  const editor = monaco.editor.create(document.getElementById("editor"));
+
+  // create and attach a model to the editor
+  editor.setModel(monaco.editor.createModel(`console.log("Hello, world!")`, "javascript"));
+</script>
+```
+
+## Using Workspace
+
+`modern-monaco` provides vscode-like workspace features, like edit history, file system provider, etc.
+
+```js
+import { lazy, Workspace } from "modern-monaco";
+
+// 1. 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",
+  /** initial files in the workspace. */
+  initialFiles: {
+    "index.html": `<html><head><title>Hello, world!</title></head><body><script src="main.js"></script></body></html>`,
+    "main.js": `console.log("Hello, world!")`,
+  },
+  /** file to open when the editor is loaded at first time. */
+  entryFile: "index.html",
+});
+
+// 2. use the workspace in lazy mode
+lazy({ workspace });
+
+// 3. open a file in the workspace
+workspace.openTextDocument("main.js")
+```
+
+### Adding `tsconfig.json`
+
+You can also add a `tsconfig.json` file to configure the TypeScript compiler options for the TypeScript language service worker.
+
+```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://github.com/WICG/import-maps) to resolving **bare specifier** import in JavaScript/TypeScript.
+By default, `modern-monaco` dedetects the `importmap` script of root `index.html`.
+
+```js
+const indexHtml = html`<!DOCTYPE html>
+<html>
+  <head>
+    <script type="importmap">
+      {
+        "imports": {
+          "@jsxRuntime": "https://esm.sh/react@18",
+          "react": "https://esm.sh/react@18"
+        }
+      }
+    </script>
+  </head>
+  <body>
+    <script type="module">
+      import React from "react";
+    </script>
+  </body>
+</html>
+`;
+const workspace = new Workspace({
+  initialFiles: {
+    "index.html": indexHtml,
+  },
+});
+```
+
+> [!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).
+
+
+## Editor Theme & Language Grammars
+
+`modern-monaco` uses [Shiki](https://shiki.style) for syntax highlighting with tons of grammars and themes. It loads themes and grammars from esm.sh on demand.
+
+### Setting the Editor Theme
+
+To set the theme of the editor, you can add a `theme` attribute to the `<monaco-editor>` element.
+
+```html
+<monaco-editor theme="theme-id"></monaco-editor>
+```
+
+or set it in the `lazy`, `init`, or `hydrate` function.
+
+```js
+lazy({
+  theme: "theme-id",
+});
+```
+
+> [!Note]
+> The theme ID should be one of the [Shiki Themes](https://shiki.style/themes).
+
+### Pre-loading Language Grammars
+
+By default, `modern-monaco` loads language grammars when a specific language mode is attached in the editor. You can also pre-load language grammars by adding the `langs` option to the `lazy`, `init`, or `hydrate` function.
+
+```js
+lazy({
+  langs: ["javascript", "typescript", "css", "html", "json", "markdown"],
+});
+```
+
+### Custom Language Grammars
+
+You can also add custom language grammars to the editor.
+
+```js
+lazy({
+  langs: [
+    // hand-crafted language grammar
+    {
+      name: "mylang",
+      scopeName: "source.mylang",
+      patterns: [/* ... */],
+    },
+    // or load a grammar from URL
+    "https://example.com/grammars/mylang.json",
+  ],
+});
+```
+
+## Editor Options
+
+You can set the editor options in the `<monaco-editor>` element as attributes. The editor options are the same as the [`editor.EditorOptions`](https://microsoft.github.io/monaco-editor/docs.html#variables/editor.EditorOptions.html).
+
+```html
+<monaco-editor
+  theme="theme-id"
+  fontFamily="Geist Mono"
+  fontSize="16"
+></monaco-editor>
+```
+
+For SSR mode, you can set the editor options in the `renderToWebComponent` function.
+
+```js
+import { renderToWebComponent } from "modern-monaco/ssr";
+
+const html = renderToWebComponent({
+  // render options
+  filename: "main.js",
+  code: `console.log("Hello, world!")`,
+  userAgent: req.headers.get("user-agent"), // font detection for different platforms
+  // ...
+
+  // editor options
+  theme: "theme-id",
+  fontFamily: "Geist Mono",
+  fontSize: 16,
+  // ...
+});
+```
+
+For manual mode, check [here](https://microsoft.github.io/monaco-editor/docs.html#functions/editor.create.html) for more details.
+
+## Language Server Protocol(LSP)
+
+`modern-monaco` by default supports full LSP features for following languages:
+
+- **HTML**
+- **CSS/SCSS/LESS**
+- **JavaScript/TypeScript**
+- **JSON**
+
+Plus, `modern-monaco` also supports features like:
+
+- **File System Provider for import completions**
+- **Embedded languages in HTML**
+- **Auto-closing HTML/JSX tags**
+
+> [!Note]
+> You don't need to set the `MonacoEnvironment.getWorker` for LSP support.
+> `modern-monaco` will automatically load required LSP workers.
+
+### LSP language configuration
+
+You can configure builtin LSPs in the `lazy`, `init`, or `hydrate` function.
+
+```js
+lazy({
+  // configure LSP for each language
+  lsp: {
+    html: {/* ... */},
+    json: {/* ... */},
+    typescript: {/* ... */},
+  },
+});
+```
+
+The `LSPLanguageConfig` interface is defined as:
+
+```ts
+export interface LSPLanguageConfig {
+  html?: {
+    attributeDefaultValue?: "empty" | "singlequotes" | "doublequotes";
+    customTags?: ITagData[];
+    hideAutoCompleteProposals?: boolean;
+  };
+  css?: {};
+  json?: {
+    schemas?: JSONSchemaSource[];
+  };
+  typescript?: {
+    /** The compiler options. */
+    compilerOptions?: ts.CompilerOptions;
+    /** The global import map. */
+    importMap?: ImportMap;
+    /** The version of the typescript from CDN. Default: ">= 5.0.0" */
+    tsVersion?: string;
+  };
+}
+```
+
+### Custom LSP
+
+[TODO]

package/dist/cache.js

@@ -0,0 +1,94 @@
+// src/cache.ts
+import { defineProperty, openIDB, promisifyIDBRequest, toURL } from "./util.js";
+var Cache = class {
+  _db = null;
+  constructor(name) {
+    if (globalThis.indexedDB) {
+      this._db = this._openDB(name);
+    }
+  }
+  _openDB(name) {
+    return openIDB(
+      name,
+      1,
+      { name: "store", keyPath: "url" }
+    ).then((db) => {
+      db.onclose = () => {
+        this._db = this._openDB(name);
+      };
+      return this._db = db;
+    });
+  }
+  async fetch(url) {
+    url = toURL(url);
+    const storedRes = await this.query(url);
+    if (storedRes) {
+      return storedRes;
+    }
+    const res = await fetch(url);
+    if (res.ok && this._db) {
+      const db = await this._db;
+      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));
+      }
+      const content = await res.arrayBuffer();
+      const headers = [...res.headers.entries()].filter(
+        ([k]) => ["cache-control", "content-type", "content-length", "x-typescript-types"].includes(k)
+      );
+      file.url = res.url;
+      file.headers = headers;
+      file.content = content;
+      await this.store(file);
+      const resp = new Response(content, { headers });
+      defineProperty(resp, "url", res.url);
+      defineProperty(resp, "redirected", res.redirected);
+      return resp;
+    }
+    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);
+      if (headers.has("location")) {
+        const redirectedUrl = headers.get("location");
+        const res2 = await this.query(redirectedUrl);
+        if (res2) {
+          defineProperty(res2, "redirected", true);
+        }
+        return res2;
+      }
+      const res = new Response(ret.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("monaco:cache");
+var cache_default = cache;
+export {
+  cache,
+  cache_default as default
+};