dumi 2.0 TODOs

[PeachScript]

欢迎参与 dumi 2.0 的建设，这里是待办任务合集，持续更新中... 下方任务列表中带 ⭐️ 的为 first-time task，⭐️ 数量越多代表难度越高 做之前请先评论认领，避免冲突

详细功能规划参考 #1151

基础工程

• [x] 分支清理、基础工程搭建 https://github.com/umijs/dumi/commit/a0d39933444b2764653a7768397e1098ce2eebf9
• [x] 基础 CI #1164

路由系统

• [x] 常规文档路由生成，默认识别 docs 目录、支持用 resolve.docDirs 自定义，基于 Umi 层的工具函数 https://github.com/umijs/dumi/commit/a9ed4df45ad46104330bfce8ab4208957344dec8
• [ ] 原子（组件、函数等）路由生成，默认识别 src、支持用 resolve.atomDirs 自定义，原子路由均有实体类型(atomType），默认值为 component，所生成的路由在 /components 下
  • [x] 支持配置时指定原子类型（例如 hook、util、function、block）https://github.com/umijs/dumi/commit/4f26c08a39386938a47778fec60c542d0630e80f
  • [x] 支持多语言路由
  • [ ] 支持转化 father 配置为 resolve.atomDirs 的默认值
• [x] ⭐️⭐️ 对生成的路由路径做无害化处理（仅允许使用字母、数字、下划线、短横线），基于 https://github.com/umijs/dumi/blob/22eec1d664865de0659b98b90ce69bb9cc5c4246/src/utils.ts
• [x] 默认 404 页面
• [x] demo 独立访问路由

Markdown 编译

• [x] 聚合式 webpack loader（根据参数返回不同内容）
  • [x] 处理 Markdown https://github.com/umijs/dumi/commit/8509da25ed5a72d2eafc30844e857d1ea1b823f3
  • [x] 处理 demo https://github.com/umijs/dumi/commit/22eec1d664865de0659b98b90ce69bb9cc5c4246
• [x] Markdown transformer（基于 unified）
  • [x] loader 持久缓存 @miracles1919 #1221
  • [x] rehypeJsxify jsx 输出 https://github.com/umijs/dumi/commit/8509da25ed5a72d2eafc30844e857d1ea1b823f3
  • [x] rehypeDemo 代码块 demo 及外部 demo 处理 https://github.com/umijs/dumi/commit/22eec1d664865de0659b98b90ce69bb9cc5c4246
  • [x] rehypeStrip 移除无用的节点，例如 \n https://github.com/umijs/dumi/commit/eafefa94fb335e6cbcdc23c390323bb1f8f2c1eb
  • [x] ⭐️⭐️ rehypeIsolation基础样式隔离，参考 dumi v1 重写 @mortalYoung #1165
  • [x] ⭐️⭐️⭐️ rehypeEmbed 支持 Markdown 嵌入语法，参考 dumi v1 重写 @mortalYoung
  • [x] ⭐️ rehypeImg 相对路径图片引入，参考 dumi v1 重写 @wyy0512
  • [x] ⭐️⭐️⭐️ rehypeEnhancedTag 内置组件替换渲染（例如 Table、SourceCode），参考 dumi v1 重写
  • [x] ⭐️⭐️⭐️ rehypeContainer 增强语法，替代 1.x 的 Alert，功能参考 Vitepress，实现上基于 remark-directive
  • [x] rehypeText 提取所有文本节点用来生成搜索索引
  • [x] rehypeLink 站内链接均使用 Link 标签做 pushState 跳转（要支持链接到某个 md 文件的用法） #1258 @miracles1919

demo 编译

• [x] dumi-demo-loader，作为 preLoader 供注册技术栈在 babel-loader 前面处理 demo 代码，使用下方的 transformCode 将其包裹、转换为 React 组件 https://github.com/umijs/dumi/commit/482c469d8ba22f8813876d157607127586c72589
• [x] 支持 techstack 注册
  • [x] isSupported 启用条件 https://github.com/umijs/dumi/commit/51a3a3e750690375c6ecc8b1edc4a0e77cb75d26
  • [x] transformCode 转换 demo 代码
  • [x] code block demo 转换 https://github.com/umijs/dumi/commit/51a3a3e750690375c6ecc8b1edc4a0e77cb75d26
  • [x] external demo 转换（由 dumi-demo-loader 调用）https://github.com/umijs/dumi/commit/482c469d8ba22f8813876d157607127586c72589
  • [x] generateAssetsMeta 定制 demo 元数据（源代码、依赖等，通常让 dumi 内置处理即可） https://github.com/umijs/dumi/commit/6d5822bce356e448c27d2dc5410b00145f734e3a
  • [x] generatePreviewerProps 定制 demo 渲染器的属性
• [x] 实现 React 技术栈 https://github.com/umijs/dumi/commit/3a6791dacd964542e302f2dcbacbefc8aeb9e481
• [x] 实现 Vue 技术栈（基于 vue-loader） @xierenyuan
  • [x] external demo 支持
  • [x] code block demo 支持
• [x] 默认 demo 元数据生成器（源代码 + 依赖，基于 esbuild），dumi v1 用的 babel，流程可以参考但代码没有意义 https://github.com/umijs/dumi/commit/6d5822bce356e448c27d2dc5410b00145f734e3a
  • [x] 支持读取 md 的 atomId（组件 ID） + 额外的元数据 meta
• [x] 支持被动渲染模式（即 dumi 1.x 的 passive 模式）
• [x] 自动 alias 映射包名到 src

主题系统

• [x] ⭐️ 让 import from 'dumi' 拥有类型，导出 theme-api 的类型定义
• [x] 全局 Context
  • [x] demos 采集 https://github.com/umijs/dumi/commit/8381c000013e0451704e3440a121210ff3990da9
  • [x] demos 元数据采集，包含每个 demo 的源代码、依赖、描述等 https://github.com/umijs/dumi/commit/6d5822bce356e448c27d2dc5410b00145f734e3a
  • [x] 导航栏数据生成
  • [x] 侧边菜单数据生成
  • [x] toc 数据生成（支持 embed 和 demo 标题）
  • [x] 结合多语言配置实现国际化文案支持
• [ ] 主题 API
  • [ ] ⭐️⭐️ useNavData 支持约定式二级导航（比如 /docs/a/b1/c 和 /docs/a/b2/c 中的 b1 和 b2 就属于同一个二级导航）
  • [x] ⭐️⭐️⭐️ useSiteSearch 支持把搜索计算逻辑放到 worker 做，避免站点文本匹配计算量太大的时候阻塞渲染
• [ ] 内置组件（注意：均无需样式，最后统一加【有可能用 CSS-in-JS】，必须要样式的组件就用 CSS 简单写一下）
  • [x] DumiDemo https://github.com/umijs/dumi/commit/8381c000013e0451704e3440a121210ff3990da9
  • [x] DumiDemoGrid 用于 demo 分栏
  • [x] ⭐️ Table，参考 dumi v1 重写 @wyy0512
  • [x] ⭐️ Badge，参考 dumi v1 重写
  • [ ] ⭐️⭐️ Tree，参考 dumi v1 重写
• [x] 主题系统设计 @PeachScript https://github.com/umijs/dumi/discussions/1180
• [x] 加载器（项目级 > 包级 > 默认主题） @PeachScript https://github.com/umijs/dumi/commit/b0e0e54a8ef188c8a74aa5a8d3a1a8a27a63b390
• [ ] 默认主题， @PeachScript
  • [x] layouts
  • [x] DocLayout
    • [x] tdk 渲染（用于 SEO）
    • [x] 中英文排版优化（计划基于 heti）
    • [x] 首页设计 + 实现 @PeachScript
  • [ ] builtins
  • [x] Previewer， @PeachScript
    • [x] ⭐️⭐️ 在 CodeSandbox 中打开 @wyy0512 #1250
    • [ ] ⭐️⭐️ 在 CodePen 中打开
    • [x] ⭐️⭐️ 在 Stackblitz 中打开 @miracles1919 #1271
  • [x] SourceCode，参考 dumi v1 重写
  • [x] API， @PeachScript
  • [x] slots（可局部覆盖的插槽）
    • [ ] ⭐️ContentTabs 支持识别 Tab 上的子组件，渲染该 Tab 的 Action（最右侧）和 Extra（紧跟 Tab）区域
    • [x] ⭐️LangSwitch
    • [x] 支持不刷新页面切换语言（主要涉及到 context 链路上的状态更新）
    • [x] 支持两种语言以上的 Select 切换方式
    • [ ] ⭐️⭐️ SearchResult
    • [ ] 上下键选择结果时、如果遇到滚动区域外的元素，支持自动滚动到滚动视口内
• [x] 支持实体路由的 Tab 注册

自动 API

• [x] 组件属性定义 parser
• [ ] 组件属性 UI 面板
• [x] 生成原子资产（组件、函数）元数据
• [ ] 注册 Playground Tab

文档 & 脚手架

• [x] 站点脚手架
• [x] 组件研发脚手架（RC 阶段先手动集成 father 4）
• [x] 主题研发脚手架
• [x] RC 阶段文档
  • [x] 配置项
  • [x] 主题
  • [x] 快速上手
• [x] 正式版文档
  • [x] 新的文档目录结构 https://github.com/umijs/dumi/discussions/1248

[timeTravelCYN]

认领：🙋‍♂️ Markdown transformer - rehypeImg 相对路径图片引入，参考 dumi v1 重写 内置组件 - Table，参考 dumi v1 重写

[PeachScript]

@timeTravelCYN 欢迎加入，已标记跟进人 ❤️

[xierenyuan]

认领 实现 Vue 技术栈

[PeachScript]

@xierenyuan 👍 有思路的时候我们可以讨论一下再开始做，现在有可能还缺一些开放能力

[xierenyuan]

@xierenyuan 👍 有思路的时候我们可以讨论一下再开始做，现在有可能还缺一些开放能力

嗯

[mortalYoung]

⭐️⭐️ rehypeIsolation基础样式隔离，参考 dumi v1 重写

🙋我认领一个这个 不过这个参考是不是写错了 应该是这个吧 dumi isolation.ts

[PeachScript]

@mortalYoung 发现好几个链接错了，已更正 ❤️

[zzcan]

⭐️⭐️ rehypeEnhancedTag 内置组件替换渲染（例如 Table、SourceCode），参考 dumi v1 重写

⭐️ SourceCode，参考 dumi v1 重写（不需要 copy，只做纯渲染）

认领一下这两个

[mortalYoung]

⭐️⭐️⭐️ rehypeEmbed 支持 Markdown 嵌入语法，参考 dumi v1 重写

这个木有人做，那我领啦 😉

[qiaogaolong]

预计多久出一个rc版本呀

[tolerance-go]

2.0 可以同时 umi dev + dumi dev 吗

[PeachScript]

2.0 可以同时 umi dev + dumi dev 吗

原则上同一仓库不应该混用两个框架，具体场景可以介绍下看

[tolerance-go]

2.0 可以同时 umi dev + dumi dev 吗

原则上同一仓库不应该混用两个框架，具体场景可以介绍下看

和 eggjs 一样的渐进思想，目标是在 umi 后台项目业务开发的过程中，可以一边设计组件，一边实现需求，比如我要开发一个组件，接到需求分析后，在一个项目里不需要重新启动，我先建立对应组件文件，然后借用 dumi 能力把组件的最小化 UI 和业务的场景 demo 先做掉，之后在项目中调用；或者反过来我需要提取并且整理和测试某个业务代码中的组件，我直接新建约定目录就可以；

约定相关目录，开发环境可以作为 umi 添加的额外文档路由，生产构建则分离

[PeachScript]

@tolerance-go 听起来是集成模式的场景，现在已经支持了：https://d.umijs.org/zh-CN/guide/advanced#umi-%E9%A1%B9%E7%9B%AE%E9%9B%86%E6%88%90%E6%A8%A1%E5%BC%8F

[tolerance-go]

@tolerance-go 听起来是集成模式的场景，现在已经支持了：https://d.umijs.org/zh-CN/guide/advanced#umi-%E9%A1%B9%E7%9B%AE%E9%9B%86%E6%88%90%E6%A8%A1%E5%BC%8F

太棒了，就是这个，期待 umi4 可以早点用起来

[james70s]

@tolerance-go 听起来是集成模式的场景，现在已经支持了：https://d.umijs.org/zh-CN/guide/advanced#umi-%E9%A1%B9%E7%9B%AE%E9%9B%86%E6%88%90%E6%A8%A1%E5%BC%8F

请问这个如何配置呢？实验了很久还是不行呢

"@umijs/max": "^4.0.9",
"@umijs/openapi": "^1.6.0",
"@umijs/plugin-esbuild": "^1.4.1",
"@umijs/preset-ant-design-pro": "^1.3.3",
"@umijs/preset-dumi": "^1.1.46",

[PeachScript]

@james70s dumi 1 不支持 Umi4；这里不反馈问题，后续使用问题单独提 issue 并提供复现

[agileago]

认领 实现 Vue 技术栈

咋样了，先支持 vue + tsx也行

[DBSDs]

• [ ] ⭐️ContentTabs 支持识别 Tab 上的子组件，渲染该 Tab 的 Action（最右侧）和 Extra（紧跟 Tab）区域

认领

[changlin0501]

请问现在dumi2是否支持Ant Design Landing 首页集