@blocklet/pages-kit 0.2.236 → 0.2.238

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 (6) hide show
  1. package/lib/cjs/components/CustomComponentRenderer/index.js +7 -3
  2. package/lib/cjs/components/CustomComponentRenderer/state.js +14 -11
  3. package/lib/esm/components/CustomComponentRenderer/index.js +7 -3
  4. package/lib/esm/components/CustomComponentRenderer/state.js +14 -11
  5. package/lib/types/components/CustomComponentRenderer/state.d.ts +2 -1
  6. package/package.json +1 -1
package/lib/cjs/components/CustomComponentRenderer/index.js CHANGED
@@ -48,9 +48,13 @@ function ComponentRenderer(_a) {
48
48
  throw new Error('Maximum render stack size exceeded');
49
49
  }
50
50
  const component = (0, state_1.useComponent)(props);
51
- if (!component)
52
- return null;
53
- return ((0, jsx_runtime_1.jsx)(Renderer, Object.assign({ renderCount: renderCount + 1 }, props, { Component: component.Component, props: Object.assign(Object.assign({}, component.props), props.props) })));
51
+ if (component === null || component === void 0 ? void 0 : component.error) {
52
+ return (0, jsx_runtime_1.jsx)(ErrorView, { error: component.error });
53
+ }
54
+ if (component === null || component === void 0 ? void 0 : component.Component) {
55
+ return ((0, jsx_runtime_1.jsx)(Renderer, Object.assign({ renderCount: renderCount + 1 }, props, { Component: component.Component, props: Object.assign(Object.assign({}, component.props), props.props) })));
56
+ }
57
+ return null;
54
58
  }
55
59
  function Renderer({ renderCount, Component, locale, props, dev, }) {
56
60
  const componentProps = Object.fromEntries(Object.entries(props).map(([key, val]) => {
package/lib/cjs/components/CustomComponentRenderer/state.js CHANGED
@@ -139,11 +139,11 @@ function useComponent({ instanceId, componentId, properties, locale, dev }) {
139
139
  var _a, _b;
140
140
  const transpile = useTranspileComponent({ componentId, locale, properties, dev });
141
141
  const preload = usePreloadComponent({ instanceId, componentId, properties, locale, dev });
142
- const Component = (_a = transpile === null || transpile === void 0 ? void 0 : transpile.Component) !== null && _a !== void 0 ? _a : preload === null || preload === void 0 ? void 0 : preload.Component;
143
- if (!Component)
144
- return null;
145
- const props = (_b = preload === null || preload === void 0 ? void 0 : preload.props) !== null && _b !== void 0 ? _b : transpile === null || transpile === void 0 ? void 0 : transpile.props;
146
- return { Component, props };
142
+ return {
143
+ Component: (_a = transpile === null || transpile === void 0 ? void 0 : transpile.Component) !== null && _a !== void 0 ? _a : preload === null || preload === void 0 ? void 0 : preload.Component,
144
+ props: (_b = preload === null || preload === void 0 ? void 0 : preload.props) !== null && _b !== void 0 ? _b : transpile === null || transpile === void 0 ? void 0 : transpile.props,
145
+ error: transpile === null || transpile === void 0 ? void 0 : transpile.error,
146
+ };
147
147
  }
148
148
  exports.useComponent = useComponent;
149
149
  const COMPONENT_LOADER_MAP = {};
@@ -171,7 +171,7 @@ function usePreloadComponent({ instanceId, componentId, properties, locale, dev
171
171
  return null;
172
172
  }
173
173
  function useTranspileComponent({ componentId, locale, properties, dev: { defaultLocale, components } = {}, }) {
174
- const [Component, setComponent] = (0, react_1.useState)();
174
+ const [{ error, Component }, setComponent] = (0, react_1.useState)({});
175
175
  const component = (0, property_1.mergeComponent)({
176
176
  componentId,
177
177
  getComponent: (componentId) => { var _a; return (_a = components === null || components === void 0 ? void 0 : components[componentId]) === null || _a === void 0 ? void 0 : _a.data; },
@@ -182,16 +182,19 @@ function useTranspileComponent({ componentId, locale, properties, dev: { default
182
182
  const script = (0, react_1.useDeferredValue)(component === null || component === void 0 ? void 0 : component.script);
183
183
  (0, react_1.useEffect)(() => {
184
184
  if (script) {
185
- transpileAndLoadScript(script).then((m) => {
186
- setComponent(() => m.default);
185
+ transpileAndLoadScript(script)
186
+ .then((m) => {
187
+ setComponent({ Component: m.default });
188
+ })
189
+ .catch((error) => {
190
+ setComponent({ error });
187
191
  });
188
192
  }
189
193
  }, [script]);
190
- if (!component || !Component)
191
- return null;
192
194
  return {
195
+ error,
193
196
  Component,
194
- props: component.properties,
197
+ props: component === null || component === void 0 ? void 0 : component.properties,
195
198
  };
196
199
  }
197
200
  function transpileAndLoadScript(script) {
package/lib/esm/components/CustomComponentRenderer/index.js CHANGED
@@ -31,9 +31,13 @@ function ComponentRenderer(_a) {
31
31
  throw new Error('Maximum render stack size exceeded');
32
32
  }
33
33
  const component = useComponent(props);
34
- if (!component)
35
- return null;
36
- return (_jsx(Renderer, Object.assign({ renderCount: renderCount + 1 }, props, { Component: component.Component, props: Object.assign(Object.assign({}, component.props), props.props) })));
34
+ if (component === null || component === void 0 ? void 0 : component.error) {
35
+ return _jsx(ErrorView, { error: component.error });
36
+ }
37
+ if (component === null || component === void 0 ? void 0 : component.Component) {
38
+ return (_jsx(Renderer, Object.assign({ renderCount: renderCount + 1 }, props, { Component: component.Component, props: Object.assign(Object.assign({}, component.props), props.props) })));
39
+ }
40
+ return null;
37
41
  }
38
42
  function Renderer({ renderCount, Component, locale, props, dev, }) {
39
43
  const componentProps = Object.fromEntries(Object.entries(props).map(([key, val]) => {
package/lib/esm/components/CustomComponentRenderer/state.js CHANGED
@@ -113,11 +113,11 @@ export function useComponent({ instanceId, componentId, properties, locale, dev
113
113
  var _a, _b;
114
114
  const transpile = useTranspileComponent({ componentId, locale, properties, dev });
115
115
  const preload = usePreloadComponent({ instanceId, componentId, properties, locale, dev });
116
- const Component = (_a = transpile === null || transpile === void 0 ? void 0 : transpile.Component) !== null && _a !== void 0 ? _a : preload === null || preload === void 0 ? void 0 : preload.Component;
117
- if (!Component)
118
- return null;
119
- const props = (_b = preload === null || preload === void 0 ? void 0 : preload.props) !== null && _b !== void 0 ? _b : transpile === null || transpile === void 0 ? void 0 : transpile.props;
120
- return { Component, props };
116
+ return {
117
+ Component: (_a = transpile === null || transpile === void 0 ? void 0 : transpile.Component) !== null && _a !== void 0 ? _a : preload === null || preload === void 0 ? void 0 : preload.Component,
118
+ props: (_b = preload === null || preload === void 0 ? void 0 : preload.props) !== null && _b !== void 0 ? _b : transpile === null || transpile === void 0 ? void 0 : transpile.props,
119
+ error: transpile === null || transpile === void 0 ? void 0 : transpile.error,
120
+ };
121
121
  }
122
122
  const COMPONENT_LOADER_MAP = {};
123
123
  function usePreloadComponent({ instanceId, componentId, properties, locale, dev }) {
@@ -144,7 +144,7 @@ function usePreloadComponent({ instanceId, componentId, properties, locale, dev
144
144
  return null;
145
145
  }
146
146
  function useTranspileComponent({ componentId, locale, properties, dev: { defaultLocale, components } = {}, }) {
147
- const [Component, setComponent] = useState();
147
+ const [{ error, Component }, setComponent] = useState({});
148
148
  const component = mergeComponent({
149
149
  componentId,
150
150
  getComponent: (componentId) => { var _a; return (_a = components === null || components === void 0 ? void 0 : components[componentId]) === null || _a === void 0 ? void 0 : _a.data; },
@@ -155,16 +155,19 @@ function useTranspileComponent({ componentId, locale, properties, dev: { default
155
155
  const script = useDeferredValue(component === null || component === void 0 ? void 0 : component.script);
156
156
  useEffect(() => {
157
157
  if (script) {
158
- transpileAndLoadScript(script).then((m) => {
159
- setComponent(() => m.default);
158
+ transpileAndLoadScript(script)
159
+ .then((m) => {
160
+ setComponent({ Component: m.default });
161
+ })
162
+ .catch((error) => {
163
+ setComponent({ error });
160
164
  });
161
165
  }
162
166
  }, [script]);
163
- if (!component || !Component)
164
- return null;
165
167
  return {
168
+ error,
166
169
  Component,
167
- props: component.properties,
170
+ props: component === null || component === void 0 ? void 0 : component.properties,
168
171
  };
169
172
  }
170
173
  function transpileAndLoadScript(script) {
package/lib/types/components/CustomComponentRenderer/state.d.ts CHANGED
@@ -137,7 +137,8 @@ export declare const customComponentStates: import("zustand").UseBoundStore<Omit
137
137
  }) => void), shouldReplace?: boolean | undefined): void;
138
138
  }>;
139
139
  export declare function useComponent({ instanceId, componentId, properties, locale, dev }: CustomComponentRendererProps): {
140
- Component: ComponentType<any>;
140
+ error?: Error;
141
+ Component?: ComponentType<any>;
141
142
  props?: {
142
143
  [key: string]: any;
143
144
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blocklet/pages-kit",
3
- "version": "0.2.236",
3
+ "version": "0.2.238",
4
4
  "description": "Pages Kit components and utils",
5
5
  "publishConfig": {
6
6
  "access": "public"