@bravostudioai/react 0.1.31 → 0.1.34

package/src/components/EncoreApp.tsx

@@ -76,6 +76,8 @@ export type EncoreAppProps = {
   pageDefinition?: any;
   /** Provide component code directly instead of fetching (for offline/bundled deployments) */
   componentCode?: string;
+  /** Deployment mode: dynamic (default), optimistic, or production */
+  mode?: "dynamic" | "optimistic" | "production";
 };
 
 type Props = EncoreAppProps;
@@ -143,8 +145,9 @@ const EncoreApp = ({
   appDefinition,
   pageDefinition,
   componentCode,
+  mode,
 }: Props) => {
-  logger.debug('EncoreApp render', { appId, pageId });
+  logger.debug("EncoreApp render", { appId, pageId, mode });
 
   // CRITICAL: Set baseURL BEFORE any hooks that might trigger fetches
   // This must happen synchronously, not in useEffect, because useSWR will fetch immediately
@@ -210,16 +213,38 @@ const EncoreApp = ({
   });
 
   const useLocalFlag = source === "local" || isLocalMode();
-  // If appDefinition is provided, disable SWR fetch by setting url to null
-  const appUrl = appDefinition
-    ? null
-    : appId && `/devices/apps/${appId}${useLocalFlag ? "?useLocal=1" : ""}`;
+
+  // Determine if we should fetch app definition
+  // Production: Do NOT fetch (use appDefinition)
+  // Dynamic: Fetch always (ignore appDefinition unless valid) - wait, dynamic assumes no bundled data usually, or if provided, use it? Current logic uses simple check.
+  // Optimistic: Fetch always, but use appDefinition as fallback/initial data
+
+  // Logic:
+  // If we have appDefinition:
+  // - Production: Use it, no fetch.
+  // - Optimistic: Use it as fallbackData (SWR), and fetch.
+  // - Dynamic (Edge Case): User provided data but wants dynamic? Treat same as Optimistic roughly, or just ignore data.
+  //   But usually Dynamic won't have appDefinition passed unless manually done.
+
+  // Refined Logic based on `mode`:
+  const isProductionMode = mode === "production";
+  const isOptimisticMode = mode === "optimistic";
+  // Default to dynamic if not specified
+  const isDynamicMode = !isProductionMode && !isOptimisticMode;
+
+  const shouldFetchApp = !isProductionMode && appId;
+  const appUrl = shouldFetchApp
+    ? `/devices/apps/${appId}${useLocalFlag ? "?useLocal=1" : ""}`
+    : null;
 
   const appSWR = useSWR(appUrl, fetcher, {
-    suspense: !!appUrl, // Only use suspense if we are fetching
+    suspense: isDynamicMode && !!appUrl, // Suspense only for Dynamic mode
+    fallbackData: isOptimisticMode && appDefinition ? appDefinition : undefined,
+    revalidateOnMount: true, // Ensure we fetch fresh data in optimistic mode
   });
 
-  const app = appDefinition ? { data: appDefinition } : appSWR;
+  const app =
+    isProductionMode && appDefinition ? { data: appDefinition } : appSWR;
 
   useEffect(() => {
     setApp(app.data);
@@ -258,31 +283,96 @@ const EncoreApp = ({
     })();
   }, [assetsById]);
 
-  const pageUrl = pageDefinition
-    ? null
-    : appId &&
-      pageId &&
-      `/devices/apps/${appId}/node/${pageId}${
+  const shouldFetchPage = !isProductionMode && appId && pageId;
+  const pageUrl = shouldFetchPage
+    ? `/devices/apps/${appId}/node/${pageId}${
         useLocalFlag ? "?useLocal=1" : ""
-      }`;
+      }`
+    : null;
+
+  logger.debug("Page data fetch", { pageUrl, mode });
+
+  const pageSWR = useSWR(pageUrl, fetcher, {
+    suspense: isDynamicMode && !!pageUrl,
+    fallbackData:
+      isOptimisticMode && pageDefinition ? pageDefinition : undefined,
+    revalidateOnMount: true,
+  });
+
+  const pageData =
+    isProductionMode && pageDefinition ? { data: pageDefinition } : pageSWR;
+
+  // Specific logic for Component Code fetching in Optimistic Mode
+  // If optimistic, we have componentCode passed in (bundled). We use that initially.
+  // BUT we also want to fetch the latest component code in background.
+  // DynamicComponent uses 'componentCode' prop if present.
+  // We need to fetch the code separately and override the prop passed to DynamicComponent.
 
-  logger.debug('Page data fetch', { pageUrl });
+  // We need to fetch the latest component JS in optimistic mode
+  // The DynamicComponent currently logic: if (componentCode) loadAMDModule(code) else fetchDep(name).
+  // We want: render with initial componentCode, BUT ALSO fetch new code, and when valid, switch to it.
+
+  const [optimisticCode, setOptimisticCode] = useState<string | undefined>(
+    componentCode
+  );
+
+  useEffect(() => {
+    // If in optimistic mode, we want to fetch the latest code
+    if (isOptimisticMode && appId && pageId && !isLocalMode()) {
+      // We can reuse the logic from DynamicComponent/dynamicModules roughly, or just fetch text.
+      // The URL logic is in dynamicModules.
+      // Let's just rely on DynamicComponent to do the fetching if we pass undefined?
+      // No, if we pass undefined it will suspend/show fallback. We want to show OLD code.
+
+      // So we renders with `optimisticCode` (initially bundled).
+      // We fire a background fetch. on success, updated `optimisticCode`.
+
+      const fetchLatestCode = async () => {
+        try {
+          // Replicating URL logic from dynamicModules for remote mode
+          const { CONST_COMPONENTS_CDN_URL } = await import("../../constants");
+          const cacheBuster = Math.round(Date.now() / 1000);
+          const name = `${appId}/draft/components/${pageId}`;
+          const url = `${CONST_COMPONENTS_CDN_URL}/${name}.js?cacheBuster=${cacheBuster}`;
+
+          const resp = await fetch(url);
+          if (resp.ok) {
+            const text = await resp.text();
+            // Only update if different?
+            // Comparing huge strings might be expensive, but React state update checks equality anyway (ref).
+            // Let's just set it.
+            setOptimisticCode(text);
+            logger.debug("Refreshed optimistic component code");
+          }
+        } catch (e) {
+          logger.warn("Failed to background refresh optimistic component", e);
+        }
+      };
+
+      fetchLatestCode();
+    } else {
+      // If prop changes (e.g. from HMR or parent), sync it
+      setOptimisticCode(componentCode);
+    }
+  }, [componentCode, isOptimisticMode, appId, pageId]);
 
-  const pageSWR = useSWR(pageUrl, fetcher, { suspense: !!pageUrl });
-  const pageData = pageDefinition ? { data: pageDefinition } : pageSWR;
+  // Use the calculated optimistic code or the passed prop depending on mode
+  const effectiveComponentCode = isOptimisticMode
+    ? optimisticCode
+    : componentCode;
 
-  logger.debug('Page data loaded', {
+  logger.debug("Page data loaded", {
     hasData: !!pageData?.data,
-    dataType: typeof 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;
-    logger.debug('Building context', {
+    logger.debug("Building context", {
       hasClientData: !!clientData,
-      clientDataKeys: Object.keys(clientData || {}).length
+      clientDataKeys: Object.keys(clientData || {}).length,
     });
 
     // Apply layout heuristics to fix common issues
@@ -407,7 +497,7 @@ const EncoreApp = ({
               name={`${appId}/draft/components/${pageId}`}
               fallback={fallback}
               reloadKey={reloadKey}
-              componentCode={componentCode}
+              componentCode={effectiveComponentCode}
             />
           </EncoreContextProviders>
         </Suspense>

package/src/hooks/useRepeatingContainers.ts

@@ -6,7 +6,7 @@
  */
 
 import { useState, useCallback, useMemo, useEffect } from "react";
-import React from "react";
+
 import type { RepeatingContainerControl } from "../contexts/EncoreRepeatingContainerContext";
 
 interface ContainerControlProps {

package/src/version.ts

@@ -1 +1 @@
-export const PACKAGE_VERSION = "0.1.31";
+export const PACKAGE_VERSION = "0.1.34";