dumi 2.0 TODOs

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

详细功能规划参考 #1151

基础工程

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

路由系统

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

Markdown 编译

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

demo 编译

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

主题系统

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

自动 API

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

文档 & 脚手架

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