@remkoj/optimizely-cms-react 3.1.1 → 3.2.0

package/README.md

@@ -19,6 +19,8 @@ Regardless of which export you're using, the following components are available.
 | `<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 |
+| `getFactory()` | Create an instance of the `DefaultComponentFactory` and return it. See below for more information on using the Component Factory. |
+| `DefaultComponentFactory` | Default implementation of the `ComponentFactory` interface. See below for more information on using the Component Factory. |
 
 ### Server Side components & functions
 In addition to the components above, the following methods are available in the `@remkoj/optimizely-cms-react/rsc` export only:
@@ -36,3 +38,12 @@ In addition to the components above, the following methods are available in the
 | --- | --- |
 | `<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. |
+
+### Component Factory
+The component factory allows resolution from the content type reported by Optimizely CMS into a React component that will be used to render that content. Each component must be registered through the `register()` or `registerAll()` methods. After registration, the components can be retrieved using `resolve()` and resolvability can be checked through `has()`. The JSDoc annotation has more details on the usage of each of these methods.
+
+An entry within the factory consists of the following fields:
+- ***type:*** The identifier of the content type, can either be an array of strings or a string. The implementation *should* normalize the type. The `DefaultComponentFactory` normalized to a string, using `/` as item separator.
+- ***component:*** The component to do the actual rendering of the data. *The factory is indifferent to the actual type, so this could be the output of `next/dynamic` to trigger bundle splitting in Next.js.*
+- ***useSuspense:*** When set to `true` the component will be wrapped in the `<Suspense></Suspense>` from React. Optional, the default value is `false`.
+- ***loader:*** The component to show while Suspense is awaiting the actual component. This component is given to the `fallback` property of `<Suspense>`. Optional, the default value is `undefined`.

package/dist/factory/default.d.ts

@@ -15,7 +15,7 @@ export declare class DefaultComponentFactory implements ComponentFactory {
      *                              with the factory.
      */
     constructor(initialComponents?: ComponentTypeDictionary);
-    register(type: ComponentTypeHandle, component: ComponentType): void;
+    register(type: ComponentTypeHandle, component: ComponentType, useSuspense?: boolean, loader?: ComponentType): void;
     registerAll(components: ComponentTypeDictionary): void;
     has(type: ComponentTypeHandle): boolean;
     resolve(type: ComponentTypeHandle): undefined | ComponentType;

package/dist/factory/default.js

@@ -1,3 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense } from 'react';
 export const MERGE_SYMBOL = '/';
 export const EmptyComponentHandle = '$$fragment$$';
 /**
@@ -12,43 +14,62 @@ export class DefaultComponentFactory {
      *                              with the factory.
      */
     constructor(initialComponents) {
-        this.registry = {};
-        this.dbg = process.env.OPTIMIZELY_DEBUG == '1';
+        this.registry = new Map();
+        // Resolve debug mode
+        try {
+            this.dbg = process.env.OPTIMIZELY_DEBUG == '1';
+        }
+        catch {
+            this.dbg = false;
+        }
+        // Add provided default dictionary
         if (initialComponents)
             this.registerAll(initialComponents);
     }
-    register(type, component) {
-        type = processComponentTypeHandle(type);
+    register(type, component, useSuspense = false, loader) {
+        const registryKey = processComponentTypeHandle(type);
         if (this.dbg)
-            console.log(`➕ [DefaultComponentFactory] Adding ${type}`);
-        this.registry[type] = component;
+            console.log(`➕ [DefaultComponentFactory] Adding ${registryKey}`);
+        this.registry.set(registryKey, { type, component, useSuspense, loader });
     }
     registerAll(components) {
-        components.forEach(c => this.register(c.type, c.component));
+        components.forEach(c => {
+            const registryKey = processComponentTypeHandle(c.type);
+            if (this.dbg)
+                console.log(`➕ [DefaultComponentFactory] Adding ${registryKey}`);
+            this.registry.set(registryKey, c);
+        });
     }
     has(type) {
-        type = processComponentTypeHandle(type);
+        const registryKey = processComponentTypeHandle(type);
         if (this.dbg)
-            console.log(`🔎 [DefaultComponentFactory] Checking for ${type}`);
-        return Object.getOwnPropertyNames(this.registry).includes(type);
+            console.log(`🔎 [DefaultComponentFactory] Checking for ${registryKey}`);
+        return this.registry.has(registryKey);
     }
     resolve(type) {
-        type = processComponentTypeHandle(type);
+        const registryKey = processComponentTypeHandle(type);
         if (this.dbg)
-            console.log(`⚡ [DefaultComponentFactory] Resolving ${type}`);
-        if (Object.getOwnPropertyNames(this.registry).includes(type))
-            return this.registry[type];
-        return undefined;
+            console.log(`⚡ [DefaultComponentFactory] Resolving ${registryKey}`);
+        const entry = this.registry.get(registryKey);
+        if (!entry)
+            return undefined; // The key is not registered in the factory
+        if (entry.useSuspense != true)
+            return entry.component; // There's no suspense, so we're using the component directly
+        // We need to wrap the component in a Supense
+        const EntryComponent = entry.component;
+        const EntryLoader = entry.loader;
+        function Suspended(props) {
+            return _jsx(Suspense, { fallback: EntryLoader && _jsx(EntryLoader, { ...props }), children: _jsx(EntryComponent, { ...props }) });
+        }
+        return Suspended;
     }
     extract() {
-        const extracted = [];
-        Object.getOwnPropertyNames(this.registry).map(typeKey => {
-            extracted.push({
-                type: typeKey,
-                component: this.registry[typeKey]
-            });
+        return Array.from(this.registry.entries()).map(e => {
+            return {
+                ...e[1],
+                type: e[0]
+            };
         });
-        return extracted;
     }
 }
 function processComponentTypeHandle(handle) {

package/dist/factory/default.js.map

@@ -1 +1 @@
-{"version":3,"file":"default.js","sourceRoot":"","sources":["../../src/factory/default.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;AAE/B,MAAM,CAAC,MAAM,oBAAoB,GAAI,cAAc,CAAA;AAEnD;;;GAGG;AACH,MAAM,OAAO,uBAAuB;IAIhC;;;;;OAKG;IACH,YAAmB,iBAA2C;QATtD,aAAQ,GAA2C,EAAE,CAAA;QAWzD,IAAI,CAAC,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,gBAAgB,IAAI,GAAG,CAAA;QAC9C,IAAI,iBAAiB;YACjB,IAAI,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAA;IAC3C,CAAC;IAED,QAAQ,CAAC,IAAyB,EAAE,SAAwB;QAExD,IAAI,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAA;QACvC,IAAI,IAAI,CAAC,GAAG;YAAE,OAAO,CAAC,GAAG,CAAC,sCAAuC,IAAK,EAAE,CAAC,CAAA;QACzE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,SAAS,CAAA;IACnC,CAAC;IAED,WAAW,CAAC,UAAmC;QAE3C,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAA;IAC/D,CAAC;IAED,GAAG,CAAC,IAAyB;QAEzB,IAAI,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAA;QACvC,IAAI,IAAI,CAAC,GAAG;YAAE,OAAO,CAAC,GAAG,CAAC,6CAA8C,IAAK,EAAE,CAAC,CAAA;QAChF,OAAO,MAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;IACnE,CAAC;IAED,OAAO,CAAC,IAAyB;QAE7B,IAAI,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAA;QACvC,IAAI,IAAI,CAAC,GAAG;YAAE,OAAO,CAAC,GAAG,CAAC,yCAA0C,IAAK,EAAE,CAAC,CAAA;QAC5E,IAAI,MAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;YACxD,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;QAC9B,OAAO,SAAS,CAAA;IACpB,CAAC;IAED,OAAO;QAEH,MAAM,SAAS,GAA6B,EAAE,CAAA;QAC9C,MAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACpD,SAAS,CAAC,IAAI,CAAC;gBACX,IAAI,EAAE,OAAO;gBACb,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC;aACpC,CAAC,CAAA;QACN,CAAC,CAAC,CAAA;QACF,OAAO,SAAS,CAAA;IACpB,CAAC;CACJ;AAED,SAAS,0BAA0B,CAAC,MAA2B;IAE3D,IAAI,OAAM,CAAC,MAAM,CAAC,IAAI,QAAQ;QAC1B,OAAO,MAAM,IAAI,EAAE,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,MAAM,CAAA;IACvD,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,OAAM,CAAC,CAAC,CAAC,IAAI,QAAQ,CAAC;QACjE,OAAO,MAAM;aACR,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAG,iCAAiC;aACpF,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,IAAI,SAAS,CAAC,CAAU,iCAAiC;aACpF,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAO,0BAA0B;aAC7E,IAAI,CAAC,YAAY,CAAC,CAAA,CAAiC,kCAAkC;IAC9F,MAAM,IAAI,KAAK,CAAC,kCAAmC,OAAM,CAAC,MAAM,CAAE,EAAE,CAAC,CAAA;AACzE,CAAC"}
+{"version":3,"file":"default.js","sourceRoot":"","sources":["../../src/factory/default.tsx"],"names":[],"mappings":"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"}

package/dist/factory/types.d.ts

@@ -7,10 +7,25 @@ export type ComponentType = (ReactComponentType<any>) | (ReactExoticComponent<an
  *
  */
 export type ComponentTypeHandle = string | string[];
-export type ComponentTypeDictionary = {
+export type ComponentTypeDictionary = Array<ComponentTypeDictionaryEntry>;
+export type ComponentTypeDictionaryEntry = {
+    /**
+     * The component type to register
+     */
     type: ComponentTypeHandle;
+    /**
+     * The component to bind to the type
+     */
     component: ComponentType;
-}[];
+    /**
+     * If set to 'true' the registered component will be wrapped in <Suspense />
+     */
+    useSuspense?: boolean;
+    /**
+     * The component to use as "loading" state by the <Suspense />
+     */
+    loader?: ComponentType;
+};
 /**
  * Component Factory
  */
@@ -24,10 +39,13 @@ export interface ComponentFactory {
     has(type: ComponentTypeHandle): boolean;
     /**
      * Register an individual component
+     *
      * @param       type            The component type to register
-     * @param       componentType   The component to bind to the type
+     * @param       component       The component to bind to the type
+     * @param       useSuspense     If set to 'true' the registered component will be wrapped in <Suspense />
+     * @param       loader          The component to use as "loading" state by the <Suspense />
      */
-    register(type: ComponentTypeHandle, componentType: ComponentType): void;
+    register(type: ComponentTypeHandle, component: ComponentType, useSuspense?: boolean, loader?: ComponentType): void;
     /**
      * Register all components provided through the dictionary
      *

package/dist/types.d.ts

@@ -1,7 +1,7 @@
 import type { PropsWithChildren, ComponentType as ReactComponentType } from "react";
 import type { DocumentNode } from "graphql";
 import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
-import type { ContentLinkWithLocale, InlineContentLinkWithLocale } from "@remkoj/optimizely-graph-client";
+import type { ContentLinkWithLocale, ContentLink, InlineContentLinkWithLocale } from "@remkoj/optimizely-graph-client";
 export type ContentType = string[];
 export type { 
 /**
@@ -30,7 +30,8 @@ export type CmsComponentProps<T, L extends Record<string, any> = Record<string,
      */
     layoutProps?: L;
 }>;
-export type ContentQueryProps<LocaleType = string> = ContentLinkWithLocale<LocaleType> & {
+export type ContentQueryProps<LocaleType = string> = ContentLink & {
+    locale?: Array<LocaleType> | LocaleType | null;
     path?: string | null;
     domain?: string | null;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@remkoj/optimizely-cms-react",
   "license": "Apache-2.0",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "packageManager": "yarn@4.1.1",
   "repository": "https://github.com/remkoj/optimizely-dxp-clients.git",
   "author": "Remko Jantzen <693172+remkoj@users.noreply.github.com>",
@@ -28,7 +28,7 @@
     }
   },
   "devDependencies": {
-    "@remkoj/optimizely-graph-client": "3.1.1",
+    "@remkoj/optimizely-graph-client": "3.2.0",
     "@types/crypto-js": "^4.2.2",
     "@types/node": "^22.9.0",
     "@types/react": "^18.3.12",