- expect(screen.getByText('strikethrough text').tagName.toLowerCase()).toBe(
- 's'
- );
+ expect(screen.getByText('strikethrough text').tagName.toLowerCase()).toBe('s');
});
});
diff --git a/packages/optimizely-cms-sdk/src/react/__test__/assetsUtils.test.tsx b/packages/optimizely-cms-sdk/src/react/__test__/assetsUtils.test.tsx
index d0c9f396..4a8189f0 100644
--- a/packages/optimizely-cms-sdk/src/react/__test__/assetsUtils.test.tsx
+++ b/packages/optimizely-cms-sdk/src/react/__test__/assetsUtils.test.tsx
@@ -155,9 +155,7 @@ describe('getPreviewUtils', () => {
});
const result = utils.src(assetWithDefaultUrl);
- expect(result).toBe(
- 'https://example.com/default-image.jpg?preview_token=test-token-456',
- );
+ expect(result).toBe('https://example.com/default-image.jpg?preview_token=test-token-456');
});
it('should handle string URL input', () => {
@@ -174,9 +172,7 @@ describe('getPreviewUtils', () => {
});
const result = utils.src('https://example.com/image.jpg');
- expect(result).toBe(
- 'https://example.com/image.jpg?preview_token=test-token-123',
- );
+ expect(result).toBe('https://example.com/image.jpg?preview_token=test-token-123');
});
it('should return empty string for null input', () => {
@@ -232,9 +228,7 @@ describe('getPreviewUtils', () => {
});
const result = utils.src('https://example.com/image.jpg?width=500');
- expect(result).toBe(
- 'https://example.com/image.jpg?width=500&preview_token=test-token-123',
- );
+ expect(result).toBe('https://example.com/image.jpg?width=500&preview_token=test-token-123');
});
it('should prefer url.default over item.Url when both exist', () => {
@@ -310,11 +304,7 @@ describe('getPreviewUtils', () => {
expect(result).toBeDefined();
const entries = result!.split(', ');
- expect(
- entries.every((entry: string) =>
- entry.includes('preview_token=test-token-456'),
- ),
- ).toBe(true);
+ expect(entries.every((entry: string) => entry.includes('preview_token=test-token-456'))).toBe(true);
});
it('should deduplicate renditions with same width', () => {
@@ -337,11 +327,7 @@ describe('getPreviewUtils', () => {
expect(result).toBeDefined();
const entries = result!.split(', ');
- expect(
- entries.every((entry: string) =>
- entry.includes('preview_token=test-token-123'),
- ),
- ).toBe(true);
+ expect(entries.every((entry: string) => entry.includes('preview_token=test-token-123'))).toBe(true);
});
it('should return undefined for null ContentReference', () => {
@@ -473,11 +459,7 @@ describe('getPreviewUtils', () => {
expect(result).toBeDefined();
const entries = result!.split(', ');
- expect(
- entries.every((entry: string) =>
- entry.includes('preview_token=test-token-123'),
- ),
- ).toBe(true);
+ expect(entries.every((entry: string) => entry.includes('preview_token=test-token-123'))).toBe(true);
});
it('should extract alt text using getAlt from damAssets', () => {
diff --git a/packages/optimizely-cms-sdk/src/react/__test__/attribute-conversion.test.tsx b/packages/optimizely-cms-sdk/src/react/__test__/attribute-conversion.test.tsx
index 10c05e0a..173246ea 100644
--- a/packages/optimizely-cms-sdk/src/react/__test__/attribute-conversion.test.tsx
+++ b/packages/optimizely-cms-sdk/src/react/__test__/attribute-conversion.test.tsx
@@ -9,12 +9,9 @@ describe('Attribute Conversion to React Props', () => {
it('should convert class to className', () => {
const TestComponent = createHtmlComponent('div');
const { container } = render(
-
+
Test
-
+ ,
);
const divElement = container.querySelector('div');
@@ -31,7 +28,7 @@ describe('Attribute Conversion to React Props', () => {
border: '1',
}}
element={{ type: 'table', children: [] }}
- />
+ />,
);
const tableElement = container.querySelector('table');
@@ -52,7 +49,7 @@ describe('Attribute Conversion to React Props', () => {
'custom-attr': 'value', // Should stay as-is (not a known HTML attribute)
}}
element={{ type: 'div', children: [] }}
- />
+ />,
);
const divElement = container.querySelector('div');
@@ -80,7 +77,7 @@ describe('Attribute Conversion to React Props', () => {
spellcheck: 'false',
}}
element={{ type: 'div', children: [] }}
- />
+ />,
);
const divElement = container.querySelector('div');
@@ -99,7 +96,7 @@ describe('Attribute Conversion to React Props', () => {
'data-multi-word': 'test',
}}
element={{ type: 'div', children: [] }}
- />
+ />,
);
const divElement = container.querySelector('div');
diff --git a/packages/optimizely-cms-sdk/src/react/client.tsx b/packages/optimizely-cms-sdk/src/react/client.tsx
index 39af0b2f..96f25c64 100644
--- a/packages/optimizely-cms-sdk/src/react/client.tsx
+++ b/packages/optimizely-cms-sdk/src/react/client.tsx
@@ -31,8 +31,7 @@ export function PreviewComponent() {
};
window.addEventListener('optimizely:cms:contentSaved', handler);
- return () =>
- window.removeEventListener('optimizely:cms:contentSaved', handler);
+ return () => window.removeEventListener('optimizely:cms:contentSaved', handler);
}, []);
return null;
diff --git a/packages/optimizely-cms-sdk/src/react/context/__test__/contextWrapper.test.tsx b/packages/optimizely-cms-sdk/src/react/context/__test__/contextWrapper.test.tsx
index bfe8d3cb..12557c78 100644
--- a/packages/optimizely-cms-sdk/src/react/context/__test__/contextWrapper.test.tsx
+++ b/packages/optimizely-cms-sdk/src/react/context/__test__/contextWrapper.test.tsx
@@ -13,14 +13,10 @@ beforeEach(() => {
describe('withAppContext', () => {
describe('Basic HOC functionality', () => {
test('should wrap component and render it', async () => {
- const TestComponent = ({ testProp }: { testProp: string }) => (
- {testProp}
- );
+ const TestComponent = ({ testProp }: { testProp: string }) => {testProp}
;
const WrappedComponent = withAppContext(TestComponent);
- const { findByTestId } = render(
- await WrappedComponent({ testProp: 'test-value' }),
- );
+ const { findByTestId } = render(await WrappedComponent({ testProp: 'test-value' }));
const element = await findByTestId('test-component');
expect(element).toBeDefined();
@@ -36,9 +32,7 @@ describe('withAppContext', () => {
);
const WrappedComponent = withAppContext(TestComponent);
- const { container } = render(
- await WrappedComponent({ name: 'John', age: 30, active: true }),
- );
+ const { container } = render(await WrappedComponent({ name: 'John', age: 30, active: true }));
expect(container.textContent).toBe('John-30-true');
});
@@ -48,7 +42,7 @@ describe('withAppContext', () => {
test('should initialize empty context', async () => {
const TestComponent = () => {
const data = getContext();
- return {JSON.stringify(data)}
;
+ return {JSON.stringify(data)}
;
};
const WrappedComponent = withAppContext(TestComponent);
@@ -61,15 +55,13 @@ describe('withAppContext', () => {
test('should provide fresh context for each wrapped component', async () => {
const TestComponent = () => {
const data = getContext();
- return {data?.previewToken || 'empty'}
;
+ return {data?.previewToken || 'empty'}
;
};
const WrappedComponent = withAppContext(TestComponent);
// First render
- const { findByTestId: findByTestId1 } = render(
- await WrappedComponent({}),
- );
+ const { findByTestId: findByTestId1 } = render(await WrappedComponent({}));
const element1 = await findByTestId1('result');
expect(element1.textContent).toBe('empty');
});
@@ -81,9 +73,7 @@ describe('withAppContext', () => {
const data = getContext();
return (
-
- {Object.keys(data || {}).length === 0 ? 'empty' : 'has-data'}
-
+ {Object.keys(data || {}).length === 0 ? 'empty' : 'has-data'}
);
};
@@ -99,11 +89,7 @@ describe('withAppContext', () => {
const TestComponent = () => {
// Components can call getContext()
const data = getContext();
- return (
-
- {typeof data === 'object' ? 'object' : 'undefined'}
-
- );
+ return {typeof data === 'object' ? 'object' : 'undefined'}
;
};
const WrappedComponent = withAppContext(TestComponent);
@@ -127,22 +113,14 @@ describe('withAppContext', () => {
const InfoComponent = () => {
const data = getContext();
- return (
-
- {data?.previewToken
- ? 'preview mode'
- : 'getPreviewContent not called'}
-
- );
+ return {data?.previewToken ? 'preview mode' : 'getPreviewContent not called'}
;
};
const WrappedComponent = withAppContext(InfoComponent);
const { findByTestId } = render(await WrappedComponent({}));
// Without getPreviewContent being called, no preview data exists
- expect((await findByTestId('info')).textContent).toBe(
- 'getPreviewContent not called',
- );
+ expect((await findByTestId('info')).textContent).toBe('getPreviewContent not called');
});
});
});
diff --git a/packages/optimizely-cms-sdk/src/react/context/contextWrapper.tsx b/packages/optimizely-cms-sdk/src/react/context/contextWrapper.tsx
index 6e4a13be..b55f4090 100644
--- a/packages/optimizely-cms-sdk/src/react/context/contextWrapper.tsx
+++ b/packages/optimizely-cms-sdk/src/react/context/contextWrapper.tsx
@@ -1,9 +1,5 @@
import React from 'react';
-import {
- configureAdapter,
- hasAdapter,
- initializeRequestContext,
-} from '../../context/config.js';
+import { configureAdapter, hasAdapter, initializeRequestContext } from '../../context/config.js';
import ReactContextAdapter from '../../context/reactContextAdapter.js';
// Configure the React adapter only if no custom adapter has been set
@@ -46,9 +42,7 @@ if (!hasAdapter()) {
* export default withAppContext(MyPage);
* ```
*/
-export function withAppContext(
- Component: React.ComponentType
,
-) {
+export function withAppContext
(Component: React.ComponentType
) {
return async function WrappedWithContext(props: P) {
// Initialize context for this request
initializeRequestContext();
diff --git a/packages/optimizely-cms-sdk/src/react/richText/component.tsx b/packages/optimizely-cms-sdk/src/react/richText/component.tsx
index a73c31ae..7c25faab 100644
--- a/packages/optimizely-cms-sdk/src/react/richText/component.tsx
+++ b/packages/optimizely-cms-sdk/src/react/richText/component.tsx
@@ -1,9 +1,5 @@
import React from 'react';
-import {
- generateDefaultElements,
- generateDefaultLeafs,
- type RichTextProps,
-} from './lib.js';
+import { generateDefaultElements, generateDefaultLeafs, type RichTextProps } from './lib.js';
import { createReactRenderer } from './renderer.js';
/**
diff --git a/packages/optimizely-cms-sdk/src/react/richText/lib.ts b/packages/optimizely-cms-sdk/src/react/richText/lib.ts
index 41bc19da..59b4399a 100644
--- a/packages/optimizely-cms-sdk/src/react/richText/lib.ts
+++ b/packages/optimizely-cms-sdk/src/react/richText/lib.ts
@@ -20,38 +20,33 @@ import { getContextData } from '../../context/config.js';
/**
* React-specific element renderer props (extends shared props with React children)
*/
-export interface ElementRendererProps
- extends BaseElementRendererProps, PropsWithChildren {}
+export interface ElementRendererProps extends BaseElementRendererProps, PropsWithChildren {}
/**
* React-specific props for link elements with type safety
*/
-export interface LinkElementProps
- extends Omit, PropsWithChildren {
+export interface LinkElementProps extends Omit, PropsWithChildren {
element: LinkElement;
}
/**
* React-specific props for image elements with type safety
*/
-export interface ImageElementProps
- extends Omit, PropsWithChildren {
+export interface ImageElementProps extends Omit, PropsWithChildren {
element: ImageElement;
}
/**
* React-specific props for table elements with type safety
*/
-export interface TableElementProps
- extends Omit, PropsWithChildren {
+export interface TableElementProps extends Omit, PropsWithChildren {
element: TableElement;
}
/**
* React-specific props for table cell elements with type safety
*/
-export interface TableCellElementRendererProps
- extends Omit, PropsWithChildren {
+export interface TableCellElementRendererProps extends Omit, PropsWithChildren {
element: TableCellElement;
}
@@ -63,8 +58,7 @@ export type ElementProps = ElementRendererProps;
/**
* React-specific leaf renderer props (extends shared props with React children)
*/
-export interface LeafRendererProps
- extends BaseLeafRendererProps, PropsWithChildren {}
+export interface LeafRendererProps extends BaseLeafRendererProps, PropsWithChildren {}
/**
* Prop type used for custom Leaf components
@@ -94,8 +88,7 @@ export type TableElementRenderer = React.ComponentType;
/**
* React component for rendering table cell elements with type safety
*/
-export type TableCellElementRenderer =
- React.ComponentType;
+export type TableCellElementRenderer = React.ComponentType;
/**
* React component for rendering Slate text leaves
@@ -116,9 +109,7 @@ export type LeafMap = BaseLeafMap;
* React-specific RichText props
*/
export interface RichTextProps
- extends
- RichTextPropsBase,
- Omit, 'content'> {}
+ extends RichTextPropsBase, Omit, 'content'> {}
/**
* Maps HTML attribute names to React JSX attribute names
@@ -410,10 +401,7 @@ const HTML_ATTRIBUTE_ELEMENTS = new Set(['table', 'img', 'input', 'canvas']);
* Converts framework-agnostic attributes to React props
* Handles HTML attribute to React JSX attribute conversion and CSS properties
*/
-export function toReactProps(
- attributes: Record,
- elementType?: string,
-): Record {
+export function toReactProps(attributes: Record, elementType?: string): Record {
const reactProps: Record = {};
const styleProps: Record = {};
@@ -477,7 +465,7 @@ function parseStyleString(styleString: string): Record {
return styleObj;
}
- styleString.split(';').forEach((declaration) => {
+ styleString.split(';').forEach(declaration => {
const colonIndex = declaration.indexOf(':');
if (colonIndex === -1) return;
@@ -509,9 +497,7 @@ export function createHtmlComponent(
const mergedProps = {
...reactProps,
...config.attributes,
- className:
- [reactProps.className, config.className].filter(Boolean).join(' ') ||
- undefined,
+ className: [reactProps.className, config.className].filter(Boolean).join(' ') || undefined,
};
// We don't pass children to self-closing elements
@@ -533,11 +519,7 @@ export function createLinkComponent(
tag: T = 'a' as T,
config: HtmlComponentConfig = {},
): LinkElementRenderer {
- const Component: LinkElementRenderer = ({
- children,
- attributes,
- element,
- }) => {
+ const Component: LinkElementRenderer = ({ children, attributes, element }) => {
// Convert to React props and merge with config
const reactProps = toReactProps(attributes || {}, tag as string);
@@ -553,9 +535,7 @@ export function createLinkComponent(
...reactProps,
...linkProps,
...config.attributes,
- className:
- [reactProps.className, config.className].filter(Boolean).join(' ') ||
- undefined,
+ className: [reactProps.className, config.className].filter(Boolean).join(' ') || undefined,
};
return React.createElement(tag, mergedProps, children);
@@ -572,11 +552,7 @@ export function createImageComponent(
tag: T = 'img' as T,
config: HtmlComponentConfig = {},
): ImageElementRenderer {
- const Component: ImageElementRenderer = ({
- children,
- attributes,
- element,
- }) => {
+ const Component: ImageElementRenderer = ({ children, attributes, element }) => {
// Convert to React props and merge with config
const reactProps = toReactProps(attributes || {}, tag as string);
@@ -606,9 +582,7 @@ export function createImageComponent(
...reactProps,
...imageProps,
...config.attributes,
- className:
- [reactProps.className, config.className].filter(Boolean).join(' ') ||
- undefined,
+ className: [reactProps.className, config.className].filter(Boolean).join(' ') || undefined,
};
// Image elements are self-closing and cannot have children
@@ -626,20 +600,14 @@ export function createTableComponent(
tag: T = 'table' as T,
config: HtmlComponentConfig = {},
): TableElementRenderer {
- const Component: TableElementRenderer = ({
- children,
- attributes,
- element,
- }) => {
+ const Component: TableElementRenderer = ({ children, attributes, element }) => {
// Convert to React props and merge with config
const reactProps = toReactProps(attributes || {}, tag as string);
const mergedProps = {
...reactProps,
...config.attributes,
- className:
- [reactProps.className, config.className].filter(Boolean).join(' ') ||
- undefined,
+ className: [reactProps.className, config.className].filter(Boolean).join(' ') || undefined,
};
return React.createElement(tag, mergedProps, children);
@@ -656,20 +624,14 @@ export function createTableCellComponent(
tag: T,
config: HtmlComponentConfig = {},
): TableCellElementRenderer {
- const Component: TableCellElementRenderer = ({
- children,
- attributes,
- element,
- }) => {
+ const Component: TableCellElementRenderer = ({ children, attributes, element }) => {
// Convert to React props and merge with config
const reactProps = toReactProps(attributes || {});
const mergedProps = {
...reactProps,
...config.attributes,
- className:
- [reactProps.className, config.className].filter(Boolean).join(' ') ||
- undefined,
+ className: [reactProps.className, config.className].filter(Boolean).join(' ') || undefined,
};
return React.createElement(tag, mergedProps, children);
@@ -692,9 +654,7 @@ export function createLeafComponent(
const mergedProps = {
...reactProps,
...config.attributes,
- className:
- [reactProps.className, config.className].filter(Boolean).join(' ') ||
- undefined,
+ className: [reactProps.className, config.className].filter(Boolean).join(' ') || undefined,
};
return React.createElement(tag, mergedProps, children);
@@ -714,40 +674,22 @@ export function generateDefaultElements(): ElementMap {
// Use specialized components for specific element types
switch (type) {
case 'link':
- elementMap[type] = createLinkComponent(
- 'a',
- config.config,
- ) as ElementRenderer;
+ elementMap[type] = createLinkComponent('a', config.config) as ElementRenderer;
break;
case 'image':
- elementMap[type] = createImageComponent(
- 'img',
- config.config,
- ) as ElementRenderer;
+ elementMap[type] = createImageComponent('img', config.config) as ElementRenderer;
break;
case 'table':
- elementMap[type] = createTableComponent(
- 'table',
- config.config,
- ) as ElementRenderer;
+ elementMap[type] = createTableComponent('table', config.config) as ElementRenderer;
break;
case 'td':
- elementMap[type] = createTableCellComponent(
- 'td',
- config.config,
- ) as ElementRenderer;
+ elementMap[type] = createTableCellComponent('td', config.config) as ElementRenderer;
break;
case 'th':
- elementMap[type] = createTableCellComponent(
- 'th',
- config.config,
- ) as ElementRenderer;
+ elementMap[type] = createTableCellComponent('th', config.config) as ElementRenderer;
break;
default:
- elementMap[type] = createHtmlComponent(
- config.tag as keyof JSX.IntrinsicElements,
- config.config,
- );
+ elementMap[type] = createHtmlComponent(config.tag as keyof JSX.IntrinsicElements, config.config);
break;
}
});
diff --git a/packages/optimizely-cms-sdk/src/react/richText/renderer.ts b/packages/optimizely-cms-sdk/src/react/richText/renderer.ts
index 3c64ab39..e677c329 100644
--- a/packages/optimizely-cms-sdk/src/react/richText/renderer.ts
+++ b/packages/optimizely-cms-sdk/src/react/richText/renderer.ts
@@ -1,13 +1,6 @@
import React, { type ReactNode } from 'react';
-import {
- BaseRichTextRenderer,
- type BaseRendererConfig,
-} from '../../components/richText/base.js';
-import {
- type RenderNode,
- type Node,
- createElementData,
-} from '../../components/richText/renderer.js';
+import { BaseRichTextRenderer, type BaseRendererConfig } from '../../components/richText/base.js';
+import { type RenderNode, type Node, createElementData } from '../../components/richText/renderer.js';
import {
generateDefaultElements,
generateDefaultLeafs,
@@ -28,11 +21,7 @@ export interface ReactRendererConfig extends BaseRendererConfig {
/**
* React implementation of the rich text renderer using the base class
*/
-export class ReactRichTextRenderer extends BaseRichTextRenderer<
- ElementRenderer,
- LeafRenderer,
- ReactNode
-> {
+export class ReactRichTextRenderer extends BaseRichTextRenderer {
private elements: ElementMap;
private leafs: LeafMap;
@@ -40,13 +29,9 @@ export class ReactRichTextRenderer extends BaseRichTextRenderer<
super(config);
// Convert custom element keys to lowercase for consistent lookup
- const lowercaseElements = config.elements
- ? Object.fromEntries(
- Object.entries(config.elements).map(([key, value]) => [
- key.toLowerCase(),
- value,
- ]),
- )
+ const lowercaseElements =
+ config.elements ?
+ Object.fromEntries(Object.entries(config.elements).map(([key, value]) => [key.toLowerCase(), value]))
: {};
this.elements = {
@@ -55,13 +40,9 @@ export class ReactRichTextRenderer extends BaseRichTextRenderer<
};
// Convert custom leaf keys to lowercase for consistent lookup
- const lowercaseLeafs = config.leafs
- ? Object.fromEntries(
- Object.entries(config.leafs).map(([key, value]) => [
- key.toLowerCase(),
- value,
- ]),
- )
+ const lowercaseLeafs =
+ config.leafs ?
+ Object.fromEntries(Object.entries(config.leafs).map(([key, value]) => [key.toLowerCase(), value]))
: {};
this.leafs = {
@@ -81,27 +62,16 @@ export class ReactRichTextRenderer extends BaseRichTextRenderer<
/**
* Create a React element from a render node
*/
- protected createElement(
- node: RenderNode,
- children: ReactNode[],
- index: number,
- ): ReactNode {
+ protected createElement(node: RenderNode, children: ReactNode[], index: number): ReactNode {
// Normalize element type to lowercase for consistent lookup
const normalizedElementType = node.elementType!.toLowerCase();
- const ElementComponent =
- this.elements[normalizedElementType] ||
- this.getDefaultElement(normalizedElementType);
+ const ElementComponent = this.elements[normalizedElementType] || this.getDefaultElement(normalizedElementType);
- const elementData = createElementData(
- normalizedElementType,
- node.attributes,
- );
+ const elementData = createElementData(normalizedElementType, node.attributes);
// Extract text content from render nodes
- const textContent = node.children
- ? this.extractTextFromRenderNodes(node.children)
- : '';
+ const textContent = node.children ? this.extractTextFromRenderNodes(node.children) : '';
// Create the React element with enhanced props
return React.createElement(
@@ -135,8 +105,7 @@ export class ReactRichTextRenderer extends BaseRichTextRenderer<
const mark = node.marks[markIndex];
// Normalize mark to lowercase for consistent lookup
const normalizedMark = mark.toLowerCase();
- const LeafComponent =
- this.leafs[normalizedMark] || this.getDefaultLeaf(normalizedMark);
+ const LeafComponent = this.leafs[normalizedMark] || this.getDefaultLeaf(normalizedMark);
// Create leaf data
const leafData = {
@@ -164,7 +133,7 @@ export class ReactRichTextRenderer extends BaseRichTextRenderer<
*/
private extractTextFromRenderNodes(nodes: RenderNode[]): string {
return nodes
- .map((node) => {
+ .map(node => {
if (node.type === 'text') {
return this.decodeEntities(node.content || '');
} else if (node.children) {
@@ -200,8 +169,6 @@ export class ReactRichTextRenderer extends BaseRichTextRenderer<
/**
* Factory function to create a React renderer
*/
-export function createReactRenderer(
- config?: Partial,
-): ReactRichTextRenderer {
+export function createReactRenderer(config?: Partial): ReactRichTextRenderer {
return new ReactRichTextRenderer(config);
}
diff --git a/packages/optimizely-cms-sdk/src/react/server.tsx b/packages/optimizely-cms-sdk/src/react/server.tsx
index e4e12151..fce8e36d 100644
--- a/packages/optimizely-cms-sdk/src/react/server.tsx
+++ b/packages/optimizely-cms-sdk/src/react/server.tsx
@@ -1,8 +1,5 @@
import React, { ReactNode } from 'react';
-import {
- ComponentRegistry,
- ComponentResolverOrObject,
-} from '../render/componentRegistry.js';
+import { ComponentRegistry, ComponentResolverOrObject } from '../render/componentRegistry.js';
import { JSX } from 'react';
import {
ExperienceStructureNode,
@@ -104,24 +101,15 @@ type OptimizelyComponentProps = {
displaySettings?: Record;
};
-export async function OptimizelyComponent({
- content,
- displaySettings,
- ...props
-}: OptimizelyComponentProps) {
+export async function OptimizelyComponent({ content, displaySettings, ...props }: OptimizelyComponentProps) {
if (!content) {
- throw new OptimizelyReactError(
- 'OptimizelyComponent requires a valid content prop. Received null or undefined.',
- );
+ throw new OptimizelyReactError('OptimizelyComponent requires a valid content prop. Received null or undefined.');
}
if (!componentRegistry) {
- throw new OptimizelyReactError(
- 'You should call `initReactComponentRegistry` first',
- );
+ throw new OptimizelyReactError('You should call `initReactComponentRegistry` first');
}
- const dtKey =
- content.__composition?.displayTemplateKey ?? content.displayTemplateKey;
+ const dtKey = content.__composition?.displayTemplateKey ?? content.displayTemplateKey;
const Component = await componentRegistry.getComponent(content.__typename, {
tag: content.__tag ?? getDisplayTemplateTag(dtKey),
});
@@ -138,13 +126,7 @@ export async function OptimizelyComponent({
...content,
};
- return (
-
- );
+ return ;
}
export type StructureContainerProps = {
@@ -158,12 +140,8 @@ export type ComponentContainerProps = {
children: React.ReactNode;
displaySettings?: Record;
};
-export type StructureContainer = (
- props: StructureContainerProps,
-) => JSX.Element;
-export type ComponentContainer = (
- props: ComponentContainerProps,
-) => JSX.Element;
+export type StructureContainer = (props: StructureContainerProps) => JSX.Element;
+export type ComponentContainer = (props: ComponentContainerProps) => JSX.Element;
export function OptimizelyComposition({
nodes,
@@ -172,7 +150,7 @@ export function OptimizelyComposition({
nodes: ExperienceNode[];
ComponentWrapper?: ComponentContainer;
}) {
- return nodes.map((node) => {
+ return nodes.map(node => {
const tag = getDisplayTemplateTag(node.displayTemplateKey);
const parsedDisplaySettings = parseDisplaySettings(node.displaySettings);
@@ -180,11 +158,7 @@ export function OptimizelyComposition({
const Wrapper = ComponentWrapper ?? React.Fragment;
return (
-
+
- {children}
-
- ) : null;
+ return isDev() ?
+
+ {children}
+
+ : null;
}
type OptimizelyGridSectionProps = {
@@ -263,11 +237,7 @@ const fallbacks: Record = {
column: FallbackColumn,
};
-export function OptimizelyGridSection({
- nodes,
- row,
- column,
-}: OptimizelyGridSectionProps) {
+export function OptimizelyGridSection({ nodes, row, column }: OptimizelyGridSectionProps) {
const locallyDefined: Record = {
row,
column,
@@ -310,17 +280,8 @@ export function OptimizelyGridSection({
React.Fragment;
return (
-
-
+
+
);
});
@@ -364,9 +325,7 @@ export function getPreviewUtils(content: OptimizelyComponentProps['content']) {
* />
* ```
*/
- src(
- input: InferredContentReference | string | null | undefined,
- ): string | undefined {
+ src(input: InferredContentReference | string | null | undefined): string | undefined {
const previewToken = content.__context?.preview_token;
// if input is an object with a URL
diff --git a/packages/optimizely-cms-sdk/src/render/assets.ts b/packages/optimizely-cms-sdk/src/render/assets.ts
index 19c6ae09..5c8a5fff 100644
--- a/packages/optimizely-cms-sdk/src/render/assets.ts
+++ b/packages/optimizely-cms-sdk/src/render/assets.ts
@@ -1,9 +1,5 @@
import type { InferredContentReference } from '../infer.js';
-import type {
- PublicImageAsset,
- PublicVideoAsset,
- PublicRawFileAsset,
-} from '../model/assets.js';
+import type { PublicImageAsset, PublicVideoAsset, PublicRawFileAsset } from '../model/assets.js';
import { appendToken } from '../util/preview.js';
/**
@@ -27,7 +23,7 @@ function appendPreviewTokenToRenditions(
if (result.item && 'Renditions' in result.item && result.item.Renditions) {
result.item = {
...result.item,
- Renditions: result.item.Renditions.map((r) => ({
+ Renditions: result.item.Renditions.map(r => ({
...r,
Url: r.Url ? appendToken(r.Url, previewToken) : r.Url,
})),
@@ -81,12 +77,9 @@ export function getSrcset>(
const previewToken = content?.__context?.preview_token;
// Apply preview token to renditions if provided
- const processedInput = previewToken
- ? appendPreviewTokenToRenditions(input, previewToken)
- : input;
+ const processedInput = previewToken ? appendPreviewTokenToRenditions(input, previewToken) : input;
- if (!processedInput?.item || !('Renditions' in processedInput.item))
- return undefined;
+ if (!processedInput?.item || !('Renditions' in processedInput.item)) return undefined;
const renditions = processedInput.item.Renditions;
if (!renditions || renditions.length === 0) return undefined;
@@ -95,14 +88,14 @@ export function getSrcset>(
const seenWidths = new Set();
const srcsetEntries = renditions
- .filter((r) => {
+ .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) => `${r.Url!} ${r.Width}w`);
+ .map(r => `${r.Url!} ${r.Width}w`);
return srcsetEntries.length > 0 ? srcsetEntries.join(', ') : undefined;
}
@@ -144,10 +137,7 @@ export function getSrcset>(
* ![{getAlt(content.icon)}]()
// Will be alt="" if no AltText exists
* ```
*/
-export function getAlt(
- input: InferredContentReference | null | undefined,
- fallback: string = '',
-): string {
+export function getAlt(input: InferredContentReference | null | undefined, fallback: string = ''): string {
if (!input) return fallback;
if (input.item && 'AltText' in input.item) {
@@ -296,14 +286,8 @@ export function isDamRawFileAsset(
* }
* ```
*/
-export function isDamAsset(
- property: InferredContentReference | null | undefined,
-): boolean {
- return (
- isDamImageAsset(property) ||
- isDamVideoAsset(property) ||
- isDamRawFileAsset(property)
- );
+export function isDamAsset(property: InferredContentReference | null | undefined): boolean {
+ return isDamImageAsset(property) || isDamVideoAsset(property) || isDamRawFileAsset(property);
}
/**
@@ -397,12 +381,9 @@ export function getDamAssetType(
* }
* ```
*/
-export function damAssets>(
- content: T & { __context?: { preview_token?: string } },
-) {
+export function damAssets>(content: T & { __context?: { preview_token?: string } }) {
return {
- getSrcset: (property: InferredContentReference | null | undefined) =>
- getSrcset(content, property),
+ getSrcset: (property: InferredContentReference | null | undefined) => getSrcset(content, property),
getAlt,
getDamAssetType,
isDamImageAsset,
diff --git a/packages/optimizely-cms-sdk/src/render/componentRegistry.ts b/packages/optimizely-cms-sdk/src/render/componentRegistry.ts
index 61b0cca8..8adf0bf2 100644
--- a/packages/optimizely-cms-sdk/src/render/componentRegistry.ts
+++ b/packages/optimizely-cms-sdk/src/render/componentRegistry.ts
@@ -37,10 +37,7 @@ type ResolverOptions = {
* implement custom logic for component resolution, such as lazy loading, conditional
* rendering, or dynamic imports.
*/
-type ComponentResolver = (
- contentType: string,
- options?: ResolverOptions
-) => C | undefined;
+type ComponentResolver = (contentType: string, options?: ResolverOptions) => C | undefined;
/** Object mapping a content type name to a {@linkcode ComponentEntry} */
type ComponentMap = Record>;
@@ -60,10 +57,7 @@ function getDefaultComponent(entry: ComponentEntry): C | undefined {
}
/** Returns a component matching a tag in a {@linkcode ComponentEntry} */
-function getTagComponent(
- entry: ComponentEntry,
- tag: string
-): C | undefined {
+function getTagComponent(entry: ComponentEntry, tag: string): C | undefined {
if (!hasVariants(entry)) {
return undefined;
}
@@ -75,9 +69,7 @@ function getTagComponent(
* Defines the component resolver as a function {@linkcode ComponentResolver}
* or as an object {@linkcode ComponentMap}
*/
-export type ComponentResolverOrObject =
- | ComponentResolver
- | ComponentMap;
+export type ComponentResolverOrObject = ComponentResolver | ComponentMap;
/** A registry mapping content type names and components */
export class ComponentRegistry {
@@ -88,10 +80,7 @@ export class ComponentRegistry {
}
/** Returns the component given its content type name. Returns `undefined` if not found */
- getComponent(
- contentType: string,
- options: ResolverOptions = {}
- ): T | undefined {
+ getComponent(contentType: string, options: ResolverOptions = {}): T | undefined {
if (typeof this.resolver === 'function') {
return this.resolver(contentType, options);
}
diff --git a/packages/optimizely-cms-sdk/src/util/baseTypeUtil.ts b/packages/optimizely-cms-sdk/src/util/baseTypeUtil.ts
index 1e8f9d30..e82eb5ab 100644
--- a/packages/optimizely-cms-sdk/src/util/baseTypeUtil.ts
+++ b/packages/optimizely-cms-sdk/src/util/baseTypeUtil.ts
@@ -1,10 +1,5 @@
import { ExperienceComponentNode, ExperienceNode } from '../infer.js';
-import {
- AnyContentType,
- MEDIA_BASE_TYPES,
- PermittedTypes,
- MediaStringTypes,
-} from '../model/contentTypes.js';
+import { AnyContentType, MEDIA_BASE_TYPES, PermittedTypes, MediaStringTypes } from '../model/contentTypes.js';
/**
* Get the key or name of ContentType or Media type
@@ -78,8 +73,6 @@ export function buildBaseTypeFragments() {
};
}
-export function isComponentNode(
- node: ExperienceNode,
-): node is ExperienceComponentNode {
+export function isComponentNode(node: ExperienceNode): node is ExperienceComponentNode {
return node.__typename === 'CompositionComponentNode';
}
diff --git a/packages/optimizely-cms-sdk/src/util/environment.ts b/packages/optimizely-cms-sdk/src/util/environment.ts
index 78b0d7dc..1dd64c77 100644
--- a/packages/optimizely-cms-sdk/src/util/environment.ts
+++ b/packages/optimizely-cms-sdk/src/util/environment.ts
@@ -1,6 +1,4 @@
// A simple function to check for the development environment.
export function isDev(): boolean {
- return (
- typeof process !== 'undefined' && process.env?.NODE_ENV === 'development'
- );
+ return typeof process !== 'undefined' && process.env?.NODE_ENV === 'development';
}
diff --git a/packages/optimizely-cms-sdk/src/util/fragmentConstraintChecks.ts b/packages/optimizely-cms-sdk/src/util/fragmentConstraintChecks.ts
index daf43cc0..6fa9652e 100644
--- a/packages/optimizely-cms-sdk/src/util/fragmentConstraintChecks.ts
+++ b/packages/optimizely-cms-sdk/src/util/fragmentConstraintChecks.ts
@@ -24,10 +24,8 @@ function areItemConstraintsMissing(property: AnyProperty): boolean {
return (
property.type === 'array' &&
!(
- ('allowedTypes' in property.items &&
- property.items.allowedTypes?.length) ||
- ('restrictedTypes' in property.items &&
- property.items.restrictedTypes?.length)
+ ('allowedTypes' in property.items && property.items.allowedTypes?.length) ||
+ ('restrictedTypes' in property.items && property.items.restrictedTypes?.length)
)
);
}
@@ -51,8 +49,7 @@ export function checkTypeConstraintIssues(
maxFragmentThreshold: number = 100,
): string | null {
if (
- (arePropertyConstraintsMissing(property) ||
- areItemConstraintsMissing(property)) &&
+ (arePropertyConstraintsMissing(property) || areItemConstraintsMissing(property)) &&
result.extraFragments.length > maxFragmentThreshold
) {
return (
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c41ae20b..f5e2962e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,15 @@ importers:
lerna:
specifier: ^8.2.2
version: 8.2.2(encoding@0.1.13)
+ prettier:
+ specifier: 3.8.3
+ version: 3.8.3
+ pretty-quick:
+ specifier: ^4.2.2
+ version: 4.2.2(prettier@3.8.3)
+ simple-git-hooks:
+ specifier: ^2.13.1
+ version: 2.13.1
__test__/cli-runtime-test:
dependencies:
@@ -1580,6 +1589,10 @@ packages:
resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
engines: {node: '>=14'}
+ '@pkgr/core@0.2.9':
+ resolution: {integrity: sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==}
+ engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+
'@redocly/config@0.22.0':
resolution: {integrity: sha512-gAy93Ddo01Z3bHuVdPWfCwzgfaYgMdaZPcfL7JZ7hWJoK9V0lXDbigTWkhiPFAaLWzbOJ+kbUQG1+XwIm0KRGQ==}
@@ -3911,6 +3924,10 @@ packages:
resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
engines: {node: '>= 4'}
+ ignore@7.0.5:
+ resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
+ engines: {node: '>= 4'}
+
import-fresh@3.3.1:
resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
engines: {node: '>=6'}
@@ -4716,6 +4733,10 @@ packages:
resolution: {integrity: sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==}
engines: {node: '>=0.10.0'}
+ mri@1.2.0:
+ resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
+ engines: {node: '>=4'}
+
ms@2.1.3:
resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
@@ -5180,6 +5201,13 @@ packages:
resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==}
engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+ pretty-quick@4.2.2:
+ resolution: {integrity: sha512-uAh96tBW1SsD34VhhDmWuEmqbpfYc/B3j++5MC/6b3Cb8Ow7NJsvKFhg0eoGu2xXX+o9RkahkTK6sUdd8E7g5w==}
+ engines: {node: '>=14'}
+ hasBin: true
+ peerDependencies:
+ prettier: ^3.0.0
+
proc-log@4.2.0:
resolution: {integrity: sha512-g8+OnU/L2v+wyiVK+D5fA34J7EH8jZ8DDlvwhRCMxmMj7UCBvxiO1mGeN+36JXIKF4zevU4kRBd8lVgG9vLelA==}
engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
@@ -5515,6 +5543,10 @@ packages:
resolution: {integrity: sha512-8G+/XDU8wNsJOQS5ysDVO0Etg9/2uA5gR9l4ZwijjlwxBcrU6RPfwi2+jJmbP+Ap1Hlp/nVAaEO4Fj22/SL2gQ==}
engines: {node: ^16.14.0 || >=18.0.0}
+ simple-git-hooks@2.13.1:
+ resolution: {integrity: sha512-WszCLXwT4h2k1ufIXAgsbiTOazqqevFCIncOuUBZJ91DdvWcC5+OFkluWRQPrcuSYd8fjq+o2y1QfWqYMoAToQ==}
+ hasBin: true
+
sisteransi@1.0.5:
resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
@@ -7496,6 +7528,8 @@ snapshots:
'@pkgjs/parseargs@0.11.0':
optional: true
+ '@pkgr/core@0.2.9': {}
+
'@redocly/config@0.22.0': {}
'@redocly/openapi-core@1.34.11(supports-color@10.2.2)':
@@ -10201,6 +10235,8 @@ snapshots:
ignore@5.3.2: {}
+ ignore@7.0.5: {}
+
import-fresh@3.3.1:
dependencies:
parent-module: 1.0.1
@@ -11075,6 +11111,8 @@ snapshots:
modify-values@1.0.1: {}
+ mri@1.2.0: {}
+
ms@2.1.3: {}
multimatch@5.0.0:
@@ -11637,6 +11675,17 @@ snapshots:
ansi-styles: 5.2.0
react-is: 18.3.1
+ pretty-quick@4.2.2(prettier@3.8.3):
+ dependencies:
+ '@pkgr/core': 0.2.9
+ ignore: 7.0.5
+ mri: 1.2.0
+ picocolors: 1.1.1
+ picomatch: 4.0.4
+ prettier: 3.8.3
+ tinyexec: 0.3.2
+ tslib: 2.8.1
+
proc-log@4.2.0: {}
process-nextick-args@2.0.1: {}
@@ -12040,6 +12089,8 @@ snapshots:
transitivePeerDependencies:
- supports-color
+ simple-git-hooks@2.13.1: {}
+
sisteransi@1.0.5: {}
slash@3.0.0: {}
diff --git a/samples/fx-integration/eslint.config.mjs b/samples/fx-integration/eslint.config.mjs
index 719cea2b..60f7af38 100644
--- a/samples/fx-integration/eslint.config.mjs
+++ b/samples/fx-integration/eslint.config.mjs
@@ -1,6 +1,6 @@
-import { dirname } from "path";
-import { fileURLToPath } from "url";
-import { FlatCompat } from "@eslint/eslintrc";
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { FlatCompat } from '@eslint/eslintrc';
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
@@ -10,15 +10,9 @@ const compat = new FlatCompat({
});
const eslintConfig = [
- ...compat.extends("next/core-web-vitals", "next/typescript"),
+ ...compat.extends('next/core-web-vitals', 'next/typescript'),
{
- ignores: [
- "node_modules/**",
- ".next/**",
- "out/**",
- "build/**",
- "next-env.d.ts",
- ],
+ ignores: ['node_modules/**', '.next/**', 'out/**', 'build/**', 'next-env.d.ts'],
},
];
diff --git a/samples/fx-integration/next.config.ts b/samples/fx-integration/next.config.ts
index e9ffa308..5e891cf0 100644
--- a/samples/fx-integration/next.config.ts
+++ b/samples/fx-integration/next.config.ts
@@ -1,4 +1,4 @@
-import type { NextConfig } from "next";
+import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
/* config options here */
diff --git a/samples/fx-integration/src/app/en/[...slug]/page.tsx b/samples/fx-integration/src/app/en/[...slug]/page.tsx
index 802a8b80..d1bb861a 100644
--- a/samples/fx-integration/src/app/en/[...slug]/page.tsx
+++ b/samples/fx-integration/src/app/en/[...slug]/page.tsx
@@ -38,7 +38,7 @@ export default async function Page({ params }: Props) {
.getContentByPath(path, {
variation: { include: 'SOME', value: [variation] },
})
- .then((content) => {
+ .then(content => {
// If no variations are found, try to fetch the original
if (content.length === 0) {
console.log('Variation not found. Fetching original');
diff --git a/samples/fx-integration/src/app/layout.tsx b/samples/fx-integration/src/app/layout.tsx
index d524cee0..56639320 100644
--- a/samples/fx-integration/src/app/layout.tsx
+++ b/samples/fx-integration/src/app/layout.tsx
@@ -1,11 +1,7 @@
import type { Metadata } from 'next';
import { Geist, Geist_Mono } from 'next/font/google';
import './globals.css';
-import {
- BlankExperienceContentType,
- BlankSectionContentType,
- initContentTypeRegistry,
-} from '@optimizely/cms-sdk';
+import { BlankExperienceContentType, BlankSectionContentType, initContentTypeRegistry } from '@optimizely/cms-sdk';
import { initReactComponentRegistry } from '@optimizely/cms-sdk/react/server';
import FxCallToAction, { FxCallToActionCT } from '@/components/FxCallToAction';
import FxCallout, { FxCalloutCT } from '@/components/FxCallout';
@@ -13,9 +9,7 @@ import FxFeature, { FxFeatureCT } from '@/components/FxFeature';
import FxFigure, { FxFigureCT } from '@/components/FxFigure';
import FxHero, { FxHeroContentType } from '@/components/FxHero';
import FxQuote, { FxQuoteCT } from '@/components/FxQuote';
-import FxSectionHeading, {
- FxSectionHeadingCT,
-} from '@/components/FxSectionHeading';
+import FxSectionHeading, { FxSectionHeadingCT } from '@/components/FxSectionHeading';
import BlankExperience from '@/components/BlankExperience';
import BlankSection from '@/components/BlankSection';
@@ -65,10 +59,8 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
-
-
- {children}
-
+
+ {children}
);
}
diff --git a/samples/fx-integration/src/app/preview/page.tsx b/samples/fx-integration/src/app/preview/page.tsx
index de8b2317..d8f9a8fa 100644
--- a/samples/fx-integration/src/app/preview/page.tsx
+++ b/samples/fx-integration/src/app/preview/page.tsx
@@ -16,9 +16,9 @@ async function Page({ searchParams }: Props) {
const content = await client
.getPreviewContent(
// TODO: check types in runtime properly
- (await searchParams) as PreviewParams
+ (await searchParams) as PreviewParams,
)
- .catch((err) => {
+ .catch(err => {
console.log(err.errors);
console.log(err.request.query);
throw err;
@@ -26,9 +26,7 @@ async function Page({ searchParams }: Props) {
return (
<>
-
+
diff --git a/samples/fx-integration/src/components/BlankExperience.tsx b/samples/fx-integration/src/components/BlankExperience.tsx
index 6b9adb08..d79b68c7 100644
--- a/samples/fx-integration/src/components/BlankExperience.tsx
+++ b/samples/fx-integration/src/components/BlankExperience.tsx
@@ -1,9 +1,5 @@
import { BlankExperienceContentType, ContentProps } from '@optimizely/cms-sdk';
-import {
- ComponentContainerProps,
- OptimizelyComposition,
- getPreviewUtils,
-} from '@optimizely/cms-sdk/react/server';
+import { ComponentContainerProps, OptimizelyComposition, getPreviewUtils } from '@optimizely/cms-sdk/react/server';
import css from './components.module.css';
type Props = {
@@ -22,10 +18,7 @@ function ComponentWrapper({ children, node }: ComponentContainerProps) {
export default function BlankExperience({ content }: Props) {
return (
-
+
);
}
diff --git a/samples/fx-integration/src/components/BlankSection.tsx b/samples/fx-integration/src/components/BlankSection.tsx
index 9c7626d1..f5436ae7 100644
--- a/samples/fx-integration/src/components/BlankSection.tsx
+++ b/samples/fx-integration/src/components/BlankSection.tsx
@@ -1,9 +1,5 @@
import { BlankSectionContentType, ContentProps } from '@optimizely/cms-sdk';
-import {
- OptimizelyGridSection,
- StructureContainerProps,
- getPreviewUtils,
-} from '@optimizely/cms-sdk/react/server';
+import { OptimizelyGridSection, StructureContainerProps, getPreviewUtils } from '@optimizely/cms-sdk/react/server';
import css from './components.module.css';
type BlankSectionProps = {
diff --git a/samples/fx-integration/src/components/FxCallToAction.tsx b/samples/fx-integration/src/components/FxCallToAction.tsx
index c7037664..d6611c73 100644
--- a/samples/fx-integration/src/components/FxCallToAction.tsx
+++ b/samples/fx-integration/src/components/FxCallToAction.tsx
@@ -23,10 +23,7 @@ type Props = {
};
export default function FxCallToAction({ content }: Props) {
- const cls = [
- css.FxCallToAction,
- content.appearance && css[content.appearance],
- ].join(' ');
+ const cls = [css.FxCallToAction, content.appearance && css[content.appearance]].join(' ');
return (
{content.text}
diff --git a/samples/fx-integration/tsconfig.json b/samples/fx-integration/tsconfig.json
index b575f7da..61b9d358 100644
--- a/samples/fx-integration/tsconfig.json
+++ b/samples/fx-integration/tsconfig.json
@@ -1,11 +1,7 @@
{
"compilerOptions": {
"target": "ES2017",
- "lib": [
- "dom",
- "dom.iterable",
- "esnext"
- ],
+ "lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
@@ -23,19 +19,9 @@
}
],
"paths": {
- "@/*": [
- "./src/*"
- ]
+ "@/*": ["./src/*"]
}
},
- "include": [
- "next-env.d.ts",
- "**/*.ts",
- "**/*.tsx",
- ".next/types/**/*.ts",
- ".next/dev/types/**/*.ts"
- ],
- "exclude": [
- "node_modules"
- ]
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", ".next/dev/types/**/*.ts"],
+ "exclude": ["node_modules"]
}
diff --git a/samples/graph-webhooks-cache-invalidation/eslint.config.mjs b/samples/graph-webhooks-cache-invalidation/eslint.config.mjs
index 719cea2b..60f7af38 100644
--- a/samples/graph-webhooks-cache-invalidation/eslint.config.mjs
+++ b/samples/graph-webhooks-cache-invalidation/eslint.config.mjs
@@ -1,6 +1,6 @@
-import { dirname } from "path";
-import { fileURLToPath } from "url";
-import { FlatCompat } from "@eslint/eslintrc";
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { FlatCompat } from '@eslint/eslintrc';
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
@@ -10,15 +10,9 @@ const compat = new FlatCompat({
});
const eslintConfig = [
- ...compat.extends("next/core-web-vitals", "next/typescript"),
+ ...compat.extends('next/core-web-vitals', 'next/typescript'),
{
- ignores: [
- "node_modules/**",
- ".next/**",
- "out/**",
- "build/**",
- "next-env.d.ts",
- ],
+ ignores: ['node_modules/**', '.next/**', 'out/**', 'build/**', 'next-env.d.ts'],
},
];
diff --git a/samples/graph-webhooks-cache-invalidation/next.config.ts b/samples/graph-webhooks-cache-invalidation/next.config.ts
index e9ffa308..5e891cf0 100644
--- a/samples/graph-webhooks-cache-invalidation/next.config.ts
+++ b/samples/graph-webhooks-cache-invalidation/next.config.ts
@@ -1,4 +1,4 @@
-import type { NextConfig } from "next";
+import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
/* config options here */
diff --git a/samples/graph-webhooks-cache-invalidation/scripts/create-webhook.mjs b/samples/graph-webhooks-cache-invalidation/scripts/create-webhook.mjs
index f77f570b..c2e4897e 100644
--- a/samples/graph-webhooks-cache-invalidation/scripts/create-webhook.mjs
+++ b/samples/graph-webhooks-cache-invalidation/scripts/create-webhook.mjs
@@ -1,16 +1,6 @@
// Use this script to create a webhook in Optimizely Graph
// Read more: https://docs.developers.optimizely.com/platform-optimizely/reference/create-webhookhandler
-import {
- cancel,
- confirm,
- intro,
- isCancel,
- log,
- outro,
- password,
- spinner,
- text,
-} from '@clack/prompts';
+import { cancel, confirm, intro, isCancel, log, outro, password, spinner, text } from '@clack/prompts';
import 'dotenv/config';
function validate(str) {
@@ -41,9 +31,7 @@ const url = await text({
validate,
}).then(exitIfCancelled);
-log.step(
- 'Go to your CMS > Settings > API Keys. You will need the keys under `Manage Graph`'
-);
+log.step('Go to your CMS > Settings > API Keys. You will need the keys under `Manage Graph`');
const appKey = await password({
message: "Input the 'AppKey'",
@@ -56,12 +44,12 @@ const secret = await password({
}).then(exitIfCancelled);
const prod = await confirm({
- message:
- 'Do you use Optimizely Graph API prod (https://prod.cg.optimizely.com/api)?',
+ message: 'Do you use Optimizely Graph API prod (https://prod.cg.optimizely.com/api)?',
}).then(exitIfCancelled);
-const graphApiUrl = prod
- ? 'https://prod.cg.optimizely.com/api'
+const graphApiUrl =
+ prod ?
+ 'https://prod.cg.optimizely.com/api'
: await text({
message: 'Input the Graph API URL',
placeholder: 'https://prod.cg.optimizely.com/api',
@@ -84,12 +72,10 @@ const requestBody = {
log.step(
`You are going to make a POST request to the endpoint "${endpoint}"\n` +
`with the following body\n\n` +
- JSON.stringify(requestBody, null, 2)
+ JSON.stringify(requestBody, null, 2),
);
-const confirmCreation = await confirm({ message: 'Confirm?' }).then(
- exitIfCancelled
-);
+const confirmCreation = await confirm({ message: 'Confirm?' }).then(exitIfCancelled);
if (!confirmCreation) {
cancel('Operation cancelled');
diff --git a/samples/graph-webhooks-cache-invalidation/scripts/edit-webhook.mjs b/samples/graph-webhooks-cache-invalidation/scripts/edit-webhook.mjs
index 3d90bcb7..dfbb0700 100644
--- a/samples/graph-webhooks-cache-invalidation/scripts/edit-webhook.mjs
+++ b/samples/graph-webhooks-cache-invalidation/scripts/edit-webhook.mjs
@@ -1,17 +1,7 @@
// Use this script to view and delete webhooks in Optimizely Graph
// Read more: https://docs.developers.optimizely.com/platform-optimizely/reference/create-webhookhandler
import { select } from '@clack/prompts';
-import {
- cancel,
- confirm,
- intro,
- isCancel,
- log,
- outro,
- password,
- spinner,
- text,
-} from '@clack/prompts';
+import { cancel, confirm, intro, isCancel, log, outro, password, spinner, text } from '@clack/prompts';
import 'dotenv/config';
function validate(str) {
@@ -38,9 +28,7 @@ async function handleResponse(response) {
intro('View and delete webhooks in Optimizely Graph');
-log.step(
- 'Go to your CMS > Settings > API Keys. You will need the keys under `Manage Graph`'
-);
+log.step('Go to your CMS > Settings > API Keys. You will need the keys under `Manage Graph`');
const appKey = await password({
message: "Input the 'AppKey'",
@@ -53,12 +41,12 @@ const secret = await password({
}).then(exitIfCancelled);
const prod = await confirm({
- message:
- 'Do you use Optimizely Graph API prod (https://prod.cg.optimizely.com/api)?',
+ message: 'Do you use Optimizely Graph API prod (https://prod.cg.optimizely.com/api)?',
}).then(exitIfCancelled);
-const graphApiUrl = prod
- ? 'https://prod.cg.optimizely.com/api'
+const graphApiUrl =
+ prod ?
+ 'https://prod.cg.optimizely.com/api'
: await text({
message: 'Input the Graph API URL',
placeholder: 'https://prod.cg.optimizely.com/api',
@@ -84,7 +72,7 @@ while (true) {
message: 'Select a webhook to delete it',
options: [
{ value: null, label: 'Do not delete any webhook' },
- ...webhooksList.map((w) => ({
+ ...webhooksList.map(w => ({
value: w.id,
label: w.request.url,
})),
@@ -99,7 +87,7 @@ while (true) {
await fetch(`${endpoint}/${selected}`, {
method: 'DELETE',
headers: { Authorization: auth },
- }).then(async (r) => {
+ }).then(async r => {
if (!r.ok) {
log.error(await r.text());
cancel('Something wrong happened when deleting the webhook');
diff --git a/samples/graph-webhooks-cache-invalidation/src/app/layout.tsx b/samples/graph-webhooks-cache-invalidation/src/app/layout.tsx
index 93a32778..d63b58ed 100644
--- a/samples/graph-webhooks-cache-invalidation/src/app/layout.tsx
+++ b/samples/graph-webhooks-cache-invalidation/src/app/layout.tsx
@@ -11,7 +11,7 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
-
+
{children}
);
diff --git a/samples/graph-webhooks-cache-invalidation/src/app/preview/page.tsx b/samples/graph-webhooks-cache-invalidation/src/app/preview/page.tsx
index 3d6291c6..134d99e0 100644
--- a/samples/graph-webhooks-cache-invalidation/src/app/preview/page.tsx
+++ b/samples/graph-webhooks-cache-invalidation/src/app/preview/page.tsx
@@ -3,8 +3,7 @@ import React from 'react';
export default function Page() {
return (
- Preview mode doesn't cache content, to test the webhook cache
- invalidation, navigate to view mode by clicking{' '}
+ Preview mode doesn't cache content, to test the webhook cache invalidation, navigate to view mode by clicking{' '}
Options → View on website.
);
diff --git a/samples/graph-webhooks-cache-invalidation/src/app/webhooks/[id]/route.ts b/samples/graph-webhooks-cache-invalidation/src/app/webhooks/[id]/route.ts
index 55fdf0b7..7186dc62 100644
--- a/samples/graph-webhooks-cache-invalidation/src/app/webhooks/[id]/route.ts
+++ b/samples/graph-webhooks-cache-invalidation/src/app/webhooks/[id]/route.ts
@@ -21,7 +21,7 @@ async function revalidateDocId(docId: string) {
const parts = docId.split('_');
const id = parts[0].replaceAll('-', '');
const locale = parts[1]; // e.g., "en"
-
+
const client = new GraphClient(process.env.OPTIMIZELY_GRAPH_SINGLE_KEY!, {
graphUrl: process.env.OPTIMIZELY_GRAPH_GATEWAY,
});
@@ -43,10 +43,7 @@ query GetPath($id:String, $locale: Locales) {
console.log('Path "%s" successfully revalidated', path);
}
-export async function POST(
- request: Request,
- { params }: { params: Promise<{ id: string }> }
-) {
+export async function POST(request: Request, { params }: { params: Promise<{ id: string }> }) {
const webhookId = (await params).id;
if (webhookId !== WEBHOOK_ID) {
@@ -58,9 +55,7 @@ export async function POST(
// Learn more about the format of webhook responses:
// https://docs.developers.optimizely.com/platform-optimizely/docs/webhook-response
if (body.type.subject === 'bulk' && body.type.action === 'completed') {
- const deleted = Object.values(body.data.items ?? {}).find(
- (status) => status === 'deleted'
- );
+ const deleted = Object.values(body.data.items ?? {}).find(status => status === 'deleted');
// At this moment, there is no way to retrieve which page has been deleted
// so for this example, we are going to revalidate all data
diff --git a/samples/graph-webhooks-cache-invalidation/src/components/render-date.tsx b/samples/graph-webhooks-cache-invalidation/src/components/render-date.tsx
index 5b702cc6..f02ef084 100644
--- a/samples/graph-webhooks-cache-invalidation/src/components/render-date.tsx
+++ b/samples/graph-webhooks-cache-invalidation/src/components/render-date.tsx
@@ -7,9 +7,7 @@ import { useEffect, useState } from 'react';
/** Render the elapsed time from a given `date` */
export function ShowElapsed({ date }: { date: string }) {
- const [elapsedTime, setElapsed] = useState(
- Date.now() - new Date(date).getTime()
- );
+ const [elapsedTime, setElapsed] = useState(Date.now() - new Date(date).getTime());
useEffect(() => {
const i = setInterval(() => {
setElapsed(Date.now() - new Date(date).getTime());
diff --git a/samples/hello-world/eslint.config.mjs b/samples/hello-world/eslint.config.mjs
index c85fb67c..5b67bd0a 100644
--- a/samples/hello-world/eslint.config.mjs
+++ b/samples/hello-world/eslint.config.mjs
@@ -1,6 +1,6 @@
-import { dirname } from "path";
-import { fileURLToPath } from "url";
-import { FlatCompat } from "@eslint/eslintrc";
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { FlatCompat } from '@eslint/eslintrc';
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
@@ -9,8 +9,6 @@ const compat = new FlatCompat({
baseDirectory: __dirname,
});
-const eslintConfig = [
- ...compat.extends("next/core-web-vitals", "next/typescript"),
-];
+const eslintConfig = [...compat.extends('next/core-web-vitals', 'next/typescript')];
export default eslintConfig;
diff --git a/samples/hello-world/next.config.ts b/samples/hello-world/next.config.ts
index e9ffa308..5e891cf0 100644
--- a/samples/hello-world/next.config.ts
+++ b/samples/hello-world/next.config.ts
@@ -1,4 +1,4 @@
-import type { NextConfig } from "next";
+import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
/* config options here */
diff --git a/samples/hello-world/src/app/error.tsx b/samples/hello-world/src/app/error.tsx
index fff2e36e..8993a154 100644
--- a/samples/hello-world/src/app/error.tsx
+++ b/samples/hello-world/src/app/error.tsx
@@ -3,21 +3,11 @@
import { useEffect } from 'react';
import { GraphErrors } from '@optimizely/cms-sdk';
-export default function Error({
- error,
- reset,
-}: {
- error: Error & { digest?: string };
- reset: () => void;
-}) {
+export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
useEffect(() => {
// Use `instanceof` to get specific types of errors and handle differently
if (error instanceof GraphErrors.GraphResponseError) {
- console.error(
- 'Optimizely Graph Error: ',
- error.message,
- 'see the query and variables in the logs'
- );
+ console.error('Optimizely Graph Error: ', error.message, 'see the query and variables in the logs');
console.log('Showing the query:');
console.log(error.request.query);
console.log('Showing variables:');
diff --git a/samples/hello-world/src/app/layout.tsx b/samples/hello-world/src/app/layout.tsx
index 3c5471c0..67445728 100644
--- a/samples/hello-world/src/app/layout.tsx
+++ b/samples/hello-world/src/app/layout.tsx
@@ -15,7 +15,7 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
-
+
{children}
);
diff --git a/samples/hello-world/src/app/preview/page.tsx b/samples/hello-world/src/app/preview/page.tsx
index 6a6df95a..c77986ec 100644
--- a/samples/hello-world/src/app/preview/page.tsx
+++ b/samples/hello-world/src/app/preview/page.tsx
@@ -13,15 +13,11 @@ async function Page({ searchParams }: Props) {
graphUrl: process.env.OPTIMIZELY_GRAPH_GATEWAY,
});
- const content = await client.getPreviewContent(
- (await searchParams) as PreviewParams
- );
+ const content = await client.getPreviewContent((await searchParams) as PreviewParams);
return (
<>
-
+
diff --git a/samples/hello-world/tsconfig.json b/samples/hello-world/tsconfig.json
index b575f7da..61b9d358 100644
--- a/samples/hello-world/tsconfig.json
+++ b/samples/hello-world/tsconfig.json
@@ -1,11 +1,7 @@
{
"compilerOptions": {
"target": "ES2017",
- "lib": [
- "dom",
- "dom.iterable",
- "esnext"
- ],
+ "lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
@@ -23,19 +19,9 @@
}
],
"paths": {
- "@/*": [
- "./src/*"
- ]
+ "@/*": ["./src/*"]
}
},
- "include": [
- "next-env.d.ts",
- "**/*.ts",
- "**/*.tsx",
- ".next/types/**/*.ts",
- ".next/dev/types/**/*.ts"
- ],
- "exclude": [
- "node_modules"
- ]
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", ".next/dev/types/**/*.ts"],
+ "exclude": ["node_modules"]
}
diff --git a/samples/nextjs-template/eslint.config.mjs b/samples/nextjs-template/eslint.config.mjs
index c85fb67c..5b67bd0a 100644
--- a/samples/nextjs-template/eslint.config.mjs
+++ b/samples/nextjs-template/eslint.config.mjs
@@ -1,6 +1,6 @@
-import { dirname } from "path";
-import { fileURLToPath } from "url";
-import { FlatCompat } from "@eslint/eslintrc";
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { FlatCompat } from '@eslint/eslintrc';
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
@@ -9,8 +9,6 @@ const compat = new FlatCompat({
baseDirectory: __dirname,
});
-const eslintConfig = [
- ...compat.extends("next/core-web-vitals", "next/typescript"),
-];
+const eslintConfig = [...compat.extends('next/core-web-vitals', 'next/typescript')];
export default eslintConfig;
diff --git a/samples/nextjs-template/src/app/[...slug]/page.tsx b/samples/nextjs-template/src/app/[...slug]/page.tsx
index 5f7a3421..3c45f6a1 100644
--- a/samples/nextjs-template/src/app/[...slug]/page.tsx
+++ b/samples/nextjs-template/src/app/[...slug]/page.tsx
@@ -47,7 +47,7 @@ export async function generateStaticParams() {
graphUrl: process.env.OPTIMIZELY_GRAPH_GATEWAY,
});
const data = await client.request(query, {});
-
+
return data._Page.items
.filter((item: any) => {
if (item?._metadata?.url?.base !== process.env.APPLICATION_HOST) {
@@ -70,7 +70,7 @@ export async function generateStaticParams() {
// Format as required in Next.js
(path: string) => ({
slug: path.split('/'),
- })
+ }),
);
}
diff --git a/samples/nextjs-template/src/app/globals.css b/samples/nextjs-template/src/app/globals.css
index e2eb7456..3e69b31e 100644
--- a/samples/nextjs-template/src/app/globals.css
+++ b/samples/nextjs-template/src/app/globals.css
@@ -238,11 +238,7 @@ section > header {
width: 4rem;
height: 4rem;
font-size: 1.25rem;
- background: radial-gradient(
- var(--color-accent) 0%,
- var(--color-accent) 50%,
- #f000 51%
- );
+ background: radial-gradient(var(--color-accent) 0%, var(--color-accent) 50%, #f000 51%);
border: var(--color-accent) 1px solid;
grid-area: button;
margin: 1rem 1.5rem;
@@ -431,7 +427,9 @@ a:hover span.animate {
flex-direction: column;
justify-content: space-between;
height: 100%;
- transition: transform 0.2s ease, background-color 0.2s ease;
+ transition:
+ transform 0.2s ease,
+ background-color 0.2s ease;
.subtitle {
font-size: 0.9rem;
color: #777;
@@ -735,7 +733,9 @@ a:hover span.animate {
padding: 1rem;
width: 180px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
- transition: transform 0.2s ease, box-shadow 0.2s ease;
+ transition:
+ transform 0.2s ease,
+ box-shadow 0.2s ease;
}
.monthly-special__blog .card:hover {
diff --git a/samples/nextjs-template/src/app/layout.tsx b/samples/nextjs-template/src/app/layout.tsx
index 2de51599..c451e4e1 100644
--- a/samples/nextjs-template/src/app/layout.tsx
+++ b/samples/nextjs-template/src/app/layout.tsx
@@ -2,39 +2,20 @@ import React from 'react';
import { Bodoni_Moda, Inter } from 'next/font/google';
import './globals.css';
-import {
- BlankExperienceContentType,
- initContentTypeRegistry,
- initDisplayTemplateRegistry,
-} from '@optimizely/cms-sdk';
+import { BlankExperienceContentType, initContentTypeRegistry, initDisplayTemplateRegistry } from '@optimizely/cms-sdk';
import { initReactComponentRegistry } from '@optimizely/cms-sdk/react/server';
import Landing, { LandingPageContentType } from '@/components/Landing';
-import LandingSection, {
- LandingSectionContentType,
- LandingSectionDisplayTemplate,
-} from '@/components/LandingSection';
-import SmallFeatureGrid, {
- SmallFeatureGridContentType,
-} from '@/components/SmallFeatureGrid';
-import SmallFeature, {
- SmallFeatureContentType,
-} from '@/components/SmallFeature';
-import VideoFeature, {
- VideoFeatureContentType,
-} from '@/components/VideoFeature';
+import LandingSection, { LandingSectionContentType, LandingSectionDisplayTemplate } from '@/components/LandingSection';
+import SmallFeatureGrid, { SmallFeatureGridContentType } from '@/components/SmallFeatureGrid';
+import SmallFeature, { SmallFeatureContentType } from '@/components/SmallFeature';
+import VideoFeature, { VideoFeatureContentType } from '@/components/VideoFeature';
import { HeroContentType } from '@/components/Hero';
import Article, { ArticleContentType } from '@/components/Article';
-import LandingExperience, {
- LandingExperienceContentType,
-} from '@/components/LandingExperience';
-import CallToAction, {
- CallToActionContentType,
-} from '@/components/CallToAction';
+import LandingExperience, { LandingExperienceContentType } from '@/components/LandingExperience';
+import CallToAction, { CallToActionContentType } from '@/components/CallToAction';
import BlankSection from '@/components/BlankSection';
-import BlogExperience, {
- BlogExperienceContentType,
-} from '@/components/BlogExperience';
+import BlogExperience, { BlogExperienceContentType } from '@/components/BlogExperience';
import BlogCard, { BlogCardContentType } from '@/components/BlogCard';
import Banner, { BannerContentType } from '@/components/Banner';
import Tile, {
@@ -44,16 +25,10 @@ import Tile, {
TileContentType,
TileRowDisplayTemplate,
} from '@/components/Tile';
-import AboutExperience, {
- AboutExperienceContentType,
-} from '@/components/AboutExperience';
+import AboutExperience, { AboutExperienceContentType } from '@/components/AboutExperience';
import AboutUs, { AboutUsContentType } from '@/components/AboutUs';
-import MonthlySpecial, {
- MonthlySpecialContentType,
-} from '@/components/MonthlySpecial';
-import OfficeLocations, {
- OfficeContentType,
-} from '@/components/OfficeLocations';
+import MonthlySpecial, { MonthlySpecialContentType } from '@/components/MonthlySpecial';
+import OfficeLocations, { OfficeContentType } from '@/components/OfficeLocations';
import Location, { LocationContentType } from '@/components/Location';
import BlankExperience from '@/components/BlankExperience';
import FAQ, { FAQContentType } from '@/components/FAQ';
@@ -135,10 +110,7 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
-
+
{children}
);
diff --git a/samples/nextjs-template/src/app/page.tsx b/samples/nextjs-template/src/app/page.tsx
index b5e94bfb..b7493f49 100644
--- a/samples/nextjs-template/src/app/page.tsx
+++ b/samples/nextjs-template/src/app/page.tsx
@@ -1,12 +1,12 @@
export default function Home() {
return (
<>
-
+
JS SDK demo page
To see some content in this site, create content in the CMS and go to
- /[locale]/[slug], where locale is the localization (for
- example "en") and slug is the path of the content
+ /[locale]/[slug], where locale is the localization (for example "en") and slug is the
+ path of the content
diff --git a/samples/nextjs-template/src/app/preview/page.tsx b/samples/nextjs-template/src/app/preview/page.tsx
index 612f131e..02854dc2 100644
--- a/samples/nextjs-template/src/app/preview/page.tsx
+++ b/samples/nextjs-template/src/app/preview/page.tsx
@@ -15,14 +15,12 @@ async function Page({ searchParams }: Props) {
const content = await client.getPreviewContent(
// TODO: check types in runtime properly
- (await searchParams) as PreviewParams
+ (await searchParams) as PreviewParams,
);
return (
<>
-
+
diff --git a/samples/nextjs-template/src/components/AboutExperience.tsx b/samples/nextjs-template/src/components/AboutExperience.tsx
index e4b5ea0e..819740d3 100644
--- a/samples/nextjs-template/src/components/AboutExperience.tsx
+++ b/samples/nextjs-template/src/components/AboutExperience.tsx
@@ -40,20 +40,17 @@ function ComponentWrapper({ children, node }: ComponentContainerProps) {
export default function AboutExperience({ content }: Props) {
const { pa } = getPreviewUtils(content);
return (
-
-
+
+
{content.title}
{content.subtitle}
{content.section && (
-
+
)}
-
+
);
}
diff --git a/samples/nextjs-template/src/components/AboutUs.tsx b/samples/nextjs-template/src/components/AboutUs.tsx
index 66d74426..4e2c84f2 100644
--- a/samples/nextjs-template/src/components/AboutUs.tsx
+++ b/samples/nextjs-template/src/components/AboutUs.tsx
@@ -36,16 +36,23 @@ export default function AboutUs({ content }: AboutUsProps) {
const { getSrcset, getAlt } = damAssets(content);
const image = src(content.image);
return (
-
+
{content.image && (
-
+
{/* eslint-disable-next-line @next/next/no-img-element */}
- {image ? (
) : null}
+ {image ?
+
+ : null}
)}
{content.heading}
-
-
+
+
{content.heading}
{content.subtitle}
-
+
);
}
diff --git a/samples/nextjs-template/src/components/Banner.tsx b/samples/nextjs-template/src/components/Banner.tsx
index 677a7bf3..cf7e45ac 100644
--- a/samples/nextjs-template/src/components/Banner.tsx
+++ b/samples/nextjs-template/src/components/Banner.tsx
@@ -26,20 +26,16 @@ type Props = {
export default function Banner({ content }: Props) {
const { pa } = getPreviewUtils(content);
return (
-
-
-
+
+
+
{content.title}
-
+
{content.subtitle}
{content.submit && (
-
+
Submit
)}
diff --git a/samples/nextjs-template/src/components/BlankExperience.tsx b/samples/nextjs-template/src/components/BlankExperience.tsx
index 19c65280..08c72a41 100644
--- a/samples/nextjs-template/src/components/BlankExperience.tsx
+++ b/samples/nextjs-template/src/components/BlankExperience.tsx
@@ -1,9 +1,5 @@
import { BlankExperienceContentType, ContentProps } from '@optimizely/cms-sdk';
-import {
- ComponentContainerProps,
- OptimizelyComposition,
- getPreviewUtils,
-} from '@optimizely/cms-sdk/react/server';
+import { ComponentContainerProps, OptimizelyComposition, getPreviewUtils } from '@optimizely/cms-sdk/react/server';
type Props = {
content: ContentProps
;
@@ -16,11 +12,8 @@ function ComponentWrapper({ children, node }: ComponentContainerProps) {
export default function BlankExperience({ content }: Props) {
return (
-
-
+
+
);
}
diff --git a/samples/nextjs-template/src/components/BlankSection.tsx b/samples/nextjs-template/src/components/BlankSection.tsx
index e09fa03f..c01ec006 100644
--- a/samples/nextjs-template/src/components/BlankSection.tsx
+++ b/samples/nextjs-template/src/components/BlankSection.tsx
@@ -1,8 +1,5 @@
import { BlankSectionContentType, ContentProps } from '@optimizely/cms-sdk';
-import {
- OptimizelyGridSection,
- getPreviewUtils,
-} from '@optimizely/cms-sdk/react/server';
+import { OptimizelyGridSection, getPreviewUtils } from '@optimizely/cms-sdk/react/server';
type BlankSectionProps = {
content: ContentProps;
diff --git a/samples/nextjs-template/src/components/BlogCard.tsx b/samples/nextjs-template/src/components/BlogCard.tsx
index 48da4ef8..6bba4eba 100644
--- a/samples/nextjs-template/src/components/BlogCard.tsx
+++ b/samples/nextjs-template/src/components/BlogCard.tsx
@@ -32,16 +32,16 @@ type Props = {
export default function BlogCard({ content }: Props) {
const { pa } = getPreviewUtils(content);
return (
-
+
{content.title}
-
+
{content.subtitle}
-
-
+
+
{content.author}
-
+
{content.date ? new Date(content.date).toLocaleDateString() : 'N/A'}
diff --git a/samples/nextjs-template/src/components/BlogExperience.tsx b/samples/nextjs-template/src/components/BlogExperience.tsx
index e7cdb5d0..31c6de97 100644
--- a/samples/nextjs-template/src/components/BlogExperience.tsx
+++ b/samples/nextjs-template/src/components/BlogExperience.tsx
@@ -43,20 +43,17 @@ function ComponentWrapper({ children, node }: ComponentContainerProps) {
export default function BlogExperience({ content }: Props) {
const { pa } = getPreviewUtils(content);
return (
-
-
+
+
{content.title}
{content.subtitle}
-
+
{content?.articles?.map((article, index) => (
))}
-
+
);
}
diff --git a/samples/nextjs-template/src/components/FAQ.tsx b/samples/nextjs-template/src/components/FAQ.tsx
index 507024d6..4d9e7414 100644
--- a/samples/nextjs-template/src/components/FAQ.tsx
+++ b/samples/nextjs-template/src/components/FAQ.tsx
@@ -24,14 +24,11 @@ export type FAQProps = {
export default function FAQ({ content }: FAQProps) {
const { pa } = getPreviewUtils(content);
return (
-
+
{content.heading}
-
-
-
+
diff --git a/samples/nextjs-template/src/components/Landing.tsx b/samples/nextjs-template/src/components/Landing.tsx
index 9ab3d30c..fca2103d 100644
--- a/samples/nextjs-template/src/components/Landing.tsx
+++ b/samples/nextjs-template/src/components/Landing.tsx
@@ -1,8 +1,5 @@
import { contentType, ContentProps } from '@optimizely/cms-sdk';
-import {
- getPreviewUtils,
- OptimizelyComponent,
-} from '@optimizely/cms-sdk/react/server';
+import { getPreviewUtils, OptimizelyComponent } from '@optimizely/cms-sdk/react/server';
import { LandingSectionContentType } from './LandingSection';
import { HeroContentType } from './Hero';
import Image from 'next/image';
@@ -38,10 +35,8 @@ export default function LandingComponent({ content }: Props) {
{content.hero && (
- {heroBackgroundUrl && (
-
- )}
-
+ {heroBackgroundUrl &&
}
+
{content.hero.heading}
{content.hero.summary}
diff --git a/samples/nextjs-template/src/components/LandingExperience.tsx b/samples/nextjs-template/src/components/LandingExperience.tsx
index 6e5b28f5..7ecf4caa 100644
--- a/samples/nextjs-template/src/components/LandingExperience.tsx
+++ b/samples/nextjs-template/src/components/LandingExperience.tsx
@@ -1,10 +1,6 @@
import Image from 'next/image';
import { contentType, ContentProps } from '@optimizely/cms-sdk';
-import {
- ComponentContainerProps,
- OptimizelyComposition,
- getPreviewUtils,
-} from '@optimizely/cms-sdk/react/server';
+import { ComponentContainerProps, OptimizelyComposition, getPreviewUtils } from '@optimizely/cms-sdk/react/server';
import { HeroContentType } from './Hero';
export const LandingExperienceContentType = contentType({
@@ -35,24 +31,14 @@ export default function LandingExperienceComponent({ content }: Props) {
{content.hero && (
- {heroBackgroundUrl && (
-
- )}
-
+ {heroBackgroundUrl &&
}
+
{content.hero.heading}
{content.hero.summary}
)}
-
+
);
}
diff --git a/samples/nextjs-template/src/components/LandingSection.tsx b/samples/nextjs-template/src/components/LandingSection.tsx
index f2607800..a658b536 100644
--- a/samples/nextjs-template/src/components/LandingSection.tsx
+++ b/samples/nextjs-template/src/components/LandingSection.tsx
@@ -1,14 +1,7 @@
-import {
- contentType,
- displayTemplate,
- ContentProps,
-} from '@optimizely/cms-sdk';
+import { contentType, displayTemplate, ContentProps } from '@optimizely/cms-sdk';
import { SmallFeatureGridContentType } from './SmallFeatureGrid';
import { VideoFeatureContentType } from './VideoFeature';
-import {
- getPreviewUtils,
- OptimizelyComponent,
-} from '@optimizely/cms-sdk/react/server';
+import { getPreviewUtils, OptimizelyComponent } from '@optimizely/cms-sdk/react/server';
export const LandingSectionContentType = contentType({
key: 'LandingSection',
@@ -64,7 +57,7 @@ export default function LandingSection({ content }: Props) {
const { pa } = getPreviewUtils(content);
return (
-
+
{content.heading}
{content.subtitle}
diff --git a/samples/nextjs-template/src/components/Location.tsx b/samples/nextjs-template/src/components/Location.tsx
index e05511f7..f40f58a3 100644
--- a/samples/nextjs-template/src/components/Location.tsx
+++ b/samples/nextjs-template/src/components/Location.tsx
@@ -30,24 +30,18 @@ export default function Location({ content }: Props) {
const { pa } = getPreviewUtils(content);
return (
-
-
-
+
+
+
{content.name}
-
+
{content.city}
-
+
{content.address}
-
+
{content.phone}
diff --git a/samples/nextjs-template/src/components/MonthlySpecial.tsx b/samples/nextjs-template/src/components/MonthlySpecial.tsx
index f8b3246a..e8271dcd 100644
--- a/samples/nextjs-template/src/components/MonthlySpecial.tsx
+++ b/samples/nextjs-template/src/components/MonthlySpecial.tsx
@@ -1,9 +1,6 @@
import { contentType, ContentProps } from '@optimizely/cms-sdk';
import { BlogCardContentType } from './BlogCard';
-import {
- getPreviewUtils,
- OptimizelyComponent,
-} from '@optimizely/cms-sdk/react/server';
+import { getPreviewUtils, OptimizelyComponent } from '@optimizely/cms-sdk/react/server';
export const MonthlySpecialContentType = contentType({
key: 'MonthlySpecial',
@@ -31,16 +28,16 @@ type Props = {
export default function MonthlySpecial({ content }: Props) {
const { pa } = getPreviewUtils(content);
return (
-
-
-
+
+
+
{content.title}
-
+
{content.subtitle}
-
diff --git a/samples/nextjs-template/src/components/OfficeLocations.tsx b/samples/nextjs-template/src/components/OfficeLocations.tsx
index 8d823b45..5b015683 100644
--- a/samples/nextjs-template/src/components/OfficeLocations.tsx
+++ b/samples/nextjs-template/src/components/OfficeLocations.tsx
@@ -1,8 +1,5 @@
import { contentType, ContentProps } from '@optimizely/cms-sdk';
-import {
- getPreviewUtils,
- OptimizelyComponent,
-} from '@optimizely/cms-sdk/react/server';
+import { getPreviewUtils, OptimizelyComponent } from '@optimizely/cms-sdk/react/server';
import { LocationContentType } from './Location';
export const OfficeContentType = contentType({
@@ -35,14 +32,14 @@ export default function OfficeLocations({ content }: Props) {
const { pa } = getPreviewUtils(content);
return (
-
-
+
+
{content.title}
-
+
{content.subtitle}
-
+
{(content.offices ?? []).map((office, i) => (
))}
diff --git a/samples/nextjs-template/src/components/SmallFeature.tsx b/samples/nextjs-template/src/components/SmallFeature.tsx
index 9f332bf5..bc41b561 100644
--- a/samples/nextjs-template/src/components/SmallFeature.tsx
+++ b/samples/nextjs-template/src/components/SmallFeature.tsx
@@ -30,17 +30,13 @@ export default function SmallFeature({ content }: Props) {
const imageUrl = src(content.image);
return (
-
+
{content.heading}
- {imageUrl ? (
+ {imageUrl ?
// eslint-disable-next-line @next/next/no-img-element
-
- ) : null}
+
+ : null}
diff --git a/samples/nextjs-template/src/components/SmallFeatureGrid.tsx b/samples/nextjs-template/src/components/SmallFeatureGrid.tsx
index cd9ec87c..55d58a05 100644
--- a/samples/nextjs-template/src/components/SmallFeatureGrid.tsx
+++ b/samples/nextjs-template/src/components/SmallFeatureGrid.tsx
@@ -1,9 +1,6 @@
import { contentType, ContentProps } from '@optimizely/cms-sdk';
import { SmallFeatureContentType } from './SmallFeature';
-import {
- getPreviewUtils,
- OptimizelyComponent,
-} from '@optimizely/cms-sdk/react/server';
+import { getPreviewUtils, OptimizelyComponent } from '@optimizely/cms-sdk/react/server';
export const SmallFeatureGridContentType = contentType({
key: 'SmallFeatureGrid',
@@ -28,7 +25,7 @@ export default function SmallFeatureGrid({ content }: Props) {
const { pa } = getPreviewUtils(content);
return (
-
+
{content.smallFeatures?.map((feature, i) => (
))}
diff --git a/samples/nextjs-template/src/components/Tile.tsx b/samples/nextjs-template/src/components/Tile.tsx
index e8d86e6f..d3267fca 100644
--- a/samples/nextjs-template/src/components/Tile.tsx
+++ b/samples/nextjs-template/src/components/Tile.tsx
@@ -1,8 +1,4 @@
-import {
- contentType,
- displayTemplate,
- ContentProps,
-} from '@optimizely/cms-sdk';
+import { contentType, displayTemplate, ContentProps } from '@optimizely/cms-sdk';
import { getPreviewUtils } from '@optimizely/cms-sdk/react/server';
export const TileContentType = contentType({
@@ -122,7 +118,7 @@ type Props = {
export default function Tile({ content }: Props) {
const { pa } = getPreviewUtils(content);
return (
-
+
{content.title}
{content.description}
@@ -134,13 +130,12 @@ export function SquareTile({ content, displaySettings }: Props) {
const { pa } = getPreviewUtils(content);
return (
-
+
{content.title}
diff --git a/samples/nextjs-template/src/components/VideoFeature.tsx b/samples/nextjs-template/src/components/VideoFeature.tsx
index 2a5c3d9c..b5a0472e 100644
--- a/samples/nextjs-template/src/components/VideoFeature.tsx
+++ b/samples/nextjs-template/src/components/VideoFeature.tsx
@@ -36,17 +36,13 @@ export default function VideoFeature({ content }: Props) {
const imageUrl = src(content.thumbnail_image);
return (
-
-
+
+
- {imageUrl ? (
+ {imageUrl ?
// eslint-disable-next-line @next/next/no-img-element
-
- ) : null}
+
+ : null}
▶︎
{content.thumbnail_caption}
diff --git a/samples/nextjs-template/tsconfig.json b/samples/nextjs-template/tsconfig.json
index b575f7da..61b9d358 100644
--- a/samples/nextjs-template/tsconfig.json
+++ b/samples/nextjs-template/tsconfig.json
@@ -1,11 +1,7 @@
{
"compilerOptions": {
"target": "ES2017",
- "lib": [
- "dom",
- "dom.iterable",
- "esnext"
- ],
+ "lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
@@ -23,19 +19,9 @@
}
],
"paths": {
- "@/*": [
- "./src/*"
- ]
+ "@/*": ["./src/*"]
}
},
- "include": [
- "next-env.d.ts",
- "**/*.ts",
- "**/*.tsx",
- ".next/types/**/*.ts",
- ".next/dev/types/**/*.ts"
- ],
- "exclude": [
- "node_modules"
- ]
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", ".next/dev/types/**/*.ts"],
+ "exclude": ["node_modules"]
}
diff --git a/templates/alloy-template/next.config.ts b/templates/alloy-template/next.config.ts
index 291d5eb8..a33274d5 100644
--- a/templates/alloy-template/next.config.ts
+++ b/templates/alloy-template/next.config.ts
@@ -1,6 +1,5 @@
import type { NextConfig } from 'next';
-
const nextConfig: NextConfig = {
images: {
remotePatterns: [
diff --git a/templates/alloy-template/postcss.config.mjs b/templates/alloy-template/postcss.config.mjs
index c7bcb4b1..ba720fe5 100644
--- a/templates/alloy-template/postcss.config.mjs
+++ b/templates/alloy-template/postcss.config.mjs
@@ -1,5 +1,5 @@
const config = {
- plugins: ["@tailwindcss/postcss"],
+ plugins: ['@tailwindcss/postcss'],
};
export default config;
diff --git a/templates/alloy-template/src/app/layout.tsx b/templates/alloy-template/src/app/layout.tsx
index ec6a4d9b..03dc6725 100644
--- a/templates/alloy-template/src/app/layout.tsx
+++ b/templates/alloy-template/src/app/layout.tsx
@@ -1,10 +1,6 @@
import type { Metadata } from 'next';
import { Geist, Geist_Mono } from 'next/font/google';
-import {
- BlankExperienceContentType,
- initContentTypeRegistry,
- config,
-} from '@optimizely/cms-sdk';
+import { BlankExperienceContentType, initContentTypeRegistry, config } from '@optimizely/cms-sdk';
import { initReactComponentRegistry } from '@optimizely/cms-sdk/react/server';
import './globals.css';
@@ -79,12 +75,8 @@ export default async function RootLayout({
children: React.ReactNode;
}>) {
return (
-
-
- {children}
-
+
+ {children}
);
}
diff --git a/templates/alloy-template/src/app/preview/page.tsx b/templates/alloy-template/src/app/preview/page.tsx
index ab504931..f660ac3e 100644
--- a/templates/alloy-template/src/app/preview/page.tsx
+++ b/templates/alloy-template/src/app/preview/page.tsx
@@ -18,7 +18,7 @@ async function Page({ searchParams }: Props) {
// TODO: check types in runtime properly
(await searchParams) as PreviewParams,
)
- .catch((err) => {
+ .catch(err => {
console.log(err.errors);
console.log(err.request?.query);
throw err;
@@ -29,9 +29,7 @@ async function Page({ searchParams }: Props) {
return (
<>
-
+
diff --git a/templates/alloy-template/src/components/News.tsx b/templates/alloy-template/src/components/News.tsx
index de4d4694..fb79db08 100644
--- a/templates/alloy-template/src/components/News.tsx
+++ b/templates/alloy-template/src/components/News.tsx
@@ -1,10 +1,6 @@
import { contentType, ContentProps, damAssets } from '@optimizely/cms-sdk';
import { RichText } from '@optimizely/cms-sdk/react/richText';
-import {
- ComponentContainerProps,
- getPreviewUtils,
- OptimizelyComposition,
-} from '@optimizely/cms-sdk/react/server';
+import { ComponentContainerProps, getPreviewUtils, OptimizelyComposition } from '@optimizely/cms-sdk/react/server';
import { StandardContentType } from './Standard';
import { SEOContentType } from './base/SEO';
@@ -44,7 +40,11 @@ type NewsPageProps = {
function ComponentWrapper({ children, node }: ComponentContainerProps) {
const { pa } = getPreviewUtils(node);
- return
{children}
;
+ return (
+
+ {children}
+
+ );
}
function News({ content }: NewsPageProps) {
@@ -52,53 +52,43 @@ function News({ content }: NewsPageProps) {
const { getAlt, getSrcset, isDamImageAsset } = damAssets(content);
return (
-
-
-
+
+
+
{/* Main Content */}
-
+
{/* Heading and Description */}
-
+