[Fizz] Classes Follow Up (#21253)
* Port Classes from Fiber to Fizz * Test
Sebastian Markbåge committed
Apr 13, 2021 at 16:57 UTC
dbadfa2c36f77a8adf1bcae2c85e6f2e0e3d4137
3 files changed
+76
-4
packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+72
@@ -16,6 +16,7 @@ let React;
16
let ReactDOM;
17
let ReactDOMFizzServer;
18
let Suspense;
19
+let PropTypes;
20
let textCache;
21
let document;
22
let writable;
@@ -36,6 +37,8 @@ describe('ReactDOMFizzServer', () => {
37
}
38
Stream = require('stream');
39
Suspense = React.Suspense;
40
+ PropTypes = require('prop-types');
41
+
42
textCache = new Map();
43
44
// Test Environment
@@ -655,4 +658,73 @@ describe('ReactDOMFizzServer', () => {
658
'http://www.w3.org/2000/svg',
659
);
660
});
661
+
662
+ // @gate experimental
663
+ it('should can suspend in a class component with legacy context', async () => {
664
+ class TestProvider extends React.Component {
665
+ static childContextTypes = {
666
+ test: PropTypes.string,
667
+ };
668
+ state = {ctxToSet: null};
669
+ static getDerivedStateFromProps(props, state) {
670
+ return {ctxToSet: props.ctx};
671
+ }
672
+ getChildContext() {
673
+ return {
674
+ test: this.state.ctxToSet,
675
+ };
676
+ }
677
+ render() {
678
+ return this.props.children;
679
+ }
680
+ }
681
+
682
+ class TestConsumer extends React.Component {
683
+ static contextTypes = {
684
+ test: PropTypes.string,
685
+ };
686
+ render() {
687
+ const child = (
688
+ <b>
689
+ <Text text={this.context.test} />
690
+ </b>
691
+ );
692
+ if (this.props.prefix) {
693
+ return [readText(this.props.prefix), child];
694
+ }
695
+ return child;
696
+ }
697
+ }
698
+
699
+ await act(async () => {
700
+ const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
701
+ <TestProvider ctx="A">
702
+ <div>
703
+ <Suspense fallback={[<Text text="Loading: " />, <TestConsumer />]}>
704
+ <TestProvider ctx="B">
705
+ <TestConsumer prefix="Hello: " />
706
+ </TestProvider>
707
+ <TestConsumer />
708
+ </Suspense>
709
+ </div>
710
+ </TestProvider>,
711
+ writable,
712
+ );
713
+ startWriting();
714
+ });
715
+ expect(getVisibleChildren(container)).toEqual(
716
+ <div>
717
+ Loading: <b>A</b>
718
+ </div>,
719
+ );
720
+ await act(async () => {
721
+ resolveText('Hello: ');
722
+ });
723
+ expect(getVisibleChildren(container)).toEqual(
724
+ <div>
725
+ Hello: <b>B</b>
726
+ <b>A</b>
727
+ </div>,
728
+ );
729
+ });
730
});
packages/react-server/src/ReactFizzContext.js
+1
-1
@@ -47,8 +47,8 @@ export function getMaskedContext(type: any, unmaskedContext: Object): Object {
47
}
48
49
export function processChildContext(
50
- type: any,
50
instance: any,
51
+ type: any,
52
parentContext: Object,
53
childContextTypes: Object,
54
): Object {
packages/react-server/src/ReactFizzServer.js
+3
-3
@@ -461,7 +461,7 @@ function renderWithHooks<Props, SecondArg>(
461
function finishClassComponent(
462
request: Request,
463
task: Task,
464
- instance: Object,
464
+ instance: any,
465
Component: any,
466
props: any,
467
): ReactNodeList {
@@ -518,7 +518,7 @@ function renderClassComponent(
518
: undefined;
519
const instance = constructClassInstance(Component, props, unmaskedContext);
520
mountClassInstance(instance, Component, props, unmaskedContext);
521
- finishClassComponent(request, task, Component);
521
+ finishClassComponent(request, task, instance, Component, props);
522
}
523
524
const didWarnAboutBadClass = {};
@@ -617,7 +617,7 @@ function renderIndeterminateComponent(
617
}
618
619
mountClassInstance(value, Component, props, legacyContext);
620
- finishClassComponent(request, task, value, Component);
620
+ finishClassComponent(request, task, value, Component, props);
621
} else {
622
// Proceed under the assumption that this is a function component
623
if (__DEV__) {