@contentful/experiences-sdk-react 0.0.1-alpha.2

package/dist/index.js

@@ -0,0 +1,859 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { containerDefinition, sectionDefinition, columnsDefinition, singleColumnDefinition, builtInStyles, optionalBuiltInStyles, sendMessage, designTokensRegistry, buildStyleTag, checkIsAssemblyNode, isDeepPath, transformContentValue, buildCfStyles, isEmptyStructureWithRelativeHeight, mediaQueryMatcher, getFallbackBreakpointIndex, getActiveBreakpointIndex, getValueForBreakpoint, fetchBySlug, fetchById, doesMismatchMessageSchema, tryParseMessage, validateExperienceBuilderConfig, isDeprecatedExperience, VisualEditorMode } from '@contentful/experiences-core';
+export { EntityStore, VisualEditorMode, calculateNodeDefaultHeight, checkIsAssembly, checkIsAssemblyEntry, checkIsAssemblyNode, createExperience, defineDesignTokens, fetchById, fetchBySlug, supportedModes } from '@contentful/experiences-core';
+import React, { useState, useEffect, useMemo, useCallback, useRef, Suspense } from 'react';
+import { omit } from 'lodash-es';
+import { INTERNAL_EVENTS, CONTENTFUL_COMPONENTS, OUTGOING_EVENTS, ASSEMBLY_DEFAULT_CATEGORY, EMPTY_CONTAINER_HEIGHT, CF_STYLE_ATTRIBUTES, INCOMING_EVENTS, VISUAL_EDITOR_EVENTS } from '@contentful/experiences-core/constants';
+export { ASSEMBLY_BLOCK_NODE_TYPE, ASSEMBLY_NODE_TYPE, ASSEMBLY_NODE_TYPES, CF_STYLE_ATTRIBUTES, CONTENTFUL_COMPONENTS, CONTENTFUL_COMPONENT_CATEGORY, CONTENTFUL_CONTAINER_ID, CONTENTFUL_SECTION_ID, DESIGN_COMPONENT_BLOCK_NODE_TYPE, DESIGN_COMPONENT_NODE_TYPE, DESIGN_COMPONENT_NODE_TYPES, INCOMING_EVENTS, LATEST_SCHEMA_VERSION, OUTGOING_EVENTS, SCROLL_STATES } from '@contentful/experiences-core/constants';
+import * as Components from '@contentful/experiences-components-react';
+import { ContentfulContainer, Columns, SingleColumn } from '@contentful/experiences-components-react';
+import styleInject from 'style-inject';
+
+const SDK_VERSION = '0.0.1-alpha.1';
+
+/**
+ * Sets up a component to be consumed by Experience Builder. This function can be used to wrap a component with a container component, or to pass props to the component directly.
+ * @param Component Component to be used by Experience Builder.
+ * @param options Options for the `withComponentWrapper` function.
+ * @default { wrapComponent: true, wrapContainerTag: 'div' }
+ * @returns A component that can be passed to `defineComponents`.
+ */
+function withComponentWrapper(Component, options = {
+    wrapComponent: true,
+    wrapContainerTag: 'div',
+}) {
+    const Wrapped = ({ classes = '', className = '', 'data-cf-node-id': dataCfNodeId, 'data-cf-node-block-id': dataCfNodeBlockId, 'data-cf-node-block-type': dataCfNodeBlockType, onClick, onMouseDown, onMouseUp, ...props }) => {
+        const Tag = options.wrapContainerTag || 'div';
+        const cfProps = {
+            'data-cf-node-id': dataCfNodeId,
+            'data-cf-node-block-id': dataCfNodeBlockId,
+            'data-cf-node-block-type': dataCfNodeBlockType,
+            onClick,
+            onMouseDown,
+            onMouseUp,
+        };
+        const component = options.wrapComponent ? (jsx(Tag, { className: className, ...cfProps, children: typeof Component === 'string' ? (React.createElement(Component, { className: classes, ...props })) : (jsx(Component, { className: classes, ...props })) })) : (React.createElement(Component, {
+            className: classes + className ? classes + ' ' + className : undefined,
+            ...cfProps,
+            ...props,
+        }));
+        return component;
+    };
+    return Wrapped;
+}
+
+// this is the array of version which currently LATEST_SCHEMA_VERSION is compatible with
+const compatibleVersions = ['2023-08-23', '2023-09-28'];
+
+const cloneObject = (targetObject) => {
+    if (typeof structuredClone !== 'undefined') {
+        return structuredClone(targetObject);
+    }
+    return JSON.parse(JSON.stringify(targetObject));
+};
+const applyComponentDefinitionFallbacks = (componentDefinition) => {
+    const clone = cloneObject(componentDefinition);
+    for (const variable of Object.values(clone.variables)) {
+        variable.group = variable.group ?? 'content';
+    }
+    return clone;
+};
+const applyBuiltInStyleDefinitions = (componentDefinition) => {
+    if ([CONTENTFUL_COMPONENTS.container.id].includes(componentDefinition.id)) {
+        return componentDefinition;
+    }
+    const clone = cloneObject(componentDefinition);
+    // set margin built-in style by default
+    if (!clone.builtInStyles) {
+        clone.builtInStyles = ['cfMargin'];
+    }
+    for (const style of Object.values(clone.builtInStyles || [])) {
+        if (builtInStyles[style]) {
+            clone.variables[style] = builtInStyles[style];
+        }
+        if (optionalBuiltInStyles[style]) {
+            clone.variables[style] = optionalBuiltInStyles[style];
+        }
+    }
+    return clone;
+};
+const enrichComponentDefinition = ({ component, definition, options, }) => {
+    const definitionWithFallbacks = applyComponentDefinitionFallbacks(definition);
+    const definitionWithBuiltInStyles = applyBuiltInStyleDefinitions(definitionWithFallbacks);
+    return {
+        component: withComponentWrapper(component, options),
+        definition: definitionWithBuiltInStyles,
+    };
+};
+const DEFAULT_COMPONENT_REGISTRATIONS = {
+    container: {
+        component: Components.ContentfulContainer,
+        definition: containerDefinition,
+    },
+    section: {
+        component: Components.ContentfulContainer,
+        definition: sectionDefinition,
+    },
+    columns: {
+        component: Components.Columns,
+        definition: columnsDefinition,
+    },
+    singleColumn: {
+        component: Components.SingleColumn,
+        definition: singleColumnDefinition,
+    },
+    button: enrichComponentDefinition({
+        component: Components.Button,
+        definition: Components.ButtonComponentDefinition,
+        options: {
+            wrapComponent: false,
+        },
+    }),
+    heading: enrichComponentDefinition({
+        component: Components.Heading,
+        definition: Components.HeadingComponentDefinition,
+        options: {
+            wrapComponent: false,
+        },
+    }),
+    image: enrichComponentDefinition({
+        component: Components.Image,
+        definition: Components.ImageComponentDefinition,
+    }),
+    richText: enrichComponentDefinition({
+        component: Components.RichText,
+        definition: Components.RichTextComponentDefinition,
+        options: {
+            wrapComponent: false,
+        },
+    }),
+    text: enrichComponentDefinition({
+        component: Components.Text,
+        definition: Components.TextComponentDefinition,
+        options: {
+            wrapComponent: false,
+        },
+    }),
+};
+// pre-filling with the default component registrations
+const componentRegistry = new Map([
+    [DEFAULT_COMPONENT_REGISTRATIONS.section.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.section],
+    [
+        DEFAULT_COMPONENT_REGISTRATIONS.container.definition.id,
+        DEFAULT_COMPONENT_REGISTRATIONS.container,
+    ],
+    [
+        DEFAULT_COMPONENT_REGISTRATIONS.singleColumn.definition.id,
+        DEFAULT_COMPONENT_REGISTRATIONS.singleColumn,
+    ],
+    [DEFAULT_COMPONENT_REGISTRATIONS.columns.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.columns],
+    [DEFAULT_COMPONENT_REGISTRATIONS.button.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.button],
+    [DEFAULT_COMPONENT_REGISTRATIONS.heading.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.heading],
+    [DEFAULT_COMPONENT_REGISTRATIONS.image.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.image],
+    [
+        DEFAULT_COMPONENT_REGISTRATIONS.richText.definition.id,
+        DEFAULT_COMPONENT_REGISTRATIONS.richText,
+    ],
+    [DEFAULT_COMPONENT_REGISTRATIONS.text.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.text],
+]);
+const optionalBuiltInComponents = [
+    DEFAULT_COMPONENT_REGISTRATIONS.button.definition.id,
+    DEFAULT_COMPONENT_REGISTRATIONS.heading.definition.id,
+    DEFAULT_COMPONENT_REGISTRATIONS.image.definition.id,
+    DEFAULT_COMPONENT_REGISTRATIONS.richText.definition.id,
+    DEFAULT_COMPONENT_REGISTRATIONS.text.definition.id,
+];
+const sendRegisteredComponentsMessage = () => {
+    // Send the definitions (without components) via the connection message to the experience builder
+    const registeredDefinitions = Array.from(componentRegistry.values());
+    sendMessage(OUTGOING_EVENTS.RegisteredComponents, {
+        definitions: registeredDefinitions,
+    });
+};
+const sendConnectedEventWithRegisteredComponents = () => {
+    // Send the definitions (without components) via the connection message to the experience builder
+    const registeredDefinitions = Array.from(componentRegistry.values()).map(({ definition }) => definition);
+    sendMessage(OUTGOING_EVENTS.Connected, {
+        sdkVersion: SDK_VERSION,
+        definitions: registeredDefinitions,
+    });
+    sendMessage(OUTGOING_EVENTS.DesignTokens, {
+        designTokens: designTokensRegistry,
+    });
+};
+/**
+ * Registers multiple components and their component definitions at once
+ * @param componentRegistrations - ComponentRegistration[]
+ * @returns void
+ */
+const defineComponents = (componentRegistrations, options) => {
+    if (options?.enabledBuiltInComponents) {
+        for (const id of optionalBuiltInComponents) {
+            if (!options.enabledBuiltInComponents.includes(id)) {
+                componentRegistry.delete(id);
+            }
+        }
+    }
+    for (const registration of componentRegistrations) {
+        // Fill definitions with fallbacks values
+        const enrichedComponentRegistration = enrichComponentDefinition(registration);
+        componentRegistry.set(enrichedComponentRegistration.definition.id, enrichedComponentRegistration);
+    }
+    if (typeof window !== 'undefined') {
+        window.dispatchEvent(new CustomEvent(INTERNAL_EVENTS.ComponentsRegistered));
+    }
+};
+const getComponentRegistration = (id) => componentRegistry.get(id);
+const addComponentRegistration = (componentRegistration) => {
+    componentRegistry.set(componentRegistration.definition.id, componentRegistration);
+};
+const createAssemblyRegistration = ({ definitionId, definitionName, component, }) => {
+    const componentRegistration = componentRegistry.get(definitionId);
+    if (componentRegistration) {
+        return componentRegistration;
+    }
+    const definition = {
+        id: definitionId,
+        name: definitionName || 'Component',
+        variables: {},
+        children: true,
+        category: ASSEMBLY_DEFAULT_CATEGORY,
+    };
+    addComponentRegistration({ component, definition });
+    return componentRegistry.get(definitionId);
+};
+
+/**
+ *
+ * @param styles: the list of styles to apply
+ * @param nodeId: [Optional] the id of node that these styles will be applied to
+ * @returns className: the className that was used
+ * Builds and adds a style tag in the document. Returns the className to be attached to the element.
+ * In editor mode the nodeId is used as the identifier in order to avoid creating endless tags as the styles are tweeked
+ * In preview/delivery mode the styles don't change oftem so we're using the md5 hash of the content of the tag
+ */
+const useStyleTag = ({ styles, nodeId }) => {
+    const [className, setClassName] = useState('');
+    useEffect(() => {
+        if (Object.keys(styles).length === 0) {
+            return;
+        }
+        const [className, styleRule] = buildStyleTag({ styles, nodeId });
+        setClassName(className);
+        const existingTag = document.querySelector(`[data-cf-styles="${className}"]`);
+        if (existingTag) {
+            // editor mode - update existing
+            if (nodeId) {
+                existingTag.innerHTML = styleRule;
+            }
+            // preview/delivery mode - here we don't need to update the existing tag because
+            // the className is based on the md5 hash of the content so it hasn't changed
+            return;
+        }
+        const styleTag = document.createElement('style');
+        styleTag.dataset['cfStyles'] = className;
+        document.head.appendChild(styleTag).innerHTML = styleRule;
+    }, [styles, nodeId]);
+    return { className };
+};
+
+const deserializeAssemblyNode = ({ node, componentInstanceVariables, }) => {
+    const variables = {};
+    for (const [variableName, variable] of Object.entries(node.variables)) {
+        variables[variableName] = variable;
+        if (variable.type === 'ComponentValue') {
+            const componentValueKey = variable.key;
+            const instanceProperty = componentInstanceVariables[componentValueKey];
+            // For assembly, we look up the variable in the assembly instance and
+            // replace the componentValue with that one.
+            if (instanceProperty?.type === 'UnboundValue') {
+                variables[variableName] = {
+                    type: 'UnboundValue',
+                    key: instanceProperty.key,
+                };
+            }
+            else if (instanceProperty?.type === 'BoundValue') {
+                variables[variableName] = {
+                    type: 'BoundValue',
+                    path: instanceProperty.path,
+                };
+            }
+        }
+    }
+    const children = node.children.map((child) => deserializeAssemblyNode({
+        node: child,
+        componentInstanceVariables,
+    }));
+    return {
+        definitionId: node.definitionId,
+        variables,
+        children,
+    };
+};
+const resolveAssembly = ({ node, entityStore, }) => {
+    const isAssembly = checkIsAssemblyNode({
+        componentId: node.definitionId,
+        usedComponents: entityStore.usedComponents,
+    });
+    if (!isAssembly) {
+        return node;
+    }
+    const componentId = node.definitionId;
+    const assembly = entityStore.experienceEntryFields?.usedComponents?.find((component) => component.sys.id === componentId);
+    if (!assembly || !('fields' in assembly)) {
+        return node;
+    }
+    const componentFields = assembly.fields;
+    const deserializedNode = deserializeAssemblyNode({
+        node: {
+            definitionId: node.definitionId,
+            variables: {},
+            children: componentFields.componentTree.children,
+        },
+        componentInstanceVariables: node.variables,
+    });
+    entityStore.addAssemblyUnboundValues(componentFields.unboundValues);
+    return deserializedNode;
+};
+
+const assemblyStyle = { display: 'contents' };
+// Feel free to do any magic as regards variable definitions for assemblies
+// Or if this isn't necessary by the time we figure that part out, we can bid this part farewell
+const Assembly = ({ ...props }) => {
+    // Using a display contents so assembly content/children
+    // can appear as if they are direct children of the div wrapper's parent
+    return jsx("div", { "data-test-id": "assembly", ...props, style: assemblyStyle });
+};
+
+const CompositionBlock = ({ node: rawNode, locale, entityStore, resolveDesignValue, }) => {
+    const isAssembly = useMemo(() => checkIsAssemblyNode({
+        componentId: rawNode.definitionId,
+        usedComponents: entityStore.usedComponents,
+    }), [entityStore.usedComponents, rawNode.definitionId]);
+    const node = useMemo(() => {
+        return isAssembly
+            ? resolveAssembly({
+                node: rawNode,
+                entityStore,
+            })
+            : rawNode;
+    }, [entityStore, isAssembly, rawNode]);
+    const componentRegistration = useMemo(() => {
+        const registration = getComponentRegistration(node.definitionId);
+        if (isAssembly && !registration) {
+            return createAssemblyRegistration({
+                definitionId: node.definitionId,
+                component: Assembly,
+            });
+        }
+        return registration;
+    }, [isAssembly, node.definitionId]);
+    const nodeProps = useMemo(() => {
+        // Don't enrich the assembly wrapper node with props
+        if (!componentRegistration || isAssembly) {
+            return {};
+        }
+        const propMap = {};
+        return Object.entries(node.variables).reduce((acc, [variableName, variable]) => {
+            switch (variable.type) {
+                case 'DesignValue':
+                    acc[variableName] = resolveDesignValue(variable.valuesByBreakpoint, variableName);
+                    break;
+                case 'BoundValue': {
+                    const variableDefinition = componentRegistration.definition.variables[variableName];
+                    if (isDeepPath(variable.path)) {
+                        const [, uuid] = variable.path.split('/');
+                        const link = entityStore.dataSource[uuid];
+                        const boundValue = entityStore.getValueDeep(link, variable.path);
+                        const value = boundValue || variableDefinition.defaultValue;
+                        acc[variableName] = transformContentValue(value, variableDefinition);
+                        break;
+                    }
+                    const [, uuid, ...path] = variable.path.split('/');
+                    const binding = entityStore.dataSource[uuid];
+                    let value = entityStore.getValue(binding, path.slice(0, -1));
+                    if (!value) {
+                        const foundAssetValue = entityStore.getValue(binding, [
+                            ...path.slice(0, -2),
+                            'fields',
+                            'file',
+                        ]);
+                        if (foundAssetValue) {
+                            value = foundAssetValue;
+                        }
+                    }
+                    acc[variableName] = transformContentValue(value, variableDefinition);
+                    break;
+                }
+                case 'UnboundValue': {
+                    const uuid = variable.key;
+                    acc[variableName] = entityStore.unboundValues[uuid]?.value;
+                    break;
+                }
+            }
+            return acc;
+        }, propMap);
+    }, [componentRegistration, isAssembly, node.variables, resolveDesignValue, entityStore]);
+    const cfStyles = buildCfStyles(nodeProps);
+    if (isEmptyStructureWithRelativeHeight(node.children.length, node.definitionId, cfStyles.height)) {
+        cfStyles.minHeight = EMPTY_CONTAINER_HEIGHT;
+    }
+    const { className } = useStyleTag({ styles: cfStyles });
+    if (!componentRegistration) {
+        return null;
+    }
+    const { component } = componentRegistration;
+    const children = componentRegistration.definition.children === true
+        ? node.children.map((childNode, index) => {
+            return (jsx(CompositionBlock, { node: childNode, locale: locale, entityStore: entityStore, resolveDesignValue: resolveDesignValue }, index));
+        })
+        : null;
+    if ([CONTENTFUL_COMPONENTS.container.id, CONTENTFUL_COMPONENTS.section.id].includes(node.definitionId)) {
+        return (jsx(ContentfulContainer, { editorMode: false, cfHyperlink: nodeProps.cfHyperlink, cfOpenInNewTab: nodeProps.cfOpenInNewTab, className: className, children: children }));
+    }
+    if (node.definitionId === CONTENTFUL_COMPONENTS.columns.id) {
+        return (jsx(Columns, { editorMode: false, className: className, children: children }));
+    }
+    if (node.definitionId === CONTENTFUL_COMPONENTS.singleColumn.id) {
+        return (jsx(SingleColumn, { editorMode: false, className: className, children: children }));
+    }
+    return React.createElement(component, {
+        ...omit(nodeProps, CF_STYLE_ATTRIBUTES, ['cfHyperlink', 'cfOpenInNewTab']),
+        className,
+    }, children);
+};
+
+/**
+ * @deprecated This hook is deprecated. Use fetchBySlug or fetchById instead
+ */
+const useExperienceBuilder = ({ experienceTypeId, client, mode = 'delivery', }) => {
+    const experience = useMemo(() => ({
+        client,
+        experienceTypeId,
+        mode,
+    }), [mode, client, experienceTypeId]);
+    return {
+        /**
+         * @deprecated please fetch the experience using `useFetchExperience` hook or fetch the data manually using `fetchers` or `client` and create experience with `createExperience` function
+         *
+         * @example
+         *
+         * import { useFetchExperience } from '@contentful/experiences-sdk-react'
+         *
+         * const { fetchBySlug, fetchById, experience, isFetching } = useFetchExperience({ client, mode })
+         */
+        experience,
+        /**
+         * @deprecated please import the function from the library
+         *
+         * @example
+         *
+         * import { defineComponents } from '@contentful/experiences-sdk-react'
+         */
+        defineComponents,
+    };
+};
+
+// TODO: In order to support integrations without React, we should extract this heavy logic into simple
+// functions that we can reuse in other frameworks.
+/*
+ * Registers media query change listeners for each breakpoint (except for "*").
+ * It will always assume the last matching media query in the list. It therefore,
+ * assumes that the breakpoints are sorted beginning with the default value (query: "*")
+ * and then decending by screen width. For mobile-first designs, the order would be ascending
+ */
+const useBreakpoints = (breakpoints) => {
+    const [mediaQueryMatchers, initialMediaQueryMatches] = mediaQueryMatcher(breakpoints);
+    const [mediaQueryMatches, setMediaQueryMatches] = useState(initialMediaQueryMatches);
+    const fallbackBreakpointIndex = getFallbackBreakpointIndex(breakpoints);
+    // Register event listeners to update the media query states
+    useEffect(() => {
+        const eventListeners = mediaQueryMatchers.map(({ id, signal }) => {
+            const onChange = () => setMediaQueryMatches((prev) => ({
+                ...prev,
+                [id]: signal.matches,
+            }));
+            signal.addEventListener('change', onChange);
+            return onChange;
+        });
+        return () => {
+            eventListeners.forEach((eventListener, index) => {
+                mediaQueryMatchers[index].signal.removeEventListener('change', eventListener);
+            });
+        };
+    }, [mediaQueryMatchers]);
+    const activeBreakpointIndex = getActiveBreakpointIndex(breakpoints, mediaQueryMatches, fallbackBreakpointIndex);
+    const resolveDesignValue = useCallback((valuesByBreakpoint, variableName) => {
+        return getValueForBreakpoint(valuesByBreakpoint, breakpoints, activeBreakpointIndex, variableName);
+    }, [activeBreakpointIndex, breakpoints]);
+    return { resolveDesignValue };
+};
+
+/**
+ * @deprecated please use `useFetchBySlug` or `useFetchById` hooks instead
+ */
+const useFetchExperience = ({ client }) => {
+    const [experience, setExperience] = useState(undefined);
+    const [isFetching, setIsFetching] = useState(false);
+    const [error, setError] = useState();
+    /**
+     * Fetch experience entry using slug as the identifier
+     * @param {string} experienceTypeId - id of the content type associated with the experience
+     * @param {string} slug - slug of the experience (defined in entry settings)
+     * @param {string} localeCode - locale code to fetch the experience. Falls back to the currently active locale in the state
+     */
+    const fetchBySlug$1 = useCallback(async ({ experienceTypeId, slug, localeCode, }) => {
+        setIsFetching(true);
+        setError(undefined);
+        try {
+            const experience = await fetchBySlug({
+                client,
+                experienceTypeId,
+                localeCode,
+                slug,
+            });
+            setExperience(experience);
+            return experience;
+        }
+        catch (error) {
+            setError(error);
+        }
+        finally {
+            setIsFetching(false);
+        }
+    }, [client]);
+    /**
+     * Fetch experience entry using id as the identifier
+     * @param {string} experienceTypeId - id of the content type associated with the experience
+     * @param {string} id - id of the experience (defined in entry settings)
+     * @param {string} localeCode - locale code to fetch the experience. Falls back to the currently active locale in the state
+     */
+    const fetchById$1 = useCallback(async ({ experienceTypeId, id, localeCode, }) => {
+        setIsFetching(true);
+        setError(undefined);
+        try {
+            const experience = await fetchById({
+                client,
+                experienceTypeId,
+                localeCode,
+                id,
+            });
+            setExperience(experience);
+            return experience;
+        }
+        catch (error) {
+            setError(error);
+        }
+        finally {
+            setIsFetching(false);
+        }
+    }, [client]);
+    return {
+        fetchBySlug: fetchBySlug$1,
+        fetchById: fetchById$1,
+        error,
+        experience,
+        isFetching,
+    };
+};
+
+const useFetchByBase = (fetchMethod, isEditorMode) => {
+    const [experience, setExperience] = useState();
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState();
+    useEffect(() => {
+        (async () => {
+            // if we are in editor mode, we don't want to fetch the experience here
+            // it is passed via postMessage instead
+            if (isEditorMode) {
+                return;
+            }
+            setIsLoading(true);
+            setError(undefined);
+            try {
+                const exp = await fetchMethod();
+                setExperience(exp);
+            }
+            catch (error) {
+                setError(error);
+            }
+            finally {
+                setIsLoading(false);
+            }
+        })();
+    }, [fetchMethod, isEditorMode]);
+    return {
+        error,
+        experience,
+        isLoading,
+        isEditorMode,
+    };
+};
+
+const useDetectEditorMode = ({ isClientSide = false } = {}) => {
+    const [mounted, setMounted] = useState(false);
+    const [isEditorMode, setIsEditorMode] = useState(isClientSide ? inIframe() : false);
+    const receivedMessage = useRef(false);
+    useEffect(() => {
+        const onMessage = (event) => {
+            if (doesMismatchMessageSchema(event)) {
+                return;
+            }
+            const eventData = tryParseMessage(event);
+            if (eventData.eventType === INCOMING_EVENTS.RequestEditorMode) {
+                setIsEditorMode(true);
+                receivedMessage.current = true;
+                if (typeof window !== 'undefined') {
+                    //Once we definitely know that we are in editor mode, we set this flag so future postMessage connect calls are not made
+                    window.__EB__.isEditorMode = true;
+                    window.removeEventListener('message', onMessage);
+                }
+            }
+        };
+        //Only run check after component is mounted on the client to avoid hydration ssr issues
+        if (mounted) {
+            setIsEditorMode(inIframe());
+            //Double check if we are in editor mode by listening to postMessage events
+            if (typeof window !== 'undefined' && !window.__EB__?.isEditorMode) {
+                window.addEventListener('message', onMessage);
+                sendMessage(OUTGOING_EVENTS.Connected);
+                setTimeout(() => {
+                    if (!receivedMessage.current) {
+                        // if message is not received back in time, set editorMode back to false
+                        setIsEditorMode(false);
+                    }
+                }, 100);
+            }
+        }
+        else {
+            setMounted(true);
+        }
+        return () => window.removeEventListener('message', onMessage);
+    }, [mounted]);
+    return isEditorMode;
+};
+function inIframe() {
+    try {
+        return window.self !== window.top;
+    }
+    catch (e) {
+        return false;
+    }
+}
+
+const useFetchById = ({ id, localeCode, client, experienceTypeId }) => {
+    const isEditorMode = useDetectEditorMode({ isClientSide: typeof window !== 'undefined' });
+    const fetchMethod = useCallback(() => {
+        return fetchById({ id, localeCode, client, experienceTypeId });
+    }, [id, localeCode, client, experienceTypeId]);
+    return useFetchByBase(fetchMethod, isEditorMode);
+};
+
+const useFetchBySlug = ({ slug, localeCode, client, experienceTypeId, }) => {
+    const isEditorMode = useDetectEditorMode({ isClientSide: typeof window !== 'undefined' });
+    const fetchMethod = useCallback(() => {
+        return fetchBySlug({ slug, localeCode, client, experienceTypeId });
+    }, [slug, localeCode, client, experienceTypeId]);
+    return useFetchByBase(fetchMethod, isEditorMode);
+};
+
+/**
+ * Returns the value of the argument from the previous render
+ * @param {T} value
+ * @returns {T | undefined} previous value
+ */
+function usePrevious(value) {
+    const ref = useRef();
+    useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+}
+
+/**
+ * @deprecated Remove after the BETA release
+ * @returns
+ */
+const DeprecatedPreviewDeliveryRoot = ({ locale, slug, deprecatedExperience, }) => {
+    const attemptedToFetch = useRef(false);
+    const previousLocale = usePrevious(locale);
+    const { experienceTypeId, client } = deprecatedExperience;
+    const { fetchBySlug, experience, isFetching } = useFetchExperience({
+        client,
+    });
+    const entityStore = experience?.entityStore;
+    useEffect(() => {
+        // TODO: Test it, it is crucial
+        // will make it fetch on each locale change as well as if experience entry hasn't been fetched yet at least once
+        const shouldFetch = (client && !entityStore && !attemptedToFetch.current) || previousLocale !== locale;
+        // this useEffect is meant to trigger fetching for the first time if it hasn't been done earlier
+        // if not yet fetched and not fetchin at the moment
+        if (shouldFetch && !isFetching && slug) {
+            attemptedToFetch.current = true;
+            fetchBySlug({
+                experienceTypeId,
+                localeCode: locale,
+                slug,
+            }).catch(() => {
+                // noop
+            });
+        }
+    }, [
+        experienceTypeId,
+        entityStore,
+        isFetching,
+        fetchBySlug,
+        client,
+        slug,
+        locale,
+        previousLocale,
+    ]);
+    const { resolveDesignValue } = useBreakpoints(entityStore?.breakpoints ?? []);
+    if (!entityStore?.experienceEntryFields || !entityStore?.schemaVersion) {
+        return null;
+    }
+    if (!compatibleVersions.includes(entityStore.schemaVersion)) {
+        console.warn(`[experiences-sdk-react] Contenful composition schema version: ${entityStore.schemaVersion} does not match the compatible schema versions: ${compatibleVersions}. Aborting.`);
+        return null;
+    }
+    return (jsx(Fragment, { children: entityStore.experienceEntryFields.componentTree.children.map((childNode, index) => (jsx(CompositionBlock, { node: childNode, locale: locale, entityStore: entityStore, resolveDesignValue: resolveDesignValue }, index))) }));
+};
+
+const PreviewDeliveryRoot = ({ locale, experience }) => {
+    const { entityStore } = experience;
+    const { resolveDesignValue } = useBreakpoints(entityStore?.breakpoints ?? []);
+    if (!entityStore?.experienceEntryFields || !entityStore?.schemaVersion) {
+        return null;
+    }
+    if (!compatibleVersions.includes(entityStore.schemaVersion)) {
+        console.warn(`[experiences-sdk-react] Contentful composition schema version: ${entityStore.schemaVersion} does not match the compatible schema versions: ${compatibleVersions}. Aborting.`);
+        return null;
+    }
+    return (jsx(Fragment, { children: entityStore.experienceEntryFields.componentTree.children.map((childNode, index) => (jsx(CompositionBlock, { node: childNode, locale: locale, entityStore: entityStore, resolveDesignValue: resolveDesignValue }, index))) }));
+};
+
+var css_248z = ".cf-error-message {\n  margin: 24px;\n  font-size: var(--exp-builder-font-size-m);\n  font-family: var(--exp-builder-font-stack-primary);\n  color: var(--exp-builder-red800);\n  padding: 16px;\n  background-color: var(--exp-builder-red200);\n}\n\n.cf-error-message .title {\n  margin-top: 0;\n  font-size: var(--exp-builder-font-size-l);\n}\n\n.cf-error-message .more-details {\n  cursor: pointer;\n  color: var(--exp-builder-blue700);\n}\n";
+styleInject(css_248z);
+
+class ImportedComponentError extends Error {
+}
+class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false, error: null, errorInfo: null, showErrorDetails: false };
+    }
+    static getDerivedStateFromError() {
+        return { hasError: true };
+    }
+    componentDidCatch(error, errorInfo) {
+        this.setState({ error, errorInfo });
+        if (!(error instanceof ImportedComponentError)) {
+            sendMessage(OUTGOING_EVENTS.CanvasError, error);
+        }
+        else {
+            throw error;
+        }
+    }
+    render() {
+        if (this.state.hasError) {
+            return (jsxs("div", { className: "cf-error-message", children: [jsx("h2", { className: "title", children: `Something went wrong while rendering the experience` }), jsxs("div", { children: ["The Experience Builder SDK has encountered an error. It may be that the SDK has not been set up properly or an imported component has thrown this error. Try to refresh the page and find more guidance in our", ' ', jsx("a", { href: "https://www.contentful.com/developers/docs/tutorials/general/experience-builder/", rel: "noreferrer", target: "_blank", children: "documentation" }), "."] }), jsx("br", {}), jsxs("span", { className: "more-details", onClick: () => this.setState((prevState) => ({
+                            showErrorDetails: !prevState.showErrorDetails,
+                        })), children: [this.state.showErrorDetails ? 'Hide' : 'See', " details"] }), this.state.showErrorDetails && (jsx("code", { children: this.state.error?.stack?.split('\n').map((i, key) => {
+                            return jsx("div", { children: i }, key);
+                        }) }))] }));
+        }
+        return this.props.children;
+    }
+}
+class ImportedComponentErrorBoundary extends React.Component {
+    componentDidCatch(error, _errorInfo) {
+        const err = new ImportedComponentError(error.message);
+        err.stack = error.stack;
+        throw err;
+    }
+    render() {
+        return this.props.children;
+    }
+}
+
+const useInitializeVisualEditor = (params) => {
+    const { initialLocale, initialEntities } = params;
+    const [locale, setLocale] = useState(initialLocale);
+    const hasConnectEventBeenSent = useRef(false);
+    // sends component definitions to the web app
+    // InternalEvents.COMPONENTS_REGISTERED is triggered by defineComponents function
+    useEffect(() => {
+        if (!hasConnectEventBeenSent.current) {
+            // sending CONNECT but with the registered components now
+            sendConnectedEventWithRegisteredComponents();
+            hasConnectEventBeenSent.current = true;
+        }
+        const onComponentsRegistered = () => {
+            sendRegisteredComponentsMessage();
+        };
+        if (typeof window !== 'undefined') {
+            window.addEventListener(INTERNAL_EVENTS.ComponentsRegistered, onComponentsRegistered);
+        }
+        return () => {
+            if (typeof window !== 'undefined') {
+                window.removeEventListener(INTERNAL_EVENTS.ComponentsRegistered, onComponentsRegistered);
+            }
+        };
+    }, []);
+    useEffect(() => {
+        setLocale(initialLocale);
+    }, [initialLocale]);
+    useEffect(() => {
+        const onVisualEditorReady = () => {
+            window.dispatchEvent(new CustomEvent(INTERNAL_EVENTS.VisualEditorInitialize, {
+                detail: {
+                    componentRegistry,
+                    designTokens: designTokensRegistry,
+                    locale,
+                    entities: initialEntities ?? [],
+                },
+            }));
+        };
+        window.addEventListener(VISUAL_EDITOR_EVENTS.Ready, onVisualEditorReady);
+        return () => {
+            window.removeEventListener(VISUAL_EDITOR_EVENTS.Ready, onVisualEditorReady);
+        };
+    }, [locale, initialEntities]);
+};
+
+const VisualEditorLoader = React.lazy(() => import('./VisualEditorLoader-CY2fhqS5.js'));
+const VisualEditorRoot = ({ visualEditorMode, initialEntities, initialLocale, }) => {
+    useInitializeVisualEditor({
+        initialLocale,
+        initialEntities,
+    });
+    return (jsx(ErrorBoundary, { children: jsx(Suspense, { fallback: jsx("div", { children: "Loading..." }), children: jsx(VisualEditorLoader, { visualEditorMode: visualEditorMode }) }) }));
+};
+
+const ExperienceRoot = ({ locale, experience, slug, visualEditorMode = VisualEditorMode.LazyLoad, }) => {
+    const isEditorMode = useDetectEditorMode();
+    validateExperienceBuilderConfig({
+        locale,
+        isEditorMode,
+    });
+    if (isEditorMode) {
+        const entityStore = experience && !isDeprecatedExperience(experience) ? experience.entityStore : undefined;
+        return (jsx(VisualEditorRoot, { visualEditorMode: visualEditorMode, initialEntities: entityStore?.entities || [], initialLocale: locale }));
+    }
+    if (!experience)
+        return null;
+    if (isDeprecatedExperience(experience)) {
+        return (jsx(DeprecatedPreviewDeliveryRoot, { deprecatedExperience: experience, locale: locale, slug: slug }));
+    }
+    return jsx(PreviewDeliveryRoot, { locale: locale, experience: experience });
+};
+
+// Simple state store to store a few things that are needed across the SDK
+if (typeof window !== 'undefined') {
+    window.__EB__ = {
+        sdkVersion: SDK_VERSION,
+    };
+}
+
+export { ExperienceRoot, defineComponents, useExperienceBuilder, useFetchById, useFetchBySlug, useFetchExperience };
+//# sourceMappingURL=index.js.map