@builder.io/sdk-react 0.1.2 → 0.1.3

package/packages/rsc/src/blocks/video/video.jsx

@@ -0,0 +1,61 @@
+import * as React from "react";
+
+export default function Video(props) {
+  const _context = { ...props["_context"] };
+
+  const state = {
+    get videoProps() {
+      return {
+        ...(props.autoPlay === true
+          ? {
+              autoPlay: true,
+            }
+          : {}),
+        ...(props.muted === true
+          ? {
+              muted: true,
+            }
+          : {}),
+        ...(props.controls === true
+          ? {
+              controls: true,
+            }
+          : {}),
+        ...(props.loop === true
+          ? {
+              loop: true,
+            }
+          : {}),
+        ...(props.playsInline === true
+          ? {
+              playsInline: true,
+            }
+          : {}),
+      };
+    },
+    get spreadProps() {
+      return {
+        ...props.attributes,
+        ...state.videoProps,
+      };
+    },
+  };
+
+  return (
+    <video
+      {...state.spreadProps}
+      style={{
+        width: "100%",
+        height: "100%",
+        ...props.attributes?.style,
+        objectFit: props.fit,
+        objectPosition: props.position,
+        // Hack to get object fit to work as expected and
+        // not have the video overflow
+        borderRadius: 1,
+      }}
+      src={props.video || "no-src"}
+      poster={props.posterImage}
+    />
+  );
+}

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.helpers.js

@@ -0,0 +1,113 @@
+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 { evaluate } from "../../functions/evaluate";
+import { getProcessedBlock } from "../../functions/get-processed-block";
+const EMPTY_HTML_ELEMENTS = [
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "keygen",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+];
+const isEmptyHtmlElement = (tagName) => {
+  return typeof tagName === "string" && EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase());
+};
+const getComponent = ({
+  block,
+  context
+}) => {
+  var _a;
+  const componentName = (_a = getProcessedBlock({
+    block,
+    state: context.state,
+    context: context.context,
+    shouldEvaluateBindings: false
+  }).component) == null ? void 0 : _a.name;
+  if (!componentName) {
+    return null;
+  }
+  const ref = context.registeredComponents[componentName];
+  if (!ref) {
+    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;
+  } else {
+    return ref;
+  }
+};
+const getRepeatItemData = ({
+  block,
+  context
+}) => {
+  const _a = block, { repeat } = _a, blockWithoutRepeat = __objRest(_a, ["repeat"]);
+  if (!(repeat == null ? void 0 : repeat.collection)) {
+    return void 0;
+  }
+  const itemsArray = evaluate({
+    code: repeat.collection,
+    state: context.state,
+    context: context.context
+  });
+  if (!Array.isArray(itemsArray)) {
+    return void 0;
+  }
+  const collectionName = repeat.collection.split(".").pop();
+  const itemNameToUse = repeat.itemName || (collectionName ? collectionName + "Item" : "item");
+  const repeatArray = itemsArray.map((item, index) => ({
+    context: __spreadProps(__spreadValues({}, context), {
+      state: __spreadProps(__spreadValues({}, context.state), {
+        $index: index,
+        $item: item,
+        [itemNameToUse]: item,
+        [`$${itemNameToUse}Index`]: index
+      })
+    }),
+    block: blockWithoutRepeat
+  }));
+  return repeatArray;
+};
+export {
+  getComponent,
+  getRepeatItemData,
+  isEmptyHtmlElement
+};

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

@@ -0,0 +1,183 @@
+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 BlockStyles from "./block-styles.js";
+import {
+  getComponent,
+  getRepeatItemData,
+  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 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 = {
+    component: getComponent({
+      block: props.block,
+      context: props.context,
+    }),
+    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 renderComponentProps() {
+      return {
+        blockChildren: state.useBlock.children ?? [],
+        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.component?.noWrap
+            ? {}
+            : {
+                attributes: {
+                  ...state.attributes,
+                  ...state.actions,
+                },
+              }),
+          customBreakpoints: state.childrenContext?.content?.meta?.breakpoints,
+        },
+        context: state.childrenContext,
+      };
+    },
+    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.useBlock.children ?? []
+        : [];
+    },
+    repeatItemData: getRepeatItemData({
+      block: props.block,
+      context: props.context,
+    }),
+    get childrenContext() {
+      const getInheritedTextStyles = () => {
+        if (TARGET !== "reactNative") {
+          return {};
+        }
+        return extractTextStyles(
+          getReactNativeBlockStyles({
+            block: state.useBlock,
+            context: props.context,
+            blockStyles: state.attributes.style,
+          })
+        );
+      };
+      return {
+        apiKey: props.context.apiKey,
+        state: props.context.state,
+        content: props.context.content,
+        context: props.context.context,
+        registeredComponents: props.context.registeredComponents,
+        inheritedStyles: getInheritedTextStyles(),
+      };
+    },
+  };
+
+  const TagRef = state.tag;
+
+  return (
+    <>
+      {!state.component?.noWrap ? (
+        <>
+          {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}>
+                <RenderComponent
+                  {...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}
+        </>
+      ) : (
+        <RenderComponent {...state.renderComponentProps} _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,24 @@
+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 = {
+    content: props.repeatContext.content,
+    state: props.repeatContext.state,
+    context: props.repeatContext.context,
+    apiKey: props.repeatContext.apiKey,
+    registeredComponents: props.repeatContext.registeredComponents,
+    inheritedStyles: 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} />
+  );
+}

package/packages/rsc/src/components/render-content/index.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./render-content.js";
+export {
+  default2 as default
+};