@uniformdev/canvas-vue 17.5.0 → 17.5.1-alpha.130

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as vue_demi from 'vue-demi';
 import { ConcreteComponent, PropType, Ref } from 'vue-demi';
-import { ComponentInstance, ComponentParameter, SubscribeToCompositionOptions } from '@uniformdev/canvas';
+import { ComponentInstance, ComponentParameter, SubscribeToCompositionOptions, UpdateCompositionMessage, RootComponentInstance } from '@uniformdev/canvas';
 
 interface TestComponent {
     slots?: {
@@ -63,7 +63,7 @@ declare const Composition: vue_demi.DefineComponent<{
     [key: string]: any;
 }>) | (() => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined), unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, Record<string, any>, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
+}>[] | undefined), unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
     data: {
         type: PropType<ComponentInstance>;
         required: true;
@@ -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;
@@ -92,7 +109,6 @@ declare type SlotComponentProps = {
 };
 /**
  * Renders the content of a Canvas composition's slot
- * @vue-prop {String} name - name of the Uniform Canvas slot you wish to scope to
  */
 declare const SlotContent: vue_demi.DefineComponent<{
     name: {
@@ -103,7 +119,7 @@ declare const SlotContent: vue_demi.DefineComponent<{
     };
 }, () => (ConcreteComponent<any, any, any, vue_demi.ComputedOptions, vue_demi.MethodOptions> | vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[])[], unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, Record<string, any>, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
+}>[])[], unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
     name: {
         type: PropType<string | undefined>;
     };
@@ -112,22 +128,224 @@ declare const SlotContent: vue_demi.DefineComponent<{
     };
 }>>, {}>;
 
-declare type DefaultNotImplementedComponentProps = {
-    component: ComponentInstance;
+declare type UseCompositionEventEffectOptions = Omit<Partial<SubscribeToCompositionOptions>, 'callback' | 'compositionId'> & {
+    compositionIdRef: Ref<SubscribeToCompositionOptions['compositionId']>;
+    enabled: boolean;
+    effect: () => void;
+};
+/** A composable to manage a subscription to a realtime event on a composition */
+declare function useCompositionEventEffect({ enabled, projectId, compositionIdRef, effect, }: UseCompositionEventEffectOptions): Promise<void>;
+
+declare const createApiEnhancer: ({ apiUrl }: {
+    apiUrl: string;
+}) => (message: UpdateCompositionMessage) => Promise<{
+    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;
+}>;
+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<{
+        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>;
 };
-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, Record<string, any>, 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.
@@ -137,14 +355,6 @@ declare const DefaultNotImplementedComponent: vue_demi.DefineComponent<{
  */
 declare function convertComponentToProps<T = unknown>(component: ComponentInstance): ComponentProps<T>;
 
-declare type UseCompositionEventEffectOptions = Omit<Partial<SubscribeToCompositionOptions>, 'callback' | 'compositionId'> & {
-    compositionIdRef: Ref<SubscribeToCompositionOptions['compositionId']>;
-    enabled: boolean;
-    effect: () => void;
-};
-/** A composable to manage a subscription to a realtime event on a composition */
-declare function useCompositionEventEffect({ enabled, projectId, compositionIdRef, effect, }: UseCompositionEventEffectOptions): Promise<void>;
-
 /** Public ID of Canvas composition component type */
 declare const CANVAS_COMPOSITION_TYPE = "Composition";
 /** Public ID of Canvas slot component component type */
@@ -152,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, resolveRendererInjectionKey, useCompositionEventEffect };
+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 x,computed as T,h as A,provide as b,inject as I,resolveComponent as g}from"vue-demi";var R="Composition",S="SlotContent",f="uniformComposition",C="uniformResolveRenderer";import{CANVAS_ENRICHMENT_TAG_PARAM as O}from"@uniformdev/canvas";import{Track as _,TrackSlot as k,isUsingUniformContext as w}from"@uniformdev/context-vue";var E=x({name:R,inheritAttrs:!1,props:{data:{type:Object,required:!0},resolveRenderer:{type:Function,default:()=>({type:e})=>g(e)},behaviorTracking:{type:String,default:"onView"}},setup(e,t){var l,d,y;let o=T(()=>{var i,c;return(c=e.data)!=null?c:(i=I(f))==null?void 0:i.value}),n=(l=e.resolveRenderer)!=null?l:I(C);b(f,o),b(C,n);let s=T(()=>{var i,c;return(c=(i=o.value)==null?void 0:i.slots)!=null?c:{}}),p=T(()=>{var i,c;return(c=(i=o.value)==null?void 0:i.parameters)!=null?c:{}}),m=T(()=>JSON.stringify(o.value)),r=(y=(d=o.value.parameters)==null?void 0:d[O])==null?void 0:y.value,a=()=>{var i,c;return(c=(i=t.slots).default)==null?void 0:c.call(i,{slots:s.value,parameters:p.value})};if(w()){let i=e.behaviorTracking==="onLoad"?k:_;return()=>A(i,{behavior:r,key:m.value},a)}return a}});import{defineComponent as j,computed as z,h as v,inject as N}from"vue-demi";import{CANVAS_PERSONALIZE_TYPE as U,CANVAS_TEST_TYPE as K,mapSlotToPersonalizedVariations as L,mapSlotToTestVariations as Y}from"@uniformdev/canvas";import{Personalize as $,Test as D}from"@uniformdev/context-vue";function h(e){var s;let t=(s=e.parameters)!=null?s:{};return{...Object.entries(t).reduce((p,[m,{value:r}])=>({...p,[V(m)]:r}),{}),...e.data,component:e}}function V(e){return e.replace("$","")}var de=j({name:S,inheritAttrs:!1,props:{name:{type:String},resolveRenderer:{type:Function}},setup(e,t){var m;let o=N(f),n=(m=e.resolveRenderer)!=null?m:N(C);if(!o||!n)throw new Error("<SlotContent /> can only be used inside a <Composition />");let p=z(()=>{var r,a,l;return e.name?(a=(r=o==null?void 0:o.value.slots)==null?void 0:r[e.name])!=null?a:[]:Object.values((l=o==null?void 0:o.value.slots)!=null?l:{}).flat()}).value.map(r=>{let a=P({component:r,resolveRenderer:n});return t.slots.default?t.slots.default({child:a,component:r}):a});return()=>p}});function M(e,t){var p,m,r,a,l,d;let o=e==null?void 0:e.parameters,n=L((p=e.slots)==null?void 0:p.pz),s=(a=(r=(m=e.parameters)==null?void 0:m.trackingEventName)==null?void 0:r.value)!=null?a:"Untitled Personalization";return v($,{name:s,component:y=>t(y),variations:n,count:Number((d=(l=o==null?void 0:o.count)==null?void 0:l.value)!=null?d:1)})}function F(e,t){var p,m,r,a,l;let o=(m=(p=e==null?void 0:e.slots)==null?void 0:p.test)!=null?m:[],n=(l=(a=(r=e==null?void 0:e.parameters)==null?void 0:r.test)==null?void 0:a.value)!=null?l:"Untitled Test",s=Y(o);return v(D,{variations:s,name:n,component:d=>t(d)})}function P({component:e,resolveRenderer:t}){if(e.type===K)return F(e,n=>P({component:n,resolveRenderer:t}));if(e.type===U)return M(e,n=>P({component:n,resolveRenderer:t}));let o=t==null?void 0:t(e);if(o){let n=h(e);return v(E,{data:e,resolveRenderer:t},()=>v(o,n))}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),v("")}import{defineComponent as q,h as u}from"vue-demi";var B={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"},ve=q({name:"DefaultNotImplementedComponent",props:{component:{type:Object,required:!0}},setup(e,{attrs:t}){var n;let o=(n=e.component)==null?void 0:n.type;return()=>u("div",{key:"content",style:{...B}},[u("h2",{style:{...J}},`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 G,createEventBus as H,subscribeToComposition as X}from"@uniformdev/canvas";import{watch as Z}from"vue-demi";async function Q({enabled:e,projectId:t,compositionIdRef:o,effect:n}){let s;Z([()=>e,()=>o.value,()=>t],async()=>{if(s==null||s(),!e||!o.value||!t)return;let p=await H();p&&(s=X({eventBus:p,compositionId:o.value,compositionState:G,projectId:t,callback:n,event:"updated"}))},{immediate:!0})}export{R as CANVAS_COMPOSITION_TYPE,S as CANVAS_SLOT_CONTENT_TYPE,E as Composition,ve as DefaultNotImplementedComponent,de as SlotContent,f as compositionInjectionKey,h as convertComponentToProps,C as resolveRendererInjectionKey,Q as useCompositionEventEffect};
+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 I=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var V=Object.prototype.hasOwnProperty;var j=(e,t)=>{for(var o in t)I(e,o,{get:t[o],enumerable:!0})},z=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of w(t))!V.call(e,r)&&r!==o&&I(e,r,{get:()=>t[r],enumerable:!(n=k(t,r))||n.enumerable});return e};var U=e=>z(I({},"__esModule",{value:!0}),e);var q={};j(q,{CANVAS_COMPOSITION_TYPE:()=>E,CANVAS_SLOT_CONTENT_TYPE:()=>h,Composition:()=>N,DefaultNotImplementedComponent:()=>F,SlotContent:()=>L,compositionInjectionKey:()=>y,convertComponentToProps:()=>x,resolveRendererInjectionKey:()=>T,useCompositionEventEffect:()=>_});module.exports=U(q);var s=require("vue-demi");var E="Composition",h="SlotContent",y="uniformComposition",T="uniformResolveRenderer";var g=require("@uniformdev/canvas"),P=require("@uniformdev/context-vue");var N=(0,s.defineComponent)({name:E,inheritAttrs:!1,props:{data:{type:Object,required:!0},resolveRenderer:{type:Function,default:()=>({type:e})=>(0,s.resolveComponent)(e)},behaviorTracking:{type:String,default:"onView"}},setup(e,t){var d,v,S;let o=(0,s.computed)(()=>{var m,f;return(f=e.data)!=null?f:(m=(0,s.inject)(y))==null?void 0:m.value}),n=(d=e.resolveRenderer)!=null?d:(0,s.inject)(T);(0,s.provide)(y,o),(0,s.provide)(T,n);let r=(0,s.computed)(()=>{var m,f;return(f=(m=o.value)==null?void 0:m.slots)!=null?f:{}}),a=(0,s.computed)(()=>{var m,f;return(f=(m=o.value)==null?void 0:m.parameters)!=null?f:{}}),c=(0,s.computed)(()=>JSON.stringify(o.value)),p=(S=(v=o.value.parameters)==null?void 0:v[g.CANVAS_ENRICHMENT_TAG_PARAM])==null?void 0:S.value,i=()=>{var m,f;return(f=(m=t.slots).default)==null?void 0:f.call(m,{slots:r.value,parameters:a.value})};if((0,P.isUsingUniformContext)()){let m=e.behaviorTracking==="onLoad"?P.TrackSlot:P.Track;return()=>(0,s.h)(m,{behavior:p,key:c.value},i)}return i}});var l=require("vue-demi"),C=require("@uniformdev/canvas"),b=require("@uniformdev/context-vue");function x(e){var r;let t=(r=e.parameters)!=null?r:{};return{...Object.entries(t).reduce((a,[c,{value:p}])=>({...a,[K(c)]:p}),{}),...e.data,component:e}}function K(e){return e.replace("$","")}var L=(0,l.defineComponent)({name:h,inheritAttrs:!1,props:{name:{type:String},resolveRenderer:{type:Function}},setup(e,t){var c;let o=(0,l.inject)(y),n=(c=e.resolveRenderer)!=null?c:(0,l.inject)(T);if(!o||!n)throw new Error("<SlotContent /> can only be used inside a <Composition />");let a=(0,l.computed)(()=>{var p,i,d;return e.name?(i=(p=o==null?void 0:o.value.slots)==null?void 0:p[e.name])!=null?i:[]:Object.values((d=o==null?void 0:o.value.slots)!=null?d:{}).flat()}).value.map(p=>{let i=A({component:p,resolveRenderer:n});return t.slots.default?t.slots.default({child:i,component:p}):i});return()=>a}});function Y(e,t){var a,c,p,i,d,v;let o=e==null?void 0:e.parameters,n=(0,C.mapSlotToPersonalizedVariations)((a=e.slots)==null?void 0:a.pz),r=(i=(p=(c=e.parameters)==null?void 0:c.trackingEventName)==null?void 0:p.value)!=null?i:"Untitled Personalization";return(0,l.h)(b.Personalize,{name:r,component:S=>t(S),variations:n,count:Number((v=(d=o==null?void 0:o.count)==null?void 0:d.value)!=null?v:1)})}function $(e,t){var a,c,p,i,d;let o=(c=(a=e==null?void 0:e.slots)==null?void 0:a.test)!=null?c:[],n=(d=(i=(p=e==null?void 0:e.parameters)==null?void 0:p.test)==null?void 0:i.value)!=null?d:"Untitled Test",r=(0,C.mapSlotToTestVariations)(o);return(0,l.h)(b.Test,{variations:r,name:n,component:v=>t(v)})}function A({component:e,resolveRenderer:t}){if(e.type===C.CANVAS_TEST_TYPE)return $(e,n=>A({component:n,resolveRenderer:t}));if(e.type===C.CANVAS_PERSONALIZE_TYPE)return Y(e,n=>A({component:n,resolveRenderer:t}));let o=t==null?void 0:t(e);if(o){let n=x(e);return(0,l.h)(N,{data:e,resolveRenderer:t},()=>(0,l.h)(o,n))}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,l.h)("")}var u=require("vue-demi"),D={borderLeft:"10px solid #e42535",background:"rgba(122, 215, 218, 0.3)",color:"#1d3557",padding:"1rem",textAlign:"left",margin:"1rem 5vw"},M={margin:"0 0 1rem"},F=(0,u.defineComponent)({name:"DefaultNotImplementedComponent",props:{component:{type:Object,required:!0}},setup(e,{attrs:t}){var n;let o=(n=e.component)==null?void 0:n.type;return()=>(0,u.h)("div",{key:"content",style:{...D}},[(0,u.h)("h2",{style:{...M}},`Component: ${o}`),(0,u.h)("p",[(0,u.h)("strong",`${o} has no Vue implementation. It may need to be added to your `),(0,u.h)("code",{},"resolveRenderer()"),(0,u.h)("strong",{}," function.")]),(0,u.h)("details",{},[(0,u.h)("summary",{},"props/attributes"),(0,u.h)("pre",{style:{overflowX:"auto"}},`${JSON.stringify(t)}`)])])}});var R=require("@uniformdev/canvas"),O=require("vue-demi");async function _({enabled:e,projectId:t,compositionIdRef:o,effect:n}){let r;(0,O.watch)([()=>e,()=>o.value,()=>t],async()=>{if(r==null||r(),!e||!o.value||!t)return;let a=await(0,R.createEventBus)();a&&(r=(0,R.subscribeToComposition)({eventBus:a,compositionId:o.value,compositionState:R.CANVAS_DRAFT_STATE,projectId:t,callback:n,event:"updated"}))},{immediate:!0})}0&&(module.exports={CANVAS_COMPOSITION_TYPE,CANVAS_SLOT_CONTENT_TYPE,Composition,DefaultNotImplementedComponent,SlotContent,compositionInjectionKey,convertComponentToProps,resolveRendererInjectionKey,useCompositionEventEffect});
+"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 x,computed as T,h as A,provide as b,inject as I,resolveComponent as g}from"vue-demi";var R="Composition",S="SlotContent",f="uniformComposition",C="uniformResolveRenderer";import{CANVAS_ENRICHMENT_TAG_PARAM as O}from"@uniformdev/canvas";import{Track as _,TrackSlot as k,isUsingUniformContext as w}from"@uniformdev/context-vue";var E=x({name:R,inheritAttrs:!1,props:{data:{type:Object,required:!0},resolveRenderer:{type:Function,default:()=>({type:e})=>g(e)},behaviorTracking:{type:String,default:"onView"}},setup(e,t){var l,d,y;let o=T(()=>{var i,c;return(c=e.data)!=null?c:(i=I(f))==null?void 0:i.value}),n=(l=e.resolveRenderer)!=null?l:I(C);b(f,o),b(C,n);let s=T(()=>{var i,c;return(c=(i=o.value)==null?void 0:i.slots)!=null?c:{}}),p=T(()=>{var i,c;return(c=(i=o.value)==null?void 0:i.parameters)!=null?c:{}}),m=T(()=>JSON.stringify(o.value)),r=(y=(d=o.value.parameters)==null?void 0:d[O])==null?void 0:y.value,a=()=>{var i,c;return(c=(i=t.slots).default)==null?void 0:c.call(i,{slots:s.value,parameters:p.value})};if(w()){let i=e.behaviorTracking==="onLoad"?k:_;return()=>A(i,{behavior:r,key:m.value},a)}return a}});import{defineComponent as j,computed as z,h as v,inject as N}from"vue-demi";import{CANVAS_PERSONALIZE_TYPE as U,CANVAS_TEST_TYPE as K,mapSlotToPersonalizedVariations as L,mapSlotToTestVariations as Y}from"@uniformdev/canvas";import{Personalize as $,Test as D}from"@uniformdev/context-vue";function h(e){var s;let t=(s=e.parameters)!=null?s:{};return{...Object.entries(t).reduce((p,[m,{value:r}])=>({...p,[V(m)]:r}),{}),...e.data,component:e}}function V(e){return e.replace("$","")}var de=j({name:S,inheritAttrs:!1,props:{name:{type:String},resolveRenderer:{type:Function}},setup(e,t){var m;let o=N(f),n=(m=e.resolveRenderer)!=null?m:N(C);if(!o||!n)throw new Error("<SlotContent /> can only be used inside a <Composition />");let p=z(()=>{var r,a,l;return e.name?(a=(r=o==null?void 0:o.value.slots)==null?void 0:r[e.name])!=null?a:[]:Object.values((l=o==null?void 0:o.value.slots)!=null?l:{}).flat()}).value.map(r=>{let a=P({component:r,resolveRenderer:n});return t.slots.default?t.slots.default({child:a,component:r}):a});return()=>p}});function M(e,t){var p,m,r,a,l,d;let o=e==null?void 0:e.parameters,n=L((p=e.slots)==null?void 0:p.pz),s=(a=(r=(m=e.parameters)==null?void 0:m.trackingEventName)==null?void 0:r.value)!=null?a:"Untitled Personalization";return v($,{name:s,component:y=>t(y),variations:n,count:Number((d=(l=o==null?void 0:o.count)==null?void 0:l.value)!=null?d:1)})}function F(e,t){var p,m,r,a,l;let o=(m=(p=e==null?void 0:e.slots)==null?void 0:p.test)!=null?m:[],n=(l=(a=(r=e==null?void 0:e.parameters)==null?void 0:r.test)==null?void 0:a.value)!=null?l:"Untitled Test",s=Y(o);return v(D,{variations:s,name:n,component:d=>t(d)})}function P({component:e,resolveRenderer:t}){if(e.type===K)return F(e,n=>P({component:n,resolveRenderer:t}));if(e.type===U)return M(e,n=>P({component:n,resolveRenderer:t}));let o=t==null?void 0:t(e);if(o){let n=h(e);return v(E,{data:e,resolveRenderer:t},()=>v(o,n))}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),v("")}import{defineComponent as q,h as u}from"vue-demi";var B={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"},ve=q({name:"DefaultNotImplementedComponent",props:{component:{type:Object,required:!0}},setup(e,{attrs:t}){var n;let o=(n=e.component)==null?void 0:n.type;return()=>u("div",{key:"content",style:{...B}},[u("h2",{style:{...J}},`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 G,createEventBus as H,subscribeToComposition as X}from"@uniformdev/canvas";import{watch as Z}from"vue-demi";async function Q({enabled:e,projectId:t,compositionIdRef:o,effect:n}){let s;Z([()=>e,()=>o.value,()=>t],async()=>{if(s==null||s(),!e||!o.value||!t)return;let p=await H();p&&(s=X({eventBus:p,compositionId:o.value,compositionState:G,projectId:t,callback:n,event:"updated"}))},{immediate:!0})}export{R as CANVAS_COMPOSITION_TYPE,S as CANVAS_SLOT_CONTENT_TYPE,E as Composition,ve as DefaultNotImplementedComponent,de as SlotContent,f as compositionInjectionKey,h as convertComponentToProps,C as resolveRendererInjectionKey,Q as useCompositionEventEffect};
+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.0",
+  "version": "17.5.1-alpha.130+3fac779b1",
   "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.0",
-    "@vue/test-utils": "2.2.1",
-    "vue-demi": "^0.13.0"
+    "@uniformdev/canvas": "^17.5.1-alpha.130+3fac779b1",
+    "@vue/test-utils": "2.2.4",
+    "vue-demi": "^0.13.11"
   },
   "peerDependencies": {
-    "@uniformdev/context-vue": "^17.5.0",
+    "@uniformdev/context-vue": ">=17.5.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.0",
+    "@uniformdev/context-vue": "^17.5.1-alpha.130+3fac779b1",
     "@vue/server-test-utils": "1.3.0",
-    "vue": "3.2.37",
-    "vue-server-renderer": "2.7.13",
-    "vue-template-compiler": "2.7.13"
+    "vue": "3.2.45",
+    "vue-server-renderer": "2.7.14",
+    "vue-template-compiler": "2.7.14"
   },
   "files": [
     "dist",
@@ -62,5 +62,5 @@
     "last 2 versions",
     "not dead"
   ],
-  "gitHead": "de1f52defe798010336e1dd3b2732fce359855fb"
+  "gitHead": "3fac779b1b42a1afeb05156cb51768a98573438f"
 }