@contentful/experiences-sdk-react 2.0.0-prerelease-20250703T1150-c529c88.0 → 2.0.0-prerelease-20250704T1603-11d76eb.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 +3 -13
- package/dist/blocks/preview/CompositionBlock.js.map +1 -1
- package/dist/core/componentRegistry.js +0 -1
- package/dist/core/componentRegistry.js.map +1 -1
- package/dist/core/preview/assemblyUtils.js.map +1 -1
- package/dist/core/sdkFeatures.js +2 -0
- package/dist/core/sdkFeatures.js.map +1 -1
- package/dist/core/styles/convertResolvedDesignValuesToMediaQuery.js +44 -0
- package/dist/core/styles/convertResolvedDesignValuesToMediaQuery.js.map +1 -0
- package/dist/{hooks/useMediaQuery.js → core/styles/createStylesheetsForBuiltInStyles.js} +3 -60
- package/dist/core/styles/createStylesheetsForBuiltInStyles.js.map +1 -0
- package/dist/index.d.ts +1 -1
- package/dist/sdkVersion.js +1 -1
- package/dist/sdkVersion.js.map +1 -1
- package/dist/src/core/componentRegistry.d.ts +0 -1
- package/dist/src/core/styles/convertResolvedDesignValuesToMediaQuery.d.ts +22 -0
- package/dist/src/core/styles/createStylesheetsForBuiltInStyles.d.ts +24 -0
- package/dist/src/core/styles/createStylesheetsForBuiltInStyles.spec.d.ts +1 -0
- package/dist/src/sdkVersion.d.ts +1 -1
- package/dist/utils/parseComponentProps.js +2 -1
- package/dist/utils/parseComponentProps.js.map +1 -1
- package/package.json +6 -7
- package/dist/blocks/preview/PreviewUnboundImage.js +0 -54
- package/dist/blocks/preview/PreviewUnboundImage.js.map +0 -1
- package/dist/hooks/useMediaQuery.js.map +0 -1
- package/dist/src/blocks/preview/PreviewUnboundImage.d.ts +0 -15
- package/dist/src/hooks/useMediaQuery.d.ts +0 -55
- /package/dist/src/{hooks/useMediaQuery.spec.d.ts → core/styles/convertResolvedDesignValuesToMediaQuery.spec.d.ts} +0 -0
|
@@ -4,10 +4,9 @@ import { checkIsAssemblyNode, checkIsAssemblyEntry, transformBoundContentValue,
|
|
|
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
|
-
import { Assembly, ContentfulContainer
|
|
7
|
+
import { Assembly, ContentfulContainer } from '@contentful/experiences-components-react';
|
|
8
8
|
import { resolvePattern } from '../../core/preview/assemblyUtils.js';
|
|
9
9
|
import { resolveMaybePrebindingDefaultValuePath } from '../../utils/prebindingUtils.js';
|
|
10
|
-
import PreviewUnboundImage from './PreviewUnboundImage.js';
|
|
11
10
|
import { parseComponentProps } from '../../utils/parseComponentProps.js';
|
|
12
11
|
|
|
13
12
|
const CompositionBlock = ({ node: rawNode, locale, entityStore, hyperlinkPattern, resolveDesignValue, getPatternChildNodeClassName, wrappingPatternIds: parentWrappingPatternIds = new Set(), wrappingParameters: parentWrappingParameters = {}, patternRootNodeIdsChain: parentPatternRootNodeIdsChain = '', }) => {
|
|
@@ -194,18 +193,9 @@ const CompositionBlock = ({ node: rawNode, locale, entityStore, hyperlinkPattern
|
|
|
194
193
|
: undefined, node: childNode, locale: locale, hyperlinkPattern: hyperlinkPattern, entityStore: entityStore, resolveDesignValue: resolveDesignValue, wrappingPatternIds: wrappingPatternIds, wrappingParameters: wrappingParameters, patternRootNodeIdsChain: patternRootNodeIdsChain }, index));
|
|
195
194
|
})
|
|
196
195
|
: null;
|
|
196
|
+
// TODO: we might be able to remove this special case as well by not dropping the two props in the sanitizeNodeProps function
|
|
197
197
|
if (isContainerOrSection(node.definitionId)) {
|
|
198
|
-
return (jsx(ContentfulContainer, {
|
|
199
|
-
}
|
|
200
|
-
if (node.definitionId === CONTENTFUL_COMPONENTS.columns.id) {
|
|
201
|
-
return (jsx(Columns, { editorMode: false, className: props.className, children: children }));
|
|
202
|
-
}
|
|
203
|
-
if (node.definitionId === CONTENTFUL_COMPONENTS.singleColumn.id) {
|
|
204
|
-
return (jsx(SingleColumn, { editorMode: false, className: props.className, children: children }));
|
|
205
|
-
}
|
|
206
|
-
if (node.definitionId === CONTENTFUL_COMPONENTS.image.id &&
|
|
207
|
-
node.variables.cfImageAsset?.type === 'UnboundValue') {
|
|
208
|
-
return (jsx(PreviewUnboundImage, { node: node, nodeProps: props, component: component, breakpoints: entityStore.breakpoints, patternRootNodeIdsChain: patternRootNodeIdsChain }));
|
|
198
|
+
return (jsx(ContentfulContainer, { cfHyperlink: contentProps.cfHyperlink, cfOpenInNewTab: contentProps.cfOpenInNewTab, className: props.className, children: children }));
|
|
209
199
|
}
|
|
210
200
|
return React.createElement(component, {
|
|
211
201
|
...sanitizeNodeProps(props),
|
|
@@ -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 { 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: 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 {\n ...sanitizeNodeProps(props),\n },\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":";;;;;;;;;;;;AAqDa,MAAA,gBAAgB,GAAG,CAAC,EAC/B,IAAI,EAAE,OAAO,EACb,MAAM,EACN,WAAW,EACX,gBAAgB,EAChB,kBAAkB,EAClB,4BAA4B,EAC5B,kBAAkB,EAAE,wBAAwB,GAAG,IAAI,GAAG,EAAE,EACxD,kBAAkB,EAAE,wBAAwB,GAAG,EAAE,EACjD,uBAAuB,EAAE,6BAA6B,GAAG,EAAE,GACrC,KAAI;AAC1B,IAAA,MAAM,aAAa,GAAG,OAAO,CAAC,MAAK;AACjC,QAAA,OAAO,mBAAmB,CAAC;YACzB,WAAW,EAAE,OAAO,CAAC,YAAY;YACjC,cAAc,EAAE,WAAW,CAAC,cAAc;AAC3C,SAAA,CAAC,CAAC;KACJ,EAAE,CAAC,WAAW,CAAC,cAAc,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC;AAEvD,IAAA,MAAM,cAAc,GAAG,OAAO,CAAC,MAAK;QAClC,OAAO,oBAAoB,CAAC,EAAE,MAAM,EAAE,WAAW,CAAC,qBAAqB,EAAsB,CAAC,CAAC;AACjG,KAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;AAElB,IAAA,MAAM,uBAAuB,GAAG,OAAO,CAAC,MAAK;QAC3C,IAAI,aAAa,EAAE;;AAEjB,YAAA,OAAO,GAAG,6BAA6B,CAAA,EAAG,OAAO,CAAC,EAAE,EAAE,CAAC;SACxD;AACD,QAAA,OAAO,6BAA6B,CAAC;KACtC,EAAE,CAAC,aAAa,EAAE,6BAA6B,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC;AAE/D,IAAA,MAAM,IAAI,GAAG,OAAO,CAAC,MAAK;QACxB,IAAI,aAAa,EAAE;AACjB,YAAA,OAAO,cAAc,CAAC;AACpB,gBAAA,IAAI,EAAE,OAAO;gBACb,WAAW;AACX,gBAAA,gBAAgB,EAAE,wBAAwB;gBAC1C,uBAAuB;AACxB,aAAA,CAAC,CAAC;SACJ;aAAM;AACL,YAAA,OAAO,OAAO,CAAC;SAChB;AACH,KAAC,EAAE,CAAC,WAAW,EAAE,aAAa,EAAE,OAAO,EAAE,wBAAwB,EAAE,uBAAuB,CAAC,CAAC,CAAC;AAE7F,IAAA,MAAM,kBAAkB,GAAG,OAAO,CAAC,MAAK;QACtC,IAAI,aAAa,EAAE;AACjB,YAAA,OAAO,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,GAAG,wBAAwB,CAAC,CAAC,CAAC;SAClE;AACD,QAAA,OAAO,wBAAwB,CAAC;KACjC,EAAE,CAAC,aAAa,EAAE,IAAI,EAAE,wBAAwB,CAAC,CAAC,CAAC;;;;AAKpD,IAAA,MAAM,kBAAkB,GAAG,OAAO,CAAC,MAAK;QACtC,IAAI,aAAa,EAAE;AACjB,YAAA,OAAO,EAAE,GAAG,wBAAwB,EAAE,IAAI,OAAO,CAAC,UAAU,IAAI,EAAE,CAAC,EAAE,CAAC;SACvE;AACD,QAAA,OAAO,wBAAwB,CAAC;KACjC,EAAE,CAAC,aAAa,EAAE,OAAO,EAAE,wBAAwB,CAAC,CAAC,CAAC;AAEvD,IAAA,MAAM,qBAAqB,GAAG,OAAO,CAAC,MAAK;QACzC,MAAM,YAAY,GAAG,wBAAwB,CAAC,IAAI,CAAC,YAAsB,CAAC,CAAC;AAE3E,QAAA,IAAI,aAAa,IAAI,CAAC,YAAY,EAAE;AAClC,YAAA,OAAO,0BAA0B,CAAC;gBAChC,YAAY,EAAE,IAAI,CAAC,YAAsB;AACzC,gBAAA,SAAS,EAAE,QAAQ;AACpB,aAAA,CAAC,CAAC;SACJ;AACD,QAAA,OAAO,YAAY,CAAC;KACrB,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;AAEvC,IAAA,MAAM,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC,MAAK;;AAEjE,QAAA,MAAM,oBAAoB,GAAG,IAAI,CAAC,SAAS,CAAC,cAAyC,CAAC;QACtF,MAAM,cAAc,GAAG,WAAW,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;QAClD,MAAM,cAAc,GAAG,oBAAoB,EAAE,kBAAkB,GAAG,cAAc,CAAC,EAAE,CAEtE,CAAC;;AAGd,QAAA,IAAI,CAAC,qBAAqB,IAAI,aAAa,EAAE;AAC3C,YAAA,MAAM,QAAQ,GAAG,EAAE,cAAc,EAAE,CAAC;AACpC,YAAA,MAAM,KAAK,GAAmC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;YAC5E,OAAO;gBACL,QAAQ;gBACR,KAAK;AACL,gBAAA,iBAAiB,EAAE,EAAE;aACtB,CAAC;SACH;AAED,QAAA,MAAM,QAAQ,GAAuC;AACnD,YAAA,cAAc,EACZ,IAAI,CAAC,EAAE,IAAI,4BAA4B;AACrC,kBAAE,4BAA4B,CAAC,IAAI,CAAC,EAAE,CAAC;AACvC,kBAAE,cAAc;SACrB,CAAC;AAEF,QAAA,MAAM,EACJ,YAAY,GAAG,EAAE,EACjB,UAAU,GAAG,EAAE,EACf,iBAAiB,GAAG,EAAE,EACtB,UAAU,GACX,GAAG,mBAAmB,CAAC;YACtB,WAAW,EAAE,WAAW,CAAC,WAAW;YACpC,cAAc;YACd,mBAAmB,EAAE,qBAAqB,CAAC,UAAU;YACrD,uBAAuB;YACvB,IAAI;YACJ,kBAAkB;YAClB,iBAAiB,EAAE,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,KAAI;AACzD,gBAAA,MAAM,GAAG,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;gBACzC,MAAM,eAAe,GAAG,WAAW,CAAC,UAAU,CAAC,IAAI,CAAsC,CAAC;gBAC1F,OAAO,0BAA0B,CAC/B,IAAI,CAAC,SAAS,EACd,WAAW,EACX,eAAe,EACf,kBAAkB,EAClB,YAAY,EACZ,QAAQ,EACR,OAAO,CAAC,IAAI,CACb,CAAC;aACH;AACD,YAAA,qBAAqB,EAAE,CAAC,EAAE,aAAa,EAAE,KAAI;gBAC3C,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;gBAC1D,MAAM,cAAc,GAAG,WAAW,CAAC,eAAe,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;AAE/E,gBAAA,OAAO,uBAAuB,CAC5B,qBAAqB,CAAC,UAAU,CAAC,gBAAgB;oBAC/C,gBAAgB;AAChB,oBAAA,yBAAyB,EAC3B,cAAuB,EACvB,MAAM,CACP,CAAC;aACH;YACD,mBAAmB,EAAE,CAAC,EAAE,UAAU,EAAE,YAAY,EAAE,KAAI;gBACpD,OAAO,WAAW,CAAC,aAAa,CAAC,UAAU,CAAC,EAAE,KAAK,IAAI,YAAY,CAAC;aACrE;AACD,YAAA,sBAAsB,EAAE,CAAC,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,iBAAiB,EAAE,KAAI;gBACpF,IAAI,cAAc,EAAE;oBAClB,MAAM,IAAI,GAAG,sCAAsC,CAAC;AAClD,wBAAA,iBAAiB,EAAE,UAAU;wBAC7B,WAAW;AACZ,qBAAA,CAAC,CAAC;oBAEH,IAAI,IAAI,EAAE;AACR,wBAAA,OAAO,iBAAiB,CAAC;4BACvB,YAAY;4BACZ,QAAQ;AACR,4BAAA,OAAO,EAAE;AACP,gCAAA,IAAI,EAAE,YAAY;gCAClB,IAAI;AACL,6BAAA;AACF,yBAAA,CAAC,CAAC;qBACJ;iBACF;aACF;AACF,SAAA,CAAC,CAAC;QAEH,MAAM,UAAU,GAA8B,EAAE,CAAC;AAEjD,QAAA,IAAI,qBAAqB,CAAC,UAAU,CAAC,KAAK,EAAE;YAC1C,KAAK,MAAM,MAAM,IAAI,qBAAqB,CAAC,UAAU,CAAC,KAAK,EAAE;AAC3D,gBAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC;gBACxE,IAAI,QAAQ,EAAE;AACZ,oBAAA,UAAU,CAAC,MAAM,CAAC,IAChBA,GAAA,CAAC,gBAAgB,EACf,EAAA,IAAI,EAAE,QAAQ,EACd,MAAM,EAAE,MAAM,EACd,gBAAgB,EAAE,gBAAgB,EAClC,WAAW,EAAE,WAAW,EACxB,kBAAkB,EAAE,kBAAkB,EACtC,kBAAkB,EAAE,kBAAkB,EACtC,kBAAkB,EAAE,kBAAkB,EACtC,uBAAuB,EAAE,uBAAuB,EAAA,CAChD,CACH,CAAC;iBACH;aACF;SACF;AAED,QAAA,MAAM,KAAK,GAAmC;AAC5C,YAAA,SAAS,EAAE,QAAQ,CAAC,cAAc,IAAI,UAAU,EAAE,SAAS;AAC3D,YAAA,GAAG,UAAU;AACb,YAAA,GAAG,YAAY;AACf,YAAA,GAAG,iBAAiB;AACpB,YAAA,GAAG,UAAU;SACd,CAAC;QAEF,OAAO;YACL,QAAQ;YACR,YAAY;YACZ,UAAU;YACV,UAAU;YACV,iBAAiB;YACjB,UAAU;YACV,KAAK;SACN,CAAC;AACJ,KAAC,EAAE;QACD,IAAI;QACJ,cAAc;QACd,WAAW;QACX,qBAAqB;QACrB,aAAa;QACb,4BAA4B;QAC5B,kBAAkB;QAClB,gBAAgB;QAChB,MAAM;QACN,kBAAkB;QAClB,kBAAkB;QAClB,uBAAuB;AACxB,KAAA,CAAC,CAAC;;AAGH,IAAA,mBAAmB,CAAC,QAAQ,CAAC,cAAc,GAAG,SAAS,GAAG,UAAU,EAAE,GAAG,CAAC,CAAC;IAE3E,IAAI,CAAC,qBAAqB,EAAE;AAC1B,QAAA,OAAO,IAAI,CAAC;KACb;;IAGD,IAAI,wBAAwB,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE;AACnD,QAAA,OAAO,IAAI,CAAC;KACb;AAED,IAAA,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,qBAAqB,CAAC;;AAGvD,IAAA,MAAM,6BAA6B,GAAG,CAAC,WAAmB,KAAI;QAC5D,IAAI,aAAa,EAAE;AACjB,YAAA,MAAM,YAAY,GAAG,CAAA,EAAG,uBAAuB,CAAI,CAAA,EAAA,WAAW,EAAE,CAAC;;YAEjE,MAAM,cAAc,GAA4B,IAAI,CAAC,SAAS,CAAC,cAAc,GAAG,YAAY,CAAC,CAAC;AAC9F,YAAA,IAAI,CAAC,cAAc;AAAE,gBAAA,OAAO,SAAS,CAAC;AACtC,YAAA,OAAO,kBAAkB,CAAC,cAAc,CAAC,kBAAkB,CAAW,CAAC;SACxE;AACD,QAAA,OAAO,4BAA4B,GAAG,WAAW,CAAC,CAAC;AACrD,KAAC,CAAC;IAEF,MAAM,QAAQ,GACZ,qBAAqB,CAAC,UAAU,CAAC,QAAQ,KAAK,IAAI;AAChD,UAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,SAA4B,EAAE,KAAK,KAAI;YACxD,QACEA,IAAC,gBAAgB,EAAA,EACf,4BAA4B,EAC1B,aAAa,IAAI,4BAA4B;AAC3C,sBAAE,6BAA6B;AAC/B,sBAAE,SAAS,EAEf,IAAI,EAAE,SAAS,EAEf,MAAM,EAAE,MAAM,EACd,gBAAgB,EAAE,gBAAgB,EAClC,WAAW,EAAE,WAAW,EACxB,kBAAkB,EAAE,kBAAkB,EACtC,kBAAkB,EAAE,kBAAkB,EACtC,kBAAkB,EAAE,kBAAkB,EACtC,uBAAuB,EAAE,uBAAuB,IAP3C,KAAK,CAQV,EACF;AACJ,SAAC,CAAC;UACF,IAAI,CAAC;AAEX,IAAA,IAAI,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE;AAC3C,QAAA,QACEA,GAAA,CAAC,mBAAmB,EAAA,EAClB,UAAU,EAAE,KAAK,EACjB,WAAW,EAAG,YAA2B,CAAC,WAAW,EACrD,cAAc,EAAG,YAA2B,CAAC,cAAc,EAC3D,SAAS,EAAE,KAAK,CAAC,SAA+B,EAAA,QAAA,EAC/C,QAAQ,EAAA,CACW,EACtB;KACH;IAED,IAAI,IAAI,CAAC,YAAY,KAAK,qBAAqB,CAAC,OAAO,CAAC,EAAE,EAAE;AAC1D,QAAA,QACEA,GAAC,CAAA,OAAO,EAAC,EAAA,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAA+B,YACzE,QAAQ,EAAA,CACD,EACV;KACH;IAED,IAAI,IAAI,CAAC,YAAY,KAAK,qBAAqB,CAAC,YAAY,CAAC,EAAE,EAAE;AAC/D,QAAA,QACEA,GAAC,CAAA,YAAY,EAAC,EAAA,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAA+B,YAC9E,QAAQ,EAAA,CACI,EACf;KACH;IAED,IACE,IAAI,CAAC,YAAY,KAAK,qBAAqB,CAAC,KAAK,CAAC,EAAE;QACpD,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,IAAI,KAAK,cAAc,EACpD;QACA,QACEA,GAAC,CAAA,mBAAmB,EAClB,EAAA,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,KAAK,EAChB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,CAAC,WAAW,EACpC,uBAAuB,EAAE,uBAAuB,EAChD,CAAA,EACF;KACH;AAED,IAAA,OAAO,KAAK,CAAC,aAAa,CACxB,SAAS,EACT;QACE,GAAG,iBAAiB,CAAC,KAAK,CAAC;KAC5B,EACD,QAAQ,KAAK,OAAO,KAAK,CAAC,QAAQ,KAAK,QAAQ,GAAG,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,CACzE,CAAC;AACJ,EAAE;AAEF,MAAM,oBAAoB,GAAG,CAC3B,gBAAwB,KAExB,CAAC,qBAAqB,CAAC,SAAS,CAAC,EAAE,EAAE,qBAAqB,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,QAAQ,CAC7E,gBAAiE,CAClE;;;;"}
|
|
1
|
+
{"version":3,"file":"CompositionBlock.js","sources":["../../../../src/blocks/preview/CompositionBlock.tsx"],"sourcesContent":["import React, { ReactNode, useMemo } from 'react';\nimport type { UnresolvedLink } from 'contentful';\nimport { 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 { Assembly, ContentfulContainer } from '@contentful/experiences-components-react';\nimport { resolvePattern } from '../../core/preview/assemblyUtils';\nimport { resolveMaybePrebindingDefaultValuePath } from '../../utils/prebindingUtils';\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: 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 // TODO: we might be able to remove this special case as well by not dropping the two props in the sanitizeNodeProps function\n if (isContainerOrSection(node.definitionId)) {\n return (\n <ContentfulContainer\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 return React.createElement(\n component,\n {\n ...sanitizeNodeProps(props),\n },\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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"}
|
|
@@ -5,7 +5,6 @@ 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';
|
|
9
8
|
|
|
10
9
|
const CssVarRegex = /var\(--[\w-]+\)/;
|
|
11
10
|
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\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"],"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\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"],"names":["builtInStyleDefinitions"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"assemblyUtils.js","sources":["../../../../src/core/preview/assemblyUtils.ts"],"sourcesContent":["import { EntityStore, mergeDesignValuesByBreakpoint } 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] = mergeDesignValuesByBreakpoint(\n defaultValue as DesignValue,\n instanceProperty,\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":";;;;;AAYA;AACmF;AACtE,MAAA,sBAAsB,GAAG,CAAC,EACrC,IAAI,EACJ,0BAA0B,EAC1B,iBAAiB,EACjB,UAAU,EACV,WAAW,GAOZ,KAAuB;IACtB,MAAM,SAAS,GAA2C,EAAE,CAAC;AAE7D,IAAA,KAAK,MAAM,CAAC,YAAY,EAAE,QAAQ,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;AACrE,QAAA,SAAS,CAAC,YAAY,CAAC,GAAG,QAAQ,CAAC;AACnC,QAAA,IAAI,QAAQ,CAAC,IAAI,KAAK,gBAAgB,EAAE;AACtC,YAAA,MAAM,iBAAiB,GAAG,QAAQ,CAAC,GAAG,CAAC;AACvC,YAAA,MAAM,gBAAgB,GAAG,0BAA0B,CAAC,iBAAiB,CAAC,CAAC;YACvE,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,mBAAmB,GAAG,iBAAiB,CAAC,CAAC;AACtF,YAAA,MAAM,YAAY,GAAG,kBAAkB,EAAE,YAAY,CAAC;YAEtD,MAAM,aAAa,GAAG,mBAAmB,CAAC;gBACxC,iBAAiB;gBACjB,iBAAiB;AACjB,gBAAA,UAAU,EAAE,UAAU;AACtB,gBAAA,QAAQ,EAAE,gBAAgB;AAC3B,aAAA,CAAC,CAAC;YACH,MAAM,IAAI,GAAG,qBAAqB,CAAC;gBACjC,iBAAiB;gBACjB,iBAAiB;AACjB,gBAAA,UAAU,EAAE,UAAU;gBACtB,WAAW;AACZ,aAAA,CAAC,CAAC;AAEH,YAAA,IAAI,aAAa,IAAI,IAAI,EAAE;gBACzB,SAAS,CAAC,YAAY,CAAC,GAAG;AACxB,oBAAA,IAAI,EAAE,YAAY;oBAClB,IAAI;iBACL,CAAC;;;aAIH;AAAM,iBAAA,IAAI,gBAAgB,EAAE,IAAI,KAAK,cAAc,EAAE;gBACpD,SAAS,CAAC,YAAY,CAAC,GAAG;AACxB,oBAAA,IAAI,EAAE,cAAc;oBACpB,GAAG,EAAE,gBAAgB,CAAC,GAAG;iBAC1B,CAAC;aACH;AAAM,iBAAA,IAAI,gBAAgB,EAAE,IAAI,KAAK,SAAS,EAAE;AAC/C,gBAAA,SAAS,CAAC,YAAY,CAAC,GAAG,gBAAgB,CAAC;aAC5C;AAAM,iBAAA,IAAI,gBAAgB,EAAE,IAAI,KAAK,YAAY,EAAE;gBAClD,SAAS,CAAC,YAAY,CAAC,GAAG;AACxB,oBAAA,IAAI,EAAE,YAAY;oBAClB,IAAI,EAAE,gBAAgB,CAAC,IAAI;iBAC5B,CAAC;aACH;AAAM,iBAAA,IAAI,gBAAgB,EAAE,IAAI,KAAK,gBAAgB,EAAE;gBACtD,SAAS,CAAC,YAAY,CAAC,GAAG;AACxB,oBAAA,IAAI,EAAE,gBAAgB;oBACtB,aAAa,EAAE,gBAAgB,CAAC,aAAa;iBAC9C,CAAC;aACH;AAAM,iBAAA,IAAI,gBAAgB,EAAE,IAAI,KAAK,aAAa,EAAE;gBACnD,SAAS,CAAC,YAAY,CAAC,GAAG,6BAA6B,CACrD,
|
|
1
|
+
{"version":3,"file":"assemblyUtils.js","sources":["../../../../src/core/preview/assemblyUtils.ts"],"sourcesContent":["import { EntityStore, mergeDesignValuesByBreakpoint } 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] = mergeDesignValuesByBreakpoint(\n defaultValue as DesignValue | undefined,\n instanceProperty,\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/core/sdkFeatures.js
CHANGED
|
@@ -6,6 +6,8 @@ const sdkFeatures = {
|
|
|
6
6
|
patternResolution: true,
|
|
7
7
|
// [SPA-2602] allow merging the default and overwriting design values for patterns by breakpoint
|
|
8
8
|
patternBreakpointDesignValues: true,
|
|
9
|
+
// DND is moving to the host application enabling smoother native event handling
|
|
10
|
+
dndMigration: true,
|
|
9
11
|
};
|
|
10
12
|
|
|
11
13
|
export { sdkFeatures };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sdkFeatures.js","sources":["../../../src/core/sdkFeatures.ts"],"sourcesContent":["// Object to store the SDK features that are enabled/disabled\nexport const sdkFeatures: Record<string, unknown> = {\n hasSDKVersionUI: true,\n hasVersionHistory: true,\n cfVisibility: true,\n patternResolution: true,\n // [SPA-2602] allow merging the default and overwriting design values for patterns by breakpoint\n patternBreakpointDesignValues: true,\n};\n"],"names":[],"mappings":"AAAA;AACa,MAAA,WAAW,GAA4B;AAClD,IAAA,eAAe,EAAE,IAAI;AACrB,IAAA,iBAAiB,EAAE,IAAI;AACvB,IAAA,YAAY,EAAE,IAAI;AAClB,IAAA,iBAAiB,EAAE,IAAI;;AAEvB,IAAA,6BAA6B,EAAE,IAAI;;;;;"}
|
|
1
|
+
{"version":3,"file":"sdkFeatures.js","sources":["../../../src/core/sdkFeatures.ts"],"sourcesContent":["// Object to store the SDK features that are enabled/disabled\nexport const sdkFeatures: Record<string, unknown> = {\n hasSDKVersionUI: true,\n hasVersionHistory: true,\n cfVisibility: true,\n patternResolution: true,\n // [SPA-2602] allow merging the default and overwriting design values for patterns by breakpoint\n patternBreakpointDesignValues: true,\n // DND is moving to the host application enabling smoother native event handling\n dndMigration: true,\n};\n"],"names":[],"mappings":"AAAA;AACa,MAAA,WAAW,GAA4B;AAClD,IAAA,eAAe,EAAE,IAAI;AACrB,IAAA,iBAAiB,EAAE,IAAI;AACvB,IAAA,YAAY,EAAE,IAAI;AAClB,IAAA,iBAAiB,EAAE,IAAI;;AAEvB,IAAA,6BAA6B,EAAE,IAAI;;AAEnC,IAAA,YAAY,EAAE,IAAI;;;;;"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { toMediaQuery } from '@contentful/experiences-core';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Takes the CSS code for each breakpoint and merges them into a single CSS string.
|
|
5
|
+
* It will wrap each breakpoint's CSS code in a media query (exception: default breakpoint with '*').
|
|
6
|
+
*
|
|
7
|
+
* **Example Input:**
|
|
8
|
+
* ```
|
|
9
|
+
* [
|
|
10
|
+
* { className: 'cfstyles-123', breakpointCondition: '*', css: 'color:red;' },
|
|
11
|
+
* { className: 'cfstyles-456', breakpointCondition: '<768px', css: 'color:blue;' },
|
|
12
|
+
* ]
|
|
13
|
+
* ```
|
|
14
|
+
*
|
|
15
|
+
* **Example Output:**
|
|
16
|
+
* ```
|
|
17
|
+
* '.cfstyles-123{color:red;}@media(max-width:768px){.cfstyles-456{color:blue;}}'
|
|
18
|
+
* ```
|
|
19
|
+
*/
|
|
20
|
+
const convertResolvedDesignValuesToMediaQuery = (stylesheetData) => {
|
|
21
|
+
const stylesheet = stylesheetData.reduce((acc, { breakpointCondition, className, css }) => {
|
|
22
|
+
if (acc.classNames.includes(className)) {
|
|
23
|
+
return acc;
|
|
24
|
+
}
|
|
25
|
+
const mediaQueryCss = toMediaQuery({
|
|
26
|
+
condition: breakpointCondition,
|
|
27
|
+
cssByClassName: { [className]: css },
|
|
28
|
+
});
|
|
29
|
+
return {
|
|
30
|
+
classNames: [...acc.classNames, className],
|
|
31
|
+
css: `${acc.css}${mediaQueryCss}`,
|
|
32
|
+
};
|
|
33
|
+
}, {
|
|
34
|
+
classNames: [],
|
|
35
|
+
css: '',
|
|
36
|
+
});
|
|
37
|
+
return {
|
|
38
|
+
css: stylesheet.css,
|
|
39
|
+
className: stylesheet.classNames.join(' '),
|
|
40
|
+
};
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
export { convertResolvedDesignValuesToMediaQuery };
|
|
44
|
+
//# sourceMappingURL=convertResolvedDesignValuesToMediaQuery.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"convertResolvedDesignValuesToMediaQuery.js","sources":["../../../../src/core/styles/convertResolvedDesignValuesToMediaQuery.ts"],"sourcesContent":["import { toMediaQuery } from '@contentful/experiences-core';\nimport { ResolvedStylesheetData } from './createStylesheetsForBuiltInStyles';\n\n/**\n * Takes the CSS code for each breakpoint and merges them into a single CSS string.\n * It will wrap each breakpoint's CSS code in a media query (exception: default breakpoint with '*').\n *\n * **Example Input:**\n * ```\n * [\n * { className: 'cfstyles-123', breakpointCondition: '*', css: 'color:red;' },\n * { className: 'cfstyles-456', breakpointCondition: '<768px', css: 'color:blue;' },\n * ]\n * ```\n *\n * **Example Output:**\n * ```\n * '.cfstyles-123{color:red;}@media(max-width:768px){.cfstyles-456{color:blue;}}'\n * ```\n */\nexport const convertResolvedDesignValuesToMediaQuery = (stylesheetData: ResolvedStylesheetData) => {\n const stylesheet = stylesheetData.reduce(\n (acc, { breakpointCondition, className, css }) => {\n if (acc.classNames.includes(className)) {\n return acc;\n }\n\n const mediaQueryCss = toMediaQuery({\n condition: breakpointCondition,\n cssByClassName: { [className]: css },\n });\n return {\n classNames: [...acc.classNames, className],\n css: `${acc.css}${mediaQueryCss}`,\n };\n },\n {\n classNames: [] as string[],\n css: '',\n },\n );\n\n return {\n css: stylesheet.css,\n className: stylesheet.classNames.join(' '),\n };\n};\n"],"names":[],"mappings":";;AAGA;;;;;;;;;;;;;;;;AAgBG;AACU,MAAA,uCAAuC,GAAG,CAAC,cAAsC,KAAI;AAChG,IAAA,MAAM,UAAU,GAAG,cAAc,CAAC,MAAM,CACtC,CAAC,GAAG,EAAE,EAAE,mBAAmB,EAAE,SAAS,EAAE,GAAG,EAAE,KAAI;QAC/C,IAAI,GAAG,CAAC,UAAU,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE;AACtC,YAAA,OAAO,GAAG,CAAC;SACZ;QAED,MAAM,aAAa,GAAG,YAAY,CAAC;AACjC,YAAA,SAAS,EAAE,mBAAmB;AAC9B,YAAA,cAAc,EAAE,EAAE,CAAC,SAAS,GAAG,GAAG,EAAE;AACrC,SAAA,CAAC,CAAC;QACH,OAAO;YACL,UAAU,EAAE,CAAC,GAAG,GAAG,CAAC,UAAU,EAAE,SAAS,CAAC;AAC1C,YAAA,GAAG,EAAE,CAAG,EAAA,GAAG,CAAC,GAAG,CAAA,EAAG,aAAa,CAAE,CAAA;SAClC,CAAC;AACJ,KAAC,EACD;AACE,QAAA,UAAU,EAAE,EAAc;AAC1B,QAAA,GAAG,EAAE,EAAE;AACR,KAAA,CACF,CAAC;IAEF,OAAO;QACL,GAAG,EAAE,UAAU,CAAC,GAAG;QACnB,SAAS,EAAE,UAAU,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC;KAC3C,CAAC;AACJ;;;;"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import { flattenDesignTokenRegistry, designTokensRegistry, maybePopulateDesignTokenValue, transformVisibility, stringifyCssProperties, addMinHeightForEmptyStructures, buildCfStyles
|
|
1
|
+
import { flattenDesignTokenRegistry, designTokensRegistry, maybePopulateDesignTokenValue, transformVisibility, stringifyCssProperties, addMinHeightForEmptyStructures, buildCfStyles } from '@contentful/experiences-core';
|
|
2
2
|
import md5 from 'md5';
|
|
3
|
-
import { useMemo } from 'react';
|
|
4
3
|
|
|
5
4
|
/**
|
|
6
5
|
* For each provided breakpoint, create the CSS code and a unique class name.
|
|
@@ -73,62 +72,6 @@ const createStylesheetsForBuiltInStyles = ({ designPropertiesByBreakpoint, break
|
|
|
73
72
|
}
|
|
74
73
|
return result;
|
|
75
74
|
};
|
|
76
|
-
/**
|
|
77
|
-
* Takes the CSS code for each breakpoint and merges them into a single CSS string.
|
|
78
|
-
* It will wrap each breakpoint's CSS code in a media query (exception: default breakpoint with '*').
|
|
79
|
-
*
|
|
80
|
-
* **Example Input:**
|
|
81
|
-
* ```
|
|
82
|
-
* [
|
|
83
|
-
* { className: 'cfstyles-123', breakpointCondition: '*', css: 'color:red;', visibilityCss: 'display:none !important;' },
|
|
84
|
-
* { className: 'cfstyles-456', breakpointCondition: '<768px', css: 'color:blue;' },
|
|
85
|
-
* ]
|
|
86
|
-
* ```
|
|
87
|
-
*
|
|
88
|
-
* **Example Output:**
|
|
89
|
-
* ```
|
|
90
|
-
* '.cfstyles-123{color:red;}@media not (max-width:768px){.cfstyles-123{display:none !important;}}@media(max-width:768px){.cfstyles-456{color:blue;}}'
|
|
91
|
-
* ```
|
|
92
|
-
*/
|
|
93
|
-
const convertResolvedDesignValuesToMediaQuery = (stylesheetData) => {
|
|
94
|
-
const stylesheet = stylesheetData.reduce((acc, { breakpointCondition, className, css, visibilityCss }, index) => {
|
|
95
|
-
if (acc.classNames.includes(className)) {
|
|
96
|
-
return acc;
|
|
97
|
-
}
|
|
98
|
-
const mediaQueryCss = toMediaQuery({
|
|
99
|
-
condition: breakpointCondition,
|
|
100
|
-
cssByClassName: { [className]: css },
|
|
101
|
-
});
|
|
102
|
-
const visibilityMediaQueryCss = toMediaQuery({
|
|
103
|
-
condition: breakpointCondition,
|
|
104
|
-
cssByClassName: { [className]: visibilityCss ?? '' },
|
|
105
|
-
// Validation ensures that it starts with the '*' breakpoint
|
|
106
|
-
nextCondition: stylesheetData[index + 1]?.breakpointCondition,
|
|
107
|
-
});
|
|
108
|
-
return {
|
|
109
|
-
classNames: [...acc.classNames, className],
|
|
110
|
-
css: `${acc.css}${mediaQueryCss}${visibilityMediaQueryCss}`,
|
|
111
|
-
};
|
|
112
|
-
}, {
|
|
113
|
-
classNames: [],
|
|
114
|
-
css: '',
|
|
115
|
-
});
|
|
116
|
-
return {
|
|
117
|
-
css: stylesheet.css,
|
|
118
|
-
className: stylesheet.classNames.join(' '),
|
|
119
|
-
};
|
|
120
|
-
};
|
|
121
|
-
const useMediaQuery = ({ designPropertiesByBreakpoint, breakpoints, node, patternRootNodeIdsChain, }) => {
|
|
122
|
-
return useMemo(() => {
|
|
123
|
-
const stylesheetData = createStylesheetsForBuiltInStyles({
|
|
124
|
-
designPropertiesByBreakpoint,
|
|
125
|
-
breakpoints,
|
|
126
|
-
node,
|
|
127
|
-
patternRootNodeIdsChain,
|
|
128
|
-
});
|
|
129
|
-
return convertResolvedDesignValuesToMediaQuery(stylesheetData);
|
|
130
|
-
}, [designPropertiesByBreakpoint, breakpoints, node, patternRootNodeIdsChain]);
|
|
131
|
-
};
|
|
132
75
|
|
|
133
|
-
export {
|
|
134
|
-
//# sourceMappingURL=
|
|
76
|
+
export { createStylesheetsForBuiltInStyles };
|
|
77
|
+
//# sourceMappingURL=createStylesheetsForBuiltInStyles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createStylesheetsForBuiltInStyles.js","sources":["../../../../src/core/styles/createStylesheetsForBuiltInStyles.ts"],"sourcesContent":["import {\n addMinHeightForEmptyStructures,\n designTokensRegistry,\n flattenDesignTokenRegistry,\n maybePopulateDesignTokenValue,\n stringifyCssProperties,\n buildCfStyles,\n transformVisibility,\n} from '@contentful/experiences-core';\nimport { Breakpoint, ComponentTreeNode, PrimitiveValue } from '@contentful/experiences-core/types';\nimport md5 from 'md5';\n\nexport type ResolvedStylesheetData = Array<{\n className: string;\n breakpointCondition: string;\n css: string;\n visibilityCss?: string;\n}>;\n\n/**\n * For each provided breakpoint, create the CSS code and a unique class name.\n *\n * **Example Output:**\n * ```\n * [\n * { className: 'cfstyles-123', breakpointCondition: '*', css: 'margin:42px;' },\n * { className: 'cfstyles-456', breakpointCondition: '<768px', css: 'margin:13px;' },\n * ]\n * ```\n */\nexport const createStylesheetsForBuiltInStyles = ({\n designPropertiesByBreakpoint,\n breakpoints,\n node,\n patternRootNodeIdsChain,\n}: {\n designPropertiesByBreakpoint: Record<string, Record<string, PrimitiveValue>>;\n breakpoints: Breakpoint[];\n node: ComponentTreeNode;\n patternRootNodeIdsChain?: string;\n}): ResolvedStylesheetData => {\n const flattenedDesignTokens = flattenDesignTokenRegistry(designTokensRegistry);\n\n // When the node is hidden for any breakpoint, we need to handle this separately with a disjunct media query.\n const isAnyVisibilityValueHidden = Object.values(designPropertiesByBreakpoint).some(\n (designProperties) => designProperties.cfVisibility === false,\n );\n // We always need an explicit value when using disjunct media queries\n // Example: desktop uses \"false\" and tablet is undefined -> we need to set `display: none` for tablet as well.\n let previousVisibilityValue: boolean | undefined;\n\n const result: Array<{\n className: string;\n breakpointCondition: string;\n css: string;\n visibilityCss?: string;\n }> = [];\n\n for (const breakpoint of breakpoints) {\n let visibilityCss: string | undefined;\n const designProperties = designPropertiesByBreakpoint[breakpoint.id];\n if (!designProperties) {\n continue;\n }\n\n const designPropertiesWithResolvedDesignTokens = Object.entries(designProperties).reduce(\n (acc, [propertyName, value]) => ({\n ...acc,\n [propertyName]: maybePopulateDesignTokenValue(\n propertyName,\n value,\n flattenedDesignTokens,\n ) as string,\n }),\n {} as Record<string, PrimitiveValue>,\n );\n /* [Data Format] `designPropertiesWithResolvedDesignTokens` is a map of property name to plain design value:\n * designPropertiesWithResolvedDesignTokens = {\n * cfMargin: '42px',\n * cfBackgroundColor: 'rgba(246, 246, 246, 1)',\n * }\n */\n\n // Special case for visibility to override any custom `display` values but only for a specific breakpoint.\n if (isAnyVisibilityValueHidden) {\n const visibilityValue =\n (designPropertiesWithResolvedDesignTokens.cfVisibility as boolean | undefined) ??\n previousVisibilityValue;\n previousVisibilityValue = visibilityValue;\n const visibilityStyles = transformVisibility(visibilityValue);\n visibilityCss = stringifyCssProperties(visibilityStyles);\n }\n\n // Convert CF-specific property names to CSS variables, e.g. `cfMargin` -> `margin`\n const cfStyles = addMinHeightForEmptyStructures(\n buildCfStyles(designPropertiesWithResolvedDesignTokens),\n node,\n );\n /* [Data Format] `cfStyles` follows the shape of CSSProperties (camelCased CSS property names):\n * cfStyles = {\n * margin: '42px',\n * backgroundColor: 'rgba(246, 246, 246, 1)',\n * }\n */\n\n // Translate the map of CSSProperties into the final shape of CSS code for this specific breakpoint\n const breakpointCss = stringifyCssProperties(cfStyles);\n /* [Data Format] `breakpointCss`:\n * breakpointCss = \"margin:42px;background-color:rgba(246, 246, 246, 1);\"\n */\n\n // Create a hash ensuring stability across nodes (and breakpoints between nodes)\n const styleHash = patternRootNodeIdsChain\n ? md5(`${patternRootNodeIdsChain}-${node.id}}-${breakpointCss}`)\n : md5(`${node.id}-${breakpointCss}`);\n\n // Create a CSS className with internal prefix to make sure the value can be processed\n const className = `cfstyles-${styleHash}`;\n\n result.push({\n className,\n breakpointCondition: breakpoint.query,\n css: breakpointCss,\n visibilityCss,\n });\n }\n\n return result;\n};\n"],"names":[],"mappings":";;;AAmBA;;;;;;;;;;AAUG;AACI,MAAM,iCAAiC,GAAG,CAAC,EAChD,4BAA4B,EAC5B,WAAW,EACX,IAAI,EACJ,uBAAuB,GAMxB,KAA4B;AAC3B,IAAA,MAAM,qBAAqB,GAAG,0BAA0B,CAAC,oBAAoB,CAAC,CAAC;;IAG/E,MAAM,0BAA0B,GAAG,MAAM,CAAC,MAAM,CAAC,4BAA4B,CAAC,CAAC,IAAI,CACjF,CAAC,gBAAgB,KAAK,gBAAgB,CAAC,YAAY,KAAK,KAAK,CAC9D,CAAC;;;AAGF,IAAA,IAAI,uBAA4C,CAAC;IAEjD,MAAM,MAAM,GAKP,EAAE,CAAC;AAER,IAAA,KAAK,MAAM,UAAU,IAAI,WAAW,EAAE;AACpC,QAAA,IAAI,aAAiC,CAAC;QACtC,MAAM,gBAAgB,GAAG,4BAA4B,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;QACrE,IAAI,CAAC,gBAAgB,EAAE;YACrB,SAAS;SACV;QAED,MAAM,wCAAwC,GAAG,MAAM,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,MAAM,CACtF,CAAC,GAAG,EAAE,CAAC,YAAY,EAAE,KAAK,CAAC,MAAM;AAC/B,YAAA,GAAG,GAAG;YACN,CAAC,YAAY,GAAG,6BAA6B,CAC3C,YAAY,EACZ,KAAK,EACL,qBAAqB,CACZ;SACZ,CAAC,EACF,EAAoC,CACrC,CAAC;AACF;;;;;AAKG;;QAGH,IAAI,0BAA0B,EAAE;AAC9B,YAAA,MAAM,eAAe,GAClB,wCAAwC,CAAC,YAAoC;AAC9E,gBAAA,uBAAuB,CAAC;YAC1B,uBAAuB,GAAG,eAAe,CAAC;AAC1C,YAAA,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,eAAe,CAAC,CAAC;AAC9D,YAAA,aAAa,GAAG,sBAAsB,CAAC,gBAAgB,CAAC,CAAC;SAC1D;;QAGD,MAAM,QAAQ,GAAG,8BAA8B,CAC7C,aAAa,CAAC,wCAAwC,CAAC,EACvD,IAAI,CACL,CAAC;AACF;;;;;AAKG;;AAGH,QAAA,MAAM,aAAa,GAAG,sBAAsB,CAAC,QAAQ,CAAC,CAAC;AACvD;;AAEG;;QAGH,MAAM,SAAS,GAAG,uBAAuB;AACvC,cAAE,GAAG,CAAC,CAAA,EAAG,uBAAuB,CAAA,CAAA,EAAI,IAAI,CAAC,EAAE,CAAA,EAAA,EAAK,aAAa,CAAA,CAAE,CAAC;cAC9D,GAAG,CAAC,CAAG,EAAA,IAAI,CAAC,EAAE,CAAI,CAAA,EAAA,aAAa,CAAE,CAAA,CAAC,CAAC;;AAGvC,QAAA,MAAM,SAAS,GAAG,CAAY,SAAA,EAAA,SAAS,EAAE,CAAC;QAE1C,MAAM,CAAC,IAAI,CAAC;YACV,SAAS;YACT,mBAAmB,EAAE,UAAU,CAAC,KAAK;AACrC,YAAA,GAAG,EAAE,aAAa;YAClB,aAAa;AACd,SAAA,CAAC,CAAC;KACJ;AAED,IAAA,OAAO,MAAM,CAAC;AAChB;;;;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -9,7 +9,7 @@ import * as _contentful_experiences_core_constants from '@contentful/experiences
|
|
|
9
9
|
export { CF_STYLE_ATTRIBUTES, CONTENTFUL_COMPONENTS, LATEST_SCHEMA_VERSION } from '@contentful/experiences-core/constants';
|
|
10
10
|
import { ContentfulClientApi } from 'contentful';
|
|
11
11
|
|
|
12
|
-
declare const SDK_VERSION = "2.0.0-prerelease-
|
|
12
|
+
declare const SDK_VERSION = "2.0.0-prerelease-20250704T1603-11d76eb.0";
|
|
13
13
|
|
|
14
14
|
type ExperienceRootProps = {
|
|
15
15
|
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 = '2.0.0-prerelease-
|
|
1
|
+
{"version":3,"file":"sdkVersion.js","sources":["../../src/sdkVersion.ts"],"sourcesContent":["export const SDK_VERSION = '2.0.0-prerelease-20250704T1603-11d76eb.0';\n"],"names":[],"mappings":"AAAO,MAAM,WAAW,GAAG;;;;"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import type { ComponentRegistration, ComponentRegistrationOptions } from '@contentful/experiences-core/types';
|
|
2
|
-
import '@contentful/experiences-components-react/dist/index.css';
|
|
3
2
|
export declare const enrichComponentDefinition: ({ component, definition, options, }: ComponentRegistration) => ComponentRegistration;
|
|
4
3
|
export declare const componentRegistry: Map<string, ComponentRegistration>;
|
|
5
4
|
export declare const optionalBuiltInComponents: string[];
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { ResolvedStylesheetData } from './createStylesheetsForBuiltInStyles';
|
|
2
|
+
/**
|
|
3
|
+
* Takes the CSS code for each breakpoint and merges them into a single CSS string.
|
|
4
|
+
* It will wrap each breakpoint's CSS code in a media query (exception: default breakpoint with '*').
|
|
5
|
+
*
|
|
6
|
+
* **Example Input:**
|
|
7
|
+
* ```
|
|
8
|
+
* [
|
|
9
|
+
* { className: 'cfstyles-123', breakpointCondition: '*', css: 'color:red;' },
|
|
10
|
+
* { className: 'cfstyles-456', breakpointCondition: '<768px', css: 'color:blue;' },
|
|
11
|
+
* ]
|
|
12
|
+
* ```
|
|
13
|
+
*
|
|
14
|
+
* **Example Output:**
|
|
15
|
+
* ```
|
|
16
|
+
* '.cfstyles-123{color:red;}@media(max-width:768px){.cfstyles-456{color:blue;}}'
|
|
17
|
+
* ```
|
|
18
|
+
*/
|
|
19
|
+
export declare const convertResolvedDesignValuesToMediaQuery: (stylesheetData: ResolvedStylesheetData) => {
|
|
20
|
+
css: string;
|
|
21
|
+
className: string;
|
|
22
|
+
};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { Breakpoint, ComponentTreeNode, PrimitiveValue } from '@contentful/experiences-core/types';
|
|
2
|
+
export type ResolvedStylesheetData = Array<{
|
|
3
|
+
className: string;
|
|
4
|
+
breakpointCondition: string;
|
|
5
|
+
css: string;
|
|
6
|
+
visibilityCss?: string;
|
|
7
|
+
}>;
|
|
8
|
+
/**
|
|
9
|
+
* For each provided breakpoint, create the CSS code and a unique class name.
|
|
10
|
+
*
|
|
11
|
+
* **Example Output:**
|
|
12
|
+
* ```
|
|
13
|
+
* [
|
|
14
|
+
* { className: 'cfstyles-123', breakpointCondition: '*', css: 'margin:42px;' },
|
|
15
|
+
* { className: 'cfstyles-456', breakpointCondition: '<768px', css: 'margin:13px;' },
|
|
16
|
+
* ]
|
|
17
|
+
* ```
|
|
18
|
+
*/
|
|
19
|
+
export declare const createStylesheetsForBuiltInStyles: ({ designPropertiesByBreakpoint, breakpoints, node, patternRootNodeIdsChain, }: {
|
|
20
|
+
designPropertiesByBreakpoint: Record<string, Record<string, PrimitiveValue>>;
|
|
21
|
+
breakpoints: Breakpoint[];
|
|
22
|
+
node: ComponentTreeNode;
|
|
23
|
+
patternRootNodeIdsChain?: string;
|
|
24
|
+
}) => ResolvedStylesheetData;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/src/sdkVersion.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const SDK_VERSION = "2.0.0-prerelease-
|
|
1
|
+
export declare const SDK_VERSION = "2.0.0-prerelease-20250704T1603-11d76eb.0";
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { debug, isCfStyleAttribute } from '@contentful/experiences-core';
|
|
2
|
-
import {
|
|
2
|
+
import { convertResolvedDesignValuesToMediaQuery } from '../core/styles/convertResolvedDesignValuesToMediaQuery.js';
|
|
3
|
+
import { createStylesheetsForBuiltInStyles } from '../core/styles/createStylesheetsForBuiltInStyles.js';
|
|
3
4
|
|
|
4
5
|
// TODO: Test this for nested patterns as the name might be just a random hash without the actual name (needs to be validated).
|
|
5
6
|
const isSpecialCaseCssProp = (propName) => {
|
|
@@ -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 */\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
|
+
{"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 '../core/styles/convertResolvedDesignValuesToMediaQuery';\nimport { createStylesheetsForBuiltInStyles } from '../core/styles/createStylesheetsForBuiltInStyles';\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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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/experiences-sdk-react",
|
|
3
|
-
"version": "2.0.0-prerelease-
|
|
3
|
+
"version": "2.0.0-prerelease-20250704T1603-11d76eb.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": "2.0.0-prerelease-
|
|
45
|
-
"@contentful/experiences-core": "2.0.0-prerelease-
|
|
46
|
-
"@contentful/experiences-validators": "2.0.0-prerelease-
|
|
47
|
-
"@contentful/experiences-visual-editor-react": "2.0.0-prerelease-
|
|
44
|
+
"@contentful/experiences-components-react": "2.0.0-prerelease-20250704T1603-11d76eb.0",
|
|
45
|
+
"@contentful/experiences-core": "2.0.0-prerelease-20250704T1603-11d76eb.0",
|
|
46
|
+
"@contentful/experiences-validators": "2.0.0-prerelease-20250704T1603-11d76eb.0",
|
|
47
|
+
"@contentful/experiences-visual-editor-react": "2.0.0-prerelease-20250704T1603-11d76eb.0",
|
|
48
48
|
"@contentful/rich-text-types": "^17.0.0",
|
|
49
49
|
"classnames": "^2.3.2",
|
|
50
50
|
"csstype": "^3.1.2",
|
|
@@ -81,7 +81,6 @@
|
|
|
81
81
|
"relative-deps": "^1.0.7",
|
|
82
82
|
"rollup-plugin-dts": "^6.1.0",
|
|
83
83
|
"rollup-plugin-node-externals": "^7.0.1",
|
|
84
|
-
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
85
84
|
"rollup-plugin-preserve-directives": "^0.4.0",
|
|
86
85
|
"semantic-release": "23.0.2",
|
|
87
86
|
"ts-jest": "^29.1.0",
|
|
@@ -100,5 +99,5 @@
|
|
|
100
99
|
"dist",
|
|
101
100
|
"package.json"
|
|
102
101
|
],
|
|
103
|
-
"gitHead": "
|
|
102
|
+
"gitHead": "5e270693551988015ff54cf4931f6c07187fc3fb"
|
|
104
103
|
}
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import React, { useMemo } from 'react';
|
|
3
|
-
import { sanitizeNodeProps } from '@contentful/experiences-core';
|
|
4
|
-
import { useMediaQuery } from '../../hooks/useMediaQuery.js';
|
|
5
|
-
import { useInjectStylesheet } from '../../hooks/useInjectStylesheet.js';
|
|
6
|
-
import classNames from 'classnames';
|
|
7
|
-
|
|
8
|
-
/**
|
|
9
|
-
* This component is used to render a placeholder Image component in the preview
|
|
10
|
-
* when the image is unbound. It applies the Image size styles to a wrapping div.
|
|
11
|
-
*/
|
|
12
|
-
const PreviewUnboundImage = ({ breakpoints, node, nodeProps, component, patternRootNodeIdsChain, }) => {
|
|
13
|
-
const { wrapperStyle, imageStyle } = useMemo(() => {
|
|
14
|
-
const imageStyle = {};
|
|
15
|
-
const wrapperStyle = {};
|
|
16
|
-
if (nodeProps.cfImageOptions && typeof nodeProps.cfImageOptions === 'object') {
|
|
17
|
-
for (const [breakpointId, styles] of Object.entries(nodeProps.cfImageOptions)) {
|
|
18
|
-
imageStyle[breakpointId] = {
|
|
19
|
-
cfImageOptions: {
|
|
20
|
-
...styles,
|
|
21
|
-
height: '100%',
|
|
22
|
-
width: '100%',
|
|
23
|
-
},
|
|
24
|
-
};
|
|
25
|
-
wrapperStyle[breakpointId] = {
|
|
26
|
-
cfHeight: styles.height,
|
|
27
|
-
cfWidth: styles.width,
|
|
28
|
-
};
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
return { imageStyle, wrapperStyle };
|
|
32
|
-
}, [nodeProps.cfImageOptions]);
|
|
33
|
-
const wrapperMedia = useMediaQuery({
|
|
34
|
-
designPropertiesByBreakpoint: wrapperStyle,
|
|
35
|
-
node,
|
|
36
|
-
breakpoints,
|
|
37
|
-
patternRootNodeIdsChain,
|
|
38
|
-
});
|
|
39
|
-
const imageMedia = useMediaQuery({
|
|
40
|
-
designPropertiesByBreakpoint: imageStyle,
|
|
41
|
-
node,
|
|
42
|
-
breakpoints,
|
|
43
|
-
patternRootNodeIdsChain,
|
|
44
|
-
});
|
|
45
|
-
useInjectStylesheet(wrapperMedia.css);
|
|
46
|
-
useInjectStylesheet(imageMedia.css);
|
|
47
|
-
return (jsx("div", { className: classNames('cf-preview-unbound-image', wrapperMedia.className), children: React.createElement(component, {
|
|
48
|
-
...sanitizeNodeProps(nodeProps),
|
|
49
|
-
className: classNames(nodeProps.className, imageMedia.className),
|
|
50
|
-
}) }));
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
export { PreviewUnboundImage as default };
|
|
54
|
-
//# sourceMappingURL=PreviewUnboundImage.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PreviewUnboundImage.js","sources":["../../../../src/blocks/preview/PreviewUnboundImage.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport type {\n Breakpoint,\n ComponentTreeNode,\n PrimitiveValue,\n} from '@contentful/experiences-core/types';\nimport { sanitizeNodeProps } from '@contentful/experiences-core';\nimport { useMediaQuery } from '../../hooks/useMediaQuery';\nimport { useInjectStylesheet } from '../../hooks/useInjectStylesheet';\nimport classNames from 'classnames';\n\ntype PreviewUnboundImageProps = {\n breakpoints: Breakpoint[];\n node: ComponentTreeNode;\n nodeProps: Record<PropertyKey, PrimitiveValue>;\n component: React.ElementType;\n patternRootNodeIdsChain: string;\n};\n\n/**\n * This component is used to render a placeholder Image component in the preview\n * when the image is unbound. It applies the Image size styles to a wrapping div.\n */\nconst PreviewUnboundImage: React.FC<PreviewUnboundImageProps> = ({\n breakpoints,\n node,\n nodeProps,\n component,\n patternRootNodeIdsChain,\n}) => {\n const { wrapperStyle, imageStyle } = useMemo(() => {\n const imageStyle: Record<string, any> = {};\n const wrapperStyle: Record<string, any> = {};\n\n if (nodeProps.cfImageOptions && typeof nodeProps.cfImageOptions === 'object') {\n for (const [breakpointId, styles] of Object.entries(nodeProps.cfImageOptions)) {\n imageStyle[breakpointId] = {\n cfImageOptions: {\n ...styles,\n height: '100%',\n width: '100%',\n },\n };\n\n wrapperStyle[breakpointId] = {\n cfHeight: styles.height,\n cfWidth: styles.width,\n };\n }\n }\n\n return { imageStyle, wrapperStyle };\n }, [nodeProps.cfImageOptions]);\n\n const wrapperMedia = useMediaQuery({\n designPropertiesByBreakpoint: wrapperStyle,\n node,\n breakpoints,\n patternRootNodeIdsChain,\n });\n\n const imageMedia = useMediaQuery({\n designPropertiesByBreakpoint: imageStyle,\n node,\n breakpoints,\n patternRootNodeIdsChain,\n });\n\n useInjectStylesheet(wrapperMedia.css);\n useInjectStylesheet(imageMedia.css);\n\n return (\n <div className={classNames('cf-preview-unbound-image', wrapperMedia.className)}>\n {React.createElement(component, {\n ...sanitizeNodeProps(nodeProps),\n className: classNames(nodeProps.className, imageMedia.className),\n })}\n </div>\n );\n};\n\nexport default PreviewUnboundImage;\n"],"names":["_jsx"],"mappings":";;;;;;;AAmBA;;;AAGG;AACH,MAAM,mBAAmB,GAAuC,CAAC,EAC/D,WAAW,EACX,IAAI,EACJ,SAAS,EACT,SAAS,EACT,uBAAuB,GACxB,KAAI;IACH,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC,MAAK;QAChD,MAAM,UAAU,GAAwB,EAAE,CAAC;QAC3C,MAAM,YAAY,GAAwB,EAAE,CAAC;QAE7C,IAAI,SAAS,CAAC,cAAc,IAAI,OAAO,SAAS,CAAC,cAAc,KAAK,QAAQ,EAAE;AAC5E,YAAA,KAAK,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE;gBAC7E,UAAU,CAAC,YAAY,CAAC,GAAG;AACzB,oBAAA,cAAc,EAAE;AACd,wBAAA,GAAG,MAAM;AACT,wBAAA,MAAM,EAAE,MAAM;AACd,wBAAA,KAAK,EAAE,MAAM;AACd,qBAAA;iBACF,CAAC;gBAEF,YAAY,CAAC,YAAY,CAAC,GAAG;oBAC3B,QAAQ,EAAE,MAAM,CAAC,MAAM;oBACvB,OAAO,EAAE,MAAM,CAAC,KAAK;iBACtB,CAAC;aACH;SACF;AAED,QAAA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,CAAC;AACtC,KAAC,EAAE,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC;IAE/B,MAAM,YAAY,GAAG,aAAa,CAAC;AACjC,QAAA,4BAA4B,EAAE,YAAY;QAC1C,IAAI;QACJ,WAAW;QACX,uBAAuB;AACxB,KAAA,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,aAAa,CAAC;AAC/B,QAAA,4BAA4B,EAAE,UAAU;QACxC,IAAI;QACJ,WAAW;QACX,uBAAuB;AACxB,KAAA,CAAC,CAAC;AAEH,IAAA,mBAAmB,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;AACtC,IAAA,mBAAmB,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;AAEpC,IAAA,QACEA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,0BAA0B,EAAE,YAAY,CAAC,SAAS,CAAC,EAC3E,QAAA,EAAA,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE;YAC9B,GAAG,iBAAiB,CAAC,SAAS,CAAC;YAC/B,SAAS,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,EAAE,UAAU,CAAC,SAAS,CAAC;SACjE,CAAC,EAAA,CACE,EACN;AACJ;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useMediaQuery.js","sources":["../../../src/hooks/useMediaQuery.ts"],"sourcesContent":["import {\n addMinHeightForEmptyStructures,\n designTokensRegistry,\n flattenDesignTokenRegistry,\n maybePopulateDesignTokenValue,\n stringifyCssProperties,\n toMediaQuery,\n buildCfStyles,\n transformVisibility,\n} from '@contentful/experiences-core';\nimport { Breakpoint, ComponentTreeNode, PrimitiveValue } from '@contentful/experiences-core/types';\nimport md5 from 'md5';\nimport { useMemo } from 'react';\n\ntype ResolvedStylesheetData = Array<{\n className: string;\n breakpointCondition: string;\n css: string;\n visibilityCss?: string;\n}>;\n\n/**\n * For each provided breakpoint, create the CSS code and a unique class name.\n *\n * **Example Output:**\n * ```\n * [\n * { className: 'cfstyles-123', breakpointCondition: '*', css: 'margin:42px;' },\n * { className: 'cfstyles-456', breakpointCondition: '<768px', css: 'margin:13px;' },\n * ]\n * ```\n */\nexport const createStylesheetsForBuiltInStyles = ({\n designPropertiesByBreakpoint,\n breakpoints,\n node,\n patternRootNodeIdsChain,\n}: {\n designPropertiesByBreakpoint: Record<string, Record<string, PrimitiveValue>>;\n breakpoints: Breakpoint[];\n node: ComponentTreeNode;\n patternRootNodeIdsChain?: string;\n}): ResolvedStylesheetData => {\n const flattenedDesignTokens = flattenDesignTokenRegistry(designTokensRegistry);\n\n // When the node is hidden for any breakpoint, we need to handle this separately with a disjunct media query.\n const isAnyVisibilityValueHidden = Object.values(designPropertiesByBreakpoint).some(\n (designProperties) => designProperties.cfVisibility === false,\n );\n // We always need an explicit value when using disjunct media queries\n // Example: desktop uses \"false\" and tablet is undefined -> we need to set `display: none` for tablet as well.\n let previousVisibilityValue: boolean | undefined;\n\n const result: Array<{\n className: string;\n breakpointCondition: string;\n css: string;\n visibilityCss?: string;\n }> = [];\n\n for (const breakpoint of breakpoints) {\n let visibilityCss: string | undefined;\n const designProperties = designPropertiesByBreakpoint[breakpoint.id];\n if (!designProperties) {\n continue;\n }\n\n const designPropertiesWithResolvedDesignTokens = Object.entries(designProperties).reduce(\n (acc, [propertyName, value]) => ({\n ...acc,\n [propertyName]: maybePopulateDesignTokenValue(\n propertyName,\n value,\n flattenedDesignTokens,\n ) as string,\n }),\n {} as Record<string, PrimitiveValue>,\n );\n /* [Data Format] `designPropertiesWithResolvedDesignTokens` is a map of property name to plain design value:\n * designPropertiesWithResolvedDesignTokens = {\n * cfMargin: '42px',\n * cfBackgroundColor: 'rgba(246, 246, 246, 1)',\n * }\n */\n\n // Special case for visibility to override any custom `display` values but only for a specific breakpoint.\n if (isAnyVisibilityValueHidden) {\n const visibilityValue =\n (designPropertiesWithResolvedDesignTokens.cfVisibility as boolean | undefined) ??\n previousVisibilityValue;\n previousVisibilityValue = visibilityValue;\n const visibilityStyles = transformVisibility(visibilityValue);\n visibilityCss = stringifyCssProperties(visibilityStyles);\n }\n\n // Convert CF-specific property names to CSS variables, e.g. `cfMargin` -> `margin`\n const cfStyles = addMinHeightForEmptyStructures(\n buildCfStyles(designPropertiesWithResolvedDesignTokens),\n node,\n );\n /* [Data Format] `cfStyles` follows the shape of CSSProperties (camelCased CSS property names):\n * cfStyles = {\n * margin: '42px',\n * backgroundColor: 'rgba(246, 246, 246, 1)',\n * }\n */\n\n // Translate the map of CSSProperties into the final shape of CSS code for this specific breakpoint\n const breakpointCss = stringifyCssProperties(cfStyles);\n /* [Data Format] `breakpointCss`:\n * breakpointCss = \"margin:42px;background-color:rgba(246, 246, 246, 1);\"\n */\n\n // Create a hash ensuring stability across nodes (and breakpoints between nodes)\n const styleHash = patternRootNodeIdsChain\n ? md5(`${patternRootNodeIdsChain}-${node.id}}-${breakpointCss}`)\n : md5(`${node.id}-${breakpointCss}`);\n\n // Create a CSS className with internal prefix to make sure the value can be processed\n const className = `cfstyles-${styleHash}`;\n\n result.push({\n className,\n breakpointCondition: breakpoint.query,\n css: breakpointCss,\n visibilityCss,\n });\n }\n\n return result;\n};\n\n/**\n * Takes the CSS code for each breakpoint and merges them into a single CSS string.\n * It will wrap each breakpoint's CSS code in a media query (exception: default breakpoint with '*').\n *\n * **Example Input:**\n * ```\n * [\n * { className: 'cfstyles-123', breakpointCondition: '*', css: 'color:red;', visibilityCss: 'display:none !important;' },\n * { className: 'cfstyles-456', breakpointCondition: '<768px', css: 'color:blue;' },\n * ]\n * ```\n *\n * **Example Output:**\n * ```\n * '.cfstyles-123{color:red;}@media not (max-width:768px){.cfstyles-123{display:none !important;}}@media(max-width:768px){.cfstyles-456{color:blue;}}'\n * ```\n */\nexport const convertResolvedDesignValuesToMediaQuery = (stylesheetData: ResolvedStylesheetData) => {\n const stylesheet = stylesheetData.reduce(\n (acc, { breakpointCondition, className, css, visibilityCss }, index) => {\n if (acc.classNames.includes(className)) {\n return acc;\n }\n\n const mediaQueryCss = toMediaQuery({\n condition: breakpointCondition,\n cssByClassName: { [className]: css },\n });\n const visibilityMediaQueryCss = toMediaQuery({\n condition: breakpointCondition,\n cssByClassName: { [className]: visibilityCss ?? '' },\n // Validation ensures that it starts with the '*' breakpoint\n nextCondition: stylesheetData[index + 1]?.breakpointCondition,\n });\n return {\n classNames: [...acc.classNames, className],\n css: `${acc.css}${mediaQueryCss}${visibilityMediaQueryCss}`,\n };\n },\n {\n classNames: [] as string[],\n css: '',\n },\n );\n\n return {\n css: stylesheet.css,\n className: stylesheet.classNames.join(' '),\n };\n};\n\nexport const useMediaQuery = ({\n designPropertiesByBreakpoint,\n breakpoints,\n node,\n patternRootNodeIdsChain,\n}: {\n designPropertiesByBreakpoint: Record<string, Record<string, any>>;\n breakpoints: Breakpoint[];\n node: ComponentTreeNode;\n patternRootNodeIdsChain?: string;\n}) => {\n return useMemo(() => {\n const stylesheetData = createStylesheetsForBuiltInStyles({\n designPropertiesByBreakpoint,\n breakpoints,\n node,\n patternRootNodeIdsChain,\n });\n\n return convertResolvedDesignValuesToMediaQuery(stylesheetData);\n }, [designPropertiesByBreakpoint, breakpoints, node, patternRootNodeIdsChain]);\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { Breakpoint, ComponentTreeNode, PrimitiveValue } from '@contentful/experiences-core/types';
|
|
3
|
-
type PreviewUnboundImageProps = {
|
|
4
|
-
breakpoints: Breakpoint[];
|
|
5
|
-
node: ComponentTreeNode;
|
|
6
|
-
nodeProps: Record<PropertyKey, PrimitiveValue>;
|
|
7
|
-
component: React.ElementType;
|
|
8
|
-
patternRootNodeIdsChain: string;
|
|
9
|
-
};
|
|
10
|
-
/**
|
|
11
|
-
* This component is used to render a placeholder Image component in the preview
|
|
12
|
-
* when the image is unbound. It applies the Image size styles to a wrapping div.
|
|
13
|
-
*/
|
|
14
|
-
declare const PreviewUnboundImage: React.FC<PreviewUnboundImageProps>;
|
|
15
|
-
export default PreviewUnboundImage;
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import { Breakpoint, ComponentTreeNode, PrimitiveValue } from '@contentful/experiences-core/types';
|
|
2
|
-
type ResolvedStylesheetData = Array<{
|
|
3
|
-
className: string;
|
|
4
|
-
breakpointCondition: string;
|
|
5
|
-
css: string;
|
|
6
|
-
visibilityCss?: string;
|
|
7
|
-
}>;
|
|
8
|
-
/**
|
|
9
|
-
* For each provided breakpoint, create the CSS code and a unique class name.
|
|
10
|
-
*
|
|
11
|
-
* **Example Output:**
|
|
12
|
-
* ```
|
|
13
|
-
* [
|
|
14
|
-
* { className: 'cfstyles-123', breakpointCondition: '*', css: 'margin:42px;' },
|
|
15
|
-
* { className: 'cfstyles-456', breakpointCondition: '<768px', css: 'margin:13px;' },
|
|
16
|
-
* ]
|
|
17
|
-
* ```
|
|
18
|
-
*/
|
|
19
|
-
export declare const createStylesheetsForBuiltInStyles: ({ designPropertiesByBreakpoint, breakpoints, node, patternRootNodeIdsChain, }: {
|
|
20
|
-
designPropertiesByBreakpoint: Record<string, Record<string, PrimitiveValue>>;
|
|
21
|
-
breakpoints: Breakpoint[];
|
|
22
|
-
node: ComponentTreeNode;
|
|
23
|
-
patternRootNodeIdsChain?: string;
|
|
24
|
-
}) => ResolvedStylesheetData;
|
|
25
|
-
/**
|
|
26
|
-
* Takes the CSS code for each breakpoint and merges them into a single CSS string.
|
|
27
|
-
* It will wrap each breakpoint's CSS code in a media query (exception: default breakpoint with '*').
|
|
28
|
-
*
|
|
29
|
-
* **Example Input:**
|
|
30
|
-
* ```
|
|
31
|
-
* [
|
|
32
|
-
* { className: 'cfstyles-123', breakpointCondition: '*', css: 'color:red;', visibilityCss: 'display:none !important;' },
|
|
33
|
-
* { className: 'cfstyles-456', breakpointCondition: '<768px', css: 'color:blue;' },
|
|
34
|
-
* ]
|
|
35
|
-
* ```
|
|
36
|
-
*
|
|
37
|
-
* **Example Output:**
|
|
38
|
-
* ```
|
|
39
|
-
* '.cfstyles-123{color:red;}@media not (max-width:768px){.cfstyles-123{display:none !important;}}@media(max-width:768px){.cfstyles-456{color:blue;}}'
|
|
40
|
-
* ```
|
|
41
|
-
*/
|
|
42
|
-
export declare const convertResolvedDesignValuesToMediaQuery: (stylesheetData: ResolvedStylesheetData) => {
|
|
43
|
-
css: string;
|
|
44
|
-
className: string;
|
|
45
|
-
};
|
|
46
|
-
export declare const useMediaQuery: ({ designPropertiesByBreakpoint, breakpoints, node, patternRootNodeIdsChain, }: {
|
|
47
|
-
designPropertiesByBreakpoint: Record<string, Record<string, any>>;
|
|
48
|
-
breakpoints: Breakpoint[];
|
|
49
|
-
node: ComponentTreeNode;
|
|
50
|
-
patternRootNodeIdsChain?: string;
|
|
51
|
-
}) => {
|
|
52
|
-
css: string;
|
|
53
|
-
className: string;
|
|
54
|
-
};
|
|
55
|
-
export {};
|
|
File without changes
|