feat: add support for websocket mock

Author: pengzhanbo

examples/rsbuild-starter/mock/ws.mock.ts

@@ -0,0 +1,21 @@
+import type { MockRequest } from 'rspack-plugin-mock/helper'
+import { defineMock } from 'rspack-plugin-mock/helper'
+
+export default defineMock({
+  url: '/socket.io',
+  ws: true,
+  setup(wss) {
+    wss.on('connection', (ws, _req: MockRequest) => {
+      // req.query
+      // req.params
+      // req.getCookie
+      ws.on('message', (raw) => {
+        const message = JSON.parse(String(raw))
+
+        // eslint-disable-next-line no-console
+        console.log(message)
+      })
+      ws.send(JSON.stringify({ type: 'connected123' }))
+    })
+  },
+})

examples/rsbuild-starter/rsbuild.config.ts

@@ -11,6 +11,8 @@ export default defineConfig({
     },
   },
   plugins: [
-    pluginMockServer(),
+    pluginMockServer({
+      wsPrefix: '/socket.io',
+    }),
   ],
 })

examples/rsbuild-starter/src/index.ts

@@ -113,21 +113,21 @@ async function bootstrap() {
   await delay()
 }
 
-// function webSocketMock() {
-//   const ws = new WebSocket('ws://localhost:5173/socket.io')
-//   ws.addEventListener(
-//     'open',
-//     () => {
-//       // eslint-disable-next-line no-console
-//       console.log('isOpen')
-//     },
-//     { once: true },
-//   )
-//   setTimeout(() => {
-//     if (ws.readyState === ws.OPEN)
-//       ws.send(JSON.stringify({ type: 'message', payload: { a: 1 } }))
-//   }, 3000)
-// }
+function webSocketMock() {
+  const ws = new WebSocket('ws://localhost:3000/socket.io')
+  ws.addEventListener(
+    'open',
+    () => {
+      // eslint-disable-next-line no-console
+      console.log('isOpen')
+    },
+    { once: true },
+  )
+  setTimeout(() => {
+    if (ws.readyState === ws.OPEN)
+      ws.send(JSON.stringify({ type: 'message', payload: { a: 1 } }))
+  }, 3000)
+}
 
 bootstrap()
-// webSocketMock()
+webSocketMock()

examples/rspack-starter/mock/ws.mock.ts

@@ -0,0 +1,21 @@
+import type { MockRequest } from 'rspack-plugin-mock/helper'
+import { defineMock } from 'rspack-plugin-mock/helper'
+
+export default defineMock({
+  url: '/socket.io',
+  ws: true,
+  setup(wss) {
+    wss.on('connection', (ws, _req: MockRequest) => {
+      // req.query
+      // req.params
+      // req.getCookie
+      ws.on('message', (raw) => {
+        const message = JSON.parse(String(raw))
+
+        // eslint-disable-next-line no-console
+        console.log(message)
+      })
+      ws.send(JSON.stringify({ type: 'connected123' }))
+    })
+  },
+})

examples/rspack-starter/rspack.config.mjs

@@ -22,6 +22,11 @@ export default {
         context: '/api',
         target: 'http://localhost:3000',
       },
+      {
+        context: '/socket.io',
+        target: 'ws://localhost:3000',
+        ws: true,
+      },
     ],
   },
   module: {
@@ -61,7 +66,9 @@ export default {
     ],
   },
   plugins: [
-    new MockServerPlugin(),
+    new MockServerPlugin({
+      wsPrefix: '/socket.io',
+    }),
     new rspack.HtmlRspackPlugin({ template: './index.html' }),
   ],
   experiments: {

examples/rspack-starter/src/index.ts

@@ -113,21 +113,21 @@ async function bootstrap() {
   await delay()
 }
 
-// function webSocketMock() {
-//   const ws = new WebSocket('ws://localhost:5173/socket.io')
-//   ws.addEventListener(
-//     'open',
-//     () => {
-//       // eslint-disable-next-line no-console
-//       console.log('isOpen')
-//     },
-//     { once: true },
-//   )
-//   setTimeout(() => {
-//     if (ws.readyState === ws.OPEN)
-//       ws.send(JSON.stringify({ type: 'message', payload: { a: 1 } }))
-//   }, 3000)
-// }
+function webSocketMock() {
+  const ws = new WebSocket('ws://localhost:8080/socket.io')
+  ws.addEventListener(
+    'open',
+    () => {
+      // eslint-disable-next-line no-console
+      console.log('isOpen')
+    },
+    { once: true },
+  )
+  setTimeout(() => {
+    if (ws.readyState === ws.OPEN)
+      ws.send(JSON.stringify({ type: 'message', payload: { a: 1 } }))
+  }, 3000)
+}
 
 bootstrap()
-// webSocketMock()
+webSocketMock()

src/core/mockCompiler.ts

@@ -9,6 +9,8 @@ import chokidar from 'chokidar'
 import { createFilter } from '@rollup/pluginutils'
 import * as rspackCore from '@rspack/core'
 import { Volume, createFsFromVolume } from 'memfs'
+import { toArray } from '@pengzhanbo/utils'
+import color from 'picocolors'
 import type { MockOptions } from '../types'
 import { lookupFile, normalizePath } from './utils'
 import { loadFromCode } from './loadFromCode'
@@ -19,8 +21,8 @@ export interface MockCompilerOptions {
   alias?: Record<string, false | string | (string | false)[]>
   plugins: RspackPluginInstance[]
   cwd?: string
-  include: string[]
-  exclude: string[]
+  include: string | string[]
+  exclude: string | string[]
 }
 
 const vfs = createFsFromVolume(new Volume())
@@ -38,16 +40,19 @@ export class MockCompiler extends EventEmitter {
   private _mockData: Record<string, MockOptions> = {}
   private fileFilter!: (file: string) => boolean
 
+  private watchInfo?: {
+    filepath: string
+    type: 'add' | 'change' | 'unlink'
+  }
+
   compiler?: Compiler | null
 
   constructor(public options: MockCompilerOptions) {
     super()
     this.cwd = options.cwd || process.cwd()
     const { include, exclude } = this.options
 
-    this.fileFilter = createFilter(include, exclude, {
-      resolve: false,
-    })
+    this.fileFilter = createFilter(include, exclude, { resolve: false })
 
     try {
       const pkg = lookupFile(this.cwd, ['package.json'])
@@ -69,22 +74,27 @@ export class MockCompiler extends EventEmitter {
 
     this.createCompiler(async (err, stats) => {
       const name = '[rspack:mock]'
-      if (err) {
-        const error = stats?.compilation.getLogger(name).error
-          || ((...args: string[]) => console.error(name, ...args))
+      const logError = stats?.compilation.getLogger(name).error
+        || ((...args: string[]) => console.error(color.red(name), ...args))
 
-        error(err.stack || err)
+      if (err) {
+        logError(err.stack || err)
         if ('details' in err) {
-          error(err.details)
+          logError(err.details)
         }
         return
       }
 
       if (stats?.hasErrors()) {
-        stats.compilation.getLogger(name).error(stats.toString({ colors: true }))
+        const info = stats.toJson()
+        logError(info.errors)
         return
       }
 
+      // if (stats) {
+      //   console.log('json name', stats.toJson().modules?.map(m => m.name).filter(name => name.startsWith('external')))
+      // }
+
       const content = vfs.readFileSync(`/${this.outputFile}`, 'utf-8') as string
       try {
         const result = await loadFromCode({
@@ -94,10 +104,10 @@ export class MockCompiler extends EventEmitter {
           cwd: this.cwd,
         })
         this._mockData = transformMockData(transformRawData(result))
-        this.emit('update')
+        this.emit('update', this.watchInfo || {})
       }
       catch (e) {
-        console.error('[rspack:mock-server]', e)
+        logError(e)
       }
     })
   }
@@ -128,7 +138,7 @@ export class MockCompiler extends EventEmitter {
 
   watchMockFiles() {
     const { include } = this.options
-    const [firstGlob, ...otherGlob] = include
+    const [firstGlob, ...otherGlob] = toArray(include)
     const watcher = (this.mockWatcher = chokidar.watch(firstGlob, {
       ignoreInitial: true,
       cwd: this.cwd,
@@ -137,11 +147,21 @@ export class MockCompiler extends EventEmitter {
     if (otherGlob.length > 0)
       otherGlob.forEach(glob => watcher.add(glob))
 
-    watcher.on('add', () => {
-      this.updateMockEntry()
+    watcher.on('add', (filepath) => {
+      if (this.fileFilter(filepath)) {
+        this.watchInfo = { filepath, type: 'add' }
+        this.updateMockEntry()
+      }
+    })
+
+    watcher.on('change', (filepath) => {
+      if (this.fileFilter(filepath)) {
+        this.watchInfo = { filepath, type: 'change' }
+      }
     })
 
-    watcher.on('unlink', async () => {
+    watcher.on('unlink', async (filepath) => {
+      this.watchInfo = { filepath, type: 'unlink' }
       this.updateMockEntry()
     })
   }
@@ -163,14 +183,15 @@ export class MockCompiler extends EventEmitter {
     await fsp.writeFile(this.entryFile, code, 'utf8')
   }
 
-  createCompiler(callback: (e: Error | null, res?: rspackCore.Stats) => void) {
+  createCompiler(callback: (e: Error | null, stats?: rspackCore.Stats) => void) {
+    const { plugins, alias } = this.options
     const options = resolveRspackOptions({
       isEsm: this.moduleType === 'esm',
       cwd: this.cwd,
-      plugins: this.options.plugins,
+      plugins,
       entryFile: this.entryFile,
       outputFile: this.outputFile,
-      alias: this.options.alias,
+      alias,
       watch: true,
     })