Introduce custom hooks

They are useful for other plugins to tap into certain points of the
build process. In this case a `devServerRunning` hook is introduced,
which would allow a 3rd party plugin to, for example, display a QR code
with the address the app is running on once the dev server started.

Author: tooxie

packages/cli/lib/lib/webpack/hooks.js

@@ -0,0 +1,5 @@
+const SyncHook = require('tapable').SyncHook;
+
+module.exports = {
+	devServerRunning: new SyncHook(),
+};

packages/cli/lib/lib/webpack/run-webpack.js

@@ -10,6 +10,7 @@ const clientConfig = require('./webpack-client-config');
 const serverConfig = require('./webpack-server-config');
 const transformConfig = require('./transform-config');
 const { error, isDir, warn } = require('../../util');
+const { devServerRunning } = require('./hooks');
 
 async function devBuild(env) {
 	let userPort = parseInt(process.env.PORT || env.port, 10) || 8080;
@@ -68,6 +69,7 @@ async function devBuild(env) {
 			}
 
 			showStats(stats, false);
+			devServerRunning.call();
 		});
 
 		compiler.hooks.failed.tap('CliDevPlugin', rej);

packages/cli/tests/hooks.test.js

@@ -0,0 +1,32 @@
+const { create, watch } = require('./lib/cli');
+const { hooks } = require('./lib/utils');
+
+describe('preact', () => {
+	let intervalId;
+
+	afterEach(() => {
+		clearInterval(intervalId);
+		intervalId = null;
+	});
+
+	it('should emit a devServerRunning event after the server starts', (done) => {
+		let hookCalled;
+		hooks.devServerRunning.tap('TestPlugin', () => {
+			hookCalled = true;
+		});
+
+		create('default').then((app) => {
+			watch(app, 8083).then((server) => {
+				// We need to wait not only for the server to start but also for the
+				// stats to be printed to stdout.
+				intervalId = setInterval(() => {
+					if (hookCalled) {
+						expect(hookCalled).toBe(true);
+						server.close();
+						done();
+					}
+				}, 1000);
+			});
+		});
+	});
+});

packages/cli/tests/lib/utils.js

@@ -5,6 +5,7 @@ const minimatch = require('minimatch');
 const pRetry = require('p-retry');
 const { promisify } = require('util');
 const glob = promisify(require('glob').glob);
+const hooks = require('../../lib/lib/webpack/hooks');
 
 const PER = 0.05; // % diff
 const LOG = !!process.env.WITH_LOG;
@@ -68,4 +69,5 @@ module.exports = {
 	sleep,
 	hasKey,
 	isWithin,
+	hooks,
 };