rspack-plugin-mock 0.1.0 → 0.2.0

package/README.md

@@ -4,6 +4,15 @@
 
 Implement a mock-dev-server in `rspack` and `rsbuild` that is fully consistent with [vite-plugin-mock-dev-server](https://github.com/pengzhanbo/vite-plugin-mock-dev-server).
 
+<p align="center">
+  <a href="https://www.npmjs.com/package/rspack-plugin-mock"><img alt="npm" src="https://img.shields.io/npm/v/rspack-plugin-mock?style=flat-square"></a>
+  <img alt="node-current" src="https://img.shields.io/node/v/rspack-plugin-mock?style=flat-square">
+  <img alt="npm peer dependency version" src="https://img.shields.io/npm/dependency-version/rspack-plugin-mock/peer/@rspack/core?style=flat-square">
+  <img alt="npm peer dependency version" src="https://img.shields.io/npm/dependency-version/rspack-plugin-mock/peer/@rsbuild/core?style=flat-square">
+  <img alt="npm" src="https://img.shields.io/npm/dm/rspack-plugin-mock?style=flat-square">
+  <img alt="GitHub Workflow Status" src="https://img.shields.io/github/actions/workflow/status/pengzhanbo/rspack-plugin-mock/lint.yml?style=flat-square">
+</p>
+
 ## Features
 
 - ⚡️ Lightweight, Flexible, Fast.
@@ -18,10 +27,11 @@ Implement a mock-dev-server in `rspack` and `rsbuild` that is fully consistent w
 - ⚙️ Support Enabled/Disabled any one of the API mock.
 - 📀 Supports response body content type such as `text/json/buffer/stream`.
 - ⚖️ Use `devServer.proxy` in rspack, or `server.proxy` in rsbuild.
-- 🍕 Support `viteConfig.define` and `env` in the mock file.
-- ⚓️ Support `viteConfig.resolve.alias` in the mock file.
+- 🍕 Support `define` in the mock file.
+- ⚓️ Support `alias` in the mock file.
 - 📤 Support `multipart` content-type, mock upload file.
 - 📥 Support mock download file.
+- ⚜️ Support `WebSocket Mock`
 
 ## Usage
 
@@ -162,6 +172,8 @@ export default defineMock({
 Return a custom defineMock function to support preprocessing of mock config.
 
 ```ts
+import { createDefineMock } from 'rspack-plugin-mock/helper'
+
 const definePostMock = createDefineMock((mock) => {
   mock.url = `/api/post/${mock.url}`
 })
@@ -183,6 +195,18 @@ export default definePostMock({
   any request path starting with prefix will be intercepted and proxied.
   If the prefix starts with `^`, it will be recognized as a `RegExp`.
 
+### options.wsPrefix
+
+- **Type:** `string | string[]`
+- **Details:**
+
+  Configure path matching rules for WebSocket mock service.
+  Any ws/wss requests with a request path starting with wsPrefix
+  will be intercepted by the proxy.
+  If wsPrefix starts with `^`, it will be recognized as a `RegExp`.
+
+  Please avoid having the configurations in `wsPrefix` appear in `devServer.proxy` / `server.proxy`, as this may lead to conflicts in the rules.
+
 ### options.cwd
 
 - **Type:** `string`
@@ -215,6 +239,15 @@ export default definePostMock({
 
   Enable log and configure log level
 
+### options.reload
+
+- **Type:** `boolean`
+- **Default:** `false`
+- **Details:**
+
+  If you want to refresh the page every time you modify a mock file,
+  you can open this option.
+
 ### options.cors
 
 - **Type:** `boolean | CorsOptions`
@@ -266,15 +299,16 @@ export default definePostMock({
 ### options.method
 
 - **Type:** `Method | Method[]`
+
+  ```ts
+  type Method = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'OPTIONS' | 'HEAD' | 'PATCH'
+  ```
+
 - **Default:** `['GET', 'POST']`
 - **Details:**
 
   The interface allows request methods
 
-```ts
-type Method = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'OPTIONS' | 'HEAD' | 'PATCH'
-```
-
 ### options.type
 
 - **Type:** `'text' | 'json' | 'buffer' | string`
@@ -349,15 +383,43 @@ type Method = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'OPTIONS' | 'HEAD' | 'PATCH'
 
 - **Type:** `CookiesOptions | (request: MockRequest) => CookiesOptions | Promise<CookiesOptions>`
 
-```ts
-type CookiesOptions = Record<string, CookieValue>
-type CookieValue = string | [string, SetCookie]
-```
+  ```ts
+  type CookiesOptions = Record<string, CookieValue>
+
+  type CookieValue = string | [string, SetCookie]
+  ```
 
 - **Details:**
 
   Configure response body cookies
 
+### options.ws
+
+- **Type:** `boolean`
+- **Default:** `false`
+- **Details:**
+
+  Enable WebSocket interface simulation
+
+### options.setup
+
+- **Type:** `(wss: WebSocketServer, ctx: WebSocketSetupContext) => void`
+- **Details:**
+
+  Configure Websocket Server
+
+```ts
+interface WebSocketSetupContext {
+  /**
+   * When defining WSS, you may perform some automatic or looping tasks.
+   * However, when hot updating, the plugin will re-execute `setup()`,
+   * which may result in duplicate registration of listening events and looping tasks
+   * such as setTimeout. You can use `onCleanup()` to clear these automatic or looping tasks.
+   */
+  onCleanup: (cleanup: () => void) => void
+}
+```
+
 ### Types
 
 ```ts
@@ -679,6 +741,51 @@ fetch('/api/graphql', {
 })
 ```
 
+**exp:** WebSocket Mock
+
+``` ts
+// ws.mock.ts
+export default defineMock({
+  url: '/socket.io',
+  ws: true,
+  setup(wss, { onCleanup }) {
+    const wsMap = new Map()
+    wss.on('connection', (ws, req) => {
+      const token = req.getCookie('token')
+      wsMap.set(token, ws)
+      ws.on('message', (raw) => {
+        const data = JSON.parse(String(raw))
+        if (data.type === 'ping')
+          return
+        // Broadcast
+        for (const [_token, _ws] of wsMap.entires()) {
+          if (_token !== token)
+            _ws.send(raw)
+        }
+      })
+    })
+    wss.on('error', (err) => {
+      console.error(err)
+    })
+    onCleanup(() => wsMap.clear())
+  }
+})
+```
+
+``` ts
+// app.ts
+const ws = new WebSocket('ws://localhost:3000/socket.io')
+ws.addEventListener('open', () => {
+  setInterval(() => {
+    // heartbeat
+    ws.send(JSON.stringify({ type: 'ping' }))
+  }, 1000)
+}, { once: true })
+ws.addEventListener('message', (raw) => {
+  console.log(raw)
+})
+```
+
 ## Redirect
 
 - [rspack](https://rspack.dev)