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';

• 使用 father 进行打包, 按源码目录生成 bundless ESM 构建产物 (单个大文件 tree shaking 无法生效)
• 抽取公用打包配置
• 解决包文件循环依赖问题
• 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 包移除, 移动到 s2-core 下作为子目录

  "exports": {
    ".": {
      "import": "./esm/index.js",
      "require": "./lib/index.js"
    },
    "./shared": {
      "import": "./esm/shared/index.js",
      "require": "./lib/shared/index.js"
    },
    "./*": "./*"
  },

- import { } from '@antv/s2-shared'
+ import { } from '@antv/s2/shared'

🖼️ Screenshot

Before	After

🔗 Related issue link

close #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.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
antvis-s2	❌ Failed (Inspect)			Oct 8, 2024 4:04am

[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.3 kB (+18.07%) ⚠️

Total Size: 447 kB

Filename	Size	Change
./packages/s2-core/dist/index.min.js	0 B	-229 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	-70.9 kB (removed)	🏆
./packages/s2-react/dist/style.min.css	0 B	-3.88 kB (removed)	🏆
./packages/s2-vue/dist/index.min.js	0 B	-22.9 kB (removed)	🏆
./packages/s2-vue/dist/style.min.css	0 B	-1.97 kB (removed)	🏆
./packages/s2-core/dist/s2.min.css	388 B	+388 B (new file)	🆕
./packages/s2-core/dist/s2.min.js	245 kB	+245 kB (new file)	🆕
./packages/s2-react-components/dist/s2-react-components.min.css	2.57 kB	+2.57 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.2 kB	+38.2 kB (new file)	🆕
./packages/s2-vue/dist/s2-vue.min.css	1.97 kB	+1.97 kB (new file)	🆕
./packages/s2-vue/dist/s2-vue.min.js	34.9 kB	+34.9 kB (new file)	🆕

_{compressed-size-action}