diff --git a/packages/vite-import-massager-plugin/src/index.spec.ts b/packages/vite-import-massager-plugin/src/index.spec.ts index 53c8692..417332d 100644 --- a/packages/vite-import-massager-plugin/src/index.spec.ts +++ b/packages/vite-import-massager-plugin/src/index.spec.ts @@ -176,6 +176,64 @@ describe('other tests', () => { ); }); + it('should support non-default exports', () => { + plugin = new ImportMassagingPlugin([ + { + packageName: '@tablecheck/tablekit-react', + importTransform: (importName) => `/es/${importName}.js`, + exportTransform: (exportName) => `{ ${exportName} }`, + }, + ]); + const { code } = plugin.transform( + `import { Text } from "@tablecheck/tablekit-react";`, + 'src/index.js', + ); + expect(code).toMatchInlineSnapshot( + `"import { Text } from "@tablecheck/tablekit-react/es/Text.js";"`, + ); + }); + + it('should support non-default alias exports', () => { + plugin = new ImportMassagingPlugin([ + { + packageName: '@tablecheck/tablekit-react', + importTransform: (importName) => `/es/${importName}.js`, + exportTransform: (exportName, alias) => + alias ? `{ ${exportName} as ${alias} }` : `{ ${exportName} }`, + }, + ]); + const { code } = plugin.transform( + `import { Text as T2 } from "@tablecheck/tablekit-react";`, + 'src/index.js', + ); + expect(code).toMatchInlineSnapshot( + `"import { Text as T2 } from "@tablecheck/tablekit-react/es/Text.js";"`, + ); + }); + + it('should handle real-world non-default exports', () => { + plugin = new ImportMassagingPlugin([ + { + packageName: '@tablecheck/tablekit-react', + importTransform: (importName) => `/es/${importName}.js`, + exportTransform: (exportName, alias) => + alias ? `{ ${exportName} as ${alias} }` : `{ ${exportName} }`, + }, + ]); + const { code } = plugin.transform( + `import { + Button, + IconButton, + TabContent, + Tabs as TablekitTabs, +} from "@tablecheck/tablekit-react";`, + 'src/index.js', + ); + expect(code).toMatchInlineSnapshot( + `"import { Button } from "@tablecheck/tablekit-react/es/Button.js";import { IconButton } from "@tablecheck/tablekit-react/es/IconButton.js";import { TabContent } from "@tablecheck/tablekit-react/es/TabContent.js";import { Tabs as TablekitTabs } from "@tablecheck/tablekit-react/es/Tabs.js";"`, + ); + }); + it('should not transform node_modules', () => { plugin = new ImportMassagingPlugin([ { diff --git a/packages/vite-import-massager-plugin/src/index.ts b/packages/vite-import-massager-plugin/src/index.ts index b693996..660eef4 100644 --- a/packages/vite-import-massager-plugin/src/index.ts +++ b/packages/vite-import-massager-plugin/src/index.ts @@ -16,6 +16,15 @@ interface TransformConfig { * Note that the new import path expects to point to a file with a default export. */ importTransform?: (importName: string) => string; + /** + * This function transforms how the import is written, by default we assume a default export. + * For example; + * `import { Text } from 'icons'` would be transformed to `import Text from 'icons/Text'` by default. + * With the value `exportTransform: (exportName) => `{ ${exportName} }` it would be transformed to `import { Text } from 'icons/Text'`. + * @param importName + * @returns + */ + exportTransform?: (importName: string, alias?: string) => string; } // eslint-disable-next-line import/no-default-export @@ -58,7 +67,7 @@ export default class ImportMassagingPlugin implements Plugin { config, importName, quote, - varName: alias || importName, + alias, }); } return result; @@ -141,14 +150,20 @@ export default class ImportMassagingPlugin implements Plugin { importName, varName, quote, + alias, }: { config: TransformConfig; importName: string; quote: string; - varName: string; + varName?: string; + alias?: string; }) { - const transform = config.importTransform ?? ((i) => `/${i}`); - return `import ${varName} from ${quote}${config.packageName}${transform( + const importTransform = config.importTransform ?? ((i) => `/${i}`); + const exportTransform = config.exportTransform ?? ((i, a) => a || i); + return `import ${exportTransform( + varName || importName, + alias, + )} from ${quote}${config.packageName}${importTransform( importName, )}${quote};`; }