@builder.io/sdk-solid 0.1.2 → 0.1.3-0

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

@@ -1,78 +1,80 @@
-import { Show, For } from "solid-js";
+import { Show, For, createSignal } from "solid-js";
 import { Dynamic } from "solid-js/web";
+
 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";
 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 {
+  getComponent,
+  getRepeatItemData,
+  isEmptyHtmlElement,
+} from "./render-block.helpers.js";
 import RenderRepeatedBlock from "./render-repeated-block.jsx";
 import { TARGET } from "../../constants/target.js";
 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({
+  const [component, setComponent] = createSignal(
+    getComponent({
       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;
-    }
-  }
+      context: props.context,
+    })
+  );
+
+  const [repeatItemData, setRepeatItemData] = createSignal(
+    getRepeatItemData({
+      block: props.block,
+      context: props.context,
+    })
+  );
+
   function tag() {
     return getBlockTag(useBlock());
   }
+
   function useBlock() {
-    return repeatItemData() ? props.block : getProcessedBlock({
-      block: props.block,
-      state: props.context.state,
-      context: props.context.context,
-      shouldEvaluateBindings: true
-    });
+    return repeatItemData()
+      ? props.block
+      : getProcessedBlock({
+          block: props.block,
+          state: props.context.state,
+          context: props.context.context,
+          shouldEvaluateBindings: true,
+        });
   }
+
   function actions() {
     return getBlockActions({
       block: useBlock(),
       state: props.context.state,
-      context: props.context.context
+      context: props.context.context,
     });
   }
+
   function attributes() {
     const blockProperties = getBlockProperties(useBlock());
     return {
       ...blockProperties,
-      ...(TARGET === "reactNative" ? {
-        style: getReactNativeBlockStyles({
-          block: useBlock(),
-          context: props.context,
-          blockStyles: blockProperties.style
-        })
-      } : {})
+      ...(TARGET === "reactNative"
+        ? {
+            style: getReactNativeBlockStyles({
+              block: useBlock(),
+              context: props.context,
+              blockStyles: blockProperties.style,
+            }),
+          }
+        : {}),
     };
   }
-  function shouldWrap() {
-    return !component()?.noWrap;
-  }
+
   function renderComponentProps() {
     return {
-      blockChildren: useChildren(),
+      blockChildren: useBlock().children ?? [],
       componentRef: component()?.component,
       componentOptions: {
         ...getBlockComponentOptions(useBlock()),
@@ -80,24 +82,20 @@ function RenderBlock(props) {
          * 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.
          */
-        ...(shouldWrap() ? {} : {
-          attributes: {
-            ...attributes(),
-            ...actions()
-          }
-        }),
-        customBreakpoints: childrenContext()?.content?.meta?.breakpoints
+        ...(!component()?.noWrap
+          ? {}
+          : {
+              attributes: {
+                ...attributes(),
+                ...actions(),
+              },
+            }),
+        customBreakpoints: childrenContext()?.content?.meta?.breakpoints,
       },
-      context: childrenContext()
+      context: childrenContext(),
     };
   }
-  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,
@@ -105,106 +103,87 @@ function RenderBlock(props) {
      * 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 = !component()?.component && !repeatItemData();
-    return shouldRenderChildrenOutsideRef ? useChildren() : [];
-  }
-  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 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;
-  }
-  function inheritedTextStyles() {
-    if (TARGET !== "reactNative") {
-      return {};
-    }
-    const styles = getReactNativeBlockStyles({
-      block: useBlock(),
-      context: props.context,
-      blockStyles: attributes().style
-    });
-    return extractTextStyles(styles);
+    const shouldRenderChildrenOutsideRef =
+      !component()?.component && !repeatItemData();
+    return shouldRenderChildrenOutsideRef ? useBlock().children ?? [] : [];
   }
+
   function childrenContext() {
+    const getInheritedTextStyles = () => {
+      if (TARGET !== "reactNative") {
+        return {};
+      }
+      return extractTextStyles(
+        getReactNativeBlockStyles({
+          block: useBlock(),
+          context: props.context,
+          blockStyles: attributes().style,
+        })
+      );
+    };
     return {
       apiKey: props.context.apiKey,
       state: props.context.state,
       content: props.context.content,
       context: props.context.context,
       registeredComponents: props.context.registeredComponents,
-      inheritedStyles: inheritedTextStyles()
+      inheritedStyles: getInheritedTextStyles(),
     };
   }
-  function renderComponentTag() {
-    if (TARGET === "reactNative") {
-      return RenderComponentWithContext;
-    } else if (TARGET === "vue3") {
-      // vue3 expects a string for the component tag
-      return "RenderComponent";
-    } else {
-      return RenderComponent;
-    }
-  }
-  return <Show fallback={<Dynamic {...renderComponentProps()} component={renderComponentTag()}></Dynamic>} when={shouldWrap()}>
+
+  return (
+    <Show
+      fallback={<RenderComponent {...renderComponentProps()}></RenderComponent>}
+      when={!component()?.noWrap}
+    >
       <Show when={isEmptyHtmlElement(tag())}>
         <Dynamic {...attributes()} {...actions()} component={tag()}></Dynamic>
       </Show>
       <Show when={!isEmptyHtmlElement(tag()) && repeatItemData()}>
         <For each={repeatItemData()}>
           {(data, _index) => {
-          const index = _index();
-          return <RenderRepeatedBlock key={index} repeatContext={data.context} block={data.block}></RenderRepeatedBlock>;
-        }}
+            const index = _index();
+            return (
+              <RenderRepeatedBlock
+                key={index}
+                repeatContext={data.context}
+                block={data.block}
+              ></RenderRepeatedBlock>
+            );
+          }}
         </For>
       </Show>
       <Show when={!isEmptyHtmlElement(tag()) && !repeatItemData()}>
         <Dynamic {...attributes()} {...actions()} component={tag()}>
-          <Dynamic {...renderComponentProps()} component={renderComponentTag()}></Dynamic>
+          <RenderComponent {...renderComponentProps()}></RenderComponent>
           <For each={childrenWithoutParentComponent()}>
             {(child, _index) => {
-            const index = _index();
-            return <RenderBlock key={"render-block-" + child.id} block={child} context={childrenContext()}></RenderBlock>;
-          }}
+              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>;
-          }}
+              const index = _index();
+              return (
+                <BlockStyles
+                  key={"block-style-" + child.id}
+                  block={child}
+                  context={childrenContext()}
+                ></BlockStyles>
+              );
+            }}
           </For>
         </Dynamic>
       </Show>
-    </Show>;
+    </Show>
+  );
 }
-export default RenderBlock;
+
+export default RenderBlock;

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

@@ -1,23 +1,40 @@
 import { Show, For } from "solid-js";
 import { Dynamic } from "solid-js/web";
+
 import BlockStyles from "./block-styles.jsx";
 import RenderBlock from "./render-block.jsx";
+
 function RenderComponent(props) {
-  return <Show when={props.componentRef}>
+  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} context={props.context}></RenderBlock>;
-        }}
+            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>;
-        }}
+            const index = _index();
+            return (
+              <BlockStyles
+                key={"block-style-" + child.id}
+                block={child}
+                context={props.context}
+              ></BlockStyles>
+            );
+          }}
         </For>
       </Dynamic>
-    </Show>;
+    </Show>
+  );
 }
-export default RenderComponent;
+
+export default RenderComponent;

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

@@ -1,28 +1,24 @@
-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>;
+  return (
+    <BuilderContext.Provider
+      value={{
+        content: props.repeatContext.content,
+        state: props.repeatContext.state,
+        context: props.repeatContext.context,
+        apiKey: props.repeatContext.apiKey,
+        registeredComponents: props.repeatContext.registeredComponents,
+        inheritedStyles: props.repeatContext.inheritedStyles,
+      }}
+    >
+      <RenderBlock
+        block={props.block}
+        context={props.repeatContext}
+      ></RenderBlock>
+    </BuilderContext.Provider>
+  );
 }
-export default RenderRepeatedBlock;
+
+export default RenderRepeatedBlock;

package/src/components/render-blocks.jsx

@@ -1,59 +1,99 @@
-import { useContext, Show, For } from "solid-js";
+import { useContext, Show, For, createSignal } from "solid-js";
+
 import { css } from "solid-styled-components";
+
 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({
-        type: "builder.clickEmptyBlocks",
-        data: {
-          parentElementId: props.parent,
-          dataPath: props.path
-        }
-      }, "*");
+      window.parent?.postMessage(
+        {
+          type: "builder.clickEmptyBlocks",
+          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
-        }
-      }, "*");
+      window.parent?.postMessage(
+        {
+          type: "builder.hoverEmptyBlocks",
+          data: {
+            parentElementId: props.parent,
+            dataPath: props.path,
+          },
+        },
+        "*"
+      );
     }
   }
+
   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: className()
-  }} style={props.styleProp} onClick={event => onClick()} onMouseEnter={event => onMouseEnter()}>
+
+  return (
+    <div
+      class={
+        className() +
+        " " +
+        css({
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "stretch",
+        })
+      }
+      builder-path={props.path}
+      builder-parent-id={props.parent}
+      dataSet={{
+        class: className(),
+      }}
+      style={props.styleProp}
+      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} context={builderContext}></RenderBlock>;
-        }}
+            const index = _index();
+            return (
+              <RenderBlock
+                key={"render-block-" + block.id}
+                block={block}
+                context={builderContext}
+              ></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} context={builderContext}></BlockStyles>;
-        }}
+            const index = _index();
+            return (
+              <BlockStyles
+                key={"block-style-" + block.id}
+                block={block}
+                context={builderContext}
+              ></BlockStyles>
+            );
+          }}
         </For>
       </Show>
-    </div>;
+    </div>
+  );
 }
-export default RenderBlocks;
+
+export default RenderBlocks;

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

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

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

@@ -1,8 +1,13 @@
+import { createSignal } from "solid-js";
+
 import RenderInlinedStyles from "../../render-inlined-styles.jsx";
+
 function RenderContentStyles(props) {
   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 family =
+      font.family +
+      (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
     const name = family.split(",")[0];
     const url = font.fileUrl ?? font?.files?.regular;
     let str = "";
@@ -38,23 +43,27 @@ function RenderContentStyles(props) {
     }
     return str;
   }
-  function getFontCss({
-    customFonts
-  }) {
+
+  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(" ") || "";
+    return (
+      customFonts?.map((font) => this.getCssFromFont(font))?.join(" ") || ""
+    );
   }
+
   function injectedStyles() {
     return `
 ${props.cssCode || ""}
 ${getFontCss({
-      customFonts: props.customFonts
-    })}`;
+  customFonts: props.customFonts,
+})}`;
   }
+
   return <RenderInlinedStyles styles={injectedStyles()}></RenderInlinedStyles>;
 }
-export default RenderContentStyles;
+
+export default RenderContentStyles;