@developer_tribe/react-builder 1.2.2 → 1.2.3

package/src/build-components/other.tsx

@@ -9,7 +9,7 @@ export function other(type: string, node: Node): React.ReactNode {
   if (type === 'CrashComponent') {
     const details =
       node && typeof node === 'object' && !Array.isArray(node)
-        ? (node as any).attributes
+        ? (node as { attributes?: unknown }).attributes
         : undefined;
     throw new Error(
       `CrashComponent: intentional crash for testing${

package/src/components/BuilderProvider.tsx

@@ -1,6 +1,9 @@
 import React, { createContext, useContext, useMemo } from 'react';
 import type { Product } from '../paywall/types/paywall-types';
 import type { PaywallBenefits } from '../paywall/types/benefits';
+import type { AppConfig } from '../types/PreviewConfig';
+import type { Fonts } from '../types/Fonts';
+import type { ProjectColors } from '../types/Project';
 import { RenderErrorBoundary } from './RenderErrorBoundary';
 
 // NOTE: We keep this context intentionally tiny.
@@ -15,6 +18,20 @@ export type BuilderProviderParams = {
   benefits: PaywallBenefits;
   onPaywallClose?: () => void;
   onPaywallSubscribe?: (product?: Product) => void | boolean | Promise<boolean>;
+  /**
+   * Optional runtime config + styling inputs.
+   * These are intentionally passed down via BuilderProvider so `build-components`
+   * never need to touch `useRenderStore`.
+   */
+  appConfig?: AppConfig;
+  projectColors?: ProjectColors;
+  fonts?: Fonts;
+  appFont?: string | undefined;
+  /**
+   * Optional selection info (used by builder UI; ignored by host runtime).
+   */
+  previewMode?: boolean;
+  selectedKey?: string;
 };
 
 type BuilderProviderProps = {
@@ -42,12 +59,33 @@ export function BuilderProvider({ params, children }: BuilderProviderProps) {
         typeof params?.onPaywallSubscribe === 'function'
           ? params.onPaywallSubscribe
           : undefined,
+      appConfig:
+        params?.appConfig && typeof params.appConfig === 'object'
+          ? (params.appConfig as AppConfig)
+          : undefined,
+      projectColors:
+        params?.projectColors && typeof params.projectColors === 'object'
+          ? (params.projectColors as ProjectColors)
+          : undefined,
+      fonts: Array.isArray(params?.fonts) ? (params.fonts as Fonts) : undefined,
+      appFont: params?.appFont,
+      previewMode: !!params?.previewMode,
+      selectedKey:
+        typeof params?.selectedKey === 'string'
+          ? params.selectedKey
+          : undefined,
     }),
     [
       params?.benefits,
       params?.products,
       params?.onPaywallClose,
       params?.onPaywallSubscribe,
+      params?.appConfig,
+      params?.projectColors,
+      params?.fonts,
+      params?.appFont,
+      params?.previewMode,
+      params?.selectedKey,
     ],
   );
 

package/src/hooks/useExtractTextStyle.ts

@@ -1,30 +1,26 @@
 import { useMemo } from 'react';
 import type { NodeData } from '../types/Node';
 import type { TextPropsGenerated } from '../build-components/Text/TextProps.generated';
-import type { AppConfig } from '../types/PreviewConfig';
-import type { ProjectColors } from '../types/Project';
-import { useRenderStore } from '../store';
+import { defaultAppConfig } from '../types/PreviewConfig';
+import { useBuilderParams } from '../components/BuilderProvider';
 import { extractTextStyle } from '../utils/extractTextStyle';
 
-export type UseExtractTextStyleOptions = {
-  appConfig?: AppConfig;
-  projectColors?: ProjectColors;
-};
-
 export function useExtractTextStyle<T extends TextPropsGenerated['attributes']>(
   node: NodeData<T>,
-  options: UseExtractTextStyleOptions = {},
 ) {
-  const storeAppConfig = useRenderStore((s) => s.appConfig);
-  const storeProjectColors = useRenderStore((s) => s.projectColors);
-  const fonts = useRenderStore((s) => s.fonts);
+  const {
+    appConfig: builderAppConfig,
+    projectColors: builderProjectColors,
+    fonts: builderFonts,
+  } = useBuilderParams();
 
-  const appConfig = options.appConfig ?? storeAppConfig;
-  const projectColors = options.projectColors ?? storeProjectColors;
+  const appConfig = builderAppConfig ?? defaultAppConfig;
+  const projectColors = builderProjectColors;
+  const fonts = builderFonts;
 
   return useMemo(
-    () => extractTextStyle(node, { appConfig, projectColors }),
-    // fonts is intentionally included: extractTextStyle resolves weights via store-provided font definitions.
+    () => extractTextStyle(node, { appConfig, projectColors, fonts }),
+    // fonts is intentionally included: extractTextStyle resolves weights via font definitions.
     [node, appConfig, projectColors, fonts],
   );
 }

package/src/hooks/useExtractViewStyle.ts

@@ -1,28 +1,19 @@
 import { useMemo } from 'react';
 import type { NodeData } from '../types/Node';
 import type { ViewPropsGenerated } from '../build-components/View/ViewProps.generated';
-import type { AppConfig } from '../types/PreviewConfig';
-import type { ProjectColors } from '../types/Project';
-import { useRenderStore } from '../store';
+import { useBuilderParams } from '../components/BuilderProvider';
 import { extractViewStyle } from '../utils/extractViewStyle';
-
-export type UseExtractViewStyleOptions = {
-  appConfig?: AppConfig;
-  projectColors?: ProjectColors;
-};
+import { defaultAppConfig } from '../types/PreviewConfig';
 
 export function useExtractViewStyle<T extends ViewPropsGenerated['attributes']>(
   node: NodeData<T>,
-  options: UseExtractViewStyleOptions = {},
 ) {
-  const storeAppConfig = useRenderStore((s) => s.appConfig);
-  const storeProjectColors = useRenderStore((s) => s.projectColors);
-
-  const appConfig = options.appConfig ?? storeAppConfig;
-  const projectColors = options.projectColors ?? storeProjectColors;
+  const { appConfig, projectColors: builderProjectColors } = useBuilderParams();
+  const theme = appConfig?.theme ?? defaultAppConfig.theme;
+  const projectColors = builderProjectColors;
 
   return useMemo(
-    () => extractViewStyle(node, { appConfig, projectColors }),
-    [node, appConfig, projectColors],
+    () => extractViewStyle(node, { theme, projectColors }),
+    [node, theme, projectColors],
   );
 }

package/src/hooks/useLocalize.ts

@@ -1,15 +1,16 @@
 import { useCallback } from 'react';
-import { useRenderStore } from '../store';
+import type { AppConfig } from '../types/PreviewConfig';
+import { defaultAppConfig } from '../types/PreviewConfig';
+import { useBuilderParams } from '../components/BuilderProvider';
 import { useLocalizationParams } from './useLocalizationParams';
 import { replaceLocalizationParams } from '../utils/replaceLocalizationParams';
 
 export type LocalizeFn = (keyOrText: string) => string;
 
-export function useLocalize(): LocalizeFn {
-  const { defaultLanguage, localication } = useRenderStore((s) => ({
-    defaultLanguage: s.appConfig?.defaultLanguage,
-    localication: s.appConfig?.localication,
-  }));
+export function useLocalize(options?: { appConfig?: AppConfig }): LocalizeFn {
+  const { appConfig: builderAppConfig } = useBuilderParams();
+  const appConfig = options?.appConfig ?? builderAppConfig ?? defaultAppConfig;
+  const { defaultLanguage, localication } = appConfig;
   const params = useLocalizationParams();
 
   return useCallback(

package/src/hooks/useSafeAreaViewStyle.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { useRenderStore } from '../store';
+import type { Device } from '../types/Device';
 
 function addInset(
   base: React.CSSProperties['paddingTop'],
@@ -28,19 +28,18 @@ function subtractInset(
 export function useSafeAreaViewStyle(
   baseStyle: React.CSSProperties,
   enabled: boolean,
+  device?: Device,
 ) {
-  const device = useRenderStore((s) => s.device);
-
   return useMemo(() => {
     if (!enabled) return baseStyle;
 
-    const [insetTop, insetRight, insetBottom, insetLeft] = device.insets ?? [
+    const [insetTop, insetRight, insetBottom, insetLeft] = device?.insets ?? [
       0, 0, 0, 0,
     ];
 
     // Match DeviceMockFrame fallbacks: status bar overlays content, so we treat it as top safe area.
     const top =
-      insetTop || (device.platform === 'ios' ? 20 : device.platform ? 24 : 0);
+      insetTop || (device?.platform === 'ios' ? 20 : device?.platform ? 24 : 0);
 
     // Bottom safe area is handled visually by the mock navigation bar area, which takes layout space.
     // So we intentionally don't add bottom padding here to avoid double-spacing.

package/src/index.ts

@@ -1,5 +1,13 @@
 import './styles/index.scss';
 import AttributesEditor from './AttributesEditor';
+
+// Example app (`example/`) uses these exports today:
+// - `ProjectPage` (from `src/pages/ProjectPage.tsx`)
+// - `getSamples` (from `src/assets/samples/getSamples.ts`)
+// - types from `src/types/*` and `src/types/PreviewConfig.ts` (Project/ProjectColors/AppConfig/defaultAppConfig)
+//
+// React Native: a RN-safe entrypoint exists at `react-builder/native` (`src/index.native.ts`).
+// More RN-focused exports/integration helpers are coming.
 // NOTE: In React Native, `products` should be sourced from an IAP wrapper (e.g. `react-native-iap`)
 // and passed into `BuilderProvider` from the host app.
 export {
@@ -27,11 +35,6 @@ export {
   analyseNode,
 } from './utils/analyseNode';
 export { getSamples } from './assets/samples/getSamples';
-export { getBasicSamples } from './assets/samples/getSamples';
-export { getOnboardSamples } from './assets/samples/getSamples';
-export { RenderPage } from './RenderPage';
-export { DeviceMockFrame } from './DeviceMockFrame';
-export { novaToJson } from './utils/novaToJson';
 export type { AppConfig, Localication } from './types/PreviewConfig';
 export { defaultAppConfig } from './types/PreviewConfig';
 export { getDevices, getDefaultDevice } from './utils/getDevices';
@@ -52,7 +55,6 @@ export {
 } from './utils/getImage';
 export { ProjectPage } from './pages/ProjectPage';
 export type { ProjectPageProps } from './pages/ProjectPage';
-export { copyNode } from './utils/copyNode';
 export { logger } from './utils/logger';
 export type { LogLevel } from './types/Project';
 export type {
@@ -61,7 +63,6 @@ export type {
   Product as PaywallProduct,
   PaywallModel,
 } from './paywall/types/paywall-types';
-
 // Paywall hooks
 export {
   usePaywallCounter,

package/src/pages/ProjectDebug.tsx

@@ -1,6 +1,5 @@
 import { type ReactNode, useMemo, useState } from 'react';
 import { RenderPage } from '../RenderPage';
-import { BuilderProvider } from '../components/BuilderProvider';
 import { RenderErrorBoundary } from '../components/RenderErrorBoundary';
 import type { Node } from '../types/Node';
 import type { Product } from '../paywall/types/paywall-types';
@@ -267,20 +266,22 @@ export function ProjectDebug({
           ['--rb-canvas-bg' as any]: canvasBg ?? 'none',
         }}
       >
-        <BuilderProvider params={{ products, benefits }}>
-          <RenderErrorBoundary
-            subtitle="caught by ProjectDebug preview"
-            onError={(e, componentStack) =>
-              setPreviewError({
-                message: e?.message ?? String(e),
-                stack: e?.stack,
-                componentStack,
-              })
-            }
-          >
-            <RenderPage data={previewData} name={name} />
-          </RenderErrorBoundary>
-        </BuilderProvider>
+        <RenderErrorBoundary
+          subtitle="caught by ProjectDebug preview"
+          onError={(e, componentStack) =>
+            setPreviewError({
+              message: e?.message ?? String(e),
+              stack: e?.stack,
+              componentStack,
+            })
+          }
+        >
+          <RenderPage
+            data={previewData}
+            name={name}
+            params={{ products, benefits }}
+          />
+        </RenderErrorBoundary>
       </section>
 
       <section className="rb-project-debug__error" aria-label="Errors">

package/src/pages/ProjectPage.tsx

@@ -5,7 +5,6 @@ import { ToastContainer, toast } from 'react-toastify';
 import { RenderPage } from '../RenderPage';
 import { EditorHeader } from '../components/EditorHeader';
 import { AttributesEditorPanel } from '../components/AttributesEditorPanel';
-import { BuilderProvider } from '../components/BuilderProvider';
 import { BuilderPanel } from './tabs/BuilderPanel';
 import { BottomBar } from '../components/BottomBar';
 import { AppConfig, defaultAppConfig } from '../types/PreviewConfig';
@@ -79,6 +78,7 @@ export function ProjectPage({
   const resolvedProjectColors = projectColors ?? project.projectColors;
   const isEmptyProjectData =
     isNodeNullOrUndefined(project.data) || isEmptyObject(project.data);
+  // useRenderStore will be removed
   const {
     current,
     setCurrent,
@@ -86,6 +86,7 @@ export function ProjectPage({
     setProjectName,
     products,
     benefits,
+    previewMode,
   } = useRenderStore((s) => ({
     current: s.current,
     setCurrent: s.setCurrent,
@@ -93,6 +94,7 @@ export function ProjectPage({
     setProjectName: s.setProjectName,
     products: s.products,
     benefits: s.benefits,
+    previewMode: s.previewMode,
   }));
   const [editorData, setEditorData] = useState<Node>(() => {
     if (!isEmptyProjectData) return null;
@@ -462,17 +464,27 @@ export function ProjectPage({
               )}
               {/* NOTE: In React Native, `products` should come from an IAP wrapper (e.g. `react-native-iap`). */}
               {!showLoading && editorData && (
-                <BuilderProvider
+                <RenderPage
+                  data={editorData}
+                  name={resolvedName}
                   params={{
                     products,
                     benefits:
                       benefits && typeof benefits === 'object'
                         ? (benefits as PaywallBenefits)
                         : {},
+                    // Theme/colors/fonts must be passed via BuilderProvider params so build-components never touch useRenderStore.
+                    appConfig,
+                    projectColors: resolvedProjectColors,
+                    fonts: typography.fonts,
+                    appFont: resolvedAppFont,
+                    previewMode,
+                    selectedKey:
+                      current && typeof current === 'object' && 'key' in current
+                        ? ((current as any).key as string | undefined)
+                        : undefined,
                   }}
-                >
-                  <RenderPage data={editorData} name={resolvedName} />
-                </BuilderProvider>
+                />
               )}
             </div>
             {/* BOTOM BAR */}

package/src/types/Node.ts

@@ -10,6 +10,7 @@ export type Node<T = NodeDefaultAttribute> =
 
 export interface NodeData<T = Record<string, unknown>> {
   type: string;
+  sourceType?: string;
   children: Node<Record<string, unknown>>;
   attributes?: T;
   key?: string;

package/src/utils/extractTextStyle/extractTextStyle.ts

@@ -3,11 +3,11 @@ import type { TextPropsGenerated } from '../../build-components/Text/TextProps.g
 import type { AppConfig } from '../../types/PreviewConfig';
 import { defaultAppConfig } from '../../types/PreviewConfig';
 import type { ProjectColors } from '../../types/Project';
+import type { Fonts } from '../../types/Fonts';
 import { fs, parseSize } from '../../size-matters';
 import { parseColor } from '../parseColor';
 import { extractViewStyle } from '../extractViewStyle';
 import { normalizeFontWeight } from '../fontWeight';
-import { useRenderStore } from '../../store';
 import {
   findFontDefinition,
   loadFontFamily,
@@ -26,21 +26,29 @@ function weightToNumericKey(weight: unknown): string | undefined {
   return normalized;
 }
 
-function ensureFontWeightLoaded(familyName: string, weightKey?: string) {
+function ensureFontWeightLoaded(
+  familyName: string,
+  weightKey: string | undefined,
+  options: {
+    fonts?: Fonts;
+    onFontLoaded?: (fontFamily: string) => void;
+    onError?: (error: string) => void;
+  },
+) {
   if (typeof document === 'undefined') return;
   const name = familyName.trim();
   if (!name) return;
   const weight = weightKey?.trim() || '400';
   const cacheKey = `${name}@${weight}`;
   if (inFlightFontLoads.has(cacheKey)) return;
+  if (!options.fonts) return;
 
   fontsDebug.info('extractTextStyle: ensureFontWeightLoaded', {
     familyName: name,
     weight,
   });
 
-  const { fonts, markFontLoaded, addError } = useRenderStore.getState();
-  const promise = loadFontFamily(fonts, name, {
+  const promise = loadFontFamily(options.fonts, name, {
     preferWeight: weight,
     forceFetch: true,
   })
@@ -49,14 +57,14 @@ function ensureFontWeightLoaded(familyName: string, weightKey?: string) {
         familyName: name,
         weight,
       });
-      markFontLoaded(name);
+      options.onFontLoaded?.(name);
     })
     .catch((e) => {
       fontsDebug.compactError('extractTextStyle: font weight load failed', e, {
         familyName: name,
         weight,
       });
-      addError(
+      options.onError?.(
         `Failed to load font "${name}" (weight ${weight}): ${
           e instanceof Error ? e.message : String(e)
         }`,
@@ -72,6 +80,9 @@ function ensureFontWeightLoaded(familyName: string, weightKey?: string) {
 export type ExtractTextStyleOptions = {
   appConfig?: AppConfig;
   projectColors?: ProjectColors;
+  fonts?: Fonts;
+  onFontLoaded?: (fontFamily: string) => void;
+  onError?: (error: string) => void;
 };
 
 export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
@@ -119,8 +130,7 @@ export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
       : undefined;
   if (normalizedFontFamily) {
     // Resolve "closest available" weight for this family (e.g. if requested 100 but family starts at 300).
-    const { fonts } = useRenderStore.getState();
-    const def = findFontDefinition(fonts, normalizedFontFamily);
+    const def = findFontDefinition(options.fonts ?? [], normalizedFontFamily);
     const resolvedWeightKey =
       def?.family && typeof def.family === 'object'
         ? resolveClosestFontWeightKey(
@@ -137,7 +147,12 @@ export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
 
     style.fontFamily = `"${normalizedFontFamily}"`;
     // Ensure the correct weight file is available (lazy-load per weight).
-    ensureFontWeightLoaded(normalizedFontFamily, resolvedWeightKey);
+    //Optimzation trade off by readability: we only attempt font loading when a fonts registry is provided.
+    ensureFontWeightLoaded(normalizedFontFamily, resolvedWeightKey, {
+      fonts: options.fonts,
+      onFontLoaded: options.onFontLoaded,
+      onError: options.onError,
+    });
     // Important: set fontWeight to the actual weight we loaded so CSS requests match loaded face.
     if (resolvedWeightKey) {
       style.fontWeight = resolvedWeightKey;
@@ -147,14 +162,18 @@ export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
   // If no fontFamily is set, keep previous behavior.
   if (!normalizedFontFamily && normalizedFontWeight)
     style.fontWeight = normalizedFontWeight;
-  const resolvedTextColor = parseColor(get('color') as any, {
+  const resolvedTextColor = parseColor(get('color'), {
     projectColors: options.projectColors,
-    appConfig: resolvedAppConfig,
+    theme,
   });
   style.color = resolvedTextColor ?? fallbackColor;
-  const textAlign = get('textAlign') as any;
+  const textAlign = get('textAlign');
   if (textAlign)
     style.textAlign = textAlign as React.CSSProperties['textAlign'];
 
-  return { ...extractViewStyle(node, options), ...style };
+  const viewStyle = extractViewStyle(node, {
+    projectColors: options.projectColors,
+    theme,
+  });
+  return { ...viewStyle, ...style };
 }

package/src/utils/extractViewStyle/extractViewStyle.ts

@@ -1,13 +1,12 @@
 import { ViewPropsGenerated } from '../../build-components/View/ViewProps.generated';
 import type { NodeData } from '../../types/Node';
-import type { AppConfig } from '../../types/PreviewConfig';
 import type { ProjectColors } from '../../types/Project';
 import { parseSize } from '../../size-matters';
 import { parseColor } from '../parseColor';
 
 export type ExtractViewStyleOptions = {
-  appConfig?: AppConfig;
   projectColors?: ProjectColors;
+  theme?: string;
 };
 
 export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
@@ -120,7 +119,7 @@ export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
     style.backgroundColor =
       parseColor(backgroundColor, {
         projectColors: options.projectColors,
-        appConfig: options.appConfig,
+        theme: options.theme,
       }) ?? backgroundColor;
   }
   setParsedSize('borderRadius', get('borderRadius') as any);

package/src/utils/parseColor.ts

@@ -1,4 +1,3 @@
-import type { AppConfig } from '../types/PreviewConfig';
 import type { ProjectColors } from '../types/Project';
 
 const STATIC_PREFIX = 'STATIC_COLORS.';
@@ -6,7 +5,7 @@ const THEME_PREFIX = 'THEME_COLORS.';
 
 export type ParseColorOptions = {
   projectColors?: ProjectColors;
-  appConfig?: AppConfig;
+  theme?: string;
 };
 
 export function parseColor(value?: string, options: ParseColorOptions = {}) {
@@ -14,7 +13,7 @@ export function parseColor(value?: string, options: ParseColorOptions = {}) {
   const trimmed = value.trim();
   if (!trimmed) return undefined;
 
-  const { projectColors, appConfig } = options;
+  const { projectColors, theme } = options;
   if (!projectColors) return trimmed;
 
   if (trimmed.startsWith(STATIC_PREFIX)) {
@@ -29,8 +28,8 @@ export function parseColor(value?: string, options: ParseColorOptions = {}) {
     const token = trimmed.slice(THEME_PREFIX.length);
     if (!token) return trimmed;
 
-    const theme = appConfig?.theme ?? 'light';
-    const themeTokens = projectColors.THEME_COLORS?.[theme];
+    const resolvedTheme = theme ?? 'light';
+    const themeTokens = projectColors.THEME_COLORS?.[resolvedTheme];
     const resolved = themeTokens?.[token];
     if (typeof resolved === 'string' && resolved.trim()) {
       return resolved.trim();