From d346d92084316ec10714b9ac4bfb1ebcfdf05fb9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= Date: Sat, 28 Sep 2019 10:50:57 -0700 Subject: [PATCH 1/3] Allow Suspense Mismatch on the Client to Silently Proceed (#16943) * Regression test: Suspense + hydration + legacy * Allow Suspense Mismatch on the Client to Silently Proceed This fixes but isn't actually the semantics that we want this case to have. --- .../__tests__/ReactServerRenderingHydration-test.js | 11 +++++++++++ .../src/ReactFiberHydrationContext.js | 9 ++++----- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js index 33e56bba260ef..1707f9f1dbdc5 100644 --- a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js +++ b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js @@ -659,4 +659,15 @@ describe('ReactDOMServerHydration', () => { document.body.removeChild(parentContainer); }); + + it('regression test: Suspense + hydration in legacy mode ', () => { + const element = document.createElement('div'); + element.innerHTML = '
Hello World
'; + ReactDOM.hydrate( + +
Hello World
+ , + element, + ); + }); }); diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.js b/packages/react-reconciler/src/ReactFiberHydrationContext.js index 8ae0f7b851647..781335b901463 100644 --- a/packages/react-reconciler/src/ReactFiberHydrationContext.js +++ b/packages/react-reconciler/src/ReactFiberHydrationContext.js @@ -404,11 +404,10 @@ function skipPastDehydratedSuspenseInstance( let suspenseState: null | SuspenseState = fiber.memoizedState; let suspenseInstance: null | SuspenseInstance = suspenseState !== null ? suspenseState.dehydrated : null; - invariant( - suspenseInstance, - 'Expected to have a hydrated suspense instance. ' + - 'This error is likely caused by a bug in React. Please file an issue.', - ); + if (suspenseInstance === null) { + // This Suspense boundary was hydrated without a match. + return nextHydratableInstance; + } return getNextHydratableInstanceAfterSuspenseInstance(suspenseInstance); } From 2f2ab82af602f3a486c2c2c52fcdd3c10144b5db Mon Sep 17 00:00:00 2001 From: Andrew Clark Date: Sat, 28 Sep 2019 21:39:28 -0700 Subject: [PATCH 2/3] Update local version numbers for 16.10.1 release --- packages/create-subscription/package.json | 2 +- packages/eslint-plugin-react-hooks/package.json | 2 +- packages/jest-react/package.json | 2 +- packages/react-art/package.json | 4 ++-- packages/react-dom/package.json | 4 ++-- packages/react-is/package.json | 2 +- packages/react-reconciler/package.json | 4 ++-- packages/react-refresh/package.json | 2 +- packages/react-test-renderer/package.json | 4 ++-- packages/react/package.json | 2 +- packages/scheduler/package.json | 2 +- packages/shared/ReactVersion.js | 2 +- packages/use-subscription/package.json | 2 +- 13 files changed, 17 insertions(+), 17 deletions(-) diff --git a/packages/create-subscription/package.json b/packages/create-subscription/package.json index adab23210e6a9..e03ce56e283c4 100644 --- a/packages/create-subscription/package.json +++ b/packages/create-subscription/package.json @@ -1,7 +1,7 @@ { "name": "create-subscription", "description": "utility for subscribing to external data sources inside React components", - "version": "16.9.0", + "version": "16.10.1", "repository": { "type": "git", "url": "https://github.com/facebook/react.git", diff --git a/packages/eslint-plugin-react-hooks/package.json b/packages/eslint-plugin-react-hooks/package.json index 293a9c44ee1ab..6e7d978e2502e 100644 --- a/packages/eslint-plugin-react-hooks/package.json +++ b/packages/eslint-plugin-react-hooks/package.json @@ -1,7 +1,7 @@ { "name": "eslint-plugin-react-hooks", "description": "ESLint rules for React Hooks", - "version": "2.0.1", + "version": "2.1.1", "repository": { "type": "git", "url": "https://github.com/facebook/react.git", diff --git a/packages/jest-react/package.json b/packages/jest-react/package.json index 55acca9f4e7b8..070e704c0fefe 100644 --- a/packages/jest-react/package.json +++ b/packages/jest-react/package.json @@ -1,6 +1,6 @@ { "name": "jest-react", - "version": "0.7.0", + "version": "0.8.1", "description": "Jest matchers and utilities for testing React components.", "main": "index.js", "repository": { diff --git a/packages/react-art/package.json b/packages/react-art/package.json index ae2ebcb1baf9b..9b1d42876aa6a 100644 --- a/packages/react-art/package.json +++ b/packages/react-art/package.json @@ -1,7 +1,7 @@ { "name": "react-art", "description": "React ART is a JavaScript library for drawing vector graphics using React. It provides declarative and reactive bindings to the ART library. Using the same declarative API you can render the output to either Canvas, SVG or VML (IE8).", - "version": "16.9.0", + "version": "16.10.1", "main": "index.js", "repository": { "type": "git", @@ -27,7 +27,7 @@ "loose-envify": "^1.1.0", "object-assign": "^4.1.1", "prop-types": "^15.6.2", - "scheduler": "^0.15.0" + "scheduler": "^0.16.1" }, "peerDependencies": { "react": "^16.0.0" diff --git a/packages/react-dom/package.json b/packages/react-dom/package.json index d6b806ad1f3a4..c814790ad4882 100644 --- a/packages/react-dom/package.json +++ b/packages/react-dom/package.json @@ -1,6 +1,6 @@ { "name": "react-dom", - "version": "16.9.0", + "version": "16.10.1", "description": "React package for working with the DOM.", "main": "index.js", "repository": { @@ -20,7 +20,7 @@ "loose-envify": "^1.1.0", "object-assign": "^4.1.1", "prop-types": "^15.6.2", - "scheduler": "^0.15.0" + "scheduler": "^0.16.1" }, "peerDependencies": { "react": "^16.0.0" diff --git a/packages/react-is/package.json b/packages/react-is/package.json index fd98659336ec1..60a371d5f8f81 100644 --- a/packages/react-is/package.json +++ b/packages/react-is/package.json @@ -1,6 +1,6 @@ { "name": "react-is", - "version": "16.9.0", + "version": "16.10.1", "description": "Brand checking of React Elements.", "main": "index.js", "repository": { diff --git a/packages/react-reconciler/package.json b/packages/react-reconciler/package.json index d6b9238e8dde2..a4cd1f1b389e8 100644 --- a/packages/react-reconciler/package.json +++ b/packages/react-reconciler/package.json @@ -1,7 +1,7 @@ { "name": "react-reconciler", "description": "React package for creating custom renderers.", - "version": "0.21.0", + "version": "0.22.1", "keywords": [ "react" ], @@ -33,7 +33,7 @@ "loose-envify": "^1.1.0", "object-assign": "^4.1.1", "prop-types": "^15.6.2", - "scheduler": "^0.15.0" + "scheduler": "^0.16.1" }, "browserify": { "transform": [ diff --git a/packages/react-refresh/package.json b/packages/react-refresh/package.json index 0f8ba7d6da735..b7c3d82772fab 100644 --- a/packages/react-refresh/package.json +++ b/packages/react-refresh/package.json @@ -4,7 +4,7 @@ "keywords": [ "react" ], - "version": "0.4.2", + "version": "0.5.1", "homepage": "https://reactjs.org/", "bugs": "https://github.com/facebook/react/issues", "license": "MIT", diff --git a/packages/react-test-renderer/package.json b/packages/react-test-renderer/package.json index a99a4ff2282e5..e606520a040c7 100644 --- a/packages/react-test-renderer/package.json +++ b/packages/react-test-renderer/package.json @@ -1,6 +1,6 @@ { "name": "react-test-renderer", - "version": "16.9.0", + "version": "16.10.1", "description": "React package for snapshot testing.", "main": "index.js", "repository": { @@ -22,7 +22,7 @@ "object-assign": "^4.1.1", "prop-types": "^15.6.2", "react-is": "^16.8.6", - "scheduler": "^0.15.0" + "scheduler": "^0.16.1" }, "peerDependencies": { "react": "^16.0.0" diff --git a/packages/react/package.json b/packages/react/package.json index 2d50909dcd0e4..1edea1415968e 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -4,7 +4,7 @@ "keywords": [ "react" ], - "version": "16.9.0", + "version": "16.10.1", "homepage": "https://reactjs.org/", "bugs": "https://github.com/facebook/react/issues", "license": "MIT", diff --git a/packages/scheduler/package.json b/packages/scheduler/package.json index da27080f4e534..e4946a97a15e3 100644 --- a/packages/scheduler/package.json +++ b/packages/scheduler/package.json @@ -1,6 +1,6 @@ { "name": "scheduler", - "version": "0.15.0", + "version": "0.16.1", "description": "Cooperative scheduler for the browser environment.", "main": "index.js", "repository": { diff --git a/packages/shared/ReactVersion.js b/packages/shared/ReactVersion.js index 2496b912cac1c..a080a6a857175 100644 --- a/packages/shared/ReactVersion.js +++ b/packages/shared/ReactVersion.js @@ -8,4 +8,4 @@ 'use strict'; // TODO: this is special because it gets imported during build. -module.exports = '16.8.6'; +module.exports = '16.10.1'; diff --git a/packages/use-subscription/package.json b/packages/use-subscription/package.json index 91920b1ec06e1..e14f5be08c090 100644 --- a/packages/use-subscription/package.json +++ b/packages/use-subscription/package.json @@ -1,7 +1,7 @@ { "name": "use-subscription", "description": "Reusable hooks", - "version": "1.0.0", + "version": "1.1.1", "repository": { "type": "git", "url": "https://github.com/facebook/react.git", From 4ab6305f6d337c4a78c9e44f18cdd1b3021af7f9 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Thu, 3 Oct 2019 11:24:32 -0700 Subject: [PATCH 3/3] Move eventSystemFlags to last argument in event plugin extractors (#16978) Fix for necolas/react-native-web#1443 --- packages/legacy-events/EventPluginHub.js | 8 ++++---- packages/legacy-events/PluginModuleType.js | 2 +- packages/legacy-events/ResponderEventPlugin.js | 2 +- .../__tests__/ResponderEventPlugin-test.internal.js | 2 +- .../react-devtools-shell/src/app/ReactNativeWeb/index.js | 4 ++-- packages/react-dom/src/events/BeforeInputEventPlugin.js | 2 +- packages/react-dom/src/events/ChangeEventPlugin.js | 2 +- packages/react-dom/src/events/EnterLeaveEventPlugin.js | 2 +- packages/react-dom/src/events/ReactDOMEventListener.js | 2 +- packages/react-dom/src/events/SelectEventPlugin.js | 2 +- packages/react-dom/src/events/SimpleEventPlugin.js | 2 +- .../react-native-renderer/src/ReactFabricEventEmitter.js | 2 +- .../src/ReactNativeBridgeEventPlugin.js | 2 +- .../react-native-renderer/src/ReactNativeEventEmitter.js | 2 +- 14 files changed, 18 insertions(+), 18 deletions(-) diff --git a/packages/legacy-events/EventPluginHub.js b/packages/legacy-events/EventPluginHub.js index 1ab4bc3fa4561..f5068ff39b18e 100644 --- a/packages/legacy-events/EventPluginHub.js +++ b/packages/legacy-events/EventPluginHub.js @@ -132,10 +132,10 @@ export function getListener(inst: Fiber, registrationName: string) { */ function extractPluginEvents( topLevelType: TopLevelType, - eventSystemFlags: EventSystemFlags, targetInst: null | Fiber, nativeEvent: AnyNativeEvent, nativeEventTarget: EventTarget, + eventSystemFlags: EventSystemFlags, ): Array | ReactSyntheticEvent | null { let events = null; for (let i = 0; i < plugins.length; i++) { @@ -144,10 +144,10 @@ function extractPluginEvents( if (possiblePlugin) { const extractedEvents = possiblePlugin.extractEvents( topLevelType, - eventSystemFlags, targetInst, nativeEvent, nativeEventTarget, + eventSystemFlags, ); if (extractedEvents) { events = accumulateInto(events, extractedEvents); @@ -159,17 +159,17 @@ function extractPluginEvents( export function runExtractedPluginEventsInBatch( topLevelType: TopLevelType, - eventSystemFlags: EventSystemFlags, targetInst: null | Fiber, nativeEvent: AnyNativeEvent, nativeEventTarget: EventTarget, + eventSystemFlags: EventSystemFlags, ) { const events = extractPluginEvents( topLevelType, - eventSystemFlags, targetInst, nativeEvent, nativeEventTarget, + eventSystemFlags, ); runEventsInBatch(events); } diff --git a/packages/legacy-events/PluginModuleType.js b/packages/legacy-events/PluginModuleType.js index c1cf5fc6783e8..d6728427e874f 100644 --- a/packages/legacy-events/PluginModuleType.js +++ b/packages/legacy-events/PluginModuleType.js @@ -25,10 +25,10 @@ export type PluginModule = { eventTypes: EventTypes, extractEvents: ( topLevelType: TopLevelType, - eventSystemFlags: EventSystemFlags, targetInst: null | Fiber, nativeTarget: NativeEvent, nativeEventTarget: EventTarget, + eventSystemFlags: EventSystemFlags, ) => ?ReactSyntheticEvent, tapMoveThreshold?: number, }; diff --git a/packages/legacy-events/ResponderEventPlugin.js b/packages/legacy-events/ResponderEventPlugin.js index aea49578a397f..f58323aa9a8bb 100644 --- a/packages/legacy-events/ResponderEventPlugin.js +++ b/packages/legacy-events/ResponderEventPlugin.js @@ -504,10 +504,10 @@ const ResponderEventPlugin = { */ extractEvents: function( topLevelType, - eventSystemFlags, targetInst, nativeEvent, nativeEventTarget, + eventSystemFlags, ) { if (isStartish(topLevelType)) { trackedTouchCount += 1; diff --git a/packages/legacy-events/__tests__/ResponderEventPlugin-test.internal.js b/packages/legacy-events/__tests__/ResponderEventPlugin-test.internal.js index c235578b28758..abe96a3808057 100644 --- a/packages/legacy-events/__tests__/ResponderEventPlugin-test.internal.js +++ b/packages/legacy-events/__tests__/ResponderEventPlugin-test.internal.js @@ -314,10 +314,10 @@ const run = function(config, hierarchyConfig, nativeEventConfig) { // Trigger the event const extractedEvents = ResponderEventPlugin.extractEvents( nativeEventConfig.topLevelType, - PLUGIN_EVENT_SYSTEM, nativeEventConfig.targetInst, nativeEventConfig.nativeEvent, nativeEventConfig.target, + PLUGIN_EVENT_SYSTEM, ); // At this point the negotiation events have been dispatched as part of the diff --git a/packages/react-devtools-shell/src/app/ReactNativeWeb/index.js b/packages/react-devtools-shell/src/app/ReactNativeWeb/index.js index 9f8246458e7b9..95961378f00d2 100644 --- a/packages/react-devtools-shell/src/app/ReactNativeWeb/index.js +++ b/packages/react-devtools-shell/src/app/ReactNativeWeb/index.js @@ -11,7 +11,7 @@ import React, {Fragment, useState} from 'react'; import {Button, Text, View} from 'react-native-web'; export default function ReactNativeWeb() { - const [backgroundColor, setBackgroundColor] = useState('blue'); + const [backgroundColor, setBackgroundColor] = useState('purple'); const toggleColor = () => setBackgroundColor(backgroundColor === 'purple' ? 'green' : 'purple'); return ( @@ -29,8 +29,8 @@ export default function ReactNativeWeb() { left