@uniformdev/canvas-next-rsc 20.31.1-alpha.1 → 20.31.1-alpha.185

package/dist/components/DefaultNotImplementedComponent.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CANVAS_LOCALIZATION_TYPE } from '@uniformdev/canvas';
+const wrapperStyles = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '0.5rem',
+    borderLeft: '4px solid #e42535',
+    padding: '16px',
+    fontSize: '16px',
+    borderRadius: '0 8px 8px 0',
+    margin: '8px',
+    backgroundColor: 'rgba(255, 255, 255, 0.45)',
+    color: '#1d3557',
+};
+export function DefaultNotImplementedComponent(props) {
+    var _a, _b, _c;
+    const componentType = (_a = props.component) === null || _a === void 0 ? void 0 : _a.type;
+    if (!componentType) {
+        return null;
+    }
+    if (componentType === CANVAS_LOCALIZATION_TYPE) {
+        return (_jsx("div", { style: wrapperStyles, children: _jsxs("p", { children: ["Seems like localization is not enabled in your application. Please read our documentation on how to", ' ', _jsx("a", { href: "https://docs.uniform.app/guides/composition/localization#activate-front-end", target: "_blank", style: { fontWeight: 'bolder', textDecoration: 'underline' }, rel: "noreferrer", children: "enable localization in your front-end application." })] }) }));
+    }
+    const proposedFileName = `${componentType[0].toUpperCase()}${componentType.substring(1)}`;
+    const probableProps = Object.keys((_b = props.component.parameters) !== null && _b !== void 0 ? _b : {});
+    const probableSlots = Object.keys((_c = props.component.slots) !== null && _c !== void 0 ? _c : {});
+    return (_jsxs("div", { style: wrapperStyles, children: [_jsx("h2", { style: { fontSize: '1.2rem' }, children: "Unknown Component" }), _jsxs("p", { children: ["Received request from Uniform to render a component with the public ID: ", _jsx("code", { children: componentType }), "."] }), _jsxs("p", { children: [_jsx("code", { children: "<UniformComposition />" }), " does not have ", _jsx("code", { children: componentType }), " mapped to a React component yet."] }), _jsx("p", { children: "To teach your app how to render this component:" }), ' ', _jsxs("ul", { style: {
+                    listStyleType: 'disc',
+                    marginLeft: '1rem',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '0.5rem',
+                }, children: [_jsxs("li", { children: ["Create a React component and register it with Uniform, for example", _jsx("pre", { children: `function ${proposedFileName}(${probableProps.length > 0 ? `{ ${probableProps.join(', ')} }` : ''}) {
+  return (
+    <div>
+      ${proposedFileName}!
+      ${probableSlots.length > 0
+                                    ? probableSlots.map((slot) => `<UniformSlot name="${slot}" />`).join('\n      ')
+                                    : ''}
+    </div>
+  )
+}
+
+registerUniformComponent({ type: "${componentType}", component: ${proposedFileName} })` }), _jsxs("details", { children: [_jsx("summary", { style: { cursor: 'pointer' }, children: "Props that your React component will receive" }), _jsx("pre", { children: JSON.stringify(props, null, 2) })] })] }), _jsxs("li", { children: ["Import the component into the file where ", _jsx("code", { children: "<UniformComposition />" }), " is defined, for example ", _jsx("pre", { children: `import "../components/${proposedFileName}.tsx"` })] })] }), ' ', _jsxs("p", { children: ["Need more help?", ' ', _jsx("a", { href: "https://docs.uniform.app/docs/guides/composition/rendering", target: "_blank", rel: "noreferrer", style: { textDecoration: 'underline' }, children: "Check out the documentation." })] })] }));
+}

package/dist/components/GoogleTagManagerAnalytics.d.ts

@@ -0,0 +1,3 @@
+export declare const GoogleTagManagerAnalytics: (props?: {
+  measurementId?: string;
+}) => import('react/jsx-runtime').JSX.Element;

package/dist/components/GoogleTagManagerAnalytics.js

@@ -0,0 +1,44 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Script from 'next/script';
+import { useEffect } from 'react';
+import { useUniformContext } from '../hooks/useUniformContext';
+const isGtagConfigured = () => {
+    return typeof window !== 'undefined' && typeof window.gtag === 'function';
+};
+export const GoogleTagManagerAnalytics = (props) => {
+    const { seenComponents } = useUniformContext();
+    useEffect(() => {
+        if (!(seenComponents === null || seenComponents === void 0 ? void 0 : seenComponents.length)) {
+            return;
+        }
+        if (!isGtagConfigured()) {
+            // eslint-disable-next-line no-console
+            console.warn('Google Tag Manager is not configured. Please add the gtag script to your site.');
+            return;
+        }
+        seenComponents.forEach((component) => {
+            var _a, _b, _c, _d, _e;
+            if (component.type === 'personalization') {
+                (_b = (_a = window).gtag) === null || _b === void 0 ? void 0 : _b.call(_a, 'event', component.id, {
+                    event_category: 'Uniform Personalization',
+                    event_label: component.variants.join(', '),
+                    is_control_group: component.control ? 1 : 0,
+                });
+            }
+            else if (component.type === 'test') {
+                (_d = (_c = window).gtag) === null || _d === void 0 ? void 0 : _d.call(_c, 'event', component.id, {
+                    event_category: 'Uniform AB Testing',
+                    event_label: (_e = component.variant) !== null && _e !== void 0 ? _e : 'No Variant',
+                });
+            }
+        });
+    }, [seenComponents]);
+    return (_jsx(_Fragment, { children: Boolean(props === null || props === void 0 ? void 0 : props.measurementId) && (_jsxs(_Fragment, { children: [_jsx(Script, { src: `https://www.googletagmanager.com/gtag/js?id=${props.measurementId}`, strategy: "afterInteractive" }), _jsx(Script, { id: "google-analytics", strategy: "afterInteractive", children: `
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){window.dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      gtag('config', '${props.measurementId}');
+    ` })] })) }));
+};

package/dist/components/UniformComponent.d.ts

@@ -0,0 +1,35 @@
+import {
+  type ComponentInstance,
+  type RootComponentInstance,
+  RouteGetResponseComposition,
+} from '@uniformdev/canvas';
+import { ReactNode } from 'react';
+export type CompositionContext = Omit<RouteGetResponseComposition, 'compositionApiResponse'> & {
+  composition: RootComponentInstance;
+  path: string;
+  state?: number;
+  searchParams:
+    | {
+        [key: string]: string | undefined;
+      }
+    | undefined;
+  cookieValue: string | undefined;
+  isDraftMode: boolean;
+  isContextualEditing: boolean;
+};
+export type ComponentProps<TProps = unknown> = TProps & {
+  component: ComponentInstance;
+  context: CompositionContext;
+};
+export type UniformComponentProps<TRenderProps = unknown> = {
+  data: ComponentInstance;
+  context: CompositionContext;
+  children?: ReactNode | ((props: ComponentProps<TRenderProps>) => JSX.Element);
+};
+export declare function UniformComponent({
+  data,
+  children,
+  context,
+}: UniformComponentProps): import('react').FunctionComponentElement<{
+  children?: ReactNode;
+}>;

package/dist/components/UniformComponent.js

@@ -0,0 +1,14 @@
+import { createElement, Fragment } from 'react';
+import { componentStoreResolver } from '../register/componentStoreResolver';
+import { resolveChildren } from '../resolve/resolveChildren';
+export function UniformComponent({ data, children, context }) {
+    const resolvedChildren = resolveChildren({
+        children,
+        data,
+        context,
+        hasParentLayout: false,
+        resolveRenderer: componentStoreResolver,
+    });
+    const childrenToRender = [resolvedChildren];
+    return createElement(Fragment, {}, childrenToRender);
+}

package/dist/components/UniformComposition.d.ts

@@ -0,0 +1,47 @@
+import { ContextState } from '@uniformdev/context';
+import { ReactNode } from 'react';
+export type SuspenseOptions =
+  | {
+      mode: 'off';
+    }
+  | {
+      mode: 'fallback';
+      fallback: React.ReactNode;
+    };
+export type UniformCompositionProps = {
+  /**
+   * The params object from Next.js router. Used to resolve a composition.
+   */
+  params: {
+    slug: string | string[];
+  };
+  /**
+   * The searchParams object from Next.js router. Used for signal evaluation.
+   */
+  searchParams?: {
+    [key: string]: string | undefined;
+  };
+  /**
+   * Behavior of root Suspense component.
+   */
+  suspense?:
+    | {
+        mode: 'off';
+      }
+    | {
+        mode: 'fallback';
+        fallback: ReactNode;
+      };
+  /**
+   * Update state that should be added to the call to update before composition evaluation
+   */
+  update?: Partial<ContextState>;
+  /**
+   * The children of the UniformComposition component.
+   */
+  children?: ReactNode;
+};
+export declare const UniformComposition: ({
+  suspense,
+  ...props
+}: UniformCompositionProps) => import('react/jsx-runtime').JSX.Element;

package/dist/components/UniformComposition.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense } from 'react';
+import { isDraftModeEnabled, isIncontextEditingEnabled } from '../utils/draft';
+import { resolveComposition } from './retrieveRoute';
+import { UniformComponent } from './UniformComponent';
+import { UniformProvider } from './UniformContext';
+import { UniformScript } from './UniformScript';
+export const UniformComposition = ({ suspense = {
+    mode: 'off',
+}, ...props }) => (_jsx(ConditionalWrapper, { options: suspense, children: _jsx(UniformCompositionInner, { ...props }) }));
+const ConditionalWrapper = ({ children, options }) => {
+    if (options.mode === 'off') {
+        return _jsx(_Fragment, { children: children });
+    }
+    return _jsx(Suspense, { fallback: options.fallback, children: children });
+};
+const UniformCompositionInner = async ({ params, searchParams, update, children, }) => {
+    const { composition: evaluatedComposition, cookieValue, path, searchParams: evaluatedSearchParams, seenComponents, isCanvasEditing, ...rest } = await resolveComposition({
+        params,
+        searchParams,
+        update,
+    });
+    const context = {
+        composition: evaluatedComposition,
+        path,
+        searchParams,
+        cookieValue,
+        isDraftMode: isDraftModeEnabled({ searchParams }),
+        isContextualEditing: isIncontextEditingEnabled({
+            searchParams,
+        }),
+        ...rest,
+    };
+    return (_jsxs(UniformProvider, { cookieValue: cookieValue, seenComponents: seenComponents, children: [_jsx(UniformScript, { enabled: isCanvasEditing }), _jsx(UniformComponent, { data: evaluatedComposition, context: context }), Boolean(children) && children] }));
+};

package/dist/components/UniformContext.d.ts

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react';
+
+import { SeenUniformComponent } from '../models';
+export type UniformContextProps = {
+  cookieValue: string | undefined;
+  seenComponents: SeenUniformComponent[] | undefined;
+};
+export declare const UniformContext: import('react').Context<UniformContextProps>;
+export declare const UniformProvider: ({
+  children,
+  cookieValue,
+  seenComponents,
+}: PropsWithChildren<UniformContextProps>) => import('react/jsx-runtime').JSX.Element;

package/dist/components/UniformContext.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useEffect } from 'react';
+import { removeUniformCookie, setUniformCookie } from '../cookie';
+export const UniformContext = createContext({
+    cookieValue: undefined,
+    seenComponents: undefined,
+});
+export const UniformProvider = ({ children, cookieValue, seenComponents, }) => {
+    useEffect(() => {
+        if (cookieValue) {
+            setUniformCookie(cookieValue);
+        }
+        else {
+            removeUniformCookie();
+        }
+    }, [cookieValue]);
+    return (_jsx(UniformContext.Provider, { value: { cookieValue, seenComponents }, children: children }));
+};

package/dist/components/UniformRichText.d.ts

@@ -0,0 +1,42 @@
+import { ComponentInstance } from '@uniformdev/canvas';
+import React from 'react';
+
+import { RenderRichTextComponentResolver } from './types';
+export type UniformRichTextProps = {
+  /**
+   * The name of the  HTML tag to render.
+   * @default "div"
+   */
+  as?: React.ElementType;
+  /** The ID of the parameter. */
+  parameterId: string;
+  /**
+   * A function which can provide a custom react component
+   * for rendering a rich text node
+   */
+  resolveRichTextRenderer?: RenderRichTextComponentResolver;
+  /** The component instance. */
+  component: ComponentInstance;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
+/**
+ * Adds rendering support for Uniform Rich Text parameters
+ */
+export declare const UniformRichText: React.ForwardRefExoticComponent<
+  {
+    /**
+     * The name of the  HTML tag to render.
+     * @default "div"
+     */
+    as?: React.ElementType<any> | undefined;
+    /** The ID of the parameter. */
+    parameterId: string;
+    /**
+     * A function which can provide a custom react component
+     * for rendering a rich text node
+     */
+    resolveRichTextRenderer?: RenderRichTextComponentResolver | undefined;
+    /** The component instance. */
+    component: ComponentInstance;
+  } & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> &
+    React.RefAttributes<unknown>
+>;

package/dist/components/UniformRichText.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isRichTextValue, isRichTextValueConsideredEmpty, } from '@uniformdev/richtext';
+import React from 'react';
+import { UniformRichTextNode } from './UniformRichTextNode';
+/**
+ * Adds rendering support for Uniform Rich Text parameters
+ */
+export const UniformRichText = React.forwardRef(function UniformRichText({ parameterId, component, resolveRichTextRenderer, as: Tag = 'div', ...props }, ref) {
+    var _a;
+    const parameter = (_a = component === null || component === void 0 ? void 0 : component.parameters) === null || _a === void 0 ? void 0 : _a[parameterId];
+    const value = parameter === null || parameter === void 0 ? void 0 : parameter.value;
+    if (!value || !isRichTextValue(value) || isRichTextValueConsideredEmpty(value))
+        return null;
+    return Tag === null ? (_jsx(UniformRichTextNode, { node: value.root, resolveRichTextRenderer: resolveRichTextRenderer })) : (_jsx(Tag, { ref: ref, ...props, children: _jsx(UniformRichTextNode, { node: value.root, resolveRichTextRenderer: resolveRichTextRenderer }) }));
+});

package/dist/components/UniformRichTextNode.d.ts

@@ -0,0 +1,14 @@
+import { RichTextNode } from '@uniformdev/richtext';
+
+import { RenderRichTextComponentResolver } from './types';
+export type UniformRichTextNodeProps = {
+  node: RichTextNode;
+  resolveRichTextRenderer?: RenderRichTextComponentResolver;
+};
+/**
+ * Render a single RichText node
+ */
+export declare function UniformRichTextNode({
+  node,
+  ...props
+}: UniformRichTextNodeProps): import('react/jsx-runtime').JSX.Element | null;

package/dist/components/UniformRichTextNode.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { isRichTextNode } from '@uniformdev/richtext';
+import { HeadingRichTextNode } from './nodes/HeadingRichTextNode';
+import { LinebreakRichTextNode } from './nodes/LinebreakRichTextNode';
+import { LinkRichTextNode } from './nodes/LinkRichTextNode';
+import { ListItemRichTextNode } from './nodes/ListItemRichTextNode';
+import { ListRichTextNode } from './nodes/ListRichTextNode';
+import { ParagraphRichTextNode } from './nodes/ParagraphRichTextNode';
+import { TabRichTextNode } from './nodes/TabRichTextNode';
+import { TextRichTextNode } from './nodes/TextRichTextNode';
+/**
+ * Render a single RichText node
+ */
+export function UniformRichTextNode({ node, ...props }) {
+    var _a;
+    if (!isRichTextNode(node))
+        return null;
+    let NodeRenderer = (_a = props.resolveRichTextRenderer) === null || _a === void 0 ? void 0 : _a.call(props, node);
+    if (typeof NodeRenderer === 'undefined') {
+        NodeRenderer = resolveRichTextDefaultRenderer(node);
+    }
+    if (!NodeRenderer) {
+        return null;
+    }
+    const children = node.children
+        ? node.children.map((childNode, i) => _createElement(UniformRichTextNode, { ...props, key: i, node: childNode }))
+        : null;
+    return _jsx(NodeRenderer, { node: node, children: children });
+}
+const rendererMap = new Map([
+    ['heading', HeadingRichTextNode],
+    ['linebreak', LinebreakRichTextNode],
+    ['link', LinkRichTextNode],
+    ['list', ListRichTextNode],
+    ['listitem', ListItemRichTextNode],
+    ['paragraph', ParagraphRichTextNode],
+    ['quote', ({ children }) => _jsx("blockquote", { children: children })],
+    [
+        'code',
+        ({ children }) => (_jsx("pre", { children: _jsx("code", { children: children }) })),
+    ],
+    ['root', ({ children }) => _jsx(_Fragment, { children: children })],
+    ['text', TextRichTextNode],
+    ['tab', TabRichTextNode],
+]);
+const resolveRichTextDefaultRenderer = (node) => {
+    return rendererMap.get(node.type);
+};

package/dist/components/UniformScript.d.ts

@@ -0,0 +1,5 @@
+export declare const UniformScript: ({
+  enabled,
+}: {
+  enabled: boolean;
+}) => import('react/jsx-runtime').JSX.Element;

package/dist/components/UniformScript.js

@@ -0,0 +1,49 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { createCanvasChannel } from '@uniformdev/canvas';
+import { useRouter } from 'next/navigation';
+import { useEffect, useMemo } from 'react';
+export const UniformScript = ({ enabled }) => {
+    const router = useRouter();
+    const channel = useMemo(() => {
+        var _a;
+        if (typeof window === 'undefined') {
+            return;
+        }
+        const instance = createCanvasChannel({
+            broadcastTo: [(_a = window.opener) !== null && _a !== void 0 ? _a : window.top],
+            listenTo: [window],
+        });
+        return instance;
+    }, []);
+    useEffect(() => {
+        if (!channel) {
+            return;
+        }
+        const unsubscribeFromEditorUpdates = channel.on('editor-state-updated', () => {
+            router.refresh();
+        });
+        return () => {
+            unsubscribeFromEditorUpdates();
+        };
+    }, [channel, router]);
+    useEffect(() => {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        const existing = document.getElementById('uniform-script');
+        if (enabled) {
+            if (!existing) {
+                const script = document.createElement('script');
+                script.id = 'uniform-script';
+                script.src = `https://uniform.app/files/canvas-in-context-embed/index.js`;
+                script.async = true;
+                document.head.appendChild(script);
+            }
+        }
+        else if (existing) {
+            existing.remove();
+        }
+    }, [enabled]);
+    return _jsx(_Fragment, {});
+};

package/dist/components/UniformSlot.d.ts

@@ -0,0 +1,48 @@
+import { ComponentInstance } from '@uniformdev/canvas';
+import React, { Key, ReactNode } from 'react';
+
+import { CompositionContext } from './UniformComponent';
+export type CustomSlotChildRenderFunc = (options: {
+  child: ReactNode;
+  component: ComponentInstance;
+  key: Key;
+}) => JSX.Element;
+export type UniformSlotWrapperComponentProps = {
+  items: ReactNode[];
+  slotName: string;
+};
+export type UniformSlotProps<TSlotNames extends string> = {
+  /** Name of the slot to render */
+  name: TSlotNames;
+  /** The composition that is being rendered */
+  data: ComponentInstance;
+  /** The context of the composition that is being rendered */
+  context: CompositionContext;
+  /**
+   *  Optional render props enables wrapping all child components in the slot with some markup
+   *
+   *  @deprecated Use `wrapperComponent` instead and define wrapping component for slot children inside.
+   */
+  children?: CustomSlotChildRenderFunc;
+  /**
+   * Optional wrapper component around list of slot items that allows to control
+   * exactly how to render slot items, otherwise React.Fragment is being used
+   */
+  wrapperComponent?: React.ComponentType<UniformSlotWrapperComponentProps>;
+  /**
+   * Optional ReactNode to use as a placeholder in Canvas editor when the slot is empty.
+   * The node is used to render a placeholder with realistic dimensions and it's never shown to users.
+   * Pass `null` to disable the placeholder.
+   */
+  emptyPlaceholder?: ReactNode;
+};
+export declare function UniformSlot<TSlotNames extends string = string>({
+  name,
+  children,
+  emptyPlaceholder,
+  data: parentData,
+  wrapperComponent,
+  context,
+}: UniformSlotProps<TSlotNames> & {
+  data: ComponentInstance;
+}): JSX.Element | null;

package/dist/components/UniformSlot.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { createElement, Fragment } from 'react';
+import { renderComponent } from './renderComponent';
+export function UniformSlot({ name, children, emptyPlaceholder, data: parentData, wrapperComponent, context, }) {
+    var _a;
+    const slot = (_a = parentData.slots) === null || _a === void 0 ? void 0 : _a[name];
+    if (!slot || !Array.isArray(slot)) {
+        return null;
+    }
+    const finalChildren = slot.map((component, index) => {
+        const child = renderComponent({
+            component,
+            context,
+            resolveSystem: {
+                test: () => {
+                    // https://www.youtube.com/watch?v=G3AfIvJBcGo
+                    return null;
+                },
+                personalization: () => {
+                    return null;
+                },
+            },
+            key: `inner-${index}`,
+            indexInSlot: index,
+            slotName: name,
+            parentComponent: parentData,
+            slotChildrenCount: slot.length,
+            emptyPlaceholder,
+        });
+        const elements = children ? children({ child, component, key: `wrapped-inner-${index}` }) : child;
+        return createElement(Fragment, { key: `wrapped-${index}` }, elements);
+    });
+    if (!wrapperComponent) {
+        return React.createElement(React.Fragment, undefined, finalChildren);
+    }
+    const Wrapper = wrapperComponent;
+    return _jsx(Wrapper, { items: finalChildren, slotName: name });
+}

package/dist/components/UniformText.d.ts

@@ -0,0 +1,10 @@
+import { type PureUniformTextProps } from '@uniformdev/canvas-react/core';
+
+import { CompositionContext } from './UniformComponent';
+export type UniformTextProps = {
+  context: CompositionContext;
+} & Omit<PureUniformTextProps, 'skipCustomRendering' | 'isContextualEditing'>;
+export declare const UniformText: ({
+  context,
+  ...rest
+}: UniformTextProps) => import('react/jsx-runtime').JSX.Element;

package/dist/components/UniformText.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PureUniformText } from '@uniformdev/canvas-react/core';
+export const UniformText = ({ context, ...rest }) => {
+    return (_jsx(PureUniformText, { ...rest, isContextualEditing: context.isContextualEditing, skipCustomRendering: context.isContextualEditing }));
+};

package/dist/components/__tests__/evaluateComposition.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/__tests__/evaluateComposition.spec.js

@@ -0,0 +1,80 @@
+import { CANVAS_LOCALE_TAG_PARAM, CANVAS_LOCALIZATION_SLOT, CANVAS_LOCALIZATION_TYPE, } from '@uniformdev/canvas';
+import { Context } from '@uniformdev/context';
+import { evaluateComposition } from '../evaluateComposition';
+jest.mock('../getUniformContext', () => ({
+    getUniformContext: () => {
+        return new Context({
+            manifest: {
+                project: {},
+            },
+        });
+    },
+}));
+describe('evaluateComposition', () => {
+    it('should localize a composition when dynmaic inputs include locale token', async () => {
+        var _a, _b;
+        const root = {
+            _id: 'root',
+            _name: 'root',
+            type: 'root',
+            slots: {
+                content: [
+                    {
+                        type: CANVAS_LOCALIZATION_TYPE,
+                        slots: {
+                            [CANVAS_LOCALIZATION_SLOT]: [
+                                {
+                                    type: 'hero',
+                                    parameters: {
+                                        [CANVAS_LOCALE_TAG_PARAM]: {
+                                            type: CANVAS_LOCALE_TAG_PARAM,
+                                            value: 'fr',
+                                        },
+                                        title: {
+                                            type: 'text',
+                                            value: 'This is the french title!',
+                                        },
+                                    },
+                                },
+                                {
+                                    type: 'hero',
+                                    parameters: {
+                                        [CANVAS_LOCALE_TAG_PARAM]: {
+                                            type: CANVAS_LOCALE_TAG_PARAM,
+                                            value: 'en',
+                                        },
+                                        title: {
+                                            type: 'text',
+                                            value: 'This is the english title!',
+                                        },
+                                    },
+                                },
+                            ],
+                        },
+                    },
+                ],
+            },
+        };
+        await evaluateComposition({
+            root,
+            dynamicInputs: {
+                lang: 'en',
+            },
+            cookies: {},
+            headers: new Headers(),
+            params: {
+                slug: 'whatever',
+            },
+            searchParams: {},
+            config: {
+                experimental: {
+                    localeDynamicInputs: ['lang'],
+                },
+            },
+            update: undefined,
+        });
+        const localizedHero = (_a = root.slots) === null || _a === void 0 ? void 0 : _a['content'][0];
+        expect(localizedHero).toBeDefined();
+        expect((_b = localizedHero === null || localizedHero === void 0 ? void 0 : localizedHero.parameters) === null || _b === void 0 ? void 0 : _b[CANVAS_LOCALE_TAG_PARAM].value).toBe('en');
+    });
+});

package/dist/components/convertComponentToProps.d.ts

@@ -0,0 +1,18 @@
+import { ComponentInstance } from '@uniformdev/canvas';
+
+import { ComponentProps, CompositionContext } from './UniformComponent';
+/**
+ * Extracts parameters from a component instance and returns them as a props object.
+ *
+ * @param component The component instance to extract parameters from.
+ *
+ * @returns The parameters as a props object.
+ *
+ */
+export declare function convertComponentToProps<T = unknown>({
+  component,
+  context,
+}: {
+  component: ComponentInstance;
+  context: CompositionContext;
+}): ComponentProps<T>;