@blocklet/pages-kit 0.3.26 → 0.3.28

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

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Alert, Box } from '@mui/material';
+import { Alert, Box, Typography } from '@mui/material';
 import { ErrorBoundary } from 'react-error-boundary';
 import { RenderNestedComponent } from '../../utils/property';
 import BlockletReactComponentRenderer from './BlockletReactComponentRenderer';
@@ -34,7 +34,7 @@ function ErrorView({ error }) {
     return (_jsx(Box, { children: _jsx(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 = useDev();
     if (renderCount > MAXIMUM_RENDER_STACK_SIZE) {
         throw new Error('Maximum render stack size exceeded');
@@ -49,6 +49,9 @@ function ComponentRenderer(_a) {
         const children = (_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) ? (_jsx(ctx.customRendererComponent, { Component: component.Component, children: children })) : (children);
     }
+    if (blockletId || blockletTitle) {
+        return (_jsx(Box, { sx: { px: 2, py: 2 }, children: _jsx(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/esm/components/CustomComponentRenderer/state.js

@@ -175,7 +175,7 @@ export 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 = useRef();
     const requestLocale = 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 = customComponentStates()((s) => s.state.config.defaultLocale);
@@ -191,7 +191,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 }],
         }));