Small refactor to helpers

Author: lucasterra

packages/razzle-plugin-typescript/helpers.js

@@ -1,32 +1,25 @@
 'use strict';
 
-const eslintLoaderFinder = rule =>
-  Array.isArray(rule.use) &&
-  rule.use.find(
-    loader =>
-      typeof loader.loader === 'string' &&
-      loader.loader.match(/[/\\]eslint-loader[/\\]/)
-  );
+const loaderFinder = loaderName => rule => {
+  // i.e.: /eslint-loader/
+  const loaderRegex = new RegExp(`[/\\\\]${loaderName}[/\\\\]`);
 
-const babelLoaderFinder = rule =>
-  Array.isArray(rule.use) &&
-  rule.use.find(
-    loader =>
-      typeof loader.loader === 'string' &&
-      loader.loader.match(/[/\\]babel-loader[/\\]/)
+  // Checks if there is an object inside rule.use with loader matching loaderRegex, OR
+  // If there's a loader string in rule.loader matching loaderRegex.
+  return (
+    (Array.isArray(rule.use) &&
+      rule.use.find(
+        loader =>
+          typeof loader.loader === 'string' && loader.loader.match(loaderRegex)
+      )) ||
+    (typeof rule.loader === 'string' && rule.loader.match(loaderRegex))
   );
+};
 
-const tslintLoaderFinder = rule =>
-  typeof rule.loader === 'string' &&
-  rule.loader.match(/[/\\]tslint-loader[/\\]/);
-
-const tsLoaderFinder = rule =>
-  Array.isArray(rule.use) &&
-  rule.use.find(
-    loader =>
-      typeof loader.loader === 'string' &&
-      loader.loader.match(/[/\\]ts-loader[/\\]/)
-  );
+const eslintLoaderFinder = loaderFinder('eslint-loader');
+const babelLoaderFinder = loaderFinder('babel-loader');
+const tslintLoaderFinder = loaderFinder('tslint-loader');
+const tsLoaderFinder = loaderFinder('ts-loader');
 
 module.exports = {
   eslintLoaderFinder,

packages/razzle-plugin-typescript/index.js

@@ -29,13 +29,13 @@ function modify(baseConfig, configOptions, webpack, userOptions = {}) {
   }
 
   // Safely locate Babel-Loader in Razzle's webpack internals
-  const babelLoaderIndex = config.module.rules.findIndex(babelLoaderFinder);
-  if (babelLoaderIndex === -1) {
-    throw new Error('babel-loader was erased from config');
+  const babelLoader = config.module.rules.find(babelLoaderFinder);
+  if (!babelLoader) {
+    throw new Error(
+      `'babel-loader' was erased from config, we need it to define 'include' option`
+    );
   }
 
-  const babelLoader = config.module.rules[babelLoaderIndex];
-
   // Get the correct `include` option, since that hasn't changed.
   // This tells Razzle which directories to transform.
   const { include } = babelLoader;
@@ -45,12 +45,16 @@ function modify(baseConfig, configOptions, webpack, userOptions = {}) {
     include,
     enforce: 'pre',
     test: /\.tsx?$/,
-    loader: require.resolve('tslint-loader'),
-    options: Object.assign(
-      {},
-      defaultOptions.tslintLoader,
-      options.tslintLoader
-    ),
+    use: [
+      {
+        loader: require.resolve('tslint-loader'),
+        options: Object.assign(
+          {},
+          defaultOptions.tslintLoader,
+          options.tslintLoader
+        ),
+      },
+    ],
   };
   config.module.rules.push(tslintLoader);
 
@@ -70,13 +74,15 @@ function modify(baseConfig, configOptions, webpack, userOptions = {}) {
     // If using babel, also add babel-loader to ts files,
     // so we can use babel plugins on tsx files too
     tsLoader.use = [babelLoader.use[1], ...tsLoader.use];
-
-    config.module.rules.push(tsLoader);
   } else {
-    // If not using babel, override it with tsLoader
-    config.module.rules[babelLoaderIndex] = tsLoader;
+    // If not using babel, remove it
+    config.module.rules = config.module.rules.filter(
+      rule => !babelLoaderFinder(rule)
+    );
   }
 
+  config.module.rules.push(tsLoader);
+
   return config;
 }