sandlot 0.1.2 → 0.1.4

package/src/ts-libs.ts

@@ -2,8 +2,8 @@
  * TypeScript standard library fetcher and cache.
  *
  * Fetches TypeScript's lib.*.d.ts files from jsDelivr CDN and caches
- * them in IndexedDB for reuse. These files provide types for built-in
- * JavaScript APIs (Array, Number, String) and browser APIs (console, window, document).
+ * them in memory. These files provide types for built-in JavaScript APIs
+ * (Array, Number, String) and browser APIs (console, window, document).
  */
 
 /**
@@ -17,13 +17,6 @@ const TS_VERSION = "5.9.3";
  */
 const CDN_BASE = `https://cdn.jsdelivr.net/npm/typescript@${TS_VERSION}/lib`;
 
-/**
- * IndexedDB database name for lib cache
- */
-const DB_NAME = "ts-lib-cache";
-const DB_VERSION = 1;
-const STORE_NAME = "libs";
-
 /**
  * Default libs for browser environment with ES2020 target.
  * These provide types for console, DOM APIs, and modern JS features.
@@ -145,74 +138,21 @@ export async function fetchAllLibs(libs: string[]): Promise<Map<string, string>>
 }
 
 /**
- * Open the IndexedDB database for lib caching.
- */
-async function openDatabase(): Promise<IDBDatabase> {
-  return new Promise((resolve, reject) => {
-    const request = indexedDB.open(DB_NAME, DB_VERSION);
-
-    request.onerror = () => reject(request.error);
-    request.onsuccess = () => resolve(request.result);
-
-    request.onupgradeneeded = (event) => {
-      const db = (event.target as IDBOpenDBRequest).result;
-      if (!db.objectStoreNames.contains(STORE_NAME)) {
-        db.createObjectStore(STORE_NAME);
-      }
-    };
-  });
-}
-
-/**
- * Promisify an IDBRequest
+ * In-memory cache for TypeScript lib files.
+ * Shared across all LibCache instances.
  */
-function promisifyRequest<T>(request: IDBRequest<T>): Promise<T> {
-  return new Promise((resolve, reject) => {
-    request.onsuccess = () => resolve(request.result);
-    request.onerror = () => reject(request.error);
-  });
-}
-
-/**
- * Cache key for the current TypeScript version
- */
-function getCacheKey(): string {
-  return `libs-${TS_VERSION}`;
-}
+let memoryCache: Map<string, string> | null = null;
 
 /**
- * Serializable format for storing libs in IndexedDB
- */
-interface CachedLibs {
-  version: string;
-  timestamp: number;
-  libs: Record<string, string>;
-}
-
-/**
- * LibCache provides IndexedDB-backed caching for TypeScript lib files.
+ * LibCache provides in-memory caching for TypeScript lib files.
  *
  * Usage:
  * ```ts
- * const cache = await LibCache.create();
+ * const cache = new LibCache();
  * const libs = await cache.getOrFetch(getDefaultBrowserLibs());
  * ```
  */
 export class LibCache {
-  private db: IDBDatabase;
-
-  private constructor(db: IDBDatabase) {
-    this.db = db;
-  }
-
-  /**
-   * Create and initialize a LibCache instance.
-   */
-  static async create(): Promise<LibCache> {
-    const db = await openDatabase();
-    return new LibCache(db);
-  }
-
   /**
    * Get cached libs if available, otherwise fetch from CDN and cache.
    *
@@ -221,12 +161,11 @@ export class LibCache {
    */
   async getOrFetch(libs: string[]): Promise<Map<string, string>> {
     // Try to get from cache first
-    const cached = await this.get();
-    if (cached) {
+    if (memoryCache) {
       // Verify all requested libs are in cache
-      const missing = libs.filter((lib) => !cached.has(lib));
+      const missing = libs.filter((lib) => !memoryCache!.has(lib));
       if (missing.length === 0) {
-        return cached;
+        return memoryCache;
       }
       // Some libs missing, fetch all and update cache
       console.log(`Cache missing libs: ${missing.join(", ")}, fetching all...`);
@@ -238,7 +177,7 @@ export class LibCache {
     console.log(`Fetched ${fetched.size} lib files`);
 
     // Cache the results
-    await this.set(fetched);
+    memoryCache = fetched;
 
     return fetched;
   }
@@ -246,64 +185,27 @@ export class LibCache {
   /**
    * Get cached libs if available.
    */
-  async get(): Promise<Map<string, string> | null> {
-    const tx = this.db.transaction(STORE_NAME, "readonly");
-    const store = tx.objectStore(STORE_NAME);
-    const key = getCacheKey();
-
-    const cached = await promisifyRequest<CachedLibs | undefined>(store.get(key));
-    if (!cached) {
-      return null;
-    }
-
-    // Verify version matches
-    if (cached.version !== TS_VERSION) {
-      console.log(`Cache version mismatch: ${cached.version} vs ${TS_VERSION}`);
-      return null;
-    }
-
-    return new Map(Object.entries(cached.libs));
+  get(): Map<string, string> | null {
+    return memoryCache;
   }
 
   /**
    * Store libs in the cache.
    */
-  async set(libs: Map<string, string>): Promise<void> {
-    const tx = this.db.transaction(STORE_NAME, "readwrite");
-    const store = tx.objectStore(STORE_NAME);
-    const key = getCacheKey();
-
-    const cached: CachedLibs = {
-      version: TS_VERSION,
-      timestamp: Date.now(),
-      libs: Object.fromEntries(libs),
-    };
-
-    await promisifyRequest(store.put(cached, key));
+  set(libs: Map<string, string>): void {
+    memoryCache = libs;
   }
 
   /**
    * Clear all cached libs.
    */
-  async clear(): Promise<void> {
-    const tx = this.db.transaction(STORE_NAME, "readwrite");
-    const store = tx.objectStore(STORE_NAME);
-    await promisifyRequest(store.clear());
-  }
-
-  /**
-   * Close the database connection.
-   */
-  close(): void {
-    this.db.close();
+  clear(): void {
+    memoryCache = null;
   }
 }
 
 /**
  * Convenience function to fetch and cache libs in one call.
- * Creates a temporary LibCache, fetches libs, and returns the result.
- *
- * For repeated use, prefer creating a LibCache instance directly.
  *
  * @param libs - Lib names to fetch (defaults to getDefaultBrowserLibs())
  * @returns Map of lib name to content
@@ -311,10 +213,6 @@ export class LibCache {
 export async function fetchAndCacheLibs(
   libs: string[] = getDefaultBrowserLibs()
 ): Promise<Map<string, string>> {
-  const cache = await LibCache.create();
-  try {
-    return await cache.getOrFetch(libs);
-  } finally {
-    cache.close();
-  }
+  const cache = new LibCache();
+  return cache.getOrFetch(libs);
 }

package/src/typechecker.ts

@@ -491,7 +491,7 @@ function createVfsCompilerHost(
  *
  * @example
  * ```ts
- * const fs = IndexedDbFs.createInMemory({
+ * const fs = Filesystem.create({
  *   initialFiles: {
  *     "/tsconfig.json": JSON.stringify({
  *       compilerOptions: {

package/dist/react.d.ts

@@ -1,159 +0,0 @@
-/**
- * React-specific helpers for Sandlot
- *
- * These helpers simplify working with dynamically loaded React components,
- * particularly when using the render function pattern for isolation.
- *
- * @example
- * ```tsx
- * import { DynamicMount } from 'sandlot/react';
- *
- * function App() {
- *   const [module, setModule] = useState(null);
- *
- *   return (
- *     <DynamicMount
- *       module={module}
- *       props={{ name: "World" }}
- *       fallback={<div>Loading...</div>}
- *     />
- *   );
- * }
- * ```
- */
-import { type ReactElement, type RefObject, type CSSProperties } from "react";
-/**
- * Interface for dynamic modules that use the render function pattern.
- * Dynamic components should export a `render` function that mounts
- * the component into a container and returns a cleanup function.
- */
-export interface DynamicRenderModule<P = Record<string, unknown>> {
-    /**
-     * Mount the component into a container element
-     *
-     * @param container - The DOM element to render into
-     * @param props - Props to pass to the component
-     * @returns A cleanup function to unmount the component
-     */
-    render: (container: HTMLElement, props?: P) => (() => void) | void;
-}
-/**
- * Props for the DynamicMount component
- */
-export interface DynamicMountProps<P = Record<string, unknown>> {
-    /** The loaded dynamic module with a render function */
-    module: DynamicRenderModule<P> | null | undefined;
-    /** Props to pass to the dynamic component */
-    props?: P;
-    /** Optional className for the container div */
-    className?: string;
-    /** Optional style for the container div */
-    style?: CSSProperties;
-    /** Optional id for the container div */
-    id?: string;
-    /** Content to render while module is loading (null/undefined) */
-    fallback?: ReactElement | null;
-    /** Called when the dynamic component mounts */
-    onMount?: () => void;
-    /** Called when the dynamic component unmounts */
-    onUnmount?: () => void;
-    /** Called if rendering fails */
-    onError?: (error: Error) => void;
-}
-/**
- * Component that mounts a dynamic module's render function into a container.
- * Handles cleanup automatically when the module changes or unmounts.
- *
- * This is the recommended way to render dynamically loaded components
- * that use the render function pattern for React instance isolation.
- *
- * @example
- * ```tsx
- * import { DynamicMount } from 'sandlot/react';
- * import { loadModule } from 'sandlot';
- *
- * function App() {
- *   const [module, setModule] = useState(null);
- *
- *   const loadComponent = async (buildResult: BundleResult) => {
- *     const mod = await loadModule(buildResult);
- *     setModule(mod);
- *   };
- *
- *   return (
- *     <div>
- *       <button onClick={loadComponent}>Load</button>
- *       <DynamicMount
- *         module={module}
- *         props={{ count: 5 }}
- *         fallback={<div>Click to load...</div>}
- *         className="dynamic-container"
- *       />
- *     </div>
- *   );
- * }
- * ```
- */
-export declare function DynamicMount<P = Record<string, unknown>>({ module, props, className, style, id, fallback, onMount, onUnmount, onError, }: DynamicMountProps<P>): ReactElement | null;
-/**
- * Result returned by useDynamicComponent hook
- */
-export interface UseDynamicComponentResult {
-    /** Ref to attach to the container element */
-    containerRef: RefObject<HTMLDivElement | null>;
-    /** Whether the component is currently mounted */
-    isMounted: boolean;
-    /** Any error that occurred during mounting */
-    error: Error | null;
-    /** Manually trigger a re-render with new props */
-    update: (props?: Record<string, unknown>) => void;
-    /** Manually unmount the component */
-    unmount: () => void;
-}
-/**
- * Hook for mounting dynamic modules with more control than DynamicMount.
- * Provides access to mount state and manual control over mounting/unmounting.
- *
- * @param module - The dynamic module to mount
- * @param props - Props to pass to the component
- * @returns Object with containerRef, state, and control functions
- *
- * @example
- * ```tsx
- * import { useDynamicComponent } from 'sandlot/react';
- *
- * function App() {
- *   const { containerRef, isMounted, error, unmount } = useDynamicComponent(
- *     module,
- *     { initialCount: 0 }
- *   );
- *
- *   return (
- *     <div>
- *       <div ref={containerRef} />
- *       {isMounted && <button onClick={unmount}>Remove</button>}
- *       {error && <div>Error: {error.message}</div>}
- *     </div>
- *   );
- * }
- * ```
- */
-export declare function useDynamicComponent<P = Record<string, unknown>>(module: DynamicRenderModule<P> | null | undefined, props?: P): UseDynamicComponentResult;
-/**
- * Code template for a React component's render function.
- * This is the pattern dynamic components should follow when using
- * the render function pattern for React instance isolation.
- *
- * Dynamic components import React from esm.sh and use their own
- * ReactDOM.createRoot to mount, avoiding conflicts with the host's React.
- */
-export declare const REACT_RENDER_TEMPLATE: string;
-/**
- * Generate render function code for a given component name.
- * Useful for code generation tools or agents.
- *
- * @param componentName - The name of the component to wrap
- * @param hasProps - Whether the component accepts props
- */
-export declare function generateRenderFunction(componentName: string, hasProps?: boolean): string;
-//# sourceMappingURL=react.d.ts.map

package/dist/react.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAKL,KAAK,YAAY,EACjB,KAAK,SAAS,EACd,KAAK,aAAa,EACnB,MAAM,OAAO,CAAC;AAEf;;;;GAIG;AACH,MAAM,WAAW,mBAAmB,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC9D;;;;;;OAMG;IACH,MAAM,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAC;CACpE;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC5D,uDAAuD;IACvD,MAAM,EAAE,mBAAmB,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IAClD,6CAA6C;IAC7C,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,wCAAwC;IACxC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iEAAiE;IACjE,QAAQ,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC/B,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,gCAAgC;IAChC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,YAAY,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EACxD,MAAM,EACN,KAAK,EACL,SAAS,EACT,KAAK,EACL,EAAE,EACF,QAAe,EACf,OAAO,EACP,SAAS,EACT,OAAO,GACR,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG,YAAY,GAAG,IAAI,CA4D5C;AAED;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,6CAA6C;IAC7C,YAAY,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC/C,iDAAiD;IACjD,SAAS,EAAE,OAAO,CAAC;IACnB,8CAA8C;IAC9C,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,kDAAkD;IAClD,MAAM,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IAClD,qCAAqC;IACrC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC7D,MAAM,EAAE,mBAAmB,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,EACjD,KAAK,CAAC,EAAE,CAAC,GACR,yBAAyB,CA8C3B;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,qBAAqB,QAe1B,CAAC;AAET;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CACpC,aAAa,EAAE,MAAM,EACrB,QAAQ,UAAO,GACd,MAAM,CAoBR"}

package/dist/react.js

@@ -1,149 +0,0 @@
-// src/react.tsx
-import {
-  useRef,
-  useEffect,
-  useCallback,
-  useState
-} from "react";
-import { jsxDEV } from "react/jsx-dev-runtime";
-function DynamicMount({
-  module,
-  props,
-  className,
-  style,
-  id,
-  fallback = null,
-  onMount,
-  onUnmount,
-  onError
-}) {
-  const containerRef = useRef(null);
-  const cleanupRef = useRef(null);
-  const [error, setError] = useState(null);
-  useEffect(() => {
-    if (!module || !containerRef.current)
-      return;
-    try {
-      if (cleanupRef.current) {
-        cleanupRef.current();
-        cleanupRef.current = null;
-        onUnmount?.();
-      }
-      setError(null);
-      const cleanup = module.render(containerRef.current, props);
-      cleanupRef.current = cleanup ?? null;
-      onMount?.();
-    } catch (err) {
-      const error2 = err instanceof Error ? err : new Error(String(err));
-      setError(error2);
-      onError?.(error2);
-    }
-    return () => {
-      if (cleanupRef.current) {
-        cleanupRef.current();
-        cleanupRef.current = null;
-        onUnmount?.();
-      }
-    };
-  }, [module, props, onMount, onUnmount, onError]);
-  if (!module) {
-    return fallback;
-  }
-  if (error) {
-    return /* @__PURE__ */ jsxDEV("div", {
-      style: {
-        color: "red",
-        padding: "8px",
-        border: "1px solid red",
-        borderRadius: "4px"
-      },
-      children: [
-        "Failed to render dynamic component: ",
-        error.message
-      ]
-    }, undefined, true, undefined, this);
-  }
-  return /* @__PURE__ */ jsxDEV("div", {
-    ref: containerRef,
-    className,
-    style,
-    id
-  }, undefined, false, undefined, this);
-}
-function useDynamicComponent(module, props) {
-  const containerRef = useRef(null);
-  const cleanupRef = useRef(null);
-  const propsRef = useRef(props);
-  const [isMounted, setIsMounted] = useState(false);
-  const [error, setError] = useState(null);
-  propsRef.current = props;
-  const unmount = useCallback(() => {
-    if (cleanupRef.current) {
-      cleanupRef.current();
-      cleanupRef.current = null;
-    }
-    setIsMounted(false);
-  }, []);
-  const update = useCallback((newProps) => {
-    if (!module || !containerRef.current)
-      return;
-    try {
-      unmount();
-      setError(null);
-      const cleanup = module.render(containerRef.current, newProps ?? propsRef.current);
-      cleanupRef.current = cleanup ?? null;
-      setIsMounted(true);
-    } catch (err) {
-      setError(err instanceof Error ? err : new Error(String(err)));
-    }
-  }, [module, unmount]);
-  useEffect(() => {
-    if (module && containerRef.current) {
-      update(props);
-    }
-    return unmount;
-  }, [module, props, update, unmount]);
-  return { containerRef, isMounted, error, update, unmount };
-}
-var REACT_RENDER_TEMPLATE = `
-import React from "react";
-import { createRoot } from "react-dom/client";
-
-// Your component here
-function MyComponent(props) {
-  return <div>Hello {props.name}</div>;
-}
-
-// Export a render function that mounts using esm.sh's ReactDOM
-export function render(container, props) {
-  const root = createRoot(container);
-  root.render(<MyComponent {...props} />);
-  return () => root.unmount();
-}
-`.trim();
-function generateRenderFunction(componentName, hasProps = true) {
-  if (hasProps) {
-    return `
-// Export a render function that mounts using esm.sh's ReactDOM
-export function render(container: HTMLElement, props?: Parameters<typeof ${componentName}>[0]) {
-  const root = createRoot(container);
-  root.render(<${componentName} {...props} />);
-  return () => root.unmount();
-}
-`.trim();
-  }
-  return `
-// Export a render function that mounts using esm.sh's ReactDOM
-export function render(container: HTMLElement) {
-  const root = createRoot(container);
-  root.render(<${componentName} />);
-  return () => root.unmount();
-}
-`.trim();
-}
-export {
-  useDynamicComponent,
-  generateRenderFunction,
-  REACT_RENDER_TEMPLATE,
-  DynamicMount
-};