Introduce `devServerRunning` hook

[tooxie]

What kind of change does this PR introduce?

A build-related feature.

Did you add tests for your changes?

Yes.

Summary

Custom hooks 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:

Usage:

import hooks from 'preact-cli/lib/lib/webpack/hooks';

hooks.devServerRunning.tap('QrCodePlugin', () => {
  printQrCode();
});

Does this PR introduce a breaking change?

No.

Other information

Environment Info:
  System:
    OS: macOS 11.3.1
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
  Binaries:
    Node: 12.13.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.12.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 91.0.4472.77
    Firefox: 88.0.1
    Safari: 14.1
  npmPackages:
    preact: ^10.3.1 => 10.5.13 
    preact-cli: ^3.0.0 => 3.0.5 
    preact-render-to-string: ^5.1.4 => 5.1.19 
    preact-router: ^3.2.1 => 3.2.1 
  npmGlobalPackages:
    preact-cli: 3.0.5

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 1e7a9992f694ad3bb3d9f68c3145e01d9cb201b4

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[ForsakenHarmony]

Do any other projects have hooks like this in place?

[tooxie]

Hi @ForsakenHarmony, thanks for taking a look into this PR. I have not looked at other projects, and honestly I am not sure which projects you are referring to, sorry. I would gladly check if you point me in the right direction.

Let me give you some context as to where this PR is coming from. I am using preact-cli to develop a PWA which for the moment is mobile only. It's not uncommon for me to change networks (home, office, public wifi, friend's, etc) so it's orders of magnitude more convenient to have a QR code I can scan every time I fire up the server instead of checking the IP the server is running on and type it into the phone. And by using qrcode-terminal the generation is extremely lightweight.

At first I thought about introducing the QR code generation into preact-cli but it felt that we could reuse some of the webpack QR generation libraries by introducing a hook, instead of baking the code in, and that tapping into the build process could be useful for some future use case I can't foresee. That's why I went down the hook route.

So that's the rationale for this PR. Do you see a place for this feature in the project, either as a hook or generating the QR code directly in preact-cli? Or do you think this is out of scope?

Again, thanks a lot for taking the time to review my PR, and for all the great work you are all putting into this project :)

[tooxie]

Hi @ForsakenHarmony, any comments on this? I would appreciate a response to know whether I should work on it further or just close it.

[ForsakenHarmony]

@tooxie sorry for the late reply

I meant other clis like next.js / vue cli / create react app

Do they have a similar hook or another way to achieve this?

Also, I have to say preact-cli isn't really very well maintained right now as you might have noticed (partially my fault) If you can switch to wmr that might be a good option for you