@joinezco/codeblock 0.0.8 → 0.0.10

package/dist/utils/fs.js

@@ -1,6 +1,7 @@
 import * as Comlink from "comlink";
 import { watchOptionsTransferHandler, asyncGeneratorTransferHandler } from "../rpc/serde";
 import { FileType } from '@volar/language-service';
+import { TopLevelFs } from "@joinezco/jswasi/filesystem";
 import { constants } from "@joinezco/jswasi";
 Comlink.transferHandlers.set("asyncGenerator", asyncGeneratorTransferHandler);
 Comlink.transferHandlers.set("watchOptions", watchOptionsTransferHandler);
@@ -58,7 +59,6 @@ export var Vfs;
                     let cur = "/";
                     for (const part of parts) {
                         cur = cur === "/" ? `/${part}` : `${cur}/${part}`;
-                        console.log('creating', { cur, abs });
                         const exists = await this.exists(cur);
                         if (exists)
                             continue;
@@ -115,13 +115,25 @@ export var Vfs;
                     type: toVolarFileType(filestat.filetype),
                 };
             },
+            async unlink(path) {
+                const abs = ensureAbs(path);
+                const res = await jswasiFs.removeEntry(abs, false);
+                if (res !== WASI_ESUCCESS) {
+                    throw new Error(`unlink failed (${res}) for ${abs}`);
+                }
+            },
         };
     };
-    // TODO: this is incorrect, fs is a Comlink proxy
     Vfs.fromMemfs = (fs) => {
         return {
             async readFile(path) {
-                return fs.promises.readFile(path, { encoding: "utf-8" });
+                const result = await fs.promises.readFile(path, { encoding: "utf-8" });
+                // memfs may return a Buffer — ensure we return a string
+                if (typeof result === 'string')
+                    return result;
+                if (result && typeof result.toString === 'function')
+                    return result.toString('utf-8');
+                return String(result ?? '');
             },
             async writeFile(path, data) {
                 await fs.promises.writeFile(path, data);
@@ -178,7 +190,10 @@ export var Vfs;
                 catch (err) {
                     return null;
                 }
-            }
+            },
+            async unlink(path) {
+                await fs.promises.unlink(path);
+            },
         };
     };
     Vfs.fromNodelike = (fs) => {
@@ -246,9 +261,25 @@ export var Vfs;
                 catch (err) {
                     return null;
                 }
-            }
+            },
+            async unlink(path) {
+                await fs.unlink(path);
+            },
         };
     };
+    /**
+     * Create an FSA (File System Access / OPFS) backed filesystem.
+     * Data persists across page reloads via the browser's Origin Private File System.
+     *
+     * @param name - Unique name for the FSA storage bucket (default: 'codeblock')
+     */
+    Vfs.fsa = async (name = 'codeblock') => {
+        const topFs = new TopLevelFs();
+        await topFs.addMount(
+        // @ts-ignore - TopLevelFs.addMount typing
+        undefined, "", undefined, "/", "fsa", 0n, { name, keepMetadata: "true", create: "true" });
+        return Vfs.fromJswasiFs(topFs);
+    };
     /**
      * Create a filesystem worker with optional snapshot data.
      *
@@ -257,27 +288,22 @@ export var Vfs;
      *                     for better performance with large files.
      */
     Vfs.worker = async (bufferOrUrl) => {
-        const url = new URL('../workers/fs.worker.js', import.meta.url);
-        const worker = new SharedWorker(url, { type: 'module' });
+        // TODO: fix this for non-Vite consumers
+        const worker = new SharedWorker(new URL('../workers/fs.worker.js', import.meta.url), { type: 'module' });
         worker.port.start();
         const proxy = Comlink.wrap(worker.port);
-        let fs;
+        let vfs;
         if (!bufferOrUrl) {
-            // No buffer or URL provided - create empty filesystem
-            ({ fs } = await proxy.mount({ mountPoint: '/' }));
+            vfs = await proxy.mount({ mountPoint: '/' });
         }
         else if (typeof bufferOrUrl === 'string') {
-            // URL provided - use optimized mountFromUrl for better performance
-            ({ fs } = await proxy.mountFromUrl({
-                url: bufferOrUrl,
-                mountPoint: '/'
-            }));
+            vfs = await proxy.mountFromUrl({ url: bufferOrUrl, mountPoint: '/' });
         }
         else {
-            // Buffer provided - use traditional mount method
-            ({ fs } = await proxy.mount(Comlink.transfer({ buffer: bufferOrUrl, mountPoint: "/" }, [bufferOrUrl])));
+            vfs = await proxy.mount(Comlink.transfer({ buffer: bufferOrUrl, mountPoint: "/" }, [bufferOrUrl]));
         }
-        return Comlink.proxy(Vfs.fromMemfs(fs));
+        console.debug('Filesystem worker mounted');
+        return vfs;
     };
     async function* walk(fs, path) {
         const files = await fs.readDir(path);
@@ -295,16 +321,95 @@ export var Vfs;
 })(Vfs || (Vfs = {}));
 export class VolarFs {
     #fs;
+    #fileCache = new Map();
+    #statCache = new Map();
+    #dirCache = new Map();
     constructor(fs) {
         this.#fs = fs;
     }
-    async stat(uri) {
+    /**
+     * Synchronously populate the cache from a pre-resolved map of path → content.
+     * This bypasses async VFS reads entirely, ensuring TypeScript gets lib files
+     * immediately on first program creation.
+     */
+    preloadFromMap(files) {
+        const now = Date.now();
+        for (const [path, content] of Object.entries(files)) {
+            this.#fileCache.set(path, content);
+            this.#statCache.set(path, {
+                type: FileType.File,
+                ctime: now,
+                mtime: now,
+                size: content.length,
+            });
+        }
+        // Build directory tree from file paths
+        const dirChildren = new Map();
+        for (const path of Object.keys(files)) {
+            let dir = path;
+            let child = '';
+            while (true) {
+                const lastSlash = dir.lastIndexOf('/');
+                if (lastSlash < 0)
+                    break;
+                child = dir.substring(lastSlash + 1);
+                dir = dir.substring(0, lastSlash) || '/';
+                if (!dirChildren.has(dir)) {
+                    dirChildren.set(dir, new Map());
+                }
+                const children = dirChildren.get(dir);
+                // First encounter of this child — it's the file itself
+                if (!children.has(child)) {
+                    // If we've already seen this as a parent dir, it's a Directory
+                    children.set(child, dirChildren.has(dir === '/' ? `/${child}` : `${dir}/${child}`) ? FileType.Directory : FileType.File);
+                }
+                if (dir === '/')
+                    break;
+            }
+        }
+        // Update directory type for children that are actually directories
+        for (const [dirPath, children] of dirChildren) {
+            for (const [name] of children) {
+                const fullPath = dirPath === '/' ? `/${name}` : `${dirPath}/${name}`;
+                if (dirChildren.has(fullPath)) {
+                    children.set(name, FileType.Directory);
+                }
+            }
+        }
+        // Cache directory listings and stats
+        for (const [dirPath, children] of dirChildren) {
+            this.#dirCache.set(dirPath, [...children.entries()]);
+            this.#statCache.set(dirPath, {
+                type: FileType.Directory,
+                ctime: now,
+                mtime: now,
+                size: 0,
+            });
+        }
+    }
+    stat(uri) {
+        const cached = this.#statCache.get(uri.path);
+        if (cached)
+            return cached;
         return this.#fs.stat(uri.path);
     }
-    async readDirectory(uri) {
+    readDirectory(uri) {
+        // Only use dirCache for node_modules subtree (stable, preloaded).
+        // Root and user directories must go through live VFS to pick up new files.
+        if (uri.path.startsWith('/node_modules/')) {
+            const cached = this.#dirCache.get(uri.path);
+            if (cached)
+                return cached;
+        }
         return this.#fs.readDir(uri.path);
     }
-    async readFile(uri) {
+    readFile(uri) {
+        const cached = this.#fileCache.get(uri.path);
+        if (cached !== undefined)
+            return cached;
         return this.#fs.readFile(uri.path);
     }
+    getCacheSize() {
+        return this.#fileCache.size;
+    }
 }

package/dist/utils/lsp.d.ts

@@ -1,26 +1,37 @@
 import { VfsInterface } from "../types";
-import { LanguageServerClient } from "@marimo-team/codemirror-languageserver";
 import { Extension } from "@codemirror/state";
-import { LanguageServer } from "@volar/language-server";
-import { EditorView } from "@codemirror/view";
-export type LSPClientExtension = {
-    client: LanguageServerClient;
-} & Extension;
+export declare const FileChangeType: {
+    readonly Created: 1;
+    readonly Changed: 2;
+    readonly Deleted: 3;
+};
+export interface LspLogEntry {
+    timestamp: number;
+    level: 'error' | 'warn' | 'info' | 'log';
+    message: string;
+}
+export declare namespace LspLog {
+    function entries(): readonly LspLogEntry[];
+    function push(level: LspLogEntry['level'], message: string): void;
+    function clear(): void;
+    function subscribe(fn: () => void): () => void;
+}
 export type ClientOptions = {
-    view: EditorView;
     language: string;
     path: string;
     fs: VfsInterface;
+    libFiles?: Record<string, string>;
 };
-export declare const languageServerFactory: Map<string, (args: {
-    fs: VfsInterface;
-}) => Promise<{
-    server: LanguageServer;
-}>>;
 export declare const lspWorkers: Map<string, SharedWorker>;
 export declare namespace LSP {
-    function worker(language: string, fs: VfsInterface): Promise<{
+    function worker(language: string, fs: VfsInterface, libFiles?: Record<string, string>): Promise<{
         worker: SharedWorker;
-    }>;
-    function client({ fs, language, path, view }: ClientOptions): Promise<LSPClientExtension>;
+        lspPort: MessagePort;
+    } | null>;
+    function client({ fs, language, path, libFiles }: ClientOptions): Promise<Extension | null>;
+    /**
+     * Notify all connected LSP clients that a file was created, changed, or deleted.
+     * This sends workspace/didChangeWatchedFiles so the server re-evaluates the project.
+     */
+    function notifyFileChanged(path: string, type?: number): void;
 }

package/dist/utils/lsp.js

@@ -1,74 +1,109 @@
 import * as Comlink from 'comlink';
-import { LanguageServerClient, languageServerWithClient } from "@marimo-team/codemirror-languageserver";
-import MessagePortTransport from "../rpc/transport";
-import { HighlightStyle } from "@codemirror/language";
-import { languageSupportCompartment, renderMarkdownCode } from "../editor";
-import markdownit from 'markdown-it';
-import { vscodeLightDark } from "../themes/vscode";
+import { LSPClient, languageServerExtensions } from "@codemirror/lsp-client";
+import { messagePortTransport } from "../rpc/transport";
 const clients = new Map();
-// TODO: better fix for this reference sticking around to prevent Comlink from releasing the port
-export const languageServerFactory = new Map();
+// FileChangeType from LSP spec
+export const FileChangeType = { Created: 1, Changed: 2, Deleted: 3 };
+const MAX_LOG_ENTRIES = 200;
+const lspLogBuffer = [];
+const lspLogListeners = new Set();
+export var LspLog;
+(function (LspLog) {
+    function entries() {
+        return lspLogBuffer;
+    }
+    LspLog.entries = entries;
+    function push(level, message) {
+        lspLogBuffer.push({ timestamp: Date.now(), level, message });
+        if (lspLogBuffer.length > MAX_LOG_ENTRIES) {
+            lspLogBuffer.splice(0, lspLogBuffer.length - MAX_LOG_ENTRIES);
+        }
+        for (const listener of lspLogListeners)
+            listener();
+    }
+    LspLog.push = push;
+    function clear() {
+        lspLogBuffer.length = 0;
+        for (const listener of lspLogListeners)
+            listener();
+    }
+    LspLog.clear = clear;
+    function subscribe(fn) {
+        lspLogListeners.add(fn);
+        return () => { lspLogListeners.delete(fn); };
+    }
+    LspLog.subscribe = subscribe;
+})(LspLog || (LspLog = {}));
+// Cached factory (Comlink-wrapped) and LSP port per language
+const languageServerFactory = new Map();
+const lspPorts = new Map();
 export const lspWorkers = new Map();
 export var LSP;
 (function (LSP) {
-    async function worker(language, fs) {
-        let factory, worker;
-        console.debug('language', { language });
+    async function worker(language, fs, libFiles) {
+        let factory;
+        let worker;
         switch (language) {
             case 'javascript':
             case 'typescript':
                 factory = languageServerFactory.get('javascript');
                 worker = lspWorkers.get('javascript');
-                console.debug('got worker', { worker, factory });
                 if (!factory) {
                     worker = new SharedWorker(new URL('../workers/javascript.worker.js', import.meta.url), { type: 'module' });
                     worker.port.start();
                     lspWorkers.set('javascript', worker);
-                    const { createLanguageServer } = Comlink.wrap(worker.port);
-                    factory = createLanguageServer;
+                    const wrapped = Comlink.wrap(worker.port);
+                    factory = wrapped.createLanguageServer;
                     languageServerFactory.set('javascript', factory);
                 }
                 break;
+            default:
+                return null;
         }
-        await factory?.(Comlink.proxy({ fs }));
-        return { worker };
+        // fs is proxied (has methods), libFiles is plain data (structured clone)
+        // The factory returns a MessagePort for the LSP connection (separate from Comlink's port)
+        const lspPort = await factory(Comlink.proxy(fs), libFiles);
+        lspPort.start();
+        lspPorts.set(language, lspPort);
+        return { worker: worker, lspPort };
     }
     LSP.worker = worker;
-    async function client({ fs, language, path, view }) {
+    async function client({ fs, language, path, libFiles }) {
         let client = clients.get(language);
-        let clientExtension;
         const uri = `file:///${path}`;
         if (!client) {
-            const { worker } = await LSP.worker(language, fs);
-            if (!worker)
+            const result = await LSP.worker(language, fs, libFiles);
+            if (!result)
                 return null;
-            console.debug('got worker', { worker });
-            client = new LanguageServerClient({
-                transport: new MessagePortTransport(worker.port),
+            const { lspPort } = result;
+            client = new LSPClient({
                 rootUri: 'file:///',
-                workspaceFolders: [{ name: 'workspace', uri: 'file:///' }]
+                extensions: languageServerExtensions(),
+                notificationHandlers: {
+                    "window/logMessage": (_client, params) => {
+                        const level = params.type === 1 ? 'error' : params.type === 2 ? 'warn' : params.type === 3 ? 'info' : 'log';
+                        LspLog.push(level, params.message);
+                        return false; // fall through to default handler (console)
+                    }
+                },
             });
+            client.connect(messagePortTransport(lspPort));
+            clients.set(language, client);
         }
-        clients.set(language, client);
-        clientExtension = { client, extension: [] };
-        clientExtension.extension = languageServerWithClient({
-            client: clientExtension.client,
-            documentUri: uri,
-            languageId: language,
-            allowHTMLContent: true,
-            markdownRenderer(markdown) {
-                const support = languageSupportCompartment.get(view.state);
-                const highlighter = vscodeLightDark[1].find(item => item.value instanceof HighlightStyle)?.value;
-                const parser = support.language?.parser;
-                const md = markdownit({
-                    highlight: (str) => {
-                        return renderMarkdownCode(str, parser, highlighter);
-                    }
-                });
-                return md.render(markdown);
-            },
-        });
-        return clientExtension;
+        return client.plugin(uri, language);
     }
     LSP.client = client;
+    /**
+     * Notify all connected LSP clients that a file was created, changed, or deleted.
+     * This sends workspace/didChangeWatchedFiles so the server re-evaluates the project.
+     */
+    function notifyFileChanged(path, type = FileChangeType.Changed) {
+        const uri = `file:///${path}`;
+        for (const client of clients.values()) {
+            client.notification("workspace/didChangeWatchedFiles", {
+                changes: [{ uri, type }]
+            });
+        }
+    }
+    LSP.notifyFileChanged = notifyFileChanged;
 })(LSP || (LSP = {}));

package/dist/utils/search.d.ts

@@ -15,7 +15,9 @@ export type HighlightedSearch = SearchResult & {
 };
 export declare class SearchIndex {
     index: MiniSearch;
+    savePath?: string;
     constructor(index: MiniSearch);
+    add(path: string): void;
     search(...params: Parameters<MiniSearch['search']>): HighlightedSearch[];
     /**
      *

package/dist/utils/search.js

@@ -7,9 +7,16 @@ export const defaultFilter = (path) => {
 };
 export class SearchIndex {
     index;
+    /// The VFS path this index was loaded from / saved to, if known.
+    savePath;
     constructor(index) {
         this.index = index;
     }
+    add(path) {
+        if (!this.index.has(path)) {
+            this.index.add({ path });
+        }
+    }
     search(...params) {
         const results = this.index.search(...params);
         const highlights = this.highlight(results);
@@ -48,10 +55,12 @@ export class SearchIndex {
         return new SearchIndex(index);
     }
     static async get(fs, path, fields = defaultFields) {
-        const index = await fs.exists(path) ? await fs.readFile(path) : null;
-        return index ?
-            SearchIndex.from(index, fields) :
-            SearchIndex.build(fs, { fields, idField: 'path' }).then(index => index.save(fs, path));
+        const data = await fs.exists(path) ? await fs.readFile(path) : null;
+        let index = data
+            ? SearchIndex.from(data, fields)
+            : await SearchIndex.build(fs, { fields, idField: 'path' }).then(idx => idx.save(fs, path));
+        index.savePath = path;
+        return index;
     }
     static async build(fs, { filter = defaultFilter, ...rest }) {
         const index = new MiniSearch({ ...rest });

package/dist/utils/typescript-defaults.d.ts

@@ -0,0 +1,57 @@
+import { VfsInterface } from "../types";
+export type TypescriptDefaultsConfig = {
+    /** ES target, determines which lib files are needed. Default: "ES2020" */
+    target?: string;
+    /** Additional lib names to load beyond the ES target libs.
+     *  Defaults to TypeScript's `.full` environment libs (dom, dom.iterable,
+     *  dom.asynciterable, webworker.importscripts, scripthost).
+     *  Pass `[]` to disable. */
+    additionalLibs?: string[];
+    /** Custom tsconfig compilerOptions merged with defaults */
+    compilerOptions?: Record<string, any>;
+};
+/**
+ * Returns the list of TypeScript lib file names required for a given ES target,
+ * plus any additional libs (DOM by default).
+ * Names are without the `lib.` prefix and `.d.ts` suffix (e.g. "es5", "dom").
+ */
+export declare function getRequiredLibs(target?: string, additionalLibs?: string[]): string[];
+/**
+ * Returns all individual lib names for the tsconfig `lib` field.
+ *
+ * Lists every individual lib file (e.g. "es5", "es2015.promise", "dom") instead of
+ * just the top-level entry (e.g. "ES2020"). This is critical for browser-based
+ * TypeScript via Volar: the virtual filesystem is async, so each
+ * `/// <reference lib="..." />` chain level requires a separate async round-trip.
+ * By listing all libs explicitly, TypeScript loads them all in a single pass.
+ */
+export declare function getLibFieldForTarget(target?: string, additionalLibs?: string[]): string[];
+/**
+ * Returns the cached lib file contents from the last prefill, if available.
+ * These are keyed by full path (e.g. "/node_modules/typescript/lib/lib.es5.d.ts").
+ * Includes the tsconfig.json content as well.
+ */
+export declare function getCachedLibFiles(): Record<string, string> | undefined;
+/**
+ * Pre-fills the virtual filesystem with TypeScript default lib definitions and tsconfig.
+ * Writes to `/node_modules/typescript/lib/` where Volar's TypeScript language server
+ * expects to find them in a browser environment.
+ *
+ * - Skips files that already exist on the filesystem
+ * - Only runs once per session (subsequent calls are no-ops)
+ * - Should be called lazily when a TypeScript file is first opened
+ *
+ * Returns a map of file paths to their contents for direct use by the LSP worker,
+ * bypassing the need for the worker to read through nested Comlink proxies.
+ *
+ * @param fs - Virtual filesystem to write to
+ * @param resolveLib - Function that resolves a lib name to its `.d.ts` content.
+ *                     Receives names like "es5", "es2015.collection".
+ *                     In Vite, use `import.meta.glob('typescript/lib/*.d.ts', { query: '?raw' })`.
+ * @param config - Optional target and tsconfig overrides
+ */
+export declare function prefillTypescriptDefaults(fs: VfsInterface, resolveLib: (name: string) => Promise<string>, config?: TypescriptDefaultsConfig): Promise<Record<string, string>>;
+/**
+ * Resets the prefilled state. Primarily useful for testing.
+ */
+export declare function resetPrefillState(): void;