modern-monaco 0.1.5 → 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 (6) hide show
  1. package/README.md +8 -8
  2. package/dist/cache.js +43 -35
  3. package/dist/shiki.js +17 -6
  4. package/dist/ssr/index.js +2 -2
  5. package/dist/ssr/workerd.js +2 -2
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -88,12 +88,12 @@ export default {
88
88
  `console.log("Hello, world!")`,
89
89
  {
90
90
  language: "javascript",
91
- theme: "OneDark-Pro",
91
+ theme: "vitesse-dark",
92
92
  userAgent: req.headers.get("user-agent"), // detect default font for different platforms
93
93
  },
94
94
  );
95
95
  return new Response(
96
- html`
96
+ /* html */`
97
97
  ${editorHTML}
98
98
  <script type="module">
99
99
  import { hydrate } from "https://esm.sh/modern-monaco";
@@ -190,14 +190,14 @@ modern-monaco uses [Shiki](https://shiki.style) for syntax highlighting with ext
190
190
  To set the editor theme, you can add a `theme` attribute to the `<monaco-editor>` element.
191
191
 
192
192
  ```html
193
- <monaco-editor theme="OneDark-Pro"></monaco-editor>
193
+ <monaco-editor theme="vitesse-dark"></monaco-editor>
194
194
  ```
195
195
 
196
196
  Or set it in the `lazy`, `init`, or `hydrate` function.
197
197
 
198
198
  ```js
199
199
  lazy({
200
- theme: "OneDark-Pro",
200
+ theme: "vitesse-dark",
201
201
  });
202
202
  ```
203
203
 
@@ -207,7 +207,7 @@ lazy({
207
207
  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:
208
208
 
209
209
  ```js
210
- import OneDark from "tm-themes/themes/OneDark-Pro.json" with { type: "json" };
210
+ import OneDark from "tm-themes/themes/vitesse-dark.json" with { type: "json" };
211
211
 
212
212
  lazy({
213
213
  theme: OneDark,
@@ -259,7 +259,7 @@ You can set editor options as attributes in the `<monaco-editor>` element. The e
259
259
 
260
260
  ```html
261
261
  <monaco-editor
262
- theme="OneDark-Pro"
262
+ theme="vitesse-dark"
263
263
  fontFamily="Geist Mono"
264
264
  fontSize="16"
265
265
  ></monaco-editor>
@@ -273,7 +273,7 @@ import { renderToWebComponent } from "modern-monaco/ssr";
273
273
  const html = await renderToWebComponent(
274
274
  `console.log("Hello, world!")`,
275
275
  {
276
- theme: "OneDark-Pro",
276
+ theme: "vitesse-dark",
277
277
  language: "javascript",
278
278
  fontFamily: "Geist Mono",
279
279
  fontSize: 16,
@@ -348,7 +348,7 @@ export interface LSPLanguageConfig {
348
348
  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.
349
349
 
350
350
  ```js
351
- const indexHtml = html`<!DOCTYPE html>
351
+ const indexHtml = /* html */`<!DOCTYPE html>
352
352
  <html>
353
353
  <head>
354
354
  <script type="importmap">
package/dist/cache.js CHANGED
@@ -1,24 +1,47 @@
1
1
  // src/cache.ts
2
2
  import { defineProperty, openIDB, promisifyIDBRequest, toURL } from "./util.js";
3
- var Cache = class {
4
- _db = null;
3
+ var IndexedDB = class {
4
+ #db;
5
5
  constructor(name) {
6
- if (globalThis.indexedDB) {
7
- this._db = this._openDB(name);
8
- }
6
+ this.#db = this.#openDB(name);
9
7
  }
10
- _openDB(name) {
11
- return openIDB(
12
- name,
13
- 1,
14
- { name: "store", keyPath: "url" }
15
- ).then((db) => {
8
+ #openDB(name) {
9
+ return openIDB(name, 1, { name: "store", keyPath: "url" }).then((db) => {
16
10
  db.onclose = () => {
17
- this._db = this._openDB(name);
11
+ this.#db = this.#openDB(name);
18
12
  };
19
- return this._db = db;
13
+ return this.#db = db;
20
14
  });
21
15
  }
16
+ async get(url) {
17
+ const db = await this.#db;
18
+ const tx = db.transaction("store", "readonly").objectStore("store");
19
+ return promisifyIDBRequest(tx.get(url));
20
+ }
21
+ async put(file) {
22
+ const db = await this.#db;
23
+ const tx = db.transaction("store", "readwrite").objectStore("store");
24
+ await promisifyIDBRequest(tx.put(file));
25
+ }
26
+ };
27
+ var MemoryCache = class {
28
+ #cache = /* @__PURE__ */ new Map();
29
+ async get(url) {
30
+ return this.#cache.get(url) ?? null;
31
+ }
32
+ async put(file) {
33
+ this.#cache.set(file.url, file);
34
+ }
35
+ };
36
+ var Cache = class {
37
+ _db;
38
+ constructor(name) {
39
+ if (globalThis.indexedDB) {
40
+ this._db = new IndexedDB(name);
41
+ } else {
42
+ this._db = new MemoryCache();
43
+ }
44
+ }
22
45
  async fetch(url) {
23
46
  url = toURL(url);
24
47
  const storedRes = await this.query(url);
@@ -26,17 +49,15 @@ var Cache = class {
26
49
  return storedRes;
27
50
  }
28
51
  const res = await fetch(url);
29
- if (res.ok && this._db) {
30
- const db = await this._db;
52
+ if (res.ok) {
31
53
  const file = {
32
54
  url: url.href,
33
55
  content: null,
34
56
  ctime: Date.now()
35
57
  };
36
58
  if (res.redirected) {
37
- const tx = db.transaction("store", "readwrite").objectStore("store");
38
59
  file.headers = [["location", res.url]];
39
- await promisifyIDBRequest(tx.put(file));
60
+ this._db.put(file);
40
61
  }
41
62
  const content = await res.arrayBuffer();
42
63
  const headers = [...res.headers.entries()].filter(
@@ -45,7 +66,7 @@ var Cache = class {
45
66
  file.url = res.url;
46
67
  file.headers = headers;
47
68
  file.content = content;
48
- await this.store(file);
69
+ this._db.put(file);
49
70
  const resp = new Response(content, { headers });
50
71
  defineProperty(resp, "url", res.url);
51
72
  defineProperty(resp, "redirected", res.redirected);
@@ -54,15 +75,10 @@ var Cache = class {
54
75
  return res;
55
76
  }
56
77
  async query(key) {
57
- if (!this._db) {
58
- return null;
59
- }
60
78
  const url = toURL(key).href;
61
- const db = await this._db;
62
- const tx = db.transaction("store", "readonly").objectStore("store");
63
- const ret = await promisifyIDBRequest(tx.get(url));
64
- if (ret && ret.headers) {
65
- const headers = new Headers(ret.headers);
79
+ const file = await this._db.get(url);
80
+ if (file && file.headers) {
81
+ const headers = new Headers(file.headers);
66
82
  if (headers.has("location")) {
67
83
  const redirectedUrl = headers.get("location");
68
84
  const res2 = await this.query(redirectedUrl);
@@ -71,20 +87,12 @@ var Cache = class {
71
87
  }
72
88
  return res2;
73
89
  }
74
- const res = new Response(ret.content, { headers });
90
+ const res = new Response(file.content, { headers });
75
91
  defineProperty(res, "url", url);
76
92
  return res;
77
93
  }
78
94
  return null;
79
95
  }
80
- async store(file) {
81
- if (!this._db) {
82
- return;
83
- }
84
- const db = await this._db;
85
- const tx = db.transaction("store", "readwrite").objectStore("store");
86
- await promisifyIDBRequest(tx.put(file));
87
- }
88
96
  };
89
97
  var cache = new Cache("modern-monaco-cache");
90
98
  var cache_default = cache;
package/dist/shiki.js CHANGED
@@ -8097,30 +8097,41 @@ async function initShiki({
8097
8097
  return highlighterCore;
8098
8098
  }
8099
8099
  function loadTMTheme(src, cdn = "https://esm.sh") {
8100
+ if (typeof src === "string" && /^[a-zA-Z]/.test(src)) {
8101
+ src = src.replace(/\s+/g, "-").replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
8102
+ }
8100
8103
  if (typeof src === "string" && tmThemes.has(src)) {
8101
8104
  const theme = tmThemes.get(src);
8102
8105
  if (theme) {
8103
8106
  return theme;
8104
8107
  }
8105
- const url = new URL(`/tm-themes@${version2}/themes/${src}.json`, cdn);
8106
- return cache.fetch(url).then(
8108
+ const url2 = new URL(`/tm-themes@${version2}/themes/${src}.json`, cdn);
8109
+ return cache.fetch(url2).then(
8107
8110
  (res) => res.json().then((theme2) => {
8108
8111
  tmThemes.set(src, theme2);
8109
8112
  return theme2;
8110
8113
  })
8111
8114
  );
8112
8115
  }
8113
- return cache.fetch(src).then((res) => res.json());
8116
+ const url = typeof src === "string" ? new URL(src) : src;
8117
+ if (url.protocol === "http" || url.protocol === "https") {
8118
+ return cache.fetch(url).then((res) => res.json());
8119
+ }
8120
+ throw new Error(`Unsupported theme source: ${src}`);
8114
8121
  }
8115
8122
  function loadTMGrammar(src, cdn = "https://esm.sh") {
8116
8123
  if (typeof src === "string") {
8117
8124
  const g = tmGrammars.find((g2) => g2.name === src);
8118
8125
  if (g) {
8119
- const url = new URL(`/tm-grammars@${version}/grammars/${g.name}.json`, cdn);
8120
- return cache.fetch(url).then((res) => res.json());
8126
+ const url2 = new URL(`/tm-grammars@${version}/grammars/${g.name}.json`, cdn);
8127
+ return cache.fetch(url2).then((res) => res.json());
8121
8128
  }
8122
8129
  }
8123
- return cache.fetch(src).then((res) => res.json());
8130
+ const url = typeof src === "string" ? new URL(src) : src;
8131
+ if (url.protocol === "http" || url.protocol === "https") {
8132
+ return cache.fetch(url).then((res) => res.json());
8133
+ }
8134
+ throw new Error(`Unsupported grammar source: ${src}`);
8124
8135
  }
8125
8136
  function getGarmmarInfoFromPath(path) {
8126
8137
  const idx = path.lastIndexOf(".");
package/dist/ssr/index.js CHANGED
@@ -12,14 +12,14 @@ async function renderToString(input, options) {
12
12
  const highlighter = await (ssrHighlighter ?? (ssrHighlighter = initShiki(shiki)));
13
13
  const promises = [];
14
14
  if (theme && !highlighter.getLoadedThemes().includes(theme)) {
15
- console.info(`[modern-monaco] Loading theme '${theme}' from ${shiki?.tmDownloadCDN ?? "https://esm.sh"}/tm-themes ...`);
15
+ console.info(`[modern-monaco] Loading theme '${theme}' from CDN...`);
16
16
  promises.push(highlighter.loadThemeFromCDN(theme));
17
17
  }
18
18
  if (language || filename) {
19
19
  const languageId = language ?? getLanguageIdFromPath(filename);
20
20
  if (languageId && !highlighter.getLoadedLanguages().includes(languageId)) {
21
21
  console.info(
22
- `[modern-monaco] Loading garmmar '${languageId}' from ${shiki?.tmDownloadCDN ?? "https://esm.sh"}/tm-grammars ...`
22
+ `[modern-monaco] Loading garmmar '${languageId}' from CDN...`
23
23
  );
24
24
  promises.push(highlighter.loadGrammarFromCDN(languageId));
25
25
  }
package/dist/ssr/workerd.js CHANGED
@@ -11,14 +11,14 @@ async function renderToString(input, options) {
11
11
  const highlighter = await (ssrHighlighter ?? (ssrHighlighter = initShiki(shiki)));
12
12
  const promises = [];
13
13
  if (theme && !highlighter.getLoadedThemes().includes(theme)) {
14
- console.info(`[modern-monaco] Loading theme '${theme}' from ${shiki?.tmDownloadCDN ?? "https://esm.sh"}/tm-themes ...`);
14
+ console.info(`[modern-monaco] Loading theme '${theme}' from CDN...`);
15
15
  promises.push(highlighter.loadThemeFromCDN(theme));
16
16
  }
17
17
  if (language || filename) {
18
18
  const languageId = language ?? getLanguageIdFromPath(filename);
19
19
  if (languageId && !highlighter.getLoadedLanguages().includes(languageId)) {
20
20
  console.info(
21
- `[modern-monaco] Loading garmmar '${languageId}' from ${shiki?.tmDownloadCDN ?? "https://esm.sh"}/tm-grammars ...`
21
+ `[modern-monaco] Loading garmmar '${languageId}' from CDN...`
22
22
  );
23
23
  promises.push(highlighter.loadGrammarFromCDN(languageId));
24
24
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "modern-monaco",
3
3
  "description": "A modern version of Monaco Editor",
4
- "version": "0.1.5",
4
+ "version": "0.1.6",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
7
7
  "module": "./dist/index.js",