arco-design / arco-plugins Goto Github PK

• 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 了，内部不支持一波吗 :)

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

• 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]

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:

• 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了。

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。
不知道有没有别个小伙伴有遇到这个问题。

• 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配置这个插件复现问题, 希望解决

• 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

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

基本信息

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

额外补充

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

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

safari 显示异常

• 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

• 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

• 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

• 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 文件中有这个问题

• 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. 模板方式时构建同时导入组件代码
   

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

• 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，查阅了好多资料