From ebb37235da1d69f9122b425685ccde6ec861c396 Mon Sep 17 00:00:00 2001
From: Carlos Saito <carlos.saito@optimizely.com>
Date: Mon, 17 Nov 2025 10:27:54 +0100
Subject: [PATCH 1/3] Pass down composition to components

---
 packages/optimizely-cms-sdk/src/infer.ts         | 1 +
 packages/optimizely-cms-sdk/src/react/server.tsx | 7 +++++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/optimizely-cms-sdk/src/infer.ts b/packages/optimizely-cms-sdk/src/infer.ts
index 7adcd528..cedffddb 100644
--- a/packages/optimizely-cms-sdk/src/infer.ts
+++ b/packages/optimizely-cms-sdk/src/infer.ts
@@ -107,6 +107,7 @@ export type InferredBase = {
   _metadata: InferredContentMetadata;
   __typename: string;
   __context?: { edit: boolean; preview_token: string };
+  composition?: ExperienceComponentNode;
 };
 
 /** Only include keys where indexingType is not 'disabled' */
diff --git a/packages/optimizely-cms-sdk/src/react/server.tsx b/packages/optimizely-cms-sdk/src/react/server.tsx
index 025ce4ce..ad9136c7 100644
--- a/packages/optimizely-cms-sdk/src/react/server.tsx
+++ b/packages/optimizely-cms-sdk/src/react/server.tsx
@@ -261,6 +261,7 @@ export function OptimizelyGridSection({
         <OptimizelyComponent
           opti={{
             ...node.component,
+            composition: node,
             __tag: tag,
           }}
           key={node.key}
@@ -307,17 +308,19 @@ export function OptimizelyGridSection({
 export function getPreviewUtils(opti: OptimizelyComponentProps['opti']) {
   return {
     /** Get the HTML data attributes required for a property */
-    pa(property: string | { key: string }) {
+    pa(property?: string | { key: string }) {
       if (opti.__context?.edit) {
         if (typeof property === 'string') {
           return {
             'data-epi-property-name': property,
           };
-        } else {
+        } else if (property) {
           return {
             'data-epi-block-id': property.key,
           };
         }
+
+        return {};
       } else {
         return {};
       }

From 1d4ca9369eefac5f8933ade05f4b870852f034e6 Mon Sep 17 00:00:00 2001
From: Carlos Saito <carlos.saito@optimizely.com>
Date: Tue, 18 Nov 2025 16:52:39 +0100
Subject: [PATCH 2/3] Rename "compositon" > "__composition"

---
 packages/optimizely-cms-sdk/src/infer.ts         | 4 +++-
 packages/optimizely-cms-sdk/src/react/server.tsx | 7 ++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/optimizely-cms-sdk/src/infer.ts b/packages/optimizely-cms-sdk/src/infer.ts
index cedffddb..d31d1322 100644
--- a/packages/optimizely-cms-sdk/src/infer.ts
+++ b/packages/optimizely-cms-sdk/src/infer.ts
@@ -105,9 +105,11 @@ export type InferFromProperty<T extends AnyProperty> =
 export type InferredBase = {
   _id: string;
   _metadata: InferredContentMetadata;
+
+  // Properties that don't come from Graph are prefixed with double-underscores
   __typename: string;
   __context?: { edit: boolean; preview_token: string };
-  composition?: ExperienceComponentNode;
+  __composition?: ExperienceComponentNode;
 };
 
 /** Only include keys where indexingType is not 'disabled' */
diff --git a/packages/optimizely-cms-sdk/src/react/server.tsx b/packages/optimizely-cms-sdk/src/react/server.tsx
index ad9136c7..86d12576 100644
--- a/packages/optimizely-cms-sdk/src/react/server.tsx
+++ b/packages/optimizely-cms-sdk/src/react/server.tsx
@@ -84,7 +84,7 @@ type OptimizelyComponentProps = {
     /** Preview context */
     __context?: { edit: boolean; preview_token: string };
 
-    composition?: ExperienceCompositionNode;
+    __composition?: ExperienceCompositionNode;
   };
 
   displaySettings?: Record<string, string>;
@@ -98,7 +98,8 @@ export async function OptimizelyComponent({
   if (!componentRegistry) {
     throw new Error('You should call `initReactComponentRegistry` first');
   }
-  const dtKey = opti.composition?.displayTemplateKey ?? opti.displayTemplateKey;
+  const dtKey =
+    opti.__composition?.displayTemplateKey ?? opti.displayTemplateKey;
   const Component = await componentRegistry.getComponent(opti.__typename, {
     tag: opti.__tag ?? getDisplayTemplateTag(dtKey),
   });
@@ -261,7 +262,7 @@ export function OptimizelyGridSection({
         <OptimizelyComponent
           opti={{
             ...node.component,
-            composition: node,
+            __composition: node,
             __tag: tag,
           }}
           key={node.key}

From 86973d084ce390dda3009ab32fd9f1d7ea23b7da Mon Sep 17 00:00:00 2001
From: Carlos Saito <carlos.saito@optimizely.com>
Date: Tue, 18 Nov 2025 16:56:03 +0100
Subject: [PATCH 3/3] Add comment

---
 packages/optimizely-cms-sdk/src/react/server.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/optimizely-cms-sdk/src/react/server.tsx b/packages/optimizely-cms-sdk/src/react/server.tsx
index 86d12576..6a906ae6 100644
--- a/packages/optimizely-cms-sdk/src/react/server.tsx
+++ b/packages/optimizely-cms-sdk/src/react/server.tsx
@@ -261,6 +261,7 @@ export function OptimizelyGridSection({
       return (
         <OptimizelyComponent
           opti={{
+            // `node.component` contains user-defined properties
             ...node.component,
             __composition: node,
             __tag: tag,