@builder.io/sdk-solid 0.0.8-14 → 0.0.8-15

package/package.json

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

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

@@ -13,7 +13,8 @@ function BlockStyles(props) {
       return getProcessedBlock({
         block: props.block,
         state: builderContext.state,
-        context: builderContext.context
+        context: builderContext.context,
+        evaluateBindings: true
       });
     },
 

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

@@ -8,14 +8,21 @@ import { getBlockProperties } from "../../functions/get-block-properties.js";
 import { getBlockStyles } from "../../functions/get-block-styles.js";
 import { getBlockTag } from "../../functions/get-block-tag.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
+import { evaluate } from "../../functions/evaluate.js";
 import BlockStyles from "./block-styles.jsx";
 import { isEmptyHtmlElement } from "./render-block.helpers.js";
 import RenderComponent from "./render-component.jsx";
+import RenderRepeatedBlock from "./render-repeated-block.jsx";
 
 function RenderBlock(props) {
   const state = createMutable({
     get component() {
-      const componentName = state.useBlock.component?.name;
+      const componentName = getProcessedBlock({
+        block: props.block,
+        state: builderContext.state,
+        context: builderContext.context,
+        evaluateBindings: false
+      }).component?.name;
 
       if (!componentName) {
         return null;
@@ -55,10 +62,11 @@ function RenderBlock(props) {
     },
 
     get useBlock() {
-      return getProcessedBlock({
+      return state.repeatItemData ? props.block : getProcessedBlock({
         block: props.block,
         state: builderContext.state,
-        context: builderContext.context
+        context: builderContext.context,
+        evaluateBindings: true
       });
     },
 
@@ -90,6 +98,14 @@ function RenderBlock(props) {
       };
     },
 
+    get renderComponentProps() {
+      return {
+        blockChildren: state.children,
+        componentRef: state.componentRef,
+        componentOptions: state.componentOptions
+      };
+    },
+
     get children() {
       // TO-DO: When should `canHaveChildren` dictate rendering?
       // This is currently commented out because some Builder components (e.g. Box) do not have `canHaveChildren: true`,
@@ -98,28 +114,83 @@ function RenderBlock(props) {
       return state.useBlock.children ?? [];
     },
 
-    get noCompRefChildren() {
+    get childrenWithoutParentComponent() {
       /**
        * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
-       * we render them outside of `componentRef`
+       * we render them outside of `componentRef`.
+       * NOTE: We make sure not to render this if `repeatItemData` is non-null, because that means we are rendering an array of
+       * blocks, and the children will be repeated within those blocks.
        */
-      return state.componentRef ? [] : state.children;
+      const shouldRenderChildrenOutsideRef = !state.componentRef && !state.repeatItemData;
+      return shouldRenderChildrenOutsideRef ? state.children : [];
+    },
+
+    get repeatItemData() {
+      /**
+       * we don't use `state.useBlock` here because the processing done within its logic includes evaluating the block's bindings,
+       * which will not work if there is a repeat.
+       */
+      const {
+        repeat,
+        ...blockWithoutRepeat
+      } = props.block;
+
+      if (!repeat?.collection) {
+        return undefined;
+      }
+
+      const {
+        collection,
+        itemName
+      } = repeat;
+      const itemsArray = evaluate({
+        code: collection,
+        state: builderContext.state,
+        context: builderContext.context
+      });
+
+      if (Array.isArray(itemsArray)) {
+        const collectionName = collection.split(".").pop();
+        const itemNameToUse = itemName || (collectionName ? collectionName + "Item" : "item");
+        const repeatArray = itemsArray.map((item, index) => ({
+          context: { ...builderContext,
+            state: { ...builderContext.state,
+              $index: index,
+              $item: item,
+              [itemNameToUse]: item,
+              [`$${itemNameToUse}Index`]: index
+            }
+          },
+          block: blockWithoutRepeat
+        }));
+        return repeatArray;
+      } else {
+        return undefined;
+      }
     }
 
   });
   const builderContext = useContext(BuilderContext);
-  return <Show fallback={<RenderComponent blockChildren={state.children} componentRef={state.componentRef} componentOptions={state.componentOptions}></RenderComponent>} when={state.shouldWrap}>
+  return <Show fallback={<RenderComponent {...state.renderComponentProps}></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}>
+          <Show fallback={<RenderComponent {...state.renderComponentProps}></RenderComponent>} when={state.repeatItemData}>
+            <For each={state.repeatItemData}>
+              {(data, _index) => {
+              const index = _index();
+
+              return <RenderRepeatedBlock key={index} repeatContext={data.context} block={data.block}></RenderRepeatedBlock>;
+            }}
+            </For>
+          </Show>
+          <For each={state.childrenWithoutParentComponent}>
             {(child, _index) => {
             const index = _index();
 
             return <RenderBlock key={"render-block-" + child.id} block={child}></RenderBlock>;
           }}
           </For>
-          <For each={state.noCompRefChildren}>
+          <For each={state.childrenWithoutParentComponent}>
             {(child, _index) => {
             const index = _index();
 

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

@@ -0,0 +1,32 @@
+import { Dynamic } from "solid-js/web";
+import BuilderContext from "../../context/builder.context";
+import RenderBlock from "./render-block.jsx";
+
+function RenderRepeatedBlock(props) {
+  return <Dynamic value={{
+    get content() {
+      return props.repeatContext.content;
+    },
+
+    get state() {
+      return props.repeatContext.state;
+    },
+
+    get context() {
+      return props.repeatContext.context;
+    },
+
+    get apiKey() {
+      return props.repeatContext.apiKey;
+    },
+
+    get registeredComponents() {
+      return props.repeatContext.registeredComponents;
+    }
+
+  }} component={BuilderContext.Provider}>
+      <RenderBlock block={props.block}></RenderBlock>
+    </Dynamic>;
+}
+
+export default RenderRepeatedBlock;

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

@@ -41,8 +41,8 @@ function RenderContent(props) {
       };
     },
 
-    get context() {
-      return {};
+    get contextContext() {
+      return props.context || {};
     },
 
     get allRegisteredComponents() {
@@ -94,7 +94,7 @@ function RenderContent(props) {
       if (jsCode) {
         evaluate({
           code: jsCode,
-          context: state.context,
+          context: state.contextContext,
           state: state.contentState
         });
       }
@@ -107,7 +107,7 @@ function RenderContent(props) {
     evalExpression(expression) {
       return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
         code: group,
-        context: state.context,
+        context: state.contextContext,
         state: state.contentState
       }));
     },
@@ -208,7 +208,7 @@ function RenderContent(props) {
     },
 
     get context() {
-      return state.context;
+      return state.contextContext;
     },
 
     get apiKey() {

package/src/functions/convert-style-object.js

@@ -0,0 +1,14 @@
+const camelCaseToDashCase = (str = "") => str.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
+const convertStyleObject = (obj) => {
+  if (!obj) {
+    return obj;
+  }
+  const newObj = {};
+  for (const key in obj) {
+    newObj[camelCaseToDashCase(key)] = obj[key];
+  }
+  return newObj;
+};
+export {
+  convertStyleObject
+};

package/src/functions/get-block-styles.js

@@ -14,27 +14,19 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-import { sizes } from "../constants/device-sizes";
-const camelCaseToDashCase = (str = "") => str.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
-const convertStyleObject = (obj) => {
-  if (!obj) {
-    return obj;
-  }
-  const newObj = {};
-  for (const key in obj) {
-    newObj[camelCaseToDashCase(key)] = obj[key];
-  }
-  return newObj;
-};
+import { getMaxWidthQueryForSize } from "../constants/device-sizes.js";
+import { convertStyleObject } from "./convert-style-object.js";
+import { sanitizeBlockStyles } from "./sanitize-styles.js";
 function getBlockStyles(block) {
   var _a, _b, _c, _d, _e;
-  const styles = __spreadValues({}, convertStyleObject((_a = block.responsiveStyles) == null ? void 0 : _a.large));
+  const styles = __spreadValues(__spreadValues({}, convertStyleObject((_a = block.responsiveStyles) == null ? void 0 : _a.large)), block.styles);
   if ((_b = block.responsiveStyles) == null ? void 0 : _b.medium) {
-    styles[`@media (max-width: ${sizes.medium.max})`] = convertStyleObject((_c = block.responsiveStyles) == null ? void 0 : _c.medium);
+    styles[getMaxWidthQueryForSize("medium")] = convertStyleObject((_c = block.responsiveStyles) == null ? void 0 : _c.medium);
   }
   if ((_d = block.responsiveStyles) == null ? void 0 : _d.small) {
-    styles[`@media (max-width: ${sizes.small.max})`] = convertStyleObject((_e = block.responsiveStyles) == null ? void 0 : _e.small);
+    styles[getMaxWidthQueryForSize("small")] = convertStyleObject((_e = block.responsiveStyles) == null ? void 0 : _e.small);
   }
+  sanitizeBlockStyles(styles);
   return styles;
 }
 export {

package/src/functions/get-processed-block.js

@@ -20,9 +20,11 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { evaluate } from "./evaluate.js";
 import { set } from "./set.js";
 import { transformBlock } from "./transform-block.js";
-function getProcessedBlock(options) {
-  const { state, context } = options;
-  const block = transformBlock(options.block);
+const evaluateBindings = ({
+  block,
+  context,
+  state
+}) => {
   if (!block.bindings) {
     return block;
   }
@@ -32,14 +34,19 @@ function getProcessedBlock(options) {
   });
   for (const binding in block.bindings) {
     const expression = block.bindings[binding];
-    const value = evaluate({
-      code: expression,
-      state,
-      context
-    });
+    const value = evaluate({ code: expression, state, context });
     set(copied, binding, value);
   }
   return copied;
+};
+function getProcessedBlock(options) {
+  const { state, context } = options;
+  const block = transformBlock(options.block);
+  if (evaluateBindings) {
+    return evaluateBindings({ block, state, context });
+  } else {
+    return block;
+  }
 }
 export {
   getProcessedBlock

package/src/functions/get-processed-block.test.js

@@ -20,7 +20,8 @@ test("Can process bindings", () => {
   const processed = getProcessedBlock({
     block,
     context: {},
-    state: { test: "hello" }
+    state: { test: "hello" },
+    evaluateBindings: true
   });
   expect(processed).not.toEqual(block);
   expect((_a = processed.properties) == null ? void 0 : _a.foo).toEqual("baz");

package/src/functions/sanitize-styles.js

@@ -0,0 +1,5 @@
+const sanitizeBlockStyles = (_styles) => {
+};
+export {
+  sanitizeBlockStyles
+};