@blocklet/pages-kit-block-studio 0.5.55 → 0.6.0

package/lib/cjs/middlewares/init-block-studio-router.js

@@ -154,7 +154,7 @@ exports.initBlockStudioRouter.get('/', async (req, res) => {
         return res.json(metadata);
     }
     catch (error) {
-        return res.status(500).json({ error: 'Failed to read file' });
+        return res.status(400).json({ error: 'Failed to read file' });
     }
 });
 exports.initBlockStudioRouter.post('/', async (req, res) => {
@@ -202,7 +202,7 @@ exports.initBlockStudioRouter.post('/', async (req, res) => {
         return res.json({ success: true, content: mergedContent, message: 'Updated' });
     }
     catch (error) {
-        return res.status(500).json({ error: 'Failed to write file' });
+        return res.status(400).json({ error: 'Failed to write file' });
     }
 });
 exports.initBlockStudioRouter.post('/create', async (req, res) => {
@@ -264,7 +264,7 @@ exports.initBlockStudioRouter.post('/create', async (req, res) => {
     }
     catch (error) {
         console.error('Failed to create block:', error);
-        return res.status(500).json({ error: 'Failed to create block' });
+        return res.status(400).json({ error: 'Failed to create block' });
     }
 });
 exports.initBlockStudioRouter.get('/resources', async (req, res) => {
@@ -358,7 +358,7 @@ exports.initBlockStudioRouter.post('/properties-to-interface', async (req, res)
         }
         catch (conversionError) {
             console.error('Failed to convert properties to interface:', conversionError);
-            return res.status(500).json({
+            return res.status(400).json({
                 success: false,
                 error: `Failed to convert properties to interface: ${conversionError.message}`,
             });
@@ -366,7 +366,7 @@ exports.initBlockStudioRouter.post('/properties-to-interface', async (req, res)
     }
     catch (error) {
         console.error('Failed to generate interface:', error);
-        return res.status(500).json({
+        return res.status(400).json({
             success: false,
             error: `Failed to generate interface: ${error.message}`,
         });
@@ -424,7 +424,7 @@ exports.initBlockStudioRouter.post('/interface-to-properties', async (req, res)
         }
         catch (conversionError) {
             console.error('Failed to convert interface to properties:', conversionError);
-            return res.status(500).json({
+            return res.status(400).json({
                 success: false,
                 error: `Failed to convert interface to properties: ${conversionError.message}`,
             });
@@ -432,7 +432,7 @@ exports.initBlockStudioRouter.post('/interface-to-properties', async (req, res)
     }
     catch (error) {
         console.error('Failed to generate metadata:', error);
-        return res.status(500).json({
+        return res.status(400).json({
             success: false,
             error: `Failed to generate metadata: ${error.message}`,
         });
@@ -494,7 +494,7 @@ exports.initBlockStudioRouter.delete('/delete', async (req, res) => {
         }
         catch (deleteError) {
             console.error('Failed to delete component directory:', deleteError);
-            return res.status(500).json({
+            return res.status(400).json({
                 success: false,
                 error: `Failed to delete component directory: ${deleteError.message}`,
             });
@@ -502,7 +502,7 @@ exports.initBlockStudioRouter.delete('/delete', async (req, res) => {
     }
     catch (error) {
         console.error('Failed to delete component:', error);
-        return res.status(500).json({
+        return res.status(400).json({
             success: false,
             error: `Failed to delete component: ${error.message}`,
         });

package/lib/cjs/middlewares/init-resource-router.js

@@ -292,7 +292,7 @@ exports.initResourceRouter.post('/', async (req, res) => {
     }
     catch (error) {
         console.error('Build failed:', error);
-        res.status(500).json({ error: 'Build failed' });
+        res.status(400).json({ error: 'Build failed' });
     }
 });
 exports.default = exports.initResourceRouter;

package/lib/cjs/plugins/_theme.js

@@ -246,20 +246,24 @@ const ComparisonPreviewDialog = ({ open, title, leftTitle, leftContent, rightTit
             Toast_1.default.error(t('themeTranslations.operationFailed'));
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(material_1.Dialog, { open: open, onClose: onClose, maxWidth: "md", fullWidth: true, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: title }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', flexDirection: 'row', mb: 2 }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { flex: 1, mr: 1 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", sx: { mb: 1 }, children: leftTitle }), (0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, fullWidth: true, rows: 10, InputProps: {
-                                                readOnly: true,
-                                            }, value: leftContent, sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Dialog, { open: open, onClose: onClose, maxWidth: "md", fullWidth: true, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: title }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', flexDirection: 'row', mb: 2 }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { flex: 1, mr: 1 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", sx: { mb: 1 }, children: leftTitle }), (0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, fullWidth: true, rows: 10, value: leftContent, sx: {
                                                 '& .MuiOutlinedInput-root': {
                                                     fontFamily: 'monospace',
                                                     fontSize: '0.875rem',
                                                 },
-                                            } })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { flex: 1, ml: 1 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", sx: { mb: 1 }, children: rightTitle }), (0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, fullWidth: true, rows: 10, InputProps: {
-                                                readOnly: true,
-                                            }, value: rightContent, sx: {
+                                            }, slotProps: {
+                                                input: {
+                                                    readOnly: true,
+                                                },
+                                            } })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { flex: 1, ml: 1 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", sx: { mb: 1 }, children: rightTitle }), (0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, fullWidth: true, rows: 10, value: rightContent, sx: {
                                                 '& .MuiOutlinedInput-root': {
                                                     fontFamily: 'monospace',
                                                     fontSize: '0.875rem',
                                                 },
+                                            }, slotProps: {
+                                                input: {
+                                                    readOnly: true,
+                                                },
                                             } })] })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", sx: { mt: 2, color: 'text.secondary' }, children: description })] }) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', justifyContent: 'flex-end', p: 2 }, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", onClick: onClose, sx: { mr: 1 }, children: t('themeTranslations.cancel') }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: handleConfirm, disabled: loading, children: loading ? (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 24 }) : t('themeTranslations.confirmUpdate') })] })] }));
 };
 function Layout({ loadState, loadedData }) {
@@ -521,7 +525,11 @@ function Layout({ loadState, loadedData }) {
         triggerRerender();
     }, [JSON.stringify(mergedPropertiesValues), JSON.stringify(mergedAllBlocks), state.metadata.id, locale]);
     const DraggingSplitPlaceholder = (0, react_1.useMemo)(() => {
-        return ((0, jsx_runtime_1.jsx)(material_1.Box, { p: 1.5, width: "100%", height: "100%", children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", height: "100%", sx: { borderRadius: 1 } }) }));
+        return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                p: 1.5,
+                width: '100%',
+                height: '100%',
+            }, children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", height: "100%", sx: { borderRadius: 1 } }) }));
     }, []);
     // Move item function for drag and drop
     const moveItem = (0, react_1.useCallback)((dragIndex, hoverIndex) => {
@@ -608,7 +616,16 @@ function Layout({ loadState, loadedData }) {
         if (state.draggingSplitPane) {
             return DraggingSplitPlaceholder;
         }
-        return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { height: "100%", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: 1, direction: "row", alignItems: "center", sx: { pt: 2, pr: 1, pl: 0.5, pb: 1 }, children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { placeholder: t('themeTranslations.search'), sx: { minWidth: 60, flex: 1 }, onChange: (e) => {
+        return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { sx: {
+                height: '100%',
+            }, children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", sx: {
+                        gap: 1,
+                        alignItems: 'center',
+                        pt: 2,
+                        pr: 1,
+                        pl: 0.5,
+                        pb: 1,
+                    }, children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { placeholder: t('themeTranslations.search'), sx: { minWidth: 60, flex: 1 }, onChange: (e) => {
                                 state.searchValue = e.target.value;
                             } }), hasCustomSort && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t('themeTranslations.resetToAlphabeticalSort'), children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: () => {
                                     setCustomSortOrder([]);
@@ -643,12 +660,27 @@ function Layout({ loadState, loadedData }) {
                                 }
                             }, onDelete: handleDeleteBlock, index: index, moveItem: moveItem, showDragHandle: true, routes: routes }, route));
                     })
-                        .filter(Boolean) })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", justifyContent: "center", alignItems: "center", height: "100%", sx: { p: 3 }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { alignItems: "center", spacing: 3, sx: { textAlign: 'center' }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { component: "img", src: "https://api.iconify.design/material-symbols:folder-open-outline.svg", sx: {
+                        .filter(Boolean) })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        height: '100%',
+                        p: 3,
+                    }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { spacing: 3, sx: {
+                            alignItems: 'center',
+                            textAlign: 'center',
+                        }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { component: "img", src: "https://api.iconify.design/material-symbols:folder-open-outline.svg", sx: {
                                     width: 48,
                                     height: 48,
                                     opacity: 0.5,
                                     filter: 'grayscale(100%)',
-                                }, alt: "No components" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", color: "text.primary", sx: { fontWeight: 600 }, children: t('themeTranslations.noComponentsFound') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", sx: { maxWidth: 200 }, children: t('themeTranslations.createFirstComponent') }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", startIcon: (0, jsx_runtime_1.jsx)(Add_1.default, {}), onClick: () => {
+                                }, alt: "No components" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", sx: {
+                                    color: 'text.primary',
+                                    fontWeight: 600,
+                                }, children: t('themeTranslations.noComponentsFound') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", sx: {
+                                    color: 'text.secondary',
+                                    maxWidth: 200,
+                                }, children: t('themeTranslations.createFirstComponent') }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", startIcon: (0, jsx_runtime_1.jsx)(Add_1.default, {}), onClick: () => {
                                     state.createBlockOpen = true;
                                 }, sx: { mt: 2 }, children: t('themeTranslations.createComponent') })] }) }))] }));
     }, [
@@ -673,7 +705,13 @@ function Layout({ loadState, loadedData }) {
                 return null;
             }
             if (loadState.type === 'load-error') {
-                return ((0, jsx_runtime_1.jsx)(material_1.Box, { width: "100%", height: "100%", display: "flex", justifyContent: "center", alignItems: "center", children: (0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "error", variant: "filled", children: t('themeTranslations.failedLoadCode') }) }));
+                return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                        width: '100%',
+                        height: '100%',
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    }, children: (0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "error", variant: "filled", children: t('themeTranslations.failedLoadCode') }) }));
             }
             // 从 URL 获取初始组件 ID 和语言
             const url = new URL(window.location.href);
@@ -687,7 +725,13 @@ function Layout({ loadState, loadedData }) {
         }
         // 没有匹配到路由，使用欢迎页面
         if (notSelectedBlock) {
-            return ((0, jsx_runtime_1.jsxs)(material_1.Box, { width: "100%", height: "100%", display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", sx: {
+            return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                    width: '100%',
+                    height: '100%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'center',
+                    alignItems: 'center',
                     backgroundColor: 'background.default',
                     p: 3,
                     textAlign: 'center',
@@ -879,12 +923,18 @@ function Layout({ loadState, loadedData }) {
                         justifyContent: 'center',
                         alignItems: 'center',
                         p: 3,
-                    }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { alignItems: "center", spacing: 2, sx: {
+                    }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { spacing: 2, sx: {
+                            alignItems: 'center',
                             textAlign: 'center',
                             bgcolor: 'background.default',
                             borderRadius: 2,
                             p: 3,
-                        }, children: [(0, jsx_runtime_1.jsx)(Settings_1.default, { sx: { fontSize: 48, color: 'primary.main' } }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { spacing: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", color: "primary.main", sx: { fontWeight: 600 }, children: t('themeTranslations.componentPropertiesTitle') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", children: t('themeTranslations.selectComponentToConfigureProperties') })] })] }) })), (0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(components_1.BasicInfo, { config: state.metadata }) }) }), (0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(components_1.PropertiesConfig, { config: state.metadata, currentLocale: locale, defaultLocale: defaultLocale, allComponents: mergedAllBlocks, onUpdateConfig: (updater) => {
+                        }, children: [(0, jsx_runtime_1.jsx)(Settings_1.default, { sx: { fontSize: 48, color: 'primary.main' } }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { spacing: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", sx: {
+                                            color: 'primary.main',
+                                            fontWeight: 600,
+                                        }, children: t('themeTranslations.componentPropertiesTitle') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", sx: {
+                                            color: 'text.secondary',
+                                        }, children: t('themeTranslations.selectComponentToConfigureProperties') })] })] }) })), (0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(components_1.BasicInfo, { config: state.metadata }) }) }), (0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(components_1.PropertiesConfig, { config: state.metadata, currentLocale: locale, defaultLocale: defaultLocale, allComponents: mergedAllBlocks, onUpdateConfig: (updater) => {
                                     updater(state.metadata);
                                 }, useI18nEditor: false }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "column", spacing: 1, sx: { mt: 1 }, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", size: "small", color: "primary", onClick: async () => {
                                             try {

package/lib/cjs/plugins/vite-plugin-block-studio.js

@@ -60,14 +60,35 @@ const vite_plugin_html_transform_1 = require("./vite-plugin-html-transform");
 const vite_plugin_import_transform_1 = require("./vite-plugin-import-transform");
 // const BUILTIN_MODULES_VAR = '__PAGES_KIT_BUILTIN_MODULES__';
 // logger.log('BUILTIN_MODULES_VAR', BUILTIN_MODULES_VAR);
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const isMatchAfterSlachExternals = (_id) => {
+// 检查模块ID是否匹配外部依赖（包括子路径）
+const isMatchAfterSlachExternals = (id, externals) => {
+    // 精确匹配
+    if (externals[id]) {
+        return true;
+    }
+    // 子路径匹配，特别处理 React 相关模块
+    const reactModules = ['react', 'react-dom', 'react/jsx-runtime', 'react/jsx-dev-runtime', 'react-dom/client'];
+    // 检查是否是 React 相关模块的子路径
+    for (const reactModule of reactModules) {
+        if (id === reactModule || id.startsWith(`${reactModule}/`)) {
+            return true;
+        }
+    }
+    // 检查其他外部依赖的子路径
+    for (const externalModule of Object.keys(externals)) {
+        if (id.startsWith(`${externalModule}/`)) {
+            return true;
+        }
+    }
     return false;
 };
 const defaultBlockExternals = {
-    // 核心 React 相关
+    // 核心 React 相关 - 确保完全外部化
     react: '@blocklet/pages-kit/builtin/react',
     'react-dom': '@blocklet/pages-kit/builtin/react-dom',
+    'react-dom/client': '@blocklet/pages-kit/builtin/react-dom',
+    'react/jsx-runtime': '@blocklet/pages-kit/builtin/react',
+    'react/jsx-dev-runtime': '@blocklet/pages-kit/builtin/react',
     'react-router-dom': '@blocklet/pages-kit/builtin/react-router-dom',
     'react-hook-form': '@blocklet/pages-kit/builtin/react-hook-form',
     'react-wrap-balancer': '@blocklet/pages-kit/builtin/react-wrap-balancer',
@@ -139,14 +160,6 @@ function initBlockStudioPlugins(options) {
         externalMappings = options.blockExternals;
     }
     (0, helper_1.setBlockEntryFilesPattern)(entryFilesPattern);
-    helper_1.logger.log('initBlockStudioPlugins options: ', {
-        cwd: workingDir,
-        watchFilesDir,
-        entryFilesPattern: (0, helper_1.getBlockEntryFilesPattern)(),
-        pagesDir,
-        blockExternals: externalMappings, // 添加日志输出
-        transpileBuiltinModule,
-    });
     // 为 globals 创建一个无前缀的版本
     const pathMappings = Object.fromEntries(Object.entries(externalMappings).filter(([, value]) => !value.startsWith('window.') && value.length > 0));
     const externalGlobalMappings = Object.fromEntries(Object.entries(externalMappings).filter(([, value]) => value.startsWith('window.') && value.length > 0));
@@ -155,12 +168,32 @@ function initBlockStudioPlugins(options) {
         if (!value?.length) {
             return [];
         }
+        // 特殊处理 React 相关模块
+        const reactGlobals = {
+            react: 'React',
+            'react-dom': 'ReactDOM',
+            'react/jsx-runtime': 'React',
+            'react/jsx-dev-runtime': 'React',
+            'react-dom/client': 'ReactDOM',
+        };
+        if (reactGlobals[key]) {
+            return [key, reactGlobals[key]];
+        }
         // 移除 "window." 前缀并转换为首字母大写的驼峰式
         const rawName = String(key);
         const globalName = (0, upperFirst_1.default)((0, camelCase_1.default)(rawName));
         return [key, globalName];
     })
         .filter((item) => item.length > 0));
+    helper_1.logger.log('initBlockStudioPlugins options: ', {
+        cwd: workingDir,
+        watchFilesDir,
+        entryFilesPattern: (0, helper_1.getBlockEntryFilesPattern)(),
+        pagesDir,
+        blockExternals: externalMappings,
+        globalsMappings,
+        transpileBuiltinModule,
+    });
     const filterModules = process.argv.includes('--filter')
         ? process.argv[process.argv.indexOf('--filter') + 1]?.split(',')
         : null;
@@ -239,10 +272,14 @@ function initBlockStudioPlugins(options) {
                             ..._config?.build?.rollupOptions,
                             external: _config?.build?.rollupOptions?.external ||
                                 ((id) => {
-                                    // 是否匹配后缀
-                                    const isMatchAfterSlash = isMatchAfterSlachExternals(id);
+                                    // 使用改进的外部依赖检查
+                                    const isExternal = isMatchAfterSlachExternals(id, externalMappings);
+                                    if (isExternal) {
+                                        return true;
+                                    }
+                                    // 兼容原有逻辑
                                     const skipList = [...Object.keys(externalMappings)];
-                                    if (skipList.some((item) => (isMatchAfterSlash && id.startsWith(`${item}/`)) || id === item)) {
+                                    if (skipList.some((item) => id === item)) {
                                         return true;
                                     }
                                     return false;