refactor: code

[alexander-akait]

This PR contains a:

• bugfix
• new feature
• code refactor
• test update
• documentation update
• typo fix
• metadata update

Motivation / Use-Case

refactor code

Breaking Changes

No

Additional Info

No

[codecov]

Codecov Report

Attention: Patch coverage is 94.64286% with 3 lines in your changes are missing coverage. Please review.

Project coverage is 97.55%. Comparing base (1258fdd) to head (1a138b4).

Files	Patch %	Lines
src/utils/compatibleAPI.js	91.66%	3 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1770      +/-   ##
==========================================
+ Coverage   97.13%   97.55%   +0.41%     
==========================================
  Files          10       10              
  Lines         454      450       -4     
  Branches      135      134       -1     
==========================================
- Hits          441      439       -2     
+ Misses         12       10       -2     
  Partials        1        1              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[kumar303]

Hmm, I am getting a crash on Node 20.11.1 after upgrading webpack-dev-middleware to 7.1.0. Is that Node version supported?

┃ node:internal/streams/readable:933
┃   dest.on('unpipe', onunpipe);
┃        ^
┃ TypeError: dest.on is not a function
┃     at ReadStream.Readable.pipe (node:internal/streams/readable:933:8)
┃     at send (/home/.../app/node_modules/webpack-dev-middleware/dist/utils/compatibleAPI.js:270:20)
┃     at processRequest (/home/.../app/node_modules/webpack-dev-middleware/dist/middleware.js:161:7)
┃     at ready (/home/.../app/node_modules/webpack-dev-middleware/dist/utils/ready.js:16:5)
┃     at devMiddlewareInstance (/home/.../app/node_modules/webpack-dev-middleware/dist/middleware.js:48:5)
...

[alexander-akait]

@kumar303 We support 20.x version, can you create reproducible test repo? We have CI and tests on such version...

[kumar303]

Ah, ok, so this is maybe only happening to our application. I'm not sure what's going on or how to reproduce it in isolation. My team is invoking webpack-dev-middleware through custom code that looks like it's a compatibility layer for koa

📄 code

import type {ServerResponse} from 'http';

import type WebpackDevMiddleware from 'webpack-dev-middleware';
import type {Middleware} from 'koa';

const webpackDevMiddlewareKoaPatched = (
  devMiddlewareInstance: ReturnType<typeof WebpackDevMiddleware>,
): Middleware => {
  // create promise reference that resolves when the dev middleware is ready to accept connections,
  // so on subsequent visits, resolving this same promise would yield it's initial fufilled value
  const devMiddlewareReady = new Promise((resolve) => {
    devMiddlewareInstance.waitUntilValid(() => resolve(true));
  });

  return async (ctx, next) => {
    const init = new Promise<void>((resolve) => {
      devMiddlewareInstance(
        ctx.req,
        {
          end: (content: unknown) => {
            ctx.body = content;
            resolve();
          },
          getHeader: ctx.get.bind(ctx),
          setHeader: ctx.set.bind(ctx),
          locals: ctx.state,
        } as unknown as ServerResponse,
        () => resolve(next()),
      );
    });

    await Promise.all([init, devMiddlewareReady]);
  };
};

export default webpackDevMiddlewareKoaPatched;

[kumar303]

Calling devMiddlewareInstance.waitUntilValid() seems to trigger the error.

[alexander-akait]

hm we don't have official compaibility with koa, but I am glad to add it, sounds like koa doesn't support streams... that is weird to be honetly, because Node.js supports them, if you provide a small full example how you use it I will look and try to fix it ASAP

[kumar303]

This is how we use the code above.

  import Koa from 'koa'; // 2.15.0
  import webpackDevMiddleware from 'webpack-dev-middleware';
  import webpackDevMiddlewareKoaPatched from '<the code shown two comments above this one>';

  const app = new Koa();

  app.use(
    webpackDevMiddlewareKoaPatched(
      webpackDevMiddleware(multiCompiler, {
        writeToDisk: true,
        stats: 'errors-only',
        publicPath: config.output!.publicPath,
      }),
    ),
  );

Is this enough to help? Thanks for taking a look 🙏

[alexander-akait]

Investigate your problem

[alexander-akait]

The problem is here:

{
          end: (content: unknown) => {
            ctx.body = content;
            resolve();
          },
          getHeader: ctx.get.bind(ctx),
          setHeader: ctx.set.bind(ctx),
          locals: ctx.state,
        }

Because it is not ServerResponse, please use ctx.res instead, but I will try to add the official koa support

[kumar303]

{...} as unknown as ServerResponse

D'oh. I see this now. Thanks for the second pair of eyes!

[alexander-akait]

Not a big problem - #1792, most tests were passed, tomorrow I will create koaWrapper/improve doc/fix some tests

[kumar303]

Just to report back -- we switched to the koa wrapper and it's working great 🎉 Thanks so much.