@remkoj/optimizely-cms-react 2.1.0 → 3.0.0

package/README.md

@@ -1,2 +1,36 @@
-# Optimizely SaaS CMS React Components
-React client components, with SSR support, to render content from Optimizely Content Graph
+# Optimizely SaaS CMS React Components
+> [!WARNING]
+> This documentation is for V3 and up. This version introduced a number of breaking changes - most notably it significantly simplified the exports.
+>
+> For some of the commonly used old exports it still contains placeholders, however those are deprecated and will be removed in a future version
+
+This package provides two main entry points, depending on your build environment:
+- `@remkoj/optimizely-cms-react` This export contains the library, whith React components that use a client side context
+- `@remkoj/optimizely-cms-react/rsc` This export contains the library, whith React components that use a server side context
+
+## Components & Functions
+### Shared components & functions
+Regardless of which export you're using, the following components are available. The properties of each component are document using JSDoc annotations in the package.
+
+| Component/Function | Description |
+| --- | --- |
+| `<CmsContent {...props} />` | This component renders a content item from the Optimizely CMS.<br/>It leverages the factory provided by the context to resolve the Optimizely CMS type to a React Component.<br/>When no, or invalid, initial data is provided, this component will use the connection to Optimizely Graph from the context to fetch the data for the component |
+| `<CmsContentArea {...props} />` | A helper component to quickly and easily render the contents of a Content Area type property in Optimizely CMS.<br /><br />The Content Area leverages the `<CmsContent />` internally to render each item contained within the area. It ensures that the prefix is `component`, forcing a different component to be used when a "non-component" (e.g. a page) is added to the content-area |
+| `<CmsEditable {...props} />` | This is a basic wrapper that performs the logic needed to inject the appropriate attributes into the HTML. <br/>It will use a `div` element by default for that, but you can set any React component to be used on the `as` property. The only requirement is that the property set for this accepts the `data-*` attributes injected and outputs these into the page. Any additional attributes will be passed to the output component. |
+| `<RichText {...props} />` | This is a renderer for the structured HTML output of Optimizely CMS, leveraging the `ComponentFactory` to resolve the actual React components used for the output. It prefixes all types with `RichText`<br/>The library exports a `DefaultComponents` constant, which can be used to populate the ComponentFactory with the basic HTML elements |
+| `<OptimizelyComposition {...props} />` | This is the renderer for a Visual Builder Experience. This will render the composition using the `ComponentFactory` from the context and `<CmsContent />` component.<br/><br/>The style definitions of Visual Builder will be provided to the `layoutProps` property of your CmsComponent |
+
+### Server Side components & functions
+In addition to the components above, the following methods are available in the `@remkoj/optimizely-cms-react/rsc` export only:
+
+| Component / Function | Description |
+| --- | --- |
+| `getServerContext()` | Retrieve the current server context in use, this leverages `React.cache` to ensure a single context is used within the cache scope defined by your React Server implementation |
+
+### Client Side components & functions
+In addition to the components above, the following methods are available in the `@remkoj/optimizely-cms-react` export only:
+
+| Component / Function | Description |
+| --- | --- |
+| `<OptimizelyCms {...props} />` | React context to be used client side, without defaults. This needs to be initialized completely by your code. |
+| `useOptimizelyCms()` | React Hook to retrieve the current Optimizely CMS Context in your client-side component. |

package/dist/components/client.d.ts

@@ -0,0 +1,42 @@
+import { type ComponentType } from 'react';
+import { type PropsWithContext } from '../context/types.js';
+import { type CmsContentAreaComponent } from './cms-content-area/index.js';
+import { type CmsEditableComponent } from './cms-editable/index.js';
+import { type CmsContentComponent } from './cms-content/client.js';
+import { type OptimizelyCompositionComponent } from './visual-builder/index.js';
+import { type RichTextComponent } from './rich-text/index.js';
+export type { BaseStyleDefinition, ElementStyleDefinition, LayoutProps, LayoutPropsSetting, LayoutPropsSettingChoices, LayoutPropsSettingKeys, LayoutPropsSettingValues, NodeStyleDefinition, StyleDefinition, StyleSetting } from "./cms-styles/index.js";
+export { extractSettings, readSetting } from "./cms-styles/index.js";
+export { DefaultComponents as RichTextComponentDictionary } from './rich-text/components.js';
+/**
+ * Wrapper function to turn context dependant components into easy to use
+ * client components
+ *
+ * @param       component       The component where the `ctx` parameter must be fulfilled
+ * @returns     The component, without CTX parameter
+ */
+export declare function clientContextAware<P = any>(component: ComponentType<PropsWithContext<P>>): ComponentType<P>;
+/**
+ * Client side Optimizely CMS Editable
+ */
+export declare const CmsEditable: CmsEditableComponent;
+/**
+ * Client side Optimizely CMS Content, leveraging the CMS Context to load the
+ * content type and content data when needed
+ */
+export declare const CmsContent: CmsContentComponent;
+/**
+ * Client side Optimizely CMS Content Area, leveraging the CMS Context to infer
+ * the connection to Optimizely Graph and component dictionary.
+ */
+export declare const CmsContentArea: CmsContentAreaComponent;
+/**
+ * Client side Optimizely Composition (e.g. Visual Builder), leveraging the CMS
+ * Context to infer the connection to Optimizely Graph and component
+ * dictionary.
+ */
+export declare const OptimizelyComposition: OptimizelyCompositionComponent;
+/**
+ * Client side renderer for Rich Text
+ */
+export declare const RichText: RichTextComponent;

package/dist/components/client.js

@@ -0,0 +1,52 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useOptimizelyCms } from '../context/client.js';
+import { cmsContentAware } from './cms-content/utils.js';
+import { CmsContentArea as BaseContentArea } from './cms-content-area/index.js'; // Both RSC & Client capable
+import { CmsEditable as BaseEditable } from './cms-editable/index.js'; // Both RSC & Client capable
+import { CmsContent as BaseCmsContent } from './cms-content/client.js'; // Different components for RSC & Client
+import { OptimizelyComposition as BaseOptimizelyComposition } from './visual-builder/index.js'; // Both RSC & Client capable
+import { RichText as BaseRichText } from './rich-text/index.js';
+export { extractSettings, readSetting } from "./cms-styles/index.js";
+// Export dictionary
+export { DefaultComponents as RichTextComponentDictionary } from './rich-text/components.js';
+/**
+ * Wrapper function to turn context dependant components into easy to use
+ * client components
+ *
+ * @param       component       The component where the `ctx` parameter must be fulfilled
+ * @returns     The component, without CTX parameter
+ */
+export function clientContextAware(component) {
+    const BaseComponent = component;
+    const ClientContextInjector = (props) => {
+        const ctx = useOptimizelyCms();
+        return _jsx(BaseComponent, { ctx: ctx, ...props });
+    };
+    return ClientContextInjector;
+}
+/**
+ * Client side Optimizely CMS Editable
+ */
+export const CmsEditable = clientContextAware(BaseEditable);
+/**
+ * Client side Optimizely CMS Content, leveraging the CMS Context to load the
+ * content type and content data when needed
+ */
+export const CmsContent = clientContextAware(BaseCmsContent);
+/**
+ * Client side Optimizely CMS Content Area, leveraging the CMS Context to infer
+ * the connection to Optimizely Graph and component dictionary.
+ */
+export const CmsContentArea = cmsContentAware(clientContextAware(BaseContentArea), CmsContent);
+/**
+ * Client side Optimizely Composition (e.g. Visual Builder), leveraging the CMS
+ * Context to infer the connection to Optimizely Graph and component
+ * dictionary.
+ */
+export const OptimizelyComposition = cmsContentAware(clientContextAware(BaseOptimizelyComposition), CmsContent);
+/**
+ * Client side renderer for Rich Text
+ */
+export const RichText = BaseRichText;
+//# sourceMappingURL=client.js.map

package/dist/components/client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.js","sourceRoot":"","sources":["../../src/components/client.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAGZ,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAEvD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAExD,OAAO,EAAE,cAAc,IAAI,eAAe,EAAgC,MAAM,6BAA6B,CAAA,CAAC,4BAA4B;AAC1I,OAAO,EAAE,WAAW,IAAI,YAAY,EAA6B,MAAM,yBAAyB,CAAA,CAAC,4BAA4B;AAC7H,OAAO,EAAE,UAAU,IAAI,cAAc,EAA4B,MAAM,yBAAyB,CAAA,CAAC,wCAAwC;AACzI,OAAO,EAAE,qBAAqB,IAAI,yBAAyB,EAAuC,MAAM,2BAA2B,CAAA,CAAC,4BAA4B;AAChK,OAAO,EAAE,QAAQ,IAAI,YAAY,EAA0B,MAAM,sBAAsB,CAAA;AAIvF,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAEpE,oBAAoB;AACpB,OAAO,EAAE,iBAAiB,IAAI,2BAA2B,EAAE,MAAM,2BAA2B,CAAA;AAE5F;;;;;;GAMG;AACH,MAAM,UAAU,kBAAkB,CAAU,SAA6C;IAErF,MAAM,aAAa,GAAG,SAAS,CAAA;IAC/B,MAAM,qBAAqB,GAAG,CAAC,KAAQ,EAAE,EAAE;QACvC,MAAM,GAAG,GAAG,gBAAgB,EAAE,CAAA;QAC9B,OAAO,KAAC,aAAa,IAAC,GAAG,EAAE,GAAG,KAAO,KAAK,GAAK,CAAA;IACnD,CAAC,CAAA;IACD,OAAO,qBAAqB,CAAA;AAChC,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,kBAAkB,CAAC,YAAY,CAAyB,CAAA;AAGnF;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,kBAAkB,CAAC,cAAc,CAAwB,CAAA;AAEnF;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,eAAe,CAAC,kBAAkB,CAAC,eAAe,CAAC,EAAE,UAAU,CAA4B,CAAA;AAEzH;;;;GAIG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,eAAe,CAAC,kBAAkB,CAAC,yBAAyB,CAAC,EAAE,UAAU,CAAmC,CAAA;AAEjJ;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,YAAiC,CAAA"}

package/dist/components/cms-content/client.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react';
+import type { BaseCmsContentProps } from './types.js';
+export type * from "./types.js";
+/**
+ * React Server Side component for the CmsContent
+ *
+ * @param     param0
+ * @returns
+ */
+export declare function CmsContent<LocalesType = string>({ contentType, contentTypePrefix, contentLink: rawContentLink, children, fragmentData, layoutProps, noDataLoad, ctx }: BaseCmsContentProps<LocalesType>): ReactNode;
+export default CmsContent;

package/dist/components/cms-content/client.js

@@ -0,0 +1,72 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import getContentType from './get-content-type.js';
+import getContent from './get-content.js';
+import { AuthMode, normalizeContentLink, contentLinkToString } from '@remkoj/optimizely-graph-client';
+import resolveComponent, { isComponentMissingComponent } from './resolve-component.js';
+import resolveContentType from './resolve-content-type.js';
+import { useState, useMemo, useEffect } from 'react';
+/**
+ * React Server Side component for the CmsContent
+ *
+ * @param     param0
+ * @returns
+ */
+export function CmsContent({ 
+// Own properties
+contentType, contentTypePrefix, contentLink: rawContentLink, children, fragmentData, layoutProps, noDataLoad, ctx }) {
+    // Prepare context
+    const graphClient = ctx.client;
+    const [myContentType, setMyContentType] = useState(resolveContentType(contentType, fragmentData));
+    const contentLink = useMemo(() => normalizeContentLink(rawContentLink), [rawContentLink]);
+    const Component = useMemo(() => resolveComponent(myContentType, contentTypePrefix, ctx), [myContentType, contentTypePrefix, ctx]);
+    const [data, setData] = useState(getContent(graphClient, contentLink, Component, fragmentData, true));
+    // Provide a bit of debugging context
+    if (graphClient?.debug) {
+        const mode = ctx.inEditMode ? "Edit" : ctx.inPreviewMode ? "Preview" : "Public";
+        console.log(`👔 [CmsContent] ${mode} mode active for content with id: ${contentLinkToString(contentLink)} of type ${myContentType?.join("/") ?? "unknown"}`);
+        if ((ctx.inEditMode || ctx.inPreviewMode) && graphClient.currentAuthMode == AuthMode.Public)
+            console.warn(`🟠 [CmsContent] ${mode} mode active without an authenticated graphClient, this will cause problems. Make sure the context has an authenticated client.`);
+    }
+    // Ensure we have a content type to work with
+    useEffect(() => {
+        let isCancelled = false;
+        if (myContentType || !contentLink)
+            return;
+        if (!graphClient) {
+            console.warn(`🔴 [CmsContent] No Optimizely Graph Client present unable to load content type`);
+            return;
+        }
+        if (graphClient.debug)
+            console.warn(`🟠 [CmsContent] No content type provided for content ${contentLinkToString(contentLink)}, this causes an additional GraphQL query to resolve the myContentType`);
+        getContentType(contentLink, graphClient).then(ct => {
+            if (!isCancelled)
+                setMyContentType(ct);
+        });
+        return () => {
+            isCancelled = true;
+        };
+    }, [myContentType, contentLink, graphClient]);
+    useEffect(() => {
+        let isCancelled = false;
+        // Only load if load hasn't been disabled, and we have both the contentLink and Component
+        if (noDataLoad || !contentLink || !Component)
+            return;
+        if (!graphClient) {
+            console.warn(`🔴 [CmsContent] No Optimizely Graph Client present unable to load content type`);
+            return;
+        }
+        getContent(graphClient, contentLink, Component, fragmentData).then(newData => {
+            if (!isCancelled)
+                setData(newData);
+        });
+        return () => {
+            isCancelled = true;
+        };
+    }, [graphClient, contentLink, Component, fragmentData, noDataLoad]);
+    if (isComponentMissingComponent(Component))
+        return _jsx(Component, {});
+    return _jsx(Component, { contentLink: contentLink, data: data, inEditMode: ctx.inEditMode, layoutProps: layoutProps, children: children });
+}
+export default CmsContent;
+//# sourceMappingURL=client.js.map

package/dist/components/cms-content/client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.js","sourceRoot":"","sources":["../../../src/components/cms-content/client.tsx"],"names":[],"mappings":"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"}

package/dist/components/cms-content/get-content-type.d.ts

@@ -0,0 +1,13 @@
+import { type IOptiGraphClient, type ContentLink, type InlineContentLink } from "@remkoj/optimizely-graph-client";
+import type { ContentType } from "../../types.js";
+export type ContentTypeResolver = (type: ContentType | null | undefined, link: ContentLink, gqlClient: IOptiGraphClient) => PromiseLike<ContentType | undefined>;
+export declare function valueToPromiseLike<T>(value: T): PromiseLike<T>;
+/**
+ * Resolve the ContentType of an Optimizely CMS Component, identified by its content link
+ *
+ * @param       link        The ContentLink of the content item
+ * @param       gqlClient   The GraphQL client to use
+ * @returns     The ContentType, or undefined if it cannot be resolved
+ */
+export declare function getContentType(link: ContentLink | InlineContentLink, gqlClient: IOptiGraphClient): Promise<ContentType | undefined>;
+export default getContentType;

package/dist/components/cms-content/get-content-type.js

@@ -0,0 +1,70 @@
+import { isContentLink, isInlineContentLink, contentLinkToString } from "@remkoj/optimizely-graph-client";
+import { gql } from 'graphql-request';
+import { contentLinkToRequestVariables, normalizeContentType } from "../../utilities.js";
+export function valueToPromiseLike(value) {
+    const pl = {
+        then: (onfulfilled) => {
+            if (!onfulfilled)
+                return value;
+            return onfulfilled(value);
+        }
+    };
+    return pl;
+}
+/**
+ * Resolve the ContentType of an Optimizely CMS Component, identified by its content link
+ *
+ * @param       link        The ContentLink of the content item
+ * @param       gqlClient   The GraphQL client to use
+ * @returns     The ContentType, or undefined if it cannot be resolved
+ */
+export async function getContentType(link, gqlClient) {
+    if (isInlineContentLink(link)) {
+        console.error(`🔴 [CmsContent][getContentType] Unable to dynamically resolve the content type for inline content items: ${contentLinkToString(link)}`);
+        throw new Error(`Unable to dynamically resolve the content type for inline content items: ${contentLinkToString(link)}`);
+    }
+    if (!isContentLink(link)) {
+        console.error(`🔴 [CmsContent][getContentType] The provided link is not a valid content link: ${contentLinkToString(link)}`);
+        throw new Error(`The provided link is not a valid content link: ${contentLinkToString(link)}`);
+    }
+    const gqlQueryVars = contentLinkToRequestVariables(link);
+    const gqlResponse = await gqlClient.request(getContentTypeQuery, gqlQueryVars);
+    if (gqlResponse.Content?.total != 1) {
+        if (gqlClient.debug)
+            console.error(`🔴 [CmsContent][getContentType] Expected exactly one type, received ${gqlResponse.Content?.total ?? 0} types for`, gqlQueryVars);
+        return undefined;
+    }
+    const items = gqlResponse.Content?.items;
+    if (!items || items.length == 0) {
+        console.error(`🔴 [CmsContent][getContentType] The content item could not be found! (${contentLinkToString(link)})`);
+        throw new Error("The content item could not be found!");
+    }
+    const contentType = normalizeContentType(items[0]?._metadata?.types);
+    if (!contentType) {
+        console.error(`🔴 [CmsContent][getContentType] The item did not contain type information! (${contentLinkToString(link)})`);
+        throw new Error("The item did not contain type information");
+    }
+    return contentType;
+}
+export default getContentType;
+const getContentTypeQuery = gql `query getContentType($key: String!, $version: String, $locale: [Locales])
+{
+  _Content(
+    where: {
+      _metadata: {
+        key: { eq: $key }
+        version: { eq: $version }
+      }
+    },
+    locale: $locale
+    limit: 1
+  ) {
+    items {
+    	_metadata {
+        types
+      }
+    },
+    total
+  }
+}`;
+//# sourceMappingURL=get-content-type.js.map

package/dist/components/cms-content/get-content-type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-content-type.js","sourceRoot":"","sources":["../../../src/components/cms-content/get-content-type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,mBAAmB,EAAmE,MAAM,iCAAiC,CAAA;AAE1K,OAAO,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAA;AACrC,OAAO,EAAE,6BAA6B,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAA;AAIxF,MAAM,UAAU,kBAAkB,CAAI,KAAQ;IAE5C,MAAM,EAAE,GAAoB;QAC1B,IAAI,EAAE,CAAe,WAAiF,EAAE,EAAE;YACxG,IAAI,CAAC,WAAW;gBACd,OAAO,KAAyC,CAAA;YAClD,OAAO,WAAW,CAAC,KAAK,CAA0B,CAAA;QACpD,CAAC;KACF,CAAA;IACD,OAAO,EAAE,CAAA;AACX,CAAC;AAED;;;;;;GAMG;AACH,MAAM,CAAC,KAAK,UAAU,cAAc,CAAC,IAAqC,EAAE,SAA2B;IAEnG,IAAI,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC;QAC5B,OAAO,CAAC,KAAK,CAAC,4GAA6G,mBAAmB,CAAC,IAAI,CAAE,EAAE,CAAC,CAAA;QACxJ,MAAM,IAAI,KAAK,CAAC,4EAA6E,mBAAmB,CAAC,IAAI,CAAE,EAAE,CAAC,CAAA;IAC9H,CAAC;IAED,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC;QACvB,OAAO,CAAC,KAAK,CAAC,kFAAmF,mBAAmB,CAAC,IAAI,CAAE,EAAE,CAAC,CAAA;QAC9H,MAAM,IAAI,KAAK,CAAC,kDAAmD,mBAAmB,CAAC,IAAI,CAAE,EAAE,CAAC,CAAA;IACpG,CAAC;IAED,MAAM,YAAY,GAAG,6BAA6B,CAAC,IAAI,CAAC,CAAA;IACxD,MAAM,WAAW,GAAG,MAAM,SAAS,CAAC,OAAO,CAAyB,mBAAmB,EAAE,YAAY,CAAC,CAAA;IACtG,IAAI,WAAW,CAAC,OAAO,EAAE,KAAK,IAAI,CAAC,EAAE,CAAC;QAClC,IAAI,SAAS,CAAC,KAAK;YACf,OAAO,CAAC,KAAK,CAAC,uEAAwE,WAAW,CAAC,OAAO,EAAE,KAAK,IAAI,CAAE,YAAY,EAAE,YAAY,CAAC,CAAA;QACrJ,OAAO,SAAS,CAAA;IACpB,CAAC;IAED,MAAM,KAAK,GAAG,WAAW,CAAC,OAAO,EAAE,KAAK,CAAA;IACxC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;QAC9B,OAAO,CAAC,KAAK,CAAC,yEAA0E,mBAAmB,CAAC,IAAI,CAAE,GAAG,CAAC,CAAA;QACtH,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAA;IAC3D,CAAC;IAED,MAAM,WAAW,GAAG,oBAAoB,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,CAAA;IACpE,IAAI,CAAC,WAAW,EAAE,CAAC;QACf,OAAO,CAAC,KAAK,CAAC,+EAAgF,mBAAmB,CAAC,IAAI,CAAE,GAAG,CAAC,CAAA;QAC5H,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAA;IAChE,CAAC;IAED,OAAO,WAAW,CAAA;AACtB,CAAC;AAED,eAAe,cAAc,CAAA;AAa7B,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;EAmB7B,CAAA"}

package/dist/components/cms-content/get-content.d.ts

@@ -0,0 +1,4 @@
+import { type ContentLink, type InlineContentLink, type IOptiGraphClient } from "@remkoj/optimizely-graph-client";
+import { CmsComponent } from "../../types.js";
+export declare function getContent<NDL extends boolean = false>(client: IOptiGraphClient | undefined, contentLink: InlineContentLink | ContentLink | undefined, Component: CmsComponent<any> | undefined, fragmentData: Record<string, any> | undefined | null, noDataLoad?: NDL): NDL extends true ? Record<string, any> : Promise<Record<string, any>>;
+export default getContent;

package/dist/components/cms-content/get-content.js

@@ -0,0 +1,91 @@
+import { print } from 'graphql';
+import { isContentLink, isInlineContentLink, contentLinkToString, OptiCmsSchema } from "@remkoj/optimizely-graph-client";
+import { CmsContentFragments } from "../../data/queries.js";
+import { validatesFragment, contentLinkToRequestVariables, isCmsComponentWithFragment, isCmsComponentWithDataQuery } from "../../utilities.js";
+export function getContent(client, contentLink, Component, fragmentData, noDataLoad) {
+    const debug = client?.debug ?? false;
+    // Handle provided fragment
+    const componentLabel = Component?.displayName ?? Component?.toString() ?? 'undefined';
+    const fragmentProps = fragmentData ? Object.getOwnPropertyNames(fragmentData).filter(x => !CmsContentFragments.IContentDataProps.includes(x)) : [];
+    if (fragmentData && fragmentProps.length > 0) {
+        if (debug)
+            console.log("⚪ [CmsContent][getContent] Rendering CMS Component using fragment information", fragmentProps);
+        if (validatesFragment(Component) && !Component.validateFragment(fragmentData))
+            console.warn("🔴 [CmsContent][getContent] Invalid fragment data received, falling back to loading for ", componentLabel);
+        else
+            return (noDataLoad ? fragmentData : Promise.resolve(fragmentData));
+    }
+    if (isInlineContentLink(contentLink)) {
+        console.error(`🔴 [CmsContent][getContent] No data for content ${contentLinkToString(contentLink)}, data cannot be resolved for inline content`);
+        throw new Error(`Unable to render Inline CMS Content without data. (Content Type: ${componentLabel}; Content Link: ${contentLinkToString(contentLink)}; Data keys: ${Object.getOwnPropertyNames(fragmentData ?? {}).join(", ")})`);
+    }
+    if (noDataLoad) {
+        if (debug)
+            console.log(`⚪ [CmsContent][getContent] Component of type "${componentLabel}" was prohibited to load data`);
+        return (noDataLoad ? {} : Promise.resolve({}));
+    }
+    if (!isContentLink(contentLink)) {
+        if (debug)
+            console.log(`🔴 [CmsContent][getContent] Unable to load data for "${componentLabel}" without a valid content link`);
+        return Promise.resolve({});
+    }
+    // Return immediately when there's no client
+    if (!client) {
+        console.log(`🔴 [CmsContent][getContent] Data loading for "${componentLabel}" requires a GraphQL Client`);
+        throw new Error(`Data loading for "${componentLabel}" requires a GraphQL Client`);
+    }
+    if (isCmsComponentWithFragment(Component))
+        return getComponentDataFromFragment(Component, contentLink, client).then(data => (data || {}));
+    if (isCmsComponentWithDataQuery(Component)) {
+        const gqlQuery = Component.getDataQuery();
+        const gqlVariables = contentLinkToRequestVariables(contentLink);
+        if (client.debug)
+            console.log("⚪ [CmsContent] Component data fetching variables:", gqlVariables);
+        return client.request(gqlQuery, gqlVariables).then(gqlResponse => {
+            if (client.debug)
+                console.log("⚪ [CmsContent] Component request the following data:", gqlResponse);
+            return gqlResponse;
+        });
+    }
+    // Assume there's no data load required for the component
+    if (client.debug)
+        console.log(`⚪ [CmsContent] Component of type "${componentLabel}" did not request loading of data`);
+    return Promise.resolve({});
+}
+export default getContent;
+async function getComponentDataFromFragment(Component, contentLink, client) {
+    const [name, fragment] = Component.getDataFragment();
+    if (client.debug)
+        console.log(`⚪ [CmsContent] Component data fetching using fragment: ${name}`);
+    const fragmentQuery = client.currentOptiCmsSchema == OptiCmsSchema.CMS12 ?
+        `query getContentFragmentById($key: String!, $version: Int, $locale: [Locales!]) { contentById: Content(where: { ContentLink: { GuidValue: { eq: $key }, WorkId: { eq: $version } } }, locale: $locale) { total, items { _type: __typename, _metadata: ContentLink { key: GuidValue, version: WorkId }, _locale: Language { name: Name } ...${name} }}}\n ${print(fragment)}` :
+        `query getContentFragmentById($key: String!, $version: String, $locale: [Locales!]) {contentById: _Content(where: {_metadata: {key: { eq: $key }, version: { eq: $version }}} locale: $locale) { total, items { _type: __typename, _metadata { key, version, locale } ...${name} }}}\n ${print(fragment)}`;
+    const fragmentVariables = contentLinkToRequestVariables(contentLink);
+    if (client.currentOptiCmsSchema == OptiCmsSchema.CMS12) {
+        try {
+            const versionNr = fragmentVariables.version ? Number.parseInt(fragmentVariables.version) : 0;
+            if (versionNr > 0)
+                fragmentVariables.version = versionNr;
+            else
+                fragmentVariables.version = undefined;
+        }
+        catch {
+            fragmentVariables.version = undefined;
+        }
+    }
+    if (client.debug)
+        console.log(`⚪ [CmsContent] Component data fetching using variables: ${JSON.stringify(fragmentVariables)}`);
+    const fragmentResponse = await client.request(fragmentQuery, fragmentVariables);
+    const totalItems = fragmentResponse.contentById.total || 0;
+    if (totalItems < 1)
+        throw new Error(`CmsContent expected to load exactly one content item of type ${name}, received ${totalItems} from Optimizely Graph. Content Item: ${JSON.stringify(fragmentVariables)}`);
+    if (totalItems > 1 && client.debug)
+        console.warn(`🟠 [CmsContent] Resolved ${totalItems} content items, expected only 1. Picked the first one`);
+    if (client.currentOptiCmsSchema == OptiCmsSchema.CMS12) {
+        fragmentResponse.contentById.items[0]._metadata.locale = fragmentResponse.contentById.items[0]._metadata.locale ?? fragmentResponse.contentById.items[0]._locale?.name;
+        if (fragmentResponse.contentById.items[0]._locale)
+            delete fragmentResponse.contentById.items[0]._locale;
+    }
+    return fragmentResponse.contentById.items[0];
+}
+//# sourceMappingURL=get-content.js.map

package/dist/components/cms-content/get-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-content.js","sourceRoot":"","sources":["../../../src/components/cms-content/get-content.ts"],"names":[],"mappings":"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"}

package/dist/components/cms-content/resolve-component.d.ts

@@ -0,0 +1,18 @@
+import { type ComponentTypeHandle } from "../../factory/types.js";
+import { type EnhancedCmsComponent } from "./types.js";
+import { type GenericContext } from "../../context/types.js";
+import { type FunctionComponent, type PropsWithChildren, type ComponentType } from "react";
+/**
+ * Helper function to safely resolve a component from the ContentType information to
+ *
+ * @param   contentType     The content type to get the component for
+ * @param   prefix          The prefix/context of the component (typically "component", "element", etc..)
+ * @param   ctx             The context in which to operate
+ * @returns The component required for rendering
+ */
+export declare function resolveComponent(contentType: ComponentTypeHandle | null | undefined, prefix: string | null | undefined, ctx: GenericContext): EnhancedCmsComponent | ComponentMissingComponent;
+export default resolveComponent;
+export type ComponentMissingComponent = FunctionComponent<PropsWithChildren> & {
+    displayName: 'Opti::ComponentMissing';
+};
+export declare function isComponentMissingComponent(toTest: ComponentType<any> | null | undefined): toTest is ComponentMissingComponent;

package/dist/components/cms-content/resolve-component.js

@@ -0,0 +1,53 @@
+import { jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as Utils from "../../utilities.js";
+/**
+ * Helper function to safely resolve a component from the ContentType information to
+ *
+ * @param   contentType     The content type to get the component for
+ * @param   prefix          The prefix/context of the component (typically "component", "element", etc..)
+ * @param   ctx             The context in which to operate
+ * @returns The component required for rendering
+ */
+export function resolveComponent(contentType, prefix, ctx) {
+    const { factory, isDebug, inEditMode } = ctx;
+    // Ensure we have a factory - we should, but lets' help by providing an explicit error
+    if (!factory) {
+        console.error(`🔴 [CmsContent] No content type factory registered in the context`);
+        throw new Error("Empty factory on the context");
+    }
+    // Optimizely Graph stores the type in Most Significant first order, we need least significant first, also we're stripping out the common "Content" item from it
+    const myContentType = Array.isArray(contentType) ? (prefix ?
+        Utils.normalizeAndPrefixContentType(contentType.reverse(), prefix) :
+        Utils.normalizeContentType(contentType.reverse(), true)) : contentType;
+    // Validate that we have a value to ask the factory a component for
+    if (!myContentType || myContentType.length == 0) {
+        if (isDebug)
+            console.error(`🔴 [CmsContent] The content type ${JSON.stringify(contentType)}, with prefix ${JSON.stringify(prefix)} yielded an empty normalized type`);
+        throw new Error(`The content type ${JSON.stringify(contentType)}, with prefix ${JSON.stringify(prefix)} yielded an empty normalized type`);
+    }
+    // Resolve component
+    const Component = factory.resolve(myContentType);
+    // Handle component not found in factory
+    if (!Component) {
+        const contentTypeDisplay = Array.isArray(myContentType) ? myContentType.join('/') : myContentType;
+        if (isDebug)
+            console.warn(`🟠 [CmsContent] Component of type "${contentTypeDisplay}" not resolved by factory`);
+        if (isDebug || inEditMode) {
+            const ErrorComponent = props => _jsxs(_Fragment, { children: [_jsxs("div", { className: 'opti-error', children: ["Component of type \"", contentTypeDisplay, "\" not resolved by factory"] }), props.children] });
+            ErrorComponent.displayName = 'Opti::ComponentMissing';
+            return ErrorComponent;
+        }
+        const ErrorComponent = props => props.children;
+        ErrorComponent.displayName = 'Opti::ComponentMissing';
+        return ErrorComponent;
+    }
+    // Return the component
+    if (isDebug)
+        console.log("⚪ [CmsContent] Rendering item using component:", Component?.displayName ?? Component);
+    return Component;
+}
+export default resolveComponent;
+export function isComponentMissingComponent(toTest) {
+    return toTest?.displayName == 'Opti::ComponentMissing';
+}
+//# sourceMappingURL=resolve-component.js.map

package/dist/components/cms-content/resolve-component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-component.js","sourceRoot":"","sources":["../../../src/components/cms-content/resolve-component.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,KAAK,MAAM,oBAAoB,CAAA;AAI3C;;;;;;;GAOG;AACH,MAAM,UAAU,gBAAgB,CAAC,WAAmD,EAAE,MAAiC,EAAE,GAAmB;IAExI,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,GAAG,CAAA;IAE5C,sFAAsF;IACtF,IAAI,CAAC,OAAO,EAAE,CAAC;QACX,OAAO,CAAC,KAAK,CAAC,mEAAmE,CAAC,CAAA;QAClF,MAAM,IAAI,KAAK,CAAC,8BAA8B,CAAC,CAAA;IACnD,CAAC;IAED,gKAAgK;IAChK,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;QACpD,KAAK,CAAC,6BAA6B,CAAC,WAAW,CAAC,OAAO,EAAE,EAAE,MAAM,CAAC,CAAC,CAAC;QACpE,KAAK,CAAC,oBAAoB,CAAC,WAAW,CAAC,OAAO,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAA;IAE9E,mEAAmE;IACnE,IAAI,CAAC,aAAa,IAAI,aAAa,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;QAC9C,IAAI,OAAO;YACP,OAAO,CAAC,KAAK,CAAC,oCAAqC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAE,iBAAkB,IAAI,CAAC,SAAS,CAAC,MAAM,CAAE,mCAAmC,CAAC,CAAA;QAChK,MAAM,IAAI,KAAK,CAAC,oBAAqB,IAAI,CAAC,SAAS,CAAC,WAAW,CAAE,iBAAkB,IAAI,CAAC,SAAS,CAAC,MAAM,CAAE,mCAAmC,CAAC,CAAA;IAClJ,CAAC;IAED,oBAAoB;IACpB,MAAM,SAAS,GAAG,OAAO,CAAC,OAAO,CAAC,aAAa,CAAqC,CAAA;IAEpF,wCAAwC;IACxC,IAAI,CAAC,SAAS,EAAE,CAAC;QACb,MAAM,kBAAkB,GAAG,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,CAAA;QACjG,IAAI,OAAO;YACP,OAAO,CAAC,IAAI,CAAC,sCAAuC,kBAAmB,2BAA2B,CAAC,CAAA;QACvG,IAAI,OAAO,IAAI,UAAU,EAAE,CAAC;YACxB,MAAM,cAAc,GAA+B,KAAK,CAAC,EAAE,CAAC,8BACxD,eAAK,SAAS,EAAC,YAAY,qCAAsB,kBAAkB,kCAAiC,EAClG,KAAK,CAAC,QAAQ,IACjB,CAAA;YACH,cAAc,CAAC,WAAW,GAAG,wBAAwB,CAAA;YACrD,OAAO,cAAc,CAAA;QACzB,CAAC;QACD,MAAM,cAAc,GAA+B,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAA;QAC1E,cAAc,CAAC,WAAW,GAAG,wBAAwB,CAAA;QACrD,OAAO,cAAc,CAAA;IACzB,CAAC;IAED,uBAAuB;IACvB,IAAI,OAAO;QACP,OAAO,CAAC,GAAG,CAAC,gDAAgD,EAAE,SAAS,EAAE,WAAW,IAAI,SAAS,CAAC,CAAA;IACtG,OAAO,SAAS,CAAA;AACpB,CAAC;AAED,eAAe,gBAAgB,CAAA;AAM/B,MAAM,UAAU,2BAA2B,CAAC,MAA6C;IAErF,OAAO,MAAM,EAAE,WAAW,IAAI,wBAAwB,CAAA;AAC1D,CAAC"}

package/dist/components/cms-content/resolve-content-type.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Resolve and normalize the content type for a call to a CmsContent component.
+ *
+ * When the contentType provided is invalid, it will try to resolve the
+ * contentType from the fragmentData, if provided.
+ *
+ * @param       contentType         The content type received by the CmsContent
+ *                                  component
+ * @param       fragmentData        The data received to render the CmsContent
+ * @returns     The content type
+ */
+export declare function resolveContentType(contentType: string | (string | null)[] | null | undefined, fragmentData?: {
+    [fieldname: string]: any;
+}): string[] | undefined;
+export default resolveContentType;

package/dist/components/cms-content/resolve-content-type.js

@@ -0,0 +1,29 @@
+import { isNonEmptyString } from "../../utilities.js";
+/**
+ * Resolve and normalize the content type for a call to a CmsContent component.
+ *
+ * When the contentType provided is invalid, it will try to resolve the
+ * contentType from the fragmentData, if provided.
+ *
+ * @param       contentType         The content type received by the CmsContent
+ *                                  component
+ * @param       fragmentData        The data received to render the CmsContent
+ * @returns     The content type
+ */
+export function resolveContentType(contentType, fragmentData) {
+    if (Array.isArray(contentType)) {
+        const filtered = contentType.filter(isNonEmptyString);
+        if (filtered.length > 0)
+            return filtered;
+    }
+    else if (typeof (contentType) == 'string' && contentType.length > 0)
+        return contentType.split("/");
+    if (fragmentData) {
+        const metaTypes = fragmentData._metadata?.types;
+        if (metaTypes && Array.isArray(metaTypes))
+            return resolveContentType(metaTypes);
+    }
+    return undefined;
+}
+export default resolveContentType;
+//# sourceMappingURL=resolve-content-type.js.map

package/dist/components/cms-content/resolve-content-type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-content-type.js","sourceRoot":"","sources":["../../../src/components/cms-content/resolve-content-type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAErD;;;;;;;;;;GAUG;AACH,MAAM,UAAU,kBAAkB,CAAC,WAA0D,EAAE,YAAyC;IAEpI,IAAI,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC;QAC7B,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAA;QACrD,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC;YACnB,OAAO,QAAQ,CAAA;IACvB,CAAC;SAAM,IAAI,OAAM,CAAC,WAAW,CAAC,IAAI,QAAQ,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC;QAChE,OAAO,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;IAEjC,IAAI,YAAY,EAAE,CAAC;QACf,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,EAAE,KAAK,CAAA;QAC/C,IAAI,SAAS,IAAI,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC;YACrC,OAAO,kBAAkB,CAAC,SAAS,CAAC,CAAA;IAC5C,CAAC;IAED,OAAO,SAAS,CAAA;AACpB,CAAC;AAED,eAAe,kBAAkB,CAAA"}

package/dist/components/cms-content/rsc.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react';
+import type { BaseCmsContentProps } from './types.js';
+export type * from "./types.js";
+/**
+ * React Server Side component for the CmsContent
+ *
+ * @param     param0
+ * @returns
+ */
+export declare function CmsContent<LocalesType = string>({ contentType, contentTypePrefix, contentLink: rawContentLink, children, fragmentData, layoutProps, noDataLoad, ctx }: BaseCmsContentProps<LocalesType>): Promise<ReactNode>;
+export default CmsContent;

package/dist/components/cms-content/rsc.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import getContentType from './get-content-type.js';
+import getContent from './get-content.js';
+import { AuthMode, normalizeContentLink, contentLinkToString } from '@remkoj/optimizely-graph-client';
+import resolveComponent, { isComponentMissingComponent } from './resolve-component.js';
+import resolveContentType from './resolve-content-type.js';
+/**
+ * React Server Side component for the CmsContent
+ *
+ * @param     param0
+ * @returns
+ */
+export async function CmsContent({ 
+// Own properties
+contentType, contentTypePrefix, contentLink: rawContentLink, children, fragmentData, layoutProps, noDataLoad, ctx }) {
+    // Prepare context
+    const graphClient = ctx.client;
+    // Normalize the ContentLink
+    const contentLink = normalizeContentLink(rawContentLink);
+    // Ensure we have the contentType
+    let myContentType = resolveContentType(contentType, fragmentData);
+    if (!myContentType) {
+        if (!graphClient) {
+            console.error(`🔴 [CmsContent] Unable to load content type - no Optimizely Graph client present`);
+            return;
+        }
+        if (!contentLink) {
+            console.error(`🔴 [CmsContent] Unable to load content type - no content link present`);
+            return;
+        }
+        myContentType = await getContentType(contentLink, graphClient);
+    }
+    // Provide a bit of debugging context
+    if (graphClient?.debug) {
+        const mode = ctx.inEditMode ? "Edit" : ctx.inPreviewMode ? "Preview" : "Public";
+        console.log(`👔 [CmsContent] ${mode} mode active for content with id: ${contentLinkToString(contentLink)} of type ${myContentType?.join("/") ?? "unknown"}`);
+        if ((ctx.inEditMode || ctx.inPreviewMode) && graphClient.currentAuthMode == AuthMode.Public)
+            console.warn(`🟠 [CmsContent] ${mode} mode active without an authenticated graphClient, this will cause problems. Make sure the context has an authenticated client.`);
+    }
+    // Retrieve the Component used to render this item
+    const Component = resolveComponent(myContentType, contentTypePrefix, ctx);
+    if (isComponentMissingComponent(Component))
+        return _jsx(Component, {});
+    // Ensure we have the data the Component requested
+    const data = await getContent(graphClient, contentLink, Component, fragmentData, noDataLoad);
+    // Output the actual component
+    return _jsx(Component, { contentLink: contentLink, data: data, inEditMode: ctx.inEditMode, layoutProps: layoutProps, children: children });
+}
+export default CmsContent;
+//# sourceMappingURL=rsc.js.map