dumi 2.0 TODOs

[PeachScript]

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

详细功能规划参考 #1151

基础工程

• 分支清理、基础工程搭建 a0d3993
• 基础 CI ci: enable github ci & add basic cases #1164

路由系统

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

Markdown 编译

• 聚合式 webpack loader（根据参数返回不同内容）
  • 处理 Markdown 8509da2
  • 处理 demo 22eec1d
• Markdown transformer（基于 unified）
  • loader 持久缓存 @miracles1919 feat: add markdown transformer cache #1221
  • rehypeJsxify jsx 输出 8509da2
  • rehypeDemo 代码块 demo 及外部 demo 处理 22eec1d
  • rehypeStrip 移除无用的节点，例如 \n eafefa9
  • ⭐️⭐️ rehypeIsolation基础样式隔离，参考 dumi v1 重写 @mortalYoung feat(transformer): support generate wrapper node #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 文件的用法） feat: handle link in md #1258 @miracles1919

demo 编译

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

主题系统

• ⭐️ 让 import from 'dumi' 拥有类型，导出 theme-api 的类型定义
• 全局 Context
  • demos 采集 8381c00
  • demos 元数据采集，包含每个 demo 的源代码、依赖、描述等 6d5822b
  • 导航栏数据生成
  • 侧边菜单数据生成
  • toc 数据生成（支持 embed 和 demo 标题）
  • 结合多语言配置实现国际化文案支持
• 主题 API
  • ⭐️⭐️ useNavData 支持约定式二级导航（比如 /docs/a/b1/c 和 /docs/a/b2/c 中的 b1 和 b2 就属于同一个二级导航）
  • ⭐️⭐️⭐️ useSiteSearch 支持把搜索计算逻辑放到 worker 做，避免站点文本匹配计算量太大的时候阻塞渲染
• 内置组件（注意：均无需样式，最后统一加【有可能用 CSS-in-JS】，必须要样式的组件就用 CSS 简单写一下）
  • DumiDemo 8381c00
  • DumiDemoGrid 用于 demo 分栏
  • ⭐️ Table，参考 dumi v1 重写 @wyy0512
  • ⭐️ Badge，参考 dumi v1 重写
  • ⭐️⭐️ Tree，参考 dumi v1 重写
• 主题系统设计 @PeachScript [RFC] dumi 2.0 theme system #1180
• 加载器（项目级 > 包级 > 默认主题） @PeachScript b0e0e54
• 默认主题， @PeachScript
  • layouts
    • DocLayout
      • tdk 渲染（用于 SEO）
      • 中英文排版优化（计划基于 heti）
      • 首页设计 + 实现 @PeachScript
  • builtins
    • Previewer， @PeachScript
      • ⭐️⭐️ 在 CodeSandbox 中打开 @wyy0512 feat: support code open in CodeSandbox #1250
      • ⭐️⭐️ 在 CodePen 中打开
      • ⭐️⭐️ 在 Stackblitz 中打开 @miracles1919 feat: support open in stackblitz #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 阶段文档
  • 配置项
  • 主题
  • 快速上手
• 正式版文档
  • 新的文档目录结构 [RFC] dumi 2.0 官网文档目录结构 #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 首页集