@builder.io/sdk-react 0.1.1 → 0.1.3

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

@@ -0,0 +1,72 @@
+import * as React from "react";
+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.js";
+
+export default function BlockStyles(props) {
+  const _context = { ...props["_context"] };
+
+  const state = {
+    get useBlock() {
+      return getProcessedBlock({
+        block: props.block,
+        state: props.context.state,
+        context: props.context.context,
+        shouldEvaluateBindings: true,
+      });
+    },
+    get css() {
+      const styles = state.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;
+      const className = state.useBlock.id;
+      const largeStylesClass = largeStyles
+        ? createCssClass({
+            className,
+            styles: largeStyles,
+          })
+        : "";
+      const mediumStylesClass = mediumStyles
+        ? createCssClass({
+            className,
+            styles: mediumStyles,
+            mediaQuery: getMaxWidthQueryForSize(
+              "medium",
+              sizesWithUpdatedBreakpoints
+            ),
+          })
+        : "";
+      const smallStylesClass = smallStyles
+        ? createCssClass({
+            className,
+            styles: smallStyles,
+            mediaQuery: getMaxWidthQueryForSize(
+              "small",
+              sizesWithUpdatedBreakpoints
+            ),
+          })
+        : "";
+      return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
+    },
+  };
+
+  return (
+    <>
+      {TARGET !== "reactNative" && state.css ? (
+        <>
+          <RenderInlinedStyles styles={state.css} _context={_context} />
+        </>
+      ) : null}
+    </>
+  );
+}

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

@@ -0,0 +1,251 @@
+import * as React from "react";
+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.js";
+import { isEmptyHtmlElement } from "./render-block.helpers.js";
+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.js";
+import RenderComponent from "./render-component.js";
+import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
+
+export default function RenderBlock(props) {
+  const _context = { ...props["_context"] };
+
+  const state = {
+    get 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 tag() {
+      return getBlockTag(state.useBlock);
+    },
+    get useBlock() {
+      return state.repeatItemData
+        ? props.block
+        : getProcessedBlock({
+            block: props.block,
+            state: props.context.state,
+            context: props.context.context,
+            shouldEvaluateBindings: true,
+          });
+    },
+    get actions() {
+      return getBlockActions({
+        block: state.useBlock,
+        state: props.context.state,
+        context: props.context.context,
+      });
+    },
+    get attributes() {
+      const blockProperties = getBlockProperties(state.useBlock);
+      return {
+        ...blockProperties,
+        ...(TARGET === "reactNative"
+          ? {
+              style: getReactNativeBlockStyles({
+                block: state.useBlock,
+                context: props.context,
+                blockStyles: blockProperties.style,
+              }),
+            }
+          : {}),
+      };
+    },
+    get shouldWrap() {
+      return !state.component?.noWrap;
+    },
+    get renderComponentProps() {
+      return {
+        blockChildren: state.useChildren,
+        componentRef: state.component?.component,
+        componentOptions: {
+          ...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,
+                  ...state.actions,
+                },
+              }),
+          customBreakpoints: state.childrenContext?.content?.meta?.breakpoints,
+        },
+        context: state.childrenContext,
+      };
+    },
+    get 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 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.component?.component && !state.repeatItemData;
+      return shouldRenderChildrenOutsideRef ? state.useChildren : [];
+    },
+    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 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;
+    },
+    get inheritedTextStyles() {
+      if (TARGET !== "reactNative") {
+        return {};
+      }
+      const styles = getReactNativeBlockStyles({
+        block: state.useBlock,
+        context: props.context,
+        blockStyles: state.attributes.style,
+      });
+      return extractTextStyles(styles);
+    },
+    get childrenContext() {
+      return {
+        apiKey: props.context.apiKey,
+        state: props.context.state,
+        content: props.context.content,
+        context: props.context.context,
+        registeredComponents: props.context.registeredComponents,
+        inheritedStyles: state.inheritedTextStyles,
+      };
+    },
+    get renderComponentTag() {
+      if (TARGET === "reactNative") {
+        return RenderComponentWithContext;
+      } else if (TARGET === "vue3") {
+        // vue3 expects a string for the component tag
+        return "RenderComponent";
+      } else {
+        return RenderComponent;
+      }
+    },
+    componentInfo: null,
+  };
+
+  const RenderComponentTagRef = state.renderComponentTag;
+  const TagRef = state.tag;
+
+  return (
+    <>
+      {state.shouldWrap ? (
+        <>
+          {isEmptyHtmlElement(state.tag) ? (
+            <>
+              <TagRef {...state.attributes} {...state.actions} />
+            </>
+          ) : null}
+          {!isEmptyHtmlElement(state.tag) && state.repeatItemData ? (
+            <>
+              {state.repeatItemData?.map((data, index) => (
+                <RenderRepeatedBlock
+                  key={index}
+                  repeatContext={data.context}
+                  block={data.block}
+                  _context={_context}
+                />
+              ))}
+            </>
+          ) : null}
+          {!isEmptyHtmlElement(state.tag) && !state.repeatItemData ? (
+            <>
+              <TagRef {...state.attributes} {...state.actions}>
+                <RenderComponentTagRef
+                  {...state.renderComponentProps}
+                  _context={_context}
+                />
+
+                {state.childrenWithoutParentComponent?.map((child) => (
+                  <RenderBlock
+                    key={"render-block-" + child.id}
+                    block={child}
+                    context={state.childrenContext}
+                    _context={_context}
+                  />
+                ))}
+
+                {state.childrenWithoutParentComponent?.map((child) => (
+                  <BlockStyles
+                    key={"block-style-" + child.id}
+                    block={child}
+                    context={state.childrenContext}
+                    _context={_context}
+                  />
+                ))}
+              </TagRef>
+            </>
+          ) : null}
+        </>
+      ) : (
+        <RenderComponentTagRef
+          {...state.renderComponentProps}
+          _context={_context}
+        />
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,38 @@
+import * as React from "react";
+import BuilderContext from "../../context/builder.context.js";
+import RenderComponent from "./render-component.js";
+
+export default function RenderComponentWithContext(props) {
+  const _context = { ...props["_context"] };
+
+  _context.BuilderContext = {
+    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;
+    },
+  };
+
+  return (
+    <RenderComponent
+      componentRef={props.componentRef}
+      componentOptions={props.componentOptions}
+      blockChildren={props.blockChildren}
+      context={props.context}
+      _context={_context}
+    />
+  );
+}

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

@@ -0,0 +1,37 @@
+import * as React from "react";
+import BlockStyles from "./block-styles.js";
+import RenderBlock from "./render-block.js";
+
+export default function RenderComponent(props) {
+  const _context = { ...props["_context"] };
+
+  const ComponentRefRef = props.componentRef;
+
+  return (
+    <>
+      {props.componentRef ? (
+        <>
+          <ComponentRefRef {...props.componentOptions} _context={_context}>
+            {props.blockChildren?.map((child) => (
+              <RenderBlock
+                key={"render-block-" + child.id}
+                block={child}
+                context={props.context}
+                _context={_context}
+              />
+            ))}
+
+            {props.blockChildren?.map((child) => (
+              <BlockStyles
+                key={"block-style-" + child.id}
+                block={child}
+                context={props.context}
+                _context={_context}
+              />
+            ))}
+          </ComponentRefRef>
+        </>
+      ) : null}
+    </>
+  );
+}

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

@@ -0,0 +1,36 @@
+import * as React from "react";
+import BuilderContext from "../../context/builder.context.js";
+import RenderBlock from "./render-block.js";
+
+export default function RenderRepeatedBlock(props) {
+  const _context = { ...props["_context"] };
+
+  _context.BuilderContext = {
+    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;
+    },
+  };
+
+  return (
+    <RenderBlock
+      block={props.block}
+      context={props.repeatContext}
+      _context={_context}
+    />
+  );
+}

package/packages/_rsc/src/components/render-blocks.jsx

@@ -0,0 +1,90 @@
+import * as React from "react";
+import BuilderContext from "../context/builder.context.js";
+import { isEditing } from "../functions/is-editing.js";
+import BlockStyles from "./render-block/block-styles.js";
+import RenderBlock from "./render-block/render-block.js";
+
+export default function RenderBlocks(props) {
+  const _context = { ...props["_context"] };
+
+  const state = {
+    get 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,
+            },
+          },
+          "*"
+        );
+      }
+    },
+    onMouseEnter() {
+      if (isEditing() && !props.blocks?.length) {
+        window.parent?.postMessage(
+          {
+            type: "builder.hoverEmptyBlocks",
+            data: {
+              parentElementId: props.parent,
+              dataPath: props.path,
+            },
+          },
+          "*"
+        );
+      }
+    },
+  };
+
+  const builderContext = _context["BuilderContext"];
+
+  return (
+    <>
+      <div
+        className={state.className + " div-4f307ff9"}
+        builder-path={props.path}
+        builder-parent-id={props.parent}
+        dataSet={{
+          class: state.className,
+        }}
+        style={props.styleProp}
+      >
+        {props.blocks ? (
+          <>
+            {props.blocks?.map((block) => (
+              <RenderBlock
+                key={"render-block-" + block.id}
+                block={block}
+                context={builderContext}
+                _context={_context}
+              />
+            ))}
+          </>
+        ) : null}
+
+        {props.blocks ? (
+          <>
+            {props.blocks?.map((block) => (
+              <BlockStyles
+                key={"block-style-" + block.id}
+                block={block}
+                context={builderContext}
+                _context={_context}
+              />
+            ))}
+          </>
+        ) : null}
+      </div>
+      <style>{`.div-4f307ff9 {
+display: flex;
+flex-direction: column;
+align-items: stretch;
+}`}</style>
+    </>
+  );
+}

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

@@ -0,0 +1,7 @@
+import * as React from "react";
+
+export default function BuilderEditing(props) {
+  const _context = { ...props["_context"] };
+
+  return <div />;
+}

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

@@ -0,0 +1,70 @@
+import * as React from "react";
+import RenderInlinedStyles from "../../render-inlined-styles.js";
+
+export default function RenderContentStyles(props) {
+  const _context = { ...props["_context"] };
+
+  const state = {
+    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 += `
+@font-face {
+  font-family: "${family}";
+  src: local("${name}"), url('${url}') format('woff2');
+  font-display: fallback;
+  font-weight: 400;
+}
+        `.trim();
+      }
+      if (font.files) {
+        for (const weight in font.files) {
+          const isNumber = String(Number(weight)) === weight;
+          if (!isNumber) {
+            continue;
+          }
+          // TODO: maybe limit number loaded
+          const weightUrl = font.files[weight];
+          if (weightUrl && weightUrl !== url) {
+            str += `
+@font-face {
+  font-family: "${family}";
+  src: url('${weightUrl}') format('woff2');
+  font-display: fallback;
+  font-weight: ${weight};
+}
+          `.trim();
+          }
+        }
+      }
+      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(" ") || ""
+      );
+    },
+    get injectedStyles() {
+      return `
+${props.cssCode || ""}
+${state.getFontCss({
+  customFonts: props.customFonts,
+})}`;
+    },
+  };
+
+  return (
+    <RenderInlinedStyles styles={state.injectedStyles} _context={_context} />
+  );
+}