Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

dumi 2.0 TODOs #1157

Open
80 of 94 tasks
PeachScript opened this issue Aug 2, 2022 · 20 comments
Open
80 of 94 tasks

dumi 2.0 TODOs #1157

PeachScript opened this issue Aug 2, 2022 · 20 comments
Assignees
Labels
help wanted Extra attention is needed

Comments

@PeachScript
Copy link
Member

PeachScript commented Aug 2, 2022

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

详细功能规划参考 #1151

dumi_2 0_v1

基础工程

路由系统

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

Markdown 编译

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 简单写一下
  • 主题系统设计 @PeachScript [RFC] dumi 2.0 theme system #1180
  • 加载器(项目级 > 包级 > 默认主题) @PeachScript b0e0e54
  • 默认主题, @PeachScript
  • 支持实体路由的 Tab 注册

自动 API

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

文档 & 脚手架

  • 站点脚手架
  • 组件研发脚手架(RC 阶段先手动集成 father 4)
  • 主题研发脚手架
  • RC 阶段文档
    • 配置项
    • 主题
    • 快速上手
  • 正式版文档
@PeachScript PeachScript added the help wanted Extra attention is needed label Aug 2, 2022
@PeachScript PeachScript self-assigned this Aug 2, 2022
@umijs umijs deleted a comment from github-actions bot Aug 2, 2022
@PeachScript PeachScript pinned this issue Aug 2, 2022
@timeTravelCYN
Copy link

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

@PeachScript
Copy link
Member Author

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

@xierenyuan
Copy link
Member

认领 实现 Vue 技术栈

@PeachScript
Copy link
Member Author

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

@xierenyuan
Copy link
Member

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

@mortalYoung
Copy link
Collaborator

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

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

@PeachScript
Copy link
Member Author

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

@zzcan
Copy link

zzcan commented Aug 17, 2022

⭐️⭐️ rehypeEnhancedTag 内置组件替换渲染(例如 Table、SourceCode),参考 dumi v1 重写

⭐️ SourceCode,参考 dumi v1 重写(不需要 copy,只做纯渲染)

认领一下这两个

@mortalYoung
Copy link
Collaborator

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

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

@qiaogaolong
Copy link

预计多久出一个rc版本呀

@tolerance-go
Copy link

2.0 可以同时 umi dev + dumi dev 吗

@PeachScript
Copy link
Member Author

2.0 可以同时 umi dev + dumi dev 吗

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

@tolerance-go
Copy link

2.0 可以同时 umi dev + dumi dev 吗

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

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

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

@PeachScript
Copy link
Member Author

@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
Copy link

tolerance-go commented Sep 5, 2022

@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
Copy link

james70s commented Sep 7, 2022

@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
Copy link
Member Author

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

@agileago
Copy link

agileago commented Nov 6, 2022

认领 实现 Vue 技术栈

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

@DBSDs
Copy link
Contributor

DBSDs commented Nov 30, 2022

  • ⭐️ContentTabs 支持识别 Tab 上的子组件,渲染该 Tab 的 Action(最右侧)和 Extra(紧跟 Tab)区域

认领

@changlin0501
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests