Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Contributing in webpack-dev-middleware
# Contributing in @rspack/dev-middleware

We'd always love contributions to further improve the webpack / webpack-contrib ecosystem!
Here are the guidelines we'd like you to follow:
Comment on lines +1 to 4
Expand Down Expand Up @@ -140,7 +140,7 @@ module. Thankfully, Github provides a means to do this. Add a dependency to the
```json
{
"devDependencies": {
"webpack-dev-middleware": "webpack/webpack-dev-middleware#{id}/head"
"@rspack/dev-middleware": "rstackjs/rspack-dev-middleware#{id}/head"
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

critical

There seems to be a typo in the organization name. It should be rspackjs instead of rstackjs to match the @rspack/dev-middleware package's organization.

Suggested change
"@rspack/dev-middleware": "rstackjs/rspack-dev-middleware#{id}/head"
"@rspack/dev-middleware": "rspackjs/rspack-dev-middleware#{id}/head"

}
}
```
Expand Down
102 changes: 52 additions & 50 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@
[![discussion][discussion]][discussion-url]
[![size][size]][size-url]

# webpack-dev-middleware
# @rspack/dev-middleware

An express-style development middleware for use with [Rspack](https://rspack.rs) and webpack-compatible compilers. It serves the files emitted by the compiler from memory.
Comment on lines 12 to +16

An express-style development middleware for use with [webpack](https://webpack.js.org)
bundles and allows for serving of the files emitted from webpack.
This should be used for **development only**.

Some of the benefits of using this middleware include:
Expand All @@ -29,7 +29,7 @@ Some of the benefits of using this middleware include:
First thing's first, install the module:

```console
npm install webpack-dev-middleware --save-dev
npm install @rspack/dev-middleware -D
```

> [!WARNING]
Expand All @@ -41,7 +41,7 @@ npm install webpack-dev-middleware --save-dev
```js
const express = require("express");
const webpack = require("webpack");
const middleware = require("webpack-dev-middleware");
const middleware = require("@rspack/dev-middleware");

const compiler = webpack({
// webpack options
Expand All @@ -51,7 +51,7 @@ const app = express();

app.use(
middleware(compiler, {
// webpack-dev-middleware options
// options
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

For consistency and clarity, it would be better to use // @rspack/dev-middleware options as the placeholder comment, similar to another part of this file.

Suggested change
// options
// @rspack/dev-middleware options

}),
);

Expand Down Expand Up @@ -100,7 +100,7 @@ eg. `{ "X-Custom-Header": "yes" }`
or

```js
webpackDevMiddleware(compiler, {
middleware(compiler, {
headers: () => ({
"Last-Modified": new Date(),
}),
Expand All @@ -110,7 +110,7 @@ webpackDevMiddleware(compiler, {
or

```js
webpackDevMiddleware(compiler, {
middleware(compiler, {
headers: (req, res, context) => {
res.setHeader("Last-Modified", new Date());
},
Expand All @@ -120,7 +120,7 @@ webpackDevMiddleware(compiler, {
or

```js
webpackDevMiddleware(compiler, {
middleware(compiler, {
headers: [
{
key: "X-custom-header",
Expand All @@ -137,7 +137,7 @@ webpackDevMiddleware(compiler, {
or

```js
webpackDevMiddleware(compiler, {
middleware(compiler, {
headers: () => [
{
key: "X-custom-header",
Expand Down Expand Up @@ -242,7 +242,9 @@ Type: `Boolean|Function`
Default: `false`

If `true`, the option will instruct the module to write files to the configured location on disk as specified in your `webpack` config file.
_Setting `writeToDisk: true` won't change the behavior of the `webpack-dev-middleware`, and bundle files accessed through the browser will still be served from memory._

_Setting `writeToDisk: true` won't change the behavior of `@rspack/dev-middleware`, and bundle files accessed through the browser will still be served from memory._

This option provides the same capabilities as the [`WriteFilePlugin`](https://github.com/gajus/write-file-webpack-plugin/pulls).

This option also accepts a `Function` value, which can be used to filter which files are written to disk.
Expand Down Expand Up @@ -313,12 +315,12 @@ middleware(compiler, {

## API

`webpack-dev-middleware` also provides convenience methods that can be use to
`@rspack/dev-middleware` also provides convenience methods that can be use to
interact with the middleware at runtime:

### `close(callback)`

Instructs `webpack-dev-middleware` instance to stop watching for file changes.
Instructs the `@rspack/dev-middleware` instance to stop watching for file changes.

#### Parameters

Expand All @@ -337,7 +339,7 @@ const compiler = webpack({
/* Webpack configuration */
});

const middleware = require("webpack-dev-middleware");
const middleware = require("@rspack/dev-middleware");

const instance = middleware(compiler);

Expand All @@ -354,7 +356,7 @@ setTimeout(() => {

### `invalidate(callback)`

Instructs `webpack-dev-middleware` instance to recompile the bundle, e.g. after a change to the configuration.
Instructs the `@rspack/dev-middleware` instance to recompile the bundle, e.g. after a change to the configuration.

#### Parameters

Expand All @@ -373,7 +375,7 @@ const compiler = webpack({
/* Webpack configuration */
});

const middleware = require("webpack-dev-middleware");
const middleware = require("@rspack/dev-middleware");

const instance = middleware(compiler);

Expand Down Expand Up @@ -414,7 +416,7 @@ const compiler = webpack({
/* Webpack configuration */
});

const middleware = require("webpack-dev-middleware");
const middleware = require("@rspack/dev-middleware");

const instance = middleware(compiler);

Expand Down Expand Up @@ -449,7 +451,7 @@ const compiler = webpack({
/* Webpack configuration */
});

const middleware = require("webpack-dev-middleware");
const middleware = require("@rspack/dev-middleware");

const instance = middleware(compiler);

Expand All @@ -476,7 +478,7 @@ But there is a solution to avoid it - mount the middleware to a non-root route,
```js
const express = require("express");
const webpack = require("webpack");
const middleware = require("webpack-dev-middleware");
const middleware = require("@rspack/dev-middleware");

const compiler = webpack({
// webpack options
Expand All @@ -489,7 +491,7 @@ const app = express();
app.use(
"/dist/",
middleware(compiler, {
// webpack-dev-middleware options
// @rspack/dev-middleware options
}),
);

Expand All @@ -504,12 +506,12 @@ In order to develop an app using server-side rendering, we need access to the
[`stats`](https://github.com/webpack/docs/wiki/node.js-api#stats), which is
generated with each build.

With server-side rendering enabled, `webpack-dev-middleware` sets the `stats` to `res.locals.webpack.devMiddleware.stats`
With server-side rendering enabled, `@rspack/dev-middleware` sets the `stats` to `res.locals.webpack.devMiddleware.stats`
and the filesystem to `res.locals.webpack.devMiddleware.outputFileSystem` before invoking the next middleware,
allowing a developer to render the page body and manage the response to clients.

_Note: Requests for bundle files will still be handled by
`webpack-dev-middleware` and all requests will be pending until the build
`@rspack/dev-middleware` and all requests will be pending until the build
process is finished with server-side rendering enabled._

Example Implementation:
Expand All @@ -518,7 +520,7 @@ Example Implementation:
const express = require("express");
const isObject = require("is-object");
const webpack = require("webpack");
const middleware = require("webpack-dev-middleware");
const middleware = require("@rspack/dev-middleware");

const compiler = webpack({
/* Webpack configuration */
Expand Down Expand Up @@ -606,12 +608,12 @@ Examples of use with other servers will follow here.
const http = require("node:http");
const connect = require("connect");
const webpack = require("webpack");
const devMiddleware = require("webpack-dev-middleware");
const devMiddleware = require("@rspack/dev-middleware");
const webpackConfig = require("./webpack.config.js");

const compiler = webpack(webpackConfig);
const devMiddlewareOptions = {
/** Your webpack-dev-middleware-options */
// options
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

For consistency and clarity, it would be better to use // @rspack/dev-middleware options as the placeholder comment.

Suggested change
// options
// @rspack/dev-middleware options

};
const app = connect();

Expand All @@ -627,12 +629,12 @@ const http = require("node:http");
const finalhandler = require("finalhandler");
const Router = require("router");
const webpack = require("webpack");
const devMiddleware = require("webpack-dev-middleware");
const devMiddleware = require("@rspack/dev-middleware");
const webpackConfig = require("./webpack.config.js");

const compiler = webpack(webpackConfig);
const devMiddlewareOptions = {
/** Your webpack-dev-middleware-options */
// options
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

For consistency and clarity, it would be better to use // @rspack/dev-middleware options as the placeholder comment.

Suggested change
// options
// @rspack/dev-middleware options

};

// eslint-disable-next-line new-cap
Expand All @@ -652,12 +654,12 @@ server.listen(3000);
```js
const express = require("express");
const webpack = require("webpack");
const devMiddleware = require("webpack-dev-middleware");
const devMiddleware = require("@rspack/dev-middleware");
const webpackConfig = require("./webpack.config.js");

const compiler = webpack(webpackConfig);
const devMiddlewareOptions = {
/** Your webpack-dev-middleware-options */
// options
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

For consistency and clarity, it would be better to use // @rspack/dev-middleware options as the placeholder comment.

Suggested change
// options
// @rspack/dev-middleware options

};
const app = express();

Expand All @@ -671,12 +673,12 @@ app.listen(3000, () => console.log("Example app listening on port 3000!"));
```js
const Koa = require("koa");
const webpack = require("webpack");
const middleware = require("webpack-dev-middleware");
const middleware = require("@rspack/dev-middleware");
const webpackConfig = require("./webpack.simple.config");

const compiler = webpack(webpackConfig);
const devMiddlewareOptions = {
/** Your webpack-dev-middleware-options */
// options
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

For consistency and clarity, it would be better to use // @rspack/dev-middleware options as the placeholder comment.

Suggested change
// options
// @rspack/dev-middleware options

};
const app = new Koa();

Expand All @@ -690,7 +692,7 @@ app.listen(3000);
```js
const Hapi = require("@hapi/hapi");
const webpack = require("webpack");
const devMiddleware = require("webpack-dev-middleware");
const devMiddleware = require("@rspack/dev-middleware");
const webpackConfig = require("./webpack.config.js");

const compiler = webpack(webpackConfig);
Expand All @@ -699,7 +701,7 @@ const devMiddlewareOptions = {};
const server = Hapi.server({ port: 3000, host: "localhost" });

await server.register({
plugin: devMiddleware.hapiPlugin(),
plugin: devMiddleware.hapiWrapper(),
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The method hapiPlugin has been renamed to hapiWrapper. This seems to be a functional change that should be noted. The name hapiWrapper is more descriptive of its purpose.

options: {
// The `compiler` option is required
compiler,
Expand All @@ -724,12 +726,12 @@ Fastify interop will require the use of `fastify-express` instead of `middie` fo
```js
const fastify = require("fastify")();
const webpack = require("webpack");
const devMiddleware = require("webpack-dev-middleware");
const devMiddleware = require("@rspack/dev-middleware");
const webpackConfig = require("./webpack.config.js");

const compiler = webpack(webpackConfig);
const devMiddlewareOptions = {
/** Your webpack-dev-middleware-options */
// options
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

For consistency and clarity, it would be better to use // @rspack/dev-middleware options as the placeholder comment.

Suggested change
// options
// @rspack/dev-middleware options

};

await fastify.register(require("@fastify/express"));
Expand All @@ -743,12 +745,12 @@ await fastify.listen(3000);
import { serve } from "@hono/node-server";
import { Hono } from "hono";
import webpack from "webpack";
import devMiddleware from "webpack-dev-middleware";
import devMiddleware from "@rspack/dev-middleware";
import webpackConfig from "./webpack.config.js";

const compiler = webpack(webpackConfig);
const devMiddlewareOptions = {
/** Your webpack-dev-middleware-options */
// options
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

For consistency and clarity, it would be better to use // @rspack/dev-middleware options as the placeholder comment.

Suggested change
// options
// @rspack/dev-middleware options

};

const app = new Hono();
Expand All @@ -762,27 +764,27 @@ serve(app);

Please take a moment to read our contributing guidelines if you haven't yet done so.

[CONTRIBUTING](https://github.com/webpack/sass-loader?tab=contributing-ov-file#contributing)
[CONTRIBUTING](./CONTRIBUTING.md)

## License

[MIT](./LICENSE)

[npm]: https://img.shields.io/npm/v/webpack-dev-middleware.svg
[npm-url]: https://npmjs.com/package/webpack-dev-middleware
[node]: https://img.shields.io/node/v/webpack-dev-middleware.svg
[npm]: https://img.shields.io/npm/v/%40rspack%2Fdev-middleware.svg
[npm-url]: https://www.npmjs.com/package/@rspack/dev-middleware
[node]: https://img.shields.io/node/v/%40rspack%2Fdev-middleware.svg
[node-url]: https://nodejs.org
[tests]: https://github.com/webpack/webpack-dev-middleware/workflows/webpack-dev-middleware/badge.svg
[tests-url]: https://github.com/webpack/webpack-dev-middleware/actions
[cover]: https://codecov.io/gh/webpack/webpack-dev-middleware/branch/main/graph/badge.svg
[cover-url]: https://codecov.io/gh/webpack/webpack-dev-middleware
[tests]: https://github.com/rstackjs/rspack-dev-middleware/actions/workflows/test.yml/badge.svg
[tests-url]: https://github.com/rstackjs/rspack-dev-middleware/actions
Comment on lines +777 to +778
[cover]: https://codecov.io/gh/rstackjs/rspack-dev-middleware/branch/main/graph/badge.svg
[cover-url]: https://codecov.io/gh/rstackjs/rspack-dev-middleware
[discussion]: https://img.shields.io/github/discussions/webpack/webpack
[discussion-url]: https://github.com/webpack/webpack/discussions
[size]: https://packagephobia.com/badge?p=webpack-dev-middleware
[size-url]: https://packagephobia.com/result?p=webpack-dev-middleware
[docs-url]: https://webpack.js.org/guides/development/#using-webpack-dev-middleware
[size]: https://packagephobia.com/badge?p=%40rspack%2Fdev-middleware
[size-url]: https://packagephobia.com/result?p=%40rspack%2Fdev-middleware
Comment on lines 781 to +784
[docs-url]: https://github.com/rstackjs/rspack-dev-middleware#readme
[hash-url]: https://twitter.com/search?q=webpack
[middleware-url]: https://github.com/webpack/webpack-dev-middleware
[stack-url]: https://stackoverflow.com/questions/tagged/webpack-dev-middleware
[middleware-url]: https://github.com/rstackjs/rspack-dev-middleware
[stack-url]: https://stackoverflow.com/questions/tagged/rspack-dev-middleware
Comment on lines +777 to +788
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

critical

There seems to be a typo in the organization name in several URLs. It should be rspackjs instead of rstackjs.

Suggested change
[tests]: https://github.com/rstackjs/rspack-dev-middleware/actions/workflows/test.yml/badge.svg
[tests-url]: https://github.com/rstackjs/rspack-dev-middleware/actions
[cover]: https://codecov.io/gh/rstackjs/rspack-dev-middleware/branch/main/graph/badge.svg
[cover-url]: https://codecov.io/gh/rstackjs/rspack-dev-middleware
[discussion]: https://img.shields.io/github/discussions/webpack/webpack
[discussion-url]: https://github.com/webpack/webpack/discussions
[size]: https://packagephobia.com/badge?p=webpack-dev-middleware
[size-url]: https://packagephobia.com/result?p=webpack-dev-middleware
[docs-url]: https://webpack.js.org/guides/development/#using-webpack-dev-middleware
[size]: https://packagephobia.com/badge?p=%40rspack%2Fdev-middleware
[size-url]: https://packagephobia.com/result?p=%40rspack%2Fdev-middleware
[docs-url]: https://github.com/rstackjs/rspack-dev-middleware#readme
[hash-url]: https://twitter.com/search?q=webpack
[middleware-url]: https://github.com/webpack/webpack-dev-middleware
[stack-url]: https://stackoverflow.com/questions/tagged/webpack-dev-middleware
[middleware-url]: https://github.com/rstackjs/rspack-dev-middleware
[stack-url]: https://stackoverflow.com/questions/tagged/rspack-dev-middleware
[tests]: https://github.com/rspackjs/rspack-dev-middleware/actions/workflows/test.yml/badge.svg
[tests-url]: https://github.com/rspackjs/rspack-dev-middleware/actions
[cover]: https://codecov.io/gh/rspackjs/rspack-dev-middleware/branch/main/graph/badge.svg
[cover-url]: https://codecov.io/gh/rspackjs/rspack-dev-middleware
[discussion]: https://img.shields.io/github/discussions/webpack/webpack
[discussion-url]: https://github.com/webpack/webpack/discussions
[size]: https://packagephobia.com/badge?p=%40rspack%2Fdev-middleware
[size-url]: https://packagephobia.com/result?p=%40rspack%2Fdev-middleware
[docs-url]: https://github.com/rspackjs/rspack-dev-middleware#readme
[hash-url]: https://twitter.com/search?q=webpack
[middleware-url]: https://github.com/rspackjs/rspack-dev-middleware
[stack-url]: https://stackoverflow.com/questions/tagged/rspack-dev-middleware

[chat-url]: https://github.com/webpack/webpack/discussions
[wjo-url]: https://github.com/webpack/webpack.js.org
Comment on lines +787 to 790
4 changes: 2 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

11 changes: 6 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
{
"name": "webpack-dev-middleware",
"name": "@rspack/dev-middleware",
"version": "7.4.5",
"description": "A development middleware for webpack",
"description": "A development middleware for Rspack",
"keywords": [
"rspack",
"webpack",
"middleware",
"development"
],
"homepage": "https://github.com/webpack/webpack-dev-middleware",
"bugs": "https://github.com/webpack/webpack-dev-middleware/issues",
"repository": "webpack/webpack-dev-middleware",
"homepage": "https://github.com/rstackjs/rspack-dev-middleware",
"bugs": "https://github.com/rstackjs/rspack-dev-middleware/issues",
"repository": "rstackjs/rspack-dev-middleware",
Comment on lines +11 to +13
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

critical

There seems to be a typo in the organization name in the homepage, bugs, and repository URLs. It should be rspackjs instead of rstackjs.

Suggested change
"homepage": "https://github.com/rstackjs/rspack-dev-middleware",
"bugs": "https://github.com/rstackjs/rspack-dev-middleware/issues",
"repository": "rstackjs/rspack-dev-middleware",
"homepage": "https://github.com/rspackjs/rspack-dev-middleware",
"bugs": "https://github.com/rspackjs/rspack-dev-middleware/issues",
"repository": "rspackjs/rspack-dev-middleware",

"funding": {
"type": "opencollective",
"url": "https://opencollective.com/webpack"
Expand Down
Loading