@builder.io/sdk-solid 0.0.8-10 → 0.0.8-11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/sdk-solid",
-  "version": "0.0.8-10",
+  "version": "0.0.8-11",
   "description": "",
   "type": "module",
   "main": "./src/solid-index.jsx",

package/src/components/render-block/block-styles.jsx

@@ -1,21 +1,33 @@
+import { useContext, Show } from "solid-js";
 import { createMutable } from "solid-js/store";
+import { TARGET } from "../../constants/target.js";
+import BuilderContext from "../../context/builder.context";
+import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import RenderInlinedStyles from "../render-inlined-styles";
 
 function BlockStyles(props) {
   const state = createMutable({
+    get useBlock() {
+      return getProcessedBlock({
+        block: props.block,
+        state: builderContext.state,
+        context: builderContext.context
+      });
+    },
+
     camelToKebabCase(string) {
       return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
     },
 
     get css() {
       // TODO: media queries
-      const styleObject = props.block.responsiveStyles?.large;
+      const styleObject = state.useBlock.responsiveStyles?.large;
 
       if (!styleObject) {
         return "";
       }
 
-      let str = `.${props.block.id} {`;
+      let str = `.${state.useBlock.id} {`;
 
       for (const key in styleObject) {
         const value = styleObject[key];
@@ -30,7 +42,10 @@ function BlockStyles(props) {
     }
 
   });
-  return <RenderInlinedStyles styles={state.css}></RenderInlinedStyles>;
+  const builderContext = useContext(BuilderContext);
+  return <Show when={TARGET === "vue" || TARGET === "svelte"}>
+      <RenderInlinedStyles styles={state.css}></RenderInlinedStyles>
+    </Show>;
 }
 
 export default BlockStyles;

package/src/components/render-block/block-styles.lite.tsx

@@ -1,9 +1,21 @@
+import { useContext, Show } from "solid-js";
+
 import { createMutable } from "solid-js/store";
 
+import { TARGET } from "../../constants/target.js";
+import BuilderContext from "../../context/builder.context";
+import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import RenderInlinedStyles from "../render-inlined-styles.lite";
 
 function BlockStyles(props) {
   const state = createMutable({
+    get useBlock() {
+      return getProcessedBlock({
+        block: props.block,
+        state: builderContext.state,
+        context: builderContext.context,
+      });
+    },
     camelToKebabCase(string: string) {
       return string
         .replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2")
@@ -11,13 +23,13 @@ function BlockStyles(props) {
     },
     get css() {
       // TODO: media queries
-      const styleObject = props.block.responsiveStyles?.large;
+      const styleObject = state.useBlock.responsiveStyles?.large;
 
       if (!styleObject) {
         return "";
       }
 
-      let str = `.${props.block.id} {`;
+      let str = `.${state.useBlock.id} {`;
 
       for (const key in styleObject) {
         const value = styleObject[key];
@@ -32,7 +44,13 @@ function BlockStyles(props) {
     },
   });
 
-  return <RenderInlinedStyles styles={state.css}></RenderInlinedStyles>;
+  const builderContext = useContext(BuilderContext);
+
+  return (
+    <Show when={TARGET === "vue" || TARGET === "svelte"}>
+      <RenderInlinedStyles styles={state.css}></RenderInlinedStyles>
+    </Show>
+  );
 }
 
 export default BlockStyles;

package/src/components/render-block/render-block.jsx

@@ -1,7 +1,6 @@
 import { useContext, Show, For } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import { createMutable } from "solid-js/store";
-import { TARGET } from "../../constants/target.js";
 import BuilderContext from "../../context/builder.context";
 import { getBlockActions } from "../../functions/get-block-actions.js";
 import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
@@ -11,6 +10,7 @@ import { getBlockTag } from "../../functions/get-block-tag.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import BlockStyles from "./block-styles";
 import { isEmptyHtmlElement } from "./render-block.helpers.js";
+import RenderComponent from "./render-component";
 
 function RenderBlock(props) {
   const state = createMutable({
@@ -62,22 +62,32 @@ function RenderBlock(props) {
       });
     },
 
-    get propertiesAndActions() {
+    get attributes() {
       return { ...getBlockProperties(state.useBlock),
         ...getBlockActions({
           block: state.useBlock,
           state: builderContext.state,
           context: builderContext.context
-        })
+        }),
+        style: getBlockStyles(state.useBlock)
       };
     },
 
-    get css() {
-      return getBlockStyles(state.useBlock);
+    get shouldWrap() {
+      return !state.componentInfo?.noWrap;
     },
 
     get componentOptions() {
-      return getBlockComponentOptions(state.useBlock);
+      return { ...getBlockComponentOptions(state.useBlock),
+
+        /**
+         * These attributes are passed to the wrapper element when there is one. If `noWrap` is set to true, then
+         * they are provided to the component itself directly.
+         */
+        ...(state.shouldWrap ? {} : {
+          attributes: state.attributes
+        })
+      };
     },
 
     get children() {
@@ -89,41 +99,31 @@ function RenderBlock(props) {
     },
 
     get noCompRefChildren() {
+      /**
+       * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
+       * we render them outside of `componentRef`
+       */
       return state.componentRef ? [] : state.children;
     }
 
   });
   const builderContext = useContext(BuilderContext);
-  return <Show fallback={<Dynamic {...state.componentOptions} attributes={state.propertiesAndActions} builderBlock={state.useBlock} style={state.css} component={state.componentRef}>
-          <For each={state.children}>
+  return <Show fallback={<RenderComponent blockChildren={state.children} componentRef={state.componentRef} componentOptions={state.componentOptions}></RenderComponent>} when={state.shouldWrap}>
+      <Show fallback={<Dynamic {...state.attributes} component={state.tagName}></Dynamic>} when={!isEmptyHtmlElement(state.tagName)}>
+        <Dynamic {...state.attributes} component={state.tagName}>
+          <RenderComponent blockChildren={state.children} componentRef={state.componentRef} componentOptions={state.componentOptions}></RenderComponent>
+          <For each={state.noCompRefChildren}>
             {(child, _index) => {
-        const index = _index();
+            const index = _index();
 
-        return <RenderBlock key={child.id} block={child}></RenderBlock>;
-      }}
+            return <RenderBlock key={"render-block-" + child.id} block={child}></RenderBlock>;
+          }}
           </For>
-        </Dynamic>} when={!state.componentInfo?.noWrap}>
-      <Show fallback={<Dynamic {...state.propertiesAndActions} style={state.css} component={state.tagName}></Dynamic>} when={!isEmptyHtmlElement(state.tagName)}>
-        <Dynamic {...state.propertiesAndActions} style={state.css} component={state.tagName}>
-          <Show when={TARGET === "vue" || TARGET === "svelte"}>
-            <BlockStyles block={state.useBlock}></BlockStyles>
-          </Show>
-          <Show when={state.componentRef}>
-            <Dynamic {...state.componentOptions} builderBlock={state.useBlock} component={state.componentRef}>
-              <For each={state.children}>
-                {(child, _index) => {
-                const index = _index();
-
-                return <RenderBlock key={child.id} block={child}></RenderBlock>;
-              }}
-              </For>
-            </Dynamic>
-          </Show>
           <For each={state.noCompRefChildren}>
             {(child, _index) => {
             const index = _index();
 
-            return <RenderBlock key={child.id} block={child}></RenderBlock>;
+            return <BlockStyles key={"block-style-" + child.id} block={child}></BlockStyles>;
           }}
           </For>
         </Dynamic>

package/src/components/render-block/render-block.lite.tsx

@@ -2,7 +2,6 @@ import { useContext, Show, For } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import { createMutable } from "solid-js/store";
 
-import { TARGET } from "../../constants/target.js";
 import BuilderContext from "../../context/builder.context";
 import { getBlockActions } from "../../functions/get-block-actions.js";
 import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
@@ -12,6 +11,7 @@ import { getBlockTag } from "../../functions/get-block-tag.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import BlockStyles from "./block-styles.lite";
 import { isEmptyHtmlElement } from "./render-block.helpers.js";
+import RenderComponent from "./render-component.lite";
 
 function RenderBlock(props) {
   const state = createMutable({
@@ -55,7 +55,7 @@ function RenderBlock(props) {
         context: builderContext.context,
       });
     },
-    get propertiesAndActions() {
+    get attributes() {
       return {
         ...getBlockProperties(state.useBlock),
         ...getBlockActions({
@@ -63,13 +63,26 @@ function RenderBlock(props) {
           state: builderContext.state,
           context: builderContext.context,
         }),
+        style: getBlockStyles(state.useBlock),
       };
     },
-    get css() {
-      return getBlockStyles(state.useBlock);
+    get shouldWrap() {
+      return !state.componentInfo?.noWrap;
     },
     get componentOptions() {
-      return getBlockComponentOptions(state.useBlock);
+      return {
+        ...getBlockComponentOptions(state.useBlock),
+
+        /**
+         * These attributes are passed to the wrapper element when there is one. If `noWrap` is set to true, then
+         * they are provided to the component itself directly.
+         */
+        ...(state.shouldWrap
+          ? {}
+          : {
+              attributes: state.attributes,
+            }),
+      };
     },
     get children() {
       // TO-DO: When should `canHaveChildren` dictate rendering?
@@ -79,6 +92,10 @@ function RenderBlock(props) {
       return state.useBlock.children ?? [];
     },
     get noCompRefChildren() {
+      /**
+       * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
+       * we render them outside of `componentRef`
+       */
       return state.componentRef ? [] : state.children;
     },
   });
@@ -88,61 +105,46 @@ function RenderBlock(props) {
   return (
     <Show
       fallback={
-        <Dynamic
-          {...state.componentOptions}
-          attributes={state.propertiesAndActions}
-          builderBlock={state.useBlock}
-          style={state.css}
-          component={state.componentRef}
-        >
-          <For each={state.children}>
-            {(child, _index) => {
-              const index = _index();
-              return <RenderBlock key={child.id} block={child}></RenderBlock>;
-            }}
-          </For>
-        </Dynamic>
+        <RenderComponent
+          blockChildren={state.children}
+          componentRef={state.componentRef}
+          componentOptions={state.componentOptions}
+        ></RenderComponent>
       }
-      when={!state.componentInfo?.noWrap}
+      when={state.shouldWrap}
     >
       <Show
         fallback={
-          <Dynamic
-            {...state.propertiesAndActions}
-            style={state.css}
-            component={state.tagName}
-          ></Dynamic>
+          <Dynamic {...state.attributes} component={state.tagName}></Dynamic>
         }
         when={!isEmptyHtmlElement(state.tagName)}
       >
-        <Dynamic
-          {...state.propertiesAndActions}
-          style={state.css}
-          component={state.tagName}
-        >
-          <Show when={TARGET === "vue" || TARGET === "svelte"}>
-            <BlockStyles block={state.useBlock}></BlockStyles>
-          </Show>
-          <Show when={state.componentRef}>
-            <Dynamic
-              {...state.componentOptions}
-              builderBlock={state.useBlock}
-              component={state.componentRef}
-            >
-              <For each={state.children}>
-                {(child, _index) => {
-                  const index = _index();
-                  return (
-                    <RenderBlock key={child.id} block={child}></RenderBlock>
-                  );
-                }}
-              </For>
-            </Dynamic>
-          </Show>
+        <Dynamic {...state.attributes} component={state.tagName}>
+          <RenderComponent
+            blockChildren={state.children}
+            componentRef={state.componentRef}
+            componentOptions={state.componentOptions}
+          ></RenderComponent>
+          <For each={state.noCompRefChildren}>
+            {(child, _index) => {
+              const index = _index();
+              return (
+                <RenderBlock
+                  key={"render-block-" + child.id}
+                  block={child}
+                ></RenderBlock>
+              );
+            }}
+          </For>
           <For each={state.noCompRefChildren}>
             {(child, _index) => {
               const index = _index();
-              return <RenderBlock key={child.id} block={child}></RenderBlock>;
+              return (
+                <BlockStyles
+                  key={"block-style-" + child.id}
+                  block={child}
+                ></BlockStyles>
+              );
             }}
           </For>
         </Dynamic>

package/src/components/render-block/render-component.jsx

@@ -0,0 +1,27 @@
+import { Show, For } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import BlockStyles from "./block-styles";
+import RenderBlock from "./render-block";
+
+function RenderComponent(props) {
+  return <Show when={props.componentRef}>
+      <Dynamic {...props.componentOptions} component={props.componentRef}>
+        <For each={props.blockChildren}>
+          {(child, _index) => {
+          const index = _index();
+
+          return <RenderBlock key={"render-block-" + child.id} block={child}></RenderBlock>;
+        }}
+        </For>
+        <For each={props.blockChildren}>
+          {(child, _index) => {
+          const index = _index();
+
+          return <BlockStyles key={"block-style-" + child.id} block={child}></BlockStyles>;
+        }}
+        </For>
+      </Dynamic>
+    </Show>;
+}
+
+export default RenderComponent;

package/src/components/render-block/render-component.lite.tsx

@@ -0,0 +1,38 @@
+import { Show, For } from "solid-js";
+import { Dynamic } from "solid-js/web";
+
+import BlockStyles from "./block-styles.lite";
+import RenderBlock from "./render-block.lite";
+
+function RenderComponent(props) {
+  return (
+    <Show when={props.componentRef}>
+      <Dynamic {...props.componentOptions} component={props.componentRef}>
+        <For each={props.blockChildren}>
+          {(child, _index) => {
+            const index = _index();
+            return (
+              <RenderBlock
+                key={"render-block-" + child.id}
+                block={child}
+              ></RenderBlock>
+            );
+          }}
+        </For>
+        <For each={props.blockChildren}>
+          {(child, _index) => {
+            const index = _index();
+            return (
+              <BlockStyles
+                key={"block-style-" + child.id}
+                block={child}
+              ></BlockStyles>
+            );
+          }}
+        </For>
+      </Dynamic>
+    </Show>
+  );
+}
+
+export default RenderComponent;

package/src/components/render-blocks.jsx

@@ -2,6 +2,7 @@ import { Show, For } from "solid-js";
 import { createMutable } from "solid-js/store";
 import { css } from "solid-styled-components";
 import { isEditing } from "../functions/is-editing.js";
+import BlockStyles from "./render-block/block-styles";
 import RenderBlock from "./render-block/render-block";
 
 function RenderBlocks(props) {
@@ -47,7 +48,16 @@ function RenderBlocks(props) {
           {(block, _index) => {
           const index = _index();
 
-          return <RenderBlock key={block.id} block={block}></RenderBlock>;
+          return <RenderBlock key={"render-block-" + block.id} block={block}></RenderBlock>;
+        }}
+        </For>
+      </Show>
+      <Show when={props.blocks}>
+        <For each={props.blocks}>
+          {(block, _index) => {
+          const index = _index();
+
+          return <BlockStyles key={"block-style-" + block.id} block={block}></BlockStyles>;
         }}
         </For>
       </Show>

package/src/components/render-blocks.lite.tsx

@@ -4,6 +4,7 @@ import { createMutable } from "solid-js/store";
 import { css } from "solid-styled-components";
 
 import { isEditing } from "../functions/is-editing.js";
+import BlockStyles from "./render-block/block-styles.lite";
 import RenderBlock from "./render-block/render-block.lite";
 
 function RenderBlocks(props) {
@@ -64,7 +65,25 @@ function RenderBlocks(props) {
         <For each={props.blocks}>
           {(block, _index) => {
             const index = _index();
-            return <RenderBlock key={block.id} block={block}></RenderBlock>;
+            return (
+              <RenderBlock
+                key={"render-block-" + block.id}
+                block={block}
+              ></RenderBlock>
+            );
+          }}
+        </For>
+      </Show>
+      <Show when={props.blocks}>
+        <For each={props.blocks}>
+          {(block, _index) => {
+            const index = _index();
+            return (
+              <BlockStyles
+                key={"block-style-" + block.id}
+                block={block}
+              ></BlockStyles>
+            );
           }}
         </For>
       </Show>

package/src/functions/get-block-component-options.js

@@ -1,4 +1,6 @@
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -14,9 +16,12 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 function getBlockComponentOptions(block) {
   var _a;
-  return __spreadValues(__spreadValues({}, (_a = block.component) == null ? void 0 : _a.options), block.options);
+  return __spreadProps(__spreadValues(__spreadValues({}, (_a = block.component) == null ? void 0 : _a.options), block.options), {
+    builderBlock: block
+  });
 }
 export {
   getBlockComponentOptions