@contentful/experiences-sdk-react 1.41.1-dev-20250613T1026-3de1677.0 → 1.42.0-beta.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 +62 -36
- package/dist/blocks/preview/CompositionBlock.js.map +1 -1
- package/dist/components/ErrorBoundary.js +19 -2
- package/dist/components/ErrorBoundary.js.map +1 -1
- package/dist/core/componentRegistry.js +1 -0
- package/dist/core/componentRegistry.js.map +1 -1
- package/dist/core/preview/assemblyUtils.js +19 -19
- 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/blocks/preview/CompositionBlock.d.ts +3 -3
- package/dist/src/components/ErrorBoundary.d.ts +0 -1
- package/dist/src/core/componentRegistry.d.ts +1 -0
- package/dist/src/core/preview/assemblyUtils.d.ts +6 -6
- package/dist/src/sdkVersion.d.ts +1 -1
- package/dist/src/utils/parseComponentProps.d.ts +14 -6
- package/dist/src/utils/prebindingUtils.d.ts +9 -5
- package/dist/utils/parseComponentProps.js +17 -17
- package/dist/utils/parseComponentProps.js.map +1 -1
- package/dist/utils/prebindingUtils.js +37 -11
- package/dist/utils/prebindingUtils.js.map +1 -1
- package/package.json +6 -8
- package/dist/src/components/Flex.d.ts +0 -64
- package/dist/src/core/index.d.ts +0 -1
- package/dist/styles/ErrorBoundary.css.js +0 -7
- package/dist/styles/ErrorBoundary.css.js.map +0 -1
|
@@ -1,68 +1,77 @@
|
|
|
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
|
-
const CompositionBlock = ({ node: rawNode, locale, entityStore, hyperlinkPattern, resolveDesignValue, getPatternChildNodeClassName, wrappingPatternIds: parentWrappingPatternIds = new Set(),
|
|
13
|
-
const
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
const CompositionBlock = ({ node: rawNode, locale, entityStore, hyperlinkPattern, resolveDesignValue, getPatternChildNodeClassName, wrappingPatternIds: parentWrappingPatternIds = new Set(), wrappingParameters: parentWrappingParameters = {}, patternRootNodeIdsChain: parentPatternRootNodeIdsChain = '', }) => {
|
|
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 (
|
|
19
|
-
// Pattern nodes are chained without a separator (following the format for prebinding/
|
|
24
|
+
if (isPatternNode) {
|
|
25
|
+
// Pattern nodes are chained without a separator (following the format for prebinding/parameters)
|
|
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
|
+
parentParameters: parentWrappingParameters,
|
|
30
36
|
patternRootNodeIdsChain,
|
|
31
|
-
})
|
|
32
|
-
|
|
33
|
-
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
else {
|
|
40
|
+
return rawNode;
|
|
41
|
+
}
|
|
42
|
+
}, [entityStore, isPatternNode, rawNode, parentWrappingParameters, patternRootNodeIdsChain]);
|
|
34
43
|
const wrappingPatternIds = useMemo(() => {
|
|
35
|
-
if (
|
|
44
|
+
if (isPatternNode) {
|
|
36
45
|
return new Set([node.definitionId, ...parentWrappingPatternIds]);
|
|
37
46
|
}
|
|
38
47
|
return parentWrappingPatternIds;
|
|
39
|
-
}, [
|
|
48
|
+
}, [isPatternNode, node, parentWrappingPatternIds]);
|
|
40
49
|
// Merge the pattern properties of the current node with the parent's pattern properties
|
|
41
50
|
// to ensure nested patterns receive relevant pattern properties that were bubbled up
|
|
42
51
|
// during assembly serialization.
|
|
43
|
-
const
|
|
44
|
-
if (
|
|
45
|
-
return { ...
|
|
52
|
+
const wrappingParameters = useMemo(() => {
|
|
53
|
+
if (isPatternNode) {
|
|
54
|
+
return { ...parentWrappingParameters, ...(rawNode.parameters || {}) };
|
|
46
55
|
}
|
|
47
|
-
return
|
|
48
|
-
}, [
|
|
56
|
+
return parentWrappingParameters;
|
|
57
|
+
}, [isPatternNode, rawNode, parentWrappingParameters]);
|
|
49
58
|
const componentRegistration = useMemo(() => {
|
|
50
59
|
const registration = getComponentRegistration(node.definitionId);
|
|
51
|
-
if (
|
|
60
|
+
if (isPatternNode && !registration) {
|
|
52
61
|
return createAssemblyRegistration({
|
|
53
62
|
definitionId: node.definitionId,
|
|
54
63
|
component: Assembly,
|
|
55
64
|
});
|
|
56
65
|
}
|
|
57
66
|
return registration;
|
|
58
|
-
}, [
|
|
67
|
+
}, [isPatternNode, node.definitionId]);
|
|
59
68
|
const { ssrProps, contentProps, props, mediaQuery } = useMemo(() => {
|
|
60
69
|
// In SSR, we store the className under breakpoints[0] which is resolved here to the actual string
|
|
61
70
|
const cfSsrClassNameValues = node.variables.cfSsrClassName;
|
|
62
71
|
const mainBreakpoint = entityStore.breakpoints[0];
|
|
63
72
|
const cfSsrClassName = cfSsrClassNameValues?.valuesByBreakpoint?.[mainBreakpoint.id];
|
|
64
73
|
// Don't enrich the assembly wrapper node with props
|
|
65
|
-
if (!componentRegistration ||
|
|
74
|
+
if (!componentRegistration || isPatternNode) {
|
|
66
75
|
const ssrProps = { cfSsrClassName };
|
|
67
76
|
const props = { className: cfSsrClassName };
|
|
68
77
|
return {
|
|
@@ -86,27 +95,43 @@ const CompositionBlock = ({ node: rawNode, locale, entityStore, hyperlinkPattern
|
|
|
86
95
|
resolveBoundValue: ({ binding, propertyName, dataType }) => {
|
|
87
96
|
const [, uuid] = binding.path.split('/');
|
|
88
97
|
const boundEntityLink = entityStore.dataSource[uuid];
|
|
89
|
-
|
|
90
|
-
return boundValue;
|
|
98
|
+
return transformBoundContentValue(node.variables, entityStore, boundEntityLink, resolveDesignValue, propertyName, dataType, binding.path);
|
|
91
99
|
},
|
|
92
100
|
resolveHyperlinkValue: ({ linkTargetKey }) => {
|
|
93
101
|
const boundEntity = entityStore.dataSource[linkTargetKey];
|
|
94
102
|
const hyperlinkEntry = entityStore.getEntryOrAsset(boundEntity, linkTargetKey);
|
|
95
|
-
|
|
103
|
+
return resolveHyperlinkPattern(componentRegistration.definition.hyperlinkPattern ||
|
|
96
104
|
hyperlinkPattern ||
|
|
97
105
|
HYPERLINK_DEFAULT_PATTERN, hyperlinkEntry, locale);
|
|
98
|
-
return value;
|
|
99
106
|
},
|
|
100
107
|
resolveUnboundValue: ({ mappingKey, defaultValue }) => {
|
|
101
108
|
return entityStore.unboundValues[mappingKey]?.value ?? defaultValue;
|
|
102
109
|
},
|
|
110
|
+
resolvePrebindingValue: ({ mappingKey, propertyName, dataType, resolveBoundValue }) => {
|
|
111
|
+
if (isPatternEntry) {
|
|
112
|
+
const path = resolveMaybePrebindingDefaultValuePath({
|
|
113
|
+
componentValueKey: mappingKey,
|
|
114
|
+
entityStore,
|
|
115
|
+
});
|
|
116
|
+
if (path) {
|
|
117
|
+
return resolveBoundValue({
|
|
118
|
+
propertyName,
|
|
119
|
+
dataType,
|
|
120
|
+
binding: {
|
|
121
|
+
type: 'BoundValue',
|
|
122
|
+
path,
|
|
123
|
+
},
|
|
124
|
+
});
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
},
|
|
103
128
|
});
|
|
104
129
|
const slotsProps = {};
|
|
105
130
|
if (componentRegistration.definition.slots) {
|
|
106
131
|
for (const slotId in componentRegistration.definition.slots) {
|
|
107
132
|
const slotNode = node.children.find((child) => child.slotId === slotId);
|
|
108
133
|
if (slotNode) {
|
|
109
|
-
slotsProps[slotId] = (jsx(CompositionBlock, { node: slotNode, locale: locale, hyperlinkPattern: hyperlinkPattern, entityStore: entityStore, resolveDesignValue: resolveDesignValue, wrappingPatternIds: wrappingPatternIds,
|
|
134
|
+
slotsProps[slotId] = (jsx(CompositionBlock, { node: slotNode, locale: locale, hyperlinkPattern: hyperlinkPattern, entityStore: entityStore, resolveDesignValue: resolveDesignValue, wrappingPatternIds: wrappingPatternIds, wrappingParameters: wrappingParameters, patternRootNodeIdsChain: patternRootNodeIdsChain }));
|
|
110
135
|
}
|
|
111
136
|
}
|
|
112
137
|
}
|
|
@@ -128,15 +153,16 @@ const CompositionBlock = ({ node: rawNode, locale, entityStore, hyperlinkPattern
|
|
|
128
153
|
};
|
|
129
154
|
}, [
|
|
130
155
|
node,
|
|
156
|
+
isPatternEntry,
|
|
131
157
|
entityStore,
|
|
132
158
|
componentRegistration,
|
|
133
|
-
|
|
159
|
+
isPatternNode,
|
|
134
160
|
getPatternChildNodeClassName,
|
|
135
161
|
resolveDesignValue,
|
|
136
162
|
hyperlinkPattern,
|
|
137
163
|
locale,
|
|
138
164
|
wrappingPatternIds,
|
|
139
|
-
|
|
165
|
+
wrappingParameters,
|
|
140
166
|
patternRootNodeIdsChain,
|
|
141
167
|
]);
|
|
142
168
|
// do not inject the stylesheet into the dom because it's already been done on the server side
|
|
@@ -151,7 +177,7 @@ const CompositionBlock = ({ node: rawNode, locale, entityStore, hyperlinkPattern
|
|
|
151
177
|
const { component } = componentRegistration;
|
|
152
178
|
// Retrieves the CSS class name for a given child node ID.
|
|
153
179
|
const _getPatternChildNodeClassName = (childNodeId) => {
|
|
154
|
-
if (
|
|
180
|
+
if (isPatternNode) {
|
|
155
181
|
const nodeIdsChain = `${patternRootNodeIdsChain}-${childNodeId}`;
|
|
156
182
|
// @ts-expect-error -- property cfSsrClassName is a map (id to classNames) that is added during rendering in ssrStyles
|
|
157
183
|
const classesForNode = node.variables.cfSsrClassName?.[nodeIdsChain];
|
|
@@ -163,9 +189,9 @@ const CompositionBlock = ({ node: rawNode, locale, entityStore, hyperlinkPattern
|
|
|
163
189
|
};
|
|
164
190
|
const children = componentRegistration.definition.children === true
|
|
165
191
|
? node.children.map((childNode, index) => {
|
|
166
|
-
return (jsx(CompositionBlock, { getPatternChildNodeClassName:
|
|
192
|
+
return (jsx(CompositionBlock, { getPatternChildNodeClassName: isPatternNode || getPatternChildNodeClassName
|
|
167
193
|
? _getPatternChildNodeClassName
|
|
168
|
-
: undefined, node: childNode, locale: locale, hyperlinkPattern: hyperlinkPattern, entityStore: entityStore, resolveDesignValue: resolveDesignValue, wrappingPatternIds: wrappingPatternIds,
|
|
194
|
+
: undefined, node: childNode, locale: locale, hyperlinkPattern: hyperlinkPattern, entityStore: entityStore, resolveDesignValue: resolveDesignValue, wrappingPatternIds: wrappingPatternIds, wrappingParameters: wrappingParameters, patternRootNodeIdsChain: patternRootNodeIdsChain }, index));
|
|
169
195
|
})
|
|
170
196
|
: null;
|
|
171
197
|
if (isContainerOrSection(node.definitionId)) {
|
|
@@ -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":"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"}
|
|
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 { Entry } 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 Parameter,\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 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 wrappingParameters?: Record<string, Parameter>;\n};\n\nexport const CompositionBlock = ({\n node: rawNode,\n locale,\n entityStore,\n hyperlinkPattern,\n resolveDesignValue,\n getPatternChildNodeClassName,\n wrappingPatternIds: parentWrappingPatternIds = new Set(),\n wrappingParameters: parentWrappingParameters = {},\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/parameters)\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 parentParameters: parentWrappingParameters,\n patternRootNodeIdsChain,\n });\n } else {\n return rawNode;\n }\n }, [entityStore, isPatternNode, rawNode, parentWrappingParameters, patternRootNodeIdsChain]);\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 wrappingParameters = useMemo(() => {\n if (isPatternNode) {\n return { ...parentWrappingParameters, ...(rawNode.parameters || {}) };\n }\n return parentWrappingParameters;\n }, [isPatternNode, rawNode, parentWrappingParameters]);\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 return transformBoundContentValue(\n node.variables,\n entityStore,\n boundEntityLink,\n resolveDesignValue,\n propertyName,\n dataType,\n binding.path,\n );\n },\n resolveHyperlinkValue: ({ linkTargetKey }) => {\n const boundEntity = entityStore.dataSource[linkTargetKey];\n const hyperlinkEntry = entityStore.getEntryOrAsset(boundEntity, linkTargetKey);\n\n return resolveHyperlinkPattern(\n componentRegistration.definition.hyperlinkPattern ||\n hyperlinkPattern ||\n HYPERLINK_DEFAULT_PATTERN,\n hyperlinkEntry as Entry,\n locale,\n );\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 wrappingParameters={wrappingParameters}\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 wrappingParameters,\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 wrappingParameters={wrappingParameters}\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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"}
|
|
@@ -1,9 +1,26 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { sendMessage } from '@contentful/experiences-core';
|
|
4
|
-
import '../styles/ErrorBoundary.css.js';
|
|
5
4
|
import { OUTGOING_EVENTS } from '@contentful/experiences-core/constants';
|
|
6
5
|
|
|
6
|
+
const styles = {
|
|
7
|
+
errorMessage: {
|
|
8
|
+
margin: '24px',
|
|
9
|
+
fontSize: 'var(--exp-builder-font-size-m)',
|
|
10
|
+
fontFamily: 'var(--exp-builder-font-stack-primary)',
|
|
11
|
+
color: 'var(--exp-builder-red800)',
|
|
12
|
+
padding: '16px',
|
|
13
|
+
backgroundColor: 'var(--exp-builder-red200)',
|
|
14
|
+
},
|
|
15
|
+
title: {
|
|
16
|
+
marginTop: 0,
|
|
17
|
+
fontSize: 'var(--exp-builder-font-size-l)',
|
|
18
|
+
},
|
|
19
|
+
moreDetails: {
|
|
20
|
+
cursor: 'pointer',
|
|
21
|
+
color: 'var(--exp-builder-blue700)',
|
|
22
|
+
},
|
|
23
|
+
};
|
|
7
24
|
class ErrorBoundary extends React.Component {
|
|
8
25
|
constructor(props) {
|
|
9
26
|
super(props);
|
|
@@ -23,7 +40,7 @@ class ErrorBoundary extends React.Component {
|
|
|
23
40
|
}
|
|
24
41
|
render() {
|
|
25
42
|
if (this.state.hasError) {
|
|
26
|
-
return (jsxs("div", {
|
|
43
|
+
return (jsxs("div", { style: styles.errorMessage, children: [jsx("h2", { style: styles.title, children: `Something went wrong while rendering the experience` }), jsxs("div", { children: ["The Experience Builder SDK has encountered an error. It may be that the SDK has not been set up properly or an imported component has thrown this error. Try to refresh the page and find more guidance in our", ' ', jsx("a", { href: "https://www.contentful.com/developers/docs/tutorials/general/experience-builder/", rel: "noreferrer", target: "_blank", children: "documentation" }), "."] }), jsx("br", {}), jsxs("span", { style: styles.moreDetails, onClick: () => this.setState((prevState) => ({
|
|
27
44
|
showErrorDetails: !prevState.showErrorDetails,
|
|
28
45
|
})), children: [this.state.showErrorDetails ? 'Hide' : 'See', " details"] }), this.state.showErrorDetails && (jsx("code", { children: this.state.error?.stack?.split('\n').map((i, key) => {
|
|
29
46
|
return jsx("div", { children: i }, key);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ErrorBoundary.js","sources":["../../../src/components/ErrorBoundary.tsx"],"sourcesContent":["import React, { ErrorInfo, ReactElement } from 'react';\nimport { sendMessage } from '@contentful/experiences-core';\nimport
|
|
1
|
+
{"version":3,"file":"ErrorBoundary.js","sources":["../../../src/components/ErrorBoundary.tsx"],"sourcesContent":["import React, { ErrorInfo, ReactElement } from 'react';\nimport { sendMessage } from '@contentful/experiences-core';\nimport { OUTGOING_EVENTS } from '@contentful/experiences-core/constants';\n\n('use client');\n\nconst styles = {\n errorMessage: {\n margin: '24px',\n fontSize: 'var(--exp-builder-font-size-m)',\n fontFamily: 'var(--exp-builder-font-stack-primary)',\n color: 'var(--exp-builder-red800)',\n padding: '16px',\n backgroundColor: 'var(--exp-builder-red200)',\n },\n title: {\n marginTop: 0,\n fontSize: 'var(--exp-builder-font-size-l)',\n },\n moreDetails: {\n cursor: 'pointer',\n color: 'var(--exp-builder-blue700)',\n },\n};\n\nexport class ErrorBoundary extends React.Component<\n { children: ReactElement },\n { hasError: boolean; error: Error | null; errorInfo: ErrorInfo | null; showErrorDetails: boolean }\n> {\n constructor(props: { children: ReactElement }) {\n super(props);\n this.state = { hasError: false, error: null, errorInfo: null, showErrorDetails: false };\n }\n\n static getDerivedStateFromError() {\n return { hasError: true };\n }\n\n componentDidCatch(error: Error, errorInfo: ErrorInfo) {\n this.setState({ error, errorInfo });\n if (error.name !== 'ImportedComponentError') {\n sendMessage(OUTGOING_EVENTS.CanvasError, error);\n } else {\n throw error;\n }\n }\n\n render() {\n if (this.state.hasError) {\n return (\n <div style={styles.errorMessage}>\n <h2 style={styles.title}>{`Something went wrong while rendering the experience`}</h2>\n <div>\n The Experience Builder SDK has encountered an error. It may be that the SDK has not been\n set up properly or an imported component has thrown this error. Try to refresh the page\n and find more guidance in our{' '}\n <a\n href=\"https://www.contentful.com/developers/docs/tutorials/general/experience-builder/\"\n rel=\"noreferrer\"\n target=\"_blank\">\n documentation\n </a>\n .\n </div>\n <br />\n <span\n style={styles.moreDetails}\n onClick={() =>\n this.setState((prevState) => ({\n showErrorDetails: !prevState.showErrorDetails,\n }))\n }>\n {this.state.showErrorDetails ? 'Hide' : 'See'} details\n </span>\n {this.state.showErrorDetails && (\n <code>\n {this.state.error?.stack?.split('\\n').map((i, key) => {\n return <div key={key}>{i}</div>;\n })}\n </code>\n )}\n </div>\n );\n }\n return this.props.children;\n }\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -5,6 +5,7 @@ import { builtInStyles, optionalBuiltInStyles, sendMessage, breakpointsRegistry,
|
|
|
5
5
|
import { validateComponentDefinition } from '@contentful/experiences-validators';
|
|
6
6
|
import { withComponentWrapper } from '../utils/withComponentWrapper.js';
|
|
7
7
|
import { SDK_VERSION } from '../sdkVersion.js';
|
|
8
|
+
import '@contentful/experiences-components-react/dist/index.css';
|
|
8
9
|
|
|
9
10
|
const CssVarRegex = /var\(--[\w-]+\)/;
|
|
10
11
|
const cloneObject = (targetObject) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"componentRegistry.js","sources":["../../../src/core/componentRegistry.ts"],"sourcesContent":["import * as Components from '@contentful/experiences-components-react';\nimport type {\n ComponentRegistration,\n ComponentDefinition,\n ComponentRegistrationOptions,\n DesignTokensDefinition,\n} from '@contentful/experiences-core/types';\nimport {\n OUTGOING_EVENTS,\n INTERNAL_EVENTS,\n CONTENTFUL_COMPONENTS,\n ASSEMBLY_DEFAULT_CATEGORY,\n} from '@contentful/experiences-core/constants';\nimport {\n builtInStyles as builtInStyleDefinitions,\n designTokensRegistry,\n breakpointsRegistry,\n optionalBuiltInStyles,\n sendMessage,\n} from '@contentful/experiences-core';\nimport { validateComponentDefinition } from '@contentful/experiences-validators';\nimport { withComponentWrapper } from '../utils/withComponentWrapper';\nimport { SDK_VERSION } from '../constants';\nimport {\n sectionDefinition,\n containerDefinition,\n columnsDefinition,\n singleColumnDefinition,\n dividerDefinition,\n} from '@contentful/experiences-components-react';\n\nconst CssVarRegex = /var\\(--[\\w-]+\\)/;\n\nconst cloneObject = <T>(targetObject: T): T => {\n if (typeof structuredClone !== 'undefined') {\n return structuredClone(targetObject);\n }\n\n return JSON.parse(JSON.stringify(targetObject));\n};\n\nconst applyComponentDefinitionFallbacks = (componentDefinition: ComponentDefinition) => {\n const clone = cloneObject(componentDefinition);\n for (const variable of Object.values(clone.variables)) {\n variable.group = variable.group ?? 'content';\n }\n return clone;\n};\n\nconst applyBuiltInStyleDefinitions = (componentDefinition: ComponentDefinition) => {\n if (componentDefinition.id === CONTENTFUL_COMPONENTS.container.id) {\n return componentDefinition;\n }\n\n const clone = cloneObject(componentDefinition);\n\n // set margin built-in style by default\n if (!clone.builtInStyles) {\n clone.builtInStyles = ['cfMargin'];\n }\n\n if (!clone.variables) {\n clone.variables = {};\n }\n\n // Enforce the presence of this property for toggling visibility on any node\n clone.variables['cfVisibility'] = builtInStyleDefinitions['cfVisibility'];\n\n for (const style of clone.builtInStyles || []) {\n if (builtInStyleDefinitions[style]) {\n clone.variables[style] = builtInStyleDefinitions[style] as any; // TODO: fix type\n }\n if (optionalBuiltInStyles[style]) {\n clone.variables[style] = optionalBuiltInStyles[style] as any; // TODO: fix type\n }\n }\n return clone;\n};\n\nexport const enrichComponentDefinition = ({\n component,\n definition,\n options,\n}: ComponentRegistration): ComponentRegistration => {\n const definitionWithFallbacks = applyComponentDefinitionFallbacks(definition);\n const definitionWithBuiltInStyles = applyBuiltInStyleDefinitions(definitionWithFallbacks);\n return {\n component: withComponentWrapper(component, options),\n definition: definitionWithBuiltInStyles,\n options,\n };\n};\n\nconst DEFAULT_COMPONENT_REGISTRATIONS = {\n container: {\n component: Components.ContentfulContainer,\n definition: containerDefinition,\n },\n section: {\n component: Components.ContentfulContainer,\n definition: sectionDefinition,\n },\n columns: {\n component: Components.Columns,\n definition: columnsDefinition,\n },\n singleColumn: {\n component: Components.SingleColumn,\n definition: singleColumnDefinition,\n },\n button: enrichComponentDefinition({\n component: Components.Button,\n definition: Components.ButtonComponentDefinition,\n options: {\n wrapComponent: false,\n },\n }),\n heading: enrichComponentDefinition({\n component: Components.Heading,\n definition: Components.HeadingComponentDefinition,\n options: {\n wrapComponent: false,\n },\n }),\n image: enrichComponentDefinition({\n component: Components.Image,\n definition: Components.ImageComponentDefinition,\n options: { wrapComponent: false },\n }),\n richText: enrichComponentDefinition({\n component: Components.RichText,\n definition: Components.RichTextComponentDefinition,\n options: {\n wrapComponent: false,\n },\n }),\n text: enrichComponentDefinition({\n component: Components.Text,\n definition: Components.TextComponentDefinition,\n options: {\n wrapComponent: false,\n },\n }),\n divider: {\n // Don't wrap this component `withComponentWrapper`. Need to explicitly ignore dragProps\n component: Components.ContentfulDivider,\n definition: dividerDefinition,\n options: {\n wrapComponent: false,\n },\n },\n carousel: enrichComponentDefinition({\n component: Components.Carousel,\n definition: Components.carouselDefinition,\n options: {\n wrapComponent: false,\n },\n }),\n} satisfies Record<string, ComponentRegistration>;\n\n// pre-filling with the default component registrations\nexport const componentRegistry = new Map<string, ComponentRegistration>([\n [DEFAULT_COMPONENT_REGISTRATIONS.section.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.section],\n [\n DEFAULT_COMPONENT_REGISTRATIONS.container.definition.id,\n DEFAULT_COMPONENT_REGISTRATIONS.container,\n ],\n [\n DEFAULT_COMPONENT_REGISTRATIONS.singleColumn.definition.id,\n DEFAULT_COMPONENT_REGISTRATIONS.singleColumn,\n ],\n [DEFAULT_COMPONENT_REGISTRATIONS.columns.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.columns],\n [DEFAULT_COMPONENT_REGISTRATIONS.button.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.button],\n [DEFAULT_COMPONENT_REGISTRATIONS.heading.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.heading],\n [DEFAULT_COMPONENT_REGISTRATIONS.image.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.image],\n [\n DEFAULT_COMPONENT_REGISTRATIONS.richText.definition.id,\n DEFAULT_COMPONENT_REGISTRATIONS.richText,\n ],\n [DEFAULT_COMPONENT_REGISTRATIONS.text.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.text],\n [DEFAULT_COMPONENT_REGISTRATIONS.divider.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.divider],\n]);\n\nexport const optionalBuiltInComponents = [\n DEFAULT_COMPONENT_REGISTRATIONS.button.definition.id,\n DEFAULT_COMPONENT_REGISTRATIONS.heading.definition.id,\n DEFAULT_COMPONENT_REGISTRATIONS.image.definition.id,\n DEFAULT_COMPONENT_REGISTRATIONS.richText.definition.id,\n DEFAULT_COMPONENT_REGISTRATIONS.text.definition.id,\n DEFAULT_COMPONENT_REGISTRATIONS.divider.definition.id,\n];\n\nexport const sendRegisteredComponentsMessage = () => {\n // Send the definitions (without components) via the connection message to the experience builder\n const registeredDefinitions = Array.from(componentRegistry.values())\n .map(({ definition }) => definition)\n // Pattern definitions are empty placeholder within the SDK without variables\n // We don't send those to the editor as they would overwrite the actual correct definitions.\n .filter((definition) => definition.category !== ASSEMBLY_DEFAULT_CATEGORY);\n\n sendMessage(OUTGOING_EVENTS.RegisteredComponents, {\n definitions: registeredDefinitions,\n });\n};\n\nexport const runRegisteredComponentValidations = () => {\n Array.from(componentRegistry.values()).map(({ definition }) => {\n const validation = validateComponentDefinition(definition);\n if (!validation.success) {\n throw new Error(\n `Invalid component definition for component '${definition.name}'. Failed with errors: \\n${JSON.stringify(validation.errors, null, 2)}`,\n );\n }\n });\n};\n\nconst getSingleCssVariableValue = (\n element: HTMLDivElement,\n cssVariableValue: string,\n cssAttribute: any,\n) => {\n element.style[cssAttribute] = cssVariableValue;\n const styles = getComputedStyle(element);\n const resolvedValue = styles.getPropertyValue(cssAttribute);\n return resolvedValue;\n};\n\nconst getAllCssVariableValues = (\n element: HTMLDivElement,\n cssVariable: Record<string, string>,\n cssAttribute: any,\n) => {\n const resolvedCssVariables = {} as Record<string, string>;\n\n Object.keys(cssVariable).forEach((key) => {\n const cssVariableValue = cssVariable[key];\n if (CssVarRegex.test(cssVariableValue)) {\n const resolvedValue = getSingleCssVariableValue(element, cssVariableValue, cssAttribute);\n resolvedCssVariables[cssVariableValue] = resolvedValue;\n }\n });\n return resolvedCssVariables;\n};\n\ntype CssMapType = {\n variable?: Record<string, string>;\n property: string;\n};\n\nconst resolveCssVariables = (designTokensDefinition: DesignTokensDefinition) => {\n const {\n spacing,\n sizing,\n color,\n borderRadius,\n fontSize,\n lineHeight,\n letterSpacing,\n textColor,\n border,\n } = designTokensDefinition;\n const resolvedCssVariables = {} as Record<string, string>;\n\n // Create an element\n const element = document.createElement('div');\n document.body.appendChild(element);\n\n const cssProperties: CssMapType[] = [\n { variable: spacing, property: 'margin' },\n { variable: sizing, property: 'width' },\n { variable: color, property: 'background-color' },\n { variable: borderRadius, property: 'border-radius' },\n { variable: fontSize, property: 'font-size' },\n { variable: lineHeight, property: 'line-height' },\n { variable: letterSpacing, property: 'letter-spacing' },\n { variable: textColor, property: 'color' },\n ];\n\n cssProperties.forEach(({ variable, property }) => {\n if (variable) {\n const rawResolvedValues = getAllCssVariableValues(element, variable, property);\n Object.assign(resolvedCssVariables, rawResolvedValues);\n }\n });\n\n if (border) {\n const tempResolvedValue = {} as Record<string, string>;\n Object.keys(border).forEach((borderKey) => {\n const { width, style, color } = border[borderKey];\n\n if (width && CssVarRegex.test(width)) {\n const resolvedValue = getSingleCssVariableValue(element, width, 'border-width');\n tempResolvedValue[width] = resolvedValue;\n }\n if (style && CssVarRegex.test(style)) {\n const resolvedValue = getSingleCssVariableValue(element, style, 'border-style');\n tempResolvedValue[style] = resolvedValue;\n }\n if (color && CssVarRegex.test(color)) {\n const resolvedValue = getSingleCssVariableValue(element, color, 'border-color');\n tempResolvedValue[color] = resolvedValue;\n }\n Object.assign(resolvedCssVariables, tempResolvedValue);\n });\n }\n\n document.body.removeChild(element);\n return resolvedCssVariables;\n};\n\nexport const sendConnectedEventWithRegisteredComponents = () => {\n // Send the definitions (without components) via the connection message to the experience builder\n const registeredDefinitions = Array.from(componentRegistry.values()).map(\n ({ definition }) => definition,\n );\n\n sendMessage(OUTGOING_EVENTS.Connected, {\n sdkVersion: SDK_VERSION,\n definitions: registeredDefinitions,\n });\n\n sendMessage(OUTGOING_EVENTS.RegisteredBreakpoints, {\n breakpoints: breakpointsRegistry,\n });\n\n sendMessage(OUTGOING_EVENTS.DesignTokens, {\n designTokens: designTokensRegistry,\n resolvedCssVariables: resolveCssVariables(designTokensRegistry),\n });\n};\n\n/**\n * Registers multiple components and their component definitions at once\n * @param componentRegistrations - ComponentRegistration[]\n * @returns void\n */\nexport const defineComponents = (\n componentRegistrations: ComponentRegistration[],\n options?: ComponentRegistrationOptions,\n) => {\n if (options?.experimentalComponents?.carousel) {\n componentRegistry.set(\n CONTENTFUL_COMPONENTS.carousel.id,\n DEFAULT_COMPONENT_REGISTRATIONS.carousel,\n );\n }\n\n if (options?.enabledBuiltInComponents) {\n for (const id of optionalBuiltInComponents) {\n if (!options.enabledBuiltInComponents.includes(id)) {\n componentRegistry.delete(id);\n }\n }\n }\n\n for (const registration of componentRegistrations) {\n // Fill definitions with fallbacks values\n const enrichedComponentRegistration = enrichComponentDefinition(registration);\n\n componentRegistry.set(\n enrichedComponentRegistration.definition.id,\n enrichedComponentRegistration,\n );\n }\n\n if (typeof window !== 'undefined') {\n window.dispatchEvent(new CustomEvent(INTERNAL_EVENTS.ComponentsRegistered));\n }\n};\n\n/**\n * use this function only in tests\n */\nexport const resetComponentRegistry = () => {\n componentRegistry.clear();\n for (const registration of Object.values(DEFAULT_COMPONENT_REGISTRATIONS)) {\n componentRegistry.set(registration.definition.id, registration);\n }\n};\n\nexport const getComponentRegistration = (id: string) => componentRegistry.get(id);\n\nexport const addComponentRegistration = (componentRegistration: ComponentRegistration) => {\n componentRegistry.set(componentRegistration.definition.id, componentRegistration);\n};\n\nexport const createAssemblyRegistration = ({\n definitionId,\n definitionName,\n component,\n}: {\n definitionId: string;\n definitionName?: string;\n component: ComponentRegistration['component'];\n}) => {\n const componentRegistration = componentRegistry.get(definitionId);\n\n if (componentRegistration) {\n return componentRegistration;\n }\n\n const definition = {\n id: definitionId,\n name: definitionName || 'Component',\n variables: {},\n children: true,\n category: ASSEMBLY_DEFAULT_CATEGORY,\n };\n\n addComponentRegistration({ component, definition });\n\n return componentRegistry.get(definitionId);\n};\n\n/**\n * @deprecated This method is used to maintain the basic component ids (without the prefix 'contentful-') in order to be compatible\n * with experiences created with an older alpha version of the SDK. Components in these experiences should be migrated to use\n * the components with the 'contentful-' prefix. To do so, load the experience in the editor, and replace any older basic components\n * (marked with [OLD] in the UI) with the new components (without the [OLD]). This method (and functionality for the older components)\n * will be removed in the next major release.\n */\nexport const maintainBasicComponentIdsWithoutPrefix = () => {\n optionalBuiltInComponents.forEach((id) => {\n if (componentRegistry.has(id) && id.startsWith('contentful-')) {\n const registeredComponent = componentRegistry.get(id)!;\n const definition = registeredComponent.definition;\n const newDefinition = cloneObject(definition);\n newDefinition.name = newDefinition.name + '[OLD]';\n const newId = id.replace('contentful-', '');\n newDefinition.id = newId;\n const newRegisteredComponent = { ...registeredComponent, definition: newDefinition };\n componentRegistry.set(newId, newRegisteredComponent);\n }\n });\n};\n"],"names":["builtInStyleDefinitions"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"componentRegistry.js","sources":["../../../src/core/componentRegistry.ts"],"sourcesContent":["import * as Components from '@contentful/experiences-components-react';\nimport type {\n ComponentRegistration,\n ComponentDefinition,\n ComponentRegistrationOptions,\n DesignTokensDefinition,\n} from '@contentful/experiences-core/types';\nimport {\n OUTGOING_EVENTS,\n INTERNAL_EVENTS,\n CONTENTFUL_COMPONENTS,\n ASSEMBLY_DEFAULT_CATEGORY,\n} from '@contentful/experiences-core/constants';\nimport {\n builtInStyles as builtInStyleDefinitions,\n designTokensRegistry,\n breakpointsRegistry,\n optionalBuiltInStyles,\n sendMessage,\n} from '@contentful/experiences-core';\nimport { validateComponentDefinition } from '@contentful/experiences-validators';\nimport { withComponentWrapper } from '../utils/withComponentWrapper';\nimport { SDK_VERSION } from '../constants';\nimport {\n sectionDefinition,\n containerDefinition,\n columnsDefinition,\n singleColumnDefinition,\n dividerDefinition,\n} from '@contentful/experiences-components-react';\n\nimport '@contentful/experiences-components-react/dist/index.css';\n\nconst CssVarRegex = /var\\(--[\\w-]+\\)/;\n\nconst cloneObject = <T>(targetObject: T): T => {\n if (typeof structuredClone !== 'undefined') {\n return structuredClone(targetObject);\n }\n\n return JSON.parse(JSON.stringify(targetObject));\n};\n\nconst applyComponentDefinitionFallbacks = (componentDefinition: ComponentDefinition) => {\n const clone = cloneObject(componentDefinition);\n for (const variable of Object.values(clone.variables)) {\n variable.group = variable.group ?? 'content';\n }\n return clone;\n};\n\nconst applyBuiltInStyleDefinitions = (componentDefinition: ComponentDefinition) => {\n if (componentDefinition.id === CONTENTFUL_COMPONENTS.container.id) {\n return componentDefinition;\n }\n\n const clone = cloneObject(componentDefinition);\n\n // set margin built-in style by default\n if (!clone.builtInStyles) {\n clone.builtInStyles = ['cfMargin'];\n }\n\n if (!clone.variables) {\n clone.variables = {};\n }\n\n // Enforce the presence of this property for toggling visibility on any node\n clone.variables['cfVisibility'] = builtInStyleDefinitions['cfVisibility'];\n\n for (const style of clone.builtInStyles || []) {\n if (builtInStyleDefinitions[style]) {\n clone.variables[style] = builtInStyleDefinitions[style] as any; // TODO: fix type\n }\n if (optionalBuiltInStyles[style]) {\n clone.variables[style] = optionalBuiltInStyles[style] as any; // TODO: fix type\n }\n }\n return clone;\n};\n\nexport const enrichComponentDefinition = ({\n component,\n definition,\n options,\n}: ComponentRegistration): ComponentRegistration => {\n const definitionWithFallbacks = applyComponentDefinitionFallbacks(definition);\n const definitionWithBuiltInStyles = applyBuiltInStyleDefinitions(definitionWithFallbacks);\n return {\n component: withComponentWrapper(component, options),\n definition: definitionWithBuiltInStyles,\n options,\n };\n};\n\nconst DEFAULT_COMPONENT_REGISTRATIONS = {\n container: {\n component: Components.ContentfulContainer,\n definition: containerDefinition,\n },\n section: {\n component: Components.ContentfulContainer,\n definition: sectionDefinition,\n },\n columns: {\n component: Components.Columns,\n definition: columnsDefinition,\n },\n singleColumn: {\n component: Components.SingleColumn,\n definition: singleColumnDefinition,\n },\n button: enrichComponentDefinition({\n component: Components.Button,\n definition: Components.ButtonComponentDefinition,\n options: {\n wrapComponent: false,\n },\n }),\n heading: enrichComponentDefinition({\n component: Components.Heading,\n definition: Components.HeadingComponentDefinition,\n options: {\n wrapComponent: false,\n },\n }),\n image: enrichComponentDefinition({\n component: Components.Image,\n definition: Components.ImageComponentDefinition,\n options: { wrapComponent: false },\n }),\n richText: enrichComponentDefinition({\n component: Components.RichText,\n definition: Components.RichTextComponentDefinition,\n options: {\n wrapComponent: false,\n },\n }),\n text: enrichComponentDefinition({\n component: Components.Text,\n definition: Components.TextComponentDefinition,\n options: {\n wrapComponent: false,\n },\n }),\n divider: {\n // Don't wrap this component `withComponentWrapper`. Need to explicitly ignore dragProps\n component: Components.ContentfulDivider,\n definition: dividerDefinition,\n options: {\n wrapComponent: false,\n },\n },\n carousel: enrichComponentDefinition({\n component: Components.Carousel,\n definition: Components.carouselDefinition,\n options: {\n wrapComponent: false,\n },\n }),\n} satisfies Record<string, ComponentRegistration>;\n\n// pre-filling with the default component registrations\nexport const componentRegistry = new Map<string, ComponentRegistration>([\n [DEFAULT_COMPONENT_REGISTRATIONS.section.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.section],\n [\n DEFAULT_COMPONENT_REGISTRATIONS.container.definition.id,\n DEFAULT_COMPONENT_REGISTRATIONS.container,\n ],\n [\n DEFAULT_COMPONENT_REGISTRATIONS.singleColumn.definition.id,\n DEFAULT_COMPONENT_REGISTRATIONS.singleColumn,\n ],\n [DEFAULT_COMPONENT_REGISTRATIONS.columns.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.columns],\n [DEFAULT_COMPONENT_REGISTRATIONS.button.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.button],\n [DEFAULT_COMPONENT_REGISTRATIONS.heading.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.heading],\n [DEFAULT_COMPONENT_REGISTRATIONS.image.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.image],\n [\n DEFAULT_COMPONENT_REGISTRATIONS.richText.definition.id,\n DEFAULT_COMPONENT_REGISTRATIONS.richText,\n ],\n [DEFAULT_COMPONENT_REGISTRATIONS.text.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.text],\n [DEFAULT_COMPONENT_REGISTRATIONS.divider.definition.id, DEFAULT_COMPONENT_REGISTRATIONS.divider],\n]);\n\nexport const optionalBuiltInComponents = [\n DEFAULT_COMPONENT_REGISTRATIONS.button.definition.id,\n DEFAULT_COMPONENT_REGISTRATIONS.heading.definition.id,\n DEFAULT_COMPONENT_REGISTRATIONS.image.definition.id,\n DEFAULT_COMPONENT_REGISTRATIONS.richText.definition.id,\n DEFAULT_COMPONENT_REGISTRATIONS.text.definition.id,\n DEFAULT_COMPONENT_REGISTRATIONS.divider.definition.id,\n];\n\nexport const sendRegisteredComponentsMessage = () => {\n // Send the definitions (without components) via the connection message to the experience builder\n const registeredDefinitions = Array.from(componentRegistry.values())\n .map(({ definition }) => definition)\n // Pattern definitions are empty placeholder within the SDK without variables\n // We don't send those to the editor as they would overwrite the actual correct definitions.\n .filter((definition) => definition.category !== ASSEMBLY_DEFAULT_CATEGORY);\n\n sendMessage(OUTGOING_EVENTS.RegisteredComponents, {\n definitions: registeredDefinitions,\n });\n};\n\nexport const runRegisteredComponentValidations = () => {\n Array.from(componentRegistry.values()).map(({ definition }) => {\n const validation = validateComponentDefinition(definition);\n if (!validation.success) {\n throw new Error(\n `Invalid component definition for component '${definition.name}'. Failed with errors: \\n${JSON.stringify(validation.errors, null, 2)}`,\n );\n }\n });\n};\n\nconst getSingleCssVariableValue = (\n element: HTMLDivElement,\n cssVariableValue: string,\n cssAttribute: any,\n) => {\n element.style[cssAttribute] = cssVariableValue;\n const styles = getComputedStyle(element);\n const resolvedValue = styles.getPropertyValue(cssAttribute);\n return resolvedValue;\n};\n\nconst getAllCssVariableValues = (\n element: HTMLDivElement,\n cssVariable: Record<string, string>,\n cssAttribute: any,\n) => {\n const resolvedCssVariables = {} as Record<string, string>;\n\n Object.keys(cssVariable).forEach((key) => {\n const cssVariableValue = cssVariable[key];\n if (CssVarRegex.test(cssVariableValue)) {\n const resolvedValue = getSingleCssVariableValue(element, cssVariableValue, cssAttribute);\n resolvedCssVariables[cssVariableValue] = resolvedValue;\n }\n });\n return resolvedCssVariables;\n};\n\ntype CssMapType = {\n variable?: Record<string, string>;\n property: string;\n};\n\nconst resolveCssVariables = (designTokensDefinition: DesignTokensDefinition) => {\n const {\n spacing,\n sizing,\n color,\n borderRadius,\n fontSize,\n lineHeight,\n letterSpacing,\n textColor,\n border,\n } = designTokensDefinition;\n const resolvedCssVariables = {} as Record<string, string>;\n\n // Create an element\n const element = document.createElement('div');\n document.body.appendChild(element);\n\n const cssProperties: CssMapType[] = [\n { variable: spacing, property: 'margin' },\n { variable: sizing, property: 'width' },\n { variable: color, property: 'background-color' },\n { variable: borderRadius, property: 'border-radius' },\n { variable: fontSize, property: 'font-size' },\n { variable: lineHeight, property: 'line-height' },\n { variable: letterSpacing, property: 'letter-spacing' },\n { variable: textColor, property: 'color' },\n ];\n\n cssProperties.forEach(({ variable, property }) => {\n if (variable) {\n const rawResolvedValues = getAllCssVariableValues(element, variable, property);\n Object.assign(resolvedCssVariables, rawResolvedValues);\n }\n });\n\n if (border) {\n const tempResolvedValue = {} as Record<string, string>;\n Object.keys(border).forEach((borderKey) => {\n const { width, style, color } = border[borderKey];\n\n if (width && CssVarRegex.test(width)) {\n const resolvedValue = getSingleCssVariableValue(element, width, 'border-width');\n tempResolvedValue[width] = resolvedValue;\n }\n if (style && CssVarRegex.test(style)) {\n const resolvedValue = getSingleCssVariableValue(element, style, 'border-style');\n tempResolvedValue[style] = resolvedValue;\n }\n if (color && CssVarRegex.test(color)) {\n const resolvedValue = getSingleCssVariableValue(element, color, 'border-color');\n tempResolvedValue[color] = resolvedValue;\n }\n Object.assign(resolvedCssVariables, tempResolvedValue);\n });\n }\n\n document.body.removeChild(element);\n return resolvedCssVariables;\n};\n\nexport const sendConnectedEventWithRegisteredComponents = () => {\n // Send the definitions (without components) via the connection message to the experience builder\n const registeredDefinitions = Array.from(componentRegistry.values()).map(\n ({ definition }) => definition,\n );\n\n sendMessage(OUTGOING_EVENTS.Connected, {\n sdkVersion: SDK_VERSION,\n definitions: registeredDefinitions,\n });\n\n sendMessage(OUTGOING_EVENTS.RegisteredBreakpoints, {\n breakpoints: breakpointsRegistry,\n });\n\n sendMessage(OUTGOING_EVENTS.DesignTokens, {\n designTokens: designTokensRegistry,\n resolvedCssVariables: resolveCssVariables(designTokensRegistry),\n });\n};\n\n/**\n * Registers multiple components and their component definitions at once\n * @param componentRegistrations - ComponentRegistration[]\n * @returns void\n */\nexport const defineComponents = (\n componentRegistrations: ComponentRegistration[],\n options?: ComponentRegistrationOptions,\n) => {\n if (options?.experimentalComponents?.carousel) {\n componentRegistry.set(\n CONTENTFUL_COMPONENTS.carousel.id,\n DEFAULT_COMPONENT_REGISTRATIONS.carousel,\n );\n }\n\n if (options?.enabledBuiltInComponents) {\n for (const id of optionalBuiltInComponents) {\n if (!options.enabledBuiltInComponents.includes(id)) {\n componentRegistry.delete(id);\n }\n }\n }\n\n for (const registration of componentRegistrations) {\n // Fill definitions with fallbacks values\n const enrichedComponentRegistration = enrichComponentDefinition(registration);\n\n componentRegistry.set(\n enrichedComponentRegistration.definition.id,\n enrichedComponentRegistration,\n );\n }\n\n if (typeof window !== 'undefined') {\n window.dispatchEvent(new CustomEvent(INTERNAL_EVENTS.ComponentsRegistered));\n }\n};\n\n/**\n * use this function only in tests\n */\nexport const resetComponentRegistry = () => {\n componentRegistry.clear();\n for (const registration of Object.values(DEFAULT_COMPONENT_REGISTRATIONS)) {\n componentRegistry.set(registration.definition.id, registration);\n }\n};\n\nexport const getComponentRegistration = (id: string) => componentRegistry.get(id);\n\nexport const addComponentRegistration = (componentRegistration: ComponentRegistration) => {\n componentRegistry.set(componentRegistration.definition.id, componentRegistration);\n};\n\nexport const createAssemblyRegistration = ({\n definitionId,\n definitionName,\n component,\n}: {\n definitionId: string;\n definitionName?: string;\n component: ComponentRegistration['component'];\n}) => {\n const componentRegistration = componentRegistry.get(definitionId);\n\n if (componentRegistration) {\n return componentRegistration;\n }\n\n const definition = {\n id: definitionId,\n name: definitionName || 'Component',\n variables: {},\n children: true,\n category: ASSEMBLY_DEFAULT_CATEGORY,\n };\n\n addComponentRegistration({ component, definition });\n\n return componentRegistry.get(definitionId);\n};\n\n/**\n * @deprecated This method is used to maintain the basic component ids (without the prefix 'contentful-') in order to be compatible\n * with experiences created with an older alpha version of the SDK. Components in these experiences should be migrated to use\n * the components with the 'contentful-' prefix. To do so, load the experience in the editor, and replace any older basic components\n * (marked with [OLD] in the UI) with the new components (without the [OLD]). This method (and functionality for the older components)\n * will be removed in the next major release.\n */\nexport const maintainBasicComponentIdsWithoutPrefix = () => {\n optionalBuiltInComponents.forEach((id) => {\n if (componentRegistry.has(id) && id.startsWith('contentful-')) {\n const registeredComponent = componentRegistry.get(id)!;\n const definition = registeredComponent.definition;\n const newDefinition = cloneObject(definition);\n newDefinition.name = newDefinition.name + '[OLD]';\n const newId = id.replace('contentful-', '');\n newDefinition.id = newId;\n const newRegisteredComponent = { ...registeredComponent, definition: newDefinition };\n componentRegistry.set(newId, newRegisteredComponent);\n }\n });\n};\n"],"names":["builtInStyleDefinitions"],"mappings":"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"}
|
|
@@ -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, parameters, entityStore, }) => {
|
|
8
8
|
const variables = {};
|
|
9
9
|
for (const [variableName, variable] of Object.entries(node.variables)) {
|
|
10
10
|
variables[variableName] = variable;
|
|
@@ -16,13 +16,13 @@ const deserializeAssemblyNode = ({ node, componentInstanceVariables, componentSe
|
|
|
16
16
|
const usePrebinding = shouldUsePrebinding({
|
|
17
17
|
componentSettings,
|
|
18
18
|
componentValueKey,
|
|
19
|
-
|
|
19
|
+
parameters: parameters,
|
|
20
20
|
variable: instanceProperty,
|
|
21
21
|
});
|
|
22
22
|
const path = resolvePrebindingPath({
|
|
23
23
|
componentSettings,
|
|
24
24
|
componentValueKey,
|
|
25
|
-
|
|
25
|
+
parameters: parameters,
|
|
26
26
|
entityStore,
|
|
27
27
|
});
|
|
28
28
|
if (usePrebinding && path) {
|
|
@@ -71,11 +71,11 @@ 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,
|
|
78
|
-
|
|
78
|
+
parameters,
|
|
79
79
|
entityStore,
|
|
80
80
|
}));
|
|
81
81
|
return {
|
|
@@ -85,50 +85,50 @@ const deserializeAssemblyNode = ({ node, componentInstanceVariables, componentSe
|
|
|
85
85
|
children,
|
|
86
86
|
slotId: node.slotId,
|
|
87
87
|
displayName: node.displayName,
|
|
88
|
-
|
|
88
|
+
parameters: node.parameters,
|
|
89
89
|
};
|
|
90
90
|
};
|
|
91
|
-
const
|
|
91
|
+
const resolvePattern = ({ node, parentParameters, 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)) {
|
|
95
95
|
return node;
|
|
96
96
|
}
|
|
97
|
-
const
|
|
98
|
-
const
|
|
99
|
-
...
|
|
100
|
-
...(node.
|
|
97
|
+
const parameters = {};
|
|
98
|
+
const allParameters = {
|
|
99
|
+
...parentParameters,
|
|
100
|
+
...(node.parameters || {}),
|
|
101
101
|
};
|
|
102
|
-
for (const [
|
|
102
|
+
for (const [parameterKey, parameter] of Object.entries(allParameters)) {
|
|
103
103
|
/**
|
|
104
104
|
* Bubbled up pattern properties are a concatenation of the node id
|
|
105
105
|
* and the pattern property definition id. We need to split them so
|
|
106
106
|
* that the node only uses the pattern property definition id.
|
|
107
107
|
*/
|
|
108
|
-
const [hashKey,
|
|
108
|
+
const [hashKey, parameterId] = parameterKey.split(PATTERN_PROPERTY_DIVIDER);
|
|
109
109
|
const hashedNodeChain = md5(patternRootNodeIdsChain || '');
|
|
110
110
|
const isMatchingNode = hashKey === hashedNodeChain;
|
|
111
111
|
if (!isMatchingNode)
|
|
112
112
|
continue;
|
|
113
|
-
|
|
113
|
+
parameters[parameterId] = parameter;
|
|
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,
|
|
120
120
|
variables: node.variables,
|
|
121
121
|
children: componentFields.componentTree.children,
|
|
122
|
-
|
|
122
|
+
parameters: parameters,
|
|
123
123
|
},
|
|
124
124
|
componentInstanceVariables: node.variables,
|
|
125
125
|
componentSettings: componentFields.componentSettings,
|
|
126
|
-
|
|
126
|
+
parameters: parameters,
|
|
127
127
|
entityStore,
|
|
128
128
|
});
|
|
129
129
|
entityStore.addAssemblyUnboundValues(componentFields.unboundValues);
|
|
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
|
|
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 Parameter,\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 parameters,\n entityStore,\n}: {\n node: ComponentTreeNode;\n componentInstanceVariables: ComponentTreeNode['variables'];\n componentSettings: ExperienceComponentSettings;\n parameters: Record<string, Parameter>;\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 parameters: parameters,\n variable: instanceProperty,\n });\n const path = resolvePrebindingPath({\n componentSettings,\n componentValueKey,\n parameters: parameters,\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 parameters,\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 parameters: node.parameters,\n };\n};\n\nexport const resolvePattern = ({\n node,\n parentParameters,\n patternRootNodeIdsChain,\n entityStore,\n}: {\n node: ComponentTreeNode;\n entityStore: EntityStore;\n parentParameters: Record<string, Parameter>;\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 parameters: Record<string, Parameter> = {};\n\n const allParameters = {\n ...parentParameters,\n ...(node.parameters || {}),\n };\n\n for (const [parameterKey, parameter] of Object.entries(allParameters)) {\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, parameterId] = parameterKey.split(PATTERN_PROPERTY_DIVIDER);\n\n const hashedNodeChain = md5(patternRootNodeIdsChain || '');\n\n const isMatchingNode = hashKey === hashedNodeChain;\n\n if (!isMatchingNode) continue;\n\n parameters[parameterId] = parameter;\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 parameters: parameters,\n },\n componentInstanceVariables: node.variables,\n componentSettings: componentFields.componentSettings!,\n parameters: parameters,\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-beta.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-beta.0';\n"],"names":[],"mappings":"AAAO,MAAM,WAAW,GAAG;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { EntityStore } from '@contentful/experiences-core';
|
|
2
|
-
import type { ComponentTreeNode,
|
|
2
|
+
import type { ComponentTreeNode, Parameter, ResolveDesignValueType } from '@contentful/experiences-core/types';
|
|
3
3
|
type CompositionBlockProps = {
|
|
4
4
|
node: ComponentTreeNode;
|
|
5
5
|
locale: string;
|
|
@@ -14,7 +14,7 @@ type CompositionBlockProps = {
|
|
|
14
14
|
* when storing & accessing cfSsrClassName.
|
|
15
15
|
*/
|
|
16
16
|
patternRootNodeIdsChain?: string;
|
|
17
|
-
|
|
17
|
+
wrappingParameters?: Record<string, Parameter>;
|
|
18
18
|
};
|
|
19
|
-
export declare const CompositionBlock: ({ node: rawNode, locale, entityStore, hyperlinkPattern, resolveDesignValue, getPatternChildNodeClassName, wrappingPatternIds: parentWrappingPatternIds,
|
|
19
|
+
export declare const CompositionBlock: ({ node: rawNode, locale, entityStore, hyperlinkPattern, resolveDesignValue, getPatternChildNodeClassName, wrappingPatternIds: parentWrappingPatternIds, wrappingParameters: parentWrappingParameters, patternRootNodeIdsChain: parentPatternRootNodeIdsChain, }: CompositionBlockProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
20
20
|
export {};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { ComponentRegistration, ComponentRegistrationOptions } from '@contentful/experiences-core/types';
|
|
2
|
+
import '@contentful/experiences-components-react/dist/index.css';
|
|
2
3
|
export declare const enrichComponentDefinition: ({ component, definition, options, }: ComponentRegistration) => ComponentRegistration;
|
|
3
4
|
export declare const componentRegistry: Map<string, ComponentRegistration>;
|
|
4
5
|
export declare const optionalBuiltInComponents: string[];
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import { EntityStore } from '@contentful/experiences-core';
|
|
2
|
-
import type { ComponentTreeNode, ExperienceComponentSettings,
|
|
3
|
-
/** While unfolding the
|
|
2
|
+
import type { ComponentTreeNode, ExperienceComponentSettings, Parameter } from '@contentful/experiences-core/types';
|
|
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, parameters, entityStore, }: {
|
|
6
6
|
node: ComponentTreeNode;
|
|
7
7
|
componentInstanceVariables: ComponentTreeNode["variables"];
|
|
8
8
|
componentSettings: ExperienceComponentSettings;
|
|
9
|
-
|
|
9
|
+
parameters: Record<string, Parameter>;
|
|
10
10
|
entityStore: EntityStore;
|
|
11
11
|
}) => ComponentTreeNode;
|
|
12
|
-
export declare const
|
|
12
|
+
export declare const resolvePattern: ({ node, parentParameters, patternRootNodeIdsChain, entityStore, }: {
|
|
13
13
|
node: ComponentTreeNode;
|
|
14
14
|
entityStore: EntityStore;
|
|
15
|
-
|
|
15
|
+
parentParameters: Record<string, Parameter>;
|
|
16
16
|
patternRootNodeIdsChain: string;
|
|
17
17
|
}) => ComponentTreeNode;
|
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-beta.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 {};
|
|
@@ -1,14 +1,18 @@
|
|
|
1
1
|
import { EntityStore } from '@contentful/experiences-core';
|
|
2
|
-
import { ComponentPropertyValue, ExperienceComponentSettings,
|
|
3
|
-
export declare const shouldUsePrebinding: ({ componentValueKey, componentSettings,
|
|
2
|
+
import { ComponentPropertyValue, ExperienceComponentSettings, Parameter } from '@contentful/experiences-validators';
|
|
3
|
+
export declare const shouldUsePrebinding: ({ componentValueKey, componentSettings, parameters, variable, }: {
|
|
4
4
|
componentValueKey: string;
|
|
5
5
|
componentSettings: ExperienceComponentSettings;
|
|
6
|
-
|
|
6
|
+
parameters: Record<string, Parameter>;
|
|
7
7
|
variable: ComponentPropertyValue;
|
|
8
8
|
}) => boolean;
|
|
9
|
-
export declare const resolvePrebindingPath: ({ componentValueKey, componentSettings,
|
|
9
|
+
export declare const resolvePrebindingPath: ({ componentValueKey, componentSettings, parameters, entityStore, }: {
|
|
10
10
|
componentValueKey: string;
|
|
11
11
|
componentSettings: ExperienceComponentSettings;
|
|
12
|
-
|
|
12
|
+
parameters: Record<string, Parameter>;
|
|
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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"}
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
const shouldUsePrebinding = ({ componentValueKey, componentSettings,
|
|
2
|
-
const {
|
|
1
|
+
const shouldUsePrebinding = ({ componentValueKey, componentSettings, parameters, variable, }) => {
|
|
2
|
+
const { parameterDefinitions, variableMappings } = componentSettings;
|
|
3
3
|
const variableMapping = variableMappings?.[componentValueKey];
|
|
4
|
-
const
|
|
5
|
-
const
|
|
6
|
-
const isValidForPrebinding = !!
|
|
4
|
+
const parameterDefinition = parameterDefinitions?.[variableMapping?.parameterId || ''];
|
|
5
|
+
const parameter = parameters?.[variableMapping?.parameterId || ''];
|
|
6
|
+
const isValidForPrebinding = !!parameterDefinition && !!parameter && !!variableMapping;
|
|
7
7
|
return isValidForPrebinding && variable?.type === 'NoValue';
|
|
8
8
|
};
|
|
9
|
-
const resolvePrebindingPath = ({ componentValueKey, componentSettings,
|
|
9
|
+
const resolvePrebindingPath = ({ componentValueKey, componentSettings, parameters, entityStore, }) => {
|
|
10
10
|
const variableMapping = componentSettings.variableMappings?.[componentValueKey];
|
|
11
11
|
if (!variableMapping)
|
|
12
12
|
return '';
|
|
13
|
-
const
|
|
14
|
-
if (!
|
|
13
|
+
const parameter = parameters?.[variableMapping.parameterId];
|
|
14
|
+
if (!parameter)
|
|
15
15
|
return '';
|
|
16
|
-
const dataSourceKey =
|
|
16
|
+
const dataSourceKey = parameter.path.split('/')[1];
|
|
17
17
|
const entityLink = entityStore.dataSource[dataSourceKey];
|
|
18
18
|
if (!entityLink)
|
|
19
19
|
return '';
|
|
@@ -24,8 +24,34 @@ const resolvePrebindingPath = ({ componentValueKey, componentSettings, patternPr
|
|
|
24
24
|
const fieldPath = variableMapping?.pathsByContentType?.[contentType]?.path;
|
|
25
25
|
if (!fieldPath)
|
|
26
26
|
return '';
|
|
27
|
-
return
|
|
27
|
+
return parameter.path + fieldPath;
|
|
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.parameterId || '';
|
|
37
|
+
const mapping = componentSettings.parameterDefinitions?.[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
|
+
parameters: {
|
|
47
|
+
[mappingId]: {
|
|
48
|
+
path: `/${defaultEntryLink.sys.id}`,
|
|
49
|
+
type: 'BoundValue',
|
|
50
|
+
},
|
|
51
|
+
},
|
|
52
|
+
});
|
|
53
|
+
}
|
|
28
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
|
|
1
|
+
{"version":3,"file":"prebindingUtils.js","sources":["../../../src/utils/prebindingUtils.ts"],"sourcesContent":["import { EntityStore } from '@contentful/experiences-core';\nimport {\n ComponentPropertyValue,\n ExperienceComponentSettings,\n Parameter,\n} from '@contentful/experiences-validators';\n\nexport const shouldUsePrebinding = ({\n componentValueKey,\n componentSettings,\n parameters,\n variable,\n}: {\n componentValueKey: string;\n componentSettings: ExperienceComponentSettings;\n parameters: Record<string, Parameter>;\n variable: ComponentPropertyValue;\n}) => {\n const { parameterDefinitions, variableMappings } = componentSettings;\n\n const variableMapping = variableMappings?.[componentValueKey];\n\n const parameterDefinition = parameterDefinitions?.[variableMapping?.parameterId || ''];\n const parameter = parameters?.[variableMapping?.parameterId || ''];\n\n const isValidForPrebinding = !!parameterDefinition && !!parameter && !!variableMapping;\n\n return isValidForPrebinding && variable?.type === 'NoValue';\n};\n\nexport const resolvePrebindingPath = ({\n componentValueKey,\n componentSettings,\n parameters,\n entityStore,\n}: {\n componentValueKey: string;\n componentSettings: ExperienceComponentSettings;\n parameters: Record<string, Parameter>;\n entityStore: EntityStore;\n}) => {\n const variableMapping = componentSettings.variableMappings?.[componentValueKey];\n\n if (!variableMapping) return '';\n\n const parameter = parameters?.[variableMapping.parameterId];\n\n if (!parameter) return '';\n\n const dataSourceKey = parameter.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 parameter.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.parameterId || '';\n const mapping = componentSettings.parameterDefinitions?.[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 parameters: {\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-beta.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-beta.0",
|
|
45
|
+
"@contentful/experiences-core": "1.42.0-beta.0",
|
|
46
|
+
"@contentful/experiences-validators": "1.42.0-beta.0",
|
|
47
|
+
"@contentful/experiences-visual-editor-react": "1.42.0-beta.0",
|
|
48
48
|
"@contentful/rich-text-types": "^17.0.0",
|
|
49
49
|
"classnames": "^2.3.2",
|
|
50
50
|
"csstype": "^3.1.2",
|
|
@@ -76,14 +76,12 @@
|
|
|
76
76
|
"jest": "^29.5.0",
|
|
77
77
|
"jest-environment-jsdom": "^29.5.0",
|
|
78
78
|
"jsdom": "^24.0.0",
|
|
79
|
-
"postcss-import": "^16.0.1",
|
|
80
79
|
"react": "^18.2.0",
|
|
81
80
|
"react-dom": "^18.2.0",
|
|
82
81
|
"relative-deps": "^1.0.7",
|
|
83
82
|
"rollup-plugin-dts": "^6.1.0",
|
|
84
83
|
"rollup-plugin-node-externals": "^7.0.1",
|
|
85
84
|
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
86
|
-
"rollup-plugin-postcss": "^4.0.2",
|
|
87
85
|
"rollup-plugin-preserve-directives": "^0.4.0",
|
|
88
86
|
"semantic-release": "23.0.2",
|
|
89
87
|
"ts-jest": "^29.1.0",
|
|
@@ -102,5 +100,5 @@
|
|
|
102
100
|
"dist",
|
|
103
101
|
"package.json"
|
|
104
102
|
],
|
|
105
|
-
"gitHead": "
|
|
103
|
+
"gitHead": "2d1ce6ba1f82d1b8fbfcd05a111e72430c4c4cd1"
|
|
106
104
|
}
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import React, { MouseEventHandler } from 'react';
|
|
2
|
-
import type * as CSS from 'csstype';
|
|
3
|
-
export interface FlexProps {
|
|
4
|
-
/**
|
|
5
|
-
* Child nodes to be rendered in the component */
|
|
6
|
-
children?: React.ReactNode;
|
|
7
|
-
/**
|
|
8
|
-
* A shorthand property for flex-grow, flex-shrink, flex-basis
|
|
9
|
-
*/
|
|
10
|
-
flex?: CSS.Property.Flex;
|
|
11
|
-
/**
|
|
12
|
-
* Defines the initial size of a flexbox item.
|
|
13
|
-
* */
|
|
14
|
-
flexBasis?: CSS.Property.FlexBasis;
|
|
15
|
-
/**
|
|
16
|
-
* Defines how much a flexbox item should shrink if there's not enough space available. */
|
|
17
|
-
flexShrink?: CSS.Property.FlexShrink;
|
|
18
|
-
/**
|
|
19
|
-
* Defines if flexbox items appear on a single line or on multiple lines within a flexbox container. */
|
|
20
|
-
flexWrap?: CSS.Property.FlexWrap;
|
|
21
|
-
/**
|
|
22
|
-
* Defines how flexbox items are ordered within a flexbox container. */
|
|
23
|
-
flexDirection?: CSS.Property.FlexDirection;
|
|
24
|
-
/**
|
|
25
|
-
* Defines how much a flexbox item should grow if there's space available. */
|
|
26
|
-
flexGrow?: CSS.Property.FlexGrow;
|
|
27
|
-
/**
|
|
28
|
-
* Defines a gap between flexbox items. */
|
|
29
|
-
gap?: string;
|
|
30
|
-
/**
|
|
31
|
-
* Defines how flexbox/grid items are aligned according to the main axis, within a flexbox/grid container. */
|
|
32
|
-
justifyContent?: CSS.Property.JustifyContent;
|
|
33
|
-
/**
|
|
34
|
-
* Defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis. */
|
|
35
|
-
justifyItems?: CSS.Property.JustifyContent;
|
|
36
|
-
/**
|
|
37
|
-
* Sets the way a box is justified inside its alignment container along the appropriate axis. */
|
|
38
|
-
justifySelf?: CSS.Property.JustifySelf;
|
|
39
|
-
/**
|
|
40
|
-
* Defines how flexbox items are aligned according to the cross axis, within a line of a flexbox container.
|
|
41
|
-
*/
|
|
42
|
-
alignItems?: CSS.Property.AlignItems;
|
|
43
|
-
/**
|
|
44
|
-
* Works like align-items, but applies only to a single flexbox item, instead of all of them.
|
|
45
|
-
*/
|
|
46
|
-
alignSelf?: CSS.Property.AlignItems;
|
|
47
|
-
/**
|
|
48
|
-
* Defines how each line is aligned within a flexbox/grid container.
|
|
49
|
-
*/
|
|
50
|
-
alignContent?: CSS.Property.AlignContent;
|
|
51
|
-
/**
|
|
52
|
-
* Defines the order of a flexbox item
|
|
53
|
-
*/
|
|
54
|
-
order?: CSS.Property.Order;
|
|
55
|
-
onMouseEnter?: MouseEventHandler<HTMLDivElement>;
|
|
56
|
-
onMouseLeave?: MouseEventHandler<HTMLDivElement>;
|
|
57
|
-
onMouseUp?: MouseEventHandler<HTMLDivElement>;
|
|
58
|
-
onMouseDown?: MouseEventHandler<HTMLDivElement>;
|
|
59
|
-
onClick?: MouseEventHandler<HTMLDivElement>;
|
|
60
|
-
className?: string;
|
|
61
|
-
cssStyles?: Record<string, string>;
|
|
62
|
-
id?: string;
|
|
63
|
-
}
|
|
64
|
-
export declare const Flex: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>>;
|
package/dist/src/core/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Flex } from '../components/Flex';
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import styleInject from 'style-inject';
|
|
2
|
-
|
|
3
|
-
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";
|
|
4
|
-
styleInject(css_248z);
|
|
5
|
-
|
|
6
|
-
export { css_248z as default };
|
|
7
|
-
//# sourceMappingURL=ErrorBoundary.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ErrorBoundary.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
|