Skip to content

Commit dbadfa2

Browse files
authored
[Fizz] Classes Follow Up (#21253)
* Port Classes from Fiber to Fizz * Test
1 parent 84c06fe commit dbadfa2

File tree

3 files changed

+76
-4
lines changed

3 files changed

+76
-4
lines changed

packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ let React;
1616
let ReactDOM;
1717
let ReactDOMFizzServer;
1818
let Suspense;
19+
let PropTypes;
1920
let textCache;
2021
let document;
2122
let writable;
@@ -36,6 +37,8 @@ describe('ReactDOMFizzServer', () => {
3637
}
3738
Stream = require('stream');
3839
Suspense = React.Suspense;
40+
PropTypes = require('prop-types');
41+
3942
textCache = new Map();
4043

4144
// Test Environment
@@ -655,4 +658,73 @@ describe('ReactDOMFizzServer', () => {
655658
'http://www.w3.org/2000/svg',
656659
);
657660
});
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+
});
658730
});

packages/react-server/src/ReactFizzContext.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,8 @@ export function getMaskedContext(type: any, unmaskedContext: Object): Object {
4747
}
4848

4949
export function processChildContext(
50-
type: any,
5150
instance: any,
51+
type: any,
5252
parentContext: Object,
5353
childContextTypes: Object,
5454
): Object {

packages/react-server/src/ReactFizzServer.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -461,7 +461,7 @@ function renderWithHooks<Props, SecondArg>(
461461
function finishClassComponent(
462462
request: Request,
463463
task: Task,
464-
instance: Object,
464+
instance: any,
465465
Component: any,
466466
props: any,
467467
): ReactNodeList {
@@ -518,7 +518,7 @@ function renderClassComponent(
518518
: undefined;
519519
const instance = constructClassInstance(Component, props, unmaskedContext);
520520
mountClassInstance(instance, Component, props, unmaskedContext);
521-
finishClassComponent(request, task, Component);
521+
finishClassComponent(request, task, instance, Component, props);
522522
}
523523

524524
const didWarnAboutBadClass = {};
@@ -617,7 +617,7 @@ function renderIndeterminateComponent(
617617
}
618618

619619
mountClassInstance(value, Component, props, legacyContext);
620-
finishClassComponent(request, task, value, Component);
620+
finishClassComponent(request, task, value, Component, props);
621621
} else {
622622
// Proceed under the assumption that this is a function component
623623
if (__DEV__) {

0 commit comments

Comments
 (0)