arco-design / arco-plugins

Webpack / Vite plugins for Arco Design

arco-design plugin library

A collection of plugins serving the Arco ecosystem.

Background

The purpose of the plugin is to solve the problem of using the Arco component library and connect ecological products from the architectural level to minimize the use cost.

Features

The main functions are as follows:

1. Load on demand: Components, icons and styles are loaded on demand in one step.
2. Theme import: The product of the style configuration platform, it only needs to be imported on the plugin to take effect.
3. Icon Replacement: Specify the package name of the icon library, and the plugin will read the icons in the package and replace the icons with the same name used in the component library.

Plugin list

The functions of different architectures are different due to different progress. Go to the plugin details page to find more useful functions:

1. unplugin for React
2. webpack plugin for React
3. vite plugin for React
4. vite plugin for Vue

Contributing

Developers interested in contributing should read the Code of Conduct and the Contributing Guide.

Thank you to all the people who already contributed to ArcoDesign!

License

Ths project is MIT licensed.

arco-plugins's Issues

Style auto import dosen't work

Create an app with CRA:

npx create-react-app demo
cd demo
yarn eject

Install arco design and the plugin:

yarn add @arco-design/web-react
yarn add -D @arco-design/webpack-plugin

Modify config/webpack.config.js to add the plugin:

...
const ArcoWebpackPlugin = require('@arco-design/webpack-plugin');
...
module.exports = function (webpackEnv) {
  ...
  return {
    ...
    plugins: [
      ...
      new ArcoWebpackPlugin(),
    ].filter(Boolean),
    ...
  };
};

Change src/App.js content to:

import { Button } from '@arco-design/web-react';

function App() {
  return (
    <Button>Button</Button>
  );
}

export default App;

Run with yarn start, it seems that style auto import dosen't work:

使用@arco-plugins/[email protected] 引入主题包 在vite^3.0.7不能运行在windows 浏览器（项目vite vue3 ts）

• I'm sure this does not appear in the issue list of the repository

基本信息

• 依赖包名 及 版本: @arco-design/[email protected]
• 框架版本: vue ^3.2.37
• 浏览器版本: chrome 107.0.5304.63

额外补充

报错：
下午5:43:45 [vite] Internal server error: path.replaceAll is not a function
Plugin: @arco-plugins/vite-vue
File: C:/fengzq/vue/practice/vite/vite-project/src/main.ts
at parse2PosixPath (C:\fengzq\vue\practice\vite\vite-project\node_modules@arco-plugins\vite-vue\lib\arco-design-plugin\utils.js:42:74)
at pathMatch (C:\fengzq\vue\practice\vite\vite-project\node_modules@arco-plugins\vite-vue\lib\arco-design-plugin\utils.js:48:51)
at transformCssFile (C:\fengzq\vue\practice\vite\vite-project\node_modules@arco-plugins\vite-vue\lib\arco-design-plugin\transform.js:34:47)
at TransformContext.transform (C:\fengzq\vue\practice\vite\vite-project\node_modules@arco-plugins\vite-vue\lib\arco-design-plugin\index.js:46:58)
at Object.transform (file:///C:/fengzq/vue/practice/vite/vite-project/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:41111:44)
at runMicrotasks ()
at processTicksAndRejections (internal/process/task_queues.js:95:5)
at async loadAndTransform (file:///C:/fengzq/vue/practice/vite/vite-project/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:37373:29)

复现步骤

vite.config.ts中配置
import { vitePluginForArco } from '@arco-plugins/vite-vue'
plugins: [
vue(),
AutoImport({
resolvers: [ArcoResolver()],
}),
Components({
resolvers: [
ArcoResolver({
sideEffect: true
})
]
}),
vitePluginForArco({ theme: '@arco-themes/vue-byway' })
]
出现[vite] Internal server error: path.replaceAll is not a function

使用@arco-plugins/vite-vue 按需引用，之前开发的组件名为 list 、switch、upload等这种，就会变成arco 内部的组件，不再是自己开发的组件了

• I'm sure this does not appear in the issue list of the repository

Basic Info

• Package Name And Version: @arco-design/[email protected]
• Framework version: vue
• Browser: chrome109.0.0.0
• Reproduction Link: https://github.com/Uranuscsz/arco_demo.git

Steps to reproduce

App.vue 文件中引用了一个自定义的Switch 组件，该组件包含了三个不同的switch，在在使用按需引用之前是可以正常显示的，在使用按需引用插件之后，自定义的Switch不在是自己的封装的，变成acro框架默认的switch了。

希望出一个 Next.js 按需加载的插件

• I'm sure this does not appear in the issue list of the repository

Basic Info

What are the similar cases of this feature

参考下这个：https://www.npmjs.com/package/next-plugin-antd-less，antd 的一个第三方插件，不过没有按需加载的实现，因为配置babel就行，但是arco，按照需求配置babel无效。

What problem does this feature solve?

我使用 Next.js 12 无法成功实现 按需加载，不只是我配置的问题还是什么？始终显示：Cannot use import statement outside a module，查阅了好多资料

@arco-plugins/vite-vue 插件导致控制台打印的行数与代码实际行数不一致

• I'm sure this does not appear in the issue list of the repository

Basic Info

• Package Name And Version: @arco-plugins/[email protected]
• Framework version: vue3.2.47
• Browser: chrome111.0.5563.65
• Reproduction Link: https://stackblitz.com/edit/vitejs-vite-ixdnin?file=src/App.vue

What is expected?

期望控制台打印的行数与实际代码的行数一致，希望能够解决这个问题，谢谢

Steps to reproduce

复现地址：https://stackblitz.com/edit/vitejs-vite-ixdnin?file=src/App.vue
按F12，打开控制台会看到 打印的”测试1“和”测试2“的行数一样，但是代码中“测试1”“测试2”的实际的行数是3和4。

去掉 @arco-plugins/vite-vue 插件后，控制台打印的行数与实际代码的行数一致。

Extra info

只有在 .vue 文件中有这个问题

需要移除 daterange.css 中的权重类名 [type=button], [type=reset], [type=submit], button -webkit-appearance

safari 显示异常

希望支持Vite 4.0版本使用

• I'm sure this does not appear in the issue list of the repository

Basic Info

What are the similar cases of this feature

暂无

What problem does this feature solve?

vite4.0.0 在vite.config.ts中配置@arco-plugins/vite-react配置时，显示TypeError: vitePluginForArco is not a function，希望可以支持vite4.0.0

The latest version is 1.4.1, but doc said need at least version 1.5.0

• I'm sure this does not appear in the issue list of the repository

Basic Info

• Package Name And Version: @arco-design/[email protected]
• Framework version: React
• Browser: chrome92.0.4515.159

What is expected?

works fine when I use the on-demand loading of styles

Steps to reproduce

It can't work at all when i use 1.4.1.

希望出一个隔壁 infra 组 rspack 的按需加载插件

• I'm sure this does not appear in the issue list of the repository

Basic Info

What are the similar cases of this feature

none

What problem does this feature solve?

modernjs 都推 v2 了，都加了 rspack 了，内部不支持一波吗 :)

使用按需打包，自带的图标不显示

• I'm sure this does not appear in the issue list of the repository

Basic Info

• Package Name And Version: @arco-design/[email protected]
• Framework version: Vue
• Browser: chrome111.0.0.0
• Reproduction Link: https://github.com/Uranuscsz/arco_demo.git

@arco-design/webpack-plugin 不支持 Next.js 12

• I'm sure this does not appear in the issue list of the repository

Basic Info

What are the similar cases of this feature

https://nextjs.org/blog/next-12

What problem does this feature solve?

@arco-design/[email protected]

Did not bundle less in dependencies, causing error

• I'm sure this does not appear in the issue list of the repository

Basic Info

• Package Name And Version:

  "dependencies": {
    "@arco-design/web-react": "^2.27.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@arco-plugins/vite-react": "^1.0.2",
    "@arco-themes/react-choral-music": "^0.0.2",
    "@types/react": "^17.0.33",
    "@types/react-dom": "^17.0.10",
    "@vitejs/plugin-react": "^1.0.7",
    "typescript": "^4.5.4",
    "vite": "^2.7.2"
  }

• Reproduction Link: https://stackblitz.com/edit/vitejs-vite-yoj5b6?file=src%2FApp.tsx&terminal=dev

What is expected?

No error.

What happened

Steps to reproduce

Use the reproduction link, or

1. Init a new project with Vite
2. add @arco-design/web-react and
3. use a theme and a component from arco
4. start project

ts-loader与arco-plugins/webpack-react冲突, 导致ts错误报错

• I'm sure this does not appear in the issue list of the repository

Basic Info

• Package Name And Version: @arco-design/[email protected]
• Browser: chrome96.0.4664.110
• Reproduction Link: https://arco.design/react/docs/start

What is expected?

无法使用codepen配置这个插件复现问题, 希望解决

iconBox no packges?

• I'm sure this does not appear in the issue list of the repository

预期解决问题

@arco-plugins/webpack-react 和 @arco-plugins/vite-react 的文档都提到了 iconBox 这个属性，并使用 @arco-design/iconbox-react-dcd-icon 作为例子。但是 @arco-design 在 npm 上并没有任何 iconbox的包。在 iconBox 官网 也没看到有关的包，只有 raw svg。请问这些包是还没发出来吗？

@arco-plugins/vite-react is invalid

• I'm sure this does not appear in the issue list of the repository

Basic Info

• Package Name And Version: @arco-design/[email protected]
• Framework version: "@arco-plugins/vite-react": "^1.3.3",
• Browser: chrome110.0.0.0

What is expected?

this is not increment dist/assets/ArcoDateRange.5d14a6ee.css 109.62 KiB / gzip: 12.99 KiB

Steps to reproduce

// ArcoDateComponent.tsx 
import { DatePicker, RangePickerProps } from '@arco-design/web-react'



// https://vitejs.dev/config/
export default defineConfig(() => {
  return {
    plugins: [
      react({ fastRefresh: false }),
      vitePluginForArco({
        style: 'css',
      }),
    ],

    resolve: {

    },
    build: {
      // sourcemap: true,
      rollupOptions: {
        plugins: [
          process.env.Analyze === '1'
            ? visualizer({
                gzipSize: true,
              })
            : null,
        ].filter(Boolean),
      },
    },
 
  }
})

开发环境下是导入所有样式，构建环境才是按需导入

• I'm sure this does not appear in the issue list of the repository

基本信息

• 依赖包名 及 版本: @arco-plugins/vite-vue
• 框架版本: Vue
• 浏览器版本: chrome103.0.5060.114

额外补充

开发环境下并非按需导入样式而是导入全部，只有构建环境下才会按需导入。
开始以为是个人配置问题，折腾无果后翻阅源码发现似乎是故意为之，但是文档并未说明这一点。
请问为什么不在开发环境下也启用按需引入呢？

arco-plugins/packages/plugin-vite-vue/src/arco-design-plugin/index.ts

Line 46 in 4819555

styleOptimization = command === 'build';

完善 plugin-vite-vue 按需加载功能

• I'm sure this does not appear in the issue list of the repository

@jinghm318 @flsion 请审阅以下问题，如果同意修改，这边可以提交两个仓库的 PR 支持

现有问题

1. 无法独立支持模板方式的按需加载
   仅支持样式的按需加载，组件代码加载需要依赖 unplugin-vue-components
   

2. 部分组件不支持按需加载
   不以组件目录名为前缀命名的组件，按需加载失效，如：<a-range-picker />、<a-doption>
   PS：虽然子组件其实只需要父组件成功加载样式就能正常显示，但是这样不是很严谨。

3. 非组件也会加载样式导致构建出错
   
   

相关仓库：https://github.com/tazyong/test-vite3

预期解决问题

独立支持 import 和 template 两种方式按需加载

解决方案

1. 修改组件库 components.ts 文件，引用路径具体到组件目录
   

2. 修改构建插件库匹配组件逻辑，由以上文件获取组件路径

3. 模板方式时构建同时导入组件代码
   

docker build 导致读磁盘打满

Dockerfile

FROM node AS builder

WORKDIR /opt/web
COPY package.json package-lock.json ./
RUN npm config set registry https://registry.npm.taobao.org
RUN npm install

ENV PATH="./node_modules/.bin:$PATH"

COPY . ./
ARG ENV
ENV ENV=$ENV
RUN npm run build

FROM caddy as admin-web
WORKDIR /var/www/html
COPY --from=builder /opt/web/Caddyfile /etc/caddy/Caddyfile
COPY --from=builder /opt/web/dist ./dist
ENV TZ=Asia/Shanghai
EXPOSE 80

使用的vite的模板，会在npm install的时候卡死。观察监控看到读磁盘被打满，180MB/s 的读 IO。
不知道有没有别个小伙伴有遇到这个问题。

希望可以支持vite脚手架

希望可以支持vite脚手架的使用，目前使用vite脚手架做开发也不少