@builder.io/sdk-react 0.2.3-4 → 0.3.1

package/packages/react/src/components/render-block/block-styles.tsx

@@ -1,98 +0,0 @@
-"use client";
-import * as React from "react";
-
-export type BlockStylesProps = {
-  block: BuilderBlock;
-  context: BuilderContextInterface;
-};
-import {
-  getMaxWidthQueryForSize,
-  getSizesForBreakpoints,
-} from "../../constants/device-sizes.js";
-import { TARGET } from "../../constants/target.js";
-import type { BuilderContextInterface } from "../../context/types.js";
-import { getProcessedBlock } from "../../functions/get-processed-block.js";
-import { createCssClass } from "../../helpers/css.js";
-import { checkIsDefined } from "../../helpers/nullable.js";
-import type { BuilderBlock } from "../../types/builder-block.js";
-import RenderInlinedStyles from "../render-inlined-styles";
-
-function BlockStyles(props: BlockStylesProps) {
-  function useBlock() {
-    return getProcessedBlock({
-      block: props.block,
-      state: props.context.state,
-      context: props.context.context,
-      shouldEvaluateBindings: true,
-    });
-  }
-
-  function canShowBlock() {
-    // only render styles for blocks that are visible
-    if (checkIsDefined(useBlock().hide)) {
-      return !useBlock().hide;
-    }
-
-    if (checkIsDefined(useBlock().show)) {
-      return useBlock().show;
-    }
-
-    return true;
-  }
-
-  function css() {
-    const styles = 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 = useBlock().id;
-
-    if (!className) {
-      return "";
-    }
-
-    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" && css() && canShowBlock() ? (
-        <>
-          <RenderInlinedStyles styles={css()} />
-        </>
-      ) : null}
-    </>
-  );
-}
-
-export default BlockStyles;

package/packages/react/src/components/render-block/render-block.helpers.ts

@@ -1,138 +0,0 @@
-import type {
-  BuilderContextInterface,
-  BuilderRenderState,
-} from '../../context/types';
-import { evaluate } from '../../functions/evaluate';
-import { getProcessedBlock } from '../../functions/get-processed-block';
-import type { BuilderBlock } from '../../types/builder-block';
-import type { RepeatData } from './types';
-
-/**
- * https://developer.mozilla.org/en-US/docs/Glossary/Empty_element
- */
-const EMPTY_HTML_ELEMENTS = [
-  'area',
-  'base',
-  'br',
-  'col',
-  'embed',
-  'hr',
-  'img',
-  'input',
-  'keygen',
-  'link',
-  'meta',
-  'param',
-  'source',
-  'track',
-  'wbr',
-];
-
-export const isEmptyHtmlElement = (tagName: unknown) => {
-  return (
-    typeof tagName === 'string' &&
-    EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase())
-  );
-};
-
-export const getComponent = ({
-  block,
-  context,
-}: {
-  block: BuilderBlock;
-  context: BuilderContextInterface;
-}) => {
-  const componentName = getProcessedBlock({
-    block,
-    state: context.state,
-    context: context.context,
-    shouldEvaluateBindings: false,
-  }).component?.name;
-
-  if (!componentName) {
-    return null;
-  }
-
-  const ref = 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;
-  }
-};
-
-export const getRepeatItemData = ({
-  block,
-  context,
-}: {
-  block: BuilderBlock;
-  context: BuilderContextInterface;
-}): RepeatData[] | undefined => {
-  /**
-   * 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 } = block;
-
-  if (!repeat?.collection) {
-    return undefined;
-  }
-
-  const itemsArray = evaluate({
-    code: repeat.collection,
-    state: context.state,
-    context: 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<RepeatData>((item, index) => ({
-    context: {
-      ...context,
-      state: {
-        ...context.state,
-        $index: index,
-        $item: item,
-        [itemNameToUse]: item,
-        [`$${itemNameToUse}Index`]: index,
-      },
-    },
-    block: blockWithoutRepeat,
-  }));
-
-  return repeatArray;
-};
-
-export const getProxyState = (
-  context: BuilderContextInterface
-): BuilderContextInterface['state'] => {
-  if (typeof Proxy === 'undefined') {
-    console.error(
-      'no Proxy available in this environment, cannot proxy state.'
-    );
-    return context.state;
-  }
-
-  const useState = new Proxy(context.state, {
-    set: (obj, prop: keyof BuilderRenderState, value) => {
-      // set the value on the state object, so that the event handler instantly gets the update.
-      obj[prop] = value;
-
-      // set the value in the context, so that the rest of the app gets the update.
-      context.setState?.(obj);
-      return true;
-    },
-  });
-  return useState;
-};

package/packages/react/src/components/render-block/render-block.tsx

@@ -1,216 +0,0 @@
-"use client";
-import * as React from "react";
-import { useState } from "react";
-
-export type RenderBlockProps = {
-  block: BuilderBlock;
-  context: BuilderContextInterface;
-};
-import type { BuilderContextInterface } from "../../context/types.js";
-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 { getProcessedBlock } from "../../functions/get-processed-block.js";
-import type { BuilderBlock } from "../../types/builder-block.js";
-import BlockStyles from "./block-styles";
-import {
-  getComponent,
-  getProxyState,
-  getRepeatItemData,
-  isEmptyHtmlElement,
-} from "./render-block.helpers.js";
-import type { RenderComponentProps } from "./render-component";
-import RenderRepeatedBlock from "./render-repeated-block";
-import { TARGET } from "../../constants/target.js";
-import { extractTextStyles } from "../../functions/extract-text-styles.js";
-import RenderComponent from "./render-component";
-import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
-
-function RenderBlock(props: RenderBlockProps) {
-  const [component, setComponent] = useState(() =>
-    getComponent({
-      block: props.block,
-      context: props.context,
-    })
-  );
-
-  const [repeatItemData, setRepeatItemData] = useState(() =>
-    getRepeatItemData({
-      block: props.block,
-      context: props.context,
-    })
-  );
-
-  function useBlock() {
-    return repeatItemData
-      ? props.block
-      : getProcessedBlock({
-          block: props.block,
-          state: props.context.state,
-          context: props.context.context,
-          shouldEvaluateBindings: true,
-        });
-  }
-
-  const [tag, setTag] = useState(() => props.block.tagName || "div");
-
-  function canShowBlock() {
-    if ("hide" in useBlock()) {
-      return !useBlock().hide;
-    }
-
-    if ("show" in useBlock()) {
-      return useBlock().show;
-    }
-
-    return true;
-  }
-
-  const [proxyState, setProxyState] = useState(() =>
-    getProxyState(props.context)
-  );
-
-  function actions() {
-    return getBlockActions({
-      block: useBlock(),
-      state: TARGET === "qwik" ? props.context.state : proxyState,
-      context: props.context.context,
-    });
-  }
-
-  function attributes() {
-    const blockProperties = getBlockProperties(useBlock());
-    return {
-      ...blockProperties,
-      ...(TARGET === "reactNative"
-        ? {
-            style: getReactNativeBlockStyles({
-              block: useBlock(),
-              context: props.context,
-              blockStyles: blockProperties.style,
-            }),
-          }
-        : {}),
-    };
-  }
-
-  function 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 =
-      !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,
-      apiVersion: props.context.apiVersion,
-      state: props.context.state,
-      content: props.context.content,
-      context: props.context.context,
-      setState: props.context.setState,
-      registeredComponents: props.context.registeredComponents,
-      inheritedStyles: getInheritedTextStyles(),
-    };
-  }
-
-  function renderComponentProps() {
-    return {
-      blockChildren: useBlock().children ?? [],
-      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.
-         */
-        ...(!component?.noWrap
-          ? {}
-          : {
-              attributes: { ...attributes(), ...actions() },
-            }),
-      },
-      context: childrenContext(),
-    };
-  }
-
-  const TagRef = tag;
-
-  return (
-    <>
-      {canShowBlock() ? (
-        <>
-          {!component?.noWrap ? (
-            <>
-              {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()}>
-                    <RenderComponent {...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}
-            </>
-          ) : (
-            <>
-              <RenderComponent {...renderComponentProps()} />
-            </>
-          )}
-        </>
-      ) : null}
-    </>
-  );
-}
-
-export default RenderBlock;

package/packages/react/src/components/render-block/render-component.tsx

@@ -1,52 +0,0 @@
-"use client";
-import * as React from "react";
-
-type ComponentOptions = {
-  [index: string]: any;
-  attributes?: {
-    [index: string]: any;
-  };
-};
-export interface RenderComponentProps {
-  componentRef: any;
-  componentOptions: ComponentOptions;
-  blockChildren: BuilderBlock[];
-  context: BuilderContextInterface;
-}
-
-import type { BuilderBlock } from "../../types/builder-block.js";
-import BlockStyles from "./block-styles";
-import RenderBlock from "./render-block";
-import type { BuilderContextInterface } from "../../context/types.js";
-
-function RenderComponent(props: RenderComponentProps) {
-  const ComponentRefRef = props.componentRef;
-
-  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 default RenderComponent;

package/packages/react/src/components/render-block/render-repeated-block.tsx

@@ -1,43 +0,0 @@
-"use client";
-import * as React from "react";
-import { useContext } from "react";
-
-type Props = {
-  block: BuilderBlock;
-  repeatContext: BuilderContextInterface;
-};
-/**
- * We can't make this a generic `ProvideContext` function because Vue 2 won't support root slots, e.g.
- *
- * ```vue
- * <template>
- *  <slot></slot>
- * </template>
- * ```
- */
-
-import BuilderContext from "../../context/builder.context.js";
-import type { BuilderContextInterface } from "../../context/types.js";
-import type { BuilderBlock } from "../../types/builder-block";
-import RenderBlock from "./render-block";
-
-function RenderRepeatedBlock(props: Props) {
-  return (
-    <BuilderContext.Provider
-      value={{
-        content: props.repeatContext.content,
-        state: props.repeatContext.state,
-        setState: props.repeatContext.setState,
-        context: props.repeatContext.context,
-        apiKey: props.repeatContext.apiKey,
-        registeredComponents: props.repeatContext.registeredComponents,
-        inheritedStyles: props.repeatContext.inheritedStyles,
-        apiVersion: props.repeatContext.apiVersion,
-      }}
-    >
-      <RenderBlock block={props.block} context={props.repeatContext} />
-    </BuilderContext.Provider>
-  );
-}
-
-export default RenderRepeatedBlock;

package/packages/react/src/components/render-block/types.ts

@@ -1,7 +0,0 @@
-import type { BuilderContextInterface } from '../../context/types.js';
-import type { BuilderBlock } from '../../types/builder-block.js';
-
-export interface RepeatData {
-  block: BuilderBlock;
-  context: BuilderContextInterface;
-}

package/packages/react/src/components/render-blocks.tsx

@@ -1,97 +0,0 @@
-"use client";
-import * as React from "react";
-import { useContext } from "react";
-
-export type RenderBlockProps = {
-  blocks?: BuilderBlock[];
-  parent?: string;
-  path?: string;
-  styleProp?: Record<string, any>;
-};
-import BuilderContext from "../context/builder.context.js";
-import { isEditing } from "../functions/is-editing.js";
-import type { BuilderBlock } from "../types/builder-block.js";
-import BlockStyles from "./render-block/block-styles";
-import RenderBlock from "./render-block/render-block";
-
-function RenderBlocks(props: RenderBlockProps) {
-  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,
-          },
-        },
-        "*"
-      );
-    }
-  }
-
-  function onMouseEnter() {
-    if (isEditing() && !props.blocks?.length) {
-      window.parent?.postMessage(
-        {
-          type: "builder.hoverEmptyBlocks",
-          data: {
-            parentElementId: props.parent,
-            dataPath: props.path,
-          },
-        },
-        "*"
-      );
-    }
-  }
-
-  const builderContext = useContext(BuilderContext);
-
-  return (
-    <>
-      <div
-        className={className() + " div-251582f2"}
-        builder-path={props.path}
-        builder-parent-id={props.parent}
-        style={props.styleProp}
-        onClick={(event) => onClick()}
-        onMouseEnter={(event) => onMouseEnter()}
-      >
-        {props.blocks ? (
-          <>
-            {props.blocks?.map((block) => (
-              <RenderBlock
-                key={"render-block-" + block.id}
-                block={block}
-                context={builderContext}
-              />
-            ))}
-          </>
-        ) : null}
-
-        {props.blocks ? (
-          <>
-            {props.blocks?.map((block) => (
-              <BlockStyles
-                key={"block-style-" + block.id}
-                block={block}
-                context={builderContext}
-              />
-            ))}
-          </>
-        ) : null}
-      </div>
-      <style>{`.div-251582f2 {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}`}</style>
-    </>
-  );
-}
-
-export default RenderBlocks;

package/packages/react/src/components/render-content/builder-editing.tsx

@@ -1,8 +0,0 @@
-"use client";
-import * as React from "react";
-
-function BuilderEditing(props: any) {
-  return <div />;
-}
-
-export default BuilderEditing;