@contentful/experiences-sdk-react 1.3.0 → 1.3.1-dev-20240508T1336-149a569.0

package/dist/index.js

@@ -1,16 +1,16 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { containerDefinition, sectionDefinition, columnsDefinition, singleColumnDefinition, dividerDefinition, builtInStyles, optionalBuiltInStyles, sendMessage, designTokensRegistry, buildStyleTag, checkIsAssemblyNode, resolveHyperlinkPattern, transformBoundContentValue, buildCfStyles, isEmptyStructureWithRelativeHeight, mediaQueryMatcher, getFallbackBreakpointIndex, getActiveBreakpointIndex, getValueForBreakpoint, doesMismatchMessageSchema, tryParseMessage, fetchById, fetchBySlug, validateExperienceBuilderConfig, VisualEditorMode, toCSSAttribute } from '@contentful/experiences-core';
+import { containerDefinition, sectionDefinition, columnsDefinition, singleColumnDefinition, dividerDefinition, builtInStyles, optionalBuiltInStyles, sendMessage, designTokensRegistry, buildCfStyles, isEmptyStructureWithRelativeHeight, buildStyleTag, checkIsAssemblyNode, resolveHyperlinkPattern, transformBoundContentValue, mediaQueryMatcher, getFallbackBreakpointIndex, getActiveBreakpointIndex, getValueForBreakpoint, doesMismatchMessageSchema, tryParseMessage, fetchById, fetchBySlug, validateExperienceBuilderConfig, VisualEditorMode, toCSSAttribute } from '@contentful/experiences-core';
 export { VisualEditorMode, createExperience, defineDesignTokens, fetchById, fetchBySlug } from '@contentful/experiences-core';
-import React, { useMemo, useLayoutEffect, useState, useEffect, useCallback, useRef, Suspense } from 'react';
+import React, { useState, useLayoutEffect, useMemo, useEffect, useCallback, useRef, Suspense } from 'react';
 import { omit } from 'lodash-es';
-import { INTERNAL_EVENTS, CONTENTFUL_COMPONENTS, OUTGOING_EVENTS, ASSEMBLY_DEFAULT_CATEGORY, HYPERLINK_DEFAULT_PATTERN, EMPTY_CONTAINER_HEIGHT, CF_STYLE_ATTRIBUTES, INCOMING_EVENTS, VISUAL_EDITOR_EVENTS } from '@contentful/experiences-core/constants';
+import { INTERNAL_EVENTS, CONTENTFUL_COMPONENTS, OUTGOING_EVENTS, ASSEMBLY_DEFAULT_CATEGORY, EMPTY_CONTAINER_HEIGHT, HYPERLINK_DEFAULT_PATTERN, CF_STYLE_ATTRIBUTES, INCOMING_EVENTS, VISUAL_EDITOR_EVENTS } from '@contentful/experiences-core/constants';
 export { CF_STYLE_ATTRIBUTES, CONTENTFUL_COMPONENTS, LATEST_SCHEMA_VERSION } 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';
 import md5 from 'md5';
 
-const SDK_VERSION = '1.3.0-beta.0';
+const SDK_VERSION = '1.3.0';
 
 var util;
 (function (util) {
@@ -4596,41 +4596,38 @@ const maintainBasicComponentIdsWithoutPrefix = () => {
 };
 
 /**
+ * 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 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
+ * @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 useStyleTag = ({ styles, nodeId }) => {
-    const [className, styleRule] = useMemo(() => {
-        if (Object.keys(styles).length === 0) {
-            return [''];
-        }
-        return buildStyleTag({ styles, nodeId });
-    }, [styles, nodeId]);
+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 (!className || !styleRule) {
+        if (props.cfSsrClassName) {
+            // class name has been already set on the server side. No need to calculate it on client side anymore
             return;
         }
-        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
+        const cfStyles = buildCfStyles(props, node.definitionId);
+        if (Object.keys(cfStyles).length === 0) {
+            return;
+        }
+        if (isEmptyStructureWithRelativeHeight(node.children.length, 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;
-    }, [className, nodeId, styleRule]);
-    return { className };
+    }, [props, node]);
+    return className;
 };
 
 const deserializeAssemblyNode = ({ node, componentInstanceVariables, }) => {
@@ -4735,7 +4732,11 @@ const CompositionBlock = ({ node: rawNode, locale, entityStore, hyperlinkPattern
         if (!componentRegistration || isAssembly) {
             return {};
         }
-        const propMap = {};
+        const propMap = {
+            cfSsrClassName: node.variables.cfSsrClassName
+                ? resolveDesignValue(node.variables.cfSsrClassName.valuesByBreakpoint, 'cfSsrClassName')
+                : undefined,
+        };
         return Object.entries(componentRegistration.definition.variables).reduce((acc, [variableName, variableDefinition]) => {
             const variable = node.variables[variableName];
             if (!variable)
@@ -4784,14 +4785,7 @@ const CompositionBlock = ({ node: rawNode, locale, entityStore, hyperlinkPattern
         hyperlinkPattern,
         locale,
     ]);
-    const cfStyles = buildCfStyles(nodeProps, node.definitionId);
-    if (isEmptyStructureWithRelativeHeight(node.children.length, node.definitionId, cfStyles.height)) {
-        cfStyles.minHeight = EMPTY_CONTAINER_HEIGHT;
-    }
-    const { className: runtimeClassname } = useStyleTag({ styles: cfStyles });
-    const className = node.variables.cfSsrClassName
-        ? resolveDesignValue(node.variables.cfSsrClassName.valuesByBreakpoint, 'cfSsrClassName')
-        : runtimeClassname;
+    const className = useClassName({ props: nodeProps, node });
     if (!componentRegistration) {
         return null;
     }
@@ -4814,7 +4808,7 @@ const CompositionBlock = ({ node: rawNode, locale, entityStore, hyperlinkPattern
     const stylesToKeep = ['cfImageAsset'];
     const stylesToRemove = CF_STYLE_ATTRIBUTES.filter((style) => !stylesToKeep.includes(style));
     return React.createElement(component, {
-        ...omit(nodeProps, stylesToRemove, ['cfHyperlink', 'cfOpenInNewTab']),
+        ...omit(nodeProps, stylesToRemove, ['cfHyperlink', 'cfOpenInNewTab', 'cfSsrClassName']),
         className,
     }, children ?? (typeof nodeProps.children === 'string' ? nodeProps.children : null));
 };