modern-monaco 0.3.8 → 0.4.0

package/README.md

@@ -216,7 +216,7 @@ const monaco = await init({
 
 monaco.editor.create(document.getElementById("editor"), {
   theme: "one-light",
-})
+});
 // update the editor theme
 monaco.editor.setTheme("one-dark-pro");
 ```
@@ -382,10 +382,22 @@ export interface LSPConfig {
   };
   /** HTML language configuration. */
   html?: {
-    attributeDefaultValue?: "empty" | "singlequotes" | "doublequotes";
+    /** Defines whether the standard HTML tags are shown. Default is true. */
+    useDefaultDataProvider?: boolean;
+    /** Provides a set of custom data providers. */
+    dataProviders?: { [providerId: string]: HTMLDataV1 };
+    /** Provides a set of custom HTML tags. */
     customTags?: ITagData[];
-    hideAutoCompleteProposals?: boolean;
+    /** The default value for empty attributes. Default is "empty". */
+    attributeDefaultValue?: "empty" | "singlequotes" | "doublequotes";
+    /** Whether to hide end tag suggestions. Default is false. */
     hideEndTagSuggestions?: boolean;
+    /** Whether to hide auto complete proposals. Default is false. */
+    hideAutoCompleteProposals?: boolean;
+    /** Whether to show the import map code lens. Default is true. */
+    importMapCodeLens?: boolean;
+    /** Options for the diagnostics. */
+    diagnosticsOptions?: DiagnosticsOptions;
   };
   /** CSS language configuration. */
   css?: {
@@ -393,11 +405,15 @@ export interface LSPConfig {
     useDefaultDataProvider?: boolean;
     /** Provides a set of custom data providers. */
     dataProviders?: { [providerId: string]: CSSDataV1 };
+    /** A list of valid properties that not defined in the standard CSS properties. */
+    validProperties?: string[];
+    /** Options for the diagnostics. */
+    diagnosticsOptions?: DiagnosticsOptions;
   };
   /** JSON language configuration. */
   json?: {
-    /** By default, the validator will return syntax and semantic errors. Set to false to disable the validator. */
-    validate?: boolean;
+    /** Whether to show the import map code lens. Default is true. */
+    importMapCodeLens?: boolean;
     /** Defines whether comments are allowed or not. Default is disallowed. */
     allowComments?: boolean;
     /** A list of known schemas and/or associations of schemas to file names. */
@@ -410,17 +426,48 @@ export interface LSPConfig {
     schemaValidation?: SeverityLevel;
     /** The severity of problems that occurred when resolving and loading schemas. Default is "warning". */
     schemaRequest?: SeverityLevel;
+    /** Options for the diagnostics. */
+    diagnosticsOptions?: DiagnosticsOptions;
   };
   /** TypeScript language configuration. */
   typescript?: {
+    /** The default import maps. */
+    importMap?: ImportMap;
     /** The compiler options. */
     compilerOptions?: ts.CompilerOptions;
-    /** The global import map. */
-    importMap?: ImportMap;
+    /** Options for the diagnostics. */
+    diagnosticsOptions?: DiagnosticsOptions;
   };
 }
 ```
 
+You can also set the diagnostics options for each language by adding the `diagnosticsOptions` option to the `lsp` options:
+
+```js
+lazy({
+  lsp: {
+    css: {
+      diagnosticsOptions: {
+        // filter out unknown property errors
+        filter: (diagnostic) => diagnostic.code !== "unknownProperty",
+      },
+    },
+    json: {
+      diagnosticsOptions: {
+        // disable syntax and semantic validation
+        validate: false,
+      },
+    },
+    typescript: {
+      diagnosticsOptions: {
+        // ignore type not found errors (code 2307)
+        codesToIgnore: [2307],
+      },
+    },
+  },
+});
+```
+
 ### 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.

package/dist/cache.mjs

@@ -23,6 +23,11 @@ var IndexedDB = class {
     const tx = db.transaction("store", "readwrite").objectStore("store");
     await promisifyIDBRequest(tx.put(file));
   }
+  async delete(url) {
+    const db = await this.#db;
+    const tx = db.transaction("store", "readwrite").objectStore("store");
+    await promisifyIDBRequest(tx.delete(url));
+  }
 };
 var MemoryCache = class {
   #cache = /* @__PURE__ */ new Map();
@@ -32,6 +37,9 @@ var MemoryCache = class {
   async put(file) {
     this.#cache.set(file.url, file);
   }
+  async delete(url) {
+    this.#cache.delete(url);
+  }
 };
 var Cache = class {
   _db;
@@ -43,41 +51,60 @@ var Cache = class {
     }
   }
   async fetch(url) {
-    url = normalizeURL(url);
     const storedRes = await this.query(url);
     if (storedRes) {
       return storedRes;
     }
     const res = await fetch(url);
-    if (res.ok) {
-      const file = {
-        url: url.href,
-        content: null,
-        ctime: Date.now()
-      };
-      if (res.redirected) {
-        file.headers = [["location", res.url]];
-        this._db.put(file);
+    if (!res.ok || !res.headers.has("cache-control")) {
+      return res;
+    }
+    const cacheControl = res.headers.get("cache-control");
+    const maxAgeStr = cacheControl.match(/max-age=(\d+)/)?.[1];
+    if (!maxAgeStr) {
+      return res;
+    }
+    const maxAge = parseInt(maxAgeStr);
+    if (isNaN(maxAge) || maxAge <= 0) {
+      return res;
+    }
+    const createdAt = Date.now();
+    const expiresAt = createdAt + maxAge * 1e3;
+    const file = {
+      url: res.url,
+      content: null,
+      createdAt,
+      expiresAt,
+      headers: []
+    };
+    if (res.redirected) {
+      await this._db.put({
+        ...file,
+        url: url instanceof URL ? url.href : url,
+        // raw url
+        headers: [["location", res.url]]
+      });
+    }
+    for (const header of ["content-type", "x-typescript-types"]) {
+      if (res.headers.has(header)) {
+        file.headers.push([header, res.headers.get(header)]);
       }
-      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;
-      this._db.put(file);
-      const resp = new Response(content, { headers });
-      defineProperty(resp, "url", res.url);
-      defineProperty(resp, "redirected", res.redirected);
-      return resp;
     }
-    return res;
+    file.content = await res.arrayBuffer();
+    await this._db.put(file);
+    const resp = new Response(file.content, { headers: file.headers });
+    defineProperty(resp, "url", res.url);
+    defineProperty(resp, "redirected", res.redirected);
+    return resp;
   }
   async query(key) {
     const url = normalizeURL(key).href;
     const file = await this._db.get(url);
-    if (file && file.headers) {
+    if (file) {
+      if (file.expiresAt < Date.now()) {
+        await this._db.delete(url);
+        return null;
+      }
       const headers = new Headers(file.headers);
       if (headers.has("location")) {
         const redirectedUrl = headers.get("location");

package/dist/core.mjs

@@ -1,46 +1,5 @@
-// node_modules/@esm.sh/import-map/dist/import-map.mjs
-function parseImportMapFromJson(json, baseURL) {
-  const importMap = {
-    $baseURL: new URL(baseURL ?? ".", "file:///").href,
-    imports: {},
-    scopes: {}
-  };
-  const v = JSON.parse(json);
-  if (isObject(v)) {
-    const { imports, scopes } = v;
-    if (isObject(imports)) {
-      validateImports(imports);
-      importMap.imports = imports;
-    }
-    if (isObject(scopes)) {
-      validateScopes(scopes);
-      importMap.scopes = scopes;
-    }
-  }
-  return importMap;
-}
-function validateImports(imports) {
-  for (const [k, v] of Object.entries(imports)) {
-    if (!v || typeof v !== "string") {
-      delete imports[k];
-    }
-  }
-}
-function validateScopes(imports) {
-  for (const [k, v] of Object.entries(imports)) {
-    if (isObject(v)) {
-      validateImports(v);
-    } else {
-      delete imports[k];
-    }
-  }
-}
-function isObject(v) {
-  return typeof v === "object" && v !== null && !Array.isArray(v);
-}
-
 // package.json
-var version = "0.3.8";
+var version = "0.4.0";
 
 // src/core.ts
 import { getExtnameFromLanguageId, getLanguageIdFromPath, grammars, initShiki, setDefaultWasmLoader, themes } from "./shiki.mjs";
@@ -270,13 +229,13 @@ function lazy(options) {
               editor.onDidScrollChange(debunce(storeViewState, 500));
               workspace.history.onChange((state) => {
                 if (editor.getModel()?.uri.toString() !== state.current) {
-                  workspace._openTextDocument(state.current, editor);
+                  workspace._openTextDocument(monaco, editor, state.current);
                 }
               });
             }
             if (filename && workspace) {
               try {
-                const model = await workspace._openTextDocument(filename, editor);
+                const model = await workspace._openTextDocument(monaco, editor, filename);
                 if (code && code !== model.getValue()) {
                   model.setValue(code);
                 }
@@ -288,7 +247,7 @@ function lazy(options) {
                       await workspace.fs.createDirectory(dirname);
                     }
                     await workspace.fs.writeFile(filename, code);
-                    workspace._openTextDocument(filename, editor);
+                    workspace._openTextDocument(monaco, editor, filename);
                   } else {
                     editor.setModel(monaco.editor.createModel(""));
                   }
@@ -334,7 +293,7 @@ async function loadMonaco(highlighter, workspace, lsp) {
   let importmapEl = null;
   if (importmapEl = document.querySelector("script[type='importmap']")) {
     try {
-      const { imports = {} } = parseImportMapFromJson(importmapEl.textContent);
+      const { imports = {} } = JSON.parse(importmapEl.textContent);
       if (imports["modern-monaco/editor-core"]) {
         editorCoreModuleUrl = imports["modern-monaco/editor-core"];
       }
@@ -385,7 +344,7 @@ async function loadMonaco(highlighter, workspace, lsp) {
     openCodeEditor: async (editor, resource, selectionOrPosition) => {
       if (workspace && resource.scheme === "file") {
         try {
-          await workspace._openTextDocument(resource.toString(), editor, selectionOrPosition);
+          await workspace._openTextDocument(monaco, editor, resource.toString(), selectionOrPosition);
           return true;
         } catch (err) {
           if (err instanceof NotFoundError) {

package/dist/editor-core.mjs

@@ -187738,7 +187738,7 @@ var QuickPickItemElement = class extends BaseQuickPickItemElement {
     this._onChecked = _onChecked;
     this.item = item;
     this._separator = _separator;
-    this._checked = false;
+    this._checked = item.picked;
     this.onChecked = hasCheckbox ? Event.map(Event.filter(this._onChecked.event, (e) => e.element === this), (e) => e.checked) : Event.None;
     this._saneDetail = item.detail;
     this._labelHighlights = item.highlights?.label;
@@ -205419,7 +205419,7 @@ var QuickPickItemKind = /* @__PURE__ */ ((QuickPickItemKind2) => {
   return QuickPickItemKind2;
 })(QuickPickItemKind || {});
 function showInputBox(options2 = {}) {
-  const { placeHolder, title, value, password, ignoreFocusOut, validateInput } = options2;
+  const { placeHolder, title, value, password, ignoreFocusOut, validateInput, prompt } = options2;
   const quickInputService = StandaloneServices.get(IQuickInputService);
   const box = quickInputService.createInputBox();
   const validateValue = validateInput ? (value2) => {
@@ -205442,6 +205442,9 @@ function showInputBox(options2 = {}) {
   if (placeHolder) {
     box.placeholder = placeHolder;
   }
+  if (prompt) {
+    box.prompt = prompt;
+  }
   if (password) {
     box.password = true;
   }
@@ -205476,7 +205479,7 @@ function showInputBox(options2 = {}) {
   });
 }
 function showQuickPick(items, options2 = {}) {
-  const { placeHolder, title, ignoreFocusOut, matchOnDescription, matchOnDetail, canPickMany, onDidSelectItem } = options2;
+  const { placeHolder, title, ignoreFocusOut, matchOnDescription, matchOnDetail, canPickMany, onDidSelectItem, prompt } = options2;
   const quickInputService = StandaloneServices.get(IQuickInputService);
   const pick = quickInputService.createQuickPick();
   if (title) {
@@ -205485,6 +205488,9 @@ function showQuickPick(items, options2 = {}) {
   if (placeHolder) {
     pick.placeholder = placeHolder;
   }
+  if (prompt) {
+    pick.prompt = prompt;
+  }
   if (ignoreFocusOut) {
     pick.ignoreFocusOut = true;
   }
@@ -205509,7 +205515,7 @@ function showQuickPick(items, options2 = {}) {
   if (onDidSelectItem) {
     pick.onDidChangeActive((v) => {
       v.forEach((item) => {
-        onDidSelectItem(convertPickItem(item?._kind_string ? item.label : item));
+        onDidSelectItem(convertPickItem(item?.plainMode ? item.label : item));
       });
     });
   }
@@ -205517,10 +205523,10 @@ function showQuickPick(items, options2 = {}) {
   return new Promise((resolve3) => {
     pick.onDidAccept(() => {
       if (canPickMany) {
-        resolve3(pick.selectedItems.map((item) => item._kind_string ? item.label : item));
+        resolve3(pick.selectedItems.map((item) => item.plainMode ? item.label : item));
       } else {
         let selectedItem = pick.selectedItems[0];
-        resolve3(selectedItem?._kind_string ? selectedItem.label : selectedItem);
+        resolve3(selectedItem?.plainMode ? selectedItem.label : selectedItem);
       }
       pick.dispose();
     });
@@ -205589,7 +205595,7 @@ function normalizeUri(uri) {
 }
 function convertPickItem(item) {
   if (typeof item === "string") {
-    return { type: "item", label: item, _kind_string: true };
+    return { type: "item", label: item, plainMode: true };
   }
   if (item.kind === -1 /* Separator */) {
     return { type: "separator", ...item };

package/dist/lsp/client.mjs

@@ -1230,7 +1230,7 @@ function lspRequest(req, token) {
   });
 }
 var registry = /* @__PURE__ */ new Map();
-function registerBasicFeatures(languageId, worker, completionTriggerCharacters, workspace) {
+function registerBasicFeatures(languageId, worker, completionTriggerCharacters, workspace, diagnosticsOptions) {
   const { editor, languages } = monaco;
   const onDispose = async (model) => {
     const workerProxy = await worker.withSyncedResources([]);
@@ -1246,7 +1246,9 @@ function registerBasicFeatures(languageId, worker, completionTriggerCharacters,
       onDispose(model);
     }
   });
-  registerDiagnostics(languageId, worker);
+  if (diagnosticsOptions?.validate ?? true) {
+    registerDiagnostics(languageId, worker, diagnosticsOptions);
+  }
   languages.registerCompletionItemProvider(languageId, new CompletionAdapter(worker, completionTriggerCharacters));
   languages.registerHoverProvider(languageId, new HoverAdapter(worker));
   languages.registerDocumentSymbolProvider(languageId, new DocumentSymbolAdapter(worker));
@@ -1277,14 +1279,28 @@ function registerBasicFeatures(languageId, worker, completionTriggerCharacters,
     });
   }
 }
-function registerDiagnostics(languageId, worker) {
+function registerDiagnostics(languageId, worker, options) {
   const { editor } = monaco;
   const modelChangeListeners = /* @__PURE__ */ new Map();
   const doValidate = async (model) => {
     const workerProxy = await worker.withSyncedResources([model.uri]);
     const diagnostics = await workerProxy.doValidation(model.uri.toString());
     if (diagnostics && !model.isDisposed()) {
-      const markers = diagnostics.map(diagnosticToMarker);
+      let markers = diagnostics.map(diagnosticToMarker);
+      if (options?.filter) {
+        markers = markers.filter(options.filter);
+      }
+      if (options?.codesToIgnore) {
+        markers = markers.filter((marker) => {
+          const code = typeof marker.code === "string" ? marker.code : marker.code?.value;
+          for (const codeToIgnore of options.codesToIgnore) {
+            if (code && code === String(codeToIgnore)) {
+              return false;
+            }
+          }
+          return true;
+        });
+      }
       monaco.editor.setModelMarkers(model, languageId, markers);
     }
   };

package/dist/lsp/css/setup.mjs

@@ -1,12 +1,20 @@
 // src/lsp/css/setup.ts
 import * as client from "../client.mjs";
 async function setup(monaco, languageId, languageSettings, formattingOptions, workspace) {
+  const validProperties = languageSettings?.validProperties;
+  const dataProviders = { ...languageSettings?.dataProviders };
+  if (validProperties) {
+    dataProviders["#valid-properties"] = {
+      version: 1.1,
+      properties: validProperties.map((property) => ({ name: property }))
+    };
+  }
   const { tabSize, insertSpaces, insertFinalNewline, trimFinalNewlines } = formattingOptions ?? {};
   const createData = {
     language: languageId,
     data: {
-      useDefaultDataProvider: true,
-      ...languageSettings
+      useDefaultDataProvider: languageSettings?.useDefaultDataProvider ?? true,
+      dataProviders
     },
     format: {
       tabSize,
@@ -25,7 +33,7 @@ async function setup(monaco, languageId, languageSettings, formattingOptions, wo
     host: client.createHost(workspace)
   });
   client.init(monaco);
-  client.registerBasicFeatures(languageId, worker, ["/", "-", ":", "("], workspace);
+  client.registerBasicFeatures(languageId, worker, ["/", "-", ":", "("], workspace, languageSettings?.diagnosticsOptions);
   client.registerCodeAction(languageId, worker);
   client.registerColorPresentation(languageId, worker);
   client.registerDocumentLinks(languageId, worker);