@bravostudioai/react 0.1.0 → 0.1.2

package/dist/components/EncoreApp.js

@@ -1,61 +1,91 @@
-import { jsx as a } from "react/jsx-runtime";
-import K from "swr";
-import Z from "../lib/fetcher.js";
+import { jsx as i } from "react/jsx-runtime";
+import Y from "swr";
+import _ from "../lib/fetcher.js";
 import d from "../stores/useEncoreState.js";
-import st, { useRef as ct, useState as S, useCallback as h, useEffect as i, useMemo as at, Suspense as it } from "react";
-import { setLocalModeOverride as M, isLocalMode as P } from "../lib/localMode.js";
-import lt from "../contexts/EncoreBindingContext.js";
-import dt from "../contexts/EncoreComponentIdContext.js";
-import ut from "../contexts/EncoreActionContext.js";
-import ft from "../contexts/EncoreRepeatingContainerContext.js";
-import ht from "./DynamicComponent.js";
-import { Link as mt } from "react-router-dom";
-import { usePusherUpdates as pt } from "../hooks/usePusherUpdates.js";
-const yt = (n) => n.setApp, gt = (n) => n.setAppId, wt = (n) => n.setPageId, xt = (n) => n.assetsById, Ft = ({
+import lt, { useRef as q, useEffect as a, useState as O, useCallback as m, useMemo as at, Suspense as dt } from "react";
+import { setLocalModeOverride as B, isLocalMode as $ } from "../lib/localMode.js";
+import ut from "../contexts/EncoreBindingContext.js";
+import ft from "../contexts/EncoreComponentIdContext.js";
+import ht from "../contexts/EncoreActionContext.js";
+import mt from "../contexts/EncoreRepeatingContainerContext.js";
+import pt from "./DynamicComponent.js";
+import { useEncoreRouter as yt } from "../contexts/EncoreRouterContext.js";
+import { usePusherUpdates as gt } from "../hooks/usePusherUpdates.js";
+const wt = ({ to: n, children: l, style: b, ...w }) => {
+  const { navigate: u } = yt();
+  return /* @__PURE__ */ i(
+    "a",
+    {
+      href: n,
+      onClick: (p) => {
+        p.preventDefault(), u(n);
+      },
+      style: { cursor: "pointer", ...b },
+      ...w,
+      children: l
+    }
+  );
+}, vt = (n) => n.setApp, Et = (n) => n.setAppId, Rt = (n) => n.setPageId, xt = (n) => n.assetsById, Dt = ({
   appId: n,
   pageId: l,
-  componentId: G,
-  fallback: C,
-  onSizeChange: y,
-  onAction: Y,
-  data: g,
-  source: u,
-  repeatingContainerControls: m,
-  inputGroups: R,
-  baseURL: v,
-  appDefinition: w,
-  pageDefinition: A,
-  componentCode: _
+  componentId: b,
+  fallback: w,
+  onSizeChange: u,
+  onContentSizeChange: p,
+  onAction: J,
+  data: v,
+  source: f,
+  repeatingContainerControls: y,
+  inputGroups: A,
+  baseURL: M,
+  appDefinition: E,
+  pageDefinition: P,
+  componentCode: Q
 }) => {
-  console.log("Render: EncoreApp"), console.log("🔥 ENCORE-LIB SOURCE CODE IS ACTIVE 🔥"), console.log("✨ ENCORE-LIB UPDATED - TEST MESSAGE ✨"), v && d.getState().baseURL !== v && d.getState().setBaseURL(v), u && M(u === "local" ? "local" : "remote");
-  const q = !1, B = d(yt), O = d(gt), $ = d(wt), p = d(xt), L = ct(null), [J, Q] = S(0), X = h(() => {
-    Q((e) => typeof e == "number" ? e + 1 : Date.now());
+  console.log("Render: EncoreApp"), console.log("🔥 ENCORE-LIB SOURCE CODE IS ACTIVE 🔥"), console.log("✨ ENCORE-LIB UPDATED - TEST MESSAGE ✨"), M && d.getState().baseURL !== M && d.getState().setBaseURL(M), f && B(f === "local" ? "local" : "remote");
+  const X = !1, C = d(vt), L = d(Et), I = d(Rt), g = d(xt), F = q(null), k = q(null);
+  a(() => {
+    if (!p) return;
+    const t = k.current;
+    if (!t) return;
+    const r = () => {
+      p({
+        width: t.scrollWidth,
+        height: t.scrollHeight
+      });
+    }, e = new ResizeObserver(() => {
+      r();
+    });
+    return r(), e.observe(t), () => e.disconnect();
+  }, [p]);
+  const [tt, et] = O(0), rt = m(() => {
+    et((t) => typeof t == "number" ? t + 1 : Date.now());
   }, []);
-  pt({
+  gt({
     appId: n,
     pageId: l || void 0,
-    enabled: !P() && !w,
-    onUpdate: X
+    enabled: !$() && !E,
+    onUpdate: rt
   });
-  const I = u === "local" || P(), F = w ? null : n && `/devices/apps/${n}${I ? "?useLocal=1" : ""}`, tt = K(F, Z, {
-    suspense: !!F
+  const W = f === "local" || $(), D = E ? null : n && `/devices/apps/${n}${W ? "?useLocal=1" : ""}`, ot = Y(D, _, {
+    suspense: !!D
     // Only use suspense if we are fetching
-  }), f = w ? { data: w } : tt;
-  i(() => {
-    B(f.data);
-  }, [f.data, B]), i(() => {
-    const e = f?.data?.app?.fonts ?? [];
-    !e || e.length === 0 || typeof window > "u" || !("FontFace" in window) || e.forEach((o) => {
+  }), h = E ? { data: E } : ot;
+  a(() => {
+    C(h.data);
+  }, [h.data, C]), a(() => {
+    const t = h?.data?.app?.fonts ?? [];
+    !t || t.length === 0 || typeof window > "u" || !("FontFace" in window) || t.forEach((r) => {
       try {
-        const t = o?.fontName?.family, r = o?.url, s = o?.fontName?.postScriptName;
-        if (!t || !r) return;
+        const e = r?.fontName?.family, o = r?.url, s = r?.fontName?.postScriptName;
+        if (!e || !o) return;
         let c;
         if (s) {
-          const E = s.match(
+          const x = s.match(
             /(?:^|-)(Thin|ExtraLight|Light|Regular|Medium|SemiBold|Bold|ExtraBold|Black)(?:-|$)/i
           );
-          if (E) {
-            const nt = E[1].toLowerCase();
+          if (x) {
+            const it = x[1].toLowerCase();
             c = {
               thin: 100,
               extralight: 200,
@@ -66,194 +96,199 @@ const yt = (n) => n.setApp, gt = (n) => n.setAppId, wt = (n) => n.setPageId, xt
               bold: 700,
               extrabold: 800,
               black: 900
-            }[nt] || 400;
+            }[it] || 400;
           }
         }
-        (c !== void 0 ? new FontFace(t, `url(${r})`, { weight: c.toString() }) : new FontFace(t, `url(${r})`)).load().then((E) => {
-          document.fonts.add(E);
+        (c !== void 0 ? new FontFace(e, `url(${o})`, { weight: c.toString() }) : new FontFace(e, `url(${o})`)).load().then((x) => {
+          document.fonts.add(x);
         }).catch(() => {
         });
       } catch {
       }
     });
-  }, [f?.data]), i(() => {
-    O(n);
-  }, [n, O]), i(() => {
-    l && $(l);
-  }, [l, $]), i(() => {
-    Object.keys(p).length !== 0 && (async () => await Promise.allSettled(
-      Object.keys(p).map((e) => p[e].url ? new Promise((o) => {
-        const t = new Image();
-        t.onload = o, t.onerror = o, t.src = p[e].url;
+  }, [h?.data]), a(() => {
+    L(n);
+  }, [n, L]), a(() => {
+    l && I(l);
+  }, [l, I]), a(() => {
+    Object.keys(g).length !== 0 && (async () => await Promise.allSettled(
+      Object.keys(g).map((t) => g[t].url ? new Promise((r) => {
+        const e = new Image();
+        e.onload = r, e.onerror = r, e.src = g[t].url;
       }) : Promise.resolve())
     ))();
-  }, [p]);
-  const k = A ? null : n && l && `/devices/apps/${n}/node/${l}${I ? "?useLocal=1" : ""}`, et = K(k, Z, { suspense: !!k }), N = A ? { data: A } : et, ot = at(() => {
-    let e = N.data?.clientData;
-    const o = (t) => {
-      if (!(!t || typeof t != "object")) {
-        if (t.children && Array.isArray(t.children) && t.children.length > 1) {
-          let r = 0, s = 0;
-          t.children.forEach((b) => {
-            b.style?.width && (r += b.style.width, s++);
-          }), (Math.abs(r - 100) < 1 || Math.abs(r - 375) < 5) && s >= 2 && (t.style || (t.style = {}), t.style.layout || (t.style.layout = {}), t.style.layout.mode || (console.log(
-            `[PATCH] Forcing HORIZONTAL layout for node ${t.id} (${s} children, widths sum: ${r})`
-          ), t.style.layout.mode = "HORIZONTAL", t.style.layout.primaryAxisAlignItems = "flex-start", t.style.layout.counterAxisAlignItems = "flex-start"));
+  }, [g]);
+  const N = P ? null : n && l && `/devices/apps/${n}/node/${l}${W ? "?useLocal=1" : ""}`, nt = Y(N, _, { suspense: !!N }), U = P ? { data: P } : nt, st = at(() => {
+    let t = U.data?.clientData;
+    const r = (e) => {
+      if (!(!e || typeof e != "object")) {
+        if (e.children && Array.isArray(e.children) && e.children.length > 1) {
+          let o = 0, s = 0;
+          e.children.forEach((S) => {
+            S.style?.width && (o += S.style.width, s++);
+          }), (Math.abs(o - 100) < 1 || Math.abs(o - 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: ${o})`
+          ), e.style.layout.mode = "HORIZONTAL", e.style.layout.primaryAxisAlignItems = "flex-start", e.style.layout.counterAxisAlignItems = "flex-start"));
         }
-        t.children && (Array.isArray(t.children) ? t.children.forEach(o) : o(t.children));
+        e.children && (Array.isArray(e.children) ? e.children.forEach(r) : r(e.children));
       }
     };
-    return e && o(e), {
+    return t && r(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: g,
+      textOverridesById: v,
       // Support for encore:data:array tags - provide array data by component ID
-      arrayDataById: g,
+      arrayDataById: v,
       // Support for standalone component data binding (encore:data tags at root level)
-      rootData: g
+      rootData: v
     };
-  }, [N.data?.clientData, g]), [U, j] = S(/* @__PURE__ */ new Map()), [x, D] = S(/* @__PURE__ */ new Map());
-  i(() => {
-    m && D((e) => {
-      let o = !1;
-      if (e.size !== Object.keys(m).length)
-        o = !0;
+  }, [U.data?.clientData, v]), [j, T] = O(/* @__PURE__ */ new Map()), [R, H] = O(/* @__PURE__ */ new Map());
+  a(() => {
+    y && H((t) => {
+      let r = !1;
+      if (t.size !== Object.keys(y).length)
+        r = !0;
       else
-        for (const [r, s] of Object.entries(
-          m
+        for (const [o, s] of Object.entries(
+          y
         )) {
-          const c = e.get(r);
+          const c = t.get(o);
           if (!c) {
-            o = !0;
+            r = !0;
             break;
           }
           if (c.currentIndex !== s.currentIndex || c.onIndexChange !== s.onIndexChange) {
-            o = !0;
+            r = !0;
             break;
           }
         }
-      if (!o) return e;
-      const t = /* @__PURE__ */ new Map();
-      return Object.entries(m).forEach(([r, s]) => {
-        t.set(r, s);
-      }), t;
+      if (!r) return t;
+      const e = /* @__PURE__ */ new Map();
+      return Object.entries(y).forEach(([o, s]) => {
+        e.set(o, s);
+      }), e;
     });
-  }, [m]), i(() => {
-    if (R) {
-      const e = d.getState().setInputGroupValue;
-      Object.entries(R).forEach(([o, t]) => {
-        e(o, t);
+  }, [y]), a(() => {
+    if (A) {
+      const t = d.getState().setInputGroupValue;
+      Object.entries(A).forEach(([r, e]) => {
+        t(r, e);
       });
     }
-  }, [R]);
-  const T = h(
-    (e, o) => {
-      j((t) => {
-        const r = new Map(t);
-        return r.set(e, o), r;
+  }, [A]);
+  const V = m(
+    (t, r) => {
+      T((e) => {
+        const o = new Map(e);
+        return o.set(t, r), o;
       });
     },
     []
-  ), W = h((e) => {
-    j((o) => {
-      const t = new Map(o);
-      return t.delete(e), t;
+  ), K = m((t) => {
+    T((r) => {
+      const e = new Map(r);
+      return e.delete(t), e;
     });
-  }, []), V = h(
-    (e) => U.get(e),
-    [U]
-  ), H = h(
-    (e, o) => {
-      D((t) => {
-        const r = new Map(t), s = r.get(e) || {}, c = typeof o == "function" ? o(s) : o;
-        return r.set(e, c), r;
+  }, []), Z = m(
+    (t) => j.get(t),
+    [j]
+  ), z = m(
+    (t, r) => {
+      H((e) => {
+        const o = new Map(e), s = o.get(t) || {}, c = typeof r == "function" ? r(s) : r;
+        return o.set(t, c), o;
       });
     },
     []
-  ), z = h(
-    (e) => x.get(e),
-    [x]
-  ), rt = st.useMemo(
+  ), G = m(
+    (t) => R.get(t),
+    [R]
+  ), ct = lt.useMemo(
     () => ({
-      registerContainer: T,
-      unregisterContainer: W,
-      getControl: V,
-      setControlProps: H,
-      getControlProps: z,
+      registerContainer: V,
+      unregisterContainer: K,
+      getControl: Z,
+      setControlProps: z,
+      getControlProps: G,
       // Include controlPropsMap size in the value to trigger re-renders when it changes
-      _propsVersion: x.size
+      _propsVersion: R.size
     }),
     [
-      T,
-      W,
       V,
-      H,
+      K,
+      Z,
       z,
-      x.size
+      G,
+      R.size
     ]
   );
-  return i(() => {
-    if (!y) return;
-    const e = L.current;
-    if (!e) return;
-    const o = (s) => {
+  return a(() => {
+    if (!u) return;
+    const t = F.current;
+    if (!t) return;
+    const r = (s) => {
       const c = s.contentRect;
-      y({ width: c.width, height: c.height });
-    }, t = new ResizeObserver((s) => {
+      u({ width: c.width, height: c.height });
+    }, e = new ResizeObserver((s) => {
       for (const c of s)
-        o(c);
-    }), r = e.getBoundingClientRect();
-    return y({ width: r.width, height: r.height }), t.observe(e), () => {
-      t.disconnect();
+        r(c);
+    }), o = t.getBoundingClientRect();
+    return u({ width: o.width, height: o.height }), e.observe(t), () => {
+      e.disconnect();
     };
-  }, [y]), i(() => {
-    if (u)
-      return M(u === "local" ? "local" : "remote"), () => {
-        M(null);
+  }, [u]), a(() => {
+    if (f)
+      return B(f === "local" ? "local" : "remote"), () => {
+        B(null);
       };
-  }, [u]), l ? /* @__PURE__ */ a(
+  }, [f]), l ? /* @__PURE__ */ i(
     "div",
     {
-      ref: L,
-      style: { width: "100%", height: "100%", position: "relative" },
-      children: /* @__PURE__ */ a(it, { fallback: C || /* @__PURE__ */ a("div", {}), children: /* @__PURE__ */ a(dt.Provider, { value: { componentId: G }, children: /* @__PURE__ */ a(ut.Provider, { value: { onAction: Y }, children: /* @__PURE__ */ a(
-        ft.Provider,
+      ref: F,
+      style: {
+        width: "100%",
+        height: "100%",
+        position: "relative",
+        overflow: "hidden"
+      },
+      children: /* @__PURE__ */ i("div", { ref: k, style: { width: "100%", minHeight: "100%" }, children: /* @__PURE__ */ i(dt, { fallback: w || /* @__PURE__ */ i("div", {}), children: /* @__PURE__ */ i(ft.Provider, { value: { componentId: b }, children: /* @__PURE__ */ i(ht.Provider, { value: { onAction: J }, children: /* @__PURE__ */ i(
+        mt.Provider,
         {
-          value: rt,
-          children: /* @__PURE__ */ a(lt.Provider, { value: ot, children: /* @__PURE__ */ a(
-            ht,
+          value: ct,
+          children: /* @__PURE__ */ i(ut.Provider, { value: st, children: /* @__PURE__ */ i(
+            pt,
             {
               name: `${n}/draft/components/${l}`,
-              fallback: C,
-              reloadKey: J,
-              componentCode: _,
+              fallback: w,
+              reloadKey: tt,
+              componentCode: Q,
               children: " "
             }
           ) })
         }
-      ) }) }) })
+      ) }) }) }) })
     }
-  ) : /* @__PURE__ */ a("div", { style: { padding: "30px" }, children: /* @__PURE__ */ a("div", { style: { overflowY: "auto" }, children: (P() ? (
+  ) : /* @__PURE__ */ i("div", { style: { padding: "30px" }, children: /* @__PURE__ */ i("div", { style: { overflowY: "auto" }, children: ($() ? (
     // Local mode: app.json provides pages under app.data.pages
-    (f?.data?.app?.data?.pages || []).map(
-      (e) => e?.id
+    (h?.data?.app?.data?.pages || []).map(
+      (t) => t?.id
     )
-  ) : f?.data?.app.pageIds || []).map((e) => /* @__PURE__ */ a(
-    mt,
+  ) : h?.data?.app.pageIds || []).map((t) => /* @__PURE__ */ i(
+    wt,
     {
-      to: `/apps/${n}/pages/${e}?noRedirect=${q}`,
+      to: `/apps/${n}/pages/${t}?noRedirect=${X}`,
       style: {
         fontSize: 20,
         display: "block",
         marginBottom: "10px"
       },
-      children: e
+      children: t
     },
-    e
+    t
   )) }) });
 };
 export {
-  Ft as default
+  Dt as default
 };
 //# sourceMappingURL=EncoreApp.js.map