@blocklet/pages-kit 0.2.237 → 0.2.239

package/lib/cjs/components/CustomComponentRenderer/index.js

@@ -48,9 +48,13 @@ function ComponentRenderer(_a) {
         throw new Error('Maximum render stack size exceeded');
     }
     const component = (0, state_1.useComponent)(props);
-    if (!component)
-        return null;
-    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) })));
+    if (component === null || component === void 0 ? void 0 : component.error) {
+        return (0, jsx_runtime_1.jsx)(ErrorView, { error: component.error });
+    }
+    if (component === null || component === void 0 ? void 0 : component.Component) {
+        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) })));
+    }
+    return null;
 }
 function Renderer({ renderCount, Component, locale, props, dev, }) {
     const componentProps = Object.fromEntries(Object.entries(props).map(([key, val]) => {

package/lib/cjs/components/CustomComponentRenderer/state.js

@@ -139,11 +139,11 @@ function useComponent({ instanceId, componentId, properties, locale, dev }) {
     var _a, _b;
     const transpile = useTranspileComponent({ componentId, locale, properties, dev });
     const preload = usePreloadComponent({ instanceId, componentId, properties, locale, dev });
-    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;
-    if (!Component)
-        return null;
-    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;
-    return { Component, props };
+    return {
+        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,
+        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,
+        error: transpile === null || transpile === void 0 ? void 0 : transpile.error,
+    };
 }
 exports.useComponent = useComponent;
 const COMPONENT_LOADER_MAP = {};
@@ -171,7 +171,7 @@ function usePreloadComponent({ instanceId, componentId, properties, locale, dev
     return null;
 }
 function useTranspileComponent({ componentId, locale, properties, dev: { defaultLocale, components } = {}, }) {
-    const [Component, setComponent] = (0, react_1.useState)();
+    const [{ error, Component }, setComponent] = (0, react_1.useState)({});
     const component = (0, property_1.mergeComponent)({
         componentId,
         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
     const script = (0, react_1.useDeferredValue)(component === null || component === void 0 ? void 0 : component.script);
     (0, react_1.useEffect)(() => {
         if (script) {
-            transpileAndLoadScript(script).then((m) => {
-                setComponent(() => m.default);
+            transpileAndLoadScript(script)
+                .then((m) => {
+                setComponent({ Component: m.default });
+            })
+                .catch((error) => {
+                setComponent({ error });
             });
         }
     }, [script]);
-    if (!component || !Component)
-        return null;
     return {
+        error,
         Component,
-        props: component.properties,
+        props: component === null || component === void 0 ? void 0 : component.properties,
     };
 }
 function transpileAndLoadScript(script) {

package/lib/esm/components/CustomComponentRenderer/index.js

@@ -31,9 +31,13 @@ function ComponentRenderer(_a) {
         throw new Error('Maximum render stack size exceeded');
     }
     const component = useComponent(props);
-    if (!component)
-        return null;
-    return (_jsx(Renderer, Object.assign({ renderCount: renderCount + 1 }, props, { Component: component.Component, props: Object.assign(Object.assign({}, component.props), props.props) })));
+    if (component === null || component === void 0 ? void 0 : component.error) {
+        return _jsx(ErrorView, { error: component.error });
+    }
+    if (component === null || component === void 0 ? void 0 : component.Component) {
+        return (_jsx(Renderer, Object.assign({ renderCount: renderCount + 1 }, props, { Component: component.Component, props: Object.assign(Object.assign({}, component.props), props.props) })));
+    }
+    return null;
 }
 function Renderer({ renderCount, Component, locale, props, dev, }) {
     const componentProps = Object.fromEntries(Object.entries(props).map(([key, val]) => {

package/lib/esm/components/CustomComponentRenderer/state.js

@@ -113,11 +113,11 @@ export function useComponent({ instanceId, componentId, properties, locale, dev
     var _a, _b;
     const transpile = useTranspileComponent({ componentId, locale, properties, dev });
     const preload = usePreloadComponent({ instanceId, componentId, properties, locale, dev });
-    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;
-    if (!Component)
-        return null;
-    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;
-    return { Component, props };
+    return {
+        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,
+        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,
+        error: transpile === null || transpile === void 0 ? void 0 : transpile.error,
+    };
 }
 const COMPONENT_LOADER_MAP = {};
 function usePreloadComponent({ instanceId, componentId, properties, locale, dev }) {
@@ -144,7 +144,7 @@ function usePreloadComponent({ instanceId, componentId, properties, locale, dev
     return null;
 }
 function useTranspileComponent({ componentId, locale, properties, dev: { defaultLocale, components } = {}, }) {
-    const [Component, setComponent] = useState();
+    const [{ error, Component }, setComponent] = useState({});
     const component = mergeComponent({
         componentId,
         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
     const script = useDeferredValue(component === null || component === void 0 ? void 0 : component.script);
     useEffect(() => {
         if (script) {
-            transpileAndLoadScript(script).then((m) => {
-                setComponent(() => m.default);
+            transpileAndLoadScript(script)
+                .then((m) => {
+                setComponent({ Component: m.default });
+            })
+                .catch((error) => {
+                setComponent({ error });
             });
         }
     }, [script]);
-    if (!component || !Component)
-        return null;
     return {
+        error,
         Component,
-        props: component.properties,
+        props: component === null || component === void 0 ? void 0 : component.properties,
     };
 }
 function transpileAndLoadScript(script) {

package/lib/types/components/CustomComponentRenderer/state.d.ts

@@ -137,7 +137,8 @@ export declare const customComponentStates: import("zustand").UseBoundStore<Omit
     }) => void), shouldReplace?: boolean | undefined): void;
 }>;
 export declare function useComponent({ instanceId, componentId, properties, locale, dev }: CustomComponentRendererProps): {
-    Component: ComponentType<any>;
+    error?: Error;
+    Component?: ComponentType<any>;
     props?: {
         [key: string]: any;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/pages-kit",
-  "version": "0.2.237",
+  "version": "0.2.239",
   "description": "Pages Kit components and utils",
   "publishConfig": {
     "access": "public"
@@ -93,7 +93,7 @@
     "prepare": "npm run build"
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.9.32",
+    "@arcblock/did-connect": "^2.9.35",
     "@blocklet/sdk": "^1.16.23",
     "@iconify/react": "^4.1.1",
     "axios": "^1.6.7",
@@ -123,7 +123,7 @@
     "react-router-dom": "^6.16.0"
   },
   "devDependencies": {
-    "@arcblock/ux": "^2.9.32",
+    "@arcblock/ux": "^2.9.35",
     "@emotion/cache": "^11.11.0",
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.3",
@@ -133,7 +133,7 @@
     "@types/lodash": "^4.14.202",
     "@types/mustache": "^4.2.5",
     "@types/node-fetch": "^2.6.11",
-    "@types/react": "^18.2.56",
+    "@types/react": "^18.2.57",
     "axios": "^1.6.7",
     "npm-run-all": "^4.1.5",
     "react": "^18.2.0",