Init

Author: FogelAI

README.md

@@ -0,0 +1,60 @@
+# babel-plugin-transform-barrels
+This Babel plugin transforms indirect imports through a barrel file (index.js) into direct imports.
+
+### Note
+This plugin is intended for developers who use barrel files (index.js) with dynamic imports and/or CSS imports in their code when using the Webpack bundler. I don't know if it's needed to use in other bundlers such as Parcel, Rollup Vite and etc.
+
+## Example
+
+Before transformation:
+
+```javascript
+import { Button, List } from './components'
+```
+
+After transformation:
+
+```javascript
+import { Button } from './components/Button/Button'
+import { List } from './components/List/List'
+```
+
+
+## Installation
+
+1. Install the package using npm:
+
+    ```bash
+      npm install --save-dev babel-plugin-transform-barrels
+    ```
+
+2. Add the following to your webpack config file in the rule with a `babel-loader` loader:
+
+    ```json
+    "plugins": ["transform-barrels"]
+    ```
+
+   Alternatively, you can add `babel-plugin-transform-barrels` to your babelrc file:
+
+    ```json
+    "plugins": ["babel-plugin-transform-barrels"]
+    ```
+
+## The Problem
+
+There are two issues that can occur in bundle files created by Webpack when using barrel files:
+1. Unused CSS content in the CSS bundle file - this occurs when a CSS file is imported in a re-exported module of a barrel file.
+2. Unused Javascript code in Javascript bundle files when using dynamic imports - this occurs when a barrel file is imported inside two different dynamically imported modules. This barrel file and its re-exported modules will be included twice in the two bundle files.
+
+### Note
+I recommend reading my article *Potential issues with barrel files in Webpack* for more information on possible issues can caused by barrel files.
+
+## Possible Solutions
+
+1. Use Babel plugins to convert import statements from indirect imports through barrel files to direct imports - this solution requires specific configuration for each package.
+2. Use Webpack's built-in solution of `sideEffects: ["*.css", "*.scss"]` - this solution should replace the first solution above. However, it causes a new issue where the order of imported modules is not based on the order of import statements, but on usage order. This can cause unexpected visual issues due to changes in the import order of CSS.
+
+Both solutions above are not optimal, so I decided to develop my own plugin that does not require specific configuration for each package.
+
+## My Plugin Solution
+My plugin examines every import in the Javascript project files and transforms it from an indirect import through a barrel file to a direct import from the module where the original export is declared.

package.json

@@ -0,0 +1,15 @@
+{
+  "name": "babel-plugin-transform-barrels",
+  "version": "1.0.0",
+  "description": "",
+  "main": "src/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/parser": "^7.21.3",
+    "@babel/types": "^7.21.3"
+  }
+}

src/ast.js

@@ -0,0 +1,35 @@
+const fs = require("fs");
+const parser = require("@babel/parser");
+const t = require("@babel/types");
+
+class AST {
+    static filenameToAST = (filename) => {
+      try {
+        const content = fs.readFileSync(filename, "utf-8");
+        return parser.parse(content, { sourceType: "module" });
+      } catch (error) {
+        return null;
+      }
+    };
+    
+    static getSpecifierType(specifier) {
+      if (specifier.local.name === "default")
+      {
+        return "default";
+      } else return "named";
+    }
+  
+    static createASTImportDeclaration = ({name: specifierName, path: modulePath, type: specifierType}) => {
+      return t.importDeclaration(
+        [
+          specifierType === "named"
+            ? t.importSpecifier(t.identifier(specifierName),t.identifier(specifierName))
+            : t.importDefaultSpecifier(t.identifier(specifierName))
+          ,
+        ],
+        t.stringLiteral(modulePath)
+      )
+    }  
+  }
+
+module.exports = AST;

src/barrel.js

@@ -0,0 +1,157 @@
+const t = require("@babel/types");
+const ospath = require("path");
+const fs = require("fs");
+const AST = require("./ast");
+
+class PathFunctions {
+  static isRelativePath(path) {
+    return path.match(/^\.{0,2}\//);
+  }
+  
+  static isLocalModule(importModulePath) {
+    try {
+      return !!require.resolve(importModulePath) && !importModulePath.includes("node_modules");
+    } catch {
+      return false;
+    }
+  }
+  
+  static isScriptFile(importModulePath) {
+    return importModulePath.match(/\.(js|mjs|jsx|ts|tsx)$/);
+  }
+  
+  static getBaseUrlFromTsconfig() {
+    try {
+      const filename = ospath.resolve("jsconfig.json");
+      const content = JSON.parse(fs.readFileSync(filename, "utf-8"));
+      return content?.["compilerOptions"]?.["baseUrl"] || "./";
+    } catch (error) {
+      throw error;
+    }
+  }
+  
+  static getModuleFile(filenameImportFrom, modulePath) {
+  // solution for require function for ES modules
+  // https://stackoverflow.com/questions/54977743/do-require-resolve-for-es-modules
+  // https://stackoverflow.com/a/50053801
+  // import { createRequire } from "module";
+  // const require = createRequire(import.meta.url);
+    try {
+      const filenameDir = ospath.dirname(filenameImportFrom);
+      const basePath = PathFunctions.isRelativePath(modulePath) ? 
+        filenameDir : ospath.resolve(PathFunctions.getBaseUrlFromTsconfig());
+      return require.resolve(ospath.resolve(basePath, modulePath));  
+    } catch {
+      try {
+        return require.resolve(modulePath);
+      } catch {
+        return "MODULE_NOT_FOUND";
+      }
+    }
+  }  
+}
+
+
+class BarrelFilesMapping {
+  constructor() {
+    this.mapping = {};
+  }
+
+  static isBarrelFile(modulePath) {
+    return modulePath.endsWith("index.js");
+  }
+
+  verifyFilePath (importModuleAbsolutePath) {
+    return !BarrelFilesMapping.isBarrelFile(importModuleAbsolutePath) || !PathFunctions.isLocalModule(importModuleAbsolutePath) || !PathFunctions.isScriptFile(importModuleAbsolutePath)
+  }  
+
+  createSpecifiersMapping(fullPathModule) {
+    const barrelAST = AST.filenameToAST(fullPathModule);
+    this.mapping[fullPathModule] = {};
+    barrelAST.program.body.forEach((node) => {
+      if (t.isExportNamedDeclaration(node)) {
+        const originalExportedPath = node.source?.value || fullPathModule;
+        const absoluteExportedPath = node.source?.value ? PathFunctions.getModuleFile(fullPathModule, originalExportedPath) : fullPathModule;
+        node.specifiers.forEach((specifier) => {
+          const specifierName = specifier.exported.name;
+          const specifierType = AST.getSpecifierType(specifier);
+          this.mapping[fullPathModule][specifierName] =
+            this.createDirectSpecifierObject(absoluteExportedPath, specifierName, specifierType);
+        });
+        if (t.isVariableDeclaration(node.declaration)) {
+          const specifierType = "named";
+          node.declaration.declarations.forEach((declaration) => {
+            const specifierName = declaration.id.name;
+            this.mapping[fullPathModule][specifierName] =
+              this.createDirectSpecifierObject(absoluteExportedPath, specifierName, specifierType);    
+          });
+        } else if (t.isFunctionDeclaration(node.declaration)) {
+          const specifierType = "named";
+          const specifierName = node.declaration.id.name;
+          this.mapping[fullPathModule][specifierName] =
+            this.createDirectSpecifierObject(absoluteExportedPath, specifierName, specifierType);
+        }
+      } else if (t.isExportAllDeclaration(node)) {
+        const originalExportedPath = node.source.value;
+        const absoluteExportedPath = PathFunctions.getModuleFile(fullPathModule, originalExportedPath);
+        if (!this.mapping[absoluteExportedPath]) {
+          this.createSpecifiersMapping(absoluteExportedPath);
+        }
+        Object.assign(this.mapping[fullPathModule],this.mapping[absoluteExportedPath]);
+      }
+    });
+  }
+
+  createDirectSpecifierObject(fullPathModule, specifierName, specifierType) {
+    if (BarrelFilesMapping.isBarrelFile(fullPathModule)) {
+      if (!this.mapping[fullPathModule]) {
+        this.createSpecifiersMapping(fullPathModule);
+      }
+      const originalPath = this.mapping[fullPathModule][specifierName]["path"];
+      const originalName = this.mapping[fullPathModule][specifierName]["name"];
+      const originalType = this.mapping[fullPathModule][specifierName]["type"];
+      return this.createDirectSpecifierObject(originalPath, originalName, originalType);
+    }
+    return {
+      name: specifierName,
+      path: fullPathModule,
+      type: specifierType,
+    };
+  }
+
+  getDirectSpecifierObject(fullPathModule, specifierName) {
+    if (!this.mapping[fullPathModule]) {
+      this.createSpecifiersMapping(fullPathModule);
+    }
+    return this.mapping[fullPathModule][specifierName];
+  }
+}
+
+const mapping = new BarrelFilesMapping();
+
+const importDeclarationVisitor = (path, state) => {
+  const parsedJSFile = state.filename
+  const originalImportsPath = path.node.source.value;
+  const originalImportsSpecifiers = path.node.specifiers;
+  // const importModulePath = resolve.sync(originalImports.source.value,{basedir: ospath.dirname(state.filename)});
+  const importModuleAbsolutePath = PathFunctions.getModuleFile(parsedJSFile, originalImportsPath);
+  if (mapping.verifyFilePath(importModuleAbsolutePath)) return;
+  const directSpecifierASTArray = originalImportsSpecifiers.map(
+    (specifier) => {
+      const directSpecifierObject = mapping.getDirectSpecifierObject(
+        importModuleAbsolutePath,
+        specifier.imported.name
+      );
+      return AST.createASTImportDeclaration(directSpecifierObject);
+    }
+  );
+  path.replaceWithMultiple(directSpecifierASTArray);
+};
+
+module.exports = function (babel) {
+  return {
+    visitor: {
+      ImportDeclaration: importDeclarationVisitor,
+    },
+  };
+};