@blocklet/pages-kit 0.3.26 → 0.3.28

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

@@ -54,7 +54,7 @@ function ErrorView({ error }) {
     return ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "error", children: error.message }) }));
 }
 function ComponentRenderer(_a) {
-    var { renderCount = 0 } = _a, props = __rest(_a, ["renderCount"]);
+    var { renderCount = 0, blockletId, blockletTitle, componentName } = _a, props = __rest(_a, ["renderCount", "blockletId", "blockletTitle", "componentName"]);
     const dev = (0, DevProvider_1.useDev)();
     if (renderCount > MAXIMUM_RENDER_STACK_SIZE) {
         throw new Error('Maximum render stack size exceeded');
@@ -69,6 +69,9 @@ function ComponentRenderer(_a) {
         const children = ((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 (ctx === null || ctx === void 0 ? void 0 : ctx.customRendererComponent) ? ((0, jsx_runtime_1.jsx)(ctx.customRendererComponent, { Component: component.Component, children: children })) : (children);
     }
+    if (blockletId || blockletTitle) {
+        return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { px: 2, py: 2 }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", sx: { color: '#d32f2f' }, children: `Failed to load component, please select '${componentName !== null && componentName !== void 0 ? componentName : props.componentId}' component in settings, or contact administrator to install '${blockletTitle !== null && blockletTitle !== void 0 ? blockletTitle : blockletTitle}' Blocklet.` }) }));
+    }
     return null;
 }
 function Renderer({ renderCount, Component, locale, props, }) {

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

@@ -208,7 +208,7 @@ function useComponent({ instanceId, componentId, properties, locale, dev }) {
 }
 const COMPONENT_LOADER_MAP = {};
 function usePreloadComponent({ instanceId, componentId, properties, locale, dev }) {
-    var _a;
+    var _a, _b;
     const previousRef = (0, react_1.useRef)();
     const requestLocale = (0, exports.customComponentStates)()((s) => { var _a; return ((_a = s.state.config.supportedLocales) === null || _a === void 0 ? void 0 : _a.some((i) => i.locale === locale)) ? locale : undefined; });
     const defaultLocale = (0, exports.customComponentStates)()((s) => s.state.config.defaultLocale);
@@ -224,7 +224,7 @@ function usePreloadComponent({ instanceId, componentId, properties, locale, dev
             .getState()
             .loadComponents({
             mode: dev === null || dev === void 0 ? void 0 : dev.mode,
-            projectId: dev === null || dev === void 0 ? void 0 : dev.projectId,
+            projectId: (_b = dev === null || dev === void 0 ? void 0 : dev.projectId) !== null && _b !== void 0 ? _b : window.__PROJECT_ID__,
             locale: realLocale,
             instances: [{ id: instanceId, component: { id: componentId }, properties }],
         }));