modern-monaco 0.1.0 → 0.1.1

package/README.md

@@ -232,6 +232,26 @@ lazy({
 > 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.
+
+```ts
+import { lazy, type FileSystem, Workspace } from "modern-monaco";
+
+class CustomFileSystem implements FileSystem {
+  // Custom FileSystem implementation
+}
+
+const workspace = new Workspace({
+  initialFiles: {
+    "index.html": indexHtml,
+    "app.tsx": appTsx,
+  },
+  customFs: new CustomFileSystem(),
+});
+```
+
 ## 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.

package/dist/workspace.js

@@ -19,64 +19,10 @@ var Workspace = class {
   _viewState;
   _entryFile;
   constructor(options = {}) {
-    const { name = "default", browserHistory, initialFiles, entryFile } = options;
-    const db = new WorkspaceDatabase(
-      name,
-      {
-        name: "fs-meta",
-        keyPath: "url",
-        onCreate: async (store) => {
-          if (initialFiles) {
-            const promises = [];
-            const now = Date.now();
-            const reg = { type: 1, version: 1, ctime: now, mtime: now, size: 0 };
-            const dir = { type: 2, version: 1, ctime: now, mtime: now, size: 0 };
-            for (const [name2, data] of Object.entries(initialFiles)) {
-              const { pathname, href: url } = filenameToURL(name2);
-              let parent = pathname.slice(0, pathname.lastIndexOf("/"));
-              while (parent) {
-                promises.push(
-                  promisifyIDBRequest(
-                    store.put({ url: toURL(parent).href, ...dir })
-                  )
-                );
-                parent = parent.slice(0, parent.lastIndexOf("/"));
-              }
-              promises.push(
-                promisifyIDBRequest(
-                  store.put({ url, ...reg, size: encode(data).byteLength })
-                )
-              );
-            }
-            await Promise.all(promises);
-          }
-        }
-      },
-      {
-        name: "fs-blob",
-        keyPath: "url",
-        onCreate: async (store) => {
-          if (initialFiles) {
-            const promises = [];
-            for (const [name2, data] of Object.entries(initialFiles)) {
-              promises.push(
-                promisifyIDBRequest(
-                  store.put({ url: filenameToURL(name2).href, content: encode(data) })
-                )
-              );
-            }
-            await Promise.all(promises);
-          }
-        }
-      },
-      {
-        name: "viewstate",
-        keyPath: "url"
-      }
-    );
+    const { name = "default", browserHistory, initialFiles, entryFile, customFs } = options;
     this._monaco = promiseWithResolvers();
-    this._fs = new FS(db);
-    this._viewState = new WorkspaceStateStorage(db, "viewstate");
+    this._fs = customFs ?? new FS("modern-monaco-workspace:" + name, initialFiles);
+    this._viewState = new WorkspaceStateStorage("modern-monaco-viewstate:" + name);
     this._entryFile = entryFile;
     if (browserHistory) {
       if (!globalThis.history) {
@@ -170,10 +116,56 @@ var Workspace = class {
   }
 };
 var FS = class {
-  constructor(_db) {
-    this._db = _db;
-  }
   _watchers = /* @__PURE__ */ new Set();
+  _db;
+  constructor(scope, initialFiles) {
+    this._db = new WorkspaceDatabase(scope, {
+      name: "fs-meta",
+      keyPath: "url",
+      onCreate: async (store) => {
+        if (initialFiles) {
+          const promises = [];
+          const now = Date.now();
+          const reg = { type: 1, version: 1, ctime: now, mtime: now, size: 0 };
+          const dir = { type: 2, version: 1, ctime: now, mtime: now, size: 0 };
+          for (const [name, data] of Object.entries(initialFiles)) {
+            const { pathname, href: url } = filenameToURL(name);
+            let parent = pathname.slice(0, pathname.lastIndexOf("/"));
+            while (parent) {
+              promises.push(
+                promisifyIDBRequest(
+                  store.put({ url: toURL(parent).href, ...dir })
+                )
+              );
+              parent = parent.slice(0, parent.lastIndexOf("/"));
+            }
+            promises.push(
+              promisifyIDBRequest(
+                store.put({ url, ...reg, size: encode(data).byteLength })
+              )
+            );
+          }
+          await Promise.all(promises);
+        }
+      }
+    }, {
+      name: "fs-blob",
+      keyPath: "url",
+      onCreate: async (store) => {
+        if (initialFiles) {
+          const promises = [];
+          for (const [name, data] of Object.entries(initialFiles)) {
+            promises.push(
+              promisifyIDBRequest(
+                store.put({ url: filenameToURL(name).href, content: encode(data) })
+              )
+            );
+          }
+          await Promise.all(promises);
+        }
+      }
+    });
+  }
   async _getIdbObjectStore(storeName, readwrite = false) {
     const db = await this._db.open();
     return db.transaction(storeName, readwrite ? "readwrite" : "readonly").objectStore(storeName);
@@ -459,8 +451,8 @@ var ErrorNotFound = class extends Error {
 };
 var WorkspaceDatabase = class {
   _db;
-  constructor(workspaceName, ...stores) {
-    const open = () => openIDB("modern-monaco-workspace/" + workspaceName, 1, ...stores).then((db) => {
+  constructor(name, ...stores) {
+    const open = () => openIDB(name, 1, ...stores).then((db) => {
       db.onclose = () => {
         this._db = open();
       };
@@ -473,18 +465,24 @@ var WorkspaceDatabase = class {
   }
 };
 var WorkspaceStateStorage = class {
-  constructor(_db, _stateName) {
-    this._db = _db;
-    this._stateName = _stateName;
+  #db;
+  constructor(dbName) {
+    this.#db = new WorkspaceDatabase(
+      dbName,
+      {
+        name: "store",
+        keyPath: "url"
+      }
+    );
   }
   async get(uri) {
     const url = toURL(uri).href;
-    const store = (await this._db.open()).transaction(this._stateName, "readonly").objectStore(this._stateName);
+    const store = (await this.#db.open()).transaction("store", "readonly").objectStore("store");
     return promisifyIDBRequest(store.get(url)).then((result) => result?.state);
   }
   async save(uri, state) {
     const url = toURL(uri).href;
-    const store = (await this._db.open()).transaction(this._stateName, "readwrite").objectStore(this._stateName);
+    const store = (await this.#db.open()).transaction("store", "readwrite").objectStore("store");
     await promisifyIDBRequest(store.put({ url, state }));
   }
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-monaco",
   "description": "A modern version of Monaco Editor",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/types/index.d.ts

@@ -1,7 +1,7 @@
 import type monacoNS from "./monaco.d.ts";
 import type { LSPConfig } from "./lsp.d.ts";
 import type { TextmateGrammarName, TextmateThemeName } from "./textmate.d.ts";
-import type { ErrorNotFound, Workspace } from "./workspace.d.ts";
+import type { ErrorNotFound, FileSystem, Workspace } from "./workspace.d.ts";
 
 type Awaitable<T> = T | Promise<T>;
 type MaybeGetter<T> = Awaitable<MaybeModule<T>> | (() => Awaitable<MaybeModule<T>>);
@@ -67,4 +67,4 @@ export const errors: {
   NotFound: ErrorNotFound;
 };
 
-export { Workspace };
+export { Workspace, FileSystem };

package/types/workspace.d.ts

@@ -14,6 +14,8 @@ export interface WorkspaceInit {
   server?: {
     url: string | URL;
   };
+  /** custom filesystem implementation to override the default IndexedDB filesystem */
+  customFs?: FileSystem;
 }
 
 export class Workspace {
@@ -62,13 +64,13 @@ export interface FileSystem {
   readTextFile(filename: string): Promise<string>;
   rename(oldName: string, newName: string, options?: { overwrite: boolean }): Promise<void>;
   stat(filename: string): Promise<FileStat>;
-  writeFile(filename: string, content: string | Uint8Array): Promise<void>;
+  writeFile(filename: string, content: string | Uint8Array, context?: { isModelContentChange: boolean }): Promise<void>;
   watch(filename: string, options: { recursive: boolean }, handle: FileSystemWatchHandle): () => void;
   watch(filename: string, handle: FileSystemWatchHandle): () => void;
 }
 
 export interface FileSystemWatchHandle {
-  (kind: "create" | "modify" | "remove", filename: string, type?: number): void;
+  (kind: "create" | "modify" | "remove", filename: string, type?: number, context?: { isModelContentChange: boolean }): void;
 }
 
 export class ErrorNotFound extends Error {}