@blocklet/pages-kit 0.2.218 → 0.2.219

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 +26 -19
  2. package/lib/esm/components/CustomComponentRenderer/index.js +25 -18
  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,25 +152,27 @@ 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
- const [, update] = (0, react_1.useState)(0);
161
167
  if ((props || preloadState) && preloadComponent) {
162
168
  previousPreload.current = {
163
169
  Component: preloadComponent.Component,
164
- properties: preloadState,
170
+ 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
171
  };
166
172
  return previousPreload.current;
167
173
  }
168
174
  if (!(components === null || components === void 0 ? void 0 : components.length) && preloadComponent) {
169
- loadRemoteComponent({ mode, instanceId, componentId, locale }).then(() => {
170
- update((v) => v + 1);
171
- });
175
+ loadRemoteComponent({ mode, instanceId, componentId, locale: locale || defaultLocale });
172
176
  if (previousPreload.current) {
173
177
  return previousPreload.current;
174
178
  }
@@ -193,11 +197,14 @@ function useComponent({ mode, instanceId, componentId, components, locale, defau
193
197
  }
194
198
  function transpileAndLoadScript(script) {
195
199
  return __awaiter(this, void 0, void 0, function* () {
196
- const ts = yield Promise.resolve().then(() => __importStar(require('typescript')));
200
+ const [ts, { createBuiltinModuleTransformer }] = yield Promise.all([
201
+ Promise.resolve().then(() => __importStar(require('typescript'))),
202
+ Promise.resolve().then(() => __importStar(require('../../utils/typescript/builtin-module-transformer'))),
203
+ ]);
197
204
  const compiled = ts.transpileModule(script, {
198
205
  compilerOptions: { jsx: ts.JsxEmit.React, module: ts.ModuleKind.ESNext, target: ts.ScriptTarget.ES2016 },
199
206
  transformers: {
200
- before: [(0, builtin_module_transformer_1.createBuiltinModuleTransformer)(ts)],
207
+ before: [createBuiltinModuleTransformer(ts)],
201
208
  },
202
209
  }).outputText;
203
210
  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,25 +125,27 @@ 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
- const [, update] = useState(0);
134
140
  if ((props || preloadState) && preloadComponent) {
135
141
  previousPreload.current = {
136
142
  Component: preloadComponent.Component,
137
- properties: preloadState,
143
+ 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
144
  };
139
145
  return previousPreload.current;
140
146
  }
141
147
  if (!(components === null || components === void 0 ? void 0 : components.length) && preloadComponent) {
142
- loadRemoteComponent({ mode, instanceId, componentId, locale }).then(() => {
143
- update((v) => v + 1);
144
- });
148
+ loadRemoteComponent({ mode, instanceId, componentId, locale: locale || defaultLocale });
145
149
  if (previousPreload.current) {
146
150
  return previousPreload.current;
147
151
  }
@@ -166,7 +170,10 @@ function useComponent({ mode, instanceId, componentId, components, locale, defau
166
170
  }
167
171
  export function transpileAndLoadScript(script) {
168
172
  return __awaiter(this, void 0, void 0, function* () {
169
- const ts = yield import('typescript');
173
+ const [ts, { createBuiltinModuleTransformer }] = yield Promise.all([
174
+ import('typescript'),
175
+ import('../../utils/typescript/builtin-module-transformer'),
176
+ ]);
170
177
  const compiled = ts.transpileModule(script, {
171
178
  compilerOptions: { jsx: ts.JsxEmit.React, module: ts.ModuleKind.ESNext, target: ts.ScriptTarget.ES2016 },
172
179
  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.219",
4
4
  "description": "Pages Kit components and utils",
5
5
  "publishConfig": {
6
6
  "access": "public"