@builder.io/sdk-react 0.1.2 → 0.1.4

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

@@ -1,34 +1,3 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 import * as React from "react";
 import { useState } from "react";
 import { getBlockActions } from "../../functions/get-block-actions.js";
@@ -37,119 +6,161 @@ 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 BlockStyles from "./block-styles.js";
 import { isEmptyHtmlElement } from "./render-block.helpers.js";
-import RenderRepeatedBlock from "./render-repeated-block.jsx";
+import RenderRepeatedBlock from "./render-repeated-block.js";
 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 RenderComponentWithContext from "./render-component-with-context.js";
+import RenderComponent from "./render-component.js";
 import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
-function RenderBlock(props) {
-  var _a, _b, _c;
+
+export default function RenderBlock(props) {
   function component() {
-    var _a2;
-    const componentName = (_a2 = getProcessedBlock({
+    const componentName = getProcessedBlock({
       block: props.block,
       state: props.context.state,
       context: props.context.context,
-      shouldEvaluateBindings: false
-    }).component) == null ? void 0 : _a2.name;
+      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 void 0;
+      return undefined;
     } else {
       return ref;
     }
   }
+
   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 __spreadValues(__spreadValues({}, blockProperties), TARGET === "reactNative" ? {
-      style: getReactNativeBlockStyles({
-        block: useBlock(),
-        context: props.context,
-        blockStyles: blockProperties.style
-      })
-    } : {});
+    return {
+      ...blockProperties,
+      ...(TARGET === "reactNative"
+        ? {
+            style: getReactNativeBlockStyles({
+              block: useBlock(),
+              context: props.context,
+              blockStyles: blockProperties.style,
+            }),
+          }
+        : {}),
+    };
   }
+
   function shouldWrap() {
-    var _a2;
-    return !((_a2 = component == null ? void 0 : component()) == null ? void 0 : _a2.noWrap);
+    return !component?.()?.noWrap;
   }
+
   function renderComponentProps() {
-    var _a2, _b2, _c2, _d;
     return {
       blockChildren: useChildren(),
-      componentRef: (_a2 = component == null ? void 0 : component()) == null ? void 0 : _a2.component,
-      componentOptions: __spreadProps(__spreadValues(__spreadValues({}, getBlockComponentOptions(useBlock())), shouldWrap() ? {} : {
-        attributes: __spreadValues(__spreadValues({}, attributes()), actions())
-      }), {
-        customBreakpoints: (_d = (_c2 = (_b2 = childrenContext == null ? void 0 : childrenContext()) == null ? void 0 : _b2.content) == null ? void 0 : _c2.meta) == null ? void 0 : _d.breakpoints
-      }),
-      context: childrenContext()
+      componentRef: component?.()?.component,
+      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.
+         */
+        ...(shouldWrap()
+          ? {}
+          : {
+              attributes: {
+                ...attributes(),
+                ...actions(),
+              },
+            }),
+        customBreakpoints: childrenContext?.()?.content?.meta?.breakpoints,
+      },
+      context: childrenContext(),
     };
   }
+
   function useChildren() {
-    var _a2;
-    return (_a2 = useBlock().children) != null ? _a2 : [];
+    // 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 ? useBlock().children : [];
+    return useBlock().children ?? [];
   }
+
   function childrenWithoutParentComponent() {
-    var _a2;
-    const shouldRenderChildrenOutsideRef = !((_a2 = component == null ? void 0 : component()) == null ? void 0 : _a2.component) && !repeatItemData();
+    /**
+     * 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 =
+      !component?.()?.component && !repeatItemData();
     return shouldRenderChildrenOutsideRef ? useChildren() : [];
   }
+
   function repeatItemData() {
-    const _a2 = props.block, { repeat } = _a2, blockWithoutRepeat = __objRest(_a2, ["repeat"]);
-    if (!(repeat == null ? void 0 : repeat.collection)) {
-      return void 0;
+    /**
+     * 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
+      context: props.context.context,
     });
     if (!Array.isArray(itemsArray)) {
-      return void 0;
+      return undefined;
     }
     const collectionName = repeat.collection.split(".").pop();
-    const itemNameToUse = repeat.itemName || (collectionName ? collectionName + "Item" : "item");
+    const itemNameToUse =
+      repeat.itemName || (collectionName ? collectionName + "Item" : "item");
     const repeatArray = itemsArray.map((item, index) => ({
-      context: __spreadProps(__spreadValues({}, props.context), {
-        state: __spreadProps(__spreadValues({}, props.context.state), {
+      context: {
+        ...props.context,
+        state: {
+          ...props.context.state,
           $index: index,
           $item: item,
           [itemNameToUse]: item,
-          [`$${itemNameToUse}Index`]: index
-        })
-      }),
-      block: blockWithoutRepeat
+          [`$${itemNameToUse}Index`]: index,
+        },
+      },
+      block: blockWithoutRepeat,
     }));
     return repeatArray;
   }
+
   function inheritedTextStyles() {
     if (TARGET !== "reactNative") {
       return {};
@@ -157,10 +168,11 @@ function RenderBlock(props) {
     const styles = getReactNativeBlockStyles({
       block: useBlock(),
       context: props.context,
-      blockStyles: attributes().style
+      blockStyles: attributes().style,
     });
     return extractTextStyles(styles);
   }
+
   function childrenContext() {
     return {
       apiKey: props.context.apiKey,
@@ -168,35 +180,73 @@ function RenderBlock(props) {
       content: props.context.content,
       context: props.context.context,
       registeredComponents: props.context.registeredComponents,
-      inheritedStyles: inheritedTextStyles()
+      inheritedStyles: inheritedTextStyles(),
     };
   }
+
   function renderComponentTag() {
     if (TARGET === "reactNative") {
       return RenderComponentWithContext;
     } else if (TARGET === "vue3") {
+      // vue3 expects a string for the component tag
       return "RenderComponent";
     } else {
       return RenderComponent;
     }
   }
+
   const [componentInfo, setComponentInfo] = useState(() => null);
+
   const RenderComponentTagRef = renderComponentTag();
   const TagRef = tag();
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, shouldWrap() ? /* @__PURE__ */ React.createElement(React.Fragment, null, isEmptyHtmlElement(tag()) ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TagRef, __spreadValues(__spreadValues({}, attributes()), actions()))) : null, !isEmptyHtmlElement(tag()) && repeatItemData() ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_a = repeatItemData()) == null ? void 0 : _a.map((data, index) => /* @__PURE__ */ React.createElement(RenderRepeatedBlock, {
-    key: index,
-    repeatContext: data.context,
-    block: data.block
-  }))) : null, !isEmptyHtmlElement(tag()) && !repeatItemData() ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TagRef, __spreadValues(__spreadValues({}, attributes()), actions()), /* @__PURE__ */ React.createElement(RenderComponentTagRef, __spreadValues({}, renderComponentProps())), (_b = childrenWithoutParentComponent()) == null ? void 0 : _b.map((child) => /* @__PURE__ */ React.createElement(RenderBlock, {
-    key: "render-block-" + child.id,
-    block: child,
-    context: childrenContext()
-  })), (_c = childrenWithoutParentComponent()) == null ? void 0 : _c.map((child) => /* @__PURE__ */ React.createElement(BlockStyles, {
-    key: "block-style-" + child.id,
-    block: child,
-    context: childrenContext()
-  })))) : null) : /* @__PURE__ */ React.createElement(RenderComponentTagRef, __spreadValues({}, renderComponentProps())));
+
+  return (
+    <>
+      {shouldWrap() ? (
+        <>
+          {isEmptyHtmlElement(tag()) ? (
+            <>
+              <TagRef {...attributes()} {...actions()} />
+            </>
+          ) : null}
+          {!isEmptyHtmlElement(tag()) && repeatItemData() ? (
+            <>
+              {repeatItemData()?.map((data, index) => (
+                <RenderRepeatedBlock
+                  key={index}
+                  repeatContext={data.context}
+                  block={data.block}
+                />
+              ))}
+            </>
+          ) : null}
+          {!isEmptyHtmlElement(tag()) && !repeatItemData() ? (
+            <>
+              <TagRef {...attributes()} {...actions()}>
+                <RenderComponentTagRef {...renderComponentProps()} />
+
+                {childrenWithoutParentComponent()?.map((child) => (
+                  <RenderBlock
+                    key={"render-block-" + child.id}
+                    block={child}
+                    context={childrenContext()}
+                  />
+                ))}
+
+                {childrenWithoutParentComponent()?.map((child) => (
+                  <BlockStyles
+                    key={"block-style-" + child.id}
+                    block={child}
+                    context={childrenContext()}
+                  />
+                ))}
+              </TagRef>
+            </>
+          ) : null}
+        </>
+      ) : (
+        <RenderComponentTagRef {...renderComponentProps()} />
+      )}
+    </>
+  );
 }
-export {
-  RenderBlock as default
-};

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

@@ -1,35 +1,38 @@
 import * as React from "react";
+import { useContext } from "react";
 import BuilderContext from "../../context/builder.context.js";
-import RenderComponent from "./render-component.jsx";
-function RenderComponentWithContext(props) {
-  return /* @__PURE__ */ React.createElement(BuilderContext.Provider, {
-    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;
-      }
-    }
-  }, /* @__PURE__ */ React.createElement(RenderComponent, {
-    componentRef: props.componentRef,
-    componentOptions: props.componentOptions,
-    blockChildren: props.blockChildren,
-    context: props.context
-  }));
+import RenderComponent from "./render-component.js";
+
+export default function RenderComponentWithContext(props) {
+  return (
+    <BuilderContext.Provider
+      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;
+        },
+      }}
+    >
+      <RenderComponent
+        componentRef={props.componentRef}
+        componentOptions={props.componentOptions}
+        blockChildren={props.blockChildren}
+        context={props.context}
+      />
+    </BuilderContext.Provider>
+  );
 }
-export {
-  RenderComponentWithContext as default
-};

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

@@ -1,35 +1,33 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
 import * as React from "react";
-import BlockStyles from "./block-styles.jsx";
-import RenderBlock from "./render-block.jsx";
-function RenderComponent(props) {
-  var _a, _b;
+import BlockStyles from "./block-styles.js";
+import RenderBlock from "./render-block.js";
+
+export default function RenderComponent(props) {
   const ComponentRefRef = props.componentRef;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.componentRef ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ComponentRefRef, __spreadValues({}, props.componentOptions), (_a = props.blockChildren) == null ? void 0 : _a.map((child) => /* @__PURE__ */ React.createElement(RenderBlock, {
-    key: "render-block-" + child.id,
-    block: child,
-    context: props.context
-  })), (_b = props.blockChildren) == null ? void 0 : _b.map((child) => /* @__PURE__ */ React.createElement(BlockStyles, {
-    key: "block-style-" + child.id,
-    block: child,
-    context: props.context
-  })))) : null);
+
+  return (
+    <>
+      {props.componentRef ? (
+        <>
+          <ComponentRefRef {...props.componentOptions}>
+            {props.blockChildren?.map((child) => (
+              <RenderBlock
+                key={"render-block-" + child.id}
+                block={child}
+                context={props.context}
+              />
+            ))}
+
+            {props.blockChildren?.map((child) => (
+              <BlockStyles
+                key={"block-style-" + child.id}
+                block={child}
+                context={props.context}
+              />
+            ))}
+          </ComponentRefRef>
+        </>
+      ) : null}
+    </>
+  );
 }
-export {
-  RenderComponent as default
-};

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

@@ -1,33 +1,33 @@
 import * as React from "react";
+import { useContext } from "react";
 import BuilderContext from "../../context/builder.context.js";
-import RenderBlock from "./render-block.jsx";
-function RenderRepeatedBlock(props) {
-  return /* @__PURE__ */ React.createElement(BuilderContext.Provider, {
-    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;
-      }
-    }
-  }, /* @__PURE__ */ React.createElement(RenderBlock, {
-    block: props.block,
-    context: props.repeatContext
-  }));
+import RenderBlock from "./render-block.js";
+
+export default function RenderRepeatedBlock(props) {
+  return (
+    <BuilderContext.Provider
+      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;
+        },
+      }}
+    >
+      <RenderBlock block={props.block} context={props.repeatContext} />
+    </BuilderContext.Provider>
+  );
 }
-export {
-  RenderRepeatedBlock as default
-};