JS SDK - Add type Infer for displaySettings

packages/optimizely-cms-sdk/src/infer.ts

@@ -33,6 +33,7 @@ import {
   PublicRawFileAsset,
   PublicVideoAsset,
 } from './model/assets.js';
+import { DisplayTemplate } from './model/displayTemplates.js';
 
 /** Forces Intellisense to resolve types */
 export type Prettify<T> = {
@@ -200,9 +201,25 @@ type InferFromContentType<T extends AnyContentType> = Prettify<
   InferredBase & InferProps<T> & InferExperience<T> & InferSection<T>
 >;
 
+/** Infers the TypeScript type for a display setting */
+type InferFromDisplayTemplate<T extends DisplayTemplate> =
+  T extends { settings: infer S }
+    ? {
+        [K in keyof S]:
+          S[K] extends { choices: Record<string, any>; editor: infer E }
+            ? E extends 'select'
+              ? keyof S[K]['choices']
+              : E extends 'checkbox'
+                ? 'true' | 'false'
+                : never
+            : never;
+      }
+    : {};
+
 /** Infers the Graph response types of `T`. `T` can be a content type or a property */
 // prettier-ignore
 export type Infer<T> =
-  T extends AnyContentType ? InferFromContentType<T>
-: T extends AnyProperty ? InferFromProperty<T>
-: unknown;
+  T extends DisplayTemplate ? InferFromDisplayTemplate<T>
+  : T extends AnyContentType ? InferFromContentType<T>
+  : T extends AnyProperty ? InferFromProperty<T>
+  : unknown;

packages/optimizely-cms-sdk/src/model/__test__/parseDisplaySettings.test.ts

@@ -33,4 +33,4 @@ describe('parseDisplaySettings', () => {
     const result = parseDisplaySettings(input);
     expect(result).toEqual(undefined);
   });
-});
+});

packages/optimizely-cms-sdk/src/model/displayTemplates.ts

@@ -1,4 +1,4 @@
-import { DisplaySettingsType } from '../infer.js';
+import { DisplaySettingsType, Infer } from '../infer.js';
 import { BaseTypes } from './contentTypes.js';
 
 // section node types
@@ -79,3 +79,4 @@ export function parseDisplaySettings(
 
   return result;
 }
+

packages/optimizely-cms-sdk/src/model/index.ts

@@ -12,7 +12,7 @@ export function contentType<T extends AnyContentType>(
 /** Defines a Optimizely CMS display template */
 export function displayTemplate<T extends DisplayTemplateVariant>(
   options: T
-): T & { __type: 'displayTemplate' } {
+): DisplayTemplate<T> {
   return { ...options, __type: 'displayTemplate' };
 }
 

packages/optimizely-cms-sdk/src/react/server.tsx

@@ -11,10 +11,11 @@ import {
   DisplaySettingsType,
   ExperienceCompositionNode,
   InferredContentReference,
+  Infer,
 } from '../infer.js';
 import { isComponentNode } from '../util/baseTypeUtil.js';
 import { parseDisplaySettings } from '../model/displayTemplates.js';
-import { getDisplayTemplateTag } from '../model/displayTemplateRegistry.js';
+import { getDisplayTemplate, getDisplayTemplateTag } from '../model/displayTemplateRegistry.js';
 import { isDev } from '../util/environment.js';
 import { appendToken } from '../util/preview.js';
 
@@ -150,7 +151,13 @@ export function OptimizelyExperience({
 }) {
   return nodes.map((node) => {
     const tag = getDisplayTemplateTag(node.displayTemplateKey);
-    const parsedDisplaySettings = parseDisplaySettings(node.displaySettings);
+    const template = node.displayTemplateKey
+      ? getDisplayTemplate(node.displayTemplateKey)
+      : null;
+
+    const parsedDisplaySettings = template
+      ? parseDisplaySettings(node.displaySettings)
+      : undefined;
 
     if (isComponentNode(node)) {
       const Wrapper = ComponentWrapper ?? React.Fragment;
@@ -251,7 +258,13 @@ export function OptimizelyGridSection({
 
   return nodes.map((node, i) => {
     const tag = getDisplayTemplateTag(node.displayTemplateKey);
-    const parsedDisplaySettings = parseDisplaySettings(node.displaySettings);
+    const template = node.displayTemplateKey
+      ? getDisplayTemplate(node.displayTemplateKey)
+      : null;
+
+    const parsedDisplaySettings = template
+      ? parseDisplaySettings(node.displaySettings)
+      : undefined;
 
     if (isComponentNode(node)) {
       return (

samples/nextjs-template/src/components/Article.tsx

@@ -1,4 +1,4 @@
-import { contentType, Infer } from '@optimizely/cms-sdk';
+import { contentType, displayTemplate, Infer } from '@optimizely/cms-sdk';
 import { getPreviewUtils } from '@optimizely/cms-sdk/react/server';
 
 export const ArticleContentType = contentType({
@@ -21,21 +21,42 @@ export const ArticleContentType = contentType({
   },
 });
 
+export const TeaserDisplayTemplate = displayTemplate({
+  key: 'TeaserDisplayTemplate',
+  displayName: 'TeaserDisplayTemplate',
+  isDefault: false,
+  baseType: '_component',
+  settings: {
+    orientation: {
+      editor: 'select',
+      displayName: 'Teaser Orientation',
+      sortOrder: 0,
+      choices: {
+        vertical: { displayName: 'Vertical', sortOrder: 1 },
+        horizontal: { displayName: 'Horizontal', sortOrder: 2 },
+      },
+    },
+  },
+});
+
 type Props = {
   opti: Infer<typeof ArticleContentType>;
+  displaySettings?: Infer<typeof TeaserDisplayTemplate>;
 };
 
-export default function Article({ opti }: Props) {
+export default function Article({ opti, displaySettings }: Props) {
   const { pa } = getPreviewUtils(opti);
 
   return (
     <main>
       <h1 {...pa('heading')}>{opti.heading}</h1>
       <p {...pa('subtitle')}>{opti.subtitle}</p>
+      <p>{displaySettings?.orientation}</p>
       <div
         {...pa('body')}
         dangerouslySetInnerHTML={{ __html: opti.body?.html ?? '' }}
       />
     </main>
   );
 }
+