webpack handlers

Author: cnuss

package.json

@@ -18,11 +18,11 @@
   },
   "dependencies": {
     "react-scripts": "^5.0.1",
-    "typescript": ">=5",
-    "webpack": "^5.90.0"
+    "typescript": ">=5"
   },
   "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
     "@types/node": ">=16",
     "@types/webpack": "^5.28.5"
   }
-}
+}

src/index.ts

@@ -1,5 +1,6 @@
 import path from "path";
 import webpack, { Configuration } from "webpack";
+import fs from "fs-extra";
 
 type PluginName = "react";
 const PLUGIN_NAME: PluginName = "react";
@@ -154,35 +155,51 @@ class ServerlessReact {
     this.hooks = {
       initialize: async () => {},
       "react:validate": async () => {
-        console.log("!!!! react:validate");
+        this.log.verbose("react:validate");
       },
       "react:build": async () => {
-        console.log("!!!! react:build");
+        this.log.verbose("react:build");
       },
       "before:offline:start": async () => {
-        this.log.verbose("before:offline:start");
-        await this.build();
+        const { config, compiler } = await this.build();
+        await this.watch(config, compiler);
       },
       "before:offline:start:init": async () => {
-        this.log.verbose("before:offline:start:init");
-        await this.build();
+        const { config, compiler } = await this.build();
+        await this.watch(config, compiler);
       },
     };
   }
 
-  build = async (): Promise<void> => {
+  build = async (): Promise<{
+    config: webpack.Configuration;
+    compiler: webpack.Compiler;
+  }> => {
     // TODO Check if react-scripts exists
+    process.env.BABEL_ENV = "production";
+    process.env.NODE_ENV = "production";
 
-    const webpackConfig = path.join(
+    require(path.join(
+      this.serverlessConfig.servicePath,
+      this.pluginConfig.webpackConfig || "node_modules/react-scripts/config/env"
+    ));
+
+    const paths = require(path.join(
+      this.serverlessConfig.servicePath,
+      this.pluginConfig.webpackConfig ||
+        "node_modules/react-scripts/config/paths"
+    ));
+
+    const { checkBrowsers } = require("react-dev-utils/browsersHelper");
+    await checkBrowsers(paths.appPath, false);
+
+    const configFactory = require(path.join(
       this.serverlessConfig.servicePath,
       this.pluginConfig.webpackConfig ||
         "node_modules/react-scripts/config/webpack.config.js"
-    );
+    ));
 
-    const configFactory = require(webpackConfig);
-    const config: Configuration = configFactory(
-      process.env.NODE_ENV === "development" ? "development" : "production"
-    );
+    const config: Configuration = configFactory("production");
 
     if (!config.output) {
       throw new Error("No output config in webpack config");
@@ -193,40 +210,83 @@ class ServerlessReact {
       `.${PLUGIN_NAME}`
     );
 
-    // TODO use config.entry as a fallback
-    // config.entry = path.join(
-    //   this.serverlessConfig.servicePath,
-    //   this.pluginConfig.entryPoint || "src/index.js"
-    // );
-
-    // TODO appSrc
-    // TODO publicUrlOrPath
-
-    // TODO Copy public dir
+    fs.emptyDirSync(config.output.path);
+    fs.copySync(paths.appPublic, config.output.path, {
+      dereference: true,
+      filter: (file) => file !== paths.appHtml,
+    });
 
     const compiler = webpack(config);
 
     return new Promise((resolve, reject) => {
+      this.log.verbose(`[${config.entry}] Starting webpack build...`);
+
       compiler.run((err, stats) => {
-        if (err) {
-          return reject(err);
-        }
-        if (!stats) {
-          return reject(new Error("No stats from webpack"));
-        }
-        if (stats.hasErrors()) {
-          // TODO Formatting like build.js
-          return reject(new Error(stats.toJson().errors?.join("\n\n")));
+        try {
+          this.handleWebpackError(config, err);
+        } catch (error: any) {
+          this.log.error(`[${config.entry}] ${error.message}`);
+          return reject();
         }
 
-        // TODO fail on process.env.CI + warnings
-        console.log("Compiled with warnings.\n");
-        console.log(stats.toJson().warnings?.join("\n\n"));
+        try {
+          this.handleWebpackStats(config, stats);
+        } catch (error: any) {
+          this.log.error(`[${config.entry}] ${error.message}`);
+          return reject();
+        }
 
-        resolve();
+        this.log.verbose(`[${config.entry}] Webpack build complete.`);
+        resolve({ config, compiler });
       });
     });
   };
+
+  watch = async (
+    config: webpack.Configuration,
+    _compiler: webpack.Compiler
+  ) => {
+    this.log.verbose(`[${config.entry}] TODO: Watching for changes...`);
+  };
+
+  handleWebpackError = (
+    _config: webpack.Configuration,
+    error: Error | null | undefined
+  ) => {
+    if (!error) {
+      return;
+    }
+
+    throw new Error(error.message);
+  };
+
+  handleWebpackStats = (
+    _config: webpack.Configuration,
+    stats?: webpack.Stats
+  ) => {
+    if (!stats) {
+      throw new Error(`Webpack did not emit stats.`);
+    }
+
+    const statsJson = stats.toJson();
+
+    const { errors, warnings } = statsJson;
+
+    if (errors && errors.length > 0) {
+      throw new Error(`Webpack failed to compile:\n${errors.join("\n\n")}`);
+    }
+
+    if (warnings && warnings.length > 0) {
+      const message = `Webpack compiled with warnings:\n${warnings.join(
+        "\n\n"
+      )}`;
+      if (process.env.CI) {
+        throw new Error(message);
+      } else {
+        this.log.warning(message);
+      }
+    }
+  };
 }
 
 module.exports = ServerlessReact;

tsconfig.json

@@ -4,7 +4,7 @@
     /* Basic Options */
     "incremental": true,
     "target": "ESNext",
-    "module": "Node16",
+    "module": "CommonJS",
     "rootDir": "./src",
     "outDir": "./",
     "sourceMap": false,
@@ -13,7 +13,6 @@
 
     /* Strict Type-Checking Options */
     "strict": true,
-    "noImplicitAny": true,
     "strictNullChecks": true,
     "strictFunctionTypes": true,
     "strictBindCallApply": true,
@@ -28,10 +27,8 @@
     "noFallthroughCasesInSwitch": true,
 
     /* Module Resolution Options */
-    "moduleResolution": "Node16",
     "baseUrl": "./",
     "esModuleInterop": true,
-    "resolveJsonModule": true,
 
     /* Experimental Options */
     "experimentalDecorators": true,
@@ -40,5 +37,5 @@
     /* Advanced Options */
     "forceConsistentCasingInFileNames": true
   },
-  "exclude": ["node_modules/**/*"]
+  "exclude": ["node_modules/**/*", "examples/**/*"]
 }

yarn.lock

@@ -1939,6 +1939,14 @@
     "@types/qs" "*"
     "@types/serve-static" "*"
 
+"@types/fs-extra@^11.0.4":
+  version "11.0.4"
+  resolved "https://registry.yarnpkg.com/@types/fs-extra/-/fs-extra-11.0.4.tgz#e16a863bb8843fba8c5004362b5a73e17becca45"
+  integrity sha512-yTbItCNreRooED33qjunPthRcSjERP1r4MqCZc7wv0u2sUkzTFp45tgUfS5+r7FrZPdmCCNflLhVSP/o+SemsQ==
+  dependencies:
+    "@types/jsonfile" "*"
+    "@types/node" "*"
+
 "@types/graceful-fs@^4.1.2":
   version "4.1.9"
   resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.9.tgz#2a06bc0f68a20ab37b3e36aa238be6abdf49e8b4"
@@ -1992,6 +2000,13 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
+"@types/jsonfile@*":
+  version "6.1.4"
+  resolved "https://registry.yarnpkg.com/@types/jsonfile/-/jsonfile-6.1.4.tgz#614afec1a1164e7d670b4a7ad64df3e7beb7b702"
+  integrity sha512-D5qGUYwjvnNNextdU59/+fI+spnwtTFmyQP0h+PfIOSkNfpU6AOICUOkm4i0OnSk+NyjdPJrxCDro0sJsWlRpQ==
+  dependencies:
+    "@types/node" "*"
+
 "@types/mime@*":
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/@types/mime/-/mime-3.0.4.tgz#2198ac274de6017b44d941e00261d5bc6a0e0a45"
@@ -9046,7 +9061,7 @@ webpack-sources@^3.2.3:
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
-webpack@^5, webpack@^5.64.4, webpack@^5.90.0:
+webpack@^5, webpack@^5.64.4:
   version "5.90.0"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.90.0.tgz#313bfe16080d8b2fee6e29b6c986c0714ad4290e"
   integrity sha512-bdmyXRCXeeNIePv6R6tGPyy20aUobw4Zy8r0LUS2EWO+U+Ke/gYDgsCh7bl5rB6jPpr4r0SZa6dPxBxLooDT3w==