sandlot 0.1.1 → 0.1.3

package/src/shared-modules.ts

@@ -21,7 +21,7 @@
  * });
  * 
  * // Now create sandbox with sharedModules option
- * const sandbox = await createInMemorySandbox({
+ * const sandbox = await createSandbox({
  *   sharedModules: ['react', 'react-dom/client'],
  * });
  * ```
@@ -39,6 +39,7 @@ const GLOBAL_KEY = '__sandlot_shared_modules__';
  */
 export class SharedModuleRegistry {
   private modules = new Map<string, unknown>();
+  private exportNames = new Map<string, string[]>();
 
   constructor() {
     // Make available globally for dynamic imports
@@ -46,7 +47,8 @@ export class SharedModuleRegistry {
   }
 
   /**
-   * Register a module to be shared with dynamic bundles
+   * Register a module to be shared with dynamic bundles.
+   * Automatically introspects the module to discover its exports.
    * 
    * @param moduleId - The import specifier (e.g., 'react', 'react-dom/client')
    * @param module - The module's exports object
@@ -54,18 +56,21 @@ export class SharedModuleRegistry {
    */
   register(moduleId: string, module: unknown): this {
     this.modules.set(moduleId, module);
+    // Introspect the module to get its export names
+    this.exportNames.set(moduleId, introspectExports(module));
     return this;
   }
 
   /**
-   * Register multiple modules at once
+   * Register multiple modules at once.
+   * Automatically introspects each module to discover its exports.
    * 
    * @param modules - Object mapping module IDs to their exports
    * @returns this for chaining
    */
   registerAll(modules: Record<string, unknown>): this {
     for (const [id, mod] of Object.entries(modules)) {
-      this.modules.set(id, mod);
+      this.register(id, mod);
     }
     return this;
   }
@@ -116,11 +121,23 @@ export class SharedModuleRegistry {
     return [...this.modules.keys()];
   }
 
+  /**
+   * Get the export names for a registered module.
+   * These were discovered by introspecting the module at registration time.
+   * 
+   * @param moduleId - The import specifier
+   * @returns Array of export names, or empty array if not registered
+   */
+  getExportNames(moduleId: string): string[] {
+    return this.exportNames.get(moduleId) ?? [];
+  }
+
   /**
    * Clear all registrations
    */
   clear(): void {
     this.modules.clear();
+    this.exportNames.clear();
   }
 
   /**
@@ -131,6 +148,48 @@ export class SharedModuleRegistry {
   }
 }
 
+/**
+ * Introspect a module to discover its export names.
+ * Filters out non-identifier keys and internal properties.
+ */
+function introspectExports(module: unknown): string[] {
+  if (module === null || module === undefined) {
+    return [];
+  }
+
+  if (typeof module !== 'object' && typeof module !== 'function') {
+    return [];
+  }
+
+  const exports: string[] = [];
+  
+  // Get own enumerable properties
+  for (const key of Object.keys(module as object)) {
+    // Filter out non-valid JavaScript identifiers
+    if (isValidIdentifier(key)) {
+      exports.push(key);
+    }
+  }
+
+  return exports;
+}
+
+/**
+ * Check if a string is a valid JavaScript identifier.
+ * Used to filter out keys that can't be used as named exports.
+ */
+function isValidIdentifier(name: string): boolean {
+  if (name.length === 0) return false;
+  // Must start with letter, underscore, or $
+  if (!/^[a-zA-Z_$]/.test(name)) return false;
+  // Rest must be alphanumeric, underscore, or $
+  if (!/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(name)) return false;
+  // Exclude reserved words that would cause issues
+  const reserved = ['default', 'class', 'function', 'var', 'let', 'const', 'import', 'export'];
+  if (reserved.includes(name)) return false;
+  return true;
+}
+
 // Singleton instance
 let defaultRegistry: SharedModuleRegistry | null = null;
 
@@ -190,6 +249,17 @@ export function clearSharedModules(): void {
   getSharedModuleRegistry().clear();
 }
 
+/**
+ * Get the export names for a registered shared module.
+ * Used by the bundler to generate proper re-export statements.
+ * 
+ * @param moduleId - The import specifier
+ * @returns Array of export names, or empty array if not registered
+ */
+export function getSharedModuleExports(moduleId: string): string[] {
+  return getSharedModuleRegistry().getExportNames(moduleId);
+}
+
 /**
  * Generate the runtime code that dynamic bundles use to access shared modules.
  * This is injected into bundles when they import from shared modules.

package/src/shared-resources.ts

@@ -6,9 +6,6 @@
  * - esbuild WASM (~10MB) - singleton bundler initialization
  * - Types cache - avoids redundant network fetches when multiple sandboxes
  *   install the same packages
- *
- * This module consolidates what was previously scattered across
- * sandbox.ts and sandbox-manager.ts into a single source of truth.
  */
 
 import { fetchAndCacheLibs, getDefaultBrowserLibs } from "./ts-libs";

package/src/ts-libs.ts

@@ -8,7 +8,7 @@
 
 /**
  * TypeScript version to fetch libs for.
- * Should match the version in package.json.
+ * MUST match the version in package.json dependencies.
  */
 const TS_VERSION = "5.9.3";
 

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
-};