fixed babel configuration for shakacode#208 (shakacode#240)

* fixed babel configuration for shakacode#208
willemorvets · Feb 12, 2023 · fd23b30 · fd23b30
1 parent e13d841
commit fd23b30
Show file tree

Hide file tree

Showing 12 changed files with 358 additions and 46 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,6 +15,10 @@ _Please add entries here for your pull requests that are not yet released._
 
 - Added `prepend_javascript_pack_tag` to helpers. Allows to move an entry to the top of queue. Handy when calling from the layout to make sure an entry goes before the view and partial `append_javascript_pack_tag` entries. [PR 235](https://github.com/shakacode/shakapacker/pull/235) by [paypro-leon](https://github.com/paypro-leon).
 
+## [6.5.6] - January 30, 2023
+### Fixed
+- Fixed [issue](https://github.com/shakacode/shakapacker/issues/208) to support directories under `node_modules/*` in the `additional_paths` property of `webpacker.yml` [PR 238](https://github.com/shakacode/shakapacker/pull/238) by [vaukalak](https://github.com/vaukalak).
+
 ## [6.5.6] - January 15, 2023
 ### Fixed
 - Remove duplicate yarn installs. [PR 238](https://github.com/shakacode/shakapacker/pull/238) by [justin808](https://github/justin808).

diff --git a/package.json b/package.json
@@ -41,13 +41,19 @@
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.26.0",
     "jest": "^28.1.3",
+    "memory-fs": "^0.5.0",
     "swc-loader": "^0.1.15",
+    "thenify": "^3.3.1",
     "webpack": "^5.72.0",
     "webpack-assets-manifest": "^5.0.6",
     "webpack-merge": "^5.8.0"
   },
   "jest": {
     "testRegex": "(/__tests__/.*|(\\.|/))\\.jsx?$",
+    "testPathIgnorePatterns": [
+      "/__fixtures__/",
+      "/__utils__/"
+    ],
     "roots": [
       "<rootDir>/package"
     ]

diff --git a/package/rules/__tests__/__utils__/webpack.js b/package/rules/__tests__/__utils__/webpack.js
@@ -0,0 +1,50 @@
+const webpack = require("webpack");
+const MemoryFS = require("memory-fs");
+const thenify = require("thenify");
+const path = require("path");
+
+const createTrackLoader = () => {
+  const filesTracked = {};
+  return [
+    filesTracked,
+    (source) => {
+      filesTracked[source.resource] = true;
+      return source;
+    },
+  ];
+};
+
+const node_modules = path.resolve("node_modules");
+const node_modules_included = path.resolve("node_modules/included");
+const app_javascript = path.resolve("app/packs");
+
+const createInMemoryFs = () => {
+  const fs = new MemoryFS();
+
+  fs.mkdirpSync(node_modules);
+  fs.mkdirpSync(node_modules_included);
+  fs.mkdirpSync(app_javascript);
+
+  return fs;
+};
+
+const createTestCompiler = (config, fs = createInMemoryFs()) => {
+  Object.values(config.entry).forEach((file) => {
+    fs.writeFileSync(file, "console.log(1);");
+  });
+
+  const compiler = webpack(config);
+  compiler.run = thenify(compiler.run);
+  compiler.inputFileSystem = fs;
+  compiler.outputFileSystem = fs;
+  return compiler;
+};
+
+module.exports = {
+  createTrackLoader,
+  node_modules,
+  node_modules_included,
+  app_javascript,
+  createInMemoryFs,
+  createTestCompiler,
+};
diff --git a/package/rules/__tests__/babel.js b/package/rules/__tests__/babel.js
@@ -0,0 +1,63 @@
+const path = require("path");
+const {
+  app_javascript,
+  node_modules,
+  node_modules_included,
+  createTestCompiler,
+  createTrackLoader,
+} = require("./__utils__/webpack");
+const babelConfig = require("../babel");
+
+jest.mock("../../config", () => {
+  const original = jest.requireActual("../../config");
+  return {
+    ...original,
+    additional_paths: [...original.additional_paths, "node_modules/included"],
+  };
+});
+
+const createWebpackConfig = (file, use) => {
+  return {
+    entry: { file },
+    module: {
+      rules: [
+        {
+          ...babelConfig,
+          use,
+        },
+      ],
+    },
+    output: {
+      path: "/",
+      filename: "scripts-bundled.js",
+    },
+  };
+};
+
+describe("babel", () => {
+  test("process source path", async () => {
+    const normalPath = `${app_javascript}/a.js`;
+    const [tracked, loader] = createTrackLoader();
+    const compiler = createTestCompiler(
+      createWebpackConfig(normalPath, loader)
+    );
+    await compiler.run();
+    expect(tracked[normalPath]).toBeTruthy();
+  });
+
+  test("exclude node_modules", async () => {
+    const ignored = `${node_modules}/a.js`;
+    const [tracked, loader] = createTrackLoader();
+    const compiler = createTestCompiler(createWebpackConfig(ignored, loader));
+    await compiler.run();
+    expect(tracked[ignored]).toBeUndefined();
+  });
+
+  test("explicitly included node_modules should be transpiled", async () => {
+    const included = `${node_modules_included}/a.js`;
+    const [tracked, loader] = createTrackLoader();
+    const compiler = createTestCompiler(createWebpackConfig(included, loader));
+    await compiler.run();
+    expect(tracked[included]).toBeTruthy();
+  });
+});
diff --git a/package/rules/__tests__/esbuild.js b/package/rules/__tests__/esbuild.js
@@ -0,0 +1,64 @@
+const path = require("path");
+const {
+  app_javascript,
+  node_modules,
+  node_modules_included,
+  createTestCompiler,
+  createTrackLoader,
+} = require("./__utils__/webpack");
+const esbuildConfig = require("../esbuild");
+
+jest.mock("../../config", () => {
+  const original = jest.requireActual("../../config");
+  return {
+    ...original,
+    webpack_loader: "esbuild",
+    additional_paths: [...original.additional_paths, "node_modules/included"],
+  };
+});
+
+const createWebpackConfig = (file, use) => {
+  return {
+    entry: { file },
+    module: {
+      rules: [
+        {
+          ...esbuildConfig,
+          use,
+        },
+      ],
+    },
+    output: {
+      path: "/",
+      filename: "scripts-bundled.js",
+    },
+  };
+};
+
+describe("swc", () => {
+  test("process source path", async () => {
+    const normalPath = `${app_javascript}/a.js`;
+    const [tracked, loader] = createTrackLoader();
+    const compiler = createTestCompiler(
+      createWebpackConfig(normalPath, loader)
+    );
+    await compiler.run();
+    expect(tracked[normalPath]).toBeTruthy();
+  });
+
+  test("exclude node_modules", async () => {
+    const ignored = `${node_modules}/a.js`;
+    const [tracked, loader] = createTrackLoader();
+    const compiler = createTestCompiler(createWebpackConfig(ignored, loader));
+    await compiler.run();
+    expect(tracked[ignored]).toBeUndefined();
+  });
+
+  test("explicitly included node_modules should be transpiled", async () => {
+    const included = `${node_modules_included}/a.js`;
+    const [tracked, loader] = createTrackLoader();
+    const compiler = createTestCompiler(createWebpackConfig(included, loader));
+    await compiler.run();
+    expect(tracked[included]).toBeTruthy();
+  });
+});
diff --git a/package/rules/__tests__/index.js b/package/rules/__tests__/index.js
@@ -4,8 +4,4 @@ describe('index', () => {
   test('rule tests are regexes', () => {
     rules.forEach(rule => expect(rule.test instanceof RegExp).toBe(true))
   })
-
-  test('rule excludes are regexes', () => {
-    rules.forEach(rule => expect(rule.exclude instanceof RegExp).toBe(true))
-  })
 })
diff --git a/package/rules/__tests__/swc.js b/package/rules/__tests__/swc.js
@@ -0,0 +1,64 @@
+const path = require("path");
+const {
+  app_javascript,
+  node_modules,
+  node_modules_included,
+  createTestCompiler,
+  createTrackLoader,
+} = require("./__utils__/webpack");
+const swcConfig = require("../swc");
+
+jest.mock("../../config", () => {
+  const original = jest.requireActual("../../config");
+  return {
+    ...original,
+    webpack_loader: "swc",
+    additional_paths: [...original.additional_paths, "node_modules/included"],
+  };
+});
+
+const createWebpackConfig = (file, use) => {
+  return {
+    entry: { file },
+    module: {
+      rules: [
+        {
+          ...swcConfig,
+          use,
+        },
+      ],
+    },
+    output: {
+      path: "/",
+      filename: "scripts-bundled.js",
+    },
+  };
+};
+
+describe("swc", () => {
+  test("process source path", async () => {
+    const normalPath = `${app_javascript}/a.js`;
+    const [tracked, loader] = createTrackLoader();
+    const compiler = createTestCompiler(
+      createWebpackConfig(normalPath, loader)
+    );
+    await compiler.run();
+    expect(tracked[normalPath]).toBeTruthy();
+  });
+
+  test("exclude node_modules", async () => {
+    const ignored = `${node_modules}/a.js`;
+    const [tracked, loader] = createTrackLoader();
+    const compiler = createTestCompiler(createWebpackConfig(ignored, loader));
+    await compiler.run();
+    expect(tracked[ignored]).toBeUndefined();
+  });
+
+  test("explicitly included node_modules should be transpiled", async () => {
+    const included = `${node_modules_included}/a.js`;
+    const [tracked, loader] = createTrackLoader();
+    const compiler = createTestCompiler(createWebpackConfig(included, loader));
+    await compiler.run();
+    expect(tracked[included]).toBeTruthy();
+  });
+});
diff --git a/package/rules/babel.js b/package/rules/babel.js
@@ -1,24 +1,13 @@
-const { resolve } = require('path')
-const { realpathSync } = require('fs')
 const { loaderMatches } = require('../utils/helpers')
-
 const {
-  source_path: sourcePath,
-  additional_paths: additionalPaths,
   webpack_loader: webpackLoader
 } = require('../config')
 const { isProduction } = require('../env')
+const jscommon = require('./jscommon')
 
 module.exports = loaderMatches(webpackLoader, 'babel', () => ({
     test: /\.(js|jsx|mjs|ts|tsx|coffee)?(\.erb)?$/,
-    include: [sourcePath, ...additionalPaths].map((p) => {
-      try {
-        return realpathSync(p)
-      } catch (e) {
-        return resolve(p)
-      }
-    }),
-    exclude: /node_modules/,
+    ...jscommon,
     use: [
       {
         loader: require.resolve('babel-loader'),
@@ -29,4 +18,4 @@ module.exports = loaderMatches(webpackLoader, 'babel', () => ({
         }
       }
     ]
-  }))
+}))
diff --git a/package/rules/esbuild.js b/package/rules/esbuild.js
@@ -1,23 +1,12 @@
-const { resolve } = require('path')
-const { realpathSync } = require('fs')
 const { loaderMatches } = require('../utils/helpers')
 const { getEsbuildLoaderConfig } = require('../esbuild')
-
 const {
-  source_path: sourcePath,
-  additional_paths: additionalPaths,
   webpack_loader: webpackLoader
 } = require('../config')
+const jscommon = require('./jscommon')
 
 module.exports = loaderMatches(webpackLoader, 'esbuild', () => ({
   test: /\.(ts|tsx|js|jsx|mjs|coffee)?(\.erb)?$/,
-  include: [sourcePath, ...additionalPaths].map((p) => {
-    try {
-      return realpathSync(p)
-    } catch (e) {
-      return resolve(p)
-    }
-  }),
-  exclude: /node_modules/,
+  ...jscommon,
   use: ({ resource }) => getEsbuildLoaderConfig(resource)
 }))
diff --git a/package/rules/jscommon.js b/package/rules/jscommon.js
@@ -0,0 +1,26 @@
+const { resolve } = require('path')
+const { realpathSync } = require('fs')
+const {
+    source_path: sourcePath,
+    additional_paths: additionalPaths
+} = require('../config')
+
+const inclusions = [sourcePath, ...additionalPaths].map(p => {
+    try {
+        return realpathSync(p)
+    } catch (e) {
+        return resolve(p)
+    }
+})
+
+module.exports = {
+    include: inclusions,
+    exclude: [
+        {
+            // exclude all node_modules from running through babel-loader
+            and: [resolve('node_modules')],
+            // Do not exclude inclusions, as otherwise these won't be transpiled
+            not: [...inclusions]
+        }
+    ]
+}
diff --git a/package/rules/swc.js b/package/rules/swc.js
@@ -1,23 +1,12 @@
-const { resolve } = require('path')
-const { realpathSync } = require('fs')
 const { loaderMatches } = require('../utils/helpers')
 const { getSwcLoaderConfig } = require('../swc')
-
 const {
-  source_path: sourcePath,
-  additional_paths: additionalPaths,
   webpack_loader: webpackLoader
 } = require('../config')
+const jscommon = require('./jscommon')
 
 module.exports = loaderMatches(webpackLoader, 'swc', () => ({
   test: /\.(ts|tsx|js|jsx|mjs|coffee)?(\.erb)?$/,
-  include: [sourcePath, ...additionalPaths].map((p) => {
-    try {
-      return realpathSync(p)
-    } catch (e) {
-      return resolve(p)
-    }
-  }),
-  exclude: /node_modules/,
+  ...jscommon,
   use: ({ resource }) => getSwcLoaderConfig(resource)
 }))