{"body":"","parents":["6f3c8332d8b2f92784a731e6cc6a707a92495a23"],"files":[{"status":"M","path":"packages\/react-refresh\/src\/ReactFreshRuntime.js"},{"status":"A","path":"packages\/react-refresh\/src\/__tests__\/ReactFreshMultipleRenderer-test.internal.js"}],"patch":"diff --git a\/packages\/react-refresh\/src\/ReactFreshRuntime.js b\/packages\/react-refresh\/src\/ReactFreshRuntime.js\nindex fe73285410..73e4747fbf 100644\n--- a\/packages\/react-refresh\/src\/ReactFreshRuntime.js\n+++ b\/packages\/react-refresh\/src\/ReactFreshRuntime.js\n@@ -20,7 +20,6 @@ import type {\n import type {ReactNodeList} from 'shared\/ReactTypes';\n \n import {REACT_MEMO_TYPE, REACT_FORWARD_REF_TYPE} from 'shared\/ReactSymbols';\n-import warningWithoutStack from 'shared\/warningWithoutStack';\n \n type Signature = {|\n ownKey: string,\n@@ -29,6 +28,13 @@ type Signature = {|\n getCustomHooks: () => Array,\n |};\n \n+type RendererHelpers = {|\n+ findHostInstancesForRefresh: FindHostInstancesForRefresh,\n+ scheduleRefresh: ScheduleRefresh,\n+ scheduleRoot: ScheduleRoot,\n+ setRefreshHandler: SetRefreshHandler,\n+|};\n+\n if (!__DEV__) {\n throw new Error(\n 'React Refresh runtime should not be included in the production bundle.',\n@@ -56,10 +62,9 @@ WeakMap | Map = new PossiblyWeakMap();\n let pendingUpdates: Array<[Family, any]> = [];\n \n \/\/ This is injected by the renderer via DevTools global hook.\n-let setRefreshHandler: null | SetRefreshHandler = null;\n-let scheduleRefresh: null | ScheduleRefresh = null;\n-let scheduleRoot: null | ScheduleRoot = null;\n-let findHostInstancesForRefresh: null | FindHostInstancesForRefresh = null;\n+let helpersByRendererID: Map = new Map();\n+\n+let helpersByRoot: Map = new Map();\n \n \/\/ We keep track of mounted roots so we can schedule updates.\n let mountedRoots: Set = new Set();\n@@ -182,49 +187,23 @@ export function performReactRefresh(): RefreshUpdate | null {\n staleFamilies, \/\/ Families that will be remounted\n };\n \n- if (typeof setRefreshHandler !== 'function') {\n- warningWithoutStack(\n- false,\n- 'Could not find the setRefreshHandler() implementation. ' +\n- 'This likely means that injectIntoGlobalHook() was either ' +\n- 'called before the global DevTools hook was set up, or after the ' +\n- 'renderer has already initialized. Please file an issue with a reproducing case.',\n- );\n- return null;\n- }\n-\n- if (typeof scheduleRefresh !== 'function') {\n- warningWithoutStack(\n- false,\n- 'Could not find the scheduleRefresh() implementation. ' +\n- 'This likely means that injectIntoGlobalHook() was either ' +\n- 'called before the global DevTools hook was set up, or after the ' +\n- 'renderer has already initialized. Please file an issue with a reproducing case.',\n- );\n- return null;\n- }\n- if (typeof scheduleRoot !== 'function') {\n- warningWithoutStack(\n- false,\n- 'Could not find the scheduleRoot() implementation. ' +\n- 'This likely means that injectIntoGlobalHook() was either ' +\n- 'called before the global DevTools hook was set up, or after the ' +\n- 'renderer has already initialized. Please file an issue with a reproducing case.',\n- );\n- return null;\n- }\n- const scheduleRefreshForRoot = scheduleRefresh;\n- const scheduleRenderForRoot = scheduleRoot;\n-\n- \/\/ Even if there are no roots, set the handler on first update.\n- \/\/ This ensures that if *new* roots are mounted, they'll use the resolve handler.\n- setRefreshHandler(resolveFamily);\n+ helpersByRendererID.forEach(helpers => {\n+ \/\/ Even if there are no roots, set the handler on first update.\n+ \/\/ This ensures that if *new* roots are mounted, they'll use the resolve handler.\n+ helpers.setRefreshHandler(resolveFamily);\n+ });\n \n let didError = false;\n let firstError = null;\n failedRoots.forEach((element, root) => {\n+ const helpers = helpersByRoot.get(root);\n+ if (helpers === undefined) {\n+ throw new Error(\n+ 'Could not find helpers for a root. This is a bug in React Refresh.',\n+ );\n+ }\n try {\n- scheduleRenderForRoot(root, element);\n+ helpers.scheduleRoot(root, element);\n } catch (err) {\n if (!didError) {\n didError = true;\n@@ -234,8 +213,14 @@ export function performReactRefresh(): RefreshUpdate | null {\n }\n });\n mountedRoots.forEach(root => {\n+ const helpers = helpersByRoot.get(root);\n+ if (helpers === undefined) {\n+ throw new Error(\n+ 'Could not find helpers for a root. This is a bug in React Refresh.',\n+ );\n+ }\n try {\n- scheduleRefreshForRoot(root, update);\n+ helpers.scheduleRefresh(root, update);\n } catch (err) {\n if (!didError) {\n didError = true;\n@@ -359,20 +344,18 @@ export function findAffectedHostInstances(\n families: Array,\n ): Set {\n if (__DEV__) {\n- if (typeof findHostInstancesForRefresh !== 'function') {\n- warningWithoutStack(\n- false,\n- 'Could not find the findHostInstancesForRefresh() implementation. ' +\n- 'This likely means that injectIntoGlobalHook() was either ' +\n- 'called before the global DevTools hook was set up, or after the ' +\n- 'renderer has already initialized. Please file an issue with a reproducing case.',\n- );\n- return new Set();\n- }\n- const findInstances = findHostInstancesForRefresh;\n let affectedInstances = new Set();\n mountedRoots.forEach(root => {\n- const instancesForRoot = findInstances(root, families);\n+ const helpers = helpersByRoot.get(root);\n+ if (helpers === undefined) {\n+ throw new Error(\n+ 'Could not find helpers for a root. This is a bug in React Refresh.',\n+ );\n+ }\n+ const instancesForRoot = helpers.findHostInstancesForRefresh(\n+ root,\n+ families,\n+ );\n instancesForRoot.forEach(inst => {\n affectedInstances.add(inst);\n });\n@@ -397,11 +380,14 @@ export function injectIntoGlobalHook(globalObject: any): void {\n \/\/ However, if there is no DevTools extension, we'll need to set up the global hook ourselves.\n \/\/ Note that in this case it's important that renderer code runs *after* this method call.\n \/\/ Otherwise, the renderer will think that there is no global hook, and won't do the injection.\n+ let nextID = 0;\n globalObject.__REACT_DEVTOOLS_GLOBAL_HOOK__ = hook = {\n supportsFiber: true,\n- inject() {},\n+ inject(injected) {\n+ return nextID++;\n+ },\n onCommitFiberRoot(\n- id: mixed,\n+ id: number,\n root: FiberRoot,\n maybePriorityLevel: mixed,\n didError: boolean,\n@@ -413,23 +399,31 @@ export function injectIntoGlobalHook(globalObject: any): void {\n \/\/ Here, we just want to get a reference to scheduleRefresh.\n const oldInject = hook.inject;\n hook.inject = function(injected) {\n- findHostInstancesForRefresh = ((injected: any)\n- .findHostInstancesForRefresh: FindHostInstancesForRefresh);\n- scheduleRefresh = ((injected: any).scheduleRefresh: ScheduleRefresh);\n- scheduleRoot = ((injected: any).scheduleRoot: ScheduleRoot);\n- setRefreshHandler = ((injected: any)\n- .setRefreshHandler: SetRefreshHandler);\n- return oldInject.apply(this, arguments);\n+ const id = oldInject.apply(this, arguments);\n+ if (\n+ typeof injected.scheduleRefresh === 'function' &&\n+ typeof injected.setRefreshHandler === 'function'\n+ ) {\n+ \/\/ This version supports React Refresh.\n+ helpersByRendererID.set(id, ((injected: any): RendererHelpers));\n+ }\n+ return id;\n };\n \n \/\/ We also want to track currently mounted roots.\n const oldOnCommitFiberRoot = hook.onCommitFiberRoot;\n hook.onCommitFiberRoot = function(\n- id: mixed,\n+ id: number,\n root: FiberRoot,\n maybePriorityLevel: mixed,\n didError: boolean,\n ) {\n+ const helpers = helpersByRendererID.get(id);\n+ if (helpers === undefined) {\n+ return;\n+ }\n+ helpersByRoot.set(root, helpers);\n+\n const current = root.current;\n const alternate = current.alternate;\n \n@@ -459,6 +453,8 @@ export function injectIntoGlobalHook(globalObject: any): void {\n \/\/ We'll remount it on future edits.\n \/\/ Remember what was rendered so we can restore it.\n failedRoots.set(root, alternate.memoizedState.element);\n+ } else {\n+ helpersByRoot.delete(root);\n }\n } else if (!wasMounted && !isMounted) {\n if (didError && !failedRoots.has(root)) {\ndiff --git a\/packages\/react-refresh\/src\/__tests__\/ReactFreshMultipleRenderer-test.internal.js b\/packages\/react-refresh\/src\/__tests__\/ReactFreshMultipleRenderer-test.internal.js\nnew file mode 100644\nindex 0000000000..2b260a5283\n--- \/dev\/null\n+++ b\/packages\/react-refresh\/src\/__tests__\/ReactFreshMultipleRenderer-test.internal.js\n@@ -0,0 +1,99 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\n+ * @emails react-core\n+ *\/\n+\n+'use strict';\n+\n+jest.resetModules();\n+let React = require('react');\n+let ReactFreshRuntime;\n+if (__DEV__) {\n+ ReactFreshRuntime = require('react-refresh\/runtime');\n+ ReactFreshRuntime.injectIntoGlobalHook(global);\n+}\n+let ReactDOM = require('react-dom');\n+\n+jest.resetModules();\n+let ReactART = require('react-art');\n+let ARTSVGMode = require('art\/modes\/svg');\n+let ARTCurrentMode = require('art\/modes\/current');\n+ARTCurrentMode.setCurrent(ARTSVGMode);\n+\n+describe('ReactFresh', () => {\n+ let container;\n+\n+ beforeEach(() => {\n+ if (__DEV__) {\n+ container = document.createElement('div');\n+ document.body.appendChild(container);\n+ }\n+ });\n+\n+ afterEach(() => {\n+ if (__DEV__) {\n+ document.body.removeChild(container);\n+ container = null;\n+ }\n+ });\n+\n+ it('can update components managd by different renderers independently', () => {\n+ if (__DEV__) {\n+ let InnerV1 = function() {\n+ return ;\n+ };\n+ ReactFreshRuntime.register(InnerV1, 'Inner');\n+\n+ let OuterV1 = function() {\n+ return (\n+

\n+ \n+ \n+ <\/ReactART.Surface>\n+ <\/div>\n+ );\n+ };\n+ ReactFreshRuntime.register(OuterV1, 'Outer');\n+\n+ ReactDOM.render(, container);\n+ const el = container.firstChild;\n+ const pathEl = el.querySelector('path');\n+ expect(el.style.color).toBe('blue');\n+ expect(pathEl.getAttributeNS(null, 'fill')).toBe('rgb(0, 0, 255)');\n+\n+ \/\/ Perform a hot update to the ART-rendered component.\n+ let InnerV2 = function() {\n+ return ;\n+ };\n+ ReactFreshRuntime.register(InnerV2, 'Inner');\n+\n+ ReactFreshRuntime.performReactRefresh();\n+ expect(container.firstChild).toBe(el);\n+ expect(el.querySelector('path')).toBe(pathEl);\n+ expect(el.style.color).toBe('blue');\n+ expect(pathEl.getAttributeNS(null, 'fill')).toBe('rgb(255, 0, 0)');\n+\n+ \/\/ Perform a hot update to the DOM-rendered component.\n+ let OuterV2 = function() {\n+ return (\n+

\n+ \n+ \n+ <\/ReactART.Surface>\n+ <\/div>\n+ );\n+ };\n+ ReactFreshRuntime.register(OuterV2, 'Outer');\n+\n+ ReactFreshRuntime.performReactRefresh();\n+ expect(el.style.color).toBe('red');\n+ expect(container.firstChild).toBe(el);\n+ expect(el.querySelector('path')).toBe(pathEl);\n+ expect(pathEl.getAttributeNS(null, 'fill')).toBe('rgb(255, 0, 0)');\n+ }\n+ });\n+});\n","commit":{"shortRevision":"12be8938a5","authorName":"Dan Abramov","authoredAt":"2019-08-08T19:03:38+01:00","revision":"12be8938a5d71ffdc21ee7cf770bf1cb63ae038e","authorEmail":"dan.abramov@gmail.com","subject":"[Fresh] Support multiple renderers at the same time (#16302)"}}

dillon1000/react

Files changed