Skip to content

refactor: rename naming convention #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chenjiahan merged 5 commits into from
Mar 15, 2026
Merged

refactor: rename naming convention #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9ed6d11
refactor: rename naming convention
chenjiahan Mar 15, 2026
9af37e3
fix: exports
chenjiahan Mar 15, 2026
8ac8e0e
fix
chenjiahan Mar 15, 2026
66e4df0
fix
chenjiahan Mar 15, 2026
e2643ae
fix
chenjiahan Mar 15, 2026
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
66 changes: 33 additions & 33 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ bun add -D @rspack/dev-middleware
## Usage

```js
const middleware = require("@rspack/dev-middleware");
const { devMiddleware } = require("@rspack/dev-middleware");
const express = require("express");
const { rspack } = require("@rspack/core");

Expand All @@ -50,7 +50,7 @@ const compiler = rspack({
const app = express();

app.use(
middleware(compiler, {
devMiddleware(compiler, {
// options
}),
);
Expand Down Expand Up @@ -100,7 +100,7 @@ eg. `{ "X-Custom-Header": "yes" }`
or

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

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

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

```js
middleware(compiler, {
devMiddleware(compiler, {
headers: () => [
{
key: "X-custom-header",
Expand Down Expand Up @@ -256,7 +256,7 @@ const configuration = {
};
const compiler = rspack(configuration);

middleware(compiler, {
devMiddleware(compiler, {
writeToDisk: (filePath) => /superman\.css$/.test(filePath),
});
```
Expand Down Expand Up @@ -284,7 +284,7 @@ const compiler = rspack({
/* Rspack configuration */
});

middleware(compiler, { outputFileSystem: myOutputFileSystem });
devMiddleware(compiler, { outputFileSystem: myOutputFileSystem });
```

### modifyResponseData
Expand All @@ -299,7 +299,7 @@ const configuration = {
};
const compiler = rspack(configuration);

middleware(compiler, {
devMiddleware(compiler, {
// Note - if you send the `Range` header you will have `ReadStream`
// Also `data` can be `string` or `Buffer`
modifyResponseData: (req, res, data, byteLength) =>
Expand Down Expand Up @@ -328,15 +328,15 @@ Required: `No`
A function executed once the middleware has stopped watching.

```js
const middleware = require("@rspack/dev-middleware");
const { devMiddleware } = require("@rspack/dev-middleware");
const express = require("express");
const { rspack } = require("@rspack/core");

const compiler = rspack({
/* Rspack configuration */
});

const instance = middleware(compiler);
const instance = devMiddleware(compiler);

// eslint-disable-next-line new-cap
const app = new express();
Expand All @@ -363,15 +363,15 @@ Required: `No`
A function executed once the middleware has invalidated.

```js
const middleware = require("@rspack/dev-middleware");
const { devMiddleware } = require("@rspack/dev-middleware");
const express = require("express");
const { rspack } = require("@rspack/core");

const compiler = rspack({
/* Rspack configuration */
});

const instance = middleware(compiler);
const instance = devMiddleware(compiler);

// eslint-disable-next-line new-cap
const app = new express();
Expand Down Expand Up @@ -403,15 +403,15 @@ A function executed when the bundle becomes valid.
If the bundle is valid at the time of calling, the callback is executed immediately.

```js
const middleware = require("@rspack/dev-middleware");
const { devMiddleware } = require("@rspack/dev-middleware");
const express = require("express");
const { rspack } = require("@rspack/core");

const compiler = rspack({
/* Rspack configuration */
});

const instance = middleware(compiler);
const instance = devMiddleware(compiler);

// eslint-disable-next-line new-cap
const app = new express();
Expand All @@ -437,15 +437,15 @@ Required: `Yes`
URL for the requested file.

```js
const middleware = require("@rspack/dev-middleware");
const { devMiddleware } = require("@rspack/dev-middleware");
const express = require("express");
const { rspack } = require("@rspack/core");

const compiler = rspack({
/* Rspack configuration */
});

const instance = middleware(compiler);
const instance = devMiddleware(compiler);

// eslint-disable-next-line new-cap
const app = new express();
Expand All @@ -468,7 +468,7 @@ Since `output.publicPath` and `output.filename`/`output.chunkFilename` can be dy
But there is a solution to avoid it - mount the middleware to a non-root route, for example:

```js
const middleware = require("@rspack/dev-middleware");
const { devMiddleware } = require("@rspack/dev-middleware");
const express = require("express");
const { rspack } = require("@rspack/core");

Expand All @@ -482,7 +482,7 @@ const app = express();
// Note - check your public path, if you want to handle `/dist/`, you need to setup `output.publicPath` to `/` value.
app.use(
"/dist/",
middleware(compiler, {
devMiddleware(compiler, {
// @rspack/dev-middleware options
}),
);
Expand All @@ -495,11 +495,11 @@ app.listen(3000, () => console.log("Example app listening on port 3000!"));
_Note: this feature is experimental and may be removed or changed completely in the future._

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
[`stats`](https://rspack.rs/api/javascript-api/stats), which is
generated with each build.

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,
With server-side rendering enabled, `@rspack/dev-middleware` sets the `stats` to `res.locals.rspack.devMiddleware.stats`
and the filesystem to `res.locals.rspack.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
Expand All @@ -509,7 +509,7 @@ process is finished with server-side rendering enabled._
Example Implementation:

```js
const middleware = require("@rspack/dev-middleware");
const { devMiddleware } = require("@rspack/dev-middleware");
const express = require("express");
const isObject = require("is-object");
const { rspack } = require("@rspack/core");
Expand All @@ -530,14 +530,14 @@ function normalizeAssets(assets) {
return Array.isArray(assets) ? assets : [assets];
}

app.use(middleware(compiler, { serverSideRender: true }));
app.use(devMiddleware(compiler, { serverSideRender: true }));

// The following middleware would not be invoked until the latest build is finished.
app.use((req, res) => {
const { devMiddleware } = res.locals.webpack;
const { devMiddleware } = res.locals.rspack;
const { outputFileSystem } = devMiddleware;
const jsonWebpackStats = devMiddleware.stats.toJson();
const { assetsByChunkName, outputPath } = jsonWebpackStats;
const jsonStats = devMiddleware.stats.toJson();
const { assetsByChunkName, outputPath } = jsonStats;

// Then use `assetsByChunkName` for server-side rendering
// For example, if you have only one main chunk:
Expand Down Expand Up @@ -572,7 +572,7 @@ Examples of use with other servers will follow here.

```js
const http = require("node:http");
const devMiddleware = require("@rspack/dev-middleware");
const { devMiddleware } = require("@rspack/dev-middleware");
const connect = require("connect");
const { rspack } = require("@rspack/core");
const rspackConfig = require("./rspack.config.js");
Expand All @@ -592,7 +592,7 @@ http.createServer(app).listen(3000);

```js
const http = require("node:http");
const devMiddleware = require("@rspack/dev-middleware");
const { devMiddleware } = require("@rspack/dev-middleware");
const finalhandler = require("finalhandler");
const Router = require("router");
const { rspack } = require("@rspack/core");
Expand All @@ -618,7 +618,7 @@ server.listen(3000);
### Express

```js
const devMiddleware = require("@rspack/dev-middleware");
const { devMiddleware } = require("@rspack/dev-middleware");
const express = require("express");
const { rspack } = require("@rspack/core");
const rspackConfig = require("./rspack.config.js");
Expand All @@ -637,7 +637,7 @@ app.listen(3000, () => console.log("Example app listening on port 3000!"));
### Koa

```js
const middleware = require("@rspack/dev-middleware");
const { devMiddleware } = require("@rspack/dev-middleware");
const Koa = require("koa");
const { rspack } = require("@rspack/core");
const rspackConfig = require("./rspack.simple.config");
Expand All @@ -657,7 +657,7 @@ app.listen(3000);

```js
const Hapi = require("@hapi/hapi");
const devMiddleware = require("@rspack/dev-middleware");
const { devMiddleware } = require("@rspack/dev-middleware");
const { rspack } = require("@rspack/core");
const rspackConfig = require("./rspack.config.js");

Expand Down Expand Up @@ -690,7 +690,7 @@ process.on("unhandledRejection", (err) => {
Fastify interop will require the use of `fastify-express` instead of `middie` for providing middleware support. As the authors of `fastify-express` recommend, this should only be used as a stopgap while full Fastify support is worked on.

```js
const devMiddleware = require("@rspack/dev-middleware");
const { devMiddleware } = require("@rspack/dev-middleware");
const fastify = require("fastify")();
const { rspack } = require("@rspack/core");
const rspackConfig = require("./rspack.config.js");
Expand Down
5 changes: 0 additions & 5 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,12 @@
"description": "A development middleware for Rspack",
"keywords": [
"rspack",
"webpack",
"middleware",
"development"
],
"homepage": "https://github.com/rstackjs/rspack-dev-middleware",
"bugs": "https://github.com/rstackjs/rspack-dev-middleware/issues",
"repository": "rstackjs/rspack-dev-middleware",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/webpack"
},
"license": "MIT",
"author": "Tobias Koppers @sokra",
"type": "module",
Expand Down
Loading