@builder.io/sdk-react 0.4.0 → 0.4.2

package/dist/sdk/blocks/columns/columns.js

@@ -108,17 +108,17 @@ function Columns(props) {
     const builderContext = useContext(BuilderContext);
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: `builder-columns ${props.builderBlock.id}-breakpoints` +
-                " div-08005e06", style: columnsCssVars() },
+                " div-fa2ab8fc", style: columnsCssVars() },
             TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
                 React.createElement(RenderInlinedStyles, { styles: columnsStyles() }))) : null,
-            props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-08005e06-2", style: columnCssVars(index), key: index },
+            props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-fa2ab8fc-2", style: columnCssVars(index), key: index },
                 React.createElement(RenderBlocks, { blocks: column.blocks, path: `component.options.columns.${index}.blocks`, parent: props.builderBlock.id, styleProp: {
                         flexGrow: "1",
                     } }))))),
-        React.createElement("style", null, `.div-08005e06 {
+        React.createElement("style", null, `.div-fa2ab8fc {
   display: flex;
   line-height: normal;
-}.div-08005e06-2 {
+}.div-fa2ab8fc-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;

package/dist/sdk/blocks/img/component-info.js

@@ -8,7 +8,7 @@ export const componentInfo = {
             name: 'image',
             bubble: true,
             type: 'file',
-            allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg'],
+            allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg', 'gif', 'webp'],
             required: true,
         },
     ],

package/dist/sdk/components/render-block/render-block.js

@@ -9,7 +9,6 @@ import BlockStyles from "./block-styles";
 import { getComponent, getRepeatItemData, isEmptyHtmlElement, } from "./render-block.helpers.js";
 import RenderRepeatedBlock from "./render-repeated-block";
 import { TARGET } from "../../constants/target.js";
-import { extractTextStyles } from "../../functions/extract-text-styles.js";
 import RenderComponent from "./render-component";
 import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
 function RenderBlock(props) {
@@ -79,29 +78,6 @@ function RenderBlock(props) {
         const shouldRenderChildrenOutsideRef = !component?.component && !repeatItem();
         return shouldRenderChildrenOutsideRef ? useBlock().children ?? [] : [];
     }
-    function childrenContext() {
-        const getInheritedTextStyles = () => {
-            if (TARGET !== "reactNative") {
-                return {};
-            }
-            return extractTextStyles(getReactNativeBlockStyles({
-                block: useBlock(),
-                context: props.context,
-                blockStyles: attributes().style,
-            }));
-        };
-        return {
-            apiKey: props.context.apiKey,
-            apiVersion: props.context.apiVersion,
-            localState: props.context.localState,
-            rootState: props.context.rootState,
-            rootSetState: props.context.rootSetState,
-            content: props.context.content,
-            context: props.context.context,
-            registeredComponents: props.context.registeredComponents,
-            inheritedStyles: getInheritedTextStyles(),
-        };
-    }
     function renderComponentProps() {
         return {
             blockChildren: useBlock().children ?? [],
@@ -121,9 +97,10 @@ function RenderBlock(props) {
                         },
                     }),
             },
-            context: childrenContext(),
+            context: childrenContext,
         };
     }
+    const [childrenContext, setChildrenContext] = useState(() => props.context);
     return (React.createElement(React.Fragment, null, canShowBlock() ? (React.createElement(React.Fragment, null, !component?.noWrap ? (React.createElement(React.Fragment, null,
         isEmptyHtmlElement(Tag) ? (React.createElement(React.Fragment, null,
             React.createElement(Tag, { ...attributes(), ...actions() }))) : null,
@@ -131,8 +108,8 @@ function RenderBlock(props) {
         !isEmptyHtmlElement(Tag) && !repeatItem() ? (React.createElement(React.Fragment, null,
             React.createElement(Tag, { ...attributes(), ...actions() },
                 React.createElement(RenderComponent, { ...renderComponentProps() }),
-                childrenWithoutParentComponent()?.map((child) => (React.createElement(RenderBlock, { key: "render-block-" + child.id, block: child, context: childrenContext() }))),
-                childrenWithoutParentComponent()?.map((child) => (React.createElement(BlockStyles, { key: "block-style-" + child.id, block: child, context: childrenContext() })))))) : null)) : (React.createElement(React.Fragment, null,
+                childrenWithoutParentComponent()?.map((child) => (React.createElement(RenderBlock, { key: "render-block-" + child.id, block: child, context: childrenContext }))),
+                childrenWithoutParentComponent()?.map((child) => (React.createElement(BlockStyles, { key: "block-style-" + child.id, block: child, context: childrenContext })))))) : null)) : (React.createElement(React.Fragment, null,
         React.createElement(RenderComponent, { ...renderComponentProps() }))))) : null));
 }
 export default RenderBlock;

package/dist/sdk/components/render-block/render-repeated-block.js

@@ -1,5 +1,6 @@
 'use client';
 import * as React from "react";
+import { useState } from "react";
 /**
  * We can't make this a generic `ProvideContext` function because Vue 2 won't support root slots, e.g.
  *
@@ -12,17 +13,8 @@ import * as React from "react";
 import BuilderContext from "../../context/builder.context.js";
 import RenderBlock from "./render-block";
 function RenderRepeatedBlock(props) {
-    return (React.createElement(BuilderContext.Provider, { value: {
-            content: props.repeatContext.content,
-            localState: props.repeatContext.localState,
-            rootState: props.repeatContext.rootState,
-            rootSetState: props.repeatContext.rootSetState,
-            context: props.repeatContext.context,
-            apiKey: props.repeatContext.apiKey,
-            registeredComponents: props.repeatContext.registeredComponents,
-            inheritedStyles: props.repeatContext.inheritedStyles,
-            apiVersion: props.repeatContext.apiVersion,
-        } },
-        React.createElement(RenderBlock, { block: props.block, context: props.repeatContext })));
+    const [store, setStore] = useState(() => props.repeatContext);
+    return (React.createElement(BuilderContext.Provider, { value: store },
+        React.createElement(RenderBlock, { block: props.block, context: store })));
 }
 export default RenderRepeatedBlock;

package/dist/sdk/components/render-blocks.js

@@ -33,10 +33,10 @@ function RenderBlocks(props) {
     }
     const builderContext = useContext(BuilderContext);
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: className() + " div-251582f2", "builder-path": props.path, "builder-parent-id": props.parent, style: props.styleProp, onClick: (event) => onClick(), onMouseEnter: (event) => onMouseEnter() },
+        React.createElement("div", { className: className() + " div-6dd9939e", "builder-path": props.path, "builder-parent-id": props.parent, style: props.styleProp, onClick: (event) => onClick(), onMouseEnter: (event) => onMouseEnter(), onKeyPress: (event) => onClick() },
             props.blocks ? (React.createElement(React.Fragment, null, props.blocks?.map((block) => (React.createElement(RenderBlock, { key: "render-block-" + block.id, block: block, context: builderContext }))))) : null,
             props.blocks ? (React.createElement(React.Fragment, null, props.blocks?.map((block) => (React.createElement(BlockStyles, { key: "block-style-" + block.id, block: block, context: builderContext }))))) : null),
-        React.createElement("style", null, `.div-251582f2 {
+        React.createElement("style", null, `.div-6dd9939e {
   display: flex;
   flex-direction: column;
   align-items: stretch;

package/dist/sdk/components/render-content/render-content.js

@@ -25,60 +25,45 @@ function RenderContent(props) {
     const elementRef = useRef(null);
     const [forceReRenderCount, setForceReRenderCount] = useState(() => 0);
     const [overrideContent, setOverrideContent] = useState(() => null);
-    const [useContent, setUseContent] = useState(() => getContentInitialValue({
-        content: props.content,
-        data: props.data,
-    }));
     function mergeNewContent(newContent) {
-        setUseContent({
-            ...useContent,
-            ...newContent,
-            data: {
-                ...useContent?.data,
-                ...newContent?.data,
-            },
-            meta: {
-                ...useContent?.meta,
-                ...newContent?.meta,
-                breakpoints: newContent?.meta?.breakpoints || useContent?.meta?.breakpoints,
+        setBuilderContextSignal((PREVIOUS_VALUE) => ({
+            ...PREVIOUS_VALUE,
+            content: {
+                ...builderContextSignal.content,
+                ...newContent,
+                data: {
+                    ...builderContextSignal.content?.data,
+                    ...newContent?.data,
+                },
+                meta: {
+                    ...builderContextSignal.content?.meta,
+                    ...newContent?.meta,
+                    breakpoints: newContent?.meta?.breakpoints ||
+                        builderContextSignal.content?.meta?.breakpoints,
+                },
             },
-        });
+        }));
     }
     function setBreakpoints(breakpoints) {
-        setUseContent({
-            ...useContent,
-            meta: {
-                ...useContent?.meta,
-                breakpoints,
+        setBuilderContextSignal((PREVIOUS_VALUE) => ({
+            ...PREVIOUS_VALUE,
+            content: {
+                ...builderContextSignal.content,
+                meta: {
+                    ...builderContextSignal.content?.meta,
+                    breakpoints,
+                },
             },
-        });
+        }));
     }
     const [update, setUpdate] = useState(() => 0);
     const [canTrackToUse, setCanTrackToUse] = useState(() => checkIsDefined(props.canTrack) ? props.canTrack : true);
-    const [contentState, setContentState] = useState(() => getContextStateInitialValue({
-        content: props.content,
-        data: props.data,
-        locale: props.locale,
-    }));
     function contentSetState(newRootState) {
-        setContentState(newRootState);
+        setBuilderContextSignal((PREVIOUS_VALUE) => ({
+            ...PREVIOUS_VALUE,
+            rootState: newRootState,
+        }));
     }
-    const [allRegisteredComponents, setAllRegisteredComponents] = useState(() => [
-        ...getDefaultRegisteredComponents(),
-        // While this `components` object is deprecated, we must maintain support for it.
-        // Since users are able to override our default components, we need to make sure that we do not break such
-        // existing usage.
-        // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
-        // which is the new standard way of providing custom components, and must therefore take precedence.
-        ...components,
-        ...(props.customComponents || []),
-    ].reduce((acc, { component, ...curr }) => ({
-        ...acc,
-        [curr.name]: {
-            component: TARGET === "vue3" ? wrapComponentRef(component) : component,
-            ...curr,
-        },
-    }), {}));
     function processMessage(event) {
         const { data } = event;
         if (data) {
@@ -86,7 +71,7 @@ function RenderContent(props) {
                 case "builder.configureSdk": {
                     const messageContent = data.data;
                     const { breakpoints, contentId } = messageContent;
-                    if (!contentId || contentId !== useContent?.id) {
+                    if (!contentId || contentId !== builderContextSignal.content?.id) {
                         return;
                     }
                     if (breakpoints) {
@@ -117,13 +102,13 @@ function RenderContent(props) {
     }
     function evaluateJsCode() {
         // run any dynamic JS code attached to content
-        const jsCode = useContent?.data?.jsCode;
+        const jsCode = builderContextSignal.content?.data?.jsCode;
         if (jsCode) {
             evaluate({
                 code: jsCode,
                 context: props.context || {},
                 localState: undefined,
-                rootState: contentState,
+                rootState: builderContextSignal.rootState,
                 rootSetState: contentSetState,
             });
         }
@@ -131,9 +116,9 @@ function RenderContent(props) {
     const [httpReqsData, setHttpReqsData] = useState(() => ({}));
     const [clicked, setClicked] = useState(() => false);
     function onClick(event) {
-        if (useContent) {
-            const variationId = useContent?.testVariationId;
-            const contentId = useContent?.id;
+        if (builderContextSignal.content) {
+            const variationId = builderContextSignal.content?.testVariationId;
+            const contentId = builderContextSignal.content?.id;
             _track({
                 type: "click",
                 canTrack: canTrackToUse,
@@ -153,7 +138,7 @@ function RenderContent(props) {
             code: group,
             context: props.context || {},
             localState: undefined,
-            rootState: contentState,
+            rootState: builderContextSignal.rootState,
             rootSetState: contentSetState,
         }));
     }
@@ -162,7 +147,7 @@ function RenderContent(props) {
             .then((response) => response.json())
             .then((json) => {
             const newState = {
-                ...contentState,
+                ...builderContextSignal.rootState,
                 [key]: json,
             };
             contentSetState(newState);
@@ -172,7 +157,7 @@ function RenderContent(props) {
         });
     }
     function runHttpRequests() {
-        const requests = useContent?.data?.httpRequests ?? {};
+        const requests = builderContextSignal.content?.data?.httpRequests ?? {};
         Object.entries(requests).forEach(([key, url]) => {
             if (url && (!httpReqsData[key] || isEditing())) {
                 const evaluatedUrl = evalExpression(url);
@@ -187,7 +172,7 @@ function RenderContent(props) {
         if (isEditing()) {
             window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
                 detail: {
-                    state: contentState,
+                    state: builderContextSignal.rootState,
                     ref: {
                         name: props.model,
                     },
@@ -200,6 +185,39 @@ function RenderContent(props) {
         contentId: props.content?.id,
         parentContentId: props.parentContentId,
     }));
+    const [builderContextSignal, setBuilderContextSignal] = useState(() => ({
+        content: getContentInitialValue({
+            content: props.content,
+            data: props.data,
+        }),
+        localState: undefined,
+        rootState: getContextStateInitialValue({
+            content: props.content,
+            data: props.data,
+            locale: props.locale,
+        }),
+        rootSetState: contentSetState,
+        context: props.context || {},
+        apiKey: props.apiKey,
+        apiVersion: props.apiVersion,
+        registeredComponents: [
+            ...getDefaultRegisteredComponents(),
+            // While this `components` object is deprecated, we must maintain support for it.
+            // Since users are able to override our default components, we need to make sure that we do not break such
+            // existing usage.
+            // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
+            // which is the new standard way of providing custom components, and must therefore take precedence.
+            ...components,
+            ...(props.customComponents || []),
+        ].reduce((acc, { component, ...curr }) => ({
+            ...acc,
+            [curr.name]: {
+                component: TARGET === "vue3" ? wrapComponentRef(component) : component,
+                ...curr,
+            },
+        }), {}),
+        inheritedStyles: {},
+    }));
     useEffect(() => {
         if (!props.apiKey) {
             logger.error("No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
@@ -225,16 +243,16 @@ function RenderContent(props) {
                         }
                         : {}),
                 });
-                Object.values(allRegisteredComponents).forEach((registeredComponent) => {
+                Object.values(builderContextSignal.registeredComponents).forEach((registeredComponent) => {
                     const message = createRegisterComponentMessage(registeredComponent);
                     window.parent?.postMessage(message, "*");
                 });
                 window.addEventListener("message", processMessage);
                 window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
             }
-            if (useContent) {
-                const variationId = useContent?.testVariationId;
-                const contentId = useContent?.id;
+            if (builderContextSignal.content) {
+                const variationId = builderContextSignal.content?.testVariationId;
+                const contentId = builderContextSignal.content?.id;
                 _track({
                     type: "impression",
                     canTrack: canTrackToUse,
@@ -282,13 +300,16 @@ function RenderContent(props) {
     }, [props.content]);
     useEffect(() => {
         evaluateJsCode();
-    }, [useContent?.data?.jsCode, contentState]);
+    }, [
+        builderContextSignal.content?.data?.jsCode,
+        builderContextSignal.rootState,
+    ]);
     useEffect(() => {
         runHttpRequests();
-    }, [useContent?.data?.httpRequests]);
+    }, [builderContextSignal.content?.data?.httpRequests]);
     useEffect(() => {
         emitStateUpdate();
-    }, [contentState]);
+    }, [builderContextSignal.rootState]);
     useEffect(() => {
         return () => {
             if (isBrowser()) {
@@ -297,18 +318,8 @@ function RenderContent(props) {
             }
         };
     }, []);
-    return (React.createElement(builderContext.Provider, { value: {
-            content: useContent,
-            localState: undefined,
-            rootState: contentState,
-            rootSetState: TARGET === "qwik" ? undefined : contentSetState,
-            context: props.context || {},
-            apiKey: props.apiKey,
-            apiVersion: props.apiVersion,
-            registeredComponents: allRegisteredComponents,
-            inheritedStyles: {},
-        } }, useContent ? (React.createElement(React.Fragment, null,
-        React.createElement("div", { ref: elementRef, onClick: (event) => onClick(event), "builder-content-id": useContent?.id, "builder-model": props.model, ...(TARGET === "reactNative"
+    return (React.createElement(builderContext.Provider, { value: builderContextSignal }, builderContextSignal.content ? (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: elementRef, onClick: (event) => onClick(event), "builder-content-id": builderContextSignal.content?.id, "builder-model": props.model, ...(TARGET === "reactNative"
                 ? {
                     dataSet: {
                         // currently, we can't set the actual ID here. // we don't need it right now, we just need to identify content divs for testing.
@@ -324,7 +335,7 @@ function RenderContent(props) {
             props.isSsrAbTest ? (React.createElement(React.Fragment, null,
                 React.createElement("script", { dangerouslySetInnerHTML: { __html: scriptStr } }))) : null,
             TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
-                React.createElement(RenderContentStyles, { contentId: useContent?.id, cssCode: useContent?.data?.cssCode, customFonts: useContent?.data?.customFonts }))) : null,
-            React.createElement(RenderBlocks, { blocks: useContent?.data?.blocks, key: forceReRenderCount })))) : null));
+                React.createElement(RenderContentStyles, { contentId: builderContextSignal.content?.id, cssCode: builderContextSignal.content?.data?.cssCode, customFonts: builderContextSignal.content?.data?.customFonts }))) : null,
+            React.createElement(RenderBlocks, { blocks: builderContextSignal.content?.data?.blocks, key: forceReRenderCount })))) : null));
 }
 export default RenderContent;

package/dist/sdk/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "0.4.0";
+export declare const SDK_VERSION = "0.4.2";

package/dist/sdk/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "0.4.0";
+export const SDK_VERSION = "0.4.2";

package/dist/sdk/functions/get-builder-search-params/index.d.ts

@@ -1,5 +1,11 @@
 type QueryObject = Record<string, string | string[]>;
 export declare const convertSearchParamsToQueryObject: (searchParams: URLSearchParams) => QueryObject;
+/**
+ * Receives a `URLSearchParams` object or a regular query object, and returns the subset of query params that are
+ * relevant to the Builder SDK.
+ *
+ * @returns
+ */
 export declare const getBuilderSearchParams: (_options: QueryObject | URLSearchParams | undefined) => QueryObject;
 export declare const getBuilderSearchParamsFromWindow: () => QueryObject;
 export declare const normalizeSearchParams: (searchParams: QueryObject | URLSearchParams) => QueryObject;

package/dist/sdk/functions/get-builder-search-params/index.js

@@ -8,6 +8,12 @@ export const convertSearchParamsToQueryObject = (searchParams) => {
     });
     return options;
 };
+/**
+ * Receives a `URLSearchParams` object or a regular query object, and returns the subset of query params that are
+ * relevant to the Builder SDK.
+ *
+ * @returns
+ */
 export const getBuilderSearchParams = (_options) => {
     if (!_options) {
         return {};

package/dist/sdk/index.d.ts

@@ -8,6 +8,7 @@ export type { InsertMenuConfig, InsertMenuItem } from './functions/register.js';
 export { setEditorSettings } from './functions/set-editor-settings.js';
 export type { Settings } from './functions/set-editor-settings.js';
 export { getAllContent, getContent, processContentResult, } from './functions/get-content/index.js';
+export { getBuilderSearchParams } from './functions/get-builder-search-params/index.js';
 export { track } from './functions/track/index.js';
 export type { RegisteredComponent } from './context/types';
 export type { ComponentInfo } from './types/components';

package/dist/sdk/index.js

@@ -6,4 +6,5 @@ export { createRegisterComponentMessage } from './functions/register-component.j
 export { register } from './functions/register.js';
 export { setEditorSettings } from './functions/set-editor-settings.js';
 export { getAllContent, getContent, processContentResult, } from './functions/get-content/index.js';
+export { getBuilderSearchParams } from './functions/get-builder-search-params/index.js';
 export { track } from './functions/track/index.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-react",
   "description": "Builder.io SDK for React",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "type": "module",
   "files": [
     "dist"