Skip to content
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

Jump to bottom

Replace unstable_AsyncComponent with unstable_AsyncMode #12117

Merged
merged 3 commits into from
Jan 30, 2018
Merged

Replace unstable_AsyncComponent with unstable_AsyncMode #12117

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3757ab6
Replace unstable_AsyncComponent with Unstable_AsyncMode
acdlite Jan 30, 2018
4ea4369
internalContextTag -> mode
acdlite Jan 30, 2018
c5a7eda
Unstable_ -> unstable_
acdlite Jan 30, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
39 changes: 19 additions & 20 deletions packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.internal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ let ReactFeatureFlags = require('shared/ReactFeatureFlags');

let ReactDOM;

const AsyncComponent = React.unstable_AsyncComponent;
const AsyncMode = React.Unstable_AsyncMode;
Copy link
Collaborator

Choose a reason for hiding this comment

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

Lower case unstable?


describe('ReactDOMFiberAsync', () => {
let container;
Expand All @@ -40,23 +40,22 @@ describe('ReactDOMFiberAsync', () => {
jest.resetModules();
ReactFeatureFlags = require('shared/ReactFeatureFlags');
container = document.createElement('div');
ReactFeatureFlags.enableAsyncSubtreeAPI = false;
ReactDOM = require('react-dom');
});

it('renders synchronously', () => {
ReactDOM.render(
<AsyncComponent>
<AsyncMode>
<div>Hi</div>
</AsyncComponent>,
</AsyncMode>,
container,
);
expect(container.textContent).toEqual('Hi');

ReactDOM.render(
<AsyncComponent>
<AsyncMode>
<div>Bye</div>
</AsyncComponent>,
</AsyncMode>,
container,
);
expect(container.textContent).toEqual('Bye');
Expand All @@ -68,7 +67,6 @@ describe('ReactDOMFiberAsync', () => {
jest.resetModules();
ReactFeatureFlags = require('shared/ReactFeatureFlags');
container = document.createElement('div');
ReactFeatureFlags.enableAsyncSubtreeAPI = true;
ReactFeatureFlags.enableCreateRoot = true;
ReactDOM = require('react-dom');
});
Expand Down Expand Up @@ -108,9 +106,9 @@ describe('ReactDOMFiberAsync', () => {
expect(container.textContent).toEqual('1');
});

it('AsyncComponent creates an async subtree', () => {
it('AsyncMode creates an async subtree', () => {
let instance;
class Component extends React.unstable_AsyncComponent {
class Component extends React.Component {
state = {step: 0};
render() {
instance = this;
Expand All @@ -119,9 +117,9 @@ describe('ReactDOMFiberAsync', () => {
}

ReactDOM.render(
<div>
<AsyncMode>
<Component />
</div>,
</AsyncMode>,
container,
);
jest.runAllTimers();
Expand All @@ -133,12 +131,6 @@ describe('ReactDOMFiberAsync', () => {
});

it('updates inside an async subtree are async by default', () => {
class Component extends React.unstable_AsyncComponent {
render() {
return <Child />;
}
}

let instance;
class Child extends React.Component {
state = {step: 0};
Expand All @@ -150,7 +142,9 @@ describe('ReactDOMFiberAsync', () => {

ReactDOM.render(
<div>
<Component />
<AsyncMode>
<Child />
</AsyncMode>
</div>,
container,
);
Expand Down Expand Up @@ -264,7 +258,7 @@ describe('ReactDOMFiberAsync', () => {
let ops = [];
let instance;

class Component extends React.unstable_AsyncComponent {
class Component extends React.Component {
state = {text: ''};
push(val) {
this.setState(state => ({text: state.text + val}));
Expand All @@ -278,7 +272,12 @@ describe('ReactDOMFiberAsync', () => {
}
}

ReactDOM.render(<Component />, container);
ReactDOM.render(
<AsyncMode>
<Component />
</AsyncMode>,
container,
);
jest.runAllTimers();

// Updates are async by default
Expand Down
13 changes: 6 additions & 7 deletions packages/react-dom/src/__tests__/ReactDOMRoot-test.internal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
let React = require('react');
let ReactDOM = require('react-dom');
let ReactDOMServer = require('react-dom/server');
let AsyncComponent = React.unstable_AsyncComponent;
let AsyncMode = React.Unstable_AsyncMode;

describe('ReactDOMRoot', () => {
let container;
Expand Down Expand Up @@ -70,7 +70,7 @@ describe('ReactDOMRoot', () => {
React = require('react');
ReactDOM = require('react-dom');
ReactDOMServer = require('react-dom/server');
AsyncComponent = React.unstable_AsyncComponent;
AsyncMode = React.Unstable_AsyncMode;
});

it('renders children', () => {
Expand All @@ -92,7 +92,7 @@ describe('ReactDOMRoot', () => {

it('`root.render` returns a thenable work object', () => {
const root = ReactDOM.createRoot(container);
const work = root.render(<AsyncComponent>Hi</AsyncComponent>);
const work = root.render(<AsyncMode>Hi</AsyncMode>);
let ops = [];
work.then(() => {
ops.push('inside callback: ' + container.textContent);
Expand All @@ -110,7 +110,7 @@ describe('ReactDOMRoot', () => {

it('resolves `work.then` callback synchronously if the work already committed', () => {
const root = ReactDOM.createRoot(container);
const work = root.render(<AsyncComponent>Hi</AsyncComponent>);
const work = root.render(<AsyncMode>Hi</AsyncMode>);
flush();
let ops = [];
work.then(() => {
Expand Down Expand Up @@ -209,10 +209,9 @@ describe('ReactDOMRoot', () => {
});

it('can wait for a batch to finish', () => {
const Async = React.unstable_AsyncComponent;
const root = ReactDOM.createRoot(container);
const batch = root.createBatch();
batch.render(<Async>Foo</Async>);
batch.render(<AsyncMode>Foo</AsyncMode>);

flush();

Expand Down Expand Up @@ -252,7 +251,7 @@ describe('ReactDOMRoot', () => {

it('can commit an empty batch', () => {
const root = ReactDOM.createRoot(container);
root.render(<AsyncComponent>1</AsyncComponent>);
root.render(<AsyncMode>1</AsyncMode>);

expire(2000);
// This batch has a later expiration time than the earlier update.
Expand Down
24 changes: 12 additions & 12 deletions packages/react-reconciler/src/ReactChildFiber.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -318,7 +318,7 @@ function ChildReconciler(shouldTrackSideEffects) {
// Insert
const created = createFiberFromText(
textContent,
returnFiber.internalContextTag,
returnFiber.mode,
expirationTime,
);
created.return = returnFiber;
Expand Down Expand Up @@ -351,7 +351,7 @@ function ChildReconciler(shouldTrackSideEffects) {
// Insert
const created = createFiberFromElement(
element,
returnFiber.internalContextTag,
returnFiber.mode,
expirationTime,
);
created.ref = coerceRef(current, element);
Expand All @@ -375,7 +375,7 @@ function ChildReconciler(shouldTrackSideEffects) {
// Insert
const created = createFiberFromPortal(
portal,
returnFiber.internalContextTag,
returnFiber.mode,
expirationTime,
);
created.return = returnFiber;
Expand All @@ -399,7 +399,7 @@ function ChildReconciler(shouldTrackSideEffects) {
// Insert
const created = createFiberFromFragment(
fragment,
returnFiber.internalContextTag,
returnFiber.mode,
expirationTime,
key,
);
Expand All @@ -424,7 +424,7 @@ function ChildReconciler(shouldTrackSideEffects) {
// node.
const created = createFiberFromText(
'' + newChild,
returnFiber.internalContextTag,
returnFiber.mode,
expirationTime,
);
created.return = returnFiber;
Expand All @@ -436,7 +436,7 @@ function ChildReconciler(shouldTrackSideEffects) {
case REACT_ELEMENT_TYPE: {
const created = createFiberFromElement(
newChild,
returnFiber.internalContextTag,
returnFiber.mode,
expirationTime,
);
created.ref = coerceRef(null, newChild);
Expand All @@ -446,7 +446,7 @@ function ChildReconciler(shouldTrackSideEffects) {
case REACT_PORTAL_TYPE: {
const created = createFiberFromPortal(
newChild,
returnFiber.internalContextTag,
returnFiber.mode,
expirationTime,
);
created.return = returnFiber;
Expand All @@ -457,7 +457,7 @@ function ChildReconciler(shouldTrackSideEffects) {
if (isArray(newChild) || getIteratorFn(newChild)) {
const created = createFiberFromFragment(
newChild,
returnFiber.internalContextTag,
returnFiber.mode,
expirationTime,
null,
);
Expand Down Expand Up @@ -1045,7 +1045,7 @@ function ChildReconciler(shouldTrackSideEffects) {
deleteRemainingChildren(returnFiber, currentFirstChild);
const created = createFiberFromText(
textContent,
returnFiber.internalContextTag,
returnFiber.mode,
expirationTime,
);
created.return = returnFiber;
Expand Down Expand Up @@ -1097,7 +1097,7 @@ function ChildReconciler(shouldTrackSideEffects) {
if (element.type === REACT_FRAGMENT_TYPE) {
const created = createFiberFromFragment(
element.props.children,
returnFiber.internalContextTag,
returnFiber.mode,
expirationTime,
element.key,
);
Expand All @@ -1106,7 +1106,7 @@ function ChildReconciler(shouldTrackSideEffects) {
} else {
const created = createFiberFromElement(
element,
returnFiber.internalContextTag,
returnFiber.mode,
expirationTime,
);
created.ref = coerceRef(currentFirstChild, element);
Expand Down Expand Up @@ -1152,7 +1152,7 @@ function ChildReconciler(shouldTrackSideEffects) {

const created = createFiberFromPortal(
portal,
returnFiber.internalContextTag,
returnFiber.mode,
expirationTime,
);
created.return = returnFiber;
Expand Down