feat: add support for mock Server-Sent-Events (#101)

* feat: add support for mock `Server-Sent-Events`

* chore: add example

* docs: add docs

* docs: update readme

Author: pengzhanbo

README.md

@@ -43,7 +43,7 @@
 - 🌈 Support `vite preview` mode.
 - 📤 Support `multipart` content-type, mock upload file.
 - 📥 Support mock download file.
-- ⚜️ Support `WebSocket Mock`
+- ⚜️ Support `WebSocket Mock` and `Server-Sent Events Mock`
 - 🗂 Support building small independent deployable mock services.
 
 ## Documentation
@@ -155,6 +155,23 @@ export default defineApiMock({
 })
 ```
 
+### createSSEStream(req, res)
+
+Create a `Server-sent events` write stream to support mocking `EventSource`.
+
+``` ts
+import { createSSEStream, defineMock } from 'vite-plugin-mock-dev-server'
+
+export default defineMock({
+  url: '/api/sse',
+  response: (req, res) => {
+    const sse = createSSEStream(req, res)
+    sse.write({ event: 'message', data: { message: 'hello world' } })
+    sse.end()
+  }
+})
+```
+
 ## Plugin Options
 
 ### prefix
@@ -961,6 +978,40 @@ ws.addEventListener('message', (raw) => {
 })
 ```
 
+**示例：** EventSource Mock
+
+```ts
+// sse.mock.ts
+import { createSSEStream, defineMock } from 'vite-plugin-mock-dev-server'
+
+export default defineMock({
+  url: '/api/sse',
+  response(req, res) {
+    const sse = createSSEStream(req, res)
+    let count = 0
+    const timer = setInterval(() => {
+      sse.write({
+        event: 'count',
+        data: { count: ++count },
+      })
+      if (count >= 10) {
+        sse.end()
+        clearInterval(timer)
+      }
+    }, 1000)
+  },
+})
+```
+
+```ts
+// app.js
+const es = new EventSource('/api/sse')
+
+es.addEventListener('count', (e) => {
+  console.log(e.data)
+})
+```
+
 ## Mock Services
 
 In some scenarios, it may be necessary to use the data provided by mock services for display purposes, but the project may have already been packaged, built and deployed without support from `Vite` and this plugin's mock service. Since this plugin supports importing various `node` modules in mock files at the design stage, the mock file cannot be inline into client build code.

README.zh-CN.md

@@ -44,7 +44,7 @@
 - 🌈 支持 `vite preview` 模式
 - 📤 支持 multipart 类型，模拟文件上传
 - 📥 支持模拟文件下载
-- ⚜️ 支持模拟 `WebSocket`
+- ⚜️ 支持模拟 `WebSocket` 和 `Server-Sent Events`
 - 🗂 支持构建可独立部署的小型mock服务
 
 ## 文档
@@ -156,6 +156,23 @@ export default defineApiMock({
 })
 ```
 
+### createSSEStream(req, res)
+
+创建一个 `Server-sent events` 写入流，用于支持模拟 `EventSource`。
+
+``` ts
+import { createSSEStream, defineMock } from 'vite-plugin-mock-dev-server'
+
+export default defineMock({
+  url: '/api/sse',
+  response: (req, res) => {
+    const sse = createSSEStream(req, res)
+    sse.write({ event: 'message', data: { message: 'hello world' } })
+    sse.end()
+  }
+})
+```
+
 ## Plugin Options
 
 ### prefix
@@ -961,6 +978,40 @@ ws.addEventListener('message', (raw) => {
 })
 ```
 
+**示例：** EventSource Mock
+
+```ts
+// sse.mock.ts
+import { createSSEStream, defineMock } from 'vite-plugin-mock-dev-server'
+
+export default defineMock({
+  url: '/api/sse',
+  response(req, res) {
+    const sse = createSSEStream(req, res)
+    let count = 0
+    const timer = setInterval(() => {
+      sse.write({
+        event: 'count',
+        data: { count: ++count },
+      })
+      if (count >= 10) {
+        sse.end()
+        clearInterval(timer)
+      }
+    }, 1000)
+  },
+})
+```
+
+```ts
+// app.js
+const es = new EventSource('/api/sse')
+
+es.addEventListener('count', (e) => {
+  console.log(e.data)
+})
+```
+
 ## 独立部署的小型mock服务
 
 在一些场景中，可能会需要使用mock服务提供的数据支持，用于展示，但可能项目已完成打包构建部署，已脱离 `vite` 和本插件提供的 mock服务支持。由于本插件在设计之初，支持在mock文件中引入各种 `node` 模块，所以不能将 mock文件打包内联到客户端构建代码中。

docs/.vitepress/config.ts

@@ -12,19 +12,21 @@ export default defineConfig({
     theme: { light: 'github-light', dark: 'github-dark' },
     headers: { level: [2, 3] },
   },
+  head: [
+    ['link', { rel: 'icon', type: 'image/svg', href: '/logo.svg' }],
+  ],
   sitemap: {
     hostname: 'https://vite-plugin-mock-dev-server.netlify.app',
   },
   themeConfig: {
+    logo: '/logo.svg',
     socialLinks: [
       {
         icon: 'github',
         link: 'https://github.com/pengzhanbo/vite-plugin-mock-dev-server',
       },
     ],
-    search: {
-      provider: 'local',
-    },
+    search: { provider: 'local' },
   },
   locales: {
     root: {
@@ -74,6 +76,7 @@ export default defineConfig({
                 { text: 'defineMock', link: '/guide/define-mock' },
                 { text: 'createDefineMock', link: '/guide/create-define-mock' },
                 { text: 'defineMockData', link: '/guide/define-mock-data' },
+                { text: 'createSSEStream', link: '/guide/create-sse-stream' },
               ],
             },
             {
@@ -107,8 +110,9 @@ export default defineConfig({
             { text: '请求验证器', link: '/examples/validator' },
             { text: '使用mockjs库', link: '/examples/mockjs' },
             { text: '使用faker-js库', link: '/examples/faker' },
-            { text: 'graphql', link: '/examples/graphql' },
-            { text: 'websocket', link: '/examples/websocket' },
+            { text: 'Graphql', link: '/examples/graphql' },
+            { text: 'Websocket', link: '/examples/websocket' },
+            { text: 'EventSource', link: '/examples/event-source' },
           ],
         },
       },
@@ -158,11 +162,9 @@ export default defineConfig({
               items: [
                 { text: 'mockDevServerPlugin', link: '/en/guide/mock-plugin' },
                 { text: 'defineMock', link: '/en/guide/define-mock' },
-                {
-                  text: 'createDefineMock',
-                  link: '/en/guide/create-define-mock',
-                },
+                { text: 'createDefineMock', link: '/en/guide/create-define-mock' },
                 { text: 'defineMockData', link: '/en/guide/define-mock-data' },
+                { text: 'createSSEStream', link: '/en/guide/create-sse-stream' },
               ],
             },
             {
@@ -202,8 +204,9 @@ export default defineConfig({
             { text: 'Request validator', link: '/en/examples/validator' },
             { text: 'Use mockjs', link: '/en/examples/mockjs' },
             { text: 'Use faker-js', link: '/en/examples/faker' },
-            { text: 'graphql', link: '/en/examples/graphql' },
-            { text: 'websocket', link: '/en/examples/websocket' },
+            { text: 'Graphql', link: '/en/examples/graphql' },
+            { text: 'Websocket', link: '/en/examples/websocket' },
+            { text: 'EventSource', link: '/en/examples/event-source' },
           ],
         },
       },

docs/en/examples/event-source.md

@@ -0,0 +1,24 @@
+# EventSource
+
+EventSource is an event-based server-sent events protocol that allows a web page or application to create a stream of events that are sent over a connection in real time.
+
+::: code-group
+<<< @/../example/mock/sse.mock.ts
+
+:::
+
+::: code-group
+
+```ts [app.ts]
+const es = new EventSource('/api/sse')
+es.addEventListener('count', (e) => {
+  console.log(e.data)
+})
+es.addEventListener('close', () => {
+  es.close()
+
+  console.log('close')
+})
+```
+
+:::

docs/en/guide/create-sse-stream.md

@@ -0,0 +1,22 @@
+# createSSEStream(req, res)
+
+Create a `Server-sent events` write stream to support mocking `EventSource`.
+
+## Usage
+
+::: code-group
+
+``` ts [*.mock.ts]
+import { createSSEStream, defineMock } from 'vite-plugin-mock-dev-server'
+
+export default defineMock({
+  url: '/api/sse',
+  response: (req, res) => {
+    const sse = createSSEStream(req, res) // [!code hl:3]
+    sse.write({ event: 'message', data: { message: 'hello world' } })
+    sse.end()
+  }
+})
+```
+
+:::

docs/examples/event-source.md

@@ -0,0 +1,24 @@
+# EventSource
+
+EventSource 是一种基于事件的服务器发送事件协议，允许网页或应用程序创建一个实时通过连接发送的事件流。
+
+::: code-group
+<<< @/../example/mock/sse.mock.ts
+
+:::
+
+::: code-group
+
+```ts [app.ts]
+const es = new EventSource('/api/sse')
+es.addEventListener('count', (e) => {
+  console.log(e.data)
+})
+es.addEventListener('close', () => {
+  es.close()
+
+  console.log('close')
+})
+```
+
+:::

docs/guide/create-sse-stream.md

@@ -0,0 +1,22 @@
+# createSSEStream(req, res)
+
+创建一个 `Server-sent events` 写入流，用于支持模拟 `EventSource`。
+
+## Usage
+
+::: code-group
+
+``` ts [*.mock.ts]
+import { createSSEStream, defineMock } from 'vite-plugin-mock-dev-server'
+
+export default defineMock({
+  url: '/api/sse',
+  response: (req, res) => {
+    const sse = createSSEStream(req, res) // [!code hl:3]
+    sse.write({ event: 'message', data: { message: 'hello world' } })
+    sse.end()
+  }
+})
+```
+
+:::

example/mock/sse.mock.ts

@@ -0,0 +1,20 @@
+import { createSSEStream, defineMock } from 'vite-plugin-mock-dev-server'
+
+export default defineMock({
+  url: '/api/sse',
+  response(req, res) {
+    const sse = createSSEStream(req, res)
+    let count = 0
+    const timer = setInterval(() => {
+      sse.write({
+        event: 'count',
+        data: { count: ++count },
+      })
+      if (count >= 10) {
+        sse.write({ event: 'close' })
+        sse.end()
+        clearInterval(timer)
+      }
+    }, 1000)
+  },
+})

example/src/main.ts

@@ -129,5 +129,19 @@ function webSocketMock() {
   }, 3000)
 }
 
+function eventSourceMock() {
+  const es = new EventSource('/api/sse')
+  es.addEventListener('count', (e) => {
+    // eslint-disable-next-line no-console
+    console.log(e.data)
+  })
+  es.addEventListener('close', () => {
+    es.close()
+    // eslint-disable-next-line no-console
+    console.log('close')
+  })
+}
+
 bootstrap()
 webSocketMock()
+eventSourceMock()