{"parents":["915dfe6977e17dfdf364bced50e7c26d54ee72ab"],"body":"","files":[{"status":"M","path":"packages\/react-refresh\/src\/ReactFreshRuntime.js"},{"status":"M","path":"packages\/react-refresh\/src\/__tests__\/ReactFreshIntegration-test.js"}],"commit":{"shortRevision":"f11540926d","authorName":"Dan Abramov","authorEmail":"dan.abramov@gmail.com","subject":"Handle changes at module boundaries (#16002)","authoredAt":"2019-06-27T20:53:03+01:00","revision":"f11540926d2b28ec1f227a79ec9e95b75708c2e3"},"patch":"diff --git a\/packages\/react-refresh\/src\/ReactFreshRuntime.js b\/packages\/react-refresh\/src\/ReactFreshRuntime.js\nindex ed2ecfa8da..32d120c282 100644\n--- a\/packages\/react-refresh\/src\/ReactFreshRuntime.js\n+++ b\/packages\/react-refresh\/src\/ReactFreshRuntime.js\n@@ -37,19 +37,18 @@ if (!__DEV__) {\n \n \/\/ In old environments, we'll leak previous types after every edit.\n const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;\n-const PossiblyWeakSet = typeof WeakSet === 'function' ? WeakSet : Set;\n \n \/\/ We never remove these associations.\n \/\/ It's OK to reference families, but use WeakMap\/Set for types.\n const allFamiliesByID: Map = new Map();\n-\/\/ $FlowIssue\n-const allTypes: WeakSet | Set = new PossiblyWeakSet();\n+const allFamiliesByType: \/\/ $FlowIssue\n+WeakMap | Map = new PossiblyWeakMap();\n const allSignaturesByType: \/\/ $FlowIssue\n WeakMap | Map = new PossiblyWeakMap();\n \/\/ This WeakMap is read by React, so we only put families\n \/\/ that have actually been edited here. This keeps checks fast.\n \/\/ $FlowIssue\n-const familiesByType: \/\/ $FlowIssue\n+const updatedFamiliesByType: \/\/ $FlowIssue\n WeakMap | Map = new PossiblyWeakMap();\n \n \/\/ This is cleared on every performReactRefresh() call.\n@@ -145,7 +144,8 @@ function canPreserveStateBetween(prevType, nextType) {\n }\n \n function resolveFamily(type) {\n- return familiesByType.get(type);\n+ \/\/ Only check updated types to keep lookups fast.\n+ return updatedFamiliesByType.get(type);\n }\n \n export function performReactRefresh(): RefreshUpdate | null {\n@@ -163,8 +163,8 @@ export function performReactRefresh(): RefreshUpdate | null {\n \/\/ Now that we got a real edit, we can create associations\n \/\/ that will be read by the React reconciler.\n const prevType = family.current;\n- familiesByType.set(prevType, family);\n- familiesByType.set(nextType, family);\n+ updatedFamiliesByType.set(prevType, family);\n+ updatedFamiliesByType.set(nextType, family);\n family.current = nextType;\n \n \/\/ Determine whether this should be a re-render or a re-mount.\n@@ -266,11 +266,9 @@ export function register(type: any, id: string): void {\n \/\/ This can happen in an edge case, e.g. if we register\n \/\/ return value of a HOC but it returns a cached component.\n \/\/ Ignore anything but the first registration for each type.\n- if (allTypes.has(type)) {\n+ if (allFamiliesByType.has(type)) {\n return;\n }\n- allTypes.add(type);\n-\n \/\/ Create family or remember to update it.\n \/\/ None of this bookkeeping affects reconciliation\n \/\/ until the first performReactRefresh() call above.\n@@ -281,6 +279,7 @@ export function register(type: any, id: string): void {\n } else {\n pendingUpdates.push([family, type]);\n }\n+ allFamiliesByType.set(type, family);\n \n \/\/ Visit inner types because we might not have registered them.\n if (typeof type === 'object' && type !== null) {\n@@ -345,6 +344,16 @@ export function getFamilyByID(id: string): Family | void {\n }\n }\n \n+export function getFamilyByType(type: any): Family | void {\n+ if (__DEV__) {\n+ return allFamiliesByType.get(type);\n+ } else {\n+ throw new Error(\n+ 'Unexpected call to React Refresh in a production environment.',\n+ );\n+ }\n+}\n+\n export function findAffectedHostInstances(\n families: Array,\n ): Set {\ndiff --git a\/packages\/react-refresh\/src\/__tests__\/ReactFreshIntegration-test.js b\/packages\/react-refresh\/src\/__tests__\/ReactFreshIntegration-test.js\nindex 761b317d6f..7e42fd22c9 100644\n--- a\/packages\/react-refresh\/src\/__tests__\/ReactFreshIntegration-test.js\n+++ b\/packages\/react-refresh\/src\/__tests__\/ReactFreshIntegration-test.js\n@@ -21,6 +21,7 @@ let freshPlugin = require('react-refresh\/babel');\n \n describe('ReactFreshIntegration', () => {\n let container;\n+ let exportsObj;\n \n beforeEach(() => {\n if (__DEV__) {\n@@ -32,6 +33,7 @@ describe('ReactFreshIntegration', () => {\n act = require('react-dom\/test-utils').act;\n container = document.createElement('div');\n document.body.appendChild(container);\n+ exportsObj = undefined;\n }\n });\n \n@@ -63,7 +65,7 @@ describe('ReactFreshIntegration', () => {\n compileDestructuring && 'transform-es2015-destructuring',\n ].filter(Boolean),\n }).code;\n- const exportsObj = {};\n+ exportsObj = {};\n \/\/ eslint-disable-next-line no-new-func\n new Function(\n 'global',\n@@ -73,6 +75,10 @@ describe('ReactFreshIntegration', () => {\n '$RefreshSig$',\n compiled,\n )(global, React, exportsObj, $RefreshReg$, $RefreshSig$);\n+ \/\/ Module systems will register exports as a fallback.\n+ \/\/ This is useful for cases when e.g. a class is exported,\n+ \/\/ and we don't want to propagate the update beyond this module.\n+ $RefreshReg$(exportsObj.default, 'exports.default');\n return exportsObj.default;\n }\n \n@@ -86,9 +92,37 @@ describe('ReactFreshIntegration', () => {\n }\n \n function patch(source) {\n+ const prevExports = exportsObj;\n execute(source);\n+ const nextExports = exportsObj;\n+\n+ \/\/ Check if exported families have changed.\n+ \/\/ (In a real module system we'd do this for *all* exports.)\n+ \/\/ For example, this can happen if you convert a class to a function.\n+ \/\/ Or if you wrap something in a HOC.\n+ let didExportsChange =\n+ ReactFreshRuntime.getFamilyByType(prevExports.default) !==\n+ ReactFreshRuntime.getFamilyByType(nextExports.default);\n+ if (didExportsChange) {\n+ \/\/ In a real module system, we would propagate such updates upwards,\n+ \/\/ and re-execute modules that imported this one. (Just like if we edited them.)\n+ \/\/ This makes adding\/removing\/renaming exports re-render references to them.\n+ \/\/ Here, we'll just force a re-render using the newer type to emulate this.\n+ const NextComponent = nextExports.default;\n+ act(() => {\n+ ReactDOM.render(, container);\n+ });\n+ }\n act(() => {\n- expect(ReactFreshRuntime.performReactRefresh()).not.toBe(null);\n+ const result = ReactFreshRuntime.performReactRefresh();\n+ if (!didExportsChange) {\n+ \/\/ Normally we expect that some components got updated in our tests.\n+ expect(result).not.toBe(null);\n+ } else {\n+ \/\/ However, we have tests where we convert functions to classes,\n+ \/\/ and in those cases it's expected nothing would get updated.\n+ \/\/ (Instead, the export change branch above would take care of it.)\n+ }\n });\n expect(ReactFreshRuntime._getMountedRootCount()).toBe(1);\n }\n@@ -945,6 +979,326 @@ describe('ReactFreshIntegration', () => {\n }\n });\n \n+ it('remounts when switching export from function to class', () => {\n+ if (__DEV__) {\n+ render(`\n+ export default function App() {\n+ return

A1<\/h1>;\n+ }\n+ `);\n+ let el = container.firstChild;\n+ expect(el.textContent).toBe('A1');\n+ patch(`\n+ export default function App() {\n+ return

A2<\/h1>;\n+ }\n+ `);\n+ \/\/ Keep state.\n+ expect(container.firstChild).toBe(el);\n+ expect(el.textContent).toBe('A2');\n+\n+ patch(`\n+ export default class App extends React.Component {\n+ render() {\n+ return

B1<\/h1>\n+ }\n+ }\n+ `);\n+ \/\/ Reset (function -> class).\n+ expect(container.firstChild).not.toBe(el);\n+ el = container.firstChild;\n+ expect(el.textContent).toBe('B1');\n+ patch(`\n+ export default class App extends React.Component {\n+ render() {\n+ return

B2<\/h1>\n+ }\n+ }\n+ `);\n+ \/\/ Reset (classes always do).\n+ expect(container.firstChild).not.toBe(el);\n+ el = container.firstChild;\n+ expect(el.textContent).toBe('B2');\n+\n+ patch(`\n+ export default function App() {\n+ return

C1<\/h1>;\n+ }\n+ `);\n+ \/\/ Reset (class -> function).\n+ expect(container.firstChild).not.toBe(el);\n+ el = container.firstChild;\n+ expect(el.textContent).toBe('C1');\n+ patch(`\n+ export default function App() {\n+ return

C2<\/h1>;\n+ }\n+ `);\n+ expect(container.firstChild).toBe(el);\n+ expect(el.textContent).toBe('C2');\n+\n+ patch(`\n+ export default function App() {\n+ return

D1<\/h1>;\n+ }\n+ `);\n+ el = container.firstChild;\n+ expect(el.textContent).toBe('D1');\n+ patch(`\n+ export default function App() {\n+ return

D2<\/h1>;\n+ }\n+ `);\n+ \/\/ Keep state.\n+ expect(container.firstChild).toBe(el);\n+ expect(el.textContent).toBe('D2');\n+ }\n+ });\n+\n+ it('remounts when switching export from class to function', () => {\n+ if (DEV) {\n+ render(`\n+ export default class App extends React.Component {\n+ render() {\n+ return

A1<\/h1>\n+ }\n+ }\n+ `);\n+ let el = container.firstChild;\n+ expect(el.textContent).toBe('A1');\n+ patch(`\n+ export default class App extends React.Component {\n+ render() {\n+ return

A2<\/h1>\n+ }\n+ }\n+ `);\n+ \/\/ Reset (classes always do).\n+ expect(container.firstChild).not.toBe(el);\n+ el = container.firstChild;\n+ expect(el.textContent).toBe('A2');\n+\n+ patch(`\n+ export default function App() {\n+ return

B1<\/h1>;\n+ }\n+ `);\n+ \/\/ Reset (class -> function).\n+ expect(container.firstChild).not.toBe(el);\n+ el = container.firstChild;\n+ expect(el.textContent).toBe('B1');\n+ patch(`\n+ export default function App() {\n+ return

B2<\/h1>;\n+ }\n+ `);\n+ \/\/ Keep state.\n+ expect(container.firstChild).toBe(el);\n+ expect(el.textContent).toBe('B2');\n+\n+ patch(`\n+ export default class App extends React.Component {\n+ render() {\n+ return

C1<\/h1>\n+ }\n+ }\n+ `);\n+ \/\/ Reset (function -> class).\n+ expect(container.firstChild).not.toBe(el);\n+ el = container.firstChild;\n+ expect(el.textContent).toBe('C1');\n+ }\n+ });\n+\n+ it('remounts when wrapping export in a HOC', () => {\n+ if (DEV) {\n+ render(`\n+ export default function App() {\n+ return

A1<\/h1>;\n+ }\n+ `);\n+ let el = container.firstChild;\n+ expect(el.textContent).toBe('A1');\n+ patch(`\n+ export default function App() {\n+ return

A2<\/h1>;\n+ }\n+ `);\n+ \/\/ Keep state.\n+ expect(container.firstChild).toBe(el);\n+ expect(el.textContent).toBe('A2');\n+\n+ patch(`\n+ function hoc(Inner) {\n+ return function Wrapper() {\n+ return ;\n+ }\n+ }\n+\n+ function App() {\n+ return
B1<\/h1>;\n+ }\n+\n+ export default hoc(App);\n+ `);\n+ \/\/ Reset (wrapped in HOC).\n+ expect(container.firstChild).not.toBe(el);\n+ el = container.firstChild;\n+ expect(el.textContent).toBe('B1');\n+ patch(`\n+ function hoc(Inner) {\n+ return function Wrapper() {\n+ return ;\n+ }\n+ }\n+\n+ function App() {\n+ return
B2<\/h1>;\n+ }\n+\n+ export default hoc(App);\n+ `);\n+ \/\/ Keep state.\n+ expect(container.firstChild).toBe(el);\n+ expect(el.textContent).toBe('B2');\n+\n+ patch(`\n+ export default function App() {\n+ return
C1<\/h1>;\n+ }\n+ `);\n+ \/\/ Reset (unwrapped).\n+ expect(container.firstChild).not.toBe(el);\n+ el = container.firstChild;\n+ expect(el.textContent).toBe('C1');\n+ patch(`\n+ export default function App() {\n+ return
C2<\/h1>;\n+ }\n+ `);\n+ expect(container.firstChild).toBe(el);\n+ expect(el.textContent).toBe('C2');\n+ }\n+ });\n+\n+ it('remounts when wrapping export in memo()', () => {\n+ if (DEV) {\n+ render(`\n+ export default function App() {\n+ return
A1<\/h1>;\n+ }\n+ `);\n+ let el = container.firstChild;\n+ expect(el.textContent).toBe('A1');\n+ patch(`\n+ export default function App() {\n+ return
A2<\/h1>;\n+ }\n+ `);\n+ \/\/ Keep state.\n+ expect(container.firstChild).toBe(el);\n+ expect(el.textContent).toBe('A2');\n+\n+ patch(`\n+ function App() {\n+ return
B1<\/h1>;\n+ }\n+\n+ export default React.memo(App);\n+ `);\n+ \/\/ Reset (wrapped in HOC).\n+ expect(container.firstChild).not.toBe(el);\n+ el = container.firstChild;\n+ expect(el.textContent).toBe('B1');\n+ patch(`\n+ function App() {\n+ return
B2<\/h1>;\n+ }\n+\n+ export default React.memo(App);\n+ `);\n+ \/\/ Keep state.\n+ expect(container.firstChild).toBe(el);\n+ expect(el.textContent).toBe('B2');\n+\n+ patch(`\n+ export default function App() {\n+ return
C1<\/h1>;\n+ }\n+ `);\n+ \/\/ Reset (unwrapped).\n+ expect(container.firstChild).not.toBe(el);\n+ el = container.firstChild;\n+ expect(el.textContent).toBe('C1');\n+ patch(`\n+ export default function App() {\n+ return
C2<\/h1>;\n+ }\n+ `);\n+ expect(container.firstChild).toBe(el);\n+ expect(el.textContent).toBe('C2');\n+ }\n+ });\n+\n+ it('remounts when wrapping export in forwardRef()', () => {\n+ if (DEV) {\n+ render(`\n+ export default function App() {\n+ return
A1<\/h1>;\n+ }\n+ `);\n+ let el = container.firstChild;\n+ expect(el.textContent).toBe('A1');\n+ patch(`\n+ export default function App() {\n+ return
A2<\/h1>;\n+ }\n+ `);\n+ \/\/ Keep state.\n+ expect(container.firstChild).toBe(el);\n+ expect(el.textContent).toBe('A2');\n+\n+ patch(`\n+ function App() {\n+ return
B1<\/h1>;\n+ }\n+\n+ export default React.forwardRef(App);\n+ `);\n+ \/\/ Reset (wrapped in HOC).\n+ expect(container.firstChild).not.toBe(el);\n+ el = container.firstChild;\n+ expect(el.textContent).toBe('B1');\n+ patch(`\n+ function App() {\n+ return
B2<\/h1>;\n+ }\n+\n+ export default React.forwardRef(App);\n+ `);\n+ \/\/ Keep state.\n+ expect(container.firstChild).toBe(el);\n+ expect(el.textContent).toBe('B2');\n+\n+ patch(`\n+ export default function App() {\n+ return
C1<\/h1>;\n+ }\n+ `);\n+ \/\/ Reset (unwrapped).\n+ expect(container.firstChild).not.toBe(el);\n+ el = container.firstChild;\n+ expect(el.textContent).toBe('C1');\n+ patch(`\n+ export default function App() {\n+ return
C2<\/h1>;\n+ }\n+ `);\n+ expect(container.firstChild).toBe(el);\n+ expect(el.textContent).toBe('C2');\n+ }\n+ });\n+\n describe('with inline requires', () => {\n beforeEach(() => {\n global.FakeModuleSystem = {};\n"}

A1<\/h1>;\n+ }\n+ `);\n+ let el = container.firstChild;\n+ expect(el.textContent).toBe('A1');\n+ patch(`\n+ export default function App() {\n+ return

A2<\/h1>;\n+ }\n+ `);\n+ \/\/ Keep state.\n+ expect(container.firstChild).toBe(el);\n+ expect(el.textContent).toBe('A2');\n+\n+ patch(`\n+ export default class App extends React.Component {\n+ render() {\n+ return

B1<\/h1>\n+ }\n+ }\n+ `);\n+ \/\/ Reset (function -> class).\n+ expect(container.firstChild).not.toBe(el);\n+ el = container.firstChild;\n+ expect(el.textContent).toBe('B1');\n+ patch(`\n+ export default class App extends React.Component {\n+ render() {\n+ return

B2<\/h1>\n+ }\n+ }\n+ `);\n+ \/\/ Reset (classes always do).\n+ expect(container.firstChild).not.toBe(el);\n+ el = container.firstChild;\n+ expect(el.textContent).toBe('B2');\n+\n+ patch(`\n+ export default function App() {\n+ return

C1<\/h1>;\n+ }\n+ `);\n+ \/\/ Reset (class -> function).\n+ expect(container.firstChild).not.toBe(el);\n+ el = container.firstChild;\n+ expect(el.textContent).toBe('C1');\n+ patch(`\n+ export default function App() {\n+ return

C2<\/h1>;\n+ }\n+ `);\n+ expect(container.firstChild).toBe(el);\n+ expect(el.textContent).toBe('C2');\n+\n+ patch(`\n+ export default function App() {\n+ return

D1<\/h1>;\n+ }\n+ `);\n+ el = container.firstChild;\n+ expect(el.textContent).toBe('D1');\n+ patch(`\n+ export default function App() {\n+ return

A1<\/h1>\n+ }\n+ }\n+ `);\n+ let el = container.firstChild;\n+ expect(el.textContent).toBe('A1');\n+ patch(`\n+ export default class App extends React.Component {\n+ render() {\n+ return

A2<\/h1>\n+ }\n+ }\n+ `);\n+ \/\/ Reset (classes always do).\n+ expect(container.firstChild).not.toBe(el);\n+ el = container.firstChild;\n+ expect(el.textContent).toBe('A2');\n+\n+ patch(`\n+ export default function App() {\n+ return

B1<\/h1>;\n+ }\n+ `);\n+ \/\/ Reset (class -> function).\n+ expect(container.firstChild).not.toBe(el);\n+ el = container.firstChild;\n+ expect(el.textContent).toBe('B1');\n+ patch(`\n+ export default function App() {\n+ return

B2<\/h1>;\n+ }\n+ `);\n+ \/\/ Keep state.\n+ expect(container.firstChild).toBe(el);\n+ expect(el.textContent).toBe('B2');\n+\n+ patch(`\n+ export default class App extends React.Component {\n+ render() {\n+ return

A1<\/h1>;\n+ }\n+ `);\n+ let el = container.firstChild;\n+ expect(el.textContent).toBe('A1');\n+ patch(`\n+ export default function App() {\n+ return

B2<\/h1>;\n+ }\n+\n+ export default hoc(App);\n+ `);\n+ \/\/ Keep state.\n+ expect(container.firstChild).toBe(el);\n+ expect(el.textContent).toBe('B2');\n+\n+ patch(`\n+ export default function App() {\n+ return

C1<\/h1>;\n+ }\n+ `);\n+ \/\/ Reset (unwrapped).\n+ expect(container.firstChild).not.toBe(el);\n+ el = container.firstChild;\n+ expect(el.textContent).toBe('C1');\n+ patch(`\n+ export default function App() {\n+ return

C2<\/h1>;\n+ }\n+ `);\n+ expect(container.firstChild).toBe(el);\n+ expect(el.textContent).toBe('C2');\n+ }\n+ });\n+\n+ it('remounts when wrapping export in memo()', () => {\n+ if (__DEV__) {\n+ render(`\n+ export default function App() {\n+ return

A1<\/h1>;\n+ }\n+ `);\n+ let el = container.firstChild;\n+ expect(el.textContent).toBe('A1');\n+ patch(`\n+ export default function App() {\n+ return

A2<\/h1>;\n+ }\n+ `);\n+ \/\/ Keep state.\n+ expect(container.firstChild).toBe(el);\n+ expect(el.textContent).toBe('A2');\n+\n+ patch(`\n+ function App() {\n+ return

B1<\/h1>;\n+ }\n+\n+ export default React.memo(App);\n+ `);\n+ \/\/ Reset (wrapped in HOC).\n+ expect(container.firstChild).not.toBe(el);\n+ el = container.firstChild;\n+ expect(el.textContent).toBe('B1');\n+ patch(`\n+ function App() {\n+ return

B2<\/h1>;\n+ }\n+\n+ export default React.memo(App);\n+ `);\n+ \/\/ Keep state.\n+ expect(container.firstChild).toBe(el);\n+ expect(el.textContent).toBe('B2');\n+\n+ patch(`\n+ export default function App() {\n+ return

C1<\/h1>;\n+ }\n+ `);\n+ \/\/ Reset (unwrapped).\n+ expect(container.firstChild).not.toBe(el);\n+ el = container.firstChild;\n+ expect(el.textContent).toBe('C1');\n+ patch(`\n+ export default function App() {\n+ return

C2<\/h1>;\n+ }\n+ `);\n+ expect(container.firstChild).toBe(el);\n+ expect(el.textContent).toBe('C2');\n+ }\n+ });\n+\n+ it('remounts when wrapping export in forwardRef()', () => {\n+ if (__DEV__) {\n+ render(`\n+ export default function App() {\n+ return

A1<\/h1>;\n+ }\n+ `);\n+ let el = container.firstChild;\n+ expect(el.textContent).toBe('A1');\n+ patch(`\n+ export default function App() {\n+ return

A2<\/h1>;\n+ }\n+ `);\n+ \/\/ Keep state.\n+ expect(container.firstChild).toBe(el);\n+ expect(el.textContent).toBe('A2');\n+\n+ patch(`\n+ function App() {\n+ return

B1<\/h1>;\n+ }\n+\n+ export default React.forwardRef(App);\n+ `);\n+ \/\/ Reset (wrapped in HOC).\n+ expect(container.firstChild).not.toBe(el);\n+ el = container.firstChild;\n+ expect(el.textContent).toBe('B1');\n+ patch(`\n+ function App() {\n+ return

B2<\/h1>;\n+ }\n+\n+ export default React.forwardRef(App);\n+ `);\n+ \/\/ Keep state.\n+ expect(container.firstChild).toBe(el);\n+ expect(el.textContent).toBe('B2');\n+\n+ patch(`\n+ export default function App() {\n+ return

C1<\/h1>;\n+ }\n+ `);\n+ \/\/ Reset (unwrapped).\n+ expect(container.firstChild).not.toBe(el);\n+ el = container.firstChild;\n+ expect(el.textContent).toBe('C1');\n+ patch(`\n+ export default function App() {\n+ return

C2<\/h1>;\n+ }\n+ `);\n+ expect(container.firstChild).toBe(el);\n+ expect(el.textContent).toBe('C2');\n+ }\n+ });\n+\n describe('with inline requires', () => {\n beforeEach(() => {\n global.FakeModuleSystem = {};\n"}

C2<\/h1>;\n+ }\n+ `);\n+ expect(container.firstChild).toBe(el);\n+ expect(el.textContent).toBe('C2');\n+ }\n+ });\n+\n+ it('remounts when wrapping export in memo()', () => {\n+ if (DEV) {\n+ render(`\n+ export default function App() {\n+ return

C2<\/h1>;\n+ }\n+ `);\n+ expect(container.firstChild).toBe(el);\n+ expect(el.textContent).toBe('C2');\n+ }\n+ });\n+\n+ it('remounts when wrapping export in forwardRef()', () => {\n+ if (DEV) {\n+ render(`\n+ export default function App() {\n+ return

dillon1000/react

Files changed