diff --git a/__test__/test-website/src/app/en/layout.tsx b/__test__/test-website/src/app/en/layout.tsx index 4cf81d41..3a7176cc 100644 --- a/__test__/test-website/src/app/en/layout.tsx +++ b/__test__/test-website/src/app/en/layout.tsx @@ -10,9 +10,13 @@ import { Component2A, Component3, Component3C, + Component6, + Component7, ct1, ct2, ct3, + ct6, + ct7, dt1, dt2, dt3, @@ -28,7 +32,7 @@ import { } from '@optimizely/cms-sdk'; import { initReactComponentRegistry } from '@optimizely/cms-sdk/react/server'; -initContentTypeRegistry([ct1, ct2, ct3]); +initContentTypeRegistry([ct1, ct2, ct3, ct6, ct7]); initDisplayTemplateRegistry([dt1, dt2, dt3, dt4, dt5, dt6]); initReactComponentRegistry({ resolver: { @@ -57,6 +61,15 @@ initReactComponentRegistry({ }, _Column: Column, '_Column:tagA': ColumnA, + + // Content type "test_ct6" only has a component with tag + 'test_c6:tagA': Component6, + test_c7: { + // default: Component7, + tags: { + tagA: Component7, + }, + }, }, }); diff --git a/__test__/test-website/src/components/with-display-templates.tsx b/__test__/test-website/src/components/with-display-templates.tsx index c36c3619..122787e1 100644 --- a/__test__/test-website/src/components/with-display-templates.tsx +++ b/__test__/test-website/src/components/with-display-templates.tsx @@ -33,6 +33,18 @@ export const ct3 = contentType({ baseType: '_experience', }); +export const ct6 = contentType({ + key: 'test_c6', + baseType: '_component', + compositionBehaviors: ['elementEnabled', 'sectionEnabled'], +}); + +export const ct7 = contentType({ + key: 'test_c7', + baseType: '_component', + compositionBehaviors: ['elementEnabled', 'sectionEnabled'], +}); + export const dt1 = displayTemplate({ key: 'test_dt1', baseType: '_component', @@ -90,6 +102,8 @@ export const dt6 = displayTemplate({ type Props1 = { opti: Infer }; type Props2 = { opti: Infer }; type Props3 = { opti: Infer }; +type Props6 = { opti: Infer }; +type Props7 = { opti: Infer }; type BlankSectionProps = { opti: Infer; @@ -124,6 +138,13 @@ export function Component3({ opti }: Props3) { ); } +export function Component6({}: Props6) { + return
This is Component6
; +} + +export function Component7({}: Props7) { + return
This is Component7
; +} export function Component3C({ opti }: Props3) { return (
diff --git a/packages/optimizely-cms-sdk/src/render/componentRegistry.ts b/packages/optimizely-cms-sdk/src/render/componentRegistry.ts index 15b06216..61b0cca8 100644 --- a/packages/optimizely-cms-sdk/src/render/componentRegistry.ts +++ b/packages/optimizely-cms-sdk/src/render/componentRegistry.ts @@ -14,7 +14,7 @@ */ type ComponentWithVariants = { /** Default component */ - default: C; + default?: C; /** * Tagged variants, where the keys are tag names and the values are the corresponding components. @@ -47,13 +47,11 @@ type ComponentMap = Record>; /** Returns true if `obj` is type {@linkcode ComponentWithVariants} */ function hasVariants(obj: unknown): obj is ComponentWithVariants { - return ( - typeof obj === 'object' && obj !== null && 'default' in obj && 'tags' in obj - ); + return typeof obj === 'object' && obj !== null && 'tags' in obj; } /** Returns the default component in an {@linkcode ComponentEntry} */ -function getDefaultComponent(entry: ComponentEntry): C { +function getDefaultComponent(entry: ComponentEntry): C | undefined { if (hasVariants(entry)) { return entry.default; } else { @@ -100,21 +98,23 @@ export class ComponentRegistry { const entry = this.resolver[contentType]; - if (!entry) { - return undefined; - } - if (!options.tag) { + if (!entry) { + return undefined; + } return getDefaultComponent(entry); } - // Search for the component `${contentType}:${tag}` const taggedEntry = this.resolver[`${contentType}:${options.tag}`]; if (taggedEntry) { return getDefaultComponent(taggedEntry); } + if (!entry) { + return undefined; + } + return ( // Search for the component with the tag in the component definition getTagComponent(entry, options.tag) ??