@contentful/experiences-sdk-react 1.0.4 → 1.0.5-beta.0

package/dist/{VisualEditorLoader-255ce544.js → VisualEditorLoader-3839b3a6.js}

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { VisualEditorMode } from '@contentful/experiences-core';
 
-const VisualEditorLoader = ({ visualEditorMode }) => {
+const VisualEditorLoader = ({ visualEditorMode, experience, }) => {
     const [VisualEditor, setVisualEditor] = useState(null);
     useEffect(() => {
         // Dynamically import the visual editor based on the configured mode
@@ -21,8 +21,8 @@ const VisualEditorLoader = ({ visualEditorMode }) => {
     }, [visualEditorMode]);
     if (!VisualEditor)
         return null;
-    return jsx(VisualEditor, {});
+    return jsx(VisualEditor, { experience: experience });
 };
 
 export { VisualEditorLoader, VisualEditorLoader as default };
-//# sourceMappingURL=VisualEditorLoader-255ce544.js.map
+//# sourceMappingURL=VisualEditorLoader-3839b3a6.js.map

package/dist/VisualEditorLoader-3839b3a6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisualEditorLoader-3839b3a6.js","sources":["../../src/blocks/editor/VisualEditorLoader.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { EntityStore, VisualEditorMode } from '@contentful/experiences-core';\nimport type { Experience } from '@contentful/experiences-core/types';\n\ntype VisualEditorLoaderProps = {\n  visualEditorMode: VisualEditorMode;\n  experience?: Experience<EntityStore>;\n};\n\nexport const VisualEditorLoader: React.FC<VisualEditorLoaderProps> = ({\n  visualEditorMode,\n\n  experience,\n}) => {\n  const [VisualEditor, setVisualEditor] = useState<React.ComponentType<{\n    experience?: Experience<EntityStore>;\n  }> | null>(null);\n\n  useEffect(() => {\n    // Dynamically import the visual editor based on the configured mode\n    switch (visualEditorMode) {\n      case VisualEditorMode.InjectScript:\n        import('./VisualEditorInjectScript').then((module) => {\n          setVisualEditor(() => module.default);\n        });\n        break;\n\n      // VisualEditorMode.LazyLoad:\n      default:\n        import('@contentful/experiences-visual-editor-react').then((module) => {\n          setVisualEditor(() => module.default);\n        });\n    }\n  }, [visualEditorMode]);\n\n  if (!VisualEditor) return null;\n\n  return <VisualEditor experience={experience} />;\n};\n\nexport default VisualEditorLoader;\n"],"names":["_jsx"],"mappings":";;;;AASa,MAAA,kBAAkB,GAAsC,CAAC,EACpE,gBAAgB,EAEhB,UAAU,GACX,KAAI;IACH,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAErC,IAAI,CAAC,CAAC;IAEjB,SAAS,CAAC,MAAK;;QAEb,QAAQ,gBAAgB;YACtB,KAAK,gBAAgB,CAAC,YAAY;gBAChC,OAAO,wCAA4B,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,KAAI;oBACnD,eAAe,CAAC,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC;AACxC,iBAAC,CAAC,CAAC;gBACH,MAAM;;AAGR,YAAA;gBACE,OAAO,6CAA6C,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,KAAI;oBACpE,eAAe,CAAC,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC;AACxC,iBAAC,CAAC,CAAC;SACN;AACH,KAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;AAEvB,IAAA,IAAI,CAAC,YAAY;AAAE,QAAA,OAAO,IAAI,CAAC;AAE/B,IAAA,OAAOA,IAAC,YAAY,EAAA,EAAC,UAAU,EAAE,UAAU,GAAI,CAAC;AAClD;;;;"}

package/dist/index.d.ts

@@ -2,7 +2,6 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _contentful_experiences_core from '@contentful/experiences-core';
 import { EntityStore, VisualEditorMode } from '@contentful/experiences-core';
 export { VisualEditorMode, createExperience, defineDesignTokens, fetchById, fetchBySlug } from '@contentful/experiences-core';
-import * as _contentful_experiences_core_types from '@contentful/experiences-core/types';
 import { Experience, ComponentRegistration, ComponentRegistrationOptions } from '@contentful/experiences-core/types';
 export { ComponentDefinition, ExternalSDKMode } from '@contentful/experiences-core/types';
 import { ContentfulClientApi } from 'contentful';
@@ -20,10 +19,14 @@ type UseFetchByIdArgs = {
     id: string;
     experienceTypeId: string;
     localeCode: string;
+    hyperlinkPattern?: string;
 };
-declare const useFetchById: ({ id, localeCode, client, experienceTypeId }: UseFetchByIdArgs) => {
+declare const useFetchById: ({ id, localeCode, client, experienceTypeId, hyperlinkPattern, }: UseFetchByIdArgs) => {
+    experience: {
+        hyperlinkPattern: string | undefined;
+        entityStore?: _contentful_experiences_core.EntityStore | undefined;
+    };
     error: Error | undefined;
-    experience: _contentful_experiences_core_types.Experience<_contentful_experiences_core.EntityStore> | undefined;
     isLoading: boolean;
     isEditorMode: boolean;
 };
@@ -33,10 +36,15 @@ type UseFetchBySlugArgs = {
     slug: string;
     experienceTypeId: string;
     localeCode: string;
+    /** The pattern being used to generate links for hyperlink properties **/
+    hyperlinkPattern?: string;
 };
-declare const useFetchBySlug: ({ slug, localeCode, client, experienceTypeId, }: UseFetchBySlugArgs) => {
+declare const useFetchBySlug: ({ slug, localeCode, client, experienceTypeId, hyperlinkPattern, }: UseFetchBySlugArgs) => {
+    experience: {
+        hyperlinkPattern: string | undefined;
+        entityStore?: _contentful_experiences_core.EntityStore | undefined;
+    };
     error: Error | undefined;
-    experience: _contentful_experiences_core_types.Experience<_contentful_experiences_core.EntityStore> | undefined;
     isLoading: boolean;
     isEditorMode: boolean;
 };

package/dist/index.js

@@ -1,15 +1,15 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { containerDefinition, sectionDefinition, columnsDefinition, singleColumnDefinition, dividerDefinition, builtInStyles, optionalBuiltInStyles, sendMessage, designTokensRegistry, buildStyleTag, checkIsAssemblyNode, transformBoundContentValue, buildCfStyles, isEmptyStructureWithRelativeHeight, mediaQueryMatcher, getFallbackBreakpointIndex, getActiveBreakpointIndex, getValueForBreakpoint, doesMismatchMessageSchema, tryParseMessage, fetchById, fetchBySlug, validateExperienceBuilderConfig, VisualEditorMode } from '@contentful/experiences-core';
+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 } 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 { 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';
+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';
 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';
 
-const SDK_VERSION = '1.0.4-beta.0';
+const SDK_VERSION = '1.0.4';
 
 var util;
 (function (util) {
@@ -4652,6 +4652,12 @@ const deserializeAssemblyNode = ({ node, componentInstanceVariables, }) => {
                     path: instanceProperty.path,
                 };
             }
+            else if (instanceProperty?.type === 'HyperlinkValue') {
+                variables[variableName] = {
+                    type: 'HyperlinkValue',
+                    linkTargetKey: instanceProperty.linkTargetKey,
+                };
+            }
         }
     }
     const children = node.children.map((child) => deserializeAssemblyNode({
@@ -4699,7 +4705,7 @@ const Assembly = ({ ...props }) => {
     return jsx("div", { "data-test-id": "assembly", ...props, style: assemblyStyle });
 };
 
-const CompositionBlock = ({ node: rawNode, locale, entityStore, resolveDesignValue, }) => {
+const CompositionBlock = ({ node: rawNode, locale, entityStore, hyperlinkPattern, resolveDesignValue, }) => {
     const isAssembly = useMemo(() => checkIsAssemblyNode({
         componentId: rawNode.definitionId,
         usedComponents: entityStore.usedComponents,
@@ -4743,6 +4749,17 @@ const CompositionBlock = ({ node: rawNode, locale, entityStore, resolveDesignVal
                     acc[variableName] = value;
                     break;
                 }
+                case 'HyperlinkValue': {
+                    const binding = entityStore.dataSource[variable.linkTargetKey];
+                    const hyperlinkEntry = entityStore.getEntryOrAsset(binding, variable.linkTargetKey);
+                    const value = resolveHyperlinkPattern(componentRegistration.definition.hyperlinkPattern ||
+                        hyperlinkPattern ||
+                        HYPERLINK_DEFAULT_PATTERN, hyperlinkEntry, locale);
+                    if (value) {
+                        acc[variableName] = value;
+                    }
+                    break;
+                }
                 case 'UnboundValue': {
                     const uuid = variable.key;
                     acc[variableName] = entityStore.unboundValues[uuid]?.value;
@@ -4751,7 +4768,15 @@ const CompositionBlock = ({ node: rawNode, locale, entityStore, resolveDesignVal
             }
             return acc;
         }, propMap);
-    }, [componentRegistration, isAssembly, node.variables, resolveDesignValue, entityStore]);
+    }, [
+        componentRegistration,
+        isAssembly,
+        node.variables,
+        resolveDesignValue,
+        entityStore,
+        hyperlinkPattern,
+        locale,
+    ]);
     const cfStyles = buildCfStyles(nodeProps, node.definitionId);
     if (isEmptyStructureWithRelativeHeight(node.children.length, node.definitionId, cfStyles.height)) {
         cfStyles.minHeight = EMPTY_CONTAINER_HEIGHT;
@@ -4763,7 +4788,7 @@ const CompositionBlock = ({ node: rawNode, locale, entityStore, resolveDesignVal
     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));
+            return (jsx(CompositionBlock, { node: childNode, locale: locale, hyperlinkPattern: hyperlinkPattern, entityStore: entityStore, resolveDesignValue: resolveDesignValue }, index));
         })
         : null;
     if ([CONTENTFUL_COMPONENTS.container.id, CONTENTFUL_COMPONENTS.section.id].includes(node.definitionId)) {
@@ -4903,20 +4928,22 @@ function inIframe() {
     }
 }
 
-const useFetchById = ({ id, localeCode, client, experienceTypeId }) => {
+const useFetchById = ({ id, localeCode, client, experienceTypeId, hyperlinkPattern, }) => {
     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 fetchResult = useFetchByBase(fetchMethod, isEditorMode);
+    return { ...fetchResult, experience: { ...fetchResult.experience, hyperlinkPattern } };
 };
 
-const useFetchBySlug = ({ slug, localeCode, client, experienceTypeId, }) => {
+const useFetchBySlug = ({ slug, localeCode, client, experienceTypeId, hyperlinkPattern, }) => {
     const isEditorMode = useDetectEditorMode({ isClientSide: typeof window !== 'undefined' });
     const fetchMethod = useCallback(() => {
         return fetchBySlug({ slug, localeCode, client, experienceTypeId });
     }, [slug, localeCode, client, experienceTypeId]);
-    return useFetchByBase(fetchMethod, isEditorMode);
+    const fetchResult = useFetchByBase(fetchMethod, isEditorMode);
+    return { ...fetchResult, experience: { ...fetchResult.experience, hyperlinkPattern } };
 };
 
 const PreviewDeliveryRoot = ({ locale, experience }) => {
@@ -4929,7 +4956,7 @@ const PreviewDeliveryRoot = ({ locale, experience }) => {
         console.warn(`[experiences-sdk-react] Contentful experience 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))) }));
+    return (jsx(Fragment, { children: entityStore.experienceEntryFields.componentTree.children.map((childNode, index) => (jsx(CompositionBlock, { node: childNode, hyperlinkPattern: experience.hyperlinkPattern, 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";
@@ -5023,13 +5050,14 @@ const useInitializeVisualEditor = (params) => {
     }, [locale, initialEntities]);
 };
 
-const VisualEditorLoader = React.lazy(() => import('./VisualEditorLoader-255ce544.js'));
-const VisualEditorRoot = ({ visualEditorMode, initialEntities, initialLocale, }) => {
+const VisualEditorLoader = React.lazy(() => import('./VisualEditorLoader-3839b3a6.js'));
+const VisualEditorRoot = ({ visualEditorMode, experience, initialLocale, }) => {
+    const initialEntities = experience?.entityStore?.entities || [];
     useInitializeVisualEditor({
         initialLocale,
         initialEntities,
     });
-    return (jsx(ErrorBoundary, { children: jsx(Suspense, { fallback: jsx("div", { children: "Loading..." }), children: jsx(VisualEditorLoader, { visualEditorMode: visualEditorMode }) }) }));
+    return (jsx(ErrorBoundary, { children: jsx(Suspense, { fallback: jsx("div", { children: "Loading..." }), children: jsx(VisualEditorLoader, { experience: experience, visualEditorMode: visualEditorMode }) }) }));
 };
 
 const ExperienceRoot = ({ locale, experience, visualEditorMode = VisualEditorMode.LazyLoad, }) => {
@@ -5039,8 +5067,7 @@ const ExperienceRoot = ({ locale, experience, visualEditorMode = VisualEditorMod
         isEditorMode,
     });
     if (isEditorMode) {
-        const entityStore = experience?.entityStore;
-        return (jsx(VisualEditorRoot, { visualEditorMode: visualEditorMode, initialEntities: entityStore?.entities || [], initialLocale: locale }));
+        return (jsx(VisualEditorRoot, { experience: experience, visualEditorMode: visualEditorMode, initialLocale: locale }));
     }
     if (!experience)
         return null;