antvis
feat: s2-react 移除 antd 的依赖和部分基础组件, 相关分析组件迁移到 s2-react-components 中
👀 PR includes
🎨 Enhance
- [ ] Code style optimization
- [x] Refactoring
- [ ] Change the UI
- [ ] Improve the performance
- [ ] Type optimization
📝 Description
🐜 1. Antd 依赖移除
BREAKING CHANGE: 移除 header props 参数 (不再内置行列切换, 导出, 高级排序), 移除 antd ConfigProvider 包裹
<SheetComponent
- header={{
- title: "",
- description: "",
- switcher: { open: true },
- export: { open: true },
- advancedSort: { open: true },
- }}
/>
s2-react
- 内部排序菜单和操作项依赖的 antd Menu 组件 移除，现在需要通过
render显式声明 UI 组件，最终效果相同，默认提供菜单配置 (props) , 可以根据项目中实际使用的antd@v4或antd@v5不同版本，对使用方式进行调整, 方便老旧项目升级。
import { Menu } from 'antd'
const s2Options = {
tooltip: {
operation: {
menu: {
render: (props) => {
return <Menu {...props} />;
},
}
}
}
}
- 下钻组件移除, 现在需要通过
render显式声明 UI 组件
+ import { DrillDown } from '@antv/s2-react-components'
const partDrillDown = {
+ render(props) {
+ return <DrillDown {...props} />;
+ },
drillConfig: {
dataSet: [],
},
}
<SheetComponent partDrillDown={partDrillDown} />
- 提供
pagination属性，表格内部封装了 S2 的内部分页更新逻辑，可以配合任意分页组件使用，如 antd 的<Pagination />。
import { usePagination } from 's2-react'
import { Pagination } from 'antd';
function App() {
const pagination = usePagination(s2);
return (
<SheetComponent options={s2Options}>
{({ pagination }) => (
// 结合任意分页器使用：如 antd 的 Pagination 组件
<Pagination
size="small"
showTotal={(total) => `共计 ${total} 条`}
{...pagination}
/>
)}
</SheetComponent>
)
}
s2-react-components
(行列切换, 导出, 高级排序, 下钻) 拆分到 s2-react-components 中, 如果有相关诉求, 自行组合使用, 彼此解耦, s2-react 保持轻量化
- import { AdvancedSort, Export, Switcher, DrillDown } from '@antv/s2-react';
+ import { AdvancedSort, Export, Switcher, DrillDown } from '@antv/s2-react-components';
- [x] 使用 father 进行打包, 按源码目录生成 bundless ESM 构建产物 (单个大文件 tree shaking 无法生效)
- [x] 抽取公用打包配置
- [x] 解决包文件循环依赖问题
- [x] s2-shared 需要跳过 bundless, 直接变成 bundle
📦 2. 构建产物调整
-
ESModule/CommonJS
所有包的 ESModule (esm) 和 CommonJS (lib) 构建产物从 Bundle 调整为 Bundless, 其所依赖的子模块会被直接拷贝输出，不再做编译，以便于更好的支持代码 tree shaking, 减少包体积。
由于 @antv/s2-shared 是未发布的包, 只作用公用模块使用, 所以作为子目录拷贝进 s2-(react/react-componnents/vue) 中进行 Bundle 构建. 以兼容 Bundless 的方式.
-
UMD
所有包的 UMD (dist) 构建产物依然为 Bundle 单文件，文件名和全局变量名有所调整：
| 包名 | 文件名（修改前） | 文件名（修改后） |
|---|---|---|
@antv/s2 |
dist/index.min.js dist/style.min.css |
dist/s2.min.css dist/s2.min.css |
@antv/s2-react |
dist/index.min.js dist/style.min.css |
dist/s2-react.min.css dist/s2-react.min.css |
@antv/s2-vue |
dist/index.min.js dist/style.min.css |
dist/s2-vue.min.css dist/s2-vue.min.css |
| 包名 | 全局变量名（修改前） | 全局变量名（修改后） |
|---|---|---|
@antv/s2 |
S2 |
S2 |
@antv/s2-react |
S2-React |
S2React |
@antv/s2-vue |
S2-Vue |
S2Vue |
-
@antv/s2-shared
内部 s2-shared 包移除, 统一在 @antv/s2 中导出
🖼️ Screenshot
| Before | After |
|---|---|
🔗 Related issue link
close https://github.com/antvis/S2/issues/2404
🔍 Self-Check before the merge
- [ ] Add or update relevant docs.
- [ ] Add or update relevant demos.
- [ ] Add or update test case.
- [ ] Add or update relevant TypeScript definitions.
The latest updates on your projects. Learn more about Vercel for Git ↗︎
| Name | Status | Preview | Comments | Updated (UTC) |
|---|---|---|---|---|
| antvis-s2 | ❌ Failed (Inspect) | Nov 15, 2024 3:50am |
![vercel[bot] avatar](https://avatars.githubusercontent.com/in/8329?v=4 "Published by a pub.dev verified publisher"){kind=small}
你好, @lijinke666 CI 执行失败, 请点击 [Details] 按钮查看, 并根据日志修复。
Hello, @lijinke666 CI run failed, please click the [Details] button for detailed log information and fix it.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Size Change: +68.5 kB (+17.69%) ⚠️
Total Size: 456 kB
| Filename | Size | Change | |
|---|---|---|---|
./packages/s2-core/dist/index.min.js |
0 B | -239 kB (removed) | 🏆 |
./packages/s2-core/dist/style.min.css |
0 B | -388 B (removed) | 🏆 |
./packages/s2-react-components/dist/index.min.js |
0 B | -48.1 kB (removed) | 🏆 |
./packages/s2-react-components/dist/style.min.css |
0 B | -832 B (removed) | 🏆 |
./packages/s2-react/dist/index.min.js |
0 B | -71 kB (removed) | 🏆 |
./packages/s2-react/dist/style.min.css |
0 B | -3.77 kB (removed) | 🏆 |
./packages/s2-vue/dist/index.min.js |
0 B | -23 kB (removed) | 🏆 |
./packages/s2-vue/dist/style.min.css |
0 B | -1.85 kB (removed) | 🏆 |
./packages/s2-core/dist/s2.min.css |
388 B | +388 B (new file) | 🆕 |
./packages/s2-core/dist/s2.min.js |
254 kB | +254 kB (new file) | 🆕 |
./packages/s2-react-components/dist/s2-react-components.min.css |
2.55 kB | +2.55 kB (new file) | 🆕 |
./packages/s2-react-components/dist/s2-react-components.min.js |
122 kB | +122 kB (new file) | 🆕 |
./packages/s2-react/dist/s2-react.min.css |
1.55 kB | +1.55 kB (new file) | 🆕 |
./packages/s2-react/dist/s2-react.min.js |
38.3 kB | +38.3 kB (new file) | 🆕 |
./packages/s2-vue/dist/s2-vue.min.css |
1.85 kB | +1.85 kB (new file) | 🆕 |
./packages/s2-vue/dist/s2-vue.min.js |
35 kB | +35 kB (new file) | 🆕 |
