@developer_tribe/react-builder 1.2.3 → 1.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@developer_tribe/react-builder",
-  "version": "1.2.3",
+  "version": "1.2.6",
   "license": "UNLICENSED",
   "type": "module",
   "restricted": true,

package/src/RenderPage.tsx

@@ -9,6 +9,7 @@ import {
   BuilderProvider,
   type BuilderProviderParams,
 } from './components/BuilderProvider';
+import { RenderErrorBoundary } from './components/RenderErrorBoundary';
 import type { NodeData } from './types/Node';
 export type ScreenStyle = {
   light: { backgroundColor: string; color: string; seperatorColor?: string };
@@ -119,28 +120,30 @@ export function RenderPage({
   }, [previewMode, data, onSelectNode, setCurrent, forceRender]); // forceRender: retrigger effect when we want to force a refresh (e.g. route change)
 
   return (
-    <BuilderProvider params={params}>
-      <DeviceMockFrame appName={name}>
-        <div
-          className="screen-preview"
-          ref={previewRootRef}
-          style={{
-            fontFamily: appFont ? `"${appFont}"` : undefined,
-          }}
-        >
-          <RenderNode node={data} />
-          {showEmptyState && (
-            <div className="rb-empty-preview" aria-hidden="true">
-              <div className="rb-empty-preview__card">
-                <div className="rb-empty-preview__title">Empty screen</div>
-                <div className="rb-empty-preview__hint">
-                  Add a component to start
+    <RenderErrorBoundary subtitle="caught by RenderPage">
+      <BuilderProvider params={params}>
+        <DeviceMockFrame appName={name}>
+          <div
+            className="screen-preview"
+            ref={previewRootRef}
+            style={{
+              fontFamily: appFont ? `"${appFont}"` : undefined,
+            }}
+          >
+            <RenderNode node={data} />
+            {showEmptyState && (
+              <div className="rb-empty-preview" aria-hidden="true">
+                <div className="rb-empty-preview__card">
+                  <div className="rb-empty-preview__title">Empty screen</div>
+                  <div className="rb-empty-preview__hint">
+                    Add a component to start
+                  </div>
                 </div>
               </div>
-            </div>
-          )}
-        </div>
-      </DeviceMockFrame>
-    </BuilderProvider>
+            )}
+          </div>
+        </DeviceMockFrame>
+      </BuilderProvider>
+    </RenderErrorBoundary>
   );
 }

package/src/build-components/Image/Image.tsx

@@ -1,12 +1,12 @@
-import React, { useId, useMemo } from 'react';
+import React, { useId } from 'react';
 import type { ImageComponentProps } from './ImageProps.generated';
 import useNode from '../useNode';
 import { useBuilderParams } from '../../components/BuilderProvider';
-import { extractImageStyle } from '../../utils/extractImageStyle';
 import { resolveImageSrc } from '../../utils/getImage';
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
+import { useExtractImageStyle } from '../../hooks/useExtractImageStyle';
 
 function Image({ node }: ImageComponentProps) {
   useLogRender('Image');
@@ -14,12 +14,8 @@ function Image({ node }: ImageComponentProps) {
   const generatedId = useId();
   const attributeName = node.sourceType ?? node.type ?? 'image';
   const attributeKey = node.key ?? generatedId;
-  const { previewMode, selectedKey, appConfig, projectColors } =
-    useBuilderParams();
-  const imageStyle = useMemo(
-    () => extractImageStyle(node, { theme: appConfig?.theme, projectColors }),
-    [node, appConfig?.theme, projectColors],
-  );
+  const { previewMode, selectedKey } = useBuilderParams();
+  const imageStyle = useExtractImageStyle(node);
   const isSelected = isNodeSelected({
     previewMode: !!previewMode,
     current: selectedKey ? { key: selectedKey } : undefined,

package/src/components/BuilderProvider.tsx

@@ -4,7 +4,6 @@ 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.
 // IMPORTANT: This provider may be mounted once but consumed by multiple `build-components`
@@ -90,11 +89,7 @@ export function BuilderProvider({ params, children }: BuilderProviderProps) {
   );
 
   return (
-    <BuilderContext.Provider value={value}>
-      <RenderErrorBoundary subtitle="caught by BuilderProvider">
-        {children}
-      </RenderErrorBoundary>
-    </BuilderContext.Provider>
+    <BuilderContext.Provider value={value}>{children}</BuilderContext.Provider>
   );
 }
 

package/src/hooks/useExtractImageStyle.ts

@@ -0,0 +1,19 @@
+import { useMemo } from 'react';
+import type { NodeData } from '../types/Node';
+import type { ImagePropsGenerated } from '../build-components/Image/ImageProps.generated';
+import { useBuilderParams } from '../components/BuilderProvider';
+import { extractImageStyle } from '../utils/extractImageStyle';
+import { defaultAppConfig } from '../types/PreviewConfig';
+
+export function useExtractImageStyle<
+  T extends ImagePropsGenerated['attributes'],
+>(node: NodeData<T>) {
+  const { appConfig, projectColors: builderProjectColors } = useBuilderParams();
+  const theme = appConfig?.theme ?? defaultAppConfig.theme;
+  const projectColors = builderProjectColors;
+
+  return useMemo(
+    () => extractImageStyle(node, { theme, projectColors }),
+    [node, theme, projectColors],
+  );
+}

package/src/index.native.ts

@@ -17,6 +17,7 @@ export type { Project, ProjectColors } from './types/Project';
 export type { Device } from './types/Device';
 export type { AppConfig, Localication } from './types/PreviewConfig';
 export { defaultAppConfig } from './types/PreviewConfig';
+export type { Fonts, FontDefinition } from './types/Fonts';
 export type {
   PaywallBenefitValue,
   PaywallBenefits,
@@ -44,6 +45,9 @@ export { LocalizationParamsProvider } from './components/LocalizationParamsProvi
 export { useParams } from './hooks/useParams';
 export { useLocalizationParams } from './hooks/useLocalizationParams';
 export { useLocalize } from './hooks/useLocalize';
+export { useExtractTextStyle } from './hooks/useExtractTextStyle';
+export { useExtractViewStyle } from './hooks/useExtractViewStyle';
+export { useExtractImageStyle } from './hooks/useExtractImageStyle';
 
 // Pure utilities (RN-safe)
 export {

package/src/index.ts

@@ -1,73 +1,9 @@
 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 {
-  BuilderProvider,
-  useBuilderParams,
-} from './components/BuilderProvider';
-export { ParamsProvider } from './components/ParamsProvider';
-export { LocalizationParamsProvider } from './components/LocalizationParamsProvider';
-export { RenderErrorBoundary } from './components/RenderErrorBoundary';
-export { useParams } from './hooks/useParams';
-export { useLocalizationParams } from './hooks/useLocalizationParams';
-export { useLocalize } from './hooks/useLocalize';
-export { useExtractTextStyle } from './hooks/useExtractTextStyle';
-export { useExtractViewStyle } from './hooks/useExtractViewStyle';
-
-export type { TargetedScreenSize } from './types/TargetedScreenSize';
-export type { Node, NodeData, NodeDefaultAttribute } from './types/Node';
-export type { Project, ProjectColors } from './types/Project';
-export type { Fonts, FontDefinition } from './types/Fonts';
-export {
-  isNodeNullOrUndefined,
-  isNodeString,
-  isNodeArray,
-  isEmptyObject,
-  analyseNode,
-} from './utils/analyseNode';
+// Web entrypoint trimmed to what the `example/` app uses.
+export { ProjectPage } from './pages/ProjectPage';
 export { getSamples } from './assets/samples/getSamples';
-export type { AppConfig, Localication } from './types/PreviewConfig';
 export { defaultAppConfig } from './types/PreviewConfig';
-export { getDevices, getDefaultDevice } from './utils/getDevices';
-export type { Device } from './types/Device';
-export { AttributesEditor };
-export * from './build-components/index';
-export { default as useNode } from './build-components/useNode';
-export { querySelector } from './utils/querySelector';
-export { extractViewStyle } from './utils/extractViewStyle';
-export { extractImageStyle } from './utils/extractImageStyle';
-export { extractTextStyle } from './utils/extractTextStyle';
-export {
-  getImage,
-  TRIBE_ASSETS_BASE_URL,
-  TribeAssetName,
-  parseTribeAssetName,
-  resolveImageSrc,
-} from './utils/getImage';
-export { ProjectPage } from './pages/ProjectPage';
-export type { ProjectPageProps } from './pages/ProjectPage';
-export { logger } from './utils/logger';
-export type { LogLevel } from './types/Project';
-export type {
-  PaywallBenefitValue,
-  PaywallBenefits,
-  Product as PaywallProduct,
-  PaywallModel,
-} from './paywall/types/paywall-types';
-// Paywall hooks
-export {
-  usePaywallCounter,
-  useCloseStatusPaywall,
-  useCarouselOptionsSeperator,
-  useCalculateLocalizedPrice,
-  useDiscountRate,
-} from './paywall/hooks';
+
+export type { AppConfig } from './types/PreviewConfig';
+export type { Project, ProjectColors } from './types/Project';