@bravostudioai/react 0.1.31 → 0.1.34

package/dist/components/EncoreApp.js

@@ -1,288 +1,177 @@
-import { jsx as a } from "react/jsx-runtime";
-import Z from "../node_modules/swr/dist/index/index.js";
-import z from "../lib/fetcher.js";
-import p from "../stores/useEncoreState.js";
-import le, { useRef as Y, useEffect as i, useState as O, useCallback as m, useMemo as ie, Suspense as pe } from "react";
-import { setLocalModeOverride as P, isLocalMode as U } from "../lib/localMode.js";
-import de from "../contexts/EncoreBindingContext.js";
-import fe from "../contexts/EncoreComponentIdContext.js";
-import ue from "../contexts/EncoreActionContext.js";
-import he from "../contexts/EncoreRepeatingContainerContext.js";
-import me from "./DynamicComponent.js";
-import { useEncoreRouter as ye } from "../contexts/EncoreRouterContext.js";
-import { usePusherUpdates as ge } from "../hooks/usePusherUpdates.js";
-const Ee = ({ to: r, children: l, style: v, ...A }) => {
-  const { navigate: d } = ye();
-  return /* @__PURE__ */ a(
+import { jsx as n } from "react/jsx-runtime";
+import K from "../node_modules/swr/dist/index/index.js";
+import T from "../lib/fetcher.js";
+import i from "../stores/useEncoreState.js";
+import { useRef as _, useEffect as c, useState as H, useCallback as st, useMemo as nt, Suspense as ct } from "react";
+import { setLocalModeOverride as A, isLocalMode as B } from "../lib/localMode.js";
+import at from "./DynamicComponent.js";
+import { useEncoreRouter as it } from "../contexts/EncoreRouterContext.js";
+import { usePusherUpdates as lt } from "../hooks/usePusherUpdates.js";
+import { useFontLoader as dt } from "../hooks/useFontLoader.js";
+import { useRepeatingContainers as ut } from "../hooks/useRepeatingContainers.js";
+import { EncoreContextProviders as ft } from "./EncoreContextProviders.js";
+import { patchPageData as mt } from "../lib/dataPatching.js";
+import { logger as f } from "../lib/logger.js";
+const ht = ({ to: e, children: o, style: D, ...b }) => {
+  const { navigate: l } = it();
+  return /* @__PURE__ */ n(
     "a",
     {
-      href: r,
-      onClick: (y) => {
-        y.preventDefault(), d(r);
+      href: e,
+      onClick: (m) => {
+        m.preventDefault(), l(e);
       },
-      style: { cursor: "pointer", ...v },
-      ...A,
-      children: l
+      style: { cursor: "pointer", ...D },
+      ...b,
+      children: o
     }
   );
-}, Ae = (r) => r.setApp, $e = (r) => r.setAppId, we = (r) => r.setPageId, Re = (r) => r.assetsById, Me = ({
-  appId: r,
-  pageId: l,
-  componentId: v,
-  fallback: A,
-  onSizeChange: d,
-  onContentSizeChange: y,
-  onAction: q,
-  data: $,
-  source: f,
-  repeatingContainerControls: g,
-  inputGroups: D,
-  baseURL: b,
-  appDefinition: w,
-  pageDefinition: x,
-  componentCode: Q
+}, pt = (e) => e.setApp, yt = (e) => e.setAppId, gt = (e) => e.setPageId, vt = (e) => e.assetsById, Ut = ({
+  appId: e,
+  pageId: o,
+  componentId: D,
+  fallback: b,
+  onSizeChange: l,
+  onContentSizeChange: m,
+  onAction: Y,
+  data: w,
+  source: d,
+  repeatingContainerControls: q,
+  inputGroups: L,
+  baseURL: S,
+  appDefinition: h,
+  pageDefinition: R,
+  componentCode: O,
+  mode: P
 }) => {
-  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: ${r}, pageId: ${l}`
-  ), b && p.getState().baseURL !== b && p.getState().setBaseURL(b), f && P(f === "local" ? "local" : "remote");
-  const X = !1, k = p(Ae), N = p($e), I = p(we), E = p(Re), M = Y(null), F = Y(null);
-  i(() => {
-    if (!y) return;
+  f.debug("EncoreApp render", { appId: e, pageId: o, mode: P }), S && i.getState().baseURL !== S && i.getState().setBaseURL(S), d && A(d === "local" ? "local" : "remote");
+  const G = !1, C = i(pt), M = i(yt), E = i(gt), p = i(vt), U = _(null), F = _(null);
+  c(() => {
+    if (!m) return;
     const t = F.current;
     if (!t) return;
-    const o = () => {
-      y({
+    const r = () => {
+      m({
         width: t.scrollWidth,
         height: t.scrollHeight
       });
-    }, e = new ResizeObserver(() => {
-      o();
+    }, s = new ResizeObserver(() => {
+      r();
     });
-    return o(), e.observe(t), () => e.disconnect();
-  }, [y]);
-  const [ee, te] = O(0), oe = m(() => {
-    te((t) => typeof t == "number" ? t + 1 : Date.now());
+    return r(), s.observe(t), () => s.disconnect();
+  }, [m]);
+  const [J, Q] = H(0), X = st(() => {
+    Q((t) => typeof t == "number" ? t + 1 : Date.now());
   }, []);
-  ge({
-    appId: r,
-    pageId: l || void 0,
-    enabled: !U() && !w,
-    onUpdate: oe
+  lt({
+    appId: e,
+    pageId: o || void 0,
+    enabled: !B() && !h,
+    onUpdate: X
   });
-  const C = f === "local" || U(), L = w ? null : r && `/devices/apps/${r}${C ? "?useLocal=1" : ""}`, ne = Z(L, z, {
-    suspense: !!L
-    // Only use suspense if we are fetching
-  }), u = w ? { data: w } : ne;
-  i(() => {
-    k(u.data);
-  }, [u.data, k]), i(() => {
-    const t = u?.data?.app?.fonts ?? [];
-    console.log(
-      `[AG_DEBUG] [EncoreApp] 🔎 Font check initiated. Found ${t?.length || 0} fonts in app definition.`
-    ), t && t.length > 0 && console.log(
-      "[AG_DEBUG] [EncoreApp] Font list:",
-      t.map(
-        (o) => `${o.fontName?.family} (${o.fontName?.postScriptName}) - Broken: ${o.broken} - URL: ${o.url}`
-      )
-    ), !(!t || t.length === 0) && (typeof window > "u" || !("FontFace" in window) || t.forEach((o) => {
-      try {
-        const e = o?.fontName?.family, n = o?.url, s = o?.fontName?.postScriptName;
-        if (!e || !n) return;
-        if (o.broken) {
-          console.warn(
-            `[EncoreApp] Font "${s || e}" is marked as broken in the database. URL: ${n} - SKIPPING DOWNLOAD`
-          );
-          return;
-        }
-        const c = s || e;
-        new FontFace(c, `url(${n})`, {
-          weight: "100 900",
-          style: "normal"
-        }).load().then((G) => {
-          document.fonts.add(G), console.log(
-            `[AG_DEBUG] [EncoreApp] ✅ Font loaded successfully: "${c}" - Source: ${n}`
-          );
-          const ae = document.fonts.check(
-            `400 12px "${c}"`
-          );
-          console.log(
-            `[AG_DEBUG] [EncoreApp] 🧪 document.fonts.check result for "${c}": ${ae}`
-          );
-        }).catch((G) => {
-          console.warn(
-            `[AG_DEBUG] [EncoreApp] ❌ Failed to load font "${s || e}" from ${n}`,
-            G
-          );
-        });
-      } catch (e) {
-        console.warn("[EncoreApp] Error processing font:", e);
-      }
-    }));
-  }, [u?.data]), i(() => {
-    N(r);
-  }, [r, N]), i(() => {
-    l && I(l);
-  }, [l, I]), i(() => {
-    Object.keys(E).length !== 0 && (async () => await Promise.allSettled(
-      Object.keys(E).map((t) => E[t].url ? new Promise((o) => {
-        const e = new Image();
-        e.onload = o, e.onerror = o, e.src = E[t].url;
+  const j = d === "local" || B(), y = P === "production", u = P === "optimistic", W = !y && !u, N = !y && e ? `/devices/apps/${e}${j ? "?useLocal=1" : ""}` : null, Z = K(N, T, {
+    suspense: W && !!N,
+    // Suspense only for Dynamic mode
+    fallbackData: u && h ? h : void 0,
+    revalidateOnMount: !0
+    // Ensure we fetch fresh data in optimistic mode
+  }), g = y && h ? { data: h } : Z;
+  c(() => {
+    C(g.data);
+  }, [g.data, C]), dt(g?.data), c(() => {
+    M(e);
+  }, [e, M]), c(() => {
+    o && E(o);
+  }, [o, E]), c(() => {
+    Object.keys(p).length !== 0 && (async () => await Promise.allSettled(
+      Object.keys(p).map((t) => p[t].url ? new Promise((r) => {
+        const s = new Image();
+        s.onload = r, s.onerror = r, s.src = p[t].url;
       }) : Promise.resolve())
     ))();
-  }, [E]);
-  const B = x ? null : r && l && `/devices/apps/${r}/node/${l}${C ? "?useLocal=1" : ""}`;
-  console.log(`[AG_DEBUG] [EncoreApp] pageUrl: ${B}`);
-  const re = Z(B, z, { suspense: !!B }), h = x ? { data: x } : re;
-  console.log(
-    `[AG_DEBUG] [EncoreApp] pageData.data type: ${typeof h?.data}, hasData: ${!!h?.data}`
-  ), h?.data && console.log(
-    `[AG_DEBUG] [EncoreApp] pageData.data JSON: ${JSON.stringify(
-      h.data
-    ).substring(0, 1e3)}`
+  }, [p]);
+  const k = !y && e && o ? `/devices/apps/${e}/node/${o}${j ? "?useLocal=1" : ""}` : null;
+  f.debug("Page data fetch", { pageUrl: k, mode: P });
+  const z = K(k, T, {
+    suspense: W && !!k,
+    fallbackData: u && R ? R : void 0,
+    revalidateOnMount: !0
+  }), $ = y && R ? { data: R } : z, [I, V] = H(
+    O
   );
-  const se = ie(() => {
-    let t = h.data?.clientData;
-    console.log(
-      `[AG_DEBUG] [EncoreApp] useMemo: clientData present? ${!!t}, Keys: ${Object.keys(
-        t || {}
-      )}`
-    );
-    const o = (e) => {
-      if (!(!e || typeof e != "object")) {
-        if ((e.componentId || e.type === "component:text") && console.log(
-          `[AG_DEBUG] [EncoreApp] 📦 Node ${e.id} (${e.type}) Style:`,
-          JSON.stringify(e.style)
-        ), e.children && Array.isArray(e.children) && e.children.length > 1) {
-          let n = 0, s = 0;
-          e.children.forEach((S) => {
-            S.style?.width && (n += S.style.width, s++);
-          }), (Math.abs(n - 100) < 1 || Math.abs(n - 375) < 5) && s >= 2 && (e.style || (e.style = {}), e.style.layout || (e.style.layout = {}), e.style.layout.mode || (console.log(
-            `[PATCH] Forcing HORIZONTAL layout for node ${e.id} (${s} children, widths sum: ${n})`
-          ), e.style.layout.mode = "HORIZONTAL", e.style.layout.primaryAxisAlignItems = "flex-start", e.style.layout.counterAxisAlignItems = "flex-start"));
+  c(() => {
+    u && e && o && !B() ? (async () => {
+      try {
+        const { CONST_COMPONENTS_CDN_URL: r } = await import("../packages/encore-lib/constants.js"), s = Math.round(Date.now() / 1e3), x = `${e}/draft/components/${o}`, v = `${r}/${x}.js?cacheBuster=${s}`, a = await fetch(v);
+        if (a.ok) {
+          const rt = await a.text();
+          V(rt), f.debug("Refreshed optimistic component code");
         }
-        e.children && (Array.isArray(e.children) ? e.children.forEach(o) : o(e.children));
+      } catch (r) {
+        f.warn("Failed to background refresh optimistic component", r);
       }
-    };
-    return t && o(t), {
+    })() : V(O);
+  }, [O, u, e, o]);
+  const tt = u ? I : O;
+  f.debug("Page data loaded", {
+    hasData: !!$?.data,
+    dataType: typeof $?.data
+  });
+  const et = nt(() => {
+    let t = $.data?.clientData;
+    return f.debug("Building context", {
+      hasClientData: !!t,
+      clientDataKeys: Object.keys(t || {}).length
+    }), t && mt(t), {
       nodeData: void 0,
       // Allow overriding specific values by element id.
       // For now, this is used to override TextComponent content when the node has the PROP:TEXT_VAR tag.
-      textOverridesById: $,
+      textOverridesById: w,
       // Support for encore:data:array tags - provide array data by component ID
-      arrayDataById: $,
+      arrayDataById: w,
       // Support for standalone component data binding (encore:data tags at root level)
-      rootData: $
+      rootData: w
     };
-  }, [h.data?.clientData, $]), [_, W] = O(/* @__PURE__ */ new Map()), [R, j] = O(/* @__PURE__ */ new Map());
-  i(() => {
-    g && j((t) => {
-      let o = !1;
-      if (t.size !== Object.keys(g).length)
-        o = !0;
-      else
-        for (const [n, s] of Object.entries(
-          g
-        )) {
-          const c = t.get(n);
-          if (!c) {
-            o = !0;
-            break;
-          }
-          if (c.currentIndex !== s.currentIndex || c.onIndexChange !== s.onIndexChange) {
-            o = !0;
-            break;
-          }
-        }
-      if (!o) return t;
-      const e = /* @__PURE__ */ new Map();
-      return Object.entries(g).forEach(([n, s]) => {
-        e.set(n, s);
-      }), e;
-    });
-  }, [g]), i(() => {
-    if (D) {
-      const t = p.getState().setInputGroupValue;
-      Object.entries(D).forEach(([o, e]) => {
-        t(o, e);
+  }, [$.data?.clientData, w]), ot = ut(
+    q
+  );
+  return c(() => {
+    if (L) {
+      const t = i.getState().setInputGroupValue;
+      Object.entries(L).forEach(([r, s]) => {
+        t(r, s);
       });
     }
-  }, [D]);
-  const T = m(
-    (t, o) => {
-      W((e) => {
-        const n = new Map(e);
-        return n.set(t, o), n;
-      });
-    },
-    []
-  ), V = m((t) => {
-    W((o) => {
-      const e = new Map(o);
-      return e.delete(t), e;
-    });
-  }, []), H = m(
-    (t) => _.get(t),
-    [_]
-  ), K = m(
-    (t, o) => {
-      j((e) => {
-        const n = new Map(e), s = n.get(t) || {}, c = typeof o == "function" ? o(s) : o;
-        return n.set(t, c), n;
-      });
-    },
-    []
-  ), J = m(
-    (t) => R.get(t),
-    [R]
-  ), ce = le.useMemo(
-    () => ({
-      registerContainer: T,
-      unregisterContainer: V,
-      getControl: H,
-      setControlProps: K,
-      getControlProps: J,
-      // Include controlPropsMap size in the value to trigger re-renders when it changes
-      _propsVersion: R.size
-    }),
-    [
-      T,
-      V,
-      H,
-      K,
-      J,
-      R.size
-    ]
-  );
-  return i(() => {
-    if (!d) return;
-    const t = M.current;
+  }, [L]), c(() => {
+    if (!l) return;
+    const t = U.current;
     if (!t) return;
-    const o = (s) => {
-      const c = s.contentRect;
-      d({ width: c.width, height: c.height });
-    }, e = new ResizeObserver((s) => {
-      for (const c of s)
-        o(c);
-    }), n = t.getBoundingClientRect();
-    return d({ width: n.width, height: n.height }), e.observe(t), () => {
-      e.disconnect();
+    const r = (v) => {
+      const a = v.contentRect;
+      l({ width: a.width, height: a.height });
+    }, s = new ResizeObserver((v) => {
+      for (const a of v)
+        r(a);
+    }), x = t.getBoundingClientRect();
+    return l({ width: x.width, height: x.height }), s.observe(t), () => {
+      s.disconnect();
     };
-  }, [d]), i(() => {
-    if (f)
-      return P(f === "local" ? "local" : "remote"), () => {
-        P(null);
+  }, [l]), c(() => {
+    if (d)
+      return A(d === "local" ? "local" : "remote"), () => {
+        A(null);
       };
-  }, [f]), l ? /* @__PURE__ */ a(
+  }, [d]), o ? /* @__PURE__ */ n(
     "div",
     {
-      ref: M,
+      ref: U,
       style: {
         width: "100%",
         height: "100%",
         position: "relative",
         overflow: "hidden"
       },
-      children: /* @__PURE__ */ a(
+      children: /* @__PURE__ */ n(
         "div",
         {
           ref: F,
@@ -292,34 +181,36 @@ const Ee = ({ to: r, children: l, style: v, ...A }) => {
             display: "flex",
             flexDirection: "column"
           },
-          children: /* @__PURE__ */ a(pe, { fallback: A || /* @__PURE__ */ a("div", {}), children: /* @__PURE__ */ a(fe.Provider, { value: { componentId: v }, children: /* @__PURE__ */ a(ue.Provider, { value: { onAction: q }, children: /* @__PURE__ */ a(
-            he.Provider,
+          children: /* @__PURE__ */ n(ct, { fallback: b || /* @__PURE__ */ n("div", {}), children: /* @__PURE__ */ n(
+            ft,
             {
-              value: ce,
-              children: /* @__PURE__ */ a(de.Provider, { value: se, children: /* @__PURE__ */ a(
-                me,
+              componentId: D,
+              onAction: Y,
+              repeatingContainerContextValue: ot,
+              bindingContextValue: et,
+              children: /* @__PURE__ */ n(
+                at,
                 {
-                  name: `${r}/draft/components/${l}`,
-                  fallback: A,
-                  reloadKey: ee,
-                  componentCode: Q,
-                  children: " "
+                  name: `${e}/draft/components/${o}`,
+                  fallback: b,
+                  reloadKey: J,
+                  componentCode: tt
                 }
-              ) })
+              )
             }
-          ) }) }) })
+          ) })
         }
       )
     }
-  ) : /* @__PURE__ */ a("div", { style: { padding: "30px" }, children: /* @__PURE__ */ a("div", { style: { overflowY: "auto" }, children: (U() ? (
+  ) : /* @__PURE__ */ n("div", { style: { padding: "30px" }, children: /* @__PURE__ */ n("div", { style: { overflowY: "auto" }, children: (B() ? (
     // Local mode: app.json provides pages under app.data.pages
-    (u?.data?.app?.data?.pages || []).map(
+    (g?.data?.app?.data?.pages || []).map(
       (t) => t?.id
     )
-  ) : u?.data?.app.pageIds || []).map((t) => /* @__PURE__ */ a(
-    Ee,
+  ) : g?.data?.app.pageIds || []).map((t) => /* @__PURE__ */ n(
+    ht,
     {
-      to: `/apps/${r}/pages/${t}?noRedirect=${X}`,
+      to: `/apps/${e}/pages/${t}?noRedirect=${G}`,
       style: {
         fontSize: 20,
         display: "block",
@@ -331,6 +222,6 @@ const Ee = ({ to: r, children: l, style: v, ...A }) => {
   )) }) });
 };
 export {
-  Me as default
+  Ut as default
 };
 //# sourceMappingURL=EncoreApp.js.map