@blocklet/pages-kit 0.3.27 → 0.3.29

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

@@ -9,8 +9,8 @@ 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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,17 @@ 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 ((dev === null || dev === void 0 ? void 0 : dev.mode) === 'draft') {
+        return (_jsxs(Box, { sx: {
+                p: 3,
+                border: '1px dashed #d32f2f',
+                borderRadius: 1,
+                bgcolor: 'rgba(211, 47, 47, 0.04)',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 1,
+            }, children: [_jsx(Typography, { variant: "subtitle1", sx: { color: '#d32f2f', fontWeight: 500 }, children: "Component Failed to Load" }), _jsx(Typography, { variant: "body2", sx: { color: 'text.secondary' }, children: "Please try the following:" }), _jsxs(Box, { component: "ul", sx: { m: 0, pl: 2 }, children: [_jsxs(Typography, { component: "li", variant: "body2", sx: { color: 'text.secondary' }, children: ["Select component", ' ', _jsx(Box, { component: "span", sx: { fontWeight: 500 }, children: componentName !== null && componentName !== void 0 ? componentName : props.componentId }), ' ', "in settings or create this component."] }), (blockletId || blockletTitle) && (_jsxs(Typography, { component: "li", variant: "body2", sx: { color: 'text.secondary' }, children: ["Contact administrator to install", ' ', _jsx(Box, { component: "span", sx: { fontWeight: 500 }, children: blockletTitle !== null && blockletTitle !== void 0 ? blockletTitle : blockletId }), ' ', "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 }],
         }));