@optimizely/cms-sdk@1.0.0

📦 SDK Changes

Breaking Changes

1. Type Utility: Infer → ContentProps
   The TypeScript utility type Infer has been renamed to ContentProps for improved clarity and type safety.

Before:

import { contentType, Infer } from '@optimizely/cms-sdk';

export const StandardContentType = contentType({
  key: 'Standard',
  displayName: 'Standard Page',
  baseType: '_experience',
  properties: {
    heading: { type: 'string' }
  }
});

type StandardPageProps = {
  opti: Infer<typeof StandardContentType>;
};

After:

import { contentType, ContentProps } from '@optimizely/cms-sdk';

export const StandardContentType = contentType({
  key: 'Standard',
  displayName: 'Standard Page',
  baseType: '_experience',
  properties: {
    heading: { type: 'string' }
  }
});

type StandardPageProps = {
  content: ContentProps<typeof StandardContentType>;
};

Migration: Replace all Infer imports and usages with ContentProps.

2. Component Prop: opti → content
   Component props have been renamed from opti to content for better consistency across the SDK.

Before:

type StandardPageProps = {
  opti: ContentProps<typeof StandardContentType>;
};

function Standard({ opti }: StandardPageProps) {
  const { pa } = getPreviewUtils(opti);
  return (
    <div>
      <h1 {...pa('heading')}>{opti.heading}</h1>
    </div>
  );
}

After:

type StandardPageProps = {
  content: ContentProps<typeof StandardContentType>;
};

function Standard({ content }: StandardPageProps) {
  const { pa } = getPreviewUtils(content);
  return (
    <div>
      <h1 {...pa('heading')}>{content.heading}</h1>
    </div>
  );
}

Migration: Update all component prop definitions and usages from opti to content.

3. Component: OptimizelyExperience → OptimizelyComposition
   The component for rendering composition areas has been renamed from OptimizelyExperience to OptimizelyComposition.

Before:

import {
  OptimizelyExperience,
  ComponentContainerProps,
  getPreviewUtils,
} from '@optimizely/cms-sdk/react/server';

export default function LandingExperienceComponent({ content }: Props) {
  return (
    <main>
      <OptimizelyExperience
        nodes={content.composition.nodes ?? []}
        ComponentWrapper={ComponentWrapper}
      />
    </main>
  );
}

After:

import {
  OptimizelyComposition,
  ComponentContainerProps,
  getPreviewUtils,
} from '@optimizely/cms-sdk/react/server';

export default function LandingExperienceComponent({ content }: Props) {
  return (
    <main>
      <OptimizelyComposition
        nodes={content.composition.nodes ?? []}
        ComponentWrapper={ComponentWrapper}
      />
    </main>
  );
}

Migration: Replace all imports and usages of OptimizelyExperience with OptimizelyComposition.

Quick Migration Checklist:

• Replace Infer with ContentProps in all imports

• Rename prop from opti to content in all component definitions

• Replace OptimizelyExperience with OptimizelyComposition in all imports and JSX

---

New Features

• Implemented Native SDK RichText Component and React RichText Renderer.

• Added support for CMP DAM assets and type-checking utilities.

• Added support for IndexType fields and property groups.

• Enhanced content type handling for self-referential structures.

• Added _Row and _Column definitions to the registry.

• Added host option to GraphQL queries and support for fetching all fields/metadata.

• Improved type safety: Refactored components to use ContentProps and added type inference for displaySettings.

• Bug Fixes

• Fixed handling of URL paths with/without trailing slashes.

• Fixed fragment generation issues (ensuring __typename and fixing block fragments).

• Improved RichText fallback logic and attribute parsing.

• Fixed circular errors during manifest pushes.

• Resolved issue where pages loaded incorrectly when sharing URL segments across applications.

• Refactoring

• Refactored transformProperties to use parentKey for better context.

• Split getLinksByPath into two distinct methods.

• Simplified element and leaf handling in the RichText component.

🧪 Samples, Templates & Documentation

• New Content

• Added Alloy Template for quick project starts.

• New sample sites: graph-webhooks-cache-invalidation and fx-integration.

• Added a script to manage (view/delete) webhooks.

• Improvements

• Updated all sample projects to Next.js 15.x.

• Added documentation for DAM assets and RichText component usage.

• Added instructions for glob negation in component configuration.

• Updated env.example files with missing keys.

• Fixed responsive design issues in the start page of sample sites.

New Contributors

• @GiangNT95 made their first contribution in #161
• @tamhoang113 made their first contribution in #226

Full Changelog: https://github.com/episerver/content-js-sdk/compare/@episerver/cms-sdk@0.1.0-alpha.8...@optimizely/cms-sdk@1.0.0

@optimizely/cms-cli@1.0.0

🛠 CLI Changes

Features & Improvements

• Enhanced content type transformation and metadata extraction.
• Updated environment variable naming conventions for better configuration.
• Added cleanDisplayTemplate function to sanitize output.
• Add Glob patterns in buildConfig components paths.
• Fixed versioning hooks and bumped internal versions to support GA release.

Full Changelog: https://github.com/episerver/content-js-sdk/compare/@episerver/cms-sdk@0.1.0-alpha.8...@optimizely/cms-cli@1.0.0

@episerver/cms-sdk@0.1.0-alpha.8

This version includes new methods to support fetching variations form the CMS

Summary:

• BREAKING CHANGE. New method GraphClient.getContentByPath (replaces GraphClient.fetchContent)
• BREAKING CHANGE New method GraphClient.getPreviewContent (replaces GraphClient.fetchPreviewContent)

Get content variations with GraphClient.getContentByPath

With one parameter

The new method getContentByPath returns an array of items instead of a single item.

Before:

const client = new GraphClient();
const content = await client.fetchContent('/en/home');

return <OptimizelyComponent opti={content} />;

After:

const client = new GraphClient();
const items = await client.getContentByPath('/en/home');

return <OptimizelyComponent opti={items[0]} />;

With two parameters

The same method accepts a second parameter (options) where you can pass options to include or exclude variations.

If you want to get all the variations for the path:

const items = await client.getContentByPath('/en/home', {
  variation: { include: 'ALL' },
});

If you want to get certain variations (for example, if you want to get the content with variation ID equal to variation2):

const items = await client.getContentByPath('/en/home', {
  variation: { include: 'SOME', value: ['variation2'] },
});

When using include: SOME, the original variation is not included by default. To include the original, pass the flag includeOriginal: true:

const items = await client.getContentByPath('/en/home', {
  variation: {
    include: 'SOME',
    value: ['variation2'],
    includeOriginal: true,
  },
});

New GraphClient.getPreviewContent method

This method has the same API as the old fetchPreviewContent

client.getPreviewContent((await searchParams) as PreviewParams);

You don't need to make any change to support previewing variations