From 5890e0e692d1c39eddde0110bd0d123409f31dd3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= Date: Thu, 13 May 2021 13:18:21 -0400 Subject: [PATCH] Remove data-reactroot from server rendering and hydration heuristic (#20996) This was used to implicitly hydrate if you call ReactDOM.render. We've had a warning to explicitly use ReactDOM.hydrate(...) instead of ReactDOM.render(...). We can now remove this from the generated markup. (And avoid adding it to Fizz.) This is a little strange to do now since we're trying hard to make the root API work the same. But if we kept it, we'd need to keep it in the generated output which adds unnecessary bytes. It also risks people relying on it, in the Fizz world where as this is an opportunity to create that clean state. We could possibly only keep it in the old server rendering APIs but then that creates an implicit dependency between which server API and which client API that you use. Currently you can really mix and match either way. --- .../__tests__/ReactCompositeComponent-test.js | 39 ---- ...eactLegacyContextDisabled-test.internal.js | 4 +- .../src/__tests__/ReactRenderDocument-test.js | 219 ------------------ .../__tests__/ReactServerRendering-test.js | 22 +- .../ReactServerRenderingHydration-test.js | 97 +------- .../__tests__/escapeTextForBrowser-test.js | 16 +- .../quoteAttributeValueForBrowser-test.js | 17 +- .../ReactDOMServerIntegrationTestUtils.js | 2 +- .../react-dom/src/client/ReactDOMComponent.js | 3 - .../react-dom/src/client/ReactDOMLegacy.js | 42 +--- .../DOMPluginEventSystem-test.internal.js | 6 +- .../src/server/DOMMarkupOperations.js | 5 - .../src/server/ReactPartialRenderer.js | 10 - packages/react-dom/src/shared/DOMProperty.js | 1 - .../src/__tests__/ReactScope-test.internal.js | 2 +- .../ReactHooks-test.internal.js.snap | 2 +- 16 files changed, 31 insertions(+), 456 deletions(-) diff --git a/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js b/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js index 7006f51b77f52..1c02667d7bc9b 100644 --- a/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js +++ b/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js @@ -13,7 +13,6 @@ let ChildUpdates; let MorphingComponent; let React; let ReactDOM; -let ReactDOMServer; let ReactCurrentOwner; let ReactTestUtils; let PropTypes; @@ -65,7 +64,6 @@ describe('ReactCompositeComponent', () => { jest.resetModules(); React = require('react'); ReactDOM = require('react-dom'); - ReactDOMServer = require('react-dom/server'); ReactCurrentOwner = require('react') .__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner; ReactTestUtils = require('react-dom/test-utils'); @@ -170,43 +168,6 @@ describe('ReactCompositeComponent', () => { expect(el.tagName).toBe('A'); }); - it('should not thrash a server rendered layout with client side one', () => { - class Child extends React.Component { - render() { - return null; - } - } - - class Parent extends React.Component { - render() { - return ( -
- -
- ); - } - } - - const markup = ReactDOMServer.renderToString(); - - // Old API based on heuristic - let container = document.createElement('div'); - container.innerHTML = markup; - expect(() => - ReactDOM.render(, container), - ).toWarnDev( - 'render(): Calling ReactDOM.render() to hydrate server-rendered markup ' + - 'will stop working in React v18. Replace the ReactDOM.render() call ' + - 'with ReactDOM.hydrate() if you want React to attach to the server HTML.', - {withoutStack: true}, - ); - - // New explicit API - container = document.createElement('div'); - container.innerHTML = markup; - ReactDOM.hydrate(, container); - }); - it('should react to state changes from callbacks', () => { const container = document.createElement('div'); document.body.appendChild(container); diff --git a/packages/react-dom/src/__tests__/ReactLegacyContextDisabled-test.internal.js b/packages/react-dom/src/__tests__/ReactLegacyContextDisabled-test.internal.js index c6a2d1fbb5aa1..f04a4d0ea216a 100644 --- a/packages/react-dom/src/__tests__/ReactLegacyContextDisabled-test.internal.js +++ b/packages/react-dom/src/__tests__/ReactLegacyContextDisabled-test.internal.js @@ -139,9 +139,7 @@ describe('ReactLegacyContextDisabled', () => { 'LegacyFnConsumer uses the legacy contextTypes API which is no longer supported. ' + 'Use React.createContext() with React.useContext() instead.', ]); - expect(text).toBe( - '{}undefinedundefined', - ); + expect(text).toBe('{}undefinedundefined'); expect(lifecycleContextLog).toEqual([{}, {}, {}]); }); diff --git a/packages/react-dom/src/__tests__/ReactRenderDocument-test.js b/packages/react-dom/src/__tests__/ReactRenderDocument-test.js index def1c35bc64e9..8003ee06cb8a4 100644 --- a/packages/react-dom/src/__tests__/ReactRenderDocument-test.js +++ b/packages/react-dom/src/__tests__/ReactRenderDocument-test.js @@ -33,225 +33,6 @@ describe('rendering React components at document', () => { ReactDOMServer = require('react-dom/server'); }); - describe('with old implicit hydration API', () => { - function expectDeprecationWarningWithFiber(callback) { - expect( - callback, - ).toWarnDev( - 'render(): Calling ReactDOM.render() to hydrate server-rendered markup ' + - 'will stop working in React v18. Replace the ReactDOM.render() call ' + - 'with ReactDOM.hydrate() if you want React to attach to the server HTML.', - {withoutStack: true}, - ); - } - - it('should be able to adopt server markup', () => { - class Root extends React.Component { - render() { - return ( - - - Hello World - - {'Hello ' + this.props.hello} - - ); - } - } - - const markup = ReactDOMServer.renderToString(); - const testDocument = getTestDocument(markup); - const body = testDocument.body; - - expectDeprecationWarningWithFiber(() => - ReactDOM.render(, testDocument), - ); - expect(testDocument.body.innerHTML).toBe('Hello world'); - - ReactDOM.render(, testDocument); - expect(testDocument.body.innerHTML).toBe('Hello moon'); - - expect(body === testDocument.body).toBe(true); - }); - - it('should not be able to unmount component from document node', () => { - class Root extends React.Component { - render() { - return ( - - - Hello World - - Hello world - - ); - } - } - - const markup = ReactDOMServer.renderToString(); - const testDocument = getTestDocument(markup); - expectDeprecationWarningWithFiber(() => - ReactDOM.render(, testDocument), - ); - expect(testDocument.body.innerHTML).toBe('Hello world'); - - // In Fiber this actually works. It might not be a good idea though. - ReactDOM.unmountComponentAtNode(testDocument); - expect(testDocument.firstChild).toBe(null); - }); - - it('should not be able to switch root constructors', () => { - class Component extends React.Component { - render() { - return ( - - - Hello World - - Hello world - - ); - } - } - - class Component2 extends React.Component { - render() { - return ( - - - Hello World - - Goodbye world - - ); - } - } - - const markup = ReactDOMServer.renderToString(); - const testDocument = getTestDocument(markup); - - expectDeprecationWarningWithFiber(() => - ReactDOM.render(, testDocument), - ); - expect(testDocument.body.innerHTML).toBe('Hello world'); - - // This works but is probably a bad idea. - ReactDOM.render(, testDocument); - - expect(testDocument.body.innerHTML).toBe('Goodbye world'); - }); - - it('should be able to mount into document', () => { - class Component extends React.Component { - render() { - return ( - - - Hello World - - {this.props.text} - - ); - } - } - - const markup = ReactDOMServer.renderToString( - , - ); - const testDocument = getTestDocument(markup); - - expectDeprecationWarningWithFiber(() => - ReactDOM.render(, testDocument), - ); - - expect(testDocument.body.innerHTML).toBe('Hello world'); - }); - - it('renders over an existing text child without throwing', () => { - const container = document.createElement('div'); - container.textContent = 'potato'; - ReactDOM.render(
parsnip
, container); - expect(container.textContent).toBe('parsnip'); - // We don't expect a warning about new hydration API here because - // we aren't sure if the user meant to hydrate or replace a stub node. - // We would see a warning if the container had React-rendered HTML in it. - }); - - it('should give helpful errors on state desync', () => { - class Component extends React.Component { - render() { - return ( - - - Hello World - - {this.props.text} - - ); - } - } - - const markup = ReactDOMServer.renderToString( - , - ); - const testDocument = getTestDocument(markup); - - expect(() => { - expect(() => - ReactDOM.render(, testDocument), - ).toWarnDev( - 'render(): Calling ReactDOM.render() to hydrate server-rendered markup ' + - 'will stop working in React v18. Replace the ReactDOM.render() call ' + - 'with ReactDOM.hydrate() if you want React to attach to the server HTML.', - {withoutStack: true}, - ); - }).toErrorDev('Warning: Text content did not match.'); - }); - - it('should throw on full document render w/ no markup', () => { - const testDocument = getTestDocument(); - - class Component extends React.Component { - render() { - return ( - - - Hello World - - {this.props.text} - - ); - } - } - - ReactDOM.render(, testDocument); - expect(testDocument.body.innerHTML).toBe('Hello world'); - // We don't expect a warning about new hydration API here because - // we aren't sure if the user meant to hydrate or replace the document. - // We would see a warning if the document had React-rendered HTML in it. - }); - - it('supports findDOMNode on full-page components', () => { - const tree = ( - - - Hello World - - Hello world - - ); - - const markup = ReactDOMServer.renderToString(tree); - const testDocument = getTestDocument(markup); - let component; - expectDeprecationWarningWithFiber(() => { - component = ReactDOM.render(tree, testDocument); - }); - expect(testDocument.body.innerHTML).toBe('Hello world'); - expect(ReactDOM.findDOMNode(component).tagName).toBe('HTML'); - }); - }); - describe('with new explicit hydration API', () => { it('should be able to adopt server markup', () => { class Root extends React.Component { diff --git a/packages/react-dom/src/__tests__/ReactServerRendering-test.js b/packages/react-dom/src/__tests__/ReactServerRendering-test.js index e84ae1d2ede4a..b39d7c8ff5173 100644 --- a/packages/react-dom/src/__tests__/ReactServerRendering-test.js +++ b/packages/react-dom/src/__tests__/ReactServerRendering-test.js @@ -31,14 +31,12 @@ describe('ReactDOMServer', () => { describe('renderToString', () => { it('should generate simple markup', () => { const response = ReactDOMServer.renderToString(hello world); - expect(response).toMatch( - new RegExp('hello world'), - ); + expect(response).toMatch(new RegExp('hello world')); }); it('should generate simple markup for self-closing tags', () => { const response = ReactDOMServer.renderToString(); - expect(response).toMatch(new RegExp('')); + expect(response).toMatch(new RegExp('')); }); it('should generate comment markup for component returns null', () => { @@ -74,10 +72,7 @@ describe('ReactDOMServer', () => { const response = ReactDOMServer.renderToString(); expect(response).toMatch( new RegExp( - '
' + + '
' + '' + 'My name is child' + @@ -136,12 +131,7 @@ describe('ReactDOMServer', () => { expect(response).toMatch( new RegExp( - '' + - 'Component name: TestComponent' + - '', + '' + 'Component name: TestComponent' + '', ), ); expect(lifecycle).toEqual([ @@ -580,9 +570,7 @@ describe('ReactDOMServer', () => { it('should generate simple markup', () => { const SuccessfulElement = React.createElement(() => ); const response = ReactDOMServer.renderToNodeStream(SuccessfulElement); - expect(response.read().toString()).toMatch( - new RegExp(''), - ); + expect(response.read().toString()).toMatch(new RegExp('')); }); it('should handle errors correctly', () => { diff --git a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js index 29d2ce6c22149..12fc6987cf59a 100644 --- a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js +++ b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js @@ -25,99 +25,6 @@ describe('ReactDOMServerHydration', () => { Scheduler = require('scheduler'); }); - it('should have the correct mounting behavior (old hydrate API)', () => { - let mountCount = 0; - let numClicks = 0; - - class TestComponent extends React.Component { - componentDidMount() { - mountCount++; - } - - click = () => { - numClicks++; - }; - - render() { - return ( - - Name: {this.props.name} - - ); - } - } - - const element = document.createElement('div'); - document.body.appendChild(element); - try { - ReactDOM.render(, element); - - let lastMarkup = element.innerHTML; - - // Exercise the update path. Markup should not change, - // but some lifecycle methods should be run again. - ReactDOM.render(, element); - expect(mountCount).toEqual(1); - - // Unmount and remount. We should get another mount event and - // we should get different markup, as the IDs are unique each time. - ReactDOM.unmountComponentAtNode(element); - expect(element.innerHTML).toEqual(''); - ReactDOM.render(, element); - expect(mountCount).toEqual(2); - expect(element.innerHTML).not.toEqual(lastMarkup); - - // Now kill the node and render it on top of server-rendered markup, as if - // we used server rendering. We should mount again, but the markup should - // be unchanged. We will append a sentinel at the end of innerHTML to be - // sure that innerHTML was not changed. - ReactDOM.unmountComponentAtNode(element); - expect(element.innerHTML).toEqual(''); - - lastMarkup = ReactDOMServer.renderToString(); - element.innerHTML = lastMarkup; - - let instance; - - expect(() => { - instance = ReactDOM.render(, element); - }).toWarnDev( - 'render(): Calling ReactDOM.render() to hydrate server-rendered markup ' + - 'will stop working in React v18. Replace the ReactDOM.render() call ' + - 'with ReactDOM.hydrate() if you want React to attach to the server HTML.', - {withoutStack: true}, - ); - expect(mountCount).toEqual(3); - expect(element.innerHTML).toBe(lastMarkup); - - // Ensure the events system works after mount into server markup - expect(numClicks).toEqual(0); - - instance.refs.span.click(); - expect(numClicks).toEqual(1); - - ReactDOM.unmountComponentAtNode(element); - expect(element.innerHTML).toEqual(''); - - // Now simulate a situation where the app is not idempotent. React should - // warn but do the right thing. - element.innerHTML = lastMarkup; - expect(() => { - instance = ReactDOM.render(, element); - }).toErrorDev('Text content did not match. Server: "x" Client: "y"'); - expect(mountCount).toEqual(4); - expect(element.innerHTML.length > 0).toBe(true); - expect(element.innerHTML).not.toEqual(lastMarkup); - - // Ensure the events system works after markup mismatch. - expect(numClicks).toEqual(1); - instance.refs.span.click(); - expect(numClicks).toEqual(2); - } finally { - document.body.removeChild(element); - } - }); - it('should have the correct mounting behavior (new hydrate API)', () => { let mountCount = 0; let numClicks = 0; @@ -289,7 +196,7 @@ describe('ReactDOMServerHydration', () => { // Simulate IE normalizing the style attribute. IE makes it equal to // what's available under `node.style.cssText`. element.innerHTML = - '
'; + '
'; // We don't expect to see false positive warnings. // https://github.com/facebook/react/issues/11807 @@ -308,7 +215,7 @@ describe('ReactDOMServerHydration', () => { const element = document.createElement('div'); element.innerHTML = - '
'; + '
'; expect(() => ReactDOM.hydrate( diff --git a/packages/react-dom/src/__tests__/escapeTextForBrowser-test.js b/packages/react-dom/src/__tests__/escapeTextForBrowser-test.js index 08d324daae3c0..73565983da74b 100644 --- a/packages/react-dom/src/__tests__/escapeTextForBrowser-test.js +++ b/packages/react-dom/src/__tests__/escapeTextForBrowser-test.js @@ -21,37 +21,37 @@ describe('escapeTextForBrowser', () => { it('ampersand is escaped when passed as text content', () => { const response = ReactDOMServer.renderToString({'&'}); - expect(response).toMatch('&'); + expect(response).toMatch('&'); }); it('double quote is escaped when passed as text content', () => { const response = ReactDOMServer.renderToString({'"'}); - expect(response).toMatch('"'); + expect(response).toMatch('"'); }); it('single quote is escaped when passed as text content', () => { const response = ReactDOMServer.renderToString({"'"}); - expect(response).toMatch('''); + expect(response).toMatch('''); }); it('greater than entity is escaped when passed as text content', () => { const response = ReactDOMServer.renderToString({'>'}); - expect(response).toMatch('>'); + expect(response).toMatch('>'); }); it('lower than entity is escaped when passed as text content', () => { const response = ReactDOMServer.renderToString({'<'}); - expect(response).toMatch('<'); + expect(response).toMatch('<'); }); it('number is correctly passed as text content', () => { const response = ReactDOMServer.renderToString({42}); - expect(response).toMatch('42'); + expect(response).toMatch('42'); }); it('number is escaped to string when passed as text content', () => { const response = ReactDOMServer.renderToString(); - expect(response).toMatch(''); + expect(response).toMatch(''); }); it('escape text content representing a script tag', () => { @@ -59,7 +59,7 @@ describe('escapeTextForBrowser', () => { {''}, ); expect(response).toMatch( - '<script type='' ' + + '<script type='' ' + 'src=""></script>', ); }); diff --git a/packages/react-dom/src/__tests__/quoteAttributeValueForBrowser-test.js b/packages/react-dom/src/__tests__/quoteAttributeValueForBrowser-test.js index fc2a711149fea..e8f1814775772 100644 --- a/packages/react-dom/src/__tests__/quoteAttributeValueForBrowser-test.js +++ b/packages/react-dom/src/__tests__/quoteAttributeValueForBrowser-test.js @@ -21,32 +21,32 @@ describe('quoteAttributeValueForBrowser', () => { it('ampersand is escaped inside attributes', () => { const response = ReactDOMServer.renderToString(); - expect(response).toMatch(''); + expect(response).toMatch(''); }); it('double quote is escaped inside attributes', () => { const response = ReactDOMServer.renderToString(); - expect(response).toMatch(''); + expect(response).toMatch(''); }); it('single quote is escaped inside attributes', () => { const response = ReactDOMServer.renderToString(); - expect(response).toMatch(''); + expect(response).toMatch(''); }); it('greater than entity is escaped inside attributes', () => { const response = ReactDOMServer.renderToString(); - expect(response).toMatch(''); + expect(response).toMatch(''); }); it('lower than entity is escaped inside attributes', () => { const response = ReactDOMServer.renderToString(); - expect(response).toMatch(''); + expect(response).toMatch(''); }); it('number is escaped to string inside attributes', () => { const response = ReactDOMServer.renderToString(); - expect(response).toMatch(''); + expect(response).toMatch(''); }); it('object is passed to a string inside attributes', () => { @@ -59,7 +59,7 @@ describe('quoteAttributeValueForBrowser', () => { const response = ReactDOMServer.renderToString( , ); - expect(response).toMatch(''); + expect(response).toMatch(''); }); it('script tag is escaped inside attributes', () => { @@ -68,8 +68,7 @@ describe('quoteAttributeValueForBrowser', () => { ); expect(response).toMatch( '', + 'src=""></script>"/>', ); }); }); diff --git a/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js b/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js index b81a749837802..eec6cd8550642 100644 --- a/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js +++ b/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js @@ -211,7 +211,7 @@ module.exports = function(initModules) { element, shouldUseDocument(element) ? '
' - : '
', + : '
', ); await renderIntoDom(element, container, true, errorCount + 1); diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js index 635c67f5d7700..7820978957107 100644 --- a/packages/react-dom/src/client/ReactDOMComponent.js +++ b/packages/react-dom/src/client/ReactDOMComponent.js @@ -941,9 +941,6 @@ export function diffHydratedProperties( for (let i = 0; i < attributes.length; i++) { const name = attributes[i].name.toLowerCase(); switch (name) { - // Built-in SSR attribute is allowed - case 'data-reactroot': - break; // Controlled attributes are not validated // TODO: Only ignore them on controlled tags. case 'value': diff --git a/packages/react-dom/src/client/ReactDOMLegacy.js b/packages/react-dom/src/client/ReactDOMLegacy.js index 589ddfedcda34..f1ee572ee6eff 100644 --- a/packages/react-dom/src/client/ReactDOMLegacy.js +++ b/packages/react-dom/src/client/ReactDOMLegacy.js @@ -18,7 +18,6 @@ import { unmarkContainerAsRoot, } from './ReactDOMComponentTree'; import {createLegacyRoot, isValidContainer} from './ReactDOMRoot'; -import {ROOT_ATTRIBUTE_NAME} from '../shared/DOMProperty'; import { DOCUMENT_NODE, ELEMENT_NODE, @@ -41,7 +40,6 @@ import {has as hasInstance} from 'shared/ReactInstanceMap'; const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; let topLevelUpdateWarnings; -let warnedAboutHydrateAPI = false; if (__DEV__) { topLevelUpdateWarnings = (container: Container) => { @@ -102,57 +100,21 @@ function getReactRootElementInContainer(container: any) { } } -function shouldHydrateDueToLegacyHeuristic(container) { - const rootElement = getReactRootElementInContainer(container); - return !!( - rootElement && - rootElement.nodeType === ELEMENT_NODE && - rootElement.hasAttribute(ROOT_ATTRIBUTE_NAME) - ); -} - function legacyCreateRootFromDOMContainer( container: Container, forceHydrate: boolean, ): RootType { - const shouldHydrate = - forceHydrate || shouldHydrateDueToLegacyHeuristic(container); // First clear any existing content. - if (!shouldHydrate) { - let warned = false; + if (!forceHydrate) { let rootSibling; while ((rootSibling = container.lastChild)) { - if (__DEV__) { - if ( - !warned && - rootSibling.nodeType === ELEMENT_NODE && - (rootSibling: any).hasAttribute(ROOT_ATTRIBUTE_NAME) - ) { - warned = true; - console.error( - 'render(): Target node has markup rendered by React, but there ' + - 'are unrelated nodes as well. This is most commonly caused by ' + - 'white-space inserted around server-rendered markup.', - ); - } - } container.removeChild(rootSibling); } } - if (__DEV__) { - if (shouldHydrate && !forceHydrate && !warnedAboutHydrateAPI) { - warnedAboutHydrateAPI = true; - console.warn( - 'render(): Calling ReactDOM.render() to hydrate server-rendered markup ' + - 'will stop working in React v18. Replace the ReactDOM.render() call ' + - 'with ReactDOM.hydrate() if you want React to attach to the server HTML.', - ); - } - } return createLegacyRoot( container, - shouldHydrate + forceHydrate ? { hydrate: true, } diff --git a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js index 9b913f50728c7..81ce4ecc1940a 100644 --- a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js +++ b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js @@ -1272,7 +1272,7 @@ describe('DOMPluginEventSystem', () => { return
Hello world
; } const output = ReactDOMServer.renderToString(); - expect(output).toBe(`
Hello world
`); + expect(output).toBe(`
Hello world
`); }); // @gate experimental @@ -1293,9 +1293,7 @@ describe('DOMPluginEventSystem', () => { ); } const output = ReactDOMServer.renderToString(); - expect(output).toBe( - `
Hello world
`, - ); + expect(output).toBe(`
Hello world
`); container.innerHTML = output; ReactDOM.hydrate(, container); Scheduler.unstable_flushAll(); diff --git a/packages/react-dom/src/server/DOMMarkupOperations.js b/packages/react-dom/src/server/DOMMarkupOperations.js index 3cddbb493e07e..014e635531926 100644 --- a/packages/react-dom/src/server/DOMMarkupOperations.js +++ b/packages/react-dom/src/server/DOMMarkupOperations.js @@ -8,7 +8,6 @@ */ import { - ROOT_ATTRIBUTE_NAME, BOOLEAN, OVERLOADED_BOOLEAN, getPropertyInfo, @@ -23,10 +22,6 @@ import quoteAttributeValueForBrowser from './quoteAttributeValueForBrowser'; * Operations for dealing with DOM properties. */ -export function createMarkupForRoot(): string { - return ROOT_ATTRIBUTE_NAME + '=""'; -} - /** * Creates markup for a property. * diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js index dd568c16363e3..c8ccbfc245a1d 100644 --- a/packages/react-dom/src/server/ReactPartialRenderer.js +++ b/packages/react-dom/src/server/ReactPartialRenderer.js @@ -52,7 +52,6 @@ import {allocThreadID, freeThreadID} from './ReactThreadIDAllocator'; import { createMarkupForCustomAttribute, createMarkupForProperty, - createMarkupForRoot, } from './DOMMarkupOperations'; import escapeTextForBrowser from './escapeTextForBrowser'; import { @@ -388,15 +387,6 @@ function createOpenTagMarkup( } } - // For static pages, no need to put React ID and checksum. Saves lots of - // bytes. - if (makeStaticMarkup) { - return ret; - } - - if (isRootElement) { - ret += ' ' + createMarkupForRoot(); - } return ret; } diff --git a/packages/react-dom/src/shared/DOMProperty.js b/packages/react-dom/src/shared/DOMProperty.js index 92adf041d1964..83b48555ebd83 100644 --- a/packages/react-dom/src/shared/DOMProperty.js +++ b/packages/react-dom/src/shared/DOMProperty.js @@ -63,7 +63,6 @@ export const ATTRIBUTE_NAME_START_CHAR = export const ATTRIBUTE_NAME_CHAR = ATTRIBUTE_NAME_START_CHAR + '\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040'; -export const ROOT_ATTRIBUTE_NAME = 'data-reactroot'; export const VALID_ATTRIBUTE_NAME_REGEX = new RegExp( '^[' + ATTRIBUTE_NAME_START_CHAR + '][' + ATTRIBUTE_NAME_CHAR + ']*$', ); diff --git a/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js b/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js index 2eeba5236285f..10cdadfc66dbe 100644 --- a/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js +++ b/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js @@ -228,7 +228,7 @@ describe('ReactScope', () => { } const html = ReactDOMServer.renderToString(); expect(html).toBe( - '
DIV
SPANA
Outside content!
', + '
DIV
SPANA
Outside content!
', ); container.innerHTML = html; ReactDOM.hydrate(, container); diff --git a/packages/react-reconciler/src/__tests__/__snapshots__/ReactHooks-test.internal.js.snap b/packages/react-reconciler/src/__tests__/__snapshots__/ReactHooks-test.internal.js.snap index 87633a047a8fc..6d0f97a7b993d 100644 --- a/packages/react-reconciler/src/__tests__/__snapshots__/ReactHooks-test.internal.js.snap +++ b/packages/react-reconciler/src/__tests__/__snapshots__/ReactHooks-test.internal.js.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ReactHooks works with ReactDOMServer calls inside a component 1`] = `"

hello

0

bye

"`; +exports[`ReactHooks works with ReactDOMServer calls inside a component 1`] = `"

hello

0

bye

"`;