{"parents":["29811cd24ef304fb089c6d69692b2e2e21f47e1e","bda8a0aa9850bd9925f0bf8dbe3179d9f04f0fa6"],"commit":{"authorEmail":"bvaughn@fb.com","subject":"Merged master","shortRevision":"94bebda825","revision":"94bebda8252a1d922a8e518a7f53c5d4f277dc44","authorName":"Brian Vaughn","authoredAt":"2019-05-25T09:10:43-07:00"},"body":"","patch":"diff --git a\/.babelrc b\/.babelrc\ndeleted file mode 100644\nindex 77ab280032..0000000000\n--- a\/.babelrc\n+++ \/dev\/null\n@@ -1,7 +0,0 @@\n-{\n- \"plugins\": [\n- [\"@babel\/plugin-transform-flow-strip-types\"],\n- [\"@babel\/plugin-proposal-class-properties\", { \"loose\": false }]\n- ],\n- \"presets\": [\"@babel\/preset-env\", \"@babel\/preset-react\", \"@babel\/preset-flow\"]\n-}\ndiff --git a\/.eslintignore b\/.eslintignore\nindex f863d8f44a..564cfdfb14 100644\n--- a\/.eslintignore\n+++ b\/.eslintignore\n@@ -1,11 +1,11 @@\n node_modules\n \n-flow-typed\n shells\/browser\/chrome\/build\n shells\/browser\/firefox\/build\n shells\/browser\/shared\/build\n-shells\/dev\/build\n+shells\/dev\/dist\n vendor\n+*.js.snap\n \n package-lock.json\n-yarn.lock\n\\ No newline at end of file\n+yarn.lock\ndiff --git a\/.eslintrc b\/.eslintrc\nindex 5065c9aae8..5ee6406982 100644\n--- a\/.eslintrc\n+++ b\/.eslintrc\n@@ -12,6 +12,7 @@\n },\n \"globals\": {\n \"__DEV__\": \"readonly\",\n- \"jasmine\": \"readonly\"\n+ \"jasmine\": \"readonly\",\n+ \"spyOn\": \"readonly\"\n }\n }\ndiff --git a\/.flowconfig b\/.flowconfig\nindex c2f42c17c7..d613bab513 100644\n--- a\/.flowconfig\n+++ b\/.flowconfig\n@@ -25,6 +25,7 @@ shells\/dev\/build\/*\n [lints]\n \n [options]\n+server.max_workers=4\n esproposal.class_instance_fields=enable\n suppress_comment=\\\$.\\\\|\\n\\\$*\\\\$FlowFixMe\n suppress_comment=\\\$.\\\\|\\n\\\$*\\\\$FlowIssue\ndiff --git a\/.gitignore b\/.gitignore\nindex b3eab07625..8d57dd31ee 100644\n--- a\/.gitignore\n+++ b\/.gitignore\n@@ -3,6 +3,7 @@\n \/shells\/browser\/firefox\/*.xpi\n \/shells\/browser\/firefox\/*.pem\n \/shells\/browser\/shared\/build\n+\/shells\/dev\/dist\n build\n node_modules\n npm-debug.log\ndiff --git a\/OVERVIEW.md b\/OVERVIEW.md\nindex f91b420332..eba370d98b 100644\n--- a\/OVERVIEW.md\n+++ b\/OVERVIEW.md\n@@ -14,9 +14,38 @@ The old DevTools also rendered the entire application tree in the form of a larg\n \n Every React commit that changes the tree in a way DevTools cares about results in an \"_operations_\" message being sent across the bridge. These messages are lightweight patches that describe the changes that were made. (We don't resend the full tree structure like in legacy DevTools.)\n \n-The payload for each message is a typed array. The first two entries are numbers that identify which renderer and root the update belongs to (for multi-root support). The rest of the array depends on the operations being made to the tree.\n+The payload for each message is a typed array. The first two entries are numbers that identify which renderer and root the update belongs to (for multi-root support). Then the strings are encoded in a [string table](#string-table). The rest of the array depends on the operations being made to the tree.\n \n-No updates are required for many commits because we only send the following bits of information: element type, id, parent id, owner id, name, and key. Additional information (e.g. props, state) requires a separate \"_inspectElement_\" message.\n+No updates are required for most commits because we only send the following bits of information: element type, id, parent id, owner id, name, and key. Additional information (e.g. props, state) requires a separate [\"_inspectElement_\" message](#inspecting-an-element).\n+\n+#### String table\n+\n+The string table is encoded right after the first two numbers.\n+\n+It consists of:\n+\n+1. the total length of next items that belong to string table\n+2. for each string in a table:\n+ 1. encoded size\n+ 2. a list of its UTF encoded codepoints\n+\n+For example, for `Foo` and `Bar` we would see:\n+\n+```\n+[\n+ 8, \/\/ string table length\n+ 3, \/\/ encoded display name size\n+ 70, \/\/ \"F\"\n+ 111, \/\/ \"o\"\n+ 111, \/\/ \"o\"\n+ 3, \/\/ encoded display name size\n+ 66, \/\/ \"B\"\n+ 97, \/\/ \"a\"\n+ 114, \/\/ \"r\"\n+]\n+```\n+\n+Later operations will reference strings by a one-based index. For example, `1` would mean `\"Foo\"`, and `2` would mean `\"Bar\"`. The `0` string id always represents `null` and isn't explicitly encoded in the table.\n \n #### Adding a root node\n \n@@ -46,39 +75,39 @@ Adding a leaf node takes a variable number of numbers since we need to decode th\n 1. element type constant (e.g. `1 === ElementTypeClass`)\n 1. parent fiber id\n 1. owner fiber id\n-1. UTF encoded display name size\n- * (followed by this number of encoded values)\n-1. UTF encoded key size\n- * (followed by this number of encoded values)\n+1. string table id for `displayName`\n+1. string table id for `key`\n \n For example, adding a function component `` with an id 2:\n ```js\n [\n 1, \/\/ add operation\n 2, \/\/ fiber id\n- 2, \/\/ ElementTypeFunction\n+ 1, \/\/ ElementTypeClass\n 1, \/\/ parent id\n 0, \/\/ owner id\n 3, \/\/ encoded display name size\n- 70, \/\/ \"F\"\n- 111, \/\/ \"o\"\n- 111, \/\/ \"o\"\n- 0, \/\/ encoded key (null)\n+ 1, \/\/ id of \"Foo\" displayName in the string table\n+ 0, \/\/ id of null key in the string table (always zero for null)\n ]\n ```\n \n #### Removing a node\n \n-Removing a fiber from the tree (a root or a leaf) only requires sending 2 numbers:\n+Removing a fiber from the tree (a root or a leaf) requires sending:\n \n 1. remove operation constant (`2`)\n-1. fiber id\n+1. how many items were removed\n+1. number of children\n+ * (followed by a children-first list of removed fiber ids)\n \n-For example, removing a root fiber with an id of 1:\n+For example, removing fibers with ids of 35 and 21:\n ```js\n [\n 2, \/\/ remove operation\n- 1, \/\/ fiber id\n+ 2, \/\/ number of removed fibers\n+ 35, \/\/ first removed id\n+ 21, \/\/ second removed id\n ]\n ```\n \n@@ -182,176 +211,57 @@ while (index !== currentWeight) {\n }\n ```\n \n-## Profiler\n+## Inspecting an element\n \n-The Profiler UI is a powerful tool for identifying and fixing performance problems. The primary goal of the new profiler is to minimize its impact (CPU usage) while profiling is active. This can be accomplished by:\n-* Minimizing bridge traffic.\n-* Making expensive computations lazy.\n+When an element is mounted in the tree, DevTools sends a minimal amount of information about it across the bridge. This information includes its display name, type, and key- but does _not_ include things like props or state. (These values are often expensive to serialize and change frequently, which would add a significant amount of load to the bridge.)\n \n-Profiling information is stored on the backend. The backend push-notifies the frontend of when profiling starts or stops by sending a \"_profilingStatus_\" message. (The frontend also asks for the current status after mounting by sending a \"_getProfilingStatus_\" message.)\n+Instead DevTools lazily requests additional information about an element only when it is selected in the \"Components\" tab. At that point, the frontend requests this information by sending a special \"_inspectElement_\" message containing the id of the element being inspected. The backend then responds with an \"_inspectedElement_\" message containing the additional details.\n \n-When profiling begins, the frontend takes a snapshot\/copy of each root. This snapshot includes the id, name, key, and child IDs for each node in the tree. (This information is already present on the frontend, so it does not require any additional bridge traffic.) While profiling is active, each time React commits– the frontend also stores a copy of the \"_operations_\" message (described above). Once profiling has finished, the frontend can use the original snapshot along with each of the stored \"_operations_\" messages to reconstruct the tree for each of the profiled commits.\n-\n-When profiling begins, the backend records the base durations of each fiber currently in the tree. While profiling is in progress, the backend also stores some information ^{1<\/sup> about each commit:\n-* Commit time and duration\n-* Which elements were rendered during that commit.\n-* Which interactions (if any) were part of the commit.\n+### Polling strategy\n \n-This information is kept on the backend until requested by the frontend (as described below).\n+Elements can update frequently, especially in response to things like scrolling events. Since props and state can be large, we avoid sending this information across the bridge every time the selected element is updated. Instead, the frontend polls the backend for updates about once a second. The backend tracks when the element was last \"inspected\" and sends a special no-op response if it has not re-rendered since then.\n \n-^{1<\/sup> In the future, the backend may also store additional metadata (e.g. which props\/states changed between rendered for a given component).\n+### Inspecting hooks\n \n-### Profiling summary\n+Hooks present a unique challenge for the DevTools because of the concept of _custom_ hooks. (A custom hook is essentially any function that calls at least one of the built-in hooks. By convention custom hooks also have names that begin with \"use\".)\n \n-The profiling tab shows information for the currently-selected React root. When profiling completes (or when a new root is selected) the frontend first checks to see if there is any profiling data for the selected root. (Has it cached any \"_operations_\"?)\n+So how does DevTools identify custom functions called from within third party components? It does this by temporarily overriding React's built-in hooks and shallow rendering the component in question. Whenever one of the (overridden) built-in hooks are called, it parses the call stack to spot potential custom hooks (functions between the component itself and the built-in hook). This approach enables it to build a tree structure describing all of the calls to both the built-in _and_ custom hooks, along with the values passed to those hooks. (If you're interested in learning more about this, [here is the source code](https:\/\/github.com\/bvaughn\/react-devtools-experimental\/blob\/master\/src\/backend\/ReactDebugHooks.js).)\n \n-If so, then it sends a \"_getProfilingSummary_\" message with an id that identifies the root. The backend then returns a \"_profilingSummary_\" message with the following information:\n+> **Note**: DevTools obtains hooks info by re-rendering a component. Breakpoints and console logs will be invoked during this additional (shallow) render.\n \n-* root id (to match request and response)\n-* number of interactions that were traced for this root\n-* the commits (each consisting of a timestamp and duration) that were profiled for the root\n-* tree base durations as of when profiling started\n+### Performance implications\n \n-This is the minimal information required to render the main [\"commit selector\"](https:\/\/reactjs.org\/blog\/2018\/09\/10\/introducing-the-react-profiler.html#browsing-commits). \n+To mitigate the performance impact of re-rendering a component, DevTools does the following:\n+* Only function components that use _at least one hook_ are rendered. (Props and state can be analyzed without rendering.)\n+* Rendering is always shallow.\n+* Rendering is throttled to occur, at most, once per second.\n+* Rendering is skipped if the component has not updated since the last time its properties were inspected.\n \n-Here is an example profile summary:\n-```js\n-{\n- rootID: 1,\n- interactionCount: 2,\n-\n- \/\/ Commit durations\n- commitDurations: [\n- 10, \/\/ first commit took 10ms\n- 13, \/\/ second commit took 13ms\n- 5, \/\/ third commit took 5ms\n- ]\n-\n- \/\/ Commit times (relative to when profiling started)\n- commitTimes: [\n- 210, \/\/ first commit started 210ms after profiling began\n- 284, \/\/ second commit started 284ms after profiling began\n- 303, \/\/ third commit started 303ms after profiling began\n- ],\n-\n- \/\/ Tuples of fiber id and initial tree base duration\n- initialTreeBaseDurations: [\n- 1, \/\/ fiber id\n- 11, \/\/ tree base duration when profiling started\n-\n- 2, \/\/ fiber id\n- 12, \/\/ tree base duration when profiling started\n-\n- 3, \/\/ fiber id\n- 8, \/\/ tree base duration when profiling started\n- ]\n-]\n-```\n-\n-Additional information (e.g. which components were part of a specific commit, which interactions were logged) are lazily requested by the frontend as a user interacts with the Profiler UI.\n-\n-### Commit details\n-\n-When a commit is selected in the profiling view, the frontend needs to reconstruct the tree at that point in time using the snapshot and the \"_operations_\" it has cached.\n-\n-In addition to this, it also needs to ask the backend for some additional information needed to display the [\"flame chart\"](https:\/\/reactjs.org\/blog\/2018\/09\/10\/introducing-the-react-profiler.html#flame-chart) and [\"ranked chart\"](https:\/\/reactjs.org\/blog\/2018\/09\/10\/introducing-the-react-profiler.html#ranked-chart) views. The frontend sends a \"_profileCommitDetails_\" message specifying which root and commit (index) it is interested in. The backend sends a response to fill in missing details about the commit:\n-\n-* root id and commit index (to match request and response)\n-* which elements were rendered during the commit ^{1<\/sup> and how long did they take\n-* which interactions were part of the commit\n-\n-Here is an example commit in which two elements were rendered and one interaction was traced:\n-\n-```js\n-{\n- rootID: 1,\n- commitIndex: 0,\n- interactions: [\n- {\n- id: 8,\n- timestamp: 4,\n- name: \"Foo\"\n- },\n- {\n- id: 11,\n- timestamp: 4,\n- name: \"Bar\"\n- }\n- ],\n- nodes: [\n- {\n- id: 1,\n- baseDuration: 15,\n- actualDuration: 15\n- },\n- {\n- id: 2,\n- baseDuration: 11,\n- actualDuration: 11\n- }\n- }\n-}\n-```\n-\n-^{1<\/sup> Elements in the tree that are not explicitly included in the above response were not rendered during the current commit.\n+## Profiler\n \n-### Component commits\n+The Profiler UI is a powerful tool for identifying and fixing performance problems. The primary goal of the new profiler is to minimize its impact (CPU usage) while profiling is active. This can be accomplished by:\n+* Minimizing bridge traffic.\n+* Making expensive computations lazy.\n \n-When a particular component (fiber) is selected, the frontend polls the backend for the aggregate data required to render the [\"component chart\"](https:\/\/reactjs.org\/blog\/2018\/09\/10\/introducing-the-react-profiler.html#component-chart) view. The frontend sends a \"_profileComponentDetails_\" message specifying which root and component (id) it is interested in. The backend sends a response that includes:\n+The majority of profiling information is stored on the backend. The backend push-notifies the frontend of when profiling starts or stops by sending a \"_profilingStatus_\" message. (The frontend also asks for the current status after mounting by sending a \"_getProfilingStatus_\" message.)\n \n-* root and component ids (to match request and response)\n-* which commits was the component rendered in and how long did each take\n+When profiling begins, the frontend takes a snapshot\/copy of each root. This snapshot includes the id, name, key, and child IDs for each node in the tree. (This information is already present on the frontend, so it does not require any additional bridge traffic.) While profiling is active, each time React commits– the frontend also stores a copy of the \"_operations_\" message (described above). Once profiling has finished, the frontend can use the original snapshot along with each of the stored \"_operations_\" messages to reconstruct the tree for each of the profiled commits.\n \n-Here is an example of a component that committed twice during a profiling session:\n+When profiling begins, the backend records the base durations of each fiber currently in the tree. While profiling is in progress, the backend also stores some information ^{1<\/sup> about each commit:\n+* Commit time and duration\n+* Which elements were rendered during that commit.\n+* Which interactions (if any) were part of the commit.\n \n-```js\n-{\n- rootID: 1,\n- id: 2,\n-\n- \/\/ Tuples of commit index and render duration (ms)\n- commits: [\n- 0, \/\/ index of first\n- 11 \/\/ duration (ms)\n-\n- 2, \/\/ index of second commit\n- 7 \/\/ duration (ms)\n- ]\n-}\n-```\n+This information will eventually be required by the frontend in order to render its profiling graphs, but it will not be sent across the bridge until profiling has completed (to minimize the performance impact of profiling).\n \n-### Interactions\n+^{1<\/sup> In the future, the backend may also store additional metadata (e.g. which props\/states changed between rendered for a given component).\n \n-The [Interactions chart](https:\/\/reactjs.org\/blog\/2018\/09\/10\/introducing-the-react-profiler.html#interactions) shows a time series for every interaction that was traced in the recent profiler session. The frontend sends a \"_profileInteractions_\" message specifying which root it would like interaction data for. The backend sends the following response:\n+### Combining profiling data\n \n-* root id (to match request and response)\n-* interaction metadata\n+Once profiling is finished, the frontend requests profiling data from the backend one renderer at a time by sending a \"_getProfilingData_\" message. The backend responds with a \"_profilingData_\" message that contains per-root commit timing and duration information. The frontend then combines this information with its own snapshots to form a complete picture of the profiling session. Using this data, charts and graphs are lazily computed (and incrementally cached) on demand, based on which commits and views are selected in the Profiler UI.\n \n-Here is an example of a profiling session consisting of two interactions:\n+### Importing\/exporting data\n \n-```js\n-{\n- rootID: 1,\n- interactions: [\n- {\n- id: 8,\n- name: \"Foo\",\n- timestamp: 4,\n- commits: [\n- 0, \/\/ index of first commit\n- 2 \/\/ index of second commit\n- ]\n- },\n- {\n- id: 11,\n- name: \"Bar\",\n- timestamp: 4,\n- commits: [\n- 0 \/\/ index of first commit\n- ]\n- }\n- ]\n-}\n-```\n+Because all of the data is merged in the frontend after a profiling session is completed, it can be exported and imported (as JSON), enabling profiling sessions to be shared between users.\n \n-The backend does not need to resend the timestamp for each of the commits because that was already sent as part of the \"_profilingSummary_\" message.\n\\ No newline at end of file\n+At the moment, screenshots are not included in the exported data (to keep the export filesize small) but this could be changed in the future.\n\\ No newline at end of file\ndiff --git a\/README.md b\/README.md\nindex 4f4dc5a0ec..c9082991f4 100644\n--- a\/README.md\n+++ b\/README.md\n@@ -1,9 +1,23 @@\n-This is an **experimental rewrite** of the React DevTools extension (see [github.com\/facebook\/react-devtools](https:\/\/github.com\/facebook\/react-devtools)). This project is **not supported** and has only been posted as a way of sharing ideas with others who may be interested.\n+This repo is a work-in-progress rewrite of the [React DevTools extension](https:\/\/github.com\/facebook\/react-devtools). A demo of the beta extension can be found online at [react-devtools-experimental.now.sh](https:\/\/react-devtools-experimental.now.sh\/).\n+\n+# Installation\n+\n+Installation instructions are available online as well:\n+* [Chrome](https:\/\/react-devtools-experimental-chrome.now.sh\/)\n+* [Firefox](https:\/\/react-devtools-experimental-firefox.now.sh\/)\n+\n+Or you can build and install from source:\n+```sh\n+git clone git@github.com:bvaughn\/react-devtools-experimental.git\n+\n+cd react-devtools-experimental\n \n-To get started...\n-```\n yarn install\n-yarn start\n+\n+yarn build:extension:chrome # builds at \"shells\/browser\/chrome\/build\"\n+yarn build:extension:firefox # builds at \"shells\/browser\/firefox\/build\"\n ```\n \n-A preview build of this rewrite is available at [react-devtools-experimental.now.sh](https:\/\/react-devtools-experimental.now.sh\/).\n\\ No newline at end of file\n+# Support\n+\n+As this extension is in a beta period, it is not officially supported. However if you find a bug, we'd appreciate you reporting it as a [GitHub issue](https:\/\/github.com\/bvaughn\/react-devtools-experimental\/issues\/new) with repro instructions.\n\\ No newline at end of file\ndiff --git a\/babel.config.js b\/babel.config.js\nnew file mode 100644\nindex 0000000000..12a0e78baf\n--- \/dev\/null\n+++ b\/babel.config.js\n@@ -0,0 +1,40 @@\n+const chromeManifest = require('.\/shells\/browser\/chrome\/manifest.json');\n+const firefoxManifest = require('.\/shells\/browser\/firefox\/manifest.json');\n+\n+const minChromeVersion = parseInt(chromeManifest.minimum_chrome_version, 10);\n+const minFirefoxVersion = parseInt(\n+ firefoxManifest.applications.gecko.strict_min_version,\n+ 10\n+);\n+validateVersion(minChromeVersion);\n+validateVersion(minFirefoxVersion);\n+\n+function validateVersion(version) {\n+ if (version > 0 && version < 200) {\n+ return;\n+ }\n+ throw new Error('Suspicious browser version in manifest: ' + version);\n+}\n+\n+module.exports = api => {\n+ const isTest = api.env('test');\n+ const targets = {};\n+ if (isTest) {\n+ targets.node = 'current';\n+ } else {\n+ targets.chrome = minChromeVersion.toString();\n+ targets.firefox = minFirefoxVersion.toString();\n+ }\n+ return {\n+ plugins: [\n+ ['@babel\/plugin-transform-flow-strip-types'],\n+ ['@babel\/plugin-proposal-class-properties', { loose: false }],\n+ ['@babel\/plugin-transform-react-jsx-source'],\n+ ],\n+ presets: [\n+ ['@babel\/preset-env', { targets }],\n+ '@babel\/preset-react',\n+ '@babel\/preset-flow',\n+ ],\n+ };\n+};\ndiff --git a\/flow-typed\/jest.js b\/flow-typed\/jest.js\nindex df83ee3ca3..8563e20d93 100644\n--- a\/flow-typed\/jest.js\n+++ b\/flow-typed\/jest.js\n@@ -133,11 +133,13 @@ type JestPromiseType = {\n * Use rejects to unwrap the reason of a rejected promise so any other\n * matcher can be chained. If the promise is fulfilled the assertion fails.\n *\/\n+ \/\/ eslint-disable-next-line no-use-before-define\n rejects: JestExpectType,\n \/**\n * Use resolves to unwrap the value of a fulfilled promise so any other\n * matcher can be chained. If the promise is rejected the assertion fails.\n *\/\n+ \/\/ eslint-disable-next-line no-use-before-define\n resolves: JestExpectType,\n };\n \n@@ -1085,8 +1087,10 @@ type JestPrettyFormatColors = {\n };\n \n type JestPrettyFormatIndent = string => string;\n+\/\/ eslint-disable-next-line no-unused-vars\n type JestPrettyFormatRefs = Array;\n type JestPrettyFormatPrint = any => string;\n+\/\/ eslint-disable-next-line no-unused-vars\n type JestPrettyFormatStringOrNull = string | null;\n \n type JestPrettyFormatOptions = {|\n@@ -1097,6 +1101,7 @@ type JestPrettyFormatOptions = {|\n indent: number,\n maxDepth: number,\n min: boolean,\n+ \/\/ eslint-disable-next-line no-use-before-define\n plugins: JestPrettyFormatPlugins,\n printFunctionName: boolean,\n spacing: string,\ndiff --git a\/flow-typed\/npm\/react-test-renderer_v16.x.x.js b\/flow-typed\/npm\/react-test-renderer_v16.x.x.js\nnew file mode 100644\nindex 0000000000..87a149a1d3\n--- \/dev\/null\n+++ b\/flow-typed\/npm\/react-test-renderer_v16.x.x.js\n@@ -0,0 +1,81 @@\n+\/\/ flow-typed signature: b6bb53397d83d2d821e258cc73818d1b\n+\/\/ flow-typed version: 9c71eca8ef\/react-test-renderer_v16.x.x\/flow_>=v0.47.x\n+\n+\/\/ Type definitions for react-test-renderer 16.x.x\n+\/\/ Ported from: https:\/\/github.com\/DefinitelyTyped\/DefinitelyTyped\/blob\/master\/types\/react-test-renderer\n+\n+type ReactComponentInstance = React$Component;\n+\n+type ReactTestRendererJSON = {\n+ type: string,\n+ props: { [propName: string]: any },\n+ children: null | ReactTestRendererJSON[],\n+};\n+\n+type ReactTestRendererTree = ReactTestRendererJSON & {\n+ nodeType: 'component' | 'host',\n+ instance: ?ReactComponentInstance,\n+ rendered: null | ReactTestRendererTree,\n+};\n+\n+type ReactTestInstance = {\n+ instance: ?ReactComponentInstance,\n+ type: string,\n+ props: { [propName: string]: any },\n+ parent: null | ReactTestInstance,\n+ children: Array,\n+\n+ find(predicate: (node: ReactTestInstance) => boolean): ReactTestInstance,\n+ findByType(type: React$ElementType): ReactTestInstance,\n+ findByProps(props: { [propName: string]: any }): ReactTestInstance,\n+\n+ findAll(\n+ predicate: (node: ReactTestInstance) => boolean,\n+ options?: { deep: boolean }\n+ ): ReactTestInstance[],\n+ findAllByType(\n+ type: React$ElementType,\n+ options?: { deep: boolean }\n+ ): ReactTestInstance[],\n+ findAllByProps(\n+ props: { [propName: string]: any },\n+ options?: { deep: boolean }\n+ ): ReactTestInstance[],\n+};\n+\n+type TestRendererOptions = {\n+ createNodeMock(element: React$Element): any,\n+};\n+\n+declare module 'react-test-renderer' {\n+ declare export type ReactTestRenderer = {\n+ toJSON(): null | ReactTestRendererJSON,\n+ toTree(): null | ReactTestRendererTree,\n+ unmount(nextElement?: React$Element): void,\n+ update(nextElement: React$Element): void,\n+ getInstance(): ?ReactComponentInstance,\n+ root: ReactTestInstance,\n+ };\n+\n+ declare type Thenable = {\n+ then(resolve: () => mixed, reject?: () => mixed): mixed,\n+ };\n+\n+ declare function create(\n+ nextElement: React$Element,\n+ options?: TestRendererOptions\n+ ): ReactTestRenderer;\n+\n+ declare function act(callback: () => void): Thenable;\n+}\n+\n+declare module 'react-test-renderer\/shallow' {\n+ declare export default class ShallowRenderer {\n+ static createRenderer(): ShallowRenderer;\n+ getMountedInstance(): ReactTestInstance;\n+ getRenderOutput>(): E;\n+ getRenderOutput(): React$Element;\n+ render(element: React$Element, context?: any): void;\n+ unmount(): void;\n+ }\n+}\ndiff --git a\/flow.js b\/flow.js\nindex df570e1021..fbbc999554 100644\n--- a\/flow.js\n+++ b\/flow.js\n@@ -5,6 +5,7 @@ declare module 'events' {\n addListener: (type: string, fn: Function) => void;\n emit: (type: string, data: any) => void;\n removeListener: (type: string, fn: Function) => void;\n+ removeAllListeners: (type?: string) => void;\n }\n \n declare export default typeof EventEmitter;\ndiff --git a\/package.json b\/package.json\nindex ac4b71b258..b74e677107 100644\n--- a\/package.json\n+++ b\/package.json\n@@ -14,7 +14,8 @@\n \"\"\n ],\n \"moduleNameMapper\": {\n- \"^src\/(.*)$\": \"\/src\/$1\"\n+ \"^src\/(.*)$\": \"\/src\/$1\",\n+ \"\\\\.css$\": \"\/src\/__tests__\/__mocks__\/cssMock.js\"\n },\n \"setupFiles\": [\n \"\/src\/__tests__\/setupEnv\"\n@@ -23,6 +24,7 @@\n \"\/src\/__tests__\/setupTests\"\n ],\n \"snapshotSerializers\": [\n+ \"\/src\/__tests__\/inspectedElementSerializer\",\n \"\/src\/__tests__\/storeSerializer\"\n ],\n \"testMatch\": [\n@@ -30,6 +32,7 @@\n ]\n },\n \"scripts\": {\n+ \"build:demo\": \"cd .\/shells\/dev && cross-env NODE_ENV=development cross-env TARGET=remote webpack --config webpack.config.js\",\n \"build:extension\": \"cross-env NODE_ENV=production yarn run build:extension:chrome && yarn run build:extension:firefox\",\n \"build:extension:dev\": \"cross-env NODE_ENV=development yarn run build:extension:chrome && yarn run build:extension:firefox\",\n \"build:extension:chrome\": \"cross-env NODE_ENV=production node .\/shells\/browser\/chrome\/build\",\n@@ -38,7 +41,7 @@\n \"build:extension:firefox:dev\": \"cross-env NODE_ENV=development node .\/shells\/browser\/firefox\/build\",\n \"build:standalone\": \"cd packages\/react-devtools-core && yarn run build\",\n \"deploy\": \"yarn run deploy:demo && yarn run deploy:chrome && yarn run deploy:firefox\",\n- \"deploy:demo\": \"cd shells\/dev\/ && now deploy && now alias react-devtools-experimental\",\n+ \"deploy:demo\": \"yarn run build:demo && cd shells\/dev\/ && now deploy && now alias react-devtools-experimental\",\n \"deploy:chrome\": \"node .\/shells\/browser\/chrome\/deploy\",\n \"deploy:firefox\": \"node .\/shells\/browser\/firefox\/deploy\",\n \"linc\": \"lint-staged\",\n@@ -47,8 +50,8 @@\n \"precommit\": \"lint-staged\",\n \"prettier\": \"prettier --write '**\/*.{js,json,css}'\",\n \"prettier:ci\": \"prettier --check '**\/*.{js,json,css}'\",\n- \"start\": \"cd .\/shells\/dev && opener .\/index.html && webpack --config webpack.config.js --watch\",\n- \"start:prod\": \"cross-env NODE_ENV=production npm start\",\n+ \"start\": \"cd .\/shells\/dev && cross-env NODE_ENV=development cross-env TARGET=local webpack-dev-server --open\",\n+ \"start:prod\": \"cd .\/shells\/dev && cross-env NODE_ENV=production cross-env TARGET=local webpack-dev-server --open\",\n \"test\": \"jest\",\n \"test-debug\": \"node --inspect-brk node_modules\/.bin\/jest --runInBand\",\n \"test:chrome\": \"node .\/shells\/browser\/chrome\/test\",\n@@ -66,18 +69,17 @@\n ],\n \"**\/*.js\": \"eslint --max-warnings 0\"\n },\n- \"resolutions\": {\n- \"@reach\/portal\": \"file:.\/vendor\/@reach\/portal\"\n- },\n \"dependencies\": {\n \"@babel\/core\": \"^7.1.6\",\n \"@babel\/plugin-proposal-class-properties\": \"^7.1.0\",\n \"@babel\/plugin-transform-flow-strip-types\": \"^7.1.6\",\n+ \"@babel\/plugin-transform-react-jsx-source\": \"^7.2.0\",\n \"@babel\/preset-env\": \"^7.1.6\",\n \"@babel\/preset-flow\": \"^7.0.0\",\n \"@babel\/preset-react\": \"^7.0.0\",\n- \"@reach\/menu-button\": \"^0.1.9\",\n- \"adm-zip\": \"^0.4.7\",\n+ \"@reach\/menu-button\": \"^0.1.17\",\n+ \"@reach\/tooltip\": \"^0.2.0\",\n+ \"archiver\": \"^3.0.0\",\n \"babel-core\": \"^7.0.0-bridge\",\n \"babel-eslint\": \"^9.0.0\",\n \"babel-jest\": \"^24.7.1\",\n@@ -111,7 +113,7 @@\n \"fbjs\": \"0.5.1\",\n \"fbjs-scripts\": \"0.7.0\",\n \"firefox-profile\": \"^1.0.2\",\n- \"flow-bin\": \"^0.96.0\",\n+ \"flow-bin\": \"^0.97.0\",\n \"fs-extra\": \"^3.0.1\",\n \"gh-pages\": \"^1.0.0\",\n \"html2canvas\": \"^1.0.0-alpha.12\",\n@@ -130,21 +132,24 @@\n \"opener\": \"^1.5.1\",\n \"prettier\": \"^1.16.4\",\n \"prop-types\": \"^15.6.2\",\n- \"react\": \"0.0.0-4221565e1\",\n+ \"react\": \"^0.0.0-50b50c26f\",\n \"react-15\": \"npm:react@^15\",\n \"react-color\": \"^2.11.7\",\n- \"react-dom\": \"0.0.0-4221565e1\",\n+ \"react-dom\": \"^0.0.0-50b50c26f\",\n \"react-dom-15\": \"npm:react-dom@^15\",\n- \"react-is\": \"0.0.0-4221565e1\",\n+ \"react-is\": \"^0.0.0-50b50c26f\",\n+ \"react-test-renderer\": \"^0.0.0-50b50c26f\",\n \"react-virtualized-auto-sizer\": \"^1.0.2\",\n \"react-window\": \"^1.8.0\",\n \"request-promise\": \"^4.2.4\",\n- \"scheduler\": \"^0.14.0-alpha.0\",\n+ \"rimraf\": \"^2.6.3\",\n+ \"scheduler\": \"^0.0.0-50b50c26f\",\n \"semver\": \"^5.5.1\",\n \"style-loader\": \"^0.23.1\",\n \"web-ext\": \"^3.0.0\",\n \"webpack\": \"^4.26.0\",\n \"webpack-cli\": \"^3.1.2\",\n+ \"webpack-dev-server\": \"^3.3.1\",\n \"xml-js\": \"^1.6.11\"\n }\n }\ndiff --git a\/shells\/browser\/chrome\/build.js b\/shells\/browser\/chrome\/build.js\nindex 0f5905e2de..331dcc0c21 100644\n--- a\/shells\/browser\/chrome\/build.js\n+++ b\/shells\/browser\/chrome\/build.js\n@@ -6,6 +6,7 @@ const { join } = require('path');\n const rp = require('request-promise');\n const convert = require('xml-js');\n const build = require('..\/shared\/build');\n+const rimraf = require('rimraf');\n \n const main = async () => {\n const manifestVersion = await rp(\n@@ -29,7 +30,7 @@ const main = async () => {\n execSync('crx pack .\/unpacked -o ReactDevTools.crx -p ..\/..\/..\/..\/key.pem', {\n cwd,\n });\n- execSync('rm packed.zip', { cwd });\n+ rimraf.sync(join(cwd, 'packed.zip'));\n \n console.log(chalk.green('\\nThe Chrome extension has been built!'));\n console.log(chalk.green('You can test this build by running:'));\ndiff --git a\/shells\/browser\/chrome\/manifest.json b\/shells\/browser\/chrome\/manifest.json\nindex d6ee523d48..f7bc742cd9 100644\n--- a\/shells\/browser\/chrome\/manifest.json\n+++ b\/shells\/browser\/chrome\/manifest.json\n@@ -44,8 +44,8 @@\n \"permissions\": [\n \"\",\n \"background\",\n- \"downloads\",\n \"tabs\",\n+ \"webNavigation\",\n \"file:\/\/\/*\",\n \"http:\/\/*\/*\",\n \"https:\/\/*\/*\"\ndiff --git a\/shells\/browser\/firefox\/manifest.json b\/shells\/browser\/firefox\/manifest.json\nindex d69d4179a1..02f24a0fef 100644\n--- a\/shells\/browser\/firefox\/manifest.json\n+++ b\/shells\/browser\/firefox\/manifest.json\n@@ -46,9 +46,9 @@\n \n \"permissions\": [\n \"\",\n- \"background\",\n- \"downloads\",\n+ \"activeTab\",\n \"tabs\",\n+ \"webNavigation\",\n \"file:\/\/\/*\",\n \"http:\/\/*\/*\",\n \"https:\/\/*\/*\"\ndiff --git a\/shells\/browser\/shared\/build.js b\/shells\/browser\/shared\/build.js\nindex fb1037f7a8..fcfc757ac0 100644\n--- a\/shells\/browser\/shared\/build.js\n+++ b\/shells\/browser\/shared\/build.js\n@@ -1,8 +1,8 @@\n #!\/usr\/bin\/env node\n \n-const AdmZip = require('adm-zip');\n+const archiver = require('archiver');\n const { execSync } = require('child_process');\n-const { readFileSync, writeFileSync } = require('fs');\n+const { readFileSync, writeFileSync, createWriteStream } = require('fs');\n const { copy, ensureDir, move, remove } = require('fs-extra');\n const { join } = require('path');\n const { getGitCommit } = require('..\/..\/utils');\n@@ -70,9 +70,16 @@ const build = async (tempPath, manifestPath, manifestVersion) => {\n writeFileSync(copiedManifestPath, JSON.stringify(manifest, null, 2));\n \n \/\/ Pack the extension\n- const zip = new AdmZip();\n- zip.addLocalFolder(zipPath);\n- zip.writeZip(join(tempPath, 'packed.zip'));\n+ const archive = archiver('zip', { zlib: { level: 9 } });\n+ const zipStream = createWriteStream(join(tempPath, 'packed.zip'));\n+ await new Promise((resolve, reject) => {\n+ archive\n+ .directory(zipPath, false)\n+ .on('error', err => reject(err))\n+ .pipe(zipStream);\n+ archive.finalize();\n+ zipStream.on('close', () => resolve());\n+ });\n };\n \n const postProcess = async (tempPath, destinationPath) => {\ndiff --git a\/shells\/browser\/shared\/deploy.js b\/shells\/browser\/shared\/deploy.js\nindex f5206ce893..349c6c8106 100644\n--- a\/shells\/browser\/shared\/deploy.js\n+++ b\/shells\/browser\/shared\/deploy.js\n@@ -9,7 +9,14 @@ const main = async buildId => {\n const root = join(__dirname, '..', buildId);\n const buildPath = join(root, 'build');\n \n- execSync(`node ${join(root, '.\/build')}`);\n+ execSync(`node ${join(root, '.\/build')}`, {\n+ cwd: __dirname,\n+ env: {\n+ ...process.env,\n+ NODE_ENV: 'production',\n+ },\n+ stdio: 'inherit',\n+ });\n \n await exec(`cp ${join(root, 'now.json')} ${join(buildPath, 'now.json')}`, {\n cwd: root,\ndiff --git a\/shells\/browser\/shared\/src\/backend.js b\/shells\/browser\/shared\/src\/backend.js\nindex c86a1a5d4b..97f9e55d6e 100644\n--- a\/shells\/browser\/shared\/src\/backend.js\n+++ b\/shells\/browser\/shared\/src\/backend.js\n@@ -24,8 +24,6 @@ function setup(hook) {\n const Bridge = require('src\/bridge').default;\n const { initBackend } = require('src\/backend');\n \n- const listeners = [];\n-\n const bridge = new Bridge({\n listen(fn) {\n const listener = event => {\n@@ -39,8 +37,10 @@ function setup(hook) {\n }\n fn(event.data.payload);\n };\n- listeners.push(listener);\n window.addEventListener('message', listener);\n+ return () => {\n+ window.removeEventListener('message', listener);\n+ };\n },\n send(event: string, payload: any, transferable?: Array) {\n window.postMessage(\n@@ -54,14 +54,11 @@ function setup(hook) {\n },\n });\n \n- const agent = new Agent();\n- agent.addBridge(bridge);\n+ const agent = new Agent(bridge);\n agent.addListener('shutdown', () => {\n+ \/\/ If we received 'shutdown' from `agent`, we assume the `bridge` is already shutting down,\n+ \/\/ and that caused the 'shutdown' event on the `agent`, so we don't need to call `bridge.shutdown()` here.\n hook.emit('shutdown');\n- listeners.forEach(fn => {\n- window.removeEventListener('message', fn);\n- });\n- listeners.splice(0);\n });\n \n initBackend(hook, agent, window);\ndiff --git a\/shells\/browser\/shared\/src\/background.js b\/shells\/browser\/shared\/src\/background.js\nindex 947117a105..1090ef76d8 100644\n--- a\/shells\/browser\/shared\/src\/background.js\n+++ b\/shells\/browser\/shared\/src\/background.js\n@@ -110,19 +110,8 @@ chrome.runtime.onMessage.addListener((request, sender) => {\n setIconAndPopup(reactBuildType, sender.tab.id);\n }\n \n- if (request.exportFile) {\n- let { contents, filename } = request;\n- if (!Array.isArray(contents)) {\n- contents = [contents];\n- }\n-\n- const blob = new Blob(contents, { type: 'text\/plain' });\n- const url = URL.createObjectURL(blob);\n- chrome.downloads.download({ filename, saveAs: true, url });\n- }\n-\n if (request.captureScreenshot) {\n- const { commitIndex } = request;\n+ const { commitIndex, rootID } = request;\n try {\n chrome.tabs.captureVisibleTab(undefined, undefined, dataURL => {\n \/\/ TODO For some reason, sending a response using the third param (sendResponse) doesn't work,\n@@ -134,6 +123,7 @@ chrome.runtime.onMessage.addListener((request, sender) => {\n payload: {\n commitIndex,\n dataURL,\n+ rootID,\n },\n });\n }\ndiff --git a\/shells\/browser\/shared\/src\/main.js b\/shells\/browser\/shared\/src\/main.js\nindex 8f3ad6823d..bf194d3c5e 100644\n--- a\/shells\/browser\/shared\/src\/main.js\n+++ b\/shells\/browser\/shared\/src\/main.js\n@@ -10,6 +10,7 @@ import {\n getBrowserName,\n getBrowserTheme,\n } from '.\/utils';\n+import { getSavedComponentFilters } from 'src\/utils';\n import DevTools from 'src\/devtools\/views\/DevTools';\n \n const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =\n@@ -17,6 +18,20 @@ const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =\n \n let panelCreated = false;\n \n+\/\/ The renderer interface can't read saved component filters directly,\n+\/\/ because they are stored in localStorage within the context of the extension.\n+\/\/ Instead it relies on the extension to pass filters through.\n+function initializeSavedComponentFilters() {\n+ const componentFilters = getSavedComponentFilters();\n+ chrome.devtools.inspectedWindow.eval(\n+ `window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(\n+ componentFilters\n+ )};`\n+ );\n+}\n+\n+initializeSavedComponentFilters();\n+\n function createPanelIfReactLoaded() {\n if (panelCreated) {\n return;\n@@ -36,6 +51,8 @@ function createPanelIfReactLoaded() {\n let bridge = null;\n let store = null;\n \n+ let profilingData = null;\n+\n let componentsPortalContainer = null;\n let profilerPortalContainer = null;\n let settingsPortalContainer = null;\n@@ -46,40 +63,36 @@ function createPanelIfReactLoaded() {\n let root = null;\n \n function initBridgeAndStore() {\n- let hasPortBeenDisconnected = false;\n const port = chrome.runtime.connect({\n name: '' + chrome.devtools.inspectedWindow.tabId,\n });\n- port.onDisconnect.addListener(() => {\n- hasPortBeenDisconnected = true;\n- });\n+ \/\/ Looks like `port.onDisconnect` does not trigger on in-tab navigation like new URL or back\/forward navigation,\n+ \/\/ so it makes no sense to handle it here.\n \n bridge = new Bridge({\n listen(fn) {\n- port.onMessage.addListener(message => fn(message));\n+ const listener = message => fn(message);\n+ \/\/ Store the reference so that we unsubscribe from the same object.\n+ const portOnMessage = port.onMessage;\n+ portOnMessage.addListener(listener);\n+ return () => {\n+ portOnMessage.removeListener(listener);\n+ };\n },\n send(event: string, payload: any, transferable?: Array) {\n- if (!hasPortBeenDisconnected) {\n- port.postMessage({ event, payload }, transferable);\n- }\n+ port.postMessage({ event, payload }, transferable);\n },\n });\n bridge.addListener('reloadAppForProfiling', () => {\n localStorage.setItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY, 'true');\n chrome.devtools.inspectedWindow.eval('window.location.reload();');\n });\n- bridge.addListener('exportFile', ({ contents, filename }) => {\n- chrome.runtime.sendMessage({\n- exportFile: true,\n- contents,\n- filename,\n- });\n- });\n- bridge.addListener('captureScreenshot', ({ commitIndex }) => {\n+ bridge.addListener('captureScreenshot', ({ commitIndex, rootID }) => {\n chrome.runtime.sendMessage(\n {\n captureScreenshot: true,\n commitIndex,\n+ rootID,\n },\n response => bridge.send('screenshotCaptured', response)\n );\n@@ -106,10 +119,10 @@ function createPanelIfReactLoaded() {\n store = new Store(bridge, {\n isProfiling,\n supportsCaptureScreenshots: true,\n- supportsFileDownloads: browserName === 'Chrome',\n supportsReloadAndProfile: true,\n supportsProfiling,\n });\n+ store.profilerStore.profilingData = profilingData;\n \n \/\/ Initialize the backend only once the Store has been initialized.\n \/\/ Otherwise the Store may miss important initial tree op codes.\n@@ -268,13 +281,29 @@ function createPanelIfReactLoaded() {\n \n chrome.devtools.network.onNavigated.removeListener(checkPageForReact);\n \n- \/\/ Shutdown bridge and re-initialize DevTools panel when a new page is loaded.\n+ \/\/ Shutdown bridge before a new page is loaded.\n+ chrome.webNavigation.onBeforeNavigate.addListener(\n+ function onBeforeNavigate(details) {\n+ \/\/ `bridge.shutdown()` will remove all listeners we added, so we don't have to.\n+ bridge.shutdown();\n+\n+ profilingData = store.profilerStore.profilingData;\n+ }\n+ );\n+\n+ \/\/ Re-initialize DevTools panel when a new page is loaded.\n chrome.devtools.network.onNavigated.addListener(function onNavigated() {\n- bridge.send('shutdown');\n+ \/\/ Re-initialize saved filters on navigation,\n+ \/\/ since global values stored on window get reset in this case.\n+ initializeSavedComponentFilters();\n \n \/\/ It's easiest to recreate the DevTools panel (to clean up potential stale state).\n \/\/ We can revisit this in the future as a small optimization.\n- flushSync(() => root.unmount(initBridgeAndStore));\n+ flushSync(() => {\n+ root.unmount(() => {\n+ initBridgeAndStore();\n+ });\n+ });\n });\n }\n );\n@@ -282,6 +311,7 @@ function createPanelIfReactLoaded() {\n \n \/\/ Load (or reload) the DevTools extension when the user navigates to a new page.\n function checkPageForReact() {\n+ initializeSavedComponentFilters();\n createPanelIfReactLoaded();\n }\n \ndiff --git a\/shells\/browser\/shared\/webpack.backend.js b\/shells\/browser\/shared\/webpack.backend.js\nindex b5f6ef58c5..a091b269ac 100644\n--- a\/shells\/browser\/shared\/webpack.backend.js\n+++ b\/shells\/browser\/shared\/webpack.backend.js\n@@ -1,9 +1,14 @@\n-const { readFileSync } = require('fs');\n const { resolve } = require('path');\n const { DefinePlugin } = require('webpack');\n const { getGitHubURL, getVersionString } = require('..\/..\/utils');\n \n-const __DEV__ = process.env.NODE_ENV !== 'production';\n+const NODE_ENV = process.env.NODE_ENV;\n+if (!NODE_ENV) {\n+ console.error('NODE_ENV not set');\n+ process.exit(1);\n+}\n+\n+const __DEV__ = NODE_ENV === 'development';\n \n const GITHUB_URL = getGitHubURL();\n const DEVTOOLS_VERSION = getVersionString();\n@@ -35,9 +40,9 @@ module.exports = {\n {\n test: \/\\.js$\/,\n loader: 'babel-loader',\n- options: JSON.parse(\n- readFileSync(resolve(__dirname, '..\/..\/..\/.babelrc'))\n- ),\n+ options: {\n+ configFile: resolve(__dirname, '..\/..\/..\/babel.config.js'),\n+ },\n },\n ],\n },\ndiff --git a\/shells\/browser\/shared\/webpack.config.js b\/shells\/browser\/shared\/webpack.config.js\nindex 9e510d4b5f..dd2acc1f3c 100644\n--- a\/shells\/browser\/shared\/webpack.config.js\n+++ b\/shells\/browser\/shared\/webpack.config.js\n@@ -1,10 +1,14 @@\n-const { readFileSync } = require('fs');\n const { resolve } = require('path');\n const { DefinePlugin } = require('webpack');\n const { getGitHubURL, getVersionString } = require('..\/..\/utils');\n \n const NODE_ENV = process.env.NODE_ENV;\n-const __DEV__ = NODE_ENV !== 'production';\n+if (!NODE_ENV) {\n+ console.error('NODE_ENV not set');\n+ process.exit(1);\n+}\n+\n+const __DEV__ = NODE_ENV === 'development';\n \n const GITHUB_URL = getGitHubURL();\n const DEVTOOLS_VERSION = getVersionString();\n@@ -42,9 +46,9 @@ module.exports = {\n {\n test: \/\\.js$\/,\n loader: 'babel-loader',\n- options: JSON.parse(\n- readFileSync(resolve(__dirname, '..\/..\/..\/.babelrc'))\n- ),\n+ options: {\n+ configFile: resolve(__dirname, '..\/..\/..\/babel.config.js'),\n+ },\n },\n {\n test: \/\\.css$\/,\ndiff --git a\/shells\/dev\/app\/ElementTypes\/index.js b\/shells\/dev\/app\/ElementTypes\/index.js\nindex fa027f5926..6ef562596c 100644\n--- a\/shells\/dev\/app\/ElementTypes\/index.js\n+++ b\/shells\/dev\/app\/ElementTypes\/index.js\n@@ -6,8 +6,6 @@ import React, {\n lazy,\n memo,\n Component,\n- \/\/ $FlowFixMe Flow thinks ConcurrentMode is stable\n- unstable_ConcurrentMode as ConcurrentMode,\n Fragment,\n \/\/ $FlowFixMe Flow doesn't know about the Profiler import yet\n Profiler,\n@@ -48,15 +46,13 @@ export default function ElementTypes() {\n {value => null}<\/Context.Consumer>\n <\/Context.Provider>\n \n- \n- Loading...<\/div>}>\n- \n- \n- \n- \n- \n- <\/Suspense>\n- <\/ConcurrentMode>\n+ Loading...<\/div>}>\n+ \n+ \n+ \n+ \n+ \n+ <\/Suspense>\n <\/StrictMode>\n <\/Fragment>\n <\/Profiler>\ndiff --git a\/shells\/dev\/app\/PriorityLevels\/index.js b\/shells\/dev\/app\/PriorityLevels\/index.js\nnew file mode 100644\nindex 0000000000..2888451980\n--- \/dev\/null\n+++ b\/shells\/dev\/app\/PriorityLevels\/index.js\n@@ -0,0 +1,46 @@\n+\/\/ @flow\n+\n+import React, { Fragment, useCallback, useState } from 'react';\n+import {\n+ unstable_IdlePriority as IdlePriority,\n+ unstable_LowPriority as LowPriority,\n+ unstable_runWithPriority as runWithPriority,\n+} from 'scheduler';\n+\n+export default function PriorityLevels() {\n+ const [defaultPriority, setDefaultPriority] = useState(false);\n+ const [idlePriority, setIdlePriority] = useState(false);\n+ const [normalPriority, setLowPriority] = useState(false);\n+\n+ const resetSequence = useCallback(() => {\n+ setDefaultPriority(false);\n+ setLowPriority(false);\n+ setIdlePriority(false);\n+ }, []);\n+\n+ const startSequence = useCallback(() => {\n+ setDefaultPriority(true);\n+ runWithPriority(LowPriority, () => setLowPriority(true));\n+ runWithPriority(IdlePriority, () => setIdlePriority(true));\n+ }, []);\n+\n+ const labels = [];\n+ if (defaultPriority) {\n+ labels.push('(default priority)');\n+ }\n+ if (normalPriority) {\n+ labels.push('Low Priority');\n+ }\n+ if (idlePriority) {\n+ labels.push('Idle Priority');\n+ }\n+\n+ return (\n+ \n+ Priority Levels<\/h1>\n+}}}}}}

dillon1000/react

Files changed