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

package/package.json

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

package/src/blocks/image/image.jsx

@@ -27,9 +27,7 @@ function Image(props) {
         fontSize: "0"
       })} style={{
         "padding-top": props.aspectRatio * 100 + "%"
-      }}>
-          {" "}
-        </div>
+      }}></div>
       </Show>
       <Show when={props.builderBlock?.children?.length && props.fitContent}>
         {props.children}

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

@@ -4,6 +4,8 @@ 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.jsx";
+import { convertStyleMaptoCSS } from "../../helpers/css.js";
+import { getMaxWidthQueryForSize } from "../../constants/device-sizes.js";
 
 function BlockStyles(props) {
   const state = createMutable({
@@ -11,39 +13,30 @@ function BlockStyles(props) {
       return getProcessedBlock({
         block: props.block,
         state: builderContext.state,
-        context: builderContext.context
+        context: builderContext.context,
+        evaluateBindings: true
       });
     },
 
-    camelToKebabCase(string) {
-      return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
-    },
-
     get css() {
-      // TODO: media queries
-      const styleObject = state.useBlock.responsiveStyles?.large;
-
-      if (!styleObject) {
-        return "";
-      }
-
-      let str = `.${state.useBlock.id} {`;
-
-      for (const key in styleObject) {
-        const value = styleObject[key];
-
-        if (typeof value === "string") {
-          str += `${state.camelToKebabCase(key)}: ${value};`;
-        }
-      }
-
-      str += "}";
-      return str;
+      const styles = state.useBlock.responsiveStyles;
+      const largeStyles = styles?.large;
+      const mediumStyles = styles?.medium;
+      const smallStyles = styles?.small;
+      return `
+      ${largeStyles ? `.${state.useBlock.id} {${convertStyleMaptoCSS(largeStyles)}}` : ""}
+      ${mediumStyles ? `${getMaxWidthQueryForSize("medium")} {
+            .${state.useBlock.id} {${convertStyleMaptoCSS(mediumStyles)}}
+          }` : ""}
+      ${smallStyles ? `${getMaxWidthQueryForSize("small")} {
+            .${state.useBlock.id} {${convertStyleMaptoCSS(smallStyles)}}
+          }` : ""}
+    }`;
     }
 
   });
   const builderContext = useContext(BuilderContext);
-  return <Show when={TARGET === "vue" || TARGET === "svelte"}>
+  return <Show when={TARGET === "vue2" || TARGET === "vue3" || TARGET === "svelte"}>
       <RenderInlinedStyles styles={state.css}></RenderInlinedStyles>
     </Show>;
 }

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/constants/device-sizes.js

@@ -1,10 +1,4 @@
-const sizeNames = ["xsmall", "small", "medium", "large"];
-const sizes = {
-  xsmall: {
-    min: 0,
-    default: 0,
-    max: 0
-  },
+const SIZES = {
   small: {
     min: 320,
     default: 321,
@@ -19,21 +13,9 @@ const sizes = {
     min: 990,
     default: 991,
     max: 1200
-  },
-  getWidthForSize(size) {
-    return this[size].default;
-  },
-  getSizeForWidth(width) {
-    for (const size of sizeNames) {
-      const value = this[size];
-      if (width <= value.max) {
-        return size;
-      }
-    }
-    return "large";
   }
 };
+const getMaxWidthQueryForSize = (size) => `@media (max-width: ${SIZES[size].max}px)`;
 export {
-  sizeNames,
-  sizes
+  getMaxWidthQueryForSize
 };

package/src/functions/camel-to-kebab-case.js

@@ -0,0 +1,4 @@
+const camelToKebabCase = (string) => string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+export {
+  camelToKebabCase
+};

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
+};

package/src/helpers/css.js

@@ -0,0 +1,12 @@
+import { camelToKebabCase } from "../functions/camel-to-kebab-case";
+const convertStyleMaptoCSS = (style) => {
+  const cssProps = Object.entries(style).map(([key, value]) => {
+    if (typeof value === "string") {
+      return `${camelToKebabCase(key)}: ${value};`;
+    }
+  });
+  return cssProps.join("\n");
+};
+export {
+  convertStyleMaptoCSS
+};

package/src/blocks/button/button.lite.tsx

@@ -1,23 +0,0 @@
-import { Show } from "solid-js";
-
-function Button(props) {
-  return (
-    <>
-      <Show
-        fallback={<span {...props.attributes}>{props.text}</span>}
-        when={props.link}
-      >
-        <a
-          {...props.attributes}
-          role="button"
-          href={props.link}
-          target={props.openLinkInNewTab ? "_blank" : undefined}
-        >
-          {props.text}
-        </a>
-      </Show>
-    </>
-  );
-}
-
-export default Button;

package/src/blocks/columns/columns.lite.tsx

@@ -1,109 +0,0 @@
-import { For } from "solid-js";
-
-import { createMutable } from "solid-js/store";
-import { css } from "solid-styled-components";
-
-import RenderBlocks from "../../components/render-blocks.jsx";
-
-function Columns(props) {
-  const state = createMutable({
-    getGutterSize() {
-      return typeof props.space === "number" ? props.space || 0 : 20;
-    },
-    getColumns() {
-      return props.columns || [];
-    },
-    getWidth(index: number) {
-      const columns = this.getColumns();
-      return columns[index]?.width || 100 / columns.length;
-    },
-    getColumnCssWidth(index: number) {
-      const columns = this.getColumns();
-      const gutterSize = this.getGutterSize();
-      const subtractWidth =
-        (gutterSize * (columns.length - 1)) / columns.length;
-      return `calc(${this.getWidth(index)}% - ${subtractWidth}px)`;
-    },
-    maybeApplyForTablet(prop: JSX.CSSProperties["flexDirection"]) {
-      const _stackColumnsAt = props.stackColumnsAt || "tablet";
-
-      return _stackColumnsAt === "tablet" ? prop : "inherit";
-    },
-    get columnsCssVars() {
-      const flexDir =
-        props.stackColumnsAt === "never"
-          ? "inherit"
-          : props.reverseColumnsWhenStacked
-          ? "column-reverse"
-          : "column";
-      return {
-        "--flex-dir": flexDir,
-        "--flex-dir-tablet": this.maybeApplyForTablet(flexDir),
-      };
-    },
-    get columnCssVars() {
-      const width = "100%";
-      const marginLeft = "0";
-      return {
-        "--column-width": width,
-        "--column-margin-left": marginLeft,
-        "--column-width-tablet": this.maybeApplyForTablet(width),
-        "--column-margin-left-tablet": this.maybeApplyForTablet(marginLeft),
-      };
-    },
-  });
-
-  return (
-    <div
-      class={
-        "builder-columns " +
-        css({
-          display: "flex",
-          alignItems: "stretch",
-          lineHeight: "normal",
-          "@media (max-width: 999px)": {
-            flexDirection: "var(--flex-dir-tablet)",
-          },
-          "@media (max-width: 639px)": {
-            flexDirection: "var(--flex-dir)",
-          },
-        })
-      }
-      style={state.columnsCssVars}
-    >
-      <For each={props.columns}>
-        {(column, _index) => {
-          const index = _index();
-          return (
-            <div
-              class={
-                "builder-column " +
-                css({
-                  flexGrow: "1",
-                  "@media (max-width: 999px)": {
-                    width: "var(--column-width-tablet) !important",
-                    marginLeft: "var(--column-margin-left-tablet) !important",
-                  },
-                  "@media (max-width: 639px)": {
-                    width: "var(--column-width) !important",
-                    marginLeft: "var(--column-margin-left) !important",
-                  },
-                })
-              }
-              style={{
-                width: state.getColumnCssWidth(index),
-                "margin-left": `${index === 0 ? 0 : state.getGutterSize()}px`,
-                ...state.columnCssVars,
-              }}
-              key={index}
-            >
-              <RenderBlocks blocks={column.blocks}></RenderBlocks>
-            </div>
-          );
-        }}
-      </For>
-    </div>
-  );
-}
-
-export default Columns;

package/src/blocks/custom-code/custom-code.lite.tsx

@@ -1,68 +0,0 @@
-import { onMount, useRef } from "solid-js";
-
-import { createMutable } from "solid-js/store";
-
-function CustomCode(props) {
-  const state = createMutable({
-    scriptsInserted: [],
-    scriptsRun: [],
-    findAndRunScripts() {
-      // TODO: Move this function to standalone one in '@builder.io/utils'
-      if (elem && typeof window !== "undefined") {
-        const scripts = elem.getElementsByTagName("script");
-
-        for (let i = 0; i < scripts.length; i++) {
-          const script = scripts[i];
-
-          if (script.src) {
-            if (state.scriptsInserted.includes(script.src)) {
-              continue;
-            }
-
-            state.scriptsInserted.push(script.src);
-            const newScript = document.createElement("script");
-            newScript.async = true;
-            newScript.src = script.src;
-            document.head.appendChild(newScript);
-          } else if (
-            !script.type ||
-            [
-              "text/javascript",
-              "application/javascript",
-              "application/ecmascript",
-            ].includes(script.type)
-          ) {
-            if (state.scriptsRun.includes(script.innerText)) {
-              continue;
-            }
-
-            try {
-              state.scriptsRun.push(script.innerText);
-              new Function(script.innerText)();
-            } catch (error) {
-              console.warn("`CustomCode`: Error running script:", error);
-            }
-          }
-        }
-      }
-    },
-  });
-
-  const elem = useRef();
-
-  onMount(() => {
-    state.findAndRunScripts();
-  });
-
-  return (
-    <div
-      class={
-        "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : "")
-      }
-      ref={elem}
-      innerHTML={props.code}
-    ></div>
-  );
-}
-
-export default CustomCode;