dynim-react 1.0.6 → 1.0.8

package/dist/builder/BuilderProvider.d.ts

@@ -2,10 +2,11 @@
  * BuilderProvider - React integration for the visual builder
  *
  * Integrates the visual builder UI (floating bar, drag engine, overlays)
- * from dynim-core.
+ * from dynim-core. Loads tenant bundles via dynamic import() and renders
+ * them as React components.
  */
 import { type ReactNode } from 'react';
-import type { BuilderInstance, CodeEdit, CodeEvent, CodeMessage, StyleChange } from 'dynim-core';
+import type { BuilderInstance, CodeEdit, CodeEvent, CodeMessage } from 'dynim-core';
 export interface BuilderConfig {
     apiBase?: string;
     pageId?: string;
@@ -27,22 +28,18 @@ export interface BuilderConfig {
     onCodeEdit?: (edit: CodeEdit) => void;
     /** @deprecated Use onCodeMessageUpdate instead */
     onCodeMessage?: (event: CodeEvent) => void;
-    /** @deprecated No longer needed - BuilderProvider creates internal container */
-    previewContainer?: HTMLElement;
     /** Function to resolve bundle URL from project ID */
     getBundleUrl?: (projectId: string) => string | Promise<string>;
-    /** If true, bundles replace children when loaded. If false, uses external previewContainer (default: true) */
-    inPlacePreview?: boolean;
-    /** Whether to auto-apply style changes from code edits (default: true) */
-    autoApplyStyles?: boolean;
-    /** Transition duration for bundle crossfade in ms (default: 300) */
-    previewTransitionDuration?: number;
-    /** Called when a style change is applied */
-    onStyleApplied?: (change: StyleChange, elements: Element[]) => void;
     /** Called when bundle starts loading */
     onBundleLoadStart?: (bundleUrl: string) => void;
     /** Called when bundle finishes loading */
     onBundleLoadComplete?: (bundleUrl: string) => void;
+    /** NPM packages to expose to bundles (e.g., { 'react-router-dom': ReactRouterDOM }) */
+    packages?: Record<string, unknown>;
+    /** Custom hooks to expose to bundles */
+    hooks?: Record<string, unknown>;
+    /** React contexts to expose to bundles */
+    contexts?: Record<string, unknown>;
 }
 export interface BuilderContextValue {
     enterBuilder: () => void;
@@ -60,7 +57,7 @@ export interface BuilderContextValue {
     resetCodeMessage: () => void;
     /** @deprecated Use codeMessage.edits instead */
     codeEdits: CodeEdit[];
-    /** Load a bundle into the preview container */
+    /** Load a bundle by URL */
     loadBundle: (bundleUrl: string) => Promise<void>;
     /** Load bundle for a project (uses getBundleUrl from config) */
     loadProjectBundle: (projectId: string) => Promise<void>;
@@ -68,19 +65,11 @@ export interface BuilderContextValue {
     loadSavedBundle: (projectId: string) => Promise<void>;
     /** Load temp bundle for a project (AI edits preview) */
     loadTempBundle: (projectId: string) => Promise<void>;
-    /** Apply styles directly to preview DOM */
-    applyStyles: (selector: string, styles: Record<string, string>) => void;
-    /** Apply className to preview DOM */
-    applyClassName: (selector: string, className: string) => void;
-    /** Toggle CSS classes on preview DOM */
-    toggleClasses: (selector: string, add: string[], remove: string[]) => void;
-    /** Check if bundle manager is available */
-    hasBundleManager: boolean;
     /** Check if a bundle is currently loaded */
     isBundleLoaded: boolean;
     /** Check if bundle is loading */
     isBundleLoading: boolean;
-    /** Unload current bundle */
+    /** Unload current bundle (show children again) */
     unloadBundle: () => void;
 }
 export interface BuilderProviderProps {
@@ -90,6 +79,9 @@ export interface BuilderProviderProps {
 }
 /**
  * BuilderProvider - Wraps your app with builder support
+ *
+ * When a bundle is loaded, it replaces children with the bundle's App component.
+ * Bundles are loaded via dynamic import() and rendered as React components.
  */
 export declare function BuilderProvider({ children, config, onBuilderReady, }: BuilderProviderProps): JSX.Element;
 /**

package/dist/builder/BuilderProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BuilderProvider.d.ts","sourceRoot":"","sources":["../../src/builder/BuilderProvider.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"BuilderProvider.d.ts","sourceRoot":"","sources":["../../src/builder/BuilderProvider.tsx"],"names":[],"mappings":"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"}

package/dist/builder/BuilderProvider.js

@@ -1,27 +1,29 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 /**
  * BuilderProvider - React integration for the visual builder
  *
  * Integrates the visual builder UI (floating bar, drag engine, overlays)
- * from dynim-core.
+ * from dynim-core. Loads tenant bundles via dynamic import() and renders
+ * them as React components.
  */
-import { createContext, useContext, useEffect, useRef, useCallback, useMemo, useState, } from 'react';
-import { createBuilderClient, createBuilder, createCodeClient, createBundleManager, createStyleApplier, hasStyleChanges, } from 'dynim-core';
+import React, { createContext, useContext, useEffect, useRef, useCallback, useMemo, useState, } from 'react';
+import ReactDOM from 'react-dom';
+import { createBuilderClient, createBuilder, createCodeClient, } from 'dynim-core';
+import { createSharedContext } from '../inference/sharedContext';
 const BuilderContext = createContext(null);
 /**
  * BuilderProvider - Wraps your app with builder support
+ *
+ * When a bundle is loaded, it replaces children with the bundle's App component.
+ * Bundles are loaded via dynamic import() and rendered as React components.
  */
 export function BuilderProvider({ children, config = {}, onBuilderReady, }) {
     const builderClientRef = useRef(null);
     const builderRef = useRef(null);
     const codeClientRef = useRef(null);
-    const bundleManagerRef = useRef(null);
-    const styleApplierRef = useRef(null);
-    const [internalContainer, setInternalContainer] = useState(null);
     const [isBuilderActive, setIsBuilderActive] = useState(false);
     const [isBundleLoaded, setIsBundleLoaded] = useState(false);
     const [isBundleLoading, setIsBundleLoading] = useState(false);
-    const [hasBundleManager, setHasBundleManager] = useState(false);
     const [codeMessage, setCodeMessage] = useState({
         thinking: '',
         text: '',
@@ -30,10 +32,35 @@ export function BuilderProvider({ children, config = {}, onBuilderReady, }) {
         bundleReady: false,
         bundleError: undefined,
     });
+    // The loaded tenant app component
+    const [TenantApp, setTenantApp] = useState(null);
+    // Error state for bundle rendering failures
+    const [bundleError, setBundleError] = useState(null);
+    // Set up shared context for bundles (exposes React, ReactDOM, packages, hooks, contexts)
+    useEffect(() => {
+        const { packages = {}, hooks = {}, contexts = {} } = config;
+        // Import useBuilder dynamically to register in packages (avoids circular dep at module level)
+        const sdkExports = {
+            useBuilder,
+            BuilderProvider,
+            // Add other commonly used exports bundles might need
+        };
+        createSharedContext({
+            React,
+            ReactDOM,
+            packages: {
+                'dynim-react': sdkExports,
+                ...packages,
+            },
+            hooks,
+            contexts,
+        });
+        console.log('[BuilderProvider] Shared context initialized with packages:', ['dynim-react', ...Object.keys(packages)]);
+    }, [config]);
     // Initialize code client FIRST (before builder, so we can share it)
     useEffect(() => {
         const { apiBase = 'http://localhost:8080', sessionToken, refreshToken, getSession, onCodeMessageUpdate, onCodeMessage, // deprecated
-        onCodeEdit, onError, autoApplyStyles = true, } = config;
+        onCodeEdit, onError, } = config;
         codeClientRef.current = createCodeClient({
             apiBase,
             sessionToken,
@@ -51,11 +78,6 @@ export function BuilderProvider({ children, config = {}, onBuilderReady, }) {
             },
             onEdit: (edit) => {
                 console.log('[BuilderProvider] Code edit:', edit);
-                // Auto-apply style changes if enabled and style applier is available
-                if (autoApplyStyles && styleApplierRef.current && hasStyleChanges(edit)) {
-                    const result = styleApplierRef.current.processEdit(edit);
-                    console.log('[BuilderProvider] Style changes:', result.changes.length, 'applied:', result.applied);
-                }
                 onCodeEdit?.(edit);
             },
             onError: (error) => {
@@ -107,80 +129,6 @@ export function BuilderProvider({ children, config = {}, onBuilderReady, }) {
             },
         });
     }, [config]);
-    // Initialize bundle manager
-    useEffect(() => {
-        const { previewContainer, inPlacePreview = true, previewTransitionDuration = 300, sessionToken, getSession, onStyleApplied, onBundleLoadStart, onBundleLoadComplete, onError, } = config;
-        // Determine which container to use
-        const container = inPlacePreview ? internalContainer : previewContainer;
-        console.log('[BuilderProvider] Bundle manager init:', { inPlacePreview, hasInternalContainer: !!internalContainer, hasPreviewContainer: !!previewContainer });
-        if (!container) {
-            // For inPlacePreview, container may not be ready on first render
-            console.log('[BuilderProvider] No container yet, skipping bundle manager init');
-            return;
-        }
-        // Create auth token getter for bundle requests
-        const getAuthToken = async () => {
-            // First try config sessionToken
-            if (sessionToken) {
-                return sessionToken;
-            }
-            // Then try getSession callback
-            if (getSession) {
-                try {
-                    const session = await getSession();
-                    return session.token;
-                }
-                catch (e) {
-                    console.warn('[BuilderProvider] Failed to get session for bundle auth:', e);
-                }
-            }
-            return null;
-        };
-        bundleManagerRef.current = createBundleManager({
-            parent: container,
-            transitionDuration: previewTransitionDuration,
-            getAuthToken,
-            onLoadStart: (url) => {
-                setIsBundleLoading(true);
-                onBundleLoadStart?.(url);
-            },
-            onLoadComplete: (url) => {
-                setIsBundleLoading(false);
-                setIsBundleLoaded(true);
-                onBundleLoadComplete?.(url);
-            },
-            onError: (error) => {
-                setIsBundleLoading(false);
-                console.error('[BuilderProvider] Bundle load error:', error);
-                onError?.(error);
-            },
-            onUnload: () => {
-                setIsBundleLoaded(false);
-            },
-        });
-        setHasBundleManager(true);
-        console.log('[BuilderProvider] Bundle manager created');
-        // Create style applier that targets the bundle manager's container
-        styleApplierRef.current = createStyleApplier({
-            queryElements: (selector) => {
-                const container = bundleManagerRef.current?.getActiveContainer();
-                return container?.querySelectorAll(selector) ?? document.querySelectorAll(selector);
-            },
-            onApply: (change, elements) => {
-                console.log('[BuilderProvider] Style applied:', change, elements.length, 'elements');
-                onStyleApplied?.(change, elements);
-            },
-            onError: (change, error) => {
-                console.error('[BuilderProvider] Style apply error:', error, change);
-            },
-        });
-        return () => {
-            bundleManagerRef.current?.destroy();
-            bundleManagerRef.current = null;
-            styleApplierRef.current = null;
-            setHasBundleManager(false);
-        };
-    }, [config, internalContainer]);
     // Enter builder mode - activates the visual builder UI
     const enterBuilder = useCallback(() => {
         if (builderRef.current && !builderRef.current.isActive()) {
@@ -199,14 +147,94 @@ export function BuilderProvider({ children, config = {}, onBuilderReady, }) {
             await builderRef.current.save();
         }
     }, []);
-    // Bundle manager methods (defined first since saveCode depends on loadProjectBundle)
+    /**
+     * Get auth token for bundle requests
+     */
+    const getAuthToken = useCallback(async () => {
+        const { sessionToken, getSession } = config;
+        if (sessionToken) {
+            return sessionToken;
+        }
+        if (getSession) {
+            try {
+                const session = await getSession();
+                return session.token;
+            }
+            catch (e) {
+                console.warn('[BuilderProvider] Failed to get session for bundle auth:', e);
+            }
+        }
+        return null;
+    }, [config]);
+    // Track loading state in ref to avoid stale closure issues
+    const isBundleLoadingRef = useRef(false);
+    /**
+     * Load a bundle via dynamic import()
+     * Fetches with auth, creates blob URL, imports as ES module
+     */
     const loadBundle = useCallback(async (bundleUrl) => {
-        if (!bundleManagerRef.current) {
-            console.warn('[BuilderProvider] Bundle manager not initialized (no previewContainer)');
+        const { onBundleLoadStart, onBundleLoadComplete, onError } = config;
+        if (isBundleLoadingRef.current) {
+            console.warn('[BuilderProvider] Already loading a bundle');
             return;
         }
-        await bundleManagerRef.current.load(bundleUrl);
-    }, []);
+        isBundleLoadingRef.current = true;
+        setIsBundleLoading(true);
+        setBundleError(null); // Clear any previous error
+        onBundleLoadStart?.(bundleUrl);
+        console.log('[BuilderProvider] Loading bundle:', bundleUrl);
+        try {
+            // Fetch bundle with auth headers
+            const token = await getAuthToken();
+            const headers = {
+                'Accept': 'application/javascript',
+            };
+            if (token) {
+                headers['Authorization'] = `Bearer ${token}`;
+            }
+            const response = await fetch(bundleUrl, {
+                credentials: 'include',
+                headers,
+            });
+            if (!response.ok) {
+                throw new Error(`Failed to fetch bundle: ${response.status} ${response.statusText}`);
+            }
+            const code = await response.text();
+            console.log('[BuilderProvider] Bundle fetched, size:', code.length);
+            // Create blob URL for dynamic import
+            const blob = new Blob([code], { type: 'application/javascript' });
+            const blobUrl = URL.createObjectURL(blob);
+            try {
+                // Dynamic import the bundle as ES module
+                const module = await import(/* @vite-ignore */ blobUrl);
+                console.log('[BuilderProvider] Bundle imported, exports:', Object.keys(module));
+                // Get the App component (try App, then default export)
+                const App = module.App || module.default;
+                if (!App) {
+                    throw new Error('Bundle has no App or default export');
+                }
+                // Store the component
+                setTenantApp(() => App);
+                setIsBundleLoaded(true);
+                console.log('[BuilderProvider] Bundle loaded successfully');
+                onBundleLoadComplete?.(bundleUrl);
+            }
+            finally {
+                // Clean up blob URL
+                URL.revokeObjectURL(blobUrl);
+            }
+        }
+        catch (error) {
+            console.error('[BuilderProvider] Bundle load failed:', error);
+            setBundleError(error);
+            onError?.(error);
+            // Don't throw - let the app continue with children
+        }
+        finally {
+            isBundleLoadingRef.current = false;
+            setIsBundleLoading(false);
+        }
+    }, [config, getAuthToken]);
     const loadProjectBundle = useCallback(async (projectId, forceReload = false) => {
         const { getBundleUrl, apiBase = 'http://localhost:8080' } = config;
         let bundleUrl;
@@ -216,74 +244,63 @@ export function BuilderProvider({ children, config = {}, onBuilderReady, }) {
         else {
             bundleUrl = `${apiBase.replace(':8080', ':8081')}/bundles/preview?project_id=${projectId}`;
         }
-        // Cache bust to force reload (bypasses bundle manager's same-URL skip)
+        // Cache bust to force reload
         if (forceReload) {
-            bundleUrl += `&_t=${Date.now()}`;
+            bundleUrl += (bundleUrl.includes('?') ? '&' : '?') + `_t=${Date.now()}`;
         }
         await loadBundle(bundleUrl);
     }, [config, loadBundle]);
     // Load saved (permanent) bundle - used for initial load, after save, and after abandon
-    // Uses the authenticated build-server endpoint which serves from Redis cache
-    const loadSavedBundle = useCallback(async (projectId) => {
+    // Note: projectId is for API consistency; actual project comes from JWT
+    const loadSavedBundle = useCallback(async (_projectId) => {
         const { apiBase = 'http://localhost:8080' } = config;
-        // Use build-server's authenticated bundle endpoint
         const bundleUrl = `${apiBase}/api/code/bundle`;
         console.log('[BuilderProvider] Loading saved bundle via:', bundleUrl);
         await loadBundle(bundleUrl);
-        console.log('[BuilderProvider] Saved bundle loaded');
     }, [config, loadBundle]);
     // Load temp bundle - used when AI finishes editing to preview changes
-    // Uses the authenticated build-server endpoint which serves from Redis cache
-    const loadTempBundle = useCallback(async (projectId) => {
+    // Note: projectId is for API consistency; actual project comes from JWT
+    const loadTempBundle = useCallback(async (_projectId) => {
         const { apiBase = 'http://localhost:8080' } = config;
-        // Use build-server's authenticated bundle endpoint (cache busting to force reload)
+        // Cache bust to force reload
         const bundleUrl = `${apiBase}/api/code/bundle?_t=${Date.now()}`;
         console.log('[BuilderProvider] Loading temp bundle via:', bundleUrl);
         await loadBundle(bundleUrl);
-        console.log('[BuilderProvider] Temp bundle loaded');
     }, [config, loadBundle]);
-    // Auto-reload temp bundle when bundle is ready and bundle manager is available
-    // Uses hasBundleManager as dependency so it re-runs when manager initializes
+    // Auto-load temp bundle when bundle is ready
     useEffect(() => {
         console.log('[BuilderProvider] Auto-load check:', {
             bundleReady: codeMessage.bundleReady,
             projectId: codeMessage.projectId,
-            hasBundleManager,
         });
-        if (codeMessage.bundleReady && codeMessage.projectId && hasBundleManager) {
+        if (codeMessage.bundleReady && codeMessage.projectId) {
             console.log('[BuilderProvider] Bundle ready - loading temp bundle:', codeMessage.projectId);
             loadTempBundle(codeMessage.projectId);
         }
-    }, [codeMessage.bundleReady, codeMessage.projectId, hasBundleManager, loadTempBundle]);
-    const applyStyles = useCallback((selector, styles) => {
-        bundleManagerRef.current?.applyStyles(selector, styles);
-    }, []);
-    const applyClassName = useCallback((selector, className) => {
-        bundleManagerRef.current?.applyClassName(selector, className);
-    }, []);
-    const toggleClasses = useCallback((selector, add, remove) => {
-        bundleManagerRef.current?.toggleClasses(selector, add, remove);
-    }, []);
+    }, [codeMessage.bundleReady, codeMessage.projectId, loadTempBundle]);
+    // Unload bundle - show children again
     const unloadBundle = useCallback(() => {
-        bundleManagerRef.current?.unload();
+        setTenantApp(null);
+        setIsBundleLoaded(false);
+        console.log('[BuilderProvider] Bundle unloaded');
     }, []);
-    // Code client methods (projectId comes from JWT on server, or from codeMessage for bundles)
+    // Code client methods
     const sendCode = useCallback(async (query) => {
         await codeClientRef.current?.sendCode(query);
     }, []);
     const saveCode = useCallback(async () => {
         // 1. Persist changes to backend (promotes temp to saved)
         await codeClientRef.current?.saveCode();
-        // 2. Load the newly saved bundle (projectId from last bundle_ready event)
-        if (bundleManagerRef.current && codeMessage.projectId) {
+        // 2. Load the newly saved bundle
+        if (codeMessage.projectId) {
             await loadSavedBundle(codeMessage.projectId);
         }
     }, [loadSavedBundle, codeMessage.projectId]);
     const abandonCode = useCallback(async () => {
         // 1. Discard temp changes on server
         await codeClientRef.current?.abandonCode();
-        // 2. Revert to saved bundle (projectId from last bundle_ready event)
-        if (bundleManagerRef.current && codeMessage.projectId) {
+        // 2. Revert to saved bundle
+        if (codeMessage.projectId) {
             await loadSavedBundle(codeMessage.projectId);
         }
     }, [loadSavedBundle, codeMessage.projectId]);
@@ -299,24 +316,19 @@ export function BuilderProvider({ children, config = {}, onBuilderReady, }) {
         saveBuilder,
         isBuilderActive,
         getBuilder: () => builderRef.current,
-        // Code client methods (all AI chat goes through sendCode)
+        // Code client methods
         sendCode,
         saveCode,
         abandonCode,
         warmCache,
         codeMessage,
         resetCodeMessage,
-        // Deprecated - use codeMessage.edits instead
         codeEdits: codeMessage.edits,
-        // Bundle manager methods
+        // Bundle methods
         loadBundle,
         loadProjectBundle,
         loadSavedBundle,
         loadTempBundle,
-        applyStyles,
-        applyClassName,
-        toggleClasses,
-        hasBundleManager,
         isBundleLoaded,
         isBundleLoading,
         unloadBundle,
@@ -335,10 +347,6 @@ export function BuilderProvider({ children, config = {}, onBuilderReady, }) {
         loadProjectBundle,
         loadSavedBundle,
         loadTempBundle,
-        applyStyles,
-        applyClassName,
-        toggleClasses,
-        hasBundleManager,
         isBundleLoaded,
         isBundleLoading,
         unloadBundle,
@@ -351,14 +359,30 @@ export function BuilderProvider({ children, config = {}, onBuilderReady, }) {
             onBuilderReady(contextValue);
         }
     }, [contextValue, onBuilderReady]);
-    const { inPlacePreview = true } = config;
-    // Callback ref to capture container element
-    const containerRefCallback = useCallback((node) => {
-        if (node) {
-            setInternalContainer(node);
+    // Render the appropriate content based on state
+    const renderContent = () => {
+        // Loading state
+        if (isBundleLoading) {
+            return children; // Show children while loading (no flash)
         }
-    }, []);
-    return (_jsxs(BuilderContext.Provider, { value: contextValue, children: [(!inPlacePreview || !isBundleLoaded) && children, inPlacePreview && (_jsx("div", { ref: containerRefCallback, style: { display: isBundleLoaded ? 'block' : 'none' } }))] }));
+        // Error state - show error banner with children
+        if (bundleError) {
+            return (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
+                            padding: 12,
+                            background: '#fef3c7',
+                            borderBottom: '1px solid #fcd34d',
+                            fontSize: 13,
+                            color: '#92400e',
+                        }, children: ["Bundle error: ", bundleError.message] }), children] }));
+        }
+        // Bundle loaded - render tenant app
+        if (TenantApp) {
+            return _jsx(TenantApp, {});
+        }
+        // Default - render children
+        return children;
+    };
+    return (_jsx(BuilderContext.Provider, { value: contextValue, children: renderContent() }));
 }
 /**
  * Hook to access builder functionality

package/dist/inference/sharedContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sharedContext.d.ts","sourceRoot":"","sources":["../../src/inference/sharedContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,cAAc,GAAG,WAAW,CAqBvE;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,IAAI,WAAW,GAAG,SAAS,CAK1D;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,IAAI,OAAO,CAE9C"}
+{"version":3,"file":"sharedContext.d.ts","sourceRoot":"","sources":["../../src/inference/sharedContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,cAAc,GAAG,WAAW,CA8BvE;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,IAAI,WAAW,GAAG,SAAS,CAK1D;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,IAAI,OAAO,CAE9C"}

package/dist/inference/sharedContext.js

@@ -22,18 +22,26 @@
  * ```
  */
 export function createSharedContext(config) {
-    const { React, ReactDOM, hooks = {}, contexts = {}, globals = {} } = config;
+    const { React, ReactDOM, hooks = {}, contexts = {}, packages = {}, globals = {} } = config;
+    // Always include React and ReactDOM in packages for bundle access
+    const allPackages = {
+        'react': React,
+        'react-dom': ReactDOM,
+        'react-dom/client': ReactDOM,
+        ...packages,
+    };
     const sdk = {
         React,
         ReactDOM,
         hooks,
         contexts,
+        packages: allPackages,
         ...globals,
     };
     // Register on window for tenant bundles to access
     if (typeof window !== 'undefined') {
         window.__DYNIM__ = sdk;
-        // Also expose React and ReactDOM directly on window for bundles using standard imports
+        // Also expose React and ReactDOM directly on window for legacy bundles
         window.React = React;
         window.ReactDOM = ReactDOM;
     }

package/dist/inference/types.d.ts

@@ -11,6 +11,8 @@ export interface DynimSDKConfig {
     hooks?: Record<string, unknown>;
     /** React contexts to expose to tenant bundles */
     contexts?: Record<string, unknown>;
+    /** NPM packages to expose to tenant bundles (e.g., react-router-dom, axios) */
+    packages?: Record<string, unknown>;
     /** Additional globals to expose */
     globals?: Record<string, unknown>;
 }
@@ -57,6 +59,7 @@ export interface DynimGlobal {
     ReactDOM: typeof import('react-dom');
     hooks: Record<string, unknown>;
     contexts: Record<string, unknown>;
+    packages: Record<string, unknown>;
     [key: string]: unknown;
 }
 declare global {

package/dist/inference/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/inference/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,gDAAgD;IAChD,KAAK,EAAE,cAAc,OAAO,CAAC,CAAC;IAC9B,mDAAmD;IACnD,QAAQ,EAAE,cAAc,WAAW,CAAC,CAAC;IACrC,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACnC;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,2CAA2C;IAC3C,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,6DAA6D;IAC7D,SAAS,EAAE,MAAM,GAAG,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IACnD;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mFAAmF;IACnF,mBAAmB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAC7D,+DAA+D;IAC/D,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,4EAA4E;IAC5E,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC,yCAAyC;IACzC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,8CAA8C;IAC9C,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,mEAAmE;IACnE,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,kBAAkB,CAAC;IAClF,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,cAAc,OAAO,CAAC,CAAC;IAC9B,QAAQ,EAAE,cAAc,WAAW,CAAC,CAAC;IACrC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,SAAS,CAAC,EAAE,WAAW,CAAC;KACzB;CACF"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/inference/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,gDAAgD;IAChD,KAAK,EAAE,cAAc,OAAO,CAAC,CAAC;IAC9B,mDAAmD;IACnD,QAAQ,EAAE,cAAc,WAAW,CAAC,CAAC;IACrC,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACnC;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,2CAA2C;IAC3C,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,6DAA6D;IAC7D,SAAS,EAAE,MAAM,GAAG,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IACnD;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mFAAmF;IACnF,mBAAmB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAC7D,+DAA+D;IAC/D,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,4EAA4E;IAC5E,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC,yCAAyC;IACzC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,8CAA8C;IAC9C,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,mEAAmE;IACnE,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,kBAAkB,CAAC;IAClF,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,cAAc,OAAO,CAAC,CAAC;IAC9B,QAAQ,EAAE,cAAc,WAAW,CAAC,CAAC;IACrC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,SAAS,CAAC,EAAE,WAAW,CAAC;KACzB;CACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dynim-react",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",