@blocklet/pages-kit 0.2.218 → 0.2.220

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 +27 -17
  2. package/lib/esm/components/CustomComponentRenderer/index.js +26 -16
  3. package/lib/types/types/api.d.ts +6 -2
  4. package/lib/types/types/preload.d.ts +6 -2
  5. package/package.json +1 -1
package/lib/cjs/components/CustomComponentRenderer/index.js CHANGED
@@ -53,7 +53,6 @@ const react_error_boundary_1 = require("react-error-boundary");
53
53
  const api_1 = require("../../api");
54
54
  const preload_1 = require("../../types/preload");
55
55
  const property_1 = require("../../utils/property");
56
- const builtin_module_transformer_1 = require("../../utils/typescript/builtin-module-transformer");
57
56
  const MAXIMUM_RENDER_STACK_SIZE = 20;
58
57
  function CustomComponentRenderer(_a) {
59
58
  var _b;
@@ -80,10 +79,10 @@ function Renderer(props) {
80
79
  ];
81
80
  }));
82
81
  if (Component) {
83
- return (0, jsx_runtime_1.jsx)(Component, Object.assign({}, componentProps));
82
+ return (0, jsx_runtime_1.jsx)(Component, Object.assign({ locale: props.locale }, componentProps));
84
83
  }
85
84
  if (AsyncComponent) {
86
- return (0, jsx_runtime_1.jsx)(AsyncComponentRenderer, Object.assign({ AsyncComponent: AsyncComponent }, componentProps));
85
+ return (0, jsx_runtime_1.jsx)(AsyncComponentRenderer, Object.assign({ AsyncComponent: AsyncComponent, locale: props.locale }, componentProps));
87
86
  }
88
87
  return null;
89
88
  }
@@ -122,26 +121,29 @@ function getScriptComponent(componentId) {
122
121
  const LOAD_REMOTE_COMPONENT_TASKS = {};
123
122
  function loadRemoteComponent({ mode, instanceId, componentId, locale, }) {
124
123
  var _a;
125
- const key = [instanceId, locale].join('-');
124
+ const key = [mode, instanceId, locale].join('-');
126
125
  (_a = LOAD_REMOTE_COMPONENT_TASKS[key]) !== null && _a !== void 0 ? _a : (LOAD_REMOTE_COMPONENT_TASKS[key] = (0, api_1.preloadComponents)({ mode, id: componentId, locale })
127
126
  .then((result) => {
128
- var _a;
129
- var _b;
127
+ var _a, _b, _c, _d, _e, _f;
128
+ var _g, _h, _j, _k;
129
+ PRELOAD_COMPONENTS_STATE !== null && PRELOAD_COMPONENTS_STATE !== void 0 ? PRELOAD_COMPONENTS_STATE : (PRELOAD_COMPONENTS_STATE = { config: result.config, components: {}, props: {} });
130
130
  for (const i of Object.values(result.components)) {
131
131
  if (!window[i.script.umd.moduleName]) {
132
132
  const script = document.createElement('script');
133
133
  script.textContent = i.script.umd.script;
134
134
  document.body.appendChild(script);
135
135
  }
136
- PRELOAD_COMPONENTS_STATE !== null && PRELOAD_COMPONENTS_STATE !== void 0 ? PRELOAD_COMPONENTS_STATE : (PRELOAD_COMPONENTS_STATE = { config: result.config, components: {}, props: {} });
137
136
  PRELOAD_COMPONENTS_STATE.components[i.component.id] = {
138
137
  preloadComponentModuleName: i.script.umd.moduleName,
139
138
  component: i.component,
140
139
  };
141
- (_a = (_b = PRELOAD_COMPONENTS_STATE.props)[instanceId]) !== null && _a !== void 0 ? _a : (_b[instanceId] = {});
142
- PRELOAD_COMPONENTS_STATE.props[instanceId][locale] = result.props[componentId][locale];
143
- PRELOAD_COMPONENTS_STATE_KEY += 1;
144
140
  }
141
+ (_a = (_g = PRELOAD_COMPONENTS_STATE.props)[instanceId]) !== null && _a !== void 0 ? _a : (_g[instanceId] = {});
142
+ (_b = (_h = PRELOAD_COMPONENTS_STATE.props[instanceId]).locales) !== null && _b !== void 0 ? _b : (_h.locales = {});
143
+ (_c = (_j = PRELOAD_COMPONENTS_STATE.props[instanceId].locales)[_k = locale]) !== null && _c !== void 0 ? _c : (_j[_k] = {});
144
+ PRELOAD_COMPONENTS_STATE.props[instanceId].locales[locale].props =
145
+ (_f = (_e = (_d = result.props[componentId]) === null || _d === void 0 ? void 0 : _d.locales) === null || _e === void 0 ? void 0 : _e[locale]) === null || _f === void 0 ? void 0 : _f.props;
146
+ PRELOAD_COMPONENTS_STATE_KEY += 1;
145
147
  })
146
148
  .catch((error) => {
147
149
  console.error('load remote component error', error);
@@ -150,24 +152,29 @@ function loadRemoteComponent({ mode, instanceId, componentId, locale, }) {
150
152
  return LOAD_REMOTE_COMPONENT_TASKS[key];
151
153
  }
152
154
  function useComponent({ mode, instanceId, componentId, components, locale, defaultLocale, properties: parameters, props, }) {
155
+ var _a;
153
156
  const scriptRef = (0, react_1.useRef)({});
154
157
  const preloadComponent = (0, react_1.useMemo)(() => getScriptComponent(componentId), [componentId, PRELOAD_COMPONENTS_STATE_KEY]);
155
158
  const preloadState = (0, react_1.useMemo)(() => {
156
- var _a;
157
- return (_a = PRELOAD_COMPONENTS_STATE === null || PRELOAD_COMPONENTS_STATE === void 0 ? void 0 : PRELOAD_COMPONENTS_STATE.props[instanceId]) === null || _a === void 0 ? void 0 : _a[locale];
159
+ var _a, _b;
160
+ return (_b = (_a = PRELOAD_COMPONENTS_STATE === null || PRELOAD_COMPONENTS_STATE === void 0 ? void 0 : PRELOAD_COMPONENTS_STATE.props[instanceId]) === null || _a === void 0 ? void 0 : _a.locales) === null || _b === void 0 ? void 0 : _b[locale || defaultLocale];
161
+ }, [instanceId, locale, defaultLocale, PRELOAD_COMPONENTS_STATE_KEY]);
162
+ const preloadDefaultState = (0, react_1.useMemo)(() => {
163
+ var _a, _b;
164
+ return (_b = (_a = PRELOAD_COMPONENTS_STATE === null || PRELOAD_COMPONENTS_STATE === void 0 ? void 0 : PRELOAD_COMPONENTS_STATE.props[instanceId]) === null || _a === void 0 ? void 0 : _a.locales) === null || _b === void 0 ? void 0 : _b[defaultLocale];
158
165
  }, [instanceId, locale, PRELOAD_COMPONENTS_STATE_KEY]);
159
166
  const previousPreload = (0, react_1.useRef)();
160
167
  const [, update] = (0, react_1.useState)(0);
161
168
  if ((props || preloadState) && preloadComponent) {
162
169
  previousPreload.current = {
163
170
  Component: preloadComponent.Component,
164
- properties: preloadState,
171
+ properties: (_a = preloadState === null || preloadState === void 0 ? void 0 : preloadState.props) !== null && _a !== void 0 ? _a : preloadDefaultState === null || preloadDefaultState === void 0 ? void 0 : preloadDefaultState.props,
165
172
  };
166
173
  return previousPreload.current;
167
174
  }
168
175
  if (!(components === null || components === void 0 ? void 0 : components.length) && preloadComponent) {
169
- loadRemoteComponent({ mode, instanceId, componentId, locale }).then(() => {
170
- update((v) => v + 1);
176
+ loadRemoteComponent({ mode, instanceId, componentId, locale: locale || defaultLocale }).then(() => {
177
+ update(PRELOAD_COMPONENTS_STATE_KEY);
171
178
  });
172
179
  if (previousPreload.current) {
173
180
  return previousPreload.current;
@@ -193,11 +200,14 @@ function useComponent({ mode, instanceId, componentId, components, locale, defau
193
200
  }
194
201
  function transpileAndLoadScript(script) {
195
202
  return __awaiter(this, void 0, void 0, function* () {
196
- const ts = yield Promise.resolve().then(() => __importStar(require('typescript')));
203
+ const [ts, { createBuiltinModuleTransformer }] = yield Promise.all([
204
+ Promise.resolve().then(() => __importStar(require('typescript'))),
205
+ Promise.resolve().then(() => __importStar(require('../../utils/typescript/builtin-module-transformer'))),
206
+ ]);
197
207
  const compiled = ts.transpileModule(script, {
198
208
  compilerOptions: { jsx: ts.JsxEmit.React, module: ts.ModuleKind.ESNext, target: ts.ScriptTarget.ES2016 },
199
209
  transformers: {
200
- before: [(0, builtin_module_transformer_1.createBuiltinModuleTransformer)(ts)],
210
+ before: [createBuiltinModuleTransformer(ts)],
201
211
  },
202
212
  }).outputText;
203
213
  const url = URL.createObjectURL(new Blob([compiled], { type: 'application/javascript' }));
package/lib/esm/components/CustomComponentRenderer/index.js CHANGED
@@ -27,7 +27,6 @@ import { ErrorBoundary } from 'react-error-boundary';
27
27
  import { preloadComponents } from '../../api';
28
28
  import { PreloadComponentsStateGlobalVariableName } from '../../types/preload';
29
29
  import { RenderNestedComponent, mergeComponent } from '../../utils/property';
30
- import { createBuiltinModuleTransformer } from '../../utils/typescript/builtin-module-transformer';
31
30
  const MAXIMUM_RENDER_STACK_SIZE = 20;
32
31
  export default function CustomComponentRenderer(_a) {
33
32
  var _b;
@@ -53,10 +52,10 @@ function Renderer(props) {
53
52
  ];
54
53
  }));
55
54
  if (Component) {
56
- return _jsx(Component, Object.assign({}, componentProps));
55
+ return _jsx(Component, Object.assign({ locale: props.locale }, componentProps));
57
56
  }
58
57
  if (AsyncComponent) {
59
- return _jsx(AsyncComponentRenderer, Object.assign({ AsyncComponent: AsyncComponent }, componentProps));
58
+ return _jsx(AsyncComponentRenderer, Object.assign({ AsyncComponent: AsyncComponent, locale: props.locale }, componentProps));
60
59
  }
61
60
  return null;
62
61
  }
@@ -95,26 +94,29 @@ function getScriptComponent(componentId) {
95
94
  const LOAD_REMOTE_COMPONENT_TASKS = {};
96
95
  function loadRemoteComponent({ mode, instanceId, componentId, locale, }) {
97
96
  var _a;
98
- const key = [instanceId, locale].join('-');
97
+ const key = [mode, instanceId, locale].join('-');
99
98
  (_a = LOAD_REMOTE_COMPONENT_TASKS[key]) !== null && _a !== void 0 ? _a : (LOAD_REMOTE_COMPONENT_TASKS[key] = preloadComponents({ mode, id: componentId, locale })
100
99
  .then((result) => {
101
- var _a;
102
- var _b;
100
+ var _a, _b, _c, _d, _e, _f;
101
+ var _g, _h, _j, _k;
102
+ PRELOAD_COMPONENTS_STATE !== null && PRELOAD_COMPONENTS_STATE !== void 0 ? PRELOAD_COMPONENTS_STATE : (PRELOAD_COMPONENTS_STATE = { config: result.config, components: {}, props: {} });
103
103
  for (const i of Object.values(result.components)) {
104
104
  if (!window[i.script.umd.moduleName]) {
105
105
  const script = document.createElement('script');
106
106
  script.textContent = i.script.umd.script;
107
107
  document.body.appendChild(script);
108
108
  }
109
- PRELOAD_COMPONENTS_STATE !== null && PRELOAD_COMPONENTS_STATE !== void 0 ? PRELOAD_COMPONENTS_STATE : (PRELOAD_COMPONENTS_STATE = { config: result.config, components: {}, props: {} });
110
109
  PRELOAD_COMPONENTS_STATE.components[i.component.id] = {
111
110
  preloadComponentModuleName: i.script.umd.moduleName,
112
111
  component: i.component,
113
112
  };
114
- (_a = (_b = PRELOAD_COMPONENTS_STATE.props)[instanceId]) !== null && _a !== void 0 ? _a : (_b[instanceId] = {});
115
- PRELOAD_COMPONENTS_STATE.props[instanceId][locale] = result.props[componentId][locale];
116
- PRELOAD_COMPONENTS_STATE_KEY += 1;
117
113
  }
114
+ (_a = (_g = PRELOAD_COMPONENTS_STATE.props)[instanceId]) !== null && _a !== void 0 ? _a : (_g[instanceId] = {});
115
+ (_b = (_h = PRELOAD_COMPONENTS_STATE.props[instanceId]).locales) !== null && _b !== void 0 ? _b : (_h.locales = {});
116
+ (_c = (_j = PRELOAD_COMPONENTS_STATE.props[instanceId].locales)[_k = locale]) !== null && _c !== void 0 ? _c : (_j[_k] = {});
117
+ PRELOAD_COMPONENTS_STATE.props[instanceId].locales[locale].props =
118
+ (_f = (_e = (_d = result.props[componentId]) === null || _d === void 0 ? void 0 : _d.locales) === null || _e === void 0 ? void 0 : _e[locale]) === null || _f === void 0 ? void 0 : _f.props;
119
+ PRELOAD_COMPONENTS_STATE_KEY += 1;
118
120
  })
119
121
  .catch((error) => {
120
122
  console.error('load remote component error', error);
@@ -123,24 +125,29 @@ function loadRemoteComponent({ mode, instanceId, componentId, locale, }) {
123
125
  return LOAD_REMOTE_COMPONENT_TASKS[key];
124
126
  }
125
127
  function useComponent({ mode, instanceId, componentId, components, locale, defaultLocale, properties: parameters, props, }) {
128
+ var _a;
126
129
  const scriptRef = useRef({});
127
130
  const preloadComponent = useMemo(() => getScriptComponent(componentId), [componentId, PRELOAD_COMPONENTS_STATE_KEY]);
128
131
  const preloadState = useMemo(() => {
129
- var _a;
130
- return (_a = PRELOAD_COMPONENTS_STATE === null || PRELOAD_COMPONENTS_STATE === void 0 ? void 0 : PRELOAD_COMPONENTS_STATE.props[instanceId]) === null || _a === void 0 ? void 0 : _a[locale];
132
+ var _a, _b;
133
+ return (_b = (_a = PRELOAD_COMPONENTS_STATE === null || PRELOAD_COMPONENTS_STATE === void 0 ? void 0 : PRELOAD_COMPONENTS_STATE.props[instanceId]) === null || _a === void 0 ? void 0 : _a.locales) === null || _b === void 0 ? void 0 : _b[locale || defaultLocale];
134
+ }, [instanceId, locale, defaultLocale, PRELOAD_COMPONENTS_STATE_KEY]);
135
+ const preloadDefaultState = useMemo(() => {
136
+ var _a, _b;
137
+ return (_b = (_a = PRELOAD_COMPONENTS_STATE === null || PRELOAD_COMPONENTS_STATE === void 0 ? void 0 : PRELOAD_COMPONENTS_STATE.props[instanceId]) === null || _a === void 0 ? void 0 : _a.locales) === null || _b === void 0 ? void 0 : _b[defaultLocale];
131
138
  }, [instanceId, locale, PRELOAD_COMPONENTS_STATE_KEY]);
132
139
  const previousPreload = useRef();
133
140
  const [, update] = useState(0);
134
141
  if ((props || preloadState) && preloadComponent) {
135
142
  previousPreload.current = {
136
143
  Component: preloadComponent.Component,
137
- properties: preloadState,
144
+ properties: (_a = preloadState === null || preloadState === void 0 ? void 0 : preloadState.props) !== null && _a !== void 0 ? _a : preloadDefaultState === null || preloadDefaultState === void 0 ? void 0 : preloadDefaultState.props,
138
145
  };
139
146
  return previousPreload.current;
140
147
  }
141
148
  if (!(components === null || components === void 0 ? void 0 : components.length) && preloadComponent) {
142
- loadRemoteComponent({ mode, instanceId, componentId, locale }).then(() => {
143
- update((v) => v + 1);
149
+ loadRemoteComponent({ mode, instanceId, componentId, locale: locale || defaultLocale }).then(() => {
150
+ update(PRELOAD_COMPONENTS_STATE_KEY);
144
151
  });
145
152
  if (previousPreload.current) {
146
153
  return previousPreload.current;
@@ -166,7 +173,10 @@ function useComponent({ mode, instanceId, componentId, components, locale, defau
166
173
  }
167
174
  export function transpileAndLoadScript(script) {
168
175
  return __awaiter(this, void 0, void 0, function* () {
169
- const ts = yield import('typescript');
176
+ const [ts, { createBuiltinModuleTransformer }] = yield Promise.all([
177
+ import('typescript'),
178
+ import('../../utils/typescript/builtin-module-transformer'),
179
+ ]);
170
180
  const compiled = ts.transpileModule(script, {
171
181
  compilerOptions: { jsx: ts.JsxEmit.React, module: ts.ModuleKind.ESNext, target: ts.ScriptTarget.ES2016 },
172
182
  transformers: {
package/lib/types/types/api.d.ts CHANGED
@@ -23,8 +23,12 @@ export interface PreloadComponentsResult {
23
23
  };
24
24
  props: {
25
25
  [instanceId: string]: {
26
- [locale: string]: {
27
- [key: string]: any;
26
+ locales?: {
27
+ [locale: string]: {
28
+ props?: {
29
+ [key: string]: any;
30
+ };
31
+ };
28
32
  };
29
33
  };
30
34
  };
package/lib/types/types/preload.d.ts CHANGED
@@ -13,8 +13,12 @@ export interface PreloadComponentsState {
13
13
  };
14
14
  props: {
15
15
  [instanceId: string]: {
16
- [locale: string]: {
17
- [key: string]: any;
16
+ locales?: {
17
+ [locale: string]: {
18
+ props?: {
19
+ [key: string]: any;
20
+ };
21
+ };
18
22
  };
19
23
  };
20
24
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blocklet/pages-kit",
3
- "version": "0.2.218",
3
+ "version": "0.2.220",
4
4
  "description": "Pages Kit components and utils",
5
5
  "publishConfig": {
6
6
  "access": "public"