@uniformdev/canvas-react 17.7.1-alpha.176 → 17.7.1-alpha.211

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.
Files changed (4) hide show
  1. package/dist/index.esm.js +27 -17
  2. package/dist/index.js +34 -25
  3. package/dist/index.mjs +27 -17
  4. package/package.json +5 -5
package/dist/index.esm.js CHANGED
@@ -63,6 +63,7 @@ var componentStoreResolver = createComponentStoreResolver({
63
63
 
64
64
  // src/components/Slot.tsx
65
65
  import {
66
+ CANVAS_LOCALE_TAG_PARAM,
66
67
  CANVAS_PERSONALIZE_TYPE,
67
68
  CANVAS_TEST_TYPE,
68
69
  IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,
@@ -167,7 +168,7 @@ function renderComponent({
167
168
  slotChildrenCount,
168
169
  emptyPlaceholder
169
170
  }) {
170
- var _a, _b, _c;
171
+ var _a, _b, _c, _d;
171
172
  const RenderComponent = resolveRenderer == null ? void 0 : resolveRenderer(component);
172
173
  if (component.type === CANVAS_TEST_TYPE) {
173
174
  return resolveSystem.test(
@@ -198,7 +199,8 @@ function renderComponent({
198
199
  "data-total-components": slotChildrenCount != null ? slotChildrenCount : "",
199
200
  "data-component-name": component.type,
200
201
  "data-is-placeholder": isPlaceholder ? "true" : void 0,
201
- "data-component-title": (_c = (_b = (_a = component.parameters) == null ? void 0 : _a.title) == null ? void 0 : _b.value) != null ? _c : ""
202
+ "data-is-localized": ((_a = component.parameters) == null ? void 0 : _a[CANVAS_LOCALE_TAG_PARAM]) ? "true" : void 0,
203
+ "data-component-title": (_d = (_c = (_b = component.parameters) == null ? void 0 : _b.title) == null ? void 0 : _c.value) != null ? _d : ""
202
204
  }
203
205
  ), isPlaceholder && emptyPlaceholder !== void 0 ? emptyPlaceholder : /* @__PURE__ */ React2.createElement(RenderComponent, { ...props }), !shouldRenderContextualEditingTags ? null : /* @__PURE__ */ React2.createElement("script", { "data-role": "component-end" }));
204
206
  } else if (process.env.NODE_ENV !== "production") {
@@ -273,28 +275,36 @@ function resolveChildren({
273
275
  }
274
276
 
275
277
  // src/components/DefaultNotImplementedComponent.tsx
278
+ import { CANVAS_LOCALIZATION_TYPE } from "@uniformdev/canvas";
276
279
  import React4 from "react";
280
+ var wrapperStyles = {
281
+ borderLeft: "4px solid #e42535",
282
+ padding: "16px",
283
+ fontSize: "16px",
284
+ borderRadius: "0 8px 8px 0",
285
+ margin: "8px",
286
+ backgroundColor: "rgba(255, 255, 255, 0.45)",
287
+ color: "#1d3557"
288
+ };
277
289
  function DefaultNotImplementedComponent(props) {
278
290
  var _a;
279
291
  const componentType = (_a = props.component) == null ? void 0 : _a.type;
280
292
  if (!componentType) {
281
293
  return null;
282
294
  }
283
- return /* @__PURE__ */ React4.createElement(
284
- "div",
285
- {
286
- style: {
287
- borderLeft: "10px solid #e42535!important",
288
- padding: "0.01em 16px 16px",
289
- borderRadius: "16px",
290
- backgroundColor: "rgba(122, 215, 218, 0.3)",
291
- color: "#1d3557"
292
- }
293
- },
294
- /* @__PURE__ */ React4.createElement("h2", null, "Component: ", componentType),
295
- /* @__PURE__ */ React4.createElement("p", null, /* @__PURE__ */ React4.createElement("strong", null, componentType), " has no React implementation. It may need to be added to your", " ", /* @__PURE__ */ React4.createElement("code", null, "resolveRenderer()"), " function."),
296
- /* @__PURE__ */ React4.createElement("details", null, /* @__PURE__ */ React4.createElement("summary", null, "Props"), /* @__PURE__ */ React4.createElement("pre", null, JSON.stringify(props, null, 2)))
297
- );
295
+ if (componentType === CANVAS_LOCALIZATION_TYPE) {
296
+ return /* @__PURE__ */ React4.createElement("div", { style: wrapperStyles }, /* @__PURE__ */ React4.createElement("p", null, "Seems like localization is not enabled in your application. Please read our documentation on how to", " ", /* @__PURE__ */ React4.createElement(
297
+ "a",
298
+ {
299
+ href: "https://docs.uniform.app/guides/composition/localization#activate-front-end",
300
+ target: "_blank",
301
+ style: { fontWeight: "bolder", textDecoration: "underline" },
302
+ rel: "noreferrer"
303
+ },
304
+ "enable localization in your front-end application."
305
+ )));
306
+ }
307
+ return /* @__PURE__ */ React4.createElement("div", { style: wrapperStyles }, /* @__PURE__ */ React4.createElement("h2", null, "Component: ", /* @__PURE__ */ React4.createElement("code", null, componentType)), /* @__PURE__ */ React4.createElement("p", null, /* @__PURE__ */ React4.createElement("code", null, /* @__PURE__ */ React4.createElement("strong", null, componentType)), " ", "has no React implementation. It may need to be added to your ", /* @__PURE__ */ React4.createElement("code", null, "resolveRenderer()"), " function."), /* @__PURE__ */ React4.createElement("details", null, /* @__PURE__ */ React4.createElement("summary", { style: { cursor: "pointer" } }, "Props"), /* @__PURE__ */ React4.createElement("pre", null, JSON.stringify(props, null, 2))));
298
308
  }
299
309
 
300
310
  // src/hooks/useCompositionEventEffect.ts
package/dist/index.js CHANGED
@@ -202,7 +202,7 @@ function renderComponent({
202
202
  slotChildrenCount,
203
203
  emptyPlaceholder
204
204
  }) {
205
- var _a, _b, _c;
205
+ var _a, _b, _c, _d;
206
206
  const RenderComponent = resolveRenderer == null ? void 0 : resolveRenderer(component);
207
207
  if (component.type === import_canvas2.CANVAS_TEST_TYPE) {
208
208
  return resolveSystem.test(
@@ -233,7 +233,8 @@ function renderComponent({
233
233
  "data-total-components": slotChildrenCount != null ? slotChildrenCount : "",
234
234
  "data-component-name": component.type,
235
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 : ""
236
+ "data-is-localized": ((_a = component.parameters) == null ? void 0 : _a[import_canvas2.CANVAS_LOCALE_TAG_PARAM]) ? "true" : void 0,
237
+ "data-component-title": (_d = (_c = (_b = component.parameters) == null ? void 0 : _b.title) == null ? void 0 : _c.value) != null ? _d : ""
237
238
  }
238
239
  ), 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
240
  } else if (process.env.NODE_ENV !== "production") {
@@ -308,32 +309,40 @@ function resolveChildren({
308
309
  }
309
310
 
310
311
  // src/components/DefaultNotImplementedComponent.tsx
312
+ var import_canvas4 = require("@uniformdev/canvas");
311
313
  var import_react3 = __toESM(require("react"));
314
+ var wrapperStyles = {
315
+ borderLeft: "4px solid #e42535",
316
+ padding: "16px",
317
+ fontSize: "16px",
318
+ borderRadius: "0 8px 8px 0",
319
+ margin: "8px",
320
+ backgroundColor: "rgba(255, 255, 255, 0.45)",
321
+ color: "#1d3557"
322
+ };
312
323
  function DefaultNotImplementedComponent(props) {
313
324
  var _a;
314
325
  const componentType = (_a = props.component) == null ? void 0 : _a.type;
315
326
  if (!componentType) {
316
327
  return null;
317
328
  }
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
- );
329
+ if (componentType === import_canvas4.CANVAS_LOCALIZATION_TYPE) {
330
+ return /* @__PURE__ */ import_react3.default.createElement("div", { style: wrapperStyles }, /* @__PURE__ */ import_react3.default.createElement("p", null, "Seems like localization is not enabled in your application. Please read our documentation on how to", " ", /* @__PURE__ */ import_react3.default.createElement(
331
+ "a",
332
+ {
333
+ href: "https://docs.uniform.app/guides/composition/localization#activate-front-end",
334
+ target: "_blank",
335
+ style: { fontWeight: "bolder", textDecoration: "underline" },
336
+ rel: "noreferrer"
337
+ },
338
+ "enable localization in your front-end application."
339
+ )));
340
+ }
341
+ return /* @__PURE__ */ import_react3.default.createElement("div", { style: wrapperStyles }, /* @__PURE__ */ import_react3.default.createElement("h2", null, "Component: ", /* @__PURE__ */ import_react3.default.createElement("code", null, componentType)), /* @__PURE__ */ import_react3.default.createElement("p", null, /* @__PURE__ */ import_react3.default.createElement("code", 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."), /* @__PURE__ */ import_react3.default.createElement("details", null, /* @__PURE__ */ import_react3.default.createElement("summary", { style: { cursor: "pointer" } }, "Props"), /* @__PURE__ */ import_react3.default.createElement("pre", null, JSON.stringify(props, null, 2))));
333
342
  }
334
343
 
335
344
  // src/hooks/useCompositionEventEffect.ts
336
- var import_canvas4 = require("@uniformdev/canvas");
345
+ var import_canvas5 = require("@uniformdev/canvas");
337
346
  var import_react4 = require("react");
338
347
  function useCompositionEventEffect({
339
348
  enabled,
@@ -347,12 +356,12 @@ function useCompositionEventEffect({
347
356
  }
348
357
  let goodbye = void 0;
349
358
  const loadEffect = async () => {
350
- const eventBus = await (0, import_canvas4.createEventBus)();
359
+ const eventBus = await (0, import_canvas5.createEventBus)();
351
360
  if (eventBus) {
352
- goodbye = (0, import_canvas4.subscribeToComposition)({
361
+ goodbye = (0, import_canvas5.subscribeToComposition)({
353
362
  eventBus,
354
363
  compositionId,
355
- compositionState: import_canvas4.CANVAS_DRAFT_STATE,
364
+ compositionState: import_canvas5.CANVAS_DRAFT_STATE,
356
365
  projectId,
357
366
  callback: effect,
358
367
  event: "updated"
@@ -369,7 +378,7 @@ function useCompositionEventEffect({
369
378
  }
370
379
 
371
380
  // src/hooks/useContextualEditing.ts
372
- var import_canvas5 = require("@uniformdev/canvas");
381
+ var import_canvas6 = require("@uniformdev/canvas");
373
382
  var import_react5 = require("react");
374
383
  var previewScriptId = "uniform-canvas-preview-script";
375
384
  var createApiEnhancer = ({ apiUrl }) => {
@@ -402,7 +411,7 @@ var useContextualEditing = ({
402
411
  if (!isInContextEditingMode()) {
403
412
  return;
404
413
  }
405
- const channel2 = (0, import_canvas5.createCanvasChannel)({
414
+ const channel2 = (0, import_canvas6.createCanvasChannel)({
406
415
  broadcastTo: [(_a = window.opener) != null ? _a : window.top],
407
416
  listenTo: [window]
408
417
  });
@@ -413,7 +422,7 @@ var useContextualEditing = ({
413
422
  return;
414
423
  }
415
424
  const unsubscribe = channel.on("update-composition", async (message) => {
416
- if ((0, import_canvas5.isUpdateCompositionMessage)(message)) {
425
+ if ((0, import_canvas6.isUpdateCompositionMessage)(message)) {
417
426
  const composition = await enhance(message);
418
427
  setContextualComposition(composition);
419
428
  }
@@ -449,7 +458,7 @@ function isInContextEditingMode() {
449
458
  return false;
450
459
  }
451
460
  const isOpenedByInContextEditor = new URLSearchParams(window.location.search).has(
452
- import_canvas5.IN_CONTEXT_EDITOR_QUERY_STRING_PARAM
461
+ import_canvas6.IN_CONTEXT_EDITOR_QUERY_STRING_PARAM
453
462
  );
454
463
  const isAllowlistedReferrer = Boolean(
455
464
  window.document.referrer.match(/(^https:\/\/|\.)(uniform.app|uniform.wtf|localhost:\d{4})\//)
package/dist/index.mjs CHANGED
@@ -63,6 +63,7 @@ var componentStoreResolver = createComponentStoreResolver({
63
63
 
64
64
  // src/components/Slot.tsx
65
65
  import {
66
+ CANVAS_LOCALE_TAG_PARAM,
66
67
  CANVAS_PERSONALIZE_TYPE,
67
68
  CANVAS_TEST_TYPE,
68
69
  IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,
@@ -167,7 +168,7 @@ function renderComponent({
167
168
  slotChildrenCount,
168
169
  emptyPlaceholder
169
170
  }) {
170
- var _a, _b, _c;
171
+ var _a, _b, _c, _d;
171
172
  const RenderComponent = resolveRenderer == null ? void 0 : resolveRenderer(component);
172
173
  if (component.type === CANVAS_TEST_TYPE) {
173
174
  return resolveSystem.test(
@@ -198,7 +199,8 @@ function renderComponent({
198
199
  "data-total-components": slotChildrenCount != null ? slotChildrenCount : "",
199
200
  "data-component-name": component.type,
200
201
  "data-is-placeholder": isPlaceholder ? "true" : void 0,
201
- "data-component-title": (_c = (_b = (_a = component.parameters) == null ? void 0 : _a.title) == null ? void 0 : _b.value) != null ? _c : ""
202
+ "data-is-localized": ((_a = component.parameters) == null ? void 0 : _a[CANVAS_LOCALE_TAG_PARAM]) ? "true" : void 0,
203
+ "data-component-title": (_d = (_c = (_b = component.parameters) == null ? void 0 : _b.title) == null ? void 0 : _c.value) != null ? _d : ""
202
204
  }
203
205
  ), isPlaceholder && emptyPlaceholder !== void 0 ? emptyPlaceholder : /* @__PURE__ */ React2.createElement(RenderComponent, { ...props }), !shouldRenderContextualEditingTags ? null : /* @__PURE__ */ React2.createElement("script", { "data-role": "component-end" }));
204
206
  } else if (process.env.NODE_ENV !== "production") {
@@ -273,28 +275,36 @@ function resolveChildren({
273
275
  }
274
276
 
275
277
  // src/components/DefaultNotImplementedComponent.tsx
278
+ import { CANVAS_LOCALIZATION_TYPE } from "@uniformdev/canvas";
276
279
  import React4 from "react";
280
+ var wrapperStyles = {
281
+ borderLeft: "4px solid #e42535",
282
+ padding: "16px",
283
+ fontSize: "16px",
284
+ borderRadius: "0 8px 8px 0",
285
+ margin: "8px",
286
+ backgroundColor: "rgba(255, 255, 255, 0.45)",
287
+ color: "#1d3557"
288
+ };
277
289
  function DefaultNotImplementedComponent(props) {
278
290
  var _a;
279
291
  const componentType = (_a = props.component) == null ? void 0 : _a.type;
280
292
  if (!componentType) {
281
293
  return null;
282
294
  }
283
- return /* @__PURE__ */ React4.createElement(
284
- "div",
285
- {
286
- style: {
287
- borderLeft: "10px solid #e42535!important",
288
- padding: "0.01em 16px 16px",
289
- borderRadius: "16px",
290
- backgroundColor: "rgba(122, 215, 218, 0.3)",
291
- color: "#1d3557"
292
- }
293
- },
294
- /* @__PURE__ */ React4.createElement("h2", null, "Component: ", componentType),
295
- /* @__PURE__ */ React4.createElement("p", null, /* @__PURE__ */ React4.createElement("strong", null, componentType), " has no React implementation. It may need to be added to your", " ", /* @__PURE__ */ React4.createElement("code", null, "resolveRenderer()"), " function."),
296
- /* @__PURE__ */ React4.createElement("details", null, /* @__PURE__ */ React4.createElement("summary", null, "Props"), /* @__PURE__ */ React4.createElement("pre", null, JSON.stringify(props, null, 2)))
297
- );
295
+ if (componentType === CANVAS_LOCALIZATION_TYPE) {
296
+ return /* @__PURE__ */ React4.createElement("div", { style: wrapperStyles }, /* @__PURE__ */ React4.createElement("p", null, "Seems like localization is not enabled in your application. Please read our documentation on how to", " ", /* @__PURE__ */ React4.createElement(
297
+ "a",
298
+ {
299
+ href: "https://docs.uniform.app/guides/composition/localization#activate-front-end",
300
+ target: "_blank",
301
+ style: { fontWeight: "bolder", textDecoration: "underline" },
302
+ rel: "noreferrer"
303
+ },
304
+ "enable localization in your front-end application."
305
+ )));
306
+ }
307
+ return /* @__PURE__ */ React4.createElement("div", { style: wrapperStyles }, /* @__PURE__ */ React4.createElement("h2", null, "Component: ", /* @__PURE__ */ React4.createElement("code", null, componentType)), /* @__PURE__ */ React4.createElement("p", null, /* @__PURE__ */ React4.createElement("code", null, /* @__PURE__ */ React4.createElement("strong", null, componentType)), " ", "has no React implementation. It may need to be added to your ", /* @__PURE__ */ React4.createElement("code", null, "resolveRenderer()"), " function."), /* @__PURE__ */ React4.createElement("details", null, /* @__PURE__ */ React4.createElement("summary", { style: { cursor: "pointer" } }, "Props"), /* @__PURE__ */ React4.createElement("pre", null, JSON.stringify(props, null, 2))));
298
308
  }
299
309
 
300
310
  // src/hooks/useCompositionEventEffect.ts
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uniformdev/canvas-react",
3
- "version": "17.7.1-alpha.176+23649b7d5",
3
+ "version": "17.7.1-alpha.211+e51b76310",
4
4
  "description": "React SDK for Uniform Canvas",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "main": "./dist/index.js",
@@ -23,9 +23,9 @@
23
23
  "format": "prettier --write \"src/**/*.{js,ts,tsx}\""
24
24
  },
25
25
  "dependencies": {
26
- "@uniformdev/canvas": "^17.7.1-alpha.176+23649b7d5",
27
- "@uniformdev/context": "^17.7.1-alpha.176+23649b7d5",
28
- "@uniformdev/context-react": "^17.7.1-alpha.176+23649b7d5"
26
+ "@uniformdev/canvas": "17.7.1-alpha.211+e51b76310",
27
+ "@uniformdev/context": "17.7.1-alpha.211+e51b76310",
28
+ "@uniformdev/context-react": "17.7.1-alpha.211+e51b76310"
29
29
  },
30
30
  "peerDependencies": {
31
31
  "react": ">= 16",
@@ -42,5 +42,5 @@
42
42
  "publishConfig": {
43
43
  "access": "public"
44
44
  },
45
- "gitHead": "23649b7d5940d6b2cc904faa64408d584dff1ad4"
45
+ "gitHead": "e51b76310a677d0f0f2b35bfa1f7416c733cf25d"
46
46
  }