refactor: centralize extensions, consistency, less error prone (#57)

cdcabrera · Jun 12, 2024 · 342158b · 342158b
1 parent b59234a
commit 342158b
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 39 deletions.
diff --git a/src/README.md b/src/README.md
@@ -150,13 +150,27 @@ dotenv parameters are string based, failed or missing dotenv parameters return a
 ## Global
 
 * [Global](#module_Global)
+    * [~jsFileExtensions](#module_Global..jsFileExtensions) : <code>Array.&lt;string&gt;</code>
+    * [~tsFileExtensions](#module_Global..tsFileExtensions) : <code>Array.&lt;string&gt;</code>
     * [~contextPath](#module_Global..contextPath) : <code>string</code>
     * [~OPTIONS](#module_Global..OPTIONS) : <code>Object</code>
     * [~errorMessageHandler(errors)](#module_Global..errorMessageHandler) ⇒ <code>string</code> \| <code>any</code> \| <code>Array.&lt;any&gt;</code>
     * [~isPromise(obj)](#module_Global..isPromise) ⇒ <code>boolean</code>
     * [~dynamicImport(file)](#module_Global..dynamicImport) ⇒ <code>Promise.&lt;any&gt;</code>
     * [~createFile(contents, options)](#module_Global..createFile) ⇒ <code>Object</code>
 
+<a name="module_Global..jsFileExtensions"></a>
+
+### Global~jsFileExtensions : <code>Array.&lt;string&gt;</code>
+JS file extensions
+
+**Kind**: inner constant of [<code>Global</code>](#module_Global)  
+<a name="module_Global..tsFileExtensions"></a>
+
+### Global~tsFileExtensions : <code>Array.&lt;string&gt;</code>
+TS file extensions
+
+**Kind**: inner constant of [<code>Global</code>](#module_Global)  
 <a name="module_Global..contextPath"></a>
 
 ### Global~contextPath : <code>string</code>
@@ -453,7 +467,7 @@ Start webpack development or production.
 
 * [webpackConfigs](#module_webpackConfigs)
     * [~preprocessLoader(dotenv, options)](#module_webpackConfigs..preprocessLoader) ⇒ <code>Object</code>
-    * [~common(dotenv, options)](#module_webpackConfigs..common) ⇒ <code>Object</code>
+    * [~common(dotenv)](#module_webpackConfigs..common) ⇒ <code>Object</code>
     * [~development(dotenv)](#module_webpackConfigs..development) ⇒ <code>Object</code>
     * [~production(dotenv)](#module_webpackConfigs..production) ⇒ <code>Object</code>
 
@@ -483,7 +497,7 @@ Assumption based preprocess loader
 
 <a name="module_webpackConfigs..common"></a>
 
-### webpackConfigs~common(dotenv, options) ⇒ <code>Object</code>
+### webpackConfigs~common(dotenv) ⇒ <code>Object</code>
 Common webpack settings between environments.
 
 **Kind**: inner method of [<code>webpackConfigs</code>](#module_webpackConfigs)  
@@ -512,10 +526,6 @@ Common webpack settings between environments.
     <td>dotenv._BUILD_STATIC_DIR</td><td><code>string</code></td>
     </tr><tr>
     <td>dotenv._BUILD_UI_NAME</td><td><code>string</code></td>
-    </tr><tr>
-    <td>options</td><td><code>object</code></td>
-    </tr><tr>
-    <td>options.loader</td><td><code>string</code></td>
     </tr>  </tbody>
 </table>
 

diff --git a/src/__tests__/__snapshots__/global.test.js.snap b/src/__tests__/__snapshots__/global.test.js.snap
@@ -37,6 +37,18 @@ exports[`Global should return specific properties: specific properties 1`] = `
   "dynamicImport": [Function],
   "errorMessageHandler": [Function],
   "isPromise": [Function],
+  "jsFileExtensions": [
+    "js",
+    "jsx",
+    "mjs",
+    "cjs",
+  ],
+  "tsFileExtensions": [
+    "ts",
+    "tsx",
+    "mts",
+    "cts",
+  ],
 }
 `;
 

diff --git a/src/__tests__/__snapshots__/wp.test.js.snap b/src/__tests__/__snapshots__/wp.test.js.snap
@@ -427,15 +427,20 @@ exports[`webpack should create a webpack config with language: language configur
         ],
         "resolve": {
           "extensions": [
-            ".jsx",
             ".js",
+            ".jsx",
             ".mjs",
             ".cjs"
           ]
         },
         "use": [
           {
-            "loader": "babel-loader"
+            "loader": "babel-loader",
+            "options": {
+              "presets": [
+                "@babel/preset-env"
+              ]
+            }
           }
         ]
       }
@@ -618,15 +623,20 @@ exports[`webpack should create a webpack config with language: language configur
         ],
         "resolve": {
           "extensions": [
-            ".jsx",
             ".js",
+            ".jsx",
             ".mjs",
             ".cjs"
           ]
         },
         "use": [
           {
-            "loader": "babel-loader"
+            "loader": "babel-loader",
+            "options": {
+              "presets": [
+                "@babel/preset-env"
+              ]
+            }
           }
         ]
       }

diff --git a/src/__tests__/__snapshots__/wpConfigs.test.js.snap b/src/__tests__/__snapshots__/wpConfigs.test.js.snap
@@ -592,16 +592,16 @@ exports[`webpackConfigs should return a development configuration object: develo
 exports[`webpackConfigs should return a preprocessLoader configuration object: language dev, prod hashes 1`] = `
 [
   {
-    "devHash": "94105185f5f28d4ba07282938bd4d43a",
+    "devHash": "b1a27bfb44b6063a2a599931989a64f8",
     "isEqual": true,
     "loader": "js",
-    "prodHash": "94105185f5f28d4ba07282938bd4d43a",
+    "prodHash": "b1a27bfb44b6063a2a599931989a64f8",
   },
   {
-    "devHash": "3905735acd7ce27ca46d4aaad2d6aa1d",
+    "devHash": "6cf8d288bb31e0a6e6c97b9d54e0c192",
     "isEqual": true,
     "loader": "ts",
-    "prodHash": "3905735acd7ce27ca46d4aaad2d6aa1d",
+    "prodHash": "6cf8d288bb31e0a6e6c97b9d54e0c192",
   },
   {
     "devHash": "49e595be76828acf4f2a3617fea9a378",
@@ -623,15 +623,20 @@ exports[`webpackConfigs should return a preprocessLoader configuration object: p
         ],
         "resolve": {
           "extensions": [
-            ".jsx",
             ".js",
+            ".jsx",
             ".mjs",
             ".cjs"
           ]
         },
         "use": [
           {
-            "loader": "babel-loader"
+            "loader": "babel-loader",
+            "options": {
+              "presets": [
+                "@babel/preset-env"
+              ]
+            }
           }
         ]
       }
@@ -659,10 +664,14 @@ exports[`webpackConfigs should return a preprocessLoader configuration object: p
         ],
         "resolve": {
           "extensions": [
-            "tsx",
             ".ts",
+            ".tsx",
+            ".mts",
+            ".cts",
+            ".js",
             ".jsx",
-            ".js"
+            ".mjs",
+            ".cjs"
           ]
         },
         "use": [

diff --git a/src/global.js b/src/global.js
@@ -7,6 +7,20 @@ const { consoleMessage } = require('./logger');
  * @module Global
  */
 
+/**
+ * JS file extensions
+ *
+ * @type {string[]}
+ */
+const jsFileExtensions = ['js', 'jsx', 'mjs', 'cjs'];
+
+/**
+ * TS file extensions
+ *
+ * @type {string[]}
+ */
+const tsFileExtensions = ['ts', 'tsx', 'mts', 'cts'];
+
 /**
  * Handle a variety of error types consistently.
  *
@@ -153,4 +167,13 @@ const OPTIONS = {
   }
 };
 
-module.exports = { contextPath, createFile, dynamicImport, errorMessageHandler, isPromise, OPTIONS };
+module.exports = {
+  contextPath,
+  createFile,
+  dynamicImport,
+  errorMessageHandler,
+  jsFileExtensions,
+  isPromise,
+  OPTIONS,
+  tsFileExtensions
+};
diff --git a/src/wpConfigs.js b/src/wpConfigs.js
@@ -8,7 +8,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const SvgToMiniDataURI = require('mini-svg-data-uri');
 const TerserJSPlugin = require('terser-webpack-plugin');
 const { babelLoaderResolve, cssLoaderResolve, tsLoaderResolve } = require('../lib/packages');
-const { OPTIONS } = require('./global');
+const { jsFileExtensions, OPTIONS, tsFileExtensions } = require('./global');
 const { consoleMessage } = require('./logger');
 const { setupWebpackDotenvFilesForEnv } = require('./dotenv');
 
@@ -32,10 +32,10 @@ const preprocessLoader = ({ _BUILD_SRC_DIR: SRC_DIR = '' } = OPTIONS.dotenv || {
         case 'js':
           return [
             {
-              test: /\.(jsx|[cm]?js)?$/,
+              test: new RegExp(`\\.(${jsFileExtensions.join('|')})?$`),
               include: [SRC_DIR],
               resolve: {
-                extensions: ['.jsx', '.js', '.cjs', '.mjs']
+                extensions: jsFileExtensions.map(ext => `.${ext}`)
               },
               use: [
                 {
@@ -50,11 +50,11 @@ const preprocessLoader = ({ _BUILD_SRC_DIR: SRC_DIR = '' } = OPTIONS.dotenv || {
         case 'ts':
           return [
             {
-              test: /\.(jsx|tsx|[cm]?ts|[cm]?js)?$/,
+              test: new RegExp(`\\.(${[...tsFileExtensions, ...jsFileExtensions].join('|')})?$`),
               include: [SRC_DIR],
               resolve: {
                 // Dependent on tsconfig resolutions may, or may not, be necessary
-                extensions: ['.tsx', '.ts', '.mts', '.cts', '.jsx', '.js', '.mjs', '.cjs']
+                extensions: [...tsFileExtensions, ...jsFileExtensions].map(ext => `.${ext}`)
               },
               use: [
                 {
@@ -82,8 +82,6 @@ const preprocessLoader = ({ _BUILD_SRC_DIR: SRC_DIR = '' } = OPTIONS.dotenv || {
  * @param {string} dotenv._BUILD_SRC_DIR
  * @param {string} dotenv._BUILD_STATIC_DIR
  * @param {string} dotenv._BUILD_UI_NAME
- * @param {object} options
- * @param {string} options.loader
  * @returns {{output: {path: string, filename: string, publicPath: string, clean: boolean}, entry: {app: string},
  *     resolve: {cacheWithContext: boolean, symlinks: boolean}, plugins: any[], module: {rules: Array}}}
  */
@@ -97,29 +95,20 @@ const common = (
     _BUILD_SRC_DIR: SRC_DIR = '',
     _BUILD_STATIC_DIR: STATIC_DIR = '',
     _BUILD_UI_NAME: UI_NAME
-  } = OPTIONS.dotenv || {},
-  { loader } = OPTIONS
+  } = OPTIONS.dotenv || {}
 ) => ({
   context: RELATIVE_DIRNAME,
   entry: {
     app: (() => {
       let entryFiles;
       try {
-        const entryFilesSet = new Set([
-          path.join(SRC_DIR, `${APP_INDEX_PREFIX}.js`),
-          path.join(SRC_DIR, `${APP_INDEX_PREFIX}.mjs`),
-          path.join(SRC_DIR, `${APP_INDEX_PREFIX}.cjs`),
-          path.join(SRC_DIR, `${APP_INDEX_PREFIX}.jsx`),
-          path.join(SRC_DIR, `${APP_INDEX_PREFIX}.ts`),
-          path.join(SRC_DIR, `${APP_INDEX_PREFIX}.mts`),
-          path.join(SRC_DIR, `${APP_INDEX_PREFIX}.cts`),
-          path.join(SRC_DIR, `${APP_INDEX_PREFIX}.tsx`)
-        ]);
+        const fileExtensions = [...tsFileExtensions, ...jsFileExtensions];
+        const entryFilesSet = new Set([...fileExtensions.map(ext => path.join(SRC_DIR, `${APP_INDEX_PREFIX}.${ext}`))]);
         entryFiles = Array.from(entryFilesSet).filter(file => fs.existsSync(file));
 
         if (!entryFiles.length) {
           consoleMessage.warn(
-            `webpack app entry file error: Missing entry/app file. Expected an index file! ${APP_INDEX_PREFIX}.(${loader}x|[cm]?${loader})`
+            `webpack app entry file error: Missing entry/app file. Expected an index file! ${APP_INDEX_PREFIX}.(${fileExtensions.join('|')})`
           );
         }
       } catch (e) {