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

package/lib/cjs/utils/generate-wrapper-code.js

@@ -205,7 +205,7 @@ router.get('/api/pages', async (req, res) => {
     return res.status(400).json({ message: 'Either did or projectId is required' });
   } catch (error) {
     console.error('Error fetching pages:', error);
-    return res.status(500).json({ message: 'Internal server error' });
+    return res.status(400).json({ message: 'Internal server error' });
   }
 });
 

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

@@ -115,7 +115,7 @@ 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' });
     }
 });
 initBlockStudioRouter.post('/', async (req, res) => {
@@ -163,7 +163,7 @@ 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' });
     }
 });
 initBlockStudioRouter.post('/create', async (req, res) => {
@@ -225,7 +225,7 @@ 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' });
     }
 });
 initBlockStudioRouter.get('/resources', async (req, res) => {
@@ -319,7 +319,7 @@ 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}`,
             });
@@ -327,7 +327,7 @@ 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}`,
         });
@@ -385,7 +385,7 @@ 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}`,
             });
@@ -393,7 +393,7 @@ 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}`,
         });
@@ -455,7 +455,7 @@ 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}`,
             });
@@ -463,7 +463,7 @@ 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/esm/middlewares/init-resource-router.js

@@ -250,7 +250,7 @@ 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' });
     }
 });
 export default initResourceRouter;

package/lib/esm/plugins/_theme.js

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

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

@@ -23,14 +23,35 @@ VIRTUAL_MODULE_ID, readHtmlFiles, generateComponent, } from './vite-plugin-html-
 import { importTransformPlugin } from './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',
@@ -102,14 +123,6 @@ export function initBlockStudioPlugins(options) {
         externalMappings = options.blockExternals;
     }
     setBlockEntryFilesPattern(entryFilesPattern);
-    logger.log('initBlockStudioPlugins options: ', {
-        cwd: workingDir,
-        watchFilesDir,
-        entryFilesPattern: 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));
@@ -118,12 +131,32 @@ export 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 = upperFirst(camelCase(rawName));
         return [key, globalName];
     })
         .filter((item) => item.length > 0));
+    logger.log('initBlockStudioPlugins options: ', {
+        cwd: workingDir,
+        watchFilesDir,
+        entryFilesPattern: getBlockEntryFilesPattern(),
+        pagesDir,
+        blockExternals: externalMappings,
+        globalsMappings,
+        transpileBuiltinModule,
+    });
     const filterModules = process.argv.includes('--filter')
         ? process.argv[process.argv.indexOf('--filter') + 1]?.split(',')
         : null;
@@ -202,10 +235,14 @@ export 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;