JS SDK - Add type Infer for displaySettings

Feature: CMS-47083

Author: GiangNT95

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

@@ -28,6 +28,7 @@ import {
   SectionContentType,
 } from './model/contentTypes.js';
 import { Node } from './components/richText/renderer.js';
+import { DisplayTemplate } from './model/displayTemplates.js';
 
 /** Forces Intellisense to resolve types */
 export type Prettify<T> = {
@@ -184,9 +185,21 @@ 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> }
+            ? keyof S[K]['choices']
+            : 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

@@ -25,12 +25,12 @@ describe('parseDisplaySettings', () => {
   it('should return an empty object for null input', () => {
     const input = null;
     const result = parseDisplaySettings(input ?? undefined);
-    expect(result).toEqual(undefined);
+    expect(result).toEqual({});
   });
 
   it('should return an empty object for undefined input', () => {
     const input = undefined;
     const result = parseDisplaySettings(input);
-    expect(result).toEqual(undefined);
+    expect(result).toEqual({});
   });
 });

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
@@ -62,20 +62,30 @@ export type DisplayTemplate<T = DisplayTemplateVariant> = T & {
   __type: 'displayTemplate';
 };
 
-export function parseDisplaySettings(
-  displaySettings?: DisplaySettingsType[] | null
-): Record<string, string> | undefined {
-  if (!displaySettings) {
-    return undefined; // Return undefined if displaySettings is not provided
-  }
-
-  const result: Record<string, string> = {}; // Initialize an empty object
-
-  // Iterate over the input array
-  for (const item of displaySettings) {
-    // Assign the value to the key in the result object
-    result[item.key] = item.value;
-  }
-
+// export function parseDisplaySettings(
+//   displaySettings?: DisplaySettingsType[] | null
+// ): Record<string, string> | undefined {
+//   if (!displaySettings) {
+//     return undefined; // Return undefined if displaySettings is not provided
+//   }
+
+//   const result: Record<string, string> = {}; // Initialize an empty object
+
+//   // Iterate over the input array
+//   for (const item of displaySettings) {
+//     // Assign the value to the key in the result object
+//     result[item.key] = item.value;
+//   }
+
+//   return result;
+// }
+
+export const parseDisplaySettings = <T extends DisplayTemplate>(
+  settings: DisplaySettingsType[] | null | undefined
+): Infer<DisplayTemplate> => {
+  const result = {} as Infer<T>;
+  settings?.forEach(s => {
+    result[s.key as keyof Infer<T>] = s.value as Infer<T>[keyof Infer<T>];
+  });
   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' };
 }
 

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