@ aphrody/ m3- codemods (英语)

迁移 MUI React 的代码和 ast- grep 规则(@mui/material, (中文(简体) ), @mui/icons-material改为: @aphrody/m3-react 和材料符号.

bun add -d @aphrody/m3-codemods

import { transformSource } from "@aphrody/m3-codemods";

const { source, diagnostics } =
  transformSource(`import { Button } from "@mui/material";
export const Save = () => <Button variant="outlined">Save</Button>;`);
console.log(source); // MdOutlinedButton from @aphrody/m3-react
console.log(diagnostics); // MIGRATION-TODO notes left for manual work

许可证: Apache-2.0(LICENSE) (中文(简体) ). 安装指南 : 文件/材料/立方米/INSTALL.md。 。 。 .

没有运行时间依赖性:引擎单独运行于 Bun. m3-bun migrate 运行这些转换在一个项目上.

两个工具

变换

所有转换共享 lib/engine.ts (地图表) lib/mapping.ts, JSX 帮助者 lib/jsx-helpers.ts) (中文(简体) ). 读取来源 使用TSX扫描仪(lib/tsx-scan.ts)并被定位文本编辑所更改(lib/edits.ts),所以未触及的代码保持其 格式化。 输入必须是 TSX Bun.Transpiler 接受;否则文件保持不变,但有一个 SyntaxError。 。 。 .

从此包的检出 :

bun scripts/codemod.ts orchestrator 'src/**/*.tsx' --dry   # list the files that would change
bun scripts/codemod.ts icons src/App.tsx                   # write the change

每一次改变出口 default (file: { path?, source }, api?, options?) => string。 。 。 . icons.ts 分开( 管弦乐手不碰 @mui/icons-material: <CloseIcon/> 变成 <md-icon>close</md-icon> 结束 lib/icon-names.ts (PascalCase to snake case, 与 4253 个官方格莱弗在 data/material-symbols-names.json;品牌标志用TODO保存. 集成组件和图标映射为 mui-m3-map.json (单位:千美元)bun scripts/export-map-json.ts) (中文(简体) ). 目标明确的改革(button, (中文(简体) ), fields只接触它们的组件.

自动

• 导入 : @mui/material 命名、 默认子路径和别名导入成为排序 import { ... } from "@aphrody/m3-react"; 副作用导入 @aphrody/material-web/icon/icon.js 当一个 <md-icon> 生成.
• 变相意识包装: Button 内有(或无) / 概述 / 文本 / 提升 / 直线改为 MdFilledButton, (中文(简体) ), MdOutlinedButton, (中文(简体) ), MdTextButton, (中文(简体) ), MdElevatedButton, (中文(简体) ), MdFilledTonalButton· ; TextField 财务报告和审定财务报表 Select 已填入或 大纲成为匹配 MdFilled* 编号 : MdOutlined*编辑 variant 道具被消耗.
• 一对一重命名: Checkbox 改为 MdCheckbox, (中文(简体) ), Switch 改为 MdSwitch, (中文(简体) ), Dialog 改为 MdDialog, (中文(简体) ), MenuItem 改为 MdMenuItem, (中文(简体) ), Divider 改为 MdDivider, (中文(简体) ), Typography 改为 MdType,等等。 (笑声).
• 图标 : startIcon 编号 : endIcon 变成 <md-icon slot="icon"> 作为第一个孩子 (TODO: endIcon) (中文(简体) ).
• 分层部件 : DialogTitle 编号 : DialogContent 编号 : DialogActions 财务报告和审定财务报表 CardContent 编号 : CardHeader 编号 : CardMedia 变成 <div slot="headline|content|actions|media"> (与一个TODO).
• 布局 : Box, (中文(简体) ), Container, (中文(简体) ), Stack, (中文(简体) ), Grid, (中文(简体) ), Paper 变成 <div> (Tailwind课程的TODO).
• 其他的都一样 MIGRATION-TODO 标记总是有效的 JSX.

手动( 标记) MIGRATION-TODO(中文(简体) )

• sx: 删除; 转换为 Tailwind 类和 --md-sys-* 标志。 尾风无法到达阴影 DOM md-*。 。 。 .
• onChange(e, value): 物质-网络传播本土 input 编号 : change 事件; 读取 e.target.value。处理器尸体不是 重写.
• 无等同物的道具( E)color, (中文(简体) ), size, (中文(简体) ), fullWidth, (中文(简体) ), disableElevation, (中文(简体) ), disableRipple页:1.
• 差距部分(Avatar, (中文(简体) ), Alert, (中文(简体) ), Breadcrumbs, (中文(简体) ), Rating, (中文(简体) ), Skeleton, (中文(简体) ), Backdrop, (中文(简体) ), Modal, (中文(简体) ), Popover, (中文(简体) ), Popper, (中文(简体) ), Link, (中文(简体) ), 过渡, CssBaseline(......)没有改变;他们的JSX和MUI进口停留.
• 对话框和牌位:检查每个 <div slot> 直系子女为: md-* 亲子关系.

已知限制

• Handler身体和可控状态逻辑不重写.
• 成员表达部分(<Foo.Bar/>)和间接再出口(import { Button } from "./ui"未处理.
• Tab 总是变成 MdPrimaryTab。 。 。 .
• 被重新命名的元素的儿童失去断线 JSX 白空间(化妆;跑) bun fmt 后来).
• startIcon 编号 : endIcon 自动关闭元件的去除没有 <md-icon> (TODO添加).

ast-grep 规则(rules/, (中文(简体) ), sgconfig.yml(中文(简体) )

ast-grep scan                                           # report for the project (from this directory)
ast-grep scan --filter '^fix-divider$' --update-all     # apply the Divider fix

规则不选择变体或管理进口;使用变体进行真正的迁移.

固定设备

固定装置存在之前/之后 __testfixtures__/ (前缀) icons- 运行 icons 变身,其他的乐团. bun scripts/run-fixtures.ts 比较它们(--update 在预期变动后,重新产生预期产出.