From b770cbb175dd6047d9b7066cd4fed27184d7821a Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 14 Oct 2022 15:43:32 -0500 Subject: [PATCH] Webpack: convert rules to TypeScript --- webpack/rules/{assets.js => assets.ts} | 8 +++++-- ...-build-config.js => babel-build-config.ts} | 10 +++++--- webpack/rules/{babel-git.js => babel-git.ts} | 10 +++++--- webpack/rules/{babel.js => babel.ts} | 10 +++++--- webpack/rules/{css.js => css.ts} | 8 +++++-- webpack/rules/git-refresh.js | 9 -------- webpack/rules/git-refresh.ts | 13 +++++++++++ webpack/rules/index.js | 19 --------------- webpack/rules/index.ts | 23 +++++++++++++++++++ webpack/rules/mark.js | 8 ------- webpack/rules/mark.ts | 14 +++++++++++ .../{node_modules.js => node_modules.ts} | 10 +++++--- 12 files changed, 90 insertions(+), 52 deletions(-) rename webpack/rules/{assets.js => assets.ts} (93%) rename webpack/rules/{babel-build-config.js => babel-build-config.ts} (71%) rename webpack/rules/{babel-git.js => babel-git.ts} (71%) rename webpack/rules/{babel.js => babel.ts} (76%) rename webpack/rules/{css.js => css.ts} (73%) delete mode 100644 webpack/rules/git-refresh.js create mode 100644 webpack/rules/git-refresh.ts delete mode 100644 webpack/rules/index.js create mode 100644 webpack/rules/index.ts delete mode 100644 webpack/rules/mark.js create mode 100644 webpack/rules/mark.ts rename webpack/rules/{node_modules.js => node_modules.ts} (75%) diff --git a/webpack/rules/assets.js b/webpack/rules/assets.ts similarity index 93% rename from webpack/rules/assets.js rename to webpack/rules/assets.ts index e0a14c250..d8c8e3e18 100644 --- a/webpack/rules/assets.js +++ b/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; diff --git a/webpack/rules/babel-build-config.js b/webpack/rules/babel-build-config.ts similarity index 71% rename from webpack/rules/babel-build-config.js rename to webpack/rules/babel-build-config.ts index 8b1088fa6..9e2e4e657 100644 --- a/webpack/rules/babel-build-config.js +++ b/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; diff --git a/webpack/rules/babel-git.js b/webpack/rules/babel-git.ts similarity index 71% rename from webpack/rules/babel-git.js rename to webpack/rules/babel-git.ts index eac6c9877..eb4d44e7f 100644 --- a/webpack/rules/babel-git.js +++ b/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; \ No newline at end of file diff --git a/webpack/rules/babel.js b/webpack/rules/babel.ts similarity index 76% rename from webpack/rules/babel.js rename to webpack/rules/babel.ts index 1272639e9..6a6a46467 100644 --- a/webpack/rules/babel.js +++ b/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; \ No newline at end of file diff --git a/webpack/rules/css.js b/webpack/rules/css.ts similarity index 73% rename from webpack/rules/css.js rename to webpack/rules/css.ts index bc1f42c13..e400391e8 100644 --- a/webpack/rules/css.js +++ b/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; \ No newline at end of file diff --git a/webpack/rules/git-refresh.js b/webpack/rules/git-refresh.js deleted file mode 100644 index 0b708b746..000000000 --- a/webpack/rules/git-refresh.js +++ /dev/null @@ -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'), - }, -}; diff --git a/webpack/rules/git-refresh.ts b/webpack/rules/git-refresh.ts new file mode 100644 index 000000000..aa16c5bcb --- /dev/null +++ b/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; \ No newline at end of file diff --git a/webpack/rules/index.js b/webpack/rules/index.js deleted file mode 100644 index bdf850c6d..000000000 --- a/webpack/rules/index.js +++ /dev/null @@ -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, -]; diff --git a/webpack/rules/index.ts b/webpack/rules/index.ts new file mode 100644 index 000000000..dac8763ca --- /dev/null +++ b/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; diff --git a/webpack/rules/mark.js b/webpack/rules/mark.js deleted file mode 100644 index e62a526b0..000000000 --- a/webpack/rules/mark.js +++ /dev/null @@ -1,8 +0,0 @@ -if (process.env.NODE_ENV === 'production') { - module.exports = {}; -} else { - module.exports = { - test: /\.js$/, - loader: 'mark-loader', - }; -} diff --git a/webpack/rules/mark.ts b/webpack/rules/mark.ts new file mode 100644 index 000000000..322dabc1b --- /dev/null +++ b/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; \ No newline at end of file diff --git a/webpack/rules/node_modules.js b/webpack/rules/node_modules.ts similarity index 75% rename from webpack/rules/node_modules.js rename to webpack/rules/node_modules.ts index aa46fe596..f6f11b041 100644 --- a/webpack/rules/node_modules.js +++ b/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; \ No newline at end of file