mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Cedric van Putten
3f41fb5d5b
Summary:
This is a proposal for the `react-native/dev-middleware` package, to allow implementers to extend the CDP capabilities of the `InspectorProxy`. It's unfortunately needed until we can move to the native Hermes CDP layer.
At Expo, we extend the CDP capabilities of this `InspectorProxy` by injecting functionality on the device level. This proposed API does the same, but without having to overwrite internal functions of both the `InspectorProxy` and `InspectorDevice`.
A good example of this is the network inspector's capabilities. This currently works through the inspection proxy, and roughly like:
- Handle any incoming `Expo(Network.receivedResponseBody)` from the _**device**_, store it, and stop event from propagating
- Handle the incoming `Network.getResponseBody` from the _**debugger**_, return the data, and stop event from propagating.
This API brings back that capability in a more structured way.
## API:
```ts
import { createDevMiddleware } from 'react-native/dev-middleware';
const { middleware, websocketEndpoints } = createDevMiddleware({
unstable_customInspectorMessageHandler: ({ page, deviceInfo, debuggerInfo }) => {
// Do not enable handler for page other than "SOMETHING", or for vscode debugging
// Can also include `page.capabilities` to determine if handler is required
if (page.title !== 'SOMETHING' || debuggerInfo.userAgent?.includes('vscode')) {
return null;
}
return {
handleDeviceMessage(message) {
if (message.type === 'CDP_MESSAGE') {
// Do something and stop message from propagating with return `true`
return true;
}
},
handleDebuggerMessage(message) {
if (message.type === 'CDP_MESSAGE') {
// Do something and stop message from propagating with return `true`
return true;
}
},
};
},
});
```
## Changelog:
<!-- Help reviewers and the release process by writing your own changelog entry.
Pick one each for the category and type tags:
For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->
[GENERAL] [ADDED] - Add inspector proxy device message middleware API
Pull Request resolved: https://github.com/facebook/react-native/pull/43291
Test Plan: See added tests and code above
Reviewed By: huntie
Differential Revision: D54804503
Pulled By: motiz88
fbshipit-source-id: ae918dcd5b7e76d3fb31db4c84717567ae60fa96
55 lines
1.7 KiB
JavaScript
55 lines
1.7 KiB
JavaScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow strict-local
|
|
* @format
|
|
*/
|
|
|
|
import type {JSONSerializable, Page} from './types';
|
|
|
|
type ExposedDevice = $ReadOnly<{
|
|
appId: string,
|
|
id: string,
|
|
name: string,
|
|
sendMessage: (message: JSONSerializable) => void,
|
|
}>;
|
|
|
|
type ExposedDebugger = $ReadOnly<{
|
|
userAgent: string | null,
|
|
sendMessage: (message: JSONSerializable) => void,
|
|
}>;
|
|
|
|
export type CustomMessageHandlerConnection = $ReadOnly<{
|
|
page: Page,
|
|
device: ExposedDevice,
|
|
debugger: ExposedDebugger,
|
|
}>;
|
|
|
|
export type CreateCustomMessageHandlerFn = (
|
|
connection: CustomMessageHandlerConnection,
|
|
) => ?CustomMessageHandler;
|
|
|
|
/**
|
|
* The device message middleware allows implementers to handle unsupported CDP messages.
|
|
* It is instantiated per device and may contain state that is specific to that device.
|
|
* The middleware can also mark messages from the device or debugger as handled, which stops propagating.
|
|
*/
|
|
export interface CustomMessageHandler {
|
|
/**
|
|
* Handle a CDP message coming from the device.
|
|
* This is invoked before the message is sent to the debugger.
|
|
* When returning true, the message is considered handled and will not be sent to the debugger.
|
|
*/
|
|
handleDeviceMessage(message: JSONSerializable): true | void;
|
|
|
|
/**
|
|
* Handle a CDP message coming from the debugger.
|
|
* This is invoked before the message is sent to the device.
|
|
* When returning true, the message is considered handled and will not be sent to the device.
|
|
*/
|
|
handleDebuggerMessage(message: JSONSerializable): true | void;
|
|
}
|