feat: add plugin tester

packages/network-debugger/src/fork/devtool.ts → packages/network-debugger/src/fork/devtool/index.ts

@@ -1,10 +1,10 @@
 import { Server, WebSocket } from 'ws'
 import open, { apps } from 'open'
 import { type ChildProcess } from 'child_process'
-import { IS_DEV_MODE, RequestDetail } from '../common'
-import { REMOTE_DEBUGGER_PORT } from '../common'
-import { RequestHeaderPipe } from './pipe'
-import { log } from '../utils'
+import { IS_DEV_MODE } from '../../common'
+import { REMOTE_DEBUGGER_PORT } from '../../common'
+import { log } from '../../utils'
+import { BaseDevtoolServer, DevtoolMessage } from './type'
 
 export interface DevtoolServerInitOptions {
   port: number
@@ -13,36 +13,21 @@ export interface DevtoolServerInitOptions {
   onClose?: () => void
 }
 
-const frameId = '517.528'
-const loaderId = '517.529'
-
-export const toMimeType = (contentType: string) => {
-  return contentType.split(';')[0] || 'text/plain'
-}
-
-export interface DevtoolMessageRequest {
-  method: string
-  params: Record<string, any>
+export interface IDevtoolServer {
+  send(message: DevtoolMessage): Promise<any>
+  close(): void
+  open(): Promise<void>
 }
+export * from './type'
 
-export interface DevtoolMessageResponse {
-  id: string
-  result: any
-  method?: string
-}
-
-export type DevtoolMessage = DevtoolMessageRequest | DevtoolMessageResponse
-
-export class DevtoolServer {
+export class DevtoolServer extends BaseDevtoolServer implements IDevtoolServer {
   private server: Server
   private port: number
   private browser: ChildProcess | null = null
   private socket: Promise<[WebSocket]>
-  public timestamp = 0
-  private startTime = Date.now()
 
-  private listeners: ((error: unknown | null, message?: any) => void)[] = []
   constructor(props: DevtoolServerInitOptions) {
+    super()
     const { port, autoOpenDevtool = true, onConnect, onClose } = props
     this.port = port
     this.server = new Server({ port })
@@ -76,15 +61,6 @@ export class DevtoolServer {
     })
   }
 
-  public getTimestamp() {
-    this.updateTimestamp()
-    return this.timestamp
-  }
-
-  public updateTimestamp() {
-    this.timestamp = (Date.now() - this.startTime) / 1000
-  }
-
   public async open() {
     const url = `devtools://devtools/bundled/inspector.html?ws=localhost:${this.port}`
     try {
@@ -144,7 +120,7 @@ export class DevtoolServer {
 
       log('opened in chrome or click here to open chrome devtool: ', url)
       this.browser = pro
-      return pro
+      return
     } catch (error) {
       console.warn(
         "Open devtools failed, but don't worry, you can open it in browser(Chrome or Edge) manually: " +
@@ -162,8 +138,4 @@ export class DevtoolServer {
     const [socket] = await this.socket
     return socket.send(JSON.stringify(message))
   }
-
-  public on(listener: (error: unknown | null, message?: any) => void) {
-    this.listeners.push(listener)
-  }
 }

packages/network-debugger/src/fork/devtool/type.ts

@@ -0,0 +1,28 @@
+export interface DevtoolMessageRequest {
+  method: string
+  params: Record<string, any>
+}
+
+export interface DevtoolMessageResponse {
+  id: string
+  result: any
+  method?: string
+}
+
+export type DevtoolMessage = DevtoolMessageRequest | DevtoolMessageResponse
+
+export class BaseDevtoolServer {
+  public timestamp = 0
+  private startTime = Date.now()
+  public getTimestamp() {
+    this.updateTimestamp()
+    return this.timestamp
+  }
+  public listeners: ((error: unknown | null, message?: any) => void)[] = []
+  public updateTimestamp() {
+    this.timestamp = (Date.now() - this.startTime) / 1000
+  }
+  public on(listener: (error: unknown | null, message?: any) => void) {
+    this.listeners.push(listener)
+  }
+}

packages/network-debugger/src/fork/module/debugger/index.ts

@@ -1,4 +1,5 @@
 import { createPlugin, useConnect, useHandler } from '../common'
+import { NetworkPluginCore } from '../network'
 export interface ISciprtParsed {
   url: string
   scriptLanguage: string
@@ -12,12 +13,14 @@ export interface ScriptSourceData {
 }
 
 export const debuggerPlugin = createPlugin('debugger', ({ devtool, core }) => {
+  const networkPlugin = core.usePlugin<NetworkPluginCore>('network')
+
   useHandler<ScriptSourceData>('Debugger.getScriptSource', ({ id, data }) => {
     if (!id) {
       return
     }
     const { scriptId } = data
-    const scriptSource = core.resourceService.getScriptSource(scriptId)
+    const scriptSource = networkPlugin.resourceService.getScriptSource(scriptId)
     devtool.send({
       id: id,
       method: 'Debugger.getScriptSourceResponse',
@@ -27,7 +30,7 @@ export const debuggerPlugin = createPlugin('debugger', ({ devtool, core }) => {
     })
   })
 
-  const scriptList = core.resourceService.getLocalScriptList()
+  const scriptList = networkPlugin.resourceService.getLocalScriptList()
   useConnect(() => {
     scriptList.forEach((script) => {
       devtool.send({

packages/network-debugger/src/fork/module/network/index.ts

@@ -3,14 +3,20 @@ import { RequestDetail } from '../../../common'
 import { BodyTransformer, RequestHeaderPipe } from '../../pipe'
 import { createPlugin, useHandler } from '../common'
 import zlib from 'node:zlib'
-import { toMimeType } from '../../devtool'
+import { ResourceService } from '../../resource-service'
 
 const frameId = '517.528'
 const loaderId = '517.529'
 
+export const toMimeType = (contentType: string) => {
+  return contentType.split(';')[0] || 'text/plain'
+}
+
 export const networkPlugin = createPlugin('network', ({ devtool, core }) => {
   const requests: Record<string, RequestDetail> = {}
 
+  const resourceService = new ResourceService()
+
   const getRequest = (id: string) => requests[id]
   const updateRequest = (request: RequestDetail) => {
     requests[request.id] = request
@@ -129,8 +135,8 @@ export const networkPlugin = createPlugin('network', ({ devtool, core }) => {
       request.initiator.stack.callFrames.forEach((frame) => {
         const fileUrl = pathToFileURL(frame.url)
         const scriptId =
-          core.resourceService.getScriptIdByUrl(fileUrl.href) ??
-          core.resourceService.getScriptIdByUrl(frame.url)
+          resourceService.getScriptIdByUrl(fileUrl.href) ??
+          resourceService.getScriptIdByUrl(frame.url)
         if (scriptId) {
           frame.scriptId = scriptId
         }
@@ -148,8 +154,8 @@ export const networkPlugin = createPlugin('network', ({ devtool, core }) => {
       request.initiator.stack.callFrames.forEach((frame) => {
         const fileUrl = pathToFileURL(frame.url)
         const scriptId =
-          core.resourceService.getScriptIdByUrl(fileUrl.href) ??
-          core.resourceService.getScriptIdByUrl(frame.url)
+          resourceService.getScriptIdByUrl(fileUrl.href) ??
+          resourceService.getScriptIdByUrl(frame.url)
         if (scriptId) {
           frame.scriptId = scriptId
         }
@@ -216,7 +222,8 @@ export const networkPlugin = createPlugin('network', ({ devtool, core }) => {
   })
 
   return {
-    getRequest
+    getRequest,
+    resourceService
   }
 })
 

packages/network-debugger/src/fork/request-center.ts

@@ -2,7 +2,6 @@ import { DevtoolServer } from './devtool'
 import { PORT, READY_MESSAGE, RequestDetail } from '../common'
 import { Server } from 'ws'
 import { log } from '../utils'
-import { ResourceService } from './resource-service'
 import { PluginInstance } from './module/common'
 
 export interface RequestCenterInitOptions {
@@ -22,7 +21,6 @@ export interface DevtoolMessageListener<T = any> {
 }
 
 export class RequestCenter {
-  public resourceService: ResourceService
   private devtool: DevtoolServer
   private server: Server
   private listeners: Record<string, Set<DevtoolMessageListener> | undefined> = {}
@@ -43,7 +41,6 @@ export class RequestCenter {
         )
       }
     })
-    this.resourceService = new ResourceService()
     this.devtool.on((error, message) => {
       if (error) {
         log(error)

packages/network-debugger/src/fork/tests/devtool.test.ts

@@ -0,0 +1,21 @@
+import { DevtoolMessage } from '../devtool'
+import { BaseDevtoolServer, IDevtoolServer, DevtoolServerInitOptions } from '../devtool/index'
+
+/**
+ * 模拟 Devtool server，作为 core 上下文用于测试
+ */
+export class DevToolTester extends BaseDevtoolServer implements IDevtoolServer {
+  private port: number
+  constructor(props: DevtoolServerInitOptions) {
+    super()
+    const { port, autoOpenDevtool = true } = props
+
+    this.port = port
+    autoOpenDevtool && this.open()
+  }
+  async send(message: DevtoolMessage) {
+    return message
+  }
+  async open() {}
+  close() {}
+}

packages/network-debugger/src/fork/tests/pluginTester.ts

@@ -0,0 +1,6 @@
+export class PluginTester {
+  public plugins: any[] = []
+  public loadPlugins(plugins: any[]) {
+    this.plugins = plugins
+  }
+}