mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Jan Kassens
2b1fb91a55
Hermes parser is the preferred parser for Flow code going forward. We need to upgrade to this parser to support new Flow syntax like function `this` context type annotations or `ObjectType['prop']` syntax. Unfortunately, there's quite a few upgrades here to make it work somehow (dependencies between the changes) - ~Upgrade `eslint` to `8.*`~ reverted this as the React eslint plugin tests depend on the older version and there's a [yarn bug](https://github.com/yarnpkg/yarn/issues/6285) that prevents `devDependencies` and `peerDependencies` to different versions. - Remove `eslint-config-fbjs` preset dependency and inline the rules, imho this makes it a lot clearer what the rules are. - Remove the turned off `jsx-a11y/*` rules and it's dependency instead of inlining those from the `fbjs` config. - Update parser and dependency from `babel-eslint` to `hermes-eslint`. - `ft-flow/no-unused-expressions` rule replaces `no-unused-expressions` which now allows standalone type asserts, e.g. `(foo: number);` - Bunch of globals added to the eslint config - Disabled `no-redeclare`, seems like the eslint upgrade started making this more precise and warn against re-defined globals like `__EXPERIMENTAL__` (in rollup scripts) or `fetch` (when importing fetch from node-fetch). - Minor lint fixes like duplicate keys in objects.
81 lines
2.4 KiB
JavaScript
81 lines
2.4 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.
|
|
*
|
|
* @noflow
|
|
*/
|
|
|
|
import * as React from 'react';
|
|
import {createRoot} from 'react-dom/client';
|
|
import {
|
|
activate as activateBackend,
|
|
createBridge as createBackendBridge,
|
|
initialize as initializeBackend,
|
|
} from 'react-devtools-inline/backend';
|
|
import {
|
|
createBridge as createFrontendBridge,
|
|
createStore,
|
|
initialize as createDevTools,
|
|
} from 'react-devtools-inline/frontend';
|
|
import {__DEBUG__} from 'react-devtools-shared/src/constants';
|
|
|
|
function inject(contentDocument, sourcePath, callback) {
|
|
const script = contentDocument.createElement('script');
|
|
script.onload = callback;
|
|
script.src = sourcePath;
|
|
|
|
((contentDocument.body: any): HTMLBodyElement).appendChild(script);
|
|
}
|
|
|
|
function init(appIframe, devtoolsContainer, appSource) {
|
|
const {contentDocument, contentWindow} = appIframe;
|
|
|
|
// Wire each DevTools instance directly to its app.
|
|
// By default, DevTools dispatches "message" events on the window,
|
|
// but this means that only one instance of DevTools can live on a page.
|
|
const wall = {
|
|
_listeners: [],
|
|
listen(listener) {
|
|
if (__DEBUG__) {
|
|
console.log('[Shell] Wall.listen()');
|
|
}
|
|
|
|
wall._listeners.push(listener);
|
|
},
|
|
send(event, payload) {
|
|
if (__DEBUG__) {
|
|
console.log('[Shell] Wall.send()', {event, payload});
|
|
}
|
|
|
|
wall._listeners.forEach(listener => listener({event, payload}));
|
|
},
|
|
};
|
|
|
|
const backendBridge = createBackendBridge(contentWindow, wall);
|
|
|
|
initializeBackend(contentWindow);
|
|
|
|
const frontendBridge = createFrontendBridge(contentWindow, wall);
|
|
const store = createStore(frontendBridge);
|
|
const DevTools = createDevTools(contentWindow, {
|
|
bridge: frontendBridge,
|
|
store,
|
|
});
|
|
|
|
inject(contentDocument, appSource, () => {
|
|
createRoot(devtoolsContainer).render(<DevTools />);
|
|
});
|
|
|
|
activateBackend(contentWindow, {bridge: backendBridge});
|
|
}
|
|
|
|
const appIframeLeft = document.getElementById('iframe-left');
|
|
const appIframeRight = document.getElementById('iframe-right');
|
|
const devtoolsContainerLeft = document.getElementById('devtools-left');
|
|
const devtoolsContainerRight = document.getElementById('devtools-right');
|
|
|
|
init(appIframeLeft, devtoolsContainerLeft, 'dist/multi-left.js');
|
|
init(appIframeRight, devtoolsContainerRight, 'dist/multi-right.js');
|