@blocklet/pages-kit-block-studio 0.4.104 → 0.4.106

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

@@ -56,8 +56,13 @@ const vite_plugin_node_polyfills_1 = require("vite-plugin-node-polyfills");
 const vite_plugin_react_pages_1 = __importStar(require("vite-plugin-react-pages"));
 const helper_1 = require("../utils/helper");
 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) => {
+    return false;
+};
 const defaultBlockExternals = {
     // 核心 React 相关
     react: '@blocklet/pages-kit/builtin/react',
@@ -90,6 +95,19 @@ const defaultBlockExternals = {
     'react-scroll-to-bottom': '@blocklet/pages-kit/builtin/async/react-scroll-to-bottom',
     '@blocklet/pages-kit': '@blocklet/pages-kit',
 };
+const importTransformConfig = {
+    transforms: [
+        {
+            find: [
+                // import {useTheme} from '@mui/material/styles' => import {useTheme} from '@mui/material'
+                { source: '@mui/material/styles', type: 'ImportSpecifier' },
+                // import useTheme from '@mui/material/styles/useTheme' => import { useTheme } from '@mui/material'
+                { source: '@mui/material/styles/*', type: 'ImportDefaultSpecifier' },
+            ],
+            replace: { source: '@mui/material', type: 'ImportSpecifier' },
+        },
+    ],
+};
 function initBlockStudioPlugins(options) {
     const workingDir = options?.cwd || process.cwd();
     const entryFilesPattern = options?.entryFilesPattern || (0, helper_1.getBlockEntryFilesPattern)();
@@ -162,6 +180,7 @@ function initBlockStudioPlugins(options) {
         //     return html;
         //   },
         // },
+        (0, vite_plugin_import_transform_1.importTransformPlugin)(importTransformConfig),
         options?.ignoreNodePolyfills
             ? undefined
             : (0, vite_plugin_node_polyfills_1.nodePolyfills)({
@@ -205,7 +224,7 @@ function initBlockStudioPlugins(options) {
                             external: _config?.build?.rollupOptions?.external ||
                                 ((id) => {
                                     // 是否匹配后缀
-                                    const isMatchAfterSlash = false;
+                                    const isMatchAfterSlash = isMatchAfterSlachExternals(id);
                                     const skipList = [...Object.keys(externalMappings)];
                                     if (skipList.some((item) => (isMatchAfterSlash && id.startsWith(`${item}/`)) || id === item)) {
                                         return true;

package/lib/cjs/plugins/vite-plugin-import-transform.js

@@ -0,0 +1,269 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.importTransformPlugin = importTransformPlugin;
+const ts = __importStar(require("typescript"));
+/**
+ * 简化版的 import 转换 Vite 插件
+ * 用于在构建过程中修改导入语句的源路径和类型
+ */
+function importTransformPlugin(options = {}) {
+    const { transforms = [], include = /\.[jt]sx?$/, exclude = /node_modules/ } = options;
+    // 创建过滤函数，判断是否应处理该文件
+    const filter = (id) => {
+        // 排除 node_modules 目录
+        if (id.includes('node_modules'))
+            return false;
+        // 处理 include 规则
+        const testInclude = (pattern) => {
+            if (typeof pattern === 'string')
+                return id.includes(pattern);
+            return pattern.test(id);
+        };
+        // 处理 exclude 规则
+        const testExclude = (pattern) => {
+            if (typeof pattern === 'string')
+                return id.includes(pattern);
+            return pattern.test(id);
+        };
+        // 检查是否符合 include 规则
+        const shouldInclude = Array.isArray(include) ? include.some(testInclude) : testInclude(include);
+        // 检查是否符合 exclude 规则
+        const shouldExclude = Array.isArray(exclude) ? exclude.some(testExclude) : testExclude(exclude);
+        return shouldInclude && !shouldExclude;
+    };
+    return {
+        name: 'import-transform',
+        transform(code, id) {
+            // 如果不需要处理该文件，直接返回
+            if (!filter(id))
+                return null;
+            // 使用 TypeScript 解析源代码
+            const sourceFile = ts.createSourceFile(id, code, ts.ScriptTarget.Latest, true);
+            // 记录是否有改变
+            let hasChanged = false;
+            // 创建转换器
+            const transformer = (context) => {
+                const visit = (node) => {
+                    // 仅处理导入声明
+                    if (ts.isImportDeclaration(node)) {
+                        const importPath = getImportPath(node);
+                        if (!importPath)
+                            return ts.visitEachChild(node, visit, context);
+                        const importType = getImportType(node);
+                        // 记录是否找到匹配的规则
+                        let matched = false;
+                        // 遍历所有转换规则
+                        for (const transform of transforms) {
+                            const finds = Array.isArray(transform.find) ? transform.find : [transform.find];
+                            // 检查每个查找条件
+                            for (const find of finds) {
+                                // 检查源路径和导入类型是否匹配
+                                if (!matchSourcePath(find.source, importPath)) {
+                                    // 路径不匹配，检查下一条
+                                }
+                                else if (find.type && find.type !== importType) {
+                                    // 类型不匹配，检查下一条
+                                }
+                                else {
+                                    // 找到匹配的导入声明
+                                    matched = true;
+                                    hasChanged = true;
+                                    const replacePath = transform.replace.source;
+                                    const replaceType = transform.replace.type;
+                                    // 如果指定了替换类型
+                                    if (replaceType && replaceType !== importType) {
+                                        // 处理不同类型的导入转换
+                                        if (importType === 'ImportSpecifier' && replaceType === 'ImportDefaultSpecifier') {
+                                            // { X } -> default
+                                            const names = node.importClause?.namedBindings;
+                                            if (!names || !names.elements[0])
+                                                return ts.visitEachChild(node, visit, context);
+                                            const importName = names.elements[0].name.text;
+                                            return createDefaultImport(importName, replacePath);
+                                        }
+                                        if (importType === 'ImportDefaultSpecifier' && replaceType === 'ImportNamespaceSpecifier') {
+                                            // default -> * as X
+                                            const name = node.importClause?.name?.text;
+                                            if (!name)
+                                                return ts.visitEachChild(node, visit, context);
+                                            return createNamespaceImport(name, replacePath);
+                                        }
+                                        if (importType === 'ImportNamespaceSpecifier' && replaceType === 'ImportDefaultSpecifier') {
+                                            // * as X -> default
+                                            const binding = node.importClause?.namedBindings;
+                                            if (!binding)
+                                                return ts.visitEachChild(node, visit, context);
+                                            const name = binding.name.text;
+                                            return createDefaultImport(name, replacePath);
+                                        }
+                                        if (importType === 'ImportDefaultSpecifier' && replaceType === 'ImportSpecifier') {
+                                            // default -> { X }
+                                            const name = node.importClause?.name?.text;
+                                            if (!name)
+                                                return ts.visitEachChild(node, visit, context);
+                                            // 智能处理：检测是否需要使用别名
+                                            // 从路径中提取原始名称，如 '@mui/material/styles/useTheme' -> 'useTheme'
+                                            const originalName = extractNameFromPath(importPath);
+                                            // 如果能从路径中提取名称，使用它作为原始名称
+                                            if (originalName && originalName !== name) {
+                                                return createNamedImportWithAlias(originalName, name, replacePath);
+                                            }
+                                            // 退回到简单导入
+                                            return createNamedImport(name, replacePath);
+                                        }
+                                    }
+                                    else {
+                                        // 没有指定替换类型，智能推断最合适的转换
+                                        // 默认导入 -> 命名导入的智能转换（基于路径分析）
+                                        const isDefaultImport = importType === 'ImportDefaultSpecifier';
+                                        if (isDefaultImport && isComponentPath(importPath)) {
+                                            const name = node.importClause?.name?.text;
+                                            if (!name)
+                                                return ts.visitEachChild(node, visit, context);
+                                            // 从路径中提取组件名称
+                                            const componentName = extractNameFromPath(importPath);
+                                            if (componentName && componentName !== name) {
+                                                // 使用从路径中提取的组件名作为原始导入名
+                                                return createNamedImportWithAlias(componentName, name, replacePath);
+                                            }
+                                        }
+                                    }
+                                    // 只改变导入路径
+                                    if (replacePath !== importPath) {
+                                        return ts.factory.createImportDeclaration(undefined, node.importClause, ts.factory.createStringLiteral(replacePath));
+                                    }
+                                    // 找到匹配但无需转换，继续检查下一个规则
+                                    break;
+                                }
+                            }
+                            // 如果已经找到匹配并转换了，就不再继续检查
+                            if (matched)
+                                break;
+                        }
+                    }
+                    return ts.visitEachChild(node, visit, context);
+                };
+                return (node) => ts.visitNode(node, visit);
+            };
+            // 应用转换
+            const result = ts.transform(sourceFile, [transformer]);
+            // 如果有改变，打印转换后的代码
+            if (hasChanged) {
+                const printer = ts.createPrinter();
+                const transformedCode = printer.printFile(result.transformed[0]);
+                return { code: transformedCode };
+            }
+            // 没有变化，返回 null
+            return null;
+        },
+    };
+}
+exports.default = importTransformPlugin;
+// 辅助函数：获取导入路径
+function getImportPath(node) {
+    const { moduleSpecifier } = node;
+    if (ts.isStringLiteral(moduleSpecifier)) {
+        return moduleSpecifier.text;
+    }
+    return undefined;
+}
+// 辅助函数：获取导入类型
+function getImportType(node) {
+    if (node.importClause) {
+        if (node.importClause.name) {
+            return 'ImportDefaultSpecifier';
+        }
+        if (node.importClause.namedBindings) {
+            if (ts.isNamespaceImport(node.importClause.namedBindings)) {
+                return 'ImportNamespaceSpecifier';
+            }
+            if (ts.isNamedImports(node.importClause.namedBindings)) {
+                return 'ImportSpecifier';
+            }
+        }
+    }
+    return '';
+}
+// 辅助函数：创建默认导入
+function createDefaultImport(name, path) {
+    return ts.factory.createImportDeclaration(undefined, ts.factory.createImportClause(false, ts.factory.createIdentifier(name), undefined), ts.factory.createStringLiteral(path));
+}
+// 辅助函数：创建命名空间导入
+function createNamespaceImport(name, path) {
+    return ts.factory.createImportDeclaration(undefined, ts.factory.createImportClause(false, undefined, ts.factory.createNamespaceImport(ts.factory.createIdentifier(name))), ts.factory.createStringLiteral(path));
+}
+// 辅助函数：创建命名导入
+function createNamedImport(name, path) {
+    return ts.factory.createImportDeclaration(undefined, ts.factory.createImportClause(false, undefined, ts.factory.createNamedImports([
+        ts.factory.createImportSpecifier(false, undefined, ts.factory.createIdentifier(name)),
+    ])), ts.factory.createStringLiteral(path));
+}
+// 辅助函数：从路径中提取名称
+function extractNameFromPath(path) {
+    // 处理类似 '@mui/material/styles/useTheme' 的路径
+    const segments = path.split('/');
+    const lastSegment = segments[segments.length - 1];
+    // 如果最后一段有意义的名称（不是index或为空），返回它
+    if (lastSegment && lastSegment !== 'index') {
+        return lastSegment;
+    }
+    return undefined;
+}
+// 辅助函数：创建带别名的命名导入
+function createNamedImportWithAlias(originalName, aliasName, path) {
+    return ts.factory.createImportDeclaration(undefined, ts.factory.createImportClause(false, undefined, ts.factory.createNamedImports([
+        ts.factory.createImportSpecifier(false, ts.factory.createIdentifier(originalName), ts.factory.createIdentifier(aliasName)),
+    ])), ts.factory.createStringLiteral(path));
+}
+// 辅助函数：检查是否是组件路径（含有组件名的子路径）
+function isComponentPath(path) {
+    // 检查路径是否包含至少一个斜杠，且最后一段不是index
+    const segments = path.split('/');
+    return segments.length > 1 && segments[segments.length - 1] !== 'index';
+}
+// 辅助函数：检查源路径是否匹配（支持通配符）
+function matchSourcePath(pattern, actualPath) {
+    // 处理精确匹配
+    if (pattern === actualPath)
+        return true;
+    // 处理通配符匹配
+    if (pattern.endsWith('/*')) {
+        const basePath = pattern.slice(0, -2); // 移除 '/*'
+        return actualPath.startsWith(`${basePath}/`);
+    }
+    // 可以在这里添加更多匹配逻辑，如正则表达式
+    return false;
+}