@uniformdev/canvas-react 14.2.1-alpha.34 → 16.0.1-alpha.128

package/LICENSE.txt

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/canvas-react",
-  "version": "14.2.1-alpha.34+baf2e926f",
+  "version": "16.0.1-alpha.128+6cdb4ff33",
   "description": "React SDK for Uniform Canvas",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -23,15 +23,18 @@
     "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": "^16.0.1-alpha.128+6cdb4ff33",
+    "@uniformdev/context": "^16.0.1-alpha.128+6cdb4ff33",
+    "@uniformdev/context-react": "^16.0.1-alpha.128+6cdb4ff33"
   },
   "peerDependencies": {
-    "react": ">= 16"
+    "react": ">= 16",
+    "react-dom": ">=16"
   },
   "devDependencies": {
-    "react": "17.0.2"
+    "@types/react": "18.0.12",
+    "react": "18.1.0",
+    "react-dom": "18.1.0"
   },
   "files": [
     "/dist"
@@ -39,5 +42,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "baf2e926f0015c9dd4b67ac99dcc8ee1f553d735"
+  "gitHead": "6cdb4ff331d6d0d9d5c154b7b342e7703067bfc3"
 }