@blocklet/pages-kit 0.2.199 → 0.2.201
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.
|
@@ -39,12 +39,20 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
39
39
|
const cache_1 = __importDefault(require("@emotion/cache"));
|
|
40
40
|
const react_1 = require("@emotion/react");
|
|
41
41
|
const material_1 = require("@mui/material");
|
|
42
|
-
const react_2 = require("react");
|
|
42
|
+
const react_2 = __importStar(require("react"));
|
|
43
43
|
const client_1 = __importDefault(require("react-dom/client"));
|
|
44
44
|
const react_error_boundary_1 = require("react-error-boundary");
|
|
45
45
|
const react_frame_component_1 = require("react-frame-component");
|
|
46
|
+
const ufo_1 = require("ufo");
|
|
46
47
|
const zustand_1 = require("zustand");
|
|
47
48
|
const immer_1 = require("zustand/middleware/immer");
|
|
49
|
+
// inject global variables for web-component renderer
|
|
50
|
+
const win = window;
|
|
51
|
+
win.joinURL = ufo_1.joinURL;
|
|
52
|
+
win.withQuery = ufo_1.withQuery;
|
|
53
|
+
win.React = react_2.default;
|
|
54
|
+
win.Box = material_1.Box;
|
|
55
|
+
win.Stack = material_1.Stack;
|
|
48
56
|
const CUSTOM_COMPONENT_RENDERER = 'custom-component-renderer';
|
|
49
57
|
const defineCustomElements = (win) => {
|
|
50
58
|
if (!win.customElements.get(CUSTOM_COMPONENT_RENDERER)) {
|
|
@@ -98,13 +106,12 @@ const defineCustomElements = (win) => {
|
|
|
98
106
|
return [];
|
|
99
107
|
return [property.key, parsePropertyValue(property.type, value)];
|
|
100
108
|
}));
|
|
101
|
-
const orValue = (a, b) => (a === '' ? b : a !== null && a !== void 0 ? a : b);
|
|
102
109
|
while (current) {
|
|
103
110
|
mergeProperties(properties, Object.fromEntries(Object.values((_a = current.properties) !== null && _a !== void 0 ? _a : {}).map(({ data }) => {
|
|
104
|
-
var _a, _b, _c, _d;
|
|
111
|
+
var _a, _b, _c, _d, _e;
|
|
105
112
|
return [
|
|
106
113
|
data.key,
|
|
107
|
-
parsePropertyValue(data.type,
|
|
114
|
+
parsePropertyValue(data.type, (_c = (_b = (_a = data.locales) === null || _a === void 0 ? void 0 : _a[this.locale]) === null || _b === void 0 ? void 0 : _b.defaultValue) !== null && _c !== void 0 ? _c : (_e = (_d = data.locales) === null || _d === void 0 ? void 0 : _d[this.defaultLocale]) === null || _e === void 0 ? void 0 : _e.defaultValue),
|
|
108
115
|
];
|
|
109
116
|
})));
|
|
110
117
|
if (((_b = current.renderer) === null || _b === void 0 ? void 0 : _b.type) === 'web-component') {
|
|
@@ -114,14 +121,13 @@ const defineCustomElements = (win) => {
|
|
|
114
121
|
if (((_d = current.renderer) === null || _d === void 0 ? void 0 : _d.type) === 'custom-component' && current.renderer.componentId) {
|
|
115
122
|
const c = customComponentState(current.renderer.componentId).getState()
|
|
116
123
|
.component;
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
return [];
|
|
124
|
+
const rendererProperties = current.renderer.properties;
|
|
125
|
+
mergeProperties(properties, Object.fromEntries(Object.entries((_e = c === null || c === void 0 ? void 0 : c.properties) !== null && _e !== void 0 ? _e : {}).map(([id, { data }]) => {
|
|
126
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
127
|
+
const locales = (_a = rendererProperties === null || rendererProperties === void 0 ? void 0 : rendererProperties[id]) === null || _a === void 0 ? void 0 : _a.locales;
|
|
122
128
|
return [
|
|
123
|
-
|
|
124
|
-
parsePropertyValue(
|
|
129
|
+
data.key,
|
|
130
|
+
parsePropertyValue(data.type, (_h = (_e = (_c = (_b = locales === null || locales === void 0 ? void 0 : locales[this.locale]) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : (_d = locales === null || locales === void 0 ? void 0 : locales[this.defaultLocale]) === null || _d === void 0 ? void 0 : _d.value) !== null && _e !== void 0 ? _e : (_g = (_f = data.locales) === null || _f === void 0 ? void 0 : _f[this.locale]) === null || _g === void 0 ? void 0 : _g.defaultValue) !== null && _h !== void 0 ? _h : (_k = (_j = data.locales) === null || _j === void 0 ? void 0 : _j[this.defaultLocale]) === null || _k === void 0 ? void 0 : _k.defaultValue),
|
|
125
131
|
];
|
|
126
132
|
})));
|
|
127
133
|
current = c;
|
|
@@ -139,9 +145,10 @@ const defineCustomElements = (win) => {
|
|
|
139
145
|
});
|
|
140
146
|
const url = URL.createObjectURL(new Blob([script], { type: 'application/javascript' }));
|
|
141
147
|
const { default: C } = yield Promise.resolve(`${url}`).then(s => __importStar(require(s)));
|
|
142
|
-
this.reactRoot.render((0, jsx_runtime_1.jsx)(react_1.CacheProvider, { value: cache, children: (0, jsx_runtime_1.jsx)(C, Object.assign({}, properties)) }));
|
|
148
|
+
this.reactRoot.render((0, jsx_runtime_1.jsx)(react_1.CacheProvider, { value: cache, children: (0, jsx_runtime_1.jsx)(material_1.CssBaseline, { children: (0, jsx_runtime_1.jsx)(C, Object.assign({}, properties)) }) }));
|
|
143
149
|
}
|
|
144
150
|
catch (error) {
|
|
151
|
+
console.error(error);
|
|
145
152
|
this.reactRoot.render((0, jsx_runtime_1.jsx)("div", {}));
|
|
146
153
|
}
|
|
147
154
|
});
|
|
@@ -163,12 +170,10 @@ const customComponentProperties = (id, initial) => {
|
|
|
163
170
|
};
|
|
164
171
|
function CustomComponentRenderer({ id, componentId, components, properties, locale, defaultLocale, }) {
|
|
165
172
|
const frame = (0, react_frame_component_1.useFrame)();
|
|
166
|
-
components === null || components === void 0 ? void 0 : components.
|
|
167
|
-
|
|
168
|
-
(0, react_2.useEffect)(() => {
|
|
169
|
-
components === null || components === void 0 ? void 0 : components.map((component) => customComponentState(component.id).setState({ component }));
|
|
170
|
-
customComponentProperties(id, { properties }).setState({ properties });
|
|
173
|
+
components === null || components === void 0 ? void 0 : components.forEach((component) => {
|
|
174
|
+
customComponentState(component.id, { component }).setState({ component });
|
|
171
175
|
});
|
|
176
|
+
customComponentProperties(id, { properties }).setState({ properties });
|
|
172
177
|
(0, react_2.useEffect)(() => {
|
|
173
178
|
defineCustomElements(frame.window || window);
|
|
174
179
|
}, [frame]);
|
|
@@ -180,7 +185,7 @@ function E({ error }) {
|
|
|
180
185
|
}
|
|
181
186
|
function mergeProperties(properties, newProperties) {
|
|
182
187
|
for (const [key, val] of Object.entries(newProperties)) {
|
|
183
|
-
if (properties[key] === undefined || properties[key] === null
|
|
188
|
+
if (properties[key] === undefined || properties[key] === null) {
|
|
184
189
|
properties[key] = val;
|
|
185
190
|
}
|
|
186
191
|
}
|
|
@@ -10,13 +10,21 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
10
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
11
|
import createCache from '@emotion/cache';
|
|
12
12
|
import { CacheProvider } from '@emotion/react';
|
|
13
|
-
import { Alert, Box } from '@mui/material';
|
|
14
|
-
import { useEffect } from 'react';
|
|
13
|
+
import { Alert, Box, CssBaseline, Stack } from '@mui/material';
|
|
14
|
+
import React, { useEffect } from 'react';
|
|
15
15
|
import ReactDOM from 'react-dom/client';
|
|
16
16
|
import { ErrorBoundary } from 'react-error-boundary';
|
|
17
17
|
import { useFrame } from 'react-frame-component';
|
|
18
|
+
import { joinURL, withQuery } from 'ufo';
|
|
18
19
|
import { create } from 'zustand';
|
|
19
20
|
import { immer } from 'zustand/middleware/immer';
|
|
21
|
+
// inject global variables for web-component renderer
|
|
22
|
+
const win = window;
|
|
23
|
+
win.joinURL = joinURL;
|
|
24
|
+
win.withQuery = withQuery;
|
|
25
|
+
win.React = React;
|
|
26
|
+
win.Box = Box;
|
|
27
|
+
win.Stack = Stack;
|
|
20
28
|
const CUSTOM_COMPONENT_RENDERER = 'custom-component-renderer';
|
|
21
29
|
const defineCustomElements = (win) => {
|
|
22
30
|
if (!win.customElements.get(CUSTOM_COMPONENT_RENDERER)) {
|
|
@@ -70,13 +78,12 @@ const defineCustomElements = (win) => {
|
|
|
70
78
|
return [];
|
|
71
79
|
return [property.key, parsePropertyValue(property.type, value)];
|
|
72
80
|
}));
|
|
73
|
-
const orValue = (a, b) => (a === '' ? b : a !== null && a !== void 0 ? a : b);
|
|
74
81
|
while (current) {
|
|
75
82
|
mergeProperties(properties, Object.fromEntries(Object.values((_a = current.properties) !== null && _a !== void 0 ? _a : {}).map(({ data }) => {
|
|
76
|
-
var _a, _b, _c, _d;
|
|
83
|
+
var _a, _b, _c, _d, _e;
|
|
77
84
|
return [
|
|
78
85
|
data.key,
|
|
79
|
-
parsePropertyValue(data.type,
|
|
86
|
+
parsePropertyValue(data.type, (_c = (_b = (_a = data.locales) === null || _a === void 0 ? void 0 : _a[this.locale]) === null || _b === void 0 ? void 0 : _b.defaultValue) !== null && _c !== void 0 ? _c : (_e = (_d = data.locales) === null || _d === void 0 ? void 0 : _d[this.defaultLocale]) === null || _e === void 0 ? void 0 : _e.defaultValue),
|
|
80
87
|
];
|
|
81
88
|
})));
|
|
82
89
|
if (((_b = current.renderer) === null || _b === void 0 ? void 0 : _b.type) === 'web-component') {
|
|
@@ -86,14 +93,13 @@ const defineCustomElements = (win) => {
|
|
|
86
93
|
if (((_d = current.renderer) === null || _d === void 0 ? void 0 : _d.type) === 'custom-component' && current.renderer.componentId) {
|
|
87
94
|
const c = customComponentState(current.renderer.componentId).getState()
|
|
88
95
|
.component;
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
return [];
|
|
96
|
+
const rendererProperties = current.renderer.properties;
|
|
97
|
+
mergeProperties(properties, Object.fromEntries(Object.entries((_e = c === null || c === void 0 ? void 0 : c.properties) !== null && _e !== void 0 ? _e : {}).map(([id, { data }]) => {
|
|
98
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
99
|
+
const locales = (_a = rendererProperties === null || rendererProperties === void 0 ? void 0 : rendererProperties[id]) === null || _a === void 0 ? void 0 : _a.locales;
|
|
94
100
|
return [
|
|
95
|
-
|
|
96
|
-
parsePropertyValue(
|
|
101
|
+
data.key,
|
|
102
|
+
parsePropertyValue(data.type, (_h = (_e = (_c = (_b = locales === null || locales === void 0 ? void 0 : locales[this.locale]) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : (_d = locales === null || locales === void 0 ? void 0 : locales[this.defaultLocale]) === null || _d === void 0 ? void 0 : _d.value) !== null && _e !== void 0 ? _e : (_g = (_f = data.locales) === null || _f === void 0 ? void 0 : _f[this.locale]) === null || _g === void 0 ? void 0 : _g.defaultValue) !== null && _h !== void 0 ? _h : (_k = (_j = data.locales) === null || _j === void 0 ? void 0 : _j[this.defaultLocale]) === null || _k === void 0 ? void 0 : _k.defaultValue),
|
|
97
103
|
];
|
|
98
104
|
})));
|
|
99
105
|
current = c;
|
|
@@ -111,9 +117,10 @@ const defineCustomElements = (win) => {
|
|
|
111
117
|
});
|
|
112
118
|
const url = URL.createObjectURL(new Blob([script], { type: 'application/javascript' }));
|
|
113
119
|
const { default: C } = yield import(/* @vite-ignore */ url);
|
|
114
|
-
this.reactRoot.render(_jsx(CacheProvider, { value: cache, children: _jsx(C, Object.assign({}, properties)) }));
|
|
120
|
+
this.reactRoot.render(_jsx(CacheProvider, { value: cache, children: _jsx(CssBaseline, { children: _jsx(C, Object.assign({}, properties)) }) }));
|
|
115
121
|
}
|
|
116
122
|
catch (error) {
|
|
123
|
+
console.error(error);
|
|
117
124
|
this.reactRoot.render(_jsx("div", {}));
|
|
118
125
|
}
|
|
119
126
|
});
|
|
@@ -135,12 +142,10 @@ const customComponentProperties = (id, initial) => {
|
|
|
135
142
|
};
|
|
136
143
|
export default function CustomComponentRenderer({ id, componentId, components, properties, locale, defaultLocale, }) {
|
|
137
144
|
const frame = useFrame();
|
|
138
|
-
components === null || components === void 0 ? void 0 : components.
|
|
139
|
-
|
|
140
|
-
useEffect(() => {
|
|
141
|
-
components === null || components === void 0 ? void 0 : components.map((component) => customComponentState(component.id).setState({ component }));
|
|
142
|
-
customComponentProperties(id, { properties }).setState({ properties });
|
|
145
|
+
components === null || components === void 0 ? void 0 : components.forEach((component) => {
|
|
146
|
+
customComponentState(component.id, { component }).setState({ component });
|
|
143
147
|
});
|
|
148
|
+
customComponentProperties(id, { properties }).setState({ properties });
|
|
144
149
|
useEffect(() => {
|
|
145
150
|
defineCustomElements(frame.window || window);
|
|
146
151
|
}, [frame]);
|
|
@@ -151,7 +156,7 @@ function E({ error }) {
|
|
|
151
156
|
}
|
|
152
157
|
function mergeProperties(properties, newProperties) {
|
|
153
158
|
for (const [key, val] of Object.entries(newProperties)) {
|
|
154
|
-
if (properties[key] === undefined || properties[key] === null
|
|
159
|
+
if (properties[key] === undefined || properties[key] === null) {
|
|
155
160
|
properties[key] = val;
|
|
156
161
|
}
|
|
157
162
|
}
|
|
@@ -29,7 +29,8 @@ export type CustomComponent = {
|
|
|
29
29
|
data: {
|
|
30
30
|
id: string;
|
|
31
31
|
key?: string;
|
|
32
|
-
type?: 'string' | 'number' | 'boolean' | 'json' | 'custom-component';
|
|
32
|
+
type?: 'string' | 'number' | 'boolean' | 'json' | 'custom-component' | 'url';
|
|
33
|
+
multiline?: boolean;
|
|
33
34
|
locales?: {
|
|
34
35
|
[locale: string]: {
|
|
35
36
|
name?: string;
|