Webpack: convert rules to TypeScript

webpack/rules/assets.ts

@@ -1,11 +1,13 @@
 // Asset modules
 // https://webpack.js.org/guides/asset-modules/
 
-const { resolve } = require('path');
+import { resolve } from 'path';
+
+import type { RuleSetRule } from 'webpack';
 
 // These are processed in reverse-order
 // We use the name 'packs' instead of 'assets' for legacy reasons
-module.exports = [{
+const rules: RuleSetRule[] = [{
   test: /\.(png|svg)/,
   type: 'asset/resource',
   include: [
@@ -81,3 +83,5 @@ module.exports = [{
     filename: 'packs/images/crypto/[name]-[contenthash:8][ext]',
   },
 }];
+
+export default rules;

webpack/rules/babel-build-config.ts

@@ -1,11 +1,13 @@
-const { resolve } = require('path');
+import { resolve } from 'path';
 
-const { env } = require('../configuration');
+import { env } from '../configuration';
+
+import type { RuleSetRule } from 'webpack';
 
 // This is a hack, used to force build_config @preval to recompile
 // https://github.com/kentcdodds/babel-plugin-preval/issues/19
 
-module.exports = {
+const rule: RuleSetRule = {
   test: resolve(__dirname, '../../app/soapbox/build_config.js'),
   use: [
     {
@@ -18,3 +20,5 @@ module.exports = {
     },
   ],
 };
+
+export default rule;

webpack/rules/babel-git.ts

@@ -1,11 +1,13 @@
-const { resolve } = require('path');
+import { resolve } from 'path';
 
-const { env } = require('../configuration');
+import { env } from '../configuration';
+
+import type { RuleSetRule } from 'webpack';
 
 // This is a hack, used in conjunction with rules/git-refresh.js
 // https://github.com/kentcdodds/babel-plugin-preval/issues/19
 
-module.exports = {
+const rule: RuleSetRule = {
   test: resolve(__dirname, '../../app/soapbox/utils/code.js'),
   use: [
     {
@@ -18,3 +20,5 @@ module.exports = {
     },
   ],
 };
+
+export default rule;

webpack/rules/babel.ts

@@ -1,8 +1,10 @@
-const { join, resolve } = require('path');
+import { join, resolve } from 'path';
 
-const { env, settings } = require('../configuration');
+import { env, settings } from '../configuration';
 
-module.exports = {
+import type { RuleSetRule } from 'webpack';
+
+const rule: RuleSetRule = {
   test: /\.(js|jsx|mjs|ts|tsx)$/,
   include: [
     settings.source_path,
@@ -27,3 +29,5 @@ module.exports = {
     },
   ],
 };
+
+export default rule;

webpack/rules/css.ts

@@ -1,6 +1,8 @@
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 
-module.exports = {
+import type { RuleSetRule } from 'webpack';
+
+const rule: RuleSetRule = {
   test: /\.s?css$/i,
   use: [
     MiniCssExtractPlugin.loader,
@@ -26,3 +28,5 @@ module.exports = {
     },
   ],
 };
+
+export default rule;

webpack/rules/git-refresh.js

@@ -1,9 +0,0 @@
-const { resolve } = require('path');
-
-// Recompile code.js whenever git changes
-module.exports = {
-  test: resolve(__dirname, '../../app/soapbox/utils/code.js'),
-  use: {
-    loader: resolve(__dirname, '../loaders/git-loader.js'),
-  },
-};

webpack/rules/git-refresh.ts

@@ -0,0 +1,13 @@
+import { resolve } from 'path';
+
+import type { RuleSetRule } from 'webpack';
+
+/** Recompile code.js whenever git changes. */
+const rule: RuleSetRule = {
+  test: resolve(__dirname, '../../app/soapbox/utils/code.js'),
+  use: {
+    loader: resolve(__dirname, '../loaders/git-loader.js'),
+  },
+};
+
+export default rule;

webpack/rules/index.js

@@ -1,19 +0,0 @@
-const assets = require('./assets');
-const babel = require('./babel');
-const buildConfig = require('./babel-build-config');
-const git = require('./babel-git');
-const css = require('./css');
-const gitRefresh = require('./git-refresh');
-const nodeModules = require('./node_modules');
-
-// Webpack loaders are processed in reverse order
-// https://webpack.js.org/concepts/loaders/#loader-features
-module.exports = [
-  ...assets,
-  css,
-  nodeModules,
-  babel,
-  git,
-  gitRefresh,
-  buildConfig,
-];

webpack/rules/index.ts

@@ -0,0 +1,23 @@
+import assets from './assets';
+import babel from './babel';
+import buildConfig from './babel-build-config';
+import git from './babel-git';
+import css from './css';
+import gitRefresh from './git-refresh';
+import nodeModules from './node_modules';
+
+import type { RuleSetRule } from 'webpack';
+
+// Webpack loaders are processed in reverse order
+// https://webpack.js.org/concepts/loaders/#loader-features
+const rules: RuleSetRule[] = [
+  ...assets,
+  css,
+  nodeModules,
+  babel,
+  git,
+  gitRefresh,
+  buildConfig,
+];
+
+export default rules;

webpack/rules/mark.js

@@ -1,8 +0,0 @@
-if (process.env.NODE_ENV === 'production') {
-  module.exports = {};
-} else {
-  module.exports = {
-    test: /\.js$/,
-    loader: 'mark-loader',
-  };
-}

webpack/rules/mark.ts

@@ -0,0 +1,14 @@
+import { env } from 'process';
+
+import type { RuleSetRule } from 'webpack';
+
+let rule: RuleSetRule = {};
+
+if (env.NODE_ENV !== 'production') {
+  rule = {
+    test: /\.js$/,
+    loader: 'mark-loader',
+  };
+}
+
+export default rule;

webpack/rules/node_modules.ts

@@ -1,8 +1,10 @@
-const { join } = require('path');
+import { join } from 'path';
 
-const { settings, env } = require('../configuration');
+import { env, settings } from '../configuration';
 
-module.exports = {
+import type { RuleSetRule } from 'webpack';
+
+const rule: RuleSetRule = {
   test: /\.(js|mjs)$/,
   include: /node_modules/,
   exclude: [
@@ -26,3 +28,5 @@ module.exports = {
     },
   ],
 };
+
+export default rule;