feat: adds support for non-default exported import remapping

tablecheck · Sep 17, 2024 · c3dce47 · c3dce47
1 parent 53a105f
commit c3dce47
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 4 deletions.
diff --git 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
@@ -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};`;
   }