[Feature]: rspackExperiments.import redesign

[ityuany]

What problem does this feature solve?

👍 Good

let transformConfig1 = [
  {
    filename: 'kebabCase',
    source: 'antd',
    output: ['antd/es/{{ filename }}.js', 'antd/css/{{ filename }}.css'],
    exclude: ['Provider', 'ConfigProvider'],
  },
  {
    filename: 'kebabCase',
    source: 'antd',
    output: ['antd/es/{{ filename }}.png', 'antd/es/{{ filename }}.svg'],
    include: ['Button'],
  },
];

example:

import { Modal } from "antd"

⬇️

import { Modal } from "antd/es/modal.js"
import { Modal } from "antd/css/modal.css"

import { Button } from "antd"

⬇️

import { Button } from "antd/es/button.js"
import { Button } from "antd/css/button.css"
import { Button } from "antd/css/button.png"
import { Button } from "antd/css/button.svg"

Bad 👎

let transformConfig2 = {
  libraryName: 'antd',
  libraryDirectory: 'es',
  cssDirectory: 'css',
  camelToDashComponentName: true,
  style: 'css',
};

What does the proposed API of configuration look like?

 {
    filename: 'kebabCase' ,  // "kebabCase" | "camelCase" | "snakeCase" | "pascalCase"
    source: 'antd',
    output: ['antd/es/{{ filename }}.js', 'antd/css/{{ filename }}.css'],
    exclude: ['Provider', 'ConfigProvider'],
    include: []   // supported '*'
  }

[chenjiahan]

Thanks for the suggestion. The current rspackExperiments.import option is ported from babel-plugin-import. We'll take a closer look at the new API design you proposed.

It’s definitely more user-friendly, though it may come with some migration overhead. Support for it may be considered in Rspack 2.0.