@builder.io/sdk-solid 0.0.19 → 0.0.21

package/src/blocks/video/video.jsx

@@ -1,6 +1,7 @@
 function Video(props) {
   function videoProps() {
-    return { ...(props.autoPlay === true ? {
+    return {
+      ...(props.autoPlay === true ? {
         autoPlay: true
       } : {}),
       ...(props.muted === true ? {
@@ -17,13 +18,12 @@ function Video(props) {
       } : {})
     };
   }
-
   function spreadProps() {
-    return { ...props.attributes,
+    return {
+      ...props.attributes,
       ...videoProps()
     };
   }
-
   return <video {...spreadProps()} style={{
     width: "100%",
     height: "100%",
@@ -35,5 +35,4 @@ function Video(props) {
     "border-radius": 1
   }} src={props.video || "no-src"} poster={props.posterImage}></video>;
 }
-
 export default Video;

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

@@ -1,10 +1,9 @@
 import { Show } from "solid-js";
-import { getMaxWidthQueryForSize } from "../../constants/device-sizes.js";
+import { getMaxWidthQueryForSize, getSizesForBreakpoints } from "../../constants/device-sizes.js";
 import { TARGET } from "../../constants/target.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import { createCssClass } from "../../helpers/css.js";
 import RenderInlinedStyles from "../render-inlined-styles.jsx";
-
 function BlockStyles(props) {
   function useBlock() {
     return getProcessedBlock({
@@ -14,9 +13,10 @@ function BlockStyles(props) {
       shouldEvaluateBindings: true
     });
   }
-
   function css() {
     const styles = useBlock().responsiveStyles;
+    const content = props.context.content;
+    const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(content?.meta?.breakpoints || {});
     const largeStyles = styles?.large;
     const mediumStyles = styles?.medium;
     const smallStyles = styles?.small;
@@ -28,19 +28,17 @@ function BlockStyles(props) {
     const mediumStylesClass = mediumStyles ? createCssClass({
       className,
       styles: mediumStyles,
-      mediaQuery: getMaxWidthQueryForSize("medium")
+      mediaQuery: getMaxWidthQueryForSize("medium", sizesWithUpdatedBreakpoints)
     }) : "";
     const smallStylesClass = smallStyles ? createCssClass({
       className,
       styles: smallStyles,
-      mediaQuery: getMaxWidthQueryForSize("small")
+      mediaQuery: getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints)
     }) : "";
     return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
   }
-
   return <Show when={TARGET !== "reactNative" && css()}>
       <RenderInlinedStyles styles={css()}></RenderInlinedStyles>
     </Show>;
 }
-
 export default BlockStyles;

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

@@ -14,7 +14,6 @@ import { extractTextStyles } from "../../functions/extract-text-styles.js";
 import RenderComponentWithContext from "./render-component-with-context.jsx";
 import RenderComponent from "./render-component.jsx";
 import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
-
 function RenderBlock(props) {
   function component() {
     const componentName = getProcessedBlock({
@@ -23,13 +22,10 @@ function RenderBlock(props) {
       context: props.context.context,
       shouldEvaluateBindings: false
     }).component?.name;
-
     if (!componentName) {
       return null;
     }
-
     const ref = props.context.registeredComponents[componentName];
-
     if (!ref) {
       // TODO: Public doc page with more info about this message
       console.warn(`
@@ -40,11 +36,9 @@ function RenderBlock(props) {
       return ref;
     }
   }
-
-  function tagName() {
+  function tag() {
     return getBlockTag(useBlock());
   }
-
   function useBlock() {
     return repeatItemData() ? props.block : getProcessedBlock({
       block: props.block,
@@ -53,9 +47,9 @@ function RenderBlock(props) {
       shouldEvaluateBindings: true
     });
   }
-
   function attributes() {
-    return { ...getBlockProperties(useBlock()),
+    return {
+      ...getBlockProperties(useBlock()),
       ...getBlockActions({
         block: useBlock(),
         state: props.context.state,
@@ -69,17 +63,15 @@ function RenderBlock(props) {
       } : {})
     };
   }
-
   function shouldWrap() {
     return !component()?.noWrap;
   }
-
   function renderComponentProps() {
     return {
-      blockChildren: children(),
+      blockChildren: useChildren(),
       componentRef: component()?.component,
-      componentOptions: { ...getBlockComponentOptions(useBlock()),
-
+      componentOptions: {
+        ...getBlockComponentOptions(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.
@@ -91,15 +83,13 @@ function RenderBlock(props) {
       context: childrenContext()
     };
   }
-
-  function children() {
+  function useChildren() {
     // TO-DO: When should `canHaveChildren` dictate rendering?
     // This is currently commented out because some Builder components (e.g. Box) do not have `canHaveChildren: true`,
     // but still receive and need to render children.
     // return componentInfo?.canHaveChildren ? useBlock().children : [];
     return useBlock().children ?? [];
   }
-
   function childrenWithoutParentComponent() {
     /**
      * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
@@ -108,9 +98,8 @@ function RenderBlock(props) {
      * blocks, and the children will be repeated within those blocks.
      */
     const shouldRenderChildrenOutsideRef = !component()?.component && !repeatItemData();
-    return shouldRenderChildrenOutsideRef ? children() : [];
+    return shouldRenderChildrenOutsideRef ? useChildren() : [];
   }
-
   function repeatItemData() {
     /**
      * we don't use `useBlock()` here because the processing done within its logic includes evaluating the block's bindings,
@@ -120,26 +109,24 @@ function RenderBlock(props) {
       repeat,
       ...blockWithoutRepeat
     } = props.block;
-
     if (!repeat?.collection) {
       return undefined;
     }
-
     const itemsArray = evaluate({
       code: repeat.collection,
       state: props.context.state,
       context: props.context.context
     });
-
     if (!Array.isArray(itemsArray)) {
       return undefined;
     }
-
     const collectionName = repeat.collection.split(".").pop();
     const itemNameToUse = repeat.itemName || (collectionName ? collectionName + "Item" : "item");
     const repeatArray = itemsArray.map((item, index) => ({
-      context: { ...props.context,
-        state: { ...props.context.state,
+      context: {
+        ...props.context,
+        state: {
+          ...props.context.state,
           $index: index,
           $item: item,
           [itemNameToUse]: item,
@@ -150,19 +137,16 @@ function RenderBlock(props) {
     }));
     return repeatArray;
   }
-
   function inheritedTextStyles() {
     if (TARGET !== "reactNative") {
       return {};
     }
-
     const styles = getReactNativeBlockStyles({
       block: useBlock(),
       context: props.context
     });
     return extractTextStyles(styles);
   }
-
   function childrenContext() {
     return {
       apiKey: props.context.apiKey,
@@ -173,7 +157,6 @@ function RenderBlock(props) {
       inheritedStyles: inheritedTextStyles()
     };
   }
-
   function renderComponentTag() {
     if (TARGET === "reactNative") {
       return RenderComponentWithContext;
@@ -184,34 +167,30 @@ function RenderBlock(props) {
       return RenderComponent;
     }
   }
-
   return <Show fallback={<Dynamic {...renderComponentProps()} component={renderComponentTag()}></Dynamic>} when={shouldWrap()}>
-      <Show when={isEmptyHtmlElement(tagName())}>
-        <Dynamic {...attributes()} component={tagName()}></Dynamic>
+      <Show when={isEmptyHtmlElement(tag())}>
+        <Dynamic {...attributes()} component={tag()}></Dynamic>
       </Show>
-      <Show when={!isEmptyHtmlElement(tagName()) && repeatItemData()}>
+      <Show when={!isEmptyHtmlElement(tag()) && repeatItemData()}>
         <For each={repeatItemData()}>
           {(data, _index) => {
           const index = _index();
-
           return <RenderRepeatedBlock key={index} repeatContext={data.context} block={data.block}></RenderRepeatedBlock>;
         }}
         </For>
       </Show>
-      <Show when={!isEmptyHtmlElement(tagName()) && !repeatItemData()}>
-        <Dynamic {...attributes()} component={tagName()}>
+      <Show when={!isEmptyHtmlElement(tag()) && !repeatItemData()}>
+        <Dynamic {...attributes()} component={tag()}>
           <Dynamic {...renderComponentProps()} component={renderComponentTag()}></Dynamic>
           <For each={childrenWithoutParentComponent()}>
             {(child, _index) => {
             const index = _index();
-
             return <RenderBlock key={"render-block-" + child.id} block={child} context={childrenContext()}></RenderBlock>;
           }}
           </For>
           <For each={childrenWithoutParentComponent()}>
             {(child, _index) => {
             const index = _index();
-
             return <BlockStyles key={"block-style-" + child.id} block={child} context={childrenContext()}></BlockStyles>;
           }}
           </For>
@@ -219,5 +198,4 @@ function RenderBlock(props) {
       </Show>
     </Show>;
 }
-
 export default RenderBlock;

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

@@ -1,36 +1,28 @@
 import { Dynamic } from "solid-js/web";
 import BuilderContext from "../../context/builder.context.js";
 import RenderComponent from "./render-component.jsx";
-
 function RenderComponentWithContext(props) {
   return <Dynamic value={{
     get content() {
       return props.context.content;
     },
-
     get state() {
       return props.context.state;
     },
-
     get context() {
       return props.context.context;
     },
-
     get apiKey() {
       return props.context.apiKey;
     },
-
     get registeredComponents() {
       return props.context.registeredComponents;
     },
-
     get inheritedStyles() {
       return props.context.inheritedStyles;
     }
-
   }} component={BuilderContext.Provider}>
       <RenderComponent componentRef={props.componentRef} componentOptions={props.componentOptions} blockChildren={props.blockChildren} context={props.context}></RenderComponent>
     </Dynamic>;
 }
-
 export default RenderComponentWithContext;

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

@@ -2,27 +2,22 @@ import { Show, For } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import BlockStyles from "./block-styles.jsx";
 import RenderBlock from "./render-block.jsx";
-import { markPropsMutable } from "../../functions/mark-mutable.js";
-
 function RenderComponent(props) {
   return <Show when={props.componentRef}>
-      <Dynamic {...markPropsMutable(props.componentOptions)} component={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} context={props.context}></RenderBlock>;
         }}
         </For>
         <For each={props.blockChildren}>
           {(child, _index) => {
           const index = _index();
-
           return <BlockStyles key={"block-style-" + child.id} block={child} context={props.context}></BlockStyles>;
         }}
         </For>
       </Dynamic>
     </Show>;
 }
-
 export default RenderComponent;

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

@@ -1,36 +1,28 @@
 import { Dynamic } from "solid-js/web";
 import BuilderContext from "../../context/builder.context.js";
 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;
     },
-
     get inheritedStyles() {
       return props.repeatContext.inheritedStyles;
     }
-
   }} component={BuilderContext.Provider}>
       <RenderBlock block={props.block} context={props.repeatContext}></RenderBlock>
     </Dynamic>;
 }
-
 export default RenderRepeatedBlock;

package/src/components/render-blocks.jsx

@@ -4,12 +4,10 @@ import BuilderContext from "../context/builder.context.js";
 import { isEditing } from "../functions/is-editing.js";
 import BlockStyles from "./render-block/block-styles.jsx";
 import RenderBlock from "./render-block/render-block.jsx";
-
 function RenderBlocks(props) {
   function className() {
     return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
   }
-
   function onClick() {
     if (isEditing() && !props.blocks?.length) {
       window.parent?.postMessage({
@@ -21,7 +19,6 @@ function RenderBlocks(props) {
       }, "*");
     }
   }
-
   function onMouseEnter() {
     if (isEditing() && !props.blocks?.length) {
       window.parent?.postMessage({
@@ -33,7 +30,6 @@ function RenderBlocks(props) {
       }, "*");
     }
   }
-
   const builderContext = useContext(BuilderContext);
   return <div class={className() + " " + css({
     display: "flex",
@@ -46,7 +42,6 @@ function RenderBlocks(props) {
         <For each={props.blocks}>
           {(block, _index) => {
           const index = _index();
-
           return <RenderBlock key={"render-block-" + block.id} block={block} context={builderContext}></RenderBlock>;
         }}
         </For>
@@ -55,12 +50,10 @@ function RenderBlocks(props) {
         <For each={props.blocks}>
           {(block, _index) => {
           const index = _index();
-
           return <BlockStyles key={"block-style-" + block.id} block={block} context={builderContext}></BlockStyles>;
         }}
         </For>
       </Show>
     </div>;
 }
-
 export default RenderBlocks;

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

@@ -0,0 +1,4 @@
+function BuilderEditing(props) {
+  return <div></div>;
+}
+export default BuilderEditing;

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

@@ -1,5 +1,4 @@
 import RenderInlinedStyles from "../../render-inlined-styles.jsx";
-
 function RenderContentStyles(props) {
   function getCssFromFont(font) {
     // TODO: compute what font sizes are used and only load those.......
@@ -7,7 +6,6 @@ function RenderContentStyles(props) {
     const name = family.split(",")[0];
     const url = font.fileUrl ?? font?.files?.regular;
     let str = "";
-
     if (url && family && name) {
       str += `
 @font-face {
@@ -18,18 +16,14 @@ function RenderContentStyles(props) {
 }
         `.trim();
     }
-
     if (font.files) {
       for (const weight in font.files) {
         const isNumber = String(Number(weight)) === weight;
-
         if (!isNumber) {
           continue;
-        } // TODO: maybe limit number loaded
-
-
+        }
+        // TODO: maybe limit number loaded
         const weightUrl = font.files[weight];
-
         if (weightUrl && weightUrl !== url) {
           str += `
 @font-face {
@@ -42,10 +36,8 @@ function RenderContentStyles(props) {
         }
       }
     }
-
     return str;
   }
-
   function getFontCss({
     customFonts
   }) {
@@ -56,7 +48,6 @@ function RenderContentStyles(props) {
     // TODO: separate internal data from external
     return customFonts?.map(font => this.getCssFromFont(font))?.join(" ") || "";
   }
-
   function injectedStyles() {
     return `
 ${props.cssCode || ""}
@@ -64,8 +55,6 @@ ${getFontCss({
       customFonts: props.customFonts
     })}`;
   }
-
   return <RenderInlinedStyles styles={injectedStyles()}></RenderInlinedStyles>;
 }
-
 export default RenderContentStyles;