@uniformdev/canvas-react 17.7.1-alpha.140 → 17.7.1-alpha.169
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.esm.js +445 -1
- package/dist/index.js +473 -1
- package/dist/index.mjs +445 -1
- package/package.json +6 -6
package/dist/index.js
CHANGED
|
@@ -1 +1,473 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
24
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
25
|
+
|
|
26
|
+
// src/index.ts
|
|
27
|
+
var src_exports = {};
|
|
28
|
+
__export(src_exports, {
|
|
29
|
+
Composition: () => Composition,
|
|
30
|
+
DefaultNotImplementedComponent: () => DefaultNotImplementedComponent,
|
|
31
|
+
Slot: () => Slot,
|
|
32
|
+
componentStore: () => componentStore,
|
|
33
|
+
componentStoreResolver: () => componentStoreResolver,
|
|
34
|
+
createApiEnhancer: () => createApiEnhancer,
|
|
35
|
+
createComponentStore: () => createComponentStore,
|
|
36
|
+
createComponentStoreResolver: () => createComponentStoreResolver,
|
|
37
|
+
registerUniformComponent: () => registerUniformComponent,
|
|
38
|
+
useComposition: () => useComposition,
|
|
39
|
+
useCompositionEventEffect: () => useCompositionEventEffect,
|
|
40
|
+
useContextualEditing: () => useContextualEditing
|
|
41
|
+
});
|
|
42
|
+
module.exports = __toCommonJS(src_exports);
|
|
43
|
+
|
|
44
|
+
// src/components/Composition.tsx
|
|
45
|
+
var import_canvas3 = require("@uniformdev/canvas");
|
|
46
|
+
var import_context_react2 = require("@uniformdev/context-react");
|
|
47
|
+
var import_react2 = __toESM(require("react"));
|
|
48
|
+
|
|
49
|
+
// src/convertComponentToProps.ts
|
|
50
|
+
function convertComponentToProps(component) {
|
|
51
|
+
var _a;
|
|
52
|
+
const parameters = (_a = component.parameters) != null ? _a : {};
|
|
53
|
+
const renderComponentProps = {
|
|
54
|
+
...Object.keys(parameters).reduce((acc, cur) => {
|
|
55
|
+
acc[cur] = parameters[cur].value;
|
|
56
|
+
return acc;
|
|
57
|
+
}, {}),
|
|
58
|
+
...component.data,
|
|
59
|
+
component
|
|
60
|
+
};
|
|
61
|
+
return renderComponentProps;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
// src/storeDefinition.ts
|
|
65
|
+
var createComponentStore = () => {
|
|
66
|
+
const components = /* @__PURE__ */ new Map();
|
|
67
|
+
return {
|
|
68
|
+
register: ({ type, component }) => {
|
|
69
|
+
components.set(type, component);
|
|
70
|
+
},
|
|
71
|
+
get: (name) => {
|
|
72
|
+
return components.get(name);
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
};
|
|
76
|
+
var createComponentStoreResolver = (options) => {
|
|
77
|
+
return (component) => {
|
|
78
|
+
const resolved = options.store.get(component.type);
|
|
79
|
+
return resolved || options.defaultComponent || null;
|
|
80
|
+
};
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
// src/store.ts
|
|
84
|
+
var componentStore = createComponentStore();
|
|
85
|
+
var registerUniformComponent = ({
|
|
86
|
+
type,
|
|
87
|
+
component
|
|
88
|
+
}) => {
|
|
89
|
+
if (Array.isArray(type)) {
|
|
90
|
+
type.forEach((t) => {
|
|
91
|
+
componentStore.register({
|
|
92
|
+
type: t,
|
|
93
|
+
component
|
|
94
|
+
});
|
|
95
|
+
});
|
|
96
|
+
} else {
|
|
97
|
+
componentStore.register({
|
|
98
|
+
type,
|
|
99
|
+
component
|
|
100
|
+
});
|
|
101
|
+
}
|
|
102
|
+
};
|
|
103
|
+
var componentStoreResolver = createComponentStoreResolver({
|
|
104
|
+
store: componentStore
|
|
105
|
+
});
|
|
106
|
+
|
|
107
|
+
// src/components/Slot.tsx
|
|
108
|
+
var import_canvas2 = require("@uniformdev/canvas");
|
|
109
|
+
var import_react = __toESM(require("react"));
|
|
110
|
+
|
|
111
|
+
// src/defaultSystemComponentResolver.tsx
|
|
112
|
+
var import_canvas = require("@uniformdev/canvas");
|
|
113
|
+
var import_context_react = require("@uniformdev/context-react");
|
|
114
|
+
var React = __toESM(require("react"));
|
|
115
|
+
var defaultSystemComponentResolver = {
|
|
116
|
+
test: (component, key, renderChild) => {
|
|
117
|
+
var _a, _b, _c, _d, _e;
|
|
118
|
+
const testComponent = component;
|
|
119
|
+
const variants = (_b = (_a = testComponent.slots) == null ? void 0 : _a.test) != null ? _b : [];
|
|
120
|
+
const testName = (_e = (_d = (_c = testComponent.parameters) == null ? void 0 : _c.test) == null ? void 0 : _d.value) != null ? _e : "Untitled Test";
|
|
121
|
+
const finalVariants = (0, import_canvas.mapSlotToTestVariations)(variants);
|
|
122
|
+
return /* @__PURE__ */ React.createElement(
|
|
123
|
+
import_context_react.Test,
|
|
124
|
+
{
|
|
125
|
+
key,
|
|
126
|
+
variations: finalVariants,
|
|
127
|
+
name: testName,
|
|
128
|
+
component: (variation) => renderChild(variation, key)
|
|
129
|
+
}
|
|
130
|
+
);
|
|
131
|
+
},
|
|
132
|
+
personalization: (component, key, renderChild) => {
|
|
133
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
134
|
+
const pzComponent = component;
|
|
135
|
+
const processedVariants = (0, import_canvas.mapSlotToPersonalizedVariations)((_a = pzComponent == null ? void 0 : pzComponent.slots) == null ? void 0 : _a.pz);
|
|
136
|
+
return /* @__PURE__ */ React.createElement(
|
|
137
|
+
import_context_react.Personalize,
|
|
138
|
+
{
|
|
139
|
+
key,
|
|
140
|
+
variations: processedVariants,
|
|
141
|
+
count: Number((_d = (_c = (_b = pzComponent.parameters) == null ? void 0 : _b.count) == null ? void 0 : _c.value) != null ? _d : 1),
|
|
142
|
+
name: (_g = (_f = (_e = pzComponent.parameters) == null ? void 0 : _e.trackingEventName) == null ? void 0 : _f.value) != null ? _g : "Untitled Personalization",
|
|
143
|
+
component: (variation) => renderChild(variation, 0)
|
|
144
|
+
}
|
|
145
|
+
);
|
|
146
|
+
}
|
|
147
|
+
};
|
|
148
|
+
|
|
149
|
+
// src/components/Slot.tsx
|
|
150
|
+
function Slot({
|
|
151
|
+
name,
|
|
152
|
+
resolveRenderer,
|
|
153
|
+
children,
|
|
154
|
+
emptyPlaceholder
|
|
155
|
+
}) {
|
|
156
|
+
var _a;
|
|
157
|
+
const compositionContext = useComposition();
|
|
158
|
+
if (!(compositionContext == null ? void 0 : compositionContext.composition)) {
|
|
159
|
+
throw new Error("Slot must be rendered within a Composition");
|
|
160
|
+
}
|
|
161
|
+
const { composition: layout, resolveRenderer: parentResolveRenderer } = compositionContext;
|
|
162
|
+
if (!layout) {
|
|
163
|
+
throw new Error("Cannot use Slot without a Composition wrapper.");
|
|
164
|
+
}
|
|
165
|
+
const slot = (_a = layout.slots) == null ? void 0 : _a[name];
|
|
166
|
+
if (!slot || !Array.isArray(slot)) {
|
|
167
|
+
if (process.env.NODE_ENV === "development") {
|
|
168
|
+
console.warn(
|
|
169
|
+
`[canvas-dev] slot '${name}' was rendered, but it was not defined on its component. This is expected if the slot is optional, otherwise it may indicate a typo. Component:`,
|
|
170
|
+
layout
|
|
171
|
+
);
|
|
172
|
+
}
|
|
173
|
+
return null;
|
|
174
|
+
}
|
|
175
|
+
const resolver = resolveRenderer != null ? resolveRenderer : parentResolveRenderer;
|
|
176
|
+
const systemResolver = defaultSystemComponentResolver;
|
|
177
|
+
const finalChildren = slot.map((component, index) => {
|
|
178
|
+
const child = renderComponent({
|
|
179
|
+
component,
|
|
180
|
+
resolveRenderer: resolver,
|
|
181
|
+
resolveSystem: systemResolver,
|
|
182
|
+
key: `inner-${index}`,
|
|
183
|
+
indexInSlot: index,
|
|
184
|
+
slotName: name,
|
|
185
|
+
parentComponent: layout,
|
|
186
|
+
slotChildrenCount: slot.length,
|
|
187
|
+
emptyPlaceholder
|
|
188
|
+
});
|
|
189
|
+
const elements = children ? children({ child, component, key: `wrapped-inner-${index}` }) : child;
|
|
190
|
+
return import_react.default.createElement(import_react.default.Fragment, { key: index }, elements);
|
|
191
|
+
});
|
|
192
|
+
return import_react.default.createElement(import_react.default.Fragment, void 0, finalChildren);
|
|
193
|
+
}
|
|
194
|
+
function renderComponent({
|
|
195
|
+
component,
|
|
196
|
+
resolveRenderer,
|
|
197
|
+
resolveSystem,
|
|
198
|
+
key = 0,
|
|
199
|
+
indexInSlot,
|
|
200
|
+
slotName,
|
|
201
|
+
parentComponent,
|
|
202
|
+
slotChildrenCount,
|
|
203
|
+
emptyPlaceholder
|
|
204
|
+
}) {
|
|
205
|
+
var _a, _b, _c;
|
|
206
|
+
const RenderComponent = resolveRenderer == null ? void 0 : resolveRenderer(component);
|
|
207
|
+
if (component.type === import_canvas2.CANVAS_TEST_TYPE) {
|
|
208
|
+
return resolveSystem.test(
|
|
209
|
+
component,
|
|
210
|
+
key,
|
|
211
|
+
(component2, key2) => renderComponent({ component: component2, resolveRenderer, resolveSystem, key: key2 })
|
|
212
|
+
);
|
|
213
|
+
} else if (component.type === import_canvas2.CANVAS_PERSONALIZE_TYPE) {
|
|
214
|
+
return resolveSystem.personalization(
|
|
215
|
+
component,
|
|
216
|
+
key,
|
|
217
|
+
(component2, key2) => renderComponent({ component: component2, resolveRenderer, resolveSystem, key: key2 })
|
|
218
|
+
);
|
|
219
|
+
} else if (RenderComponent) {
|
|
220
|
+
const props = convertComponentToProps(component);
|
|
221
|
+
const shouldRenderContextualEditingTags = Boolean(component._id);
|
|
222
|
+
const isPlaceholder = component._id === import_canvas2.PLACEHOLDER_ID;
|
|
223
|
+
return /* @__PURE__ */ import_react.default.createElement(Composition, { key, data: component, resolveRenderer }, !shouldRenderContextualEditingTags ? null : /* @__PURE__ */ import_react.default.createElement(
|
|
224
|
+
"script",
|
|
225
|
+
{
|
|
226
|
+
key,
|
|
227
|
+
"data-role": import_canvas2.IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,
|
|
228
|
+
"data-parent-id": parentComponent == null ? void 0 : parentComponent._id,
|
|
229
|
+
"data-parent-type": parentComponent == null ? void 0 : parentComponent.type,
|
|
230
|
+
"data-component-id": component._id,
|
|
231
|
+
"data-slot-name": slotName != null ? slotName : "",
|
|
232
|
+
"data-component-index": indexInSlot != null ? indexInSlot : "",
|
|
233
|
+
"data-total-components": slotChildrenCount != null ? slotChildrenCount : "",
|
|
234
|
+
"data-component-name": component.type,
|
|
235
|
+
"data-is-placeholder": isPlaceholder ? "true" : void 0,
|
|
236
|
+
"data-component-title": (_c = (_b = (_a = component.parameters) == null ? void 0 : _a.title) == null ? void 0 : _b.value) != null ? _c : ""
|
|
237
|
+
}
|
|
238
|
+
), isPlaceholder && emptyPlaceholder !== void 0 ? emptyPlaceholder : /* @__PURE__ */ import_react.default.createElement(RenderComponent, { ...props }), !shouldRenderContextualEditingTags ? null : /* @__PURE__ */ import_react.default.createElement("script", { "data-role": "component-end" }));
|
|
239
|
+
} else if (process.env.NODE_ENV !== "production") {
|
|
240
|
+
console.warn(
|
|
241
|
+
`[canvas] found component of type '${component.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.`,
|
|
242
|
+
component
|
|
243
|
+
);
|
|
244
|
+
}
|
|
245
|
+
return null;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
// src/components/Composition.tsx
|
|
249
|
+
var CompositionContext = (0, import_react2.createContext)(void 0);
|
|
250
|
+
function useComposition() {
|
|
251
|
+
return (0, import_react2.useContext)(CompositionContext);
|
|
252
|
+
}
|
|
253
|
+
var componentStoreResolver2 = (component) => {
|
|
254
|
+
const resolved = componentStore.get(component.type);
|
|
255
|
+
return resolved || null;
|
|
256
|
+
};
|
|
257
|
+
function Composition({
|
|
258
|
+
data,
|
|
259
|
+
resolveRenderer,
|
|
260
|
+
children,
|
|
261
|
+
behaviorTracking
|
|
262
|
+
}) {
|
|
263
|
+
var _a, _b, _c;
|
|
264
|
+
const parentLayout = useComposition();
|
|
265
|
+
const contextContextProviderPresent = (0, import_context_react2.useUniformContext)({ throwOnMissingProvider: false }) !== void 0;
|
|
266
|
+
if (!data) {
|
|
267
|
+
if (process.env.NODE_ENV === "development") {
|
|
268
|
+
console.warn(`[canvas-dev] Composition was rendered with no data, nothing will be output.`);
|
|
269
|
+
}
|
|
270
|
+
return null;
|
|
271
|
+
}
|
|
272
|
+
const context = {
|
|
273
|
+
composition: data,
|
|
274
|
+
resolveRenderer: resolveRenderer || (parentLayout == null ? void 0 : parentLayout.resolveRenderer) || componentStoreResolver2,
|
|
275
|
+
behaviorTracking: (_a = behaviorTracking != null ? behaviorTracking : parentLayout == null ? void 0 : parentLayout.behaviorTracking) != null ? _a : "onView"
|
|
276
|
+
};
|
|
277
|
+
const enrichmentTags = (_c = (_b = data.parameters) == null ? void 0 : _b[import_canvas3.CANVAS_ENRICHMENT_TAG_PARAM]) == null ? void 0 : _c.value;
|
|
278
|
+
const TrackComponent = context.behaviorTracking === "onLoad" ? import_context_react2.TrackFragment : import_context_react2.Track;
|
|
279
|
+
const resolvedChildren = resolveChildren({
|
|
280
|
+
children,
|
|
281
|
+
data,
|
|
282
|
+
hasParentLayout: Boolean(parentLayout)
|
|
283
|
+
});
|
|
284
|
+
return /* @__PURE__ */ import_react2.default.createElement(CompositionContext.Provider, { value: context }, contextContextProviderPresent ? /* @__PURE__ */ import_react2.default.createElement(TrackComponent, { behavior: enrichmentTags }, resolvedChildren) : resolvedChildren);
|
|
285
|
+
}
|
|
286
|
+
function resolveChildren({
|
|
287
|
+
children,
|
|
288
|
+
data,
|
|
289
|
+
hasParentLayout
|
|
290
|
+
}) {
|
|
291
|
+
var _a;
|
|
292
|
+
let compositionChildren = children;
|
|
293
|
+
if (!compositionChildren && !hasParentLayout) {
|
|
294
|
+
const rootComponent = componentStore.get(data.type);
|
|
295
|
+
if (rootComponent) {
|
|
296
|
+
compositionChildren = import_react2.default.createElement(rootComponent, convertComponentToProps(data));
|
|
297
|
+
} else {
|
|
298
|
+
if (Object.keys((_a = data.slots) != null ? _a : {}).length > 1 && process.env.NODE_ENV === "development") {
|
|
299
|
+
console.warn(
|
|
300
|
+
`[canvas-dev] All the slots in component '${data.type}' are rendered in no particular order. Use '<Slot name={slotName} />' to reliably render the slots.`
|
|
301
|
+
);
|
|
302
|
+
}
|
|
303
|
+
compositionChildren = Object.keys(data.slots || {}).map((slotName) => /* @__PURE__ */ import_react2.default.createElement(Slot, { key: slotName, name: slotName }));
|
|
304
|
+
}
|
|
305
|
+
}
|
|
306
|
+
const renderChildren = typeof compositionChildren === "function" ? compositionChildren(convertComponentToProps(data)) : compositionChildren;
|
|
307
|
+
return renderChildren;
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
// src/components/DefaultNotImplementedComponent.tsx
|
|
311
|
+
var import_react3 = __toESM(require("react"));
|
|
312
|
+
function DefaultNotImplementedComponent(props) {
|
|
313
|
+
var _a;
|
|
314
|
+
const componentType = (_a = props.component) == null ? void 0 : _a.type;
|
|
315
|
+
if (!componentType) {
|
|
316
|
+
return null;
|
|
317
|
+
}
|
|
318
|
+
return /* @__PURE__ */ import_react3.default.createElement(
|
|
319
|
+
"div",
|
|
320
|
+
{
|
|
321
|
+
style: {
|
|
322
|
+
borderLeft: "10px solid #e42535!important",
|
|
323
|
+
padding: "0.01em 16px 16px",
|
|
324
|
+
borderRadius: "16px",
|
|
325
|
+
backgroundColor: "rgba(122, 215, 218, 0.3)",
|
|
326
|
+
color: "#1d3557"
|
|
327
|
+
}
|
|
328
|
+
},
|
|
329
|
+
/* @__PURE__ */ import_react3.default.createElement("h2", null, "Component: ", componentType),
|
|
330
|
+
/* @__PURE__ */ import_react3.default.createElement("p", null, /* @__PURE__ */ import_react3.default.createElement("strong", null, componentType), " has no React implementation. It may need to be added to your", " ", /* @__PURE__ */ import_react3.default.createElement("code", null, "resolveRenderer()"), " function."),
|
|
331
|
+
/* @__PURE__ */ import_react3.default.createElement("details", null, /* @__PURE__ */ import_react3.default.createElement("summary", null, "Props"), /* @__PURE__ */ import_react3.default.createElement("pre", null, JSON.stringify(props, null, 2)))
|
|
332
|
+
);
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
// src/hooks/useCompositionEventEffect.ts
|
|
336
|
+
var import_canvas4 = require("@uniformdev/canvas");
|
|
337
|
+
var import_react4 = require("react");
|
|
338
|
+
function useCompositionEventEffect({
|
|
339
|
+
enabled,
|
|
340
|
+
projectId,
|
|
341
|
+
compositionId,
|
|
342
|
+
effect
|
|
343
|
+
}) {
|
|
344
|
+
(0, import_react4.useEffect)(() => {
|
|
345
|
+
if (!enabled || !compositionId || !projectId) {
|
|
346
|
+
return;
|
|
347
|
+
}
|
|
348
|
+
let goodbye = void 0;
|
|
349
|
+
const loadEffect = async () => {
|
|
350
|
+
const eventBus = await (0, import_canvas4.createEventBus)();
|
|
351
|
+
if (eventBus) {
|
|
352
|
+
goodbye = (0, import_canvas4.subscribeToComposition)({
|
|
353
|
+
eventBus,
|
|
354
|
+
compositionId,
|
|
355
|
+
compositionState: import_canvas4.CANVAS_DRAFT_STATE,
|
|
356
|
+
projectId,
|
|
357
|
+
callback: effect,
|
|
358
|
+
event: "updated"
|
|
359
|
+
});
|
|
360
|
+
}
|
|
361
|
+
};
|
|
362
|
+
loadEffect();
|
|
363
|
+
return () => {
|
|
364
|
+
if (goodbye) {
|
|
365
|
+
goodbye();
|
|
366
|
+
}
|
|
367
|
+
};
|
|
368
|
+
}, [compositionId, enabled, projectId, effect]);
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
// src/hooks/useContextualEditing.ts
|
|
372
|
+
var import_canvas5 = require("@uniformdev/canvas");
|
|
373
|
+
var import_react5 = require("react");
|
|
374
|
+
var previewScriptId = "uniform-canvas-preview-script";
|
|
375
|
+
var createApiEnhancer = ({ apiUrl }) => {
|
|
376
|
+
return async (message) => {
|
|
377
|
+
const response = await fetch(apiUrl, {
|
|
378
|
+
method: "post",
|
|
379
|
+
body: JSON.stringify({
|
|
380
|
+
composition: message.composition,
|
|
381
|
+
hash: message.hash
|
|
382
|
+
}),
|
|
383
|
+
headers: {
|
|
384
|
+
"Content-Type": "application/json"
|
|
385
|
+
}
|
|
386
|
+
});
|
|
387
|
+
const json = await response.json();
|
|
388
|
+
if (!response.ok) {
|
|
389
|
+
throw new Error("Error reading enhanced composition");
|
|
390
|
+
}
|
|
391
|
+
const body = json;
|
|
392
|
+
return body.composition;
|
|
393
|
+
};
|
|
394
|
+
};
|
|
395
|
+
var useContextualEditing = ({
|
|
396
|
+
initialCompositionValue,
|
|
397
|
+
enhance = (message) => message.composition
|
|
398
|
+
}) => {
|
|
399
|
+
const [contextualComposition, setContextualComposition] = (0, import_react5.useState)();
|
|
400
|
+
const channel = (0, import_react5.useMemo)(() => {
|
|
401
|
+
var _a;
|
|
402
|
+
if (!isInContextEditingMode()) {
|
|
403
|
+
return;
|
|
404
|
+
}
|
|
405
|
+
const channel2 = (0, import_canvas5.createCanvasChannel)({
|
|
406
|
+
broadcastTo: [(_a = window.opener) != null ? _a : window.top],
|
|
407
|
+
listenTo: [window]
|
|
408
|
+
});
|
|
409
|
+
return channel2;
|
|
410
|
+
}, []);
|
|
411
|
+
(0, import_react5.useEffect)(() => {
|
|
412
|
+
if (!channel) {
|
|
413
|
+
return;
|
|
414
|
+
}
|
|
415
|
+
const unsubscribe = channel.on("update-composition", async (message) => {
|
|
416
|
+
if ((0, import_canvas5.isUpdateCompositionMessage)(message)) {
|
|
417
|
+
const composition = await enhance(message);
|
|
418
|
+
setContextualComposition(composition);
|
|
419
|
+
}
|
|
420
|
+
});
|
|
421
|
+
return () => {
|
|
422
|
+
unsubscribe();
|
|
423
|
+
};
|
|
424
|
+
}, [channel, enhance]);
|
|
425
|
+
(0, import_react5.useEffect)(() => {
|
|
426
|
+
if (!isInContextEditingMode()) {
|
|
427
|
+
return;
|
|
428
|
+
}
|
|
429
|
+
const existingScript = document.getElementById(previewScriptId);
|
|
430
|
+
if (existingScript) {
|
|
431
|
+
return;
|
|
432
|
+
}
|
|
433
|
+
const script = document.createElement("script");
|
|
434
|
+
script.id = previewScriptId;
|
|
435
|
+
script.src = getCanvasInContextEmbedScriptUrl();
|
|
436
|
+
script.async = true;
|
|
437
|
+
document.head.appendChild(script);
|
|
438
|
+
}, []);
|
|
439
|
+
return {
|
|
440
|
+
composition: contextualComposition != null ? contextualComposition : initialCompositionValue
|
|
441
|
+
};
|
|
442
|
+
};
|
|
443
|
+
function getCanvasInContextEmbedScriptUrl() {
|
|
444
|
+
const scriptUrl = `${window.document.referrer}files/canvas-in-context-embed/index.js`;
|
|
445
|
+
return scriptUrl;
|
|
446
|
+
}
|
|
447
|
+
function isInContextEditingMode() {
|
|
448
|
+
if (typeof window === "undefined") {
|
|
449
|
+
return false;
|
|
450
|
+
}
|
|
451
|
+
const isOpenedByInContextEditor = new URLSearchParams(window.location.search).has(
|
|
452
|
+
import_canvas5.IN_CONTEXT_EDITOR_QUERY_STRING_PARAM
|
|
453
|
+
);
|
|
454
|
+
const isAllowlistedReferrer = Boolean(
|
|
455
|
+
window.document.referrer.match(/(^https:\/\/|\.)(uniform.app|uniform.wtf|localhost:\d{4})\//)
|
|
456
|
+
);
|
|
457
|
+
return isOpenedByInContextEditor && isAllowlistedReferrer;
|
|
458
|
+
}
|
|
459
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
460
|
+
0 && (module.exports = {
|
|
461
|
+
Composition,
|
|
462
|
+
DefaultNotImplementedComponent,
|
|
463
|
+
Slot,
|
|
464
|
+
componentStore,
|
|
465
|
+
componentStoreResolver,
|
|
466
|
+
createApiEnhancer,
|
|
467
|
+
createComponentStore,
|
|
468
|
+
createComponentStoreResolver,
|
|
469
|
+
registerUniformComponent,
|
|
470
|
+
useComposition,
|
|
471
|
+
useCompositionEventEffect,
|
|
472
|
+
useContextualEditing
|
|
473
|
+
});
|