@builder.io/sdk-react 0.1.3 → 0.1.5

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

@@ -1,61 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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());
-};
-export {
-  isEmptyHtmlElement
-};

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

@@ -1,251 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,90 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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

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