feat: Overlay support request

[dlmr]

• This is a bug
• This is a feature request
• This is a modification request

Hi, I have gone away from the template a little to make it more clear, feel free to close if it was out of line.

Overlay support

The current implementation logs everything in the console in a really nice way and it would be sweet to also have the option to use an overlay similar to the one used in create-react-app #1101 and like what can be enabled in Webpack Hot Middleware using the overlay option.

This can probably be supported in one of two ways.

1. Adding a overlay that can be enabled through configuration.
2. Add documentation on how this can be done manually using a standalone overlay with potentially some new hooks for integration.

Or maybe this is out of scope entirely?

[shellscape]

Thanks for the feature request 🍺 No worries about the template, you acknowledged it so it's all good.

We're tracking the issue for an overlay here as part of webpack-serve. But the idea that this could be used outside of that ecosystem is interesting. It won't be a feature of this module specifically, but a separate module that can be added into the mix easily - or at least that's the idea. It makes sense because the use of WebSockets wouldn't tie it down to one ecosystem. It's been something on my radar but I haven't been able to dedicate time to it yet.

To address your points:

1. We'd probably opt for a separate module that used the same method of injecting the entry script. Separation of concerns is a good thing, and prevents the kind of mess that webpack-dev-server suffers from now.

2. Definitely. That will involve documenting the WebSocket messages that are received by the client, and that's all that's really needed to make this happen on that side of things.

One of the things I really want to do is to take the design of create-react-app's overlay to a new level. It's nice but it makes my eyes bleed from a design perspective haha. SO yes, this is definitely a goal.

[dlmr]

Thanks for the quick reply!

Seems like a webpack-overlay ✨ would be a nice addition to the ecosystem that works together with the WebSocket server that webpack-hot-client adds.

If one would want to explore this a little more what do you think is the right approach? Looking at the code it seems that adding a handler here would be a pragmatic approach but maybe not the one we want?

If we would go for that I guess we could either add an API/option to webpack-hot-client that allows for registration of handlers.

// We will always use the default handler first
handlers: [
  webpackOverlay()  
]

Or probably more preferable expose a function that makes it possible to register new handlers which could be utilized by webpack plugins.

// Adding the handler in the plugin
// The plugin would also automatically insert the needed entry script 
const registerHandler = require('webpack-hot-client/client/register');
registerHandler({
  errors(errors) {
    // Show the error in a overlay
  },
  // additional supported message types
});

// Project config
const WebpackOverlay = require('webpack-overlay');
module.exports = {
  // webpack config
  plugins: [
    new WebpackOverlay()
  ]
};

Or do you think it's better to let each integration that want to use the WebSocket messages to reimplement the socket.js part?

[shellscape]

Well the beauty part of using WebSockets in this context is that you don't have to modify the hot-client source at all to accomplish this.

On line 17 you can see how a new socket is created in the client.

You can see here: https://github.com/webpack-contrib/webpack-hot-client/blob/master/lib/client/index.js#L43 that the handler is just an Object containing functions - it's a shortcut to wire things up.

You'd basically just want to duplicate that in a lighter-weight script, that we'd then use the same techniques found in this module, to automatically add it to a compiler's entries.

One of the first steps I was planning on taking is abstracting out the code that does the automatic entry injection. I haven't thought too much about how that should look, however.

[shellscape]

Of course, you could write a client script that just connected to the WebSocket Server in the same way, and then manually add it to entries on your end if you're in immediate need of an overlay. You'd have to specify the right loaders (assuming there'd be css involved). But it should be doable without too much effort.

[dlmr]

My thought process with being able to register handlers was to avoid duplicating the logging when connecting to the server which would be the case if directly using the socket while still using the reconnect logic and parsing.

But as you say it will work without making modifications and I can start there and explore. 🙂

[shellscape]

Yeah that connection management and such can also be abstracted. I just haven't gotten there just yet, but it's an opportunity.

I'm going to spin up a new repo and create an issue to track what needs to happen to make the overlay module happen, and I'll tag you in that issue so we can continue it there.

[shellscape]

Closing in favor for https://github.com/webpack-contrib/webpack-client-overlay/issues/1