@contentful/experiences-sdk-react 1.41.1-dev-20250616T1604-5af1e75.0 → 1.42.0-dev-20250617T0920-3f313ab.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/blocks/preview/CompositionBlock.js +57 -23
- package/dist/blocks/preview/CompositionBlock.js.map +1 -1
- package/dist/core/preview/assemblyUtils.js +6 -6
- package/dist/core/preview/assemblyUtils.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/sdkVersion.js +1 -1
- package/dist/sdkVersion.js.map +1 -1
- package/dist/src/core/preview/assemblyUtils.d.ts +3 -3
- package/dist/src/sdkVersion.d.ts +1 -1
- package/dist/src/utils/parseComponentProps.d.ts +14 -6
- package/dist/src/utils/prebindingUtils.d.ts +4 -0
- package/dist/utils/parseComponentProps.js +17 -17
- package/dist/utils/parseComponentProps.js.map +1 -1
- package/dist/utils/prebindingUtils.js +27 -1
- package/dist/utils/prebindingUtils.js.map +1 -1
- package/package.json +6 -6
|
@@ -1,68 +1,83 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import React, { useMemo } from 'react';
|
|
3
|
-
import { checkIsAssemblyNode, transformBoundContentValue, resolveHyperlinkPattern, sanitizeNodeProps } from '@contentful/experiences-core';
|
|
3
|
+
import { checkIsAssemblyNode, checkIsAssemblyEntry, transformBoundContentValue, resolveHyperlinkPattern, sanitizeNodeProps } from '@contentful/experiences-core';
|
|
4
4
|
import { HYPERLINK_DEFAULT_PATTERN, CONTENTFUL_COMPONENTS } from '@contentful/experiences-core/constants';
|
|
5
5
|
import { getComponentRegistration, createAssemblyRegistration } from '../../core/componentRegistry.js';
|
|
6
6
|
import { useInjectStylesheet } from '../../hooks/useInjectStylesheet.js';
|
|
7
7
|
import { Assembly, ContentfulContainer, Columns, SingleColumn } from '@contentful/experiences-components-react';
|
|
8
|
-
import {
|
|
8
|
+
import { resolvePattern } from '../../core/preview/assemblyUtils.js';
|
|
9
|
+
import { resolveMaybePrebindingDefaultValuePath } from '../../utils/prebindingUtils.js';
|
|
9
10
|
import PreviewUnboundImage from './PreviewUnboundImage.js';
|
|
10
11
|
import { parseComponentProps } from '../../utils/parseComponentProps.js';
|
|
11
12
|
|
|
12
13
|
const CompositionBlock = ({ node: rawNode, locale, entityStore, hyperlinkPattern, resolveDesignValue, getPatternChildNodeClassName, wrappingPatternIds: parentWrappingPatternIds = new Set(), wrappingPatternProperties: parentWrappingPatternProperties = {}, patternRootNodeIdsChain: parentPatternRootNodeIdsChain = '', }) => {
|
|
13
|
-
const
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
14
|
+
const isPatternNode = useMemo(() => {
|
|
15
|
+
return checkIsAssemblyNode({
|
|
16
|
+
componentId: rawNode.definitionId,
|
|
17
|
+
usedComponents: entityStore.usedComponents,
|
|
18
|
+
});
|
|
19
|
+
}, [entityStore.usedComponents, rawNode.definitionId]);
|
|
20
|
+
const isPatternEntry = useMemo(() => {
|
|
21
|
+
return checkIsAssemblyEntry({ fields: entityStore.experienceEntryFields });
|
|
22
|
+
}, [entityStore]);
|
|
17
23
|
const patternRootNodeIdsChain = useMemo(() => {
|
|
18
|
-
if (
|
|
24
|
+
if (isPatternNode) {
|
|
19
25
|
// Pattern nodes are chained without a separator (following the format for prebinding/patternProperties)
|
|
20
26
|
return `${parentPatternRootNodeIdsChain}${rawNode.id}`;
|
|
21
27
|
}
|
|
22
28
|
return parentPatternRootNodeIdsChain;
|
|
23
|
-
}, [
|
|
29
|
+
}, [isPatternNode, parentPatternRootNodeIdsChain, rawNode.id]);
|
|
24
30
|
const node = useMemo(() => {
|
|
25
|
-
|
|
26
|
-
|
|
31
|
+
if (isPatternNode) {
|
|
32
|
+
return resolvePattern({
|
|
27
33
|
node: rawNode,
|
|
28
34
|
entityStore,
|
|
29
35
|
parentPatternProperties: parentWrappingPatternProperties,
|
|
30
36
|
patternRootNodeIdsChain,
|
|
31
|
-
})
|
|
32
|
-
|
|
33
|
-
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
else {
|
|
40
|
+
return rawNode;
|
|
41
|
+
}
|
|
42
|
+
}, [
|
|
43
|
+
entityStore,
|
|
44
|
+
isPatternNode,
|
|
45
|
+
rawNode,
|
|
46
|
+
parentWrappingPatternProperties,
|
|
47
|
+
patternRootNodeIdsChain,
|
|
48
|
+
]);
|
|
34
49
|
const wrappingPatternIds = useMemo(() => {
|
|
35
|
-
if (
|
|
50
|
+
if (isPatternNode) {
|
|
36
51
|
return new Set([node.definitionId, ...parentWrappingPatternIds]);
|
|
37
52
|
}
|
|
38
53
|
return parentWrappingPatternIds;
|
|
39
|
-
}, [
|
|
54
|
+
}, [isPatternNode, node, parentWrappingPatternIds]);
|
|
40
55
|
// Merge the pattern properties of the current node with the parent's pattern properties
|
|
41
56
|
// to ensure nested patterns receive relevant pattern properties that were bubbled up
|
|
42
57
|
// during assembly serialization.
|
|
43
58
|
const wrappingPatternProperties = useMemo(() => {
|
|
44
|
-
if (
|
|
59
|
+
if (isPatternNode) {
|
|
45
60
|
return { ...parentWrappingPatternProperties, ...(rawNode.patternProperties || {}) };
|
|
46
61
|
}
|
|
47
62
|
return parentWrappingPatternProperties;
|
|
48
|
-
}, [
|
|
63
|
+
}, [isPatternNode, rawNode, parentWrappingPatternProperties]);
|
|
49
64
|
const componentRegistration = useMemo(() => {
|
|
50
65
|
const registration = getComponentRegistration(node.definitionId);
|
|
51
|
-
if (
|
|
66
|
+
if (isPatternNode && !registration) {
|
|
52
67
|
return createAssemblyRegistration({
|
|
53
68
|
definitionId: node.definitionId,
|
|
54
69
|
component: Assembly,
|
|
55
70
|
});
|
|
56
71
|
}
|
|
57
72
|
return registration;
|
|
58
|
-
}, [
|
|
73
|
+
}, [isPatternNode, node.definitionId]);
|
|
59
74
|
const { ssrProps, contentProps, props, mediaQuery } = useMemo(() => {
|
|
60
75
|
// In SSR, we store the className under breakpoints[0] which is resolved here to the actual string
|
|
61
76
|
const cfSsrClassNameValues = node.variables.cfSsrClassName;
|
|
62
77
|
const mainBreakpoint = entityStore.breakpoints[0];
|
|
63
78
|
const cfSsrClassName = cfSsrClassNameValues?.valuesByBreakpoint?.[mainBreakpoint.id];
|
|
64
79
|
// Don't enrich the assembly wrapper node with props
|
|
65
|
-
if (!componentRegistration ||
|
|
80
|
+
if (!componentRegistration || isPatternNode) {
|
|
66
81
|
const ssrProps = { cfSsrClassName };
|
|
67
82
|
const props = { className: cfSsrClassName };
|
|
68
83
|
return {
|
|
@@ -100,6 +115,24 @@ const CompositionBlock = ({ node: rawNode, locale, entityStore, hyperlinkPattern
|
|
|
100
115
|
resolveUnboundValue: ({ mappingKey, defaultValue }) => {
|
|
101
116
|
return entityStore.unboundValues[mappingKey]?.value ?? defaultValue;
|
|
102
117
|
},
|
|
118
|
+
resolvePrebindingValue: ({ mappingKey, propertyName, dataType, resolveBoundValue }) => {
|
|
119
|
+
if (isPatternEntry) {
|
|
120
|
+
const path = resolveMaybePrebindingDefaultValuePath({
|
|
121
|
+
componentValueKey: mappingKey,
|
|
122
|
+
entityStore,
|
|
123
|
+
});
|
|
124
|
+
if (path) {
|
|
125
|
+
return resolveBoundValue({
|
|
126
|
+
propertyName,
|
|
127
|
+
dataType,
|
|
128
|
+
binding: {
|
|
129
|
+
type: 'BoundValue',
|
|
130
|
+
path,
|
|
131
|
+
},
|
|
132
|
+
});
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
},
|
|
103
136
|
});
|
|
104
137
|
const slotsProps = {};
|
|
105
138
|
if (componentRegistration.definition.slots) {
|
|
@@ -128,9 +161,10 @@ const CompositionBlock = ({ node: rawNode, locale, entityStore, hyperlinkPattern
|
|
|
128
161
|
};
|
|
129
162
|
}, [
|
|
130
163
|
node,
|
|
164
|
+
isPatternEntry,
|
|
131
165
|
entityStore,
|
|
132
166
|
componentRegistration,
|
|
133
|
-
|
|
167
|
+
isPatternNode,
|
|
134
168
|
getPatternChildNodeClassName,
|
|
135
169
|
resolveDesignValue,
|
|
136
170
|
hyperlinkPattern,
|
|
@@ -151,7 +185,7 @@ const CompositionBlock = ({ node: rawNode, locale, entityStore, hyperlinkPattern
|
|
|
151
185
|
const { component } = componentRegistration;
|
|
152
186
|
// Retrieves the CSS class name for a given child node ID.
|
|
153
187
|
const _getPatternChildNodeClassName = (childNodeId) => {
|
|
154
|
-
if (
|
|
188
|
+
if (isPatternNode) {
|
|
155
189
|
const nodeIdsChain = `${patternRootNodeIdsChain}-${childNodeId}`;
|
|
156
190
|
// @ts-expect-error -- property cfSsrClassName is a map (id to classNames) that is added during rendering in ssrStyles
|
|
157
191
|
const classesForNode = node.variables.cfSsrClassName?.[nodeIdsChain];
|
|
@@ -163,7 +197,7 @@ const CompositionBlock = ({ node: rawNode, locale, entityStore, hyperlinkPattern
|
|
|
163
197
|
};
|
|
164
198
|
const children = componentRegistration.definition.children === true
|
|
165
199
|
? node.children.map((childNode, index) => {
|
|
166
|
-
return (jsx(CompositionBlock, { getPatternChildNodeClassName:
|
|
200
|
+
return (jsx(CompositionBlock, { getPatternChildNodeClassName: isPatternNode || getPatternChildNodeClassName
|
|
167
201
|
? _getPatternChildNodeClassName
|
|
168
202
|
: undefined, node: childNode, locale: locale, hyperlinkPattern: hyperlinkPattern, entityStore: entityStore, resolveDesignValue: resolveDesignValue, wrappingPatternIds: wrappingPatternIds, wrappingPatternProperties: wrappingPatternProperties, patternRootNodeIdsChain: patternRootNodeIdsChain }, index));
|
|
169
203
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CompositionBlock.js","sources":["../../../../src/blocks/preview/CompositionBlock.tsx"],"sourcesContent":["import React, { ReactNode, useMemo } from 'react';\nimport type { UnresolvedLink } from 'contentful';\nimport {\n EntityStore,\n resolveHyperlinkPattern,\n sanitizeNodeProps,\n} from '@contentful/experiences-core';\nimport {\n CONTENTFUL_COMPONENTS,\n HYPERLINK_DEFAULT_PATTERN,\n} from '@contentful/experiences-core/constants';\nimport type {\n ComponentTreeNode,\n DesignValue,\n PatternProperty,\n PrimitiveValue,\n ResolveDesignValueType,\n StyleProps,\n} from '@contentful/experiences-core/types';\nimport { createAssemblyRegistration, getComponentRegistration } from '../../core/componentRegistry';\nimport { checkIsAssemblyNode, transformBoundContentValue } from '@contentful/experiences-core';\nimport { useInjectStylesheet } from '../../hooks/useInjectStylesheet';\nimport {\n Assembly,\n Columns,\n ContentfulContainer,\n SingleColumn,\n} from '@contentful/experiences-components-react';\nimport { resolveAssembly } from '../../core/preview/assemblyUtils';\nimport { Entry } from 'contentful';\nimport PreviewUnboundImage from './PreviewUnboundImage';\nimport { parseComponentProps } from '../../utils/parseComponentProps';\n\ntype CompositionBlockProps = {\n node: ComponentTreeNode;\n locale: string;\n entityStore: EntityStore;\n hyperlinkPattern?: string | undefined;\n resolveDesignValue: ResolveDesignValueType;\n getPatternChildNodeClassName?: (childNodeId: string) => string | undefined;\n /** Set of definition IDs of wrapping patterns to prevent circular dependencies. */\n wrappingPatternIds?: Set<string>;\n /**\n * Chained IDs to ensure uniqueness across multiple instances of the same pattern\n * when storing & accessing cfSsrClassName.\n */\n patternRootNodeIdsChain?: string;\n wrappingPatternProperties?: Record<string, PatternProperty>;\n};\n\nexport const CompositionBlock = ({\n node: rawNode,\n locale,\n entityStore,\n hyperlinkPattern,\n resolveDesignValue,\n getPatternChildNodeClassName,\n wrappingPatternIds: parentWrappingPatternIds = new Set(),\n wrappingPatternProperties: parentWrappingPatternProperties = {},\n patternRootNodeIdsChain: parentPatternRootNodeIdsChain = '',\n}: CompositionBlockProps) => {\n const isAssembly = useMemo(\n () =>\n checkIsAssemblyNode({\n componentId: rawNode.definitionId,\n usedComponents: entityStore.usedComponents,\n }),\n [entityStore.usedComponents, rawNode.definitionId],\n );\n\n const patternRootNodeIdsChain = useMemo(() => {\n if (isAssembly) {\n // Pattern nodes are chained without a separator (following the format for prebinding/patternProperties)\n return `${parentPatternRootNodeIdsChain}${rawNode.id}`;\n }\n return parentPatternRootNodeIdsChain;\n }, [isAssembly, parentPatternRootNodeIdsChain, rawNode.id]);\n\n const node = useMemo(() => {\n return isAssembly\n ? resolveAssembly({\n node: rawNode,\n entityStore,\n parentPatternProperties: parentWrappingPatternProperties,\n patternRootNodeIdsChain,\n })\n : rawNode;\n }, [entityStore, isAssembly, rawNode, parentWrappingPatternProperties, patternRootNodeIdsChain]);\n\n const wrappingPatternIds = useMemo(() => {\n if (isAssembly) {\n return new Set([node.definitionId, ...parentWrappingPatternIds]);\n }\n return parentWrappingPatternIds;\n }, [isAssembly, node, parentWrappingPatternIds]);\n\n // Merge the pattern properties of the current node with the parent's pattern properties\n // to ensure nested patterns receive relevant pattern properties that were bubbled up\n // during assembly serialization.\n const wrappingPatternProperties = useMemo(() => {\n if (isAssembly) {\n return { ...parentWrappingPatternProperties, ...(rawNode.patternProperties || {}) };\n }\n return parentWrappingPatternProperties;\n }, [isAssembly, rawNode, parentWrappingPatternProperties]);\n\n const componentRegistration = useMemo(() => {\n const registration = getComponentRegistration(node.definitionId as string);\n\n if (isAssembly && !registration) {\n return createAssemblyRegistration({\n definitionId: node.definitionId as string,\n component: Assembly,\n });\n }\n return registration;\n }, [isAssembly, node.definitionId]);\n\n const { ssrProps, contentProps, props, mediaQuery } = useMemo(() => {\n // In SSR, we store the className under breakpoints[0] which is resolved here to the actual string\n const cfSsrClassNameValues = node.variables.cfSsrClassName as DesignValue | undefined;\n const mainBreakpoint = entityStore.breakpoints[0];\n const cfSsrClassName = cfSsrClassNameValues?.valuesByBreakpoint?.[mainBreakpoint.id] as\n | string\n | undefined;\n\n // Don't enrich the assembly wrapper node with props\n if (!componentRegistration || isAssembly) {\n const ssrProps = { cfSsrClassName };\n const props: Record<string, PrimitiveValue> = { className: cfSsrClassName };\n return {\n ssrProps,\n props,\n customDesignProps: {},\n };\n }\n\n const ssrProps: Record<string, string | undefined> = {\n cfSsrClassName:\n node.id && getPatternChildNodeClassName\n ? getPatternChildNodeClassName(node.id)\n : cfSsrClassName,\n };\n\n const {\n contentProps = {},\n styleProps = {},\n customDesignProps = {},\n mediaQuery,\n } = parseComponentProps({\n breakpoints: entityStore.breakpoints,\n mainBreakpoint,\n componentDefinition: componentRegistration.definition,\n patternRootNodeIdsChain,\n node,\n resolveDesignValue,\n resolveBoundValue: ({ binding, propertyName, dataType }) => {\n const [, uuid] = binding.path.split('/');\n const boundEntityLink = entityStore.dataSource[uuid] as UnresolvedLink<'Entry' | 'Asset'>;\n const boundValue = transformBoundContentValue(\n node.variables,\n entityStore,\n boundEntityLink,\n resolveDesignValue,\n propertyName,\n dataType,\n binding.path,\n );\n\n return boundValue;\n },\n resolveHyperlinkValue: ({ linkTargetKey }) => {\n const boundEntity = entityStore.dataSource[linkTargetKey];\n const hyperlinkEntry = entityStore.getEntryOrAsset(boundEntity, linkTargetKey);\n\n const value = resolveHyperlinkPattern(\n componentRegistration.definition.hyperlinkPattern ||\n hyperlinkPattern ||\n HYPERLINK_DEFAULT_PATTERN,\n hyperlinkEntry as Entry,\n locale,\n );\n\n return value;\n },\n resolveUnboundValue: ({ mappingKey, defaultValue }) => {\n return entityStore.unboundValues[mappingKey]?.value ?? defaultValue;\n },\n });\n\n const slotsProps: Record<string, ReactNode> = {};\n\n if (componentRegistration.definition.slots) {\n for (const slotId in componentRegistration.definition.slots) {\n const slotNode = node.children.find((child) => child.slotId === slotId);\n if (slotNode) {\n slotsProps[slotId] = (\n <CompositionBlock\n node={slotNode}\n locale={locale}\n hyperlinkPattern={hyperlinkPattern}\n entityStore={entityStore}\n resolveDesignValue={resolveDesignValue}\n wrappingPatternIds={wrappingPatternIds}\n wrappingPatternProperties={wrappingPatternProperties}\n patternRootNodeIdsChain={patternRootNodeIdsChain}\n />\n );\n }\n }\n }\n\n const props: Record<string, PrimitiveValue> = {\n className: ssrProps.cfSsrClassName ?? mediaQuery?.className,\n ...styleProps,\n ...contentProps,\n ...customDesignProps,\n ...slotsProps,\n };\n\n return {\n ssrProps,\n contentProps,\n slotsProps,\n styleProps,\n customDesignProps,\n mediaQuery,\n props,\n };\n }, [\n node,\n entityStore,\n componentRegistration,\n isAssembly,\n getPatternChildNodeClassName,\n resolveDesignValue,\n hyperlinkPattern,\n locale,\n wrappingPatternIds,\n wrappingPatternProperties,\n patternRootNodeIdsChain,\n ]);\n\n // do not inject the stylesheet into the dom because it's already been done on the server side\n useInjectStylesheet(ssrProps.cfSsrClassName ? undefined : mediaQuery?.css);\n\n if (!componentRegistration) {\n return null;\n }\n\n // When detecting a circular dependency, we stop silently. The editor mode will render an actionable error.\n if (parentWrappingPatternIds.has(node.definitionId)) {\n return null;\n }\n\n const { component } = componentRegistration;\n\n // Retrieves the CSS class name for a given child node ID.\n const _getPatternChildNodeClassName = (childNodeId: string) => {\n if (isAssembly) {\n const nodeIdsChain = `${patternRootNodeIdsChain}-${childNodeId}`;\n // @ts-expect-error -- property cfSsrClassName is a map (id to classNames) that is added during rendering in ssrStyles\n const classesForNode: DesignValue | undefined = node.variables.cfSsrClassName?.[nodeIdsChain];\n if (!classesForNode) return undefined;\n return resolveDesignValue(classesForNode.valuesByBreakpoint) as string;\n }\n return getPatternChildNodeClassName?.(childNodeId);\n };\n\n const children =\n componentRegistration.definition.children === true\n ? node.children.map((childNode: ComponentTreeNode, index) => {\n return (\n <CompositionBlock\n getPatternChildNodeClassName={\n isAssembly || getPatternChildNodeClassName\n ? _getPatternChildNodeClassName\n : undefined\n }\n node={childNode}\n key={index}\n locale={locale}\n hyperlinkPattern={hyperlinkPattern}\n entityStore={entityStore}\n resolveDesignValue={resolveDesignValue}\n wrappingPatternIds={wrappingPatternIds}\n wrappingPatternProperties={wrappingPatternProperties}\n patternRootNodeIdsChain={patternRootNodeIdsChain}\n />\n );\n })\n : null;\n\n if (isContainerOrSection(node.definitionId)) {\n return (\n <ContentfulContainer\n editorMode={false}\n cfHyperlink={(contentProps as StyleProps).cfHyperlink}\n cfOpenInNewTab={(contentProps as StyleProps).cfOpenInNewTab}\n className={props.className as string | undefined}>\n {children}\n </ContentfulContainer>\n );\n }\n\n if (node.definitionId === CONTENTFUL_COMPONENTS.columns.id) {\n return (\n <Columns editorMode={false} className={props.className as string | undefined}>\n {children}\n </Columns>\n );\n }\n\n if (node.definitionId === CONTENTFUL_COMPONENTS.singleColumn.id) {\n return (\n <SingleColumn editorMode={false} className={props.className as string | undefined}>\n {children}\n </SingleColumn>\n );\n }\n\n if (\n node.definitionId === CONTENTFUL_COMPONENTS.image.id &&\n node.variables.cfImageAsset?.type === 'UnboundValue'\n ) {\n return (\n <PreviewUnboundImage\n node={node}\n nodeProps={props}\n component={component}\n breakpoints={entityStore.breakpoints}\n patternRootNodeIdsChain={patternRootNodeIdsChain}\n />\n );\n }\n\n return React.createElement(\n component,\n sanitizeNodeProps(props),\n children ?? (typeof props.children === 'string' ? props.children : null),\n );\n};\n\nconst isContainerOrSection = (\n nodeDefinitionId: string,\n): nodeDefinitionId is 'contentful-container' | 'contentful-section' =>\n [CONTENTFUL_COMPONENTS.container.id, CONTENTFUL_COMPONENTS.section.id].includes(\n nodeDefinitionId as 'contentful-container' | 'contentful-section',\n );\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;AAkDa,MAAA,gBAAgB,GAAG,CAAC,EAC/B,IAAI,EAAE,OAAO,EACb,MAAM,EACN,WAAW,EACX,gBAAgB,EAChB,kBAAkB,EAClB,4BAA4B,EAC5B,kBAAkB,EAAE,wBAAwB,GAAG,IAAI,GAAG,EAAE,EACxD,yBAAyB,EAAE,+BAA+B,GAAG,EAAE,EAC/D,uBAAuB,EAAE,6BAA6B,GAAG,EAAE,GACrC,KAAI;IAC1B,MAAM,UAAU,GAAG,OAAO,CACxB,MACE,mBAAmB,CAAC;QAClB,WAAW,EAAE,OAAO,CAAC,YAAY;QACjC,cAAc,EAAE,WAAW,CAAC,cAAc;KAC3C,CAAC,EACJ,CAAC,WAAW,CAAC,cAAc,EAAE,OAAO,CAAC,YAAY,CAAC,CACnD,CAAC;AAEF,IAAA,MAAM,uBAAuB,GAAG,OAAO,CAAC,MAAK;QAC3C,IAAI,UAAU,EAAE;;AAEd,YAAA,OAAO,GAAG,6BAA6B,CAAA,EAAG,OAAO,CAAC,EAAE,EAAE,CAAC;SACxD;AACD,QAAA,OAAO,6BAA6B,CAAC;KACtC,EAAE,CAAC,UAAU,EAAE,6BAA6B,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC;AAE5D,IAAA,MAAM,IAAI,GAAG,OAAO,CAAC,MAAK;AACxB,QAAA,OAAO,UAAU;cACb,eAAe,CAAC;AACd,gBAAA,IAAI,EAAE,OAAO;gBACb,WAAW;AACX,gBAAA,uBAAuB,EAAE,+BAA+B;gBACxD,uBAAuB;aACxB,CAAC;cACF,OAAO,CAAC;AACd,KAAC,EAAE,CAAC,WAAW,EAAE,UAAU,EAAE,OAAO,EAAE,+BAA+B,EAAE,uBAAuB,CAAC,CAAC,CAAC;AAEjG,IAAA,MAAM,kBAAkB,GAAG,OAAO,CAAC,MAAK;QACtC,IAAI,UAAU,EAAE;AACd,YAAA,OAAO,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,GAAG,wBAAwB,CAAC,CAAC,CAAC;SAClE;AACD,QAAA,OAAO,wBAAwB,CAAC;KACjC,EAAE,CAAC,UAAU,EAAE,IAAI,EAAE,wBAAwB,CAAC,CAAC,CAAC;;;;AAKjD,IAAA,MAAM,yBAAyB,GAAG,OAAO,CAAC,MAAK;QAC7C,IAAI,UAAU,EAAE;AACd,YAAA,OAAO,EAAE,GAAG,+BAA+B,EAAE,IAAI,OAAO,CAAC,iBAAiB,IAAI,EAAE,CAAC,EAAE,CAAC;SACrF;AACD,QAAA,OAAO,+BAA+B,CAAC;KACxC,EAAE,CAAC,UAAU,EAAE,OAAO,EAAE,+BAA+B,CAAC,CAAC,CAAC;AAE3D,IAAA,MAAM,qBAAqB,GAAG,OAAO,CAAC,MAAK;QACzC,MAAM,YAAY,GAAG,wBAAwB,CAAC,IAAI,CAAC,YAAsB,CAAC,CAAC;AAE3E,QAAA,IAAI,UAAU,IAAI,CAAC,YAAY,EAAE;AAC/B,YAAA,OAAO,0BAA0B,CAAC;gBAChC,YAAY,EAAE,IAAI,CAAC,YAAsB;AACzC,gBAAA,SAAS,EAAE,QAAQ;AACpB,aAAA,CAAC,CAAC;SACJ;AACD,QAAA,OAAO,YAAY,CAAC;KACrB,EAAE,CAAC,UAAU,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;AAEpC,IAAA,MAAM,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC,MAAK;;AAEjE,QAAA,MAAM,oBAAoB,GAAG,IAAI,CAAC,SAAS,CAAC,cAAyC,CAAC;QACtF,MAAM,cAAc,GAAG,WAAW,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;QAClD,MAAM,cAAc,GAAG,oBAAoB,EAAE,kBAAkB,GAAG,cAAc,CAAC,EAAE,CAEtE,CAAC;;AAGd,QAAA,IAAI,CAAC,qBAAqB,IAAI,UAAU,EAAE;AACxC,YAAA,MAAM,QAAQ,GAAG,EAAE,cAAc,EAAE,CAAC;AACpC,YAAA,MAAM,KAAK,GAAmC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;YAC5E,OAAO;gBACL,QAAQ;gBACR,KAAK;AACL,gBAAA,iBAAiB,EAAE,EAAE;aACtB,CAAC;SACH;AAED,QAAA,MAAM,QAAQ,GAAuC;AACnD,YAAA,cAAc,EACZ,IAAI,CAAC,EAAE,IAAI,4BAA4B;AACrC,kBAAE,4BAA4B,CAAC,IAAI,CAAC,EAAE,CAAC;AACvC,kBAAE,cAAc;SACrB,CAAC;AAEF,QAAA,MAAM,EACJ,YAAY,GAAG,EAAE,EACjB,UAAU,GAAG,EAAE,EACf,iBAAiB,GAAG,EAAE,EACtB,UAAU,GACX,GAAG,mBAAmB,CAAC;YACtB,WAAW,EAAE,WAAW,CAAC,WAAW;YACpC,cAAc;YACd,mBAAmB,EAAE,qBAAqB,CAAC,UAAU;YACrD,uBAAuB;YACvB,IAAI;YACJ,kBAAkB;YAClB,iBAAiB,EAAE,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,KAAI;AACzD,gBAAA,MAAM,GAAG,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;gBACzC,MAAM,eAAe,GAAG,WAAW,CAAC,UAAU,CAAC,IAAI,CAAsC,CAAC;gBAC1F,MAAM,UAAU,GAAG,0BAA0B,CAC3C,IAAI,CAAC,SAAS,EACd,WAAW,EACX,eAAe,EACf,kBAAkB,EAClB,YAAY,EACZ,QAAQ,EACR,OAAO,CAAC,IAAI,CACb,CAAC;AAEF,gBAAA,OAAO,UAAU,CAAC;aACnB;AACD,YAAA,qBAAqB,EAAE,CAAC,EAAE,aAAa,EAAE,KAAI;gBAC3C,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;gBAC1D,MAAM,cAAc,GAAG,WAAW,CAAC,eAAe,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;gBAE/E,MAAM,KAAK,GAAG,uBAAuB,CACnC,qBAAqB,CAAC,UAAU,CAAC,gBAAgB;oBAC/C,gBAAgB;AAChB,oBAAA,yBAAyB,EAC3B,cAAuB,EACvB,MAAM,CACP,CAAC;AAEF,gBAAA,OAAO,KAAK,CAAC;aACd;YACD,mBAAmB,EAAE,CAAC,EAAE,UAAU,EAAE,YAAY,EAAE,KAAI;gBACpD,OAAO,WAAW,CAAC,aAAa,CAAC,UAAU,CAAC,EAAE,KAAK,IAAI,YAAY,CAAC;aACrE;AACF,SAAA,CAAC,CAAC;QAEH,MAAM,UAAU,GAA8B,EAAE,CAAC;AAEjD,QAAA,IAAI,qBAAqB,CAAC,UAAU,CAAC,KAAK,EAAE;YAC1C,KAAK,MAAM,MAAM,IAAI,qBAAqB,CAAC,UAAU,CAAC,KAAK,EAAE;AAC3D,gBAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC;gBACxE,IAAI,QAAQ,EAAE;AACZ,oBAAA,UAAU,CAAC,MAAM,CAAC,IAChBA,GAAA,CAAC,gBAAgB,EACf,EAAA,IAAI,EAAE,QAAQ,EACd,MAAM,EAAE,MAAM,EACd,gBAAgB,EAAE,gBAAgB,EAClC,WAAW,EAAE,WAAW,EACxB,kBAAkB,EAAE,kBAAkB,EACtC,kBAAkB,EAAE,kBAAkB,EACtC,yBAAyB,EAAE,yBAAyB,EACpD,uBAAuB,EAAE,uBAAuB,EAAA,CAChD,CACH,CAAC;iBACH;aACF;SACF;AAED,QAAA,MAAM,KAAK,GAAmC;AAC5C,YAAA,SAAS,EAAE,QAAQ,CAAC,cAAc,IAAI,UAAU,EAAE,SAAS;AAC3D,YAAA,GAAG,UAAU;AACb,YAAA,GAAG,YAAY;AACf,YAAA,GAAG,iBAAiB;AACpB,YAAA,GAAG,UAAU;SACd,CAAC;QAEF,OAAO;YACL,QAAQ;YACR,YAAY;YACZ,UAAU;YACV,UAAU;YACV,iBAAiB;YACjB,UAAU;YACV,KAAK;SACN,CAAC;AACJ,KAAC,EAAE;QACD,IAAI;QACJ,WAAW;QACX,qBAAqB;QACrB,UAAU;QACV,4BAA4B;QAC5B,kBAAkB;QAClB,gBAAgB;QAChB,MAAM;QACN,kBAAkB;QAClB,yBAAyB;QACzB,uBAAuB;AACxB,KAAA,CAAC,CAAC;;AAGH,IAAA,mBAAmB,CAAC,QAAQ,CAAC,cAAc,GAAG,SAAS,GAAG,UAAU,EAAE,GAAG,CAAC,CAAC;IAE3E,IAAI,CAAC,qBAAqB,EAAE;AAC1B,QAAA,OAAO,IAAI,CAAC;KACb;;IAGD,IAAI,wBAAwB,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE;AACnD,QAAA,OAAO,IAAI,CAAC;KACb;AAED,IAAA,MAAM,EAAE,SAAS,EAAE,GAAG,qBAAqB,CAAC;;AAG5C,IAAA,MAAM,6BAA6B,GAAG,CAAC,WAAmB,KAAI;QAC5D,IAAI,UAAU,EAAE;AACd,YAAA,MAAM,YAAY,GAAG,CAAA,EAAG,uBAAuB,CAAI,CAAA,EAAA,WAAW,EAAE,CAAC;;YAEjE,MAAM,cAAc,GAA4B,IAAI,CAAC,SAAS,CAAC,cAAc,GAAG,YAAY,CAAC,CAAC;AAC9F,YAAA,IAAI,CAAC,cAAc;AAAE,gBAAA,OAAO,SAAS,CAAC;AACtC,YAAA,OAAO,kBAAkB,CAAC,cAAc,CAAC,kBAAkB,CAAW,CAAC;SACxE;AACD,QAAA,OAAO,4BAA4B,GAAG,WAAW,CAAC,CAAC;AACrD,KAAC,CAAC;IAEF,MAAM,QAAQ,GACZ,qBAAqB,CAAC,UAAU,CAAC,QAAQ,KAAK,IAAI;AAChD,UAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,SAA4B,EAAE,KAAK,KAAI;YACxD,QACEA,IAAC,gBAAgB,EAAA,EACf,4BAA4B,EAC1B,UAAU,IAAI,4BAA4B;AACxC,sBAAE,6BAA6B;AAC/B,sBAAE,SAAS,EAEf,IAAI,EAAE,SAAS,EAEf,MAAM,EAAE,MAAM,EACd,gBAAgB,EAAE,gBAAgB,EAClC,WAAW,EAAE,WAAW,EACxB,kBAAkB,EAAE,kBAAkB,EACtC,kBAAkB,EAAE,kBAAkB,EACtC,yBAAyB,EAAE,yBAAyB,EACpD,uBAAuB,EAAE,uBAAuB,IAP3C,KAAK,CAQV,EACF;AACJ,SAAC,CAAC;UACF,IAAI,CAAC;AAEX,IAAA,IAAI,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE;AAC3C,QAAA,QACEA,GAAA,CAAC,mBAAmB,EAAA,EAClB,UAAU,EAAE,KAAK,EACjB,WAAW,EAAG,YAA2B,CAAC,WAAW,EACrD,cAAc,EAAG,YAA2B,CAAC,cAAc,EAC3D,SAAS,EAAE,KAAK,CAAC,SAA+B,EAAA,QAAA,EAC/C,QAAQ,EAAA,CACW,EACtB;KACH;IAED,IAAI,IAAI,CAAC,YAAY,KAAK,qBAAqB,CAAC,OAAO,CAAC,EAAE,EAAE;AAC1D,QAAA,QACEA,GAAC,CAAA,OAAO,EAAC,EAAA,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAA+B,YACzE,QAAQ,EAAA,CACD,EACV;KACH;IAED,IAAI,IAAI,CAAC,YAAY,KAAK,qBAAqB,CAAC,YAAY,CAAC,EAAE,EAAE;AAC/D,QAAA,QACEA,GAAC,CAAA,YAAY,EAAC,EAAA,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAA+B,YAC9E,QAAQ,EAAA,CACI,EACf;KACH;IAED,IACE,IAAI,CAAC,YAAY,KAAK,qBAAqB,CAAC,KAAK,CAAC,EAAE;QACpD,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,IAAI,KAAK,cAAc,EACpD;QACA,QACEA,GAAC,CAAA,mBAAmB,EAClB,EAAA,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,KAAK,EAChB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,CAAC,WAAW,EACpC,uBAAuB,EAAE,uBAAuB,EAChD,CAAA,EACF;KACH;AAED,IAAA,OAAO,KAAK,CAAC,aAAa,CACxB,SAAS,EACT,iBAAiB,CAAC,KAAK,CAAC,EACxB,QAAQ,KAAK,OAAO,KAAK,CAAC,QAAQ,KAAK,QAAQ,GAAG,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,CACzE,CAAC;AACJ,EAAE;AAEF,MAAM,oBAAoB,GAAG,CAC3B,gBAAwB,KAExB,CAAC,qBAAqB,CAAC,SAAS,CAAC,EAAE,EAAE,qBAAqB,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,QAAQ,CAC7E,gBAAiE,CAClE;;;;"}
|
|
1
|
+
{"version":3,"file":"CompositionBlock.js","sources":["../../../../src/blocks/preview/CompositionBlock.tsx"],"sourcesContent":["import React, { ReactNode, useMemo } from 'react';\nimport type { UnresolvedLink } from 'contentful';\nimport {\n checkIsAssemblyEntry,\n checkIsAssemblyNode,\n EntityStore,\n resolveHyperlinkPattern,\n sanitizeNodeProps,\n transformBoundContentValue,\n} from '@contentful/experiences-core';\nimport {\n CONTENTFUL_COMPONENTS,\n HYPERLINK_DEFAULT_PATTERN,\n} from '@contentful/experiences-core/constants';\nimport type {\n ComponentTreeNode,\n DesignValue,\n PatternProperty,\n PrimitiveValue,\n ResolveDesignValueType,\n StyleProps,\n} from '@contentful/experiences-core/types';\nimport { createAssemblyRegistration, getComponentRegistration } from '../../core/componentRegistry';\nimport { useInjectStylesheet } from '../../hooks/useInjectStylesheet';\nimport {\n Assembly,\n Columns,\n ContentfulContainer,\n SingleColumn,\n} from '@contentful/experiences-components-react';\nimport { resolvePattern } from '../../core/preview/assemblyUtils';\nimport { resolveMaybePrebindingDefaultValuePath } from '../../utils/prebindingUtils';\nimport { Entry } from 'contentful';\nimport PreviewUnboundImage from './PreviewUnboundImage';\nimport { parseComponentProps } from '../../utils/parseComponentProps';\n\ntype CompositionBlockProps = {\n node: ComponentTreeNode;\n locale: string;\n entityStore: EntityStore;\n hyperlinkPattern?: string | undefined;\n resolveDesignValue: ResolveDesignValueType;\n getPatternChildNodeClassName?: (childNodeId: string) => string | undefined;\n /** Set of definition IDs of wrapping patterns to prevent circular dependencies. */\n wrappingPatternIds?: Set<string>;\n /**\n * Chained IDs to ensure uniqueness across multiple instances of the same pattern\n * when storing & accessing cfSsrClassName.\n */\n patternRootNodeIdsChain?: string;\n wrappingPatternProperties?: Record<string, PatternProperty>;\n};\n\nexport const CompositionBlock = ({\n node: rawNode,\n locale,\n entityStore,\n hyperlinkPattern,\n resolveDesignValue,\n getPatternChildNodeClassName,\n wrappingPatternIds: parentWrappingPatternIds = new Set(),\n wrappingPatternProperties: parentWrappingPatternProperties = {},\n patternRootNodeIdsChain: parentPatternRootNodeIdsChain = '',\n}: CompositionBlockProps) => {\n const isPatternNode = useMemo(() => {\n return checkIsAssemblyNode({\n componentId: rawNode.definitionId,\n usedComponents: entityStore.usedComponents,\n });\n }, [entityStore.usedComponents, rawNode.definitionId]);\n\n const isPatternEntry = useMemo(() => {\n return checkIsAssemblyEntry({ fields: entityStore.experienceEntryFields } as unknown as Entry);\n }, [entityStore]);\n\n const patternRootNodeIdsChain = useMemo(() => {\n if (isPatternNode) {\n // Pattern nodes are chained without a separator (following the format for prebinding/patternProperties)\n return `${parentPatternRootNodeIdsChain}${rawNode.id}`;\n }\n return parentPatternRootNodeIdsChain;\n }, [isPatternNode, parentPatternRootNodeIdsChain, rawNode.id]);\n\n const node = useMemo(() => {\n if (isPatternNode) {\n return resolvePattern({\n node: rawNode,\n entityStore,\n parentPatternProperties: parentWrappingPatternProperties,\n patternRootNodeIdsChain,\n });\n } else {\n return rawNode;\n }\n }, [\n entityStore,\n isPatternNode,\n rawNode,\n parentWrappingPatternProperties,\n patternRootNodeIdsChain,\n ]);\n\n const wrappingPatternIds = useMemo(() => {\n if (isPatternNode) {\n return new Set([node.definitionId, ...parentWrappingPatternIds]);\n }\n return parentWrappingPatternIds;\n }, [isPatternNode, node, parentWrappingPatternIds]);\n\n // Merge the pattern properties of the current node with the parent's pattern properties\n // to ensure nested patterns receive relevant pattern properties that were bubbled up\n // during assembly serialization.\n const wrappingPatternProperties = useMemo(() => {\n if (isPatternNode) {\n return { ...parentWrappingPatternProperties, ...(rawNode.patternProperties || {}) };\n }\n return parentWrappingPatternProperties;\n }, [isPatternNode, rawNode, parentWrappingPatternProperties]);\n\n const componentRegistration = useMemo(() => {\n const registration = getComponentRegistration(node.definitionId as string);\n\n if (isPatternNode && !registration) {\n return createAssemblyRegistration({\n definitionId: node.definitionId as string,\n component: Assembly,\n });\n }\n return registration;\n }, [isPatternNode, node.definitionId]);\n\n const { ssrProps, contentProps, props, mediaQuery } = useMemo(() => {\n // In SSR, we store the className under breakpoints[0] which is resolved here to the actual string\n const cfSsrClassNameValues = node.variables.cfSsrClassName as DesignValue | undefined;\n const mainBreakpoint = entityStore.breakpoints[0];\n const cfSsrClassName = cfSsrClassNameValues?.valuesByBreakpoint?.[mainBreakpoint.id] as\n | string\n | undefined;\n\n // Don't enrich the assembly wrapper node with props\n if (!componentRegistration || isPatternNode) {\n const ssrProps = { cfSsrClassName };\n const props: Record<string, PrimitiveValue> = { className: cfSsrClassName };\n return {\n ssrProps,\n props,\n customDesignProps: {},\n };\n }\n\n const ssrProps: Record<string, string | undefined> = {\n cfSsrClassName:\n node.id && getPatternChildNodeClassName\n ? getPatternChildNodeClassName(node.id)\n : cfSsrClassName,\n };\n\n const {\n contentProps = {},\n styleProps = {},\n customDesignProps = {},\n mediaQuery,\n } = parseComponentProps({\n breakpoints: entityStore.breakpoints,\n mainBreakpoint,\n componentDefinition: componentRegistration.definition,\n patternRootNodeIdsChain,\n node,\n resolveDesignValue,\n resolveBoundValue: ({ binding, propertyName, dataType }) => {\n const [, uuid] = binding.path.split('/');\n const boundEntityLink = entityStore.dataSource[uuid] as UnresolvedLink<'Entry' | 'Asset'>;\n const boundValue = transformBoundContentValue(\n node.variables,\n entityStore,\n boundEntityLink,\n resolveDesignValue,\n propertyName,\n dataType,\n binding.path,\n );\n\n return boundValue;\n },\n resolveHyperlinkValue: ({ linkTargetKey }) => {\n const boundEntity = entityStore.dataSource[linkTargetKey];\n const hyperlinkEntry = entityStore.getEntryOrAsset(boundEntity, linkTargetKey);\n\n const value = resolveHyperlinkPattern(\n componentRegistration.definition.hyperlinkPattern ||\n hyperlinkPattern ||\n HYPERLINK_DEFAULT_PATTERN,\n hyperlinkEntry as Entry,\n locale,\n );\n\n return value;\n },\n resolveUnboundValue: ({ mappingKey, defaultValue }) => {\n return entityStore.unboundValues[mappingKey]?.value ?? defaultValue;\n },\n resolvePrebindingValue: ({ mappingKey, propertyName, dataType, resolveBoundValue }) => {\n if (isPatternEntry) {\n const path = resolveMaybePrebindingDefaultValuePath({\n componentValueKey: mappingKey,\n entityStore,\n });\n\n if (path) {\n return resolveBoundValue({\n propertyName,\n dataType,\n binding: {\n type: 'BoundValue',\n path,\n },\n });\n }\n }\n },\n });\n\n const slotsProps: Record<string, ReactNode> = {};\n\n if (componentRegistration.definition.slots) {\n for (const slotId in componentRegistration.definition.slots) {\n const slotNode = node.children.find((child) => child.slotId === slotId);\n if (slotNode) {\n slotsProps[slotId] = (\n <CompositionBlock\n node={slotNode}\n locale={locale}\n hyperlinkPattern={hyperlinkPattern}\n entityStore={entityStore}\n resolveDesignValue={resolveDesignValue}\n wrappingPatternIds={wrappingPatternIds}\n wrappingPatternProperties={wrappingPatternProperties}\n patternRootNodeIdsChain={patternRootNodeIdsChain}\n />\n );\n }\n }\n }\n\n const props: Record<string, PrimitiveValue> = {\n className: ssrProps.cfSsrClassName ?? mediaQuery?.className,\n ...styleProps,\n ...contentProps,\n ...customDesignProps,\n ...slotsProps,\n };\n\n return {\n ssrProps,\n contentProps,\n slotsProps,\n styleProps,\n customDesignProps,\n mediaQuery,\n props,\n };\n }, [\n node,\n isPatternEntry,\n entityStore,\n componentRegistration,\n isPatternNode,\n getPatternChildNodeClassName,\n resolveDesignValue,\n hyperlinkPattern,\n locale,\n wrappingPatternIds,\n wrappingPatternProperties,\n patternRootNodeIdsChain,\n ]);\n\n // do not inject the stylesheet into the dom because it's already been done on the server side\n useInjectStylesheet(ssrProps.cfSsrClassName ? undefined : mediaQuery?.css);\n\n if (!componentRegistration) {\n return null;\n }\n\n // When detecting a circular dependency, we stop silently. The editor mode will render an actionable error.\n if (parentWrappingPatternIds.has(node.definitionId)) {\n return null;\n }\n\n const { component } = componentRegistration;\n\n // Retrieves the CSS class name for a given child node ID.\n const _getPatternChildNodeClassName = (childNodeId: string) => {\n if (isPatternNode) {\n const nodeIdsChain = `${patternRootNodeIdsChain}-${childNodeId}`;\n // @ts-expect-error -- property cfSsrClassName is a map (id to classNames) that is added during rendering in ssrStyles\n const classesForNode: DesignValue | undefined = node.variables.cfSsrClassName?.[nodeIdsChain];\n if (!classesForNode) return undefined;\n return resolveDesignValue(classesForNode.valuesByBreakpoint) as string;\n }\n return getPatternChildNodeClassName?.(childNodeId);\n };\n\n const children =\n componentRegistration.definition.children === true\n ? node.children.map((childNode: ComponentTreeNode, index) => {\n return (\n <CompositionBlock\n getPatternChildNodeClassName={\n isPatternNode || getPatternChildNodeClassName\n ? _getPatternChildNodeClassName\n : undefined\n }\n node={childNode}\n key={index}\n locale={locale}\n hyperlinkPattern={hyperlinkPattern}\n entityStore={entityStore}\n resolveDesignValue={resolveDesignValue}\n wrappingPatternIds={wrappingPatternIds}\n wrappingPatternProperties={wrappingPatternProperties}\n patternRootNodeIdsChain={patternRootNodeIdsChain}\n />\n );\n })\n : null;\n\n if (isContainerOrSection(node.definitionId)) {\n return (\n <ContentfulContainer\n editorMode={false}\n cfHyperlink={(contentProps as StyleProps).cfHyperlink}\n cfOpenInNewTab={(contentProps as StyleProps).cfOpenInNewTab}\n className={props.className as string | undefined}>\n {children}\n </ContentfulContainer>\n );\n }\n\n if (node.definitionId === CONTENTFUL_COMPONENTS.columns.id) {\n return (\n <Columns editorMode={false} className={props.className as string | undefined}>\n {children}\n </Columns>\n );\n }\n\n if (node.definitionId === CONTENTFUL_COMPONENTS.singleColumn.id) {\n return (\n <SingleColumn editorMode={false} className={props.className as string | undefined}>\n {children}\n </SingleColumn>\n );\n }\n\n if (\n node.definitionId === CONTENTFUL_COMPONENTS.image.id &&\n node.variables.cfImageAsset?.type === 'UnboundValue'\n ) {\n return (\n <PreviewUnboundImage\n node={node}\n nodeProps={props}\n component={component}\n breakpoints={entityStore.breakpoints}\n patternRootNodeIdsChain={patternRootNodeIdsChain}\n />\n );\n }\n\n return React.createElement(\n component,\n sanitizeNodeProps(props),\n children ?? (typeof props.children === 'string' ? props.children : null),\n );\n};\n\nconst isContainerOrSection = (\n nodeDefinitionId: string,\n): nodeDefinitionId is 'contentful-container' | 'contentful-section' =>\n [CONTENTFUL_COMPONENTS.container.id, CONTENTFUL_COMPONENTS.section.id].includes(\n nodeDefinitionId as 'contentful-container' | 'contentful-section',\n );\n"],"names":["_jsx"],"mappings":"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"}
|
|
@@ -2,9 +2,9 @@ import md5 from 'md5';
|
|
|
2
2
|
import { shouldUsePrebinding, resolvePrebindingPath } from '../../utils/prebindingUtils.js';
|
|
3
3
|
import { PATTERN_PROPERTY_DIVIDER } from '@contentful/experiences-core/constants';
|
|
4
4
|
|
|
5
|
-
/** While unfolding the
|
|
5
|
+
/** While unfolding the pattern definition on the instance, this function will replace all
|
|
6
6
|
* ComponentValue in the definitions tree with the actual value on the instance. */
|
|
7
|
-
const
|
|
7
|
+
const deserializePatternNode = ({ node, componentInstanceVariables, componentSettings, patternProperties, entityStore, }) => {
|
|
8
8
|
const variables = {};
|
|
9
9
|
for (const [variableName, variable] of Object.entries(node.variables)) {
|
|
10
10
|
variables[variableName] = variable;
|
|
@@ -71,7 +71,7 @@ const deserializeAssemblyNode = ({ node, componentInstanceVariables, componentSe
|
|
|
71
71
|
}
|
|
72
72
|
}
|
|
73
73
|
}
|
|
74
|
-
const children = node.children.map((child) =>
|
|
74
|
+
const children = node.children.map((child) => deserializePatternNode({
|
|
75
75
|
node: child,
|
|
76
76
|
componentInstanceVariables,
|
|
77
77
|
componentSettings,
|
|
@@ -88,7 +88,7 @@ const deserializeAssemblyNode = ({ node, componentInstanceVariables, componentSe
|
|
|
88
88
|
patternProperties: node.patternProperties,
|
|
89
89
|
};
|
|
90
90
|
};
|
|
91
|
-
const
|
|
91
|
+
const resolvePattern = ({ node, parentPatternProperties, patternRootNodeIdsChain, entityStore, }) => {
|
|
92
92
|
const componentId = node.definitionId;
|
|
93
93
|
const assembly = entityStore.usedComponents?.find((component) => component.sys.id === componentId);
|
|
94
94
|
if (!assembly || !('fields' in assembly)) {
|
|
@@ -113,7 +113,7 @@ const resolveAssembly = ({ node, parentPatternProperties, patternRootNodeIdsChai
|
|
|
113
113
|
patternProperties[patternPropertyDefinitionId] = patternProperty;
|
|
114
114
|
}
|
|
115
115
|
const componentFields = assembly.fields;
|
|
116
|
-
const deserializedNode =
|
|
116
|
+
const deserializedNode = deserializePatternNode({
|
|
117
117
|
node: {
|
|
118
118
|
definitionId: node.definitionId,
|
|
119
119
|
id: node.id,
|
|
@@ -130,5 +130,5 @@ const resolveAssembly = ({ node, parentPatternProperties, patternRootNodeIdsChai
|
|
|
130
130
|
return deserializedNode;
|
|
131
131
|
};
|
|
132
132
|
|
|
133
|
-
export {
|
|
133
|
+
export { deserializePatternNode, resolvePattern };
|
|
134
134
|
//# sourceMappingURL=assemblyUtils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"assemblyUtils.js","sources":["../../../../src/core/preview/assemblyUtils.ts"],"sourcesContent":["import { EntityStore } from '@contentful/experiences-core';\nimport md5 from 'md5';\nimport type {\n ComponentPropertyValue,\n ComponentTreeNode,\n DesignValue,\n ExperienceComponentSettings,\n PatternProperty,\n} from '@contentful/experiences-core/types';\nimport { resolvePrebindingPath, shouldUsePrebinding } from '../../utils/prebindingUtils';\nimport { PATTERN_PROPERTY_DIVIDER } from '@contentful/experiences-core/constants';\n\n/** While unfolding the
|
|
1
|
+
{"version":3,"file":"assemblyUtils.js","sources":["../../../../src/core/preview/assemblyUtils.ts"],"sourcesContent":["import { EntityStore } from '@contentful/experiences-core';\nimport md5 from 'md5';\nimport type {\n ComponentPropertyValue,\n ComponentTreeNode,\n DesignValue,\n ExperienceComponentSettings,\n PatternProperty,\n} from '@contentful/experiences-core/types';\nimport { resolvePrebindingPath, shouldUsePrebinding } from '../../utils/prebindingUtils';\nimport { PATTERN_PROPERTY_DIVIDER } from '@contentful/experiences-core/constants';\n\n/** While unfolding the pattern definition on the instance, this function will replace all\n * ComponentValue in the definitions tree with the actual value on the instance. */\nexport const deserializePatternNode = ({\n node,\n componentInstanceVariables,\n componentSettings,\n patternProperties,\n entityStore,\n}: {\n node: ComponentTreeNode;\n componentInstanceVariables: ComponentTreeNode['variables'];\n componentSettings: ExperienceComponentSettings;\n patternProperties: Record<string, PatternProperty>;\n entityStore: EntityStore;\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 const variableDefinition = componentSettings.variableDefinitions?.[componentValueKey];\n const defaultValue = variableDefinition?.defaultValue;\n\n const usePrebinding = shouldUsePrebinding({\n componentSettings,\n componentValueKey,\n patternProperties,\n variable: instanceProperty,\n });\n const path = resolvePrebindingPath({\n componentSettings,\n componentValueKey,\n patternProperties,\n entityStore,\n });\n\n if (usePrebinding && path) {\n variables[variableName] = {\n type: 'BoundValue',\n path,\n };\n\n // For assembly, we look up the variable in the assembly instance and\n // replace the ComponentValue with that one.\n } else if (instanceProperty?.type === 'UnboundValue') {\n variables[variableName] = {\n type: 'UnboundValue',\n key: instanceProperty.key,\n };\n } else if (instanceProperty?.type === 'NoValue') {\n variables[variableName] = instanceProperty;\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 } else if (instanceProperty?.type === 'DesignValue') {\n variables[variableName] = {\n type: 'DesignValue',\n valuesByBreakpoint: instanceProperty.valuesByBreakpoint,\n };\n } else if (!instanceProperty && defaultValue) {\n // So far, we only automatically fallback to the defaultValue for design properties\n if (variableDefinition.group === 'style') {\n variables[variableName] = {\n type: 'DesignValue',\n valuesByBreakpoint: (defaultValue as DesignValue).valuesByBreakpoint,\n };\n }\n }\n }\n }\n\n const children: ComponentTreeNode[] = node.children.map((child) =>\n deserializePatternNode({\n node: child,\n componentInstanceVariables,\n componentSettings,\n patternProperties,\n entityStore,\n }),\n );\n\n return {\n definitionId: node.definitionId,\n id: node.id,\n variables,\n children,\n slotId: node.slotId,\n displayName: node.displayName,\n patternProperties: node.patternProperties,\n };\n};\n\nexport const resolvePattern = ({\n node,\n parentPatternProperties,\n patternRootNodeIdsChain,\n entityStore,\n}: {\n node: ComponentTreeNode;\n entityStore: EntityStore;\n parentPatternProperties: Record<string, PatternProperty>;\n patternRootNodeIdsChain: string;\n}) => {\n const componentId = node.definitionId as string;\n const assembly = entityStore.usedComponents?.find(\n (component) => component.sys.id === componentId,\n );\n\n if (!assembly || !('fields' in assembly)) {\n return node;\n }\n\n const patternProperties: Record<string, PatternProperty> = {};\n\n const allPatternProperties = {\n ...parentPatternProperties,\n ...(node.patternProperties || {}),\n };\n\n for (const [patternPropertyKey, patternProperty] of Object.entries(allPatternProperties)) {\n /**\n * Bubbled up pattern properties are a concatenation of the node id\n * and the pattern property definition id. We need to split them so\n * that the node only uses the pattern property definition id.\n */\n const [hashKey, patternPropertyDefinitionId] =\n patternPropertyKey.split(PATTERN_PROPERTY_DIVIDER);\n\n const hashedNodeChain = md5(patternRootNodeIdsChain || '');\n\n const isMatchingNode = hashKey === hashedNodeChain;\n\n if (!isMatchingNode) continue;\n\n patternProperties[patternPropertyDefinitionId] = patternProperty;\n }\n\n const componentFields = assembly.fields;\n\n const deserializedNode = deserializePatternNode({\n node: {\n definitionId: node.definitionId,\n id: node.id,\n variables: node.variables,\n children: componentFields.componentTree.children,\n patternProperties,\n },\n componentInstanceVariables: node.variables,\n componentSettings: componentFields.componentSettings!,\n patternProperties,\n entityStore,\n });\n\n entityStore.addAssemblyUnboundValues(componentFields.unboundValues);\n\n return deserializedNode;\n};\n"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -8,7 +8,7 @@ import * as _contentful_experiences_core_constants from '@contentful/experiences
|
|
|
8
8
|
export { CF_STYLE_ATTRIBUTES, CONTENTFUL_COMPONENTS, LATEST_SCHEMA_VERSION } from '@contentful/experiences-core/constants';
|
|
9
9
|
import { ContentfulClientApi } from 'contentful';
|
|
10
10
|
|
|
11
|
-
declare const SDK_VERSION = "1.
|
|
11
|
+
declare const SDK_VERSION = "1.42.0-dev-20250617T0920-3f313ab.0";
|
|
12
12
|
|
|
13
13
|
type ExperienceRootProps = {
|
|
14
14
|
experience?: Experience<EntityStore> | string | null;
|
package/dist/sdkVersion.js
CHANGED
package/dist/sdkVersion.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sdkVersion.js","sources":["../../src/sdkVersion.ts"],"sourcesContent":["export const SDK_VERSION = '1.
|
|
1
|
+
{"version":3,"file":"sdkVersion.js","sources":["../../src/sdkVersion.ts"],"sourcesContent":["export const SDK_VERSION = '1.42.0-dev-20250617T0920-3f313ab.0';\n"],"names":[],"mappings":"AAAO,MAAM,WAAW,GAAG;;;;"}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { EntityStore } from '@contentful/experiences-core';
|
|
2
2
|
import type { ComponentTreeNode, ExperienceComponentSettings, PatternProperty } from '@contentful/experiences-core/types';
|
|
3
|
-
/** While unfolding the
|
|
3
|
+
/** While unfolding the pattern definition on the instance, this function will replace all
|
|
4
4
|
* ComponentValue in the definitions tree with the actual value on the instance. */
|
|
5
|
-
export declare const
|
|
5
|
+
export declare const deserializePatternNode: ({ node, componentInstanceVariables, componentSettings, patternProperties, entityStore, }: {
|
|
6
6
|
node: ComponentTreeNode;
|
|
7
7
|
componentInstanceVariables: ComponentTreeNode["variables"];
|
|
8
8
|
componentSettings: ExperienceComponentSettings;
|
|
9
9
|
patternProperties: Record<string, PatternProperty>;
|
|
10
10
|
entityStore: EntityStore;
|
|
11
11
|
}) => ComponentTreeNode;
|
|
12
|
-
export declare const
|
|
12
|
+
export declare const resolvePattern: ({ node, parentPatternProperties, patternRootNodeIdsChain, entityStore, }: {
|
|
13
13
|
node: ComponentTreeNode;
|
|
14
14
|
entityStore: EntityStore;
|
|
15
15
|
parentPatternProperties: Record<string, PatternProperty>;
|
package/dist/src/sdkVersion.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const SDK_VERSION = "1.
|
|
1
|
+
export declare const SDK_VERSION = "1.42.0-dev-20250617T0920-3f313ab.0";
|
|
@@ -10,18 +10,19 @@ import { BoundComponentPropertyTypes, BoundValue, Breakpoint, ComponentDefinitio
|
|
|
10
10
|
* 4) Those DesignValue props which can NOT be converted to CSS (custom design props) should be resolved dynamically
|
|
11
11
|
* for each breakpoint
|
|
12
12
|
*/
|
|
13
|
-
|
|
13
|
+
type ResolveBoundValueType = (data: {
|
|
14
|
+
propertyName: string;
|
|
15
|
+
dataType: ComponentDefinitionVariableType;
|
|
16
|
+
binding: BoundValue;
|
|
17
|
+
}) => BoundComponentPropertyTypes;
|
|
18
|
+
export declare const parseComponentProps: ({ breakpoints, mainBreakpoint, componentDefinition, patternRootNodeIdsChain, node, resolveDesignValue, resolveBoundValue, resolveHyperlinkValue, resolveUnboundValue, resolvePrebindingValue, }: {
|
|
14
19
|
breakpoints: Breakpoint[];
|
|
15
20
|
mainBreakpoint: Breakpoint;
|
|
16
21
|
componentDefinition: ComponentDefinition;
|
|
17
22
|
patternRootNodeIdsChain?: string;
|
|
18
23
|
node: ComponentTreeNode;
|
|
19
24
|
resolveDesignValue: ResolveDesignValueType;
|
|
20
|
-
resolveBoundValue:
|
|
21
|
-
propertyName: string;
|
|
22
|
-
dataType: ComponentDefinitionVariableType;
|
|
23
|
-
binding: BoundValue;
|
|
24
|
-
}) => BoundComponentPropertyTypes;
|
|
25
|
+
resolveBoundValue: ResolveBoundValueType;
|
|
25
26
|
resolveHyperlinkValue: (data: {
|
|
26
27
|
linkTargetKey: string;
|
|
27
28
|
}) => string | null;
|
|
@@ -29,6 +30,12 @@ export declare const parseComponentProps: ({ breakpoints, mainBreakpoint, compon
|
|
|
29
30
|
mappingKey: string;
|
|
30
31
|
defaultValue: ComponentDefinitionVariable["defaultValue"];
|
|
31
32
|
}) => PrimitiveValue;
|
|
33
|
+
resolvePrebindingValue: (data: {
|
|
34
|
+
propertyName: string;
|
|
35
|
+
mappingKey: string;
|
|
36
|
+
dataType: ComponentDefinitionVariableType;
|
|
37
|
+
resolveBoundValue: ResolveBoundValueType;
|
|
38
|
+
}) => PrimitiveValue;
|
|
32
39
|
}) => {
|
|
33
40
|
styleProps: Record<string, Record<string, string | number | boolean | Record<any, any> | undefined>>;
|
|
34
41
|
mediaQuery: {
|
|
@@ -38,3 +45,4 @@ export declare const parseComponentProps: ({ breakpoints, mainBreakpoint, compon
|
|
|
38
45
|
customDesignProps: Record<string, string | number | boolean | Record<any, any> | undefined>;
|
|
39
46
|
contentProps: Record<string, string | number | boolean | Record<any, any> | undefined>;
|
|
40
47
|
};
|
|
48
|
+
export {};
|
|
@@ -12,3 +12,7 @@ export declare const resolvePrebindingPath: ({ componentValueKey, componentSetti
|
|
|
12
12
|
patternProperties: Record<string, PatternProperty>;
|
|
13
13
|
entityStore: EntityStore;
|
|
14
14
|
}) => string;
|
|
15
|
+
export declare const resolveMaybePrebindingDefaultValuePath: ({ componentValueKey, entityStore, }: {
|
|
16
|
+
componentValueKey: string;
|
|
17
|
+
entityStore: EntityStore;
|
|
18
|
+
}) => string | undefined;
|
|
@@ -5,18 +5,7 @@ import { createStylesheetsForBuiltInStyles, convertResolvedDesignValuesToMediaQu
|
|
|
5
5
|
const isSpecialCaseCssProp = (propName) => {
|
|
6
6
|
return propName === 'cfBackgroundImageUrl' || propName.startsWith('cfBackgroundImageUrl_');
|
|
7
7
|
};
|
|
8
|
-
|
|
9
|
-
* The previous logic of prop mapping was too complex and mixed different ues cases together.
|
|
10
|
-
* In this function, I aim to simplify the logic by focusing on the following specific cases FOR PREVIEW/DELIVERY MODES
|
|
11
|
-
* 1) Any non `DesignValue` props should be resolved and returned as is
|
|
12
|
-
* 2) Some exceptions like `cfImageAsset` and `cfBackgroundImageUrl` (BoundValue) should be handled separately
|
|
13
|
-
* and be resolved for the default breakpoint only (cause we don't allow binding per breakpoint anyway)
|
|
14
|
-
* 3) Those DesignValue props which can be converted to CSS should be grouped and resolved into a CSS media query
|
|
15
|
-
* for each breakpoint
|
|
16
|
-
* 4) Those DesignValue props which can NOT be converted to CSS (custom design props) should be resolved dynamically
|
|
17
|
-
* for each breakpoint
|
|
18
|
-
*/
|
|
19
|
-
const parseComponentProps = ({ breakpoints, mainBreakpoint, componentDefinition, patternRootNodeIdsChain, node, resolveDesignValue, resolveBoundValue, resolveHyperlinkValue, resolveUnboundValue, }) => {
|
|
8
|
+
const parseComponentProps = ({ breakpoints, mainBreakpoint, componentDefinition, patternRootNodeIdsChain, node, resolveDesignValue, resolveBoundValue, resolveHyperlinkValue, resolveUnboundValue, resolvePrebindingValue, }) => {
|
|
20
9
|
const styleProps = {};
|
|
21
10
|
const customDesignProps = {};
|
|
22
11
|
const contentProps = {};
|
|
@@ -74,12 +63,23 @@ const parseComponentProps = ({ breakpoints, mainBreakpoint, componentDefinition,
|
|
|
74
63
|
}
|
|
75
64
|
break;
|
|
76
65
|
}
|
|
77
|
-
case 'ComponentValue':
|
|
78
|
-
//
|
|
79
|
-
//
|
|
80
|
-
|
|
81
|
-
|
|
66
|
+
case 'ComponentValue': {
|
|
67
|
+
// This can either be a design (style) or a content property.
|
|
68
|
+
// Where prebinding is used, we resolve like they are a BoundValue.
|
|
69
|
+
const propValue = resolvePrebindingValue({
|
|
70
|
+
propertyName: propName,
|
|
71
|
+
mappingKey: propertyValue.key,
|
|
72
|
+
dataType: propDefinition.type,
|
|
73
|
+
resolveBoundValue,
|
|
74
|
+
}) ?? propDefinition.defaultValue;
|
|
75
|
+
if (isSpecialCaseCssProp(propName)) {
|
|
76
|
+
styleProps[propName] = { [mainBreakpoint.id]: propValue };
|
|
77
|
+
}
|
|
78
|
+
else {
|
|
79
|
+
contentProps[propName] = propValue;
|
|
80
|
+
}
|
|
82
81
|
break;
|
|
82
|
+
}
|
|
83
83
|
}
|
|
84
84
|
}
|
|
85
85
|
/* [Data Format] After resolving all properties, `styleProps` contains solely the plain design values
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"parseComponentProps.js","sources":["../../../src/utils/parseComponentProps.ts"],"sourcesContent":["import { isCfStyleAttribute, debug } from '@contentful/experiences-core';\nimport {\n BoundComponentPropertyTypes,\n BoundValue,\n Breakpoint,\n ComponentDefinition,\n ComponentDefinitionVariable,\n ComponentDefinitionVariableType,\n ComponentTreeNode,\n DesignValue,\n PrimitiveValue,\n ResolveDesignValueType,\n} from '@contentful/experiences-core/types';\nimport { convertResolvedDesignValuesToMediaQuery } from '../hooks/useMediaQuery';\nimport { createStylesheetsForBuiltInStyles } from '../hooks/useMediaQuery';\n\n// TODO: Test this for nested patterns as the name might be just a random hash without the actual name (needs to be validated).\nconst isSpecialCaseCssProp = (propName: string) => {\n return propName === 'cfBackgroundImageUrl' || propName.startsWith('cfBackgroundImageUrl_');\n};\n\n/**\n * The previous logic of prop mapping was too complex and mixed different ues cases together.\n * In this function, I aim to simplify the logic by focusing on the following specific cases FOR PREVIEW/DELIVERY MODES\n * 1) Any non `DesignValue` props should be resolved and returned as is\n * 2) Some exceptions like `cfImageAsset` and `cfBackgroundImageUrl` (BoundValue) should be handled separately\n * and be resolved for the default breakpoint only (cause we don't allow binding per breakpoint anyway)\n * 3) Those DesignValue props which can be converted to CSS should be grouped and resolved into a CSS media query\n * for each breakpoint\n * 4) Those DesignValue props which can NOT be converted to CSS (custom design props) should be resolved dynamically\n * for each breakpoint\n */\nexport const parseComponentProps = ({\n breakpoints,\n mainBreakpoint,\n componentDefinition,\n patternRootNodeIdsChain,\n node,\n resolveDesignValue,\n resolveBoundValue,\n resolveHyperlinkValue,\n resolveUnboundValue,\n}: {\n breakpoints: Breakpoint[];\n mainBreakpoint: Breakpoint;\n componentDefinition: ComponentDefinition;\n patternRootNodeIdsChain?: string;\n node: ComponentTreeNode;\n resolveDesignValue: ResolveDesignValueType;\n resolveBoundValue: (data: {\n propertyName: string;\n dataType: ComponentDefinitionVariableType;\n binding: BoundValue;\n }) => BoundComponentPropertyTypes;\n resolveHyperlinkValue: (data: { linkTargetKey: string }) => string | null;\n resolveUnboundValue: (data: {\n mappingKey: string;\n defaultValue: ComponentDefinitionVariable['defaultValue'];\n }) => PrimitiveValue;\n}) => {\n const styleProps: Record<string, DesignValue['valuesByBreakpoint']> = {};\n const customDesignProps: Record<string, PrimitiveValue> = {};\n const contentProps: Record<string, PrimitiveValue> = {};\n\n debug.log('Parsing component props for node with id: ', node.id);\n\n for (const [propName, propDefinition] of Object.entries(componentDefinition.variables)) {\n const propertyValue = node.variables[propName];\n if (!propertyValue) continue;\n\n switch (propertyValue.type) {\n case 'DesignValue': {\n if (isCfStyleAttribute(propName)) {\n // for such properties we know how to convert them to CSS, so we will build a media query from it below after the loop is over\n styleProps[propName] = propertyValue.valuesByBreakpoint;\n } else {\n // for custom design props, the value will be resolved with the javascript per breakpoint at runtime\n customDesignProps[propName] = resolveDesignValue(propertyValue.valuesByBreakpoint);\n }\n break;\n }\n case 'BoundValue': {\n const boundValue = resolveBoundValue({\n propertyName: propName,\n dataType: propDefinition.type as ComponentDefinitionVariableType,\n binding: propertyValue,\n });\n\n const propValue = boundValue ?? propDefinition.defaultValue;\n\n if (isSpecialCaseCssProp(propName)) {\n styleProps[propName] = { [mainBreakpoint.id]: propValue };\n } else {\n contentProps[propName] = propValue;\n }\n break;\n }\n\n case 'HyperlinkValue': {\n const hyperlink = resolveHyperlinkValue({\n linkTargetKey: propertyValue.linkTargetKey,\n });\n if (hyperlink) {\n contentProps[propName] = hyperlink;\n }\n break;\n }\n case 'UnboundValue': {\n const unboundValue = resolveUnboundValue({\n mappingKey: propertyValue.key,\n defaultValue: propDefinition.defaultValue,\n });\n\n if (isSpecialCaseCssProp(propName)) {\n styleProps[propName] = { [mainBreakpoint.id]: unboundValue };\n } else {\n contentProps[propName] = unboundValue;\n }\n break;\n }\n case 'ComponentValue':\n // We're rendering a pattern entry. Content cannot be set for ComponentValue type properties\n // directly in the pattern so we can safely use the default value\n // This can either be a design (style) or a content variable\n contentProps[propName] = propDefinition.defaultValue;\n break;\n default:\n break;\n }\n }\n /* [Data Format] After resolving all properties, `styleProps` contains solely the plain design values\n * styleProps = {\n * cfMargin: { desktop: '42px', tablet: '13px' },\n * cfBackgroundColor: { desktop: 'rgba(246, 246, 246, 1)' },\n * cfBackgroundImage: { desktop: 'url(https://example.com/image.jpg)' }\n * }\n */\n\n const stylePropsIndexedByBreakpoint = Object.entries(styleProps).reduce<\n Record<string, Record<string, PrimitiveValue>>\n >((acc, [propName, valuesByBreakpoint]) => {\n for (const [breakpointId, value] of Object.entries(valuesByBreakpoint)) {\n if (!acc[breakpointId]) {\n acc[breakpointId] = {};\n }\n\n acc[breakpointId][propName] = value;\n }\n\n return acc;\n }, {});\n /* [Data Format] `stylePropsIndexedByBreakpoint` contains the plain design values grouped by breakpoint\n * stylePropsIndexedByBreakpoint = {\n * desktop: {\n * cfMargin: '42px',\n * cfBackgroundColor: 'rgba(246, 246, 246, 1)',\n * cfBackgroundImage: 'url(https://example.com/image.jpg)'\n * },\n * tablet: {\n * cfMargin: '13px'\n * }\n * }\n */\n\n const stylesheetData = createStylesheetsForBuiltInStyles({\n designPropertiesByBreakpoint: stylePropsIndexedByBreakpoint,\n breakpoints,\n node,\n patternRootNodeIdsChain,\n });\n /* [Data Format] Stylesheet data provides objects containing `className`, `breakpointCondition`, and `css`.\n * stylesheetData = [{\n * className: 'uniqueMD5Hash',\n * breakpointCondition: '<768px',\n * css: 'margin:13px;'\n * visibilityCss: 'display:none !important;'\n * }, ...]\n */\n const mediaQuery = convertResolvedDesignValuesToMediaQuery(stylesheetData);\n /* [Data Format] `mediaQuery` is a joined string of all media query CSS code\n * mediaQuery = \".cfstyles-123{margin:42px;}@media(max-width:768px){.cfstyles-456{margin:13px;}}\"\n */\n return {\n styleProps,\n mediaQuery,\n customDesignProps,\n contentProps,\n };\n};\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"parseComponentProps.js","sources":["../../../src/utils/parseComponentProps.ts"],"sourcesContent":["import { isCfStyleAttribute, debug } from '@contentful/experiences-core';\nimport {\n BoundComponentPropertyTypes,\n BoundValue,\n Breakpoint,\n ComponentDefinition,\n ComponentDefinitionVariable,\n ComponentDefinitionVariableType,\n ComponentTreeNode,\n DesignValue,\n PrimitiveValue,\n ResolveDesignValueType,\n} from '@contentful/experiences-core/types';\nimport { convertResolvedDesignValuesToMediaQuery } from '../hooks/useMediaQuery';\nimport { createStylesheetsForBuiltInStyles } from '../hooks/useMediaQuery';\n\n// TODO: Test this for nested patterns as the name might be just a random hash without the actual name (needs to be validated).\nconst isSpecialCaseCssProp = (propName: string) => {\n return propName === 'cfBackgroundImageUrl' || propName.startsWith('cfBackgroundImageUrl_');\n};\n\n/**\n * The previous logic of prop mapping was too complex and mixed different ues cases together.\n * In this function, I aim to simplify the logic by focusing on the following specific cases FOR PREVIEW/DELIVERY MODES\n * 1) Any non `DesignValue` props should be resolved and returned as is\n * 2) Some exceptions like `cfImageAsset` and `cfBackgroundImageUrl` (BoundValue) should be handled separately\n * and be resolved for the default breakpoint only (cause we don't allow binding per breakpoint anyway)\n * 3) Those DesignValue props which can be converted to CSS should be grouped and resolved into a CSS media query\n * for each breakpoint\n * 4) Those DesignValue props which can NOT be converted to CSS (custom design props) should be resolved dynamically\n * for each breakpoint\n */\ntype ResolveBoundValueType = (data: {\n propertyName: string;\n dataType: ComponentDefinitionVariableType;\n binding: BoundValue;\n}) => BoundComponentPropertyTypes;\n\nexport const parseComponentProps = ({\n breakpoints,\n mainBreakpoint,\n componentDefinition,\n patternRootNodeIdsChain,\n node,\n resolveDesignValue,\n resolveBoundValue,\n resolveHyperlinkValue,\n resolveUnboundValue,\n resolvePrebindingValue,\n}: {\n breakpoints: Breakpoint[];\n mainBreakpoint: Breakpoint;\n componentDefinition: ComponentDefinition;\n patternRootNodeIdsChain?: string;\n node: ComponentTreeNode;\n resolveDesignValue: ResolveDesignValueType;\n resolveBoundValue: ResolveBoundValueType;\n resolveHyperlinkValue: (data: { linkTargetKey: string }) => string | null;\n resolveUnboundValue: (data: {\n mappingKey: string;\n defaultValue: ComponentDefinitionVariable['defaultValue'];\n }) => PrimitiveValue;\n resolvePrebindingValue: (data: {\n propertyName: string;\n mappingKey: string;\n dataType: ComponentDefinitionVariableType;\n resolveBoundValue: ResolveBoundValueType;\n }) => PrimitiveValue;\n}) => {\n const styleProps: Record<string, DesignValue['valuesByBreakpoint']> = {};\n const customDesignProps: Record<string, PrimitiveValue> = {};\n const contentProps: Record<string, PrimitiveValue> = {};\n\n debug.log('Parsing component props for node with id: ', node.id);\n\n for (const [propName, propDefinition] of Object.entries(componentDefinition.variables)) {\n const propertyValue = node.variables[propName];\n if (!propertyValue) continue;\n\n switch (propertyValue.type) {\n case 'DesignValue': {\n if (isCfStyleAttribute(propName)) {\n // for such properties we know how to convert them to CSS, so we will build a media query from it below after the loop is over\n styleProps[propName] = propertyValue.valuesByBreakpoint;\n } else {\n // for custom design props, the value will be resolved with the javascript per breakpoint at runtime\n customDesignProps[propName] = resolveDesignValue(propertyValue.valuesByBreakpoint);\n }\n break;\n }\n case 'BoundValue': {\n const boundValue = resolveBoundValue({\n propertyName: propName,\n dataType: propDefinition.type as ComponentDefinitionVariableType,\n binding: propertyValue,\n });\n\n const propValue = boundValue ?? propDefinition.defaultValue;\n\n if (isSpecialCaseCssProp(propName)) {\n styleProps[propName] = { [mainBreakpoint.id]: propValue };\n } else {\n contentProps[propName] = propValue;\n }\n break;\n }\n\n case 'HyperlinkValue': {\n const hyperlink = resolveHyperlinkValue({\n linkTargetKey: propertyValue.linkTargetKey,\n });\n if (hyperlink) {\n contentProps[propName] = hyperlink;\n }\n break;\n }\n case 'UnboundValue': {\n const unboundValue = resolveUnboundValue({\n mappingKey: propertyValue.key,\n defaultValue: propDefinition.defaultValue,\n });\n\n if (isSpecialCaseCssProp(propName)) {\n styleProps[propName] = { [mainBreakpoint.id]: unboundValue };\n } else {\n contentProps[propName] = unboundValue;\n }\n break;\n }\n case 'ComponentValue': {\n // This can either be a design (style) or a content property.\n // Where prebinding is used, we resolve like they are a BoundValue.\n const propValue =\n resolvePrebindingValue({\n propertyName: propName,\n mappingKey: propertyValue.key,\n dataType: propDefinition.type,\n resolveBoundValue,\n }) ?? propDefinition.defaultValue;\n\n if (isSpecialCaseCssProp(propName)) {\n styleProps[propName] = { [mainBreakpoint.id]: propValue };\n } else {\n contentProps[propName] = propValue;\n }\n break;\n }\n default:\n break;\n }\n }\n /* [Data Format] After resolving all properties, `styleProps` contains solely the plain design values\n * styleProps = {\n * cfMargin: { desktop: '42px', tablet: '13px' },\n * cfBackgroundColor: { desktop: 'rgba(246, 246, 246, 1)' },\n * cfBackgroundImage: { desktop: 'url(https://example.com/image.jpg)' }\n * }\n */\n\n const stylePropsIndexedByBreakpoint = Object.entries(styleProps).reduce<\n Record<string, Record<string, PrimitiveValue>>\n >((acc, [propName, valuesByBreakpoint]) => {\n for (const [breakpointId, value] of Object.entries(valuesByBreakpoint)) {\n if (!acc[breakpointId]) {\n acc[breakpointId] = {};\n }\n\n acc[breakpointId][propName] = value;\n }\n\n return acc;\n }, {});\n /* [Data Format] `stylePropsIndexedByBreakpoint` contains the plain design values grouped by breakpoint\n * stylePropsIndexedByBreakpoint = {\n * desktop: {\n * cfMargin: '42px',\n * cfBackgroundColor: 'rgba(246, 246, 246, 1)',\n * cfBackgroundImage: 'url(https://example.com/image.jpg)'\n * },\n * tablet: {\n * cfMargin: '13px'\n * }\n * }\n */\n\n const stylesheetData = createStylesheetsForBuiltInStyles({\n designPropertiesByBreakpoint: stylePropsIndexedByBreakpoint,\n breakpoints,\n node,\n patternRootNodeIdsChain,\n });\n /* [Data Format] Stylesheet data provides objects containing `className`, `breakpointCondition`, and `css`.\n * stylesheetData = [{\n * className: 'uniqueMD5Hash',\n * breakpointCondition: '<768px',\n * css: 'margin:13px;'\n * visibilityCss: 'display:none !important;'\n * }, ...]\n */\n const mediaQuery = convertResolvedDesignValuesToMediaQuery(stylesheetData);\n /* [Data Format] `mediaQuery` is a joined string of all media query CSS code\n * mediaQuery = \".cfstyles-123{margin:42px;}@media(max-width:768px){.cfstyles-456{margin:13px;}}\"\n */\n return {\n styleProps,\n mediaQuery,\n customDesignProps,\n contentProps,\n };\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -26,6 +26,32 @@ const resolvePrebindingPath = ({ componentValueKey, componentSettings, patternPr
|
|
|
26
26
|
return '';
|
|
27
27
|
return patternProperty.path + fieldPath;
|
|
28
28
|
};
|
|
29
|
+
const resolveMaybePrebindingDefaultValuePath = ({ componentValueKey, entityStore, }) => {
|
|
30
|
+
if (!entityStore.experienceEntryFields?.componentSettings)
|
|
31
|
+
return;
|
|
32
|
+
const componentSettings = entityStore.experienceEntryFields.componentSettings;
|
|
33
|
+
const prebinding = componentSettings.variableMappings?.[componentValueKey];
|
|
34
|
+
if (!prebinding)
|
|
35
|
+
return;
|
|
36
|
+
const mappingId = prebinding.patternPropertyDefinitionId || '';
|
|
37
|
+
const mapping = componentSettings.patternPropertyDefinitions?.[mappingId];
|
|
38
|
+
if (!mapping || !mapping?.defaultValue)
|
|
39
|
+
return;
|
|
40
|
+
const [[contentTypeId, defaultEntryLink]] = Object.entries(mapping.defaultValue);
|
|
41
|
+
if (contentTypeId in mapping.contentTypes) {
|
|
42
|
+
return resolvePrebindingPath({
|
|
43
|
+
componentValueKey,
|
|
44
|
+
entityStore,
|
|
45
|
+
componentSettings,
|
|
46
|
+
patternProperties: {
|
|
47
|
+
[mappingId]: {
|
|
48
|
+
path: `/${defaultEntryLink.sys.id}`,
|
|
49
|
+
type: 'BoundValue',
|
|
50
|
+
},
|
|
51
|
+
},
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
};
|
|
29
55
|
|
|
30
|
-
export { resolvePrebindingPath, shouldUsePrebinding };
|
|
56
|
+
export { resolveMaybePrebindingDefaultValuePath, resolvePrebindingPath, shouldUsePrebinding };
|
|
31
57
|
//# sourceMappingURL=prebindingUtils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"prebindingUtils.js","sources":["../../../src/utils/prebindingUtils.ts"],"sourcesContent":["import { EntityStore } from '@contentful/experiences-core';\nimport {\n ComponentPropertyValue,\n ExperienceComponentSettings,\n PatternProperty,\n} from '@contentful/experiences-validators';\n\nexport const shouldUsePrebinding = ({\n componentValueKey,\n componentSettings,\n patternProperties,\n variable,\n}: {\n componentValueKey: string;\n componentSettings: ExperienceComponentSettings;\n patternProperties: Record<string, PatternProperty>;\n variable: ComponentPropertyValue;\n}) => {\n const { patternPropertyDefinitions, variableMappings } = componentSettings;\n\n const variableMapping = variableMappings?.[componentValueKey];\n\n const patternPropertyDefinition =\n patternPropertyDefinitions?.[variableMapping?.patternPropertyDefinitionId || ''];\n const patternProperty = patternProperties?.[variableMapping?.patternPropertyDefinitionId || ''];\n\n const isValidForPrebinding =\n !!patternPropertyDefinition && !!patternProperty && !!variableMapping;\n\n return isValidForPrebinding && variable?.type === 'NoValue';\n};\n\nexport const resolvePrebindingPath = ({\n componentValueKey,\n componentSettings,\n patternProperties,\n entityStore,\n}: {\n componentValueKey: string;\n componentSettings: ExperienceComponentSettings;\n patternProperties: Record<string, PatternProperty>;\n entityStore: EntityStore;\n}) => {\n const variableMapping = componentSettings.variableMappings?.[componentValueKey];\n\n if (!variableMapping) return '';\n\n const patternProperty = patternProperties?.[variableMapping.patternPropertyDefinitionId];\n\n if (!patternProperty) return '';\n\n const dataSourceKey = patternProperty.path.split('/')[1];\n\n const entityLink = entityStore.dataSource[dataSourceKey];\n if (!entityLink) return '';\n\n const entity = entityStore.getEntityFromLink(entityLink);\n if (!entity || entity.sys.type === 'Asset') return '';\n\n const contentType = entity.sys.contentType.sys.id;\n\n const fieldPath = variableMapping?.pathsByContentType?.[contentType]?.path;\n\n if (!fieldPath) return '';\n\n return patternProperty.path + fieldPath;\n};\n"],"names":[],"mappings":"AAOO,MAAM,mBAAmB,GAAG,CAAC,EAClC,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,QAAQ,GAMT,KAAI;AACH,IAAA,MAAM,EAAE,0BAA0B,EAAE,gBAAgB,EAAE,GAAG,iBAAiB,CAAC;AAE3E,IAAA,MAAM,eAAe,GAAG,gBAAgB,GAAG,iBAAiB,CAAC,CAAC;IAE9D,MAAM,yBAAyB,GAC7B,0BAA0B,GAAG,eAAe,EAAE,2BAA2B,IAAI,EAAE,CAAC,CAAC;IACnF,MAAM,eAAe,GAAG,iBAAiB,GAAG,eAAe,EAAE,2BAA2B,IAAI,EAAE,CAAC,CAAC;AAEhG,IAAA,MAAM,oBAAoB,GACxB,CAAC,CAAC,yBAAyB,IAAI,CAAC,CAAC,eAAe,IAAI,CAAC,CAAC,eAAe,CAAC;AAExE,IAAA,OAAO,oBAAoB,IAAI,QAAQ,EAAE,IAAI,KAAK,SAAS,CAAC;AAC9D,EAAE;AAEK,MAAM,qBAAqB,GAAG,CAAC,EACpC,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,WAAW,GAMZ,KAAI;IACH,MAAM,eAAe,GAAG,iBAAiB,CAAC,gBAAgB,GAAG,iBAAiB,CAAC,CAAC;AAEhF,IAAA,IAAI,CAAC,eAAe;AAAE,QAAA,OAAO,EAAE,CAAC;IAEhC,MAAM,eAAe,GAAG,iBAAiB,GAAG,eAAe,CAAC,2BAA2B,CAAC,CAAC;AAEzF,IAAA,IAAI,CAAC,eAAe;AAAE,QAAA,OAAO,EAAE,CAAC;AAEhC,IAAA,MAAM,aAAa,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAEzD,MAAM,UAAU,GAAG,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;AACzD,IAAA,IAAI,CAAC,UAAU;AAAE,QAAA,OAAO,EAAE,CAAC;IAE3B,MAAM,MAAM,GAAG,WAAW,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC;IACzD,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,GAAG,CAAC,IAAI,KAAK,OAAO;AAAE,QAAA,OAAO,EAAE,CAAC;IAEtD,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC;IAElD,MAAM,SAAS,GAAG,eAAe,EAAE,kBAAkB,GAAG,WAAW,CAAC,EAAE,IAAI,CAAC;AAE3E,IAAA,IAAI,CAAC,SAAS;AAAE,QAAA,OAAO,EAAE,CAAC;AAE1B,IAAA,OAAO,eAAe,CAAC,IAAI,GAAG,SAAS,CAAC;AAC1C;;;;"}
|
|
1
|
+
{"version":3,"file":"prebindingUtils.js","sources":["../../../src/utils/prebindingUtils.ts"],"sourcesContent":["import { EntityStore } from '@contentful/experiences-core';\nimport {\n ComponentPropertyValue,\n ExperienceComponentSettings,\n PatternProperty,\n} from '@contentful/experiences-validators';\n\nexport const shouldUsePrebinding = ({\n componentValueKey,\n componentSettings,\n patternProperties,\n variable,\n}: {\n componentValueKey: string;\n componentSettings: ExperienceComponentSettings;\n patternProperties: Record<string, PatternProperty>;\n variable: ComponentPropertyValue;\n}) => {\n const { patternPropertyDefinitions, variableMappings } = componentSettings;\n\n const variableMapping = variableMappings?.[componentValueKey];\n\n const patternPropertyDefinition =\n patternPropertyDefinitions?.[variableMapping?.patternPropertyDefinitionId || ''];\n const patternProperty = patternProperties?.[variableMapping?.patternPropertyDefinitionId || ''];\n\n const isValidForPrebinding =\n !!patternPropertyDefinition && !!patternProperty && !!variableMapping;\n\n return isValidForPrebinding && variable?.type === 'NoValue';\n};\n\nexport const resolvePrebindingPath = ({\n componentValueKey,\n componentSettings,\n patternProperties,\n entityStore,\n}: {\n componentValueKey: string;\n componentSettings: ExperienceComponentSettings;\n patternProperties: Record<string, PatternProperty>;\n entityStore: EntityStore;\n}) => {\n const variableMapping = componentSettings.variableMappings?.[componentValueKey];\n\n if (!variableMapping) return '';\n\n const patternProperty = patternProperties?.[variableMapping.patternPropertyDefinitionId];\n\n if (!patternProperty) return '';\n\n const dataSourceKey = patternProperty.path.split('/')[1];\n\n const entityLink = entityStore.dataSource[dataSourceKey];\n if (!entityLink) return '';\n\n const entity = entityStore.getEntityFromLink(entityLink);\n if (!entity || entity.sys.type === 'Asset') return '';\n\n const contentType = entity.sys.contentType.sys.id;\n\n const fieldPath = variableMapping?.pathsByContentType?.[contentType]?.path;\n\n if (!fieldPath) return '';\n\n return patternProperty.path + fieldPath;\n};\n\nexport const resolveMaybePrebindingDefaultValuePath = ({\n componentValueKey,\n entityStore,\n}: {\n componentValueKey: string;\n entityStore: EntityStore;\n}): string | undefined => {\n if (!entityStore.experienceEntryFields?.componentSettings) return;\n\n const componentSettings = entityStore.experienceEntryFields.componentSettings;\n const prebinding = componentSettings.variableMappings?.[componentValueKey];\n if (!prebinding) return;\n\n const mappingId = prebinding.patternPropertyDefinitionId || '';\n const mapping = componentSettings.patternPropertyDefinitions?.[mappingId];\n if (!mapping || !mapping?.defaultValue) return;\n\n const [[contentTypeId, defaultEntryLink]] = Object.entries(mapping.defaultValue);\n if (contentTypeId in mapping.contentTypes) {\n return resolvePrebindingPath({\n componentValueKey,\n entityStore,\n componentSettings,\n patternProperties: {\n [mappingId]: {\n path: `/${defaultEntryLink.sys.id}`,\n type: 'BoundValue',\n },\n },\n });\n }\n};\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/experiences-sdk-react",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.42.0-dev-20250617T0920-3f313ab.0",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"module": "./dist/index.js",
|
|
6
6
|
"typings": "./dist/src/index.d.ts",
|
|
@@ -41,10 +41,10 @@
|
|
|
41
41
|
"depcruise": "depcruise src"
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
|
-
"@contentful/experiences-components-react": "1.
|
|
45
|
-
"@contentful/experiences-core": "1.
|
|
46
|
-
"@contentful/experiences-validators": "1.
|
|
47
|
-
"@contentful/experiences-visual-editor-react": "1.
|
|
44
|
+
"@contentful/experiences-components-react": "1.42.0-dev-20250617T0920-3f313ab.0",
|
|
45
|
+
"@contentful/experiences-core": "1.42.0-dev-20250617T0920-3f313ab.0",
|
|
46
|
+
"@contentful/experiences-validators": "1.42.0-dev-20250617T0920-3f313ab.0",
|
|
47
|
+
"@contentful/experiences-visual-editor-react": "1.42.0-dev-20250617T0920-3f313ab.0",
|
|
48
48
|
"@contentful/rich-text-types": "^17.0.0",
|
|
49
49
|
"classnames": "^2.3.2",
|
|
50
50
|
"csstype": "^3.1.2",
|
|
@@ -102,5 +102,5 @@
|
|
|
102
102
|
"dist",
|
|
103
103
|
"package.json"
|
|
104
104
|
],
|
|
105
|
-
"gitHead": "
|
|
105
|
+
"gitHead": "3ddac40d567ec4859db27b112d5cde0951abdbba"
|
|
106
106
|
}
|