@uniformdev/canvas-react 17.5.1-alpha.7 → 17.6.0

package/dist/index.d.ts

@@ -63,6 +63,14 @@ declare function useComposition(): CompositionContext | undefined;
 /** Forms a Canvas composition root, providing services to render a tree of Canvas components */
 declare function Composition<TRenderProps = unknown>({ data, resolveRenderer, children, behaviorTracking, }: CompositionProps<TRenderProps>): JSX.Element | null;
 
+/**
+ * A default implementation of a component-not-implemented component.
+ * Useful for model-first workflows where frontend dev comes later.
+ * To make this work, it needs to be the default returned from the
+ * resolveRenderer() function when the component is unknown.
+ **/
+declare function DefaultNotImplementedComponent(props: ComponentProps): JSX.Element | null;
+
 declare type CustomSlotChildRenderFunc = (options: {
     child: ReactNode;
     component: ComponentInstance;
@@ -88,14 +96,6 @@ declare type SlotProps<TSlotNames extends string> = {
 /** Renders a named Slot within a Composition. */
 declare function Slot<TSlotNames extends string = string>({ name, resolveRenderer, children, emptyPlaceholder, }: SlotProps<TSlotNames>): JSX.Element | null;
 
-/**
- * A default implementation of a component-not-implemented component.
- * Useful for model-first workflows where frontend dev comes later.
- * To make this work, it needs to be the default returned from the
- * resolveRenderer() function when the component is unknown.
- **/
-declare function DefaultNotImplementedComponent(props: ComponentProps): JSX.Element | null;
-
 declare type UseCompositionEventEffectOptions = Omit<Partial<SubscribeToCompositionOptions>, 'callback'> & {
     enabled: boolean;
     effect: () => void;
@@ -173,8 +173,8 @@ declare const createApiEnhancer: ({ apiUrl }: {
         };
     } | undefined;
 }>;
-declare const useCompositionInstance: ({ composition, enhance, }: {
-    composition: RootComponentInstance;
+declare const useContextualEditing: ({ initialCompositionValue, enhance, }: {
+    initialCompositionValue: RootComponentInstance;
     enhance?: ((composition: UpdateCompositionMessage) => RootComponentInstance | Promise<RootComponentInstance>) | undefined;
 }) => {
     composition: {
@@ -260,4 +260,4 @@ declare const createComponentStoreResolver: (options: {
     defaultComponent?: React.ComponentType<ComponentProps<any>>;
 }) => RenderComponentResolver;
 
-export { ComponentProps, ComponentStore, Composition, CompositionContext, CompositionProps, DefaultNotImplementedComponent, RenderComponentResolver, Slot, SlotProps, SystemRenderConfig, SystemRenderFunction, UseCompositionEventEffectOptions, componentStore, componentStoreResolver, createApiEnhancer, createComponentStore, createComponentStoreResolver, registerUniformComponent, useComposition, useCompositionEventEffect, useCompositionInstance };
+export { ComponentProps, ComponentStore, Composition, CompositionContext, CompositionProps, DefaultNotImplementedComponent, RenderComponentResolver, Slot, SlotProps, SystemRenderConfig, SystemRenderFunction, UseCompositionEventEffectOptions, componentStore, componentStoreResolver, createApiEnhancer, createComponentStore, createComponentStoreResolver, registerUniformComponent, useComposition, useCompositionEventEffect, useContextualEditing };

package/dist/index.esm.js

@@ -1 +1 @@
-import{Track as F,TrackFragment as J,useUniformContext as X}from"@uniformdev/context-react";import{CANVAS_ENRICHMENT_TAG_PARAM as $}from"@uniformdev/canvas";import T,{createContext as j,useContext as K}from"react";function v(e){var n;let o=(n=e.parameters)!=null?n:{};return{...Object.keys(o).reduce((r,i)=>(r[i]=o[i].value,r),{}),...e.data,component:e}}var S=()=>{let e=new Map;return{register:({type:o,component:t})=>{e.set(o,t)},get:o=>e.get(o)}},x=e=>o=>e.store.get(o.type)||e.defaultComponent||null;var h=S(),ae=({type:e,component:o})=>{Array.isArray(e)?e.forEach(t=>{h.register({type:t,component:o})}):h.register({type:e,component:o})},me=x({store:h});import C from"react";import{CANVAS_PERSONALIZE_TYPE as M,CANVAS_TEST_TYPE as z,IN_CONTEXT_EDITOR_COMPONENT_START_ROLE as L,PLACEHOLDER_ID as B}from"@uniformdev/canvas";import{Personalize as k,Test as U}from"@uniformdev/context-react";import{mapSlotToPersonalizedVariations as V,mapSlotToTestVariations as D}from"@uniformdev/canvas";import*as P from"react";var b={test:(e,o,t)=>{var p,d,m,c,a;let n=e,r=(d=(p=n.slots)==null?void 0:p.test)!=null?d:[],i=(a=(c=(m=n.parameters)==null?void 0:m.test)==null?void 0:c.value)!=null?a:"Untitled Test",s=D(r);return P.createElement(U,{key:o,variations:s,name:i,component:l=>t(l,o)})},personalization:(e,o,t)=>{var i,s,p,d,m,c,a;let n=e,r=V((i=n==null?void 0:n.slots)==null?void 0:i.pz);return P.createElement(k,{key:o,variations:r,count:Number((d=(p=(s=n.parameters)==null?void 0:s.count)==null?void 0:p.value)!=null?d:1),name:(a=(c=(m=n.parameters)==null?void 0:m.trackingEventName)==null?void 0:c.value)!=null?a:"Untitled Personalization",component:l=>t(l,0)})}};function N({name:e,resolveRenderer:o,children:t,emptyPlaceholder:n}){var a;let r=w();if(!(r!=null&&r.composition))throw new Error("Slot must be rendered within a Composition");let{composition:i,resolveRenderer:s}=r;if(!i)throw new Error("Cannot use Slot without a Composition wrapper.");let p=(a=i.slots)==null?void 0:a[e];if(!p||!Array.isArray(p))return process.env.NODE_ENV==="development"&&console.warn(`[canvas-dev] slot '${e}' was rendered, but it was not defined on its component. This is expected if the slot is optional, otherwise it may indicate a typo. Component:`,i),null;let d=o!=null?o:s,m=b,c=p.map((l,u)=>{let f=g({component:l,resolveRenderer:d,resolveSystem:m,key:`inner-${u}`,indexInSlot:u,slotName:e,parentComponent:i,slotChildrenCount:p.length,emptyPlaceholder:n}),R=t?t({child:f,component:l,key:`wrapped-inner-${u}`}):f;return C.createElement(C.Fragment,{key:u},R)});return C.createElement(C.Fragment,void 0,c)}function g({component:e,resolveRenderer:o,resolveSystem:t,key:n=0,indexInSlot:r,slotName:i,parentComponent:s,slotChildrenCount:p,emptyPlaceholder:d}){var c,a,l;let m=o==null?void 0:o(e);if(e.type===z)return t.test(e,n,(u,f)=>g({component:u,resolveRenderer:o,resolveSystem:t,key:f}));if(e.type===M)return t.personalization(e,n,(u,f)=>g({component:u,resolveRenderer:o,resolveSystem:t,key:f}));if(m){let u=v(e),f=Boolean(e._id),R=e._id===B;return C.createElement(I,{key:n,data:e,resolveRenderer:o},f?C.createElement("script",{key:n,"data-role":L,"data-parent-id":s==null?void 0:s._id,"data-parent-type":s==null?void 0:s.type,"data-component-id":e._id,"data-slot-name":i!=null?i:"","data-component-index":r!=null?r:"","data-total-components":p!=null?p:"","data-component-name":e.type,"data-is-placeholder":R?"true":void 0,"data-component-title":(l=(a=(c=e.parameters)==null?void 0:c.title)==null?void 0:a.value)!=null?l:""}):null,R&&d!==void 0?d:C.createElement(m,{...u}),f?C.createElement("script",{"data-role":"component-end"}):null)}else process.env.NODE_ENV!=="production"&&console.warn(`[canvas] found component of type '${e.type}' which the resolveRenderer prop returned no component for. Nothing will be rendered. The resolveRenderer function may need to be extended to handle the new type.`,e);return null}var _=j(void 0);function w(){return K(_)}var Y=e=>h.get(e.type)||null;function I({data:e,resolveRenderer:o,children:t,behaviorTracking:n}){var c,a,l;let r=w(),i=X({throwOnMissingProvider:!1})!==void 0;if(!e)return process.env.NODE_ENV==="development"&&console.warn("[canvas-dev] Composition was rendered with no data, nothing will be output."),null;let s={composition:e,resolveRenderer:o||(r==null?void 0:r.resolveRenderer)||Y,behaviorTracking:(c=n!=null?n:r==null?void 0:r.behaviorTracking)!=null?c:"onView"},p=(l=(a=e.parameters)==null?void 0:a[$])==null?void 0:l.value,d=s.behaviorTracking==="onLoad"?J:F,m=G({children:t,data:e,hasParentLayout:Boolean(r)});return T.createElement(_.Provider,{value:s},i?T.createElement(d,{behavior:p},m):m)}function G({children:e,data:o,hasParentLayout:t}){let n=e;if(!n&&!t){let i=h.get(o.type);i?n=T.createElement(i,v(o)):n=Object.keys(o.slots||{}).map(s=>T.createElement(N,{key:s,name:s}))}return typeof n=="function"?n(v(o)):n}import y from"react";function ke(e){var t;let o=(t=e.component)==null?void 0:t.type;return o?y.createElement("div",{style:{borderLeft:"10px solid #e42535!important",padding:"0.01em 16px 16px",borderRadius:"16px",backgroundColor:"rgba(122, 215, 218, 0.3)",color:"#1d3557"}},y.createElement("h2",null,"Component: ",o),y.createElement("p",null,y.createElement("strong",null,o)," has no React implementation. It may need to be added to your"," ",y.createElement("code",null,"resolveRenderer()")," function."),y.createElement("details",null,y.createElement("summary",null,"Props"),y.createElement("pre",null,JSON.stringify(e,null,2)))):null}import{CANVAS_DRAFT_STATE as H,createEventBus as Q,subscribeToComposition as Z}from"@uniformdev/canvas";import{useEffect as q}from"react";function ze({enabled:e,projectId:o,compositionId:t,effect:n}){q(()=>{if(!e||!t||!o)return;let r;return(async()=>{let s=await Q();s&&(r=Z({eventBus:s,compositionId:t,compositionState:H,projectId:o,callback:n,event:"updated"}))})(),()=>{r&&r()}},[t,e,o,n])}import{createCanvasChannel as W,isUpdateCompositionMessage as ee,IN_CONTEXT_EDITOR_QUERY_STRING_PARAM as oe}from"@uniformdev/canvas";import{useEffect as E,useMemo as te,useState as ne}from"react";var A="uniform-canvas-preview-script",$e=({apiUrl:e})=>async o=>{let t=await fetch(e,{method:"post",body:JSON.stringify({composition:o.composition,hash:o.hash}),headers:{"Content-Type":"application/json"}}),n=await t.json();if(!t.ok)throw new Error("Error reading enhanced composition");return n.composition},je=({composition:e,enhance:o=t=>t.composition})=>{let[t,n]=ne(e);E(()=>{(e==null?void 0:e._id)!==(t==null?void 0:t._id)&&n(e)},[e,t]);let r=te(()=>{var s;return O()?W({broadcastTo:[(s=window.opener)!=null?s:window.top],listenTo:[window]}):void 0},[]);return E(()=>{if(!r)return;let i=r.on("update-composition",async s=>{if(ee(s)){let p=await o(s);n(p)}});return()=>{i()}},[r,o]),E(()=>{if(!O()||document.getElementById(A))return;let s=document.createElement("script");s.id=A,s.src=re(),s.async=!0,document.head.appendChild(s)},[]),{composition:t}};function re(){return`${window.document.referrer}files/canvas-in-context-embed/index.js`}function O(){if(typeof window=="undefined")return!1;let e=new URLSearchParams(window.location.search).has(oe),o=Boolean(window.document.referrer.match(/(^https:\/\/|\.)(uniform.app|uniform.wtf|localhost:\d{4})\//));return e&&o}export{I as Composition,ke as DefaultNotImplementedComponent,N as Slot,h as componentStore,me as componentStoreResolver,$e as createApiEnhancer,S as createComponentStore,x as createComponentStoreResolver,ae as registerUniformComponent,w as useComposition,ze as useCompositionEventEffect,je as useCompositionInstance};
+import{CANVAS_ENRICHMENT_TAG_PARAM as F}from"@uniformdev/canvas";import{Track as J,TrackFragment as X,useUniformContext as $}from"@uniformdev/context-react";import T,{createContext as j,useContext as K}from"react";function v(e){var n;let o=(n=e.parameters)!=null?n:{};return{...Object.keys(o).reduce((r,i)=>(r[i]=o[i].value,r),{}),...e.data,component:e}}var S=()=>{let e=new Map;return{register:({type:o,component:t})=>{e.set(o,t)},get:o=>e.get(o)}},x=e=>o=>e.store.get(o.type)||e.defaultComponent||null;var h=S(),ae=({type:e,component:o})=>{Array.isArray(e)?e.forEach(t=>{h.register({type:t,component:o})}):h.register({type:e,component:o})},me=x({store:h});import{CANVAS_PERSONALIZE_TYPE as V,CANVAS_TEST_TYPE as z,IN_CONTEXT_EDITOR_COMPONENT_START_ROLE as L,PLACEHOLDER_ID as B}from"@uniformdev/canvas";import C from"react";import{mapSlotToPersonalizedVariations as k,mapSlotToTestVariations as U}from"@uniformdev/canvas";import{Personalize as D,Test as M}from"@uniformdev/context-react";import*as P from"react";var b={test:(e,o,t)=>{var p,d,m,c,a;let n=e,r=(d=(p=n.slots)==null?void 0:p.test)!=null?d:[],i=(a=(c=(m=n.parameters)==null?void 0:m.test)==null?void 0:c.value)!=null?a:"Untitled Test",s=U(r);return P.createElement(M,{key:o,variations:s,name:i,component:l=>t(l,o)})},personalization:(e,o,t)=>{var i,s,p,d,m,c,a;let n=e,r=k((i=n==null?void 0:n.slots)==null?void 0:i.pz);return P.createElement(D,{key:o,variations:r,count:Number((d=(p=(s=n.parameters)==null?void 0:s.count)==null?void 0:p.value)!=null?d:1),name:(a=(c=(m=n.parameters)==null?void 0:m.trackingEventName)==null?void 0:c.value)!=null?a:"Untitled Personalization",component:l=>t(l,0)})}};function N({name:e,resolveRenderer:o,children:t,emptyPlaceholder:n}){var a;let r=E();if(!(r!=null&&r.composition))throw new Error("Slot must be rendered within a Composition");let{composition:i,resolveRenderer:s}=r;if(!i)throw new Error("Cannot use Slot without a Composition wrapper.");let p=(a=i.slots)==null?void 0:a[e];if(!p||!Array.isArray(p))return process.env.NODE_ENV==="development"&&console.warn(`[canvas-dev] slot '${e}' was rendered, but it was not defined on its component. This is expected if the slot is optional, otherwise it may indicate a typo. Component:`,i),null;let d=o!=null?o:s,m=b,c=p.map((l,u)=>{let f=g({component:l,resolveRenderer:d,resolveSystem:m,key:`inner-${u}`,indexInSlot:u,slotName:e,parentComponent:i,slotChildrenCount:p.length,emptyPlaceholder:n}),R=t?t({child:f,component:l,key:`wrapped-inner-${u}`}):f;return C.createElement(C.Fragment,{key:u},R)});return C.createElement(C.Fragment,void 0,c)}function g({component:e,resolveRenderer:o,resolveSystem:t,key:n=0,indexInSlot:r,slotName:i,parentComponent:s,slotChildrenCount:p,emptyPlaceholder:d}){var c,a,l;let m=o==null?void 0:o(e);if(e.type===z)return t.test(e,n,(u,f)=>g({component:u,resolveRenderer:o,resolveSystem:t,key:f}));if(e.type===V)return t.personalization(e,n,(u,f)=>g({component:u,resolveRenderer:o,resolveSystem:t,key:f}));if(m){let u=v(e),f=Boolean(e._id),R=e._id===B;return C.createElement(_,{key:n,data:e,resolveRenderer:o},f?C.createElement("script",{key:n,"data-role":L,"data-parent-id":s==null?void 0:s._id,"data-parent-type":s==null?void 0:s.type,"data-component-id":e._id,"data-slot-name":i!=null?i:"","data-component-index":r!=null?r:"","data-total-components":p!=null?p:"","data-component-name":e.type,"data-is-placeholder":R?"true":void 0,"data-component-title":(l=(a=(c=e.parameters)==null?void 0:c.title)==null?void 0:a.value)!=null?l:""}):null,R&&d!==void 0?d:C.createElement(m,{...u}),f?C.createElement("script",{"data-role":"component-end"}):null)}else process.env.NODE_ENV!=="production"&&console.warn(`[canvas] found component of type '${e.type}' which the resolveRenderer prop returned no component for. Nothing will be rendered. The resolveRenderer function may need to be extended to handle the new type.`,e);return null}var I=j(void 0);function E(){return K(I)}var Y=e=>h.get(e.type)||null;function _({data:e,resolveRenderer:o,children:t,behaviorTracking:n}){var c,a,l;let r=E(),i=$({throwOnMissingProvider:!1})!==void 0;if(!e)return process.env.NODE_ENV==="development"&&console.warn("[canvas-dev] Composition was rendered with no data, nothing will be output."),null;let s={composition:e,resolveRenderer:o||(r==null?void 0:r.resolveRenderer)||Y,behaviorTracking:(c=n!=null?n:r==null?void 0:r.behaviorTracking)!=null?c:"onView"},p=(l=(a=e.parameters)==null?void 0:a[F])==null?void 0:l.value,d=s.behaviorTracking==="onLoad"?X:J,m=G({children:t,data:e,hasParentLayout:Boolean(r)});return T.createElement(I.Provider,{value:s},i?T.createElement(d,{behavior:p},m):m)}function G({children:e,data:o,hasParentLayout:t}){var i;let n=e;if(!n&&!t){let s=h.get(o.type);s?n=T.createElement(s,v(o)):(Object.keys((i=o.slots)!=null?i:{}).length>1&&process.env.NODE_ENV==="development"&&console.warn(`[canvas-dev] All the slots in component '${o.type}' are rendered in no particular order. Use '<Slot name={slotName} />' to reliably render the slots.`),n=Object.keys(o.slots||{}).map(p=>T.createElement(N,{key:p,name:p})))}return typeof n=="function"?n(v(o)):n}import y from"react";function ke(e){var t;let o=(t=e.component)==null?void 0:t.type;return o?y.createElement("div",{style:{borderLeft:"10px solid #e42535!important",padding:"0.01em 16px 16px",borderRadius:"16px",backgroundColor:"rgba(122, 215, 218, 0.3)",color:"#1d3557"}},y.createElement("h2",null,"Component: ",o),y.createElement("p",null,y.createElement("strong",null,o)," has no React implementation. It may need to be added to your"," ",y.createElement("code",null,"resolveRenderer()")," function."),y.createElement("details",null,y.createElement("summary",null,"Props"),y.createElement("pre",null,JSON.stringify(e,null,2)))):null}import{CANVAS_DRAFT_STATE as H,createEventBus as Q,subscribeToComposition as Z}from"@uniformdev/canvas";import{useEffect as q}from"react";function ze({enabled:e,projectId:o,compositionId:t,effect:n}){q(()=>{if(!e||!t||!o)return;let r;return(async()=>{let s=await Q();s&&(r=Z({eventBus:s,compositionId:t,compositionState:H,projectId:o,callback:n,event:"updated"}))})(),()=>{r&&r()}},[t,e,o,n])}import{createCanvasChannel as W,IN_CONTEXT_EDITOR_QUERY_STRING_PARAM as ee,isUpdateCompositionMessage as oe}from"@uniformdev/canvas";import{useEffect as w,useMemo as te,useState as ne}from"react";var O="uniform-canvas-preview-script",$e=({apiUrl:e})=>async o=>{let t=await fetch(e,{method:"post",body:JSON.stringify({composition:o.composition,hash:o.hash}),headers:{"Content-Type":"application/json"}}),n=await t.json();if(!t.ok)throw new Error("Error reading enhanced composition");return n.composition},je=({initialCompositionValue:e,enhance:o=t=>t.composition})=>{let[t,n]=ne(e);w(()=>{(e==null?void 0:e._id)!==(t==null?void 0:t._id)&&n(e)},[e,t]);let r=te(()=>{var s;return A()?W({broadcastTo:[(s=window.opener)!=null?s:window.top],listenTo:[window]}):void 0},[]);return w(()=>{if(!r)return;let i=r.on("update-composition",async s=>{if(oe(s)){let p=await o(s);n(p)}});return()=>{i()}},[r,o]),w(()=>{if(!A()||document.getElementById(O))return;let s=document.createElement("script");s.id=O,s.src=re(),s.async=!0,document.head.appendChild(s)},[]),{composition:t}};function re(){return`${window.document.referrer}files/canvas-in-context-embed/index.js`}function A(){if(typeof window=="undefined")return!1;let e=new URLSearchParams(window.location.search).has(ee),o=Boolean(window.document.referrer.match(/(^https:\/\/|\.)(uniform.app|uniform.wtf|localhost:\d{4})\//));return e&&o}export{_ as Composition,ke as DefaultNotImplementedComponent,N as Slot,h as componentStore,me as componentStoreResolver,$e as createApiEnhancer,S as createComponentStore,x as createComponentStoreResolver,ae as registerUniformComponent,E as useComposition,ze as useCompositionEventEffect,je as useContextualEditing};

package/dist/index.js

@@ -1 +1 @@
-"use strict";var $=Object.create;var x=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,G=Object.prototype.hasOwnProperty;var H=(e,o)=>{for(var t in o)x(e,t,{get:o[t],enumerable:!0})},M=(e,o,t,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of K(o))!G.call(e,r)&&r!==t&&x(e,r,{get:()=>o[r],enumerable:!(n=j(o,r))||n.enumerable});return e};var b=(e,o,t)=>(t=e!=null?$(Y(e)):{},M(o||!e||!e.__esModule?x(t,"default",{value:e,enumerable:!0}):t,e)),Q=e=>M(x({},"__esModule",{value:!0}),e);var ie={};H(ie,{Composition:()=>D,DefaultNotImplementedComponent:()=>oe,Slot:()=>V,componentStore:()=>T,componentStoreResolver:()=>q,createApiEnhancer:()=>ne,createComponentStore:()=>A,createComponentStoreResolver:()=>O,registerUniformComponent:()=>Z,useComposition:()=>_,useCompositionEventEffect:()=>te,useCompositionInstance:()=>re});module.exports=Q(ie);var P=require("@uniformdev/context-react"),L=require("@uniformdev/canvas"),y=b(require("react"));function E(e){var n;let o=(n=e.parameters)!=null?n:{};return{...Object.keys(o).reduce((r,i)=>(r[i]=o[i].value,r),{}),...e.data,component:e}}var A=()=>{let e=new Map;return{register:({type:o,component:t})=>{e.set(o,t)},get:o=>e.get(o)}},O=e=>o=>e.store.get(o.type)||e.defaultComponent||null;var T=A(),Z=({type:e,component:o})=>{Array.isArray(e)?e.forEach(t=>{T.register({type:t,component:o})}):T.register({type:e,component:o})},q=O({store:T});var C=b(require("react"));var v=require("@uniformdev/canvas");var N=require("@uniformdev/context-react"),I=require("@uniformdev/canvas"),k=b(require("react")),z={test:(e,o,t)=>{var p,d,m,c,a;let n=e,r=(d=(p=n.slots)==null?void 0:p.test)!=null?d:[],i=(a=(c=(m=n.parameters)==null?void 0:m.test)==null?void 0:c.value)!=null?a:"Untitled Test",s=(0,I.mapSlotToTestVariations)(r);return k.createElement(N.Test,{key:o,variations:s,name:i,component:l=>t(l,o)})},personalization:(e,o,t)=>{var i,s,p,d,m,c,a;let n=e,r=(0,I.mapSlotToPersonalizedVariations)((i=n==null?void 0:n.slots)==null?void 0:i.pz);return k.createElement(N.Personalize,{key:o,variations:r,count:Number((d=(p=(s=n.parameters)==null?void 0:s.count)==null?void 0:p.value)!=null?d:1),name:(a=(c=(m=n.parameters)==null?void 0:m.trackingEventName)==null?void 0:c.value)!=null?a:"Untitled Personalization",component:l=>t(l,0)})}};function V({name:e,resolveRenderer:o,children:t,emptyPlaceholder:n}){var a;let r=_();if(!(r!=null&&r.composition))throw new Error("Slot must be rendered within a Composition");let{composition:i,resolveRenderer:s}=r;if(!i)throw new Error("Cannot use Slot without a Composition wrapper.");let p=(a=i.slots)==null?void 0:a[e];if(!p||!Array.isArray(p))return process.env.NODE_ENV==="development"&&console.warn(`[canvas-dev] slot '${e}' was rendered, but it was not defined on its component. This is expected if the slot is optional, otherwise it may indicate a typo. Component:`,i),null;let d=o!=null?o:s,m=z,c=p.map((l,u)=>{let f=U({component:l,resolveRenderer:d,resolveSystem:m,key:`inner-${u}`,indexInSlot:u,slotName:e,parentComponent:i,slotChildrenCount:p.length,emptyPlaceholder:n}),S=t?t({child:f,component:l,key:`wrapped-inner-${u}`}):f;return C.default.createElement(C.default.Fragment,{key:u},S)});return C.default.createElement(C.default.Fragment,void 0,c)}function U({component:e,resolveRenderer:o,resolveSystem:t,key:n=0,indexInSlot:r,slotName:i,parentComponent:s,slotChildrenCount:p,emptyPlaceholder:d}){var c,a,l;let m=o==null?void 0:o(e);if(e.type===v.CANVAS_TEST_TYPE)return t.test(e,n,(u,f)=>U({component:u,resolveRenderer:o,resolveSystem:t,key:f}));if(e.type===v.CANVAS_PERSONALIZE_TYPE)return t.personalization(e,n,(u,f)=>U({component:u,resolveRenderer:o,resolveSystem:t,key:f}));if(m){let u=E(e),f=Boolean(e._id),S=e._id===v.PLACEHOLDER_ID;return C.default.createElement(D,{key:n,data:e,resolveRenderer:o},f?C.default.createElement("script",{key:n,"data-role":v.IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,"data-parent-id":s==null?void 0:s._id,"data-parent-type":s==null?void 0:s.type,"data-component-id":e._id,"data-slot-name":i!=null?i:"","data-component-index":r!=null?r:"","data-total-components":p!=null?p:"","data-component-name":e.type,"data-is-placeholder":S?"true":void 0,"data-component-title":(l=(a=(c=e.parameters)==null?void 0:c.title)==null?void 0:a.value)!=null?l:""}):null,S&&d!==void 0?d:C.default.createElement(m,{...u}),f?C.default.createElement("script",{"data-role":"component-end"}):null)}else process.env.NODE_ENV!=="production"&&console.warn(`[canvas] found component of type '${e.type}' which the resolveRenderer prop returned no component for. Nothing will be rendered. The resolveRenderer function may need to be extended to handle the new type.`,e);return null}var B=(0,y.createContext)(void 0);function _(){return(0,y.useContext)(B)}var W=e=>T.get(e.type)||null;function D({data:e,resolveRenderer:o,children:t,behaviorTracking:n}){var c,a,l;let r=_(),i=(0,P.useUniformContext)({throwOnMissingProvider:!1})!==void 0;if(!e)return process.env.NODE_ENV==="development"&&console.warn("[canvas-dev] Composition was rendered with no data, nothing will be output."),null;let s={composition:e,resolveRenderer:o||(r==null?void 0:r.resolveRenderer)||W,behaviorTracking:(c=n!=null?n:r==null?void 0:r.behaviorTracking)!=null?c:"onView"},p=(l=(a=e.parameters)==null?void 0:a[L.CANVAS_ENRICHMENT_TAG_PARAM])==null?void 0:l.value,d=s.behaviorTracking==="onLoad"?P.TrackFragment:P.Track,m=ee({children:t,data:e,hasParentLayout:Boolean(r)});return y.default.createElement(B.Provider,{value:s},i?y.default.createElement(d,{behavior:p},m):m)}function ee({children:e,data:o,hasParentLayout:t}){let n=e;if(!n&&!t){let i=T.get(o.type);i?n=y.default.createElement(i,E(o)):n=Object.keys(o.slots||{}).map(s=>y.default.createElement(V,{key:s,name:s}))}return typeof n=="function"?n(E(o)):n}var h=b(require("react"));function oe(e){var t;let o=(t=e.component)==null?void 0:t.type;return o?h.default.createElement("div",{style:{borderLeft:"10px solid #e42535!important",padding:"0.01em 16px 16px",borderRadius:"16px",backgroundColor:"rgba(122, 215, 218, 0.3)",color:"#1d3557"}},h.default.createElement("h2",null,"Component: ",o),h.default.createElement("p",null,h.default.createElement("strong",null,o)," has no React implementation. It may need to be added to your"," ",h.default.createElement("code",null,"resolveRenderer()")," function."),h.default.createElement("details",null,h.default.createElement("summary",null,"Props"),h.default.createElement("pre",null,JSON.stringify(e,null,2)))):null}var g=require("@uniformdev/canvas"),F=require("react");function te({enabled:e,projectId:o,compositionId:t,effect:n}){(0,F.useEffect)(()=>{if(!e||!t||!o)return;let r;return(async()=>{let s=await(0,g.createEventBus)();s&&(r=(0,g.subscribeToComposition)({eventBus:s,compositionId:t,compositionState:g.CANVAS_DRAFT_STATE,projectId:o,callback:n,event:"updated"}))})(),()=>{r&&r()}},[t,e,o,n])}var w=require("@uniformdev/canvas"),R=require("react"),J="uniform-canvas-preview-script",ne=({apiUrl:e})=>async o=>{let t=await fetch(e,{method:"post",body:JSON.stringify({composition:o.composition,hash:o.hash}),headers:{"Content-Type":"application/json"}}),n=await t.json();if(!t.ok)throw new Error("Error reading enhanced composition");return n.composition},re=({composition:e,enhance:o=t=>t.composition})=>{let[t,n]=(0,R.useState)(e);(0,R.useEffect)(()=>{(e==null?void 0:e._id)!==(t==null?void 0:t._id)&&n(e)},[e,t]);let r=(0,R.useMemo)(()=>{var s;return X()?(0,w.createCanvasChannel)({broadcastTo:[(s=window.opener)!=null?s:window.top],listenTo:[window]}):void 0},[]);return(0,R.useEffect)(()=>{if(!r)return;let i=r.on("update-composition",async s=>{if((0,w.isUpdateCompositionMessage)(s)){let p=await o(s);n(p)}});return()=>{i()}},[r,o]),(0,R.useEffect)(()=>{if(!X()||document.getElementById(J))return;let s=document.createElement("script");s.id=J,s.src=se(),s.async=!0,document.head.appendChild(s)},[]),{composition:t}};function se(){return`${window.document.referrer}files/canvas-in-context-embed/index.js`}function X(){if(typeof window=="undefined")return!1;let e=new URLSearchParams(window.location.search).has(w.IN_CONTEXT_EDITOR_QUERY_STRING_PARAM),o=Boolean(window.document.referrer.match(/(^https:\/\/|\.)(uniform.app|uniform.wtf|localhost:\d{4})\//));return e&&o}0&&(module.exports={Composition,DefaultNotImplementedComponent,Slot,componentStore,componentStoreResolver,createApiEnhancer,createComponentStore,createComponentStoreResolver,registerUniformComponent,useComposition,useCompositionEventEffect,useCompositionInstance});
+"use strict";var $=Object.create;var x=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,G=Object.prototype.hasOwnProperty;var H=(e,o)=>{for(var t in o)x(e,t,{get:o[t],enumerable:!0})},V=(e,o,t,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of K(o))!G.call(e,r)&&r!==t&&x(e,r,{get:()=>o[r],enumerable:!(n=j(o,r))||n.enumerable});return e};var b=(e,o,t)=>(t=e!=null?$(Y(e)):{},V(o||!e||!e.__esModule?x(t,"default",{value:e,enumerable:!0}):t,e)),Q=e=>V(x({},"__esModule",{value:!0}),e);var ie={};H(ie,{Composition:()=>M,DefaultNotImplementedComponent:()=>oe,Slot:()=>D,componentStore:()=>T,componentStoreResolver:()=>q,createApiEnhancer:()=>ne,createComponentStore:()=>O,createComponentStoreResolver:()=>A,registerUniformComponent:()=>Z,useComposition:()=>I,useCompositionEventEffect:()=>te,useContextualEditing:()=>re});module.exports=Q(ie);var L=require("@uniformdev/canvas"),P=require("@uniformdev/context-react"),y=b(require("react"));function w(e){var n;let o=(n=e.parameters)!=null?n:{};return{...Object.keys(o).reduce((r,i)=>(r[i]=o[i].value,r),{}),...e.data,component:e}}var O=()=>{let e=new Map;return{register:({type:o,component:t})=>{e.set(o,t)},get:o=>e.get(o)}},A=e=>o=>e.store.get(o.type)||e.defaultComponent||null;var T=O(),Z=({type:e,component:o})=>{Array.isArray(e)?e.forEach(t=>{T.register({type:t,component:o})}):T.register({type:e,component:o})},q=A({store:T});var v=require("@uniformdev/canvas"),C=b(require("react"));var N=require("@uniformdev/canvas"),_=require("@uniformdev/context-react"),k=b(require("react")),z={test:(e,o,t)=>{var p,d,m,c,a;let n=e,r=(d=(p=n.slots)==null?void 0:p.test)!=null?d:[],i=(a=(c=(m=n.parameters)==null?void 0:m.test)==null?void 0:c.value)!=null?a:"Untitled Test",s=(0,N.mapSlotToTestVariations)(r);return k.createElement(_.Test,{key:o,variations:s,name:i,component:l=>t(l,o)})},personalization:(e,o,t)=>{var i,s,p,d,m,c,a;let n=e,r=(0,N.mapSlotToPersonalizedVariations)((i=n==null?void 0:n.slots)==null?void 0:i.pz);return k.createElement(_.Personalize,{key:o,variations:r,count:Number((d=(p=(s=n.parameters)==null?void 0:s.count)==null?void 0:p.value)!=null?d:1),name:(a=(c=(m=n.parameters)==null?void 0:m.trackingEventName)==null?void 0:c.value)!=null?a:"Untitled Personalization",component:l=>t(l,0)})}};function D({name:e,resolveRenderer:o,children:t,emptyPlaceholder:n}){var a;let r=I();if(!(r!=null&&r.composition))throw new Error("Slot must be rendered within a Composition");let{composition:i,resolveRenderer:s}=r;if(!i)throw new Error("Cannot use Slot without a Composition wrapper.");let p=(a=i.slots)==null?void 0:a[e];if(!p||!Array.isArray(p))return process.env.NODE_ENV==="development"&&console.warn(`[canvas-dev] slot '${e}' was rendered, but it was not defined on its component. This is expected if the slot is optional, otherwise it may indicate a typo. Component:`,i),null;let d=o!=null?o:s,m=z,c=p.map((l,u)=>{let f=U({component:l,resolveRenderer:d,resolveSystem:m,key:`inner-${u}`,indexInSlot:u,slotName:e,parentComponent:i,slotChildrenCount:p.length,emptyPlaceholder:n}),S=t?t({child:f,component:l,key:`wrapped-inner-${u}`}):f;return C.default.createElement(C.default.Fragment,{key:u},S)});return C.default.createElement(C.default.Fragment,void 0,c)}function U({component:e,resolveRenderer:o,resolveSystem:t,key:n=0,indexInSlot:r,slotName:i,parentComponent:s,slotChildrenCount:p,emptyPlaceholder:d}){var c,a,l;let m=o==null?void 0:o(e);if(e.type===v.CANVAS_TEST_TYPE)return t.test(e,n,(u,f)=>U({component:u,resolveRenderer:o,resolveSystem:t,key:f}));if(e.type===v.CANVAS_PERSONALIZE_TYPE)return t.personalization(e,n,(u,f)=>U({component:u,resolveRenderer:o,resolveSystem:t,key:f}));if(m){let u=w(e),f=Boolean(e._id),S=e._id===v.PLACEHOLDER_ID;return C.default.createElement(M,{key:n,data:e,resolveRenderer:o},f?C.default.createElement("script",{key:n,"data-role":v.IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,"data-parent-id":s==null?void 0:s._id,"data-parent-type":s==null?void 0:s.type,"data-component-id":e._id,"data-slot-name":i!=null?i:"","data-component-index":r!=null?r:"","data-total-components":p!=null?p:"","data-component-name":e.type,"data-is-placeholder":S?"true":void 0,"data-component-title":(l=(a=(c=e.parameters)==null?void 0:c.title)==null?void 0:a.value)!=null?l:""}):null,S&&d!==void 0?d:C.default.createElement(m,{...u}),f?C.default.createElement("script",{"data-role":"component-end"}):null)}else process.env.NODE_ENV!=="production"&&console.warn(`[canvas] found component of type '${e.type}' which the resolveRenderer prop returned no component for. Nothing will be rendered. The resolveRenderer function may need to be extended to handle the new type.`,e);return null}var B=(0,y.createContext)(void 0);function I(){return(0,y.useContext)(B)}var W=e=>T.get(e.type)||null;function M({data:e,resolveRenderer:o,children:t,behaviorTracking:n}){var c,a,l;let r=I(),i=(0,P.useUniformContext)({throwOnMissingProvider:!1})!==void 0;if(!e)return process.env.NODE_ENV==="development"&&console.warn("[canvas-dev] Composition was rendered with no data, nothing will be output."),null;let s={composition:e,resolveRenderer:o||(r==null?void 0:r.resolveRenderer)||W,behaviorTracking:(c=n!=null?n:r==null?void 0:r.behaviorTracking)!=null?c:"onView"},p=(l=(a=e.parameters)==null?void 0:a[L.CANVAS_ENRICHMENT_TAG_PARAM])==null?void 0:l.value,d=s.behaviorTracking==="onLoad"?P.TrackFragment:P.Track,m=ee({children:t,data:e,hasParentLayout:Boolean(r)});return y.default.createElement(B.Provider,{value:s},i?y.default.createElement(d,{behavior:p},m):m)}function ee({children:e,data:o,hasParentLayout:t}){var i;let n=e;if(!n&&!t){let s=T.get(o.type);s?n=y.default.createElement(s,w(o)):(Object.keys((i=o.slots)!=null?i:{}).length>1&&process.env.NODE_ENV==="development"&&console.warn(`[canvas-dev] All the slots in component '${o.type}' are rendered in no particular order. Use '<Slot name={slotName} />' to reliably render the slots.`),n=Object.keys(o.slots||{}).map(p=>y.default.createElement(D,{key:p,name:p})))}return typeof n=="function"?n(w(o)):n}var h=b(require("react"));function oe(e){var t;let o=(t=e.component)==null?void 0:t.type;return o?h.default.createElement("div",{style:{borderLeft:"10px solid #e42535!important",padding:"0.01em 16px 16px",borderRadius:"16px",backgroundColor:"rgba(122, 215, 218, 0.3)",color:"#1d3557"}},h.default.createElement("h2",null,"Component: ",o),h.default.createElement("p",null,h.default.createElement("strong",null,o)," has no React implementation. It may need to be added to your"," ",h.default.createElement("code",null,"resolveRenderer()")," function."),h.default.createElement("details",null,h.default.createElement("summary",null,"Props"),h.default.createElement("pre",null,JSON.stringify(e,null,2)))):null}var g=require("@uniformdev/canvas"),F=require("react");function te({enabled:e,projectId:o,compositionId:t,effect:n}){(0,F.useEffect)(()=>{if(!e||!t||!o)return;let r;return(async()=>{let s=await(0,g.createEventBus)();s&&(r=(0,g.subscribeToComposition)({eventBus:s,compositionId:t,compositionState:g.CANVAS_DRAFT_STATE,projectId:o,callback:n,event:"updated"}))})(),()=>{r&&r()}},[t,e,o,n])}var E=require("@uniformdev/canvas"),R=require("react"),J="uniform-canvas-preview-script",ne=({apiUrl:e})=>async o=>{let t=await fetch(e,{method:"post",body:JSON.stringify({composition:o.composition,hash:o.hash}),headers:{"Content-Type":"application/json"}}),n=await t.json();if(!t.ok)throw new Error("Error reading enhanced composition");return n.composition},re=({initialCompositionValue:e,enhance:o=t=>t.composition})=>{let[t,n]=(0,R.useState)(e);(0,R.useEffect)(()=>{(e==null?void 0:e._id)!==(t==null?void 0:t._id)&&n(e)},[e,t]);let r=(0,R.useMemo)(()=>{var s;return X()?(0,E.createCanvasChannel)({broadcastTo:[(s=window.opener)!=null?s:window.top],listenTo:[window]}):void 0},[]);return(0,R.useEffect)(()=>{if(!r)return;let i=r.on("update-composition",async s=>{if((0,E.isUpdateCompositionMessage)(s)){let p=await o(s);n(p)}});return()=>{i()}},[r,o]),(0,R.useEffect)(()=>{if(!X()||document.getElementById(J))return;let s=document.createElement("script");s.id=J,s.src=se(),s.async=!0,document.head.appendChild(s)},[]),{composition:t}};function se(){return`${window.document.referrer}files/canvas-in-context-embed/index.js`}function X(){if(typeof window=="undefined")return!1;let e=new URLSearchParams(window.location.search).has(E.IN_CONTEXT_EDITOR_QUERY_STRING_PARAM),o=Boolean(window.document.referrer.match(/(^https:\/\/|\.)(uniform.app|uniform.wtf|localhost:\d{4})\//));return e&&o}0&&(module.exports={Composition,DefaultNotImplementedComponent,Slot,componentStore,componentStoreResolver,createApiEnhancer,createComponentStore,createComponentStoreResolver,registerUniformComponent,useComposition,useCompositionEventEffect,useContextualEditing});

package/dist/index.mjs

@@ -1 +1 @@
-import{Track as F,TrackFragment as J,useUniformContext as X}from"@uniformdev/context-react";import{CANVAS_ENRICHMENT_TAG_PARAM as $}from"@uniformdev/canvas";import T,{createContext as j,useContext as K}from"react";function v(e){var n;let o=(n=e.parameters)!=null?n:{};return{...Object.keys(o).reduce((r,i)=>(r[i]=o[i].value,r),{}),...e.data,component:e}}var S=()=>{let e=new Map;return{register:({type:o,component:t})=>{e.set(o,t)},get:o=>e.get(o)}},x=e=>o=>e.store.get(o.type)||e.defaultComponent||null;var h=S(),ae=({type:e,component:o})=>{Array.isArray(e)?e.forEach(t=>{h.register({type:t,component:o})}):h.register({type:e,component:o})},me=x({store:h});import C from"react";import{CANVAS_PERSONALIZE_TYPE as M,CANVAS_TEST_TYPE as z,IN_CONTEXT_EDITOR_COMPONENT_START_ROLE as L,PLACEHOLDER_ID as B}from"@uniformdev/canvas";import{Personalize as k,Test as U}from"@uniformdev/context-react";import{mapSlotToPersonalizedVariations as V,mapSlotToTestVariations as D}from"@uniformdev/canvas";import*as P from"react";var b={test:(e,o,t)=>{var p,d,m,c,a;let n=e,r=(d=(p=n.slots)==null?void 0:p.test)!=null?d:[],i=(a=(c=(m=n.parameters)==null?void 0:m.test)==null?void 0:c.value)!=null?a:"Untitled Test",s=D(r);return P.createElement(U,{key:o,variations:s,name:i,component:l=>t(l,o)})},personalization:(e,o,t)=>{var i,s,p,d,m,c,a;let n=e,r=V((i=n==null?void 0:n.slots)==null?void 0:i.pz);return P.createElement(k,{key:o,variations:r,count:Number((d=(p=(s=n.parameters)==null?void 0:s.count)==null?void 0:p.value)!=null?d:1),name:(a=(c=(m=n.parameters)==null?void 0:m.trackingEventName)==null?void 0:c.value)!=null?a:"Untitled Personalization",component:l=>t(l,0)})}};function N({name:e,resolveRenderer:o,children:t,emptyPlaceholder:n}){var a;let r=w();if(!(r!=null&&r.composition))throw new Error("Slot must be rendered within a Composition");let{composition:i,resolveRenderer:s}=r;if(!i)throw new Error("Cannot use Slot without a Composition wrapper.");let p=(a=i.slots)==null?void 0:a[e];if(!p||!Array.isArray(p))return process.env.NODE_ENV==="development"&&console.warn(`[canvas-dev] slot '${e}' was rendered, but it was not defined on its component. This is expected if the slot is optional, otherwise it may indicate a typo. Component:`,i),null;let d=o!=null?o:s,m=b,c=p.map((l,u)=>{let f=g({component:l,resolveRenderer:d,resolveSystem:m,key:`inner-${u}`,indexInSlot:u,slotName:e,parentComponent:i,slotChildrenCount:p.length,emptyPlaceholder:n}),R=t?t({child:f,component:l,key:`wrapped-inner-${u}`}):f;return C.createElement(C.Fragment,{key:u},R)});return C.createElement(C.Fragment,void 0,c)}function g({component:e,resolveRenderer:o,resolveSystem:t,key:n=0,indexInSlot:r,slotName:i,parentComponent:s,slotChildrenCount:p,emptyPlaceholder:d}){var c,a,l;let m=o==null?void 0:o(e);if(e.type===z)return t.test(e,n,(u,f)=>g({component:u,resolveRenderer:o,resolveSystem:t,key:f}));if(e.type===M)return t.personalization(e,n,(u,f)=>g({component:u,resolveRenderer:o,resolveSystem:t,key:f}));if(m){let u=v(e),f=Boolean(e._id),R=e._id===B;return C.createElement(I,{key:n,data:e,resolveRenderer:o},f?C.createElement("script",{key:n,"data-role":L,"data-parent-id":s==null?void 0:s._id,"data-parent-type":s==null?void 0:s.type,"data-component-id":e._id,"data-slot-name":i!=null?i:"","data-component-index":r!=null?r:"","data-total-components":p!=null?p:"","data-component-name":e.type,"data-is-placeholder":R?"true":void 0,"data-component-title":(l=(a=(c=e.parameters)==null?void 0:c.title)==null?void 0:a.value)!=null?l:""}):null,R&&d!==void 0?d:C.createElement(m,{...u}),f?C.createElement("script",{"data-role":"component-end"}):null)}else process.env.NODE_ENV!=="production"&&console.warn(`[canvas] found component of type '${e.type}' which the resolveRenderer prop returned no component for. Nothing will be rendered. The resolveRenderer function may need to be extended to handle the new type.`,e);return null}var _=j(void 0);function w(){return K(_)}var Y=e=>h.get(e.type)||null;function I({data:e,resolveRenderer:o,children:t,behaviorTracking:n}){var c,a,l;let r=w(),i=X({throwOnMissingProvider:!1})!==void 0;if(!e)return process.env.NODE_ENV==="development"&&console.warn("[canvas-dev] Composition was rendered with no data, nothing will be output."),null;let s={composition:e,resolveRenderer:o||(r==null?void 0:r.resolveRenderer)||Y,behaviorTracking:(c=n!=null?n:r==null?void 0:r.behaviorTracking)!=null?c:"onView"},p=(l=(a=e.parameters)==null?void 0:a[$])==null?void 0:l.value,d=s.behaviorTracking==="onLoad"?J:F,m=G({children:t,data:e,hasParentLayout:Boolean(r)});return T.createElement(_.Provider,{value:s},i?T.createElement(d,{behavior:p},m):m)}function G({children:e,data:o,hasParentLayout:t}){let n=e;if(!n&&!t){let i=h.get(o.type);i?n=T.createElement(i,v(o)):n=Object.keys(o.slots||{}).map(s=>T.createElement(N,{key:s,name:s}))}return typeof n=="function"?n(v(o)):n}import y from"react";function ke(e){var t;let o=(t=e.component)==null?void 0:t.type;return o?y.createElement("div",{style:{borderLeft:"10px solid #e42535!important",padding:"0.01em 16px 16px",borderRadius:"16px",backgroundColor:"rgba(122, 215, 218, 0.3)",color:"#1d3557"}},y.createElement("h2",null,"Component: ",o),y.createElement("p",null,y.createElement("strong",null,o)," has no React implementation. It may need to be added to your"," ",y.createElement("code",null,"resolveRenderer()")," function."),y.createElement("details",null,y.createElement("summary",null,"Props"),y.createElement("pre",null,JSON.stringify(e,null,2)))):null}import{CANVAS_DRAFT_STATE as H,createEventBus as Q,subscribeToComposition as Z}from"@uniformdev/canvas";import{useEffect as q}from"react";function ze({enabled:e,projectId:o,compositionId:t,effect:n}){q(()=>{if(!e||!t||!o)return;let r;return(async()=>{let s=await Q();s&&(r=Z({eventBus:s,compositionId:t,compositionState:H,projectId:o,callback:n,event:"updated"}))})(),()=>{r&&r()}},[t,e,o,n])}import{createCanvasChannel as W,isUpdateCompositionMessage as ee,IN_CONTEXT_EDITOR_QUERY_STRING_PARAM as oe}from"@uniformdev/canvas";import{useEffect as E,useMemo as te,useState as ne}from"react";var A="uniform-canvas-preview-script",$e=({apiUrl:e})=>async o=>{let t=await fetch(e,{method:"post",body:JSON.stringify({composition:o.composition,hash:o.hash}),headers:{"Content-Type":"application/json"}}),n=await t.json();if(!t.ok)throw new Error("Error reading enhanced composition");return n.composition},je=({composition:e,enhance:o=t=>t.composition})=>{let[t,n]=ne(e);E(()=>{(e==null?void 0:e._id)!==(t==null?void 0:t._id)&&n(e)},[e,t]);let r=te(()=>{var s;return O()?W({broadcastTo:[(s=window.opener)!=null?s:window.top],listenTo:[window]}):void 0},[]);return E(()=>{if(!r)return;let i=r.on("update-composition",async s=>{if(ee(s)){let p=await o(s);n(p)}});return()=>{i()}},[r,o]),E(()=>{if(!O()||document.getElementById(A))return;let s=document.createElement("script");s.id=A,s.src=re(),s.async=!0,document.head.appendChild(s)},[]),{composition:t}};function re(){return`${window.document.referrer}files/canvas-in-context-embed/index.js`}function O(){if(typeof window=="undefined")return!1;let e=new URLSearchParams(window.location.search).has(oe),o=Boolean(window.document.referrer.match(/(^https:\/\/|\.)(uniform.app|uniform.wtf|localhost:\d{4})\//));return e&&o}export{I as Composition,ke as DefaultNotImplementedComponent,N as Slot,h as componentStore,me as componentStoreResolver,$e as createApiEnhancer,S as createComponentStore,x as createComponentStoreResolver,ae as registerUniformComponent,w as useComposition,ze as useCompositionEventEffect,je as useCompositionInstance};
+import{CANVAS_ENRICHMENT_TAG_PARAM as F}from"@uniformdev/canvas";import{Track as J,TrackFragment as X,useUniformContext as $}from"@uniformdev/context-react";import T,{createContext as j,useContext as K}from"react";function v(e){var n;let o=(n=e.parameters)!=null?n:{};return{...Object.keys(o).reduce((r,i)=>(r[i]=o[i].value,r),{}),...e.data,component:e}}var S=()=>{let e=new Map;return{register:({type:o,component:t})=>{e.set(o,t)},get:o=>e.get(o)}},x=e=>o=>e.store.get(o.type)||e.defaultComponent||null;var h=S(),ae=({type:e,component:o})=>{Array.isArray(e)?e.forEach(t=>{h.register({type:t,component:o})}):h.register({type:e,component:o})},me=x({store:h});import{CANVAS_PERSONALIZE_TYPE as V,CANVAS_TEST_TYPE as z,IN_CONTEXT_EDITOR_COMPONENT_START_ROLE as L,PLACEHOLDER_ID as B}from"@uniformdev/canvas";import C from"react";import{mapSlotToPersonalizedVariations as k,mapSlotToTestVariations as U}from"@uniformdev/canvas";import{Personalize as D,Test as M}from"@uniformdev/context-react";import*as P from"react";var b={test:(e,o,t)=>{var p,d,m,c,a;let n=e,r=(d=(p=n.slots)==null?void 0:p.test)!=null?d:[],i=(a=(c=(m=n.parameters)==null?void 0:m.test)==null?void 0:c.value)!=null?a:"Untitled Test",s=U(r);return P.createElement(M,{key:o,variations:s,name:i,component:l=>t(l,o)})},personalization:(e,o,t)=>{var i,s,p,d,m,c,a;let n=e,r=k((i=n==null?void 0:n.slots)==null?void 0:i.pz);return P.createElement(D,{key:o,variations:r,count:Number((d=(p=(s=n.parameters)==null?void 0:s.count)==null?void 0:p.value)!=null?d:1),name:(a=(c=(m=n.parameters)==null?void 0:m.trackingEventName)==null?void 0:c.value)!=null?a:"Untitled Personalization",component:l=>t(l,0)})}};function N({name:e,resolveRenderer:o,children:t,emptyPlaceholder:n}){var a;let r=E();if(!(r!=null&&r.composition))throw new Error("Slot must be rendered within a Composition");let{composition:i,resolveRenderer:s}=r;if(!i)throw new Error("Cannot use Slot without a Composition wrapper.");let p=(a=i.slots)==null?void 0:a[e];if(!p||!Array.isArray(p))return process.env.NODE_ENV==="development"&&console.warn(`[canvas-dev] slot '${e}' was rendered, but it was not defined on its component. This is expected if the slot is optional, otherwise it may indicate a typo. Component:`,i),null;let d=o!=null?o:s,m=b,c=p.map((l,u)=>{let f=g({component:l,resolveRenderer:d,resolveSystem:m,key:`inner-${u}`,indexInSlot:u,slotName:e,parentComponent:i,slotChildrenCount:p.length,emptyPlaceholder:n}),R=t?t({child:f,component:l,key:`wrapped-inner-${u}`}):f;return C.createElement(C.Fragment,{key:u},R)});return C.createElement(C.Fragment,void 0,c)}function g({component:e,resolveRenderer:o,resolveSystem:t,key:n=0,indexInSlot:r,slotName:i,parentComponent:s,slotChildrenCount:p,emptyPlaceholder:d}){var c,a,l;let m=o==null?void 0:o(e);if(e.type===z)return t.test(e,n,(u,f)=>g({component:u,resolveRenderer:o,resolveSystem:t,key:f}));if(e.type===V)return t.personalization(e,n,(u,f)=>g({component:u,resolveRenderer:o,resolveSystem:t,key:f}));if(m){let u=v(e),f=Boolean(e._id),R=e._id===B;return C.createElement(_,{key:n,data:e,resolveRenderer:o},f?C.createElement("script",{key:n,"data-role":L,"data-parent-id":s==null?void 0:s._id,"data-parent-type":s==null?void 0:s.type,"data-component-id":e._id,"data-slot-name":i!=null?i:"","data-component-index":r!=null?r:"","data-total-components":p!=null?p:"","data-component-name":e.type,"data-is-placeholder":R?"true":void 0,"data-component-title":(l=(a=(c=e.parameters)==null?void 0:c.title)==null?void 0:a.value)!=null?l:""}):null,R&&d!==void 0?d:C.createElement(m,{...u}),f?C.createElement("script",{"data-role":"component-end"}):null)}else process.env.NODE_ENV!=="production"&&console.warn(`[canvas] found component of type '${e.type}' which the resolveRenderer prop returned no component for. Nothing will be rendered. The resolveRenderer function may need to be extended to handle the new type.`,e);return null}var I=j(void 0);function E(){return K(I)}var Y=e=>h.get(e.type)||null;function _({data:e,resolveRenderer:o,children:t,behaviorTracking:n}){var c,a,l;let r=E(),i=$({throwOnMissingProvider:!1})!==void 0;if(!e)return process.env.NODE_ENV==="development"&&console.warn("[canvas-dev] Composition was rendered with no data, nothing will be output."),null;let s={composition:e,resolveRenderer:o||(r==null?void 0:r.resolveRenderer)||Y,behaviorTracking:(c=n!=null?n:r==null?void 0:r.behaviorTracking)!=null?c:"onView"},p=(l=(a=e.parameters)==null?void 0:a[F])==null?void 0:l.value,d=s.behaviorTracking==="onLoad"?X:J,m=G({children:t,data:e,hasParentLayout:Boolean(r)});return T.createElement(I.Provider,{value:s},i?T.createElement(d,{behavior:p},m):m)}function G({children:e,data:o,hasParentLayout:t}){var i;let n=e;if(!n&&!t){let s=h.get(o.type);s?n=T.createElement(s,v(o)):(Object.keys((i=o.slots)!=null?i:{}).length>1&&process.env.NODE_ENV==="development"&&console.warn(`[canvas-dev] All the slots in component '${o.type}' are rendered in no particular order. Use '<Slot name={slotName} />' to reliably render the slots.`),n=Object.keys(o.slots||{}).map(p=>T.createElement(N,{key:p,name:p})))}return typeof n=="function"?n(v(o)):n}import y from"react";function ke(e){var t;let o=(t=e.component)==null?void 0:t.type;return o?y.createElement("div",{style:{borderLeft:"10px solid #e42535!important",padding:"0.01em 16px 16px",borderRadius:"16px",backgroundColor:"rgba(122, 215, 218, 0.3)",color:"#1d3557"}},y.createElement("h2",null,"Component: ",o),y.createElement("p",null,y.createElement("strong",null,o)," has no React implementation. It may need to be added to your"," ",y.createElement("code",null,"resolveRenderer()")," function."),y.createElement("details",null,y.createElement("summary",null,"Props"),y.createElement("pre",null,JSON.stringify(e,null,2)))):null}import{CANVAS_DRAFT_STATE as H,createEventBus as Q,subscribeToComposition as Z}from"@uniformdev/canvas";import{useEffect as q}from"react";function ze({enabled:e,projectId:o,compositionId:t,effect:n}){q(()=>{if(!e||!t||!o)return;let r;return(async()=>{let s=await Q();s&&(r=Z({eventBus:s,compositionId:t,compositionState:H,projectId:o,callback:n,event:"updated"}))})(),()=>{r&&r()}},[t,e,o,n])}import{createCanvasChannel as W,IN_CONTEXT_EDITOR_QUERY_STRING_PARAM as ee,isUpdateCompositionMessage as oe}from"@uniformdev/canvas";import{useEffect as w,useMemo as te,useState as ne}from"react";var O="uniform-canvas-preview-script",$e=({apiUrl:e})=>async o=>{let t=await fetch(e,{method:"post",body:JSON.stringify({composition:o.composition,hash:o.hash}),headers:{"Content-Type":"application/json"}}),n=await t.json();if(!t.ok)throw new Error("Error reading enhanced composition");return n.composition},je=({initialCompositionValue:e,enhance:o=t=>t.composition})=>{let[t,n]=ne(e);w(()=>{(e==null?void 0:e._id)!==(t==null?void 0:t._id)&&n(e)},[e,t]);let r=te(()=>{var s;return A()?W({broadcastTo:[(s=window.opener)!=null?s:window.top],listenTo:[window]}):void 0},[]);return w(()=>{if(!r)return;let i=r.on("update-composition",async s=>{if(oe(s)){let p=await o(s);n(p)}});return()=>{i()}},[r,o]),w(()=>{if(!A()||document.getElementById(O))return;let s=document.createElement("script");s.id=O,s.src=re(),s.async=!0,document.head.appendChild(s)},[]),{composition:t}};function re(){return`${window.document.referrer}files/canvas-in-context-embed/index.js`}function A(){if(typeof window=="undefined")return!1;let e=new URLSearchParams(window.location.search).has(ee),o=Boolean(window.document.referrer.match(/(^https:\/\/|\.)(uniform.app|uniform.wtf|localhost:\d{4})\//));return e&&o}export{_ as Composition,ke as DefaultNotImplementedComponent,N as Slot,h as componentStore,me as componentStoreResolver,$e as createApiEnhancer,S as createComponentStore,x as createComponentStoreResolver,ae as registerUniformComponent,E as useComposition,ze as useCompositionEventEffect,je as useContextualEditing};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/canvas-react",
-  "version": "17.5.1-alpha.7+ab97e4ba9",
+  "version": "17.6.0",
   "description": "React SDK for Uniform Canvas",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -23,9 +23,9 @@
     "format": "prettier --write \"src/**/*.{js,ts,tsx}\""
   },
   "dependencies": {
-    "@uniformdev/canvas": "^17.5.1-alpha.7+ab97e4ba9",
-    "@uniformdev/context": "^17.5.1-alpha.7+ab97e4ba9",
-    "@uniformdev/context-react": "^17.5.1-alpha.7+ab97e4ba9"
+    "@uniformdev/canvas": "^17.6.0",
+    "@uniformdev/context": "^17.6.0",
+    "@uniformdev/context-react": "^17.6.0"
   },
   "peerDependencies": {
     "react": ">= 16",
@@ -42,5 +42,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ab97e4ba97e3842e6c7f208c4c96be3f9f74337e"
+  "gitHead": "8346fa3ffe24fa0f81fb0c8b0d12e27806ae321b"
 }