Merge pull request #12 from episerver/user/exacs/CMS-41195-react-rendering

React rendering

Author: exacs

packages/optimizely-cms-sdk/package.json

@@ -11,8 +11,17 @@
   "author": "",
   "license": "ISC",
   "packageManager": "[email protected]",
+  "peerDependencies": {
+    "react": "^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@types/node": "^22.13.14",
+    "@types/react": "^19",
     "typescript": "^5.8.2",
     "vitest": "^3.1.1"
   }

packages/optimizely-cms-sdk/src/graph/createQuery.ts

@@ -84,6 +84,7 @@ export async function createQuery(contentType: string, customImport: Importer) {
 query FetchContent($filter: _ContentWhereInput) {
   _Content(where: $filter) {
     item {
+      __typename
       ...${contentType}
     }
   }

packages/optimizely-cms-sdk/src/render/component-registry.ts

@@ -0,0 +1,21 @@
+export type ComponentResolver<C> =
+  | Record<string, C>
+  | ((contentType: string) => C);
+
+/** A registry mapping content type names and components */
+export class ComponentRegistry<T> {
+  resolver: ComponentResolver<T>;
+
+  constructor(resolver: ComponentResolver<T>) {
+    this.resolver = resolver;
+  }
+
+  /** Returns the component given its content type name. Returns `undefined` if not found */
+  getComponent(contentType: string): T {
+    if (typeof this.resolver === 'object') {
+      return this.resolver[contentType];
+    } else {
+      return this.resolver(contentType);
+    }
+  }
+}

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

@@ -0,0 +1,36 @@
+'use server';
+import type React from 'react';
+import { ComponentRegistry, ComponentResolver } from './component-registry';
+
+type ComponentType = React.ComponentType<any>;
+
+let componentRegistry: ComponentRegistry<ComponentType>;
+
+type InitOptions = {
+  resolver: ComponentResolver<ComponentType>;
+};
+
+type Props = {
+  opti: {
+    __typename: string;
+  };
+};
+
+export function initReactComponentRegistry(options: InitOptions) {
+  componentRegistry = new ComponentRegistry(options.resolver);
+}
+
+export async function OptimizelyComponent({ opti, ...props }: Props) {
+  if (!componentRegistry) {
+    throw new Error('You should call `initReactComponentRegistry` first');
+  }
+
+  const contentType = opti.__typename;
+  const Component = await componentRegistry.getComponent(contentType);
+
+  if (!Component) {
+    return <div>No component found for content type {contentType}</div>;
+  }
+
+  return <Component opti={opti} {...props} />;
+}

packages/optimizely-cms-sdk/tsconfig.json

@@ -1,13 +1,14 @@
 {
   "compilerOptions": {
+    "jsx": "react-jsx",
     "target": "es2016",
     "module": "commonjs",
     "moduleResolution": "node",
     "rootDir": "./src",
     "declaration": true,
     "sourceMap": true,
     "outDir": "./dist",
-    "esModuleInterop": false,
+    "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "skipLibCheck": true

pnpm-lock.yaml

@@ -0,0 +1,32 @@
+import { GraphClient } from 'optimizely-cms-sdk/dist/graph';
+import {
+  initReactComponentRegistry,
+  OptimizelyComponent,
+} from 'optimizely-cms-sdk/dist/render/react';
+import React from 'react';
+
+initReactComponentRegistry({
+  resolver(contentType) {
+    return React.lazy(() => import(`../../../components/${contentType}.tsx`));
+  },
+});
+
+async function myImport(contentType: string) {
+  return import(`../../../components/${contentType}.tsx`).then(
+    (r) => r.ContentType
+  );
+}
+
+type Props = {
+  params: Promise<{
+    slug: string;
+  }>;
+};
+
+export default async function Page({ params }: Props) {
+  const { slug } = await params;
+  const client = new GraphClient(process.env.GRAPH_SINGLE_KEY!, myImport);
+  const c = await client.fetchContent(`/${slug}/`);
+
+  return <OptimizelyComponent opti={c} />;
+}

samples/nextjs-template/src/app/render/[slug]/page.tsx

@@ -1,4 +1,5 @@
-import { contentType } from 'optimizely-cms-sdk';
+import { contentType, Infer } from 'optimizely-cms-sdk';
+import { OptimizelyComponent } from 'optimizely-cms-sdk/dist/render/react';
 
 export const ContentType = contentType({
   key: 'Landing',
@@ -27,3 +28,19 @@ export const ContentType = contentType({
     },
   },
 });
+
+type Props = {
+  opti: Infer<typeof ContentType>;
+};
+
+export default function LandingComponent({ opti }: Props) {
+  return (
+    <div>
+      <h1>{opti.heading}</h1>
+      <p>{opti.summary}</p>
+      {opti.sections.map((section, i) => (
+        <OptimizelyComponent key={i} opti={section} />
+      ))}
+    </div>
+  );
+}

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

@@ -1,4 +1,4 @@
-import { contentType, displayTemplate } from 'optimizely-cms-sdk';
+import { contentType, displayTemplate, Infer } from 'optimizely-cms-sdk';
 
 export const ContentType = contentType({
   key: 'LandingSection',
@@ -11,21 +11,14 @@ export const ContentType = contentType({
     subtitle: {
       type: 'string',
     },
-    features: {
-      type: 'array',
-      items: {
-        type: 'content',
-        allowedTypes: ['SmallFeatureGrid'],
-      },
-    },
   },
 });
 
 export const DisplayTemplate = displayTemplate({
   key: 'LandingSectionDisplayTemplate',
   isDefault: true,
   displayName: 'LandingSectionDisplayTemplate',
-  contentType: 'LandingSection',
+  baseType: 'component',
   settings: {
     background: {
       editor: 'select',
@@ -44,3 +37,16 @@ export const DisplayTemplate = displayTemplate({
     },
   },
 });
+
+type Props = {
+  opti: Infer<typeof ContentType>;
+};
+
+export default function LandingSection({ opti }: Props) {
+  return (
+    <section>
+      <h2>{opti.heading}</h2>
+      <p>{opti.subtitle}</p>
+    </section>
+  );
+}