Skip to content

Commit

Permalink
Tidy up React Scope API (#19352)
Browse files Browse the repository at this point in the history
  • Loading branch information
@trueadm
trueadm authored Jul 16, 2020
1 parent bc4cd92 commit 9102719
Show file tree
Hide file tree
Showing 14 changed files with 136 additions and 172 deletions.
165 changes: 80 additions & 85 deletions packages/react-dom/src/events/__tests__/DOMModernPluginEventSystem-test.internal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2728,6 +2728,77 @@ describe('DOMModernPluginEventSystem', () => {
document.body.removeChild(container2);
});

// @gate experimental
it('handle propagation of click events between disjointed comment roots', () => {
const buttonRef = React.createRef();
const divRef = React.createRef();
const log = [];
const setClick = ReactDOM.unstable_createEventHandle('click');
const setClickCapture = ReactDOM.unstable_createEventHandle(
'click',
{capture: true},
);
const onClick = jest.fn(e => log.push(['bubble', e.currentTarget]));
const onClickCapture = jest.fn(e =>
log.push(['capture', e.currentTarget]),
);

function Child() {
React.useEffect(() => {
const click1 = setClick(divRef.current, onClick);
const click2 = setClickCapture(divRef.current, onClickCapture);
return () => {
click1();
click2();
};
});

return <div ref={divRef}>Click me!</div>;
}

function Parent() {
React.useEffect(() => {
const click1 = setClick(buttonRef.current, onClick);
const click2 = setClickCapture(
buttonRef.current,
onClickCapture,
);
return () => {
click1();
click2();
};
});

return <button ref={buttonRef} />;
}

// We use a comment node here, then mount to it
const disjointedNode = document.createComment(
' react-mount-point-unstable ',
);
ReactDOM.render(<Parent />, container);
Scheduler.unstable_flushAll();
buttonRef.current.appendChild(disjointedNode);
ReactDOM.render(<Child />, disjointedNode);
Scheduler.unstable_flushAll();

const buttonElement = buttonRef.current;
dispatchClickEvent(buttonElement);
expect(onClick).toHaveBeenCalledTimes(1);
expect(onClickCapture).toHaveBeenCalledTimes(1);
expect(log[0]).toEqual(['capture', buttonElement]);
expect(log[1]).toEqual(['bubble', buttonElement]);

const divElement = divRef.current;
dispatchClickEvent(divElement);
expect(onClick).toHaveBeenCalledTimes(3);
expect(onClickCapture).toHaveBeenCalledTimes(3);
expect(log[2]).toEqual(['capture', buttonElement]);
expect(log[3]).toEqual(['capture', divElement]);
expect(log[4]).toEqual(['bubble', divElement]);
expect(log[5]).toEqual(['bubble', buttonElement]);
});

describe('Compatibility with Scopes API', () => {
beforeEach(() => {
jest.resetModules();
Expand All @@ -2751,7 +2822,7 @@ describe('DOMModernPluginEventSystem', () => {
const onClickCapture = jest.fn(e =>
log.push(['capture', e.currentTarget]),
);
const TestScope = React.unstable_createScope();
const TestScope = React.unstable_Scope;
const setClick = ReactDOM.unstable_createEventHandle('click');
const setClickCapture = ReactDOM.unstable_createEventHandle(
'click',
Expand Down Expand Up @@ -2808,7 +2879,7 @@ describe('DOMModernPluginEventSystem', () => {
const onClickCapture = jest.fn(e =>
log.push(['capture', e.currentTarget]),
);
const TestScope = React.unstable_createScope();
const TestScope = React.unstable_Scope;
const setClick = ReactDOM.unstable_createEventHandle('click');
const setClickCapture = ReactDOM.unstable_createEventHandle(
'click',
Expand Down Expand Up @@ -2892,7 +2963,7 @@ describe('DOMModernPluginEventSystem', () => {
it('should not handle the target being a dangling text node within a scope', () => {
const clickEvent = jest.fn();
const buttonRef = React.createRef();
const TestScope = React.unstable_createScope();
const TestScope = React.unstable_Scope;
const setClick = ReactDOM.unstable_createEventHandle('click');

function Test() {
Expand Down Expand Up @@ -2924,8 +2995,8 @@ describe('DOMModernPluginEventSystem', () => {
const buttonRef = React.createRef();
const outerOnClick = jest.fn();
const innerOnClick = jest.fn(e => e.stopPropagation());
const TestScope = React.unstable_createScope();
const TestScope2 = React.unstable_createScope();
const TestScope = React.unstable_Scope;
const TestScope2 = React.unstable_Scope;
const setClick = ReactDOM.unstable_createEventHandle('click');

function Test() {
Expand Down Expand Up @@ -2966,8 +3037,8 @@ describe('DOMModernPluginEventSystem', () => {
const buttonRef = React.createRef();
const outerOnClick = jest.fn(e => e.stopPropagation());
const innerOnClick = jest.fn();
const TestScope = React.unstable_createScope();
const TestScope2 = React.unstable_createScope();
const TestScope = React.unstable_Scope;
const TestScope2 = React.unstable_Scope;
const setClick = ReactDOM.unstable_createEventHandle('click');

function Test() {
Expand Down Expand Up @@ -3007,8 +3078,8 @@ describe('DOMModernPluginEventSystem', () => {
it('handle stopPropagation (inner and outer) correctly between scopes', () => {
const buttonRef = React.createRef();
const onClick = jest.fn(e => e.stopPropagation());
const TestScope = React.unstable_createScope();
const TestScope2 = React.unstable_createScope();
const TestScope = React.unstable_Scope;
const TestScope2 = React.unstable_Scope;
const setClick = ReactDOM.unstable_createEventHandle('click');

function Test() {
Expand Down Expand Up @@ -3042,82 +3113,6 @@ describe('DOMModernPluginEventSystem', () => {

expect(onClick).toHaveBeenCalledTimes(1);
});

// @gate experimental
it('handle propagation of click events between disjointed comment roots', () => {
const buttonRef = React.createRef();
const divRef = React.createRef();
const log = [];
const setClick = ReactDOM.unstable_createEventHandle('click');
const setClickCapture = ReactDOM.unstable_createEventHandle(
'click',
{capture: true},
);
const onClick = jest.fn(e =>
log.push(['bubble', e.currentTarget]),
);
const onClickCapture = jest.fn(e =>
log.push(['capture', e.currentTarget]),
);

function Child() {
React.useEffect(() => {
const click1 = setClick(divRef.current, onClick);
const click2 = setClickCapture(
divRef.current,
onClickCapture,
);
return () => {
click1();
click2();
};
});

return <div ref={divRef}>Click me!</div>;
}

function Parent() {
React.useEffect(() => {
const click1 = setClick(buttonRef.current, onClick);
const click2 = setClickCapture(
buttonRef.current,
onClickCapture,
);
return () => {
click1();
click2();
};
});

return <button ref={buttonRef} />;
}

// We use a comment node here, then mount to it
const disjointedNode = document.createComment(
' react-mount-point-unstable ',
);
ReactDOM.render(<Parent />, container);
Scheduler.unstable_flushAll();
buttonRef.current.appendChild(disjointedNode);
ReactDOM.render(<Child />, disjointedNode);
Scheduler.unstable_flushAll();

const buttonElement = buttonRef.current;
dispatchClickEvent(buttonElement);
expect(onClick).toHaveBeenCalledTimes(1);
expect(onClickCapture).toHaveBeenCalledTimes(1);
expect(log[0]).toEqual(['capture', buttonElement]);
expect(log[1]).toEqual(['bubble', buttonElement]);

const divElement = divRef.current;
dispatchClickEvent(divElement);
expect(onClick).toHaveBeenCalledTimes(3);
expect(onClickCapture).toHaveBeenCalledTimes(3);
expect(log[2]).toEqual(['capture', buttonElement]);
expect(log[3]).toEqual(['capture', divElement]);
expect(log[4]).toEqual(['bubble', divElement]);
expect(log[5]).toEqual(['bubble', buttonElement]);
});
});
});
},
Expand Down
2 changes: 1 addition & 1 deletion packages/react-dom/src/events/__tests__/DeprecatedDOMEventResponderSystem-test.internal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -561,7 +561,7 @@ describe('DOMEventResponderSystem', () => {
it('the event responder onUnmount() function should fire using scopes', () => {
let onUnmountFired = 0;

const TestScope = React.unstable_createScope();
const TestScope = React.unstable_Scope;
const TestResponder = createEventResponder({
targetEventTypes: [],
onUnmount: () => {
Expand Down
50 changes: 25 additions & 25 deletions packages/react-dom/src/server/ReactPartialRenderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1109,6 +1109,31 @@ class ReactDOMServerRenderer {
}
}
// eslint-disable-next-line-no-fallthrough
case REACT_SCOPE_TYPE: {
if (enableScopeAPI) {
const nextChildren = toArray(
((nextChild: any): ReactElement).props.children,
);
const frame: Frame = {
type: null,
domNamespace: parentNamespace,
children: nextChildren,
childIndex: 0,
context: context,
footer: '',
};
if (__DEV__) {
((frame: any): FrameDev).debugElementStack = [];
}
this.stack.push(frame);
return '';
}
invariant(
false,
'ReactDOMServer does not yet support scope components.',
);
}
// eslint-disable-next-line-no-fallthrough
default:
break;
}
Expand Down Expand Up @@ -1299,31 +1324,6 @@ class ReactDOMServerRenderer {
this.stack.push(frame);
return '';
}
// eslint-disable-next-line-no-fallthrough
case REACT_SCOPE_TYPE: {
if (enableScopeAPI) {
const nextChildren = toArray(
((nextChild: any): ReactElement).props.children,
);
const frame: Frame = {
type: null,
domNamespace: parentNamespace,
children: nextChildren,
childIndex: 0,
context: context,
footer: '',
};
if (__DEV__) {
((frame: any): FrameDev).debugElementStack = [];
}
this.stack.push(frame);
return '';
}
invariant(
false,
'ReactDOMServer does not yet support scope components.',
);
}
}
}

Expand Down
2 changes: 1 addition & 1 deletion packages/react-interactions/events/src/dom/__tests__/FocusWithin-test.internal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -409,7 +409,7 @@ describe.each(table)('FocusWithin responder', hasPointerEvents => {

// @gate experimental
it('is called after a nested focused element is unmounted (with scope query)', () => {
const TestScope = React.unstable_createScope();
const TestScope = React.unstable_Scope;
const testScopeQuery = (type, props) => true;
let targetNodes;
let targetNode;
Expand Down
2 changes: 1 addition & 1 deletion ...interactions/events/src/dom/create-event-handle/__tests__/useFocusWithin-test.internal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -415,7 +415,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {

// @gate experimental
it('is called after a nested focused element is unmounted (with scope query)', () => {
const TestScope = React.unstable_createScope();
const TestScope = React.unstable_Scope;
const testScopeQuery = (type, props) => true;
let targetNodes;
let targetNode;
Expand Down
16 changes: 5 additions & 11 deletions packages/react-reconciler/src/ReactFiber.new.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -501,7 +501,11 @@ export function createFiberFromTypeAndProps(
return createFiberFromOffscreen(pendingProps, mode, lanes, key);
case REACT_LEGACY_HIDDEN_TYPE:
return createFiberFromLegacyHidden(pendingProps, mode, lanes, key);

case REACT_SCOPE_TYPE:
if (enableScopeAPI) {
return createFiberFromScope(type, pendingProps, mode, lanes, key);
}
// eslint-disable-next-line no-fallthrough
default: {
if (typeof type === 'object' && type !== null) {
switch (type.$$typeof) {
Expand Down Expand Up @@ -539,16 +543,6 @@ export function createFiberFromTypeAndProps(
);
}
break;
case REACT_SCOPE_TYPE:
if (enableScopeAPI) {
return createFiberFromScope(
type,
pendingProps,
mode,
lanes,
key,
);
}
}
}
let info = '';
Expand Down
16 changes: 5 additions & 11 deletions packages/react-reconciler/src/ReactFiber.old.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -496,7 +496,11 @@ export function createFiberFromTypeAndProps(
return createFiberFromOffscreen(pendingProps, mode, lanes, key);
case REACT_LEGACY_HIDDEN_TYPE:
return createFiberFromLegacyHidden(pendingProps, mode, lanes, key);

case REACT_SCOPE_TYPE:
if (enableScopeAPI) {
return createFiberFromScope(type, pendingProps, mode, lanes, key);
}
// eslint-disable-next-line no-fallthrough
default: {
if (typeof type === 'object' && type !== null) {
switch (type.$$typeof) {
Expand Down Expand Up @@ -534,16 +538,6 @@ export function createFiberFromTypeAndProps(
);
}
break;
case REACT_SCOPE_TYPE:
if (enableScopeAPI) {
return createFiberFromScope(
type,
pendingProps,
mode,
lanes,
key,
);
}
}
}
let info = '';
Expand Down
Loading

0 comments on commit 9102719

Please sign in to comment.