Merge branch 'main' of github.com:arco-design/arco-design-mobile into…

… feat-picker-change-hg
arco-design · Feb 29, 2024 · ecd0de2 · ecd0de2
2 parents 8307012 + 1cf9c0e
commit ecd0de2
Show file tree

Hide file tree

Showing 22 changed files with 555 additions and 235 deletions.
diff --git a/husky.config.js b/husky.config.js
@@ -8,6 +8,7 @@ module.exports = {
         'commit-msg': isWindows
             ? ''
             : `[[ -n $HUSKY_BYPASS ]] || commitlint -e $HUSKY_GIT_PARAMS --config ${commitLintConfig}`,
-        'pre-commit': 'node ./scripts/dev/generate-all.js && npm run lint-staged && git add -A',
+        'pre-commit':
+            'node ./scripts/dev/check-lock.js && node ./scripts/dev/generate-all.js && npm run lint-staged && git add -A',
     },
 };
diff --git a/package.json b/package.json
@@ -26,7 +26,8 @@
         "lint-staged": "lint-staged",
         "site:home": "cross-env NODE_ENV=production webpack --progress --config scripts/sites/webpack.prod.home.js",
         "site:mobile": "cross-env NODE_ENV=production webpack --progress --config scripts/sites/webpack.prod.mobile.js",
-        "site:pc": "cross-env NODE_ENV=production webpack --progress --config scripts/sites/webpack.prod.pc.js"
+        "site:pc": "cross-env NODE_ENV=production webpack --progress --config scripts/sites/webpack.prod.pc.js",
+        "dev:demo": "node scripts/dev/dev-demo.js $@"
     },
     "author": "[email protected]",
     "license": "MIT",

diff --git a/packages/arcodesign/CHANGELOG.md b/packages/arcodesign/CHANGELOG.md
@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.30.9](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/[email protected]...@arco-design/[email protected]) (2024-02-27)
+
+
+### Bug Fixes
+
+* export type from `Skeleton` ([#233](https://github.com/arco-design/arco-design-mobile/issues/233)) ([7514ed9](https://github.com/arco-design/arco-design-mobile/commit/7514ed9baceccaf8f46c90b046bfe06594a66a59))
+* warning for repeatedly calling createRoot in react18 of masking related components ([#231](https://github.com/arco-design/arco-design-mobile/issues/231)) ([6879ad7](https://github.com/arco-design/arco-design-mobile/commit/6879ad7f6225128b87bbf82aad34ba5836d4ac18))
+
+
+
+
+
 ## [2.30.8](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/[email protected]...@arco-design/[email protected]) (2024-01-31)
 
 

diff --git a/packages/arcodesign/README.en-US.md b/packages/arcodesign/README.en-US.md
@@ -59,8 +59,8 @@ React & ReactDOM: **<a href="https://reactjs.org/docs/cdn-links.html" target="_b
 React Transition Group: **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">Click here</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/[email protected].8/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/[email protected].8/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/[email protected].9/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/[email protected].9/dist/index.min.js"></script>
 ```
 
 ## Full import
@@ -134,6 +134,74 @@ import { Button as ArcoButton } from '@arco-design/mobile-react';
 import { IconAsk, IconBack } from '@arco-design/mobile-react/esm/icon';
 ```
 
+
+## Partial import（Vite）
+
+It is recommended to use `vite-plugin-importer` to import（**<a href="https://www.npmjs.com/package/vite-plugin-importer" target="_blank">Click here</a>** to know more from this plugin）：
+
+```
+npm install vite-plugin-importer -D
+```
+
+### Import components on demand
+
+**vite.config.ts** ：
+
+```js
+import usePluginImport from 'vite-plugin-importer'
+
+export default defineConfig({
+    plugins: [
+        usePluginImport({
+            libraryName: "@arco-design/mobile-react",
+            libraryDirectory: "esm",
+            style: (path) => `${path}/style`,
+        })
+    ]
+})
+```
+
+### Import icons on demand
+
+**vite.config.ts** ：
+
+```js
+import usePluginImport from 'vite-plugin-importer'
+
+export default defineConfig({
+    plugins: [
+        usePluginImport({
+            libraryName: "@arco-design/mobile-react/esm/icon",
+            libraryDirectory: "",
+            camel2DashComponentName: false,
+        })
+    ]
+})
+```
+
+If both component and Icon need to be imported on demand, you just declare all and do not need any change.
+
+**vite.config.ts** ：
+
+```js
+import usePluginImport from 'vite-plugin-importer'
+
+export default defineConfig({
+    plugins: [
+        usePluginImport({
+            libraryName: "@arco-design/mobile-react",
+            libraryDirectory: "esm",
+            style: (path) => `${path}/style`,
+        }),
+        usePluginImport({
+            libraryName: "@arco-design/mobile-react/esm/icon",
+            libraryDirectory: "",
+            camel2DashComponentName: false,
+        })
+    ]
+})
+```
+
 ## Partial import (manual)
 
 If you don't use babel-plugin-import, you need to import js and css files manually. The following example has the same effect as the import statement above:

diff --git a/packages/arcodesign/README.md b/packages/arcodesign/README.md
@@ -59,8 +59,8 @@ React & ReactDOM： **<a href="https://reactjs.org/docs/cdn-links.html" target="
 React Transition Group： **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">戳这里获取</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/[email protected].8/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/[email protected].8/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/[email protected].9/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/[email protected].9/dist/index.min.js"></script>
 ```
 
 ## 引入全部
@@ -134,6 +134,73 @@ import { Button as ArcoButton } from '@arco-design/mobile-react';
 import { IconAsk, IconBack } from '@arco-design/mobile-react/esm/icon';
 ```
 
+## 部分引入（Vite）
+
+如果是 Vite 构建工具的话，则推荐使用 `vite-plugin-importer` 引入（该插件具体使用 **<a href="https://www.npmjs.com/package/vite-plugin-importer" target="_blank">戳这里</a>** ）：
+
+```
+npm install vite-plugin-importer -D
+```
+
+### 组件按需引入
+
+**vite.config.ts** 中配置：
+
+```js
+import usePluginImport from 'vite-plugin-importer'
+
+export default defineConfig({
+    plugins: [
+        usePluginImport({
+            libraryName: "@arco-design/mobile-react",
+            libraryDirectory: "esm",
+            style: (path) => `${path}/style`,
+        })
+    ]
+})
+```
+
+### Icon 按需引入
+
+**vite.config.ts** 中配置：
+
+```js
+import usePluginImport from 'vite-plugin-importer'
+
+export default defineConfig({
+    plugins: [
+        usePluginImport({
+            libraryName: "@arco-design/mobile-react/esm/icon",
+            libraryDirectory: "",
+            camel2DashComponentName: false,
+        })
+    ]
+})
+```
+
+如果同时存在 组件 和 Icon 的按需引入方式，不需要做改动，可以同时声明
+
+**vite.config.ts** 中配置：
+
+```js
+import usePluginImport from 'vite-plugin-importer'
+
+export default defineConfig({
+    plugins: [
+        usePluginImport({
+            libraryName: "@arco-design/mobile-react",
+            libraryDirectory: "esm",
+            style: (path) => `${path}/style`,
+        }),
+        usePluginImport({
+            libraryName: "@arco-design/mobile-react/esm/icon",
+            libraryDirectory: "",
+            camel2DashComponentName: false,
+        })
+    ]
+})
+```
+
 ## 部分引入（手动）
 
 如果不使用babel-plugin-import，则需要手动引入js和css文件。下方例子效果等同于上方引入语句：

diff --git a/packages/arcodesign/components/avatar/__test__/index.spec.js b/packages/arcodesign/components/avatar/__test__/index.spec.js
@@ -1,11 +1,12 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import demoTest from '../../../tests/demoTest';
 import mountTest from '../../../tests/mountTest';
 import Avatar from '..';
 import { defaultContext } from '../../context-provider';
 
-const demoAvatarSrc = 'https://sf1-cdn-tos.toutiaostatic.com/obj/arco-mobile/_static_/small_image_5.jpg';
+const demoAvatarSrc =
+    'https://sf1-cdn-tos.toutiaostatic.com/obj/arco-mobile/_static_/small_image_5.jpg';
 const prefix = `${defaultContext.prefixCls}-avatar`;
 
 demoTest('avatar');
@@ -15,27 +16,42 @@ mountTest(Avatar, 'Avatar', {
     size: 'large',
 });
 
+// Avatar 组件的单元测试
+// Unit tests for Avatar component
 describe('Avatar', () => {
-
+    // 测试 Avatar 组件图片是否正确渲染
+    // Test if the Avatar component image renders correctly
     it('src renders correctly', () => {
-        const wrapper = mount(
-        <Avatar
-            src={demoAvatarSrc}/>,
-        );
-        expect(wrapper.find('.image-content').length).toBe(1);
+        const { container } = render(<Avatar src={demoAvatarSrc} />);
+
+        // 通过查询选择器找到带有 'image-content' 类的元素，并确保它存在
+        // Find the element with 'image-content' class using query selector and make sure it exists
+        const imageElement = container.querySelectorAll('.image-content');
+        expect(imageElement).toHaveLength(1);
     });
 
+    // 测试 Avatar.Group 是否正确渲染
+    // Test if the Avatar.Group renders correctly
     it('group renders correctly', () => {
-        const wrapper = mount(
+        const { container } = render(
             <Avatar.Group size="small">
-                <Avatar textAvatar="尼采尼采尼采尼采尼采" avatarStyle={{backgroundColor: '#7BC616'}} />
-                <Avatar textAvatar="M" avatarStyle={{backgroundColor: '#14C9C9'}} />
-                <Avatar textAvatar="X" avatarStyle={{backgroundColor: '#168CFF'}} />
-                <Avatar textAvatar="Z" avatarStyle={{backgroundColor: '#FF7D00'}} />
-                <Avatar textAvatar="JD" avatarStyle={{backgroundColor: '#FFC72E'}} />
-                <Avatar textAvatar="JD" size='medium' avatarStyle={{backgroundColor: '#FFC72E'}} />
+                <Avatar textAvatar="0" avatarStyle={{ backgroundColor: '#7BC616' }} />
+                <Avatar textAvatar="尼采尼采" avatarStyle={{ backgroundColor: '#7BC616' }} />
+                <Avatar textAvatar="M" avatarStyle={{ backgroundColor: '#14C9C9' }} />
+                <Avatar textAvatar="X" avatarStyle={{ backgroundColor: '#168CFF' }} />
+                <Avatar textAvatar="Z" avatarStyle={{ backgroundColor: '#FF7D00' }} />
+                <Avatar textAvatar="JD" avatarStyle={{ backgroundColor: '#FFC72E' }} />
+                <Avatar
+                    textAvatar="JD"
+                    size="medium"
+                    avatarStyle={{ backgroundColor: '#FFC72E' }}
+                />
             </Avatar.Group>,
         );
-        expect(wrapper.find(`.${prefix}-wrapper`).length).toBe(6);
+
+        // 通过使用查询选择器查找所有带有 `${prefix}-wrapper` 类的元素，并确保它们的数量正确
+        // Find all elements with `${prefix}-wrapper` class using query selector and verify their count
+        const groupElements = container.querySelectorAll(`.${prefix}-wrapper`);
+        expect(groupElements).toHaveLength(7);
     });
-})
+});
diff --git a/packages/arcodesign/components/badge/__test__/index.spec.js b/packages/arcodesign/components/badge/__test__/index.spec.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import demoTest from '../../../tests/demoTest';
 import mountTest from '../../../tests/mountTest';
 import IconStarFill from '../../icon/IconStarFill';
@@ -14,22 +14,30 @@ mountTest(Badge, 'Badge');
 
 describe('Badge', () => {
     it('Render different types', () => {
-        const wrapper = mount(<Badge absolute dot />);
-        expect(wrapper.find(`.${prefix}.dot.absolute`).length).toBe(1);
-        const wrapper1 = mount(<Badge absolute text="12" />);
-        expect(wrapper1.find('.badge-text').length).toBe(1);
-        expect(wrapper1.text()).toEqual('12');
-        const wrapper2 = mount(<Badge absolute text="100" />);
-        expect(wrapper2.find('.badge-text').length).toBe(1);
-        expect(wrapper2.text()).toEqual('99+');
-        const wrapper3 = mount(<Badge absolute text="新" />);
-        expect(wrapper3.find('.badge-text').length).toBe(1);
-        expect(wrapper3.text()).toEqual('新');
-        const wrapper4 = mount(
+        const { container: container1 } = render(<Badge absolute dot />);
+        expect(container1.querySelectorAll(`.${prefix}.dot.absolute`).length).toBe(1);
+
+        const { container: container2, getByText } = render(<Badge absolute text="12" />);
+        expect(container2.querySelectorAll('.badge-text').length).toBe(1);
+        expect(getByText('12')).toBeTruthy();
+
+        const { container: container3, getByText: getByText99 } = render(
+            <Badge absolute text="100" />,
+        );
+        expect(container3.querySelectorAll('.badge-text').length).toBe(1);
+        expect(getByText99('99+')).toBeTruthy();
+
+        const { container: container4, getByText: getByTextNew } = render(
+            <Badge absolute text="新" />,
+        );
+        expect(container4.querySelectorAll('.badge-text').length).toBe(1);
+        expect(getByTextNew('新')).toBeTruthy();
+
+        const { container: container5 } = render(
             <Badge absolute>
                 <IconStarFill />
             </Badge>,
         );
-        expect(wrapper4.find('svg').length).toBe(1);
+        expect(container5.querySelectorAll('svg').length).toBe(1);
     });
 });