feat: s2-react 移除 antd 的依赖和部分基础组件, 相关分析组件迁移到 s2-react-components 中

[lijinke666]

👀 PR includes

🎨 Enhance

• Code style optimization
• 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

1. 内部排序菜单和操作项依赖的 antd Menu 组件 移除，现在需要通过 render 显式声明 UI 组件，最终效果相同，默认提供菜单配置 (props) , 可以根据项目中实际使用的 antd@v4 或 antd@v5 不同版本，对使用方式进行调整, 方便老旧项目升级。

import { Menu } from 'antd'

const s2Options = {
  tooltip: {
    operation: {
      menu: {
        render: (props) => {
          return <Menu {...props} />;
        },
      }
    }
  }
}

2. 下钻组件移除, 现在需要通过 render 显式声明 UI 组件

+ import { DrillDown } from '@antv/s2-react-components'

const partDrillDown = {
+  render(props) {
+    return <DrillDown {...props} />;
+  },
  drillConfig: {
    dataSet: [],
  },
}

<SheetComponent partDrillDown={partDrillDown} />

3. 提供 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';

📦 2. 构建产物调整

• 使用 tsc 进行打包, 按源码目录生成 bundless ESM 构建产物 (单个大文件 tree shaking 无法生效)

• 抽取公用打包配置

• 解决包文件循环依赖问题

• @antv/s2-shared 移除, 相关文件移动到 s2-core 中, 作为子目录

• 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

closes #2404 #2952

🔍 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.

[vercel]

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

[github-actions]

你好, @lijinke666 CI 执行失败, 请点击 [Details] 按钮查看, 并根据日志修复。

Hello, @lijinke666 CI run failed, please click the [Details] button for detailed log information and fix it.

[github-actions]

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)	🆕

_{compressed-size-action}