dev admin webpack plugin for fastify (#1474)

* Fastify: Webpack dev plugin

* Use async

* Add missing dep

packages/electrode-archetype-react-app-dev/lib/webpack-dev-fastify.js

@@ -0,0 +1,31 @@
+"use strict";
+/* eslint-disable no-console, no-magic-numbers */
+
+const fastifyPlugin = require("fastify-plugin");
+
+const archetype = require("electrode-archetype-react-app/config/archetype");
+
+const AppDevMiddleware = require("./app-dev-middleware");
+
+async function register(server) {
+  if (!archetype.webpack.devMiddleware) {
+    console.error(
+      "dev-fastify plugin was loaded but WEBPACK_DEV_MIDDLEWARE is not true. Skipping."
+    );
+    return;
+  }
+
+  const middleware = new AppDevMiddleware({});
+
+  middleware.setup();
+
+  server.addHook("onRequest", async request => {
+    request.app.webpackDev = middleware.webpackDev;
+  });
+
+  return;
+}
+
+module.exports = fastifyPlugin(register, {
+  name: "electrode-archetype-react-app-dev"
+});

packages/electrode-archetype-react-app-dev/package.json

@@ -70,6 +70,7 @@
     "electrode-cdn-file-loader": "^1.0.0",
     "electrode-hapi-compat": "^1.2.0",
     "electrode-node-resolver": "^2.0.0",
+    "fastify-plugin": "^1.6.0",
     "file-loader": "^2.0.0",
     "filter-scan-dir": "^1.0.9",
     "finalhandler": "^1.1.1",

packages/electrode-archetype-react-app-dev/test/spec/dev-admin/webpack-dev-relay.spec.js

@@ -5,7 +5,7 @@ const WebpackDevRelay = require("../../../lib/dev-admin/webpack-dev-relay");
 const { asyncVerify } = require("run-verify");
 const _ = require("lodash");
 
-describe.only("webpack-dev-relay", function() {
+describe("webpack-dev-relay", function() {
   it("should clear webpack dev data if dev server exits", () => {
     const wdr = new WebpackDevRelay();
     const wds = new EventEmitter();

packages/electrode-archetype-react-app-dev/test/spec/dev-fastify.spec.js

@@ -0,0 +1,69 @@
+"use strict";
+const mockRequire = require("mock-require");
+
+describe("dev-fastify", function() {
+  let fakeServer;
+  let hooks;
+  const webpackConfig = {
+    devMiddleware: true
+  };
+
+  before(() => {
+    mockRequire("fastify-plugin", (register, params) => {
+      return {
+        isMockFastifyPlugin: true,
+        register,
+        params
+      };
+    });
+    mockRequire("electrode-archetype-react-app/config/archetype", {
+      webpack: webpackConfig
+    });
+  });
+
+  beforeEach(() => {
+    hooks = {};
+    webpackConfig.devMiddleware = true;
+    fakeServer = {
+      addHook: (event, func) => {
+        hooks[event] = func;
+      }
+    };
+  });
+
+  it("fastify exports module", () => {
+    const fastifyMod = require("../../lib/webpack-dev-fastify");
+    expect(fastifyMod.isMockFastifyPlugin).true;
+    expect(fastifyMod.params.name).eq("electrode-archetype-react-app-dev");
+    expect(fastifyMod.register).exist;
+  });
+
+  it("if WEBPACK_DEV_MIDDLEWARE is not true, skip with console log", () => {
+    webpackConfig.devMiddleware = false;
+    const fastifyMod = require("../../lib/webpack-dev-fastify");
+    expect(fastifyMod.isMockFastifyPlugin).true;
+    expect(fastifyMod.register).exist;
+    fastifyMod.register(fakeServer);
+    expect(hooks.onRequest).not.exist;
+  });
+  it("on request hook is attached", () => {
+    const fastifyMod = require("../../lib/webpack-dev-fastify");
+    expect(fastifyMod.isMockFastifyPlugin).true;
+    expect(fastifyMod.register).exist;
+    fastifyMod.register(fakeServer);
+    expect(hooks.onRequest).exist;
+  });
+
+  it("calling request hook sets webpackDev", () => {
+    const fastifyMod = require("../../lib/webpack-dev-fastify");
+    expect(fastifyMod.isMockFastifyPlugin).true;
+    expect(fastifyMod.register).exist;
+    fastifyMod.register(fakeServer);
+    expect(hooks.onRequest).exist;
+    const fakeRequest = {
+      app: {}
+    };
+    hooks.onRequest(fakeRequest);
+    expect(fakeRequest.app.webpackDev).exist;
+  });
+});

packages/electrode-archetype-react-app-dev/test/spec/generate-config.spec.js

@@ -23,7 +23,7 @@ describe("generate-config", function() {
   describe("generateConfig", () => {
     it("If the configFilename is development.js and only webpack.config.development.js exists, fall back to archetype webpack", () => {
       const { generateConfig } = require(moduleName);
-      const configFilename = "development.js";
+      const configFilename = "webpack.config.dev.js";
       const defaultFilename = "webpack.config.development.js";
 
       const defaultWebpackPath = Path.join(process.cwd(), defaultFilename);
@@ -44,7 +44,7 @@ describe("generate-config", function() {
           }
         },
         profileNames: [ "_base", "_production" ],
-        configFilename
+        configFilename: "development.js"
       }, true);
 
       expect(config).to.deep.equal(archWebpackContents);
@@ -87,9 +87,10 @@ describe("generate-config", function() {
 
     it("If the configName is coverage.js and only coverage.js exists, fall back to archetype webpack", () => {
       const { generateConfig } = require(moduleName);
-      const configFilename = "coverage.js";
+      const defaultFilename = "coverage.js";
+      const configFilename = "webpack.config.coverage.js";
 
-      const configWebpackPath = Path.join(process.cwd(), configFilename);
+      const configWebpackPath = Path.join(process.cwd(), defaultFilename);
       const configWebpackContents = {test: 5};
       mockRequire(configWebpackPath, configWebpackContents);
 
@@ -107,7 +108,7 @@ describe("generate-config", function() {
           }
         },
         profileNames: [ "_base", "_production" ],
-        configFilename
+        configFilename: "coverage.js"
       }, true);
 
       expect(config).to.deep.equal(archWebpackContents);
@@ -151,12 +152,13 @@ describe("generate-config", function() {
     it("If the configName is production.js and only production.js exists, fall back to archetype webpack", () => {
       const { generateConfig } = require(moduleName);
       const configFilename = "production.js";
+      const archFilename = "webpack.config.js";
 
       const configWebpackPath = Path.join(process.cwd(), configFilename);
       const configWebpackContents = {test: 9};
       mockRequire(configWebpackPath, configWebpackContents);
 
-      const archWebpackPath = Path.join(Path.resolve("archetype/config/webpack"), configFilename);
+      const archWebpackPath = Path.join(Path.resolve("archetype/config/webpack"), archFilename);
       const archWebpackContents = {test: 10};
       mockRequire(archWebpackPath, archWebpackContents);
 
@@ -182,13 +184,14 @@ describe("generate-config", function() {
     it("If the configName is production.js and only webpack.config.production.js exists, fall back to archetype webpack", () => {
       const { generateConfig } = require(moduleName);
       const configFilename = "production.js";
+      const archFilename = "webpack.config.js";
       const defaultFilename = "webpack.config.production.js";
 
       const configWebpackPath = Path.join(process.cwd(), defaultFilename);
       const configWebpackContents = {test: 11};
       mockRequire(configWebpackPath, configWebpackContents);
 
-      const archWebpackPath = Path.join(Path.resolve("archetype/config/webpack"), configFilename);
+      const archWebpackPath = Path.join(Path.resolve("archetype/config/webpack"), archFilename);
       const archWebpackContents = {test: 12};
       mockRequire(archWebpackPath, archWebpackContents);