@blocklet/pages-kit 0.2.197 → 0.2.199

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 (7) hide show
  1. package/lib/cjs/components/CustomComponentRenderer/index.js +26 -11
  2. package/lib/esm/components/CustomComponentRenderer/index.js +26 -11
  3. package/lib/types/api/call.d.ts +3 -0
  4. package/lib/types/api/pages-kit.d.ts +3 -0
  5. package/lib/types/components/CustomComponentRenderer/index.d.ts +3 -1
  6. package/lib/types/types/index.d.ts +14 -5
  7. 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() {
@@ -88,13 +96,17 @@ const defineCustomElements = (win) => {
88
96
  const property = (_b = (_a = component.properties) === null || _a === void 0 ? void 0 : _a[id]) === null || _b === void 0 ? void 0 : _b.data;
89
97
  if (!property)
90
98
  return [];
91
- return [property.name, parsePropertyValue(property.type, value)];
99
+ return [property.key, parsePropertyValue(property.type, value)];
92
100
  }));
101
+ const orValue = (a, b) => (a === '' ? b : a !== null && a !== void 0 ? a : b);
93
102
  while (current) {
94
- mergeProperties(properties, Object.fromEntries(Object.values((_a = current.properties) !== null && _a !== void 0 ? _a : {}).map(({ data }) => [
95
- data.name,
96
- parsePropertyValue(data.type, data.defaultValue),
97
- ])));
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
+ })));
98
110
  if (((_b = current.renderer) === null || _b === void 0 ? void 0 : _b.type) === 'web-component') {
99
111
  script = (_c = current.renderer) === null || _c === void 0 ? void 0 : _c.script;
100
112
  break;
@@ -102,12 +114,15 @@ const defineCustomElements = (win) => {
102
114
  if (((_d = current.renderer) === null || _d === void 0 ? void 0 : _d.type) === 'custom-component' && current.renderer.componentId) {
103
115
  const c = customComponentState(current.renderer.componentId).getState()
104
116
  .component;
105
- mergeProperties(properties, Object.fromEntries(Object.entries((_e = current.renderer.properties) !== null && _e !== void 0 ? _e : {}).map(([id, { value }]) => {
106
- 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;
107
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;
108
120
  if (!property)
109
121
  return [];
110
- return [property.name, parsePropertyValue(property.type, value)];
122
+ return [
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)),
125
+ ];
111
126
  })));
112
127
  current = c;
113
128
  }
@@ -146,7 +161,7 @@ const customComponentProperties = (id, initial) => {
146
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)))));
147
162
  return CUSTOM_COMPONENT_PROPERTIES_MAP[id];
148
163
  };
149
- function CustomComponentRenderer({ id, componentId, components, properties, }) {
164
+ function CustomComponentRenderer({ id, componentId, components, properties, locale, defaultLocale, }) {
150
165
  const frame = (0, react_frame_component_1.useFrame)();
151
166
  components === null || components === void 0 ? void 0 : components.map((component) => customComponentState(component.id, { component }));
152
167
  customComponentProperties(id, { properties });
@@ -157,7 +172,7 @@ function CustomComponentRenderer({ id, componentId, components, properties, }) {
157
172
  (0, react_2.useEffect)(() => {
158
173
  defineCustomElements(frame.window || window);
159
174
  }, [frame]);
160
- 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 }) }));
161
176
  }
162
177
  exports.default = CustomComponentRenderer;
163
178
  function E({ error }) {
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() {
@@ -60,13 +68,17 @@ const defineCustomElements = (win) => {
60
68
  const property = (_b = (_a = component.properties) === null || _a === void 0 ? void 0 : _a[id]) === null || _b === void 0 ? void 0 : _b.data;
61
69
  if (!property)
62
70
  return [];
63
- return [property.name, parsePropertyValue(property.type, value)];
71
+ return [property.key, parsePropertyValue(property.type, value)];
64
72
  }));
73
+ const orValue = (a, b) => (a === '' ? b : a !== null && a !== void 0 ? a : b);
65
74
  while (current) {
66
- mergeProperties(properties, Object.fromEntries(Object.values((_a = current.properties) !== null && _a !== void 0 ? _a : {}).map(({ data }) => [
67
- data.name,
68
- parsePropertyValue(data.type, data.defaultValue),
69
- ])));
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
+ })));
70
82
  if (((_b = current.renderer) === null || _b === void 0 ? void 0 : _b.type) === 'web-component') {
71
83
  script = (_c = current.renderer) === null || _c === void 0 ? void 0 : _c.script;
72
84
  break;
@@ -74,12 +86,15 @@ const defineCustomElements = (win) => {
74
86
  if (((_d = current.renderer) === null || _d === void 0 ? void 0 : _d.type) === 'custom-component' && current.renderer.componentId) {
75
87
  const c = customComponentState(current.renderer.componentId).getState()
76
88
  .component;
77
- mergeProperties(properties, Object.fromEntries(Object.entries((_e = current.renderer.properties) !== null && _e !== void 0 ? _e : {}).map(([id, { value }]) => {
78
- 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;
79
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;
80
92
  if (!property)
81
93
  return [];
82
- return [property.name, parsePropertyValue(property.type, value)];
94
+ return [
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)),
97
+ ];
83
98
  })));
84
99
  current = c;
85
100
  }
@@ -118,7 +133,7 @@ const customComponentProperties = (id, initial) => {
118
133
  (_a = CUSTOM_COMPONENT_PROPERTIES_MAP[id]) !== null && _a !== void 0 ? _a : (CUSTOM_COMPONENT_PROPERTIES_MAP[id] = create()(immer(() => (Object.assign({}, initial)))));
119
134
  return CUSTOM_COMPONENT_PROPERTIES_MAP[id];
120
135
  };
121
- export default function CustomComponentRenderer({ id, componentId, components, properties, }) {
136
+ export default function CustomComponentRenderer({ id, componentId, components, properties, locale, defaultLocale, }) {
122
137
  const frame = useFrame();
123
138
  components === null || components === void 0 ? void 0 : components.map((component) => customComponentState(component.id, { component }));
124
139
  customComponentProperties(id, { properties });
@@ -129,7 +144,7 @@ export default function CustomComponentRenderer({ id, componentId, components, p
129
144
  useEffect(() => {
130
145
  defineCustomElements(frame.window || window);
131
146
  }, [frame]);
132
- 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 }) }));
133
148
  }
134
149
  function E({ error }) {
135
150
  return (_jsx(Box, { children: _jsx(Alert, { severity: "error", children: error.message }) }));
package/lib/types/api/call.d.ts CHANGED
@@ -3,5 +3,8 @@ export declare function getComponents({ mode, name }?: {
3
3
  mode?: StateMode;
4
4
  name?: string;
5
5
  }): Promise<{
6
+ config: {
7
+ defaultLocale?: string;
8
+ };
6
9
  components: CustomComponent[];
7
10
  }>;
package/lib/types/api/pages-kit.d.ts CHANGED
@@ -3,5 +3,8 @@ export declare function getComponents({ mode, name }?: {
3
3
  mode?: StateMode;
4
4
  name?: string;
5
5
  }): Promise<{
6
+ config: {
7
+ defaultLocale?: string;
8
+ };
6
9
  components: CustomComponent[];
7
10
  }>;
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;
31
+ key?: string;
28
32
  type?: 'string' | 'number' | 'boolean' | 'json' | 'custom-component';
29
- defaultValue?: any;
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.197",
3
+ "version": "0.2.199",
4
4
  "description": "Pages Kit components and utils",
5
5
  "publishConfig": {
6
6
  "access": "public"