sandlot 0.1.2 → 0.1.3

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