@blocklet/pages-kit 0.3.27 → 0.3.29

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