@uniformdev/canvas-next-rsc 19.173.1-alpha.17 → 19.173.2-alpha.258

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>;

package/dist/components/convertComponentToProps.js

@@ -0,0 +1,22 @@
+/**
+ * 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 function convertComponentToProps({ component, context, }) {
+    var _a;
+    const parameters = (_a = component.parameters) !== null && _a !== void 0 ? _a : {};
+    const renderComponentProps = {
+        ...Object.keys(parameters).reduce((acc, cur) => {
+            acc[cur] = parameters[cur].value;
+            return acc;
+        }, {}),
+        ...component.data,
+        component,
+        context,
+    };
+    return renderComponentProps;
+}

package/dist/components/evaluateComposition.d.ts

@@ -0,0 +1,32 @@
+import { RootComponentInstance, RouteGetResponseComposition } from '@uniformdev/canvas';
+import { ContextState } from '@uniformdev/context';
+
+import { UniformServerConfig } from '../config';
+import { SeenUniformComponent } from '../models';
+export declare const evaluateComposition: ({
+  root,
+  params,
+  searchParams,
+  dynamicInputs,
+  headers,
+  cookies,
+  update,
+  config,
+}: {
+  root: RootComponentInstance;
+  params: {
+    slug: string | string[];
+  };
+  searchParams: {
+    [key: string]: string | undefined;
+  };
+  dynamicInputs: RouteGetResponseComposition['dynamicInputs'];
+  headers: Headers;
+  cookies: Record<string, string>;
+  update: Partial<ContextState> | undefined;
+  config?: UniformServerConfig | undefined;
+}) => Promise<{
+  composition: RootComponentInstance;
+  cookieValue: string | undefined;
+  seenComponents: SeenUniformComponent[];
+}>;