Merge pull request #160 from episerver/bugfix/CMS-46517-loose-tuples

Accept components only with tags (without default)

Author: exacs

__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,
+      },
+    },
   },
 });
 

__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<typeof ct1> };
 type Props2 = { opti: Infer<typeof ct2> };
 type Props3 = { opti: Infer<typeof ct3> };
+type Props6 = { opti: Infer<typeof ct6> };
+type Props7 = { opti: Infer<typeof ct7> };
 
 type BlankSectionProps = {
   opti: Infer<typeof BlankSectionContentType>;
@@ -124,6 +138,13 @@ export function Component3({ opti }: Props3) {
   );
 }
 
+export function Component6({}: Props6) {
+  return <div>This is Component6</div>;
+}
+
+export function Component7({}: Props7) {
+  return <div>This is Component7</div>;
+}
 export function Component3C({ opti }: Props3) {
   return (
     <div>

packages/optimizely-cms-sdk/src/render/componentRegistry.ts

@@ -14,7 +14,7 @@
  */
 type ComponentWithVariants<C> = {
   /** 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<C> = Record<string, ComponentEntry<C>>;
 
 /** Returns true if `obj` is type {@linkcode ComponentWithVariants} */
 function hasVariants(obj: unknown): obj is ComponentWithVariants<unknown> {
-  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<C>(entry: ComponentEntry<C>): C {
+function getDefaultComponent<C>(entry: ComponentEntry<C>): C | undefined {
   if (hasVariants(entry)) {
     return entry.default;
   } else {
@@ -100,21 +98,23 @@ export class ComponentRegistry<T> {
 
     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) ??