feat(sdk): webhook type

docs/docs/settings/webhook-setting.md

@@ -67,6 +67,24 @@ app.post('/callback', express.text({ type: '*/*' }), function (req, res) {
 app.listen(3000)
 ```
 
+## TypeScript definitions
+
+You can find the type definition of webhook in npm package `@perfsee/sdk`.
+
+```ts
+import express from 'express'
+import { WebhookEvent } from '@perfsee/sdk'
+
+const app = express()
+
+app.post('/callback', express.json(), function (req, res) {
+  const json = req.body as WebhookEvent
+  console.log(json)
+})
+
+app.listen(3001)
+```
+
 ## POST Example
 
 Request:

docs/i18n/cn/docusaurus-plugin-content-docs/current/settings/webhook-setting.md

@@ -67,6 +67,24 @@ app.post('/callback', express.text({ type: '*/*' }), function (req, res) {
 app.listen(3000)
 ```
 
+## TypeScript 定义
+
+Webhook 的类型定义包含在 npm 包 `@perfsee/sdk` 中，用法如下。
+
+```ts
+import express from 'express'
+import { WebhookEvent } from '@perfsee/sdk'
+
+const app = express()
+
+app.post('/callback', express.json(), function (req, res) {
+  const json = req.body as WebhookEvent
+  console.log(json)
+})
+
+app.listen(3001)
+```
+
 ## POST 示例
 
 Request:

packages/sdk/README.md

@@ -1,6 +1,6 @@
 # `@perfsee/sdk`
 
-> Perfsee command line tools
+> Perfsee sdk and command line tools
 
 ## Installation
 
@@ -30,6 +30,26 @@ For example take a snapshot for `Home Page` and `User Page`:
 perfsee take-snapshot -p <your-project-id> --token <your-access-token> "Home Page" "User Page"
 ```
 
+### Webhook type
+
+This package also provides TypeScript definitions for the Perfsee webhook.
+
+You can use it on your webhook server with the code below. Learn more in our [Webhook Guide](https://perfsee.com/docs/settings/webhook-setting).
+
+```ts
+import express from 'express'
+import { WebhookEvent } from '@perfsee/sdk'
+
+const app = express()
+
+app.post('/callback', express.json(), function (req, res) {
+  const json = req.body as WebhookEvent
+  console.log(json)
+})
+
+app.listen(3001)
+```
+
 ## License
 
 This project is licensed under the [Apache-2.0 License](LICENSE).

packages/sdk/package.json

@@ -5,7 +5,8 @@
   "repository": "https://github.com/perfsee/perfsee",
   "license": "Apache-2.0",
   "sideEffects": false,
-  "main": "./dist/index.cjs.js",
+  "main": "dist/index.cjs.js",
+  "types": "dist/index.d.ts",
   "bundle": true,
   "files": [
     "dist",
@@ -28,6 +29,7 @@
     "simple-git": "^3.15.0"
   },
   "devDependencies": {
-    "@perfsee/schema": "workspace:*"
+    "@perfsee/schema": "workspace:*",
+    "@perfsee/shared": "workspace:*"
   }
 }

packages/sdk/src/index.ts

@@ -16,3 +16,4 @@ limitations under the License.
 
 export { Client } from './client'
 export { runCli } from './cli'
+export type { WebhookEvent } from './webhook'

packages/sdk/src/webhook.ts

@@ -0,0 +1,21 @@
+import type {
+  BundleFinishedEventQuery,
+  SourceFinishedEventQuery,
+  LabSnapshotCompletedEventQuery,
+  LabSnapshotReportCompletedEventQuery,
+} from '@perfsee/schema'
+import type { WebhookEventType } from '@perfsee/shared'
+
+type WebhookPayload<T> = { data: T }
+
+// use generics to check this type stay in sync with @perfsee/shared
+type GenerateWebhookEvent<T extends Record<WebhookEventType['key'], any>> = {
+  [key in keyof T]: { eventType: key; payload: WebhookPayload<T[key]> }
+}[keyof T]
+
+export type WebhookEvent = GenerateWebhookEvent<{
+  'bundle:finished': BundleFinishedEventQuery
+  'lab:snapshot-completed': LabSnapshotCompletedEventQuery
+  'lab:snapshot-report-completed': LabSnapshotReportCompletedEventQuery
+  'source:finished': SourceFinishedEventQuery
+}>

packages/sdk/tsconfig.json

@@ -9,6 +9,9 @@
     {
       "path": "../schema"
     },
+    {
+      "path": "../shared"
+    }
   ],
   "include": [
     "./src/**/*"

yarn.lock

@@ -5862,6 +5862,7 @@ __metadata:
   resolution: "@perfsee/sdk@workspace:packages/sdk"
   dependencies:
     "@perfsee/schema": "workspace:*"
+    "@perfsee/shared": "workspace:*"
     chalk: ^4.1.2
     clipanion: ^3.1.0
     graphql: ^16.0.0