@blocklet/pages-kit 0.2.196 → 0.2.198

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 (5) hide show
  1. package/lib/cjs/components/CustomComponentRenderer/index.js +45 -9
  2. package/lib/esm/components/CustomComponentRenderer/index.js +45 -9
  3. package/lib/types/components/CustomComponentRenderer/index.d.ts +3 -1
  4. package/lib/types/types/index.d.ts +15 -6
  5. package/package.json +1 -1
package/lib/cjs/components/CustomComponentRenderer/index.js CHANGED
@@ -55,11 +55,17 @@ const defineCustomElements = (win) => {
55
55
  this.reactRoot = client_1.default.createRoot(this.root);
56
56
  }
57
57
  static get observedAttributes() {
58
- return ['component-id'];
58
+ return ['id', 'component-id', 'locale', 'default-locale'];
59
59
  }
60
60
  get componentId() {
61
61
  return this.getAttribute('component-id');
62
62
  }
63
+ get locale() {
64
+ return this.getAttribute('locale');
65
+ }
66
+ get defaultLocale() {
67
+ return this.getAttribute('default-locale');
68
+ }
63
69
  connectedCallback() {
64
70
  this.setup();
65
71
  }
@@ -68,7 +74,9 @@ const defineCustomElements = (win) => {
68
74
  }
69
75
  setup() {
70
76
  const { subscribe } = customComponentState(this.componentId);
77
+ const { subscribe: subscribeProperties } = customComponentProperties(this.id);
71
78
  subscribe(() => this.render());
79
+ subscribeProperties(() => this.render());
72
80
  this.render();
73
81
  }
74
82
  get state() {
@@ -83,9 +91,22 @@ const defineCustomElements = (win) => {
83
91
  throw new Error('missing required component config');
84
92
  let script;
85
93
  let current = component;
86
- const properties = Object.fromEntries(Object.entries(parameters !== null && parameters !== void 0 ? parameters : {}).map(([id, { value }]) => { var _a, _b; return [(_b = (_a = component.properties) === null || _a === void 0 ? void 0 : _a[id]) === null || _b === void 0 ? void 0 : _b.data.name, value]; }));
94
+ const properties = Object.fromEntries(Object.entries(parameters !== null && parameters !== void 0 ? parameters : {}).map(([id, { value }]) => {
95
+ var _a, _b;
96
+ const property = (_b = (_a = component.properties) === null || _a === void 0 ? void 0 : _a[id]) === null || _b === void 0 ? void 0 : _b.data;
97
+ if (!property)
98
+ return [];
99
+ return [property.key, parsePropertyValue(property.type, value)];
100
+ }));
101
+ const orValue = (a, b) => (a === '' ? b : a !== null && a !== void 0 ? a : b);
87
102
  while (current) {
88
- mergeProperties(properties, Object.fromEntries(Object.values((_a = current.properties) !== null && _a !== void 0 ? _a : {}).map(({ data }) => [data.name, data.defaultValue])));
103
+ mergeProperties(properties, Object.fromEntries(Object.values((_a = current.properties) !== null && _a !== void 0 ? _a : {}).map(({ data }) => {
104
+ var _a, _b, _c, _d;
105
+ return [
106
+ data.key,
107
+ parsePropertyValue(data.type, orValue((_b = (_a = data.locales) === null || _a === void 0 ? void 0 : _a[this.locale]) === null || _b === void 0 ? void 0 : _b.defaultValue, (_d = (_c = data.locales) === null || _c === void 0 ? void 0 : _c[this.defaultLocale]) === null || _d === void 0 ? void 0 : _d.defaultValue)),
108
+ ];
109
+ })));
89
110
  if (((_b = current.renderer) === null || _b === void 0 ? void 0 : _b.type) === 'web-component') {
90
111
  script = (_c = current.renderer) === null || _c === void 0 ? void 0 : _c.script;
91
112
  break;
@@ -93,11 +114,14 @@ const defineCustomElements = (win) => {
93
114
  if (((_d = current.renderer) === null || _d === void 0 ? void 0 : _d.type) === 'custom-component' && current.renderer.componentId) {
94
115
  const c = customComponentState(current.renderer.componentId).getState()
95
116
  .component;
96
- mergeProperties(properties, Object.fromEntries(Object.entries((_e = current.renderer.properties) !== null && _e !== void 0 ? _e : {}).map(([id, { value }]) => {
97
- var _a, _b;
117
+ mergeProperties(properties, Object.fromEntries(Object.entries((_e = current.renderer.properties) !== null && _e !== void 0 ? _e : {}).map(([id, { locales }]) => {
118
+ var _a, _b, _c, _d;
119
+ const property = (_b = (_a = c === null || c === void 0 ? void 0 : c.properties) === null || _a === void 0 ? void 0 : _a[id]) === null || _b === void 0 ? void 0 : _b.data;
120
+ if (!property)
121
+ return [];
98
122
  return [
99
- (_b = (_a = c === null || c === void 0 ? void 0 : c.properties) === null || _a === void 0 ? void 0 : _a[id]) === null || _b === void 0 ? void 0 : _b.data.name,
100
- value,
123
+ property.key,
124
+ parsePropertyValue(property.type, orValue((_c = locales === null || locales === void 0 ? void 0 : locales[this.locale]) === null || _c === void 0 ? void 0 : _c.value, (_d = locales === null || locales === void 0 ? void 0 : locales[this.defaultLocale]) === null || _d === void 0 ? void 0 : _d.value)),
101
125
  ];
102
126
  })));
103
127
  current = c;
@@ -137,7 +161,7 @@ const customComponentProperties = (id, initial) => {
137
161
  (_a = CUSTOM_COMPONENT_PROPERTIES_MAP[id]) !== null && _a !== void 0 ? _a : (CUSTOM_COMPONENT_PROPERTIES_MAP[id] = (0, zustand_1.create)()((0, immer_1.immer)(() => (Object.assign({}, initial)))));
138
162
  return CUSTOM_COMPONENT_PROPERTIES_MAP[id];
139
163
  };
140
- function CustomComponentRenderer({ id, componentId, components, properties, }) {
164
+ function CustomComponentRenderer({ id, componentId, components, properties, locale, defaultLocale, }) {
141
165
  const frame = (0, react_frame_component_1.useFrame)();
142
166
  components === null || components === void 0 ? void 0 : components.map((component) => customComponentState(component.id, { component }));
143
167
  customComponentProperties(id, { properties });
@@ -148,7 +172,7 @@ function CustomComponentRenderer({ id, componentId, components, properties, }) {
148
172
  (0, react_2.useEffect)(() => {
149
173
  defineCustomElements(frame.window || window);
150
174
  }, [frame]);
151
- return ((0, jsx_runtime_1.jsx)(react_error_boundary_1.ErrorBoundary, { fallbackRender: E, children: (0, jsx_runtime_1.jsx)("custom-component-renderer", { "component-id": componentId, id: id }) }));
175
+ return ((0, jsx_runtime_1.jsx)(react_error_boundary_1.ErrorBoundary, { fallbackRender: E, children: (0, jsx_runtime_1.jsx)("custom-component-renderer", { "component-id": componentId, id: id, locale: locale, "default-locale": defaultLocale }) }));
152
176
  }
153
177
  exports.default = CustomComponentRenderer;
154
178
  function E({ error }) {
@@ -162,3 +186,15 @@ function mergeProperties(properties, newProperties) {
162
186
  }
163
187
  return properties;
164
188
  }
189
+ function parsePropertyValue(type, value) {
190
+ if (type === 'json') {
191
+ try {
192
+ return JSON.parse(value);
193
+ }
194
+ catch (error) {
195
+ console.error('parse json value error', error);
196
+ return undefined;
197
+ }
198
+ }
199
+ return value;
200
+ }
package/lib/esm/components/CustomComponentRenderer/index.js CHANGED
@@ -27,11 +27,17 @@ const defineCustomElements = (win) => {
27
27
  this.reactRoot = ReactDOM.createRoot(this.root);
28
28
  }
29
29
  static get observedAttributes() {
30
- return ['component-id'];
30
+ return ['id', 'component-id', 'locale', 'default-locale'];
31
31
  }
32
32
  get componentId() {
33
33
  return this.getAttribute('component-id');
34
34
  }
35
+ get locale() {
36
+ return this.getAttribute('locale');
37
+ }
38
+ get defaultLocale() {
39
+ return this.getAttribute('default-locale');
40
+ }
35
41
  connectedCallback() {
36
42
  this.setup();
37
43
  }
@@ -40,7 +46,9 @@ const defineCustomElements = (win) => {
40
46
  }
41
47
  setup() {
42
48
  const { subscribe } = customComponentState(this.componentId);
49
+ const { subscribe: subscribeProperties } = customComponentProperties(this.id);
43
50
  subscribe(() => this.render());
51
+ subscribeProperties(() => this.render());
44
52
  this.render();
45
53
  }
46
54
  get state() {
@@ -55,9 +63,22 @@ const defineCustomElements = (win) => {
55
63
  throw new Error('missing required component config');
56
64
  let script;
57
65
  let current = component;
58
- const properties = Object.fromEntries(Object.entries(parameters !== null && parameters !== void 0 ? parameters : {}).map(([id, { value }]) => { var _a, _b; return [(_b = (_a = component.properties) === null || _a === void 0 ? void 0 : _a[id]) === null || _b === void 0 ? void 0 : _b.data.name, value]; }));
66
+ const properties = Object.fromEntries(Object.entries(parameters !== null && parameters !== void 0 ? parameters : {}).map(([id, { value }]) => {
67
+ var _a, _b;
68
+ const property = (_b = (_a = component.properties) === null || _a === void 0 ? void 0 : _a[id]) === null || _b === void 0 ? void 0 : _b.data;
69
+ if (!property)
70
+ return [];
71
+ return [property.key, parsePropertyValue(property.type, value)];
72
+ }));
73
+ const orValue = (a, b) => (a === '' ? b : a !== null && a !== void 0 ? a : b);
59
74
  while (current) {
60
- mergeProperties(properties, Object.fromEntries(Object.values((_a = current.properties) !== null && _a !== void 0 ? _a : {}).map(({ data }) => [data.name, data.defaultValue])));
75
+ mergeProperties(properties, Object.fromEntries(Object.values((_a = current.properties) !== null && _a !== void 0 ? _a : {}).map(({ data }) => {
76
+ var _a, _b, _c, _d;
77
+ return [
78
+ data.key,
79
+ parsePropertyValue(data.type, orValue((_b = (_a = data.locales) === null || _a === void 0 ? void 0 : _a[this.locale]) === null || _b === void 0 ? void 0 : _b.defaultValue, (_d = (_c = data.locales) === null || _c === void 0 ? void 0 : _c[this.defaultLocale]) === null || _d === void 0 ? void 0 : _d.defaultValue)),
80
+ ];
81
+ })));
61
82
  if (((_b = current.renderer) === null || _b === void 0 ? void 0 : _b.type) === 'web-component') {
62
83
  script = (_c = current.renderer) === null || _c === void 0 ? void 0 : _c.script;
63
84
  break;
@@ -65,11 +86,14 @@ const defineCustomElements = (win) => {
65
86
  if (((_d = current.renderer) === null || _d === void 0 ? void 0 : _d.type) === 'custom-component' && current.renderer.componentId) {
66
87
  const c = customComponentState(current.renderer.componentId).getState()
67
88
  .component;
68
- mergeProperties(properties, Object.fromEntries(Object.entries((_e = current.renderer.properties) !== null && _e !== void 0 ? _e : {}).map(([id, { value }]) => {
69
- var _a, _b;
89
+ mergeProperties(properties, Object.fromEntries(Object.entries((_e = current.renderer.properties) !== null && _e !== void 0 ? _e : {}).map(([id, { locales }]) => {
90
+ var _a, _b, _c, _d;
91
+ const property = (_b = (_a = c === null || c === void 0 ? void 0 : c.properties) === null || _a === void 0 ? void 0 : _a[id]) === null || _b === void 0 ? void 0 : _b.data;
92
+ if (!property)
93
+ return [];
70
94
  return [
71
- (_b = (_a = c === null || c === void 0 ? void 0 : c.properties) === null || _a === void 0 ? void 0 : _a[id]) === null || _b === void 0 ? void 0 : _b.data.name,
72
- value,
95
+ property.key,
96
+ parsePropertyValue(property.type, orValue((_c = locales === null || locales === void 0 ? void 0 : locales[this.locale]) === null || _c === void 0 ? void 0 : _c.value, (_d = locales === null || locales === void 0 ? void 0 : locales[this.defaultLocale]) === null || _d === void 0 ? void 0 : _d.value)),
73
97
  ];
74
98
  })));
75
99
  current = c;
@@ -109,7 +133,7 @@ const customComponentProperties = (id, initial) => {
109
133
  (_a = CUSTOM_COMPONENT_PROPERTIES_MAP[id]) !== null && _a !== void 0 ? _a : (CUSTOM_COMPONENT_PROPERTIES_MAP[id] = create()(immer(() => (Object.assign({}, initial)))));
110
134
  return CUSTOM_COMPONENT_PROPERTIES_MAP[id];
111
135
  };
112
- export default function CustomComponentRenderer({ id, componentId, components, properties, }) {
136
+ export default function CustomComponentRenderer({ id, componentId, components, properties, locale, defaultLocale, }) {
113
137
  const frame = useFrame();
114
138
  components === null || components === void 0 ? void 0 : components.map((component) => customComponentState(component.id, { component }));
115
139
  customComponentProperties(id, { properties });
@@ -120,7 +144,7 @@ export default function CustomComponentRenderer({ id, componentId, components, p
120
144
  useEffect(() => {
121
145
  defineCustomElements(frame.window || window);
122
146
  }, [frame]);
123
- return (_jsx(ErrorBoundary, { fallbackRender: E, children: _jsx("custom-component-renderer", { "component-id": componentId, id: id }) }));
147
+ return (_jsx(ErrorBoundary, { fallbackRender: E, children: _jsx("custom-component-renderer", { "component-id": componentId, id: id, locale: locale, "default-locale": defaultLocale }) }));
124
148
  }
125
149
  function E({ error }) {
126
150
  return (_jsx(Box, { children: _jsx(Alert, { severity: "error", children: error.message }) }));
@@ -133,3 +157,15 @@ function mergeProperties(properties, newProperties) {
133
157
  }
134
158
  return properties;
135
159
  }
160
+ function parsePropertyValue(type, value) {
161
+ if (type === 'json') {
162
+ try {
163
+ return JSON.parse(value);
164
+ }
165
+ catch (error) {
166
+ console.error('parse json value error', error);
167
+ return undefined;
168
+ }
169
+ }
170
+ return value;
171
+ }
package/lib/types/components/CustomComponentRenderer/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { CustomComponent } from '../../types';
2
- export default function CustomComponentRenderer({ id, componentId, components, properties, }: {
2
+ export default function CustomComponentRenderer({ id, componentId, components, properties, locale, defaultLocale, }: {
3
3
  id: string;
4
4
  componentId: string;
5
5
  components?: CustomComponent[];
@@ -8,4 +8,6 @@ export default function CustomComponentRenderer({ id, componentId, components, p
8
8
  value: any;
9
9
  };
10
10
  };
11
+ locale?: string;
12
+ defaultLocale?: string;
11
13
  }): import("react/jsx-runtime").JSX.Element;
package/lib/types/types/index.d.ts CHANGED
@@ -14,19 +14,28 @@ export type CustomComponent = {
14
14
  type: 'custom-component';
15
15
  componentId?: string;
16
16
  properties?: {
17
- [key: string]: {
18
- value?: any;
17
+ [id: string]: {
18
+ locales?: {
19
+ [locale: string]: {
20
+ value?: any;
21
+ };
22
+ };
19
23
  };
20
24
  };
21
25
  };
22
26
  properties?: {
23
- [key: string]: {
27
+ [id: string]: {
24
28
  index: number;
25
29
  data: {
26
30
  id: string;
27
- name?: string;
28
- type?: 'string' | 'number' | 'boolean' | 'custom-component';
29
- defaultValue?: any;
31
+ key?: string;
32
+ type?: 'string' | 'number' | 'boolean' | 'json' | 'custom-component';
33
+ locales?: {
34
+ [locale: string]: {
35
+ name?: string;
36
+ defaultValue?: any;
37
+ };
38
+ };
30
39
  };
31
40
  };
32
41
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blocklet/pages-kit",
3
- "version": "0.2.196",
3
+ "version": "0.2.198",
4
4
  "description": "Pages Kit components and utils",
5
5
  "publishConfig": {
6
6
  "access": "public"