@mui/internal-babel-plugin-resolve-imports 2.0.0 → 2.0.1

package/__fixtures__/basic-js-imports/input.js

@@ -0,0 +1,19 @@
+// Named import
+import { helper } from './src/utils';
+
+// Default import
+import Button from './src/components/Button';
+
+// Namespace import
+import * as Utils from './src/utils';
+
+// Export from
+export { helper } from './src/utils';
+
+// Export all
+export * from './src/components/Button';
+
+// Dynamic import
+const loadUtils = () => import('./src/utils');
+
+console.log(helper, Button, Utils, loadUtils);

package/__fixtures__/basic-js-imports/output.js

@@ -0,0 +1,19 @@
+// Named import
+import { helper } from './src/utils.js';
+
+// Default import
+import Button from './src/components/Button.js';
+
+// Namespace import
+import * as Utils from './src/utils.js';
+
+// Export from
+export { helper } from './src/utils.js';
+
+// Export all
+export * from './src/components/Button.js';
+
+// Dynamic import
+const loadUtils = () => import('./src/utils.js');
+
+console.log(helper, Button, Utils, loadUtils);

package/__fixtures__/basic-js-imports/src/components/Button.js

@@ -0,0 +1,3 @@
+export default function Button() {
+  return 'Button';
+}

package/__fixtures__/basic-js-imports/src/utils.js

@@ -0,0 +1,3 @@
+export function helper() {
+  return 'helper';
+}

package/__fixtures__/declaration-files/input.d.ts

@@ -0,0 +1,17 @@
+// Importing from declaration files
+import { User, UserRole } from './types';
+import { Button, ButtonProps } from './types/components';
+
+// Type imports
+import type { User as UserType } from './types/models';
+import type { ButtonProps as ButtonPropsType } from './types/components';
+
+// Re-exporting from declaration files
+export { User, UserRole } from './types';
+export * from './types/components';
+
+// Type exports
+export type { UserType } from './types/models';
+export type { ButtonPropsType } from './types/components';
+
+export declare const createUser: () => User;

package/__fixtures__/declaration-files/output.d.ts

@@ -0,0 +1,17 @@
+// Importing from declaration files
+import { User, UserRole } from './types/index.js';
+import { Button, ButtonProps } from './types/components.js';
+
+// Type imports
+import type { User as UserType } from './types/models.js';
+import type { ButtonProps as ButtonPropsType } from './types/components.js';
+
+// Re-exporting from declaration files
+export { User, UserRole } from './types/index.js';
+export * from './types/components.js';
+
+// Type exports
+export type { UserType } from './types/models.js';
+export type { ButtonPropsType } from './types/components.js';
+
+export declare const createUser: () => User;

package/__fixtures__/declaration-files/types/components.d.ts

@@ -0,0 +1,9 @@
+import { User } from './models';
+
+export interface ButtonProps {
+  onClick?: () => void;
+  label: string;
+  user?: User;
+}
+
+export declare function Button(props: ButtonProps): JSX.Element;

package/__fixtures__/declaration-files/types/components.js

@@ -0,0 +1,8 @@
+// Implementation of components
+import { createUser } from './models';
+
+function Button({ label, onClick, user }) {
+  return { type: 'button', label, onClick, user };
+}
+
+export { Button };

package/__fixtures__/declaration-files/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './models';
+export * from './components';

package/__fixtures__/declaration-files/types/index.js

@@ -0,0 +1,3 @@
+// Re-export from index
+export * from './models';
+export * from './components';

package/__fixtures__/declaration-files/types/models.d.ts

@@ -0,0 +1,6 @@
+export interface User {
+  id: number;
+  name: string;
+}
+
+export type UserRole = 'admin' | 'user' | 'guest';

package/__fixtures__/declaration-files/types/models.js

@@ -0,0 +1,7 @@
+// Implementation of models
+const createUser = (id, name) => ({
+  id,
+  name,
+});
+
+export { createUser };

package/__fixtures__/different-extension/input.js

@@ -0,0 +1,10 @@
+// Setting outExtension to .mjs in test options
+import Button from './src/components/Button';
+import { helper } from './src/utils';
+
+export { helper } from './src/utils';
+export * from './src/components/Button';
+
+const loadUtils = () => import('./src/utils');
+
+console.log(Button, helper, loadUtils);

package/__fixtures__/different-extension/output.js

@@ -0,0 +1,10 @@
+// Setting outExtension to .mjs in test options
+import Button from './src/components/Button.mjs';
+import { helper } from './src/utils.mjs';
+
+export { helper } from './src/utils.mjs';
+export * from './src/components/Button.mjs';
+
+const loadUtils = () => import('./src/utils.mjs');
+
+console.log(Button, helper, loadUtils);

package/__fixtures__/different-extension/src/components/Button.js

@@ -0,0 +1,3 @@
+export default function Button() {
+  return 'Button';
+}

package/__fixtures__/different-extension/src/utils.js

@@ -0,0 +1,3 @@
+export function helper() {
+  return 'helper';
+}

package/__fixtures__/index-resolution/input.js

@@ -0,0 +1,16 @@
+// Import from directory (should resolve to index.js)
+import Button from './src/components/Button';
+
+// Import from directory with index.js
+import { Button as ButtonAlias, Checkbox } from './src/components';
+
+// Export from directory
+export { Button } from './src/components/Button';
+
+// Export all from directory
+export * from './src/components';
+
+// Dynamic import of directory
+const loadComponents = () => import('./src/components');
+
+console.log(Button, ButtonAlias, Checkbox, loadComponents);

package/__fixtures__/index-resolution/output.js

@@ -0,0 +1,16 @@
+// Import from directory (should resolve to index.js)
+import Button from './src/components/Button/index.js';
+
+// Import from directory with index.js
+import { Button as ButtonAlias, Checkbox } from './src/components/index.js';
+
+// Export from directory
+export { Button } from './src/components/Button/index.js';
+
+// Export all from directory
+export * from './src/components/index.js';
+
+// Dynamic import of directory
+const loadComponents = () => import('./src/components/index.js');
+
+console.log(Button, ButtonAlias, Checkbox, loadComponents);

package/__fixtures__/index-resolution/src/components/Button/index.js

@@ -0,0 +1,3 @@
+export default function Button() {
+  return 'Button';
+}

package/__fixtures__/index-resolution/src/components/Checkbox/index.js

@@ -0,0 +1,3 @@
+export function Checkbox() {
+  return 'Checkbox';
+}

package/__fixtures__/index-resolution/src/components/index.js

@@ -0,0 +1,2 @@
+export { default as Button } from './Button';
+export { Checkbox } from './Checkbox';

package/__fixtures__/nested-paths/input.js

@@ -0,0 +1,19 @@
+// Multiple level deep import
+import Button from './src/components/ui/elements/Button';
+
+// Multiple level with parent directory traversal
+import { formatDate } from './src/utils/helpers/formatting';
+
+// Export multiple levels deep
+export { formatDate } from './src/utils/helpers/formatting';
+
+// Export all from deeply nested path
+export * from './src/components/ui/elements/Button';
+
+// Dynamic import with deep path
+const loadButton = () => import('./src/components/ui/elements/Button');
+
+// Complex parent directory traversal
+import { helper } from './src/components/ui/elements/../../../utils/helpers/formatting';
+
+console.log(Button, formatDate, loadButton, helper);

package/__fixtures__/nested-paths/output.js

@@ -0,0 +1,19 @@
+// Multiple level deep import
+import Button from './src/components/ui/elements/Button.js';
+
+// Multiple level with parent directory traversal
+import { formatDate } from './src/utils/helpers/formatting.js';
+
+// Export multiple levels deep
+export { formatDate } from './src/utils/helpers/formatting.js';
+
+// Export all from deeply nested path
+export * from './src/components/ui/elements/Button.js';
+
+// Dynamic import with deep path
+const loadButton = () => import('./src/components/ui/elements/Button.js');
+
+// Complex parent directory traversal
+import { helper } from './src/utils/helpers/formatting.js';
+
+console.log(Button, formatDate, loadButton, helper);

package/__fixtures__/nested-paths/src/components/ui/elements/Button.js

@@ -0,0 +1,3 @@
+export default function Button() {
+  return 'Button';
+}

package/__fixtures__/nested-paths/src/utils/helpers/formatting.js

@@ -0,0 +1,3 @@
+export function formatDate(date) {
+  return date.toISOString();
+}

package/__fixtures__/no-extension/input.js

@@ -0,0 +1,10 @@
+// No outExtension configured - should only resolve to full paths
+import Button from './src/components/Button';
+import { helper } from './src/utils';
+
+export { helper } from './src/utils';
+export * from './src/components/Button';
+
+const loadUtils = () => import('./src/utils');
+
+console.log(Button, helper, loadUtils);

package/__fixtures__/no-extension/output.js

@@ -0,0 +1,10 @@
+// No outExtension configured - should only resolve to full paths
+import Button from './src/components/Button.js';
+import { helper } from './src/utils.js';
+
+export { helper } from './src/utils.js';
+export * from './src/components/Button.js';
+
+const loadUtils = () => import('./src/utils.js');
+
+console.log(Button, helper, loadUtils);

package/__fixtures__/no-extension/src/components/Button.js

@@ -0,0 +1,3 @@
+export default function Button() {
+  return 'Button';
+}

package/__fixtures__/no-extension/src/utils.js

@@ -0,0 +1,3 @@
+export function helper() {
+  return 'helper';
+}

package/__fixtures__/non-relative-imports/input.js

@@ -0,0 +1,16 @@
+// Non-relative imports should not be modified
+import React from 'react';
+import { Button } from '@mui/material';
+import axios from 'axios';
+
+// Relative import should be modified
+import { localFunction } from './src/local-file';
+
+// Re-export non-relative
+export { useState } from 'react';
+export * from '@mui/material';
+
+// Dynamic import non-relative
+const loadLodash = () => import('lodash');
+
+console.log(React, Button, axios, localFunction, loadLodash);

package/__fixtures__/non-relative-imports/output.js

@@ -0,0 +1,16 @@
+// Non-relative imports should not be modified
+import React from 'react';
+import { Button } from '@mui/material';
+import axios from 'axios';
+
+// Relative import should be modified
+import { localFunction } from './src/local-file.js';
+
+// Re-export non-relative
+export { useState } from 'react';
+export * from '@mui/material';
+
+// Dynamic import non-relative
+const loadLodash = () => import('lodash');
+
+console.log(React, Button, axios, localFunction, loadLodash);

package/__fixtures__/non-relative-imports/src/local-file.js

@@ -0,0 +1,3 @@
+export function localFunction() {
+  return 'local';
+}

package/__fixtures__/typescript-imports/input.ts

@@ -0,0 +1,14 @@
+// Importing from TypeScript files
+import Button from './src/components/Button';
+import { User, UserRole } from './src/types';
+
+// TypeScript type imports
+import type { User as UserType } from './src/types';
+
+// Re-exporting types
+export type { UserRole } from './src/types';
+
+// Dynamic import of TS file
+const loadButton = () => import('./src/components/Button');
+
+console.log(Button, User, UserRole, loadButton);

package/__fixtures__/typescript-imports/output.ts

@@ -0,0 +1,14 @@
+// Importing from TypeScript files
+import Button from './src/components/Button.js';
+import { User, UserRole } from './src/types.js';
+
+// TypeScript type imports
+import type { User as UserType } from './src/types.js';
+
+// Re-exporting types
+export type { UserRole } from './src/types.js';
+
+// Dynamic import of TS file
+const loadButton = () => import('./src/components/Button.js');
+
+console.log(Button, User, UserRole, loadButton);

package/__fixtures__/typescript-imports/src/components/Button.tsx

@@ -0,0 +1,7 @@
+type ButtonProps = {
+  label: string;
+};
+
+export default function Button(props: ButtonProps) {
+  return props.label;
+}

package/__fixtures__/typescript-imports/src/types.ts

@@ -0,0 +1,6 @@
+export interface User {
+  id: number;
+  name: string;
+}
+
+export type UserRole = 'admin' | 'user' | 'guest';

package/index.js

@@ -98,6 +98,15 @@ module.exports = function plugin({ types: t }, { outExtension }) {
         const source = path.get('argument');
         doResolve(source, state);
       },
+      CallExpression(path, state) {
+        const callee = path.get('callee');
+        if (callee.isImport()) {
+          const source = path.get('arguments')[0];
+          if (source.isStringLiteral()) {
+            doResolve(source, state);
+          }
+        }
+      },
       ImportExpression(path, state) {
         const source = path.get('source');
         if (source.isStringLiteral()) {

package/index.test.js

@@ -0,0 +1,100 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { pluginTester } from 'babel-plugin-tester';
+import plugin from './index';
+
+const fixturePath = path.resolve(__dirname, './__fixtures__');
+
+function readOutputFixtureSync(fixture, file) {
+  // babel hardcodes the linefeed to \n and can add extra newlines
+  return normalizeQuotesAndWhitespace(
+    fs
+      .readFileSync(path.join(fixturePath, fixture, file), { encoding: 'utf8' })
+      .replace(/\r?\n/g, '\n'),
+  );
+}
+
+// Normalize string quotes and whitespace for comparison
+function normalizeQuotesAndWhitespace(str) {
+  return str
+    .trim()
+    .replace(/["']/g, "'") // Convert all quotes to single quotes for comparison
+    .replace(/\s+\n/g, '\n'); // Normalize whitespace before line breaks
+}
+
+pluginTester({
+  plugin,
+  filepath: __filename,
+  formatResult: (r) => normalizeQuotesAndWhitespace(r),
+
+  tests: [
+    {
+      title: 'basic js imports',
+      pluginOptions: {
+        outExtension: '.js',
+      },
+      fixture: path.join(fixturePath, 'basic-js-imports', 'input.js'),
+      output: readOutputFixtureSync('basic-js-imports', 'output.js'),
+    },
+    {
+      title: 'typescript imports',
+      pluginOptions: {
+        outExtension: '.js',
+      },
+      babelOptions: {
+        plugins: [['@babel/plugin-syntax-typescript']],
+      },
+      fixture: path.join(fixturePath, 'typescript-imports', 'input.ts'),
+      output: readOutputFixtureSync('typescript-imports', 'output.ts'),
+    },
+    {
+      title: 'index resolution',
+      pluginOptions: {
+        outExtension: '.js',
+      },
+      fixture: path.join(fixturePath, 'index-resolution', 'input.js'),
+      output: readOutputFixtureSync('index-resolution', 'output.js'),
+    },
+    {
+      title: 'nested paths',
+      pluginOptions: {
+        outExtension: '.js',
+      },
+      fixture: path.join(fixturePath, 'nested-paths', 'input.js'),
+      output: readOutputFixtureSync('nested-paths', 'output.js'),
+    },
+    {
+      title: 'different output extension',
+      pluginOptions: {
+        outExtension: '.mjs',
+      },
+      fixture: path.join(fixturePath, 'different-extension', 'input.js'),
+      output: readOutputFixtureSync('different-extension', 'output.js'),
+    },
+    {
+      title: 'no output extension',
+      pluginOptions: {},
+      fixture: path.join(fixturePath, 'no-extension', 'input.js'),
+      output: readOutputFixtureSync('no-extension', 'output.js'),
+    },
+    {
+      title: 'non-relative imports',
+      pluginOptions: {
+        outExtension: '.js',
+      },
+      fixture: path.join(fixturePath, 'non-relative-imports', 'input.js'),
+      output: readOutputFixtureSync('non-relative-imports', 'output.js'),
+    },
+    {
+      title: 'declaration files',
+      pluginOptions: {
+        outExtension: '.js',
+      },
+      babelOptions: {
+        plugins: [['@babel/plugin-syntax-typescript', { dts: true }]],
+      },
+      fixture: path.join(fixturePath, 'declaration-files', 'input.d.ts'),
+      output: readOutputFixtureSync('declaration-files', 'output.d.ts'),
+    },
+  ],
+});

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@mui/internal-babel-plugin-resolve-imports",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "author": "MUI Team",
-  "description": "babel plugin that resolves import specifiers to their actual output file.",
+  "description": "Babel plugin that resolves import specifiers to their actual output file.",
   "main": "./index.js",
   "exports": {
     ".": "./index.js"
@@ -17,8 +17,14 @@
     "resolve": "^1.22.10"
   },
   "devDependencies": {
+    "@babel/plugin-syntax-typescript": "^7.27.1",
+    "@babel/preset-typescript": "^7.27.1",
     "@types/babel__core": "^7.20.5",
-    "@types/resolve": "^1.20.6"
+    "@types/chai": "^4.3.20",
+    "@types/node": "^20.17.32",
+    "@types/resolve": "^1.20.6",
+    "babel-plugin-tester": "^11.0.4",
+    "chai": "^4.5.0"
   },
   "peerDependencies": {
     "@babel/core": "7"
@@ -26,5 +32,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {}
+  "scripts": {
+    "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages-internal/babel-plugin-resolve-imports/**/*.test.?(c|m)[jt]s?(x)'"
+  }
 }