@uniformdev/canvas-react 17.6.0 → 17.6.1-alpha.106
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.esm.js +1 -1
- package/dist/index.js +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +6 -6
package/dist/index.esm.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{CANVAS_ENRICHMENT_TAG_PARAM as F}from"@uniformdev/canvas";import{Track as J,TrackFragment as X,useUniformContext as $}from"@uniformdev/context-react";import T,{createContext as j,useContext as K}from"react";function v(e){var n;let o=(n=e.parameters)!=null?n:{};return{...Object.keys(o).reduce((r,i)=>(r[i]=o[i].value,r),{}),...e.data,component:e}}var
|
|
1
|
+
import{CANVAS_ENRICHMENT_TAG_PARAM as F}from"@uniformdev/canvas";import{Track as J,TrackFragment as X,useUniformContext as $}from"@uniformdev/context-react";import T,{createContext as j,useContext as K}from"react";function v(e){var n;let o=(n=e.parameters)!=null?n:{};return{...Object.keys(o).reduce((r,i)=>(r[i]=o[i].value,r),{}),...e.data,component:e}}var w=()=>{let e=new Map;return{register:({type:o,component:t})=>{e.set(o,t)},get:o=>e.get(o)}},S=e=>o=>e.store.get(o.type)||e.defaultComponent||null;var h=w(),ae=({type:e,component:o})=>{Array.isArray(e)?e.forEach(t=>{h.register({type:t,component:o})}):h.register({type:e,component:o})},me=S({store:h});import{CANVAS_PERSONALIZE_TYPE as M,CANVAS_TEST_TYPE as z,IN_CONTEXT_EDITOR_COMPONENT_START_ROLE as L,PLACEHOLDER_ID as B}from"@uniformdev/canvas";import C from"react";import{mapSlotToPersonalizedVariations as A,mapSlotToTestVariations as U}from"@uniformdev/canvas";import{Personalize as V,Test as D}from"@uniformdev/context-react";import*as P from"react";var x={test:(e,o,t)=>{var p,d,m,c,a;let n=e,r=(d=(p=n.slots)==null?void 0:p.test)!=null?d:[],i=(a=(c=(m=n.parameters)==null?void 0:m.test)==null?void 0:c.value)!=null?a:"Untitled Test",s=U(r);return P.createElement(D,{key:o,variations:s,name:i,component:l=>t(l,o)})},personalization:(e,o,t)=>{var i,s,p,d,m,c,a;let n=e,r=A((i=n==null?void 0:n.slots)==null?void 0:i.pz);return P.createElement(V,{key:o,variations:r,count:Number((d=(p=(s=n.parameters)==null?void 0:s.count)==null?void 0:p.value)!=null?d:1),name:(a=(c=(m=n.parameters)==null?void 0:m.trackingEventName)==null?void 0:c.value)!=null?a:"Untitled Personalization",component:l=>t(l,0)})}};function b({name:e,resolveRenderer:o,children:t,emptyPlaceholder:n}){var a;let r=E();if(!(r!=null&&r.composition))throw new Error("Slot must be rendered within a Composition");let{composition:i,resolveRenderer:s}=r;if(!i)throw new Error("Cannot use Slot without a Composition wrapper.");let p=(a=i.slots)==null?void 0:a[e];if(!p||!Array.isArray(p))return process.env.NODE_ENV==="development"&&console.warn(`[canvas-dev] slot '${e}' was rendered, but it was not defined on its component. This is expected if the slot is optional, otherwise it may indicate a typo. Component:`,i),null;let d=o!=null?o:s,m=x,c=p.map((l,u)=>{let f=g({component:l,resolveRenderer:d,resolveSystem:m,key:`inner-${u}`,indexInSlot:u,slotName:e,parentComponent:i,slotChildrenCount:p.length,emptyPlaceholder:n}),R=t?t({child:f,component:l,key:`wrapped-inner-${u}`}):f;return C.createElement(C.Fragment,{key:u},R)});return C.createElement(C.Fragment,void 0,c)}function g({component:e,resolveRenderer:o,resolveSystem:t,key:n=0,indexInSlot:r,slotName:i,parentComponent:s,slotChildrenCount:p,emptyPlaceholder:d}){var c,a,l;let m=o==null?void 0:o(e);if(e.type===z)return t.test(e,n,(u,f)=>g({component:u,resolveRenderer:o,resolveSystem:t,key:f}));if(e.type===M)return t.personalization(e,n,(u,f)=>g({component:u,resolveRenderer:o,resolveSystem:t,key:f}));if(m){let u=v(e),f=Boolean(e._id),R=e._id===B;return C.createElement(N,{key:n,data:e,resolveRenderer:o},f?C.createElement("script",{key:n,"data-role":L,"data-parent-id":s==null?void 0:s._id,"data-parent-type":s==null?void 0:s.type,"data-component-id":e._id,"data-slot-name":i!=null?i:"","data-component-index":r!=null?r:"","data-total-components":p!=null?p:"","data-component-name":e.type,"data-is-placeholder":R?"true":void 0,"data-component-title":(l=(a=(c=e.parameters)==null?void 0:c.title)==null?void 0:a.value)!=null?l:""}):null,R&&d!==void 0?d:C.createElement(m,{...u}),f?C.createElement("script",{"data-role":"component-end"}):null)}else process.env.NODE_ENV!=="production"&&console.warn(`[canvas] found component of type '${e.type}' which the resolveRenderer prop returned no component for. Nothing will be rendered. The resolveRenderer function may need to be extended to handle the new type.`,e);return null}var I=j(void 0);function E(){return K(I)}var Y=e=>h.get(e.type)||null;function N({data:e,resolveRenderer:o,children:t,behaviorTracking:n}){var c,a,l;let r=E(),i=$({throwOnMissingProvider:!1})!==void 0;if(!e)return process.env.NODE_ENV==="development"&&console.warn("[canvas-dev] Composition was rendered with no data, nothing will be output."),null;let s={composition:e,resolveRenderer:o||(r==null?void 0:r.resolveRenderer)||Y,behaviorTracking:(c=n!=null?n:r==null?void 0:r.behaviorTracking)!=null?c:"onView"},p=(l=(a=e.parameters)==null?void 0:a[F])==null?void 0:l.value,d=s.behaviorTracking==="onLoad"?X:J,m=G({children:t,data:e,hasParentLayout:Boolean(r)});return T.createElement(I.Provider,{value:s},i?T.createElement(d,{behavior:p},m):m)}function G({children:e,data:o,hasParentLayout:t}){var i;let n=e;if(!n&&!t){let s=h.get(o.type);s?n=T.createElement(s,v(o)):(Object.keys((i=o.slots)!=null?i:{}).length>1&&process.env.NODE_ENV==="development"&&console.warn(`[canvas-dev] All the slots in component '${o.type}' are rendered in no particular order. Use '<Slot name={slotName} />' to reliably render the slots.`),n=Object.keys(o.slots||{}).map(p=>T.createElement(b,{key:p,name:p})))}return typeof n=="function"?n(v(o)):n}import y from"react";function Ae(e){var t;let o=(t=e.component)==null?void 0:t.type;return o?y.createElement("div",{style:{borderLeft:"10px solid #e42535!important",padding:"0.01em 16px 16px",borderRadius:"16px",backgroundColor:"rgba(122, 215, 218, 0.3)",color:"#1d3557"}},y.createElement("h2",null,"Component: ",o),y.createElement("p",null,y.createElement("strong",null,o)," has no React implementation. It may need to be added to your"," ",y.createElement("code",null,"resolveRenderer()")," function."),y.createElement("details",null,y.createElement("summary",null,"Props"),y.createElement("pre",null,JSON.stringify(e,null,2)))):null}import{CANVAS_DRAFT_STATE as H,createEventBus as Q,subscribeToComposition as Z}from"@uniformdev/canvas";import{useEffect as q}from"react";function ze({enabled:e,projectId:o,compositionId:t,effect:n}){q(()=>{if(!e||!t||!o)return;let r;return(async()=>{let s=await Q();s&&(r=Z({eventBus:s,compositionId:t,compositionState:H,projectId:o,callback:n,event:"updated"}))})(),()=>{r&&r()}},[t,e,o,n])}import{createCanvasChannel as W,IN_CONTEXT_EDITOR_QUERY_STRING_PARAM as ee,isUpdateCompositionMessage as oe}from"@uniformdev/canvas";import{useEffect as _,useMemo as te,useState as ne}from"react";var O="uniform-canvas-preview-script",$e=({apiUrl:e})=>async o=>{let t=await fetch(e,{method:"post",body:JSON.stringify({composition:o.composition,hash:o.hash}),headers:{"Content-Type":"application/json"}}),n=await t.json();if(!t.ok)throw new Error("Error reading enhanced composition");return n.composition},je=({initialCompositionValue:e,enhance:o=t=>t.composition})=>{let[t,n]=ne(),r=te(()=>{var s;return k()?W({broadcastTo:[(s=window.opener)!=null?s:window.top],listenTo:[window]}):void 0},[]);return _(()=>{if(!r)return;let i=r.on("update-composition",async s=>{if(oe(s)){let p=await o(s);n(p)}});return()=>{i()}},[r,o]),_(()=>{if(!k()||document.getElementById(O))return;let s=document.createElement("script");s.id=O,s.src=re(),s.async=!0,document.head.appendChild(s)},[]),{composition:t!=null?t:e}};function re(){return`${window.document.referrer}files/canvas-in-context-embed/index.js`}function k(){if(typeof window=="undefined")return!1;let e=new URLSearchParams(window.location.search).has(ee),o=Boolean(window.document.referrer.match(/(^https:\/\/|\.)(uniform.app|uniform.wtf|localhost:\d{4})\//));return e&&o}export{N as Composition,Ae as DefaultNotImplementedComponent,b as Slot,h as componentStore,me as componentStoreResolver,$e as createApiEnhancer,w as createComponentStore,S as createComponentStoreResolver,ae as registerUniformComponent,E as useComposition,ze as useCompositionEventEffect,je as useContextualEditing};
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var $=Object.create;var x=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,G=Object.prototype.hasOwnProperty;var H=(e,o)=>{for(var t in o)x(e,t,{get:o[t],enumerable:!0})},
|
|
1
|
+
"use strict";var $=Object.create;var x=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,G=Object.prototype.hasOwnProperty;var H=(e,o)=>{for(var t in o)x(e,t,{get:o[t],enumerable:!0})},M=(e,o,t,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of K(o))!G.call(e,r)&&r!==t&&x(e,r,{get:()=>o[r],enumerable:!(n=j(o,r))||n.enumerable});return e};var b=(e,o,t)=>(t=e!=null?$(Y(e)):{},M(o||!e||!e.__esModule?x(t,"default",{value:e,enumerable:!0}):t,e)),Q=e=>M(x({},"__esModule",{value:!0}),e);var ie={};H(ie,{Composition:()=>D,DefaultNotImplementedComponent:()=>oe,Slot:()=>V,componentStore:()=>R,componentStoreResolver:()=>q,createApiEnhancer:()=>ne,createComponentStore:()=>O,createComponentStoreResolver:()=>k,registerUniformComponent:()=>Z,useComposition:()=>_,useCompositionEventEffect:()=>te,useContextualEditing:()=>re});module.exports=Q(ie);var L=require("@uniformdev/canvas"),P=require("@uniformdev/context-react"),y=b(require("react"));function w(e){var n;let o=(n=e.parameters)!=null?n:{};return{...Object.keys(o).reduce((r,i)=>(r[i]=o[i].value,r),{}),...e.data,component:e}}var O=()=>{let e=new Map;return{register:({type:o,component:t})=>{e.set(o,t)},get:o=>e.get(o)}},k=e=>o=>e.store.get(o.type)||e.defaultComponent||null;var R=O(),Z=({type:e,component:o})=>{Array.isArray(e)?e.forEach(t=>{R.register({type:t,component:o})}):R.register({type:e,component:o})},q=k({store:R});var v=require("@uniformdev/canvas"),C=b(require("react"));var N=require("@uniformdev/canvas"),I=require("@uniformdev/context-react"),A=b(require("react")),z={test:(e,o,t)=>{var p,d,m,c,a;let n=e,r=(d=(p=n.slots)==null?void 0:p.test)!=null?d:[],i=(a=(c=(m=n.parameters)==null?void 0:m.test)==null?void 0:c.value)!=null?a:"Untitled Test",s=(0,N.mapSlotToTestVariations)(r);return A.createElement(I.Test,{key:o,variations:s,name:i,component:l=>t(l,o)})},personalization:(e,o,t)=>{var i,s,p,d,m,c,a;let n=e,r=(0,N.mapSlotToPersonalizedVariations)((i=n==null?void 0:n.slots)==null?void 0:i.pz);return A.createElement(I.Personalize,{key:o,variations:r,count:Number((d=(p=(s=n.parameters)==null?void 0:s.count)==null?void 0:p.value)!=null?d:1),name:(a=(c=(m=n.parameters)==null?void 0:m.trackingEventName)==null?void 0:c.value)!=null?a:"Untitled Personalization",component:l=>t(l,0)})}};function V({name:e,resolveRenderer:o,children:t,emptyPlaceholder:n}){var a;let r=_();if(!(r!=null&&r.composition))throw new Error("Slot must be rendered within a Composition");let{composition:i,resolveRenderer:s}=r;if(!i)throw new Error("Cannot use Slot without a Composition wrapper.");let p=(a=i.slots)==null?void 0:a[e];if(!p||!Array.isArray(p))return process.env.NODE_ENV==="development"&&console.warn(`[canvas-dev] slot '${e}' was rendered, but it was not defined on its component. This is expected if the slot is optional, otherwise it may indicate a typo. Component:`,i),null;let d=o!=null?o:s,m=z,c=p.map((l,u)=>{let f=U({component:l,resolveRenderer:d,resolveSystem:m,key:`inner-${u}`,indexInSlot:u,slotName:e,parentComponent:i,slotChildrenCount:p.length,emptyPlaceholder:n}),S=t?t({child:f,component:l,key:`wrapped-inner-${u}`}):f;return C.default.createElement(C.default.Fragment,{key:u},S)});return C.default.createElement(C.default.Fragment,void 0,c)}function U({component:e,resolveRenderer:o,resolveSystem:t,key:n=0,indexInSlot:r,slotName:i,parentComponent:s,slotChildrenCount:p,emptyPlaceholder:d}){var c,a,l;let m=o==null?void 0:o(e);if(e.type===v.CANVAS_TEST_TYPE)return t.test(e,n,(u,f)=>U({component:u,resolveRenderer:o,resolveSystem:t,key:f}));if(e.type===v.CANVAS_PERSONALIZE_TYPE)return t.personalization(e,n,(u,f)=>U({component:u,resolveRenderer:o,resolveSystem:t,key:f}));if(m){let u=w(e),f=Boolean(e._id),S=e._id===v.PLACEHOLDER_ID;return C.default.createElement(D,{key:n,data:e,resolveRenderer:o},f?C.default.createElement("script",{key:n,"data-role":v.IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,"data-parent-id":s==null?void 0:s._id,"data-parent-type":s==null?void 0:s.type,"data-component-id":e._id,"data-slot-name":i!=null?i:"","data-component-index":r!=null?r:"","data-total-components":p!=null?p:"","data-component-name":e.type,"data-is-placeholder":S?"true":void 0,"data-component-title":(l=(a=(c=e.parameters)==null?void 0:c.title)==null?void 0:a.value)!=null?l:""}):null,S&&d!==void 0?d:C.default.createElement(m,{...u}),f?C.default.createElement("script",{"data-role":"component-end"}):null)}else process.env.NODE_ENV!=="production"&&console.warn(`[canvas] found component of type '${e.type}' which the resolveRenderer prop returned no component for. Nothing will be rendered. The resolveRenderer function may need to be extended to handle the new type.`,e);return null}var B=(0,y.createContext)(void 0);function _(){return(0,y.useContext)(B)}var W=e=>R.get(e.type)||null;function D({data:e,resolveRenderer:o,children:t,behaviorTracking:n}){var c,a,l;let r=_(),i=(0,P.useUniformContext)({throwOnMissingProvider:!1})!==void 0;if(!e)return process.env.NODE_ENV==="development"&&console.warn("[canvas-dev] Composition was rendered with no data, nothing will be output."),null;let s={composition:e,resolveRenderer:o||(r==null?void 0:r.resolveRenderer)||W,behaviorTracking:(c=n!=null?n:r==null?void 0:r.behaviorTracking)!=null?c:"onView"},p=(l=(a=e.parameters)==null?void 0:a[L.CANVAS_ENRICHMENT_TAG_PARAM])==null?void 0:l.value,d=s.behaviorTracking==="onLoad"?P.TrackFragment:P.Track,m=ee({children:t,data:e,hasParentLayout:Boolean(r)});return y.default.createElement(B.Provider,{value:s},i?y.default.createElement(d,{behavior:p},m):m)}function ee({children:e,data:o,hasParentLayout:t}){var i;let n=e;if(!n&&!t){let s=R.get(o.type);s?n=y.default.createElement(s,w(o)):(Object.keys((i=o.slots)!=null?i:{}).length>1&&process.env.NODE_ENV==="development"&&console.warn(`[canvas-dev] All the slots in component '${o.type}' are rendered in no particular order. Use '<Slot name={slotName} />' to reliably render the slots.`),n=Object.keys(o.slots||{}).map(p=>y.default.createElement(V,{key:p,name:p})))}return typeof n=="function"?n(w(o)):n}var h=b(require("react"));function oe(e){var t;let o=(t=e.component)==null?void 0:t.type;return o?h.default.createElement("div",{style:{borderLeft:"10px solid #e42535!important",padding:"0.01em 16px 16px",borderRadius:"16px",backgroundColor:"rgba(122, 215, 218, 0.3)",color:"#1d3557"}},h.default.createElement("h2",null,"Component: ",o),h.default.createElement("p",null,h.default.createElement("strong",null,o)," has no React implementation. It may need to be added to your"," ",h.default.createElement("code",null,"resolveRenderer()")," function."),h.default.createElement("details",null,h.default.createElement("summary",null,"Props"),h.default.createElement("pre",null,JSON.stringify(e,null,2)))):null}var g=require("@uniformdev/canvas"),F=require("react");function te({enabled:e,projectId:o,compositionId:t,effect:n}){(0,F.useEffect)(()=>{if(!e||!t||!o)return;let r;return(async()=>{let s=await(0,g.createEventBus)();s&&(r=(0,g.subscribeToComposition)({eventBus:s,compositionId:t,compositionState:g.CANVAS_DRAFT_STATE,projectId:o,callback:n,event:"updated"}))})(),()=>{r&&r()}},[t,e,o,n])}var E=require("@uniformdev/canvas"),T=require("react"),J="uniform-canvas-preview-script",ne=({apiUrl:e})=>async o=>{let t=await fetch(e,{method:"post",body:JSON.stringify({composition:o.composition,hash:o.hash}),headers:{"Content-Type":"application/json"}}),n=await t.json();if(!t.ok)throw new Error("Error reading enhanced composition");return n.composition},re=({initialCompositionValue:e,enhance:o=t=>t.composition})=>{let[t,n]=(0,T.useState)(),r=(0,T.useMemo)(()=>{var s;return X()?(0,E.createCanvasChannel)({broadcastTo:[(s=window.opener)!=null?s:window.top],listenTo:[window]}):void 0},[]);return(0,T.useEffect)(()=>{if(!r)return;let i=r.on("update-composition",async s=>{if((0,E.isUpdateCompositionMessage)(s)){let p=await o(s);n(p)}});return()=>{i()}},[r,o]),(0,T.useEffect)(()=>{if(!X()||document.getElementById(J))return;let s=document.createElement("script");s.id=J,s.src=se(),s.async=!0,document.head.appendChild(s)},[]),{composition:t!=null?t:e}};function se(){return`${window.document.referrer}files/canvas-in-context-embed/index.js`}function X(){if(typeof window=="undefined")return!1;let e=new URLSearchParams(window.location.search).has(E.IN_CONTEXT_EDITOR_QUERY_STRING_PARAM),o=Boolean(window.document.referrer.match(/(^https:\/\/|\.)(uniform.app|uniform.wtf|localhost:\d{4})\//));return e&&o}0&&(module.exports={Composition,DefaultNotImplementedComponent,Slot,componentStore,componentStoreResolver,createApiEnhancer,createComponentStore,createComponentStoreResolver,registerUniformComponent,useComposition,useCompositionEventEffect,useContextualEditing});
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{CANVAS_ENRICHMENT_TAG_PARAM as F}from"@uniformdev/canvas";import{Track as J,TrackFragment as X,useUniformContext as $}from"@uniformdev/context-react";import T,{createContext as j,useContext as K}from"react";function v(e){var n;let o=(n=e.parameters)!=null?n:{};return{...Object.keys(o).reduce((r,i)=>(r[i]=o[i].value,r),{}),...e.data,component:e}}var
|
|
1
|
+
import{CANVAS_ENRICHMENT_TAG_PARAM as F}from"@uniformdev/canvas";import{Track as J,TrackFragment as X,useUniformContext as $}from"@uniformdev/context-react";import T,{createContext as j,useContext as K}from"react";function v(e){var n;let o=(n=e.parameters)!=null?n:{};return{...Object.keys(o).reduce((r,i)=>(r[i]=o[i].value,r),{}),...e.data,component:e}}var w=()=>{let e=new Map;return{register:({type:o,component:t})=>{e.set(o,t)},get:o=>e.get(o)}},S=e=>o=>e.store.get(o.type)||e.defaultComponent||null;var h=w(),ae=({type:e,component:o})=>{Array.isArray(e)?e.forEach(t=>{h.register({type:t,component:o})}):h.register({type:e,component:o})},me=S({store:h});import{CANVAS_PERSONALIZE_TYPE as M,CANVAS_TEST_TYPE as z,IN_CONTEXT_EDITOR_COMPONENT_START_ROLE as L,PLACEHOLDER_ID as B}from"@uniformdev/canvas";import C from"react";import{mapSlotToPersonalizedVariations as A,mapSlotToTestVariations as U}from"@uniformdev/canvas";import{Personalize as V,Test as D}from"@uniformdev/context-react";import*as P from"react";var x={test:(e,o,t)=>{var p,d,m,c,a;let n=e,r=(d=(p=n.slots)==null?void 0:p.test)!=null?d:[],i=(a=(c=(m=n.parameters)==null?void 0:m.test)==null?void 0:c.value)!=null?a:"Untitled Test",s=U(r);return P.createElement(D,{key:o,variations:s,name:i,component:l=>t(l,o)})},personalization:(e,o,t)=>{var i,s,p,d,m,c,a;let n=e,r=A((i=n==null?void 0:n.slots)==null?void 0:i.pz);return P.createElement(V,{key:o,variations:r,count:Number((d=(p=(s=n.parameters)==null?void 0:s.count)==null?void 0:p.value)!=null?d:1),name:(a=(c=(m=n.parameters)==null?void 0:m.trackingEventName)==null?void 0:c.value)!=null?a:"Untitled Personalization",component:l=>t(l,0)})}};function b({name:e,resolveRenderer:o,children:t,emptyPlaceholder:n}){var a;let r=E();if(!(r!=null&&r.composition))throw new Error("Slot must be rendered within a Composition");let{composition:i,resolveRenderer:s}=r;if(!i)throw new Error("Cannot use Slot without a Composition wrapper.");let p=(a=i.slots)==null?void 0:a[e];if(!p||!Array.isArray(p))return process.env.NODE_ENV==="development"&&console.warn(`[canvas-dev] slot '${e}' was rendered, but it was not defined on its component. This is expected if the slot is optional, otherwise it may indicate a typo. Component:`,i),null;let d=o!=null?o:s,m=x,c=p.map((l,u)=>{let f=g({component:l,resolveRenderer:d,resolveSystem:m,key:`inner-${u}`,indexInSlot:u,slotName:e,parentComponent:i,slotChildrenCount:p.length,emptyPlaceholder:n}),R=t?t({child:f,component:l,key:`wrapped-inner-${u}`}):f;return C.createElement(C.Fragment,{key:u},R)});return C.createElement(C.Fragment,void 0,c)}function g({component:e,resolveRenderer:o,resolveSystem:t,key:n=0,indexInSlot:r,slotName:i,parentComponent:s,slotChildrenCount:p,emptyPlaceholder:d}){var c,a,l;let m=o==null?void 0:o(e);if(e.type===z)return t.test(e,n,(u,f)=>g({component:u,resolveRenderer:o,resolveSystem:t,key:f}));if(e.type===M)return t.personalization(e,n,(u,f)=>g({component:u,resolveRenderer:o,resolveSystem:t,key:f}));if(m){let u=v(e),f=Boolean(e._id),R=e._id===B;return C.createElement(N,{key:n,data:e,resolveRenderer:o},f?C.createElement("script",{key:n,"data-role":L,"data-parent-id":s==null?void 0:s._id,"data-parent-type":s==null?void 0:s.type,"data-component-id":e._id,"data-slot-name":i!=null?i:"","data-component-index":r!=null?r:"","data-total-components":p!=null?p:"","data-component-name":e.type,"data-is-placeholder":R?"true":void 0,"data-component-title":(l=(a=(c=e.parameters)==null?void 0:c.title)==null?void 0:a.value)!=null?l:""}):null,R&&d!==void 0?d:C.createElement(m,{...u}),f?C.createElement("script",{"data-role":"component-end"}):null)}else process.env.NODE_ENV!=="production"&&console.warn(`[canvas] found component of type '${e.type}' which the resolveRenderer prop returned no component for. Nothing will be rendered. The resolveRenderer function may need to be extended to handle the new type.`,e);return null}var I=j(void 0);function E(){return K(I)}var Y=e=>h.get(e.type)||null;function N({data:e,resolveRenderer:o,children:t,behaviorTracking:n}){var c,a,l;let r=E(),i=$({throwOnMissingProvider:!1})!==void 0;if(!e)return process.env.NODE_ENV==="development"&&console.warn("[canvas-dev] Composition was rendered with no data, nothing will be output."),null;let s={composition:e,resolveRenderer:o||(r==null?void 0:r.resolveRenderer)||Y,behaviorTracking:(c=n!=null?n:r==null?void 0:r.behaviorTracking)!=null?c:"onView"},p=(l=(a=e.parameters)==null?void 0:a[F])==null?void 0:l.value,d=s.behaviorTracking==="onLoad"?X:J,m=G({children:t,data:e,hasParentLayout:Boolean(r)});return T.createElement(I.Provider,{value:s},i?T.createElement(d,{behavior:p},m):m)}function G({children:e,data:o,hasParentLayout:t}){var i;let n=e;if(!n&&!t){let s=h.get(o.type);s?n=T.createElement(s,v(o)):(Object.keys((i=o.slots)!=null?i:{}).length>1&&process.env.NODE_ENV==="development"&&console.warn(`[canvas-dev] All the slots in component '${o.type}' are rendered in no particular order. Use '<Slot name={slotName} />' to reliably render the slots.`),n=Object.keys(o.slots||{}).map(p=>T.createElement(b,{key:p,name:p})))}return typeof n=="function"?n(v(o)):n}import y from"react";function Ae(e){var t;let o=(t=e.component)==null?void 0:t.type;return o?y.createElement("div",{style:{borderLeft:"10px solid #e42535!important",padding:"0.01em 16px 16px",borderRadius:"16px",backgroundColor:"rgba(122, 215, 218, 0.3)",color:"#1d3557"}},y.createElement("h2",null,"Component: ",o),y.createElement("p",null,y.createElement("strong",null,o)," has no React implementation. It may need to be added to your"," ",y.createElement("code",null,"resolveRenderer()")," function."),y.createElement("details",null,y.createElement("summary",null,"Props"),y.createElement("pre",null,JSON.stringify(e,null,2)))):null}import{CANVAS_DRAFT_STATE as H,createEventBus as Q,subscribeToComposition as Z}from"@uniformdev/canvas";import{useEffect as q}from"react";function ze({enabled:e,projectId:o,compositionId:t,effect:n}){q(()=>{if(!e||!t||!o)return;let r;return(async()=>{let s=await Q();s&&(r=Z({eventBus:s,compositionId:t,compositionState:H,projectId:o,callback:n,event:"updated"}))})(),()=>{r&&r()}},[t,e,o,n])}import{createCanvasChannel as W,IN_CONTEXT_EDITOR_QUERY_STRING_PARAM as ee,isUpdateCompositionMessage as oe}from"@uniformdev/canvas";import{useEffect as _,useMemo as te,useState as ne}from"react";var O="uniform-canvas-preview-script",$e=({apiUrl:e})=>async o=>{let t=await fetch(e,{method:"post",body:JSON.stringify({composition:o.composition,hash:o.hash}),headers:{"Content-Type":"application/json"}}),n=await t.json();if(!t.ok)throw new Error("Error reading enhanced composition");return n.composition},je=({initialCompositionValue:e,enhance:o=t=>t.composition})=>{let[t,n]=ne(),r=te(()=>{var s;return k()?W({broadcastTo:[(s=window.opener)!=null?s:window.top],listenTo:[window]}):void 0},[]);return _(()=>{if(!r)return;let i=r.on("update-composition",async s=>{if(oe(s)){let p=await o(s);n(p)}});return()=>{i()}},[r,o]),_(()=>{if(!k()||document.getElementById(O))return;let s=document.createElement("script");s.id=O,s.src=re(),s.async=!0,document.head.appendChild(s)},[]),{composition:t!=null?t:e}};function re(){return`${window.document.referrer}files/canvas-in-context-embed/index.js`}function k(){if(typeof window=="undefined")return!1;let e=new URLSearchParams(window.location.search).has(ee),o=Boolean(window.document.referrer.match(/(^https:\/\/|\.)(uniform.app|uniform.wtf|localhost:\d{4})\//));return e&&o}export{N as Composition,Ae as DefaultNotImplementedComponent,b as Slot,h as componentStore,me as componentStoreResolver,$e as createApiEnhancer,w as createComponentStore,S as createComponentStoreResolver,ae as registerUniformComponent,E as useComposition,ze as useCompositionEventEffect,je as useContextualEditing};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uniformdev/canvas-react",
|
|
3
|
-
"version": "17.6.
|
|
3
|
+
"version": "17.6.1-alpha.106+a085c31c8",
|
|
4
4
|
"description": "React SDK for Uniform Canvas",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -23,16 +23,16 @@
|
|
|
23
23
|
"format": "prettier --write \"src/**/*.{js,ts,tsx}\""
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@uniformdev/canvas": "^17.6.
|
|
27
|
-
"@uniformdev/context": "^17.6.
|
|
28
|
-
"@uniformdev/context-react": "^17.6.
|
|
26
|
+
"@uniformdev/canvas": "^17.6.1-alpha.106+a085c31c8",
|
|
27
|
+
"@uniformdev/context": "^17.6.1-alpha.106+a085c31c8",
|
|
28
|
+
"@uniformdev/context-react": "^17.6.1-alpha.106+a085c31c8"
|
|
29
29
|
},
|
|
30
30
|
"peerDependencies": {
|
|
31
31
|
"react": ">= 16",
|
|
32
32
|
"react-dom": ">=16"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
|
-
"@types/react": "18.0.
|
|
35
|
+
"@types/react": "18.0.26",
|
|
36
36
|
"react": "18.2.0",
|
|
37
37
|
"react-dom": "18.2.0"
|
|
38
38
|
},
|
|
@@ -42,5 +42,5 @@
|
|
|
42
42
|
"publishConfig": {
|
|
43
43
|
"access": "public"
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "a085c31c8c2e927cbe2b2332854a199a75198542"
|
|
46
46
|
}
|