Skip to content

Hydration of previously rendered server markup #9580

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
May 25, 2017
Merged

Hydration of previously rendered server markup #9580

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
ebd27f5
Don't double validate the DOM container
sebmarkbage May 2, 2017
d942047
Hydrating DOM
sebmarkbage May 2, 2017
c534c77
Remove meta data filtering from test
sebmarkbage May 2, 2017
8917ec8
Annotate because Flow
sebmarkbage May 11, 2017
b73af63
Don't track insertion effects if we're going to hydrate
sebmarkbage May 11, 2017
8c0534b
Fix up test cases to ignore errors that we no longer throw
sebmarkbage May 11, 2017
3874f32
Correctly track hydration state inside a newly inserted tree
sebmarkbage May 12, 2017
b376927
Hacky fix to isMounted
sebmarkbage May 13, 2017
ac2a8d3
Comments
sebmarkbage May 16, 2017
83e5b57
Record tests
sebmarkbage May 13, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
133 changes: 0 additions & 133 deletions scripts/fiber/tests-failing.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,132 +1,8 @@
src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
* renders a blank div with client render on top of good server markup
* renders a div with inline styles with client render on top of good server markup
* renders a self-closing tag with client render on top of good server markup
* renders a self-closing tag as a child with client render on top of good server markup
* renders simple numbers with client render on top of good server markup
* renders simple strings with client render on top of good server markup
* renders string prop with true value with client render on top of good server markup
* renders string prop with false value with client render on top of good server markup
* renders boolean prop with true value with client render on top of good server markup
* renders boolean prop with false value with client render on top of good server markup
* renders boolean prop with self value with client render on top of good server markup
* renders boolean prop with "" value with client render on top of good server markup
* renders boolean prop with string value with client render on top of good server markup
* renders boolean prop with array value with client render on top of good server markup
* renders boolean prop with object value with client render on top of good server markup
* renders boolean prop with non-zero number value with client render on top of good server markup
* renders boolean prop with zero value with client render on top of good server markup
* renders download prop with true value with client render on top of good server markup
* renders download prop with false value with client render on top of good server markup
* renders download prop with string value with client render on top of good server markup
* renders download prop with string "true" value with client render on top of good server markup
* renders className prop with string value with client render on top of good server markup
* renders className prop with empty string value with client render on top of good server markup
* renders className prop with true value with client render on top of good server markup
* renders className prop with false value with client render on top of good server markup
* renders htmlFor with string value with client render on top of good server markup
* renders htmlFor with an empty string with client render on top of good server markup
* renders className prop with true value with client render on top of good server markup
* renders className prop with false value with client render on top of good server markup
* renders no ref attribute with client render on top of good server markup
* renders no children attribute with client render on top of good server markup
* renders no key attribute with client render on top of good server markup
* renders no dangerouslySetInnerHTML attribute with client render on top of good server markup
* renders no unknown attributes with client render on top of good server markup
* renders unknown data- attributes with client render on top of good server markup
* renders no unknown attributes for non-standard elements with client render on top of good server markup
* renders unknown attributes for custom elements with client render on top of good server markup
* renders unknown attributes for custom elements using is with client render on top of good server markup
* renders no HTML events with client render on top of good server markup
* renders a div with text with client render on top of good server markup
* renders a div with text with flanking whitespace with client render on top of good server markup
* renders a div with an empty text child with client render on top of good server markup
* renders a div with multiple empty text children with client render on top of good server markup
* renders a div with multiple whitespace children with client render on top of good server markup
* renders a div with text sibling to a node with client render on top of good server markup
* renders a non-standard element with text with client render on top of good server markup
* renders a custom element with text with client render on top of good server markup
* renders a leading blank child with a text sibling with client render on top of good server markup
* renders a trailing blank child with a text sibling with client render on top of good server markup
* renders an element with two text children with client render on top of good server markup
* renders a number as single child with client render on top of good server markup
* renders zero as single child with client render on top of good server markup
* renders an element with number and text children with client render on top of good server markup
* renders null single child as blank with client render on top of good server markup
* renders false single child as blank with client render on top of good server markup
* renders undefined single child as blank with client render on top of good server markup
* renders a null component children as empty with client render on top of good server markup
* renders null children as blank with client render on top of good server markup
* renders false children as blank with client render on top of good server markup
* renders null and false children together as blank with client render on top of good server markup
* renders only null and false children as blank with client render on top of good server markup
* renders an svg element with client render on top of good server markup
* renders svg element with an xlink with client render on top of good server markup
* renders a math element with client render on top of good server markup
* renders an img with client render on top of good server markup
* renders a button with client render on top of good server markup
* renders a div with dangerouslySetInnerHTML with client render on top of good server markup
* renders a newline-eating tag with content not starting with \n with client render on top of good server markup
* renders a newline-eating tag with content starting with \n with client render on top of good server markup
* renders a normal tag with content starting with \n with client render on top of good server markup
* renders stateless components with client render on top of good server markup
* renders ES6 class components with client render on top of good server markup
* renders factory components with client render on top of good server markup
* renders single child hierarchies of components with client render on top of good server markup
* renders multi-child hierarchies of components with client render on top of good server markup
* renders a div with a child with client render on top of good server markup
* renders a div with multiple children with client render on top of good server markup
* renders a div with multiple children separated by whitespace with client render on top of good server markup
* renders a div with a single child surrounded by whitespace with client render on top of good server markup
* renders >,<, and & as single child with client render on top of good server markup
* renders >,<, and & as multiple children with client render on top of good server markup
* renders an input with a value and an onChange with client render on top of good server markup
* renders an input with a value and readOnly with client render on top of good server markup
* renders an input with a value and no onChange/readOnly with client render on top of good server markup
* renders an input with a defaultValue with client render on top of good server markup
* renders an input value overriding defaultValue with client render on top of good server markup
* renders an input value overriding defaultValue no matter the prop order with client render on top of good server markup
* renders a checkbox that is checked with an onChange with client render on top of good server markup
* renders a checkbox that is checked with readOnly with client render on top of good server markup
* renders a checkbox that is checked and no onChange/readOnly with client render on top of good server markup
* renders a checkbox with defaultChecked with client render on top of good server markup
* renders a checkbox checked overriding defaultChecked with client render on top of good server markup
* renders a checkbox checked overriding defaultChecked no matter the prop order with client render on top of good server markup
* renders a textarea with a value and an onChange with client render on top of good server markup
* renders a textarea with a value and readOnly with client render on top of good server markup
* renders a textarea with a value and no onChange/readOnly with client render on top of good server markup
* renders a textarea with a defaultValue with client render on top of good server markup
* renders a textarea value overriding defaultValue with client render on top of good server markup
* renders a textarea value overriding defaultValue no matter the prop order with client render on top of good server markup
* renders a select with a value and an onChange with client render on top of good server markup
* renders a select with a value and readOnly with client render on top of good server markup
* renders a select with a multiple values and an onChange with client render on top of good server markup
* renders a select with a multiple values and readOnly with client render on top of good server markup
* renders a select with a value and no onChange/readOnly with client render on top of good server markup
* renders a select with a defaultValue with client render on top of good server markup
* renders a select value overriding defaultValue with client render on top of good server markup
* renders a select value overriding defaultValue no matter the prop order with client render on top of good server markup
* renders a controlled text input with client render on top of good server markup
* renders a controlled textarea with client render on top of good server markup
* renders a controlled checkbox with client render on top of good server markup
* renders a controlled select with client render on top of good server markup
* should not blow away user-entered text on successful reconnect to an uncontrolled input
* should not blow away user-entered text on successful reconnect to a controlled input
* should not blow away user-entered text on successful reconnect to an uncontrolled checkbox
* should not blow away user-entered text on successful reconnect to a controlled checkbox
* should not blow away user-selected value on successful reconnect to an uncontrolled select
* should not blow away user-selected value on successful reconnect to an controlled select
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These tests fail because currently I'm going through the setInitialProperties path which tries to set all the properties. This doesn't affect text inputs because there we use setAttribute('value', ...) but ideally we should always set properties so that this gets properly reset to what we think it is. But we should be explicit about we think the value should be. Either the current value or the defaultValue. I'd like to follow up on that in the next separate PR.

* renders class child with context with client render on top of good server markup
* renders stateless child with context with client render on top of good server markup
* renders class child without context with client render on top of good server markup
* renders stateless child without context with client render on top of good server markup
* renders class child with wrong context with client render on top of good server markup
* renders stateless child with wrong context with client render on top of good server markup
* renders with context passed through to a grandchild with client render on top of good server markup
* renders a child context overriding a parent context with client render on top of good server markup
* renders a child context merged with a parent context with client render on top of good server markup
* renders with a call to componentWillMount before getChildContext with client render on top of good server markup
* should send the correct element to ref functions on client

src/renderers/dom/shared/__tests__/ReactDOMTextComponent-test.js
* can reconcile text merged by Node.normalize() alongside other elements
Expand All @@ -136,12 +12,3 @@ src/renderers/dom/shared/__tests__/ReactDOMTextComponent-test.js

src/renderers/dom/shared/__tests__/ReactMount-test.js
* marks top-level mounts

src/renderers/dom/shared/__tests__/ReactRenderDocument-test.js
* should be able to adopt server markup
* should not be able to unmount component from document node
* should not be able to switch root constructors
* should be able to mount into document
* should give helpful errors on state desync
* should throw on full document render w/ no markup
* supports findDOMNode on full-page components
Loading