@builder.io/sdk-solid 0.11.2 → 0.11.4

package/lib/browser/dev.jsx

@@ -756,25 +756,15 @@ function ComponentRef(props) {
       contextValue: props.context
     })}
     component={Wrapper()}
-  >
-    <For each={props.blockChildren}>{(child, _index) => {
-      const index = _index();
-      return <Block_default
-        key={"block-" + child.id}
-        block={child}
-        context={props.context}
-        registeredComponents={props.registeredComponents}
-      />;
-    }}</For>
-    <For each={props.blockChildren}>{(child, _index) => {
-      const index = _index();
-      return <Block_styles_default
-        key={"block-style-" + child.id}
-        block={child}
-        context={props.context}
-      />;
-    }}</For>
-  </Dynamic3></Show4>;
+  ><For each={props.blockChildren}>{(child, _index) => {
+    const index = _index();
+    return <Block_default
+      key={child.id}
+      block={child}
+      context={props.context}
+      registeredComponents={props.registeredComponents}
+    />;
+  }}</For></Dynamic3></Show4>;
 }
 var Component_ref_default = ComponentRef;
 
@@ -851,41 +841,10 @@ function Block(props) {
       isInteractive: !blockComponent()?.isRSC
     };
   }
-  return <Show5 when={canShowBlock()}><Show5
-    fallback={<Component_ref_default
-      componentRef={componentRefProps().componentRef}
-      componentOptions={componentRefProps().componentOptions}
-      blockChildren={componentRefProps().blockChildren}
-      context={componentRefProps().context}
-      registeredComponents={componentRefProps().registeredComponents}
-      builderBlock={componentRefProps().builderBlock}
-      includeBlockProps={componentRefProps().includeBlockProps}
-      isInteractive={componentRefProps().isInteractive}
-    />}
-    when={!blockComponent()?.noWrap}
-  >
-    <Show5 when={isEmptyHtmlElement(Tag())}><Block_wrapper_default
-      Wrapper={Tag()}
-      block={processedBlock()}
-      context={props.context}
-      hasChildren={false}
-    /></Show5>
-    <Show5 when={!isEmptyHtmlElement(Tag()) && repeatItem()}><For2 each={repeatItem()}>{(data, _index) => {
-      const index = _index();
-      return <Repeated_block_default
-        key={index}
-        repeatContext={data.context}
-        block={data.block}
-        registeredComponents={props.registeredComponents}
-      />;
-    }}</For2></Show5>
-    <Show5 when={!isEmptyHtmlElement(Tag()) && !repeatItem()}><Block_wrapper_default
-      Wrapper={Tag()}
-      block={processedBlock()}
-      context={props.context}
-      hasChildren={true}
-    >
-      <Component_ref_default
+  return <Show5 when={canShowBlock()}>
+    <Block_styles_default block={props.block} context={props.context} />
+    <Show5
+      fallback={<Component_ref_default
         componentRef={componentRefProps().componentRef}
         componentOptions={componentRefProps().componentOptions}
         blockChildren={componentRefProps().blockChildren}
@@ -894,26 +853,52 @@ function Block(props) {
         builderBlock={componentRefProps().builderBlock}
         includeBlockProps={componentRefProps().includeBlockProps}
         isInteractive={componentRefProps().isInteractive}
-      />
-      <For2 each={childrenWithoutParentComponent()}>{(child, _index) => {
+      />}
+      when={!blockComponent()?.noWrap}
+    >
+      <Show5 when={isEmptyHtmlElement(Tag())}><Block_wrapper_default
+        Wrapper={Tag()}
+        block={processedBlock()}
+        context={props.context}
+        hasChildren={false}
+      /></Show5>
+      <Show5 when={!isEmptyHtmlElement(Tag()) && repeatItem()}><For2 each={repeatItem()}>{(data, _index) => {
         const index = _index();
-        return <Block
-          key={"block-" + child.id}
-          block={child}
-          context={childrenContext()}
+        return <Repeated_block_default
+          key={index}
+          repeatContext={data.context}
+          block={data.block}
           registeredComponents={props.registeredComponents}
         />;
-      }}</For2>
-      <For2 each={childrenWithoutParentComponent()}>{(child, _index) => {
-        const index = _index();
-        return <Block_styles_default
-          key={"block-style-" + child.id}
-          block={child}
-          context={childrenContext()}
-        />;
-      }}</For2>
-    </Block_wrapper_default></Show5>
-  </Show5></Show5>;
+      }}</For2></Show5>
+      <Show5 when={!isEmptyHtmlElement(Tag()) && !repeatItem()}><Block_wrapper_default
+        Wrapper={Tag()}
+        block={processedBlock()}
+        context={props.context}
+        hasChildren={true}
+      >
+        <Component_ref_default
+          componentRef={componentRefProps().componentRef}
+          componentOptions={componentRefProps().componentOptions}
+          blockChildren={componentRefProps().blockChildren}
+          context={componentRefProps().context}
+          registeredComponents={componentRefProps().registeredComponents}
+          builderBlock={componentRefProps().builderBlock}
+          includeBlockProps={componentRefProps().includeBlockProps}
+          isInteractive={componentRefProps().isInteractive}
+        />
+        <For2 each={childrenWithoutParentComponent()}>{(child, _index) => {
+          const index = _index();
+          return <Block
+            key={child.id}
+            block={child}
+            context={childrenContext()}
+            registeredComponents={props.registeredComponents}
+          />;
+        }}</For2>
+      </Block_wrapper_default></Show5>
+    </Show5>
+  </Show5>;
 }
 var Block_default = Block;
 
@@ -982,25 +967,15 @@ function Blocks(props) {
     styleProp={props.styleProp}
     BlocksWrapper={props.context?.BlocksWrapper}
     BlocksWrapperProps={props.context?.BlocksWrapperProps}
-  >
-    <Show6 when={props.blocks}><For3 each={props.blocks}>{(block, _index) => {
-      const index = _index();
-      return <Block_default
-        key={"render-block-" + block.id}
-        block={block}
-        context={props.context || builderContext}
-        registeredComponents={props.registeredComponents || componentsContext.registeredComponents}
-      />;
-    }}</For3></Show6>
-    <Show6 when={props.blocks}><For3 each={props.blocks}>{(block, _index) => {
-      const index = _index();
-      return <Block_styles_default
-        key={"block-style-" + block.id}
-        block={block}
-        context={props.context || builderContext}
-      />;
-    }}</For3></Show6>
-  </Blocks_wrapper_default>;
+  ><Show6 when={props.blocks}><For3 each={props.blocks}>{(block, _index) => {
+    const index = _index();
+    return <Block_default
+      key={block.id}
+      block={block}
+      context={props.context || builderContext}
+      registeredComponents={props.registeredComponents || componentsContext.registeredComponents}
+    />;
+  }}</For3></Show6></Blocks_wrapper_default>;
 }
 var Blocks_default = Blocks;
 
@@ -2963,7 +2938,7 @@ var getInteractionPropertiesForEvent = (event) => {
 };
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.11.2";
+var SDK_VERSION = "0.11.4";
 
 // src/functions/register.ts
 var registry = {};
@@ -3099,6 +3074,7 @@ var setupBrowserForEditing = (options = {}) => {
 // src/components/content/components/enable-editor.tsx
 function EnableEditor(props) {
   const [forceReRenderCount, setForceReRenderCount] = createSignal10(0);
+  const [firstRender, setFirstRender] = createSignal10(true);
   const [lastUpdated, setLastUpdated] = createSignal10(0);
   const [shouldSendResetCookie, setShouldSendResetCookie] = createSignal10(false);
   const [ContentWrapper, setContentWrapper] = createSignal10(
@@ -3106,6 +3082,20 @@ function EnableEditor(props) {
   );
   const [httpReqsData, setHttpReqsData] = createSignal10({});
   const [clicked, setClicked] = createSignal10(false);
+  function mergeNewRootState(newData) {
+    const combinedState = {
+      ...props.builderContextSignal.rootState,
+      ...newData
+    };
+    if (props.builderContextSignal.rootSetState) {
+      props.builderContextSignal.rootSetState?.(combinedState);
+    } else {
+      props.setBuilderContextSignal((PREVIOUS_VALUE) => ({
+        ...PREVIOUS_VALUE,
+        rootState: combinedState
+      }));
+    }
+  }
   function mergeNewContent(newContent) {
     const newContentValue = {
       ...props.builderContextSignal.content,
@@ -3348,6 +3338,20 @@ function EnableEditor(props) {
     emitStateUpdate();
   }
   createEffect2(on2(() => [props.builderContextSignal.rootState], onUpdateFn_4));
+  function onUpdateFn_5() {
+    if (props.data) {
+      mergeNewRootState(props.data);
+    }
+  }
+  createEffect2(on2(() => [props.data], onUpdateFn_5));
+  function onUpdateFn_6() {
+    if (props.locale) {
+      mergeNewRootState({
+        locale: props.locale
+      });
+    }
+  }
+  createEffect2(on2(() => [props.locale], onUpdateFn_6));
   return <builder_context_default.Provider value={props.builderContextSignal}><Show10 when={props.builderContextSignal.content}><Dynamic5
     class={`variant-${props.content?.testVariationId || props.content?.id}`}
     {...{}}
@@ -3456,7 +3460,7 @@ ${getFontCss({
 var Styles_default = ContentStyles;
 
 // src/components/content/content.helpers.ts
-var getContextStateInitialValue = ({
+var getRootStateInitialValue = ({
   content,
   data,
   locale
@@ -3528,7 +3532,7 @@ function ContentComponent(props) {
       data: props.data
     }),
     localState: void 0,
-    rootState: getContextStateInitialValue({
+    rootState: getRootStateInitialValue({
       content: props.content,
       data: props.data,
       locale: props.locale
@@ -3569,6 +3573,7 @@ function ContentComponent(props) {
     }}
   ><Enable_editor_default
     content={props.content}
+    data={props.data}
     model={props.model}
     context={props.context}
     apiKey={props.apiKey}

package/lib/browser/index.js

@@ -780,7 +780,7 @@ function ComponentRef(props) {
           return Wrapper();
         },
         get children() {
-          return [createComponent(For, {
+          return createComponent(For, {
             get each() {
               return props.blockChildren;
             },
@@ -788,7 +788,7 @@ function ComponentRef(props) {
               _index();
               return createComponent(block_default, {
                 get key() {
-                  return "block-" + child.id;
+                  return child.id;
                 },
                 block: child,
                 get context() {
@@ -799,23 +799,7 @@ function ComponentRef(props) {
                 }
               });
             }
-          }), createComponent(For, {
-            get each() {
-              return props.blockChildren;
-            },
-            children: (child, _index) => {
-              _index();
-              return createComponent(block_styles_default, {
-                get key() {
-                  return "block-style-" + child.id;
-                },
-                block: child,
-                get context() {
-                  return props.context;
-                }
-              });
-            }
-          })];
+          });
         }
       }));
     }
@@ -911,7 +895,14 @@ function Block(props) {
       return canShowBlock();
     },
     get children() {
-      return createComponent(Show, {
+      return [createComponent(block_styles_default, {
+        get block() {
+          return props.block;
+        },
+        get context() {
+          return props.context;
+        }
+      }), createComponent(Show, {
         get fallback() {
           return createComponent(component_ref_default, {
             get componentRef() {
@@ -1038,7 +1029,7 @@ function Block(props) {
                       _index();
                       return createComponent(Block, {
                         get key() {
-                          return "block-" + child.id;
+                          return child.id;
                         },
                         block: child,
                         get context() {
@@ -1049,29 +1040,13 @@ function Block(props) {
                         }
                       });
                     }
-                  }), createComponent(For, {
-                    get each() {
-                      return childrenWithoutParentComponent();
-                    },
-                    children: (child, _index) => {
-                      _index();
-                      return createComponent(block_styles_default, {
-                        get key() {
-                          return "block-style-" + child.id;
-                        },
-                        block: child,
-                        get context() {
-                          return childrenContext();
-                        }
-                      });
-                    }
                   })];
                 }
               });
             }
           })];
         }
-      });
+      })];
     }
   });
 }
@@ -1158,7 +1133,7 @@ function Blocks(props) {
       return props.context?.BlocksWrapperProps;
     },
     get children() {
-      return [createComponent(Show, {
+      return createComponent(Show, {
         get when() {
           return props.blocks;
         },
@@ -1171,7 +1146,7 @@ function Blocks(props) {
               _index();
               return createComponent(block_default, {
                 get key() {
-                  return "render-block-" + block.id;
+                  return block.id;
                 },
                 block,
                 get context() {
@@ -1184,30 +1159,7 @@ function Blocks(props) {
             }
           });
         }
-      }), createComponent(Show, {
-        get when() {
-          return props.blocks;
-        },
-        get children() {
-          return createComponent(For, {
-            get each() {
-              return props.blocks;
-            },
-            children: (block, _index) => {
-              _index();
-              return createComponent(block_styles_default, {
-                get key() {
-                  return "block-style-" + block.id;
-                },
-                block,
-                get context() {
-                  return props.context || builderContext;
-                }
-              });
-            }
-          });
-        }
-      })];
+      });
     }
   });
 }
@@ -3284,7 +3236,7 @@ var getInteractionPropertiesForEvent = (event) => {
 };
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.11.2";
+var SDK_VERSION = "0.11.4";
 
 // src/functions/register.ts
 var registry = {};
@@ -3419,11 +3371,26 @@ var setupBrowserForEditing = (options = {}) => {
 // src/components/content/components/enable-editor.tsx
 function EnableEditor(props) {
   const [forceReRenderCount, setForceReRenderCount] = createSignal(0);
+  createSignal(true);
   createSignal(0);
   const [shouldSendResetCookie, setShouldSendResetCookie] = createSignal(false);
   const [ContentWrapper, setContentWrapper] = createSignal(props.contentWrapper || "div");
   const [httpReqsData, setHttpReqsData] = createSignal({});
   const [clicked, setClicked] = createSignal(false);
+  function mergeNewRootState(newData) {
+    const combinedState = {
+      ...props.builderContextSignal.rootState,
+      ...newData
+    };
+    if (props.builderContextSignal.rootSetState) {
+      props.builderContextSignal.rootSetState?.(combinedState);
+    } else {
+      props.setBuilderContextSignal((PREVIOUS_VALUE) => ({
+        ...PREVIOUS_VALUE,
+        rootState: combinedState
+      }));
+    }
+  }
   function mergeNewContent(newContent) {
     const newContentValue = {
       ...props.builderContextSignal.content,
@@ -3643,6 +3610,20 @@ function EnableEditor(props) {
     emitStateUpdate();
   }
   createEffect(on(() => [props.builderContextSignal.rootState], onUpdateFn_4));
+  function onUpdateFn_5() {
+    if (props.data) {
+      mergeNewRootState(props.data);
+    }
+  }
+  createEffect(on(() => [props.data], onUpdateFn_5));
+  function onUpdateFn_6() {
+    if (props.locale) {
+      mergeNewRootState({
+        locale: props.locale
+      });
+    }
+  }
+  createEffect(on(() => [props.locale], onUpdateFn_6));
   return createComponent(builder_context_default.Provider, {
     get value() {
       return props.builderContextSignal;
@@ -3778,7 +3759,7 @@ ${getFontCss({
 var styles_default = ContentStyles;
 
 // src/components/content/content.helpers.ts
-var getContextStateInitialValue = ({
+var getRootStateInitialValue = ({
   content,
   data,
   locale
@@ -3846,7 +3827,7 @@ function ContentComponent(props) {
       data: props.data
     }),
     localState: void 0,
-    rootState: getContextStateInitialValue({
+    rootState: getRootStateInitialValue({
       content: props.content,
       data: props.data,
       locale: props.locale
@@ -3892,6 +3873,9 @@ function ContentComponent(props) {
         get content() {
           return props.content;
         },
+        get data() {
+          return props.data;
+        },
         get model() {
           return props.model;
         },