[DevTools] Check in frontend.d.ts for react-devtools-fusebox, inclu…

…de 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
facebookexperimental/rn-chrome-devtools-frontend#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.

.eslintignore

@@ -18,6 +18,7 @@ packages/react-devtools-extensions/chrome/build
 packages/react-devtools-extensions/firefox/build
 packages/react-devtools-extensions/shared/build
 packages/react-devtools-extensions/src/ErrorTesterCompiled.js
+packages/react-devtools-fusebox/dist
 packages/react-devtools-inline/dist
 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/
 packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/

.prettierignore

@@ -6,6 +6,7 @@ packages/react-devtools-extensions/firefox/build
 packages/react-devtools-extensions/edge/build
 packages/react-devtools-extensions/shared/build
 packages/react-devtools-extensions/src/ErrorTesterCompiled.js
+packages/react-devtools-fusebox/dist
 packages/react-devtools-inline/dist
 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/
 packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/

.prettierrc.js

@@ -1,6 +1,9 @@
 'use strict';
 
-const {esNextPaths} = require('./scripts/shared/pathsByLanguageVersion');
+const {
+  esNextPaths,
+  typescriptPaths,
+} = require('./scripts/shared/pathsByLanguageVersion');
 
 module.exports = {
   bracketSpacing: false,
@@ -17,5 +20,12 @@ module.exports = {
         trailingComma: 'all',
       },
     },
+    {
+      files: typescriptPaths,
+      options: {
+        trailingComma: 'all',
+        parser: 'typescript',
+      },
+    },
   ],
 };

packages/react-devtools-fusebox/package.json

@@ -5,8 +5,9 @@
   "license": "MIT",
   "files": ["dist"],
   "scripts": {
-    "build:frontend:local": "cross-env NODE_ENV=development webpack --config webpack.config.frontend.js",
-    "build:frontend": "cross-env NODE_ENV=production webpack --config webpack.config.frontend.js",
+    "build:frontend:copy-types": "cp src/*.d.ts dist/",
+    "build:frontend:local": "cross-env NODE_ENV=development webpack --config webpack.config.frontend.js && yarn build:frontend:copy-types",
+    "build:frontend": "cross-env NODE_ENV=production webpack --config webpack.config.frontend.js && yarn build:frontend:copy-types",
     "build": "yarn build:frontend"
   },
   "devDependencies": {

packages/react-devtools-fusebox/src/frontend.d.ts

@@ -0,0 +1,40 @@
+/**
+ * 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.
+ */
+
+export type MessagePayload =
+  | null
+  | string
+  | number
+  | boolean
+  | {[key: string]: MessagePayload}
+  | MessagePayload[];
+export type Message = {event: string; payload?: MessagePayload};
+
+export type WallListener = (message: Message) => void;
+export type Wall = {
+  listen: (fn: WallListener) => Function;
+  send: (event: string, payload?: MessagePayload) => void;
+};
+
+export type Bridge = {
+  shutdown: () => void;
+};
+export type Store = Object;
+export type BrowserTheme = 'dark' | 'light';
+
+export function createBridge(wall: Wall): Bridge;
+export function createStore(bridge: Bridge): Store;
+
+export type InitializationOptions = {
+  bridge: Bridge;
+  store: Store;
+  theme?: BrowserTheme;
+};
+export function initialize(
+  node: Element | Document,
+  options: InitializationOptions,
+): void;

scripts/shared/pathsByLanguageVersion.js

@@ -25,7 +25,10 @@ const esNextPaths = [
 // Files that we distribute on npm that should be ES5-only.
 const es5Paths = ['packages/*/npm/**/*.js'];
 
+const typescriptPaths = ['packages/**/*.d.ts'];
+
 module.exports = {
   esNextPaths,
   es5Paths,
+  typescriptPaths,
 };