Allow using a function in transform for the SWC modularized imports

[makezi]

Describe the feature you'd like to request

From #34969, it would be great if it were possible to allow the transformer to allow functions (similar to that of function transformer from babel-plugin-transform-imports).

Right now, I'm trying to import a react component library that uses hyphen-case as its naming convention and currently there is no way of doing so - there's only helpers for uppercase, lowercase and camel case. An example import:

// works
import { TextLink } from '@our-design-system/dist/components/text-link'; 

// Will fail as {{member}} will result in '@our-design system/dist/components/TextLink'
import { TextLink } from '@our-design-system/components'; 

Describe the solution you'd like

Either one of two solutions:

1. Provide a hypenCase helper to the handlebars transform function similar to that of the other provided helpersm i.e. @our-design-system/dist/components/{{ hypenCase member}}. Although this doesn't give us enough power of the transformations compared to option 2.
2. Allow transform to accept a function similar to that from babel-plugin-transform-imports)

modularizeImports: {
  '@our-design-system/components': {
    transform: (importName, matches) => `@our-design-system/dist/components/${hyphenCase(importName)}`
  }
}

Describe alternatives you've considered

The only other solution is to just defer back to babel.config.js and use babel plugins.

[to-long]

How is it current status ? mate @makezi

[deadrime]

It's can help with import antd, right?

[Rayzhangzhang]

Any responses?
@ijjk

[sharvilak11]

Hi @leerob , how convenient would this be to be implemented ? Does this need any changes under the hood in swc-core ?

[DmACKGL]

Any update on update on this? any workaround?

[blvdmitry]

Was looking for this thread since I'm trying to solve a use case with components tree shaking for RSC which works well with modularizeImports. However in my case, import paths are not the same for everything. For example, you can import components and hooks that reside in different folders. So having more control over resolving would be very helpful for handling this.

[razvanMiu]

I've managed to make use of babel-plugin-transform-imports and still use swc, using babel-loader. The compile time may be slower. I don't know if this is a good approach, but it seems to work. This is my next config:

function getPath(str) {
  if (str) {
    return `/${str}`
  }
  return ''
}

const nextConfig = {
  transpilePackages: ['@mui/system', '@mui/material'],
  webpack: (config, { dev, isServer, webpack }) => {
    const globals = {
      __CLIENT__: !isServer,
      __DEVELOPMENT__: !!dev,
      __SERVER__: isServer,
    }

    config.plugins.unshift(new webpack.DefinePlugin(globals))

    if (!dev) {
      config.module.rules.unshift({
        exclude: /node_modules/,
        test: /\.(?:js|jsx|ts|tsx)$/,
        use: {
          loader: 'babel-loader',
          options: {
            plugins: [
              [
                'transform-imports',
                {
                  '@mui/material/?(((\\w*)?/?)*)': {
                    transform: (importName, matches) => {
                      // Add your custom logic here
                      return `@mui/material${getPath(matches[1])}/${importName}`
                    },
                  },
                },
              ],
            ],
            presets: ['next/babel'],
          },
        },
      })
    }

    return config
  },
}

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
  openAnalyzer: true,
})

module.exports = withBundleAnalyzer(nextConfig)

[der-daniel]

To all people coming across this topic.

There is optimizePackageImports now.