feat: add support for more frameworks other than express only

[EslamHiko]

This PR contains a:

• [ ] bugfix
• [x] new feature
• [ ] code refactor
• [x] test update
• [ ] typo fix
• [ ] metadata update

Motivation / Use-Case

fix: https://github.com/webpack/webpack-dev-middleware/issues/602

Breaking Changes

No

Additional Info

I'm not sure if my tests are enough.

[codecov[bot]]

Codecov Report

Merging #617 (459f2c0) into master (adeca2d) will increase coverage by 0.05%. The diff coverage is 100.00%.

@@            Coverage Diff             @@
##           master     #617      +/-   ##
==========================================
+ Coverage   99.56%   99.61%   +0.05%     
==========================================
  Files           9       10       +1     
  Lines         231      262      +31     
  Branches       71       81      +10     
==========================================
+ Hits          230      261      +31     
  Misses          1        1              

Impacted Files	Coverage Δ
src/middleware.js	100.00% <100.00%> (ø)
src/utils/compatibility.js	100.00% <100.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update adeca2d...459f2c0. Read the comment docs.

[EslamHiko]

Some Important notes about my last commit :

• for 404 and errors express Content-Type header is always text/html; charset=utf-8 but fastify Content-Type is application/json; charset=utf-8, I tried to set the header before resolve(goNext()) but it threw an error.
• express send provides Content-Length and Content-Type headers and so I created src/utils/getContentLength.js and src/utils/getUnknownContentType.js so I can add these headers manually before res.end() I took the logic from express.send
• I changed phtml here to phtml2 and custom here to customext separated mimeTypes tests because when I run all the tests they don't pass however If I run both of them a lone they pass, that happened because mime.types['custom'] & mime.types['phtml'] existed maybe because the tests are sync or the server didn't close proberly or there was some kind of cache, however changing them doesn't break the logic of the tests because phtml2 & customext still are unknown MIME types separating these tests allowed me to force order the tests so we can test both the extensions without changing them.

[EslamHiko]

/cc @evilebottnawi

[alexander-akait]

/cc @EslamHiko sorry for delay, your ping is lost somewhere :disappointed: Can you want to continue work?

[alexander-akait]

I think we need to add support for:

• fastify
• koa
• hapi

[EslamHiko]

@evilebottnawi sure, I'll add the other frameworks in the test as well :smiley:

[alexander-akait]

@EslamHiko great! Thanks for help

[EslamHiko]

@evilebottnawi I'm afraid I can't support koa and hapi both are totally different than express.

Hapi must have plugins like this: https://hapi.dev/tutorials/expresstohapi/?lang=en_US#creating Koa doesn't pass the traditional (req, res, next).

Now it supports all the framework that its response object extends Node.js http.ServerResponse

[alexander-akait]

I think we need test polka too.

• Hapi - I think we can create helper:

const webpackDevMiddleware = require('webpack-dev-middleware').koa;

What do you think?

• Koa - can you clarify? I think we can rewrite some of parts to support it

[hiroppy]

Let's separate PR if you support others. I think the minimum start is better and to discuss this topic is good but I want to discuss at issues.

[EslamHiko]

@hiroppy I totally agree, I could work on supporting koa and I passed most of the tests but it has problems with changing publicPath It'll need so much debugging. So let's review this PR.

[alexander-akait]

@hiroppy

Let's separate PR if you support others.

Agree

I think the minimum start is better and to discuss this topic is good but I want to discuss at issues.

We can discuss this.

My plan is pretty simple:

• extract webpack hot client from webpack-dev-server (it will be done for v5, I will create roadmap) to own middleware and deprecated https://github.com/webpack-contrib/webpack-hot-client and https://github.com/webpack-contrib/webpack-hot-middleware (maybe we will get webpack-hot-middleware name)
• refactor webpack-dev-server using webpack-hot-middleware
• improve compatibility with other server frameworks (not only express)

Pros:

• Developers will be able to configure own server as they need without any hacks or using outdated packages
• Official maintainable hot middleware
• Easy to tests dev server and easy to maintenance
• Ability to create own dev servers (it would be very convenient for complex solutions) and ability to build a server using any popular server framework
• happy faces

I believe that we can start this work here by introducing compatibility with popular solutions, this list may increase in the future, but I do not see any problems with testing.

[alexander-akait]

/cc @hiroppy friendly ping

[hiroppy]

@evilebottnawi yes, agree with your Pros. @EslamHiko can you work on this plan?

[EslamHiko]

@hiroppy I can work on improve compatibility with other server frameworks I need more info for extract webpack hot client from webpack-dev-server how can I extract it?, about this PR is there anything else I can do?

[alexander-akait]

@EslamHiko

I need more info for extract webpack hot client from webpack-dev-server how can I extract it

We'll come back to this after implementing support for most of the solutions here. I can even give a roadmap where you can help us

[EslamHiko]

@evilebottnawi currently I put resGetHeader,resSetHeader,getContentLength,getUnknownContentType,sendContent in compatibility.js. getFilenameFromUrl, getPaths, handleRangeHeaders, ready, setupHooks, setupOutputFileSystem, setupWriteToDisk are separated. should I add any of them to compatibility.js ?

[alexander-akait]

@EslamHiko No, only utils for compatibility.js

[alexander-akait]

currently I put resGetHeader,resSetHeader,getContentLength,getUnknownContentType,sendContent in compatibility.js.

I think you forgot to send commit, also please fix lint problems npm run lint

[EslamHiko]

@evilebottnawi not sure why tests are hanging :confused:

[hiroppy]

@EslamHiko sorry could you rebase?

[alexander-akait]

Now we have official readme how to work with fastify and suppor it with test, anyway thank you for your work