@uniformdev/canvas-react 14.2.1-alpha.34 → 15.0.0

package/dist/index.d.ts

@@ -29,20 +29,32 @@ declare type CompositionProps<TRenderProps = unknown> = {
     resolveRenderer?: RenderComponentResolver;
     /** Either markup to render the composition directly, or render props to provide the ComponentProps for the root component */
     children: ReactNode | ((props: ComponentProps<TRenderProps>) => JSX.Element);
+    /**
+     * When to track behavior from enrichment tags on this composition
+     * onView: adds enrichment score when the visitor views the tagged component in the browser viewport.
+     * onLoad: adds enrichment score as soon as the composition mounts, regardless of viewport.
+     *
+     * NOTE: onView renders a <div> tag around components that have enrichment tags, to support IntersectionObserver.
+     * onLoad does not need to do this, and renders no wrapping tag.
+     *
+     * Default: onView
+     */
+    behaviorTracking?: 'onLoad' | 'onView';
 };
 declare type CompositionContext = {
     /** The parent composition */
     composition: ComponentInstance;
     /** The current function to translate component data into React components */
-    resolveRenderer: RenderComponentResolver;
+    resolveRenderer?: RenderComponentResolver;
+    behaviorTracking: 'onLoad' | 'onView';
 };
 /**
  * Gets the parent Canvas composition of the current component.
  * Note: this gets the direct parent, not necessarily the root of the composition.
  */
-declare function useComposition(): CompositionContext;
+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, }: CompositionProps<TRenderProps>): JSX.Element | null;
+declare function Composition<TRenderProps = unknown>({ data, resolveRenderer, children, behaviorTracking, }: CompositionProps<TRenderProps>): JSX.Element | null;
 
 declare type CustomSlotChildRenderFunc = (options: {
     child: ReactNode;

package/dist/index.esm.js

@@ -1 +1 @@
-import{Track as h}from"@uniformdev/context-react";import{CANVAS_ENRICHMENT_TAG_PARAM as g}from"@uniformdev/canvas";import x,{createContext as b,useContext as w}from"react";function y(o){var t;let e=(t=o.parameters)!=null?t:{};return{...Object.keys(e).reduce((s,r)=>(s[r]=e[r].value,s),{}),...o.data,component:o}}var S=b({});function T(){return w(S)}function N({data:o,resolveRenderer:e,children:n}){var i,p;let t=T();if(!o)return process.env.NODE_ENV==="development"&&console.warn("[canvas-dev] Composition was rendered with no data, nothing will be output."),null;let s={composition:o,resolveRenderer:e!=null?e:t.resolveRenderer},r=(p=(i=o.parameters)==null?void 0:i[g])==null?void 0:p.value;return x.createElement(S.Provider,{value:s},x.createElement(h,{behavior:r},typeof n=="function"?n(y(o)):n))}import v from"react";import{CANVAS_PERSONALIZE_TYPE as O,CANVAS_TEST_TYPE as V}from"@uniformdev/canvas";import{Personalize as A,Test as k}from"@uniformdev/context-react";import{mapSlotToPersonalizedVariations as _,mapSlotToTestVariations as I}from"@uniformdev/canvas";import*as P from"react";var R={test:(o,e,n)=>{var p,c,m,a;let t=o,s=(c=(p=t.slots)==null?void 0:p.test)!=null?c:[],r=(a=(m=t.parameters.test)==null?void 0:m.value)!=null?a:"Untitled Test",i=I(s);return P.createElement(k,{key:e,variations:i,name:r,component:d=>n(d,e)})},personalization:(o,e,n)=>{var r,i,p,c,m,a,d;let t=o,s=_((r=t==null?void 0:t.slots)==null?void 0:r.pz);return P.createElement(A,{key:e,variations:s,count:Number((c=(p=(i=t.parameters)==null?void 0:i.count)==null?void 0:p.value)!=null?c:1),name:(d=(a=(m=t.parameters)==null?void 0:m.trackingEventName)==null?void 0:a.value)!=null?d:"Untitled Personalization",component:C=>n(C,0)})}};function ro({name:o,resolveRenderer:e,children:n}){var m;let{composition:t,resolveRenderer:s}=T();if(!t)throw new Error("Cannot use Slot without a Composition wrapper.");let r=(m=t.slots)==null?void 0:m[o];if(!r||!Array.isArray(r))return process.env.NODE_ENV==="development"&&console.warn(`[canvas-dev] slot '${o}' 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:`,t),null;let i=e!=null?e:s,p=R,c=r.map((a,d)=>{let C=E({component:a,resolveRenderer:i,resolveSystem:p,key:d});return n?n({child:C,component:a,key:d}):C});return v.createElement(v.Fragment,void 0,c)}function E({component:o,resolveRenderer:e,resolveSystem:n,key:t=0}){let s=e==null?void 0:e(o);if(o.type===V)return n.test(o,t,(r,i)=>E({component:r,resolveRenderer:e,resolveSystem:n,key:i}));if(o.type===O)return n.personalization(o,t,(r,i)=>E({component:r,resolveRenderer:e,resolveSystem:n,key:i}));if(s){let r=y(o);return v.createElement(N,{key:t,data:o,resolveRenderer:e},v.createElement(s,{...r}))}else process.env.NODE_ENV!=="production"&&console.warn(`[canvas] found component of type '${o.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.`,o);return null}import l from"react";function po(o){var n;let e=(n=o.component)==null?void 0:n.type;return e?l.createElement("div",{style:{borderLeft:"10px solid #e42535!important",padding:"0.01em 16px 16px",borderRadius:"16px",backgroundColor:"rgba(122, 215, 218, 0.3)",color:"#1d3557"}},l.createElement("h2",null,"Component: ",e),l.createElement("p",null,l.createElement("strong",null,e)," has no React implementation. It may need to be added to your"," ",l.createElement("code",null,"resolveRenderer()")," function."),l.createElement("details",null,l.createElement("summary",null,"Props"),l.createElement("pre",null,JSON.stringify(o,null,2)))):null}import{CANVAS_DRAFT_STATE as z,createEventBus as D,subscribeToComposition as J}from"@uniformdev/canvas";import{useEffect as F}from"react";function uo({enabled:o,projectId:e,compositionId:n,effect:t}){F(()=>{if(!o||!n||!e)return;let s;return(async()=>{let i=await D();i&&(s=J({eventBus:i,compositionId:n,compositionState:z,projectId:e,callback:t,event:"updated"}))})(),()=>{s&&s()}},[n,o,e,t])}export{N as Composition,po as DefaultNotImplementedComponent,ro as Slot,T as useComposition,uo as useCompositionEventEffect};
+import{Track as g,TrackFragment as w}from"@uniformdev/context-react";import{CANVAS_ENRICHMENT_TAG_PARAM as b}from"@uniformdev/canvas";import x,{createContext as A,useContext as k}from"react";function v(o){var n;let e=(n=o.parameters)!=null?n:{};return{...Object.keys(e).reduce((t,s)=>(t[s]=e[s].value,t),{}),...o.data,component:o}}var h=A(void 0);function T(){return k(h)}function N({data:o,resolveRenderer:e,children:r,behaviorTracking:n}){var m,a,p;let t=T();if(!o)return process.env.NODE_ENV==="development"&&console.warn("[canvas-dev] Composition was rendered with no data, nothing will be output."),null;let s={composition:o,resolveRenderer:e!=null?e:t==null?void 0:t.resolveRenderer,behaviorTracking:(m=n!=null?n:t==null?void 0:t.behaviorTracking)!=null?m:"onView"},i=(p=(a=o.parameters)==null?void 0:a[b])==null?void 0:p.value,l=s.behaviorTracking==="onLoad"?w:g;return x.createElement(h.Provider,{value:s},x.createElement(l,{behavior:i},typeof r=="function"?r(v(o)):r))}import y from"react";import{CANVAS_PERSONALIZE_TYPE as z,CANVAS_TEST_TYPE as D}from"@uniformdev/canvas";import{Personalize as V,Test as _}from"@uniformdev/context-react";import{mapSlotToPersonalizedVariations as I,mapSlotToTestVariations as O}from"@uniformdev/canvas";import*as P from"react";var R={test:(o,e,r)=>{var l,m,a,p;let n=o,t=(m=(l=n.slots)==null?void 0:l.test)!=null?m:[],s=(p=(a=n.parameters.test)==null?void 0:a.value)!=null?p:"Untitled Test",i=O(t);return P.createElement(_,{key:e,variations:i,name:s,component:c=>r(c,e)})},personalization:(o,e,r)=>{var s,i,l,m,a,p,c;let n=o,t=I((s=n==null?void 0:n.slots)==null?void 0:s.pz);return P.createElement(V,{key:e,variations:t,count:Number((m=(l=(i=n.parameters)==null?void 0:i.count)==null?void 0:l.value)!=null?m:1),name:(c=(p=(a=n.parameters)==null?void 0:a.trackingEventName)==null?void 0:p.value)!=null?c:"Untitled Personalization",component:u=>r(u,0)})}};function io({name:o,resolveRenderer:e,children:r}){var p;let n=T();if(!(n!=null&&n.composition))throw new Error("Slot must be rendered within a Composition");let{composition:t,resolveRenderer:s}=n;if(!t)throw new Error("Cannot use Slot without a Composition wrapper.");let i=(p=t.slots)==null?void 0:p[o];if(!i||!Array.isArray(i))return process.env.NODE_ENV==="development"&&console.warn(`[canvas-dev] slot '${o}' 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:`,t),null;let l=e!=null?e:s,m=R,a=i.map((c,u)=>{let S=E({component:c,resolveRenderer:l,resolveSystem:m,key:u});return r?r({child:S,component:c,key:u}):S});return y.createElement(y.Fragment,void 0,a)}function E({component:o,resolveRenderer:e,resolveSystem:r,key:n=0}){let t=e==null?void 0:e(o);if(o.type===D)return r.test(o,n,(s,i)=>E({component:s,resolveRenderer:e,resolveSystem:r,key:i}));if(o.type===z)return r.personalization(o,n,(s,i)=>E({component:s,resolveRenderer:e,resolveSystem:r,key:i}));if(t){let s=v(o);return y.createElement(N,{key:n,data:o,resolveRenderer:e},y.createElement(t,{...s}))}else process.env.NODE_ENV!=="production"&&console.warn(`[canvas] found component of type '${o.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.`,o);return null}import d from"react";function ao(o){var r;let e=(r=o.component)==null?void 0:r.type;return e?d.createElement("div",{style:{borderLeft:"10px solid #e42535!important",padding:"0.01em 16px 16px",borderRadius:"16px",backgroundColor:"rgba(122, 215, 218, 0.3)",color:"#1d3557"}},d.createElement("h2",null,"Component: ",e),d.createElement("p",null,d.createElement("strong",null,e)," has no React implementation. It may need to be added to your"," ",d.createElement("code",null,"resolveRenderer()")," function."),d.createElement("details",null,d.createElement("summary",null,"Props"),d.createElement("pre",null,JSON.stringify(o,null,2)))):null}import{CANVAS_DRAFT_STATE as F,createEventBus as J,subscribeToComposition as U}from"@uniformdev/canvas";import{useEffect as X}from"react";function uo({enabled:o,projectId:e,compositionId:r,effect:n}){X(()=>{if(!o||!r||!e)return;let t;return(async()=>{let i=await J();i&&(t=U({eventBus:i,compositionId:r,compositionState:F,projectId:e,callback:n,event:"updated"}))})(),()=>{t&&t()}},[r,o,e,n])}export{N as Composition,ao as DefaultNotImplementedComponent,io as Slot,T as useComposition,uo as useCompositionEventEffect};

package/dist/index.js

@@ -1 +1 @@
-var z=Object.create;var T=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var J=Object.getOwnPropertyNames;var F=Object.getPrototypeOf,U=Object.prototype.hasOwnProperty;var w=o=>T(o,"__esModule",{value:!0});var X=(o,e)=>{for(var t in e)T(o,t,{get:e[t],enumerable:!0})},A=(o,e,t,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of J(e))!U.call(o,r)&&(t||r!=="default")&&T(o,r,{get:()=>e[r],enumerable:!(n=D(e,r))||n.enumerable});return o},P=(o,e)=>A(w(T(o!=null?z(F(o)):{},"default",!e&&o&&o.__esModule?{get:()=>o.default,enumerable:!0}:{value:o,enumerable:!0})),o),K=(o=>(e,t)=>o&&o.get(e)||(t=A(w({}),e,1),o&&o.set(e,t),t))(typeof WeakMap!="undefined"?new WeakMap:0);var Y={};X(Y,{Composition:()=>h,DefaultNotImplementedComponent:()=>B,Slot:()=>L,useComposition:()=>x,useCompositionEventEffect:()=>M});var k=require("@uniformdev/context-react"),_=require("@uniformdev/canvas"),u=P(require("react"));function E(o){var n;let e=(n=o.parameters)!=null?n:{};return{...Object.keys(e).reduce((r,s)=>(r[s]=e[s].value,r),{}),...o.data,component:o}}var I=(0,u.createContext)({});function x(){return(0,u.useContext)(I)}function h({data:o,resolveRenderer:e,children:t}){var i,p;let n=x();if(!o)return process.env.NODE_ENV==="development"&&console.warn("[canvas-dev] Composition was rendered with no data, nothing will be output."),null;let r={composition:o,resolveRenderer:e!=null?e:n.resolveRenderer},s=(p=(i=o.parameters)==null?void 0:i[_.CANVAS_ENRICHMENT_TAG_PARAM])==null?void 0:p.value;return u.default.createElement(I.Provider,{value:r},u.default.createElement(k.Track,{behavior:s},typeof t=="function"?t(E(o)):t))}var y=P(require("react"));var R=require("@uniformdev/canvas");var S=require("@uniformdev/context-react"),N=require("@uniformdev/canvas"),g=P(require("react")),O={test:(o,e,t)=>{var p,c,a,l;let n=o,r=(c=(p=n.slots)==null?void 0:p.test)!=null?c:[],s=(l=(a=n.parameters.test)==null?void 0:a.value)!=null?l:"Untitled Test",i=(0,N.mapSlotToTestVariations)(r);return g.createElement(S.Test,{key:e,variations:i,name:s,component:d=>t(d,e)})},personalization:(o,e,t)=>{var s,i,p,c,a,l,d;let n=o,r=(0,N.mapSlotToPersonalizedVariations)((s=n==null?void 0:n.slots)==null?void 0:s.pz);return g.createElement(S.Personalize,{key:e,variations:r,count:Number((c=(p=(i=n.parameters)==null?void 0:i.count)==null?void 0:p.value)!=null?c:1),name:(d=(l=(a=n.parameters)==null?void 0:a.trackingEventName)==null?void 0:l.value)!=null?d:"Untitled Personalization",component:v=>t(v,0)})}};function L({name:o,resolveRenderer:e,children:t}){var a;let{composition:n,resolveRenderer:r}=x();if(!n)throw new Error("Cannot use Slot without a Composition wrapper.");let s=(a=n.slots)==null?void 0:a[o];if(!s||!Array.isArray(s))return process.env.NODE_ENV==="development"&&console.warn(`[canvas-dev] slot '${o}' 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:`,n),null;let i=e!=null?e:r,p=O,c=s.map((l,d)=>{let v=b({component:l,resolveRenderer:i,resolveSystem:p,key:d});return t?t({child:v,component:l,key:d}):v});return y.default.createElement(y.default.Fragment,void 0,c)}function b({component:o,resolveRenderer:e,resolveSystem:t,key:n=0}){let r=e==null?void 0:e(o);if(o.type===R.CANVAS_TEST_TYPE)return t.test(o,n,(s,i)=>b({component:s,resolveRenderer:e,resolveSystem:t,key:i}));if(o.type===R.CANVAS_PERSONALIZE_TYPE)return t.personalization(o,n,(s,i)=>b({component:s,resolveRenderer:e,resolveSystem:t,key:i}));if(r){let s=E(o);return y.default.createElement(h,{key:n,data:o,resolveRenderer:e},y.default.createElement(r,{...s}))}else process.env.NODE_ENV!=="production"&&console.warn(`[canvas] found component of type '${o.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.`,o);return null}var m=P(require("react"));function B(o){var t;let e=(t=o.component)==null?void 0:t.type;return e?m.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"}},m.default.createElement("h2",null,"Component: ",e),m.default.createElement("p",null,m.default.createElement("strong",null,e)," has no React implementation. It may need to be added to your"," ",m.default.createElement("code",null,"resolveRenderer()")," function."),m.default.createElement("details",null,m.default.createElement("summary",null,"Props"),m.default.createElement("pre",null,JSON.stringify(o,null,2)))):null}var C=require("@uniformdev/canvas"),V=require("react");function M({enabled:o,projectId:e,compositionId:t,effect:n}){(0,V.useEffect)(()=>{if(!o||!t||!e)return;let r;return(async()=>{let i=await(0,C.createEventBus)();i&&(r=(0,C.subscribeToComposition)({eventBus:i,compositionId:t,compositionState:C.CANVAS_DRAFT_STATE,projectId:e,callback:n,event:"updated"}))})(),()=>{r&&r()}},[t,o,e,n])}module.exports=K(Y);0&&(module.exports={Composition,DefaultNotImplementedComponent,Slot,useComposition,useCompositionEventEffect});
+var D=Object.create;var T=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var J=Object.getOwnPropertyNames;var U=Object.getPrototypeOf,X=Object.prototype.hasOwnProperty;var k=o=>T(o,"__esModule",{value:!0});var K=(o,e)=>{for(var n in e)T(o,n,{get:e[n],enumerable:!0})},V=(o,e,n,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of J(e))!X.call(o,r)&&(n||r!=="default")&&T(o,r,{get:()=>e[r],enumerable:!(t=F(e,r))||t.enumerable});return o},P=(o,e)=>V(k(T(o!=null?D(U(o)):{},"default",!e&&o&&o.__esModule?{get:()=>o.default,enumerable:!0}:{value:o,enumerable:!0})),o),B=(o=>(e,n)=>o&&o.get(e)||(n=V(k({}),e,1),o&&o.set(e,n),n))(typeof WeakMap!="undefined"?new WeakMap:0);var $={};K($,{Composition:()=>g,DefaultNotImplementedComponent:()=>M,Slot:()=>L,useComposition:()=>x,useCompositionEventEffect:()=>Y});var S=require("@uniformdev/context-react"),_=require("@uniformdev/canvas"),f=P(require("react"));function E(o){var t;let e=(t=o.parameters)!=null?t:{};return{...Object.keys(e).reduce((r,s)=>(r[s]=e[s].value,r),{}),...o.data,component:o}}var I=(0,f.createContext)(void 0);function x(){return(0,f.useContext)(I)}function g({data:o,resolveRenderer:e,children:n,behaviorTracking:t}){var m,a,p;let r=x();if(!o)return process.env.NODE_ENV==="development"&&console.warn("[canvas-dev] Composition was rendered with no data, nothing will be output."),null;let s={composition:o,resolveRenderer:e!=null?e:r==null?void 0:r.resolveRenderer,behaviorTracking:(m=t!=null?t:r==null?void 0:r.behaviorTracking)!=null?m:"onView"},i=(p=(a=o.parameters)==null?void 0:a[_.CANVAS_ENRICHMENT_TAG_PARAM])==null?void 0:p.value,l=s.behaviorTracking==="onLoad"?S.TrackFragment:S.Track;return f.default.createElement(I.Provider,{value:s},f.default.createElement(l,{behavior:i},typeof n=="function"?n(E(o)):n))}var v=P(require("react"));var R=require("@uniformdev/canvas");var h=require("@uniformdev/context-react"),N=require("@uniformdev/canvas"),w=P(require("react")),O={test:(o,e,n)=>{var l,m,a,p;let t=o,r=(m=(l=t.slots)==null?void 0:l.test)!=null?m:[],s=(p=(a=t.parameters.test)==null?void 0:a.value)!=null?p:"Untitled Test",i=(0,N.mapSlotToTestVariations)(r);return w.createElement(h.Test,{key:e,variations:i,name:s,component:c=>n(c,e)})},personalization:(o,e,n)=>{var s,i,l,m,a,p,c;let t=o,r=(0,N.mapSlotToPersonalizedVariations)((s=t==null?void 0:t.slots)==null?void 0:s.pz);return w.createElement(h.Personalize,{key:e,variations:r,count:Number((m=(l=(i=t.parameters)==null?void 0:i.count)==null?void 0:l.value)!=null?m:1),name:(c=(p=(a=t.parameters)==null?void 0:a.trackingEventName)==null?void 0:p.value)!=null?c:"Untitled Personalization",component:y=>n(y,0)})}};function L({name:o,resolveRenderer:e,children:n}){var p;let t=x();if(!(t!=null&&t.composition))throw new Error("Slot must be rendered within a Composition");let{composition:r,resolveRenderer:s}=t;if(!r)throw new Error("Cannot use Slot without a Composition wrapper.");let i=(p=r.slots)==null?void 0:p[o];if(!i||!Array.isArray(i))return process.env.NODE_ENV==="development"&&console.warn(`[canvas-dev] slot '${o}' 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 l=e!=null?e:s,m=O,a=i.map((c,y)=>{let A=b({component:c,resolveRenderer:l,resolveSystem:m,key:y});return n?n({child:A,component:c,key:y}):A});return v.default.createElement(v.default.Fragment,void 0,a)}function b({component:o,resolveRenderer:e,resolveSystem:n,key:t=0}){let r=e==null?void 0:e(o);if(o.type===R.CANVAS_TEST_TYPE)return n.test(o,t,(s,i)=>b({component:s,resolveRenderer:e,resolveSystem:n,key:i}));if(o.type===R.CANVAS_PERSONALIZE_TYPE)return n.personalization(o,t,(s,i)=>b({component:s,resolveRenderer:e,resolveSystem:n,key:i}));if(r){let s=E(o);return v.default.createElement(g,{key:t,data:o,resolveRenderer:e},v.default.createElement(r,{...s}))}else process.env.NODE_ENV!=="production"&&console.warn(`[canvas] found component of type '${o.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.`,o);return null}var d=P(require("react"));function M(o){var n;let e=(n=o.component)==null?void 0:n.type;return e?d.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"}},d.default.createElement("h2",null,"Component: ",e),d.default.createElement("p",null,d.default.createElement("strong",null,e)," has no React implementation. It may need to be added to your"," ",d.default.createElement("code",null,"resolveRenderer()")," function."),d.default.createElement("details",null,d.default.createElement("summary",null,"Props"),d.default.createElement("pre",null,JSON.stringify(o,null,2)))):null}var u=require("@uniformdev/canvas"),z=require("react");function Y({enabled:o,projectId:e,compositionId:n,effect:t}){(0,z.useEffect)(()=>{if(!o||!n||!e)return;let r;return(async()=>{let i=await(0,u.createEventBus)();i&&(r=(0,u.subscribeToComposition)({eventBus:i,compositionId:n,compositionState:u.CANVAS_DRAFT_STATE,projectId:e,callback:t,event:"updated"}))})(),()=>{r&&r()}},[n,o,e,t])}module.exports=B($);0&&(module.exports={Composition,DefaultNotImplementedComponent,Slot,useComposition,useCompositionEventEffect});

package/dist/index.mjs

@@ -1 +1 @@
-import{Track as h}from"@uniformdev/context-react";import{CANVAS_ENRICHMENT_TAG_PARAM as g}from"@uniformdev/canvas";import x,{createContext as b,useContext as w}from"react";function y(o){var t;let e=(t=o.parameters)!=null?t:{};return{...Object.keys(e).reduce((s,r)=>(s[r]=e[r].value,s),{}),...o.data,component:o}}var S=b({});function T(){return w(S)}function N({data:o,resolveRenderer:e,children:n}){var i,p;let t=T();if(!o)return process.env.NODE_ENV==="development"&&console.warn("[canvas-dev] Composition was rendered with no data, nothing will be output."),null;let s={composition:o,resolveRenderer:e!=null?e:t.resolveRenderer},r=(p=(i=o.parameters)==null?void 0:i[g])==null?void 0:p.value;return x.createElement(S.Provider,{value:s},x.createElement(h,{behavior:r},typeof n=="function"?n(y(o)):n))}import v from"react";import{CANVAS_PERSONALIZE_TYPE as O,CANVAS_TEST_TYPE as V}from"@uniformdev/canvas";import{Personalize as A,Test as k}from"@uniformdev/context-react";import{mapSlotToPersonalizedVariations as _,mapSlotToTestVariations as I}from"@uniformdev/canvas";import*as P from"react";var R={test:(o,e,n)=>{var p,c,m,a;let t=o,s=(c=(p=t.slots)==null?void 0:p.test)!=null?c:[],r=(a=(m=t.parameters.test)==null?void 0:m.value)!=null?a:"Untitled Test",i=I(s);return P.createElement(k,{key:e,variations:i,name:r,component:d=>n(d,e)})},personalization:(o,e,n)=>{var r,i,p,c,m,a,d;let t=o,s=_((r=t==null?void 0:t.slots)==null?void 0:r.pz);return P.createElement(A,{key:e,variations:s,count:Number((c=(p=(i=t.parameters)==null?void 0:i.count)==null?void 0:p.value)!=null?c:1),name:(d=(a=(m=t.parameters)==null?void 0:m.trackingEventName)==null?void 0:a.value)!=null?d:"Untitled Personalization",component:C=>n(C,0)})}};function ro({name:o,resolveRenderer:e,children:n}){var m;let{composition:t,resolveRenderer:s}=T();if(!t)throw new Error("Cannot use Slot without a Composition wrapper.");let r=(m=t.slots)==null?void 0:m[o];if(!r||!Array.isArray(r))return process.env.NODE_ENV==="development"&&console.warn(`[canvas-dev] slot '${o}' 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:`,t),null;let i=e!=null?e:s,p=R,c=r.map((a,d)=>{let C=E({component:a,resolveRenderer:i,resolveSystem:p,key:d});return n?n({child:C,component:a,key:d}):C});return v.createElement(v.Fragment,void 0,c)}function E({component:o,resolveRenderer:e,resolveSystem:n,key:t=0}){let s=e==null?void 0:e(o);if(o.type===V)return n.test(o,t,(r,i)=>E({component:r,resolveRenderer:e,resolveSystem:n,key:i}));if(o.type===O)return n.personalization(o,t,(r,i)=>E({component:r,resolveRenderer:e,resolveSystem:n,key:i}));if(s){let r=y(o);return v.createElement(N,{key:t,data:o,resolveRenderer:e},v.createElement(s,{...r}))}else process.env.NODE_ENV!=="production"&&console.warn(`[canvas] found component of type '${o.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.`,o);return null}import l from"react";function po(o){var n;let e=(n=o.component)==null?void 0:n.type;return e?l.createElement("div",{style:{borderLeft:"10px solid #e42535!important",padding:"0.01em 16px 16px",borderRadius:"16px",backgroundColor:"rgba(122, 215, 218, 0.3)",color:"#1d3557"}},l.createElement("h2",null,"Component: ",e),l.createElement("p",null,l.createElement("strong",null,e)," has no React implementation. It may need to be added to your"," ",l.createElement("code",null,"resolveRenderer()")," function."),l.createElement("details",null,l.createElement("summary",null,"Props"),l.createElement("pre",null,JSON.stringify(o,null,2)))):null}import{CANVAS_DRAFT_STATE as z,createEventBus as D,subscribeToComposition as J}from"@uniformdev/canvas";import{useEffect as F}from"react";function uo({enabled:o,projectId:e,compositionId:n,effect:t}){F(()=>{if(!o||!n||!e)return;let s;return(async()=>{let i=await D();i&&(s=J({eventBus:i,compositionId:n,compositionState:z,projectId:e,callback:t,event:"updated"}))})(),()=>{s&&s()}},[n,o,e,t])}export{N as Composition,po as DefaultNotImplementedComponent,ro as Slot,T as useComposition,uo as useCompositionEventEffect};
+import{Track as g,TrackFragment as w}from"@uniformdev/context-react";import{CANVAS_ENRICHMENT_TAG_PARAM as b}from"@uniformdev/canvas";import x,{createContext as A,useContext as k}from"react";function v(o){var n;let e=(n=o.parameters)!=null?n:{};return{...Object.keys(e).reduce((t,s)=>(t[s]=e[s].value,t),{}),...o.data,component:o}}var h=A(void 0);function T(){return k(h)}function N({data:o,resolveRenderer:e,children:r,behaviorTracking:n}){var m,a,p;let t=T();if(!o)return process.env.NODE_ENV==="development"&&console.warn("[canvas-dev] Composition was rendered with no data, nothing will be output."),null;let s={composition:o,resolveRenderer:e!=null?e:t==null?void 0:t.resolveRenderer,behaviorTracking:(m=n!=null?n:t==null?void 0:t.behaviorTracking)!=null?m:"onView"},i=(p=(a=o.parameters)==null?void 0:a[b])==null?void 0:p.value,l=s.behaviorTracking==="onLoad"?w:g;return x.createElement(h.Provider,{value:s},x.createElement(l,{behavior:i},typeof r=="function"?r(v(o)):r))}import y from"react";import{CANVAS_PERSONALIZE_TYPE as z,CANVAS_TEST_TYPE as D}from"@uniformdev/canvas";import{Personalize as V,Test as _}from"@uniformdev/context-react";import{mapSlotToPersonalizedVariations as I,mapSlotToTestVariations as O}from"@uniformdev/canvas";import*as P from"react";var R={test:(o,e,r)=>{var l,m,a,p;let n=o,t=(m=(l=n.slots)==null?void 0:l.test)!=null?m:[],s=(p=(a=n.parameters.test)==null?void 0:a.value)!=null?p:"Untitled Test",i=O(t);return P.createElement(_,{key:e,variations:i,name:s,component:c=>r(c,e)})},personalization:(o,e,r)=>{var s,i,l,m,a,p,c;let n=o,t=I((s=n==null?void 0:n.slots)==null?void 0:s.pz);return P.createElement(V,{key:e,variations:t,count:Number((m=(l=(i=n.parameters)==null?void 0:i.count)==null?void 0:l.value)!=null?m:1),name:(c=(p=(a=n.parameters)==null?void 0:a.trackingEventName)==null?void 0:p.value)!=null?c:"Untitled Personalization",component:u=>r(u,0)})}};function io({name:o,resolveRenderer:e,children:r}){var p;let n=T();if(!(n!=null&&n.composition))throw new Error("Slot must be rendered within a Composition");let{composition:t,resolveRenderer:s}=n;if(!t)throw new Error("Cannot use Slot without a Composition wrapper.");let i=(p=t.slots)==null?void 0:p[o];if(!i||!Array.isArray(i))return process.env.NODE_ENV==="development"&&console.warn(`[canvas-dev] slot '${o}' 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:`,t),null;let l=e!=null?e:s,m=R,a=i.map((c,u)=>{let S=E({component:c,resolveRenderer:l,resolveSystem:m,key:u});return r?r({child:S,component:c,key:u}):S});return y.createElement(y.Fragment,void 0,a)}function E({component:o,resolveRenderer:e,resolveSystem:r,key:n=0}){let t=e==null?void 0:e(o);if(o.type===D)return r.test(o,n,(s,i)=>E({component:s,resolveRenderer:e,resolveSystem:r,key:i}));if(o.type===z)return r.personalization(o,n,(s,i)=>E({component:s,resolveRenderer:e,resolveSystem:r,key:i}));if(t){let s=v(o);return y.createElement(N,{key:n,data:o,resolveRenderer:e},y.createElement(t,{...s}))}else process.env.NODE_ENV!=="production"&&console.warn(`[canvas] found component of type '${o.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.`,o);return null}import d from"react";function ao(o){var r;let e=(r=o.component)==null?void 0:r.type;return e?d.createElement("div",{style:{borderLeft:"10px solid #e42535!important",padding:"0.01em 16px 16px",borderRadius:"16px",backgroundColor:"rgba(122, 215, 218, 0.3)",color:"#1d3557"}},d.createElement("h2",null,"Component: ",e),d.createElement("p",null,d.createElement("strong",null,e)," has no React implementation. It may need to be added to your"," ",d.createElement("code",null,"resolveRenderer()")," function."),d.createElement("details",null,d.createElement("summary",null,"Props"),d.createElement("pre",null,JSON.stringify(o,null,2)))):null}import{CANVAS_DRAFT_STATE as F,createEventBus as J,subscribeToComposition as U}from"@uniformdev/canvas";import{useEffect as X}from"react";function uo({enabled:o,projectId:e,compositionId:r,effect:n}){X(()=>{if(!o||!r||!e)return;let t;return(async()=>{let i=await J();i&&(t=U({eventBus:i,compositionId:r,compositionState:F,projectId:e,callback:n,event:"updated"}))})(),()=>{t&&t()}},[r,o,e,n])}export{N as Composition,ao as DefaultNotImplementedComponent,io as Slot,T as useComposition,uo as useCompositionEventEffect};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/canvas-react",
-  "version": "14.2.1-alpha.34+baf2e926f",
+  "version": "15.0.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": "^14.2.1-alpha.34+baf2e926f",
-    "@uniformdev/context": "^14.2.1-alpha.34+baf2e926f",
-    "@uniformdev/context-react": "^14.2.1-alpha.34+baf2e926f"
+    "@uniformdev/canvas": "^15.0.0",
+    "@uniformdev/context": "^15.0.0",
+    "@uniformdev/context-react": "^15.0.0"
   },
   "peerDependencies": {
     "react": ">= 16"
@@ -39,5 +39,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "baf2e926f0015c9dd4b67ac99dcc8ee1f553d735"
+  "gitHead": "91416ead97d1c39ff1818adbf6b9505bf713fc39"
 }