@builder.io/sdk-react-nextjs 0.5.9 → 0.6.1

package/dist/components/content-variants/helpers.js

@@ -1,189 +0,0 @@
-import { TARGET } from '../../constants/target.js';
-import { isBrowser } from '../../functions/is-browser.js';
-export const getVariants = (content) => Object.values(content?.variations || {}).map(variant => ({
-    ...variant,
-    testVariationId: variant.id,
-    id: content?.id
-}));
-export const checkShouldRunVariants = ({ canTrack, content }) => {
-    const hasVariants = getVariants(content).length > 0;
-    /**
-     * We cannot SSR in React-Native.
-     */
-    if (TARGET === 'reactNative')
-        return false;
-    if (!hasVariants)
-        return false;
-    if (!canTrack)
-        return false;
-    /**
-     * For Vue 2 and Vue 3, we need to (initially) render the variants. This is to avoid hydration mismatch errors.
-     * Unlike React, Vue's hydration checks are shallow and do not check the attributes/contents of each element, so we
-     * are able to modify the `hidden` HTML attributes and `display` CSS properties without causing a hydration mismatch error.
-     *
-     * NOTE: after the app is hydrated, we strip the variants from the DOM (on mount) to reduce the amount of HTML in the DOM.
-     */
-    if (TARGET === 'vue2' || TARGET === 'vue3')
-        return true;
-    if (isBrowser())
-        return false;
-    return true;
-};
-/**
- * NOTE: when this function is stringified, single-line comments can cause weird issues when compiled by Sveltekit.
- * Make sure to write multi-line comments only.
- */
-function bldrAbTest(contentId, variants, isHydrationTarget) {
-    function getAndSetVariantId() {
-        function setCookie(name, value, days) {
-            let expires = '';
-            if (days) {
-                const date = new Date();
-                date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
-                expires = '; expires=' + date.toUTCString();
-            }
-            document.cookie = name + '=' + (value || '') + expires + '; path=/' + '; Secure; SameSite=None';
-        }
-        function getCookie(name) {
-            const nameEQ = name + '=';
-            const ca = document.cookie.split(';');
-            for (let i = 0; i < ca.length; i++) {
-                let c = ca[i];
-                while (c.charAt(0) === ' ')
-                    c = c.substring(1, c.length);
-                if (c.indexOf(nameEQ) === 0)
-                    return c.substring(nameEQ.length, c.length);
-            }
-            return null;
-        }
-        const cookieName = `builder.tests.${contentId}`;
-        const variantInCookie = getCookie(cookieName);
-        const availableIDs = variants.map(vr => vr.id).concat(contentId);
-        /**
-         * cookie already exists
-         */
-        if (variantInCookie && availableIDs.includes(variantInCookie)) {
-            return variantInCookie;
-        }
-        /**
-         * no cookie exists, find variant
-         */
-        let n = 0;
-        const random = Math.random();
-        for (let i = 0; i < variants.length; i++) {
-            const variant = variants[i];
-            const testRatio = variant.testRatio;
-            n += testRatio;
-            if (random < n) {
-                setCookie(cookieName, variant.id);
-                return variant.id;
-            }
-        }
-        /**
-         * no variant found, assign default content
-         */
-        setCookie(cookieName, contentId);
-        return contentId;
-    }
-    const winningVariantId = getAndSetVariantId();
-    const styleEl = document.currentScript?.previousElementSibling;
-    /**
-     * For React to work, we need hydration to match SSR, so we completely remove this node and the styles tag.
-     */
-    if (isHydrationTarget) {
-        styleEl.remove();
-        const thisScriptEl = document.currentScript;
-        thisScriptEl?.remove();
-    }
-    else {
-        /* update styles to hide all variants except the winning variant */
-        const newStyleStr = variants.concat({
-            id: contentId
-        }).filter(variant => variant.id !== winningVariantId).map(value => {
-            return `.variant-${value.id} {  display: none; }
-        `;
-        }).join('');
-        styleEl.innerHTML = newStyleStr;
-    }
-}
-/**
- * NOTE: when this function is stringified, single-line comments can cause weird issues when compiled by Sveltekit.
- * Make sure to write multi-line comments only.
- */
-function bldrCntntScrpt(variantContentId, defaultContentId, isHydrationTarget) {
-    if (!navigator.cookieEnabled) {
-        return;
-    }
-    function getCookie(name) {
-        const nameEQ = name + '=';
-        const ca = document.cookie.split(';');
-        for (let i = 0; i < ca.length; i++) {
-            let c = ca[i];
-            while (c.charAt(0) === ' ')
-                c = c.substring(1, c.length);
-            if (c.indexOf(nameEQ) === 0)
-                return c.substring(nameEQ.length, c.length);
-        }
-        return null;
-    }
-    const cookieName = `builder.tests.${defaultContentId}`;
-    const variantId = getCookie(cookieName);
-    const parentDiv = document.currentScript?.parentElement;
-    const variantIsDefaultContent = variantContentId === defaultContentId;
-    if (variantId === variantContentId) {
-        if (variantIsDefaultContent) {
-            /** the default content is already visible, no need to do anything */
-            return;
-        }
-        /** this is the winning variant and not already visible: remove `hidden` and `aria-hidden` attr */
-        parentDiv?.removeAttribute('hidden');
-        parentDiv?.removeAttribute('aria-hidden');
-    }
-    else {
-        if (variantIsDefaultContent) {
-            if (isHydrationTarget) {
-                /**
-                 * For React to work, we need to support hydration, in which case the first CSR will have none of the hidden variants.
-                 * So we completely remove that node.
-                 */
-                parentDiv?.remove();
-            }
-            else {
-                /** this is not the winning variant, add `hidden` attr */
-                parentDiv?.setAttribute('hidden', 'true');
-                parentDiv?.setAttribute('aria-hidden', 'true');
-            }
-        }
-        /** This is not the winning variant, and it's not the default content.
-         * There's no need to hide it, because it's already hidden.
-         */
-        return;
-    }
-    return;
-}
-const getIsHydrationTarget = (target) => target === 'react' || target === 'reactNative';
-const isHydrationTarget = getIsHydrationTarget(TARGET);
-/**
- * We hardcode explicit function names here, because the `.toString()` of a function can change depending on the bundler.
- * Some bundlers will minify the fn name, etc.
- *
- * So we hardcode the function names here, and then use those names in the script string to make sure the function names are consistent.
- */
-const AB_TEST_FN_NAME = 'builderIoAbTest';
-const CONTENT_FN_NAME = 'builderIoRenderContent';
-export const getScriptString = () => {
-    const fnStr = bldrAbTest.toString().replace(/\s+/g, ' ');
-    const fnStr2 = bldrCntntScrpt.toString().replace(/\s+/g, ' ');
-    return `
-  window.${AB_TEST_FN_NAME} = ${fnStr}
-  window.${CONTENT_FN_NAME} = ${fnStr2}
-  `;
-};
-export const getVariantsScriptString = (variants, contentId) => {
-    return `
-  window.${AB_TEST_FN_NAME}("${contentId}",${JSON.stringify(variants)}, ${isHydrationTarget})`;
-};
-export const getRenderContentScriptString = ({ contentId, variationId }) => {
-    return `
-  window.${CONTENT_FN_NAME}("${variationId}", "${contentId}", ${isHydrationTarget})`;
-};

package/dist/components/inlined-script.js

@@ -1,5 +0,0 @@
-import * as React from "react";
-function InlinedScript(props) {
-    return (React.createElement("script", { dangerouslySetInnerHTML: { __html: props.scriptStr }, id: props.id }));
-}
-export default InlinedScript;

package/dist/components/inlined-styles.js

@@ -1,5 +0,0 @@
-import * as React from "react";
-function InlinedStyles(props) {
-    return (React.createElement("style", { dangerouslySetInnerHTML: { __html: props.styles }, id: props.id }));
-}
-export default InlinedStyles;

package/dist/constants/builder-registered-components.js

@@ -1,60 +0,0 @@
-import { default as Button } from '../blocks/button/button';
-import { componentInfo as buttonComponentInfo } from '../blocks/button/component-info.js';
-import { default as Columns } from '../blocks/columns/columns';
-import { componentInfo as columnsComponentInfo } from '../blocks/columns/component-info.js';
-import { componentInfo as fragmentComponentInfo } from '../blocks/fragment/component-info.js';
-import { default as Fragment } from '../blocks/fragment/fragment';
-import { componentInfo as imageComponentInfo } from '../blocks/image/component-info.js';
-import { default as Image } from '../blocks/image/image';
-import { componentInfo as sectionComponentInfo } from '../blocks/section/component-info.js';
-import { default as Section } from '../blocks/section/section';
-import { componentInfo as symbolComponentInfo } from '../blocks/symbol/component-info.js';
-import { default as Symbol } from '../blocks/symbol/symbol';
-import { componentInfo as textComponentInfo } from '../blocks/text/component-info.js';
-import { default as Text } from '../blocks/text/text';
-import { componentInfo as videoComponentInfo } from '../blocks/video/component-info.js';
-import { default as Video } from '../blocks/video/video';
-import { componentInfo as embedComponentInfo } from '../blocks/embed/component-info.js';
-import { default as embed } from '../blocks/embed/embed';
-import { default as Img } from '../blocks/img/img';
-import { componentInfo as imgComponentInfo } from '../blocks/img/component-info.js';
-import { default as customCode } from '../blocks/custom-code/custom-code';
-import { componentInfo as customCodeInfo } from '../blocks/custom-code/component-info.js';
-/**
- * Returns a list of all registered components.
- * NOTE: This needs to be a function to work around ESM circular dependencies.
- */
-export const getDefaultRegisteredComponents = () => [{
-        component: Button,
-        ...buttonComponentInfo
-    }, {
-        component: Columns,
-        ...columnsComponentInfo
-    }, {
-        component: customCode,
-        ...customCodeInfo
-    }, {
-        component: embed,
-        ...embedComponentInfo
-    }, {
-        component: Fragment,
-        ...fragmentComponentInfo
-    }, {
-        component: Image,
-        ...imageComponentInfo
-    }, {
-        component: Img,
-        ...imgComponentInfo
-    }, {
-        component: Section,
-        ...sectionComponentInfo
-    }, {
-        component: Symbol,
-        ...symbolComponentInfo
-    }, {
-        component: Text,
-        ...textComponentInfo
-    }, {
-        component: Video,
-        ...videoComponentInfo
-    }];

package/dist/constants/device-sizes.js

@@ -1,45 +0,0 @@
-import { fastClone } from '../functions/fast-clone.js';
-const SIZES = {
-    small: {
-        min: 320,
-        default: 321,
-        max: 640
-    },
-    medium: {
-        min: 641,
-        default: 642,
-        max: 991
-    },
-    large: {
-        min: 990,
-        default: 991,
-        max: 1200
-    }
-};
-export const getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
-export const getSizesForBreakpoints = ({ small, medium }) => {
-    const newSizes = fastClone(SIZES); // Note: this helps to get a deep clone of fields like small, medium etc
-    if (!small || !medium) {
-        return newSizes;
-    }
-    const smallMin = Math.floor(small / 2);
-    newSizes.small = {
-        max: small,
-        min: smallMin,
-        default: smallMin + 1
-    };
-    const mediumMin = newSizes.small.max + 1;
-    newSizes.medium = {
-        max: medium,
-        min: mediumMin,
-        default: mediumMin + 1
-    };
-    const largeMin = newSizes.medium.max + 1;
-    newSizes.large = {
-        max: 2000,
-        // TODO: decide upper limit
-        min: largeMin,
-        default: largeMin + 1
-    };
-    return newSizes;
-};

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

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

package/dist/constants/sdk-version.js

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

package/dist/constants/target.js

@@ -1,2 +0,0 @@
-/** This file should be overriden for each framework. Ideally this would be implemented in Mitosis.  */
-export const TARGET = 'rsc';

package/dist/context/builder.context.js

@@ -1,12 +0,0 @@
-import { createContext } from "react";
-export default createContext({
-    content: null,
-    context: {},
-    localState: undefined,
-    rootSetState() { },
-    rootState: {},
-    apiKey: null,
-    apiVersion: undefined,
-    componentInfos: {},
-    inheritedStyles: {},
-});

package/dist/context/components.context.js

@@ -1,2 +0,0 @@
-import { createContext } from "react";
-export default createContext({ registeredComponents: {} });

package/dist/context/types.js

@@ -1 +0,0 @@
-export {};

package/dist/functions/camel-to-kebab-case.js

@@ -1 +0,0 @@
-export const camelToKebabCase = (string) => string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();

package/dist/functions/evaluate/browser-runtime/browser.js

@@ -1,31 +0,0 @@
-import { getFunctionArguments } from '../helpers.js';
-export const runInBrowser = ({ code, builder, context, event, localState, rootSetState, rootState }) => {
-    const functionArgs = getFunctionArguments({
-        builder,
-        context,
-        event,
-        state: flattenState(rootState, localState, rootSetState)
-    });
-    return new Function(...functionArgs.map(([name]) => name), code)(...functionArgs.map(([, value]) => value));
-};
-export function flattenState(rootState, localState, rootSetState) {
-    if (rootState === localState) {
-        throw new Error('rootState === localState');
-    }
-    return new Proxy(rootState, {
-        get: (_, prop) => {
-            if (localState && prop in localState) {
-                return localState[prop];
-            }
-            return rootState[prop];
-        },
-        set: (_, prop, value) => {
-            if (localState && prop in localState) {
-                throw new Error('Writing to local state is not allowed as it is read-only.');
-            }
-            rootState[prop] = value;
-            rootSetState?.(rootState);
-            return true;
-        }
-    });
-}

package/dist/functions/evaluate/evaluate.js

@@ -1,47 +0,0 @@
-import { logger } from '../../helpers/logger.js';
-import { isBrowser } from '../is-browser.js';
-import { isEditing } from '../is-editing.js';
-import { getUserAttributes } from '../track/helpers.js';
-import { runInBrowser } from './browser-runtime/browser.js';
-import { runInNonNode } from './non-node-runtime/index.js';
-import { isNonNodeServer } from '../is-non-node-server.js';
-export function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression = true }) {
-    if (code === '') {
-        logger.warn('Skipping evaluation of empty code block.');
-        return;
-    }
-    const builder = {
-        isEditing: isEditing(),
-        isBrowser: isBrowser(),
-        isServer: !isBrowser(),
-        getUserAttributes: () => getUserAttributes()
-    };
-    // Be able to handle simple expressions like "state.foo" or "1 + 1"
-    // as well as full blocks like "var foo = "bar"; return foo"
-    const useReturn = 
-    // we disable this for cases where we definitely don't want a return
-    isExpression && !(code.includes(';') || code.includes(' return ') || code.trim().startsWith('return '));
-    const useCode = useReturn ? `return (${code});` : code;
-    const args = {
-        code: useCode,
-        builder,
-        context,
-        event,
-        rootSetState,
-        rootState,
-        localState
-    };
-    try {
-        if (isBrowser())
-            return runInBrowser(args);
-        if (isNonNodeServer())
-            return runInNonNode(args);
-        return runInBrowser(args);
-    }
-    catch (e) {
-        logger.error('Failed code evaluation: ' + e.message, {
-            code
-        });
-        return undefined;
-    }
-}

package/dist/functions/evaluate/helpers.js

@@ -1,10 +0,0 @@
-export const getFunctionArguments = ({ builder, context, event, state }) => {
-    return Object.entries({
-        state,
-        Builder: builder,
-        // legacy
-        builder,
-        context,
-        event
-    });
-};

package/dist/functions/evaluate/index.js

@@ -1 +0,0 @@
-export { evaluate } from './evaluate.js';

package/dist/functions/evaluate/non-node-runtime/acorn-interpreter.d.ts

@@ -1,2 +0,0 @@
-declare const _default: Class;
-export default _default;