@developer_tribe/react-builder 1.2.3 → 1.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@developer_tribe/react-builder",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "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.ts

@@ -22,6 +22,7 @@ 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';
 
 export type { TargetedScreenSize } from './types/TargetedScreenSize';
 export type { Node, NodeData, NodeDefaultAttribute } from './types/Node';