@uniformdev/canvas-vue 17.3.0 → 17.3.1-alpha.146
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +151 -5
- package/dist/index.esm.js +1 -1
- package/dist/index.js +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +7 -7
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as vue_demi from 'vue-demi';
|
|
2
2
|
import { ConcreteComponent, PropType, Ref } from 'vue-demi';
|
|
3
|
-
import { ComponentInstance, ComponentParameter, SubscribeToCompositionOptions } from '@uniformdev/canvas';
|
|
3
|
+
import { ComponentInstance, ComponentParameter, SubscribeToCompositionOptions, UpdateCompositionMessage, RootComponentInstance } from '@uniformdev/canvas';
|
|
4
4
|
|
|
5
5
|
interface TestComponent {
|
|
6
6
|
slots?: {
|
|
@@ -63,7 +63,7 @@ declare const Composition: vue_demi.DefineComponent<{
|
|
|
63
63
|
[key: string]: any;
|
|
64
64
|
}>) | (() => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
|
|
65
65
|
[key: string]: any;
|
|
66
|
-
}>[] | undefined), unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin,
|
|
66
|
+
}>[] | undefined), unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
|
|
67
67
|
data: {
|
|
68
68
|
type: PropType<ComponentInstance>;
|
|
69
69
|
required: true;
|
|
@@ -103,7 +103,9 @@ declare const SlotContent: vue_demi.DefineComponent<{
|
|
|
103
103
|
};
|
|
104
104
|
}, () => (ConcreteComponent<any, any, any, vue_demi.ComputedOptions, vue_demi.MethodOptions> | vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
|
|
105
105
|
[key: string]: any;
|
|
106
|
-
}>
|
|
106
|
+
}> | vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
|
|
107
|
+
[key: string]: any;
|
|
108
|
+
}>[])[], unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
|
|
107
109
|
name: {
|
|
108
110
|
type: PropType<string | undefined>;
|
|
109
111
|
};
|
|
@@ -122,7 +124,7 @@ declare const DefaultNotImplementedComponent: vue_demi.DefineComponent<{
|
|
|
122
124
|
};
|
|
123
125
|
}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
|
|
124
126
|
[key: string]: any;
|
|
125
|
-
}>, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin,
|
|
127
|
+
}>, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
|
|
126
128
|
component: {
|
|
127
129
|
type: PropType<ComponentInstance>;
|
|
128
130
|
required: true;
|
|
@@ -145,6 +147,150 @@ declare type UseCompositionEventEffectOptions = Omit<Partial<SubscribeToComposit
|
|
|
145
147
|
/** A composable to manage a subscription to a realtime event on a composition */
|
|
146
148
|
declare function useCompositionEventEffect({ enabled, projectId, compositionIdRef, effect, }: UseCompositionEventEffectOptions): Promise<void>;
|
|
147
149
|
|
|
150
|
+
declare const createApiEnhancer: ({ apiUrl }: {
|
|
151
|
+
apiUrl: string;
|
|
152
|
+
}) => (message: UpdateCompositionMessage) => Promise<{
|
|
153
|
+
type: string;
|
|
154
|
+
parameters?: {
|
|
155
|
+
[key: string]: {
|
|
156
|
+
value: unknown;
|
|
157
|
+
type: string;
|
|
158
|
+
connectedData?: {
|
|
159
|
+
pointer: string;
|
|
160
|
+
syntax: "jptr";
|
|
161
|
+
required?: boolean | undefined;
|
|
162
|
+
} | undefined;
|
|
163
|
+
};
|
|
164
|
+
} | undefined;
|
|
165
|
+
variant?: string | undefined;
|
|
166
|
+
slots?: {
|
|
167
|
+
[key: string]: {
|
|
168
|
+
type: string;
|
|
169
|
+
parameters?: {
|
|
170
|
+
[key: string]: {
|
|
171
|
+
value: unknown;
|
|
172
|
+
type: string;
|
|
173
|
+
connectedData?: {
|
|
174
|
+
pointer: string;
|
|
175
|
+
syntax: "jptr";
|
|
176
|
+
required?: boolean | undefined;
|
|
177
|
+
} | undefined;
|
|
178
|
+
};
|
|
179
|
+
} | undefined;
|
|
180
|
+
variant?: string | undefined;
|
|
181
|
+
slots?: {
|
|
182
|
+
[key: string]: any[];
|
|
183
|
+
} | undefined;
|
|
184
|
+
_id?: string | undefined;
|
|
185
|
+
_pattern?: string | undefined;
|
|
186
|
+
_dataResources?: {
|
|
187
|
+
[key: string]: {
|
|
188
|
+
type: string;
|
|
189
|
+
isPatternParameter?: boolean | undefined;
|
|
190
|
+
variables?: {
|
|
191
|
+
[key: string]: string;
|
|
192
|
+
} | undefined;
|
|
193
|
+
};
|
|
194
|
+
} | undefined;
|
|
195
|
+
_patternDataResources?: {
|
|
196
|
+
[key: string]: {
|
|
197
|
+
type: string;
|
|
198
|
+
isPatternParameter?: boolean | undefined;
|
|
199
|
+
variables?: {
|
|
200
|
+
[key: string]: string;
|
|
201
|
+
} | undefined;
|
|
202
|
+
};
|
|
203
|
+
} | undefined;
|
|
204
|
+
_patternError?: "NOTFOUND" | "CYCLIC" | undefined;
|
|
205
|
+
}[];
|
|
206
|
+
} | undefined;
|
|
207
|
+
_id: string;
|
|
208
|
+
_slug?: string | null | undefined;
|
|
209
|
+
_name: string;
|
|
210
|
+
_dataResources?: {
|
|
211
|
+
[key: string]: {
|
|
212
|
+
type: string;
|
|
213
|
+
isPatternParameter?: boolean | undefined;
|
|
214
|
+
variables?: {
|
|
215
|
+
[key: string]: string;
|
|
216
|
+
} | undefined;
|
|
217
|
+
};
|
|
218
|
+
} | undefined;
|
|
219
|
+
}>;
|
|
220
|
+
declare const useCompositionInstance: ({ composition, enhance, }: {
|
|
221
|
+
composition: RootComponentInstance;
|
|
222
|
+
enhance?: ((composition: UpdateCompositionMessage) => RootComponentInstance | Promise<RootComponentInstance>) | undefined;
|
|
223
|
+
}) => {
|
|
224
|
+
composition: vue_demi.Ref<{
|
|
225
|
+
type: string;
|
|
226
|
+
parameters?: {
|
|
227
|
+
[key: string]: {
|
|
228
|
+
value: unknown;
|
|
229
|
+
type: string;
|
|
230
|
+
connectedData?: {
|
|
231
|
+
pointer: string;
|
|
232
|
+
syntax: "jptr";
|
|
233
|
+
required?: boolean | undefined;
|
|
234
|
+
} | undefined;
|
|
235
|
+
};
|
|
236
|
+
} | undefined;
|
|
237
|
+
variant?: string | undefined;
|
|
238
|
+
slots?: {
|
|
239
|
+
[key: string]: {
|
|
240
|
+
type: string;
|
|
241
|
+
parameters?: {
|
|
242
|
+
[key: string]: {
|
|
243
|
+
value: unknown;
|
|
244
|
+
type: string;
|
|
245
|
+
connectedData?: {
|
|
246
|
+
pointer: string;
|
|
247
|
+
syntax: "jptr";
|
|
248
|
+
required?: boolean | undefined;
|
|
249
|
+
} | undefined;
|
|
250
|
+
};
|
|
251
|
+
} | undefined;
|
|
252
|
+
variant?: string | undefined;
|
|
253
|
+
slots?: {
|
|
254
|
+
[key: string]: any[];
|
|
255
|
+
} | undefined;
|
|
256
|
+
_id?: string | undefined;
|
|
257
|
+
_pattern?: string | undefined;
|
|
258
|
+
_dataResources?: {
|
|
259
|
+
[key: string]: {
|
|
260
|
+
type: string;
|
|
261
|
+
isPatternParameter?: boolean | undefined;
|
|
262
|
+
variables?: {
|
|
263
|
+
[key: string]: string;
|
|
264
|
+
} | undefined;
|
|
265
|
+
};
|
|
266
|
+
} | undefined;
|
|
267
|
+
_patternDataResources?: {
|
|
268
|
+
[key: string]: {
|
|
269
|
+
type: string;
|
|
270
|
+
isPatternParameter?: boolean | undefined;
|
|
271
|
+
variables?: {
|
|
272
|
+
[key: string]: string;
|
|
273
|
+
} | undefined;
|
|
274
|
+
};
|
|
275
|
+
} | undefined;
|
|
276
|
+
_patternError?: "NOTFOUND" | "CYCLIC" | undefined;
|
|
277
|
+
}[];
|
|
278
|
+
} | undefined;
|
|
279
|
+
_id: string;
|
|
280
|
+
_slug?: string | null | undefined;
|
|
281
|
+
_name: string;
|
|
282
|
+
_dataResources?: {
|
|
283
|
+
[key: string]: {
|
|
284
|
+
type: string;
|
|
285
|
+
isPatternParameter?: boolean | undefined;
|
|
286
|
+
variables?: {
|
|
287
|
+
[key: string]: string;
|
|
288
|
+
} | undefined;
|
|
289
|
+
};
|
|
290
|
+
} | undefined;
|
|
291
|
+
}>;
|
|
292
|
+
};
|
|
293
|
+
|
|
148
294
|
/** Public ID of Canvas composition component type */
|
|
149
295
|
declare const CANVAS_COMPOSITION_TYPE = "Composition";
|
|
150
296
|
/** Public ID of Canvas slot component component type */
|
|
@@ -152,4 +298,4 @@ declare const CANVAS_SLOT_CONTENT_TYPE = "SlotContent";
|
|
|
152
298
|
declare const compositionInjectionKey = "uniformComposition";
|
|
153
299
|
declare const resolveRendererInjectionKey = "uniformResolveRenderer";
|
|
154
300
|
|
|
155
|
-
export { CANVAS_COMPOSITION_TYPE, CANVAS_SLOT_CONTENT_TYPE, ComponentProps, Composition, CompositionProps, DefaultNotImplementedComponent, DefaultNotImplementedComponentProps, PersonalizeComponent, ResolveRenderer, SlotComponentProps, SlotContent, TestComponent, UseCompositionEventEffectOptions, compositionInjectionKey, convertComponentToProps, resolveRendererInjectionKey, useCompositionEventEffect };
|
|
301
|
+
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 };
|
package/dist/index.esm.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{defineComponent as
|
|
1
|
+
import{defineComponent as _,computed as T,h as O,provide as I,inject as b,resolveComponent as k}from"vue-demi";var h="Composition",P="SlotContent",v="uniformComposition",y="uniformResolveRenderer";import{CANVAS_ENRICHMENT_TAG_PARAM as U}from"@uniformdev/canvas";import{Track as V,TrackSlot as j,isUsingUniformContext as M}from"@uniformdev/context-vue";var S=_({name:h,inheritAttrs:!1,props:{data:{type:Object,required:!0},resolveRenderer:{type:Function,default:()=>({type:e})=>k(e)},behaviorTracking:{type:String,default:"onView"}},setup(e,t){var c,d,f;let o=T(()=>{var a,l;return(l=e.data)!=null?l:(a=b(v))==null?void 0:a.value}),n=(c=e.resolveRenderer)!=null?c:b(y);I(v,o),I(y,n);let s=T(()=>{var a,l;return(l=(a=o.value)==null?void 0:a.slots)!=null?l:{}}),r=T(()=>{var a,l;return(l=(a=o.value)==null?void 0:a.parameters)!=null?l:{}}),m=T(()=>JSON.stringify(o.value)),i=(f=(d=o.value.parameters)==null?void 0:d[U])==null?void 0:f.value,p=()=>{var a,l;return(l=(a=t.slots).default)==null?void 0:l.call(a,{slots:s.value,parameters:r.value})};if(M()){let a=e.behaviorTracking==="onLoad"?j:V;return()=>O(a,{behavior:i,key:m.value},p)}return p}});import{defineComponent as $,computed as K,h as C,inject as E}from"vue-demi";import{CANVAS_PERSONALIZE_TYPE as L,CANVAS_TEST_TYPE as Y,mapSlotToPersonalizedVariations as B,mapSlotToTestVariations as D}from"@uniformdev/canvas";import{Personalize as F,Test as J}from"@uniformdev/context-vue";function w(e){var s;let t=(s=e.parameters)!=null?s:{};return{...Object.entries(t).reduce((r,[m,{value:i}])=>({...r,[z(m)]:i}),{}),...e.data,component:e}}function z(e){return e.replace("$","")}var be=$({name:P,inheritAttrs:!1,props:{name:{type:String},resolveRenderer:{type:Function}},setup(e,t){var m;let o=E(v),n=(m=e.resolveRenderer)!=null?m:E(y);if(!o||!n)throw new Error("<SlotContent /> can only be used inside a <Composition />");let s=K(()=>{var i,p,c;return e.name?(p=(i=o==null?void 0:o.value.slots)==null?void 0:i[e.name])!=null?p:[]:Object.values((c=o==null?void 0:o.value.slots)!=null?c:{}).flat()}),r=s.value.flatMap((i,p)=>{var f,a;let c=R({component:i,resolveRenderer:n}),d=t.slots.default?t.slots.default({child:c,component:i}):c;if(i._id){let l=C("script",{"data-role":"component-start","data-component-id":i._id,"data-slot-name":name,"data-component-index":p,"data-total-components":s.value.length,"data-component-name":i.type,"data-component-title":(a=(f=i.parameters)==null?void 0:f.title)==null?void 0:a.value,key:`open-${p}`}),A=C("script",{"data-role":"component-end",key:`close-${p}`});return[l,d,A]}return[d]});return()=>r}});function q(e,t){var r,m,i,p,c,d;let o=e==null?void 0:e.parameters,n=B((r=e.slots)==null?void 0:r.pz),s=(p=(i=(m=e.parameters)==null?void 0:m.trackingEventName)==null?void 0:i.value)!=null?p:"Untitled Personalization";return C(F,{name:s,component:f=>t(f),variations:n,count:Number((d=(c=o==null?void 0:o.count)==null?void 0:c.value)!=null?d:1)})}function G(e,t){var r,m,i,p,c;let o=(m=(r=e==null?void 0:e.slots)==null?void 0:r.test)!=null?m:[],n=(c=(p=(i=e==null?void 0:e.parameters)==null?void 0:i.test)==null?void 0:p.value)!=null?c:"Untitled Test",s=D(o);return C(J,{variations:s,name:n,component:d=>t(d)})}function R({component:e,resolveRenderer:t}){if(e.type===Y)return G(e,n=>R({component:n,resolveRenderer:t}));if(e.type===L)return q(e,n=>R({component:n,resolveRenderer:t}));let o=t==null?void 0:t(e);if(o){let n=w(e);return C(S,{data:e,resolveRenderer:t},()=>C(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),C("")}import{defineComponent as X,h as u}from"vue-demi";var H={borderLeft:"10px solid #e42535",background:"rgba(122, 215, 218, 0.3)",color:"#1d3557",padding:"1rem",textAlign:"left",margin:"1rem 5vw"},Q={margin:"0 0 1rem"},Ee=X({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:{...H}},[u("h2",{style:{...Q}},`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 Z,createEventBus as W,subscribeToComposition as ee}from"@uniformdev/canvas";import{watch as oe}from"vue-demi";async function Ae({enabled:e,projectId:t,compositionIdRef:o,effect:n}){let s;oe([()=>e,()=>o.value,()=>t],async()=>{if(s==null||s(),!e||!o.value||!t)return;let r=await W();r&&(s=ee({eventBus:r,compositionId:o.value,compositionState:Z,projectId:t,callback:n,event:"updated"}))},{immediate:!0})}import{createCanvasChannel as te,isUpdateCompositionMessage as ne,IN_CONTEXT_EDITOR_QUERY_STRING_PARAM as re}from"@uniformdev/canvas";import{ref as se,computed as ie,watch as g,onMounted as ae}from"vue-demi";var x="uniform-canvas-preview-script",je=({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"}}),n=await o.json();if(!o.ok)throw new Error("Error reading enhanced composition");return n.composition},Me=({composition:e,enhance:t=o=>o.composition})=>{let o=se(e);g([()=>e,o],()=>{e._id!==o.value._id&&(o.value=e)},{immediate:!0});let n=ie(()=>{var r;return N()?te({broadcastTo:[(r=window.opener)!=null?r:window.top],listenTo:[window]}):void 0});return g([n,()=>t],()=>{if(!n.value)return;let s=n.value.on("update-composition",async r=>{if(ne(r)){let m=await t(r);o.value=m}});return()=>{s()}},{immediate:!0}),ae(()=>{if(!N()||document.getElementById(x))return;let r=document.createElement("script");r.id=x,r.src=pe(),r.async=!0,document.head.appendChild(r)}),{composition:o}};function pe(){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),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,S as Composition,Ee as DefaultNotImplementedComponent,be as SlotContent,v as compositionInjectionKey,w as convertComponentToProps,je as createApiEnhancer,y as resolveRendererInjectionKey,Ae as useCompositionEventEffect,Me as useCompositionInstance};
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var w=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var z=Object.prototype.hasOwnProperty;var $=(e,t)=>{for(var o in t)w(e,o,{get:t[o],enumerable:!0})},K=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of M(t))!z.call(e,r)&&r!==o&&w(e,r,{get:()=>t[r],enumerable:!(n=j(t,r))||n.enumerable});return e};var L=e=>K(w({},"__esModule",{value:!0}),e);var W={};$(W,{CANVAS_COMPOSITION_TYPE:()=>E,CANVAS_SLOT_CONTENT_TYPE:()=>g,Composition:()=>x,DefaultNotImplementedComponent:()=>G,SlotContent:()=>B,compositionInjectionKey:()=>R,convertComponentToProps:()=>N,createApiEnhancer:()=>H,resolveRendererInjectionKey:()=>h,useCompositionEventEffect:()=>X,useCompositionInstance:()=>Q});module.exports=L(W);var a=require("vue-demi");var E="Composition",g="SlotContent",R="uniformComposition",h="uniformResolveRenderer";var _=require("@uniformdev/canvas"),P=require("@uniformdev/context-vue");var x=(0,a.defineComponent)({name:E,inheritAttrs:!1,props:{data:{type:Object,required:!0},resolveRenderer:{type:Function,default:()=>({type:e})=>(0,a.resolveComponent)(e)},behaviorTracking:{type:String,default:"onView"}},setup(e,t){var d,C,T;let o=(0,a.computed)(()=>{var p,u;return(u=e.data)!=null?u:(p=(0,a.inject)(R))==null?void 0:p.value}),n=(d=e.resolveRenderer)!=null?d:(0,a.inject)(h);(0,a.provide)(R,o),(0,a.provide)(h,n);let r=(0,a.computed)(()=>{var p,u;return(u=(p=o.value)==null?void 0:p.slots)!=null?u:{}}),s=(0,a.computed)(()=>{var p,u;return(u=(p=o.value)==null?void 0:p.parameters)!=null?u:{}}),l=(0,a.computed)(()=>JSON.stringify(o.value)),i=(T=(C=o.value.parameters)==null?void 0:C[_.CANVAS_ENRICHMENT_TAG_PARAM])==null?void 0:T.value,m=()=>{var p,u;return(u=(p=t.slots).default)==null?void 0:u.call(p,{slots:r.value,parameters:s.value})};if((0,P.isUsingUniformContext)()){let p=e.behaviorTracking==="onLoad"?P.TrackSlot:P.Track;return()=>(0,a.h)(p,{behavior:i,key:l.value},m)}return m}});var c=require("vue-demi"),y=require("@uniformdev/canvas"),S=require("@uniformdev/context-vue");function N(e){var r;let t=(r=e.parameters)!=null?r:{};return{...Object.entries(t).reduce((s,[l,{value:i}])=>({...s,[Y(l)]:i}),{}),...e.data,component:e}}function Y(e){return e.replace("$","")}var B=(0,c.defineComponent)({name:g,inheritAttrs:!1,props:{name:{type:String},resolveRenderer:{type:Function}},setup(e,t){var l;let o=(0,c.inject)(R),n=(l=e.resolveRenderer)!=null?l:(0,c.inject)(h);if(!o||!n)throw new Error("<SlotContent /> can only be used inside a <Composition />");let r=(0,c.computed)(()=>{var i,m,d;return e.name?(m=(i=o==null?void 0:o.value.slots)==null?void 0:i[e.name])!=null?m:[]:Object.values((d=o==null?void 0:o.value.slots)!=null?d:{}).flat()}),s=r.value.flatMap((i,m)=>{var T,p;let d=A({component:i,resolveRenderer:n}),C=t.slots.default?t.slots.default({child:d,component:i}):d;if(i._id){let u=(0,c.h)("script",{"data-role":"component-start","data-component-id":i._id,"data-slot-name":name,"data-component-index":m,"data-total-components":r.value.length,"data-component-name":i.type,"data-component-title":(p=(T=i.parameters)==null?void 0:T.title)==null?void 0:p.value,key:`open-${m}`}),V=(0,c.h)("script",{"data-role":"component-end",key:`close-${m}`});return[u,C,V]}return[C]});return()=>s}});function D(e,t){var s,l,i,m,d,C;let o=e==null?void 0:e.parameters,n=(0,y.mapSlotToPersonalizedVariations)((s=e.slots)==null?void 0:s.pz),r=(m=(i=(l=e.parameters)==null?void 0:l.trackingEventName)==null?void 0:i.value)!=null?m:"Untitled Personalization";return(0,c.h)(S.Personalize,{name:r,component:T=>t(T),variations:n,count:Number((C=(d=o==null?void 0:o.count)==null?void 0:d.value)!=null?C:1)})}function F(e,t){var s,l,i,m,d;let o=(l=(s=e==null?void 0:e.slots)==null?void 0:s.test)!=null?l:[],n=(d=(m=(i=e==null?void 0:e.parameters)==null?void 0:i.test)==null?void 0:m.value)!=null?d:"Untitled Test",r=(0,y.mapSlotToTestVariations)(o);return(0,c.h)(S.Test,{variations:r,name:n,component:C=>t(C)})}function A({component:e,resolveRenderer:t}){if(e.type===y.CANVAS_TEST_TYPE)return F(e,n=>A({component:n,resolveRenderer:t}));if(e.type===y.CANVAS_PERSONALIZE_TYPE)return D(e,n=>A({component:n,resolveRenderer:t}));let o=t==null?void 0:t(e);if(o){let n=N(e);return(0,c.h)(x,{data:e,resolveRenderer:t},()=>(0,c.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,c.h)("")}var f=require("vue-demi"),J={borderLeft:"10px solid #e42535",background:"rgba(122, 215, 218, 0.3)",color:"#1d3557",padding:"1rem",textAlign:"left",margin:"1rem 5vw"},q={margin:"0 0 1rem"},G=(0,f.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,f.h)("div",{key:"content",style:{...J}},[(0,f.h)("h2",{style:{...q}},`Component: ${o}`),(0,f.h)("p",[(0,f.h)("strong",`${o} has no Vue implementation. It may need to be added to your `),(0,f.h)("code",{},"resolveRenderer()"),(0,f.h)("strong",{}," function.")]),(0,f.h)("details",{},[(0,f.h)("summary",{},"props/attributes"),(0,f.h)("pre",{style:{overflowX:"auto"}},`${JSON.stringify(t)}`)])])}});var I=require("@uniformdev/canvas"),O=require("vue-demi");async function X({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 s=await(0,I.createEventBus)();s&&(r=(0,I.subscribeToComposition)({eventBus:s,compositionId:o.value,compositionState:I.CANVAS_DRAFT_STATE,projectId:t,callback:n,event:"updated"}))},{immediate:!0})}var b=require("@uniformdev/canvas"),v=require("vue-demi"),k="uniform-canvas-preview-script",H=({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"}}),n=await o.json();if(!o.ok)throw new Error("Error reading enhanced composition");return n.composition},Q=({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 n=(0,v.computed)(()=>{var s;return U()?(0,b.createCanvasChannel)({broadcastTo:[(s=window.opener)!=null?s:window.top],listenTo:[window]}):void 0});return(0,v.watch)([n,()=>t],()=>{if(!n.value)return;let r=n.value.on("update-composition",async s=>{if((0,b.isUpdateCompositionMessage)(s)){let l=await t(s);o.value=l}});return()=>{r()}},{immediate:!0}),(0,v.onMounted)(()=>{if(!U()||document.getElementById(k))return;let s=document.createElement("script");s.id=k,s.src=Z(),s.async=!0,document.head.appendChild(s)}),{composition:o}};function Z(){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(b.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});
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{defineComponent as
|
|
1
|
+
import{defineComponent as _,computed as T,h as O,provide as I,inject as b,resolveComponent as k}from"vue-demi";var h="Composition",P="SlotContent",v="uniformComposition",y="uniformResolveRenderer";import{CANVAS_ENRICHMENT_TAG_PARAM as U}from"@uniformdev/canvas";import{Track as V,TrackSlot as j,isUsingUniformContext as M}from"@uniformdev/context-vue";var S=_({name:h,inheritAttrs:!1,props:{data:{type:Object,required:!0},resolveRenderer:{type:Function,default:()=>({type:e})=>k(e)},behaviorTracking:{type:String,default:"onView"}},setup(e,t){var c,d,f;let o=T(()=>{var a,l;return(l=e.data)!=null?l:(a=b(v))==null?void 0:a.value}),n=(c=e.resolveRenderer)!=null?c:b(y);I(v,o),I(y,n);let s=T(()=>{var a,l;return(l=(a=o.value)==null?void 0:a.slots)!=null?l:{}}),r=T(()=>{var a,l;return(l=(a=o.value)==null?void 0:a.parameters)!=null?l:{}}),m=T(()=>JSON.stringify(o.value)),i=(f=(d=o.value.parameters)==null?void 0:d[U])==null?void 0:f.value,p=()=>{var a,l;return(l=(a=t.slots).default)==null?void 0:l.call(a,{slots:s.value,parameters:r.value})};if(M()){let a=e.behaviorTracking==="onLoad"?j:V;return()=>O(a,{behavior:i,key:m.value},p)}return p}});import{defineComponent as $,computed as K,h as C,inject as E}from"vue-demi";import{CANVAS_PERSONALIZE_TYPE as L,CANVAS_TEST_TYPE as Y,mapSlotToPersonalizedVariations as B,mapSlotToTestVariations as D}from"@uniformdev/canvas";import{Personalize as F,Test as J}from"@uniformdev/context-vue";function w(e){var s;let t=(s=e.parameters)!=null?s:{};return{...Object.entries(t).reduce((r,[m,{value:i}])=>({...r,[z(m)]:i}),{}),...e.data,component:e}}function z(e){return e.replace("$","")}var be=$({name:P,inheritAttrs:!1,props:{name:{type:String},resolveRenderer:{type:Function}},setup(e,t){var m;let o=E(v),n=(m=e.resolveRenderer)!=null?m:E(y);if(!o||!n)throw new Error("<SlotContent /> can only be used inside a <Composition />");let s=K(()=>{var i,p,c;return e.name?(p=(i=o==null?void 0:o.value.slots)==null?void 0:i[e.name])!=null?p:[]:Object.values((c=o==null?void 0:o.value.slots)!=null?c:{}).flat()}),r=s.value.flatMap((i,p)=>{var f,a;let c=R({component:i,resolveRenderer:n}),d=t.slots.default?t.slots.default({child:c,component:i}):c;if(i._id){let l=C("script",{"data-role":"component-start","data-component-id":i._id,"data-slot-name":name,"data-component-index":p,"data-total-components":s.value.length,"data-component-name":i.type,"data-component-title":(a=(f=i.parameters)==null?void 0:f.title)==null?void 0:a.value,key:`open-${p}`}),A=C("script",{"data-role":"component-end",key:`close-${p}`});return[l,d,A]}return[d]});return()=>r}});function q(e,t){var r,m,i,p,c,d;let o=e==null?void 0:e.parameters,n=B((r=e.slots)==null?void 0:r.pz),s=(p=(i=(m=e.parameters)==null?void 0:m.trackingEventName)==null?void 0:i.value)!=null?p:"Untitled Personalization";return C(F,{name:s,component:f=>t(f),variations:n,count:Number((d=(c=o==null?void 0:o.count)==null?void 0:c.value)!=null?d:1)})}function G(e,t){var r,m,i,p,c;let o=(m=(r=e==null?void 0:e.slots)==null?void 0:r.test)!=null?m:[],n=(c=(p=(i=e==null?void 0:e.parameters)==null?void 0:i.test)==null?void 0:p.value)!=null?c:"Untitled Test",s=D(o);return C(J,{variations:s,name:n,component:d=>t(d)})}function R({component:e,resolveRenderer:t}){if(e.type===Y)return G(e,n=>R({component:n,resolveRenderer:t}));if(e.type===L)return q(e,n=>R({component:n,resolveRenderer:t}));let o=t==null?void 0:t(e);if(o){let n=w(e);return C(S,{data:e,resolveRenderer:t},()=>C(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),C("")}import{defineComponent as X,h as u}from"vue-demi";var H={borderLeft:"10px solid #e42535",background:"rgba(122, 215, 218, 0.3)",color:"#1d3557",padding:"1rem",textAlign:"left",margin:"1rem 5vw"},Q={margin:"0 0 1rem"},Ee=X({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:{...H}},[u("h2",{style:{...Q}},`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 Z,createEventBus as W,subscribeToComposition as ee}from"@uniformdev/canvas";import{watch as oe}from"vue-demi";async function Ae({enabled:e,projectId:t,compositionIdRef:o,effect:n}){let s;oe([()=>e,()=>o.value,()=>t],async()=>{if(s==null||s(),!e||!o.value||!t)return;let r=await W();r&&(s=ee({eventBus:r,compositionId:o.value,compositionState:Z,projectId:t,callback:n,event:"updated"}))},{immediate:!0})}import{createCanvasChannel as te,isUpdateCompositionMessage as ne,IN_CONTEXT_EDITOR_QUERY_STRING_PARAM as re}from"@uniformdev/canvas";import{ref as se,computed as ie,watch as g,onMounted as ae}from"vue-demi";var x="uniform-canvas-preview-script",je=({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"}}),n=await o.json();if(!o.ok)throw new Error("Error reading enhanced composition");return n.composition},Me=({composition:e,enhance:t=o=>o.composition})=>{let o=se(e);g([()=>e,o],()=>{e._id!==o.value._id&&(o.value=e)},{immediate:!0});let n=ie(()=>{var r;return N()?te({broadcastTo:[(r=window.opener)!=null?r:window.top],listenTo:[window]}):void 0});return g([n,()=>t],()=>{if(!n.value)return;let s=n.value.on("update-composition",async r=>{if(ne(r)){let m=await t(r);o.value=m}});return()=>{s()}},{immediate:!0}),ae(()=>{if(!N()||document.getElementById(x))return;let r=document.createElement("script");r.id=x,r.src=pe(),r.async=!0,document.head.appendChild(r)}),{composition:o}};function pe(){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),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,S as Composition,Ee as DefaultNotImplementedComponent,be as SlotContent,v as compositionInjectionKey,w as convertComponentToProps,je as createApiEnhancer,y as resolveRendererInjectionKey,Ae as useCompositionEventEffect,Me as useCompositionInstance};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uniformdev/canvas-vue",
|
|
3
|
-
"version": "17.3.
|
|
3
|
+
"version": "17.3.1-alpha.146+33ba1d5c7",
|
|
4
4
|
"description": "Vue SDK for Uniform Canvas",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"format": "prettier --write \"src/**/*.{js,ts,tsx}\""
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@uniformdev/canvas": "^17.3.
|
|
25
|
+
"@uniformdev/canvas": "^17.3.1-alpha.146+33ba1d5c7",
|
|
26
26
|
"@vue/test-utils": "2.1.0",
|
|
27
27
|
"vue-demi": "^0.13.0"
|
|
28
28
|
},
|
|
@@ -39,11 +39,11 @@
|
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@testing-library/vue": "6.6.1",
|
|
41
41
|
"@types/uuid": "8.3.4",
|
|
42
|
-
"@uniformdev/context-vue": "^17.3.
|
|
42
|
+
"@uniformdev/context-vue": "^17.3.1-alpha.146+33ba1d5c7",
|
|
43
43
|
"@vue/server-test-utils": "1.3.0",
|
|
44
|
-
"vue": "3.2.
|
|
45
|
-
"vue-server-renderer": "2.7.
|
|
46
|
-
"vue-template-compiler": "2.7.
|
|
44
|
+
"vue": "3.2.39",
|
|
45
|
+
"vue-server-renderer": "2.7.13",
|
|
46
|
+
"vue-template-compiler": "2.7.13"
|
|
47
47
|
},
|
|
48
48
|
"files": [
|
|
49
49
|
"dist",
|
|
@@ -62,5 +62,5 @@
|
|
|
62
62
|
"last 2 versions",
|
|
63
63
|
"not dead"
|
|
64
64
|
],
|
|
65
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "33ba1d5c7cf8aca1d9d5c7c14e0d97c0805f6840"
|
|
66
66
|
}
|