@samitouri / QOS-React / commits / 8f7dd5592b

[DevTools] Check in `frontend.d.ts` for react-devtools-fusebox, include in build output (#28970)

## Summary The `react-devtools-fusebox` private package is used in the React Native DevTools (Fusebox) frontend by checking build artifacts into RN's [fork]([`facebookexperimental/rn-chrome-devtools-frontend`](https://github.com/facebookexperimental/rn-chrome-devtools-frontend)) of the Chrome DevTools (CDT) repo - see https://github.com/facebookexperimental/rn-chrome-devtools-frontend/pull/22. Currently, the CDT fork also includes a [manually written TypeScript definition file](https://github.com/facebookexperimental/rn-chrome-devtools-frontend/blob/1d5f8d5209ac49de97aec16732169d47bf525474/front_end/third_party/react-devtools/package/frontend.d.ts) which describes `react-devtools-fusebox`'s API. This PR moves that file into the React repo, next to the implementation of `react-devtools-fusebox`, so we can update it atomically with changes to the package. As this is the first bit of TypeScript in this repo, the PR adds minimal support for formatting `.d.ts` files with Prettier. It also opts out `react-devtools-fusebox/dist/` from linting/formatting as a drive-by fix. For now, we'll just maintain the `.d.ts` file manually, but we could consider leveraging [`flow-api-translator`](https://www.npmjs.com/package/flow-api-translator) to auto-generate it in the future. ## How did you test this change? Build `react-devtools-fusebox`, observe that `dist/frontend.d.ts` exists.

Moti Zilberman committed May 3, 2024 at 17:32 UTC 8f7dd5592be25dfae816ab1d1aa3d2bba8871435
6 files changed +59 -3
.eslintignore
+1
@@ -18,6 +18,7 @@ packages/react-devtools-extensions/chrome/build
18 packages/react-devtools-extensions/firefox/build
19 packages/react-devtools-extensions/shared/build
20 packages/react-devtools-extensions/src/ErrorTesterCompiled.js
21 +packages/react-devtools-fusebox/dist
22 packages/react-devtools-inline/dist
23 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/
24 packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/
.prettierignore
+1
@@ -6,6 +6,7 @@ packages/react-devtools-extensions/firefox/build
6 packages/react-devtools-extensions/edge/build
7 packages/react-devtools-extensions/shared/build
8 packages/react-devtools-extensions/src/ErrorTesterCompiled.js
9 +packages/react-devtools-fusebox/dist
10 packages/react-devtools-inline/dist
11 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/
12 packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/
.prettierrc.js
+11 -1
@@ -1,6 +1,9 @@
1 'use strict';
2
3 -const {esNextPaths} = require('./scripts/shared/pathsByLanguageVersion');
3 +const {
4 + esNextPaths,
5 + typescriptPaths,
6 +} = require('./scripts/shared/pathsByLanguageVersion');
7
8 module.exports = {
9 bracketSpacing: false,
@@ -17,5 +20,12 @@ module.exports = {
20 trailingComma: 'all',
21 },
22 },
23 + {
24 + files: typescriptPaths,
25 + options: {
26 + trailingComma: 'all',
27 + parser: 'typescript',
28 + },
29 + },
30 ],
31 };
packages/react-devtools-fusebox/package.json
+3 -2
@@ -5,8 +5,9 @@
5 "license": "MIT",
6 "files": ["dist"],
7 "scripts": {
8 - "build:frontend:local": "cross-env NODE_ENV=development webpack --config webpack.config.frontend.js",
9 - "build:frontend": "cross-env NODE_ENV=production webpack --config webpack.config.frontend.js",
8 + "build:frontend:copy-types": "cp src/*.d.ts dist/",
9 + "build:frontend:local": "cross-env NODE_ENV=development webpack --config webpack.config.frontend.js && yarn build:frontend:copy-types",
10 + "build:frontend": "cross-env NODE_ENV=production webpack --config webpack.config.frontend.js && yarn build:frontend:copy-types",
11 "build": "yarn build:frontend"
12 },
13 "devDependencies": {
packages/react-devtools-fusebox/src/frontend.d.ts new
+40
@@ -0,0 +1,40 @@
1 +/**
2 + * Copyright (c) Meta Platforms, Inc. and affiliates.
3 + *
4 + * This source code is licensed under the MIT license found in the
5 + * LICENSE file in the root directory of this source tree.
6 + */
7 +
8 +export type MessagePayload =
9 + | null
10 + | string
11 + | number
12 + | boolean
13 + | {[key: string]: MessagePayload}
14 + | MessagePayload[];
15 +export type Message = {event: string; payload?: MessagePayload};
16 +
17 +export type WallListener = (message: Message) => void;
18 +export type Wall = {
19 + listen: (fn: WallListener) => Function;
20 + send: (event: string, payload?: MessagePayload) => void;
21 +};
22 +
23 +export type Bridge = {
24 + shutdown: () => void;
25 +};
26 +export type Store = Object;
27 +export type BrowserTheme = 'dark' | 'light';
28 +
29 +export function createBridge(wall: Wall): Bridge;
30 +export function createStore(bridge: Bridge): Store;
31 +
32 +export type InitializationOptions = {
33 + bridge: Bridge;
34 + store: Store;
35 + theme?: BrowserTheme;
36 +};
37 +export function initialize(
38 + node: Element | Document,
39 + options: InitializationOptions,
40 +): void;
scripts/shared/pathsByLanguageVersion.js
+3
@@ -25,7 +25,10 @@ const esNextPaths = [
25 // Files that we distribute on npm that should be ES5-only.
26 const es5Paths = ['packages/*/npm/**/*.js'];
27
28 +const typescriptPaths = ['packages/**/*.d.ts'];
29 +
30 module.exports = {
31 esNextPaths,
32 es5Paths,
33 + typescriptPaths,
34 };