@contentful/experiences-sdk-react 0.0.1-alpha.9 → 0.0.1-beta.0

package/dist/index.d.ts

@@ -47,5 +47,13 @@ declare const useFetchBySlug: ({ slug, localeCode, client, experienceTypeId, }:
  * @returns void
  */
 declare const defineComponents: (componentRegistrations: ComponentRegistration[], options?: ComponentRegistrationOptions) => void;
+/**
+ * @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.
+ */
+declare const maintainBasicComponentIdsWithoutPrefix: () => void;
 
-export { ExperienceRoot, defineComponents, useFetchById, useFetchBySlug };
+export { ExperienceRoot, defineComponents, maintainBasicComponentIdsWithoutPrefix, useFetchById, useFetchBySlug };

package/dist/index.js

@@ -1,7 +1,7 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { containerDefinition, sectionDefinition, columnsDefinition, singleColumnDefinition, builtInStyles, optionalBuiltInStyles, sendMessage, designTokensRegistry, buildStyleTag, checkIsAssemblyNode, transformBoundContentValue, buildCfStyles, isEmptyStructureWithRelativeHeight, mediaQueryMatcher, getFallbackBreakpointIndex, getActiveBreakpointIndex, getValueForBreakpoint, doesMismatchMessageSchema, tryParseMessage, fetchById, fetchBySlug, validateExperienceBuilderConfig, VisualEditorMode } from '@contentful/experiences-core';
 export { VisualEditorMode, createExperience, defineDesignTokens, fetchById, fetchBySlug } from '@contentful/experiences-core';
-import React, { useState, useEffect, useMemo, useCallback, useRef, Suspense } from 'react';
+import React, { useMemo, useLayoutEffect, useState, useEffect, 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 { CF_STYLE_ATTRIBUTES, CONTENTFUL_COMPONENTS, LATEST_SCHEMA_VERSION } from '@contentful/experiences-core/constants';
@@ -9,7 +9,7 @@ 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.8';
+const SDK_VERSION = '0.0.1-alpha.13';
 
 var util;
 (function (util) {
@@ -4487,7 +4487,7 @@ const optionalBuiltInComponents = [
 ];
 const sendRegisteredComponentsMessage = () => {
     // Send the definitions (without components) via the connection message to the experience builder
-    const registeredDefinitions = Array.from(componentRegistry.values());
+    const registeredDefinitions = Array.from(componentRegistry.values()).map(({ definition }) => definition);
     sendMessage(OUTGOING_EVENTS.RegisteredComponents, {
         definitions: registeredDefinitions,
     });
@@ -4552,6 +4552,27 @@ const createAssemblyRegistration = ({ definitionId, definitionName, component, }
     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);
+        }
+    });
+};
 
 /**
  *
@@ -4563,13 +4584,17 @@ const createAssemblyRegistration = ({ definitionId, definitionName, component, }
  * 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(() => {
+    const [className, styleRule] = useMemo(() => {
         if (Object.keys(styles).length === 0) {
+            return [''];
+        }
+        return buildStyleTag({ styles, nodeId });
+    }, [styles, nodeId]);
+    // Once our React support allows it (>=18), this should be implemented with useInsertionEffect.
+    useLayoutEffect(() => {
+        if (!className || !styleRule) {
             return;
         }
-        const [className, styleRule] = buildStyleTag({ styles, nodeId });
-        setClassName(className);
         const existingTag = document.querySelector(`[data-cf-styles="${className}"]`);
         if (existingTag) {
             // editor mode - update existing
@@ -4583,7 +4608,7 @@ const useStyleTag = ({ styles, nodeId }) => {
         const styleTag = document.createElement('style');
         styleTag.dataset['cfStyles'] = className;
         document.head.appendChild(styleTag).innerHTML = styleRule;
-    }, [styles, nodeId]);
+    }, [className, nodeId, styleRule]);
     return { className };
 };
 
@@ -4737,7 +4762,7 @@ const CompositionBlock = ({ node: rawNode, locale, entityStore, resolveDesignVal
     return React.createElement(component, {
         ...omit(nodeProps, stylesToRemove, ['cfHyperlink', 'cfOpenInNewTab']),
         className,
-    }, children);
+    }, children ?? (typeof nodeProps.children === 'string' ? nodeProps.children : null));
 };
 
 // TODO: In order to support integrations without React, we should extract this heavy logic into simple
@@ -5010,5 +5035,5 @@ if (typeof window !== 'undefined') {
     };
 }
 
-export { ExperienceRoot, defineComponents, useFetchById, useFetchBySlug };
+export { ExperienceRoot, defineComponents, maintainBasicComponentIdsWithoutPrefix, useFetchById, useFetchBySlug };
 //# sourceMappingURL=index.js.map