@bravostudioai/react 0.1.28 → 0.1.30

package/src/components/EncoreApp.tsx

@@ -11,18 +11,15 @@ import React, {
   useMemo,
 } from "react";
 import { isLocalMode, setLocalModeOverride } from "../lib/localMode";
-import EncoreBindingContext from "../contexts/EncoreBindingContext";
-import EncoreComponentIdContext from "../contexts/EncoreComponentIdContext";
-import EncoreActionContext, {
-  type EncoreActionPayload,
-} from "../contexts/EncoreActionContext";
-import EncoreRepeatingContainerContext, {
-  type RepeatingContainerControl,
-} from "../contexts/EncoreRepeatingContainerContext";
+import type { EncoreActionPayload } from "../contexts/EncoreActionContext";
 import DynamicComponent from "./DynamicComponent";
-// import { Link } from "react-router-dom"; // Removed dependency
 import { useEncoreRouter } from "../contexts/EncoreRouterContext";
 import { usePusherUpdates } from "../hooks/usePusherUpdates";
+import { useFontLoader } from "../hooks/useFontLoader";
+import { useRepeatingContainers } from "../hooks/useRepeatingContainers";
+import { EncoreContextProviders } from "./EncoreContextProviders";
+import { patchPageData } from "../lib/dataPatching";
+import logger from "../lib/logger";
 
 // Simple internal Link component that uses our router context
 const Link = ({ to, children, style, ...props }: any) => {
@@ -42,31 +39,47 @@ const Link = ({ to, children, style, ...props }: any) => {
   );
 };
 
-type Props = {
+/**
+ * Props for the EncoreApp component
+ */
+export type EncoreAppProps = {
+  /** Unique identifier for the Encore app */
   appId: string;
+  /** Unique identifier for the page to render. If not provided, shows page selector UI */
   pageId?: string;
+  /** Optional component identifier for context tracking */
   componentId?: string;
+  /** Fallback UI to show during component loading */
   fallback?: React.ReactNode;
+  /** Callback fired when the container size changes */
   onSizeChange?: (size: { width: number; height: number }) => void;
+  /** Callback fired when the content size changes (including overflow) */
   onContentSizeChange?: (size: { width: number; height: number }) => void;
+  /** Callback fired when user interactions trigger actions (button clicks, form submissions, etc.) */
   onAction?: (payload: EncoreActionPayload) => void | Promise<void>;
+  /** Data bindings for components with encore:data tags. Maps component IDs to display values */
   data?: Record<string, string | number | any[]>;
-  // When provided, force the runtime to load from either remote or local sources
+  /** Force component loading from "remote" CDN or "local" filesystem */
   source?: "remote" | "local";
-  // Control repeating containers (sliders, lists, etc.) by container ID
+  /** Control repeating containers (sliders, lists) programmatically by container ID */
   repeatingContainerControls?: Record<
     string,
     { currentIndex?: number; onIndexChange?: (index: number) => void }
   >;
-  // Control input groups - maps group name to active element name
+  /** Control input groups (radio button-like behavior). Maps group name to active element */
   inputGroups?: Record<string, string>;
-  // Base URL for the Encore service API (e.g., "https://api.example.com")
+  /** Base URL for the Encore service API */
   baseURL?: string;
+  /** Provide app definition directly instead of fetching (for offline/bundled deployments) */
   appDefinition?: any;
+  /** Provide page definition directly instead of fetching (for offline/bundled deployments) */
   pageDefinition?: any;
+  /** Provide component code directly instead of fetching (for offline/bundled deployments) */
   componentCode?: string;
 };
 
+type Props = EncoreAppProps;
+
 type EncoreAssetsById = Record<string, { url?: string }>;
 type EncoreState = {
   setApp: (app: unknown) => void;
@@ -80,6 +93,40 @@ const setAppIdSelector = (state: EncoreState) => state.setAppId;
 const setPageIdSelector = (state: EncoreState) => state.setPageId;
 const assetsByIdSelector = (state: EncoreState) => state.assetsById;
 
+/**
+ * Main Encore runtime component
+ *
+ * Loads and renders Encore Studio apps dynamically from the Encore service.
+ * Handles data fetching, font loading, real-time updates, and component rendering.
+ *
+ * @example
+ * // Basic usage
+ * <EncoreApp appId="01ABC123" pageId="01DEF456" />
+ *
+ * @example
+ * // With data binding
+ * <EncoreApp
+ *   appId="01ABC123"
+ *   pageId="01DEF456"
+ *   data={{
+ *     "title-component": { text: "Hello World" }
+ *   }}
+ * />
+ *
+ * @example
+ * // Controlling a slider
+ * const [slideIndex, setSlideIndex] = useState(0);
+ * <EncoreApp
+ *   appId="01ABC123"
+ *   pageId="01DEF456"
+ *   repeatingContainerControls={{
+ *     "slider-123": {
+ *       currentIndex: slideIndex,
+ *       onIndexChange: setSlideIndex
+ *     }
+ *   }}
+ * />
+ */
 const EncoreApp = ({
   appId,
   pageId,
@@ -97,12 +144,7 @@ const EncoreApp = ({
   pageDefinition,
   componentCode,
 }: Props) => {
-  console.log("Render: EncoreApp");
-  console.log("🔥 ENCORE-LIB SOURCE CODE IS ACTIVE 🔥");
-  console.log("✨ ENCORE-LIB UPDATED - TEST MESSAGE ✨");
-  console.log(
-    `[AG_DEBUG] [EncoreApp] Render Start. appId: ${appId}, pageId: ${pageId}`
-  );
+  logger.debug('EncoreApp render', { appId, pageId });
 
   // CRITICAL: Set baseURL BEFORE any hooks that might trigger fetches
   // This must happen synchronously, not in useEffect, because useSWR will fetch immediately
@@ -117,8 +159,7 @@ const EncoreApp = ({
   if (source) {
     setLocalModeOverride(source === "local" ? "local" : "remote");
   }
-  // const [searchParams] = useSearchParams();
-  // const noRedirect = searchParams.get("noRedirect");
+
   const noRedirect = false;
 
   const setApp = useEncoreState(setAppSelector);
@@ -168,13 +209,6 @@ const EncoreApp = ({
     onUpdate: handleUpdate,
   });
 
-  // usePusherUpdates({
-  //   appId,
-  //   pageId: pageId || undefined,
-  //   enabled: false, // DISABLED FOR DEBUGGING
-  //   onUpdate: handleUpdate,
-  // });
-
   const useLocalFlag = source === "local" || isLocalMode();
   // If appDefinition is provided, disable SWR fetch by setting url to null
   const appUrl = appDefinition
@@ -191,85 +225,8 @@ const EncoreApp = ({
     setApp(app.data);
   }, [app.data, setApp]);
 
-  // Load fonts declared in app.json using the FontFace API
-  useEffect(() => {
-    type EncoreFont = {
-      id?: string;
-      url?: string;
-      broken?: boolean;
-      fontName?: { family?: string; postScriptName?: string };
-    };
-    type AppDataWithFonts = { app?: { fonts?: EncoreFont[] } };
-    const fonts: EncoreFont[] =
-      (app?.data as AppDataWithFonts | undefined)?.app?.fonts ?? [];
-
-    console.log(
-      `[AG_DEBUG] [EncoreApp] 🔎 Font check initiated. Found ${
-        fonts?.length || 0
-      } fonts in app definition.`
-    );
-    if (fonts && fonts.length > 0) {
-      console.log(
-        "[AG_DEBUG] [EncoreApp] Font list:",
-        fonts.map(
-          (f) =>
-            `${f.fontName?.family} (${f.fontName?.postScriptName}) - Broken: ${f.broken} - URL: ${f.url}`
-        )
-      );
-    }
-
-    if (!fonts || fonts.length === 0) return;
-    if (typeof window === "undefined" || !("FontFace" in window)) return;
-    fonts.forEach((f) => {
-      try {
-        const family = f?.fontName?.family;
-        const url = f?.url;
-        const postScriptName = f?.fontName?.postScriptName;
-        if (!family || !url) return;
-
-        if (f.broken) {
-          console.warn(
-            `[EncoreApp] Font "${
-              postScriptName || family
-            }" is marked as broken in the database. URL: ${url} - SKIPPING DOWNLOAD`
-          );
-          return;
-        }
-
-        const familyName = postScriptName || family;
-        const fontFace = new FontFace(familyName, `url(${url})`, {
-          weight: "100 900",
-          style: "normal",
-        });
-
-        fontFace
-          .load()
-          .then((ff) => {
-            document.fonts.add(ff);
-            console.log(
-              `[AG_DEBUG] [EncoreApp] ✅ Font loaded successfully: "${familyName}" - Source: ${url}`
-            );
-            // Check if it's usable - check for any weight since we registered 100-900
-            const isCheckPassed = document.fonts.check(
-              `400 12px "${familyName}"`
-            );
-            console.log(
-              `[AG_DEBUG] [EncoreApp] 🧪 document.fonts.check result for "${familyName}": ${isCheckPassed}`
-            );
-          })
-          .catch((err) => {
-            console.warn(
-              `[AG_DEBUG] [EncoreApp] ❌ Failed to load font "${
-                postScriptName || family
-              }" from ${url}`,
-              err
-            );
-          });
-      } catch (err) {
-        console.warn(`[EncoreApp] Error processing font:`, err);
-      }
-    });
-  }, [app?.data]);
+  // Load fonts declared in app.json
+  useFontLoader(app?.data);
 
   useEffect(() => {
     setAppId(appId);
@@ -309,299 +266,29 @@ const EncoreApp = ({
         useLocalFlag ? "?useLocal=1" : ""
       }`;
 
-  console.log(`[AG_DEBUG] [EncoreApp] pageUrl: ${pageUrl}`);
+  logger.debug('Page data fetch', { pageUrl });
 
   const pageSWR = useSWR(pageUrl, fetcher, { suspense: !!pageUrl });
   const pageData = pageDefinition ? { data: pageDefinition } : pageSWR;
 
-  console.log(
-    `[AG_DEBUG] [EncoreApp] pageData.data type: ${typeof pageData?.data}, hasData: ${!!pageData?.data}`
-  );
-  if (pageData?.data) {
-    console.log(
-      `[AG_DEBUG] [EncoreApp] pageData.data JSON: ${JSON.stringify(
-        pageData.data
-      ).substring(0, 1000)}`
-    );
-  }
-
-  // Debug logging commented out to prevent console flooding
-  /*
-  useEffect(() => {
-    if (pageData.data) {
-      console.log("=== PAGE DATA STRUCTURE ===");
-      console.log("Full pageData.data:", pageData.data);
-      console.log("pageData.data keys:", Object.keys(pageData.data));
-      console.log("Client data:", pageData.data.clientData);
-      console.log("Client data type:", typeof pageData.data.clientData);
-      console.log(
-        "Client data keys:",
-        pageData.data.clientData ? Object.keys(pageData.data.clientData) : "N/A"
-      );
-
-      // Try to find the actual node data structure
-      const allKeys = Object.keys(pageData.data);
-      console.log("All top-level keys in pageData.data:", allKeys);
-
-      // Log the full structure more deeply
-      console.log(
-        "Full pageData.data structure:",
-        JSON.stringify(pageData.data, null, 2)
-      );
-
-      const clientData = pageData.data.clientData || pageData.data;
-
-      // Helper to recursively search for sliders in tree structure
-      const findSlidersInTree = (nodeData: any, path = ""): any[] => {
-        const sliders: any[] = [];
-        if (!nodeData || typeof nodeData !== "object") return sliders;
-
-        // Check if this node is a slider
-        const isSlider =
-          nodeData.type === "container:slider" ||
-          nodeData.type === "component:slider" ||
-          nodeData.name?.toLowerCase().includes("slider") ||
-          (Array.isArray(nodeData.tags) &&
-            nodeData.tags.some((tag: string) =>
-              tag.toLowerCase().includes("slider")
-            ));
-
-        if (isSlider) {
-          sliders.push({
-            path,
-            id: nodeData.id,
-            name: nodeData.name,
-            type: nodeData.type,
-            tags: nodeData.tags,
-            data: nodeData.data,
-            style: nodeData.style,
-            fullNodeData: nodeData,
-          });
-        }
-
-        // Recursively search children
-        if (nodeData.children) {
-          const children = Array.isArray(nodeData.children)
-            ? nodeData.children
-            : [nodeData.children];
-          children.forEach((child: any, index: number) => {
-            if (child && typeof child === "object") {
-              sliders.push(...findSlidersInTree(child, `${path}/${index}`));
-            }
-          });
-        }
-
-        return sliders;
-      };
-
-      // Check if clientData is a flat object keyed by ID (most likely)
-      let sliders: any[] = [];
-      if (
-        clientData &&
-        typeof clientData === "object" &&
-        !Array.isArray(clientData)
-      ) {
-        // Check if it's a flat structure (keyed by IDs)
-        const entries = Object.entries(clientData);
-        console.log(`Client data has ${entries.length} entries`);
-
-        // Search all entries for sliders
-        entries.forEach(([key, value]: [string, any]) => {
-          if (value && typeof value === "object") {
-            // Check if this entry itself is a slider
-            const isSlider =
-              value.type === "container:slider" ||
-              value.type === "component:slider" ||
-              value.name?.toLowerCase().includes("slider") ||
-              (Array.isArray(value.tags) &&
-                value.tags.some((tag: string) =>
-                  tag.toLowerCase().includes("slider")
-                ));
-
-            if (isSlider) {
-              sliders.push({
-                id: key,
-                name: value.name,
-                type: value.type,
-                tags: value.tags,
-                data: value.data,
-                style: value.style,
-                fullNodeData: value,
-              });
-            }
-
-            // Also search recursively in case it's nested
-            sliders.push(...findSlidersInTree(value, key));
-          }
-        });
-
-        // If no sliders found in flat structure, try treating it as a tree
-        if (sliders.length === 0) {
-          sliders = findSlidersInTree(clientData, "root");
-        }
-      } else {
-        // Treat as tree structure
-        sliders = findSlidersInTree(clientData, "root");
-      }
-
-      console.log("=== SLIDER COMPONENTS FOUND ===");
-      console.log(`Found ${sliders.length} slider(s):`, sliders);
-
-      sliders.forEach((slider, index) => {
-        console.log(`\n--- Slider ${index + 1} ---`);
-        console.log("ID:", slider.id);
-        console.log("Name:", slider.name);
-        console.log("Type:", slider.type);
-        console.log("Tags:", slider.tags);
-        console.log("Data:", slider.data);
-        console.log("Full node data:", slider.fullNodeData);
-
-        // Look for data binding tags
-        if (Array.isArray(slider.tags)) {
-          const bindingTags = slider.tags.filter(
-            (tag: string) =>
-              tag.includes("PROP:") ||
-              tag.includes("LIST:") ||
-              tag.includes("DATA:")
-          );
-          if (bindingTags.length > 0) {
-            console.log("🔍 Data binding tags found:", bindingTags);
-          }
-        }
-      });
-
-      // Also log all unique tags found across all components for reference
-      const allTags = new Set<string>();
-      const allEntries = Object.entries(clientData);
-      allEntries.forEach(([_, value]: [string, any]) => {
-        if (value?.tags && Array.isArray(value.tags)) {
-          value.tags.forEach((tag: string) => allTags.add(tag));
-        }
-      });
-      console.log("\n=== ALL UNIQUE TAGS IN PAGE ===");
-      console.log(Array.from(allTags).sort());
-    }
-  }, [pageData.data]);
-  */
+  logger.debug('Page data loaded', {
+    hasData: !!pageData?.data,
+    dataType: typeof pageData?.data
+  });
 
   // Memoize the context object to prevent infinite re-renders
   // Only recreate when the actual data changes, not on every render
   const context = useMemo(() => {
     let clientData = pageData.data?.clientData;
-    console.log(
-      `[AG_DEBUG] [EncoreApp] useMemo: clientData present? ${!!clientData}, Keys: ${Object.keys(
-        clientData || {}
-      )}`
-    );
-
-    // --- GENERIC DATA PATCHING START ---
-    // Recursively patch the data to fix layout and slider issues based on heuristics
-    const patchPageData = (node: any) => {
-      if (!node || typeof node !== "object") return;
-
-      // Log font usage
-      if (node.componentId || node.type === "component:text") {
-        console.log(
-          `[AG_DEBUG] [EncoreApp] 📦 Node ${node.id} (${node.type}) Style:`,
-          JSON.stringify(node.style)
-        );
-      }
-
-      // 1. Layout Heuristic: If children widths sum to ~100% or ~375px, force HORIZONTAL layout
-      // RELAXED: No longer requires layoutSizingHorizontal: "FIXED" - width data alone is sufficient
-      if (
-        node.children &&
-        Array.isArray(node.children) &&
-        node.children.length > 1
-      ) {
-        let totalWidth = 0;
-        let childrenWithWidth = 0;
-
-        node.children.forEach((child: any) => {
-          if (child.style?.width) {
-            // Width might be a percentage or pixel value.
-            // Based on logs, we saw "width: 52" and "width: 48" which sum to 100.
-            // If it's percentage, we check if it sums to 100.
-            // If it's pixels, we check if it sums to ~375.
-            totalWidth += child.style.width;
-            childrenWithWidth++;
-          }
-        });
-
-        // Check for percentage sum ~100 or pixel sum ~375
-        // Only apply if we have at least 2 children with width data
-        const isFullWidthRow =
-          (Math.abs(totalWidth - 100) < 1 || Math.abs(totalWidth - 375) < 5) &&
-          childrenWithWidth >= 2;
-
-        if (isFullWidthRow) {
-          if (!node.style) node.style = {};
-          if (!node.style.layout) node.style.layout = {};
-
-          // Only apply if mode is missing or undefined
-          if (!node.style.layout.mode) {
-            console.log(
-              `[PATCH] Forcing HORIZONTAL layout for node ${node.id} (${childrenWithWidth} children, widths sum: ${totalWidth})`
-            );
-            node.style.layout.mode = "HORIZONTAL";
-            node.style.layout.primaryAxisAlignItems = "flex-start";
-            node.style.layout.counterAxisAlignItems = "flex-start";
-          }
-        }
-      }
-
-      // 2. Slider Heuristic: If slider is taller than wide, force VERTICAL animation
-      // DISABLED: This is too aggressive and breaks horizontal sliders that happen to be tall (e.g. 50% width columns)
-      /*
-      const isSlider =
-        node.type === "container:slider" ||
-        node.type === "component:slider" ||
-        (node.tags &&
-          Array.isArray(node.tags) &&
-          node.tags.some((t: string) => t.toLowerCase().includes("slider")));
-
-      if (isSlider) {
-        const width = node.style?.width || 0;
-        const height = node.style?.height || 0;
-        // Check aspect ratio. If height > width, it's likely vertical.
-        // Note: width/height might be percentages or pixels.
-        // If both are numbers, we can compare.
-        // From logs: width: 52, height: 85.27. This is clearly vertical shape.
-        if (height > width) {
-          if (!node.data) node.data = {};
-          if (!node.data.params) node.data.params = {};
-
-          // Only apply if animation is default or missing
-          if (
-            !node.data.params.animation ||
-            node.data.params.animation === "default" ||
-            node.data.params.animation === "horizontal"
-          ) {
-            console.log(
-              `[PATCH] Forcing VERTICAL animation for slider ${node.id} (W:${width}, H:${height})`
-            );
-            node.data.params.animation = "vertical";
-          }
-        }
-      }
-      */
-
-      // Recurse
-      if (node.children) {
-        if (Array.isArray(node.children)) {
-          node.children.forEach(patchPageData);
-        } else {
-          patchPageData(node.children);
-        }
-      }
-    };
+    logger.debug('Building context', {
+      hasClientData: !!clientData,
+      clientDataKeys: Object.keys(clientData || {}).length
+    });
 
+    // Apply layout heuristics to fix common issues
     if (clientData) {
-      // Clone to avoid mutating SWR cache directly if possible, though deep clone might be expensive.
-      // For now, patching in place as it's a fix.
       patchPageData(clientData);
     }
-    // --- GENERIC DATA PATCHING END ---
 
     return {
       nodeData: undefined,
@@ -615,54 +302,10 @@ const EncoreApp = ({
     };
   }, [pageData.data?.clientData, data]);
 
-  // Manage repeating container controls
-  const [containerControls, setContainerControls] = useState<
-    Map<string, RepeatingContainerControl>
-  >(new Map());
-  const [controlPropsMap, setControlPropsMap] = useState<
-    Map<
-      string,
-      { currentIndex?: number; onIndexChange?: (index: number) => void }
-    >
-  >(new Map());
-
-  // Update control props from prop
-  useEffect(() => {
-    if (repeatingContainerControls) {
-      setControlPropsMap((prev) => {
-        // Check if content actually changed to avoid unnecessary updates
-        let changed = false;
-        if (prev.size !== Object.keys(repeatingContainerControls).length) {
-          changed = true;
-        } else {
-          for (const [id, props] of Object.entries(
-            repeatingContainerControls
-          )) {
-            const prevProps = prev.get(id);
-            if (!prevProps) {
-              changed = true;
-              break;
-            }
-            if (
-              prevProps.currentIndex !== props.currentIndex ||
-              prevProps.onIndexChange !== props.onIndexChange
-            ) {
-              changed = true;
-              break;
-            }
-          }
-        }
-
-        if (!changed) return prev;
-
-        const newMap = new Map();
-        Object.entries(repeatingContainerControls).forEach(([id, props]) => {
-          newMap.set(id, props);
-        });
-        return newMap;
-      });
-    }
-  }, [repeatingContainerControls]);
+  // Manage repeating container controls (sliders, lists)
+  const repeatingContainerContextValue = useRepeatingContainers(
+    repeatingContainerControls
+  );
 
   // Sync input groups from props to store
   useEffect(() => {
@@ -674,92 +317,6 @@ const EncoreApp = ({
     }
   }, [inputGroups]);
 
-  const registerContainer = useCallback(
-    (id: string, control: RepeatingContainerControl) => {
-      setContainerControls((prev) => {
-        const next = new Map(prev);
-        next.set(id, control);
-        return next;
-      });
-    },
-    []
-  );
-
-  const unregisterContainer = useCallback((id: string) => {
-    setContainerControls((prev) => {
-      const next = new Map(prev);
-      next.delete(id);
-      return next;
-    });
-    // Do NOT delete from controlPropsMap here.
-    // controlPropsMap contains props passed from the parent (repeatingContainerControls).
-    // If we delete them, we lose the configuration passed down to us.
-    // The props should persist even if the component temporarily unregisters.
-  }, []);
-
-  const getControl = useCallback(
-    (id: string) => {
-      return containerControls.get(id);
-    },
-    [containerControls]
-  );
-
-  const setControlProps = useCallback(
-    (
-      id: string,
-      props:
-        | { currentIndex?: number; onIndexChange?: (index: number) => void }
-        | ((prev: {
-            currentIndex?: number;
-            onIndexChange?: (index: number) => void;
-          }) => {
-            currentIndex?: number;
-            onIndexChange?: (index: number) => void;
-          })
-    ) => {
-      setControlPropsMap((prev) => {
-        const next = new Map(prev);
-        const current = next.get(id) || {};
-        const newProps = typeof props === "function" ? props(current) : props;
-        next.set(id, newProps);
-        return next;
-      });
-    },
-    []
-  );
-
-  const getControlProps = useCallback(
-    (id: string) => {
-      return controlPropsMap.get(id);
-    },
-    [controlPropsMap]
-  );
-
-  // Control props are automatically passed to registered containers via context
-  // Components read props via getControlProps() and update when props change
-
-  // Create context value - this object changes when controlPropsMap changes,
-  // causing all consumers to re-render and get updated props
-  const repeatingContainerContextValue = React.useMemo(
-    () => ({
-      registerContainer,
-      unregisterContainer,
-      getControl,
-      setControlProps,
-      getControlProps,
-      // Include controlPropsMap size in the value to trigger re-renders when it changes
-      _propsVersion: controlPropsMap.size,
-    }),
-    [
-      registerContainer,
-      unregisterContainer,
-      getControl,
-      setControlProps,
-      getControlProps,
-      controlPropsMap.size,
-    ]
-  );
-
   // Observe size changes of the dynamic content container and notify consumer
   useEffect(() => {
     if (!onSizeChange) return;
@@ -840,24 +397,19 @@ const EncoreApp = ({
         }}
       >
         <Suspense fallback={fallback || <div />}>
-          <EncoreComponentIdContext.Provider value={{ componentId }}>
-            <EncoreActionContext.Provider value={{ onAction }}>
-              <EncoreRepeatingContainerContext.Provider
-                value={repeatingContainerContextValue}
-              >
-                <EncoreBindingContext.Provider value={context}>
-                  <DynamicComponent
-                    name={`${appId}/draft/components/${pageId}`}
-                    fallback={fallback}
-                    reloadKey={reloadKey}
-                    componentCode={componentCode}
-                  >
-                    {" "}
-                  </DynamicComponent>
-                </EncoreBindingContext.Provider>
-              </EncoreRepeatingContainerContext.Provider>
-            </EncoreActionContext.Provider>
-          </EncoreComponentIdContext.Provider>
+          <EncoreContextProviders
+            componentId={componentId}
+            onAction={onAction}
+            repeatingContainerContextValue={repeatingContainerContextValue}
+            bindingContextValue={context}
+          >
+            <DynamicComponent
+              name={`${appId}/draft/components/${pageId}`}
+              fallback={fallback}
+              reloadKey={reloadKey}
+              componentCode={componentCode}
+            />
+          </EncoreContextProviders>
         </Suspense>
       </div>
     </div>