@bravostudioai/react 0.1.15 → 0.1.17

package/src/cli/commands/generate.ts

@@ -85,12 +85,14 @@ async function generateWrapper({
   outputPath,
   cachedAppData,
   isProduction,
+  usedNames,
 }: {
   appId: string;
   pageId: string;
   outputPath: string;
   cachedAppData?: any;
   isProduction?: boolean;
+  usedNames?: Set<string>;
 }) {
   console.log(`Generating wrapper for app: ${appId}, page: ${pageId}`);
 
@@ -249,7 +251,27 @@ async function generateWrapper({
   pageName = pageData.name || pageData.id || pageName;
 
   // Generate component name and directory name
-  const { directoryPath, componentName } = generateNames(appName, pageName);
+  let { directoryPath, componentName } = generateNames(appName, pageName);
+
+  // Ensure unique component name
+  if (usedNames) {
+    let uniqueName = componentName;
+    let counter = 2;
+    while (usedNames.has(uniqueName)) {
+      uniqueName = `${componentName}${counter}`;
+      counter++;
+    }
+    if (uniqueName !== componentName) {
+      componentName = uniqueName;
+      // Reconstitute directory path with new component name
+      // generateNames uses: join(appPascal, pagePascal) where pagePascal is componentName
+      const appCamel = sanitizePropName(appName);
+      const appPascal = appCamel.charAt(0).toUpperCase() + appCamel.slice(1);
+      directoryPath = join(appPascal, componentName);
+    }
+    usedNames.add(componentName);
+  }
+
   const directoryName = directoryPath;
 
   // Update output path
@@ -271,7 +293,15 @@ async function generateWrapper({
     forms,
     selectInputs,
     actionButtons,
-    !!isProduction
+    !!isProduction,
+    {
+      width: pageData.style?.width,
+      height: pageData.style?.height,
+      aspectRatio:
+        pageData.style?.width && pageData.style?.height
+          ? pageData.style.width / pageData.style.height
+          : undefined,
+    }
   );
 
   const readmeContent = generateReadme(
@@ -373,6 +403,7 @@ export async function runGenerate(args: string[]) {
         return;
       }
 
+      const usedNames = new Set<string>();
       for (const page of pages) {
         if (!page.id) continue;
         try {
@@ -382,6 +413,7 @@ export async function runGenerate(args: string[]) {
             outputPath,
             cachedAppData: appData,
             isProduction,
+            usedNames,
           });
         } catch (error) {
           console.warn(
@@ -400,7 +432,7 @@ export async function runGenerate(args: string[]) {
   const [appId, pageId, outputPath] = cleanArgs;
 
   try {
-    await generateWrapper({ appId, pageId, outputPath, isProduction });
+    await generateWrapper({ appId, pageId, outputPath, isProduction }); // Single page generation, no collision context needed unless we wanted global uniqueness but usually used for one-off
   } catch (error) {
     console.error("\nError:", error instanceof Error ? error.message : error);
     process.exit(1);

package/src/codegen/generator.ts

@@ -28,7 +28,12 @@ export function generateComponentCode(
   forms: FormInfo[],
   selectInputs: SelectInputInfo[],
   actionButtons: ActionButtonInfo[],
-  isProduction: boolean = false
+  isProduction: boolean = false,
+  pageMeta?: {
+    width?: number;
+    height?: number;
+    aspectRatio?: number;
+  }
 ): string {
   // Generate prop types
   const propTypes: string[] = [];
@@ -439,6 +444,12 @@ ${dataMapping.join("\n")}
 }
 
 export default ${componentName};
+
+export const PageMeta = {
+  width: ${pageMeta?.width ?? "undefined"},
+  height: ${pageMeta?.height ?? "undefined"},
+  aspectRatio: ${pageMeta?.aspectRatio ?? "undefined"},
+};
 `;
 }
 

package/src/components/EncoreApp.tsx

@@ -828,7 +828,15 @@ const EncoreApp = ({
         overflow: "hidden",
       }}
     >
-      <div ref={contentWrapperRef} style={{ width: "100%", minHeight: "100%" }}>
+      <div
+        ref={contentWrapperRef}
+        style={{
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
         <Suspense fallback={fallback || <div />}>
           <EncoreComponentIdContext.Provider value={{ componentId }}>
             <EncoreActionContext.Provider value={{ onAction }}>

package/src/lib/fetcher.ts

@@ -4,104 +4,102 @@ import useEncoreState from "../stores/useEncoreState";
 
 // Get baseURL from store at runtime instead of build time
 const getAppsServiceUrl = () => {
-    return useEncoreState.getState().baseURL;
+  return useEncoreState.getState().baseURL;
 };
 
 const bundledResponses: Record<string, string> = {};
 
 const fetcher = (url: string) => {
-    // Local mode: map Encore service URLs to files in /flex-layout
-    const forceLocal = /\buseLocal=1\b/.test(url);
-    if (forceLocal || isLocalMode()) {
-        const pathOnly = url.split("?")[0];
-        const absBase = null;
-        // /devices/apps/:appId
-        const appMatch = pathOnly.match(/^\/devices\/apps\/([^/]+)$/);
-        if (appMatch) {
-            const appId = appMatch[1];
-            const tryUrls = [
-                `/flex-layout/${appId}/${appId}.json`,
-                absBase
-                    ? `/@fs/${absBase}/${appId}/${appId}.json`
-                    : undefined,
-            ].filter(Boolean) as string[];
-            return (async () => {
-                for (const u of tryUrls) {
-                    try {
-                        const r = await fetch(u);
-                        if (r.ok) return r.json();
-                    } catch {
-                        // try next
-                    }
-                }
-                throw new Error(
-                    `Local app.json not found for ${appId} (tried ${tryUrls.join(
-                        ", ",
-                    )})`,
-                );
-            })();
+  // Local mode: map Encore service URLs to files in /flex-layout
+  const forceLocal = /\buseLocal=1\b/.test(url);
+  if (forceLocal || isLocalMode()) {
+    const pathOnly = url.split("?")[0];
+    const absBase = null;
+    // /devices/apps/:appId
+    const appMatch = pathOnly.match(/^\/devices\/apps\/([^/]+)$/);
+    if (appMatch) {
+      const appId = appMatch[1];
+      const tryUrls = [
+        `/flex-layout/${appId}/${appId}.json`,
+        absBase ? `/@fs/${absBase}/${appId}/${appId}.json` : undefined,
+      ].filter(Boolean) as string[];
+      return (async () => {
+        for (const u of tryUrls) {
+          try {
+            const r = await fetch(u);
+            if (r.ok) return r.json();
+          } catch {
+            // try next
+          }
         }
-        // /devices/apps/:appId/node/:pageId
-        const pageMatch = pathOnly.match(
-            /^\/devices\/apps\/([^/]+)\/node\/([^/?#]+)$/,
+        throw new Error(
+          `Local app.json not found for ${appId} (tried ${tryUrls.join(", ")})`
         );
-        if (pageMatch) {
-            const appId = pageMatch[1];
-            const pageId = pageMatch[2];
-            // Try a dedicated page JSON first (if present)
-            const tryUrls = [
-                `/flex-layout/${appId}/${pageId}.json`,
-                absBase
-                    ? `/@fs/${absBase}/${appId}/${pageId}.json`
-                    : undefined,
-            ].filter(Boolean) as string[];
-            return fetch(tryUrls[0])
-                .then(async (r) => {
-                    if (r.ok) return r.json();
-                    // try secondary url if defined
-                    if (tryUrls[1]) {
-                        const r2 = await fetch(tryUrls[1]).catch(() => null);
-                        if (r2 && r2.ok) return r2.json();
-                    }
-                    // Fallback: derive minimal shape from app.json
-                    const appJson =
-                        (await fetch(`/flex-layout/${appId}/${appId}.json`)
-                            .then((a) => (a.ok ? a.json() : null))
-                            .catch(() => null)) ||
-                        (absBase
-                            ? await fetch(
-                                  `/@fs/${absBase}/${appId}/${appId}.json`,
-                              )
-                                  .then((a) => (a.ok ? a.json() : null))
-                                  .catch(() => null)
-                            : null);
-                    // Keep shape compatible with current consumers
-                    const pages =
-                        appJson?.app?.data?.pages ||
-                        appJson?.data?.pages ||
-                        [];
-                    const page = pages.find((p: any) => p?.id === pageId) || {};
-                    return { clientData: page };
-                })
-                .catch(async () => {
-                    // Final fallback: minimal object
-                    return { clientData: null };
-                });
-        }
+      })();
     }
-
-    if (bundledResponses?.[url]) {
-        return JSON.parse(bundledResponses?.[url]);
+    // /devices/apps/:appId/node/:pageId
+    const pageMatch = pathOnly.match(
+      /^\/devices\/apps\/([^/]+)\/node\/([^/?#]+)$/
+    );
+    if (pageMatch) {
+      const appId = pageMatch[1];
+      const pageId = pageMatch[2];
+      // Try a dedicated page JSON first (if present)
+      const tryUrls = [
+        `/flex-layout/${appId}/${pageId}.json`,
+        absBase ? `/@fs/${absBase}/${appId}/${pageId}.json` : undefined,
+      ].filter(Boolean) as string[];
+      return fetch(tryUrls[0])
+        .then(async (r) => {
+          if (r.ok) return r.json();
+          // try secondary url if defined
+          if (tryUrls[1]) {
+            const r2 = await fetch(tryUrls[1]).catch(() => null);
+            if (r2 && r2.ok) return r2.json();
+          }
+          // Fallback: derive minimal shape from app.json
+          const appJson =
+            (await fetch(`/flex-layout/${appId}/${appId}.json`)
+              .then((a) => (a.ok ? a.json() : null))
+              .catch(() => null)) ||
+            (absBase
+              ? await fetch(`/@fs/${absBase}/${appId}/${appId}.json`)
+                  .then((a) => (a.ok ? a.json() : null))
+                  .catch(() => null)
+              : null);
+          // Keep shape compatible with current consumers
+          const pages = appJson?.app?.data?.pages || appJson?.data?.pages || [];
+          const page = pages.find((p: any) => p?.id === pageId) || {};
+          return { clientData: page };
+        })
+        .catch(async () => {
+          // Final fallback: minimal object
+          return { clientData: null };
+        });
     }
+  }
+
+  if (bundledResponses?.[url]) {
+    return JSON.parse(bundledResponses?.[url]);
+  }
+
+  // Get baseURL at runtime from store
+  const appsServiceUrl = getAppsServiceUrl();
 
-    // Get baseURL at runtime from store
-    const appsServiceUrl = getAppsServiceUrl();
+  console.log(
+    "[Fetcher] Requesting:",
+    url,
+    "BaseURL:",
+    appsServiceUrl,
+    "Headers:",
+    { "x-app-clientrendered": "disabled" }
+  );
 
-    return axios({
-        baseURL: appsServiceUrl,
-        url,
-        headers: { "x-app-clientrendered": "true" },
-    }).then((res) => res.data);
+  return axios({
+    baseURL: appsServiceUrl,
+    url,
+    // headers: { "x-app-clientrendered": "true" },
+  }).then((res) => res.data);
 };
 
 export default fetcher;