chore(gatsby): migrate gatsby-webpack-stats-extractor to TypeScript (#…

…22404)

* migrate gatsby-webpack-stats-extractor to TypeScript

* update @types/webpack

* fix typecheck

Co-authored-by: Blaine Kasten <blainekasten@gmail.com>

package.json

@@ -25,7 +25,7 @@
     "@types/semver": "^7.1.0",
     "@types/signal-exit": "^3.0.0",
     "@types/stack-trace": "^0.0.29",
-    "@types/webpack": "^4.41.7",
+    "@types/webpack": "^4.41.8",
     "@types/webpack-merge": "^4.1.5",
     "@typescript-eslint/eslint-plugin": "^2.24.0",
     "@typescript-eslint/parser": "^2.24.0",

packages/gatsby/src/utils/gatsby-webpack-stats-extractor.js → packages/gatsby/src/utils/gatsby-webpack-stats-extractor.ts

@@ -1,19 +1,20 @@
-const fs = require(`fs-extra`)
-const path = require(`path`)
+import fs from "fs-extra"
+import path from "path"
+import { Compiler } from "webpack"
 
-class GatsbyWebpackStatsExtractor {
-  constructor(options) {
+export class GatsbyWebpackStatsExtractor {
+  private plugin: { name: string }
+  constructor() {
     this.plugin = { name: `GatsbyWebpackStatsExtractor` }
-    this.options = options || {}
   }
-  apply(compiler) {
+  apply(compiler: Compiler): void {
     compiler.hooks.done.tapAsync(this.plugin.name, (stats, done) => {
-      let assets = {}
-      let assetsMap = {}
-      for (let chunkGroup of stats.compilation.chunkGroups) {
+      const assets = {}
+      const assetsMap = {}
+      for (const chunkGroup of stats.compilation.chunkGroups) {
         if (chunkGroup.name) {
-          let files = []
-          for (let chunk of chunkGroup.chunks) {
+          const files: string[] = []
+          for (const chunk of chunkGroup.chunks) {
             files.push(...chunk.files)
           }
           assets[chunkGroup.name] = files.filter(f => f.slice(-4) !== `.map`)
@@ -44,5 +45,3 @@ class GatsbyWebpackStatsExtractor {
     })
   }
 }
-
-module.exports = GatsbyWebpackStatsExtractor

packages/gatsby/src/utils/webpack-utils.ts

@@ -9,7 +9,7 @@ import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin"
 import isWsl from "is-wsl"
 import { getBrowsersList } from "./browserslist"
 
-import GatsbyWebpackStatsExtractor from "./gatsby-webpack-stats-extractor"
+import { GatsbyWebpackStatsExtractor } from "./gatsby-webpack-stats-extractor"
 import { GatsbyWebpackEslintGraphqlSchemaReload } from "./gatsby-webpack-eslint-graphql-schema-reload-plugin"
 
 import { builtinPlugins } from "./webpack-plugins"
@@ -639,8 +639,8 @@ export const createWebpackUtils = (
 
   plugins.moment = (): Plugin => plugins.ignore(/^\.\/locale$/, /moment$/)
 
-  plugins.extractStats = (options: any): GatsbyWebpackStatsExtractor =>
-    new GatsbyWebpackStatsExtractor(options)
+  plugins.extractStats = (): GatsbyWebpackStatsExtractor =>
+    new GatsbyWebpackStatsExtractor()
 
   plugins.eslintGraphqlSchemaReload = (): GatsbyWebpackEslintGraphqlSchemaReload =>
     new GatsbyWebpackEslintGraphqlSchemaReload()

yarn.lock

@@ -4351,10 +4351,10 @@
     "@types/webpack-sources" "*"
     source-map "^0.6.0"
 
-"@types/webpack@^4.41.7":
-  version "4.41.7"
-  resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.41.7.tgz#22be27dbd4362b01c3954ca9b021dbc9328d9511"
-  integrity sha512-OQG9viYwO0V1NaNV7d0n79V+n6mjOV30CwgFPIfTzwmk8DHbt+C4f2aBGdCYbo3yFyYD6sjXfqqOjwkl1j+ulA==
+"@types/webpack@^4.41.8":
+  version "4.41.8"
+  resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.41.8.tgz#d2244f5f612ee30230a5c8c4ae678bce90d27277"
+  integrity sha512-mh4litLHTlDG84TGCFv1pZldndI34vkrW9Mks++Zx4KET7DRMoCXUvLbTISiuF4++fMgNnhV9cc1nCXJQyBYbQ==
   dependencies:
     "@types/anymatch" "*"
     "@types/node" "*"