Skip to content

Commit

Permalink
[Fizz] Classes Follow Up (#21253)
Browse files Browse the repository at this point in the history
* Port Classes from Fiber to Fizz

* Test
  • Loading branch information
sebmarkbage authored Apr 13, 2021
1 parent 84c06fe commit dbadfa2
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 4 deletions.
72 changes: 72 additions & 0 deletions packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ let React;
let ReactDOM;
let ReactDOMFizzServer;
let Suspense;
let PropTypes;
let textCache;
let document;
let writable;
Expand All @@ -36,6 +37,8 @@ describe('ReactDOMFizzServer', () => {
}
Stream = require('stream');
Suspense = React.Suspense;
PropTypes = require('prop-types');

textCache = new Map();

// Test Environment
Expand Down Expand Up @@ -655,4 +658,73 @@ describe('ReactDOMFizzServer', () => {
'http://www.w3.org/2000/svg',
);
});

// @gate experimental
it('should can suspend in a class component with legacy context', async () => {
class TestProvider extends React.Component {
static childContextTypes = {
test: PropTypes.string,
};
state = {ctxToSet: null};
static getDerivedStateFromProps(props, state) {
return {ctxToSet: props.ctx};
}
getChildContext() {
return {
test: this.state.ctxToSet,
};
}
render() {
return this.props.children;
}
}

class TestConsumer extends React.Component {
static contextTypes = {
test: PropTypes.string,
};
render() {
const child = (
<b>
<Text text={this.context.test} />
</b>
);
if (this.props.prefix) {
return [readText(this.props.prefix), child];
}
return child;
}
}

await act(async () => {
const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
<TestProvider ctx="A">
<div>
<Suspense fallback={[<Text text="Loading: " />, <TestConsumer />]}>
<TestProvider ctx="B">
<TestConsumer prefix="Hello: " />
</TestProvider>
<TestConsumer />
</Suspense>
</div>
</TestProvider>,
writable,
);
startWriting();
});
expect(getVisibleChildren(container)).toEqual(
<div>
Loading: <b>A</b>
</div>,
);
await act(async () => {
resolveText('Hello: ');
});
expect(getVisibleChildren(container)).toEqual(
<div>
Hello: <b>B</b>
<b>A</b>
</div>,
);
});
});
2 changes: 1 addition & 1 deletion packages/react-server/src/ReactFizzContext.js
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,8 @@ export function getMaskedContext(type: any, unmaskedContext: Object): Object {
}

export function processChildContext(
type: any,
instance: any,
type: any,
parentContext: Object,
childContextTypes: Object,
): Object {
Expand Down
6 changes: 3 additions & 3 deletions packages/react-server/src/ReactFizzServer.js
Original file line number Diff line number Diff line change
Expand Up @@ -461,7 +461,7 @@ function renderWithHooks<Props, SecondArg>(
function finishClassComponent(
request: Request,
task: Task,
instance: Object,
instance: any,
Component: any,
props: any,
): ReactNodeList {
Expand Down Expand Up @@ -518,7 +518,7 @@ function renderClassComponent(
: undefined;
const instance = constructClassInstance(Component, props, unmaskedContext);
mountClassInstance(instance, Component, props, unmaskedContext);
finishClassComponent(request, task, Component);
finishClassComponent(request, task, instance, Component, props);
}

const didWarnAboutBadClass = {};
Expand Down Expand Up @@ -617,7 +617,7 @@ function renderIndeterminateComponent(
}

mountClassInstance(value, Component, props, legacyContext);
finishClassComponent(request, task, value, Component);
finishClassComponent(request, task, value, Component, props);
} else {
// Proceed under the assumption that this is a function component
if (__DEV__) {
Expand Down

0 comments on commit dbadfa2

Please sign in to comment.