@builder.io/sdk-react 0.4.4 → 0.5.0

package/dist/sdk/blocks/util.js

@@ -1,13 +0,0 @@
-/**
- * Input attributes that are functions must be converted to strings before being serialized to JSON.
- */
-// eslint-disable-next-line @typescript-eslint/ban-types
-export const serializeFn = (fnValue) => {
-    const fnStr = fnValue.toString().trim();
-    // we need to account for a few different fn syntaxes:
-    // 1. `function name(args) => {code}`
-    // 2. `name(args) => {code}`
-    // 3. `(args) => {}`
-    const appendFunction = !fnStr.startsWith('function') && !fnStr.startsWith('(');
-    return `return (${appendFunction ? 'function ' : ''}${fnStr}).apply(this, arguments)`;
-};

package/dist/sdk/blocks/video/component-info.d.ts

@@ -1,2 +0,0 @@
-import type { ComponentInfo } from '../../types/components';
-export declare const componentInfo: ComponentInfo;

package/dist/sdk/components/render-block/render-block.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-export type RenderBlockProps = {
-    block: BuilderBlock;
-    context: BuilderContextInterface;
-};
-import type { BuilderContextInterface } from "../../context/types.js";
-import type { BuilderBlock } from "../../types/builder-block.js";
-declare function RenderBlock(props: RenderBlockProps): JSX.Element;
-export default RenderBlock;

package/dist/sdk/components/render-block/render-block.helpers.d.ts

@@ -1,12 +0,0 @@
-import type { BuilderContextInterface } from '../../context/types';
-import type { BuilderBlock } from '../../types/builder-block';
-import type { RepeatData } from './types';
-export declare const isEmptyHtmlElement: (tagName: unknown) => boolean;
-export declare const getComponent: ({ block, context, }: {
-    block: BuilderBlock;
-    context: BuilderContextInterface;
-}) => import("../../context/types").RegisteredComponent;
-export declare const getRepeatItemData: ({ block, context, }: {
-    block: BuilderBlock;
-    context: BuilderContextInterface;
-}) => RepeatData[] | undefined;

package/dist/sdk/components/render-block/render-block.js

@@ -1,115 +0,0 @@
-'use client';
-import * as React from "react";
-import { useState } 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 { getProcessedBlock } from "../../functions/get-processed-block.js";
-import BlockStyles from "./block-styles";
-import { getComponent, getRepeatItemData, isEmptyHtmlElement, } from "./render-block.helpers.js";
-import RenderRepeatedBlock from "./render-repeated-block";
-import { TARGET } from "../../constants/target.js";
-import RenderComponent from "./render-component";
-import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
-function RenderBlock(props) {
-    const [component, setComponent] = useState(() => getComponent({
-        block: props.block,
-        context: props.context,
-    }));
-    function repeatItem() {
-        return getRepeatItemData({
-            block: props.block,
-            context: props.context,
-        });
-    }
-    function useBlock() {
-        return repeatItem()
-            ? props.block
-            : getProcessedBlock({
-                block: props.block,
-                localState: props.context.localState,
-                rootState: props.context.rootState,
-                rootSetState: props.context.rootSetState,
-                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;
-    }
-    function actions() {
-        return getBlockActions({
-            block: useBlock(),
-            rootState: props.context.rootState,
-            rootSetState: props.context.rootSetState,
-            localState: props.context.localState,
-            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 && !repeatItem();
-        return shouldRenderChildrenOutsideRef ? useBlock().children ?? [] : [];
-    }
-    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 [childrenContext, setChildrenContext] = useState(() => props.context);
-    return (React.createElement(React.Fragment, null, canShowBlock() ? (React.createElement(React.Fragment, null, !component?.noWrap ? (React.createElement(React.Fragment, null,
-        isEmptyHtmlElement(Tag) ? (React.createElement(React.Fragment, null,
-            React.createElement(Tag, { ...attributes(), ...actions() }))) : null,
-        !isEmptyHtmlElement(Tag) && repeatItem() ? (React.createElement(React.Fragment, null, repeatItem()?.map((data, index) => (React.createElement(RenderRepeatedBlock, { key: index, repeatContext: data.context, block: data.block }))))) : null,
-        !isEmptyHtmlElement(Tag) && !repeatItem() ? (React.createElement(React.Fragment, null,
-            React.createElement(Tag, { ...attributes(), ...actions() },
-                React.createElement(RenderComponent, { ...renderComponentProps() }),
-                childrenWithoutParentComponent()?.map((child) => (React.createElement(RenderBlock, { key: "render-block-" + child.id, block: child, context: childrenContext }))),
-                childrenWithoutParentComponent()?.map((child) => (React.createElement(BlockStyles, { key: "block-style-" + child.id, block: child, context: childrenContext })))))) : null)) : (React.createElement(React.Fragment, null,
-        React.createElement(RenderComponent, { ...renderComponentProps() }))))) : null));
-}
-export default RenderBlock;

package/dist/sdk/components/render-block/render-component.d.ts

@@ -1,17 +0,0 @@
-/// <reference types="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 type { BuilderContextInterface } from "../../context/types.js";
-declare function RenderComponent(props: RenderComponentProps): JSX.Element;
-export default RenderComponent;

package/dist/sdk/components/render-block/render-component.js

@@ -1,11 +0,0 @@
-'use client';
-import * as React from "react";
-import BlockStyles from "./block-styles";
-import RenderBlock from "./render-block";
-function RenderComponent(props) {
-    return (React.createElement(React.Fragment, null, props.componentRef ? (React.createElement(React.Fragment, null,
-        React.createElement(props.componentRef, { ...props.componentOptions },
-            props.blockChildren?.map((child) => (React.createElement(RenderBlock, { key: "render-block-" + child.id, block: child, context: props.context }))),
-            props.blockChildren?.map((child) => (React.createElement(BlockStyles, { key: "block-style-" + child.id, block: child, context: props.context })))))) : null));
-}
-export default RenderComponent;

package/dist/sdk/components/render-block/render-repeated-block.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-type Props = {
-    block: BuilderBlock;
-    repeatContext: BuilderContextInterface;
-};
-import type { BuilderContextInterface } from "../../context/types.js";
-import type { BuilderBlock } from "../../types/builder-block";
-declare function RenderRepeatedBlock(props: Props): JSX.Element;
-export default RenderRepeatedBlock;

package/dist/sdk/components/render-block/render-repeated-block.js

@@ -1,11 +0,0 @@
-'use client';
-import * as React from "react";
-import { useState } from "react";
-import BuilderContext from "../../context/builder.context.js";
-import RenderBlock from "./render-block";
-function RenderRepeatedBlock(props) {
-    const [store, setStore] = useState(() => props.repeatContext);
-    return (React.createElement(BuilderContext.Provider, { value: store },
-        React.createElement(RenderBlock, { block: props.block, context: store })));
-}
-export default RenderRepeatedBlock;

package/dist/sdk/components/render-blocks.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-export type RenderBlockProps = {
-    blocks?: BuilderBlock[];
-    parent?: string;
-    path?: string;
-    styleProp?: Record<string, any>;
-};
-import type { BuilderBlock } from "../types/builder-block.js";
-declare function RenderBlocks(props: RenderBlockProps): JSX.Element;
-export default RenderBlocks;

package/dist/sdk/components/render-content/builder-editing.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare function BuilderEditing(props: any): JSX.Element;
-export default BuilderEditing;

package/dist/sdk/components/render-content/builder-editing.js

@@ -1,6 +0,0 @@
-'use client';
-import * as React from "react";
-function BuilderEditing(props) {
-    return React.createElement("div", null);
-}
-export default BuilderEditing;

package/dist/sdk/components/render-content/components/render-styles.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-interface Props {
-    cssCode?: string;
-    customFonts?: CustomFont[];
-    contentId?: string;
-}
-import type { CustomFont } from "./render-styles.helpers";
-declare function RenderContentStyles(props: Props): JSX.Element;
-export default RenderContentStyles;

package/dist/sdk/components/render-content/index.d.ts

@@ -1 +0,0 @@
-export { default } from './render-content';

package/dist/sdk/components/render-content/index.js

@@ -1 +0,0 @@
-export { default } from './render-content';

package/dist/sdk/components/render-content/render-content.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type { RenderContentProps } from "./render-content.types.js";
-declare function RenderContent(props: RenderContentProps): JSX.Element;
-export default RenderContent;

package/dist/sdk/components/render-content/render-content.helpers.d.ts

@@ -1,7 +0,0 @@
-import type { BuilderContent } from '../../types/builder-content';
-import type { Nullable } from '../../types/typescript';
-import type { RenderContentProps } from './render-content.types';
-export declare const getContextStateInitialValue: ({ content, data, locale, }: Pick<RenderContentProps, 'content' | 'data' | 'locale'>) => {
-    [x: string]: unknown;
-};
-export declare const getContentInitialValue: ({ content, data, }: Pick<RenderContentProps, 'content' | 'data'>) => Nullable<BuilderContent>;

package/dist/sdk/components/render-content/render-content.helpers.js

@@ -1,30 +0,0 @@
-export const getContextStateInitialValue = ({ content, data, locale, }) => {
-    const defaultValues = {};
-    // set default values for content state inputs
-    content?.data?.inputs?.forEach((input) => {
-        if (input.name &&
-            input.defaultValue !== undefined &&
-            content?.data?.state &&
-            content.data.state[input.name] === undefined) {
-            defaultValues[input.name] = input.defaultValue;
-        }
-    });
-    const stateToUse = {
-        ...content?.data?.state,
-        ...data,
-        ...(locale ? { locale } : {}),
-    };
-    return { ...defaultValues, ...stateToUse };
-};
-export const getContentInitialValue = ({ content, data, }) => {
-    return !content
-        ? undefined
-        : {
-            ...content,
-            data: {
-                ...content?.data,
-                ...data,
-            },
-            meta: content?.meta,
-        };
-};

package/dist/sdk/components/render-content/render-content.types.d.ts

@@ -1,38 +0,0 @@
-import type { BuilderRenderContext, RegisteredComponent, BuilderRenderState } from '../../context/types';
-import type { BuilderContent } from '../../types/builder-content';
-import type { Nullable } from '../../types/typescript';
-import type { ApiVersion } from '../../types/api-version';
-export interface RenderContentProps {
-    content?: Nullable<BuilderContent>;
-    model?: string;
-    data?: {
-        [key: string]: any;
-    };
-    context?: BuilderRenderContext;
-    apiKey: string;
-    apiVersion?: ApiVersion;
-    customComponents?: RegisteredComponent[];
-    canTrack?: boolean;
-    locale?: string;
-    /** @deprecated use `enrich` instead **/
-    includeRefs?: boolean;
-    enrich?: boolean;
-    /**
-     * TO-DO: improve qwik generator to not remap this name for non-HTML tags, then name it `className`
-     */
-    classNameProp?: string;
-    hideContent?: boolean;
-    parentContentId?: string;
-    isSsrAbTest?: boolean;
-}
-export interface BuilderComponentStateChange {
-    state: BuilderRenderState;
-    ref: {
-        name?: string;
-        props?: {
-            builderBlock?: {
-                id?: string;
-            };
-        };
-    };
-}

package/dist/sdk/components/render-content-variants/helpers.d.ts

@@ -1,17 +0,0 @@
-import type { Nullable } from '../../helpers/nullable';
-import type { BuilderContent } from '../../types/builder-content';
-export declare const getVariants: (content: Nullable<BuilderContent>) => import("../../types/builder-content").BuilderContentVariation[];
-export declare const checkShouldRunVariants: ({ canTrack, content, }: {
-    canTrack: Nullable<boolean>;
-    content: Nullable<BuilderContent>;
-}) => boolean;
-type VariantData = {
-    id: string;
-    testRatio?: number;
-};
-export declare const getVariantsScriptString: (variants: VariantData[], contentId: string) => string;
-export declare const getRenderContentScriptString: ({ parentContentId, contentId, }: {
-    contentId: string;
-    parentContentId: string;
-}) => string;
-export {};

package/dist/sdk/components/render-content-variants/render-content-variants.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-type VariantsProviderProps = RenderContentProps;
-import type { RenderContentProps } from "../render-content/render-content.types";
-declare function RenderContentVariants(props: VariantsProviderProps): JSX.Element;
-export default RenderContentVariants;

package/dist/sdk/components/render-content-variants/render-content-variants.js

@@ -1,37 +0,0 @@
-'use client';
-import * as React from "react";
-import { useState } from "react";
-import { checkShouldRunVariants, getVariants, getVariantsScriptString, } from "./helpers";
-import RenderContent from "../render-content/render-content";
-import { getDefaultCanTrack } from "../../helpers/canTrack";
-import RenderInlinedStyles from "../render-inlined-styles";
-import { handleABTestingSync } from "../../helpers/ab-tests";
-function RenderContentVariants(props) {
-    const [variantScriptStr, setVariantScriptStr] = useState(() => getVariantsScriptString(getVariants(props.content).map((value) => ({
-        id: value.id,
-        testRatio: value.testRatio,
-    })), props.content?.id || ""));
-    const [shouldRenderVariants, setShouldRenderVariants] = useState(() => checkShouldRunVariants({
-        canTrack: getDefaultCanTrack(props.canTrack),
-        content: props.content,
-    }));
-    const [hideVariantsStyleString, setHideVariantsStyleString] = useState(() => getVariants(props.content)
-        .map((value) => `.variant-${value.id} { display: none; } `)
-        .join(""));
-    const [contentToRender, setContentToRender] = useState(() => checkShouldRunVariants({
-        canTrack: getDefaultCanTrack(props.canTrack),
-        content: props.content,
-    })
-        ? props.content
-        : handleABTestingSync({
-            item: props.content,
-            canTrack: getDefaultCanTrack(props.canTrack),
-        }));
-    return (React.createElement(React.Fragment, null,
-        shouldRenderVariants ? (React.createElement(React.Fragment, null,
-            React.createElement(RenderInlinedStyles, { id: `variants-styles-${props.content?.id}`, styles: hideVariantsStyleString }),
-            React.createElement("script", { id: `variants-script-${props.content?.id}`, dangerouslySetInnerHTML: { __html: variantScriptStr } }),
-            getVariants(props.content)?.map((variant) => (React.createElement(RenderContent, { key: variant.id, content: variant, apiKey: props.apiKey, apiVersion: props.apiVersion, canTrack: props.canTrack, customComponents: props.customComponents, hideContent: true, parentContentId: props.content?.id, isSsrAbTest: shouldRenderVariants }))))) : null,
-        React.createElement(RenderContent, { model: props.model, content: contentToRender, apiKey: props.apiKey, apiVersion: props.apiVersion, canTrack: props.canTrack, customComponents: props.customComponents, classNameProp: `variant-${props.content?.id}`, parentContentId: props.content?.id, isSsrAbTest: shouldRenderVariants })));
-}
-export default RenderContentVariants;

package/dist/sdk/components/render-inlined-styles.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-interface Props {
-    styles: string;
-    id?: string;
-}
-declare function RenderInlinedStyles(props: Props): JSX.Element;
-export default RenderInlinedStyles;

package/dist/sdk/constants/sdk-version.d.ts

@@ -1 +0,0 @@
-export declare const SDK_VERSION = "0.4.4";

package/dist/sdk/constants/sdk-version.js

@@ -1 +0,0 @@
-export const SDK_VERSION = "0.4.4";

package/dist/sdk/functions/get-block-actions.js

@@ -1,15 +0,0 @@
-import { getEventHandlerName } from './event-handler-name.js';
-import { createEventHandler } from './get-block-actions-handler.js';
-export function getBlockActions(options) {
-    const obj = {};
-    const optionActions = options.block.actions ?? {};
-    for (const key in optionActions) {
-        // eslint-disable-next-line no-prototype-builtins
-        if (!optionActions.hasOwnProperty(key)) {
-            continue;
-        }
-        const value = optionActions[key];
-        obj[getEventHandlerName(key)] = createEventHandler(value, options);
-    }
-    return obj;
-}

package/dist/sdk/functions/get-block-properties.d.ts

@@ -1,7 +0,0 @@
-import type { BuilderBlock } from '../types/builder-block.js';
-export declare function getBlockProperties(block: BuilderBlock): {
-    'builder-id': string;
-    style: string | Partial<CSSStyleDeclaration>;
-    class: string;
-    href: any;
-};

package/dist/sdk/functions/get-content/ab-testing.d.ts

@@ -1,5 +0,0 @@
-import type { BuilderContent } from '../../types/builder-content.js';
-import type { CanTrack } from '../../types/can-track.js';
-export declare const handleABTesting: ({ item, canTrack, }: {
-    item: BuilderContent;
-} & CanTrack) => Promise<void>;

package/dist/sdk/functions/get-content/ab-testing.js

@@ -1,78 +0,0 @@
-import { getContentVariationCookie, setContentVariationCookie, } from '../../helpers/ab-tests.js';
-import { checkIsDefined } from '../../helpers/nullable.js';
-const checkIsBuilderContentWithVariations = (item) => checkIsDefined(item.id) &&
-    checkIsDefined(item.variations) &&
-    Object.keys(item.variations).length > 0;
-/**
- * Randomly assign a variation to this user and store it in cookies/storage
- */
-const getRandomVariationId = ({ id, variations, }) => {
-    let n = 0;
-    const random = Math.random();
-    // loop over variations test ratios, incrementing a counter,
-    // until we find the variation that this user should be assigned to
-    for (const id in variations) {
-        const testRatio = variations[id]?.testRatio;
-        n += testRatio;
-        if (random < n) {
-            return id;
-        }
-    }
-    // `item.variations` does not include the default variation
-    // if we arrive here, then it means that the random number fits in the default variation bucket
-    return id;
-};
-const getTestFields = ({ item, testGroupId, }) => {
-    const variationValue = item.variations[testGroupId];
-    if (testGroupId === item.id ||
-        // handle edge-case where `testGroupId` points to non-existing variation
-        !variationValue) {
-        return {
-            testVariationId: item.id,
-            testVariationName: 'Default',
-        };
-    }
-    else {
-        return {
-            data: variationValue.data,
-            testVariationId: variationValue.id,
-            testVariationName: variationValue.name || (variationValue.id === item.id ? 'Default' : ''),
-        };
-    }
-};
-const getContentVariation = async ({ item, canTrack, }) => {
-    // try to find test variation in cookies/storage
-    const testGroupId = await getContentVariationCookie({
-        canTrack,
-        contentId: item.id,
-    });
-    const testFields = testGroupId
-        ? getTestFields({ item, testGroupId })
-        : undefined;
-    if (testFields) {
-        return testFields;
-    }
-    else {
-        // if variation not found in storage, assign a random variation to this user
-        const randomVariationId = getRandomVariationId({
-            variations: item.variations,
-            id: item.id,
-        });
-        // store variation in cookies/storage
-        setContentVariationCookie({
-            contentId: item.id,
-            value: randomVariationId,
-            canTrack,
-        }).catch((err) => {
-            console.error('could not store A/B test variation: ', err);
-        });
-        return getTestFields({ item, testGroupId: randomVariationId });
-    }
-};
-export const handleABTesting = async ({ item, canTrack, }) => {
-    if (!checkIsBuilderContentWithVariations(item)) {
-        return;
-    }
-    const variationValue = await getContentVariation({ item, canTrack });
-    Object.assign(item, variationValue);
-};

package/dist/sdk/functions/is-editing.js

@@ -1,7 +0,0 @@
-import { TARGET } from '../constants/target.js';
-import { isIframe } from './is-iframe.js';
-export function isEditing() {
-    return (isIframe() &&
-        (TARGET === 'reactNative' ||
-            window.location.search.indexOf('builder.frameEditing=') !== -1));
-}

package/dist/sdk/functions/register-component.js

@@ -1,26 +0,0 @@
-import { serializeFn } from '../blocks/util.js';
-import { fastClone } from './fast-clone.js';
-/**
- * @deprecated.  Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.
- */
-export const components = [];
-/**
- * @deprecated.  Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.
- */
-export function registerComponent(component, info) {
-    components.push({ component, ...info });
-    console.warn('registerComponent is deprecated. Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.');
-    return component;
-}
-export const createRegisterComponentMessage = ({ component: _, ...info }) => ({
-    type: 'builder.registerComponent',
-    data: prepareComponentInfoToSend(info),
-});
-const serializeValue = (value) => typeof value === 'function' ? serializeFn(value) : fastClone(value);
-const prepareComponentInfoToSend = ({ inputs, ...info }) => ({
-    ...fastClone(info),
-    inputs: inputs?.map((input) => Object.entries(input).reduce((acc, [key, value]) => ({
-        ...acc,
-        [key]: serializeValue(value),
-    }), {})),
-});

package/dist/sdk/functions/set.js

@@ -1,21 +0,0 @@
-/**
- * Minimal implementation of lodash's _.set
- * https://lodash.com/docs/4.17.15#set
- *
- * See ./set.test.ts for usage examples
- */
-export const set = (obj, _path, value) => {
-    if (Object(obj) !== obj) {
-        return obj;
-    }
-    const path = Array.isArray(_path)
-        ? _path
-        : _path.toString().match(/[^.[\]]+/g);
-    path
-        .slice(0, -1)
-        .reduce((a, c, i) => Object(a[c]) === a[c]
-        ? a[c]
-        : (a[c] =
-            Math.abs(Number(path[i + 1])) >> 0 === +path[i + 1] ? [] : {}), obj)[path[path.length - 1]] = value;
-    return obj;
-};

package/dist/sdk/functions/transform-block-properties.d.ts

@@ -1 +0,0 @@
-export declare function transformBlockProperties<T>(properties: T): T;