@uniformdev/canvas-react 16.2.4 → 17.1.1-alpha.151

package/dist/index.d.ts

@@ -21,6 +21,13 @@ declare type SystemRenderConfig = {
     test: SystemRenderFunction;
     personalization: SystemRenderFunction;
 };
+declare type ComponentStore = {
+    register: (options: {
+        type: string;
+        component: React.ComponentType<ComponentProps<any>>;
+    }) => void;
+    get: (name: string) => React.ComponentType<ComponentProps<any>> | undefined;
+};
 
 declare type CompositionProps<TRenderProps = unknown> = {
     /** The root component in the composition */
@@ -28,7 +35,7 @@ declare type CompositionProps<TRenderProps = unknown> = {
     /** Resolves a React component to render a Canvas component, generally by inspecting type/variant */
     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);
+    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.
@@ -90,4 +97,17 @@ declare type UseCompositionEventEffectOptions = Omit<Partial<SubscribeToComposit
 /** Hook to manage a subscription to a realtime event on a composition */
 declare function useCompositionEventEffect({ enabled, projectId, compositionId, effect, }: UseCompositionEventEffectOptions): void;
 
-export { ComponentProps, Composition, CompositionContext, CompositionProps, DefaultNotImplementedComponent, RenderComponentResolver, Slot, SlotProps, SystemRenderConfig, SystemRenderFunction, UseCompositionEventEffectOptions, useComposition, useCompositionEventEffect };
+declare const componentStore: ComponentStore;
+declare const registerUniformComponent: ({ type, component, }: {
+    type: string | string[];
+    component: React.ComponentType<ComponentProps<any>>;
+}) => void;
+declare const componentStoreResolver: RenderComponentResolver;
+
+declare const createComponentStore: () => ComponentStore;
+declare const createComponentStoreResolver: (options: {
+    store: ComponentStore;
+    defaultComponent?: React.ComponentType<ComponentProps<any>>;
+}) => RenderComponentResolver;
+
+export { ComponentProps, ComponentStore, Composition, CompositionContext, CompositionProps, DefaultNotImplementedComponent, RenderComponentResolver, Slot, SlotProps, SystemRenderConfig, SystemRenderFunction, UseCompositionEventEffectOptions, componentStore, componentStoreResolver, createComponentStore, createComponentStoreResolver, registerUniformComponent, useComposition, useCompositionEventEffect };

package/dist/index.esm.js

@@ -1 +1 @@
-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};
+import{Track as I,TrackFragment as z,useUniformContext as D}from"@uniformdev/context-react";import{CANVAS_ENRICHMENT_TAG_PARAM as U}from"@uniformdev/canvas";import y,{createContext as F,useContext as J}from"react";function u(e){var n;let o=(n=e.parameters)!=null?n:{};return{...Object.keys(o).reduce((r,s)=>(r[s]=o[s].value,r),{}),...e.data,component:e}}var h=()=>{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 f=h(),Z=({type:e,component:o})=>{Array.isArray(e)?e.forEach(t=>{f.register({type:t,component:o})}):f.register({type:e,component:o})},j=x({store:f});import v from"react";import{CANVAS_PERSONALIZE_TYPE as O,CANVAS_TEST_TYPE as _}from"@uniformdev/canvas";import{Personalize as b,Test as k}from"@uniformdev/context-react";import{mapSlotToPersonalizedVariations as A,mapSlotToTestVariations as V}from"@uniformdev/canvas";import*as P from"react";var g={test:(e,o,t)=>{var l,c,m,i;let n=e,r=(c=(l=n.slots)==null?void 0:l.test)!=null?c:[],s=(i=(m=n.parameters.test)==null?void 0:m.value)!=null?i:"Untitled Test",p=V(r);return P.createElement(k,{key:o,variations:p,name:s,component:a=>t(a,o)})},personalization:(e,o,t)=>{var s,p,l,c,m,i,a;let n=e,r=A((s=n==null?void 0:n.slots)==null?void 0:s.pz);return P.createElement(b,{key:o,variations:r,count:Number((c=(l=(p=n.parameters)==null?void 0:p.count)==null?void 0:l.value)!=null?c:1),name:(a=(i=(m=n.parameters)==null?void 0:m.trackingEventName)==null?void 0:i.value)!=null?a:"Untitled Personalization",component:C=>t(C,0)})}};function E({name:e,resolveRenderer:o,children:t}){var i;let n=T();if(!(n!=null&&n.composition))throw new Error("Slot must be rendered within a Composition");let{composition:r,resolveRenderer:s}=n;if(!r)throw new Error("Cannot use Slot without a Composition wrapper.");let p=(i=r.slots)==null?void 0:i[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:`,r),null;let l=o!=null?o:s,c=g,m=p.map((a,C)=>{let S=R({component:a,resolveRenderer:l,resolveSystem:c,key:C});return t?t({child:S,component:a,key:C}):S});return v.createElement(v.Fragment,void 0,m)}function R({component:e,resolveRenderer:o,resolveSystem:t,key:n=0}){let r=o==null?void 0:o(e);if(e.type===_)return t.test(e,n,(s,p)=>R({component:s,resolveRenderer:o,resolveSystem:t,key:p}));if(e.type===O)return t.personalization(e,n,(s,p)=>R({component:s,resolveRenderer:o,resolveSystem:t,key:p}));if(r){let s=u(e);return v.createElement(w,{key:n,data:e,resolveRenderer:o},v.createElement(r,{...s}))}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=F(void 0);function T(){return J(N)}var L=e=>f.get(e.type)||null;function w({data:e,resolveRenderer:o,children:t,behaviorTracking:n}){var i,a,C;let r=T(),s=D({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 p={composition:e,resolveRenderer:o||(r==null?void 0:r.resolveRenderer)||L,behaviorTracking:(i=n!=null?n:r==null?void 0:r.behaviorTracking)!=null?i:"onView"},l=(C=(a=e.parameters)==null?void 0:a[U])==null?void 0:C.value,c=p.behaviorTracking==="onLoad"?z:I,m=M({children:t,data:e,hasParentLayout:Boolean(r)});return y.createElement(N.Provider,{value:p},s?y.createElement(c,{behavior:l},m):m)}function M({children:e,data:o,hasParentLayout:t}){let n=e;if(!n&&!t){let s=f.get(o.type);s?n=y.createElement(s,u(o)):n=Object.keys(o.slots||{}).map(p=>y.createElement(E,{key:p,name:p}))}return typeof n=="function"?n(u(o)):n}import d from"react";function Te(e){var t;let o=(t=e.component)==null?void 0:t.type;return o?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: ",o),d.createElement("p",null,d.createElement("strong",null,o)," 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(e,null,2)))):null}import{CANVAS_DRAFT_STATE as X,createEventBus as B,subscribeToComposition as K}from"@uniformdev/canvas";import{useEffect as Y}from"react";function Ee({enabled:e,projectId:o,compositionId:t,effect:n}){Y(()=>{if(!e||!t||!o)return;let r;return(async()=>{let p=await B();p&&(r=K({eventBus:p,compositionId:t,compositionState:X,projectId:o,callback:n,event:"updated"}))})(),()=>{r&&r()}},[t,e,o,n])}export{w as Composition,Te as DefaultNotImplementedComponent,E as Slot,f as componentStore,j as componentStoreResolver,h as createComponentStore,x as createComponentStoreResolver,Z as registerUniformComponent,T as useComposition,Ee as useCompositionEventEffect};

package/dist/index.js

@@ -1 +1 @@
-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});
+"use strict";var F=Object.create;var T=Object.defineProperty;var J=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,X=Object.prototype.hasOwnProperty;var B=(e,o)=>{for(var n in o)T(e,n,{get:o[n],enumerable:!0})},_=(e,o,n,t)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of L(o))!X.call(e,r)&&r!==n&&T(e,r,{get:()=>o[r],enumerable:!(t=J(o,r))||t.enumerable});return e};var S=(e,o,n)=>(n=e!=null?F(M(e)):{},_(o||!e||!e.__esModule?T(n,"default",{value:e,enumerable:!0}):n,e)),K=e=>_(T({},"__esModule",{value:!0}),e);var q={};B(q,{Composition:()=>V,DefaultNotImplementedComponent:()=>Z,Slot:()=>A,componentStore:()=>u,componentStoreResolver:()=>$,createComponentStore:()=>w,createComponentStoreResolver:()=>N,registerUniformComponent:()=>Y,useComposition:()=>E,useCompositionEventEffect:()=>j});module.exports=K(q);var v=require("@uniformdev/context-react"),z=require("@uniformdev/canvas"),d=S(require("react"));function P(e){var t;let o=(t=e.parameters)!=null?t:{};return{...Object.keys(o).reduce((r,s)=>(r[s]=o[s].value,r),{}),...e.data,component:e}}var w=()=>{let e=new Map;return{register:({type:o,component:n})=>{e.set(o,n)},get:o=>e.get(o)}},N=e=>o=>e.store.get(o.type)||e.defaultComponent||null;var u=w(),Y=({type:e,component:o})=>{Array.isArray(e)?e.forEach(n=>{u.register({type:n,component:o})}):u.register({type:e,component:o})},$=N({store:u});var R=S(require("react"));var g=require("@uniformdev/canvas");var h=require("@uniformdev/context-react"),x=require("@uniformdev/canvas"),b=S(require("react")),I={test:(e,o,n)=>{var l,c,m,i;let t=e,r=(c=(l=t.slots)==null?void 0:l.test)!=null?c:[],s=(i=(m=t.parameters.test)==null?void 0:m.value)!=null?i:"Untitled Test",p=(0,x.mapSlotToTestVariations)(r);return b.createElement(h.Test,{key:o,variations:p,name:s,component:a=>n(a,o)})},personalization:(e,o,n)=>{var s,p,l,c,m,i,a;let t=e,r=(0,x.mapSlotToPersonalizedVariations)((s=t==null?void 0:t.slots)==null?void 0:s.pz);return b.createElement(h.Personalize,{key:o,variations:r,count:Number((c=(l=(p=t.parameters)==null?void 0:p.count)==null?void 0:l.value)!=null?c:1),name:(a=(i=(m=t.parameters)==null?void 0:m.trackingEventName)==null?void 0:i.value)!=null?a:"Untitled Personalization",component:f=>n(f,0)})}};function A({name:e,resolveRenderer:o,children:n}){var i;let t=E();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 p=(i=r.slots)==null?void 0:i[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:`,r),null;let l=o!=null?o:s,c=I,m=p.map((a,f)=>{let O=k({component:a,resolveRenderer:l,resolveSystem:c,key:f});return n?n({child:O,component:a,key:f}):O});return R.default.createElement(R.default.Fragment,void 0,m)}function k({component:e,resolveRenderer:o,resolveSystem:n,key:t=0}){let r=o==null?void 0:o(e);if(e.type===g.CANVAS_TEST_TYPE)return n.test(e,t,(s,p)=>k({component:s,resolveRenderer:o,resolveSystem:n,key:p}));if(e.type===g.CANVAS_PERSONALIZE_TYPE)return n.personalization(e,t,(s,p)=>k({component:s,resolveRenderer:o,resolveSystem:n,key:p}));if(r){let s=P(e);return R.default.createElement(V,{key:t,data:e,resolveRenderer:o},R.default.createElement(r,{...s}))}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 D=(0,d.createContext)(void 0);function E(){return(0,d.useContext)(D)}var G=e=>u.get(e.type)||null;function V({data:e,resolveRenderer:o,children:n,behaviorTracking:t}){var i,a,f;let r=E(),s=(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 p={composition:e,resolveRenderer:o||(r==null?void 0:r.resolveRenderer)||G,behaviorTracking:(i=t!=null?t:r==null?void 0:r.behaviorTracking)!=null?i:"onView"},l=(f=(a=e.parameters)==null?void 0:a[z.CANVAS_ENRICHMENT_TAG_PARAM])==null?void 0:f.value,c=p.behaviorTracking==="onLoad"?v.TrackFragment:v.Track,m=H({children:n,data:e,hasParentLayout:Boolean(r)});return d.default.createElement(D.Provider,{value:p},s?d.default.createElement(c,{behavior:l},m):m)}function H({children:e,data:o,hasParentLayout:n}){let t=e;if(!t&&!n){let s=u.get(o.type);s?t=d.default.createElement(s,P(o)):t=Object.keys(o.slots||{}).map(p=>d.default.createElement(A,{key:p,name:p}))}return typeof t=="function"?t(P(o)):t}var C=S(require("react"));function Z(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 y=require("@uniformdev/canvas"),U=require("react");function j({enabled:e,projectId:o,compositionId:n,effect:t}){(0,U.useEffect)(()=>{if(!e||!n||!o)return;let r;return(async()=>{let p=await(0,y.createEventBus)();p&&(r=(0,y.subscribeToComposition)({eventBus:p,compositionId:n,compositionState:y.CANVAS_DRAFT_STATE,projectId:o,callback:t,event:"updated"}))})(),()=>{r&&r()}},[n,e,o,t])}0&&(module.exports={Composition,DefaultNotImplementedComponent,Slot,componentStore,componentStoreResolver,createComponentStore,createComponentStoreResolver,registerUniformComponent,useComposition,useCompositionEventEffect});

package/dist/index.mjs

@@ -1 +1 @@
-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};
+import{Track as I,TrackFragment as z,useUniformContext as D}from"@uniformdev/context-react";import{CANVAS_ENRICHMENT_TAG_PARAM as U}from"@uniformdev/canvas";import y,{createContext as F,useContext as J}from"react";function u(e){var n;let o=(n=e.parameters)!=null?n:{};return{...Object.keys(o).reduce((r,s)=>(r[s]=o[s].value,r),{}),...e.data,component:e}}var h=()=>{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 f=h(),Z=({type:e,component:o})=>{Array.isArray(e)?e.forEach(t=>{f.register({type:t,component:o})}):f.register({type:e,component:o})},j=x({store:f});import v from"react";import{CANVAS_PERSONALIZE_TYPE as O,CANVAS_TEST_TYPE as _}from"@uniformdev/canvas";import{Personalize as b,Test as k}from"@uniformdev/context-react";import{mapSlotToPersonalizedVariations as A,mapSlotToTestVariations as V}from"@uniformdev/canvas";import*as P from"react";var g={test:(e,o,t)=>{var l,c,m,i;let n=e,r=(c=(l=n.slots)==null?void 0:l.test)!=null?c:[],s=(i=(m=n.parameters.test)==null?void 0:m.value)!=null?i:"Untitled Test",p=V(r);return P.createElement(k,{key:o,variations:p,name:s,component:a=>t(a,o)})},personalization:(e,o,t)=>{var s,p,l,c,m,i,a;let n=e,r=A((s=n==null?void 0:n.slots)==null?void 0:s.pz);return P.createElement(b,{key:o,variations:r,count:Number((c=(l=(p=n.parameters)==null?void 0:p.count)==null?void 0:l.value)!=null?c:1),name:(a=(i=(m=n.parameters)==null?void 0:m.trackingEventName)==null?void 0:i.value)!=null?a:"Untitled Personalization",component:C=>t(C,0)})}};function E({name:e,resolveRenderer:o,children:t}){var i;let n=T();if(!(n!=null&&n.composition))throw new Error("Slot must be rendered within a Composition");let{composition:r,resolveRenderer:s}=n;if(!r)throw new Error("Cannot use Slot without a Composition wrapper.");let p=(i=r.slots)==null?void 0:i[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:`,r),null;let l=o!=null?o:s,c=g,m=p.map((a,C)=>{let S=R({component:a,resolveRenderer:l,resolveSystem:c,key:C});return t?t({child:S,component:a,key:C}):S});return v.createElement(v.Fragment,void 0,m)}function R({component:e,resolveRenderer:o,resolveSystem:t,key:n=0}){let r=o==null?void 0:o(e);if(e.type===_)return t.test(e,n,(s,p)=>R({component:s,resolveRenderer:o,resolveSystem:t,key:p}));if(e.type===O)return t.personalization(e,n,(s,p)=>R({component:s,resolveRenderer:o,resolveSystem:t,key:p}));if(r){let s=u(e);return v.createElement(w,{key:n,data:e,resolveRenderer:o},v.createElement(r,{...s}))}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=F(void 0);function T(){return J(N)}var L=e=>f.get(e.type)||null;function w({data:e,resolveRenderer:o,children:t,behaviorTracking:n}){var i,a,C;let r=T(),s=D({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 p={composition:e,resolveRenderer:o||(r==null?void 0:r.resolveRenderer)||L,behaviorTracking:(i=n!=null?n:r==null?void 0:r.behaviorTracking)!=null?i:"onView"},l=(C=(a=e.parameters)==null?void 0:a[U])==null?void 0:C.value,c=p.behaviorTracking==="onLoad"?z:I,m=M({children:t,data:e,hasParentLayout:Boolean(r)});return y.createElement(N.Provider,{value:p},s?y.createElement(c,{behavior:l},m):m)}function M({children:e,data:o,hasParentLayout:t}){let n=e;if(!n&&!t){let s=f.get(o.type);s?n=y.createElement(s,u(o)):n=Object.keys(o.slots||{}).map(p=>y.createElement(E,{key:p,name:p}))}return typeof n=="function"?n(u(o)):n}import d from"react";function Te(e){var t;let o=(t=e.component)==null?void 0:t.type;return o?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: ",o),d.createElement("p",null,d.createElement("strong",null,o)," 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(e,null,2)))):null}import{CANVAS_DRAFT_STATE as X,createEventBus as B,subscribeToComposition as K}from"@uniformdev/canvas";import{useEffect as Y}from"react";function Ee({enabled:e,projectId:o,compositionId:t,effect:n}){Y(()=>{if(!e||!t||!o)return;let r;return(async()=>{let p=await B();p&&(r=K({eventBus:p,compositionId:t,compositionState:X,projectId:o,callback:n,event:"updated"}))})(),()=>{r&&r()}},[t,e,o,n])}export{w as Composition,Te as DefaultNotImplementedComponent,E as Slot,f as componentStore,j as componentStoreResolver,h as createComponentStore,x as createComponentStoreResolver,Z as registerUniformComponent,T as useComposition,Ee as useCompositionEventEffect};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/canvas-react",
-  "version": "16.2.4",
+  "version": "17.1.1-alpha.151+3c57dd245",
   "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": "^16.2.4",
-    "@uniformdev/context": "^16.2.4",
-    "@uniformdev/context-react": "^16.2.4"
+    "@uniformdev/canvas": "^17.1.1-alpha.151+3c57dd245",
+    "@uniformdev/context": "^17.1.1-alpha.151+3c57dd245",
+    "@uniformdev/context-react": "^17.1.1-alpha.151+3c57dd245"
   },
   "peerDependencies": {
     "react": ">= 16",
     "react-dom": ">=16"
   },
   "devDependencies": {
-    "@types/react": "18.0.14",
+    "@types/react": "18.0.18",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
@@ -42,5 +42,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b2ed666efec0c0e255c2a1b8561ff7899834a2d5"
+  "gitHead": "3c57dd245b59aa55368da8991d1e39bc633bbed8"
 }