@contentful/experiences-sdk-react 1.9.0-dev-20240628T2235-7a4f71f.0 → 1.9.0-dev-20240628T2250-7a4f71f.0

package/dist/core/componentRegistry.js

@@ -0,0 +1,292 @@
+import * as Components from '@contentful/experiences-components-react';
+import { INTERNAL_EVENTS, CONTENTFUL_COMPONENTS, OUTGOING_EVENTS, ASSEMBLY_DEFAULT_CATEGORY } from '@contentful/experiences-core/constants';
+import { containerDefinition, sectionDefinition, columnsDefinition, singleColumnDefinition, dividerDefinition, builtInStyles, optionalBuiltInStyles, sendMessage, breakpointsRegistry, designTokensRegistry } from '@contentful/experiences-core';
+import { validateComponentDefinition } from '@contentful/experiences-validators';
+import { withComponentWrapper } from '../utils/withComponentWrapper.js';
+import { SDK_VERSION } from '../sdkVersion.js';
+
+const CssVarRegex = /var\(--[\w-]+\)/;
+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,
+        options,
+    };
+};
+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,
+        options: { wrapComponent: false },
+    }),
+    richText: enrichComponentDefinition({
+        component: Components.RichText,
+        definition: Components.RichTextComponentDefinition,
+        options: {
+            wrapComponent: false,
+        },
+    }),
+    text: enrichComponentDefinition({
+        component: Components.Text,
+        definition: Components.TextComponentDefinition,
+        options: {
+            wrapComponent: false,
+        },
+    }),
+    divider: {
+        component: Components.ContentfulDivider,
+        definition: dividerDefinition,
+        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],
+    [DEFAULT_COMPONENT_REGISTRATIONS.divider.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.divider],
+]);
+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()).map(({ definition }) => definition);
+    sendMessage(OUTGOING_EVENTS.RegisteredComponents, {
+        definitions: registeredDefinitions,
+    });
+};
+const runRegisteredComponentValidations = () => {
+    Array.from(componentRegistry.values()).map(({ definition }) => {
+        const validation = validateComponentDefinition(definition);
+        if (!validation.success) {
+            throw new Error(`Invalid component definition for component '${definition.name}'. Failed with errors: \n${JSON.stringify(validation.errors, null, 2)}`);
+        }
+    });
+};
+const getSingleCssVariableValue = (element, cssVariableValue, cssAttribute) => {
+    element.style[cssAttribute] = cssVariableValue;
+    const styles = getComputedStyle(element);
+    const resolvedValue = styles.getPropertyValue(cssAttribute);
+    return resolvedValue;
+};
+const getAllCssVariableValues = (element, cssVariable, cssAttribute) => {
+    const resolvedCssVariables = {};
+    Object.keys(cssVariable).forEach((key) => {
+        const cssVariableValue = cssVariable[key];
+        if (CssVarRegex.test(cssVariableValue)) {
+            const resolvedValue = getSingleCssVariableValue(element, cssVariableValue, cssAttribute);
+            resolvedCssVariables[cssVariableValue] = resolvedValue;
+        }
+    });
+    return resolvedCssVariables;
+};
+const resolveCssVariables = (designTokensDefinition) => {
+    const { spacing, sizing, color, borderRadius, fontSize, lineHeight, letterSpacing, textColor, border, } = designTokensDefinition;
+    const resolvedCssVariables = {};
+    // Create an element
+    const element = document.createElement('div');
+    document.body.appendChild(element);
+    const cssProperties = [
+        { variable: spacing, property: 'margin' },
+        { variable: sizing, property: 'width' },
+        { variable: color, property: 'background-color' },
+        { variable: borderRadius, property: 'border-radius' },
+        { variable: fontSize, property: 'font-size' },
+        { variable: lineHeight, property: 'line-height' },
+        { variable: letterSpacing, property: 'letter-spacing' },
+        { variable: textColor, property: 'color' },
+    ];
+    cssProperties.forEach(({ variable, property }) => {
+        if (variable) {
+            const rawResolvedValues = getAllCssVariableValues(element, variable, property);
+            Object.assign(resolvedCssVariables, rawResolvedValues);
+        }
+    });
+    if (border) {
+        const tempResolvedValue = {};
+        Object.keys(border).forEach((borderKey) => {
+            const { width, style, color } = border[borderKey];
+            if (width && CssVarRegex.test(width)) {
+                const resolvedValue = getSingleCssVariableValue(element, width, 'border-width');
+                tempResolvedValue[width] = resolvedValue;
+            }
+            if (style && CssVarRegex.test(style)) {
+                const resolvedValue = getSingleCssVariableValue(element, style, 'border-style');
+                tempResolvedValue[style] = resolvedValue;
+            }
+            if (color && CssVarRegex.test(color)) {
+                const resolvedValue = getSingleCssVariableValue(element, color, 'border-color');
+                tempResolvedValue[color] = resolvedValue;
+            }
+            Object.assign(resolvedCssVariables, tempResolvedValue);
+        });
+    }
+    document.body.removeChild(element);
+    return resolvedCssVariables;
+};
+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.RegisteredBreakpoints, {
+        breakpoints: breakpointsRegistry,
+    });
+    sendMessage(OUTGOING_EVENTS.DesignTokens, {
+        designTokens: designTokensRegistry,
+        resolvedCssVariables: resolveCssVariables(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);
+};
+/**
+ * @deprecated This method is used to maintain the basic component ids (without the prefix 'contentful-') in order to be compatible
+ * with experiences created with an older alpha version of the SDK. Components in these experiences should be migrated to use
+ * the components with the 'contentful-' prefix. To do so, load the experience in the editor, and replace any older basic components
+ * (marked with [OLD] in the UI) with the new components (without the [OLD]). This method (and functionality for the older components)
+ * will be removed in the next major release.
+ */
+const maintainBasicComponentIdsWithoutPrefix = () => {
+    optionalBuiltInComponents.forEach((id) => {
+        if (componentRegistry.has(id) && id.startsWith('contentful-')) {
+            const registeredComponent = componentRegistry.get(id);
+            const definition = registeredComponent.definition;
+            const newDefinition = cloneObject(definition);
+            newDefinition.name = newDefinition.name + '[OLD]';
+            const newId = id.replace('contentful-', '');
+            newDefinition.id = newId;
+            const newRegisteredComponent = { ...registeredComponent, definition: newDefinition };
+            componentRegistry.set(newId, newRegisteredComponent);
+        }
+    });
+};
+
+export { addComponentRegistration, componentRegistry, createAssemblyRegistration, defineComponents, enrichComponentDefinition, getComponentRegistration, maintainBasicComponentIdsWithoutPrefix, optionalBuiltInComponents, runRegisteredComponentValidations, sendConnectedEventWithRegisteredComponents, sendRegisteredComponentsMessage };
+//# sourceMappingURL=componentRegistry.js.map

package/dist/core/componentRegistry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"componentRegistry.js","sources":["../../../src/core/componentRegistry.ts"],"sourcesContent":["import * as Components from '@contentful/experiences-components-react';\nimport type {\n  ComponentRegistration,\n  ComponentDefinition,\n  ComponentRegistrationOptions,\n  DesignTokensDefinition,\n} from '@contentful/experiences-core/types';\nimport {\n  OUTGOING_EVENTS,\n  INTERNAL_EVENTS,\n  CONTENTFUL_COMPONENTS,\n  ASSEMBLY_DEFAULT_CATEGORY,\n} from '@contentful/experiences-core/constants';\nimport {\n  builtInStyles as builtInStyleDefinitions,\n  designTokensRegistry,\n  breakpointsRegistry,\n  optionalBuiltInStyles,\n  sendMessage,\n  containerDefinition,\n  sectionDefinition,\n  columnsDefinition,\n  singleColumnDefinition,\n} from '@contentful/experiences-core';\nimport { validateComponentDefinition } from '@contentful/experiences-validators';\nimport { withComponentWrapper } from '../utils/withComponentWrapper';\nimport { SDK_VERSION } from '../constants';\nimport { dividerDefinition } from '@contentful/experiences-core';\n\nconst CssVarRegex = /var\\(--[\\w-]+\\)/;\n\nconst cloneObject = <T>(targetObject: T): T => {\n  if (typeof structuredClone !== 'undefined') {\n    return structuredClone(targetObject);\n  }\n\n  return JSON.parse(JSON.stringify(targetObject));\n};\n\nconst applyComponentDefinitionFallbacks = (componentDefinition: ComponentDefinition) => {\n  const clone = cloneObject(componentDefinition);\n  for (const variable of Object.values(clone.variables)) {\n    variable.group = variable.group ?? 'content';\n  }\n  return clone;\n};\n\nconst applyBuiltInStyleDefinitions = (componentDefinition: ComponentDefinition) => {\n  if ([CONTENTFUL_COMPONENTS.container.id].includes(componentDefinition.id)) {\n    return componentDefinition;\n  }\n\n  const clone = cloneObject(componentDefinition);\n\n  // set margin built-in style by default\n  if (!clone.builtInStyles) {\n    clone.builtInStyles = ['cfMargin'];\n  }\n\n  for (const style of Object.values(clone.builtInStyles || [])) {\n    if (builtInStyleDefinitions[style]) {\n      clone.variables[style] = builtInStyleDefinitions[style];\n    }\n    if (optionalBuiltInStyles[style]) {\n      clone.variables[style] = optionalBuiltInStyles[style];\n    }\n  }\n  return clone;\n};\n\nexport const enrichComponentDefinition = ({\n  component,\n  definition,\n  options,\n}: ComponentRegistration): ComponentRegistration => {\n  const definitionWithFallbacks = applyComponentDefinitionFallbacks(definition);\n  const definitionWithBuiltInStyles = applyBuiltInStyleDefinitions(definitionWithFallbacks);\n  return {\n    component: withComponentWrapper(component, options),\n    definition: definitionWithBuiltInStyles,\n    options,\n  };\n};\n\nconst DEFAULT_COMPONENT_REGISTRATIONS = {\n  container: {\n    component: Components.ContentfulContainer,\n    definition: containerDefinition,\n  },\n  section: {\n    component: Components.ContentfulContainer,\n    definition: sectionDefinition,\n  },\n  columns: {\n    component: Components.Columns,\n    definition: columnsDefinition,\n  },\n  singleColumn: {\n    component: Components.SingleColumn,\n    definition: singleColumnDefinition,\n  },\n  button: enrichComponentDefinition({\n    component: Components.Button,\n    definition: Components.ButtonComponentDefinition,\n    options: {\n      wrapComponent: false,\n    },\n  }),\n  heading: enrichComponentDefinition({\n    component: Components.Heading,\n    definition: Components.HeadingComponentDefinition,\n    options: {\n      wrapComponent: false,\n    },\n  }),\n  image: enrichComponentDefinition({\n    component: Components.Image,\n    definition: Components.ImageComponentDefinition,\n    options: { wrapComponent: false },\n  }),\n  richText: enrichComponentDefinition({\n    component: Components.RichText,\n    definition: Components.RichTextComponentDefinition,\n    options: {\n      wrapComponent: false,\n    },\n  }),\n  text: enrichComponentDefinition({\n    component: Components.Text,\n    definition: Components.TextComponentDefinition,\n    options: {\n      wrapComponent: false,\n    },\n  }),\n  divider: {\n    component: Components.ContentfulDivider,\n    definition: dividerDefinition,\n    options: {\n      wrapComponent: false,\n    },\n  },\n} satisfies Record<string, ComponentRegistration>;\n\n// pre-filling with the default component registrations\nexport const componentRegistry = new Map<string, ComponentRegistration>([\n  [DEFAULT_COMPONENT_REGISTRATIONS.section.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.section],\n  [\n    DEFAULT_COMPONENT_REGISTRATIONS.container.definition.id,\n    DEFAULT_COMPONENT_REGISTRATIONS.container,\n  ],\n  [\n    DEFAULT_COMPONENT_REGISTRATIONS.singleColumn.definition.id,\n    DEFAULT_COMPONENT_REGISTRATIONS.singleColumn,\n  ],\n  [DEFAULT_COMPONENT_REGISTRATIONS.columns.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.columns],\n  [DEFAULT_COMPONENT_REGISTRATIONS.button.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.button],\n  [DEFAULT_COMPONENT_REGISTRATIONS.heading.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.heading],\n  [DEFAULT_COMPONENT_REGISTRATIONS.image.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.image],\n  [\n    DEFAULT_COMPONENT_REGISTRATIONS.richText.definition.id,\n    DEFAULT_COMPONENT_REGISTRATIONS.richText,\n  ],\n  [DEFAULT_COMPONENT_REGISTRATIONS.text.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.text],\n  [DEFAULT_COMPONENT_REGISTRATIONS.divider.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.divider],\n]);\n\nexport const optionalBuiltInComponents = [\n  DEFAULT_COMPONENT_REGISTRATIONS.button.definition.id,\n  DEFAULT_COMPONENT_REGISTRATIONS.heading.definition.id,\n  DEFAULT_COMPONENT_REGISTRATIONS.image.definition.id,\n  DEFAULT_COMPONENT_REGISTRATIONS.richText.definition.id,\n  DEFAULT_COMPONENT_REGISTRATIONS.text.definition.id,\n];\n\nexport const sendRegisteredComponentsMessage = () => {\n  // Send the definitions (without components) via the connection message to the experience builder\n  const registeredDefinitions = Array.from(componentRegistry.values()).map(\n    ({ definition }) => definition,\n  );\n\n  sendMessage(OUTGOING_EVENTS.RegisteredComponents, {\n    definitions: registeredDefinitions,\n  });\n};\n\nexport const runRegisteredComponentValidations = () => {\n  Array.from(componentRegistry.values()).map(({ definition }) => {\n    const validation = validateComponentDefinition(definition);\n    if (!validation.success) {\n      throw new Error(\n        `Invalid component definition for component '${definition.name}'. Failed with errors: \\n${JSON.stringify(validation.errors, null, 2)}`,\n      );\n    }\n  });\n};\n\nconst getSingleCssVariableValue = (\n  element: HTMLDivElement,\n  cssVariableValue: string,\n  cssAttribute: any,\n) => {\n  element.style[cssAttribute] = cssVariableValue;\n  const styles = getComputedStyle(element);\n  const resolvedValue = styles.getPropertyValue(cssAttribute);\n  return resolvedValue;\n};\n\nconst getAllCssVariableValues = (\n  element: HTMLDivElement,\n  cssVariable: Record<string, string>,\n  cssAttribute: any,\n) => {\n  const resolvedCssVariables = {} as Record<string, string>;\n\n  Object.keys(cssVariable).forEach((key) => {\n    const cssVariableValue = cssVariable[key];\n    if (CssVarRegex.test(cssVariableValue)) {\n      const resolvedValue = getSingleCssVariableValue(element, cssVariableValue, cssAttribute);\n      resolvedCssVariables[cssVariableValue] = resolvedValue;\n    }\n  });\n  return resolvedCssVariables;\n};\n\ntype CssMapType = {\n  variable?: Record<string, string>;\n  property: string;\n};\n\nconst resolveCssVariables = (designTokensDefinition: DesignTokensDefinition) => {\n  const {\n    spacing,\n    sizing,\n    color,\n    borderRadius,\n    fontSize,\n    lineHeight,\n    letterSpacing,\n    textColor,\n    border,\n  } = designTokensDefinition;\n  const resolvedCssVariables = {} as Record<string, string>;\n\n  // Create an element\n  const element = document.createElement('div');\n  document.body.appendChild(element);\n\n  const cssProperties: CssMapType[] = [\n    { variable: spacing, property: 'margin' },\n    { variable: sizing, property: 'width' },\n    { variable: color, property: 'background-color' },\n    { variable: borderRadius, property: 'border-radius' },\n    { variable: fontSize, property: 'font-size' },\n    { variable: lineHeight, property: 'line-height' },\n    { variable: letterSpacing, property: 'letter-spacing' },\n    { variable: textColor, property: 'color' },\n  ];\n\n  cssProperties.forEach(({ variable, property }) => {\n    if (variable) {\n      const rawResolvedValues = getAllCssVariableValues(element, variable, property);\n      Object.assign(resolvedCssVariables, rawResolvedValues);\n    }\n  });\n\n  if (border) {\n    const tempResolvedValue = {} as Record<string, string>;\n    Object.keys(border).forEach((borderKey) => {\n      const { width, style, color } = border[borderKey];\n\n      if (width && CssVarRegex.test(width)) {\n        const resolvedValue = getSingleCssVariableValue(element, width, 'border-width');\n        tempResolvedValue[width] = resolvedValue;\n      }\n      if (style && CssVarRegex.test(style)) {\n        const resolvedValue = getSingleCssVariableValue(element, style, 'border-style');\n        tempResolvedValue[style] = resolvedValue;\n      }\n      if (color && CssVarRegex.test(color)) {\n        const resolvedValue = getSingleCssVariableValue(element, color, 'border-color');\n        tempResolvedValue[color] = resolvedValue;\n      }\n      Object.assign(resolvedCssVariables, tempResolvedValue);\n    });\n  }\n\n  document.body.removeChild(element);\n  return resolvedCssVariables;\n};\n\nexport const sendConnectedEventWithRegisteredComponents = () => {\n  // Send the definitions (without components) via the connection message to the experience builder\n  const registeredDefinitions = Array.from(componentRegistry.values()).map(\n    ({ definition }) => definition,\n  );\n\n  sendMessage(OUTGOING_EVENTS.Connected, {\n    sdkVersion: SDK_VERSION,\n    definitions: registeredDefinitions,\n  });\n\n  sendMessage(OUTGOING_EVENTS.RegisteredBreakpoints, {\n    breakpoints: breakpointsRegistry,\n  });\n\n  sendMessage(OUTGOING_EVENTS.DesignTokens, {\n    designTokens: designTokensRegistry,\n    resolvedCssVariables: resolveCssVariables(designTokensRegistry),\n  });\n};\n\n/**\n * Registers multiple components and their component definitions at once\n * @param componentRegistrations - ComponentRegistration[]\n * @returns void\n */\nexport const defineComponents = (\n  componentRegistrations: ComponentRegistration[],\n  options?: ComponentRegistrationOptions,\n) => {\n  if (options?.enabledBuiltInComponents) {\n    for (const id of optionalBuiltInComponents) {\n      if (!options.enabledBuiltInComponents.includes(id)) {\n        componentRegistry.delete(id);\n      }\n    }\n  }\n\n  for (const registration of componentRegistrations) {\n    // Fill definitions with fallbacks values\n    const enrichedComponentRegistration = enrichComponentDefinition(registration);\n\n    componentRegistry.set(\n      enrichedComponentRegistration.definition.id,\n      enrichedComponentRegistration,\n    );\n  }\n\n  if (typeof window !== 'undefined') {\n    window.dispatchEvent(new CustomEvent(INTERNAL_EVENTS.ComponentsRegistered));\n  }\n};\n\n/**\n * use this function only in tests\n */\nexport const resetComponentRegistry = () => {\n  componentRegistry.clear();\n  for (const registration of Object.values(DEFAULT_COMPONENT_REGISTRATIONS)) {\n    componentRegistry.set(registration.definition.id, registration);\n  }\n};\n\nexport const getComponentRegistration = (id: string) => componentRegistry.get(id);\n\nexport const addComponentRegistration = (componentRegistration: ComponentRegistration) => {\n  componentRegistry.set(componentRegistration.definition.id, componentRegistration);\n};\n\nexport const createAssemblyRegistration = ({\n  definitionId,\n  definitionName,\n  component,\n}: {\n  definitionId: string;\n  definitionName?: string;\n  component: ComponentRegistration['component'];\n}) => {\n  const componentRegistration = componentRegistry.get(definitionId);\n\n  if (componentRegistration) {\n    return componentRegistration;\n  }\n\n  const definition = {\n    id: definitionId,\n    name: definitionName || 'Component',\n    variables: {} as ComponentDefinition['variables'],\n    children: true,\n    category: ASSEMBLY_DEFAULT_CATEGORY,\n  };\n\n  addComponentRegistration({ component, definition });\n\n  return componentRegistry.get(definitionId);\n};\n\n/**\n * @deprecated This method is used to maintain the basic component ids (without the prefix 'contentful-') in order to be compatible\n * with experiences created with an older alpha version of the SDK. Components in these experiences should be migrated to use\n * the components with the 'contentful-' prefix. To do so, load the experience in the editor, and replace any older basic components\n * (marked with [OLD] in the UI) with the new components (without the [OLD]). This method (and functionality for the older components)\n * will be removed in the next major release.\n */\nexport const maintainBasicComponentIdsWithoutPrefix = () => {\n  optionalBuiltInComponents.forEach((id) => {\n    if (componentRegistry.has(id) && id.startsWith('contentful-')) {\n      const registeredComponent = componentRegistry.get(id)!;\n      const definition = registeredComponent.definition;\n      const newDefinition = cloneObject(definition);\n      newDefinition.name = newDefinition.name + '[OLD]';\n      const newId = id.replace('contentful-', '');\n      newDefinition.id = newId;\n      const newRegisteredComponent = { ...registeredComponent, definition: newDefinition };\n      componentRegistry.set(newId, newRegisteredComponent);\n    }\n  });\n};\n"],"names":["builtInStyleDefinitions"],"mappings":"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"}

package/dist/core/preview/assemblyUtils.js

@@ -0,0 +1,71 @@
+import { checkIsAssemblyNode } from '@contentful/experiences-core';
+
+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,
+                };
+            }
+            else if (instanceProperty?.type === 'HyperlinkValue') {
+                variables[variableName] = {
+                    type: 'HyperlinkValue',
+                    linkTargetKey: instanceProperty.linkTargetKey,
+                };
+            }
+        }
+    }
+    const children = node.children.map((child) => deserializeAssemblyNode({
+        node: child,
+        componentInstanceVariables,
+    }));
+    return {
+        definitionId: node.definitionId,
+        variables,
+        children,
+        slotId: node.slotId,
+        displayName: node.displayName,
+    };
+};
+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: node.variables,
+            children: componentFields.componentTree.children,
+        },
+        componentInstanceVariables: node.variables,
+    });
+    entityStore.addAssemblyUnboundValues(componentFields.unboundValues);
+    return deserializedNode;
+};
+
+export { deserializeAssemblyNode, resolveAssembly };
+//# sourceMappingURL=assemblyUtils.js.map

package/dist/core/preview/assemblyUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"assemblyUtils.js","sources":["../../../../src/core/preview/assemblyUtils.ts"],"sourcesContent":["import { checkIsAssemblyNode, EntityStore } from '@contentful/experiences-core';\nimport type { ComponentPropertyValue, ComponentTreeNode } from '@contentful/experiences-core/types';\n\nexport const deserializeAssemblyNode = ({\n  node,\n  componentInstanceVariables,\n}: {\n  node: ComponentTreeNode;\n  componentInstanceVariables: ComponentTreeNode['variables'];\n}): ComponentTreeNode => {\n  const variables: Record<string, ComponentPropertyValue> = {};\n\n  for (const [variableName, variable] of Object.entries(node.variables)) {\n    variables[variableName] = variable;\n    if (variable.type === 'ComponentValue') {\n      const componentValueKey = variable.key;\n      const instanceProperty = componentInstanceVariables[componentValueKey];\n\n      // For assembly, we look up the variable in the assembly instance and\n      // replace the componentValue with that one.\n      if (instanceProperty?.type === 'UnboundValue') {\n        variables[variableName] = {\n          type: 'UnboundValue',\n          key: instanceProperty.key,\n        };\n      } else if (instanceProperty?.type === 'BoundValue') {\n        variables[variableName] = {\n          type: 'BoundValue',\n          path: instanceProperty.path,\n        };\n      } else if (instanceProperty?.type === 'HyperlinkValue') {\n        variables[variableName] = {\n          type: 'HyperlinkValue',\n          linkTargetKey: instanceProperty.linkTargetKey,\n        };\n      }\n    }\n  }\n\n  const children: ComponentTreeNode[] = node.children.map((child) =>\n    deserializeAssemblyNode({\n      node: child,\n      componentInstanceVariables,\n    }),\n  );\n\n  return {\n    definitionId: node.definitionId,\n    variables,\n    children,\n    slotId: node.slotId,\n    displayName: node.displayName,\n  };\n};\n\nexport const resolveAssembly = ({\n  node,\n  entityStore,\n}: {\n  node: ComponentTreeNode;\n  entityStore: EntityStore;\n}) => {\n  const isAssembly = checkIsAssemblyNode({\n    componentId: node.definitionId,\n    usedComponents: entityStore.usedComponents,\n  });\n\n  if (!isAssembly) {\n    return node;\n  }\n\n  const componentId = node.definitionId as string;\n  const assembly = entityStore.experienceEntryFields?.usedComponents?.find(\n    (component) => component.sys.id === componentId,\n  );\n\n  if (!assembly || !('fields' in assembly)) {\n    return node;\n  }\n\n  const componentFields = assembly.fields;\n\n  const deserializedNode = deserializeAssemblyNode({\n    node: {\n      definitionId: node.definitionId,\n      variables: node.variables,\n      children: componentFields.componentTree.children,\n    },\n    componentInstanceVariables: node.variables,\n  });\n\n  entityStore.addAssemblyUnboundValues(componentFields.unboundValues);\n\n  return deserializedNode;\n};\n"],"names":[],"mappings":";;AAGa,MAAA,uBAAuB,GAAG,CAAC,EACtC,IAAI,EACJ,0BAA0B,GAI3B,KAAuB;IACtB,MAAM,SAAS,GAA2C,EAAE,CAAC;AAE7D,IAAA,KAAK,MAAM,CAAC,YAAY,EAAE,QAAQ,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;AACrE,QAAA,SAAS,CAAC,YAAY,CAAC,GAAG,QAAQ,CAAC;AACnC,QAAA,IAAI,QAAQ,CAAC,IAAI,KAAK,gBAAgB,EAAE;AACtC,YAAA,MAAM,iBAAiB,GAAG,QAAQ,CAAC,GAAG,CAAC;AACvC,YAAA,MAAM,gBAAgB,GAAG,0BAA0B,CAAC,iBAAiB,CAAC,CAAC;;;AAIvE,YAAA,IAAI,gBAAgB,EAAE,IAAI,KAAK,cAAc,EAAE;gBAC7C,SAAS,CAAC,YAAY,CAAC,GAAG;AACxB,oBAAA,IAAI,EAAE,cAAc;oBACpB,GAAG,EAAE,gBAAgB,CAAC,GAAG;iBAC1B,CAAC;aACH;AAAM,iBAAA,IAAI,gBAAgB,EAAE,IAAI,KAAK,YAAY,EAAE;gBAClD,SAAS,CAAC,YAAY,CAAC,GAAG;AACxB,oBAAA,IAAI,EAAE,YAAY;oBAClB,IAAI,EAAE,gBAAgB,CAAC,IAAI;iBAC5B,CAAC;aACH;AAAM,iBAAA,IAAI,gBAAgB,EAAE,IAAI,KAAK,gBAAgB,EAAE;gBACtD,SAAS,CAAC,YAAY,CAAC,GAAG;AACxB,oBAAA,IAAI,EAAE,gBAAgB;oBACtB,aAAa,EAAE,gBAAgB,CAAC,aAAa;iBAC9C,CAAC;aACH;SACF;KACF;AAED,IAAA,MAAM,QAAQ,GAAwB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,KAC5D,uBAAuB,CAAC;AACtB,QAAA,IAAI,EAAE,KAAK;QACX,0BAA0B;AAC3B,KAAA,CAAC,CACH,CAAC;IAEF,OAAO;QACL,YAAY,EAAE,IAAI,CAAC,YAAY;QAC/B,SAAS;QACT,QAAQ;QACR,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,WAAW,EAAE,IAAI,CAAC,WAAW;KAC9B,CAAC;AACJ,EAAE;AAEW,MAAA,eAAe,GAAG,CAAC,EAC9B,IAAI,EACJ,WAAW,GAIZ,KAAI;IACH,MAAM,UAAU,GAAG,mBAAmB,CAAC;QACrC,WAAW,EAAE,IAAI,CAAC,YAAY;QAC9B,cAAc,EAAE,WAAW,CAAC,cAAc;AAC3C,KAAA,CAAC,CAAC;IAEH,IAAI,CAAC,UAAU,EAAE;AACf,QAAA,OAAO,IAAI,CAAC;KACb;AAED,IAAA,MAAM,WAAW,GAAG,IAAI,CAAC,YAAsB,CAAC;IAChD,MAAM,QAAQ,GAAG,WAAW,CAAC,qBAAqB,EAAE,cAAc,EAAE,IAAI,CACtE,CAAC,SAAS,KAAK,SAAS,CAAC,GAAG,CAAC,EAAE,KAAK,WAAW,CAChD,CAAC;IAEF,IAAI,CAAC,QAAQ,IAAI,EAAE,QAAQ,IAAI,QAAQ,CAAC,EAAE;AACxC,QAAA,OAAO,IAAI,CAAC;KACb;AAED,IAAA,MAAM,eAAe,GAAG,QAAQ,CAAC,MAAM,CAAC;IAExC,MAAM,gBAAgB,GAAG,uBAAuB,CAAC;AAC/C,QAAA,IAAI,EAAE;YACJ,YAAY,EAAE,IAAI,CAAC,YAAY;YAC/B,SAAS,EAAE,IAAI,CAAC,SAAS;AACzB,YAAA,QAAQ,EAAE,eAAe,CAAC,aAAa,CAAC,QAAQ;AACjD,SAAA;QACD,0BAA0B,EAAE,IAAI,CAAC,SAAS;AAC3C,KAAA,CAAC,CAAC;AAEH,IAAA,WAAW,CAAC,wBAAwB,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;AAEpE,IAAA,OAAO,gBAAgB,CAAC;AAC1B;;;;"}

package/dist/core/sdkFeatures.js

@@ -0,0 +1,7 @@
+// Object to store the SDK features that are enabled/disabled
+const sdkFeatures = {
+    hasSDKVersionUI: true,
+};
+
+export { sdkFeatures };
+//# sourceMappingURL=sdkFeatures.js.map

package/dist/core/sdkFeatures.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sdkFeatures.js","sources":["../../../src/core/sdkFeatures.ts"],"sourcesContent":["// Object to store the SDK features that are enabled/disabled\nexport const sdkFeatures: Record<string, unknown> = {\n  hasSDKVersionUI: true,\n};\n"],"names":[],"mappings":"AAAA;AACa,MAAA,WAAW,GAA4B;AAClD,IAAA,eAAe,EAAE,IAAI;;;;;"}

package/dist/hooks/useBreakpoints.js

@@ -0,0 +1,40 @@
+import { mediaQueryMatcher, getFallbackBreakpointIndex, getActiveBreakpointIndex, getValueForBreakpoint } from '@contentful/experiences-core';
+import { useState, useEffect, useCallback } from 'react';
+
+// 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 };
+};
+
+export { useBreakpoints };
+//# sourceMappingURL=useBreakpoints.js.map

package/dist/hooks/useBreakpoints.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBreakpoints.js","sources":["../../../src/hooks/useBreakpoints.ts"],"sourcesContent":["import type {\n  ValuesByBreakpoint,\n  Breakpoint,\n  PrimitiveValue,\n  ResolveDesignValueType,\n} from '@contentful/experiences-core/types';\nimport {\n  mediaQueryMatcher,\n  getFallbackBreakpointIndex,\n  getActiveBreakpointIndex,\n  getValueForBreakpoint,\n} from '@contentful/experiences-core';\nimport { useCallback, useEffect, useState } from 'react';\n\n// TODO: In order to support integrations without React, we should extract this heavy logic into simple\n// functions that we can reuse in other frameworks.\n\n/*\n * Registers media query change listeners for each breakpoint (except for \"*\").\n * It will always assume the last matching media query in the list. It therefore,\n * assumes that the breakpoints are sorted beginning with the default value (query: \"*\")\n * and then decending by screen width. For mobile-first designs, the order would be ascending\n */\nexport const useBreakpoints = (breakpoints: Breakpoint[]) => {\n  const [mediaQueryMatchers, initialMediaQueryMatches] = mediaQueryMatcher(breakpoints);\n\n  const [mediaQueryMatches, setMediaQueryMatches] =\n    useState<Record<string, boolean>>(initialMediaQueryMatches);\n\n  const fallbackBreakpointIndex = getFallbackBreakpointIndex(breakpoints);\n\n  // Register event listeners to update the media query states\n  useEffect(() => {\n    const eventListeners = mediaQueryMatchers.map(({ id, signal }) => {\n      const onChange = () =>\n        setMediaQueryMatches((prev) => ({\n          ...prev,\n          [id]: signal.matches,\n        }));\n      signal.addEventListener('change', onChange);\n      return onChange;\n    });\n\n    return () => {\n      eventListeners.forEach((eventListener, index) => {\n        mediaQueryMatchers[index].signal.removeEventListener('change', eventListener);\n      });\n    };\n  }, [mediaQueryMatchers]);\n\n  const activeBreakpointIndex = getActiveBreakpointIndex(\n    breakpoints,\n    mediaQueryMatches,\n    fallbackBreakpointIndex,\n  );\n\n  const resolveDesignValue: ResolveDesignValueType = useCallback(\n    (valuesByBreakpoint: ValuesByBreakpoint, variableName: string): PrimitiveValue => {\n      return getValueForBreakpoint(\n        valuesByBreakpoint,\n        breakpoints,\n        activeBreakpointIndex,\n        variableName,\n      );\n    },\n    [activeBreakpointIndex, breakpoints],\n  );\n\n  return { resolveDesignValue };\n};\n"],"names":[],"mappings":";;;AAcA;AACA;AAEA;;;;;AAKG;AACU,MAAA,cAAc,GAAG,CAAC,WAAyB,KAAI;IAC1D,MAAM,CAAC,kBAAkB,EAAE,wBAAwB,CAAC,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAEtF,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAC7C,QAAQ,CAA0B,wBAAwB,CAAC,CAAC;AAE9D,IAAA,MAAM,uBAAuB,GAAG,0BAA0B,CAAC,WAAW,CAAC,CAAC;;IAGxE,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,cAAc,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,KAAI;AAC/D,YAAA,MAAM,QAAQ,GAAG,MACf,oBAAoB,CAAC,CAAC,IAAI,MAAM;AAC9B,gBAAA,GAAG,IAAI;AACP,gBAAA,CAAC,EAAE,GAAG,MAAM,CAAC,OAAO;AACrB,aAAA,CAAC,CAAC,CAAC;AACN,YAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAC5C,YAAA,OAAO,QAAQ,CAAC;AAClB,SAAC,CAAC,CAAC;AAEH,QAAA,OAAO,MAAK;YACV,cAAc,CAAC,OAAO,CAAC,CAAC,aAAa,EAAE,KAAK,KAAI;AAC9C,gBAAA,kBAAkB,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;AAChF,aAAC,CAAC,CAAC;AACL,SAAC,CAAC;AACJ,KAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAEzB,MAAM,qBAAqB,GAAG,wBAAwB,CACpD,WAAW,EACX,iBAAiB,EACjB,uBAAuB,CACxB,CAAC;IAEF,MAAM,kBAAkB,GAA2B,WAAW,CAC5D,CAAC,kBAAsC,EAAE,YAAoB,KAAoB;QAC/E,OAAO,qBAAqB,CAC1B,kBAAkB,EAClB,WAAW,EACX,qBAAqB,EACrB,YAAY,CACb,CAAC;AACJ,KAAC,EACD,CAAC,qBAAqB,EAAE,WAAW,CAAC,CACrC,CAAC;IAEF,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAChC;;;;"}

package/dist/hooks/useClassName.js

@@ -0,0 +1,42 @@
+import { useState, useLayoutEffect } from 'react';
+import { buildCfStyles, isStructureWithRelativeHeight, buildStyleTag } from '@contentful/experiences-core';
+import { EMPTY_CONTAINER_HEIGHT } from '@contentful/experiences-core/constants';
+
+/**
+ * This hook can generate className and inject styles on a client side as a <style> tag
+ * or it derives the className set on the server side
+ *
+ * @param node: the componenet node for which the styles will be injected
+ * @param props: the props of the component, represented by the node
+ * @returns the className that was eitner generated on the client side or derived from the value, set on server side
+ */
+const useClassName = ({ node, props, }) => {
+    const [className, setClassName] = useState(props.cfSsrClassName ?? '');
+    // Once our React support allows it (>=18), this should be implemented with useInsertionEffect.
+    useLayoutEffect(() => {
+        if (props.cfSsrClassName) {
+            // class name has been already set on the server side. No need to calculate it on client side anymore
+            return;
+        }
+        const cfStyles = buildCfStyles(props);
+        if (Object.keys(cfStyles).length === 0) {
+            return;
+        }
+        if (!node.children.length &&
+            isStructureWithRelativeHeight(node.definitionId, cfStyles.height)) {
+            cfStyles.minHeight = EMPTY_CONTAINER_HEIGHT;
+        }
+        const [className, styleRule] = buildStyleTag({ styles: cfStyles });
+        if (!className || !styleRule) {
+            return;
+        }
+        const styleTag = document.createElement('style');
+        styleTag.dataset['cfStyles'] = className;
+        setClassName(className);
+        document.head.appendChild(styleTag).innerHTML = styleRule;
+    }, [props, node]);
+    return className;
+};
+
+export { useClassName };
+//# sourceMappingURL=useClassName.js.map

package/dist/hooks/useClassName.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClassName.js","sources":["../../../src/hooks/useClassName.ts"],"sourcesContent":["import { useLayoutEffect, useState } from 'react';\n\nimport {\n  buildCfStyles,\n  buildStyleTag,\n  isStructureWithRelativeHeight,\n} from '@contentful/experiences-core';\nimport { ComponentTreeNode } from '@contentful/experiences-core/types';\nimport { EMPTY_CONTAINER_HEIGHT } from '@contentful/experiences-core/constants';\n\n/**\n * This hook can generate className and inject styles on a client side as a <style> tag\n * or it derives the className set on the server side\n *\n * @param node: the componenet node for which the styles will be injected\n * @param props: the props of the component, represented by the node\n * @returns the className that was eitner generated on the client side or derived from the value, set on server side\n */\nexport const useClassName = ({\n  node,\n  props,\n}: {\n  node: ComponentTreeNode;\n  props: Record<string, any>;\n}) => {\n  const [className, setClassName] = useState<string>(props.cfSsrClassName ?? '');\n  // Once our React support allows it (>=18), this should be implemented with useInsertionEffect.\n  useLayoutEffect(() => {\n    if (props.cfSsrClassName) {\n      // class name has been already set on the server side. No need to calculate it on client side anymore\n      return;\n    }\n\n    const cfStyles = buildCfStyles(props);\n\n    if (Object.keys(cfStyles).length === 0) {\n      return;\n    }\n\n    if (\n      !node.children.length &&\n      isStructureWithRelativeHeight(node.definitionId, cfStyles.height)\n    ) {\n      cfStyles.minHeight = EMPTY_CONTAINER_HEIGHT;\n    }\n\n    const [className, styleRule] = buildStyleTag({ styles: cfStyles });\n\n    if (!className || !styleRule) {\n      return;\n    }\n\n    const styleTag = document.createElement('style');\n    styleTag.dataset['cfStyles'] = className;\n\n    setClassName(className);\n\n    document.head.appendChild(styleTag).innerHTML = styleRule;\n  }, [props, node]);\n\n  return className;\n};\n"],"names":[],"mappings":";;;;AAUA;;;;;;;AAOG;AACU,MAAA,YAAY,GAAG,CAAC,EAC3B,IAAI,EACJ,KAAK,GAIN,KAAI;AACH,IAAA,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAS,KAAK,CAAC,cAAc,IAAI,EAAE,CAAC,CAAC;;IAE/E,eAAe,CAAC,MAAK;AACnB,QAAA,IAAI,KAAK,CAAC,cAAc,EAAE;;YAExB,OAAO;SACR;AAED,QAAA,MAAM,QAAQ,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;QAEtC,IAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE;YACtC,OAAO;SACR;AAED,QAAA,IACE,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM;YACrB,6BAA6B,CAAC,IAAI,CAAC,YAAY,EAAE,QAAQ,CAAC,MAAM,CAAC,EACjE;AACA,YAAA,QAAQ,CAAC,SAAS,GAAG,sBAAsB,CAAC;SAC7C;AAED,QAAA,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,GAAG,aAAa,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC;AAEnE,QAAA,IAAI,CAAC,SAAS,IAAI,CAAC,SAAS,EAAE;YAC5B,OAAO;SACR;QAED,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AACjD,QAAA,QAAQ,CAAC,OAAO,CAAC,UAAU,CAAC,GAAG,SAAS,CAAC;QAEzC,YAAY,CAAC,SAAS,CAAC,CAAC;QAExB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,SAAS,GAAG,SAAS,CAAC;AAC5D,KAAC,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC;AAElB,IAAA,OAAO,SAAS,CAAC;AACnB;;;;"}

package/dist/hooks/useDetectEditorMode.js

@@ -0,0 +1,60 @@
+"use client";
+import { useState, useRef, useEffect } from 'react';
+import { sendMessage, doesMismatchMessageSchema, tryParseMessage } from '@contentful/experiences-core';
+import { OUTGOING_EVENTS, INCOMING_EVENTS } from '@contentful/experiences-core/constants';
+import { sdkFeatures } from '../core/sdkFeatures.js';
+
+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, undefined);
+                sendMessage(OUTGOING_EVENTS.SDKFeatures, sdkFeatures);
+                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;
+    }
+}
+
+export { useDetectEditorMode };
+//# sourceMappingURL=useDetectEditorMode.js.map

package/dist/hooks/useDetectEditorMode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDetectEditorMode.js","sources":["../../../src/hooks/useDetectEditorMode.tsx"],"sourcesContent":["'use client';\nimport { useEffect, useRef, useState } from 'react';\nimport {\n  doesMismatchMessageSchema,\n  sendMessage,\n  tryParseMessage,\n} from '@contentful/experiences-core';\nimport { INCOMING_EVENTS, OUTGOING_EVENTS } from '@contentful/experiences-core/constants';\nimport { sdkFeatures } from '../core/sdkFeatures';\n\ntype UseDetectEditorModeArgs = {\n  /** If running from a known client side only situation (ie: useFetchBySlug),\n   * set this to true to kick in editor mode check sooner (which avoids a render cycle) */\n  isClientSide?: boolean;\n};\n\nexport const useDetectEditorMode = ({ isClientSide = false }: UseDetectEditorModeArgs = {}) => {\n  const [mounted, setMounted] = useState(false);\n  const [isEditorMode, setIsEditorMode] = useState(isClientSide ? inIframe() : false);\n  const receivedMessage = useRef(false);\n\n  useEffect(() => {\n    const onMessage = (event: MessageEvent) => {\n      if (doesMismatchMessageSchema(event)) {\n        return;\n      }\n      const eventData = tryParseMessage(event);\n\n      if (eventData.eventType === INCOMING_EVENTS.RequestEditorMode) {\n        setIsEditorMode(true);\n        receivedMessage.current = true;\n        if (typeof window !== 'undefined') {\n          //Once we definitely know that we are in editor mode, we set this flag so future postMessage connect calls are not made\n          window.__EB__.isEditorMode = true;\n          window.removeEventListener('message', onMessage);\n        }\n      }\n    };\n\n    //Only run check after component is mounted on the client to avoid hydration ssr issues\n    if (mounted) {\n      setIsEditorMode(inIframe());\n      //Double check if we are in editor mode by listening to postMessage events\n      if (typeof window !== 'undefined' && !window.__EB__?.isEditorMode) {\n        window.addEventListener('message', onMessage);\n        sendMessage(OUTGOING_EVENTS.Connected, undefined);\n        sendMessage(OUTGOING_EVENTS.SDKFeatures, sdkFeatures);\n\n        setTimeout(() => {\n          if (!receivedMessage.current) {\n            // if message is not received back in time, set editorMode back to false\n            setIsEditorMode(false);\n          }\n        }, 100);\n      }\n    } else {\n      setMounted(true);\n    }\n\n    return () => window.removeEventListener('message', onMessage);\n  }, [mounted]);\n\n  return isEditorMode;\n};\n\nfunction inIframe() {\n  try {\n    return window.self !== window.top;\n  } catch (e) {\n    return false;\n  }\n}\n"],"names":[],"mappings":";;;;;;AAgBO;;AAEL;AACA;;AAGE;AACE;;;AAGA;;;AAIE;AACA;;AAEE;AACA;;;AAGN;;;AAIE;;AAEA;AACE;AACA;AACA;;AAGE;;;;;;;;;;;AAWR;AAEA;AACF;AAEA;AACE;AACE;;;AAEA;;AAEJ;;"}

package/dist/hooks/useFetchByBase.js

@@ -0,0 +1,38 @@
+"use client";
+import { useState, useEffect } from 'react';
+
+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,
+    };
+};
+
+export { useFetchByBase };
+//# sourceMappingURL=useFetchByBase.js.map