@uniformdev/canvas-next-rsc 19.29.1-alpha.19

package/LICENSE.txt

@@ -0,0 +1,2 @@
+© 2023 Uniform Systems, Inc. All Rights Reserved.
+See details of Uniform Systems, Inc. Master Subscription Agreement here: https://uniform.dev/eula

package/README.md

@@ -0,0 +1,5 @@
+Next.js RSC SDK for Uniform Canvas
+
+**Note:** This package is in public preview.
+
+part of the [Uniform Platform](https://uniform.app). See our [documentation](https://docs.uniform.app) for more details.

package/dist/client/canvasClient.d.ts

@@ -0,0 +1,5 @@
+import { CanvasClient } from '@uniformdev/canvas';
+export type GetCanvasClientOptions = {
+    revalidate?: number;
+};
+export declare const getCanvasClient: (options?: GetCanvasClientOptions) => CanvasClient;

package/dist/client/canvasClient.js

@@ -0,0 +1,24 @@
+import { CanvasClient } from '@uniformdev/canvas';
+export const getCanvasClient = (options) => {
+    return new CanvasClient({
+        projectId: process.env.UNIFORM_PROJECT_ID,
+        apiHost: process.env.UNIFORM_API_HOST,
+        apiKey: process.env.UNIFORM_API_KEY,
+        edgeApiHost: process.env.UNIFORM_EDGE_API_HOST,
+        fetch: (req, init) => {
+            let revalidate = options === null || options === void 0 ? void 0 : options.revalidate;
+            let noCache = false;
+            if (revalidate === -1) {
+                noCache = true;
+                revalidate = undefined;
+            }
+            return fetch(req, {
+                ...init,
+                cache: noCache ? 'no-cache' : 'force-cache',
+                next: {
+                    revalidate,
+                },
+            });
+        },
+    });
+};

package/dist/client/manifestClient.d.ts

@@ -0,0 +1,161 @@
+import { ManifestClient } from '@uniformdev/context/api';
+export type GetManifestClientOptions = {
+    revalidate?: number;
+};
+export declare const getManifestClient: (options?: GetManifestClientOptions) => ManifestClient;
+export declare const getManifestFromApi: (options: {
+    searchParams: {
+        [key: string]: string | undefined;
+    } | undefined;
+}) => Promise<{
+    project: {
+        id?: string | undefined;
+        name?: string | undefined;
+        ui_version?: number | undefined;
+        pz?: {
+            sig?: {
+                [key: string]: {
+                    str: number;
+                    cap: number;
+                    dur: "p" | "s" | "t";
+                    crit: {
+                        type: "G";
+                        op?: "&" | "|" | undefined;
+                        clauses: ({
+                            type: "G";
+                            op?: "&" | "|" | undefined;
+                            clauses: (any | {
+                                type: "CK";
+                                cookieName: string;
+                                match: {
+                                    rhs: string;
+                                    op: "~" | "=" | "//" | "!=" | "!~" | "!//";
+                                    cs?: boolean | undefined;
+                                } | {
+                                    op: "*" | "!*";
+                                };
+                            } | {
+                                type: "QS";
+                                queryName: string;
+                                match: {
+                                    rhs: string;
+                                    op: "~" | "=" | "//" | "!=" | "!~" | "!//";
+                                    cs?: boolean | undefined;
+                                } | {
+                                    op: "*" | "!*";
+                                };
+                            } | {
+                                type: "QK";
+                                key: string;
+                                match: {
+                                    rhs: string;
+                                    op: "~" | "=" | "//" | "!=" | "!~" | "!//";
+                                    cs?: boolean | undefined;
+                                } | {
+                                    op: "*" | "!*";
+                                };
+                            } | {
+                                type: "EVT";
+                                event: {
+                                    rhs: string;
+                                    op: "~" | "=" | "//" | "!=" | "!~" | "!//";
+                                    cs?: boolean | undefined;
+                                } | {
+                                    op: "*" | "!*";
+                                };
+                            } | {
+                                type: "PV";
+                                path: {
+                                    rhs: string;
+                                    op: "~" | "=" | "//" | "!=" | "!~" | "!//";
+                                    cs?: boolean | undefined;
+                                } | {
+                                    op: "*" | "!*";
+                                };
+                            } | {
+                                type: "PVC";
+                                match: {
+                                    rhs: number;
+                                    op: "=" | "!=" | "<" | ">";
+                                };
+                            })[];
+                        } | {
+                            type: "CK";
+                            cookieName: string;
+                            match: {
+                                rhs: string;
+                                op: "~" | "=" | "//" | "!=" | "!~" | "!//";
+                                cs?: boolean | undefined;
+                            } | {
+                                op: "*" | "!*";
+                            };
+                        } | {
+                            type: "QS";
+                            queryName: string;
+                            match: {
+                                rhs: string;
+                                op: "~" | "=" | "//" | "!=" | "!~" | "!//";
+                                cs?: boolean | undefined;
+                            } | {
+                                op: "*" | "!*";
+                            };
+                        } | {
+                            type: "QK";
+                            key: string;
+                            match: {
+                                rhs: string;
+                                op: "~" | "=" | "//" | "!=" | "!~" | "!//";
+                                cs?: boolean | undefined;
+                            } | {
+                                op: "*" | "!*";
+                            };
+                        } | {
+                            type: "EVT";
+                            event: {
+                                rhs: string;
+                                op: "~" | "=" | "//" | "!=" | "!~" | "!//";
+                                cs?: boolean | undefined;
+                            } | {
+                                op: "*" | "!*";
+                            };
+                        } | {
+                            type: "PV";
+                            path: {
+                                rhs: string;
+                                op: "~" | "=" | "//" | "!=" | "!~" | "!//";
+                                cs?: boolean | undefined;
+                            } | {
+                                op: "*" | "!*";
+                            };
+                        } | {
+                            type: "PVC";
+                            match: {
+                                rhs: number;
+                                op: "=" | "!=" | "<" | ">";
+                            };
+                        })[];
+                    };
+                };
+            } | undefined;
+            enr?: {
+                [key: string]: {
+                    cap: number;
+                };
+            } | undefined;
+            agg?: {
+                [key: string]: {
+                    inputs: {
+                        dim: string;
+                        sign?: "-" | "+" | "c" | undefined;
+                    }[];
+                };
+            } | undefined;
+            control?: number | undefined;
+        } | undefined;
+        test?: {
+            [key: string]: {
+                wv?: string | undefined;
+            };
+        } | undefined;
+    };
+}>;

package/dist/client/manifestClient.js

@@ -0,0 +1,32 @@
+import { ManifestClient } from '@uniformdev/context/api';
+import { getManifestRevalidateInterval } from '../config/helpers';
+export const getManifestClient = (options) => {
+    const manifestClient = new ManifestClient({
+        apiHost: process.env.UNIFORM_API_HOST || process.env.UNIFORM_CLI_BASE_URL,
+        apiKey: process.env.UNIFORM_API_KEY,
+        projectId: process.env.UNIFORM_PROJECT_ID,
+        fetch: (req, init) => {
+            let revalidate = options === null || options === void 0 ? void 0 : options.revalidate;
+            let noCache = false;
+            if (revalidate === -1) {
+                noCache = true;
+                revalidate = undefined;
+            }
+            return fetch(req, {
+                ...init,
+                cache: noCache ? 'no-cache' : 'force-cache',
+                next: {
+                    revalidate,
+                    tags: ['manifest'],
+                },
+            });
+        },
+    });
+    return manifestClient;
+};
+export const getManifestFromApi = (options) => {
+    const manifestClient = getManifestClient({
+        revalidate: getManifestRevalidateInterval(options),
+    });
+    return manifestClient.get();
+};

package/dist/client/projectMapClient.d.ts

@@ -0,0 +1,5 @@
+import { ProjectMapClient } from '@uniformdev/project-map';
+export type GetProjectMapClientOptions = {
+    revalidate?: number;
+};
+export declare const getProjectMapClient: (options?: GetProjectMapClientOptions) => ProjectMapClient;

package/dist/client/projectMapClient.js

@@ -0,0 +1,17 @@
+import { ProjectMapClient } from '@uniformdev/project-map';
+export const getProjectMapClient = (options) => {
+    const manifestClient = new ProjectMapClient({
+        apiHost: process.env.UNIFORM_API_HOST || process.env.UNIFORM_CLI_BASE_URL,
+        apiKey: process.env.UNIFORM_API_KEY,
+        projectId: process.env.UNIFORM_PROJECT_ID,
+        fetch: (req, init) => {
+            return fetch(req, {
+                ...init,
+                next: {
+                    revalidate: options === null || options === void 0 ? void 0 : options.revalidate,
+                },
+            });
+        },
+    });
+    return manifestClient;
+};

package/dist/client/routeClient.d.ts

@@ -0,0 +1,5 @@
+import { RouteClient } from '@uniformdev/canvas';
+export type GetRouteClientOptions = {
+    revalidate?: number;
+};
+export declare const getRouteClient: (options?: GetRouteClientOptions) => RouteClient;

package/dist/client/routeClient.js

@@ -0,0 +1,48 @@
+import { RouteClient } from '@uniformdev/canvas';
+import { buildPathTag } from '../utils/tag';
+export const getRouteClient = (options) => {
+    const client = new RouteClient({
+        projectId: process.env.UNIFORM_PROJECT_ID,
+        apiKey: process.env.UNIFORM_API_KEY,
+        edgeApiHost: process.env.UNIFORM_EDGE_API_HOST,
+        fetch: (req, init) => {
+            let requestedUrl;
+            if (typeof req === 'string') {
+                requestedUrl = new URL(req);
+            }
+            else if (req instanceof URL) {
+                requestedUrl = req;
+            }
+            else {
+                requestedUrl = new URL(req.url);
+            }
+            const tags = [];
+            if (requestedUrl) {
+                // this is here so this code breaks if parameters change here
+                const pathKey = 'path';
+                const path = requestedUrl.searchParams.get(pathKey);
+                if (path) {
+                    tags.push(buildPathTag(path));
+                }
+            }
+            let revalidate;
+            let noCache = false;
+            if (options === null || options === void 0 ? void 0 : options.revalidate) {
+                revalidate = options.revalidate;
+            }
+            if (revalidate === -1) {
+                noCache = true;
+                revalidate = undefined;
+            }
+            return fetch(req, {
+                ...init,
+                cache: noCache ? 'no-cache' : 'force-cache',
+                next: {
+                    revalidate,
+                    tags: tags.length ? tags : undefined,
+                },
+            });
+        },
+    });
+    return client;
+};

package/dist/components/DefaultNotImplementedComponent.d.ts

@@ -0,0 +1,2 @@
+import { ComponentProps } from './UniformComponent';
+export declare function DefaultNotImplementedComponent(props: ComponentProps): JSX.Element | null;

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;
+}) => 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,12 @@
+import { type ComponentInstance } from '@uniformdev/canvas';
+import { ReactNode } from 'react';
+export type ComponentProps<TProps = unknown> = TProps & {
+    component: ComponentInstance;
+};
+export type UniformComponentProps<TRenderProps = unknown> = {
+    data: ComponentInstance;
+    children?: ReactNode | ((props: ComponentProps<TRenderProps>) => JSX.Element);
+};
+export declare function UniformComponent({ data, children }: UniformComponentProps): import("react").FunctionComponentElement<{
+    children?: ReactNode;
+}>;

package/dist/components/UniformComponent.js

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

package/dist/components/UniformComposition.d.ts

@@ -0,0 +1,35 @@
+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: React.ReactNode;
+    };
+    /**
+     * The children of the UniformComposition component.
+     */
+    children?: ReactNode;
+};
+export declare const UniformComposition: ({ suspense, ...props }: UniformCompositionProps) => JSX.Element;

package/dist/components/UniformComposition.js

@@ -0,0 +1,55 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CANVAS_DRAFT_STATE, CANVAS_PUBLISHED_STATE } from '@uniformdev/canvas';
+import { notFound, redirect } from 'next/navigation';
+import { Suspense } from 'react';
+import { getManifestFromApi } from '../client/manifestClient';
+import { isDraftModeEnabled, isOnVercelPreviewEnvironment } from '../utils/draft';
+import { evaluateComposition } from './evaluateComposition';
+import { resolvePath } from './resolvePath';
+import { resolveRoute } from './resolveRoute';
+import { UniformComponent } from './UniformComponent';
+import { UniformProvider } from './UniformContext';
+import { UniformScript } from './UniformScript';
+export const UniformComposition = ({ suspense = {
+    mode: 'fallback',
+    fallback: _jsx(_Fragment, {}),
+}, ...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, children }) => {
+    // prefetch manifest immediately
+    void getManifestFromApi({
+        searchParams,
+    });
+    const draftMode = isDraftModeEnabled({ searchParams });
+    const previewEnvironment = isOnVercelPreviewEnvironment();
+    // resolve the path from provided params
+    const path = resolvePath({
+        params,
+    });
+    // resolve the route from the path
+    const resolveResult = await resolveRoute({
+        path,
+        state: draftMode || previewEnvironment ? CANVAS_DRAFT_STATE : CANVAS_PUBLISHED_STATE,
+        searchParams,
+    });
+    // if the route is a redirect, redirect
+    if (resolveResult.type === 'redirect') {
+        redirect(resolveResult.redirect.href);
+    }
+    // if the route is not found, return 404
+    if (resolveResult.type === 'notFound') {
+        notFound();
+    }
+    // evaluate the composition
+    const { cookieValue, composition: evaluatedComposition, seenComponents, } = await evaluateComposition({
+        root: resolveResult.composition,
+        params,
+        searchParams: searchParams !== null && searchParams !== void 0 ? searchParams : {},
+    });
+    return (_jsxs(UniformProvider, { cookieValue: cookieValue, seenComponents: seenComponents, children: [_jsx(UniformScript, { enabled: draftMode }), _jsx(UniformComponent, { data: evaluatedComposition }), Boolean(children) && children] }));
+};

package/dist/components/UniformContext.d.ts

@@ -0,0 +1,11 @@
+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<{
+    cookieValue: string | undefined;
+    seenComponents: SeenUniformComponent[] | undefined;
+}>) => 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/UniformScript.d.ts

@@ -0,0 +1,3 @@
+export declare const UniformScript: ({ enabled }: {
+    enabled: boolean;
+}) => JSX.Element;

package/dist/components/UniformScript.js

@@ -0,0 +1,73 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { createCanvasChannel, isUpdateCompositionInternalMessage } from '@uniformdev/canvas';
+import { useEffect, useMemo } from 'react';
+export const UniformScript = ({ enabled }) => {
+    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 unsubscribeFromCompositionUpdates = channel.on('update-composition-internal', async (data) => {
+            var _a, _b, _c;
+            if (isUpdateCompositionInternalMessage(data)) {
+                const url = new URL(window.location.href);
+                if (url.searchParams.get('vcdiffhash') === ((_a = data.hash) === null || _a === void 0 ? void 0 : _a.toString())) {
+                    // eslint-disable-next-line no-console
+                    console.log("Skipping composition update because it's already been applied.");
+                    return;
+                }
+                const response = await fetch('/api/uniform', {
+                    method: 'POST',
+                    body: JSON.stringify(data),
+                });
+                if (!response.ok) {
+                    // eslint-disable-next-line no-console
+                    console.error(response);
+                    return;
+                }
+                const json = (await response.json());
+                if (json.diff.length) {
+                    const serialized = Buffer.from(JSON.stringify(json.diff)).toString('base64');
+                    // set serialized as query string param
+                    url.searchParams.set('vcdiff', serialized);
+                    url.searchParams.set('vcdiffhash', (_c = (_b = data.hash) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : '');
+                    // set url
+                    window.location.href = url.toString();
+                }
+            }
+        });
+        return () => {
+            unsubscribeFromCompositionUpdates();
+        };
+    }, [channel]);
+    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, {});
+};