@uniformdev/canvas-next-rsc 19.197.1-alpha.1 → 19.198.1-alpha.4

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.
@@ -7,7 +7,7 @@ import { RichTextNode } from '@uniformdev/richtext';
7
7
  import { PureUniformTextProps } from '@uniformdev/canvas-react/core';
8
8
  export { ClientContextComponent, createClientUniformContext, useInitUniformContext, useUniformContext } from '@uniformdev/canvas-next-rsc-client';
9
9
 
10
- declare const DefaultNotImplementedComponent: ({ component }: ComponentProps) => React__default.JSX.Element;
10
+ declare const DefaultNotImplementedComponent: ({ component }: ComponentProps) => React__default.JSX.Element | null;
11
11
 
12
12
  type RichTextComponentProps<TNode extends RichTextNode = RichTextNode> = {
13
13
  node: TNode;
@@ -7,7 +7,7 @@ import { RichTextNode } from '@uniformdev/richtext';
7
7
  import { PureUniformTextProps } from '@uniformdev/canvas-react/core';
8
8
  export { ClientContextComponent, createClientUniformContext, useInitUniformContext, useUniformContext } from '@uniformdev/canvas-next-rsc-client';
9
9
 
10
- declare const DefaultNotImplementedComponent: ({ component }: ComponentProps) => React__default.JSX.Element;
10
+ declare const DefaultNotImplementedComponent: ({ component }: ComponentProps) => React__default.JSX.Element | null;
11
11
 
12
12
  type RichTextComponentProps<TNode extends RichTextNode = RichTextNode> = {
13
13
  node: TNode;
package/dist/component.js CHANGED
@@ -43,8 +43,78 @@ module.exports = __toCommonJS(component_exports);
43
43
 
44
44
  // src/components/DefaultNotImplementedComponent.tsx
45
45
  var import_react = __toESM(require("react"));
46
+ var wrapperStyles = {
47
+ display: "flex",
48
+ flexDirection: "column",
49
+ gap: "0.5rem",
50
+ borderLeft: "4px solid #e42535",
51
+ padding: "16px",
52
+ fontSize: "16px",
53
+ borderRadius: "0 8px 8px 0",
54
+ margin: "8px",
55
+ backgroundColor: "rgba(255, 255, 255, 0.45)",
56
+ color: "#1d3557"
57
+ };
46
58
  var DefaultNotImplementedComponent = ({ component }) => {
47
- return /* @__PURE__ */ import_react.default.createElement("div", null, "The component of type ", component.type, " not been implemented yet.");
59
+ var _a, _b;
60
+ const componentType = component == null ? void 0 : component.type;
61
+ if (!componentType) {
62
+ return null;
63
+ }
64
+ const proposedFileName = `${componentType[0].toUpperCase()}${componentType.substring(1)}`;
65
+ const probableProps = Object.keys((_a = component.parameters) != null ? _a : {});
66
+ const probableSlots = Object.keys((_b = component.slots) != null ? _b : {});
67
+ const resolvedParameters = probableProps.map((prop) => {
68
+ var _a2;
69
+ const propType = (_a2 = component.parameters) == null ? void 0 : _a2[prop];
70
+ const propTypeValue = (propType == null ? void 0 : propType.type) === "text" ? "string" : "unknown";
71
+ return ` ${prop}: ${propTypeValue}`;
72
+ }).join("\n");
73
+ return /* @__PURE__ */ import_react.default.createElement("div", { style: wrapperStyles }, /* @__PURE__ */ import_react.default.createElement("h2", { style: { fontSize: "1.2rem" } }, "Unknown Component"), /* @__PURE__ */ import_react.default.createElement("p", null, "Received request from Uniform to render a component with the public ID: ", /* @__PURE__ */ import_react.default.createElement("code", null, componentType), "."), /* @__PURE__ */ import_react.default.createElement("p", null, /* @__PURE__ */ import_react.default.createElement("code", null, "<UniformComposition />"), " does not have ", /* @__PURE__ */ import_react.default.createElement("code", null, componentType), " mapped to a React component yet."), /* @__PURE__ */ import_react.default.createElement(
74
+ "ul",
75
+ {
76
+ style: {
77
+ listStyleType: "disc",
78
+ marginLeft: "1rem",
79
+ display: "flex",
80
+ flexDirection: "column",
81
+ gap: "0.5rem"
82
+ }
83
+ },
84
+ /* @__PURE__ */ import_react.default.createElement("li", null, "Create a React component and register it with Uniform, for example", /* @__PURE__ */ import_react.default.createElement("pre", null, `
85
+ import {
86
+ ComponentProps,
87
+ UniformSlot,
88
+ } from '@uniformdev/canvas-next-rsc/component';
89
+
90
+ type ${proposedFileName}Parameters = {
91
+ ${resolvedParameters}
92
+ };
93
+ type ${proposedFileName}Slots = ${probableSlots.map((slot) => `'${slot}'`).join(" | ")};
94
+ type ${proposedFileName}Props = ComponentProps<${proposedFileName}Parameters, ${proposedFileName}Slots>;
95
+
96
+ export const ${proposedFileName}Component = (props: ${proposedFileName}Props) => {
97
+ return (
98
+ <div>
99
+ <div>
100
+ ${probableSlots.map((slot) => `<UniformSlot data={props.component} context={props.context} slot={props.slots.${slot}} />`).join("\n")}
101
+ </div>
102
+ </div>
103
+ );
104
+ };
105
+
106
+ Add this component mapping to your resolveComponent function on UniformComposition.`)),
107
+ /* @__PURE__ */ import_react.default.createElement("li", null, "Import the component into the file where ", /* @__PURE__ */ import_react.default.createElement("code", null, "<UniformComposition />"), " is defined, for example ", /* @__PURE__ */ import_react.default.createElement("pre", null, `import "../../components/${proposedFileName}.tsx"`))
108
+ ), " ", /* @__PURE__ */ import_react.default.createElement("p", null, "Need more help?", " ", /* @__PURE__ */ import_react.default.createElement(
109
+ "a",
110
+ {
111
+ href: "https://docs.uniform.app/docs/learn/tutorials/nextjs-app-router",
112
+ target: "_blank",
113
+ rel: "noreferrer",
114
+ style: { textDecoration: "underline" }
115
+ },
116
+ "Check out the documentation."
117
+ )));
48
118
  };
49
119
 
50
120
  // src/components/UniformRichText.tsx
@@ -1,7 +1,77 @@
1
1
  // src/components/DefaultNotImplementedComponent.tsx
2
2
  import React from "react";
3
+ var wrapperStyles = {
4
+ display: "flex",
5
+ flexDirection: "column",
6
+ gap: "0.5rem",
7
+ borderLeft: "4px solid #e42535",
8
+ padding: "16px",
9
+ fontSize: "16px",
10
+ borderRadius: "0 8px 8px 0",
11
+ margin: "8px",
12
+ backgroundColor: "rgba(255, 255, 255, 0.45)",
13
+ color: "#1d3557"
14
+ };
3
15
  var DefaultNotImplementedComponent = ({ component }) => {
4
- return /* @__PURE__ */ React.createElement("div", null, "The component of type ", component.type, " not been implemented yet.");
16
+ var _a, _b;
17
+ const componentType = component == null ? void 0 : component.type;
18
+ if (!componentType) {
19
+ return null;
20
+ }
21
+ const proposedFileName = `${componentType[0].toUpperCase()}${componentType.substring(1)}`;
22
+ const probableProps = Object.keys((_a = component.parameters) != null ? _a : {});
23
+ const probableSlots = Object.keys((_b = component.slots) != null ? _b : {});
24
+ const resolvedParameters = probableProps.map((prop) => {
25
+ var _a2;
26
+ const propType = (_a2 = component.parameters) == null ? void 0 : _a2[prop];
27
+ const propTypeValue = (propType == null ? void 0 : propType.type) === "text" ? "string" : "unknown";
28
+ return ` ${prop}: ${propTypeValue}`;
29
+ }).join("\n");
30
+ return /* @__PURE__ */ React.createElement("div", { style: wrapperStyles }, /* @__PURE__ */ React.createElement("h2", { style: { fontSize: "1.2rem" } }, "Unknown Component"), /* @__PURE__ */ React.createElement("p", null, "Received request from Uniform to render a component with the public ID: ", /* @__PURE__ */ React.createElement("code", null, componentType), "."), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("code", null, "<UniformComposition />"), " does not have ", /* @__PURE__ */ React.createElement("code", null, componentType), " mapped to a React component yet."), /* @__PURE__ */ React.createElement(
31
+ "ul",
32
+ {
33
+ style: {
34
+ listStyleType: "disc",
35
+ marginLeft: "1rem",
36
+ display: "flex",
37
+ flexDirection: "column",
38
+ gap: "0.5rem"
39
+ }
40
+ },
41
+ /* @__PURE__ */ React.createElement("li", null, "Create a React component and register it with Uniform, for example", /* @__PURE__ */ React.createElement("pre", null, `
42
+ import {
43
+ ComponentProps,
44
+ UniformSlot,
45
+ } from '@uniformdev/canvas-next-rsc/component';
46
+
47
+ type ${proposedFileName}Parameters = {
48
+ ${resolvedParameters}
49
+ };
50
+ type ${proposedFileName}Slots = ${probableSlots.map((slot) => `'${slot}'`).join(" | ")};
51
+ type ${proposedFileName}Props = ComponentProps<${proposedFileName}Parameters, ${proposedFileName}Slots>;
52
+
53
+ export const ${proposedFileName}Component = (props: ${proposedFileName}Props) => {
54
+ return (
55
+ <div>
56
+ <div>
57
+ ${probableSlots.map((slot) => `<UniformSlot data={props.component} context={props.context} slot={props.slots.${slot}} />`).join("\n")}
58
+ </div>
59
+ </div>
60
+ );
61
+ };
62
+
63
+ Add this component mapping to your resolveComponent function on UniformComposition.`)),
64
+ /* @__PURE__ */ React.createElement("li", null, "Import the component into the file where ", /* @__PURE__ */ React.createElement("code", null, "<UniformComposition />"), " is defined, for example ", /* @__PURE__ */ React.createElement("pre", null, `import "../../components/${proposedFileName}.tsx"`))
65
+ ), " ", /* @__PURE__ */ React.createElement("p", null, "Need more help?", " ", /* @__PURE__ */ React.createElement(
66
+ "a",
67
+ {
68
+ href: "https://docs.uniform.app/docs/learn/tutorials/nextjs-app-router",
69
+ target: "_blank",
70
+ rel: "noreferrer",
71
+ style: { textDecoration: "underline" }
72
+ },
73
+ "Check out the documentation."
74
+ )));
5
75
  };
6
76
 
7
77
  // src/components/UniformRichText.tsx
package/dist/index.esm.js CHANGED
@@ -981,20 +981,22 @@ var resolveComponents = ({
981
981
  elements.push(tagElement);
982
982
  }
983
983
  const isPlaceholder = isComponentPlaceholderId(component == null ? void 0 : component._id);
984
- childNode = createElement3(
985
- PureContextualEditingComponentWrapper,
986
- {
987
- key: `${slotName}-${componentIndex}-wrapper`,
988
- isPlaceholder,
989
- parentComponent: parent,
990
- component,
991
- slotName,
992
- indexInSlot: componentIndex,
993
- slotChildrenCount: components.length,
994
- isReadOnly: "false"
995
- },
996
- elements
997
- );
984
+ if (!isPlaceholder || compositionContext.previewMode === "editor") {
985
+ childNode = createElement3(
986
+ PureContextualEditingComponentWrapper,
987
+ {
988
+ key: `${slotName}-${componentIndex}-wrapper`,
989
+ isPlaceholder,
990
+ parentComponent: parent,
991
+ component,
992
+ slotName,
993
+ indexInSlot: componentIndex,
994
+ slotChildrenCount: components.length,
995
+ isReadOnly: "false"
996
+ },
997
+ elements
998
+ );
999
+ }
998
1000
  } else if (mode === "static") {
999
1001
  const elements = [element];
1000
1002
  if (tagElement) {
package/dist/index.js CHANGED
@@ -1011,20 +1011,22 @@ var resolveComponents = ({
1011
1011
  elements.push(tagElement);
1012
1012
  }
1013
1013
  const isPlaceholder = (0, import_canvas8.isComponentPlaceholderId)(component == null ? void 0 : component._id);
1014
- childNode = (0, import_react9.createElement)(
1015
- import_core.PureContextualEditingComponentWrapper,
1016
- {
1017
- key: `${slotName}-${componentIndex}-wrapper`,
1018
- isPlaceholder,
1019
- parentComponent: parent,
1020
- component,
1021
- slotName,
1022
- indexInSlot: componentIndex,
1023
- slotChildrenCount: components.length,
1024
- isReadOnly: "false"
1025
- },
1026
- elements
1027
- );
1014
+ if (!isPlaceholder || compositionContext.previewMode === "editor") {
1015
+ childNode = (0, import_react9.createElement)(
1016
+ import_core.PureContextualEditingComponentWrapper,
1017
+ {
1018
+ key: `${slotName}-${componentIndex}-wrapper`,
1019
+ isPlaceholder,
1020
+ parentComponent: parent,
1021
+ component,
1022
+ slotName,
1023
+ indexInSlot: componentIndex,
1024
+ slotChildrenCount: components.length,
1025
+ isReadOnly: "false"
1026
+ },
1027
+ elements
1028
+ );
1029
+ }
1028
1030
  } else if (mode === "static") {
1029
1031
  const elements = [element];
1030
1032
  if (tagElement) {
package/dist/index.mjs CHANGED
@@ -981,20 +981,22 @@ var resolveComponents = ({
981
981
  elements.push(tagElement);
982
982
  }
983
983
  const isPlaceholder = isComponentPlaceholderId(component == null ? void 0 : component._id);
984
- childNode = createElement3(
985
- PureContextualEditingComponentWrapper,
986
- {
987
- key: `${slotName}-${componentIndex}-wrapper`,
988
- isPlaceholder,
989
- parentComponent: parent,
990
- component,
991
- slotName,
992
- indexInSlot: componentIndex,
993
- slotChildrenCount: components.length,
994
- isReadOnly: "false"
995
- },
996
- elements
997
- );
984
+ if (!isPlaceholder || compositionContext.previewMode === "editor") {
985
+ childNode = createElement3(
986
+ PureContextualEditingComponentWrapper,
987
+ {
988
+ key: `${slotName}-${componentIndex}-wrapper`,
989
+ isPlaceholder,
990
+ parentComponent: parent,
991
+ component,
992
+ slotName,
993
+ indexInSlot: componentIndex,
994
+ slotChildrenCount: components.length,
995
+ isReadOnly: "false"
996
+ },
997
+ elements
998
+ );
999
+ }
998
1000
  } else if (mode === "static") {
999
1001
  const elements = [element];
1000
1002
  if (tagElement) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uniformdev/canvas-next-rsc",
3
- "version": "19.197.1-alpha.1+121ba80f7d",
3
+ "version": "19.198.1-alpha.4+5a2ee76978",
4
4
  "license": "SEE LICENSE IN LICENSE.txt",
5
5
  "scripts": {
6
6
  "build": "tsup",
@@ -61,15 +61,15 @@
61
61
  "react-dom": "18.3.1"
62
62
  },
63
63
  "dependencies": {
64
- "@uniformdev/canvas": "19.197.1-alpha.1+121ba80f7d",
65
- "@uniformdev/canvas-next-rsc-client": "^19.197.1-alpha.1+121ba80f7d",
66
- "@uniformdev/canvas-next-rsc-shared": "^19.197.1-alpha.1+121ba80f7d",
67
- "@uniformdev/canvas-react": "19.197.1-alpha.1+121ba80f7d",
68
- "@uniformdev/context": "19.197.1-alpha.1+121ba80f7d",
69
- "@uniformdev/project-map": "19.197.1-alpha.1+121ba80f7d",
70
- "@uniformdev/redirect": "19.197.1-alpha.1+121ba80f7d",
71
- "@uniformdev/richtext": "19.197.1-alpha.1+121ba80f7d",
72
- "@uniformdev/webhooks": "19.197.1-alpha.1+121ba80f7d",
64
+ "@uniformdev/canvas": "19.198.1-alpha.4+5a2ee76978",
65
+ "@uniformdev/canvas-next-rsc-client": "^19.198.1-alpha.4+5a2ee76978",
66
+ "@uniformdev/canvas-next-rsc-shared": "^19.198.1-alpha.4+5a2ee76978",
67
+ "@uniformdev/canvas-react": "19.198.1-alpha.4+5a2ee76978",
68
+ "@uniformdev/context": "19.198.1-alpha.4+5a2ee76978",
69
+ "@uniformdev/project-map": "19.198.1-alpha.4+5a2ee76978",
70
+ "@uniformdev/redirect": "19.198.1-alpha.4+5a2ee76978",
71
+ "@uniformdev/richtext": "19.198.1-alpha.4+5a2ee76978",
72
+ "@uniformdev/webhooks": "19.198.1-alpha.4+5a2ee76978",
73
73
  "@vercel/edge-config": "^0.4.0",
74
74
  "encoding": "^0.1.13",
75
75
  "server-only": "^0.0.1",
@@ -86,5 +86,5 @@
86
86
  "publishConfig": {
87
87
  "access": "public"
88
88
  },
89
- "gitHead": "121ba80f7deb449ef8cb6ef74c6088f9e2d89112"
89
+ "gitHead": "5a2ee76978ee502d98082bb956013537a0a0b40a"
90
90
  }