CMS-42559 Add InferredContentReference type and enhance src function for ContentReference handling

Author: TRomesh

packages/optimizely-cms-sdk/src/graph/__test__/createQueryDAM.test.ts

@@ -17,6 +17,7 @@ describe('createFragment() with damEnabled for contentReference properties', ()
     });
     initContentTypeRegistry([ct1]);
 
+    // DAM disabled
     const result = await createFragment('ct1', new Set(), '', true, false);
 
     // Should not include ContentReferenceItem fragments
@@ -57,6 +58,7 @@ describe('createFragment() with damEnabled for contentReference properties', ()
     });
     initContentTypeRegistry([ct1]);
 
+    // DAM enabled
     const result = await createFragment('ct1', new Set(), '', true, true);
 
     // Should include all ContentReferenceItem fragments
@@ -96,6 +98,7 @@ describe('createFragment() with damEnabled for contentReference properties', ()
     });
     initContentTypeRegistry([ct1]);
 
+    // DAM disabled
     const result = await createFragment('ct1', new Set(), '', true, false);
 
     expect(result.some((line) => line.includes('ContentReferenceItem'))).toBe(

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

@@ -93,6 +93,11 @@ export type ContentReferenceItem =
   | PublicVideoAsset
   | PublicRawFileAsset;
 
+export type InferredContentReference = {
+  url: InferredUrl;
+  item: ContentReferenceItem | null;
+};
+
 /** Infers the Typescript type for each content type property */
 // prettier-ignore
 export type InferFromProperty<T extends AnyProperty> =
@@ -106,7 +111,7 @@ export type InferFromProperty<T extends AnyProperty> =
   : T extends LinkProperty ? { text: string | null, title: string | null, target: string | null, url: InferredUrl }
   : T extends IntegerProperty ? number
   : T extends FloatProperty ? number
- : T extends ContentReferenceProperty ? { url: InferredUrl, item: ContentReferenceItem | null }
+  : T extends ContentReferenceProperty ? InferredContentReference
   : T extends ArrayProperty<infer E> ? InferFromProperty<E>[]
   : T extends ContentProperty ? {__typename: string, __viewname: string}
   : T extends ComponentProperty<infer E> ? Infer<E>

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

@@ -10,7 +10,9 @@ import {
   ExperienceComponentNode,
   DisplaySettingsType,
   ExperienceCompositionNode,
+  InferredContentReference,
 } from '../infer.js';
+import { Renditions } from '../model/assets.js';
 import { isComponentNode } from '../util/baseTypeUtil.js';
 import { parseDisplaySettings } from '../model/displayTemplates.js';
 import { getDisplayTemplateTag } from '../model/displayTemplateRegistry.js';
@@ -308,6 +310,15 @@ export function OptimizelyGridSection({
 
 /** Get context-aware functions for preview */
 export function getPreviewUtils(opti: OptimizelyComponentProps['opti']) {
+  /** Helper function to append preview token to URL */
+  const appendPreviewToken = (url: string): string => {
+    if (opti.__context?.preview_token) {
+      const separator = url.includes('?') ? '&' : '?';
+      return `${url}${separator}preview_token=${opti.__context.preview_token}`;
+    }
+    return url;
+  };
+
   return {
     /** Get the HTML data attributes required for a property */
     pa(property?: string | { key: string }) {
@@ -328,13 +339,81 @@ export function getPreviewUtils(opti: OptimizelyComponentProps['opti']) {
       }
     },
 
-    /** Appends the preview token to the provided image URL */
-    src(url: string) {
-      if (opti.__context?.preview_token) {
-        const separator = url.includes('?') ? '&' : '?';
-        return `${url}${separator}preview_token=${opti.__context.preview_token}`;
+    /** Appends the preview token to the provided image URL or ContentReference */
+    src(
+      input: string | InferredContentReference | null | undefined,
+      options?: { renditionName?: string }
+    ): string {
+      if (!input) return '';
+
+      let url: string;
+      if (typeof input === 'string') {
+        url = input;
+      } else {
+        // If renditionName is specified, find the matching rendition
+        if (
+          options?.renditionName &&
+          input.item &&
+          'Renditions' in input.item
+        ) {
+          const rendition = input.item.Renditions?.find(
+            (r) => r.Name === options.renditionName
+          );
+          if (rendition?.Url) {
+            url = rendition.Url;
+          } else {
+            // Fallback to default URL if rendition not found
+            url = input.item?.Url ?? input.url?.default ?? '';
+          }
+        } else {
+          // Prefer item.Url if available (DAM asset), otherwise use url.default
+          url = input.item?.Url ?? input.url?.default ?? '';
+        }
+      }
+
+      return appendPreviewToken(url);
+    },
+
+    /** Generates srcset from ContentReference renditions */
+    srcset(input: InferredContentReference | null | undefined): string {
+      if (!input?.item || !('Renditions' in input.item)) return '';
+
+      const renditions = input.item.Renditions;
+      if (!renditions || renditions.length === 0) return '';
+
+      // Track seen widths to avoid duplicate width descriptors
+      const seenWidths = new Set<number>();
+
+      const srcsetEntries = renditions
+        .filter((r) => {
+          if (!r.Url || !r.Width) return false;
+          // Skip if we've already seen this width
+          if (seenWidths.has(r.Width)) return false;
+          seenWidths.add(r.Width);
+          return true;
+        })
+        .map((r) => {
+          const url = appendPreviewToken(r.Url!);
+          return `${url} ${r.Width}w`;
+        });
+
+      return srcsetEntries.join(', ');
+    },
+
+    /** Gets the alt text from a ContentReference or returns the string as-is */
+    alt(input: string | InferredContentReference | null | undefined): string {
+      if (!input) return '';
+
+      if (typeof input === 'string') {
+        return input;
+      }
+
+      // Check if item has AltText property (PublicImageAsset or PublicVideoAsset)
+      if (input.item && 'AltText' in input.item) {
+        return input.item.AltText ?? '';
       }
-      return url;
+
+      return '';
     },
   };
 }

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

@@ -33,12 +33,12 @@ const customHeadingTwo = (props: ElementProps) => {
 };
 
 export default function AboutUs({ opti }: AboutUsProps) {
-  const { src } = getPreviewUtils(opti);
+  const { src, srcset } = getPreviewUtils(opti);
   return (
     <section className="about-us">
-      {opti?.image?.url?.default && (
+      {opti.image && (
         <div className="about-us-image">
-          <Image src={src(opti.image.url.default)} alt="" fill={true} />
+          <img src={src(opti.image)} alt="" />
         </div>
       )}
       <h2>{opti.heading}</h2>

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

@@ -31,7 +31,7 @@ export default function SmallFeature({ opti }: Props) {
       <h3 {...pa('heading')}>{opti.heading}</h3>
       {opti.image?.url?.default && (
         <div style={{ position: 'relative' }}>
-          <img src={src(opti.image.url.default)} alt="" {...pa('image')} />
+          <img src={src(opti.image)} alt="" {...pa('image')} />
         </div>
       )}
       <div