@builder.io/sdk-solid 0.0.8-21 → 0.0.8-24

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

@@ -1,43 +1,38 @@
-import { useContext, Show } from "solid-js";
-import { createMutable } from "solid-js/store";
+import { Show } from "solid-js";
+import { getMaxWidthQueryForSize } from "../../constants/device-sizes.js";
 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";
+import RenderInlinedStyles from "../render-inlined-styles.jsx";
 
 function BlockStyles(props) {
-  const state = createMutable({
-    get useBlock() {
-      return getProcessedBlock({
-        block: props.block,
-        state: builderContext.state,
-        context: builderContext.context,
-        evaluateBindings: true
-      });
-    },
+  function useBlock() {
+    return getProcessedBlock({
+      block: props.block,
+      state: props.context.state,
+      context: props.context.context,
+      shouldEvaluateBindings: true
+    });
+  }
 
-    get css() {
-      const styles = state.useBlock.responsiveStyles;
-      const largeStyles = styles?.large;
-      const mediumStyles = styles?.medium;
-      const smallStyles = styles?.small;
-      return `
-      ${largeStyles ? `.${state.useBlock.id} {${convertStyleMaptoCSS(largeStyles)}}` : ""}
+  function css() {
+    const styles = useBlock().responsiveStyles;
+    const largeStyles = styles?.large;
+    const mediumStyles = styles?.medium;
+    const smallStyles = styles?.small;
+    return `
+      ${largeStyles ? `.${useBlock().id} {${convertStyleMaptoCSS(largeStyles)}}` : ""}
       ${mediumStyles ? `${getMaxWidthQueryForSize("medium")} {
-            .${state.useBlock.id} {${convertStyleMaptoCSS(mediumStyles)}}
+            .${useBlock().id} {${convertStyleMaptoCSS(mediumStyles)}}
           }` : ""}
       ${smallStyles ? `${getMaxWidthQueryForSize("small")} {
-            .${state.useBlock.id} {${convertStyleMaptoCSS(smallStyles)}}
+            .${useBlock().id} {${convertStyleMaptoCSS(smallStyles)}}
           }` : ""}
     }`;
-    }
+  }
 
-  });
-  const builderContext = useContext(BuilderContext);
   return <Show when={TARGET === "vue2" || TARGET === "vue3" || TARGET === "svelte"}>
-      <RenderInlinedStyles styles={state.css}></RenderInlinedStyles>
+      <RenderInlinedStyles styles={css()}></RenderInlinedStyles>
     </Show>;
 }
 

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

@@ -1,7 +1,5 @@
-import { useContext, Show, For } from "solid-js";
+import { Show, For } from "solid-js";
 import { Dynamic } from "solid-js/web";
-import { createMutable } from "solid-js/store";
-import BuilderContext from "../../context/builder.context";
 import { getBlockActions } from "../../functions/get-block-actions.js";
 import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
 import { getBlockProperties } from "../../functions/get-block-properties.js";
@@ -15,163 +13,161 @@ import RenderComponent from "./render-component.jsx";
 import RenderRepeatedBlock from "./render-repeated-block.jsx";
 
 function RenderBlock(props) {
-  const state = createMutable({
-    get component() {
-      const componentName = getProcessedBlock({
-        block: props.block,
-        state: builderContext.state,
-        context: builderContext.context,
-        evaluateBindings: false
-      }).component?.name;
-
-      if (!componentName) {
-        return null;
-      }
-
-      const ref = builderContext.registeredComponents[componentName];
-
-      if (!ref) {
-        // TODO: Public doc page with more info about this message
-        console.warn(`
+  function component() {
+    const componentName = getProcessedBlock({
+      block: props.block,
+      state: props.context.state,
+      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(`
         Could not find a registered component named "${componentName}". 
         If you registered it, is the file that registered it imported by the file that needs to render it?`);
-        return undefined;
-      } else {
-        return ref;
-      }
-    },
-
-    get componentInfo() {
-      if (state.component) {
-        const {
-          component: _,
-          ...info
-        } = state.component;
-        return info;
-      } else {
-        return undefined;
-      }
-    },
-
-    get componentRef() {
-      return state.component?.component;
-    },
-
-    get tagName() {
-      return getBlockTag(state.useBlock);
-    },
-
-    get useBlock() {
-      return state.repeatItemData ? props.block : getProcessedBlock({
-        block: props.block,
-        state: builderContext.state,
-        context: builderContext.context,
-        evaluateBindings: true
-      });
-    },
-
-    get attributes() {
-      return { ...getBlockProperties(state.useBlock),
-        ...getBlockActions({
-          block: state.useBlock,
-          state: builderContext.state,
-          context: builderContext.context
-        }),
-        style: getBlockStyles(state.useBlock)
-      };
-    },
-
-    get shouldWrap() {
-      return !state.componentInfo?.noWrap;
-    },
-
-    get componentOptions() {
-      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 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`,
-      // but still receive and need to render children.
-      // return state.componentInfo?.canHaveChildren ? state.useBlock.children : [];
-      return state.useBlock.children ?? [];
-    },
-
-    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`.
-       * 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.
-       */
-      const shouldRenderChildrenOutsideRef = !state.componentRef && !state.repeatItemData;
-      return shouldRenderChildrenOutsideRef ? state.children : [];
-    },
+      return undefined;
+    } else {
+      return ref;
+    }
+  }
+
+  function componentInfo() {
+    if (component()) {
+      const {
+        component: _,
+        ...info
+      } = component();
+      return info;
+    } else {
+      return undefined;
+    }
+  }
+
+  function componentRef() {
+    return component()?.component;
+  }
+
+  function tagName() {
+    return getBlockTag(useBlock());
+  }
+
+  function useBlock() {
+    return repeatItemData() ? props.block : getProcessedBlock({
+      block: props.block,
+      state: props.context.state,
+      context: props.context.context,
+      shouldEvaluateBindings: true
+    });
+  }
+
+  function attributes() {
+    return { ...getBlockProperties(useBlock()),
+      ...getBlockActions({
+        block: useBlock(),
+        state: props.context.state,
+        context: props.context.context
+      }),
+      style: getBlockStyles(useBlock())
+    };
+  }
+
+  function shouldWrap() {
+    return !componentInfo()?.noWrap;
+  }
+
+  function componentOptions() {
+    return { ...getBlockComponentOptions(useBlock()),
 
-    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.
+       * 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.
        */
-      const {
-        repeat,
-        ...blockWithoutRepeat
-      } = props.block;
-
-      if (!repeat?.collection) {
-        return undefined;
-      }
-
-      const itemsArray = evaluate({
-        code: repeat.collection,
-        state: builderContext.state,
-        context: builderContext.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: { ...builderContext,
-          state: { ...builderContext.state,
-            $index: index,
-            $item: item,
-            [itemNameToUse]: item,
-            [`$${itemNameToUse}Index`]: index
-          }
-        },
-        block: blockWithoutRepeat
-      }));
-      return repeatArray;
+      ...(shouldWrap() ? {} : {
+        attributes: attributes()
+      })
+    };
+  }
+
+  function renderComponentProps() {
+    return {
+      blockChildren: children(),
+      componentRef: componentRef(),
+      componentOptions: componentOptions(),
+      context: props.context
+    };
+  }
+
+  function 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`,
+    // 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,
+     * 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.
+     */
+    const shouldRenderChildrenOutsideRef = !componentRef() && !repeatItemData();
+    return shouldRenderChildrenOutsideRef ? children() : [];
+  }
+
+  function repeatItemData() {
+    /**
+     * we don't use `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 itemsArray = evaluate({
+      code: repeat.collection,
+      state: props.context.state,
+      context: props.context.context
+    });
+
+    if (!Array.isArray(itemsArray)) {
+      return undefined;
     }
 
-  });
-  const builderContext = useContext(BuilderContext);
-  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}>
-          <Show when={state.repeatItemData}>
-            <For each={state.repeatItemData}>
+    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,
+          $index: index,
+          $item: item,
+          [itemNameToUse]: item,
+          [`$${itemNameToUse}Index`]: index
+        }
+      },
+      block: blockWithoutRepeat
+    }));
+    return repeatArray;
+  }
+
+  return <Show fallback={<RenderComponent {...renderComponentProps()} context={props.context}></RenderComponent>} when={shouldWrap()}>
+      <Show fallback={<Dynamic {...attributes()} component={tagName()}></Dynamic>} when={!isEmptyHtmlElement(tagName())}>
+        <Dynamic {...attributes()} component={tagName()}>
+          <Show when={repeatItemData()}>
+            <For each={repeatItemData()}>
               {(data, _index) => {
               const index = _index();
 
@@ -179,21 +175,21 @@ function RenderBlock(props) {
             }}
             </For>
           </Show>
-          <Show when={!state.repeatItemData}>
-            <RenderComponent {...state.renderComponentProps}></RenderComponent>
+          <Show when={!repeatItemData()}>
+            <RenderComponent {...renderComponentProps()}></RenderComponent>
           </Show>
-          <For each={state.childrenWithoutParentComponent}>
+          <For each={childrenWithoutParentComponent()}>
             {(child, _index) => {
             const index = _index();
 
-            return <RenderBlock key={"render-block-" + child.id} block={child}></RenderBlock>;
+            return <RenderBlock key={"render-block-" + child.id} block={child} context={props.context}></RenderBlock>;
           }}
           </For>
-          <For each={state.childrenWithoutParentComponent}>
+          <For each={childrenWithoutParentComponent()}>
             {(child, _index) => {
             const index = _index();
 
-            return <BlockStyles key={"block-style-" + child.id} block={child}></BlockStyles>;
+            return <BlockStyles key={"block-style-" + child.id} block={child} context={props.context}></BlockStyles>;
           }}
           </For>
         </Dynamic>

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

@@ -10,14 +10,14 @@ function RenderComponent(props) {
           {(child, _index) => {
           const index = _index();
 
-          return <RenderBlock key={"render-block-" + child.id} block={child}></RenderBlock>;
+          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}></BlockStyles>;
+          return <BlockStyles key={"block-style-" + child.id} block={child} context={props.context}></BlockStyles>;
         }}
         </For>
       </Dynamic>

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

@@ -25,7 +25,7 @@ function RenderRepeatedBlock(props) {
     }
 
   }} component={BuilderContext.Provider}>
-      <RenderBlock block={props.block}></RenderBlock>
+      <RenderBlock block={props.block} context={props.repeatContext}></RenderBlock>
     </Dynamic>;
 }
 

package/src/components/render-blocks.jsx

@@ -1,54 +1,53 @@
-import { Show, For } from "solid-js";
-import { createMutable } from "solid-js/store";
+import { useContext, Show, For } from "solid-js";
 import { css } from "solid-styled-components";
+import BuilderContext from "../context/builder.context";
 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) {
-  const state = createMutable({
-    get className() {
-      return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
-    },
+  function className() {
+    return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
+  }
 
-    onClick() {
-      if (isEditing() && !props.blocks?.length) {
-        window.parent?.postMessage({
-          type: "builder.clickEmptyBlocks",
-          data: {
-            parentElementId: props.parent,
-            dataPath: props.path
-          }
-        }, "*");
-      }
-    },
+  function onClick() {
+    if (isEditing() && !props.blocks?.length) {
+      window.parent?.postMessage({
+        type: "builder.clickEmptyBlocks",
+        data: {
+          parentElementId: props.parent,
+          dataPath: props.path
+        }
+      }, "*");
+    }
+  }
 
-    onMouseEnter() {
-      if (isEditing() && !props.blocks?.length) {
-        window.parent?.postMessage({
-          type: "builder.hoverEmptyBlocks",
-          data: {
-            parentElementId: props.parent,
-            dataPath: props.path
-          }
-        }, "*");
-      }
+  function onMouseEnter() {
+    if (isEditing() && !props.blocks?.length) {
+      window.parent?.postMessage({
+        type: "builder.hoverEmptyBlocks",
+        data: {
+          parentElementId: props.parent,
+          dataPath: props.path
+        }
+      }, "*");
     }
+  }
 
-  });
-  return <div class={state.className + " " + css({
+  const builderContext = useContext(BuilderContext);
+  return <div class={className() + " " + css({
     display: "flex",
     flexDirection: "column",
     alignItems: "stretch"
   })} builder-path={props.path} builder-parent-id={props.parent} dataSet={{
-    class: state.className
-  }} onClick={event => state.onClick()} onMouseEnter={event => state.onMouseEnter()}>
+    class: className()
+  }} onClick={event => onClick()} onMouseEnter={event => onMouseEnter()}>
       <Show when={props.blocks}>
         <For each={props.blocks}>
           {(block, _index) => {
           const index = _index();
 
-          return <RenderBlock key={"render-block-" + block.id} block={block}></RenderBlock>;
+          return <RenderBlock key={"render-block-" + block.id} block={block} context={builderContext}></RenderBlock>;
         }}
         </For>
       </Show>
@@ -57,7 +56,7 @@ function RenderBlocks(props) {
           {(block, _index) => {
           const index = _index();
 
-          return <BlockStyles key={"block-style-" + block.id} block={block}></BlockStyles>;
+          return <BlockStyles key={"block-style-" + block.id} block={block} context={builderContext}></BlockStyles>;
         }}
         </For>
       </Show>

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

@@ -1,17 +1,15 @@
-import { createMutable } from "solid-js/store";
 import RenderInlinedStyles from "../../render-inlined-styles.jsx";
 
 function RenderContentStyles(props) {
-  const state = createMutable({
-    getCssFromFont(font) {
-      // TODO: compute what font sizes are used and only load those.......
-      const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
-      const name = family.split(",")[0];
-      const url = font.fileUrl ?? font?.files?.regular;
-      let str = "";
+  function getCssFromFont(font) {
+    // TODO: compute what font sizes are used and only load those.......
+    const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
+    const name = family.split(",")[0];
+    const url = font.fileUrl ?? font?.files?.regular;
+    let str = "";
 
-      if (url && family && name) {
-        str += `
+    if (url && family && name) {
+      str += `
 @font-face {
   font-family: "${family}";
   src: local("${name}"), url('${url}') format('woff2');
@@ -19,21 +17,21 @@ function RenderContentStyles(props) {
   font-weight: 400;
 }
         `.trim();
-      }
+    }
 
-      if (font.files) {
-        for (const weight in font.files) {
-          const isNumber = String(Number(weight)) === weight;
+    if (font.files) {
+      for (const weight in font.files) {
+        const isNumber = String(Number(weight)) === weight;
 
-          if (!isNumber) {
-            continue;
-          } // TODO: maybe limit number loaded
+        if (!isNumber) {
+          continue;
+        } // TODO: maybe limit number loaded
 
 
-          const weightUrl = font.files[weight];
+        const weightUrl = font.files[weight];
 
-          if (weightUrl && weightUrl !== url) {
-            str += `
+        if (weightUrl && weightUrl !== url) {
+          str += `
 @font-face {
   font-family: "${family}";
   src: url('${weightUrl}') format('woff2');
@@ -41,34 +39,33 @@ function RenderContentStyles(props) {
   font-weight: ${weight};
 }
           `.trim();
-          }
         }
       }
+    }
 
-      return str;
-    },
+    return str;
+  }
 
-    getFontCss({
-      customFonts
-    }) {
-      // TODO: flag for this
-      // if (!this.builder.allowCustomFonts) {
-      //   return '';
-      // }
-      // TODO: separate internal data from external
-      return customFonts?.map(font => this.getCssFromFont(font))?.join(" ") || "";
-    },
+  function getFontCss({
+    customFonts
+  }) {
+    // TODO: flag for this
+    // if (!this.builder.allowCustomFonts) {
+    //   return '';
+    // }
+    // TODO: separate internal data from external
+    return customFonts?.map(font => this.getCssFromFont(font))?.join(" ") || "";
+  }
 
-    get injectedStyles() {
-      return `
+  function injectedStyles() {
+    return `
 ${props.cssCode || ""}
-${state.getFontCss({
-        customFonts: props.customFonts
-      })}`;
-    }
+${getFontCss({
+      customFonts: props.customFonts
+    })}`;
+  }
 
-  });
-  return <RenderInlinedStyles styles={state.injectedStyles}></RenderInlinedStyles>;
+  return <RenderInlinedStyles styles={injectedStyles()}></RenderInlinedStyles>;
 }
 
 export default RenderContentStyles;