@uniformdev/canvas-vue 17.5.1-alpha.7 → 17.6.0

package/dist/index.d.ts

@@ -81,6 +81,23 @@ declare const Composition: vue_demi.DefineComponent<{
     behaviorTracking: "onLoad" | "onView" | undefined;
 }>;
 
+declare type DefaultNotImplementedComponentProps = {
+    component: ComponentInstance;
+};
+declare const DefaultNotImplementedComponent: vue_demi.DefineComponent<{
+    component: {
+        type: PropType<ComponentInstance>;
+        required: true;
+    };
+}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
+    component: {
+        type: PropType<ComponentInstance>;
+        required: true;
+    };
+}>>, {}>;
+
 declare type SlotComponentProps = {
     /** Name of the slot to render */
     name?: string;
@@ -111,31 +128,6 @@ declare const SlotContent: vue_demi.DefineComponent<{
     };
 }>>, {}>;
 
-declare type DefaultNotImplementedComponentProps = {
-    component: ComponentInstance;
-};
-declare const DefaultNotImplementedComponent: vue_demi.DefineComponent<{
-    component: {
-        type: PropType<ComponentInstance>;
-        required: true;
-    };
-}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
-    component: {
-        type: PropType<ComponentInstance>;
-        required: true;
-    };
-}>>, {}>;
-
-/**
- * Converts a raw Canvas component instance to Vue component props format.
- * This merges each parameter moved to the root object and removes the 'value' node,
- * hugely simplifying rendering code. For example if the raw object has parameters.foo.value,
- * then the final props have props.foo === raw.parameters.foo.value.
- */
-declare function convertComponentToProps<T = unknown>(component: ComponentInstance): ComponentProps<T>;
-
 declare type UseCompositionEventEffectOptions = Omit<Partial<SubscribeToCompositionOptions>, 'callback' | 'compositionId'> & {
     compositionIdRef: Ref<SubscribeToCompositionOptions['compositionId']>;
     enabled: boolean;
@@ -214,8 +206,75 @@ declare const createApiEnhancer: ({ apiUrl }: {
         };
     } | undefined;
 }>;
-declare const useCompositionInstance: ({ composition, enhance, }: {
-    composition: RootComponentInstance;
+declare const useContextualEditing: ({ initialCompositionValue, enhance, }: {
+    initialCompositionValue?: {
+        type: string;
+        parameters?: {
+            [key: string]: {
+                value: unknown;
+                type: string;
+                connectedData?: {
+                    pointer: string;
+                    syntax: "jptr";
+                    required?: boolean | undefined;
+                } | undefined;
+            };
+        } | undefined;
+        variant?: string | undefined;
+        slots?: {
+            [key: string]: {
+                type: string;
+                parameters?: {
+                    [key: string]: {
+                        value: unknown;
+                        type: string;
+                        connectedData?: {
+                            pointer: string;
+                            syntax: "jptr";
+                            required?: boolean | undefined;
+                        } | undefined;
+                    };
+                } | undefined;
+                variant?: string | undefined;
+                slots?: {
+                    [key: string]: any[];
+                } | undefined;
+                _id?: string | undefined;
+                _pattern?: string | undefined;
+                _dataResources?: {
+                    [key: string]: {
+                        type: string;
+                        isPatternParameter?: boolean | undefined;
+                        variables?: {
+                            [key: string]: string;
+                        } | undefined;
+                    };
+                } | undefined;
+                _patternDataResources?: {
+                    [key: string]: {
+                        type: string;
+                        isPatternParameter?: boolean | undefined;
+                        variables?: {
+                            [key: string]: string;
+                        } | undefined;
+                    };
+                } | undefined;
+                _patternError?: "NOTFOUND" | "CYCLIC" | undefined;
+            }[];
+        } | undefined;
+        _id: string;
+        _slug?: string | null | undefined;
+        _name: string;
+        _dataResources?: {
+            [key: string]: {
+                type: string;
+                isPatternParameter?: boolean | undefined;
+                variables?: {
+                    [key: string]: string;
+                } | undefined;
+            };
+        } | undefined;
+    } | undefined;
     enhance?: ((composition: UpdateCompositionMessage) => RootComponentInstance | Promise<RootComponentInstance>) | undefined;
 }) => {
     composition: vue_demi.Ref<{
@@ -285,9 +344,17 @@ declare const useCompositionInstance: ({ composition, enhance, }: {
                 } | undefined;
             };
         } | undefined;
-    }>;
+    } | undefined>;
 };
 
+/**
+ * Converts a raw Canvas component instance to Vue component props format.
+ * This merges each parameter moved to the root object and removes the 'value' node,
+ * hugely simplifying rendering code. For example if the raw object has parameters.foo.value,
+ * then the final props have props.foo === raw.parameters.foo.value.
+ */
+declare function convertComponentToProps<T = unknown>(component: ComponentInstance): ComponentProps<T>;
+
 /** Public ID of Canvas composition component type */
 declare const CANVAS_COMPOSITION_TYPE = "Composition";
 /** Public ID of Canvas slot component component type */
@@ -295,4 +362,4 @@ declare const CANVAS_SLOT_CONTENT_TYPE = "SlotContent";
 declare const compositionInjectionKey = "uniformComposition";
 declare const resolveRendererInjectionKey = "uniformResolveRenderer";
 
-export { CANVAS_COMPOSITION_TYPE, CANVAS_SLOT_CONTENT_TYPE, ComponentProps, Composition, CompositionProps, DefaultNotImplementedComponent, DefaultNotImplementedComponentProps, PersonalizeComponent, ResolveRenderer, SlotComponentProps, SlotContent, TestComponent, UseCompositionEventEffectOptions, compositionInjectionKey, convertComponentToProps, createApiEnhancer, resolveRendererInjectionKey, useCompositionEventEffect, useCompositionInstance };
+export { CANVAS_COMPOSITION_TYPE, CANVAS_SLOT_CONTENT_TYPE, ComponentProps, Composition, CompositionProps, DefaultNotImplementedComponent, DefaultNotImplementedComponentProps, PersonalizeComponent, ResolveRenderer, SlotComponentProps, SlotContent, TestComponent, UseCompositionEventEffectOptions, compositionInjectionKey, convertComponentToProps, createApiEnhancer, resolveRendererInjectionKey, useCompositionEventEffect, useContextualEditing };

package/dist/index.esm.js

@@ -1 +1 @@
-import{defineComponent as _,computed as T,h as O,provide as I,inject as S,resolveComponent as A}from"vue-demi";var h="Composition",P="SlotContent",y="uniformComposition",v="uniformResolveRenderer";import{CANVAS_ENRICHMENT_TAG_PARAM as k}from"@uniformdev/canvas";import{Track as U,TrackSlot as V,isUsingUniformContext as j}from"@uniformdev/context-vue";var b=_({name:h,inheritAttrs:!1,props:{data:{type:Object,required:!0},resolveRenderer:{type:Function,default:()=>({type:e})=>A(e)},behaviorTracking:{type:String,default:"onView"}},setup(e,t){var c,i,C;let o=T(()=>{var l,d;return(d=e.data)!=null?d:(l=S(y))==null?void 0:l.value}),s=(c=e.resolveRenderer)!=null?c:S(v);I(y,o),I(v,s);let r=T(()=>{var l,d;return(d=(l=o.value)==null?void 0:l.slots)!=null?d:{}}),n=T(()=>{var l,d;return(d=(l=o.value)==null?void 0:l.parameters)!=null?d:{}}),p=T(()=>JSON.stringify(o.value)),m=(C=(i=o.value.parameters)==null?void 0:i[k])==null?void 0:C.value,a=()=>{var l,d;return(d=(l=t.slots).default)==null?void 0:d.call(l,{slots:r.value,parameters:n.value})};if(j()){let l=e.behaviorTracking==="onLoad"?V:U;return()=>O(l,{behavior:m,key:p.value},a)}return a}});import{defineComponent as L,computed as z,h as f,inject as w}from"vue-demi";import{CANVAS_PERSONALIZE_TYPE as D,CANVAS_TEST_TYPE as K,IN_CONTEXT_EDITOR_COMPONENT_START_ROLE as Y,mapSlotToPersonalizedVariations as B,mapSlotToTestVariations as $,PLACEHOLDER_ID as F}from"@uniformdev/canvas";import{Personalize as J,Test as X}from"@uniformdev/context-vue";function E(e){var r;let t=(r=e.parameters)!=null?r:{};return{...Object.entries(t).reduce((n,[p,{value:m}])=>({...n,[M(p)]:m}),{}),...e.data,component:e}}function M(e){return e.replace("$","")}var be=L({name:P,inheritAttrs:!1,props:{name:{type:String},resolveRenderer:{type:Function}},setup(e,t){var m;let o=w(y),s=(m=e.resolveRenderer)!=null?m:w(v),r=t.slots.emptyPlaceholder;if(!o||!s)throw new Error("<SlotContent /> can only be used inside a <Composition />");let n=z(()=>{var a,c,i;return e.name?(c=(a=o==null?void 0:o.value.slots)==null?void 0:a[e.name])!=null?c:[]:Object.values((i=o==null?void 0:o.value.slots)!=null?i:{}).flat()}),p=n.value.map((a,c)=>{let i=R({component:a,resolveRenderer:s,indexInSlot:c,slotName:e.name,parentComponent:o.value,slotChildrenCount:n.value.length,emptyPlaceholder:r});return t.slots.default?t.slots.default({child:i,component:a}):i});return()=>p}});function q(e,t){var n,p,m,a,c,i;let o=e==null?void 0:e.parameters,s=B((n=e.slots)==null?void 0:n.pz),r=(a=(m=(p=e.parameters)==null?void 0:p.trackingEventName)==null?void 0:m.value)!=null?a:"Untitled Personalization";return f(J,{name:r,component:C=>t(C),variations:s,count:Number((i=(c=o==null?void 0:o.count)==null?void 0:c.value)!=null?i:1)})}function G(e,t){var n,p,m,a,c;let o=(p=(n=e==null?void 0:e.slots)==null?void 0:n.test)!=null?p:[],s=(c=(a=(m=e==null?void 0:e.parameters)==null?void 0:m.test)==null?void 0:a.value)!=null?c:"Untitled Test",r=$(o);return f(X,{variations:r,name:s,component:i=>t(i)})}function R({component:e,resolveRenderer:t,indexInSlot:o,slotName:s,parentComponent:r,slotChildrenCount:n,emptyPlaceholder:p}){var a,c;if(e.type===K)return G(e,i=>R({component:i,resolveRenderer:t}));if(e.type===D)return q(e,i=>R({component:i,resolveRenderer:t}));let m=t==null?void 0:t(e);if(m){let i=E(e),C=Boolean(e._id),l=e._id===F,d=C?[f("script",{"data-role":Y,"data-parent-type":r==null?void 0:r.type,"data-component-id":e._id,"data-slot-name":s,"data-component-index":o,"data-total-components":n,"data-component-name":e.type,"data-is-placeholder":l?"true":void 0,"data-component-title":(c=(a=e.parameters)==null?void 0:a.title)==null?void 0:c.value}),l&&p!==void 0?p():f(m,i),f("script",{"data-role":"component-end"})]:[f(m,i)];return f(b,{data:e,resolveRenderer:t},()=>d)}return 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),f("")}import{defineComponent as H,h as u}from"vue-demi";var Q={borderLeft:"10px solid #e42535",background:"rgba(122, 215, 218, 0.3)",color:"#1d3557",padding:"1rem",textAlign:"left",margin:"1rem 5vw"},Z={margin:"0 0 1rem"},xe=H({name:"DefaultNotImplementedComponent",props:{component:{type:Object,required:!0}},setup(e,{attrs:t}){var s;let o=(s=e.component)==null?void 0:s.type;return()=>u("div",{key:"content",style:{...Q}},[u("h2",{style:{...Z}},`Component: ${o}`),u("p",[u("strong",`${o} has no Vue implementation. It may need to be added to your `),u("code",{},"resolveRenderer()"),u("strong",{}," function.")]),u("details",{},[u("summary",{},"props/attributes"),u("pre",{style:{overflowX:"auto"}},`${JSON.stringify(t)}`)])])}});import{CANVAS_DRAFT_STATE as W,createEventBus as ee,subscribeToComposition as oe}from"@uniformdev/canvas";import{watch as te}from"vue-demi";async function Oe({enabled:e,projectId:t,compositionIdRef:o,effect:s}){let r;te([()=>e,()=>o.value,()=>t],async()=>{if(r==null||r(),!e||!o.value||!t)return;let n=await ee();n&&(r=oe({eventBus:n,compositionId:o.value,compositionState:W,projectId:t,callback:s,event:"updated"}))},{immediate:!0})}import{createCanvasChannel as ne,isUpdateCompositionMessage as re,IN_CONTEXT_EDITOR_QUERY_STRING_PARAM as se}from"@uniformdev/canvas";import{ref as ie,computed as ae,watch as x,onMounted as pe}from"vue-demi";var g="uniform-canvas-preview-script",Me=({apiUrl:e})=>async t=>{let o=await fetch(e,{method:"post",body:JSON.stringify({composition:t.composition,hash:t.hash}),headers:{"Content-Type":"application/json"}}),s=await o.json();if(!o.ok)throw new Error("Error reading enhanced composition");return s.composition},Le=({composition:e,enhance:t=o=>o.composition})=>{let o=ie(e);x([()=>e,o],()=>{e._id!==o.value._id&&(o.value=e)},{immediate:!0});let s=ae(()=>{var n;return N()?ne({broadcastTo:[(n=window.opener)!=null?n:window.top],listenTo:[window]}):void 0});return x([s,()=>t],()=>{if(!s.value)return;let r=s.value.on("update-composition",async n=>{if(re(n)){let p=await t(n);o.value=p}});return()=>{r()}},{immediate:!0}),pe(()=>{if(!N()||document.getElementById(g))return;let n=document.createElement("script");n.id=g,n.src=me(),n.async=!0,document.head.appendChild(n)}),{composition:o}};function me(){return`${window.document.referrer}files/canvas-in-context-embed/index.js`}function N(){if(typeof window=="undefined")return!1;let e=new URLSearchParams(window.location.search).has(se),t=Boolean(window.document.referrer.match(/(^https:\/\/|\.)(uniform.app|uniform.wtf|localhost:\d{4})\//));return e&&t}export{h as CANVAS_COMPOSITION_TYPE,P as CANVAS_SLOT_CONTENT_TYPE,b as Composition,xe as DefaultNotImplementedComponent,be as SlotContent,y as compositionInjectionKey,E as convertComponentToProps,Me as createApiEnhancer,v as resolveRendererInjectionKey,Oe as useCompositionEventEffect,Le as useCompositionInstance};
+import{CANVAS_ENRICHMENT_TAG_PARAM as _}from"@uniformdev/canvas";import{isUsingUniformContext as O,Track as A,TrackSlot as k}from"@uniformdev/context-vue";import{computed as T,defineComponent as U,h as j,inject as I,provide as S,resolveComponent as M}from"vue-demi";var h="Composition",P="SlotContent",y="uniformComposition",v="uniformResolveRenderer";var E=U({name:h,inheritAttrs:!1,props:{data:{type:Object,required:!0},resolveRenderer:{type:Function,default:()=>({type:e})=>M(e)},behaviorTracking:{type:String,default:"onView"}},setup(e,o){var c,a,C;let t=T(()=>{var d,l;return(l=e.data)!=null?l:(d=I(y))==null?void 0:d.value}),s=(c=e.resolveRenderer)!=null?c:I(v);S(y,t),S(v,s);let n=T(()=>{var d,l;return(l=(d=t.value)==null?void 0:d.slots)!=null?l:{}}),r=T(()=>{var d,l;return(l=(d=t.value)==null?void 0:d.parameters)!=null?l:{}}),p=T(()=>JSON.stringify(t.value)),m=(C=(a=t.value.parameters)==null?void 0:a[_])==null?void 0:C.value,i=()=>{var d,l;return(l=(d=o.slots).default)==null?void 0:l.call(d,{slots:n.value,parameters:r.value})};if(O()){let d=e.behaviorTracking==="onLoad"?k:A;return()=>j(d,{behavior:m,key:p.value},i)}return i}});import{defineComponent as L,h as u}from"vue-demi";var z={borderLeft:"10px solid #e42535",background:"rgba(122, 215, 218, 0.3)",color:"#1d3557",padding:"1rem",textAlign:"left",margin:"1rem 5vw"},D={margin:"0 0 1rem"},Te=L({name:"DefaultNotImplementedComponent",props:{component:{type:Object,required:!0}},setup(e,{attrs:o}){var s;let t=(s=e.component)==null?void 0:s.type;return()=>u("div",{key:"content",style:{...z}},[u("h2",{style:{...D}},`Component: ${t}`),u("p",[u("strong",`${t} has no Vue implementation. It may need to be added to your `),u("code",{},"resolveRenderer()"),u("strong",{}," function.")]),u("details",{},[u("summary",{},"props/attributes"),u("pre",{style:{overflowX:"auto"}},`${JSON.stringify(o)}`)])])}});import{CANVAS_PERSONALIZE_TYPE as K,CANVAS_TEST_TYPE as Y,IN_CONTEXT_EDITOR_COMPONENT_START_ROLE as B,mapSlotToPersonalizedVariations as $,mapSlotToTestVariations as F,PLACEHOLDER_ID as J}from"@uniformdev/canvas";import{Personalize as X,Test as q}from"@uniformdev/context-vue";import{computed as G,defineComponent as H,h as f,inject as w}from"vue-demi";function b(e){var n;let o=(n=e.parameters)!=null?n:{};return{...Object.entries(o).reduce((r,[p,{value:m}])=>({...r,[V(p)]:m}),{}),...e.data,component:e}}function V(e){return e.replace("$","")}var xe=H({name:P,inheritAttrs:!1,props:{name:{type:String},resolveRenderer:{type:Function}},setup(e,o){var m;let t=w(y),s=(m=e.resolveRenderer)!=null?m:w(v),n=o.slots.emptyPlaceholder;if(!t||!s)throw new Error("<SlotContent /> can only be used inside a <Composition />");let r=G(()=>{var i,c,a;return e.name?(c=(i=t==null?void 0:t.value.slots)==null?void 0:i[e.name])!=null?c:[]:Object.values((a=t==null?void 0:t.value.slots)!=null?a:{}).flat()}),p=r.value.map((i,c)=>{let a=R({component:i,resolveRenderer:s,indexInSlot:c,slotName:e.name,parentComponent:t.value,slotChildrenCount:r.value.length,emptyPlaceholder:n});return o.slots.default?o.slots.default({child:a,component:i}):a});return()=>p}});function Q(e,o){var r,p,m,i,c,a;let t=e==null?void 0:e.parameters,s=$((r=e.slots)==null?void 0:r.pz),n=(i=(m=(p=e.parameters)==null?void 0:p.trackingEventName)==null?void 0:m.value)!=null?i:"Untitled Personalization";return f(X,{name:n,component:C=>o(C),variations:s,count:Number((a=(c=t==null?void 0:t.count)==null?void 0:c.value)!=null?a:1)})}function Z(e,o){var r,p,m,i,c;let t=(p=(r=e==null?void 0:e.slots)==null?void 0:r.test)!=null?p:[],s=(c=(i=(m=e==null?void 0:e.parameters)==null?void 0:m.test)==null?void 0:i.value)!=null?c:"Untitled Test",n=F(t);return f(q,{variations:n,name:s,component:a=>o(a)})}function R({component:e,resolveRenderer:o,indexInSlot:t,slotName:s,parentComponent:n,slotChildrenCount:r,emptyPlaceholder:p}){var i,c;if(e.type===Y)return Z(e,a=>R({component:a,resolveRenderer:o}));if(e.type===K)return Q(e,a=>R({component:a,resolveRenderer:o}));let m=o==null?void 0:o(e);if(m){let a=b(e),C=Boolean(e._id),d=e._id===J,l=C?[f("script",{"data-role":B,"data-parent-id":n==null?void 0:n._id,"data-parent-type":n==null?void 0:n.type,"data-component-id":e._id,"data-slot-name":s,"data-component-index":t,"data-total-components":r,"data-component-name":e.type,"data-is-placeholder":d?"true":void 0,"data-component-title":(c=(i=e.parameters)==null?void 0:i.title)==null?void 0:c.value}),d&&p!==void 0?p():f(m,a),f("script",{"data-role":"component-end"})]:[f(m,a)];return f(E,{data:e,resolveRenderer:o},()=>l)}return 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),f("")}import{CANVAS_DRAFT_STATE as W,createEventBus as ee,subscribeToComposition as te}from"@uniformdev/canvas";import{watch as oe}from"vue-demi";async function Oe({enabled:e,projectId:o,compositionIdRef:t,effect:s}){let n;oe([()=>e,()=>t.value,()=>o],async()=>{if(n==null||n(),!e||!t.value||!o)return;let r=await ee();r&&(n=te({eventBus:r,compositionId:t.value,compositionState:W,projectId:o,callback:s,event:"updated"}))},{immediate:!0})}import{createCanvasChannel as ne,IN_CONTEXT_EDITOR_QUERY_STRING_PARAM as re,isUpdateCompositionMessage as se}from"@uniformdev/canvas";import{computed as ae,onMounted as ie,ref as pe,watch as x}from"vue-demi";var g="uniform-canvas-preview-script",Le=({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"}}),s=await t.json();if(!t.ok)throw new Error("Error reading enhanced composition");return s.composition},ze=({initialCompositionValue:e,enhance:o=t=>t.composition})=>{let t=pe(e);x([()=>e,t],()=>{var n;!e||(e==null?void 0:e._id)===((n=t.value)==null?void 0:n._id)||(t.value=e)},{immediate:!0});let s=ae(()=>{var r;return N()?ne({broadcastTo:[(r=window.opener)!=null?r:window.top],listenTo:[window]}):void 0});return x([s,()=>o],()=>{if(!s.value)return;let n=s.value.on("update-composition",async r=>{if(se(r)){let p=await o(r);t.value=p}});return()=>{n()}},{immediate:!0}),ie(()=>{if(!N()||document.getElementById(g))return;let r=document.createElement("script");r.id=g,r.src=me(),r.async=!0,document.head.appendChild(r)}),{composition:t}};function me(){return`${window.document.referrer}files/canvas-in-context-embed/index.js`}function N(){if(typeof window=="undefined")return!1;let e=new URLSearchParams(window.location.search).has(re),o=Boolean(window.document.referrer.match(/(^https:\/\/|\.)(uniform.app|uniform.wtf|localhost:\d{4})\//));return e&&o}export{h as CANVAS_COMPOSITION_TYPE,P as CANVAS_SLOT_CONTENT_TYPE,E as Composition,Te as DefaultNotImplementedComponent,xe as SlotContent,y as compositionInjectionKey,b as convertComponentToProps,Le as createApiEnhancer,v as resolveRendererInjectionKey,Oe as useCompositionEventEffect,ze as useContextualEditing};

package/dist/index.js

@@ -1 +1 @@
-"use strict";var E=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var M=Object.prototype.hasOwnProperty;var L=(e,t)=>{for(var o in t)E(e,o,{get:t[o],enumerable:!0})},z=(e,t,o,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of j(t))!M.call(e,n)&&n!==o&&E(e,n,{get:()=>t[n],enumerable:!(s=V(t,n))||s.enumerable});return e};var D=e=>z(E({},"__esModule",{value:!0}),e);var Z={};L(Z,{CANVAS_COMPOSITION_TYPE:()=>w,CANVAS_SLOT_CONTENT_TYPE:()=>x,Composition:()=>g,DefaultNotImplementedComponent:()=>X,SlotContent:()=>Y,compositionInjectionKey:()=>R,convertComponentToProps:()=>N,createApiEnhancer:()=>G,resolveRendererInjectionKey:()=>h,useCompositionEventEffect:()=>q,useCompositionInstance:()=>H});module.exports=D(Z);var p=require("vue-demi");var w="Composition",x="SlotContent",R="uniformComposition",h="uniformResolveRenderer";var O=require("@uniformdev/canvas"),P=require("@uniformdev/context-vue");var g=(0,p.defineComponent)({name:w,inheritAttrs:!1,props:{data:{type:Object,required:!0},resolveRenderer:{type:Function,default:()=>({type:e})=>(0,p.resolveComponent)(e)},behaviorTracking:{type:String,default:"onView"}},setup(e,t){var l,i,T;let o=(0,p.computed)(()=>{var d,f;return(f=e.data)!=null?f:(d=(0,p.inject)(R))==null?void 0:d.value}),s=(l=e.resolveRenderer)!=null?l:(0,p.inject)(h);(0,p.provide)(R,o),(0,p.provide)(h,s);let n=(0,p.computed)(()=>{var d,f;return(f=(d=o.value)==null?void 0:d.slots)!=null?f:{}}),r=(0,p.computed)(()=>{var d,f;return(f=(d=o.value)==null?void 0:d.parameters)!=null?f:{}}),m=(0,p.computed)(()=>JSON.stringify(o.value)),c=(T=(i=o.value.parameters)==null?void 0:i[O.CANVAS_ENRICHMENT_TAG_PARAM])==null?void 0:T.value,a=()=>{var d,f;return(f=(d=t.slots).default)==null?void 0:f.call(d,{slots:n.value,parameters:r.value})};if((0,P.isUsingUniformContext)()){let d=e.behaviorTracking==="onLoad"?P.TrackSlot:P.Track;return()=>(0,p.h)(d,{behavior:c,key:m.value},a)}return a}});var u=require("vue-demi"),C=require("@uniformdev/canvas"),b=require("@uniformdev/context-vue");function N(e){var n;let t=(n=e.parameters)!=null?n:{};return{...Object.entries(t).reduce((r,[m,{value:c}])=>({...r,[K(m)]:c}),{}),...e.data,component:e}}function K(e){return e.replace("$","")}var Y=(0,u.defineComponent)({name:x,inheritAttrs:!1,props:{name:{type:String},resolveRenderer:{type:Function}},setup(e,t){var c;let o=(0,u.inject)(R),s=(c=e.resolveRenderer)!=null?c:(0,u.inject)(h),n=t.slots.emptyPlaceholder;if(!o||!s)throw new Error("<SlotContent /> can only be used inside a <Composition />");let r=(0,u.computed)(()=>{var a,l,i;return e.name?(l=(a=o==null?void 0:o.value.slots)==null?void 0:a[e.name])!=null?l:[]:Object.values((i=o==null?void 0:o.value.slots)!=null?i:{}).flat()}),m=r.value.map((a,l)=>{let i=_({component:a,resolveRenderer:s,indexInSlot:l,slotName:e.name,parentComponent:o.value,slotChildrenCount:r.value.length,emptyPlaceholder:n});return t.slots.default?t.slots.default({child:i,component:a}):i});return()=>m}});function B(e,t){var r,m,c,a,l,i;let o=e==null?void 0:e.parameters,s=(0,C.mapSlotToPersonalizedVariations)((r=e.slots)==null?void 0:r.pz),n=(a=(c=(m=e.parameters)==null?void 0:m.trackingEventName)==null?void 0:c.value)!=null?a:"Untitled Personalization";return(0,u.h)(b.Personalize,{name:n,component:T=>t(T),variations:s,count:Number((i=(l=o==null?void 0:o.count)==null?void 0:l.value)!=null?i:1)})}function $(e,t){var r,m,c,a,l;let o=(m=(r=e==null?void 0:e.slots)==null?void 0:r.test)!=null?m:[],s=(l=(a=(c=e==null?void 0:e.parameters)==null?void 0:c.test)==null?void 0:a.value)!=null?l:"Untitled Test",n=(0,C.mapSlotToTestVariations)(o);return(0,u.h)(b.Test,{variations:n,name:s,component:i=>t(i)})}function _({component:e,resolveRenderer:t,indexInSlot:o,slotName:s,parentComponent:n,slotChildrenCount:r,emptyPlaceholder:m}){var a,l;if(e.type===C.CANVAS_TEST_TYPE)return $(e,i=>_({component:i,resolveRenderer:t}));if(e.type===C.CANVAS_PERSONALIZE_TYPE)return B(e,i=>_({component:i,resolveRenderer:t}));let c=t==null?void 0:t(e);if(c){let i=N(e),T=Boolean(e._id),d=e._id===C.PLACEHOLDER_ID,f=T?[(0,u.h)("script",{"data-role":C.IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,"data-parent-type":n==null?void 0:n.type,"data-component-id":e._id,"data-slot-name":s,"data-component-index":o,"data-total-components":r,"data-component-name":e.type,"data-is-placeholder":d?"true":void 0,"data-component-title":(l=(a=e.parameters)==null?void 0:a.title)==null?void 0:l.value}),d&&m!==void 0?m():(0,u.h)(c,i),(0,u.h)("script",{"data-role":"component-end"})]:[(0,u.h)(c,i)];return(0,u.h)(g,{data:e,resolveRenderer:t},()=>f)}return 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),(0,u.h)("")}var y=require("vue-demi"),F={borderLeft:"10px solid #e42535",background:"rgba(122, 215, 218, 0.3)",color:"#1d3557",padding:"1rem",textAlign:"left",margin:"1rem 5vw"},J={margin:"0 0 1rem"},X=(0,y.defineComponent)({name:"DefaultNotImplementedComponent",props:{component:{type:Object,required:!0}},setup(e,{attrs:t}){var s;let o=(s=e.component)==null?void 0:s.type;return()=>(0,y.h)("div",{key:"content",style:{...F}},[(0,y.h)("h2",{style:{...J}},`Component: ${o}`),(0,y.h)("p",[(0,y.h)("strong",`${o} has no Vue implementation. It may need to be added to your `),(0,y.h)("code",{},"resolveRenderer()"),(0,y.h)("strong",{}," function.")]),(0,y.h)("details",{},[(0,y.h)("summary",{},"props/attributes"),(0,y.h)("pre",{style:{overflowX:"auto"}},`${JSON.stringify(t)}`)])])}});var I=require("@uniformdev/canvas"),A=require("vue-demi");async function q({enabled:e,projectId:t,compositionIdRef:o,effect:s}){let n;(0,A.watch)([()=>e,()=>o.value,()=>t],async()=>{if(n==null||n(),!e||!o.value||!t)return;let r=await(0,I.createEventBus)();r&&(n=(0,I.subscribeToComposition)({eventBus:r,compositionId:o.value,compositionState:I.CANVAS_DRAFT_STATE,projectId:t,callback:s,event:"updated"}))},{immediate:!0})}var S=require("@uniformdev/canvas"),v=require("vue-demi"),k="uniform-canvas-preview-script",G=({apiUrl:e})=>async t=>{let o=await fetch(e,{method:"post",body:JSON.stringify({composition:t.composition,hash:t.hash}),headers:{"Content-Type":"application/json"}}),s=await o.json();if(!o.ok)throw new Error("Error reading enhanced composition");return s.composition},H=({composition:e,enhance:t=o=>o.composition})=>{let o=(0,v.ref)(e);(0,v.watch)([()=>e,o],()=>{e._id!==o.value._id&&(o.value=e)},{immediate:!0});let s=(0,v.computed)(()=>{var r;return U()?(0,S.createCanvasChannel)({broadcastTo:[(r=window.opener)!=null?r:window.top],listenTo:[window]}):void 0});return(0,v.watch)([s,()=>t],()=>{if(!s.value)return;let n=s.value.on("update-composition",async r=>{if((0,S.isUpdateCompositionMessage)(r)){let m=await t(r);o.value=m}});return()=>{n()}},{immediate:!0}),(0,v.onMounted)(()=>{if(!U()||document.getElementById(k))return;let r=document.createElement("script");r.id=k,r.src=Q(),r.async=!0,document.head.appendChild(r)}),{composition:o}};function Q(){return`${window.document.referrer}files/canvas-in-context-embed/index.js`}function U(){if(typeof window=="undefined")return!1;let e=new URLSearchParams(window.location.search).has(S.IN_CONTEXT_EDITOR_QUERY_STRING_PARAM),t=Boolean(window.document.referrer.match(/(^https:\/\/|\.)(uniform.app|uniform.wtf|localhost:\d{4})\//));return e&&t}0&&(module.exports={CANVAS_COMPOSITION_TYPE,CANVAS_SLOT_CONTENT_TYPE,Composition,DefaultNotImplementedComponent,SlotContent,compositionInjectionKey,convertComponentToProps,createApiEnhancer,resolveRendererInjectionKey,useCompositionEventEffect,useCompositionInstance});
+"use strict";var b=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var L=Object.prototype.hasOwnProperty;var z=(e,o)=>{for(var t in o)b(e,t,{get:o[t],enumerable:!0})},D=(e,o,t,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of M(o))!L.call(e,n)&&n!==t&&b(e,n,{get:()=>o[n],enumerable:!(s=j(o,n))||s.enumerable});return e};var V=e=>D(b({},"__esModule",{value:!0}),e);var Z={};z(Z,{CANVAS_COMPOSITION_TYPE:()=>w,CANVAS_SLOT_CONTENT_TYPE:()=>x,Composition:()=>g,DefaultNotImplementedComponent:()=>B,SlotContent:()=>F,compositionInjectionKey:()=>R,convertComponentToProps:()=>N,createApiEnhancer:()=>G,resolveRendererInjectionKey:()=>h,useCompositionEventEffect:()=>q,useContextualEditing:()=>H});module.exports=V(Z);var O=require("@uniformdev/canvas"),P=require("@uniformdev/context-vue"),p=require("vue-demi");var w="Composition",x="SlotContent",R="uniformComposition",h="uniformResolveRenderer";var g=(0,p.defineComponent)({name:w,inheritAttrs:!1,props:{data:{type:Object,required:!0},resolveRenderer:{type:Function,default:()=>({type:e})=>(0,p.resolveComponent)(e)},behaviorTracking:{type:String,default:"onView"}},setup(e,o){var d,a,T;let t=(0,p.computed)(()=>{var l,f;return(f=e.data)!=null?f:(l=(0,p.inject)(R))==null?void 0:l.value}),s=(d=e.resolveRenderer)!=null?d:(0,p.inject)(h);(0,p.provide)(R,t),(0,p.provide)(h,s);let n=(0,p.computed)(()=>{var l,f;return(f=(l=t.value)==null?void 0:l.slots)!=null?f:{}}),r=(0,p.computed)(()=>{var l,f;return(f=(l=t.value)==null?void 0:l.parameters)!=null?f:{}}),m=(0,p.computed)(()=>JSON.stringify(t.value)),c=(T=(a=t.value.parameters)==null?void 0:a[O.CANVAS_ENRICHMENT_TAG_PARAM])==null?void 0:T.value,i=()=>{var l,f;return(f=(l=o.slots).default)==null?void 0:f.call(l,{slots:n.value,parameters:r.value})};if((0,P.isUsingUniformContext)()){let l=e.behaviorTracking==="onLoad"?P.TrackSlot:P.Track;return()=>(0,p.h)(l,{behavior:c,key:m.value},i)}return i}});var C=require("vue-demi"),K={borderLeft:"10px solid #e42535",background:"rgba(122, 215, 218, 0.3)",color:"#1d3557",padding:"1rem",textAlign:"left",margin:"1rem 5vw"},Y={margin:"0 0 1rem"},B=(0,C.defineComponent)({name:"DefaultNotImplementedComponent",props:{component:{type:Object,required:!0}},setup(e,{attrs:o}){var s;let t=(s=e.component)==null?void 0:s.type;return()=>(0,C.h)("div",{key:"content",style:{...K}},[(0,C.h)("h2",{style:{...Y}},`Component: ${t}`),(0,C.h)("p",[(0,C.h)("strong",`${t} has no Vue implementation. It may need to be added to your `),(0,C.h)("code",{},"resolveRenderer()"),(0,C.h)("strong",{}," function.")]),(0,C.h)("details",{},[(0,C.h)("summary",{},"props/attributes"),(0,C.h)("pre",{style:{overflowX:"auto"}},`${JSON.stringify(o)}`)])])}});var y=require("@uniformdev/canvas"),E=require("@uniformdev/context-vue"),u=require("vue-demi");function N(e){var n;let o=(n=e.parameters)!=null?n:{};return{...Object.entries(o).reduce((r,[m,{value:c}])=>({...r,[$(m)]:c}),{}),...e.data,component:e}}function $(e){return e.replace("$","")}var F=(0,u.defineComponent)({name:x,inheritAttrs:!1,props:{name:{type:String},resolveRenderer:{type:Function}},setup(e,o){var c;let t=(0,u.inject)(R),s=(c=e.resolveRenderer)!=null?c:(0,u.inject)(h),n=o.slots.emptyPlaceholder;if(!t||!s)throw new Error("<SlotContent /> can only be used inside a <Composition />");let r=(0,u.computed)(()=>{var i,d,a;return e.name?(d=(i=t==null?void 0:t.value.slots)==null?void 0:i[e.name])!=null?d:[]:Object.values((a=t==null?void 0:t.value.slots)!=null?a:{}).flat()}),m=r.value.map((i,d)=>{let a=_({component:i,resolveRenderer:s,indexInSlot:d,slotName:e.name,parentComponent:t.value,slotChildrenCount:r.value.length,emptyPlaceholder:n});return o.slots.default?o.slots.default({child:a,component:i}):a});return()=>m}});function J(e,o){var r,m,c,i,d,a;let t=e==null?void 0:e.parameters,s=(0,y.mapSlotToPersonalizedVariations)((r=e.slots)==null?void 0:r.pz),n=(i=(c=(m=e.parameters)==null?void 0:m.trackingEventName)==null?void 0:c.value)!=null?i:"Untitled Personalization";return(0,u.h)(E.Personalize,{name:n,component:T=>o(T),variations:s,count:Number((a=(d=t==null?void 0:t.count)==null?void 0:d.value)!=null?a:1)})}function X(e,o){var r,m,c,i,d;let t=(m=(r=e==null?void 0:e.slots)==null?void 0:r.test)!=null?m:[],s=(d=(i=(c=e==null?void 0:e.parameters)==null?void 0:c.test)==null?void 0:i.value)!=null?d:"Untitled Test",n=(0,y.mapSlotToTestVariations)(t);return(0,u.h)(E.Test,{variations:n,name:s,component:a=>o(a)})}function _({component:e,resolveRenderer:o,indexInSlot:t,slotName:s,parentComponent:n,slotChildrenCount:r,emptyPlaceholder:m}){var i,d;if(e.type===y.CANVAS_TEST_TYPE)return X(e,a=>_({component:a,resolveRenderer:o}));if(e.type===y.CANVAS_PERSONALIZE_TYPE)return J(e,a=>_({component:a,resolveRenderer:o}));let c=o==null?void 0:o(e);if(c){let a=N(e),T=Boolean(e._id),l=e._id===y.PLACEHOLDER_ID,f=T?[(0,u.h)("script",{"data-role":y.IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,"data-parent-id":n==null?void 0:n._id,"data-parent-type":n==null?void 0:n.type,"data-component-id":e._id,"data-slot-name":s,"data-component-index":t,"data-total-components":r,"data-component-name":e.type,"data-is-placeholder":l?"true":void 0,"data-component-title":(d=(i=e.parameters)==null?void 0:i.title)==null?void 0:d.value}),l&&m!==void 0?m():(0,u.h)(c,a),(0,u.h)("script",{"data-role":"component-end"})]:[(0,u.h)(c,a)];return(0,u.h)(g,{data:e,resolveRenderer:o},()=>f)}return 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),(0,u.h)("")}var I=require("@uniformdev/canvas"),A=require("vue-demi");async function q({enabled:e,projectId:o,compositionIdRef:t,effect:s}){let n;(0,A.watch)([()=>e,()=>t.value,()=>o],async()=>{if(n==null||n(),!e||!t.value||!o)return;let r=await(0,I.createEventBus)();r&&(n=(0,I.subscribeToComposition)({eventBus:r,compositionId:t.value,compositionState:I.CANVAS_DRAFT_STATE,projectId:o,callback:s,event:"updated"}))},{immediate:!0})}var S=require("@uniformdev/canvas"),v=require("vue-demi"),k="uniform-canvas-preview-script",G=({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"}}),s=await t.json();if(!t.ok)throw new Error("Error reading enhanced composition");return s.composition},H=({initialCompositionValue:e,enhance:o=t=>t.composition})=>{let t=(0,v.ref)(e);(0,v.watch)([()=>e,t],()=>{var n;!e||(e==null?void 0:e._id)===((n=t.value)==null?void 0:n._id)||(t.value=e)},{immediate:!0});let s=(0,v.computed)(()=>{var r;return U()?(0,S.createCanvasChannel)({broadcastTo:[(r=window.opener)!=null?r:window.top],listenTo:[window]}):void 0});return(0,v.watch)([s,()=>o],()=>{if(!s.value)return;let n=s.value.on("update-composition",async r=>{if((0,S.isUpdateCompositionMessage)(r)){let m=await o(r);t.value=m}});return()=>{n()}},{immediate:!0}),(0,v.onMounted)(()=>{if(!U()||document.getElementById(k))return;let r=document.createElement("script");r.id=k,r.src=Q(),r.async=!0,document.head.appendChild(r)}),{composition:t}};function Q(){return`${window.document.referrer}files/canvas-in-context-embed/index.js`}function U(){if(typeof window=="undefined")return!1;let e=new URLSearchParams(window.location.search).has(S.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={CANVAS_COMPOSITION_TYPE,CANVAS_SLOT_CONTENT_TYPE,Composition,DefaultNotImplementedComponent,SlotContent,compositionInjectionKey,convertComponentToProps,createApiEnhancer,resolveRendererInjectionKey,useCompositionEventEffect,useContextualEditing});

package/dist/index.mjs

@@ -1 +1 @@
-import{defineComponent as _,computed as T,h as O,provide as I,inject as S,resolveComponent as A}from"vue-demi";var h="Composition",P="SlotContent",y="uniformComposition",v="uniformResolveRenderer";import{CANVAS_ENRICHMENT_TAG_PARAM as k}from"@uniformdev/canvas";import{Track as U,TrackSlot as V,isUsingUniformContext as j}from"@uniformdev/context-vue";var b=_({name:h,inheritAttrs:!1,props:{data:{type:Object,required:!0},resolveRenderer:{type:Function,default:()=>({type:e})=>A(e)},behaviorTracking:{type:String,default:"onView"}},setup(e,t){var c,i,C;let o=T(()=>{var l,d;return(d=e.data)!=null?d:(l=S(y))==null?void 0:l.value}),s=(c=e.resolveRenderer)!=null?c:S(v);I(y,o),I(v,s);let r=T(()=>{var l,d;return(d=(l=o.value)==null?void 0:l.slots)!=null?d:{}}),n=T(()=>{var l,d;return(d=(l=o.value)==null?void 0:l.parameters)!=null?d:{}}),p=T(()=>JSON.stringify(o.value)),m=(C=(i=o.value.parameters)==null?void 0:i[k])==null?void 0:C.value,a=()=>{var l,d;return(d=(l=t.slots).default)==null?void 0:d.call(l,{slots:r.value,parameters:n.value})};if(j()){let l=e.behaviorTracking==="onLoad"?V:U;return()=>O(l,{behavior:m,key:p.value},a)}return a}});import{defineComponent as L,computed as z,h as f,inject as w}from"vue-demi";import{CANVAS_PERSONALIZE_TYPE as D,CANVAS_TEST_TYPE as K,IN_CONTEXT_EDITOR_COMPONENT_START_ROLE as Y,mapSlotToPersonalizedVariations as B,mapSlotToTestVariations as $,PLACEHOLDER_ID as F}from"@uniformdev/canvas";import{Personalize as J,Test as X}from"@uniformdev/context-vue";function E(e){var r;let t=(r=e.parameters)!=null?r:{};return{...Object.entries(t).reduce((n,[p,{value:m}])=>({...n,[M(p)]:m}),{}),...e.data,component:e}}function M(e){return e.replace("$","")}var be=L({name:P,inheritAttrs:!1,props:{name:{type:String},resolveRenderer:{type:Function}},setup(e,t){var m;let o=w(y),s=(m=e.resolveRenderer)!=null?m:w(v),r=t.slots.emptyPlaceholder;if(!o||!s)throw new Error("<SlotContent /> can only be used inside a <Composition />");let n=z(()=>{var a,c,i;return e.name?(c=(a=o==null?void 0:o.value.slots)==null?void 0:a[e.name])!=null?c:[]:Object.values((i=o==null?void 0:o.value.slots)!=null?i:{}).flat()}),p=n.value.map((a,c)=>{let i=R({component:a,resolveRenderer:s,indexInSlot:c,slotName:e.name,parentComponent:o.value,slotChildrenCount:n.value.length,emptyPlaceholder:r});return t.slots.default?t.slots.default({child:i,component:a}):i});return()=>p}});function q(e,t){var n,p,m,a,c,i;let o=e==null?void 0:e.parameters,s=B((n=e.slots)==null?void 0:n.pz),r=(a=(m=(p=e.parameters)==null?void 0:p.trackingEventName)==null?void 0:m.value)!=null?a:"Untitled Personalization";return f(J,{name:r,component:C=>t(C),variations:s,count:Number((i=(c=o==null?void 0:o.count)==null?void 0:c.value)!=null?i:1)})}function G(e,t){var n,p,m,a,c;let o=(p=(n=e==null?void 0:e.slots)==null?void 0:n.test)!=null?p:[],s=(c=(a=(m=e==null?void 0:e.parameters)==null?void 0:m.test)==null?void 0:a.value)!=null?c:"Untitled Test",r=$(o);return f(X,{variations:r,name:s,component:i=>t(i)})}function R({component:e,resolveRenderer:t,indexInSlot:o,slotName:s,parentComponent:r,slotChildrenCount:n,emptyPlaceholder:p}){var a,c;if(e.type===K)return G(e,i=>R({component:i,resolveRenderer:t}));if(e.type===D)return q(e,i=>R({component:i,resolveRenderer:t}));let m=t==null?void 0:t(e);if(m){let i=E(e),C=Boolean(e._id),l=e._id===F,d=C?[f("script",{"data-role":Y,"data-parent-type":r==null?void 0:r.type,"data-component-id":e._id,"data-slot-name":s,"data-component-index":o,"data-total-components":n,"data-component-name":e.type,"data-is-placeholder":l?"true":void 0,"data-component-title":(c=(a=e.parameters)==null?void 0:a.title)==null?void 0:c.value}),l&&p!==void 0?p():f(m,i),f("script",{"data-role":"component-end"})]:[f(m,i)];return f(b,{data:e,resolveRenderer:t},()=>d)}return 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),f("")}import{defineComponent as H,h as u}from"vue-demi";var Q={borderLeft:"10px solid #e42535",background:"rgba(122, 215, 218, 0.3)",color:"#1d3557",padding:"1rem",textAlign:"left",margin:"1rem 5vw"},Z={margin:"0 0 1rem"},xe=H({name:"DefaultNotImplementedComponent",props:{component:{type:Object,required:!0}},setup(e,{attrs:t}){var s;let o=(s=e.component)==null?void 0:s.type;return()=>u("div",{key:"content",style:{...Q}},[u("h2",{style:{...Z}},`Component: ${o}`),u("p",[u("strong",`${o} has no Vue implementation. It may need to be added to your `),u("code",{},"resolveRenderer()"),u("strong",{}," function.")]),u("details",{},[u("summary",{},"props/attributes"),u("pre",{style:{overflowX:"auto"}},`${JSON.stringify(t)}`)])])}});import{CANVAS_DRAFT_STATE as W,createEventBus as ee,subscribeToComposition as oe}from"@uniformdev/canvas";import{watch as te}from"vue-demi";async function Oe({enabled:e,projectId:t,compositionIdRef:o,effect:s}){let r;te([()=>e,()=>o.value,()=>t],async()=>{if(r==null||r(),!e||!o.value||!t)return;let n=await ee();n&&(r=oe({eventBus:n,compositionId:o.value,compositionState:W,projectId:t,callback:s,event:"updated"}))},{immediate:!0})}import{createCanvasChannel as ne,isUpdateCompositionMessage as re,IN_CONTEXT_EDITOR_QUERY_STRING_PARAM as se}from"@uniformdev/canvas";import{ref as ie,computed as ae,watch as x,onMounted as pe}from"vue-demi";var g="uniform-canvas-preview-script",Me=({apiUrl:e})=>async t=>{let o=await fetch(e,{method:"post",body:JSON.stringify({composition:t.composition,hash:t.hash}),headers:{"Content-Type":"application/json"}}),s=await o.json();if(!o.ok)throw new Error("Error reading enhanced composition");return s.composition},Le=({composition:e,enhance:t=o=>o.composition})=>{let o=ie(e);x([()=>e,o],()=>{e._id!==o.value._id&&(o.value=e)},{immediate:!0});let s=ae(()=>{var n;return N()?ne({broadcastTo:[(n=window.opener)!=null?n:window.top],listenTo:[window]}):void 0});return x([s,()=>t],()=>{if(!s.value)return;let r=s.value.on("update-composition",async n=>{if(re(n)){let p=await t(n);o.value=p}});return()=>{r()}},{immediate:!0}),pe(()=>{if(!N()||document.getElementById(g))return;let n=document.createElement("script");n.id=g,n.src=me(),n.async=!0,document.head.appendChild(n)}),{composition:o}};function me(){return`${window.document.referrer}files/canvas-in-context-embed/index.js`}function N(){if(typeof window=="undefined")return!1;let e=new URLSearchParams(window.location.search).has(se),t=Boolean(window.document.referrer.match(/(^https:\/\/|\.)(uniform.app|uniform.wtf|localhost:\d{4})\//));return e&&t}export{h as CANVAS_COMPOSITION_TYPE,P as CANVAS_SLOT_CONTENT_TYPE,b as Composition,xe as DefaultNotImplementedComponent,be as SlotContent,y as compositionInjectionKey,E as convertComponentToProps,Me as createApiEnhancer,v as resolveRendererInjectionKey,Oe as useCompositionEventEffect,Le as useCompositionInstance};
+import{CANVAS_ENRICHMENT_TAG_PARAM as _}from"@uniformdev/canvas";import{isUsingUniformContext as O,Track as A,TrackSlot as k}from"@uniformdev/context-vue";import{computed as T,defineComponent as U,h as j,inject as I,provide as S,resolveComponent as M}from"vue-demi";var h="Composition",P="SlotContent",y="uniformComposition",v="uniformResolveRenderer";var E=U({name:h,inheritAttrs:!1,props:{data:{type:Object,required:!0},resolveRenderer:{type:Function,default:()=>({type:e})=>M(e)},behaviorTracking:{type:String,default:"onView"}},setup(e,o){var c,a,C;let t=T(()=>{var d,l;return(l=e.data)!=null?l:(d=I(y))==null?void 0:d.value}),s=(c=e.resolveRenderer)!=null?c:I(v);S(y,t),S(v,s);let n=T(()=>{var d,l;return(l=(d=t.value)==null?void 0:d.slots)!=null?l:{}}),r=T(()=>{var d,l;return(l=(d=t.value)==null?void 0:d.parameters)!=null?l:{}}),p=T(()=>JSON.stringify(t.value)),m=(C=(a=t.value.parameters)==null?void 0:a[_])==null?void 0:C.value,i=()=>{var d,l;return(l=(d=o.slots).default)==null?void 0:l.call(d,{slots:n.value,parameters:r.value})};if(O()){let d=e.behaviorTracking==="onLoad"?k:A;return()=>j(d,{behavior:m,key:p.value},i)}return i}});import{defineComponent as L,h as u}from"vue-demi";var z={borderLeft:"10px solid #e42535",background:"rgba(122, 215, 218, 0.3)",color:"#1d3557",padding:"1rem",textAlign:"left",margin:"1rem 5vw"},D={margin:"0 0 1rem"},Te=L({name:"DefaultNotImplementedComponent",props:{component:{type:Object,required:!0}},setup(e,{attrs:o}){var s;let t=(s=e.component)==null?void 0:s.type;return()=>u("div",{key:"content",style:{...z}},[u("h2",{style:{...D}},`Component: ${t}`),u("p",[u("strong",`${t} has no Vue implementation. It may need to be added to your `),u("code",{},"resolveRenderer()"),u("strong",{}," function.")]),u("details",{},[u("summary",{},"props/attributes"),u("pre",{style:{overflowX:"auto"}},`${JSON.stringify(o)}`)])])}});import{CANVAS_PERSONALIZE_TYPE as K,CANVAS_TEST_TYPE as Y,IN_CONTEXT_EDITOR_COMPONENT_START_ROLE as B,mapSlotToPersonalizedVariations as $,mapSlotToTestVariations as F,PLACEHOLDER_ID as J}from"@uniformdev/canvas";import{Personalize as X,Test as q}from"@uniformdev/context-vue";import{computed as G,defineComponent as H,h as f,inject as w}from"vue-demi";function b(e){var n;let o=(n=e.parameters)!=null?n:{};return{...Object.entries(o).reduce((r,[p,{value:m}])=>({...r,[V(p)]:m}),{}),...e.data,component:e}}function V(e){return e.replace("$","")}var xe=H({name:P,inheritAttrs:!1,props:{name:{type:String},resolveRenderer:{type:Function}},setup(e,o){var m;let t=w(y),s=(m=e.resolveRenderer)!=null?m:w(v),n=o.slots.emptyPlaceholder;if(!t||!s)throw new Error("<SlotContent /> can only be used inside a <Composition />");let r=G(()=>{var i,c,a;return e.name?(c=(i=t==null?void 0:t.value.slots)==null?void 0:i[e.name])!=null?c:[]:Object.values((a=t==null?void 0:t.value.slots)!=null?a:{}).flat()}),p=r.value.map((i,c)=>{let a=R({component:i,resolveRenderer:s,indexInSlot:c,slotName:e.name,parentComponent:t.value,slotChildrenCount:r.value.length,emptyPlaceholder:n});return o.slots.default?o.slots.default({child:a,component:i}):a});return()=>p}});function Q(e,o){var r,p,m,i,c,a;let t=e==null?void 0:e.parameters,s=$((r=e.slots)==null?void 0:r.pz),n=(i=(m=(p=e.parameters)==null?void 0:p.trackingEventName)==null?void 0:m.value)!=null?i:"Untitled Personalization";return f(X,{name:n,component:C=>o(C),variations:s,count:Number((a=(c=t==null?void 0:t.count)==null?void 0:c.value)!=null?a:1)})}function Z(e,o){var r,p,m,i,c;let t=(p=(r=e==null?void 0:e.slots)==null?void 0:r.test)!=null?p:[],s=(c=(i=(m=e==null?void 0:e.parameters)==null?void 0:m.test)==null?void 0:i.value)!=null?c:"Untitled Test",n=F(t);return f(q,{variations:n,name:s,component:a=>o(a)})}function R({component:e,resolveRenderer:o,indexInSlot:t,slotName:s,parentComponent:n,slotChildrenCount:r,emptyPlaceholder:p}){var i,c;if(e.type===Y)return Z(e,a=>R({component:a,resolveRenderer:o}));if(e.type===K)return Q(e,a=>R({component:a,resolveRenderer:o}));let m=o==null?void 0:o(e);if(m){let a=b(e),C=Boolean(e._id),d=e._id===J,l=C?[f("script",{"data-role":B,"data-parent-id":n==null?void 0:n._id,"data-parent-type":n==null?void 0:n.type,"data-component-id":e._id,"data-slot-name":s,"data-component-index":t,"data-total-components":r,"data-component-name":e.type,"data-is-placeholder":d?"true":void 0,"data-component-title":(c=(i=e.parameters)==null?void 0:i.title)==null?void 0:c.value}),d&&p!==void 0?p():f(m,a),f("script",{"data-role":"component-end"})]:[f(m,a)];return f(E,{data:e,resolveRenderer:o},()=>l)}return 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),f("")}import{CANVAS_DRAFT_STATE as W,createEventBus as ee,subscribeToComposition as te}from"@uniformdev/canvas";import{watch as oe}from"vue-demi";async function Oe({enabled:e,projectId:o,compositionIdRef:t,effect:s}){let n;oe([()=>e,()=>t.value,()=>o],async()=>{if(n==null||n(),!e||!t.value||!o)return;let r=await ee();r&&(n=te({eventBus:r,compositionId:t.value,compositionState:W,projectId:o,callback:s,event:"updated"}))},{immediate:!0})}import{createCanvasChannel as ne,IN_CONTEXT_EDITOR_QUERY_STRING_PARAM as re,isUpdateCompositionMessage as se}from"@uniformdev/canvas";import{computed as ae,onMounted as ie,ref as pe,watch as x}from"vue-demi";var g="uniform-canvas-preview-script",Le=({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"}}),s=await t.json();if(!t.ok)throw new Error("Error reading enhanced composition");return s.composition},ze=({initialCompositionValue:e,enhance:o=t=>t.composition})=>{let t=pe(e);x([()=>e,t],()=>{var n;!e||(e==null?void 0:e._id)===((n=t.value)==null?void 0:n._id)||(t.value=e)},{immediate:!0});let s=ae(()=>{var r;return N()?ne({broadcastTo:[(r=window.opener)!=null?r:window.top],listenTo:[window]}):void 0});return x([s,()=>o],()=>{if(!s.value)return;let n=s.value.on("update-composition",async r=>{if(se(r)){let p=await o(r);t.value=p}});return()=>{n()}},{immediate:!0}),ie(()=>{if(!N()||document.getElementById(g))return;let r=document.createElement("script");r.id=g,r.src=me(),r.async=!0,document.head.appendChild(r)}),{composition:t}};function me(){return`${window.document.referrer}files/canvas-in-context-embed/index.js`}function N(){if(typeof window=="undefined")return!1;let e=new URLSearchParams(window.location.search).has(re),o=Boolean(window.document.referrer.match(/(^https:\/\/|\.)(uniform.app|uniform.wtf|localhost:\d{4})\//));return e&&o}export{h as CANVAS_COMPOSITION_TYPE,P as CANVAS_SLOT_CONTENT_TYPE,E as Composition,Te as DefaultNotImplementedComponent,xe as SlotContent,y as compositionInjectionKey,b as convertComponentToProps,Le as createApiEnhancer,v as resolveRendererInjectionKey,Oe as useCompositionEventEffect,ze as useContextualEditing};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/canvas-vue",
-  "version": "17.5.1-alpha.7+ab97e4ba9",
+  "version": "17.6.0",
   "description": "Vue SDK for Uniform Canvas",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -22,12 +22,12 @@
     "format": "prettier --write \"src/**/*.{js,ts,tsx}\""
   },
   "dependencies": {
-    "@uniformdev/canvas": "^17.5.1-alpha.7+ab97e4ba9",
-    "@vue/test-utils": "2.2.1",
+    "@uniformdev/canvas": "^17.6.0",
+    "@vue/test-utils": "2.2.4",
     "vue-demi": "^0.13.11"
   },
   "peerDependencies": {
-    "@uniformdev/context-vue": ">=17.5.0",
+    "@uniformdev/context-vue": ">=17.6.0",
     "@vue/composition-api": "^1.0.0-rc.1",
     "vue": "^2.0.0 || >=3.0.0"
   },
@@ -39,11 +39,11 @@
   "devDependencies": {
     "@testing-library/vue": "6.6.1",
     "@types/uuid": "8.3.4",
-    "@uniformdev/context-vue": "^17.5.1-alpha.7+ab97e4ba9",
+    "@uniformdev/context-vue": "^17.6.0",
     "@vue/server-test-utils": "1.3.0",
     "vue": "3.2.45",
-    "vue-server-renderer": "2.7.13",
-    "vue-template-compiler": "2.7.13"
+    "vue-server-renderer": "2.7.14",
+    "vue-template-compiler": "2.7.14"
   },
   "files": [
     "dist",
@@ -62,5 +62,5 @@
     "last 2 versions",
     "not dead"
   ],
-  "gitHead": "ab97e4ba97e3842e6c7f208c4c96be3f9f74337e"
+  "gitHead": "8346fa3ffe24fa0f81fb0c8b0d12e27806ae321b"
 }