@uniformdev/canvas-react 17.4.1-alpha.37 → 17.5.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { ComponentInstance, SubscribeToCompositionOptions, UpdateCompositionMessage, RootComponentInstance } from '@uniformdev/canvas';
-import { Key, ReactNode } from 'react';
+import React$1, { Key, ReactNode } from 'react';
 
 /**
  * Props passed to a Canvas component implementation.
@@ -78,9 +78,15 @@ declare type SlotProps<TSlotNames extends string> = {
     resolveRenderer?: RenderComponentResolver;
     /** Optional render props enables wrapping all child components in the slot with some markup */
     children?: CustomSlotChildRenderFunc;
+    /**
+     * 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?: React$1.ReactNode;
 };
 /** Renders a named Slot within a Composition. */
-declare function Slot<TSlotNames extends string = string>({ name, resolveRenderer, children, }: SlotProps<TSlotNames>): JSX.Element | null;
+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.

package/dist/index.esm.js

@@ -1 +1 @@
-import{Track as z,TrackFragment as B,useUniformContext as F}from"@uniformdev/context-react";import{CANVAS_ENRICHMENT_TAG_PARAM as J}from"@uniformdev/canvas";import h,{createContext as L,useContext as X}from"react";function y(e){var n;let o=(n=e.parameters)!=null?n:{};return{...Object.keys(o).reduce((s,i)=>(s[i]=o[i].value,s),{}),...e.data,component:e}}var P=()=>{let e=new Map;return{register:({type:o,component:t})=>{e.set(o,t)},get:o=>e.get(o)}},E=e=>o=>e.store.get(o.type)||e.defaultComponent||null;var C=P(),se=({type:e,component:o})=>{Array.isArray(e)?e.forEach(t=>{C.register({type:t,component:o})}):C.register({type:e,component:o})},ie=E({store:C});import u from"react";import{CANVAS_PERSONALIZE_TYPE as M,CANVAS_TEST_TYPE as D}from"@uniformdev/canvas";import{Personalize as _,Test as O}from"@uniformdev/context-react";import{mapSlotToPersonalizedVariations as U,mapSlotToTestVariations as V}from"@uniformdev/canvas";import*as v from"react";var S={test:(e,o,t)=>{var m,l,d,c,a;let n=e,s=(l=(m=n.slots)==null?void 0:m.test)!=null?l:[],i=(a=(c=(d=n.parameters)==null?void 0:d.test)==null?void 0:c.value)!=null?a:"Untitled Test",r=V(s);return v.createElement(O,{key:o,variations:r,name:i,component:p=>t(p,o)})},personalization:(e,o,t)=>{var i,r,m,l,d,c,a;let n=e,s=U((i=n==null?void 0:n.slots)==null?void 0:i.pz);return v.createElement(_,{key:o,variations:s,count:Number((l=(m=(r=n.parameters)==null?void 0:r.count)==null?void 0:m.value)!=null?l:1),name:(a=(c=(d=n.parameters)==null?void 0:d.trackingEventName)==null?void 0:c.value)!=null?a:"Untitled Personalization",component:p=>t(p,0)})}};function x({name:e,resolveRenderer:o,children:t}){var c;let n=g();if(!(n!=null&&n.composition))throw new Error("Slot must be rendered within a Composition");let{composition:s,resolveRenderer:i}=n;if(!s)throw new Error("Cannot use Slot without a Composition wrapper.");let r=(c=s.slots)==null?void 0:c[e];if(!r||!Array.isArray(r))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:`,s),null;let m=o!=null?o:i,l=S,d=r.map((a,p)=>{let T=R({component:a,resolveRenderer:m,resolveSystem:l,key:`inner-${p}`,indexInSlot:p,slotName:e,slotChildrenCount:r.length}),A=t?t({child:T,component:a,key:`wrapped-inner-${p}`}):T;return u.createElement(u.Fragment,{key:p},A)});return u.createElement(u.Fragment,void 0,d)}function R({component:e,resolveRenderer:o,resolveSystem:t,key:n=0,indexInSlot:s,slotName:i,slotChildrenCount:r}){var l,d,c;let m=o==null?void 0:o(e);if(e.type===D)return t.test(e,n,(a,p)=>R({component:a,resolveRenderer:o,resolveSystem:t,key:p}));if(e.type===M)return t.personalization(e,n,(a,p)=>R({component:a,resolveRenderer:o,resolveSystem:t,key:p}));if(m){let a=y(e),p=Boolean(e._id);return u.createElement(b,{key:n,data:e,resolveRenderer:o},p?u.createElement("script",{key:n,"data-role":"component-start","data-component-id":e._id,"data-slot-name":i!=null?i:"","data-component-index":s!=null?s:"","data-total-components":r!=null?r:"","data-component-name":e.type,"data-component-title":(c=(d=(l=e.parameters)==null?void 0:l.title)==null?void 0:d.value)!=null?c:""}):null,u.createElement(m,{...a}),p?u.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 N=L(void 0);function g(){return X(N)}var $=e=>C.get(e.type)||null;function b({data:e,resolveRenderer:o,children:t,behaviorTracking:n}){var c,a,p;let s=g(),i=F({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 r={composition:e,resolveRenderer:o||(s==null?void 0:s.resolveRenderer)||$,behaviorTracking:(c=n!=null?n:s==null?void 0:s.behaviorTracking)!=null?c:"onView"},m=(p=(a=e.parameters)==null?void 0:a[J])==null?void 0:p.value,l=r.behaviorTracking==="onLoad"?B:z,d=j({children:t,data:e,hasParentLayout:Boolean(s)});return h.createElement(N.Provider,{value:r},i?h.createElement(l,{behavior:m},d):d)}function j({children:e,data:o,hasParentLayout:t}){let n=e;if(!n&&!t){let i=C.get(o.type);i?n=h.createElement(i,y(o)):n=Object.keys(o.slots||{}).map(r=>h.createElement(x,{key:r,name:r}))}return typeof n=="function"?n(y(o)):n}import f from"react";function ke(e){var t;let o=(t=e.component)==null?void 0:t.type;return o?f.createElement("div",{style:{borderLeft:"10px solid #e42535!important",padding:"0.01em 16px 16px",borderRadius:"16px",backgroundColor:"rgba(122, 215, 218, 0.3)",color:"#1d3557"}},f.createElement("h2",null,"Component: ",o),f.createElement("p",null,f.createElement("strong",null,o)," has no React implementation. It may need to be added to your"," ",f.createElement("code",null,"resolveRenderer()")," function."),f.createElement("details",null,f.createElement("summary",null,"Props"),f.createElement("pre",null,JSON.stringify(e,null,2)))):null}import{CANVAS_DRAFT_STATE as K,createEventBus as Y,subscribeToComposition as G}from"@uniformdev/canvas";import{useEffect as H}from"react";function Ve({enabled:e,projectId:o,compositionId:t,effect:n}){H(()=>{if(!e||!t||!o)return;let s;return(async()=>{let r=await Y();r&&(s=G({eventBus:r,compositionId:t,compositionState:K,projectId:o,callback:n,event:"updated"}))})(),()=>{s&&s()}},[t,e,o,n])}import{createCanvasChannel as Q,isUpdateCompositionMessage as Z,IN_CONTEXT_EDITOR_QUERY_STRING_PARAM as q}from"@uniformdev/canvas";import{useEffect as w,useMemo as W,useState as ee}from"react";var I="uniform-canvas-preview-script",Je=({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},Le=({composition:e,enhance:o=t=>t.composition})=>{let[t,n]=ee(e);w(()=>{(e==null?void 0:e._id)!==(t==null?void 0:t._id)&&n(e)},[e,t]);let s=W(()=>{var r;return k()?Q({broadcastTo:[(r=window.opener)!=null?r:window.top],listenTo:[window]}):void 0},[]);return w(()=>{if(!s)return;let i=s.on("update-composition",async r=>{if(Z(r)){let m=await o(r);n(m)}});return()=>{i()}},[s,o]),w(()=>{if(!k()||document.getElementById(I))return;let r=document.createElement("script");r.id=I,r.src=oe(),r.async=!0,document.head.appendChild(r)},[]),{composition:t}};function oe(){return`${window.document.referrer}files/canvas-in-context-embed/index.js`}function k(){if(typeof window=="undefined")return!1;let e=new URLSearchParams(window.location.search).has(q),o=Boolean(window.document.referrer.match(/(^https:\/\/|\.)(uniform.app|uniform.wtf|localhost:\d{4})\//));return e&&o}export{b as Composition,ke as DefaultNotImplementedComponent,x as Slot,C as componentStore,ie as componentStoreResolver,Je as createApiEnhancer,P as createComponentStore,E as createComponentStoreResolver,se as registerUniformComponent,g as useComposition,Ve as useCompositionEventEffect,Le as useCompositionInstance};
+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};

package/dist/index.js

@@ -1 +1 @@
-"use strict";var X=Object.create;var T=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var G=(e,o)=>{for(var n in o)T(e,n,{get:o[n],enumerable:!0})},V=(e,o,n,t)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of j(o))!Y.call(e,r)&&r!==n&&T(e,r,{get:()=>o[r],enumerable:!(t=$(o,r))||t.enumerable});return e};var P=(e,o,n)=>(n=e!=null?X(K(e)):{},V(o||!e||!e.__esModule?T(n,"default",{value:e,enumerable:!0}):n,e)),H=e=>V(T({},"__esModule",{value:!0}),e);var se={};G(se,{Composition:()=>O,DefaultNotImplementedComponent:()=>ee,Slot:()=>_,componentStore:()=>h,componentStoreResolver:()=>Z,createApiEnhancer:()=>ne,createComponentStore:()=>N,createComponentStoreResolver:()=>I,registerUniformComponent:()=>Q,useComposition:()=>b,useCompositionEventEffect:()=>oe,useCompositionInstance:()=>te});module.exports=H(se);var v=require("@uniformdev/context-react"),D=require("@uniformdev/canvas"),f=P(require("react"));function w(e){var t;let o=(t=e.parameters)!=null?t:{};return{...Object.keys(o).reduce((r,i)=>(r[i]=o[i].value,r),{}),...e.data,component:e}}var N=()=>{let e=new Map;return{register:({type:o,component:n})=>{e.set(o,n)},get:o=>e.get(o)}},I=e=>o=>e.store.get(o.type)||e.defaultComponent||null;var h=N(),Q=({type:e,component:o})=>{Array.isArray(e)?e.forEach(n=>{h.register({type:n,component:o})}):h.register({type:e,component:o})},Z=I({store:h});var u=P(require("react"));var x=require("@uniformdev/canvas");var E=require("@uniformdev/context-react"),S=require("@uniformdev/canvas"),k=P(require("react")),M={test:(e,o,n)=>{var m,l,d,c,a;let t=e,r=(l=(m=t.slots)==null?void 0:m.test)!=null?l:[],i=(a=(c=(d=t.parameters)==null?void 0:d.test)==null?void 0:c.value)!=null?a:"Untitled Test",s=(0,S.mapSlotToTestVariations)(r);return k.createElement(E.Test,{key:o,variations:s,name:i,component:p=>n(p,o)})},personalization:(e,o,n)=>{var i,s,m,l,d,c,a;let t=e,r=(0,S.mapSlotToPersonalizedVariations)((i=t==null?void 0:t.slots)==null?void 0:i.pz);return k.createElement(E.Personalize,{key:o,variations:r,count:Number((l=(m=(s=t.parameters)==null?void 0:s.count)==null?void 0:m.value)!=null?l:1),name:(a=(c=(d=t.parameters)==null?void 0:d.trackingEventName)==null?void 0:c.value)!=null?a:"Untitled Personalization",component:p=>n(p,0)})}};function _({name:e,resolveRenderer:o,children:n}){var c;let t=b();if(!(t!=null&&t.composition))throw new Error("Slot must be rendered within a Composition");let{composition:r,resolveRenderer:i}=t;if(!r)throw new Error("Cannot use Slot without a Composition wrapper.");let s=(c=r.slots)==null?void 0:c[e];if(!s||!Array.isArray(s))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:`,r),null;let m=o!=null?o:i,l=M,d=s.map((a,p)=>{let U=A({component:a,resolveRenderer:m,resolveSystem:l,key:`inner-${p}`,indexInSlot:p,slotName:e,slotChildrenCount:s.length}),L=n?n({child:U,component:a,key:`wrapped-inner-${p}`}):U;return u.default.createElement(u.default.Fragment,{key:p},L)});return u.default.createElement(u.default.Fragment,void 0,d)}function A({component:e,resolveRenderer:o,resolveSystem:n,key:t=0,indexInSlot:r,slotName:i,slotChildrenCount:s}){var l,d,c;let m=o==null?void 0:o(e);if(e.type===x.CANVAS_TEST_TYPE)return n.test(e,t,(a,p)=>A({component:a,resolveRenderer:o,resolveSystem:n,key:p}));if(e.type===x.CANVAS_PERSONALIZE_TYPE)return n.personalization(e,t,(a,p)=>A({component:a,resolveRenderer:o,resolveSystem:n,key:p}));if(m){let a=w(e),p=Boolean(e._id);return u.default.createElement(O,{key:t,data:e,resolveRenderer:o},p?u.default.createElement("script",{key:t,"data-role":"component-start","data-component-id":e._id,"data-slot-name":i!=null?i:"","data-component-index":r!=null?r:"","data-total-components":s!=null?s:"","data-component-name":e.type,"data-component-title":(c=(d=(l=e.parameters)==null?void 0:l.title)==null?void 0:d.value)!=null?c:""}):null,u.default.createElement(m,{...a}),p?u.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 z=(0,f.createContext)(void 0);function b(){return(0,f.useContext)(z)}var q=e=>h.get(e.type)||null;function O({data:e,resolveRenderer:o,children:n,behaviorTracking:t}){var c,a,p;let r=b(),i=(0,v.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)||q,behaviorTracking:(c=t!=null?t:r==null?void 0:r.behaviorTracking)!=null?c:"onView"},m=(p=(a=e.parameters)==null?void 0:a[D.CANVAS_ENRICHMENT_TAG_PARAM])==null?void 0:p.value,l=s.behaviorTracking==="onLoad"?v.TrackFragment:v.Track,d=W({children:n,data:e,hasParentLayout:Boolean(r)});return f.default.createElement(z.Provider,{value:s},i?f.default.createElement(l,{behavior:m},d):d)}function W({children:e,data:o,hasParentLayout:n}){let t=e;if(!t&&!n){let i=h.get(o.type);i?t=f.default.createElement(i,w(o)):t=Object.keys(o.slots||{}).map(s=>f.default.createElement(_,{key:s,name:s}))}return typeof t=="function"?t(w(o)):t}var C=P(require("react"));function ee(e){var n;let o=(n=e.component)==null?void 0:n.type;return o?C.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"}},C.default.createElement("h2",null,"Component: ",o),C.default.createElement("p",null,C.default.createElement("strong",null,o)," has no React implementation. It may need to be added to your"," ",C.default.createElement("code",null,"resolveRenderer()")," function."),C.default.createElement("details",null,C.default.createElement("summary",null,"Props"),C.default.createElement("pre",null,JSON.stringify(e,null,2)))):null}var R=require("@uniformdev/canvas"),B=require("react");function oe({enabled:e,projectId:o,compositionId:n,effect:t}){(0,B.useEffect)(()=>{if(!e||!n||!o)return;let r;return(async()=>{let s=await(0,R.createEventBus)();s&&(r=(0,R.subscribeToComposition)({eventBus:s,compositionId:n,compositionState:R.CANVAS_DRAFT_STATE,projectId:o,callback:t,event:"updated"}))})(),()=>{r&&r()}},[n,e,o,t])}var g=require("@uniformdev/canvas"),y=require("react"),F="uniform-canvas-preview-script",ne=({apiUrl:e})=>async o=>{let n=await fetch(e,{method:"post",body:JSON.stringify({composition:o.composition,hash:o.hash}),headers:{"Content-Type":"application/json"}}),t=await n.json();if(!n.ok)throw new Error("Error reading enhanced composition");return t.composition},te=({composition:e,enhance:o=n=>n.composition})=>{let[n,t]=(0,y.useState)(e);(0,y.useEffect)(()=>{(e==null?void 0:e._id)!==(n==null?void 0:n._id)&&t(e)},[e,n]);let r=(0,y.useMemo)(()=>{var s;return J()?(0,g.createCanvasChannel)({broadcastTo:[(s=window.opener)!=null?s:window.top],listenTo:[window]}):void 0},[]);return(0,y.useEffect)(()=>{if(!r)return;let i=r.on("update-composition",async s=>{if((0,g.isUpdateCompositionMessage)(s)){let m=await o(s);t(m)}});return()=>{i()}},[r,o]),(0,y.useEffect)(()=>{if(!J()||document.getElementById(F))return;let s=document.createElement("script");s.id=F,s.src=re(),s.async=!0,document.head.appendChild(s)},[]),{composition:n}};function re(){return`${window.document.referrer}files/canvas-in-context-embed/index.js`}function J(){if(typeof window=="undefined")return!1;let e=new URLSearchParams(window.location.search).has(g.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})},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});

package/dist/index.mjs

@@ -1 +1 @@
-import{Track as z,TrackFragment as B,useUniformContext as F}from"@uniformdev/context-react";import{CANVAS_ENRICHMENT_TAG_PARAM as J}from"@uniformdev/canvas";import h,{createContext as L,useContext as X}from"react";function y(e){var n;let o=(n=e.parameters)!=null?n:{};return{...Object.keys(o).reduce((s,i)=>(s[i]=o[i].value,s),{}),...e.data,component:e}}var P=()=>{let e=new Map;return{register:({type:o,component:t})=>{e.set(o,t)},get:o=>e.get(o)}},E=e=>o=>e.store.get(o.type)||e.defaultComponent||null;var C=P(),se=({type:e,component:o})=>{Array.isArray(e)?e.forEach(t=>{C.register({type:t,component:o})}):C.register({type:e,component:o})},ie=E({store:C});import u from"react";import{CANVAS_PERSONALIZE_TYPE as M,CANVAS_TEST_TYPE as D}from"@uniformdev/canvas";import{Personalize as _,Test as O}from"@uniformdev/context-react";import{mapSlotToPersonalizedVariations as U,mapSlotToTestVariations as V}from"@uniformdev/canvas";import*as v from"react";var S={test:(e,o,t)=>{var m,l,d,c,a;let n=e,s=(l=(m=n.slots)==null?void 0:m.test)!=null?l:[],i=(a=(c=(d=n.parameters)==null?void 0:d.test)==null?void 0:c.value)!=null?a:"Untitled Test",r=V(s);return v.createElement(O,{key:o,variations:r,name:i,component:p=>t(p,o)})},personalization:(e,o,t)=>{var i,r,m,l,d,c,a;let n=e,s=U((i=n==null?void 0:n.slots)==null?void 0:i.pz);return v.createElement(_,{key:o,variations:s,count:Number((l=(m=(r=n.parameters)==null?void 0:r.count)==null?void 0:m.value)!=null?l:1),name:(a=(c=(d=n.parameters)==null?void 0:d.trackingEventName)==null?void 0:c.value)!=null?a:"Untitled Personalization",component:p=>t(p,0)})}};function x({name:e,resolveRenderer:o,children:t}){var c;let n=g();if(!(n!=null&&n.composition))throw new Error("Slot must be rendered within a Composition");let{composition:s,resolveRenderer:i}=n;if(!s)throw new Error("Cannot use Slot without a Composition wrapper.");let r=(c=s.slots)==null?void 0:c[e];if(!r||!Array.isArray(r))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:`,s),null;let m=o!=null?o:i,l=S,d=r.map((a,p)=>{let T=R({component:a,resolveRenderer:m,resolveSystem:l,key:`inner-${p}`,indexInSlot:p,slotName:e,slotChildrenCount:r.length}),A=t?t({child:T,component:a,key:`wrapped-inner-${p}`}):T;return u.createElement(u.Fragment,{key:p},A)});return u.createElement(u.Fragment,void 0,d)}function R({component:e,resolveRenderer:o,resolveSystem:t,key:n=0,indexInSlot:s,slotName:i,slotChildrenCount:r}){var l,d,c;let m=o==null?void 0:o(e);if(e.type===D)return t.test(e,n,(a,p)=>R({component:a,resolveRenderer:o,resolveSystem:t,key:p}));if(e.type===M)return t.personalization(e,n,(a,p)=>R({component:a,resolveRenderer:o,resolveSystem:t,key:p}));if(m){let a=y(e),p=Boolean(e._id);return u.createElement(b,{key:n,data:e,resolveRenderer:o},p?u.createElement("script",{key:n,"data-role":"component-start","data-component-id":e._id,"data-slot-name":i!=null?i:"","data-component-index":s!=null?s:"","data-total-components":r!=null?r:"","data-component-name":e.type,"data-component-title":(c=(d=(l=e.parameters)==null?void 0:l.title)==null?void 0:d.value)!=null?c:""}):null,u.createElement(m,{...a}),p?u.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 N=L(void 0);function g(){return X(N)}var $=e=>C.get(e.type)||null;function b({data:e,resolveRenderer:o,children:t,behaviorTracking:n}){var c,a,p;let s=g(),i=F({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 r={composition:e,resolveRenderer:o||(s==null?void 0:s.resolveRenderer)||$,behaviorTracking:(c=n!=null?n:s==null?void 0:s.behaviorTracking)!=null?c:"onView"},m=(p=(a=e.parameters)==null?void 0:a[J])==null?void 0:p.value,l=r.behaviorTracking==="onLoad"?B:z,d=j({children:t,data:e,hasParentLayout:Boolean(s)});return h.createElement(N.Provider,{value:r},i?h.createElement(l,{behavior:m},d):d)}function j({children:e,data:o,hasParentLayout:t}){let n=e;if(!n&&!t){let i=C.get(o.type);i?n=h.createElement(i,y(o)):n=Object.keys(o.slots||{}).map(r=>h.createElement(x,{key:r,name:r}))}return typeof n=="function"?n(y(o)):n}import f from"react";function ke(e){var t;let o=(t=e.component)==null?void 0:t.type;return o?f.createElement("div",{style:{borderLeft:"10px solid #e42535!important",padding:"0.01em 16px 16px",borderRadius:"16px",backgroundColor:"rgba(122, 215, 218, 0.3)",color:"#1d3557"}},f.createElement("h2",null,"Component: ",o),f.createElement("p",null,f.createElement("strong",null,o)," has no React implementation. It may need to be added to your"," ",f.createElement("code",null,"resolveRenderer()")," function."),f.createElement("details",null,f.createElement("summary",null,"Props"),f.createElement("pre",null,JSON.stringify(e,null,2)))):null}import{CANVAS_DRAFT_STATE as K,createEventBus as Y,subscribeToComposition as G}from"@uniformdev/canvas";import{useEffect as H}from"react";function Ve({enabled:e,projectId:o,compositionId:t,effect:n}){H(()=>{if(!e||!t||!o)return;let s;return(async()=>{let r=await Y();r&&(s=G({eventBus:r,compositionId:t,compositionState:K,projectId:o,callback:n,event:"updated"}))})(),()=>{s&&s()}},[t,e,o,n])}import{createCanvasChannel as Q,isUpdateCompositionMessage as Z,IN_CONTEXT_EDITOR_QUERY_STRING_PARAM as q}from"@uniformdev/canvas";import{useEffect as w,useMemo as W,useState as ee}from"react";var I="uniform-canvas-preview-script",Je=({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},Le=({composition:e,enhance:o=t=>t.composition})=>{let[t,n]=ee(e);w(()=>{(e==null?void 0:e._id)!==(t==null?void 0:t._id)&&n(e)},[e,t]);let s=W(()=>{var r;return k()?Q({broadcastTo:[(r=window.opener)!=null?r:window.top],listenTo:[window]}):void 0},[]);return w(()=>{if(!s)return;let i=s.on("update-composition",async r=>{if(Z(r)){let m=await o(r);n(m)}});return()=>{i()}},[s,o]),w(()=>{if(!k()||document.getElementById(I))return;let r=document.createElement("script");r.id=I,r.src=oe(),r.async=!0,document.head.appendChild(r)},[]),{composition:t}};function oe(){return`${window.document.referrer}files/canvas-in-context-embed/index.js`}function k(){if(typeof window=="undefined")return!1;let e=new URLSearchParams(window.location.search).has(q),o=Boolean(window.document.referrer.match(/(^https:\/\/|\.)(uniform.app|uniform.wtf|localhost:\d{4})\//));return e&&o}export{b as Composition,ke as DefaultNotImplementedComponent,x as Slot,C as componentStore,ie as componentStoreResolver,Je as createApiEnhancer,P as createComponentStore,E as createComponentStoreResolver,se as registerUniformComponent,g as useComposition,Ve as useCompositionEventEffect,Le as useCompositionInstance};
+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};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/canvas-react",
-  "version": "17.4.1-alpha.37+64ffa66b1",
+  "version": "17.5.0",
   "description": "React SDK for Uniform Canvas",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -23,16 +23,16 @@
     "format": "prettier --write \"src/**/*.{js,ts,tsx}\""
   },
   "dependencies": {
-    "@uniformdev/canvas": "^17.4.1-alpha.37+64ffa66b1",
-    "@uniformdev/context": "^17.4.1-alpha.37+64ffa66b1",
-    "@uniformdev/context-react": "^17.4.1-alpha.37+64ffa66b1"
+    "@uniformdev/canvas": "^17.5.0",
+    "@uniformdev/context": "^17.5.0",
+    "@uniformdev/context-react": "^17.5.0"
   },
   "peerDependencies": {
     "react": ">= 16",
     "react-dom": ">=16"
   },
   "devDependencies": {
-    "@types/react": "18.0.23",
+    "@types/react": "18.0.25",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
@@ -42,5 +42,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "64ffa66b143c02fe53de41c020866b72873a4457"
+  "gitHead": "de1f52defe798010336e1dd3b2732fce359855fb"
 }