@samitouri / QOS-React / commits / 21d0c11523

Convert the Source to ES Modules (#11389)

* Update transforms to handle ES modules * Update Jest to handle ES modules * Convert react package to ES modules * Convert react-art package to ES Modules * Convert react-call-return package to ES Modules * Convert react-test-renderer package to ES Modules * Convert react-cs-renderer package to ES Modules * Convert react-rt-renderer package to ES Modules * Convert react-noop-renderer package to ES Modules * Convert react-dom/server to ES modules * Convert react-dom/{client,events,test-utils} to ES modules * Convert react-dom/shared to ES modules * Convert react-native-renderer to ES modules * Convert react-reconciler to ES modules * Convert events to ES modules * Convert shared to ES modules * Remove CommonJS support from transforms * Move ReactDOMFB entry point code into react-dom/src This is clearer because we can use ES imports in it. * Fix Rollup shim configuration to work with ESM * Fix incorrect comment * Exclude external imports without side effects * Fix ReactDOM FB build * Remove TODOs I don’t intend to fix yet

Dan Abramov committed Nov 2, 2017 at 19:50 UTC 21d0c115238b4f38837020cf83e0c657d8c01c9f

234 files changed +3236 -3439

packages/events/EventPluginHub.js

+7 -7

@@ -7,13 +7,13 @@

8 'use strict';

10 -var ReactErrorUtils = require('shared/ReactErrorUtils');

11 -var invariant = require('fbjs/lib/invariant');

10 +import ReactErrorUtils from 'shared/ReactErrorUtils';

11 +import invariant from 'fbjs/lib/invariant';

13 -var EventPluginRegistry = require('./EventPluginRegistry');

14 -var EventPluginUtils = require('./EventPluginUtils');

15 -var accumulateInto = require('./accumulateInto');

16 -var forEachAccumulated = require('./forEachAccumulated');

13 +import EventPluginRegistry from './EventPluginRegistry';

14 +import EventPluginUtils from './EventPluginUtils';

15 +import accumulateInto from './accumulateInto';

16 +import forEachAccumulated from './forEachAccumulated';

18 /**

19 * Internal queue of events that have accumulated their dispatches and are

@@ -220,4 +220,4 @@ var EventPluginHub = {

220 },

221 };

222

223 -module.exports = EventPluginHub;

223 +export default EventPluginHub;

packages/events/EventPluginRegistry.js

+2 -2

@@ -16,7 +16,7 @@ import type {

16 PluginModule,

17 } from './PluginModuleType';

19 -var invariant = require('fbjs/lib/invariant');

19 +import invariant from 'fbjs/lib/invariant';

21 type NamesToPlugins = {[key: PluginName]: PluginModule<AnyNativeEvent>};

22 type EventPluginOrder = null | Array<PluginName>;

@@ -251,4 +251,4 @@ var EventPluginRegistry = {

251 },

252 };

253

254 -module.exports = EventPluginRegistry;

254 +export default EventPluginRegistry;

packages/events/EventPluginUtils.js

+4 -7

@@ -7,12 +7,9 @@

8 'use strict';

10 -var ReactErrorUtils = require('shared/ReactErrorUtils');

11 -var invariant = require('fbjs/lib/invariant');

12 -

13 -if (__DEV__) {

14 - var warning = require('fbjs/lib/warning');

15 -}

10 +import ReactErrorUtils from 'shared/ReactErrorUtils';

11 +import invariant from 'fbjs/lib/invariant';

12 +import warning from 'fbjs/lib/warning';

14 /**

15 * Injected dependencies:

@@ -228,4 +225,4 @@ var EventPluginUtils = {

225 injection: injection,

226 };

227

231 -module.exports = EventPluginUtils;

228 +export default EventPluginUtils;

packages/events/EventPropagators.js

+14 -29

@@ -7,20 +7,21 @@

8 'use strict';

10 -var ReactTreeTraversal = require('shared/ReactTreeTraversal');

10 +import {

11 + getParentInstance,

12 + traverseTwoPhase,

13 + traverseEnterLeave,

14 +} from 'shared/ReactTreeTraversal';

15 +import warning from 'fbjs/lib/warning';

12 -var EventPluginHub = require('./EventPluginHub');

13 -var accumulateInto = require('./accumulateInto');

14 -var forEachAccumulated = require('./forEachAccumulated');

17 +import EventPluginHub from './EventPluginHub';

18 +import accumulateInto from './accumulateInto';

19 +import forEachAccumulated from './forEachAccumulated';

21 type PropagationPhases = 'bubbled' | 'captured';

23 var getListener = EventPluginHub.getListener;

20 -if (__DEV__) {

21 - var warning = require('fbjs/lib/warning');

22 -}

23 -

25 /**

26 * Some event types have a notion of different registration names for different

27 * "phases" of propagation. This finds listeners by a given phase.

@@ -60,11 +61,7 @@ function accumulateDirectionalDispatches(inst, phase, event) {

61 */

62 function accumulateTwoPhaseDispatchesSingle(event) {

63 if (event && event.dispatchConfig.phasedRegistrationNames) {

63 - ReactTreeTraversal.traverseTwoPhase(

64 - event._targetInst,

65 - accumulateDirectionalDispatches,

66 - event,

67 - );

64 + traverseTwoPhase(event._targetInst, accumulateDirectionalDispatches, event);

65 }

66 }

@@ -74,14 +71,8 @@ function accumulateTwoPhaseDispatchesSingle(event) {

71 function accumulateTwoPhaseDispatchesSingleSkipTarget(event) {

72 if (event && event.dispatchConfig.phasedRegistrationNames) {

73 var targetInst = event._targetInst;

77 - var parentInst = targetInst

78 - ? ReactTreeTraversal.getParentInstance(targetInst)

79 - : null;

80 - ReactTreeTraversal.traverseTwoPhase(

81 - parentInst,

82 - accumulateDirectionalDispatches,

83 - event,

84 - );

74 + var parentInst = targetInst ? getParentInstance(targetInst) : null;

75 + traverseTwoPhase(parentInst, accumulateDirectionalDispatches, event);

76 }

77 }

@@ -124,13 +115,7 @@ function accumulateTwoPhaseDispatchesSkipTarget(events) {

115 }

116

117 function accumulateEnterLeaveDispatches(leave, enter, from, to) {

127 - ReactTreeTraversal.traverseEnterLeave(

128 - from,

129 - to,

130 - accumulateDispatches,

131 - leave,

132 - enter,

133 - );

118 + traverseEnterLeave(from, to, accumulateDispatches, leave, enter);

119 }

120

121 function accumulateDirectDispatches(events) {

@@ -155,4 +140,4 @@ var EventPropagators = {

140 accumulateEnterLeaveDispatches: accumulateEnterLeaveDispatches,

141 };

142

158 -module.exports = EventPropagators;

143 +export default EventPropagators;

packages/events/ReactControlledComponent.js

+3 -3

@@ -7,9 +7,9 @@

8 'use strict';

10 -var invariant = require('fbjs/lib/invariant');

10 +import invariant from 'fbjs/lib/invariant';

12 -var EventPluginUtils = require('./EventPluginUtils');

12 +import EventPluginUtils from './EventPluginUtils';

14 // Use to restore controlled state after a change event has fired.

@@ -83,4 +83,4 @@ var ReactControlledComponent = {

83 },

84 };

86 -module.exports = ReactControlledComponent;

86 +export default ReactControlledComponent;

packages/events/ReactEventEmitterMixin.js

+2 -2

@@ -7,7 +7,7 @@

8 'use strict';

10 -var EventPluginHub = require('./EventPluginHub');

10 +import EventPluginHub from './EventPluginHub';

12 function runEventQueueInBatch(events) {

13 EventPluginHub.enqueueEvents(events);

@@ -35,4 +35,4 @@ var ReactEventEmitterMixin = {

35 },

36 };

38 -module.exports = ReactEventEmitterMixin;

38 +export default ReactEventEmitterMixin;

packages/events/ReactGenericBatching.js

+2 -2

@@ -7,7 +7,7 @@

8 'use strict';

10 -var ReactControlledComponent = require('./ReactControlledComponent');

10 +import ReactControlledComponent from './ReactControlledComponent';

12 // Used as a way to call batchedUpdates when we don't have a reference to

13 // the renderer. Such as when we're dispatching events or if third party

@@ -58,4 +58,4 @@ var ReactGenericBatching = {

58 injection: ReactGenericBatchingInjection,

59 };

61 -module.exports = ReactGenericBatching;

61 +export default ReactGenericBatching;

packages/events/ResponderEventPlugin.js

+9 -9

@@ -7,13 +7,13 @@

8 'use strict';

10 -var ReactTreeTraversal = require('shared/ReactTreeTraversal');

10 +import {getLowestCommonAncestor, isAncestor} from 'shared/ReactTreeTraversal';

12 -var EventPluginUtils = require('./EventPluginUtils');

13 -var EventPropagators = require('./EventPropagators');

14 -var ResponderSyntheticEvent = require('./ResponderSyntheticEvent');

15 -var ResponderTouchHistoryStore = require('./ResponderTouchHistoryStore');

16 -var accumulate = require('./accumulate');

12 +import EventPluginUtils from './EventPluginUtils';

13 +import EventPropagators from './EventPropagators';

14 +import ResponderSyntheticEvent from './ResponderSyntheticEvent';

15 +import ResponderTouchHistoryStore from './ResponderTouchHistoryStore';

16 +import accumulate from './accumulate';

18 var isStartish = EventPluginUtils.isStartish;

19 var isMoveish = EventPluginUtils.isMoveish;

@@ -327,7 +327,7 @@ function setResponderAndExtractTransfer(

327 // TODO: stop one short of the current responder.

328 var bubbleShouldSetFrom = !responderInst

329 ? targetInst

330 - : ReactTreeTraversal.getLowestCommonAncestor(responderInst, targetInst);

330 + : getLowestCommonAncestor(responderInst, targetInst);

331

332 // When capturing/bubbling the "shouldSet" event, we want to skip the target

333 // (deepest ID) if it happens to be the current responder. The reasoning:

@@ -450,7 +450,7 @@ function noResponderTouches(nativeEvent) {

450 if (target !== null && target !== undefined && target !== 0) {

451 // Is the original touch location inside of the current responder?

452 var targetInst = EventPluginUtils.getInstanceFromNode(target);

453 - if (ReactTreeTraversal.isAncestor(responderInst, targetInst)) {

453 + if (isAncestor(responderInst, targetInst)) {

454 return false;

455 }

456 }

@@ -592,4 +592,4 @@ var ResponderEventPlugin = {

592 },

593 };

594

595 -module.exports = ResponderEventPlugin;

595 +export default ResponderEventPlugin;

packages/events/ResponderSyntheticEvent.js

+2 -2

@@ -7,7 +7,7 @@

8 'use strict';

10 -var SyntheticEvent = require('./SyntheticEvent');

10 +import SyntheticEvent from './SyntheticEvent';

12 /**

13 * `touchHistory` isn't actually on the native event, but putting it in the

@@ -43,4 +43,4 @@ function ResponderSyntheticEvent(

44 SyntheticEvent.augmentClass(ResponderSyntheticEvent, ResponderEventInterface);

46 -module.exports = ResponderSyntheticEvent;

46 +export default ResponderSyntheticEvent;

packages/events/ResponderTouchHistoryStore.js

+5 -7

@@ -9,14 +9,12 @@

10 'use strict';

12 -const invariant = require('fbjs/lib/invariant');

12 +import invariant from 'fbjs/lib/invariant';

13 +import warning from 'fbjs/lib/warning';

14 -const EventPluginUtils = require('./EventPluginUtils');

15 -const {isEndish, isMoveish, isStartish} = EventPluginUtils;

15 +import EventPluginUtils from './EventPluginUtils';

17 -if (__DEV__) {

18 - var warning = require('fbjs/lib/warning');

19 -}

17 +const {isEndish, isMoveish, isStartish} = EventPluginUtils;

19 /**

20 * Tracks the position and time of each active touch by `touch.identifier`. We

@@ -218,4 +216,4 @@ const ResponderTouchHistoryStore = {

216 touchHistory,

217 };

218

221 -module.exports = ResponderTouchHistoryStore;

219 +export default ResponderTouchHistoryStore;

packages/events/SyntheticEvent.js

+5 -8

@@ -9,17 +9,14 @@

10 'use strict';

12 -var emptyFunction = require('fbjs/lib/emptyFunction');

13 -var invariant = require('fbjs/lib/invariant');

12 +import emptyFunction from 'fbjs/lib/emptyFunction';

13 +import invariant from 'fbjs/lib/invariant';

14 +import warning from 'fbjs/lib/warning';

16 var didWarnForAddedNewProperty = false;

17 var isProxySupported = typeof Proxy === 'function';

18 var EVENT_POOL_SIZE = 10;

19 -if (__DEV__) {

20 - var warning = require('fbjs/lib/warning');

21 -}

22 -

20 var shouldBeReleasedProperties = [

21 'dispatchConfig',

22 '_targetInst',

@@ -271,8 +268,6 @@ if (__DEV__) {

268

269 addEventPoolingTo(SyntheticEvent);

270

274 -module.exports = SyntheticEvent;

275 -

271 /**

272 * Helper to nullify syntheticEvent instance properties when destructing

273 *

@@ -356,3 +351,5 @@ function addEventPoolingTo(EventConstructor) {

351 EventConstructor.getPooled = getPooledEvent;

352 EventConstructor.release = releasePooledEvent;

353 }

354 +

355 +export default SyntheticEvent;

packages/events/TouchHistoryMath.js

+1 -1

@@ -148,4 +148,4 @@ var TouchHistoryMath = {

148 noCentroid: -1,

149 };

150

151 -module.exports = TouchHistoryMath;

151 +export default TouchHistoryMath;

packages/events/__tests__/EventPluginRegistry-test.js

+1 -1

@@ -16,7 +16,7 @@ describe('EventPluginRegistry', () => {

16 beforeEach(() => {

17 jest.resetModuleRegistry();

18 // TODO: can we express this test with only public API?

19 - EventPluginRegistry = require('events/EventPluginRegistry');

19 + EventPluginRegistry = require('events/EventPluginRegistry').default;

21 createPlugin = function(properties) {

22 return Object.assign({extractEvents: function() {}}, properties);

packages/events/__tests__/accumulateInto-test.js

+1 -1

@@ -13,7 +13,7 @@ var accumulateInto;

14 describe('accumulateInto', () => {

15 beforeEach(() => {

16 - accumulateInto = require('events/accumulateInto');

16 + accumulateInto = require('events/accumulateInto').default;

17 });

19 it('throws if the second item is null', () => {

packages/events/accumulate.js

+2 -2

@@ -9,7 +9,7 @@

10 'use strict';

12 -var invariant = require('fbjs/lib/invariant');

12 +import invariant from 'fbjs/lib/invariant';

14 /**

15 * Accumulates items that must not be null or undefined.

@@ -44,4 +44,4 @@ function accumulate<T>(

44 return [current, next];

45 }

47 -module.exports = accumulate;

47 +export default accumulate;

packages/events/accumulateInto.js

+2 -2

@@ -9,7 +9,7 @@

10 'use strict';

12 -var invariant = require('fbjs/lib/invariant');

12 +import invariant from 'fbjs/lib/invariant';

14 /**

15 * Accumulates items that must not be null or undefined into the first one. This

@@ -56,4 +56,4 @@ function accumulateInto<T>(

56 return [current, next];

57 }

59 -module.exports = accumulateInto;

59 +export default accumulateInto;

packages/events/forEachAccumulated.js

+1 -1

@@ -30,4 +30,4 @@ function forEachAccumulated<T>(

30 }

31 }

33 -module.exports = forEachAccumulated;

33 +export default forEachAccumulated;

packages/react-art/index.js

+3 -1

@@ -9,4 +9,6 @@

10 'use strict';

12 -module.exports = require('./src/ReactART');

12 +var ReactART = require('./src/ReactART');

13 +

14 +module.exports = ReactART;

packages/react-art/src/ReactART.js

+17 -24

@@ -7,20 +7,20 @@

8 'use strict';

10 -require('art/modes/current').setCurrent(

10 +import React from 'react';

11 +import ReactFiberReconciler from 'react-reconciler';

12 +import * as ReactDOMFrameScheduling from 'shared/ReactDOMFrameScheduling';

13 +import Mode from 'art/modes/current';

14 +import FastNoSideEffects from 'art/modes/fast-noSideEffects';

15 +import Transform from 'art/core/transform';

16 +import invariant from 'fbjs/lib/invariant';

17 +import emptyObject from 'fbjs/lib/emptyObject';

18 +

19 +Mode.setCurrent(

20 // Change to 'art/modes/dom' for easier debugging via SVG

12 - require('art/modes/fast-noSideEffects'),

21 + FastNoSideEffects,

22 );

15 -const React = require('react');

16 -const ReactFiberReconciler = require('react-reconciler');

17 -const ReactDOMFrameScheduling = require('shared/ReactDOMFrameScheduling');

18 -const Mode = require('art/modes/current');

19 -const Transform = require('art/core/transform');

20 -const invariant = require('fbjs/lib/invariant');

21 -const emptyObject = require('fbjs/lib/emptyObject');

22 -const {Component} = React;

23 -

24 const pooledTransform = new Transform();

26 const EVENT_TYPES = {

@@ -306,7 +306,7 @@ class Pattern {

306

307 /** React Components */

308

309 -class Surface extends Component {

309 +class Surface extends React.Component {

310 componentDidMount() {

311 const {height, width} = this.props;

312

@@ -539,15 +539,8 @@ const ARTRenderer = ReactFiberReconciler({

539

540 /** API */

541

542 -module.exports = {

543 - ClippingRectangle: TYPES.CLIPPING_RECTANGLE,

544 - Group: TYPES.GROUP,

545 - LinearGradient,

546 - Path: Mode.Path,

547 - Pattern,

548 - RadialGradient,

549 - Shape: TYPES.SHAPE,

550 - Surface,

551 - Text: Text,

552 - Transform,

553 -};

542 +export const ClippingRectangle = TYPES.CLIPPING_RECTANGLE;

543 +export const Group = TYPES.GROUP;

544 +export const Shape = TYPES.SHAPE;

545 +export const Path = Mode.Path;

546 +export {LinearGradient, Pattern, RadialGradient, Surface, Text, Transform};

packages/react-call-return/src/ReactCallReturn.js

+10 -10

@@ -25,7 +25,7 @@ if (typeof Symbol === 'function' && Symbol.for) {

26 type CallHandler<T> = (props: T, returns: Array<mixed>) => ReactNodeList;

28 -exports.unstable_createCall = function<T>(

28 +export function unstable_createCall<T>(

29 children: mixed,

30 handler: CallHandler<T>,

31 props: T,

@@ -49,9 +49,9 @@ exports.unstable_createCall = function<T>(

49 }

51 return call;

52 -};

52 +}

54 -exports.unstable_createReturn = function(value: mixed): ReactReturn {

54 +export function unstable_createReturn(value: mixed): ReactReturn {

55 var returnNode = {

56 // This tag allow us to uniquely identify this as a React Return

57 $$typeof: REACT_RETURN_TYPE,

@@ -66,29 +66,29 @@ exports.unstable_createReturn = function(value: mixed): ReactReturn {

66 }

68 return returnNode;

69 -};

69 +}

71 /**

72 * Verifies the object is a call object.

73 */

74 -exports.unstable_isCall = function(object: mixed): boolean {

74 +export function unstable_isCall(object: mixed): boolean {

75 return (

76 typeof object === 'object' &&

77 object !== null &&

78 object.$$typeof === REACT_CALL_TYPE

79 );

80 -};

80 +}

82 /**

83 * Verifies the object is a return object.

84 */

85 -exports.unstable_isReturn = function(object: mixed): boolean {

85 +export function unstable_isReturn(object: mixed): boolean {

86 return (

87 typeof object === 'object' &&

88 object !== null &&

89 object.$$typeof === REACT_RETURN_TYPE

90 );

91 -};

91 +}

93 -exports.unstable_REACT_RETURN_TYPE = REACT_RETURN_TYPE;

94 -exports.unstable_REACT_CALL_TYPE = REACT_CALL_TYPE;

93 +export const unstable_REACT_RETURN_TYPE = REACT_RETURN_TYPE;

94 +export const unstable_REACT_CALL_TYPE = REACT_CALL_TYPE;

packages/react-cs-renderer/index.js

+5 -1

@@ -9,4 +9,8 @@

10 'use strict';

12 -module.exports = require('./src/ReactNativeCS');

12 +var ReactNativeCS = require('./src/ReactNativeCS');

13 +

14 +// TODO: decide on the top-level export form.

15 +// This is hacky but makes it work with both Rollup and Jest.

16 +module.exports = ReactNativeCS.default ? ReactNativeCS.default : ReactNativeCS;

packages/react-cs-renderer/src/ReactNativeCS.js

+8 -9

@@ -9,17 +9,16 @@

10 'use strict';

12 -const {CSStatefulComponent} = require('CSStatefulComponent');

13 -const ReactFiberReconciler = require('react-reconciler');

14 -const ReactVersion = require('shared/ReactVersion');

15 -

16 -const {

17 - injectInternals,

18 -} = require('react-reconciler/src/ReactFiberDevToolsHook');

19 -

12 import type {ReactNodeList} from 'shared/ReactTypes';

13 import type {ReactNativeCSType} from './ReactNativeCSTypes';

15 +// Provided by CS:

16 +import {CSStatefulComponent} from 'CSStatefulComponent';

17 +

18 +import ReactFiberReconciler from 'react-reconciler';

19 +import {injectInternals} from 'react-reconciler/src/ReactFiberDevToolsHook';

20 +import ReactVersion from 'shared/ReactVersion';

21 +

22 const emptyObject = {};

24 type Container = {

@@ -300,4 +299,4 @@ const ReactCS = CSStatefulComponent({

299 // TODO: Unmount hook. E.g. finalizer.

300 });

301

303 -module.exports = (ReactCS: ReactNativeCSType);

302 +export default (ReactCS: ReactNativeCSType);

packages/react-cs-renderer/src/ReactNativeCSFeatureFlags.js

+1 -1

@@ -21,4 +21,4 @@ var ReactNativeCSFeatureFlags: FeatureFlags = {

21 enablePersistentReconciler: true,

22 };

24 -module.exports = ReactNativeCSFeatureFlags;

24 +export default ReactNativeCSFeatureFlags;

packages/react-cs-renderer/src/__mocks__/CSStatefulComponent.js

+1 -1

@@ -9,6 +9,6 @@

10 // Mock of the CS Hooks

12 -exports.CSStatefulComponent = function(spec) {

12 +export const CSStatefulComponent = function(spec) {

13 return spec;

14 };

packages/react-dom/index.fb.js

+4 -15

@@ -7,19 +7,8 @@

8 'use strict';

10 -var ReactDOM = require('./src/client/ReactDOM');

10 +var ReactDOMFB = require('./src/client/ReactDOMFB');

12 -Object.assign(ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, {

13 - // These are real internal dependencies that are trickier to remove:

14 - ReactBrowserEventEmitter: require('./src/events/ReactBrowserEventEmitter'),

15 - ReactErrorUtils: require('shared/ReactErrorUtils'),

16 - // TODO: direct imports like some-package/src/* are bad. Fix me.

17 - ReactFiberErrorLogger: require('react-reconciler/src/ReactFiberErrorLogger'),

18 - ReactFiberTreeReflection: require('shared/ReactFiberTreeReflection'),

19 - ReactDOMComponentTree: require('./src/client/ReactDOMComponentTree'),

20 - ReactInstanceMap: require('shared/ReactInstanceMap'),

21 - // Used by www msite:

22 - TapEventPlugin: require('./src/events/TapEventPlugin'),

23 -});

24 -

25 -module.exports = ReactDOM;

12 +// TODO: decide on the top-level export form.

13 +// This is hacky but makes it work with both Rollup and Jest.

14 +module.exports = ReactDOMFB.default ? ReactDOMFB.default : ReactDOMFB;

packages/react-dom/index.js

+5 -1

@@ -9,4 +9,8 @@

10 'use strict';

12 -module.exports = require('./src/client/ReactDOM');

12 +var ReactDOM = require('./src/client/ReactDOM');

13 +

14 +// TODO: decide on the top-level export form.

15 +// This is hacky but makes it work with both Rollup and Jest.

16 +module.exports = ReactDOM.default ? ReactDOM.default : ReactDOM;

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

+6 -5

@@ -58,14 +58,15 @@ describe('ReactBrowserEventEmitter', () => {

58 LISTENER.mockClear();

60 // TODO: can we express this test with only public API?

61 - EventPluginHub = require('events/EventPluginHub');

62 - EventPluginRegistry = require('events/EventPluginRegistry');

61 + EventPluginHub = require('events/EventPluginHub').default;

62 + EventPluginRegistry = require('events/EventPluginRegistry').default;

63 React = require('react');

64 ReactDOM = require('react-dom');

65 - ReactDOMComponentTree = require('../client/ReactDOMComponentTree');

66 - ReactBrowserEventEmitter = require('../events/ReactBrowserEventEmitter');

65 + ReactDOMComponentTree = require('../client/ReactDOMComponentTree').default;

66 + ReactBrowserEventEmitter = require('../events/ReactBrowserEventEmitter')

67 + .default;

68 ReactTestUtils = require('react-dom/test-utils');

68 - TapEventPlugin = require('../events/TapEventPlugin');

69 + TapEventPlugin = require('../events/TapEventPlugin').default;

71 var container = document.createElement('div');

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

+1 -1

@@ -34,7 +34,7 @@ describe('ReactDOMComponentTree', () => {

34 React = require('react');

35 ReactDOM = require('react-dom');

36 // TODO: can we express this test with only public API?

37 - ReactDOMComponentTree = require('../client/ReactDOMComponentTree');

37 + ReactDOMComponentTree = require('../client/ReactDOMComponentTree').default;

38 ReactDOMServer = require('react-dom/server');

39 });

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

+2 -2

@@ -24,8 +24,8 @@ describe('ReactDOMEventListener', () => {

24 React = require('react');

25 ReactDOM = require('react-dom');

26 // TODO: can we express this test with only public API?

27 - ReactDOMComponentTree = require('../client/ReactDOMComponentTree');

28 - ReactDOMEventListener = require('../events/ReactDOMEventListener');

27 + ReactDOMComponentTree = require('../client/ReactDOMComponentTree').default;

28 + ReactDOMEventListener = require('../events/ReactDOMEventListener').default;

29 ReactTestUtils = require('react-dom/test-utils');

31 handleTopLevel = jest.fn();

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

+1 -1

@@ -35,7 +35,7 @@ describe('ReactDOMServer', () => {

35 ReactDOMServer = require('react-dom/server');

37 // TODO: can we express this test with only public API?

38 - var DOMProperty = require('../shared/DOMProperty');

38 + var DOMProperty = require('../shared/DOMProperty').default;

39 ROOT_ATTRIBUTE_NAME = DOMProperty.ROOT_ATTRIBUTE_NAME;

40 });

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

+1 -1

@@ -11,7 +11,7 @@

12 var React = require('react');

13 // TODO: can we express this test with only public API?

14 -var ReactDOMComponentTree = require('../client/ReactDOMComponentTree');

14 +var ReactDOMComponentTree = require('../client/ReactDOMComponentTree').default;

15 var ReactTestUtils = require('react-dom/test-utils');

17 /**

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

+2 -1

@@ -11,7 +11,8 @@

12 describe('escapeTextContentForBrowser', () => {

13 // TODO: can we express this test with only public API?

14 - var escapeTextContentForBrowser = require('../shared/escapeTextContentForBrowser');

14 + var escapeTextContentForBrowser = require('../shared/escapeTextContentForBrowser')

15 + .default;

17 it('should escape boolean to string', () => {

18 expect(escapeTextContentForBrowser(true)).toBe('true');

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

+2 -1

@@ -11,7 +11,8 @@

12 describe('quoteAttributeValueForBrowser', () => {

13 // TODO: can we express this test with only public API?

14 - var quoteAttributeValueForBrowser = require('../shared/quoteAttributeValueForBrowser');

14 + var quoteAttributeValueForBrowser = require('../shared/quoteAttributeValueForBrowser')

15 + .default;

17 it('should escape boolean to string', () => {

18 expect(quoteAttributeValueForBrowser(true)).toBe('"true"');

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

+1 -1

@@ -136,7 +136,7 @@ describe('ReactContextValidator', () => {

136 jest.resetModules();

137

138 // TODO: can we express this test with only public API?

139 - validateDOMNesting = require('../client/validateDOMNesting');

139 + validateDOMNesting = require('../client/validateDOMNesting').default;

140 });

141

142 it('allows any tag with no context', () => {

packages/react-dom/src/client/DOMPropertyOperations.js

+164 -170

@@ -7,11 +7,8 @@

8 'use strict';

10 -var DOMProperty = require('../shared/DOMProperty');

11 -

12 -if (__DEV__) {

13 - var warning = require('fbjs/lib/warning');

14 -}

10 +import DOMProperty from '../shared/DOMProperty';

11 +import warning from 'fbjs/lib/warning';

13 // isAttributeNameSafe() is currently duplicated in DOMMarkupOperations.

14 // TODO: Find a better place for this.

@@ -57,201 +54,198 @@ function shouldIgnoreValue(propertyInfo, value) {

54 /**

55 * Operations for dealing with DOM properties.

56 */

60 -var DOMPropertyOperations = {

61 - setAttributeForID: function(node, id) {

62 - node.setAttribute(DOMProperty.ID_ATTRIBUTE_NAME, id);

63 - },

65 - setAttributeForRoot: function(node) {

66 - node.setAttribute(DOMProperty.ROOT_ATTRIBUTE_NAME, '');

67 - },

58 +export function setAttributeForID(node, id) {

59 + node.setAttribute(DOMProperty.ID_ATTRIBUTE_NAME, id);

60 +}

69 - /**

70 - * Get the value for a property on a node. Only used in DEV for SSR validation.

71 - * The "expected" argument is used as a hint of what the expected value is.

72 - * Some properties have multiple equivalent values.

73 - */

74 - getValueForProperty: function(node, name, expected) {

75 - if (__DEV__) {

76 - var propertyInfo = DOMProperty.getPropertyInfo(name);

77 - if (propertyInfo) {

78 - var mutationMethod = propertyInfo.mutationMethod;

79 - if (mutationMethod || propertyInfo.mustUseProperty) {

80 - return node[propertyInfo.propertyName];

81 - } else {

82 - var attributeName = propertyInfo.attributeName;

62 +export function setAttributeForRoot(node) {

63 + node.setAttribute(DOMProperty.ROOT_ATTRIBUTE_NAME, '');

64 +}

65 +

66 +/**

67 + * Get the value for a property on a node. Only used in DEV for SSR validation.

68 + * The "expected" argument is used as a hint of what the expected value is.

69 + * Some properties have multiple equivalent values.

70 + */

71 +export function getValueForProperty(node, name, expected) {

72 + if (__DEV__) {

73 + var propertyInfo = DOMProperty.getPropertyInfo(name);

74 + if (propertyInfo) {

75 + var mutationMethod = propertyInfo.mutationMethod;

76 + if (mutationMethod || propertyInfo.mustUseProperty) {

77 + return node[propertyInfo.propertyName];

78 + } else {

79 + var attributeName = propertyInfo.attributeName;

84 - var stringValue = null;

81 + var stringValue = null;

86 - if (propertyInfo.hasOverloadedBooleanValue) {

87 - if (node.hasAttribute(attributeName)) {

88 - var value = node.getAttribute(attributeName);

89 - if (value === '') {

90 - return true;

91 - }

92 - if (shouldIgnoreValue(propertyInfo, expected)) {

93 - return value;

94 - }

95 - if (value === '' + expected) {

96 - return expected;

97 - }

98 - return value;

83 + if (propertyInfo.hasOverloadedBooleanValue) {

84 + if (node.hasAttribute(attributeName)) {

85 + var value = node.getAttribute(attributeName);

86 + if (value === '') {

87 + return true;

88 }

100 - } else if (node.hasAttribute(attributeName)) {

89 if (shouldIgnoreValue(propertyInfo, expected)) {

102 - // We had an attribute but shouldn't have had one, so read it

103 - // for the error message.

104 - return node.getAttribute(attributeName);

90 + return value;

91 }

106 - if (propertyInfo.hasBooleanValue) {

107 - // If this was a boolean, it doesn't matter what the value is

108 - // the fact that we have it is the same as the expected.

92 + if (value === '' + expected) {

93 return expected;

94 }

111 - // Even if this property uses a namespace we use getAttribute

112 - // because we assume its namespaced name is the same as our config.

113 - // To use getAttributeNS we need the local name which we don't have

114 - // in our config atm.

115 - stringValue = node.getAttribute(attributeName);

95 + return value;

96 }

117 -

97 + } else if (node.hasAttribute(attributeName)) {

98 if (shouldIgnoreValue(propertyInfo, expected)) {

119 - return stringValue === null ? expected : stringValue;

120 - } else if (stringValue === '' + expected) {

99 + // We had an attribute but shouldn't have had one, so read it

100 + // for the error message.

101 + return node.getAttribute(attributeName);

102 + }

103 + if (propertyInfo.hasBooleanValue) {

104 + // If this was a boolean, it doesn't matter what the value is

105 + // the fact that we have it is the same as the expected.

106 return expected;

122 - } else {

123 - return stringValue;

107 }

108 + // Even if this property uses a namespace we use getAttribute

109 + // because we assume its namespaced name is the same as our config.

110 + // To use getAttributeNS we need the local name which we don't have

111 + // in our config atm.

112 + stringValue = node.getAttribute(attributeName);

113 }

126 - }

127 - }

128 - },

114

130 - /**

131 - * Get the value for a attribute on a node. Only used in DEV for SSR validation.

132 - * The third argument is used as a hint of what the expected value is. Some

133 - * attributes have multiple equivalent values.

134 - */

135 - getValueForAttribute: function(node, name, expected) {

136 - if (__DEV__) {

137 - if (!isAttributeNameSafe(name)) {

138 - return;

139 - }

140 - if (!node.hasAttribute(name)) {

141 - return expected === undefined ? undefined : null;

142 - }

143 - var value = node.getAttribute(name);

144 - if (value === '' + expected) {

145 - return expected;

146 - }

147 - return value;

148 - }

149 - },

150 -

151 - /**

152 - * Sets the value for a property on a node.

153 - *

154 - * @param {DOMElement} node

155 - * @param {string} name

156 - * @param {*} value

157 - */

158 - setValueForProperty: function(node, name, value) {

159 - var propertyInfo = DOMProperty.getPropertyInfo(name);

160 -

161 - if (propertyInfo && DOMProperty.shouldSetAttribute(name, value)) {

162 - var mutationMethod = propertyInfo.mutationMethod;

163 - if (mutationMethod) {

164 - mutationMethod(node, value);

165 - } else if (shouldIgnoreValue(propertyInfo, value)) {

166 - DOMPropertyOperations.deleteValueForProperty(node, name);

167 - return;

168 - } else if (propertyInfo.mustUseProperty) {

169 - // Contrary to `setAttribute`, object properties are properly

170 - // `toString`ed by IE8/9.

171 - node[propertyInfo.propertyName] = value;

172 - } else {

173 - var attributeName = propertyInfo.attributeName;

174 - var namespace = propertyInfo.attributeNamespace;

175 - // `setAttribute` with objects becomes only `[object]` in IE8/9,

176 - // ('' + value) makes it output the correct toString()-value.

177 - if (namespace) {

178 - node.setAttributeNS(namespace, attributeName, '' + value);

179 - } else if (

180 - propertyInfo.hasBooleanValue ||

181 - (propertyInfo.hasOverloadedBooleanValue && value === true)

182 - ) {

183 - node.setAttribute(attributeName, '');

115 + if (shouldIgnoreValue(propertyInfo, expected)) {

116 + return stringValue === null ? expected : stringValue;

117 + } else if (stringValue === '' + expected) {

118 + return expected;

119 } else {

185 - node.setAttribute(attributeName, '' + value);

120 + return stringValue;

121 }

122 }

188 - } else {

189 - DOMPropertyOperations.setValueForAttribute(

190 - node,

191 - name,

192 - DOMProperty.shouldSetAttribute(name, value) ? value : null,

193 - );

194 - return;

123 }

124 + }

125 +}

126

197 - if (__DEV__) {

198 - var payload = {};

199 - payload[name] = value;

200 - }

201 - },

202 -

203 - setValueForAttribute: function(node, name, value) {

127 +/**

128 + * Get the value for a attribute on a node. Only used in DEV for SSR validation.

129 + * The third argument is used as a hint of what the expected value is. Some

130 + * attributes have multiple equivalent values.

131 + */

132 +export function getValueForAttribute(node, name, expected) {

133 + if (__DEV__) {

134 if (!isAttributeNameSafe(name)) {

135 return;

136 }

207 - if (value == null) {

208 - node.removeAttribute(name);

209 - } else {

210 - node.setAttribute(name, '' + value);

137 + if (!node.hasAttribute(name)) {

138 + return expected === undefined ? undefined : null;

139 + }

140 + var value = node.getAttribute(name);

141 + if (value === '' + expected) {

142 + return expected;

143 }

144 + return value;

145 + }

146 +}

147

213 - if (__DEV__) {

214 - var payload = {};

215 - payload[name] = value;

148 +/**

149 + * Sets the value for a property on a node.

150 + *

151 + * @param {DOMElement} node

152 + * @param {string} name

153 + * @param {*} value

154 + */

155 +export function setValueForProperty(node, name, value) {

156 + var propertyInfo = DOMProperty.getPropertyInfo(name);

157 +

158 + if (propertyInfo && DOMProperty.shouldSetAttribute(name, value)) {

159 + var mutationMethod = propertyInfo.mutationMethod;

160 + if (mutationMethod) {

161 + mutationMethod(node, value);

162 + } else if (shouldIgnoreValue(propertyInfo, value)) {

163 + deleteValueForProperty(node, name);

164 + return;

165 + } else if (propertyInfo.mustUseProperty) {

166 + // Contrary to `setAttribute`, object properties are properly

167 + // `toString`ed by IE8/9.

168 + node[propertyInfo.propertyName] = value;

169 + } else {

170 + var attributeName = propertyInfo.attributeName;

171 + var namespace = propertyInfo.attributeNamespace;

172 + // `setAttribute` with objects becomes only `[object]` in IE8/9,

173 + // ('' + value) makes it output the correct toString()-value.

174 + if (namespace) {

175 + node.setAttributeNS(namespace, attributeName, '' + value);

176 + } else if (

177 + propertyInfo.hasBooleanValue ||

178 + (propertyInfo.hasOverloadedBooleanValue && value === true)

179 + ) {

180 + node.setAttribute(attributeName, '');

181 + } else {

182 + node.setAttribute(attributeName, '' + value);

183 + }

184 }

217 - },

185 + } else {

186 + setValueForAttribute(

187 + node,

188 + name,

189 + DOMProperty.shouldSetAttribute(name, value) ? value : null,

190 + );

191 + return;

192 + }

193 +

194 + if (__DEV__) {

195 + var payload = {};

196 + payload[name] = value;

197 + }

198 +}

199

219 - /**

220 - * Deletes an attributes from a node.

221 - *

222 - * @param {DOMElement} node

223 - * @param {string} name

224 - */

225 - deleteValueForAttribute: function(node, name) {

200 +export function setValueForAttribute(node, name, value) {

201 + if (!isAttributeNameSafe(name)) {

202 + return;

203 + }

204 + if (value == null) {

205 node.removeAttribute(name);

227 - },

206 + } else {

207 + node.setAttribute(name, '' + value);

208 + }

209

229 - /**

230 - * Deletes the value for a property on a node.

231 - *

232 - * @param {DOMElement} node

233 - * @param {string} name

234 - */

235 - deleteValueForProperty: function(node, name) {

236 - var propertyInfo = DOMProperty.getPropertyInfo(name);

237 - if (propertyInfo) {

238 - var mutationMethod = propertyInfo.mutationMethod;

239 - if (mutationMethod) {

240 - mutationMethod(node, undefined);

241 - } else if (propertyInfo.mustUseProperty) {

242 - var propName = propertyInfo.propertyName;

243 - if (propertyInfo.hasBooleanValue) {

244 - node[propName] = false;

245 - } else {

246 - node[propName] = '';

247 - }

210 + if (__DEV__) {

211 + var payload = {};

212 + payload[name] = value;

213 + }

214 +}

215 +

216 +/**

217 + * Deletes an attributes from a node.

218 + *

219 + * @param {DOMElement} node

220 + * @param {string} name

221 + */

222 +export function deleteValueForAttribute(node, name) {

223 + node.removeAttribute(name);

224 +}

225 +

226 +/**

227 + * Deletes the value for a property on a node.

228 + *

229 + * @param {DOMElement} node

230 + * @param {string} name

231 + */

232 +export function deleteValueForProperty(node, name) {

233 + var propertyInfo = DOMProperty.getPropertyInfo(name);

234 + if (propertyInfo) {

235 + var mutationMethod = propertyInfo.mutationMethod;

236 + if (mutationMethod) {

237 + mutationMethod(node, undefined);

238 + } else if (propertyInfo.mustUseProperty) {

239 + var propName = propertyInfo.propertyName;

240 + if (propertyInfo.hasBooleanValue) {

241 + node[propName] = false;

242 } else {

249 - node.removeAttribute(propertyInfo.attributeName);

243 + node[propName] = '';

244 }

245 } else {

252 - node.removeAttribute(name);

246 + node.removeAttribute(propertyInfo.attributeName);

247 }

254 - },

255 -};

256 -

257 -module.exports = DOMPropertyOperations;

248 + } else {

249 + node.removeAttribute(name);

250 + }

251 +}

packages/react-dom/src/client/ReactDOM.js

+40 -37

@@ -11,38 +11,48 @@

12 import type {ReactNodeList} from 'shared/ReactTypes';

14 -require('../shared/checkReact');

14 +import '../shared/checkReact';

15 +import '../shared/ReactDOMInjection';

16 +import './ReactDOMClientInjection';

16 -var ReactFiberReconciler = require('react-reconciler');

18 +import ReactFiberReconciler from 'react-reconciler';

19 // TODO: direct imports like some-package/src/* are bad. Fix me.

18 -var ReactPortal = require('react-reconciler/src/ReactPortal');

20 +import * as ReactPortal from 'react-reconciler/src/ReactPortal';

21 // TODO: direct imports like some-package/src/* are bad. Fix me.

20 -var {injectInternals} = require('react-reconciler/src/ReactFiberDevToolsHook');

21 -var ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment');

22 -var ReactGenericBatching = require('events/ReactGenericBatching');

23 -var ReactControlledComponent = require('events/ReactControlledComponent');

24 -var ReactInstanceMap = require('shared/ReactInstanceMap');

25 -var ReactFeatureFlags = require('shared/ReactFeatureFlags');

26 -var ReactVersion = require('shared/ReactVersion');

27 -var ReactDOMFrameScheduling = require('shared/ReactDOMFrameScheduling');

28 -var {ReactCurrentOwner} = require('shared/ReactGlobalSharedState');

29 -var getComponentName = require('shared/getComponentName');

30 -var invariant = require('fbjs/lib/invariant');

31 -

32 -var ReactDOMComponentTree = require('./ReactDOMComponentTree');

33 -var ReactDOMFiberComponent = require('./ReactDOMFiberComponent');

34 -var ReactInputSelection = require('./ReactInputSelection');

35 -var ReactBrowserEventEmitter = require('../events/ReactBrowserEventEmitter');

36 -var DOMNamespaces = require('../shared/DOMNamespaces');

37 -var {

22 +import {injectInternals} from 'react-reconciler/src/ReactFiberDevToolsHook';

23 +import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';

24 +import ReactGenericBatching from 'events/ReactGenericBatching';

25 +import ReactControlledComponent from 'events/ReactControlledComponent';

26 +import EventPluginHub from 'events/EventPluginHub';

27 +import EventPluginRegistry from 'events/EventPluginRegistry';

28 +import EventPropagators from 'events/EventPropagators';

29 +import * as ReactInstanceMap from 'shared/ReactInstanceMap';

30 +import ReactFeatureFlags from 'shared/ReactFeatureFlags';

31 +import ReactVersion from 'shared/ReactVersion';

32 +import * as ReactDOMFrameScheduling from 'shared/ReactDOMFrameScheduling';

33 +import {ReactCurrentOwner} from 'shared/ReactGlobalSharedState';

34 +import getComponentName from 'shared/getComponentName';

35 +import invariant from 'fbjs/lib/invariant';

36 +import lowPriorityWarning from 'shared/lowPriorityWarning';

37 +import warning from 'fbjs/lib/warning';

38 +

39 +import ReactDOMComponentTree from './ReactDOMComponentTree';

40 +import * as ReactDOMFiberComponent from './ReactDOMFiberComponent';

41 +import * as ReactInputSelection from './ReactInputSelection';

42 +import validateDOMNesting from './validateDOMNesting';

43 +import ReactBrowserEventEmitter from '../events/ReactBrowserEventEmitter';

44 +import ReactDOMEventListener from '../events/ReactDOMEventListener';

45 +import {getChildNamespace} from '../shared/DOMNamespaces';

46 +import {

47 ELEMENT_NODE,

48 TEXT_NODE,

49 COMMENT_NODE,

50 DOCUMENT_NODE,

51 DOCUMENT_FRAGMENT_NODE,

43 -} = require('../shared/HTMLNodeType');

44 -var {ROOT_ATTRIBUTE_NAME} = require('../shared/DOMProperty');

45 -var {getChildNamespace} = DOMNamespaces;

52 +} from '../shared/HTMLNodeType';

53 +import DOMProperty from '../shared/DOMProperty';

54 +

55 +var {ROOT_ATTRIBUTE_NAME} = DOMProperty;

56 var {

57 createElement,

58 createTextNode,

@@ -57,15 +67,10 @@ var {

67 warnForInsertedHydratedElement,

68 warnForInsertedHydratedText,

69 } = ReactDOMFiberComponent;

70 +var {updatedAncestorInfo} = validateDOMNesting;

71 var {precacheFiberNode, updateFiberProps} = ReactDOMComponentTree;

73 if (__DEV__) {

63 - var lowPriorityWarning = require('shared/lowPriorityWarning');

64 - var warning = require('fbjs/lib/warning');

65 -

66 - var validateDOMNesting = require('./validateDOMNesting');

67 - var {updatedAncestorInfo} = validateDOMNesting;

68 -

74 var SUPPRESS_HYDRATION_WARNING = 'suppressHydrationWarning';

75 if (

76 typeof Map !== 'function' ||

@@ -84,8 +89,6 @@ if (__DEV__) {

89 }

90 }

87 -require('./ReactDOMClientInjection');

88 -require('../shared/ReactDOMInjection');

92 ReactControlledComponent.injection.injectFiberControlledHostComponent(

93 ReactDOMFiberComponent,

94 );

@@ -941,13 +944,13 @@ var ReactDOM = {

944

945 __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: {

946 // For TapEventPlugin which is popular in open source

944 - EventPluginHub: require('events/EventPluginHub'),

947 + EventPluginHub,

948 // Used by test-utils

946 - EventPluginRegistry: require('events/EventPluginRegistry'),

947 - EventPropagators: require('events/EventPropagators'),

949 + EventPluginRegistry,

950 + EventPropagators,

951 ReactControlledComponent,

952 ReactDOMComponentTree,

950 - ReactDOMEventListener: require('../events/ReactDOMEventListener'),

953 + ReactDOMEventListener,

954 },

955 };

956

@@ -990,4 +993,4 @@ if (__DEV__) {

993 }

994 }

995

993 -module.exports = ReactDOM;

996 +export default ReactDOM;

packages/react-dom/src/client/ReactDOMClientInjection.js

+11 -11

@@ -7,18 +7,18 @@

8 'use strict';

10 -var EventPluginHub = require('events/EventPluginHub');

11 -var EventPluginUtils = require('events/EventPluginUtils');

10 +import EventPluginHub from 'events/EventPluginHub';

11 +import EventPluginUtils from 'events/EventPluginUtils';

13 -var ReactDOMComponentTree = require('./ReactDOMComponentTree');

14 -var BeforeInputEventPlugin = require('../events/BeforeInputEventPlugin');

15 -var ChangeEventPlugin = require('../events/ChangeEventPlugin');

16 -var DOMEventPluginOrder = require('../events/DOMEventPluginOrder');

17 -var EnterLeaveEventPlugin = require('../events/EnterLeaveEventPlugin');

18 -var ReactBrowserEventEmitter = require('../events/ReactBrowserEventEmitter');

19 -var ReactDOMEventListener = require('../events/ReactDOMEventListener');

20 -var SelectEventPlugin = require('../events/SelectEventPlugin');

21 -var SimpleEventPlugin = require('../events/SimpleEventPlugin');

13 +import ReactDOMComponentTree from './ReactDOMComponentTree';

14 +import BeforeInputEventPlugin from '../events/BeforeInputEventPlugin';

15 +import ChangeEventPlugin from '../events/ChangeEventPlugin';

16 +import DOMEventPluginOrder from '../events/DOMEventPluginOrder';

17 +import EnterLeaveEventPlugin from '../events/EnterLeaveEventPlugin';

18 +import ReactBrowserEventEmitter from '../events/ReactBrowserEventEmitter';

19 +import ReactDOMEventListener from '../events/ReactDOMEventListener';

20 +import SelectEventPlugin from '../events/SelectEventPlugin';

21 +import SimpleEventPlugin from '../events/SimpleEventPlugin';

23 ReactDOMEventListener.setHandleTopLevel(

24 ReactBrowserEventEmitter.handleTopLevel,

packages/react-dom/src/client/ReactDOMComponentTree.js

+3 -3

@@ -7,8 +7,8 @@

8 'use strict';

10 -var {HostComponent, HostText} = require('shared/ReactTypeOfWork');

11 -var invariant = require('fbjs/lib/invariant');

10 +import {HostComponent, HostText} from 'shared/ReactTypeOfWork';

11 +import invariant from 'fbjs/lib/invariant';

13 var randomKey = Math.random().toString(36).slice(2);

14 var internalInstanceKey = '__reactInternalInstance$' + randomKey;

@@ -102,4 +102,4 @@ var ReactDOMComponentTree = {

102 updateFiberProps,

103 };

104

105 -module.exports = ReactDOMComponentTree;

105 +export default ReactDOMComponentTree;

packages/react-dom/src/client/ReactDOMFB.js new

+39

@@ -0,0 +1,39 @@

1 +/**

3 + *

4 + * This source code is licensed under the MIT license found in the

5 + * LICENSE file in the root directory of this source tree.

6 + *

7 + * @flow

8 + */

9 +

10 +'use strict';

11 +

12 +import * as ReactFiberTreeReflection from 'shared/ReactFiberTreeReflection';

13 +import * as ReactInstanceMap from 'shared/ReactInstanceMap';

14 +// TODO: direct imports like some-package/src/* are bad. Fix me.

15 +import * as ReactFiberErrorLogger

16 + from 'react-reconciler/src/ReactFiberErrorLogger';

17 +import ReactErrorUtils from 'shared/ReactErrorUtils';

18 +

19 +import ReactDOM from './ReactDOM';

20 +import ReactBrowserEventEmitter from '../events/ReactBrowserEventEmitter';

21 +import ReactDOMComponentTree from './ReactDOMComponentTree';

22 +import TapEventPlugin from '../events/TapEventPlugin';

23 +

24 +Object.assign(

25 + (ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: any),

26 + {

27 + // These are real internal dependencies that are trickier to remove:

28 + ReactBrowserEventEmitter,

29 + ReactErrorUtils,

30 + ReactFiberErrorLogger,

31 + ReactFiberTreeReflection,

32 + ReactDOMComponentTree,

33 + ReactInstanceMap,

34 + // Used by www msite:

35 + TapEventPlugin,

36 + },

37 +);

38 +

39 +export default ReactDOM;

packages/react-dom/src/client/ReactDOMFiberComponent.js

+838 -864

@@ -10,47 +10,41 @@

10 'use strict';

12 // TODO: direct imports like some-package/src/* are bad. Fix me.

13 -var {

14 - getCurrentFiberOwnerName,

15 -} = require('react-reconciler/src/ReactDebugCurrentFiber');

16 -var EventPluginRegistry = require('events/EventPluginRegistry');

17 -var emptyFunction = require('fbjs/lib/emptyFunction');

13 +import ReactDebugCurrentFiber

14 + from 'react-reconciler/src/ReactDebugCurrentFiber';

15 +import EventPluginRegistry from 'events/EventPluginRegistry';

16 +import emptyFunction from 'fbjs/lib/emptyFunction';

17 +import warning from 'fbjs/lib/warning';

19 -var DOMPropertyOperations = require('./DOMPropertyOperations');

20 -var ReactDOMFiberInput = require('./ReactDOMFiberInput');

21 -var ReactDOMFiberOption = require('./ReactDOMFiberOption');

22 -var ReactDOMFiberSelect = require('./ReactDOMFiberSelect');

23 -var ReactDOMFiberTextarea = require('./ReactDOMFiberTextarea');

24 -var inputValueTracking = require('./inputValueTracking');

25 -var setInnerHTML = require('./setInnerHTML');

26 -var setTextContent = require('./setTextContent');

27 -var ReactBrowserEventEmitter = require('../events/ReactBrowserEventEmitter');

28 -var CSSPropertyOperations = require('../shared/CSSPropertyOperations');

29 -var DOMNamespaces = require('../shared/DOMNamespaces');

30 -var DOMProperty = require('../shared/DOMProperty');

31 -var assertValidProps = require('../shared/assertValidProps');

32 -var {DOCUMENT_NODE, DOCUMENT_FRAGMENT_NODE} = require('../shared/HTMLNodeType');

33 -var isCustomComponent = require('../shared/isCustomComponent');

34 -

35 -if (__DEV__) {

36 - // TODO: direct imports like some-package/src/* are bad. Fix me.

37 - var {

38 - getCurrentFiberStackAddendum,

39 - } = require('react-reconciler/src/ReactDebugCurrentFiber');

40 - var warning = require('fbjs/lib/warning');

41 -

42 - var ReactDOMInvalidARIAHook = require('../shared/ReactDOMInvalidARIAHook');

43 - var ReactDOMNullInputValuePropHook = require('../shared/ReactDOMNullInputValuePropHook');

44 - var ReactDOMUnknownPropertyHook = require('../shared/ReactDOMUnknownPropertyHook');

45 - var {validateProperties: validateARIAProperties} = ReactDOMInvalidARIAHook;

46 - var {

47 - validateProperties: validateInputProperties,

48 - } = ReactDOMNullInputValuePropHook;

49 - var {

50 - validateProperties: validateUnknownProperties,

51 - } = ReactDOMUnknownPropertyHook;

52 -}

19 +import * as DOMPropertyOperations from './DOMPropertyOperations';

20 +import * as ReactDOMFiberInput from './ReactDOMFiberInput';

21 +import * as ReactDOMFiberOption from './ReactDOMFiberOption';

22 +import * as ReactDOMFiberSelect from './ReactDOMFiberSelect';

23 +import * as ReactDOMFiberTextarea from './ReactDOMFiberTextarea';

24 +import * as inputValueTracking from './inputValueTracking';

25 +import setInnerHTML from './setInnerHTML';

26 +import setTextContent from './setTextContent';

27 +import ReactBrowserEventEmitter from '../events/ReactBrowserEventEmitter';

28 +import * as CSSPropertyOperations from '../shared/CSSPropertyOperations';

29 +import {Namespaces, getIntrinsicNamespace} from '../shared/DOMNamespaces';

30 +import DOMProperty from '../shared/DOMProperty';

31 +import assertValidProps from '../shared/assertValidProps';

32 +import {DOCUMENT_NODE, DOCUMENT_FRAGMENT_NODE} from '../shared/HTMLNodeType';

33 +import isCustomComponent from '../shared/isCustomComponent';

34 +import {

35 + validateProperties as validateARIAProperties,

36 +} from '../shared/ReactDOMInvalidARIAHook';

37 +import {

38 + validateProperties as validateInputProperties,

39 +} from '../shared/ReactDOMNullInputValuePropHook';

40 +import {

41 + validateProperties as validateUnknownProperties,

42 +} from '../shared/ReactDOMUnknownPropertyHook';

44 +var {

45 + getCurrentFiberOwnerName,

46 + getCurrentFiberStackAddendum,

47 +} = ReactDebugCurrentFiber;

48 var didWarnInvalidHydration = false;

49 var didWarnShadyDOM = false;

@@ -65,7 +59,7 @@ var CHILDREN = 'children';

59 var STYLE = 'style';

60 var HTML = '__html';

68 -var {Namespaces: {html: HTML_NAMESPACE}, getIntrinsicNamespace} = DOMNamespaces;

62 +var {html: HTML_NAMESPACE} = Namespaces;

64 var getStack = emptyFunction.thatReturns('');

@@ -368,915 +362,895 @@ function updateDOMProperties(

362 }

363 }

364

371 -var ReactDOMFiberComponent = {

372 - createElement(

373 - type: *,

374 - props: Object,

375 - rootContainerElement: Element | Document,

376 - parentNamespace: string,

377 - ): Element {

378 - // We create tags in the namespace of their parent container, except HTML

379 - // tags get no namespace.

380 - var ownerDocument: Document = getOwnerDocumentFromRootContainer(

381 - rootContainerElement,

382 - );

383 - var domElement: Element;

384 - var namespaceURI = parentNamespace;

385 - if (namespaceURI === HTML_NAMESPACE) {

386 - namespaceURI = getIntrinsicNamespace(type);

365 +export function createElement(

366 + type: *,

367 + props: Object,

368 + rootContainerElement: Element | Document,

369 + parentNamespace: string,

370 +): Element {

371 + // We create tags in the namespace of their parent container, except HTML

372 + // tags get no namespace.

373 + var ownerDocument: Document = getOwnerDocumentFromRootContainer(

374 + rootContainerElement,

375 + );

376 + var domElement: Element;

377 + var namespaceURI = parentNamespace;

378 + if (namespaceURI === HTML_NAMESPACE) {

379 + namespaceURI = getIntrinsicNamespace(type);

380 + }

381 + if (namespaceURI === HTML_NAMESPACE) {

382 + if (__DEV__) {

383 + var isCustomComponentTag = isCustomComponent(type, props);

384 + // Should this check be gated by parent namespace? Not sure we want to

385 + // allow <SVG> or <mATH>.

386 + warning(

387 + isCustomComponentTag || type === type.toLowerCase(),

388 + '<%s /> is using uppercase HTML. Always use lowercase HTML tags ' +

389 + 'in React.',

390 + type,

391 + );

392 + }

393 +

394 + if (type === 'script') {

395 + // Create the script via .innerHTML so its "parser-inserted" flag is

396 + // set to true and it does not execute

397 + var div = ownerDocument.createElement('div');

398 + div.innerHTML = '<script><' + '/script>'; // eslint-disable-line

399 + // This is guaranteed to yield a script element.

400 + var firstChild = ((div.firstChild: any): HTMLScriptElement);

401 + domElement = div.removeChild(firstChild);

402 + } else if (typeof props.is === 'string') {

403 + // $FlowIssue `createElement` should be updated for Web Components

404 + domElement = ownerDocument.createElement(type, {is: props.is});

405 + } else {

406 + // Separate else branch instead of using `props.is || undefined` above because of a Firefox bug.

407 + // See discussion in https://github.com/facebook/react/pull/6896

408 + // and discussion in https://bugzilla.mozilla.org/show_bug.cgi?id=1276240

409 + domElement = ownerDocument.createElement(type);

410 }

411 + } else {

412 + domElement = ownerDocument.createElementNS(namespaceURI, type);

413 + }

414 +

415 + if (__DEV__) {

416 if (namespaceURI === HTML_NAMESPACE) {

389 - if (__DEV__) {

390 - var isCustomComponentTag = isCustomComponent(type, props);

391 - // Should this check be gated by parent namespace? Not sure we want to

392 - // allow <SVG> or <mATH>.

417 + if (

418 + !isCustomComponentTag &&

419 + Object.prototype.toString.call(domElement) ===

420 + '[object HTMLUnknownElement]' &&

421 + !Object.prototype.hasOwnProperty.call(warnedUnknownTags, type)

422 + ) {

423 + warnedUnknownTags[type] = true;

424 warning(

394 - isCustomComponentTag || type === type.toLowerCase(),

395 - '<%s /> is using uppercase HTML. Always use lowercase HTML tags ' +

396 - 'in React.',

425 + false,

426 + 'The tag <%s> is unrecognized in this browser. ' +

427 + 'If you meant to render a React component, start its name with ' +

428 + 'an uppercase letter.',

429 type,

430 );

431 }

432 + }

433 + }

434

401 - if (type === 'script') {

402 - // Create the script via .innerHTML so its "parser-inserted" flag is

403 - // set to true and it does not execute

404 - var div = ownerDocument.createElement('div');

405 - div.innerHTML = '<script><' + '/script>'; // eslint-disable-line

406 - // This is guaranteed to yield a script element.

407 - var firstChild = ((div.firstChild: any): HTMLScriptElement);

408 - domElement = div.removeChild(firstChild);

409 - } else if (typeof props.is === 'string') {

410 - // $FlowIssue `createElement` should be updated for Web Components

411 - domElement = ownerDocument.createElement(type, {is: props.is});

412 - } else {

413 - // Separate else branch instead of using `props.is || undefined` above because of a Firefox bug.

414 - // See discussion in https://github.com/facebook/react/pull/6896

415 - // and discussion in https://bugzilla.mozilla.org/show_bug.cgi?id=1276240

416 - domElement = ownerDocument.createElement(type);

417 - }

418 - } else {

419 - domElement = ownerDocument.createElementNS(namespaceURI, type);

435 + return domElement;

436 +}

437 +

438 +export function createTextNode(

439 + text: string,

440 + rootContainerElement: Element | Document,

441 +): Text {

442 + return getOwnerDocumentFromRootContainer(rootContainerElement).createTextNode(

443 + text,

444 + );

445 +}

446 +

447 +export function setInitialProperties(

448 + domElement: Element,

449 + tag: string,

450 + rawProps: Object,

451 + rootContainerElement: Element | Document,

452 +): void {

453 + var isCustomComponentTag = isCustomComponent(tag, rawProps);

454 + if (__DEV__) {

455 + validatePropertiesInDevelopment(tag, rawProps);

456 + if (isCustomComponentTag && !didWarnShadyDOM && domElement.shadyRoot) {

457 + warning(

458 + false,

459 + '%s is using shady DOM. Using shady DOM with React can ' +

460 + 'cause things to break subtly.',

461 + getCurrentFiberOwnerName() || 'A component',

462 + );

463 + didWarnShadyDOM = true;

464 }

465 + }

466

422 - if (__DEV__) {

423 - if (namespaceURI === HTML_NAMESPACE) {

424 - if (

425 - !isCustomComponentTag &&

426 - Object.prototype.toString.call(domElement) ===

427 - '[object HTMLUnknownElement]' &&

428 - !Object.prototype.hasOwnProperty.call(warnedUnknownTags, type)

429 - ) {

430 - warnedUnknownTags[type] = true;

431 - warning(

432 - false,

433 - 'The tag <%s> is unrecognized in this browser. ' +

434 - 'If you meant to render a React component, start its name with ' +

435 - 'an uppercase letter.',

436 - type,

467 + // TODO: Make sure that we check isMounted before firing any of these events.

468 + var props: Object;

469 + switch (tag) {

470 + case 'iframe':

471 + case 'object':

472 + ReactBrowserEventEmitter.trapBubbledEvent('topLoad', 'load', domElement);

473 + props = rawProps;

474 + break;

475 + case 'video':

476 + case 'audio':

477 + // Create listener for each media event

478 + for (var event in mediaEvents) {

479 + if (mediaEvents.hasOwnProperty(event)) {

480 + ReactBrowserEventEmitter.trapBubbledEvent(

481 + event,

482 + mediaEvents[event],

483 + domElement,

484 );

485 }

486 }

440 - }

487 + props = rawProps;

488 + break;

489 + case 'source':

490 + ReactBrowserEventEmitter.trapBubbledEvent(

491 + 'topError',

492 + 'error',

493 + domElement,

494 + );

495 + props = rawProps;

496 + break;

497 + case 'img':

498 + case 'image':

499 + ReactBrowserEventEmitter.trapBubbledEvent(

500 + 'topError',

501 + 'error',

502 + domElement,

503 + );

504 + ReactBrowserEventEmitter.trapBubbledEvent('topLoad', 'load', domElement);

505 + props = rawProps;

506 + break;

507 + case 'form':

508 + ReactBrowserEventEmitter.trapBubbledEvent(

509 + 'topReset',

510 + 'reset',

511 + domElement,

512 + );

513 + ReactBrowserEventEmitter.trapBubbledEvent(

514 + 'topSubmit',

515 + 'submit',

516 + domElement,

517 + );

518 + props = rawProps;

519 + break;

520 + case 'details':

521 + ReactBrowserEventEmitter.trapBubbledEvent(

522 + 'topToggle',

523 + 'toggle',

524 + domElement,

525 + );

526 + props = rawProps;

527 + break;

528 + case 'input':

529 + ReactDOMFiberInput.initWrapperState(domElement, rawProps);

530 + props = ReactDOMFiberInput.getHostProps(domElement, rawProps);

531 + ReactBrowserEventEmitter.trapBubbledEvent(

532 + 'topInvalid',

533 + 'invalid',

534 + domElement,

535 + );

536 + // For controlled components we always need to ensure we're listening

537 + // to onChange. Even if there is no listener.

538 + ensureListeningTo(rootContainerElement, 'onChange');

539 + break;

540 + case 'option':

541 + ReactDOMFiberOption.validateProps(domElement, rawProps);

542 + props = ReactDOMFiberOption.getHostProps(domElement, rawProps);

543 + break;

544 + case 'select':

545 + ReactDOMFiberSelect.initWrapperState(domElement, rawProps);

546 + props = ReactDOMFiberSelect.getHostProps(domElement, rawProps);

547 + ReactBrowserEventEmitter.trapBubbledEvent(

548 + 'topInvalid',

549 + 'invalid',

550 + domElement,

551 + );

552 + // For controlled components we always need to ensure we're listening

553 + // to onChange. Even if there is no listener.

554 + ensureListeningTo(rootContainerElement, 'onChange');

555 + break;

556 + case 'textarea':

557 + ReactDOMFiberTextarea.initWrapperState(domElement, rawProps);

558 + props = ReactDOMFiberTextarea.getHostProps(domElement, rawProps);

559 + ReactBrowserEventEmitter.trapBubbledEvent(

560 + 'topInvalid',

561 + 'invalid',

562 + domElement,

563 + );

564 + // For controlled components we always need to ensure we're listening

565 + // to onChange. Even if there is no listener.

566 + ensureListeningTo(rootContainerElement, 'onChange');

567 + break;

568 + default:

569 + props = rawProps;

570 + }

571

442 - return domElement;

443 - },

572 + assertValidProps(tag, props, getStack);

573

445 - createTextNode(text: string, rootContainerElement: Element | Document): Text {

446 - return getOwnerDocumentFromRootContainer(

447 - rootContainerElement,

448 - ).createTextNode(text);

449 - },

574 + setInitialDOMProperties(

575 + tag,

576 + domElement,

577 + rootContainerElement,

578 + props,

579 + isCustomComponentTag,

580 + );

581

451 - setInitialProperties(

452 - domElement: Element,

453 - tag: string,

454 - rawProps: Object,

455 - rootContainerElement: Element | Document,

456 - ): void {

457 - var isCustomComponentTag = isCustomComponent(tag, rawProps);

458 - if (__DEV__) {

459 - validatePropertiesInDevelopment(tag, rawProps);

460 - if (isCustomComponentTag && !didWarnShadyDOM && domElement.shadyRoot) {

461 - warning(

462 - false,

463 - '%s is using shady DOM. Using shady DOM with React can ' +

464 - 'cause things to break subtly.',

465 - getCurrentFiberOwnerName() || 'A component',

466 - );

467 - didWarnShadyDOM = true;

582 + switch (tag) {

583 + case 'input':

584 + // TODO: Make sure we check if this is still unmounted or do any clean

585 + // up necessary since we never stop tracking anymore.

586 + inputValueTracking.track((domElement: any));

587 + ReactDOMFiberInput.postMountWrapper(domElement, rawProps);

588 + break;

589 + case 'textarea':

590 + // TODO: Make sure we check if this is still unmounted or do any clean

591 + // up necessary since we never stop tracking anymore.

592 + inputValueTracking.track((domElement: any));

593 + ReactDOMFiberTextarea.postMountWrapper(domElement, rawProps);

594 + break;

595 + case 'option':

596 + ReactDOMFiberOption.postMountWrapper(domElement, rawProps);

597 + break;

598 + case 'select':

599 + ReactDOMFiberSelect.postMountWrapper(domElement, rawProps);

600 + break;

601 + default:

602 + if (typeof props.onClick === 'function') {

603 + // TODO: This cast may not be sound for SVG, MathML or custom elements.

604 + trapClickOnNonInteractiveElement(((domElement: any): HTMLElement));

605 }

469 - }

606 + break;

607 + }

608 +}

609

471 - // TODO: Make sure that we check isMounted before firing any of these events.

472 - var props: Object;

473 - switch (tag) {

474 - case 'iframe':

475 - case 'object':

476 - ReactBrowserEventEmitter.trapBubbledEvent(

477 - 'topLoad',

478 - 'load',

479 - domElement,

480 - );

481 - props = rawProps;

482 - break;

483 - case 'video':

484 - case 'audio':

485 - // Create listener for each media event

486 - for (var event in mediaEvents) {

487 - if (mediaEvents.hasOwnProperty(event)) {

488 - ReactBrowserEventEmitter.trapBubbledEvent(

489 - event,

490 - mediaEvents[event],

491 - domElement,

492 - );

493 - }

494 - }

495 - props = rawProps;

496 - break;

497 - case 'source':

498 - ReactBrowserEventEmitter.trapBubbledEvent(

499 - 'topError',

500 - 'error',

501 - domElement,

502 - );

503 - props = rawProps;

504 - break;

505 - case 'img':

506 - case 'image':

507 - ReactBrowserEventEmitter.trapBubbledEvent(

508 - 'topError',

509 - 'error',

510 - domElement,

511 - );

512 - ReactBrowserEventEmitter.trapBubbledEvent(

513 - 'topLoad',

514 - 'load',

515 - domElement,

516 - );

517 - props = rawProps;

518 - break;

519 - case 'form':

520 - ReactBrowserEventEmitter.trapBubbledEvent(

521 - 'topReset',

522 - 'reset',

523 - domElement,

524 - );

525 - ReactBrowserEventEmitter.trapBubbledEvent(

526 - 'topSubmit',

527 - 'submit',

528 - domElement,

529 - );

530 - props = rawProps;

531 - break;

532 - case 'details':

533 - ReactBrowserEventEmitter.trapBubbledEvent(

534 - 'topToggle',

535 - 'toggle',

536 - domElement,

537 - );

538 - props = rawProps;

539 - break;

540 - case 'input':

541 - ReactDOMFiberInput.initWrapperState(domElement, rawProps);

542 - props = ReactDOMFiberInput.getHostProps(domElement, rawProps);

543 - ReactBrowserEventEmitter.trapBubbledEvent(

544 - 'topInvalid',

545 - 'invalid',

546 - domElement,

547 - );

548 - // For controlled components we always need to ensure we're listening

549 - // to onChange. Even if there is no listener.

550 - ensureListeningTo(rootContainerElement, 'onChange');

551 - break;

552 - case 'option':

553 - ReactDOMFiberOption.validateProps(domElement, rawProps);

554 - props = ReactDOMFiberOption.getHostProps(domElement, rawProps);

555 - break;

556 - case 'select':

557 - ReactDOMFiberSelect.initWrapperState(domElement, rawProps);

558 - props = ReactDOMFiberSelect.getHostProps(domElement, rawProps);

559 - ReactBrowserEventEmitter.trapBubbledEvent(

560 - 'topInvalid',

561 - 'invalid',

562 - domElement,

563 - );

564 - // For controlled components we always need to ensure we're listening

565 - // to onChange. Even if there is no listener.

566 - ensureListeningTo(rootContainerElement, 'onChange');

567 - break;

568 - case 'textarea':

569 - ReactDOMFiberTextarea.initWrapperState(domElement, rawProps);

570 - props = ReactDOMFiberTextarea.getHostProps(domElement, rawProps);

571 - ReactBrowserEventEmitter.trapBubbledEvent(

572 - 'topInvalid',

573 - 'invalid',

574 - domElement,

575 - );

576 - // For controlled components we always need to ensure we're listening

577 - // to onChange. Even if there is no listener.

578 - ensureListeningTo(rootContainerElement, 'onChange');

579 - break;

580 - default:

581 - props = rawProps;

582 - }

610 +// Calculate the diff between the two objects.

611 +export function diffProperties(

612 + domElement: Element,

613 + tag: string,

614 + lastRawProps: Object,

615 + nextRawProps: Object,

616 + rootContainerElement: Element | Document,

617 +): null | Array<mixed> {

618 + if (__DEV__) {

619 + validatePropertiesInDevelopment(tag, nextRawProps);

620 + }

621

584 - assertValidProps(tag, props, getStack);

622 + var updatePayload: null | Array<any> = null;

623

586 - setInitialDOMProperties(

587 - tag,

588 - domElement,

589 - rootContainerElement,

590 - props,

591 - isCustomComponentTag,

592 - );

624 + var lastProps: Object;

625 + var nextProps: Object;

626 + switch (tag) {

627 + case 'input':

628 + lastProps = ReactDOMFiberInput.getHostProps(domElement, lastRawProps);

629 + nextProps = ReactDOMFiberInput.getHostProps(domElement, nextRawProps);

630 + updatePayload = [];

631 + break;

632 + case 'option':

633 + lastProps = ReactDOMFiberOption.getHostProps(domElement, lastRawProps);

634 + nextProps = ReactDOMFiberOption.getHostProps(domElement, nextRawProps);

635 + updatePayload = [];

636 + break;

637 + case 'select':

638 + lastProps = ReactDOMFiberSelect.getHostProps(domElement, lastRawProps);

639 + nextProps = ReactDOMFiberSelect.getHostProps(domElement, nextRawProps);

640 + updatePayload = [];

641 + break;

642 + case 'textarea':

643 + lastProps = ReactDOMFiberTextarea.getHostProps(domElement, lastRawProps);

644 + nextProps = ReactDOMFiberTextarea.getHostProps(domElement, nextRawProps);

645 + updatePayload = [];

646 + break;

647 + default:

648 + lastProps = lastRawProps;

649 + nextProps = nextRawProps;

650 + if (

651 + typeof lastProps.onClick !== 'function' &&

652 + typeof nextProps.onClick === 'function'

653 + ) {

654 + // TODO: This cast may not be sound for SVG, MathML or custom elements.

655 + trapClickOnNonInteractiveElement(((domElement: any): HTMLElement));

656 + }

657 + break;

658 + }

659

594 - switch (tag) {

595 - case 'input':

596 - // TODO: Make sure we check if this is still unmounted or do any clean

597 - // up necessary since we never stop tracking anymore.

598 - inputValueTracking.track((domElement: any));

599 - ReactDOMFiberInput.postMountWrapper(domElement, rawProps);

600 - break;

601 - case 'textarea':

602 - // TODO: Make sure we check if this is still unmounted or do any clean

603 - // up necessary since we never stop tracking anymore.

604 - inputValueTracking.track((domElement: any));

605 - ReactDOMFiberTextarea.postMountWrapper(domElement, rawProps);

606 - break;

607 - case 'option':

608 - ReactDOMFiberOption.postMountWrapper(domElement, rawProps);

609 - break;

610 - case 'select':

611 - ReactDOMFiberSelect.postMountWrapper(domElement, rawProps);

612 - break;

613 - default:

614 - if (typeof props.onClick === 'function') {

615 - // TODO: This cast may not be sound for SVG, MathML or custom elements.

616 - trapClickOnNonInteractiveElement(((domElement: any): HTMLElement));

617 - }

618 - break;

619 - }

620 - },

660 + assertValidProps(tag, nextProps, getStack);

661

622 - // Calculate the diff between the two objects.

623 - diffProperties(

624 - domElement: Element,

625 - tag: string,

626 - lastRawProps: Object,

627 - nextRawProps: Object,

628 - rootContainerElement: Element | Document,

629 - ): null | Array<mixed> {

630 - if (__DEV__) {

631 - validatePropertiesInDevelopment(tag, nextRawProps);

662 + var propKey;

663 + var styleName;

664 + var styleUpdates = null;

665 + for (propKey in lastProps) {

666 + if (

667 + nextProps.hasOwnProperty(propKey) ||

668 + !lastProps.hasOwnProperty(propKey) ||

669 + lastProps[propKey] == null

670 + ) {

671 + continue;

672 }

633 -

634 - var updatePayload: null | Array<any> = null;

635 -

636 - var lastProps: Object;

637 - var nextProps: Object;

638 - switch (tag) {

639 - case 'input':

640 - lastProps = ReactDOMFiberInput.getHostProps(domElement, lastRawProps);

641 - nextProps = ReactDOMFiberInput.getHostProps(domElement, nextRawProps);

642 - updatePayload = [];

643 - break;

644 - case 'option':

645 - lastProps = ReactDOMFiberOption.getHostProps(domElement, lastRawProps);

646 - nextProps = ReactDOMFiberOption.getHostProps(domElement, nextRawProps);

647 - updatePayload = [];

648 - break;

649 - case 'select':

650 - lastProps = ReactDOMFiberSelect.getHostProps(domElement, lastRawProps);

651 - nextProps = ReactDOMFiberSelect.getHostProps(domElement, nextRawProps);

652 - updatePayload = [];

653 - break;

654 - case 'textarea':

655 - lastProps = ReactDOMFiberTextarea.getHostProps(

656 - domElement,

657 - lastRawProps,

658 - );

659 - nextProps = ReactDOMFiberTextarea.getHostProps(

660 - domElement,

661 - nextRawProps,

662 - );

663 - updatePayload = [];

664 - break;

665 - default:

666 - lastProps = lastRawProps;

667 - nextProps = nextRawProps;

668 - if (

669 - typeof lastProps.onClick !== 'function' &&

670 - typeof nextProps.onClick === 'function'

671 - ) {

672 - // TODO: This cast may not be sound for SVG, MathML or custom elements.

673 - trapClickOnNonInteractiveElement(((domElement: any): HTMLElement));

673 + if (propKey === STYLE) {

674 + var lastStyle = lastProps[propKey];

675 + for (styleName in lastStyle) {

676 + if (lastStyle.hasOwnProperty(styleName)) {

677 + if (!styleUpdates) {

678 + styleUpdates = {};

679 + }

680 + styleUpdates[styleName] = '';

681 }

675 - break;

682 + }

683 + } else if (propKey === DANGEROUSLY_SET_INNER_HTML || propKey === CHILDREN) {

684 + // Noop. This is handled by the clear text mechanism.

685 + } else if (

686 + propKey === SUPPRESS_CONTENT_EDITABLE_WARNING ||

687 + propKey === SUPPRESS_HYDRATION_WARNING

688 + ) {

689 + // Noop

690 + } else if (propKey === AUTOFOCUS) {

691 + // Noop. It doesn't work on updates anyway.

692 + } else if (registrationNameModules.hasOwnProperty(propKey)) {

693 + // This is a special case. If any listener updates we need to ensure

694 + // that the "current" fiber pointer gets updated so we need a commit

695 + // to update this element.

696 + if (!updatePayload) {

697 + updatePayload = [];

698 + }

699 + } else {

700 + // For all other deleted properties we add it to the queue. We use

701 + // the whitelist in the commit phase instead.

702 + (updatePayload = updatePayload || []).push(propKey, null);

703 }

677 -

678 - assertValidProps(tag, nextProps, getStack);

679 -

680 - var propKey;

681 - var styleName;

682 - var styleUpdates = null;

683 - for (propKey in lastProps) {

684 - if (

685 - nextProps.hasOwnProperty(propKey) ||

686 - !lastProps.hasOwnProperty(propKey) ||

687 - lastProps[propKey] == null

688 - ) {

689 - continue;

704 + }

705 + for (propKey in nextProps) {

706 + var nextProp = nextProps[propKey];

707 + var lastProp = lastProps != null ? lastProps[propKey] : undefined;

708 + if (

709 + !nextProps.hasOwnProperty(propKey) ||

710 + nextProp === lastProp ||

711 + (nextProp == null && lastProp == null)

712 + ) {

713 + continue;

714 + }

715 + if (propKey === STYLE) {

716 + if (__DEV__) {

717 + if (nextProp) {

718 + // Freeze the next style object so that we can assume it won't be

719 + // mutated. We have already warned for this in the past.

720 + Object.freeze(nextProp);

721 + }

722 }

691 - if (propKey === STYLE) {

692 - var lastStyle = lastProps[propKey];

693 - for (styleName in lastStyle) {

694 - if (lastStyle.hasOwnProperty(styleName)) {

723 + if (lastProp) {

724 + // Unset styles on `lastProp` but not on `nextProp`.

725 + for (styleName in lastProp) {

726 + if (

727 + lastProp.hasOwnProperty(styleName) &&

728 + (!nextProp || !nextProp.hasOwnProperty(styleName))

729 + ) {

730 if (!styleUpdates) {

731 styleUpdates = {};

732 }

733 styleUpdates[styleName] = '';

734 }

735 }

701 - } else if (

702 - propKey === DANGEROUSLY_SET_INNER_HTML ||

703 - propKey === CHILDREN

704 - ) {

705 - // Noop. This is handled by the clear text mechanism.

706 - } else if (

707 - propKey === SUPPRESS_CONTENT_EDITABLE_WARNING ||

708 - propKey === SUPPRESS_HYDRATION_WARNING

709 - ) {

710 - // Noop

711 - } else if (propKey === AUTOFOCUS) {

712 - // Noop. It doesn't work on updates anyway.

713 - } else if (registrationNameModules.hasOwnProperty(propKey)) {

714 - // This is a special case. If any listener updates we need to ensure

715 - // that the "current" fiber pointer gets updated so we need a commit

716 - // to update this element.

717 - if (!updatePayload) {

718 - updatePayload = [];

719 - }

720 - } else {

721 - // For all other deleted properties we add it to the queue. We use

722 - // the whitelist in the commit phase instead.

723 - (updatePayload = updatePayload || []).push(propKey, null);

724 - }

725 - }

726 - for (propKey in nextProps) {

727 - var nextProp = nextProps[propKey];

728 - var lastProp = lastProps != null ? lastProps[propKey] : undefined;

729 - if (

730 - !nextProps.hasOwnProperty(propKey) ||

731 - nextProp === lastProp ||

732 - (nextProp == null && lastProp == null)

733 - ) {

734 - continue;

735 - }

736 - if (propKey === STYLE) {

737 - if (__DEV__) {

738 - if (nextProp) {

739 - // Freeze the next style object so that we can assume it won't be

740 - // mutated. We have already warned for this in the past.

741 - Object.freeze(nextProp);

742 - }

743 - }

744 - if (lastProp) {

745 - // Unset styles on `lastProp` but not on `nextProp`.

746 - for (styleName in lastProp) {

747 - if (

748 - lastProp.hasOwnProperty(styleName) &&

749 - (!nextProp || !nextProp.hasOwnProperty(styleName))

750 - ) {

751 - if (!styleUpdates) {

752 - styleUpdates = {};

753 - }

754 - styleUpdates[styleName] = '';

755 - }

756 - }

757 - // Update styles that changed since `lastProp`.

758 - for (styleName in nextProp) {

759 - if (

760 - nextProp.hasOwnProperty(styleName) &&

761 - lastProp[styleName] !== nextProp[styleName]

762 - ) {

763 - if (!styleUpdates) {

764 - styleUpdates = {};

765 - }

766 - styleUpdates[styleName] = nextProp[styleName];

767 - }

768 - }

769 - } else {

770 - // Relies on `updateStylesByID` not mutating `styleUpdates`.

771 - if (!styleUpdates) {

772 - if (!updatePayload) {

773 - updatePayload = [];

736 + // Update styles that changed since `lastProp`.

737 + for (styleName in nextProp) {

738 + if (

739 + nextProp.hasOwnProperty(styleName) &&

740 + lastProp[styleName] !== nextProp[styleName]

741 + ) {

742 + if (!styleUpdates) {

743 + styleUpdates = {};

744 }

775 - updatePayload.push(propKey, styleUpdates);

745 + styleUpdates[styleName] = nextProp[styleName];

746 }

777 - styleUpdates = nextProp;

747 }

779 - } else if (propKey === DANGEROUSLY_SET_INNER_HTML) {

780 - var nextHtml = nextProp ? nextProp[HTML] : undefined;

781 - var lastHtml = lastProp ? lastProp[HTML] : undefined;

782 - if (nextHtml != null) {

783 - if (lastHtml !== nextHtml) {

784 - (updatePayload = updatePayload || []).push(propKey, '' + nextHtml);

748 + } else {

749 + // Relies on `updateStylesByID` not mutating `styleUpdates`.

750 + if (!styleUpdates) {

751 + if (!updatePayload) {

752 + updatePayload = [];

753 }

786 - } else {

787 - // TODO: It might be too late to clear this if we have children

788 - // inserted already.

754 + updatePayload.push(propKey, styleUpdates);

755 }

790 - } else if (propKey === CHILDREN) {

791 - if (

792 - lastProp !== nextProp &&

793 - (typeof nextProp === 'string' || typeof nextProp === 'number')

794 - ) {

795 - (updatePayload = updatePayload || []).push(propKey, '' + nextProp);

756 + styleUpdates = nextProp;

757 + }

758 + } else if (propKey === DANGEROUSLY_SET_INNER_HTML) {

759 + var nextHtml = nextProp ? nextProp[HTML] : undefined;

760 + var lastHtml = lastProp ? lastProp[HTML] : undefined;

761 + if (nextHtml != null) {

762 + if (lastHtml !== nextHtml) {

763 + (updatePayload = updatePayload || []).push(propKey, '' + nextHtml);

764 }

797 - } else if (

798 - propKey === SUPPRESS_CONTENT_EDITABLE_WARNING ||

799 - propKey === SUPPRESS_HYDRATION_WARNING

765 + } else {

766 + // TODO: It might be too late to clear this if we have children

767 + // inserted already.

768 + }

769 + } else if (propKey === CHILDREN) {

770 + if (

771 + lastProp !== nextProp &&

772 + (typeof nextProp === 'string' || typeof nextProp === 'number')

773 ) {

801 - // Noop

802 - } else if (registrationNameModules.hasOwnProperty(propKey)) {

803 - if (nextProp != null) {

804 - // We eagerly listen to this even though we haven't committed yet.

805 - if (__DEV__ && typeof nextProp !== 'function') {

806 - warnForInvalidEventListener(propKey, nextProp);

807 - }

808 - ensureListeningTo(rootContainerElement, propKey);

809 - }

810 - if (!updatePayload && lastProp !== nextProp) {

811 - // This is a special case. If any listener updates we need to ensure

812 - // that the "current" props pointer gets updated so we need a commit

813 - // to update this element.

814 - updatePayload = [];

774 + (updatePayload = updatePayload || []).push(propKey, '' + nextProp);

775 + }

776 + } else if (

777 + propKey === SUPPRESS_CONTENT_EDITABLE_WARNING ||

778 + propKey === SUPPRESS_HYDRATION_WARNING

779 + ) {

780 + // Noop

781 + } else if (registrationNameModules.hasOwnProperty(propKey)) {

782 + if (nextProp != null) {

783 + // We eagerly listen to this even though we haven't committed yet.

784 + if (__DEV__ && typeof nextProp !== 'function') {

785 + warnForInvalidEventListener(propKey, nextProp);

786 }

816 - } else {

817 - // For any other property we always add it to the queue and then we

818 - // filter it out using the whitelist during the commit.

819 - (updatePayload = updatePayload || []).push(propKey, nextProp);

787 + ensureListeningTo(rootContainerElement, propKey);

788 }

789 + if (!updatePayload && lastProp !== nextProp) {

790 + // This is a special case. If any listener updates we need to ensure

791 + // that the "current" props pointer gets updated so we need a commit

792 + // to update this element.

793 + updatePayload = [];

794 + }

795 + } else {

796 + // For any other property we always add it to the queue and then we

797 + // filter it out using the whitelist during the commit.

798 + (updatePayload = updatePayload || []).push(propKey, nextProp);

799 }

822 - if (styleUpdates) {

823 - (updatePayload = updatePayload || []).push(STYLE, styleUpdates);

824 - }

825 - return updatePayload;

826 - },

800 + }

801 + if (styleUpdates) {

802 + (updatePayload = updatePayload || []).push(STYLE, styleUpdates);

803 + }

804 + return updatePayload;

805 +}

806

807 +// Apply the diff.

808 +export function updateProperties(

809 + domElement: Element,

810 + updatePayload: Array<any>,

811 + tag: string,

812 + lastRawProps: Object,

813 + nextRawProps: Object,

814 +): void {

815 + var wasCustomComponentTag = isCustomComponent(tag, lastRawProps);

816 + var isCustomComponentTag = isCustomComponent(tag, nextRawProps);

817 // Apply the diff.

829 - updateProperties(

830 - domElement: Element,

831 - updatePayload: Array<any>,

832 - tag: string,

833 - lastRawProps: Object,

834 - nextRawProps: Object,

835 - ): void {

836 - var wasCustomComponentTag = isCustomComponent(tag, lastRawProps);

837 - var isCustomComponentTag = isCustomComponent(tag, nextRawProps);

838 - // Apply the diff.

839 - updateDOMProperties(

840 - domElement,

841 - updatePayload,

842 - wasCustomComponentTag,

843 - isCustomComponentTag,

844 - );

818 + updateDOMProperties(

819 + domElement,

820 + updatePayload,

821 + wasCustomComponentTag,

822 + isCustomComponentTag,

823 + );

824

846 - // TODO: Ensure that an update gets scheduled if any of the special props

847 - // changed.

848 - switch (tag) {

849 - case 'input':

850 - // Update the wrapper around inputs *after* updating props. This has to

851 - // happen after `updateDOMProperties`. Otherwise HTML5 input validations

852 - // raise warnings and prevent the new value from being assigned.

853 - ReactDOMFiberInput.updateWrapper(domElement, nextRawProps);

825 + // TODO: Ensure that an update gets scheduled if any of the special props

826 + // changed.

827 + switch (tag) {

828 + case 'input':

829 + // Update the wrapper around inputs *after* updating props. This has to

830 + // happen after `updateDOMProperties`. Otherwise HTML5 input validations

831 + // raise warnings and prevent the new value from being assigned.

832 + ReactDOMFiberInput.updateWrapper(domElement, nextRawProps);

833

855 - // We also check that we haven't missed a value update, such as a

856 - // Radio group shifting the checked value to another named radio input.

857 - inputValueTracking.updateValueIfChanged((domElement: any));

858 - break;

859 - case 'textarea':

860 - ReactDOMFiberTextarea.updateWrapper(domElement, nextRawProps);

861 - break;

862 - case 'select':

863 - // <select> value update needs to occur after <option> children

864 - // reconciliation

865 - ReactDOMFiberSelect.postUpdateWrapper(domElement, nextRawProps);

866 - break;

867 - }

868 - },

834 + // We also check that we haven't missed a value update, such as a

835 + // Radio group shifting the checked value to another named radio input.

836 + inputValueTracking.updateValueIfChanged((domElement: any));

837 + break;

838 + case 'textarea':

839 + ReactDOMFiberTextarea.updateWrapper(domElement, nextRawProps);

840 + break;

841 + case 'select':

842 + // <select> value update needs to occur after <option> children

843 + // reconciliation

844 + ReactDOMFiberSelect.postUpdateWrapper(domElement, nextRawProps);

845 + break;

846 + }

847 +}

848

870 - diffHydratedProperties(

871 - domElement: Element,

872 - tag: string,

873 - rawProps: Object,

874 - parentNamespace: string,

875 - rootContainerElement: Element | Document,

876 - ): null | Array<mixed> {

877 - if (__DEV__) {

878 - var suppressHydrationWarning =

879 - rawProps[SUPPRESS_HYDRATION_WARNING] === true;

880 - var isCustomComponentTag = isCustomComponent(tag, rawProps);

881 - validatePropertiesInDevelopment(tag, rawProps);

882 - if (isCustomComponentTag && !didWarnShadyDOM && domElement.shadyRoot) {

883 - warning(

884 - false,

885 - '%s is using shady DOM. Using shady DOM with React can ' +

886 - 'cause things to break subtly.',

887 - getCurrentFiberOwnerName() || 'A component',

888 - );

889 - didWarnShadyDOM = true;

890 - }

849 +export function diffHydratedProperties(

850 + domElement: Element,

851 + tag: string,

852 + rawProps: Object,

853 + parentNamespace: string,

854 + rootContainerElement: Element | Document,

855 +): null | Array<mixed> {

856 + if (__DEV__) {

857 + var suppressHydrationWarning =

858 + rawProps[SUPPRESS_HYDRATION_WARNING] === true;

859 + var isCustomComponentTag = isCustomComponent(tag, rawProps);

860 + validatePropertiesInDevelopment(tag, rawProps);

861 + if (isCustomComponentTag && !didWarnShadyDOM && domElement.shadyRoot) {

862 + warning(

863 + false,

864 + '%s is using shady DOM. Using shady DOM with React can ' +

865 + 'cause things to break subtly.',

866 + getCurrentFiberOwnerName() || 'A component',

867 + );

868 + didWarnShadyDOM = true;

869 }

870 + }

871

893 - // TODO: Make sure that we check isMounted before firing any of these events.

894 - switch (tag) {

895 - case 'iframe':

896 - case 'object':

897 - ReactBrowserEventEmitter.trapBubbledEvent(

898 - 'topLoad',

899 - 'load',

900 - domElement,

901 - );

902 - break;

903 - case 'video':

904 - case 'audio':

905 - // Create listener for each media event

906 - for (var event in mediaEvents) {

907 - if (mediaEvents.hasOwnProperty(event)) {

908 - ReactBrowserEventEmitter.trapBubbledEvent(

909 - event,

910 - mediaEvents[event],

911 - domElement,

912 - );

913 - }

872 + // TODO: Make sure that we check isMounted before firing any of these events.

873 + switch (tag) {

874 + case 'iframe':

875 + case 'object':

876 + ReactBrowserEventEmitter.trapBubbledEvent('topLoad', 'load', domElement);

877 + break;

878 + case 'video':

879 + case 'audio':

880 + // Create listener for each media event

881 + for (var event in mediaEvents) {

882 + if (mediaEvents.hasOwnProperty(event)) {

883 + ReactBrowserEventEmitter.trapBubbledEvent(

884 + event,

885 + mediaEvents[event],

886 + domElement,

887 + );

888 }

915 - break;

916 - case 'source':

917 - ReactBrowserEventEmitter.trapBubbledEvent(

918 - 'topError',

919 - 'error',

920 - domElement,

921 - );

922 - break;

923 - case 'img':

924 - case 'image':

925 - ReactBrowserEventEmitter.trapBubbledEvent(

926 - 'topError',

927 - 'error',

928 - domElement,

929 - );

930 - ReactBrowserEventEmitter.trapBubbledEvent(

931 - 'topLoad',

932 - 'load',

933 - domElement,

934 - );

935 - break;

936 - case 'form':

937 - ReactBrowserEventEmitter.trapBubbledEvent(

938 - 'topReset',

939 - 'reset',

940 - domElement,

941 - );

942 - ReactBrowserEventEmitter.trapBubbledEvent(

943 - 'topSubmit',

944 - 'submit',

945 - domElement,

946 - );

947 - break;

948 - case 'details':

949 - ReactBrowserEventEmitter.trapBubbledEvent(

950 - 'topToggle',

951 - 'toggle',

952 - domElement,

953 - );

954 - break;

955 - case 'input':

956 - ReactDOMFiberInput.initWrapperState(domElement, rawProps);

957 - ReactBrowserEventEmitter.trapBubbledEvent(

958 - 'topInvalid',

959 - 'invalid',

960 - domElement,

961 - );

962 - // For controlled components we always need to ensure we're listening

963 - // to onChange. Even if there is no listener.

964 - ensureListeningTo(rootContainerElement, 'onChange');

965 - break;

966 - case 'option':

967 - ReactDOMFiberOption.validateProps(domElement, rawProps);

968 - break;

969 - case 'select':

970 - ReactDOMFiberSelect.initWrapperState(domElement, rawProps);

971 - ReactBrowserEventEmitter.trapBubbledEvent(

972 - 'topInvalid',

973 - 'invalid',

974 - domElement,

975 - );

976 - // For controlled components we always need to ensure we're listening

977 - // to onChange. Even if there is no listener.

978 - ensureListeningTo(rootContainerElement, 'onChange');

979 - break;

980 - case 'textarea':

981 - ReactDOMFiberTextarea.initWrapperState(domElement, rawProps);

982 - ReactBrowserEventEmitter.trapBubbledEvent(

983 - 'topInvalid',

984 - 'invalid',

985 - domElement,

986 - );

987 - // For controlled components we always need to ensure we're listening

988 - // to onChange. Even if there is no listener.

989 - ensureListeningTo(rootContainerElement, 'onChange');

990 - break;

991 - }

889 + }

890 + break;

891 + case 'source':

892 + ReactBrowserEventEmitter.trapBubbledEvent(

893 + 'topError',

894 + 'error',

895 + domElement,

896 + );

897 + break;

898 + case 'img':

899 + case 'image':

900 + ReactBrowserEventEmitter.trapBubbledEvent(

901 + 'topError',

902 + 'error',

903 + domElement,

904 + );

905 + ReactBrowserEventEmitter.trapBubbledEvent('topLoad', 'load', domElement);

906 + break;

907 + case 'form':

908 + ReactBrowserEventEmitter.trapBubbledEvent(

909 + 'topReset',

910 + 'reset',

911 + domElement,

912 + );

913 + ReactBrowserEventEmitter.trapBubbledEvent(

914 + 'topSubmit',

915 + 'submit',

916 + domElement,

917 + );

918 + break;

919 + case 'details':

920 + ReactBrowserEventEmitter.trapBubbledEvent(

921 + 'topToggle',

922 + 'toggle',

923 + domElement,

924 + );

925 + break;

926 + case 'input':

927 + ReactDOMFiberInput.initWrapperState(domElement, rawProps);

928 + ReactBrowserEventEmitter.trapBubbledEvent(

929 + 'topInvalid',

930 + 'invalid',

931 + domElement,

932 + );

933 + // For controlled components we always need to ensure we're listening

934 + // to onChange. Even if there is no listener.

935 + ensureListeningTo(rootContainerElement, 'onChange');

936 + break;

937 + case 'option':

938 + ReactDOMFiberOption.validateProps(domElement, rawProps);

939 + break;

940 + case 'select':

941 + ReactDOMFiberSelect.initWrapperState(domElement, rawProps);

942 + ReactBrowserEventEmitter.trapBubbledEvent(

943 + 'topInvalid',

944 + 'invalid',

945 + domElement,

946 + );

947 + // For controlled components we always need to ensure we're listening

948 + // to onChange. Even if there is no listener.

949 + ensureListeningTo(rootContainerElement, 'onChange');

950 + break;

951 + case 'textarea':

952 + ReactDOMFiberTextarea.initWrapperState(domElement, rawProps);

953 + ReactBrowserEventEmitter.trapBubbledEvent(

954 + 'topInvalid',

955 + 'invalid',

956 + domElement,

957 + );

958 + // For controlled components we always need to ensure we're listening

959 + // to onChange. Even if there is no listener.

960 + ensureListeningTo(rootContainerElement, 'onChange');

961 + break;

962 + }

963

993 - assertValidProps(tag, rawProps, getStack);

964 + assertValidProps(tag, rawProps, getStack);

965

995 - if (__DEV__) {

996 - var extraAttributeNames: Set<string> = new Set();

997 - var attributes = domElement.attributes;

998 - for (var i = 0; i < attributes.length; i++) {

999 - var name = attributes[i].name.toLowerCase();

1000 - switch (name) {

1001 - // Built-in SSR attribute is whitelisted

1002 - case 'data-reactroot':

1003 - break;

1004 - // Controlled attributes are not validated

1005 - // TODO: Only ignore them on controlled tags.

1006 - case 'value':

1007 - break;

1008 - case 'checked':

1009 - break;

1010 - case 'selected':

1011 - break;

1012 - default:

1013 - // Intentionally use the original name.

1014 - // See discussion in https://github.com/facebook/react/pull/10676.

1015 - extraAttributeNames.add(attributes[i].name);

1016 - }

966 + if (__DEV__) {

967 + var extraAttributeNames: Set<string> = new Set();

968 + var attributes = domElement.attributes;

969 + for (var i = 0; i < attributes.length; i++) {

970 + var name = attributes[i].name.toLowerCase();

971 + switch (name) {

972 + // Built-in SSR attribute is whitelisted

973 + case 'data-reactroot':

974 + break;

975 + // Controlled attributes are not validated

976 + // TODO: Only ignore them on controlled tags.

977 + case 'value':

978 + break;

979 + case 'checked':

980 + break;

981 + case 'selected':

982 + break;

983 + default:

984 + // Intentionally use the original name.

985 + // See discussion in https://github.com/facebook/react/pull/10676.

986 + extraAttributeNames.add(attributes[i].name);

987 }

988 }

989 + }

990

1020 - var updatePayload = null;

1021 - for (var propKey in rawProps) {

1022 - if (!rawProps.hasOwnProperty(propKey)) {

1023 - continue;

1024 - }

1025 - var nextProp = rawProps[propKey];

1026 - if (propKey === CHILDREN) {

1027 - // For text content children we compare against textContent. This

1028 - // might match additional HTML that is hidden when we read it using

1029 - // textContent. E.g. "foo" will match "f<span>oo</span>" but that still

1030 - // satisfies our requirement. Our requirement is not to produce perfect

1031 - // HTML and attributes. Ideally we should preserve structure but it's

1032 - // ok not to if the visible content is still enough to indicate what

1033 - // even listeners these nodes might be wired up to.

1034 - // TODO: Warn if there is more than a single textNode as a child.

1035 - // TODO: Should we use domElement.firstChild.nodeValue to compare?

1036 - if (typeof nextProp === 'string') {

1037 - if (domElement.textContent !== nextProp) {

1038 - if (__DEV__ && !suppressHydrationWarning) {

1039 - warnForTextDifference(domElement.textContent, nextProp);

1040 - }

1041 - updatePayload = [CHILDREN, nextProp];

1042 - }

1043 - } else if (typeof nextProp === 'number') {

1044 - if (domElement.textContent !== '' + nextProp) {

1045 - if (__DEV__ && !suppressHydrationWarning) {

1046 - warnForTextDifference(domElement.textContent, nextProp);

1047 - }

1048 - updatePayload = [CHILDREN, '' + nextProp];

991 + var updatePayload = null;

992 + for (var propKey in rawProps) {

993 + if (!rawProps.hasOwnProperty(propKey)) {

994 + continue;

995 + }

996 + var nextProp = rawProps[propKey];

997 + if (propKey === CHILDREN) {

998 + // For text content children we compare against textContent. This

999 + // might match additional HTML that is hidden when we read it using

1000 + // textContent. E.g. "foo" will match "f<span>oo</span>" but that still

1001 + // satisfies our requirement. Our requirement is not to produce perfect

1002 + // HTML and attributes. Ideally we should preserve structure but it's

1003 + // ok not to if the visible content is still enough to indicate what

1004 + // even listeners these nodes might be wired up to.

1005 + // TODO: Warn if there is more than a single textNode as a child.

1006 + // TODO: Should we use domElement.firstChild.nodeValue to compare?

1007 + if (typeof nextProp === 'string') {

1008 + if (domElement.textContent !== nextProp) {

1009 + if (__DEV__ && !suppressHydrationWarning) {

1010 + warnForTextDifference(domElement.textContent, nextProp);

1011 }

1012 + updatePayload = [CHILDREN, nextProp];

1013 }

1051 - } else if (registrationNameModules.hasOwnProperty(propKey)) {

1052 - if (nextProp != null) {

1053 - if (__DEV__ && typeof nextProp !== 'function') {

1054 - warnForInvalidEventListener(propKey, nextProp);

1014 + } else if (typeof nextProp === 'number') {

1015 + if (domElement.textContent !== '' + nextProp) {

1016 + if (__DEV__ && !suppressHydrationWarning) {

1017 + warnForTextDifference(domElement.textContent, nextProp);

1018 }

1056 - ensureListeningTo(rootContainerElement, propKey);

1019 + updatePayload = [CHILDREN, '' + nextProp];

1020 }

1058 - } else if (__DEV__) {

1059 - // Validate that the properties correspond to their expected values.

1060 - var serverValue;

1061 - var propertyInfo;

1062 - if (suppressHydrationWarning) {

1063 - // Don't bother comparing. We're ignoring all these warnings.

1064 - } else if (

1065 - propKey === SUPPRESS_CONTENT_EDITABLE_WARNING ||

1066 - propKey === SUPPRESS_HYDRATION_WARNING ||

1067 - // Controlled attributes are not validated

1068 - // TODO: Only ignore them on controlled tags.

1069 - propKey === 'value' ||

1070 - propKey === 'checked' ||

1071 - propKey === 'selected'

1072 - ) {

1073 - // Noop

1074 - } else if (propKey === DANGEROUSLY_SET_INNER_HTML) {

1075 - const rawHtml = nextProp ? nextProp[HTML] || '' : '';

1076 - const serverHTML = domElement.innerHTML;

1077 - const expectedHTML = normalizeHTML(domElement, rawHtml);

1078 - if (expectedHTML !== serverHTML) {

1079 - warnForPropDifference(propKey, serverHTML, expectedHTML);

1080 - }

1081 - } else if (propKey === STYLE) {

1082 - // $FlowFixMe - Should be inferred as not undefined.

1083 - extraAttributeNames.delete(propKey);

1084 - const expectedStyle = CSSPropertyOperations.createDangerousStringForStyles(

1085 - nextProp,

1086 - );

1087 - serverValue = domElement.getAttribute('style');

1088 - if (expectedStyle !== serverValue) {

1089 - warnForPropDifference(propKey, serverValue, expectedStyle);

1090 - }

1091 - } else if (isCustomComponentTag) {

1021 + }

1022 + } else if (registrationNameModules.hasOwnProperty(propKey)) {

1023 + if (nextProp != null) {

1024 + if (__DEV__ && typeof nextProp !== 'function') {

1025 + warnForInvalidEventListener(propKey, nextProp);

1026 + }

1027 + ensureListeningTo(rootContainerElement, propKey);

1028 + }

1029 + } else if (__DEV__) {

1030 + // Validate that the properties correspond to their expected values.

1031 + var serverValue;

1032 + var propertyInfo;

1033 + if (suppressHydrationWarning) {

1034 + // Don't bother comparing. We're ignoring all these warnings.

1035 + } else if (

1036 + propKey === SUPPRESS_CONTENT_EDITABLE_WARNING ||

1037 + propKey === SUPPRESS_HYDRATION_WARNING ||

1038 + // Controlled attributes are not validated

1039 + // TODO: Only ignore them on controlled tags.

1040 + propKey === 'value' ||

1041 + propKey === 'checked' ||

1042 + propKey === 'selected'

1043 + ) {

1044 + // Noop

1045 + } else if (propKey === DANGEROUSLY_SET_INNER_HTML) {

1046 + const rawHtml = nextProp ? nextProp[HTML] || '' : '';

1047 + const serverHTML = domElement.innerHTML;

1048 + const expectedHTML = normalizeHTML(domElement, rawHtml);

1049 + if (expectedHTML !== serverHTML) {

1050 + warnForPropDifference(propKey, serverHTML, expectedHTML);

1051 + }

1052 + } else if (propKey === STYLE) {

1053 + // $FlowFixMe - Should be inferred as not undefined.

1054 + extraAttributeNames.delete(propKey);

1055 + const expectedStyle = CSSPropertyOperations.createDangerousStringForStyles(

1056 + nextProp,

1057 + );

1058 + serverValue = domElement.getAttribute('style');

1059 + if (expectedStyle !== serverValue) {

1060 + warnForPropDifference(propKey, serverValue, expectedStyle);

1061 + }

1062 + } else if (isCustomComponentTag) {

1063 + // $FlowFixMe - Should be inferred as not undefined.

1064 + extraAttributeNames.delete(propKey.toLowerCase());

1065 + serverValue = DOMPropertyOperations.getValueForAttribute(

1066 + domElement,

1067 + propKey,

1068 + nextProp,

1069 + );

1070 +

1071 + if (nextProp !== serverValue) {

1072 + warnForPropDifference(propKey, serverValue, nextProp);

1073 + }

1074 + } else if (DOMProperty.shouldSetAttribute(propKey, nextProp)) {

1075 + if ((propertyInfo = DOMProperty.getPropertyInfo(propKey))) {

1076 // $FlowFixMe - Should be inferred as not undefined.

1093 - extraAttributeNames.delete(propKey.toLowerCase());

1094 - serverValue = DOMPropertyOperations.getValueForAttribute(

1077 + extraAttributeNames.delete(propertyInfo.attributeName);

1078 + serverValue = DOMPropertyOperations.getValueForProperty(

1079 domElement,

1080 propKey,

1081 nextProp,

1082 );

1099 -

1100 - if (nextProp !== serverValue) {

1101 - warnForPropDifference(propKey, serverValue, nextProp);

1083 + } else {

1084 + let ownNamespace = parentNamespace;

1085 + if (ownNamespace === HTML_NAMESPACE) {

1086 + ownNamespace = getIntrinsicNamespace(tag);

1087 }

1103 - } else if (DOMProperty.shouldSetAttribute(propKey, nextProp)) {

1104 - if ((propertyInfo = DOMProperty.getPropertyInfo(propKey))) {

1088 + if (ownNamespace === HTML_NAMESPACE) {

1089 // $FlowFixMe - Should be inferred as not undefined.

1106 - extraAttributeNames.delete(propertyInfo.attributeName);

1107 - serverValue = DOMPropertyOperations.getValueForProperty(

1108 - domElement,

1109 - propKey,

1110 - nextProp,

1111 - );

1090 + extraAttributeNames.delete(propKey.toLowerCase());

1091 } else {

1113 - let ownNamespace = parentNamespace;

1114 - if (ownNamespace === HTML_NAMESPACE) {

1115 - ownNamespace = getIntrinsicNamespace(tag);

1116 - }

1117 - if (ownNamespace === HTML_NAMESPACE) {

1118 - // $FlowFixMe - Should be inferred as not undefined.

1119 - extraAttributeNames.delete(propKey.toLowerCase());

1120 - } else {

1121 - // $FlowFixMe - Should be inferred as not undefined.

1122 - extraAttributeNames.delete(propKey);

1123 - }

1124 - serverValue = DOMPropertyOperations.getValueForAttribute(

1125 - domElement,

1126 - propKey,

1127 - nextProp,

1128 - );

1092 + // $FlowFixMe - Should be inferred as not undefined.

1093 + extraAttributeNames.delete(propKey);

1094 }

1095 + serverValue = DOMPropertyOperations.getValueForAttribute(

1096 + domElement,

1097 + propKey,

1098 + nextProp,

1099 + );

1100 + }

1101

1131 - if (nextProp !== serverValue) {

1132 - warnForPropDifference(propKey, serverValue, nextProp);

1133 - }

1102 + if (nextProp !== serverValue) {

1103 + warnForPropDifference(propKey, serverValue, nextProp);

1104 }

1105 }

1106 }

1107 + }

1108

1138 - if (__DEV__) {

1109 + if (__DEV__) {

1110 + // $FlowFixMe - Should be inferred as not undefined.

1111 + if (extraAttributeNames.size > 0 && !suppressHydrationWarning) {

1112 // $FlowFixMe - Should be inferred as not undefined.

1140 - if (extraAttributeNames.size > 0 && !suppressHydrationWarning) {

1141 - // $FlowFixMe - Should be inferred as not undefined.

1142 - warnForExtraAttributes(extraAttributeNames);

1143 - }

1113 + warnForExtraAttributes(extraAttributeNames);

1114 }

1115 + }

1116

1146 - switch (tag) {

1147 - case 'input':

1148 - // TODO: Make sure we check if this is still unmounted or do any clean

1149 - // up necessary since we never stop tracking anymore.

1150 - inputValueTracking.track((domElement: any));

1151 - ReactDOMFiberInput.postMountWrapper(domElement, rawProps);

1152 - break;

1153 - case 'textarea':

1154 - // TODO: Make sure we check if this is still unmounted or do any clean

1155 - // up necessary since we never stop tracking anymore.

1156 - inputValueTracking.track((domElement: any));

1157 - ReactDOMFiberTextarea.postMountWrapper(domElement, rawProps);

1158 - break;

1159 - case 'select':

1160 - case 'option':

1161 - // For input and textarea we current always set the value property at

1162 - // post mount to force it to diverge from attributes. However, for

1163 - // option and select we don't quite do the same thing and select

1164 - // is not resilient to the DOM state changing so we don't do that here.

1165 - // TODO: Consider not doing this for input and textarea.

1166 - break;

1167 - default:

1168 - if (typeof rawProps.onClick === 'function') {

1169 - // TODO: This cast may not be sound for SVG, MathML or custom elements.

1170 - trapClickOnNonInteractiveElement(((domElement: any): HTMLElement));

1171 - }

1172 - break;

1173 - }

1117 + switch (tag) {

1118 + case 'input':

1119 + // TODO: Make sure we check if this is still unmounted or do any clean

1120 + // up necessary since we never stop tracking anymore.

1121 + inputValueTracking.track((domElement: any));

1122 + ReactDOMFiberInput.postMountWrapper(domElement, rawProps);

1123 + break;

1124 + case 'textarea':

1125 + // TODO: Make sure we check if this is still unmounted or do any clean

1126 + // up necessary since we never stop tracking anymore.

1127 + inputValueTracking.track((domElement: any));

1128 + ReactDOMFiberTextarea.postMountWrapper(domElement, rawProps);

1129 + break;

1130 + case 'select':

1131 + case 'option':

1132 + // For input and textarea we current always set the value property at

1133 + // post mount to force it to diverge from attributes. However, for

1134 + // option and select we don't quite do the same thing and select

1135 + // is not resilient to the DOM state changing so we don't do that here.

1136 + // TODO: Consider not doing this for input and textarea.

1137 + break;

1138 + default:

1139 + if (typeof rawProps.onClick === 'function') {

1140 + // TODO: This cast may not be sound for SVG, MathML or custom elements.

1141 + trapClickOnNonInteractiveElement(((domElement: any): HTMLElement));

1142 + }

1143 + break;

1144 + }

1145

1175 - return updatePayload;

1176 - },

1146 + return updatePayload;

1147 +}

1148

1178 - diffHydratedText(textNode: Text, text: string): boolean {

1179 - const isDifferent = textNode.nodeValue !== text;

1180 - return isDifferent;

1181 - },

1149 +export function diffHydratedText(textNode: Text, text: string): boolean {

1150 + const isDifferent = textNode.nodeValue !== text;

1151 + return isDifferent;

1152 +}

1153

1183 - warnForUnmatchedText(textNode: Text, text: string) {

1184 - if (__DEV__) {

1185 - warnForTextDifference(textNode.nodeValue, text);

1186 - }

1187 - },

1154 +export function warnForUnmatchedText(textNode: Text, text: string) {

1155 + if (__DEV__) {

1156 + warnForTextDifference(textNode.nodeValue, text);

1157 + }

1158 +}

1159

1189 - warnForDeletedHydratableElement(

1190 - parentNode: Element | Document,

1191 - child: Element,

1192 - ) {

1193 - if (__DEV__) {

1194 - if (didWarnInvalidHydration) {

1195 - return;

1196 - }

1197 - didWarnInvalidHydration = true;

1198 - warning(

1199 - false,

1200 - 'Did not expect server HTML to contain a <%s> in <%s>.',

1201 - child.nodeName.toLowerCase(),

1202 - parentNode.nodeName.toLowerCase(),

1203 - );

1160 +export function warnForDeletedHydratableElement(

1161 + parentNode: Element | Document,

1162 + child: Element,

1163 +) {

1164 + if (__DEV__) {

1165 + if (didWarnInvalidHydration) {

1166 + return;

1167 }

1205 - },

1168 + didWarnInvalidHydration = true;

1169 + warning(

1170 + false,

1171 + 'Did not expect server HTML to contain a <%s> in <%s>.',

1172 + child.nodeName.toLowerCase(),

1173 + parentNode.nodeName.toLowerCase(),

1174 + );

1175 + }

1176 +}

1177

1207 - warnForDeletedHydratableText(parentNode: Element | Document, child: Text) {

1208 - if (__DEV__) {

1209 - if (didWarnInvalidHydration) {

1210 - return;

1211 - }

1212 - didWarnInvalidHydration = true;

1213 - warning(

1214 - false,

1215 - 'Did not expect server HTML to contain the text node "%s" in <%s>.',

1216 - child.nodeValue,

1217 - parentNode.nodeName.toLowerCase(),

1218 - );

1178 +export function warnForDeletedHydratableText(

1179 + parentNode: Element | Document,

1180 + child: Text,

1181 +) {

1182 + if (__DEV__) {

1183 + if (didWarnInvalidHydration) {

1184 + return;

1185 }

1220 - },

1186 + didWarnInvalidHydration = true;

1187 + warning(

1188 + false,

1189 + 'Did not expect server HTML to contain the text node "%s" in <%s>.',

1190 + child.nodeValue,

1191 + parentNode.nodeName.toLowerCase(),

1192 + );

1193 + }

1194 +}

1195

1222 - warnForInsertedHydratedElement(

1223 - parentNode: Element | Document,

1224 - tag: string,

1225 - props: Object,

1226 - ) {

1227 - if (__DEV__) {

1228 - if (didWarnInvalidHydration) {

1229 - return;

1230 - }

1231 - didWarnInvalidHydration = true;

1232 - warning(

1233 - false,

1234 - 'Expected server HTML to contain a matching <%s> in <%s>.',

1235 - tag,

1236 - parentNode.nodeName.toLowerCase(),

1237 - );

1196 +export function warnForInsertedHydratedElement(

1197 + parentNode: Element | Document,

1198 + tag: string,

1199 + props: Object,

1200 +) {

1201 + if (__DEV__) {

1202 + if (didWarnInvalidHydration) {

1203 + return;

1204 }

1239 - },

1205 + didWarnInvalidHydration = true;

1206 + warning(

1207 + false,

1208 + 'Expected server HTML to contain a matching <%s> in <%s>.',

1209 + tag,

1210 + parentNode.nodeName.toLowerCase(),

1211 + );

1212 + }

1213 +}

1214

1241 - warnForInsertedHydratedText(parentNode: Element | Document, text: string) {

1242 - if (__DEV__) {

1243 - if (text === '') {

1244 - // We expect to insert empty text nodes since they're not represented in

1245 - // the HTML.

1246 - // TODO: Remove this special case if we can just avoid inserting empty

1247 - // text nodes.

1248 - return;

1249 - }

1250 - if (didWarnInvalidHydration) {

1251 - return;

1252 - }

1253 - didWarnInvalidHydration = true;

1254 - warning(

1255 - false,

1256 - 'Expected server HTML to contain a matching text node for "%s" in <%s>.',

1257 - text,

1258 - parentNode.nodeName.toLowerCase(),

1259 - );

1215 +export function warnForInsertedHydratedText(

1216 + parentNode: Element | Document,

1217 + text: string,

1218 +) {

1219 + if (__DEV__) {

1220 + if (text === '') {

1221 + // We expect to insert empty text nodes since they're not represented in

1222 + // the HTML.

1223 + // TODO: Remove this special case if we can just avoid inserting empty

1224 + // text nodes.

1225 + return;

1226 }

1261 - },

1262 -

1263 - restoreControlledState(

1264 - domElement: Element,

1265 - tag: string,

1266 - props: Object,

1267 - ): void {

1268 - switch (tag) {

1269 - case 'input':

1270 - ReactDOMFiberInput.restoreControlledState(domElement, props);

1271 - return;

1272 - case 'textarea':

1273 - ReactDOMFiberTextarea.restoreControlledState(domElement, props);

1274 - return;

1275 - case 'select':

1276 - ReactDOMFiberSelect.restoreControlledState(domElement, props);

1277 - return;

1227 + if (didWarnInvalidHydration) {

1228 + return;

1229 }

1279 - },

1280 -};

1230 + didWarnInvalidHydration = true;

1231 + warning(

1232 + false,

1233 + 'Expected server HTML to contain a matching text node for "%s" in <%s>.',

1234 + text,

1235 + parentNode.nodeName.toLowerCase(),

1236 + );

1237 + }

1238 +}

1239

1282 -module.exports = ReactDOMFiberComponent;

1240 +export function restoreControlledState(

1241 + domElement: Element,

1242 + tag: string,

1243 + props: Object,

1244 +): void {

1245 + switch (tag) {

1246 + case 'input':

1247 + ReactDOMFiberInput.restoreControlledState(domElement, props);

1248 + return;

1249 + case 'textarea':

1250 + ReactDOMFiberTextarea.restoreControlledState(domElement, props);

1251 + return;

1252 + case 'select':

1253 + ReactDOMFiberSelect.restoreControlledState(domElement, props);

1254 + return;

1255 + }

1256 +}

packages/react-dom/src/client/ReactDOMFiberInput.js

+219 -225

@@ -10,22 +10,15 @@

10 'use strict';

12 // TODO: direct imports like some-package/src/* are bad. Fix me.

13 -var {

14 - getCurrentFiberOwnerName,

15 -} = require('react-reconciler/src/ReactDebugCurrentFiber');

16 -var invariant = require('fbjs/lib/invariant');

13 +import ReactDebugCurrentFiber

14 + from 'react-reconciler/src/ReactDebugCurrentFiber';

15 +import invariant from 'fbjs/lib/invariant';

16 +import warning from 'fbjs/lib/warning';

18 -var DOMPropertyOperations = require('./DOMPropertyOperations');

19 -var ReactDOMComponentTree = require('./ReactDOMComponentTree');

20 -var ReactControlledValuePropTypes = require('../shared/ReactControlledValuePropTypes');

21 -

22 -if (__DEV__) {

23 - // TODO: direct imports like some-package/src/* are bad. Fix me.

24 - var {

25 - getCurrentFiberStackAddendum,

26 - } = require('react-reconciler/src/ReactDebugCurrentFiber');

27 - var warning = require('fbjs/lib/warning');

28 -}

18 +import * as DOMPropertyOperations from './DOMPropertyOperations';

19 +import ReactDOMComponentTree from './ReactDOMComponentTree';

20 +import ReactControlledValuePropTypes

21 + from '../shared/ReactControlledValuePropTypes';

23 type InputWithWrapperState = HTMLInputElement & {

24 _wrapperState: {

@@ -35,6 +28,10 @@ type InputWithWrapperState = HTMLInputElement & {

28 },

29 };

31 +var {

32 + getCurrentFiberOwnerName,

33 + getCurrentFiberStackAddendum,

34 +} = ReactDebugCurrentFiber;

35 var didWarnValueDefaultValue = false;

36 var didWarnCheckedDefaultChecked = false;

37 var didWarnControlledToUncontrolled = false;

@@ -61,238 +58,237 @@ function isControlled(props) {

58 *

59 * See http://www.w3.org/TR/2012/WD-html5-20121025/the-input-element.html

60 */

64 -var ReactDOMInput = {

65 - getHostProps: function(element: Element, props: Object) {

66 - var node = ((element: any): InputWithWrapperState);

67 - var value = props.value;

68 - var checked = props.checked;

70 - var hostProps = Object.assign(

71 - {

72 - // Make sure we set .type before any other properties (setting .value

73 - // before .type means .value is lost in IE11 and below)

74 - type: undefined,

75 - // Make sure we set .step before .value (setting .value before .step

76 - // means .value is rounded on mount, based upon step precision)

77 - step: undefined,

78 - // Make sure we set .min & .max before .value (to ensure proper order

79 - // in corner cases such as min or max deriving from value, e.g. Issue #7170)

80 - min: undefined,

81 - max: undefined,

82 - },

62 +export function getHostProps(element: Element, props: Object) {

63 + var node = ((element: any): InputWithWrapperState);

64 + var value = props.value;

65 + var checked = props.checked;

66 +

67 + var hostProps = Object.assign(

68 + {

69 + // Make sure we set .type before any other properties (setting .value

70 + // before .type means .value is lost in IE11 and below)

71 + type: undefined,

72 + // Make sure we set .step before .value (setting .value before .step

73 + // means .value is rounded on mount, based upon step precision)

74 + step: undefined,

75 + // Make sure we set .min & .max before .value (to ensure proper order

76 + // in corner cases such as min or max deriving from value, e.g. Issue #7170)

77 + min: undefined,

78 + max: undefined,

79 + },

80 + props,

81 + {

82 + defaultChecked: undefined,

83 + defaultValue: undefined,

84 + value: value != null ? value : node._wrapperState.initialValue,

85 + checked: checked != null ? checked : node._wrapperState.initialChecked,

86 + },

87 + );

88 +

89 + return hostProps;

90 +}

91 +

92 +export function initWrapperState(element: Element, props: Object) {

93 + if (__DEV__) {

94 + ReactControlledValuePropTypes.checkPropTypes(

95 + 'input',

96 props,

84 - {

85 - defaultChecked: undefined,

86 - defaultValue: undefined,

87 - value: value != null ? value : node._wrapperState.initialValue,

88 - checked: checked != null ? checked : node._wrapperState.initialChecked,

89 - },

97 + getCurrentFiberStackAddendum,

98 );

92 - return hostProps;

93 - },

94 -

95 - initWrapperState: function(element: Element, props: Object) {

96 - if (__DEV__) {

97 - ReactControlledValuePropTypes.checkPropTypes(

98 - 'input',

99 - props,

100 - getCurrentFiberStackAddendum,

100 + if (

101 + props.checked !== undefined &&

102 + props.defaultChecked !== undefined &&

103 + !didWarnCheckedDefaultChecked

104 + ) {

105 + warning(

106 + false,

107 + '%s contains an input of type %s with both checked and defaultChecked props. ' +

108 + 'Input elements must be either controlled or uncontrolled ' +

109 + '(specify either the checked prop, or the defaultChecked prop, but not ' +

110 + 'both). Decide between using a controlled or uncontrolled input ' +

111 + 'element and remove one of these props. More info: ' +

112 + 'https://fb.me/react-controlled-components',

113 + getCurrentFiberOwnerName() || 'A component',

114 + props.type,

115 );

102 -

103 - if (

104 - props.checked !== undefined &&

105 - props.defaultChecked !== undefined &&

106 - !didWarnCheckedDefaultChecked

107 - ) {

108 - warning(

109 - false,

110 - '%s contains an input of type %s with both checked and defaultChecked props. ' +

111 - 'Input elements must be either controlled or uncontrolled ' +

112 - '(specify either the checked prop, or the defaultChecked prop, but not ' +

113 - 'both). Decide between using a controlled or uncontrolled input ' +

114 - 'element and remove one of these props. More info: ' +

115 - 'https://fb.me/react-controlled-components',

116 - getCurrentFiberOwnerName() || 'A component',

117 - props.type,

118 - );

119 - didWarnCheckedDefaultChecked = true;

120 - }

121 - if (

122 - props.value !== undefined &&

123 - props.defaultValue !== undefined &&

124 - !didWarnValueDefaultValue

125 - ) {

126 - warning(

127 - false,

128 - '%s contains an input of type %s with both value and defaultValue props. ' +

129 - 'Input elements must be either controlled or uncontrolled ' +

130 - '(specify either the value prop, or the defaultValue prop, but not ' +

131 - 'both). Decide between using a controlled or uncontrolled input ' +

132 - 'element and remove one of these props. More info: ' +

133 - 'https://fb.me/react-controlled-components',

134 - getCurrentFiberOwnerName() || 'A component',

135 - props.type,

136 - );

137 - didWarnValueDefaultValue = true;

138 - }

116 + didWarnCheckedDefaultChecked = true;

117 + }

118 + if (

119 + props.value !== undefined &&

120 + props.defaultValue !== undefined &&

121 + !didWarnValueDefaultValue

122 + ) {

123 + warning(

124 + false,

125 + '%s contains an input of type %s with both value and defaultValue props. ' +

126 + 'Input elements must be either controlled or uncontrolled ' +

127 + '(specify either the value prop, or the defaultValue prop, but not ' +

128 + 'both). Decide between using a controlled or uncontrolled input ' +

129 + 'element and remove one of these props. More info: ' +

130 + 'https://fb.me/react-controlled-components',

131 + getCurrentFiberOwnerName() || 'A component',

132 + props.type,

133 + );

134 + didWarnValueDefaultValue = true;

135 }

136 + }

137

141 - var defaultValue = props.defaultValue;

142 - var node = ((element: any): InputWithWrapperState);

143 - node._wrapperState = {

144 - initialChecked: props.checked != null

145 - ? props.checked

146 - : props.defaultChecked,

147 - initialValue: props.value != null ? props.value : defaultValue,

148 - controlled: isControlled(props),

149 - };

150 - },

138 + var defaultValue = props.defaultValue;

139 + var node = ((element: any): InputWithWrapperState);

140 + node._wrapperState = {

141 + initialChecked: props.checked != null

142 + ? props.checked

143 + : props.defaultChecked,

144 + initialValue: props.value != null ? props.value : defaultValue,

145 + controlled: isControlled(props),

146 + };

147 +}

148

152 - updateWrapper: function(element: Element, props: Object) {

153 - var node = ((element: any): InputWithWrapperState);

154 - if (__DEV__) {

155 - var controlled = isControlled(props);

149 +export function updateWrapper(element: Element, props: Object) {

150 + var node = ((element: any): InputWithWrapperState);

151 + if (__DEV__) {

152 + var controlled = isControlled(props);

153

157 - if (

158 - !node._wrapperState.controlled &&

159 - controlled &&

160 - !didWarnUncontrolledToControlled

161 - ) {

162 - warning(

163 - false,

164 - 'A component is changing an uncontrolled input of type %s to be controlled. ' +

165 - 'Input elements should not switch from uncontrolled to controlled (or vice versa). ' +

166 - 'Decide between using a controlled or uncontrolled input ' +

167 - 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components%s',

168 - props.type,

169 - getCurrentFiberStackAddendum(),

170 - );

171 - didWarnUncontrolledToControlled = true;

172 - }

173 - if (

174 - node._wrapperState.controlled &&

175 - !controlled &&

176 - !didWarnControlledToUncontrolled

177 - ) {

178 - warning(

179 - false,

180 - 'A component is changing a controlled input of type %s to be uncontrolled. ' +

181 - 'Input elements should not switch from controlled to uncontrolled (or vice versa). ' +

182 - 'Decide between using a controlled or uncontrolled input ' +

183 - 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components%s',

184 - props.type,

185 - getCurrentFiberStackAddendum(),

186 - );

187 - didWarnControlledToUncontrolled = true;

188 - }

154 + if (

155 + !node._wrapperState.controlled &&

156 + controlled &&

157 + !didWarnUncontrolledToControlled

158 + ) {

159 + warning(

160 + false,

161 + 'A component is changing an uncontrolled input of type %s to be controlled. ' +

162 + 'Input elements should not switch from uncontrolled to controlled (or vice versa). ' +

163 + 'Decide between using a controlled or uncontrolled input ' +

164 + 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components%s',

165 + props.type,

166 + getCurrentFiberStackAddendum(),

167 + );

168 + didWarnUncontrolledToControlled = true;

169 }

190 -

191 - var checked = props.checked;

192 - if (checked != null) {

193 - DOMPropertyOperations.setValueForProperty(

194 - node,

195 - 'checked',

196 - checked || false,

170 + if (

171 + node._wrapperState.controlled &&

172 + !controlled &&

173 + !didWarnControlledToUncontrolled

174 + ) {

175 + warning(

176 + false,

177 + 'A component is changing a controlled input of type %s to be uncontrolled. ' +

178 + 'Input elements should not switch from controlled to uncontrolled (or vice versa). ' +

179 + 'Decide between using a controlled or uncontrolled input ' +

180 + 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components%s',

181 + props.type,

182 + getCurrentFiberStackAddendum(),

183 );

184 + didWarnControlledToUncontrolled = true;

185 }

186 + }

187 +

188 + var checked = props.checked;

189 + if (checked != null) {

190 + DOMPropertyOperations.setValueForProperty(

191 + node,

192 + 'checked',

193 + checked || false,

194 + );

195 + }

196

200 - var value = props.value;

201 - if (value != null) {

202 - if (value === 0 && node.value === '') {

203 - node.value = '0';

204 - // Note: IE9 reports a number inputs as 'text', so check props instead.

205 - } else if (props.type === 'number') {

206 - // Simulate `input.valueAsNumber`. IE9 does not support it

207 - var valueAsNumber = parseFloat(node.value) || 0;

197 + var value = props.value;

198 + if (value != null) {

199 + if (value === 0 && node.value === '') {

200 + node.value = '0';

201 + // Note: IE9 reports a number inputs as 'text', so check props instead.

202 + } else if (props.type === 'number') {

203 + // Simulate `input.valueAsNumber`. IE9 does not support it

204 + var valueAsNumber = parseFloat(node.value) || 0;

205

209 - if (

210 - // eslint-disable-next-line

211 - value != valueAsNumber ||

212 - // eslint-disable-next-line

213 - (value == valueAsNumber && node.value != value)

214 - ) {

215 - // Cast `value` to a string to ensure the value is set correctly. While

216 - // browsers typically do this as necessary, jsdom doesn't.

217 - node.value = '' + value;

218 - }

219 - } else if (node.value !== '' + value) {

206 + if (

207 + // eslint-disable-next-line

208 + value != valueAsNumber ||

209 + // eslint-disable-next-line

210 + (value == valueAsNumber && node.value != value)

211 + ) {

212 // Cast `value` to a string to ensure the value is set correctly. While

213 // browsers typically do this as necessary, jsdom doesn't.

214 node.value = '' + value;

215 }

224 - } else {

225 - if (props.value == null && props.defaultValue != null) {

226 - // In Chrome, assigning defaultValue to certain input types triggers input validation.

227 - // For number inputs, the display value loses trailing decimal points. For email inputs,

228 - // Chrome raises "The specified value <x> is not a valid email address".

229 - //

230 - // Here we check to see if the defaultValue has actually changed, avoiding these problems

231 - // when the user is inputting text

232 - //

233 - // https://github.com/facebook/react/issues/7253

234 - if (node.defaultValue !== '' + props.defaultValue) {

235 - node.defaultValue = '' + props.defaultValue;

236 - }

237 - }

238 - if (props.checked == null && props.defaultChecked != null) {

239 - node.defaultChecked = !!props.defaultChecked;

216 + } else if (node.value !== '' + value) {

217 + // Cast `value` to a string to ensure the value is set correctly. While

218 + // browsers typically do this as necessary, jsdom doesn't.

219 + node.value = '' + value;

220 + }

221 + } else {

222 + if (props.value == null && props.defaultValue != null) {

223 + // In Chrome, assigning defaultValue to certain input types triggers input validation.

224 + // For number inputs, the display value loses trailing decimal points. For email inputs,

225 + // Chrome raises "The specified value <x> is not a valid email address".

226 + //

227 + // Here we check to see if the defaultValue has actually changed, avoiding these problems

228 + // when the user is inputting text

229 + //

230 + // https://github.com/facebook/react/issues/7253

231 + if (node.defaultValue !== '' + props.defaultValue) {

232 + node.defaultValue = '' + props.defaultValue;

233 }

234 }

242 - },

235 + if (props.checked == null && props.defaultChecked != null) {

236 + node.defaultChecked = !!props.defaultChecked;

237 + }

238 + }

239 +}

240

244 - postMountWrapper: function(element: Element, props: Object) {

245 - var node = ((element: any): InputWithWrapperState);

241 +export function postMountWrapper(element: Element, props: Object) {

242 + var node = ((element: any): InputWithWrapperState);

243

247 - // Detach value from defaultValue. We won't do anything if we're working on

248 - // submit or reset inputs as those values & defaultValues are linked. They

249 - // are not resetable nodes so this operation doesn't matter and actually

250 - // removes browser-default values (eg "Submit Query") when no value is

251 - // provided.

244 + // Detach value from defaultValue. We won't do anything if we're working on

245 + // submit or reset inputs as those values & defaultValues are linked. They

246 + // are not resetable nodes so this operation doesn't matter and actually

247 + // removes browser-default values (eg "Submit Query") when no value is

248 + // provided.

249

253 - switch (props.type) {

254 - case 'submit':

255 - case 'reset':

256 - break;

257 - case 'color':

258 - case 'date':

259 - case 'datetime':

260 - case 'datetime-local':

261 - case 'month':

262 - case 'time':

263 - case 'week':

264 - // This fixes the no-show issue on iOS Safari and Android Chrome:

265 - // https://github.com/facebook/react/issues/7233

266 - node.value = '';

267 - node.value = node.defaultValue;

268 - break;

269 - default:

270 - node.value = node.value;

271 - break;

272 - }

250 + switch (props.type) {

251 + case 'submit':

252 + case 'reset':

253 + break;

254 + case 'color':

255 + case 'date':

256 + case 'datetime':

257 + case 'datetime-local':

258 + case 'month':

259 + case 'time':

260 + case 'week':

261 + // This fixes the no-show issue on iOS Safari and Android Chrome:

262 + // https://github.com/facebook/react/issues/7233

263 + node.value = '';

264 + node.value = node.defaultValue;

265 + break;

266 + default:

267 + node.value = node.value;

268 + break;

269 + }

270

274 - // Normally, we'd just do `node.checked = node.checked` upon initial mount, less this bug

275 - // this is needed to work around a chrome bug where setting defaultChecked

276 - // will sometimes influence the value of checked (even after detachment).

277 - // Reference: https://bugs.chromium.org/p/chromium/issues/detail?id=608416

278 - // We need to temporarily unset name to avoid disrupting radio button groups.

279 - var name = node.name;

280 - if (name !== '') {

281 - node.name = '';

282 - }

283 - node.defaultChecked = !node.defaultChecked;

284 - node.defaultChecked = !node.defaultChecked;

285 - if (name !== '') {

286 - node.name = name;

287 - }

288 - },

271 + // Normally, we'd just do `node.checked = node.checked` upon initial mount, less this bug

272 + // this is needed to work around a chrome bug where setting defaultChecked

273 + // will sometimes influence the value of checked (even after detachment).

274 + // Reference: https://bugs.chromium.org/p/chromium/issues/detail?id=608416

275 + // We need to temporarily unset name to avoid disrupting radio button groups.

276 + var name = node.name;

277 + if (name !== '') {

278 + node.name = '';

279 + }

280 + node.defaultChecked = !node.defaultChecked;

281 + node.defaultChecked = !node.defaultChecked;

282 + if (name !== '') {

283 + node.name = name;

284 + }

285 +}

286

290 - restoreControlledState: function(element: Element, props: Object) {

291 - var node = ((element: any): InputWithWrapperState);

292 - ReactDOMInput.updateWrapper(node, props);

293 - updateNamedCousins(node, props);

294 - },

295 -};

287 +export function restoreControlledState(element: Element, props: Object) {

288 + var node = ((element: any): InputWithWrapperState);

289 + updateWrapper(node, props);

290 + updateNamedCousins(node, props);

291 +}

292

293 function updateNamedCousins(rootNode, props) {

294 var name = props.name;

@@ -334,9 +330,7 @@ function updateNamedCousins(rootNode, props) {

330 // If this is a controlled radio button group, forcing the input that

331 // was previously checked to update will cause it to be come re-checked

332 // as appropriate.

337 - ReactDOMInput.updateWrapper(otherNode, otherProps);

333 + updateWrapper(otherNode, otherProps);

334 }

335 }

336 }

341 -

342 -module.exports = ReactDOMInput;

packages/react-dom/src/client/ReactDOMFiberOption.js

+26 -32

@@ -9,11 +9,8 @@

10 'use strict';

12 -var React = require('react');

13 -

14 -if (__DEV__) {

15 - var warning = require('fbjs/lib/warning');

16 -}

12 +import React from 'react';

13 +import warning from 'fbjs/lib/warning';

15 function flattenChildren(children) {

16 var content = '';

@@ -37,36 +34,33 @@ function flattenChildren(children) {

34 /**

35 * Implements an <option> host component that warns when `selected` is set.

36 */

40 -var ReactDOMOption = {

41 - validateProps: function(element: Element, props: Object) {

42 - // TODO (yungsters): Remove support for `selected` in <option>.

43 - if (__DEV__) {

44 - warning(

45 - props.selected == null,

46 - 'Use the `defaultValue` or `value` props on <select> instead of ' +

47 - 'setting `selected` on <option>.',

48 - );

49 - }

50 - },

52 - postMountWrapper: function(element: Element, props: Object) {

53 - // value="" should make a value attribute (#6219)

54 - if (props.value != null) {

55 - element.setAttribute('value', props.value);

56 - }

57 - },

38 +export function validateProps(element: Element, props: Object) {

39 + // TODO (yungsters): Remove support for `selected` in <option>.

40 + if (__DEV__) {

41 + warning(

42 + props.selected == null,

43 + 'Use the `defaultValue` or `value` props on <select> instead of ' +

44 + 'setting `selected` on <option>.',

45 + );

46 + }

47 +}

59 - getHostProps: function(element: Element, props: Object) {

60 - var hostProps = Object.assign({children: undefined}, props);

49 +export function postMountWrapper(element: Element, props: Object) {

50 + // value="" should make a value attribute (#6219)

51 + if (props.value != null) {

52 + element.setAttribute('value', props.value);

53 + }

54 +}

62 - var content = flattenChildren(props.children);

56 +export function getHostProps(element: Element, props: Object) {

57 + var hostProps = Object.assign({children: undefined}, props);

64 - if (content) {

65 - hostProps.children = content;

66 - }

59 + var content = flattenChildren(props.children);

68 - return hostProps;

69 - },

70 -};

61 + if (content) {

62 + hostProps.children = content;

63 + }

72 -module.exports = ReactDOMOption;

65 + return hostProps;

66 +}

packages/react-dom/src/client/ReactDOMFiberSelect.js

+81 -83

@@ -9,19 +9,20 @@

10 'use strict';

12 +// TODO: direct imports like some-package/src/* are bad. Fix me.

13 +import ReactDebugCurrentFiber

14 + from 'react-reconciler/src/ReactDebugCurrentFiber';

15 +import warning from 'fbjs/lib/warning';

16 +

17 +import ReactControlledValuePropTypes

18 + from '../shared/ReactControlledValuePropTypes';

19 +

20 var {

21 getCurrentFiberOwnerName,

14 -} = require('react-reconciler/src/ReactDebugCurrentFiber');

15 -

16 -var ReactControlledValuePropTypes = require('../shared/ReactControlledValuePropTypes');

22 + getCurrentFiberStackAddendum,

23 +} = ReactDebugCurrentFiber;

25 if (__DEV__) {

19 - // TODO: direct imports like some-package/src/* are bad. Fix me.

20 - var {

21 - getCurrentFiberStackAddendum,

22 - } = require('react-reconciler/src/ReactDebugCurrentFiber');

23 - var warning = require('fbjs/lib/warning');

24 -

26 var didWarnValueDefaultValue = false;

27 }

@@ -143,86 +144,83 @@ function updateOptions(

144 * If `defaultValue` is provided, any options with the supplied values will be

145 * selected.

146 */

146 -var ReactDOMSelect = {

147 - getHostProps: function(element: Element, props: Object) {

148 - return Object.assign({}, props, {

149 - value: undefined,

150 - });

151 - },

147

153 - initWrapperState: function(element: Element, props: Object) {

154 - var node = ((element: any): SelectWithWrapperState);

155 - if (__DEV__) {

156 - checkSelectPropTypes(props);

157 - }

148 +export function getHostProps(element: Element, props: Object) {

149 + return Object.assign({}, props, {

150 + value: undefined,

151 + });

152 +}

153

159 - var value = props.value;

160 - node._wrapperState = {

161 - initialValue: value != null ? value : props.defaultValue,

162 - wasMultiple: !!props.multiple,

163 - };

164 -

165 - if (__DEV__) {

166 - if (

167 - props.value !== undefined &&

168 - props.defaultValue !== undefined &&

169 - !didWarnValueDefaultValue

170 - ) {

171 - warning(

172 - false,

173 - 'Select elements must be either controlled or uncontrolled ' +

174 - '(specify either the value prop, or the defaultValue prop, but not ' +

175 - 'both). Decide between using a controlled or uncontrolled select ' +

176 - 'element and remove one of these props. More info: ' +

177 - 'https://fb.me/react-controlled-components',

178 - );

179 - didWarnValueDefaultValue = true;

180 - }

181 - }

182 - },

154 +export function initWrapperState(element: Element, props: Object) {

155 + var node = ((element: any): SelectWithWrapperState);

156 + if (__DEV__) {

157 + checkSelectPropTypes(props);

158 + }

159

184 - postMountWrapper: function(element: Element, props: Object) {

185 - var node = ((element: any): SelectWithWrapperState);

186 - node.multiple = !!props.multiple;

187 - var value = props.value;

188 - if (value != null) {

189 - updateOptions(node, !!props.multiple, value, false);

190 - } else if (props.defaultValue != null) {

191 - updateOptions(node, !!props.multiple, props.defaultValue, true);

192 - }

193 - },

160 + var value = props.value;

161 + node._wrapperState = {

162 + initialValue: value != null ? value : props.defaultValue,

163 + wasMultiple: !!props.multiple,

164 + };

165

195 - postUpdateWrapper: function(element: Element, props: Object) {

196 - var node = ((element: any): SelectWithWrapperState);

197 - // After the initial mount, we control selected-ness manually so don't pass

198 - // this value down

199 - node._wrapperState.initialValue = undefined;

200 -

201 - var wasMultiple = node._wrapperState.wasMultiple;

202 - node._wrapperState.wasMultiple = !!props.multiple;

203 -

204 - var value = props.value;

205 - if (value != null) {

206 - updateOptions(node, !!props.multiple, value, false);

207 - } else if (wasMultiple !== !!props.multiple) {

208 - // For simplicity, reapply `defaultValue` if `multiple` is toggled.

209 - if (props.defaultValue != null) {

210 - updateOptions(node, !!props.multiple, props.defaultValue, true);

211 - } else {

212 - // Revert the select back to its default unselected state.

213 - updateOptions(node, !!props.multiple, props.multiple ? [] : '', false);

214 - }

166 + if (__DEV__) {

167 + if (

168 + props.value !== undefined &&

169 + props.defaultValue !== undefined &&

170 + !didWarnValueDefaultValue

171 + ) {

172 + warning(

173 + false,

174 + 'Select elements must be either controlled or uncontrolled ' +

175 + '(specify either the value prop, or the defaultValue prop, but not ' +

176 + 'both). Decide between using a controlled or uncontrolled select ' +

177 + 'element and remove one of these props. More info: ' +

178 + 'https://fb.me/react-controlled-components',

179 + );

180 + didWarnValueDefaultValue = true;

181 }

216 - },

182 + }

183 +}

184

218 - restoreControlledState: function(element: Element, props: Object) {

219 - var node = ((element: any): SelectWithWrapperState);

220 - var value = props.value;

185 +export function postMountWrapper(element: Element, props: Object) {

186 + var node = ((element: any): SelectWithWrapperState);

187 + node.multiple = !!props.multiple;

188 + var value = props.value;

189 + if (value != null) {

190 + updateOptions(node, !!props.multiple, value, false);

191 + } else if (props.defaultValue != null) {

192 + updateOptions(node, !!props.multiple, props.defaultValue, true);

193 + }

194 +}

195

222 - if (value != null) {

223 - updateOptions(node, !!props.multiple, value, false);

196 +export function postUpdateWrapper(element: Element, props: Object) {

197 + var node = ((element: any): SelectWithWrapperState);

198 + // After the initial mount, we control selected-ness manually so don't pass

199 + // this value down

200 + node._wrapperState.initialValue = undefined;

201 +

202 + var wasMultiple = node._wrapperState.wasMultiple;

203 + node._wrapperState.wasMultiple = !!props.multiple;

204 +

205 + var value = props.value;

206 + if (value != null) {

207 + updateOptions(node, !!props.multiple, value, false);

208 + } else if (wasMultiple !== !!props.multiple) {

209 + // For simplicity, reapply `defaultValue` if `multiple` is toggled.

210 + if (props.defaultValue != null) {

211 + updateOptions(node, !!props.multiple, props.defaultValue, true);

212 + } else {

213 + // Revert the select back to its default unselected state.

214 + updateOptions(node, !!props.multiple, props.multiple ? [] : '', false);

215 }

225 - },

226 -};

216 + }

217 +}

218 +

219 +export function restoreControlledState(element: Element, props: Object) {

220 + var node = ((element: any): SelectWithWrapperState);

221 + var value = props.value;

222

228 -module.exports = ReactDOMSelect;

223 + if (value != null) {

224 + updateOptions(node, !!props.multiple, value, false);

225 + }

226 +}

packages/react-dom/src/client/ReactDOMFiberTextarea.js

+121 -126

@@ -9,17 +9,17 @@

10 'use strict';

12 -var invariant = require('fbjs/lib/invariant');

12 +import invariant from 'fbjs/lib/invariant';

13 +import warning from 'fbjs/lib/warning';

14 +// TODO: direct imports like some-package/src/* are bad. Fix me.

15 +import ReactDebugCurrentFiber

16 + from 'react-reconciler/src/ReactDebugCurrentFiber';

14 -var ReactControlledValuePropTypes = require('../shared/ReactControlledValuePropTypes');

18 +import ReactControlledValuePropTypes

19 + from '../shared/ReactControlledValuePropTypes';

16 -if (__DEV__) {

17 - // TODO: direct imports like some-package/src/* are bad. Fix me.

18 - var {

19 - getCurrentFiberStackAddendum,

20 - } = require('react-reconciler/src/ReactDebugCurrentFiber');

21 - var warning = require('fbjs/lib/warning');

22 -}

21 +var {getCurrentFiberStackAddendum} = ReactDebugCurrentFiber;

22 +var didWarnValDefaultVal = false;

24 type TextAreaWithWrapperState = HTMLTextAreaElement & {

25 _wrapperState: {

@@ -27,8 +27,6 @@ type TextAreaWithWrapperState = HTMLTextAreaElement & {

27 },

28 };

30 -var didWarnValDefaultVal = false;

31 -

30 /**

31 * Implements a <textarea> host component that allows setting `value`, and

32 * `defaultValue`. This differs from the traditional DOM API because value is

@@ -44,135 +42,132 @@ var didWarnValDefaultVal = false;

42 * The rendered element will be initialized with an empty value, the prop

43 * `defaultValue` if specified, or the children content (deprecated).

44 */

47 -var ReactDOMTextarea = {

48 - getHostProps: function(element: Element, props: Object) {

49 - var node = ((element: any): TextAreaWithWrapperState);

50 - invariant(

51 - props.dangerouslySetInnerHTML == null,

52 - '`dangerouslySetInnerHTML` does not make sense on <textarea>.',

53 - );

55 - // Always set children to the same thing. In IE9, the selection range will

56 - // get reset if `textContent` is mutated. We could add a check in setTextContent

57 - // to only set the value if/when the value differs from the node value (which would

58 - // completely solve this IE9 bug), but Sebastian+Sophie seemed to like this

59 - // solution. The value can be a boolean or object so that's why it's forced

60 - // to be a string.

61 - var hostProps = Object.assign({}, props, {

62 - value: undefined,

63 - defaultValue: undefined,

64 - children: '' + node._wrapperState.initialValue,

65 - });

66 -

67 - return hostProps;

68 - },

46 +export function getHostProps(element: Element, props: Object) {

47 + var node = ((element: any): TextAreaWithWrapperState);

48 + invariant(

49 + props.dangerouslySetInnerHTML == null,

50 + '`dangerouslySetInnerHTML` does not make sense on <textarea>.',

51 + );

52 +

53 + // Always set children to the same thing. In IE9, the selection range will

54 + // get reset if `textContent` is mutated. We could add a check in setTextContent

55 + // to only set the value if/when the value differs from the node value (which would

56 + // completely solve this IE9 bug), but Sebastian+Sophie seemed to like this

57 + // solution. The value can be a boolean or object so that's why it's forced

58 + // to be a string.

59 + var hostProps = Object.assign({}, props, {

60 + value: undefined,

61 + defaultValue: undefined,

62 + children: '' + node._wrapperState.initialValue,

63 + });

64 +

65 + return hostProps;

66 +}

70 - initWrapperState: function(element: Element, props: Object) {

71 - var node = ((element: any): TextAreaWithWrapperState);

72 - if (__DEV__) {

73 - ReactControlledValuePropTypes.checkPropTypes(

74 - 'textarea',

75 - props,

76 - getCurrentFiberStackAddendum,

68 +export function initWrapperState(element: Element, props: Object) {

69 + var node = ((element: any): TextAreaWithWrapperState);

70 + if (__DEV__) {

71 + ReactControlledValuePropTypes.checkPropTypes(

72 + 'textarea',

73 + props,

74 + getCurrentFiberStackAddendum,

75 + );

76 + if (

77 + props.value !== undefined &&

78 + props.defaultValue !== undefined &&

79 + !didWarnValDefaultVal

80 + ) {

81 + warning(

82 + false,

83 + 'Textarea elements must be either controlled or uncontrolled ' +

84 + '(specify either the value prop, or the defaultValue prop, but not ' +

85 + 'both). Decide between using a controlled or uncontrolled textarea ' +

86 + 'and remove one of these props. More info: ' +

87 + 'https://fb.me/react-controlled-components',

88 );

78 - if (

79 - props.value !== undefined &&

80 - props.defaultValue !== undefined &&

81 - !didWarnValDefaultVal

82 - ) {

89 + didWarnValDefaultVal = true;

90 + }

91 + }

92 +

93 + var value = props.value;

94 + var initialValue = value;

95 +

96 + // Only bother fetching default value if we're going to use it

97 + if (value == null) {

98 + var defaultValue = props.defaultValue;

99 + // TODO (yungsters): Remove support for children content in <textarea>.

100 + var children = props.children;

101 + if (children != null) {

102 + if (__DEV__) {

103 warning(

104 false,

85 - 'Textarea elements must be either controlled or uncontrolled ' +

86 - '(specify either the value prop, or the defaultValue prop, but not ' +

87 - 'both). Decide between using a controlled or uncontrolled textarea ' +

88 - 'and remove one of these props. More info: ' +

89 - 'https://fb.me/react-controlled-components',

105 + 'Use the `defaultValue` or `value` props instead of setting ' +

106 + 'children on <textarea>.',

107 );

91 - didWarnValDefaultVal = true;

108 }

93 - }

94 -

95 - var value = props.value;

96 - var initialValue = value;

97 -

98 - // Only bother fetching default value if we're going to use it

99 - if (value == null) {

100 - var defaultValue = props.defaultValue;

101 - // TODO (yungsters): Remove support for children content in <textarea>.

102 - var children = props.children;

103 - if (children != null) {

104 - if (__DEV__) {

105 - warning(

106 - false,

107 - 'Use the `defaultValue` or `value` props instead of setting ' +

108 - 'children on <textarea>.',

109 - );

110 - }

109 + invariant(

110 + defaultValue == null,

111 + 'If you supply `defaultValue` on a <textarea>, do not pass children.',

112 + );

113 + if (Array.isArray(children)) {

114 invariant(

112 - defaultValue == null,

113 - 'If you supply `defaultValue` on a <textarea>, do not pass children.',

115 + children.length <= 1,

116 + '<textarea> can only have at most one child.',

117 );

115 - if (Array.isArray(children)) {

116 - invariant(

117 - children.length <= 1,

118 - '<textarea> can only have at most one child.',

119 - );

120 - children = children[0];

121 - }

122 -

123 - defaultValue = '' + children;

124 - }

125 - if (defaultValue == null) {

126 - defaultValue = '';

118 + children = children[0];

119 }

128 - initialValue = defaultValue;

129 - }

120

131 - node._wrapperState = {

132 - initialValue: '' + initialValue,

133 - };

134 - },

135 -

136 - updateWrapper: function(element: Element, props: Object) {

137 - var node = ((element: any): TextAreaWithWrapperState);

138 - var value = props.value;

139 - if (value != null) {

140 - // Cast `value` to a string to ensure the value is set correctly. While

141 - // browsers typically do this as necessary, jsdom doesn't.

142 - var newValue = '' + value;

143 -

144 - // To avoid side effects (such as losing text selection), only set value if changed

145 - if (newValue !== node.value) {

146 - node.value = newValue;

147 - }

148 - if (props.defaultValue == null) {

149 - node.defaultValue = newValue;

150 - }

121 + defaultValue = '' + children;

122 }

152 - if (props.defaultValue != null) {

153 - node.defaultValue = props.defaultValue;

123 + if (defaultValue == null) {

124 + defaultValue = '';

125 }

155 - },

126 + initialValue = defaultValue;

127 + }

128 +

129 + node._wrapperState = {

130 + initialValue: '' + initialValue,

131 + };

132 +}

133

157 - postMountWrapper: function(element: Element, props: Object) {

158 - var node = ((element: any): TextAreaWithWrapperState);

159 - // This is in postMount because we need access to the DOM node, which is not

160 - // available until after the component has mounted.

161 - var textContent = node.textContent;

162 -

163 - // Only set node.value if textContent is equal to the expected

164 - // initial value. In IE10/IE11 there is a bug where the placeholder attribute

165 - // will populate textContent as well.

166 - // https://developer.microsoft.com/microsoft-edge/platform/issues/101525/

167 - if (textContent === node._wrapperState.initialValue) {

168 - node.value = textContent;

134 +export function updateWrapper(element: Element, props: Object) {

135 + var node = ((element: any): TextAreaWithWrapperState);

136 + var value = props.value;

137 + if (value != null) {

138 + // Cast `value` to a string to ensure the value is set correctly. While

139 + // browsers typically do this as necessary, jsdom doesn't.

140 + var newValue = '' + value;

141 +

142 + // To avoid side effects (such as losing text selection), only set value if changed

143 + if (newValue !== node.value) {

144 + node.value = newValue;

145 }

170 - },

146 + if (props.defaultValue == null) {

147 + node.defaultValue = newValue;

148 + }

149 + }

150 + if (props.defaultValue != null) {

151 + node.defaultValue = props.defaultValue;

152 + }

153 +}

154

172 - restoreControlledState: function(element: Element, props: Object) {

173 - // DOM component is still mounted; update

174 - ReactDOMTextarea.updateWrapper(element, props);

175 - },

176 -};

155 +export function postMountWrapper(element: Element, props: Object) {

156 + var node = ((element: any): TextAreaWithWrapperState);

157 + // This is in postMount because we need access to the DOM node, which is not

158 + // available until after the component has mounted.

159 + var textContent = node.textContent;

160 +

161 + // Only set node.value if textContent is equal to the expected

162 + // initial value. In IE10/IE11 there is a bug where the placeholder attribute

163 + // will populate textContent as well.

164 + // https://developer.microsoft.com/microsoft-edge/platform/issues/101525/

165 + if (textContent === node._wrapperState.initialValue) {

166 + node.value = textContent;

167 + }

168 +}

169

178 -module.exports = ReactDOMTextarea;

170 +export function restoreControlledState(element: Element, props: Object) {

171 + // DOM component is still mounted; update

172 + updateWrapper(element, props);

173 +}

packages/react-dom/src/client/ReactDOMSelection.js

+8 -24

@@ -7,15 +7,15 @@

8 'use strict';

10 -var getNodeForCharacterOffset = require('./getNodeForCharacterOffset');

11 -var getTextContentAccessor = require('./getTextContentAccessor');

12 -var {TEXT_NODE} = require('../shared/HTMLNodeType');

10 +import getNodeForCharacterOffset from './getNodeForCharacterOffset';

11 +import getTextContentAccessor from './getTextContentAccessor';

12 +import {TEXT_NODE} from '../shared/HTMLNodeType';

14 /**

15 * @param {DOMElement} outerNode

16 * @return {?object}

17 */

18 -function getModernOffsets(outerNode) {

18 +export function getOffsets(outerNode) {

19 var selection = window.getSelection && window.getSelection();

21 if (!selection || selection.rangeCount === 0) {

@@ -58,8 +58,10 @@ function getModernOffsets(outerNode) {

58 * `end` is the index of (focusNode, focusOffset).

59 *

60 * Returns null if you pass in garbage input but we should probably just crash.

61 + *

62 + * Exported only for testing.

63 */

62 -function getModernOffsetsFromPoints(

64 +export function getModernOffsetsFromPoints(

65 outerNode,

66 anchorNode,

67 anchorOffset,

@@ -152,7 +154,7 @@ function getModernOffsetsFromPoints(

154 * @param {DOMElement|DOMTextNode} node

155 * @param {object} offsets

156 */

155 -function setModernOffsets(node, offsets) {

157 +export function setOffsets(node, offsets) {

158 if (!window.getSelection) {

159 return;

160 }

@@ -196,21 +198,3 @@ function setModernOffsets(node, offsets) {

198 }

199 }

200 }

199 -

200 -var ReactDOMSelection = {

201 - /**

202 - * @param {DOMElement} node

203 - */

204 - getOffsets: getModernOffsets,

205 -

206 - // For tests.

207 - getModernOffsetsFromPoints: getModernOffsetsFromPoints,

208 -

209 - /**

210 - * @param {DOMElement|DOMTextNode} node

211 - * @param {object} offsets

212 - */

213 - setOffsets: setModernOffsets,

214 -};

215 -

216 -module.exports = ReactDOMSelection;

packages/react-dom/src/client/ReactInputSelection.js

+97 -100

@@ -7,12 +7,12 @@

8 'use strict';

10 -var containsNode = require('fbjs/lib/containsNode');

11 -var focusNode = require('fbjs/lib/focusNode');

12 -var getActiveElement = require('fbjs/lib/getActiveElement');

10 +import containsNode from 'fbjs/lib/containsNode';

11 +import focusNode from 'fbjs/lib/focusNode';

12 +import getActiveElement from 'fbjs/lib/getActiveElement';

14 -var ReactDOMSelection = require('./ReactDOMSelection');

15 -var {ELEMENT_NODE} = require('../shared/HTMLNodeType');

14 +import * as ReactDOMSelection from './ReactDOMSelection';

15 +import {ELEMENT_NODE} from '../shared/HTMLNodeType';

17 function isInDocument(node) {

18 return containsNode(document.documentElement, node);

@@ -24,107 +24,104 @@ function isInDocument(node) {

24 * assume buttons have range selections allowed).

25 * Input selection module for React.

26 */

27 -var ReactInputSelection = {

28 - hasSelectionCapabilities: function(elem) {

29 - var nodeName = elem && elem.nodeName && elem.nodeName.toLowerCase();

30 - return (

31 - nodeName &&

32 - ((nodeName === 'input' && elem.type === 'text') ||

33 - nodeName === 'textarea' ||

34 - elem.contentEditable === 'true')

35 - );

36 - },

37 -

38 - getSelectionInformation: function() {

39 - var focusedElem = getActiveElement();

40 - return {

41 - focusedElem: focusedElem,

42 - selectionRange: ReactInputSelection.hasSelectionCapabilities(focusedElem)

43 - ? ReactInputSelection.getSelection(focusedElem)

44 - : null,

45 - };

46 - },

47 -

48 - /**

49 - * @restoreSelection: If any selection information was potentially lost,

50 - * restore it. This is useful when performing operations that could remove dom

51 - * nodes and place them back in, resulting in focus being lost.

52 - */

53 - restoreSelection: function(priorSelectionInformation) {

54 - var curFocusedElem = getActiveElement();

55 - var priorFocusedElem = priorSelectionInformation.focusedElem;

56 - var priorSelectionRange = priorSelectionInformation.selectionRange;

57 - if (curFocusedElem !== priorFocusedElem && isInDocument(priorFocusedElem)) {

58 - if (ReactInputSelection.hasSelectionCapabilities(priorFocusedElem)) {

59 - ReactInputSelection.setSelection(priorFocusedElem, priorSelectionRange);

60 - }

62 - // Focusing a node can change the scroll position, which is undesirable

63 - const ancestors = [];

64 - let ancestor = priorFocusedElem;

65 - while ((ancestor = ancestor.parentNode)) {

66 - if (ancestor.nodeType === ELEMENT_NODE) {

67 - ancestors.push({

68 - element: ancestor,

69 - left: ancestor.scrollLeft,

70 - top: ancestor.scrollTop,

71 - });

72 - }

73 - }

28 +export function hasSelectionCapabilities(elem) {

29 + var nodeName = elem && elem.nodeName && elem.nodeName.toLowerCase();

30 + return (

31 + nodeName &&

32 + ((nodeName === 'input' && elem.type === 'text') ||

33 + nodeName === 'textarea' ||

34 + elem.contentEditable === 'true')

35 + );

36 +}

75 - focusNode(priorFocusedElem);

38 +export function getSelectionInformation() {

39 + var focusedElem = getActiveElement();

40 + return {

41 + focusedElem: focusedElem,

42 + selectionRange: hasSelectionCapabilities(focusedElem)

43 + ? getSelection(focusedElem)

44 + : null,

45 + };

46 +}

77 - for (let i = 0; i < ancestors.length; i++) {

78 - const info = ancestors[i];

79 - info.element.scrollLeft = info.left;

80 - info.element.scrollTop = info.top;

81 - }

82 - }

83 - },

84 -

85 - /**

86 - * @getSelection: Gets the selection bounds of a focused textarea, input or

87 - * contentEditable node.

88 - * -@input: Look up selection bounds of this input

89 - * -@return {start: selectionStart, end: selectionEnd}

90 - */

91 - getSelection: function(input) {

92 - var selection;

93 -

94 - if ('selectionStart' in input) {

95 - // Modern browser with input or textarea.

96 - selection = {

97 - start: input.selectionStart,

98 - end: input.selectionEnd,

99 - };

100 - } else {

101 - // Content editable or old IE textarea.

102 - selection = ReactDOMSelection.getOffsets(input);

48 +/**

49 + * @restoreSelection: If any selection information was potentially lost,

50 + * restore it. This is useful when performing operations that could remove dom

51 + * nodes and place them back in, resulting in focus being lost.

52 + */

53 +export function restoreSelection(priorSelectionInformation) {

54 + var curFocusedElem = getActiveElement();

55 + var priorFocusedElem = priorSelectionInformation.focusedElem;

56 + var priorSelectionRange = priorSelectionInformation.selectionRange;

57 + if (curFocusedElem !== priorFocusedElem && isInDocument(priorFocusedElem)) {

58 + if (hasSelectionCapabilities(priorFocusedElem)) {

59 + setSelection(priorFocusedElem, priorSelectionRange);

60 }

105 - return selection || {start: 0, end: 0};

106 - },

107 -

108 - /**

109 - * @setSelection: Sets the selection bounds of a textarea or input and focuses

110 - * the input.

111 - * -@input Set selection bounds of this input or textarea

112 - * -@offsets Object of same form that is returned from get*

113 - */

114 - setSelection: function(input, offsets) {

115 - var start = offsets.start;

116 - var end = offsets.end;

117 - if (end === undefined) {

118 - end = start;

62 + // Focusing a node can change the scroll position, which is undesirable

63 + const ancestors = [];

64 + let ancestor = priorFocusedElem;

65 + while ((ancestor = ancestor.parentNode)) {

66 + if (ancestor.nodeType === ELEMENT_NODE) {

67 + ancestors.push({

68 + element: ancestor,

69 + left: ancestor.scrollLeft,

70 + top: ancestor.scrollTop,

71 + });

72 + }

73 }

121 - if ('selectionStart' in input) {

122 - input.selectionStart = start;

123 - input.selectionEnd = Math.min(end, input.value.length);

124 - } else {

125 - ReactDOMSelection.setOffsets(input, offsets);

75 + focusNode(priorFocusedElem);

76 +

77 + for (let i = 0; i < ancestors.length; i++) {

78 + const info = ancestors[i];

79 + info.element.scrollLeft = info.left;

80 + info.element.scrollTop = info.top;

81 }

127 - },

128 -};

82 + }

83 +}

84 +

85 +/**

86 + * @getSelection: Gets the selection bounds of a focused textarea, input or

87 + * contentEditable node.

88 + * -@input: Look up selection bounds of this input

89 + * -@return {start: selectionStart, end: selectionEnd}

90 + */

91 +export function getSelection(input) {

92 + var selection;

93 +

94 + if ('selectionStart' in input) {

95 + // Modern browser with input or textarea.

96 + selection = {

97 + start: input.selectionStart,

98 + end: input.selectionEnd,

99 + };

100 + } else {

101 + // Content editable or old IE textarea.

102 + selection = ReactDOMSelection.getOffsets(input);

103 + }

104

130 -module.exports = ReactInputSelection;

105 + return selection || {start: 0, end: 0};

106 +}

107 +

108 +/**

109 + * @setSelection: Sets the selection bounds of a textarea or input and focuses

110 + * the input.

111 + * -@input Set selection bounds of this input or textarea

112 + * -@offsets Object of same form that is returned from get*

113 + */

114 +export function setSelection(input, offsets) {

115 + var start = offsets.start;

116 + var end = offsets.end;

117 + if (end === undefined) {

118 + end = start;

119 + }

120 +

121 + if ('selectionStart' in input) {

122 + input.selectionStart = start;

123 + input.selectionEnd = Math.min(end, input.value.length);

124 + } else {

125 + ReactDOMSelection.setOffsets(input, offsets);

126 + }

127 +}

packages/react-dom/src/client/__tests__/getNodeForCharacterOffset-test.js

+1 -1

@@ -10,7 +10,7 @@

10 'use strict';

12 // TODO: can we express this test with only public API?

13 -var getNodeForCharacterOffset = require('../getNodeForCharacterOffset');

13 +var getNodeForCharacterOffset = require('../getNodeForCharacterOffset').default;

15 // Create node from HTML string

16 function createNode(html) {

packages/react-dom/src/client/__tests__/setInnerHTML-test.js

+1 -1

@@ -10,7 +10,7 @@

10 'use strict';

12 // TODO: can we express this test with only public API?

13 -var setInnerHTML = require('../setInnerHTML');

13 +var setInnerHTML = require('../setInnerHTML').default;

14 var Namespaces = require('../../shared/DOMNamespaces').Namespaces;

16 describe('setInnerHTML', () => {

packages/react-dom/src/client/getNodeForCharacterOffset.js

+2 -2

@@ -7,7 +7,7 @@

8 'use strict';

10 -var {TEXT_NODE} = require('../shared/HTMLNodeType');

10 +import {TEXT_NODE} from '../shared/HTMLNodeType';

12 /**

13 * Given any node return the first leaf node without children.

@@ -68,4 +68,4 @@ function getNodeForCharacterOffset(root, offset) {

68 }

69 }

71 -module.exports = getNodeForCharacterOffset;

71 +export default getNodeForCharacterOffset;

packages/react-dom/src/client/getTextContentAccessor.js

+2 -2

@@ -7,7 +7,7 @@

8 'use strict';

10 -var ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment');

10 +import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';

12 var contentKey = null;

@@ -28,4 +28,4 @@ function getTextContentAccessor() {

28 return contentKey;

29 }

31 -module.exports = getTextContentAccessor;

31 +export default getTextContentAccessor;

packages/react-dom/src/client/inputValueTracking.js

+38 -40

@@ -98,46 +98,44 @@ function trackValueOnNode(node: any): ?ValueTracker {

98 return tracker;

99 }

100

101 -var inputValueTracking = {

101 +export {

102 // exposed for testing

103 - _getTrackerFromNode: getTracker,

104 -

105 - track(node: ElementWithValueTracker) {

106 - if (getTracker(node)) {

107 - return;

108 - }

109 -

110 - // TODO: Once it's just Fiber we can move this to node._wrapperState

111 - node._valueTracker = trackValueOnNode(node);

112 - },

113 -

114 - updateValueIfChanged(node: ElementWithValueTracker) {

115 - if (!node) {

116 - return false;

117 - }

118 -

119 - var tracker = getTracker(node);

120 - // if there is no tracker at this point it's unlikely

121 - // that trying again will succeed

122 - if (!tracker) {

123 - return true;

124 - }

125 -

126 - var lastValue = tracker.getValue();

127 - var nextValue = getValueFromNode(node);

128 - if (nextValue !== lastValue) {

129 - tracker.setValue(nextValue);

130 - return true;

131 - }

132 - return false;

133 - },

134 -

135 - stopTracking(node: ElementWithValueTracker) {

136 - var tracker = getTracker(node);

137 - if (tracker) {

138 - tracker.stopTracking();

139 - }

140 - },

103 + getTracker as _getTrackerFromNode,

104 };

105

143 -module.exports = inputValueTracking;

106 +export function track(node: ElementWithValueTracker) {

107 + if (getTracker(node)) {

108 + return;

109 + }

110 +

111 + // TODO: Once it's just Fiber we can move this to node._wrapperState

112 + node._valueTracker = trackValueOnNode(node);

113 +}

114 +

115 +export function updateValueIfChanged(node: ElementWithValueTracker) {

116 + if (!node) {

117 + return false;

118 + }

119 +

120 + var tracker = getTracker(node);

121 + // if there is no tracker at this point it's unlikely

122 + // that trying again will succeed

123 + if (!tracker) {

124 + return true;

125 + }

126 +

127 + var lastValue = tracker.getValue();

128 + var nextValue = getValueFromNode(node);

129 + if (nextValue !== lastValue) {

130 + tracker.setValue(nextValue);

131 + return true;

132 + }

133 + return false;

134 +}

135 +

136 +export function stopTracking(node: ElementWithValueTracker) {

137 + var tracker = getTracker(node);

138 + if (tracker) {

139 + tracker.stopTracking();

140 + }

141 +}

packages/react-dom/src/client/setInnerHTML.js

+4 -3

@@ -7,8 +7,9 @@

8 'use strict';

10 -var Namespaces = require('../shared/DOMNamespaces').Namespaces;

11 -var createMicrosoftUnsafeLocalFunction = require('../shared/createMicrosoftUnsafeLocalFunction');

10 +import {Namespaces} from '../shared/DOMNamespaces';

11 +import createMicrosoftUnsafeLocalFunction

12 + from '../shared/createMicrosoftUnsafeLocalFunction';

14 // SVG temp container for IE lacking innerHTML

15 var reusableSVGContainer;

@@ -40,4 +41,4 @@ var setInnerHTML = createMicrosoftUnsafeLocalFunction(function(node, html) {

41 }

42 });

43 -module.exports = setInnerHTML;

44 +export default setInnerHTML;

packages/react-dom/src/client/setTextContent.js

+5 -5

@@ -7,11 +7,11 @@

8 'use strict';

10 -var ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment');

10 +import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';

12 -var setInnerHTML = require('./setInnerHTML');

13 -var escapeTextContentForBrowser = require('../shared/escapeTextContentForBrowser');

14 -var {TEXT_NODE} = require('../shared/HTMLNodeType');

12 +import setInnerHTML from './setInnerHTML';

13 +import escapeTextContentForBrowser from '../shared/escapeTextContentForBrowser';

14 +import {TEXT_NODE} from '../shared/HTMLNodeType';

16 /**

17 * Set the textContent property of a node, ensuring that whitespace is preserved

@@ -51,4 +51,4 @@ if (ExecutionEnvironment.canUseDOM) {

51 }

52 }

54 -module.exports = setTextContent;

54 +export default setTextContent;

packages/react-dom/src/client/validateDOMNesting.js

+8 -8

@@ -7,17 +7,16 @@

8 'use strict';

10 -var emptyFunction = require('fbjs/lib/emptyFunction');

10 +import emptyFunction from 'fbjs/lib/emptyFunction';

11 +import warning from 'fbjs/lib/warning';

12 +// TODO: direct imports like some-package/src/* are bad. Fix me.

13 +import ReactDebugCurrentFiber

14 + from 'react-reconciler/src/ReactDebugCurrentFiber';

16 +var {getCurrentFiberStackAddendum} = ReactDebugCurrentFiber;

17 var validateDOMNesting = emptyFunction;

19 if (__DEV__) {

15 - // TODO: direct imports like some-package/src/* are bad. Fix me.

16 - var {

17 - getCurrentFiberStackAddendum,

18 - } = require('react-reconciler/src/ReactDebugCurrentFiber');

19 - var warning = require('fbjs/lib/warning');

20 -

20 // This validation code was written based on the HTML5 parsing spec:

21 // https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-scope

22 //

@@ -484,6 +483,7 @@ if (__DEV__) {

483 }

484 };

485

486 + // TODO: turn this into a named export

487 validateDOMNesting.updatedAncestorInfo = updatedAncestorInfo;

488

489 // For testing

@@ -498,4 +498,4 @@ if (__DEV__) {

498 };

499 }

500

501 -module.exports = validateDOMNesting;

501 +export default validateDOMNesting;

packages/react-dom/src/events/BeforeInputEventPlugin.js

+6 -6

@@ -9,12 +9,12 @@

10 import type {TopLevelTypes} from './BrowserEventConstants';

12 -var EventPropagators = require('events/EventPropagators');

13 -var ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment');

12 +import EventPropagators from 'events/EventPropagators';

13 +import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';

15 -var FallbackCompositionState = require('./FallbackCompositionState');

16 -var SyntheticCompositionEvent = require('./SyntheticCompositionEvent');

17 -var SyntheticInputEvent = require('./SyntheticInputEvent');

15 +import FallbackCompositionState from './FallbackCompositionState';

16 +import SyntheticCompositionEvent from './SyntheticCompositionEvent';

17 +import SyntheticInputEvent from './SyntheticInputEvent';

19 var END_KEYCODES = [9, 13, 27, 32]; // Tab, Return, Esc, Space

20 var START_KEYCODE = 229;

@@ -472,4 +472,4 @@ var BeforeInputEventPlugin = {

472 },

473 };

474

475 -module.exports = BeforeInputEventPlugin;

475 +export default BeforeInputEventPlugin;

packages/react-dom/src/events/BrowserEventConstants.js

+2 -2

@@ -7,7 +7,7 @@

8 'use strict';

10 -var getVendorPrefixedEventName = require('./getVendorPrefixedEventName');

10 +import getVendorPrefixedEventName from './getVendorPrefixedEventName';

12 /**

13 * Types of raw signals from the browser caught at the top level.

@@ -96,4 +96,4 @@ var BrowserEventConstants = {

96 topLevelTypes,

97 };

99 -module.exports = BrowserEventConstants;

99 +export default BrowserEventConstants;

packages/react-dom/src/events/ChangeEventPlugin.js

+13 -13

@@ -7,18 +7,18 @@

8 'use strict';

10 -var EventPluginHub = require('events/EventPluginHub');

11 -var EventPropagators = require('events/EventPropagators');

12 -var ReactControlledComponent = require('events/ReactControlledComponent');

13 -var ReactGenericBatching = require('events/ReactGenericBatching');

14 -var SyntheticEvent = require('events/SyntheticEvent');

15 -var isTextInputElement = require('shared/isTextInputElement');

16 -var ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment');

17 -

18 -var getEventTarget = require('./getEventTarget');

19 -var isEventSupported = require('./isEventSupported');

20 -var ReactDOMComponentTree = require('../client/ReactDOMComponentTree');

21 -var inputValueTracking = require('../client/inputValueTracking');

10 +import EventPluginHub from 'events/EventPluginHub';

11 +import EventPropagators from 'events/EventPropagators';

12 +import ReactControlledComponent from 'events/ReactControlledComponent';

13 +import ReactGenericBatching from 'events/ReactGenericBatching';

14 +import SyntheticEvent from 'events/SyntheticEvent';

15 +import isTextInputElement from 'shared/isTextInputElement';

16 +import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';

17 +

18 +import getEventTarget from './getEventTarget';

19 +import isEventSupported from './isEventSupported';

20 +import ReactDOMComponentTree from '../client/ReactDOMComponentTree';

21 +import * as inputValueTracking from '../client/inputValueTracking';

23 var eventTypes = {

24 change: {

@@ -305,4 +305,4 @@ var ChangeEventPlugin = {

305 },

306 };

307

308 -module.exports = ChangeEventPlugin;

308 +export default ChangeEventPlugin;

packages/react-dom/src/events/DOMEventPluginOrder.js

+1 -1

@@ -26,4 +26,4 @@ var DOMEventPluginOrder = [

26 'BeforeInputEventPlugin',

27 ];

29 -module.exports = DOMEventPluginOrder;

29 +export default DOMEventPluginOrder;

packages/react-dom/src/events/EnterLeaveEventPlugin.js

+4 -4

@@ -7,10 +7,10 @@

8 'use strict';

10 -var EventPropagators = require('events/EventPropagators');

10 +import EventPropagators from 'events/EventPropagators';

12 -var SyntheticMouseEvent = require('./SyntheticMouseEvent');

13 -var ReactDOMComponentTree = require('../client/ReactDOMComponentTree');

12 +import SyntheticMouseEvent from './SyntheticMouseEvent';

13 +import ReactDOMComponentTree from '../client/ReactDOMComponentTree';

15 var eventTypes = {

16 mouseEnter: {

@@ -116,4 +116,4 @@ var EnterLeaveEventPlugin = {

116 },

117 };

118

119 -module.exports = EnterLeaveEventPlugin;

119 +export default EnterLeaveEventPlugin;

packages/react-dom/src/events/FallbackCompositionState.js

+2 -2

@@ -7,7 +7,7 @@

8 'use strict';

10 -var getTextContentAccessor = require('../client/getTextContentAccessor');

10 +import getTextContentAccessor from '../client/getTextContentAccessor';

12 /**

13 * This helper object stores information about text content of a target node,

@@ -74,4 +74,4 @@ var FallbackCompositionState = {

74 },

75 };

77 -module.exports = FallbackCompositionState;

77 +export default FallbackCompositionState;

packages/react-dom/src/events/ReactBrowserEventEmitter.js

+8 -6

@@ -7,12 +7,14 @@

8 'use strict';

10 -var EventPluginRegistry = require('events/EventPluginRegistry');

11 -var ReactEventEmitterMixin = require('events/ReactEventEmitterMixin');

10 +import EventPluginRegistry from 'events/EventPluginRegistry';

11 +import ReactEventEmitterMixin from 'events/ReactEventEmitterMixin';

13 -var ReactDOMEventListener = require('./ReactDOMEventListener');

14 -var isEventSupported = require('./isEventSupported');

15 -var {topLevelTypes} = require('./BrowserEventConstants');

13 +import ReactDOMEventListener from './ReactDOMEventListener';

14 +import isEventSupported from './isEventSupported';

15 +import BrowserEventConstants from './BrowserEventConstants';

16 +

17 +var {topLevelTypes} = BrowserEventConstants;

19 /**

20 * Summary of `ReactBrowserEventEmitter` event handling:

@@ -237,4 +239,4 @@ var ReactBrowserEventEmitter = Object.assign({}, ReactEventEmitterMixin, {

239 },

240 });

241

240 -module.exports = ReactBrowserEventEmitter;

242 +export default ReactBrowserEventEmitter;

packages/react-dom/src/events/ReactDOMEventListener.js

+8 -9

@@ -7,14 +7,13 @@

8 'use strict';

10 -var ReactGenericBatching = require('events/ReactGenericBatching');

11 -var ReactFiberTreeReflection = require('shared/ReactFiberTreeReflection');

12 -var ReactTypeOfWork = require('shared/ReactTypeOfWork');

13 -var EventListener = require('fbjs/lib/EventListener');

14 -var {HostRoot} = ReactTypeOfWork;

10 +import ReactGenericBatching from 'events/ReactGenericBatching';

11 +import {isFiberMounted} from 'shared/ReactFiberTreeReflection';

12 +import {HostRoot} from 'shared/ReactTypeOfWork';

13 +import EventListener from 'fbjs/lib/EventListener';

16 -var getEventTarget = require('./getEventTarget');

17 -var ReactDOMComponentTree = require('../client/ReactDOMComponentTree');

15 +import getEventTarget from './getEventTarget';

16 +import ReactDOMComponentTree from '../client/ReactDOMComponentTree';

18 var CALLBACK_BOOKKEEPING_POOL_SIZE = 10;

19 var callbackBookkeepingPool = [];

@@ -167,7 +166,7 @@ var ReactDOMEventListener = {

166 if (

167 targetInst !== null &&

168 typeof targetInst.tag === 'number' &&

170 - !ReactFiberTreeReflection.isFiberMounted(targetInst)

169 + !isFiberMounted(targetInst)

170 ) {

171 // If we get an event (ex: img onload) before committing that

172 // component's mount, ignore it for now (that is, treat it as if it was an

@@ -192,4 +191,4 @@ var ReactDOMEventListener = {

191 },

192 };

193

195 -module.exports = ReactDOMEventListener;

194 +export default ReactDOMEventListener;

packages/react-dom/src/events/SelectEventPlugin.js

+12 -12

@@ -7,17 +7,17 @@

8 'use strict';

10 -var EventPropagators = require('events/EventPropagators');

11 -var ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment');

12 -var SyntheticEvent = require('events/SyntheticEvent');

13 -var isTextInputElement = require('shared/isTextInputElement');

14 -var getActiveElement = require('fbjs/lib/getActiveElement');

15 -var shallowEqual = require('fbjs/lib/shallowEqual');

16 -

17 -var ReactBrowserEventEmitter = require('./ReactBrowserEventEmitter');

18 -var ReactDOMComponentTree = require('../client/ReactDOMComponentTree');

19 -var ReactInputSelection = require('../client/ReactInputSelection');

20 -var {DOCUMENT_NODE} = require('../shared/HTMLNodeType');

10 +import EventPropagators from 'events/EventPropagators';

11 +import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';

12 +import SyntheticEvent from 'events/SyntheticEvent';

13 +import isTextInputElement from 'shared/isTextInputElement';

14 +import getActiveElement from 'fbjs/lib/getActiveElement';

15 +import shallowEqual from 'fbjs/lib/shallowEqual';

16 +

17 +import ReactBrowserEventEmitter from './ReactBrowserEventEmitter';

18 +import ReactDOMComponentTree from '../client/ReactDOMComponentTree';

19 +import * as ReactInputSelection from '../client/ReactInputSelection';

20 +import {DOCUMENT_NODE} from '../shared/HTMLNodeType';

22 var skipSelectionChangeEvent =

23 ExecutionEnvironment.canUseDOM &&

@@ -209,4 +209,4 @@ var SelectEventPlugin = {

209 },

210 };

211

212 -module.exports = SelectEventPlugin;

212 +export default SelectEventPlugin;

packages/react-dom/src/events/SimpleEventPlugin.js

+15 -18

@@ -17,24 +17,21 @@ import type {

17 import type {Fiber} from 'react-reconciler/src/ReactFiber';

18 import type {EventTypes, PluginModule} from 'events/PluginModuleType';

20 -var EventPropagators = require('events/EventPropagators');

21 -var SyntheticEvent = require('events/SyntheticEvent');

20 +import EventPropagators from 'events/EventPropagators';

21 +import SyntheticEvent from 'events/SyntheticEvent';

22 +import warning from 'fbjs/lib/warning';

23 -var SyntheticAnimationEvent = require('./SyntheticAnimationEvent');

24 -var SyntheticClipboardEvent = require('./SyntheticClipboardEvent');

25 -var SyntheticFocusEvent = require('./SyntheticFocusEvent');

26 -var SyntheticKeyboardEvent = require('./SyntheticKeyboardEvent');

27 -var SyntheticMouseEvent = require('./SyntheticMouseEvent');

28 -var SyntheticDragEvent = require('./SyntheticDragEvent');

29 -var SyntheticTouchEvent = require('./SyntheticTouchEvent');

30 -var SyntheticTransitionEvent = require('./SyntheticTransitionEvent');

31 -var SyntheticUIEvent = require('./SyntheticUIEvent');

32 -var SyntheticWheelEvent = require('./SyntheticWheelEvent');

33 -var getEventCharCode = require('./getEventCharCode');

34 -

35 -if (__DEV__) {

36 - var warning = require('fbjs/lib/warning');

37 -}

24 +import SyntheticAnimationEvent from './SyntheticAnimationEvent';

25 +import SyntheticClipboardEvent from './SyntheticClipboardEvent';

26 +import SyntheticFocusEvent from './SyntheticFocusEvent';

27 +import SyntheticKeyboardEvent from './SyntheticKeyboardEvent';

28 +import SyntheticMouseEvent from './SyntheticMouseEvent';

29 +import SyntheticDragEvent from './SyntheticDragEvent';

30 +import SyntheticTouchEvent from './SyntheticTouchEvent';

31 +import SyntheticTransitionEvent from './SyntheticTransitionEvent';

32 +import SyntheticUIEvent from './SyntheticUIEvent';

33 +import SyntheticWheelEvent from './SyntheticWheelEvent';

34 +import getEventCharCode from './getEventCharCode';

36 /**

37 * Turns

@@ -284,4 +281,4 @@ var SimpleEventPlugin: PluginModule<MouseEvent> = {

281 },

282 };

283

287 -module.exports = SimpleEventPlugin;

284 +export default SimpleEventPlugin;

packages/react-dom/src/events/SyntheticAnimationEvent.js

+2 -2

@@ -7,7 +7,7 @@

8 'use strict';

10 -var SyntheticEvent = require('events/SyntheticEvent');

10 +import SyntheticEvent from 'events/SyntheticEvent';

12 /**

13 * @interface Event

@@ -43,4 +43,4 @@ function SyntheticAnimationEvent(

44 SyntheticEvent.augmentClass(SyntheticAnimationEvent, AnimationEventInterface);

46 -module.exports = SyntheticAnimationEvent;

46 +export default SyntheticAnimationEvent;

packages/react-dom/src/events/SyntheticClipboardEvent.js

+2 -2

@@ -7,7 +7,7 @@

8 'use strict';

10 -var SyntheticEvent = require('events/SyntheticEvent');

10 +import SyntheticEvent from 'events/SyntheticEvent';

12 /**

13 * @interface Event

@@ -44,4 +44,4 @@ function SyntheticClipboardEvent(

45 SyntheticEvent.augmentClass(SyntheticClipboardEvent, ClipboardEventInterface);

47 -module.exports = SyntheticClipboardEvent;

47 +export default SyntheticClipboardEvent;

packages/react-dom/src/events/SyntheticCompositionEvent.js

+2 -2

@@ -7,7 +7,7 @@

8 'use strict';

10 -var SyntheticEvent = require('events/SyntheticEvent');

10 +import SyntheticEvent from 'events/SyntheticEvent';

12 /**

13 * @interface Event

@@ -43,4 +43,4 @@ SyntheticEvent.augmentClass(

43 CompositionEventInterface,

44 );

46 -module.exports = SyntheticCompositionEvent;

46 +export default SyntheticCompositionEvent;

packages/react-dom/src/events/SyntheticDragEvent.js

+2 -2

@@ -7,7 +7,7 @@

8 'use strict';

10 -var SyntheticMouseEvent = require('./SyntheticMouseEvent');

10 +import SyntheticMouseEvent from './SyntheticMouseEvent';

12 /**

13 * @interface DragEvent

@@ -40,4 +40,4 @@ function SyntheticDragEvent(

41 SyntheticMouseEvent.augmentClass(SyntheticDragEvent, DragEventInterface);

43 -module.exports = SyntheticDragEvent;

43 +export default SyntheticDragEvent;

packages/react-dom/src/events/SyntheticFocusEvent.js

+2 -2

@@ -7,7 +7,7 @@

8 'use strict';

10 -var SyntheticUIEvent = require('./SyntheticUIEvent');

10 +import SyntheticUIEvent from './SyntheticUIEvent';

12 /**

13 * @interface FocusEvent

@@ -40,4 +40,4 @@ function SyntheticFocusEvent(

41 SyntheticUIEvent.augmentClass(SyntheticFocusEvent, FocusEventInterface);

43 -module.exports = SyntheticFocusEvent;

43 +export default SyntheticFocusEvent;

packages/react-dom/src/events/SyntheticInputEvent.js

+2 -2

@@ -7,7 +7,7 @@

8 'use strict';

10 -var SyntheticEvent = require('events/SyntheticEvent');

10 +import SyntheticEvent from 'events/SyntheticEvent';

12 /**

13 * @interface Event

@@ -41,4 +41,4 @@ function SyntheticInputEvent(

42 SyntheticEvent.augmentClass(SyntheticInputEvent, InputEventInterface);

44 -module.exports = SyntheticInputEvent;

44 +export default SyntheticInputEvent;

packages/react-dom/src/events/SyntheticKeyboardEvent.js

+5 -5

@@ -7,10 +7,10 @@

8 'use strict';

10 -var SyntheticUIEvent = require('./SyntheticUIEvent');

11 -var getEventCharCode = require('./getEventCharCode');

12 -var getEventKey = require('./getEventKey');

13 -var getEventModifierState = require('./getEventModifierState');

10 +import SyntheticUIEvent from './SyntheticUIEvent';

11 +import getEventCharCode from './getEventCharCode';

12 +import getEventKey from './getEventKey';

13 +import getEventModifierState from './getEventModifierState';

15 /**

16 * @interface KeyboardEvent

@@ -87,4 +87,4 @@ function SyntheticKeyboardEvent(

88 SyntheticUIEvent.augmentClass(SyntheticKeyboardEvent, KeyboardEventInterface);

90 -module.exports = SyntheticKeyboardEvent;

90 +export default SyntheticKeyboardEvent;

packages/react-dom/src/events/SyntheticMouseEvent.js

+3 -3

@@ -7,8 +7,8 @@

8 'use strict';

10 -var SyntheticUIEvent = require('./SyntheticUIEvent');

11 -var getEventModifierState = require('./getEventModifierState');

10 +import SyntheticUIEvent from './SyntheticUIEvent';

11 +import getEventModifierState from './getEventModifierState';

13 /**

14 * @interface MouseEvent

@@ -61,4 +61,4 @@ function SyntheticMouseEvent(

62 SyntheticUIEvent.augmentClass(SyntheticMouseEvent, MouseEventInterface);

64 -module.exports = SyntheticMouseEvent;

64 +export default SyntheticMouseEvent;

packages/react-dom/src/events/SyntheticTouchEvent.js

+3 -3

@@ -7,8 +7,8 @@

8 'use strict';

10 -var SyntheticUIEvent = require('./SyntheticUIEvent');

11 -var getEventModifierState = require('./getEventModifierState');

10 +import SyntheticUIEvent from './SyntheticUIEvent';

11 +import getEventModifierState from './getEventModifierState';

13 /**

14 * @interface TouchEvent

@@ -48,4 +48,4 @@ function SyntheticTouchEvent(

49 SyntheticUIEvent.augmentClass(SyntheticTouchEvent, TouchEventInterface);

51 -module.exports = SyntheticTouchEvent;

51 +export default SyntheticTouchEvent;

packages/react-dom/src/events/SyntheticTransitionEvent.js

+2 -2

@@ -7,7 +7,7 @@

8 'use strict';

10 -var SyntheticEvent = require('events/SyntheticEvent');

10 +import SyntheticEvent from 'events/SyntheticEvent';

12 /**

13 * @interface Event

@@ -43,4 +43,4 @@ function SyntheticTransitionEvent(

44 SyntheticEvent.augmentClass(SyntheticTransitionEvent, TransitionEventInterface);

46 -module.exports = SyntheticTransitionEvent;

46 +export default SyntheticTransitionEvent;

packages/react-dom/src/events/SyntheticUIEvent.js

+2 -2

@@ -7,7 +7,7 @@

8 'use strict';

10 -var SyntheticEvent = require('events/SyntheticEvent');

10 +import SyntheticEvent from 'events/SyntheticEvent';

12 /**

13 * @interface UIEvent

@@ -41,4 +41,4 @@ function SyntheticUIEvent(

42 SyntheticEvent.augmentClass(SyntheticUIEvent, UIEventInterface);

44 -module.exports = SyntheticUIEvent;

44 +export default SyntheticUIEvent;

packages/react-dom/src/events/SyntheticWheelEvent.js

+2 -2

@@ -7,7 +7,7 @@

8 'use strict';

10 -var SyntheticMouseEvent = require('./SyntheticMouseEvent');

10 +import SyntheticMouseEvent from './SyntheticMouseEvent';

12 /**

13 * @interface WheelEvent

@@ -61,4 +61,4 @@ function SyntheticWheelEvent(

62 SyntheticMouseEvent.augmentClass(SyntheticWheelEvent, WheelEventInterface);

64 -module.exports = SyntheticWheelEvent;

64 +export default SyntheticWheelEvent;

packages/react-dom/src/events/TapEventPlugin.js

+7 -6

@@ -9,14 +9,15 @@

10 'use strict';

12 -var EventPluginUtils = require('events/EventPluginUtils');

13 -var EventPropagators = require('events/EventPropagators');

14 -var TouchEventUtils = require('fbjs/lib/TouchEventUtils');

12 +import EventPluginUtils from 'events/EventPluginUtils';

13 +import EventPropagators from 'events/EventPropagators';

14 +import TouchEventUtils from 'fbjs/lib/TouchEventUtils';

15 +

16 +import SyntheticUIEvent from './SyntheticUIEvent';

17 +

18 var isStartish = EventPluginUtils.isStartish;

19 var isEndish = EventPluginUtils.isEndish;

18 -var SyntheticUIEvent = require('./SyntheticUIEvent');

19 -

21 /**

22 * We are extending the Flow 'Touch' declaration to enable using bracket

23 * notation to access properties.

@@ -150,4 +151,4 @@ var TapEventPlugin = {

151 },

152 };

153

153 -module.exports = TapEventPlugin;

154 +export default TapEventPlugin;

packages/react-dom/src/events/__tests__/BeforeInputEventPlugin-test.js

+4 -4

@@ -49,10 +49,10 @@ describe('BeforeInputEventPlugin', function() {

49 this.ReactDOM = require('react-dom');

51 // TODO: can we express this test with only public API?

52 - this.ReactDOMComponentTree = require('../../client//ReactDOMComponentTree');

53 - this.SyntheticCompositionEvent = require('../SyntheticCompositionEvent');

54 - this.SyntheticInputEvent = require('../SyntheticInputEvent');

55 - this.BeforeInputEventPlugin = require('../BeforeInputEventPlugin');

52 + this.ReactDOMComponentTree = require('../../client/ReactDOMComponentTree').default;

53 + this.SyntheticCompositionEvent = require('../SyntheticCompositionEvent').default;

54 + this.SyntheticInputEvent = require('../SyntheticInputEvent').default;

55 + this.BeforeInputEventPlugin = require('../BeforeInputEventPlugin').default;

56 }

58 function extract(node, eventType, optionalData) {

packages/react-dom/src/events/__tests__/ChangeEventPlugin-test.js

+1 -1

@@ -13,7 +13,7 @@ var React = require('react');

13 var ReactDOM = require('react-dom');

14 var ReactTestUtils = require('react-dom/test-utils');

15 // TODO: can we express this test with only public API?

16 -var ChangeEventPlugin = require('../ChangeEventPlugin');

16 +var ChangeEventPlugin = require('../ChangeEventPlugin').default;

17 var inputValueTracking = require('../../client/inputValueTracking');

19 function getTrackedValue(elem) {

packages/react-dom/src/events/__tests__/EnterLeaveEventPlugin-test.js

+3 -2

@@ -23,8 +23,9 @@ describe('EnterLeaveEventPlugin', () => {

23 ReactDOM = require('react-dom');

24 ReactTestUtils = require('react-dom/test-utils');

25 // TODO: can we express this test with only public API?

26 - ReactDOMComponentTree = require('../../client/ReactDOMComponentTree');

27 - EnterLeaveEventPlugin = require('../EnterLeaveEventPlugin');

26 + ReactDOMComponentTree = require('../../client/ReactDOMComponentTree')

27 + .default;

28 + EnterLeaveEventPlugin = require('../EnterLeaveEventPlugin').default;

29 });

31 it('should set relatedTarget properly in iframe', () => {

packages/react-dom/src/events/__tests__/FallbackCompositionState-test.js

+1 -1

@@ -16,7 +16,7 @@ describe('FallbackCompositionState', () => {

17 beforeEach(() => {

18 // TODO: can we express this test with only public API?

19 - FallbackCompositionState = require('../FallbackCompositionState');

19 + FallbackCompositionState = require('../FallbackCompositionState').default;

20 });

22 function getInput() {

packages/react-dom/src/events/__tests__/SelectEventPlugin-test.js

+3 -2

@@ -30,8 +30,9 @@ describe('SelectEventPlugin', () => {

30 ReactDOM = require('react-dom');

31 ReactTestUtils = require('react-dom/test-utils');

32 // TODO: can we express this test with only public API?

33 - ReactDOMComponentTree = require('../../client/ReactDOMComponentTree');

34 - SelectEventPlugin = require('../SelectEventPlugin');

33 + ReactDOMComponentTree = require('../../client/ReactDOMComponentTree')

34 + .default;

35 + SelectEventPlugin = require('../SelectEventPlugin').default;

36 });

38 it('should skip extraction if no listeners are present', () => {

packages/react-dom/src/events/__tests__/SyntheticClipboardEvent-test.js

+2 -2

@@ -16,9 +16,9 @@ describe('SyntheticClipboardEvent', () => {

17 beforeEach(() => {

18 // TODO: can we express this test with only public API?

19 - SyntheticClipboardEvent = require('../SyntheticClipboardEvent');

19 + SyntheticClipboardEvent = require('../SyntheticClipboardEvent').default;

20 createEvent = function(nativeEvent) {

21 - var target = require('../getEventTarget')(nativeEvent);

21 + var target = require('../getEventTarget').default(nativeEvent);

22 return SyntheticClipboardEvent.getPooled({}, '', nativeEvent, target);

23 };

24 });

packages/react-dom/src/events/__tests__/SyntheticEvent-test.js

+2 -2

@@ -19,13 +19,13 @@ describe('SyntheticEvent', () => {

20 beforeEach(() => {

21 // TODO: can we express this test with only public API?

22 - SyntheticEvent = require('events/SyntheticEvent');

22 + SyntheticEvent = require('events/SyntheticEvent').default;

23 React = require('react');

24 ReactDOM = require('react-dom');

25 ReactTestUtils = require('react-dom/test-utils');

27 createEvent = function(nativeEvent) {

28 - var target = require('../getEventTarget')(nativeEvent);

28 + var target = require('../getEventTarget').default(nativeEvent);

29 return SyntheticEvent.getPooled({}, '', nativeEvent, target);

30 };

31 });

packages/react-dom/src/events/__tests__/SyntheticKeyboardEvent-test.js

+3 -3

@@ -18,12 +18,12 @@ describe('SyntheticKeyboardEvent', () => {

18 beforeEach(() => {

19 // Mock getEventCharCode for proper unit testing

20 jest.mock('../getEventCharCode');

21 - getEventCharCode = require('../getEventCharCode');

21 + getEventCharCode = require('../getEventCharCode').default;

23 // TODO: can we express this test with only public API?

24 - SyntheticKeyboardEvent = require('../SyntheticKeyboardEvent');

24 + SyntheticKeyboardEvent = require('../SyntheticKeyboardEvent').default;

25 createEvent = function(nativeEvent) {

26 - var target = require('../getEventTarget')(nativeEvent);

26 + var target = require('../getEventTarget').default(nativeEvent);

27 return SyntheticKeyboardEvent.getPooled({}, '', nativeEvent, target);

28 };

29 });

packages/react-dom/src/events/__tests__/SyntheticWheelEvent-test.js

+2 -2

@@ -16,10 +16,10 @@ describe('SyntheticWheelEvent', () => {

17 beforeEach(() => {

18 // TODO: can we express this test with only public API?

19 - SyntheticWheelEvent = require('../SyntheticWheelEvent');

19 + SyntheticWheelEvent = require('../SyntheticWheelEvent').default;

21 createEvent = function(nativeEvent) {

22 - var target = require('../getEventTarget')(nativeEvent);

22 + var target = require('../getEventTarget').default(nativeEvent);

23 return SyntheticWheelEvent.getPooled({}, '', nativeEvent, target);

24 };

25 });

packages/react-dom/src/events/__tests__/getEventCharCode-test.js

+1 -1

@@ -10,7 +10,7 @@

10 'use strict';

12 // TODO: can we express this test with only public API?

13 -var getEventCharCode = require('../getEventCharCode');

13 +var getEventCharCode = require('../getEventCharCode').default;

15 describe('getEventCharCode', () => {

16 describe('when charCode is present in nativeEvent', () => {

packages/react-dom/src/events/__tests__/getEventKey-test.js

+1 -1

@@ -10,7 +10,7 @@

10 'use strict';

12 // TODO: can we express this test with only public API?

13 -var getEventKey = require('../getEventKey');

13 +var getEventKey = require('../getEventKey').default;

15 describe('getEventKey', () => {

16 describe('when key is implemented in a browser', () => {

packages/react-dom/src/events/getEventCharCode.js

+1 -1

@@ -42,4 +42,4 @@ function getEventCharCode(nativeEvent) {

42 return 0;

43 }

45 -module.exports = getEventCharCode;

45 +export default getEventCharCode;

packages/react-dom/src/events/getEventKey.js

+2 -2

@@ -7,7 +7,7 @@

8 'use strict';

10 -var getEventCharCode = require('./getEventCharCode');

10 +import getEventCharCode from './getEventCharCode';

12 /**

13 * Normalization of deprecated HTML5 `key` values

@@ -105,4 +105,4 @@ function getEventKey(nativeEvent) {

105 return '';

106 }

107

108 -module.exports = getEventKey;

108 +export default getEventKey;

packages/react-dom/src/events/getEventModifierState.js

+1 -1

@@ -36,4 +36,4 @@ function getEventModifierState(nativeEvent) {

36 return modifierStateGetter;

37 }

39 -module.exports = getEventModifierState;

39 +export default getEventModifierState;

packages/react-dom/src/events/getEventTarget.js

+2 -2

@@ -7,7 +7,7 @@

8 'use strict';

10 -var {TEXT_NODE} = require('../shared/HTMLNodeType');

10 +import {TEXT_NODE} from '../shared/HTMLNodeType';

12 /**

13 * Gets the target node from a native browser event by accounting for

@@ -29,4 +29,4 @@ function getEventTarget(nativeEvent) {

29 return target.nodeType === TEXT_NODE ? target.parentNode : target;

30 }

32 -module.exports = getEventTarget;

32 +export default getEventTarget;

packages/react-dom/src/events/getVendorPrefixedEventName.js

+2 -2

@@ -7,7 +7,7 @@

8 'use strict';

10 -var ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment');

10 +import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';

12 /**

13 * Generate a mapping of standard vendor prefixes using the defined style property and event name.

@@ -94,4 +94,4 @@ function getVendorPrefixedEventName(eventName) {

94 return '';

95 }

97 -module.exports = getVendorPrefixedEventName;

97 +export default getVendorPrefixedEventName;

packages/react-dom/src/events/isEventSupported.js

+2 -2

@@ -7,7 +7,7 @@

8 'use strict';

10 -var ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment');

10 +import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';

12 var useHasFeature;

13 if (ExecutionEnvironment.canUseDOM) {

@@ -58,4 +58,4 @@ function isEventSupported(eventNameSuffix, capture) {

58 return isSupported;

59 }

61 -module.exports = isEventSupported;

61 +export default isEventSupported;

packages/react-dom/src/server/DOMMarkupOperations.js

+5 -7

@@ -7,12 +7,10 @@

8 'use strict';

10 -var DOMProperty = require('../shared/DOMProperty');

11 -var quoteAttributeValueForBrowser = require('../shared/quoteAttributeValueForBrowser');

12 -

13 -if (__DEV__) {

14 - var warning = require('fbjs/lib/warning');

15 -}

10 +import DOMProperty from '../shared/DOMProperty';

11 +import quoteAttributeValueForBrowser

12 + from '../shared/quoteAttributeValueForBrowser';

13 +import warning from 'fbjs/lib/warning';

15 // isAttributeNameSafe() is currently duplicated in DOMPropertyOperations.

16 // TODO: Find a better place for this.

@@ -124,4 +122,4 @@ var DOMMarkupOperations = {

122 },

123 };

124

127 -module.exports = DOMMarkupOperations;

125 +export default DOMMarkupOperations;

packages/react-dom/src/server/ReactDOMNodeStreamRenderer.js

+4 -9

@@ -7,9 +7,9 @@

8 'use strict';

10 -var Readable = require('stream').Readable;

10 +import {Readable} from 'stream';

12 -var ReactPartialRenderer = require('./ReactPartialRenderer');

12 +import ReactPartialRenderer from './ReactPartialRenderer';

14 // This is a Readable Node.js stream which wraps the ReactDOMPartialRenderer.

15 class ReactMarkupReadableStream extends Readable {

@@ -33,7 +33,7 @@ class ReactMarkupReadableStream extends Readable {

33 * server.

34 * See https://reactjs.org/docs/react-dom-stream.html#rendertonodestream

35 */

36 -function renderToNodeStream(element) {

36 +export function renderToNodeStream(element) {

37 return new ReactMarkupReadableStream(element, false);

38 }

@@ -42,11 +42,6 @@ function renderToNodeStream(element) {

42 * such as data-react-id that React uses internally.

43 * See https://reactjs.org/docs/react-dom-stream.html#rendertostaticnodestream

44 */

45 -function renderToStaticNodeStream(element) {

45 +export function renderToStaticNodeStream(element) {

46 return new ReactMarkupReadableStream(element, true);

47 }

48 -

49 -module.exports = {

50 - renderToNodeStream: renderToNodeStream,

51 - renderToStaticNodeStream: renderToStaticNodeStream,

52 -};

packages/react-dom/src/server/ReactDOMServerBrowser.js

+26 -22

@@ -7,29 +7,33 @@

8 'use strict';

10 -require('../shared/ReactDOMInjection');

10 +import '../shared/ReactDOMInjection';

11 +import ReactVersion from 'shared/ReactVersion';

12 +import invariant from 'fbjs/lib/invariant';

12 -var ReactVersion = require('shared/ReactVersion');

13 -var invariant = require('fbjs/lib/invariant');

14 +import {renderToString, renderToStaticMarkup} from './ReactDOMStringRenderer';

15 -var ReactDOMStringRenderer = require('./ReactDOMStringRenderer');

16 +function renderToNodeStream() {

17 + invariant(

18 + false,

19 + 'ReactDOMServer.renderToNodeStream(): The streaming API is not available ' +

20 + 'in the browser. Use ReactDOMServer.renderToString() instead.',

21 + );

22 +}

17 -module.exports = {

18 - renderToString: ReactDOMStringRenderer.renderToString,

19 - renderToStaticMarkup: ReactDOMStringRenderer.renderToStaticMarkup,

20 - renderToNodeStream() {

21 - invariant(

22 - false,

23 - 'ReactDOMServer.renderToNodeStream(): The streaming API is not available ' +

24 - 'in the browser. Use ReactDOMServer.renderToString() instead.',

25 - );

26 - },

27 - renderToStaticNodeStream() {

28 - invariant(

29 - false,

30 - 'ReactDOMServer.renderToStaticNodeStream(): The streaming API is not available ' +

31 - 'in the browser. Use ReactDOMServer.renderToStaticMarkup() instead.',

32 - );

33 - },

34 - version: ReactVersion,

24 +function renderToStaticNodeStream() {

25 + invariant(

26 + false,

27 + 'ReactDOMServer.renderToStaticNodeStream(): The streaming API is not available ' +

28 + 'in the browser. Use ReactDOMServer.renderToStaticMarkup() instead.',

29 + );

30 +}

31 +

32 +export {

33 + renderToString,

34 + renderToStaticMarkup,

35 + renderToNodeStream,

36 + renderToStaticNodeStream,

37 };

38 +

39 +export const version = ReactVersion;

packages/react-dom/src/server/ReactDOMServerNode.js

+14 -11

@@ -7,17 +7,20 @@

8 'use strict';

10 -require('../shared/ReactDOMInjection');

10 +import '../shared/ReactDOMInjection';

11 +import ReactVersion from 'shared/ReactVersion';

12 -var ReactVersion = require('shared/ReactVersion');

13 +import {renderToString, renderToStaticMarkup} from './ReactDOMStringRenderer';

14 +import {

15 + renderToNodeStream,

16 + renderToStaticNodeStream,

17 +} from './ReactDOMNodeStreamRenderer';

14 -var ReactDOMStringRenderer = require('./ReactDOMStringRenderer');

15 -var ReactDOMNodeStreamRenderer = require('./ReactDOMNodeStreamRenderer');

16 -

17 -module.exports = {

18 - renderToString: ReactDOMStringRenderer.renderToString,

19 - renderToStaticMarkup: ReactDOMStringRenderer.renderToStaticMarkup,

20 - renderToNodeStream: ReactDOMNodeStreamRenderer.renderToNodeStream,

21 - renderToStaticNodeStream: ReactDOMNodeStreamRenderer.renderToStaticNodeStream,

22 - version: ReactVersion,

19 +export {

20 + renderToString,

21 + renderToStaticMarkup,

22 + renderToNodeStream,

23 + renderToStaticNodeStream,

24 };

25 +

26 +export const version = ReactVersion;

packages/react-dom/src/server/ReactDOMStringRenderer.js

+3 -8

@@ -7,14 +7,14 @@

8 'use strict';

10 -var ReactPartialRenderer = require('./ReactPartialRenderer');

10 +import ReactPartialRenderer from './ReactPartialRenderer';

12 /**

13 * Render a ReactElement to its initial HTML. This should only be used on the

14 * server.

15 * See https://reactjs.org/docs/react-dom-server.html#rendertostring

16 */

17 -function renderToString(element) {

17 +export function renderToString(element) {

18 var renderer = new ReactPartialRenderer(element, false);

19 var markup = renderer.read(Infinity);

20 return markup;

@@ -25,13 +25,8 @@ function renderToString(element) {

25 * such as data-react-id that React uses internally.

26 * See https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup

27 */

28 -function renderToStaticMarkup(element) {

28 +export function renderToStaticMarkup(element) {

29 var renderer = new ReactPartialRenderer(element, true);

30 var markup = renderer.read(Infinity);

31 return markup;

32 }

33 -

34 -module.exports = {

35 - renderToString: renderToString,

36 - renderToStaticMarkup: renderToStaticMarkup,

37 -};

packages/react-dom/src/server/ReactPartialRenderer.js

+32 -33

@@ -11,25 +11,40 @@

12 import type {ReactElement} from 'shared/ReactElementType';

14 -var React = require('react');

15 -var emptyFunction = require('fbjs/lib/emptyFunction');

16 -var emptyObject = require('fbjs/lib/emptyObject');

17 -var hyphenateStyleName = require('fbjs/lib/hyphenateStyleName');

18 -var invariant = require('fbjs/lib/invariant');

19 -var memoizeStringOnly = require('fbjs/lib/memoizeStringOnly');

20 -

21 -var DOMMarkupOperations = require('./DOMMarkupOperations');

22 -var {

14 +import React from 'react';

15 +import emptyFunction from 'fbjs/lib/emptyFunction';

16 +import emptyObject from 'fbjs/lib/emptyObject';

17 +import hyphenateStyleName from 'fbjs/lib/hyphenateStyleName';

18 +import invariant from 'fbjs/lib/invariant';

19 +import memoizeStringOnly from 'fbjs/lib/memoizeStringOnly';

20 +import warning from 'fbjs/lib/warning';

21 +import checkPropTypes from 'prop-types/checkPropTypes';

22 +import describeComponentFrame from 'shared/describeComponentFrame';

23 +import {ReactDebugCurrentFrame} from 'shared/ReactGlobalSharedState';

24 +

25 +import DOMMarkupOperations from './DOMMarkupOperations';

26 +import {

27 Namespaces,

28 getIntrinsicNamespace,

29 getChildNamespace,

26 -} = require('../shared/DOMNamespaces');

27 -var ReactControlledValuePropTypes = require('../shared/ReactControlledValuePropTypes');

28 -var assertValidProps = require('../shared/assertValidProps');

29 -var dangerousStyleValue = require('../shared/dangerousStyleValue');

30 -var escapeTextContentForBrowser = require('../shared/escapeTextContentForBrowser');

31 -var isCustomComponent = require('../shared/isCustomComponent');

32 -var omittedCloseTags = require('../shared/omittedCloseTags');

30 +} from '../shared/DOMNamespaces';

31 +import ReactControlledValuePropTypes

32 + from '../shared/ReactControlledValuePropTypes';

33 +import assertValidProps from '../shared/assertValidProps';

34 +import dangerousStyleValue from '../shared/dangerousStyleValue';

35 +import escapeTextContentForBrowser from '../shared/escapeTextContentForBrowser';

36 +import isCustomComponent from '../shared/isCustomComponent';

37 +import omittedCloseTags from '../shared/omittedCloseTags';

38 +import warnValidStyle from '../shared/warnValidStyle';

39 +import {

40 + validateProperties as validateARIAProperties,

41 +} from '../shared/ReactDOMInvalidARIAHook';

42 +import {

43 + validateProperties as validateInputProperties,

44 +} from '../shared/ReactDOMNullInputValuePropHook';

45 +import {

46 + validateProperties as validateUnknownProperties,

47 +} from '../shared/ReactDOMUnknownPropertyHook';

49 var REACT_FRAGMENT_TYPE =

50 (typeof Symbol === 'function' &&

@@ -46,27 +61,12 @@ var toArray = ((React.Children.toArray: any): toArrayType);

61 var getStackAddendum = emptyFunction.thatReturns('');

63 if (__DEV__) {

49 - var warning = require('fbjs/lib/warning');

50 - var checkPropTypes = require('prop-types/checkPropTypes');

51 -

52 - var warnValidStyle = require('../shared/warnValidStyle');

53 - var {

54 - validateProperties: validateARIAProperties,

55 - } = require('../shared/ReactDOMInvalidARIAHook');

56 - var {

57 - validateProperties: validateInputProperties,

58 - } = require('../shared/ReactDOMNullInputValuePropHook');

59 - var {

60 - validateProperties: validateUnknownProperties,

61 - } = require('../shared/ReactDOMUnknownPropertyHook');

62 -

64 var validatePropertiesInDevelopment = function(type, props) {

65 validateARIAProperties(type, props);

66 validateInputProperties(type, props);

67 validateUnknownProperties(type, props);

68 };

69 - var describeComponentFrame = require('shared/describeComponentFrame');

70 var describeStackFrame = function(element): string {

71 var source = element._source;

72 var type = element.type;

@@ -75,7 +75,6 @@ if (__DEV__) {

75 return describeComponentFrame(name, source, ownerName);

76 };

78 - var {ReactDebugCurrentFrame} = require('shared/ReactGlobalSharedState');

78 var currentDebugStack = null;

79 var currentDebugElementStack = null;

80 var setCurrentDebugStack = function(stack: Array<Frame>) {

@@ -933,4 +932,4 @@ class ReactDOMServerRenderer {

932 }

933 }

934

936 -module.exports = ReactDOMServerRenderer;

935 +export default ReactDOMServerRenderer;

packages/react-dom/src/shared/CSSProperty.js

+1 -7

@@ -10,7 +10,7 @@

10 /**

11 * CSS properties which accept numbers but are not in units of "px".

12 */

13 -var isUnitlessNumber = {

13 +export const isUnitlessNumber = {

14 animationIterationCount: true,

15 borderImageOutset: true,

16 borderImageSlice: true,

@@ -79,9 +79,3 @@ Object.keys(isUnitlessNumber).forEach(function(prop) {

79 isUnitlessNumber[prefixKey(prefix, prop)] = isUnitlessNumber[prop];

80 });

81 });

82 -

83 -var CSSProperty = {

84 - isUnitlessNumber: isUnitlessNumber,

85 -};

86 -

87 -module.exports = CSSProperty;

packages/react-dom/src/shared/CSSPropertyOperations.js

+52 -59

@@ -7,83 +7,76 @@

8 'use strict';

10 -var dangerousStyleValue = require('./dangerousStyleValue');

11 -

12 -if (__DEV__) {

13 - var hyphenateStyleName = require('fbjs/lib/hyphenateStyleName');

14 -

15 - var warnValidStyle = require('./warnValidStyle');

16 -}

10 +import dangerousStyleValue from './dangerousStyleValue';

11 +import hyphenateStyleName from 'fbjs/lib/hyphenateStyleName';

12 +import warnValidStyle from './warnValidStyle';

14 /**

15 * Operations for dealing with CSS properties.

16 */

21 -var CSSPropertyOperations = {

22 - /**

17 +

18 +/**

19 * This creates a string that is expected to be equivalent to the style

20 * attribute generated by server-side rendering. It by-passes warnings and

21 * security checks so it's not safe to use this value for anything other than

22 * comparison. It is only used in DEV for SSR validation.

23 */

28 - createDangerousStringForStyles: function(styles) {

29 - if (__DEV__) {

30 - var serialized = '';

31 - var delimiter = '';

32 - for (var styleName in styles) {

33 - if (!styles.hasOwnProperty(styleName)) {

34 - continue;

35 - }

36 - var styleValue = styles[styleName];

37 - if (styleValue != null) {

38 - var isCustomProperty = styleName.indexOf('--') === 0;

39 - serialized += delimiter + hyphenateStyleName(styleName) + ':';

40 - serialized += dangerousStyleValue(

41 - styleName,

42 - styleValue,

43 - isCustomProperty,

44 - );

24 +export function createDangerousStringForStyles(styles) {

25 + if (__DEV__) {

26 + var serialized = '';

27 + var delimiter = '';

28 + for (var styleName in styles) {

29 + if (!styles.hasOwnProperty(styleName)) {

30 + continue;

31 + }

32 + var styleValue = styles[styleName];

33 + if (styleValue != null) {

34 + var isCustomProperty = styleName.indexOf('--') === 0;

35 + serialized += delimiter + hyphenateStyleName(styleName) + ':';

36 + serialized += dangerousStyleValue(

37 + styleName,

38 + styleValue,

39 + isCustomProperty,

40 + );

46 - delimiter = ';';

47 - }

42 + delimiter = ';';

43 }

49 - return serialized || null;

44 }

51 - },

45 + return serialized || null;

46 + }

47 +}

53 - /**

49 +/**

50 * Sets the value for multiple styles on a node. If a value is specified as

51 * '' (empty string), the corresponding style property will be unset.

52 *

53 * @param {DOMElement} node

54 * @param {object} styles

55 */

60 - setValueForStyles: function(node, styles, getStack) {

61 - var style = node.style;

62 - for (var styleName in styles) {

63 - if (!styles.hasOwnProperty(styleName)) {

64 - continue;

65 - }

66 - var isCustomProperty = styleName.indexOf('--') === 0;

67 - if (__DEV__) {

68 - if (!isCustomProperty) {

69 - warnValidStyle(styleName, styles[styleName], getStack);

70 - }

71 - }

72 - var styleValue = dangerousStyleValue(

73 - styleName,

74 - styles[styleName],

75 - isCustomProperty,

76 - );

77 - if (styleName === 'float') {

78 - styleName = 'cssFloat';

79 - }

80 - if (isCustomProperty) {

81 - style.setProperty(styleName, styleValue);

82 - } else {

83 - style[styleName] = styleValue;

56 +export function setValueForStyles(node, styles, getStack) {

57 + var style = node.style;

58 + for (var styleName in styles) {

59 + if (!styles.hasOwnProperty(styleName)) {

60 + continue;

61 + }

62 + var isCustomProperty = styleName.indexOf('--') === 0;

63 + if (__DEV__) {

64 + if (!isCustomProperty) {

65 + warnValidStyle(styleName, styles[styleName], getStack);

66 }

67 }

86 - },

87 -};

88 -

89 -module.exports = CSSPropertyOperations;

68 + var styleValue = dangerousStyleValue(

69 + styleName,

70 + styles[styleName],

71 + isCustomProperty,

72 + );

73 + if (styleName === 'float') {

74 + styleName = 'cssFloat';

75 + }

76 + if (isCustomProperty) {

77 + style.setProperty(styleName, styleValue);

78 + } else {

79 + style[styleName] = styleValue;

80 + }

81 + }

82 +}

packages/react-dom/src/shared/DOMNamespaces.js

+3 -7

@@ -11,14 +11,14 @@ const HTML_NAMESPACE = 'http://www.w3.org/1999/xhtml';

11 const MATH_NAMESPACE = 'http://www.w3.org/1998/Math/MathML';

12 const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';

14 -const Namespaces = {

14 +export const Namespaces = {

15 html: HTML_NAMESPACE,

16 mathml: MATH_NAMESPACE,

17 svg: SVG_NAMESPACE,

18 };

20 // Assumes there is no parent namespace.

21 -function getIntrinsicNamespace(type: string): string {

21 +export function getIntrinsicNamespace(type: string): string {

22 switch (type) {

23 case 'svg':

24 return SVG_NAMESPACE;

@@ -29,7 +29,7 @@ function getIntrinsicNamespace(type: string): string {

29 }

30 }

32 -function getChildNamespace(

32 +export function getChildNamespace(

33 parentNamespace: string | null,

34 type: string,

35 ): string {

@@ -44,7 +44,3 @@ function getChildNamespace(

44 // By default, pass namespace below.

45 return parentNamespace;

46 }

47 -

48 -exports.Namespaces = Namespaces;

49 -exports.getIntrinsicNamespace = getIntrinsicNamespace;

50 -exports.getChildNamespace = getChildNamespace;

packages/react-dom/src/shared/DOMProperty.js

+2 -2

@@ -7,7 +7,7 @@

8 'use strict';

10 -var invariant = require('fbjs/lib/invariant');

10 +import invariant from 'fbjs/lib/invariant';

12 // These attributes should be all lowercase to allow for

13 // case insensitive checks

@@ -262,4 +262,4 @@ var DOMProperty = {

262 injection: DOMPropertyInjection,

263 };

264

265 -module.exports = DOMProperty;

265 +export default DOMProperty;

packages/react-dom/src/shared/HTMLDOMPropertyConfig.js

+2 -2

@@ -7,7 +7,7 @@

8 'use strict';

10 -var DOMProperty = require('./DOMProperty');

10 +import DOMProperty from './DOMProperty';

12 var MUST_USE_PROPERTY = DOMProperty.injection.MUST_USE_PROPERTY;

13 var HAS_BOOLEAN_VALUE = DOMProperty.injection.HAS_BOOLEAN_VALUE;

@@ -117,4 +117,4 @@ var HTMLDOMPropertyConfig = {

117 },

118 };

119

120 -module.exports = HTMLDOMPropertyConfig;

120 +export default HTMLDOMPropertyConfig;

packages/react-dom/src/shared/HTMLNodeType.js

+5 -9

@@ -11,12 +11,8 @@

11 * HTML nodeType values that represent the type of the node

12 */

14 -var HTMLNodeType = {

15 - ELEMENT_NODE: 1,

16 - TEXT_NODE: 3,

17 - COMMENT_NODE: 8,

18 - DOCUMENT_NODE: 9,

19 - DOCUMENT_FRAGMENT_NODE: 11,

20 -};

21 -

22 -module.exports = HTMLNodeType;

14 +export const ELEMENT_NODE = 1;

15 +export const TEXT_NODE = 3;

16 +export const COMMENT_NODE = 8;

17 +export const DOCUMENT_NODE = 9;

18 +export const DOCUMENT_FRAGMENT_NODE = 11;

packages/react-dom/src/shared/ReactControlledValuePropTypes.js

+3 -3

@@ -7,13 +7,13 @@

8 'use strict';

10 +import checkPropTypes from 'prop-types/checkPropTypes';

11 +

12 var ReactControlledValuePropTypes = {

13 checkPropTypes: null,

14 };

16 if (__DEV__) {

15 - var checkPropTypes = require('prop-types/checkPropTypes');

16 -

17 var hasReadOnlyValue = {

18 button: true,

19 checkbox: true,

@@ -73,4 +73,4 @@ if (__DEV__) {

73 };

74 }

76 -module.exports = ReactControlledValuePropTypes;

76 +export default ReactControlledValuePropTypes;

packages/react-dom/src/shared/ReactDOMInjection.js

+3 -3

@@ -7,9 +7,9 @@

8 'use strict';

10 -var DOMProperty = require('./DOMProperty');

11 -var HTMLDOMPropertyConfig = require('./HTMLDOMPropertyConfig');

12 -var SVGDOMPropertyConfig = require('./SVGDOMPropertyConfig');

10 +import DOMProperty from './DOMProperty';

11 +import HTMLDOMPropertyConfig from './HTMLDOMPropertyConfig';

12 +import SVGDOMPropertyConfig from './SVGDOMPropertyConfig';

14 DOMProperty.injection.injectDOMPropertyConfig(HTMLDOMPropertyConfig);

15 DOMProperty.injection.injectDOMPropertyConfig(SVGDOMPropertyConfig);

packages/react-dom/src/shared/ReactDOMInvalidARIAHook.js

+7 -16

@@ -7,8 +7,12 @@

8 'use strict';

10 -var DOMProperty = require('./DOMProperty');

11 -var isCustomComponent = require('./isCustomComponent');

10 +import warning from 'fbjs/lib/warning';

11 +import {ReactDebugCurrentFrame} from 'shared/ReactGlobalSharedState';

12 +

13 +import DOMProperty from './DOMProperty';

14 +import isCustomComponent from './isCustomComponent';

15 +import validAriaProperties from './validAriaProperties';

17 var warnedProperties = {};

18 var rARIA = new RegExp('^(aria)-[' + DOMProperty.ATTRIBUTE_NAME_CHAR + ']*$');

@@ -18,13 +22,6 @@ var rARIACamel = new RegExp(

23 var hasOwnProperty = Object.prototype.hasOwnProperty;

21 -if (__DEV__) {

22 - var warning = require('fbjs/lib/warning');

23 - var {ReactDebugCurrentFrame} = require('shared/ReactGlobalSharedState');

24 -

25 - var validAriaProperties = require('./validAriaProperties');

26 -}

27 -

25 function getStackAddendum() {

26 var stack = ReactDebugCurrentFrame.getStackAddendum();

27 return stack != null ? stack : '';

@@ -131,15 +128,9 @@ function warnInvalidARIAProps(type, props) {

128 }

129 }

130

134 -function validateProperties(type, props) {

131 +export function validateProperties(type, props) {

132 if (isCustomComponent(type, props)) {

133 return;

134 }

135 warnInvalidARIAProps(type, props);

136 }

140 -

141 -var ReactDOMInvalidARIAHook = {

142 - validateProperties,

143 -};

144 -

145 -module.exports = ReactDOMInvalidARIAHook;

packages/react-dom/src/shared/ReactDOMNullInputValuePropHook.js

+3 -11

@@ -7,10 +7,8 @@

8 'use strict';

10 -if (__DEV__) {

11 - var {ReactDebugCurrentFrame} = require('shared/ReactGlobalSharedState');

12 - var warning = require('fbjs/lib/warning');

13 -}

10 +import {ReactDebugCurrentFrame} from 'shared/ReactGlobalSharedState';

11 +import warning from 'fbjs/lib/warning';

13 var didWarnValueNull = false;

@@ -19,7 +17,7 @@ function getStackAddendum() {

17 return stack != null ? stack : '';

18 }

22 -function validateProperties(type, props) {

20 +export function validateProperties(type, props) {

21 if (type !== 'input' && type !== 'textarea' && type !== 'select') {

22 return;

23 }

@@ -47,9 +45,3 @@ function validateProperties(type, props) {

45 }

46 }

47 }

50 -

51 -var ReactDOMNullInputValuePropHook = {

52 - validateProperties,

53 -};

54 -

55 -module.exports = ReactDOMNullInputValuePropHook;

packages/react-dom/src/shared/ReactDOMUnknownPropertyHook.js

+7 -16

@@ -7,15 +7,13 @@

8 'use strict';

10 -var EventPluginRegistry = require('events/EventPluginRegistry');

10 +import EventPluginRegistry from 'events/EventPluginRegistry';

11 +import {ReactDebugCurrentFrame} from 'shared/ReactGlobalSharedState';

12 +import warning from 'fbjs/lib/warning';

12 -var DOMProperty = require('./DOMProperty');

13 -var isCustomComponent = require('./isCustomComponent');

14 -

15 -if (__DEV__) {

16 - var {ReactDebugCurrentFrame} = require('shared/ReactGlobalSharedState');

17 - var warning = require('fbjs/lib/warning');

18 -}

14 +import DOMProperty from './DOMProperty';

15 +import isCustomComponent from './isCustomComponent';

16 +import possibleStandardNames from './possibleStandardNames';

18 function getStackAddendum() {

19 var stack = ReactDebugCurrentFrame.getStackAddendum();

@@ -30,7 +28,6 @@ if (__DEV__) {

28 var rARIACamel = new RegExp(

29 '^(aria)[A-Z][' + DOMProperty.ATTRIBUTE_NAME_CHAR + ']*$',

30 );

33 - var possibleStandardNames = require('./possibleStandardNames');

32 var validateProperty = function(tagName, name, value) {

33 if (hasOwnProperty.call(warnedProperties, name) && warnedProperties[name]) {

@@ -267,15 +264,9 @@ var warnUnknownProperties = function(type, props) {

264 }

265 };

266

270 -function validateProperties(type, props) {

267 +export function validateProperties(type, props) {

268 if (isCustomComponent(type, props)) {

269 return;

270 }

271 warnUnknownProperties(type, props);

272 }

276 -

277 -var ReactDOMUnknownPropertyHook = {

278 - validateProperties,

279 -};

280 -

281 -module.exports = ReactDOMUnknownPropertyHook;

packages/react-dom/src/shared/SVGDOMPropertyConfig.js

+2 -2

@@ -7,7 +7,7 @@

8 'use strict';

10 -var DOMProperty = require('./DOMProperty');

10 +import DOMProperty from './DOMProperty';

12 var {HAS_STRING_BOOLEAN_VALUE} = DOMProperty.injection;

@@ -150,4 +150,4 @@ ATTRS.forEach(original => {

150 SVGDOMPropertyConfig.DOMAttributeNames[reactName] = original;

151 });

152

153 -module.exports = SVGDOMPropertyConfig;

153 +export default SVGDOMPropertyConfig;

packages/react-dom/src/shared/assertValidProps.js

+4 -7

@@ -7,13 +7,10 @@

8 'use strict';

10 -var invariant = require('fbjs/lib/invariant');

10 +import invariant from 'fbjs/lib/invariant';

11 +import warning from 'fbjs/lib/warning';

12 -var voidElementTags = require('./voidElementTags');

13 -

14 -if (__DEV__) {

15 - var warning = require('fbjs/lib/warning');

16 -}

13 +import voidElementTags from './voidElementTags';

15 var HTML = '__html';

@@ -65,4 +62,4 @@ function assertValidProps(tag: string, props: ?Object, getStack: () => string) {

62 );

63 }

68 -module.exports = assertValidProps;

65 +export default assertValidProps;

packages/react-dom/src/shared/checkReact.js

+2 -2

@@ -7,8 +7,8 @@

7 * @flow

8 */

10 -var React = require('react');

11 -var invariant = require('fbjs/lib/invariant');

10 +import React from 'react';

11 +import invariant from 'fbjs/lib/invariant';

13 invariant(

14 React,

packages/react-dom/src/shared/createMicrosoftUnsafeLocalFunction.js

+1 -1

@@ -24,4 +24,4 @@ var createMicrosoftUnsafeLocalFunction = function(func) {

24 }

25 };

27 -module.exports = createMicrosoftUnsafeLocalFunction;

27 +export default createMicrosoftUnsafeLocalFunction;

packages/react-dom/src/shared/dangerousStyleValue.js

+2 -4

@@ -7,9 +7,7 @@

8 'use strict';

10 -var CSSProperty = require('./CSSProperty');

11 -

12 -var isUnitlessNumber = CSSProperty.isUnitlessNumber;

10 +import {isUnitlessNumber} from './CSSProperty';

12 /**

13 * Convert a value into the proper css writable value. The style name `name`

@@ -48,4 +46,4 @@ function dangerousStyleValue(name, value, isCustomProperty) {

46 return ('' + value).trim();

47 }

51 -module.exports = dangerousStyleValue;

49 +export default dangerousStyleValue;

packages/react-dom/src/shared/escapeTextContentForBrowser.js

+1 -1

@@ -110,4 +110,4 @@ function escapeTextContentForBrowser(text) {

110 return escapeHtml(text);

111 }

112

113 -module.exports = escapeTextContentForBrowser;

113 +export default escapeTextContentForBrowser;

packages/react-dom/src/shared/isCustomComponent.js

+1 -1

@@ -32,4 +32,4 @@ function isCustomComponent(tagName: string, props: Object) {

32 }

33 }

35 -module.exports = isCustomComponent;

35 +export default isCustomComponent;

packages/react-dom/src/shared/omittedCloseTags.js

+1 -1

@@ -29,4 +29,4 @@ var omittedCloseTags = {

29 // NOTE: menuitem's close tag should be omitted, but that causes problems.

30 };

32 -module.exports = omittedCloseTags;

32 +export default omittedCloseTags;

packages/react-dom/src/shared/possibleStandardNames.js

+1 -1

@@ -493,4 +493,4 @@ var possibleStandardNames = {

493 zoomandpan: 'zoomAndPan',

494 };

495

496 -module.exports = possibleStandardNames;

496 +export default possibleStandardNames;

packages/react-dom/src/shared/quoteAttributeValueForBrowser.js

+2 -2

@@ -7,7 +7,7 @@

8 'use strict';

10 -var escapeTextContentForBrowser = require('./escapeTextContentForBrowser');

10 +import escapeTextContentForBrowser from './escapeTextContentForBrowser';

12 /**

13 * Escapes attribute value to prevent scripting attacks.

@@ -19,4 +19,4 @@ function quoteAttributeValueForBrowser(value) {

19 return '"' + escapeTextContentForBrowser(value) + '"';

20 }

22 -module.exports = quoteAttributeValueForBrowser;

22 +export default quoteAttributeValueForBrowser;

packages/react-dom/src/shared/validAriaProperties.js

+1 -1

@@ -62,4 +62,4 @@ var ariaProperties = {

62 'aria-setsize': 0,

63 };

65 -module.exports = ariaProperties;

65 +export default ariaProperties;

packages/react-dom/src/shared/voidElementTags.js

+2 -2

@@ -7,7 +7,7 @@

8 'use strict';

10 -var omittedCloseTags = require('./omittedCloseTags');

10 +import omittedCloseTags from './omittedCloseTags';

12 // For HTML, certain tags cannot have children. This has the same purpose as

13 // `omittedCloseTags` except that `menuitem` should still have its closing tag.

@@ -17,4 +17,4 @@ var voidElementTags = {

17 ...omittedCloseTags,

18 };

20 -module.exports = voidElementTags;

20 +export default voidElementTags;

packages/react-dom/src/shared/warnValidStyle.js

+4 -5

@@ -7,14 +7,13 @@

8 'use strict';

10 -var emptyFunction = require('fbjs/lib/emptyFunction');

10 +import emptyFunction from 'fbjs/lib/emptyFunction';

11 +import camelizeStyleName from 'fbjs/lib/camelizeStyleName';

12 +import warning from 'fbjs/lib/warning';

14 var warnValidStyle = emptyFunction;

16 if (__DEV__) {

15 - var camelizeStyleName = require('fbjs/lib/camelizeStyleName');

16 - var warning = require('fbjs/lib/warning');

17 -

17 // 'msTransform' is correct, but the other prefixes should be capitalized

18 var badVendoredStyleNamePattern = /^(?:webkit|moz|o)[A-Z]/;

@@ -119,4 +118,4 @@ if (__DEV__) {

118 };

119 }

120

122 -module.exports = warnValidStyle;

121 +export default warnValidStyle;

packages/react-dom/src/test-utils/ReactTestUtils.js

+15 -18

@@ -7,15 +7,20 @@

8 'use strict';

10 -var React = require('react');

11 -var ReactDOM = require('react-dom');

12 -var ReactFiberTreeReflection = require('shared/ReactFiberTreeReflection');

13 -var ReactInstanceMap = require('shared/ReactInstanceMap');

14 -var ReactTypeOfWork = require('shared/ReactTypeOfWork');

15 -var SyntheticEvent = require('events/SyntheticEvent');

16 -var invariant = require('fbjs/lib/invariant');

10 +import React from 'react';

11 +import ReactDOM from 'react-dom';

12 +import {findCurrentFiberUsingSlowPath} from 'shared/ReactFiberTreeReflection';

13 +import * as ReactInstanceMap from 'shared/ReactInstanceMap';

14 +import {

15 + ClassComponent,

16 + FunctionalComponent,

17 + HostComponent,

18 + HostText,

19 +} from 'shared/ReactTypeOfWork';

20 +import SyntheticEvent from 'events/SyntheticEvent';

21 +import invariant from 'fbjs/lib/invariant';

18 -var BrowserEventConstants = require('../events/BrowserEventConstants');

23 +import BrowserEventConstants from '../events/BrowserEventConstants';

25 var {findDOMNode} = ReactDOM;

26 var {

@@ -28,12 +33,6 @@ var {

33 } = ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;

35 var topLevelTypes = BrowserEventConstants.topLevelTypes;

31 -var {

32 - ClassComponent,

33 - FunctionalComponent,

34 - HostComponent,

35 - HostText,

36 -} = ReactTypeOfWork;

37 function Event(suffix) {}

@@ -45,9 +44,7 @@ function findAllInRenderedFiberTreeInternal(fiber, test) {

44 if (!fiber) {

45 return [];

46 }

48 - var currentParent = ReactFiberTreeReflection.findCurrentFiberUsingSlowPath(

49 - fiber,

50 - );

47 + var currentParent = findCurrentFiberUsingSlowPath(fiber);

48 if (!currentParent) {

49 return [];

50 }

@@ -478,4 +475,4 @@ Object.keys(topLevelTypes).forEach(function(eventType) {

475 );

476 });

477

481 -module.exports = ReactTestUtils;

478 +export default ReactTestUtils;

packages/react-dom/src/unstable-native-dependencies/ReactDOMUnstableNativeDependencies.js

+8 -12

@@ -5,22 +5,18 @@

5 * LICENSE file in the root directory of this source tree.

6 */

8 -const EventPluginUtils = require('events/EventPluginUtils');

9 -const ResponderEventPlugin = require('events/ResponderEventPlugin');

10 -const ResponderTouchHistoryStore = require('events/ResponderTouchHistoryStore');

8 +import ReactDOM from 'react-dom';

9 +import EventPluginUtils from 'events/EventPluginUtils';

10 +import ResponderEventPlugin from 'events/ResponderEventPlugin';

11 +import ResponderTouchHistoryStore from 'events/ResponderTouchHistoryStore';

13 // This is used by react-native-web.

13 -const ReactDOMUnstableNativeDependencies = {

14 - injectComponentTree: EventPluginUtils.injection.injectComponentTree,

15 - ResponderEventPlugin,

16 - ResponderTouchHistoryStore,

17 -};

14 +export const injectComponentTree =

15 + EventPluginUtils.injection.injectComponentTree;

16 +export {ResponderEventPlugin, ResponderTouchHistoryStore};

18 // Inject react-dom's ComponentTree into this module.

20 -const ReactDOM = require('react-dom');

19 const {

20 ReactDOMComponentTree,

21 } = ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;

24 -ReactDOMUnstableNativeDependencies.injectComponentTree(ReactDOMComponentTree);

25 -

26 -module.exports = ReactDOMUnstableNativeDependencies;

22 +injectComponentTree(ReactDOMComponentTree);

packages/react-dom/test-utils.js

+7 -1

@@ -9,4 +9,10 @@

10 'use strict';

12 -module.exports = require('./src/test-utils/ReactTestUtils');

12 +var ReactTestUtils = require('./src/test-utils/ReactTestUtils');

13 +

14 +// TODO: decide on the top-level export form.

15 +// This is hacky but makes it work with both Rollup and Jest.

16 +module.exports = ReactTestUtils.default

17 + ? ReactTestUtils.default

18 + : ReactTestUtils;

packages/react-native-renderer/index.js

+7 -1

@@ -9,4 +9,10 @@

10 'use strict';

12 -module.exports = require('./src/ReactNativeRenderer');

12 +var ReactNativeRenderer = require('./src/ReactNativeRenderer');

13 +

14 +// TODO: decide on the top-level export form.

15 +// This is hacky but makes it work with both Rollup and Jest.

16 +module.exports = ReactNativeRenderer.default

17 + ? ReactNativeRenderer.default

18 + : ReactNativeRenderer;

packages/react-native-renderer/src/NativeMethodsMixin.js

+9 -9

@@ -16,19 +16,19 @@ import type {

16 ReactNativeBaseComponentViewConfig,

17 } from './ReactNativeTypes';

19 -const invariant = require('fbjs/lib/invariant');

19 +import invariant from 'fbjs/lib/invariant';

20 // Modules provided by RN:

21 -const TextInputState = require('TextInputState');

22 -const UIManager = require('UIManager');

21 +import TextInputState from 'TextInputState';

22 +import UIManager from 'UIManager';

24 -const ReactNativeAttributePayload = require('./ReactNativeAttributePayload');

25 -const {

24 +import * as ReactNativeAttributePayload from './ReactNativeAttributePayload';

25 +import {

26 mountSafeCallback,

27 throwOnStylesProp,

28 warnForStyleProps,

29 -} = require('./NativeMethodsMixinUtils');

30 -const findNodeHandle = require('./findNodeHandle');

31 -const findNumericNodeHandle = require('./findNumericNodeHandle');

29 +} from './NativeMethodsMixinUtils';

30 +import findNodeHandle from './findNodeHandle';

31 +import findNumericNodeHandle from './findNumericNodeHandle';

33 /**

34 * `NativeMethodsMixin` provides methods to access the underlying native

@@ -199,4 +199,4 @@ if (__DEV__) {

199 };

200 }

201

202 -module.exports = NativeMethodsMixin;

202 +export default NativeMethodsMixin;

packages/react-native-renderer/src/NativeMethodsMixinUtils.js

+3 -9

@@ -12,7 +12,7 @@

12 * In the future, we should cleanup callbacks by cancelling them instead of

13 * using this.

14 */

15 -function mountSafeCallback(context: any, callback: ?Function): any {

15 +export function mountSafeCallback(context: any, callback: ?Function): any {

16 return function() {

17 if (!callback) {

18 return undefined;

@@ -36,7 +36,7 @@ function mountSafeCallback(context: any, callback: ?Function): any {

36 };

37 }

39 -function throwOnStylesProp(component: any, props: any) {

39 +export function throwOnStylesProp(component: any, props: any) {

40 if (props.styles !== undefined) {

41 var owner = component._owner || null;

42 var name = component.constructor.displayName;

@@ -56,7 +56,7 @@ function throwOnStylesProp(component: any, props: any) {

56 }

57 }

59 -function warnForStyleProps(props: any, validAttributes: any) {

59 +export function warnForStyleProps(props: any, validAttributes: any) {

60 for (var key in validAttributes.style) {

61 if (!(validAttributes[key] || props[key] === undefined)) {

62 console.error(

@@ -71,9 +71,3 @@ function warnForStyleProps(props: any, validAttributes: any) {

71 }

72 }

73 }

74 -

75 -module.exports = {

76 - mountSafeCallback,

77 - throwOnStylesProp,

78 - warnForStyleProps,

79 -};

packages/react-native-renderer/src/ReactNativeAttributePayload.js

+25 -29

@@ -9,10 +9,10 @@

9 'use strict';

11 // Modules provided by RN:

12 -var deepDiffer = require('deepDiffer');

13 -var flattenStyle = require('flattenStyle');

12 +import deepDiffer from 'deepDiffer';

13 +import flattenStyle from 'flattenStyle';

15 -var ReactNativePropRegistry = require('./ReactNativePropRegistry');

15 +import ReactNativePropRegistry from './ReactNativePropRegistry';

17 var emptyObject = {};

@@ -485,30 +485,26 @@ function clearProperties(

485 return diffProperties(updatePayload, prevProps, emptyObject, validAttributes);

486 }

487

488 -var ReactNativeAttributePayload = {

489 - create: function(

490 - props: Object,

491 - validAttributes: AttributeConfiguration,

492 - ): ?Object {

493 - return addProperties(

494 - null, // updatePayload

495 - props,

496 - validAttributes,

497 - );

498 - },

499 -

500 - diff: function(

501 - prevProps: Object,

502 - nextProps: Object,

503 - validAttributes: AttributeConfiguration,

504 - ): ?Object {

505 - return diffProperties(

506 - null, // updatePayload

507 - prevProps,

508 - nextProps,

509 - validAttributes,

510 - );

511 - },

512 -};

488 +export function create(

489 + props: Object,

490 + validAttributes: AttributeConfiguration,

491 +): ?Object {

492 + return addProperties(

493 + null, // updatePayload

494 + props,

495 + validAttributes,

496 + );

497 +}

498

514 -module.exports = ReactNativeAttributePayload;

499 +export function diff(

500 + prevProps: Object,

501 + nextProps: Object,

502 + validAttributes: AttributeConfiguration,

503 +): ?Object {

504 + return diffProperties(

505 + null, // updatePayload

506 + prevProps,

507 + nextProps,

508 + validAttributes,

509 + );

510 +}

packages/react-native-renderer/src/ReactNativeBridgeEventPlugin.js

+4 -4

@@ -10,9 +10,9 @@

11 import type {ReactNativeBaseComponentViewConfig} from './ReactNativeTypes';

13 -const EventPropagators = require('events/EventPropagators');

14 -const SyntheticEvent = require('events/SyntheticEvent');

15 -const invariant = require('fbjs/lib/invariant');

13 +import EventPropagators from 'events/EventPropagators';

14 +import SyntheticEvent from 'events/SyntheticEvent';

15 +import invariant from 'fbjs/lib/invariant';

17 const customBubblingEventTypes = {};

18 const customDirectEventTypes = {};

@@ -93,4 +93,4 @@ const ReactNativeBridgeEventPlugin = {

93 },

94 };

96 -module.exports = ReactNativeBridgeEventPlugin;

96 +export default ReactNativeBridgeEventPlugin;

packages/react-native-renderer/src/ReactNativeComponent.js

+8 -8

@@ -18,15 +18,15 @@ import type {

18 ReactNativeBaseComponentViewConfig,

19 } from './ReactNativeTypes';

21 -const React = require('react');

21 +import React from 'react';

22 // Modules provided by RN:

23 -const TextInputState = require('TextInputState');

24 -const UIManager = require('UIManager');

23 +import TextInputState from 'TextInputState';

24 +import UIManager from 'UIManager';

26 -const ReactNativeAttributePayload = require('./ReactNativeAttributePayload');

27 -const {mountSafeCallback} = require('./NativeMethodsMixinUtils');

28 -const findNodeHandle = require('./findNodeHandle');

29 -const findNumericNodeHandle = require('./findNumericNodeHandle');

26 +import * as ReactNativeAttributePayload from './ReactNativeAttributePayload';

27 +import {mountSafeCallback} from './NativeMethodsMixinUtils';

28 +import findNodeHandle from './findNodeHandle';

29 +import findNumericNodeHandle from './findNumericNodeHandle';

31 /**

32 * Superclass that provides methods to access the underlying native component.

@@ -172,4 +172,4 @@ class ReactNativeComponent<DefaultProps, Props, State>

172 // eslint-disable-next-line no-unused-expressions

173 (ReactNativeComponent.prototype: NativeMethodsMixinType);

174

175 -module.exports = ReactNativeComponent;

175 +export default ReactNativeComponent;

packages/react-native-renderer/src/ReactNativeComponentTree.js

+2 -2

@@ -7,7 +7,7 @@

8 'use strict';

10 -var invariant = require('fbjs/lib/invariant');

10 +import invariant from 'fbjs/lib/invariant';

12 var instanceCache = {};

13 var instanceProps = {};

@@ -49,4 +49,4 @@ var ReactNativeComponentTree = {

49 updateFiberProps,

50 };

52 -module.exports = ReactNativeComponentTree;

52 +export default ReactNativeComponentTree;

packages/react-native-renderer/src/ReactNativeEventEmitter.js

+8 -11

@@ -8,17 +8,14 @@

8 */

9 'use strict';

11 -var EventPluginHub = require('events/EventPluginHub');

12 -var EventPluginRegistry = require('events/EventPluginRegistry');

13 -var ReactEventEmitterMixin = require('events/ReactEventEmitterMixin');

14 -var ReactGenericBatching = require('events/ReactGenericBatching');

11 +import EventPluginHub from 'events/EventPluginHub';

12 +import EventPluginRegistry from 'events/EventPluginRegistry';

13 +import ReactEventEmitterMixin from 'events/ReactEventEmitterMixin';

14 +import ReactGenericBatching from 'events/ReactGenericBatching';

15 +import warning from 'fbjs/lib/warning';

16 -var ReactNativeComponentTree = require('./ReactNativeComponentTree');

17 -var ReactNativeTagHandles = require('./ReactNativeTagHandles');

18 -

19 -if (__DEV__) {

20 - var warning = require('fbjs/lib/warning');

21 -}

17 +import ReactNativeComponentTree from './ReactNativeComponentTree';

18 +import ReactNativeTagHandles from './ReactNativeTagHandles';

20 /**

21 * Version of `ReactBrowserEventEmitter` that works on the receiving side of a

@@ -197,4 +194,4 @@ var ReactNativeEventEmitter = {

194 },

195 };

196

200 -module.exports = ReactNativeEventEmitter;

197 +export default ReactNativeEventEmitter;

packages/react-native-renderer/src/ReactNativeEventPluginOrder.js

+1 -1

@@ -13,4 +13,4 @@ var ReactNativeEventPluginOrder = [

13 'ReactNativeBridgeEventPlugin',

14 ];

16 -module.exports = ReactNativeEventPluginOrder;

16 +export default ReactNativeEventPluginOrder;

packages/react-native-renderer/src/ReactNativeFiberErrorDialog.js

+2 -4

@@ -12,13 +12,13 @@

12 import type {CapturedError} from 'react-reconciler/src/ReactFiberScheduler';

14 // Module provided by RN:

15 -const ExceptionsManager = require('ExceptionsManager');

15 +import ExceptionsManager from 'ExceptionsManager';

17 /**

18 * Intercept lifecycle errors and ensure they are shown with the correct stack

19 * trace within the native redbox component.

20 */

21 -function ReactNativeFiberErrorDialog(capturedError: CapturedError): boolean {

21 +export function showDialog(capturedError: CapturedError): boolean {

22 const {componentStack, error} = capturedError;

24 let errorToHandle: Error;

@@ -50,5 +50,3 @@ function ReactNativeFiberErrorDialog(capturedError: CapturedError): boolean {

50 // done above by calling ExceptionsManager.

51 return false;

52 }

53 -

54 -module.exports.showDialog = ReactNativeFiberErrorDialog;

packages/react-native-renderer/src/ReactNativeFiberHostComponent.js

+5 -8

@@ -19,14 +19,11 @@ import type {

19 import type {Instance} from './ReactNativeFiberRenderer';

21 // Modules provided by RN:

22 -var TextInputState = require('TextInputState');

23 -var UIManager = require('UIManager');

22 +import TextInputState from 'TextInputState';

23 +import UIManager from 'UIManager';

25 -var ReactNativeAttributePayload = require('./ReactNativeAttributePayload');

26 -var {

27 - mountSafeCallback,

28 - warnForStyleProps,

29 -} = require('./NativeMethodsMixinUtils');

25 +import * as ReactNativeAttributePayload from './ReactNativeAttributePayload';

26 +import {mountSafeCallback, warnForStyleProps} from './NativeMethodsMixinUtils';

28 /**

29 * This component defines the same methods as NativeMethodsMixin but without the

@@ -104,4 +101,4 @@ class ReactNativeFiberHostComponent {

101 // eslint-disable-next-line no-unused-expressions

102 (ReactNativeFiberHostComponent.prototype: NativeMethodsMixinType);

103

107 -module.exports = ReactNativeFiberHostComponent;

104 +export default ReactNativeFiberHostComponent;

packages/react-native-renderer/src/ReactNativeFiberInspector.js

+13 -14

@@ -10,19 +10,20 @@

11 import type {Fiber} from 'react-reconciler/src/ReactFiber';

13 -const ReactFiberTreeReflection = require('shared/ReactFiberTreeReflection');

14 -const getComponentName = require('shared/getComponentName');

15 -const ReactTypeOfWork = require('shared/ReactTypeOfWork');

16 -const emptyObject = require('fbjs/lib/emptyObject');

17 -const invariant = require('fbjs/lib/invariant');

18 -const {findCurrentFiberUsingSlowPath} = ReactFiberTreeReflection;

19 -const {HostComponent} = ReactTypeOfWork;

13 +import {

14 + findCurrentHostFiber,

15 + findCurrentFiberUsingSlowPath,

16 +} from 'shared/ReactFiberTreeReflection';

17 +import getComponentName from 'shared/getComponentName';

18 +import {HostComponent} from 'shared/ReactTypeOfWork';

19 +import emptyObject from 'fbjs/lib/emptyObject';

20 +import invariant from 'fbjs/lib/invariant';

21 // Module provided by RN:

21 -const UIManager = require('UIManager');

22 +import UIManager from 'UIManager';

23 -const ReactNativeComponentTree = require('./ReactNativeComponentTree');

24 -const {getClosestInstanceFromNode} = ReactNativeComponentTree;

24 +import ReactNativeComponentTree from './ReactNativeComponentTree';

26 +const {getClosestInstanceFromNode} = ReactNativeComponentTree;

27 let getInspectorDataForViewTag;

29 if (__DEV__) {

@@ -51,7 +52,7 @@ if (__DEV__) {

52 };

54 var getHostProps = function(fiber) {

54 - const host = ReactFiberTreeReflection.findCurrentHostFiber(fiber);

55 + const host = findCurrentHostFiber(fiber);

56 if (host) {

57 return host.memoizedProps || emptyObject;

58 }

@@ -123,6 +124,4 @@ if (__DEV__) {

124 };

125 }

126

126 -module.exports = {

127 - getInspectorDataForViewTag,

128 -};

127 +export {getInspectorDataForViewTag};

packages/react-native-renderer/src/ReactNativeFiberRenderer.js

+16 -13

@@ -11,19 +11,22 @@

12 import type {ReactNativeBaseComponentViewConfig} from './ReactNativeTypes';

14 -const ReactFiberReconciler = require('react-reconciler');

15 -const emptyObject = require('fbjs/lib/emptyObject');

16 -const invariant = require('fbjs/lib/invariant');

14 +import ReactFiberReconciler from 'react-reconciler';

15 +import emptyObject from 'fbjs/lib/emptyObject';

16 +import invariant from 'fbjs/lib/invariant';

17 // Modules provided by RN:

18 -const UIManager = require('UIManager');

19 -const deepFreezeAndThrowOnMutationInDev = require('deepFreezeAndThrowOnMutationInDev');

20 -

21 -const ReactNativeAttributePayload = require('./ReactNativeAttributePayload');

22 -const ReactNativeComponentTree = require('./ReactNativeComponentTree');

23 -const ReactNativeFiberHostComponent = require('./ReactNativeFiberHostComponent');

24 -const ReactNativeFrameScheduling = require('./ReactNativeFrameScheduling');

25 -const ReactNativeTagHandles = require('./ReactNativeTagHandles');

26 -const ReactNativeViewConfigRegistry = require('./ReactNativeViewConfigRegistry');

18 +import UIManager from 'UIManager';

19 +import deepFreezeAndThrowOnMutationInDev

20 + from 'deepFreezeAndThrowOnMutationInDev';

21 +

22 +import * as ReactNativeViewConfigRegistry

23 + from './ReactNativeViewConfigRegistry';

24 +import * as ReactNativeAttributePayload from './ReactNativeAttributePayload';

25 +import ReactNativeComponentTree from './ReactNativeComponentTree';

26 +import ReactNativeFiberHostComponent from './ReactNativeFiberHostComponent';

27 +import * as ReactNativeFrameScheduling from './ReactNativeFrameScheduling';

28 +import ReactNativeTagHandles from './ReactNativeTagHandles';

29 +

30 const {

31 precacheFiberNode,

32 uncacheFiberNode,

@@ -389,4 +392,4 @@ const NativeRenderer = ReactFiberReconciler({

392 },

393 });

394

392 -module.exports = NativeRenderer;

395 +export default NativeRenderer;

packages/react-native-renderer/src/ReactNativeFrameScheduling.js

+1 -4

@@ -59,7 +59,4 @@ function scheduleDeferredCallback(callback: Callback): number {

59 return 0;

60 }

62 -module.exports = {

63 - now,

64 - scheduleDeferredCallback,

65 -};

62 +export {now, scheduleDeferredCallback};

packages/react-native-renderer/src/ReactNativeGlobalResponderHandler.js

+2 -2

@@ -7,7 +7,7 @@

7 'use strict';

9 // Module provided by RN:

10 -var UIManager = require('UIManager');

10 +import UIManager from 'UIManager';

12 var ReactNativeGlobalResponderHandler = {

13 onChange: function(from, to, blockNativeResponder) {

@@ -20,4 +20,4 @@ var ReactNativeGlobalResponderHandler = {

20 },

21 };

23 -module.exports = ReactNativeGlobalResponderHandler;

23 +export default ReactNativeGlobalResponderHandler;

packages/react-native-renderer/src/ReactNativeInjection.js

+11 -10

@@ -15,19 +15,20 @@

15 * TODO: require this in packager, not in React #10932517

16 */

17 // Module provided by RN:

18 -require('InitializeCore');

18 +import 'InitializeCore';

20 -var EventPluginHub = require('events/EventPluginHub');

21 -var EventPluginUtils = require('events/EventPluginUtils');

22 -var ResponderEventPlugin = require('events/ResponderEventPlugin');

20 +import EventPluginHub from 'events/EventPluginHub';

21 +import EventPluginUtils from 'events/EventPluginUtils';

22 +import ResponderEventPlugin from 'events/ResponderEventPlugin';

23 // Module provided by RN:

24 -var RCTEventEmitter = require('RCTEventEmitter');

24 +import RCTEventEmitter from 'RCTEventEmitter';

26 -var ReactNativeBridgeEventPlugin = require('./ReactNativeBridgeEventPlugin');

27 -var ReactNativeComponentTree = require('./ReactNativeComponentTree');

28 -var ReactNativeEventEmitter = require('./ReactNativeEventEmitter');

29 -var ReactNativeEventPluginOrder = require('./ReactNativeEventPluginOrder');

30 -var ReactNativeGlobalResponderHandler = require('./ReactNativeGlobalResponderHandler');

26 +import ReactNativeBridgeEventPlugin from './ReactNativeBridgeEventPlugin';

27 +import ReactNativeComponentTree from './ReactNativeComponentTree';

28 +import ReactNativeEventEmitter from './ReactNativeEventEmitter';

29 +import ReactNativeEventPluginOrder from './ReactNativeEventPluginOrder';

30 +import ReactNativeGlobalResponderHandler

31 + from './ReactNativeGlobalResponderHandler';

33 /**

34 * Register the event emitter with the native bridge

packages/react-native-renderer/src/ReactNativePropRegistry.js

+1 -1

@@ -38,4 +38,4 @@ class ReactNativePropRegistry {

38 }

39 }

41 -module.exports = ReactNativePropRegistry;

41 +export default ReactNativePropRegistry;

packages/react-native-renderer/src/ReactNativeRenderer.js

+34 -30

@@ -12,24 +12,31 @@

12 import type {ReactNativeType} from './ReactNativeTypes';

13 import type {ReactNodeList} from 'shared/ReactTypes';

15 -require('./ReactNativeInjection');

15 +import './ReactNativeInjection';

17 // TODO: direct imports like some-package/src/* are bad. Fix me.

18 -const ReactFiberErrorLogger = require('react-reconciler/src/ReactFiberErrorLogger');

19 -const ReactPortal = require('react-reconciler/src/ReactPortal');

20 -const {

21 - injectInternals,

22 -} = require('react-reconciler/src/ReactFiberDevToolsHook');

23 -const ReactGenericBatching = require('events/ReactGenericBatching');

24 -const ReactVersion = require('shared/ReactVersion');

18 +import * as ReactFiberErrorLogger

19 + from 'react-reconciler/src/ReactFiberErrorLogger';

20 +import * as ReactPortal from 'react-reconciler/src/ReactPortal';

21 +import {injectInternals} from 'react-reconciler/src/ReactFiberDevToolsHook';

22 +import ReactGenericBatching from 'events/ReactGenericBatching';

23 +import TouchHistoryMath from 'events/TouchHistoryMath';

24 +import * as ReactGlobalSharedState from 'shared/ReactGlobalSharedState';

25 +import ReactVersion from 'shared/ReactVersion';

26 // Module provided by RN:

26 -const UIManager = require('UIManager');

27 -

28 -const ReactNativeFiberErrorDialog = require('./ReactNativeFiberErrorDialog');

29 -const ReactNativeComponentTree = require('./ReactNativeComponentTree');

30 -const ReactNativeFiberRenderer = require('./ReactNativeFiberRenderer');

31 -const ReactNativeFiberInspector = require('./ReactNativeFiberInspector');

32 -const findNumericNodeHandle = require('./findNumericNodeHandle');

27 +import UIManager from 'UIManager';

28 +

29 +import {showDialog} from './ReactNativeFiberErrorDialog';

30 +import NativeMethodsMixin from './NativeMethodsMixin';

31 +import ReactNativeBridgeEventPlugin from './ReactNativeBridgeEventPlugin';

32 +import ReactNativeComponent from './ReactNativeComponent';

33 +import ReactNativeComponentTree from './ReactNativeComponentTree';

34 +import ReactNativeFiberRenderer from './ReactNativeFiberRenderer';

35 +import ReactNativePropRegistry from './ReactNativePropRegistry';

36 +import {getInspectorDataForViewTag} from './ReactNativeFiberInspector';

37 +import createReactNativeComponentClass from './createReactNativeComponentClass';

38 +import findNumericNodeHandle from './findNumericNodeHandle';

39 +import takeSnapshot from './takeSnapshot';

41 ReactGenericBatching.injection.injectFiberBatchedUpdates(

42 ReactNativeFiberRenderer.batchedUpdates,

@@ -39,12 +46,10 @@ const roots = new Map();

47 // Intercept lifecycle errors and ensure they are shown with the correct stack

48 // trace within the native redbox component.

42 -ReactFiberErrorLogger.injection.injectDialog(

43 - ReactNativeFiberErrorDialog.showDialog,

44 -);

49 +ReactFiberErrorLogger.injection.injectDialog(showDialog);

51 const ReactNativeRenderer: ReactNativeType = {

47 - NativeComponent: require('./ReactNativeComponent'),

52 + NativeComponent: ReactNativeComponent,

54 findNodeHandle: findNumericNodeHandle,

@@ -93,16 +98,15 @@ const ReactNativeRenderer: ReactNativeType = {

99 __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: {

100 // Used as a mixin in many createClass-based components

96 - NativeMethodsMixin: require('./NativeMethodsMixin'),

97 -

101 + NativeMethodsMixin,

102 // Used by react-native-github/Libraries/ components

99 - ReactNativeBridgeEventPlugin: require('./ReactNativeBridgeEventPlugin'), // requireNativeComponent

100 - ReactGlobalSharedState: require('shared/ReactGlobalSharedState'), // Systrace

101 - ReactNativeComponentTree: require('./ReactNativeComponentTree'), // InspectorUtils, ScrollResponder

102 - ReactNativePropRegistry: require('./ReactNativePropRegistry'), // flattenStyle, Stylesheet

103 - TouchHistoryMath: require('events/TouchHistoryMath'), // PanResponder

104 - createReactNativeComponentClass: require('./createReactNativeComponentClass'), // RCTText, RCTView, ReactNativeART

105 - takeSnapshot: require('./takeSnapshot'), // react-native-implementation

103 + ReactNativeBridgeEventPlugin, // requireNativeComponent

104 + ReactGlobalSharedState, // Systrace

105 + ReactNativeComponentTree, // InspectorUtils, ScrollResponder

106 + ReactNativePropRegistry, // flattenStyle, Stylesheet

107 + TouchHistoryMath, // PanResponder

108 + createReactNativeComponentClass, // RCTText, RCTView, ReactNativeART

109 + takeSnapshot, // react-native-implementation

110 },

111 };

112

@@ -131,11 +135,11 @@ if (__DEV__) {

135 injectInternals({

136 findFiberByHostInstance: ReactNativeComponentTree.getClosestInstanceFromNode,

137 findHostInstanceByFiber: ReactNativeFiberRenderer.findHostInstance,

134 - getInspectorDataForViewTag: ReactNativeFiberInspector.getInspectorDataForViewTag,

138 + getInspectorDataForViewTag: getInspectorDataForViewTag,

139 // This is an enum because we may add more (e.g. profiler build)

140 bundleType: __DEV__ ? 1 : 0,

141 version: ReactVersion,

142 rendererPackageName: 'react-native-renderer',

143 });

144

141 -module.exports = ReactNativeRenderer;

145 +export default ReactNativeRenderer;

packages/react-native-renderer/src/ReactNativeTagHandles.js

+2 -2

@@ -8,7 +8,7 @@

8 */

9 'use strict';

11 -var invariant = require('fbjs/lib/invariant');

11 +import invariant from 'fbjs/lib/invariant';

13 /**

14 * Keeps track of allocating and associating native "tags" which are numeric,

@@ -52,4 +52,4 @@ var ReactNativeTagHandles = {

52 },

53 };

55 -module.exports = ReactNativeTagHandles;

55 +export default ReactNativeTagHandles;

packages/react-native-renderer/src/ReactNativeViewConfigRegistry.js

+30 -34

@@ -14,51 +14,47 @@ import type {

14 ViewConfigGetter,

15 } from './ReactNativeTypes';

17 -const invariant = require('fbjs/lib/invariant');

17 +import invariant from 'fbjs/lib/invariant';

19 const viewConfigCallbacks = new Map();

20 const viewConfigs = new Map();

22 -const ReactNativeViewConfigRegistry = {

23 - /**

22 +/**

23 * Registers a native view/component by name.

24 * A callback is provided to load the view config from UIManager.

25 * The callback is deferred until the view is actually rendered.

26 * This is done to avoid causing Prepack deopts.

27 */

29 - register(name: string, callback: ViewConfigGetter): string {

30 - invariant(

31 - !viewConfigCallbacks.has(name),

32 - 'Tried to register two views with the same name %s',

33 - name,

34 - );

35 - viewConfigCallbacks.set(name, callback);

36 - return name;

37 - },

28 +export function register(name: string, callback: ViewConfigGetter): string {

29 + invariant(

30 + !viewConfigCallbacks.has(name),

31 + 'Tried to register two views with the same name %s',

32 + name,

33 + );

34 + viewConfigCallbacks.set(name, callback);

35 + return name;

36 +}

39 - /**

38 +/**

39 * Retrieves a config for the specified view.

40 * If this is the first time the view has been used,

41 * This configuration will be lazy-loaded from UIManager.

42 */

44 - get(name: string): ReactNativeBaseComponentViewConfig {

45 - let viewConfig;

46 - if (!viewConfigs.has(name)) {

47 - const callback = viewConfigCallbacks.get(name);

48 - invariant(

49 - typeof callback === 'function',

50 - 'View config not found for name %s',

51 - name,

52 - );

53 - viewConfigCallbacks.set(name, null);

54 - viewConfig = callback();

55 - viewConfigs.set(name, viewConfig);

56 - } else {

57 - viewConfig = viewConfigs.get(name);

58 - }

59 - invariant(viewConfig, 'View config not found for name %s', name);

60 - return viewConfig;

61 - },

62 -};

63 -

64 -module.exports = ReactNativeViewConfigRegistry;

43 +export function get(name: string): ReactNativeBaseComponentViewConfig {

44 + let viewConfig;

45 + if (!viewConfigs.has(name)) {

46 + const callback = viewConfigCallbacks.get(name);

47 + invariant(

48 + typeof callback === 'function',

49 + 'View config not found for name %s',

50 + name,

51 + );

52 + viewConfigCallbacks.set(name, null);

53 + viewConfig = callback();

54 + viewConfigs.set(name, viewConfig);

55 + } else {

56 + viewConfig = viewConfigs.get(name);

57 + }

58 + invariant(viewConfig, 'View config not found for name %s', name);

59 + return viewConfig;

60 +}

packages/react-native-renderer/src/__mocks__/UIManager.js

+1 -1

@@ -9,7 +9,7 @@

10 // Mock of the Native Hooks

12 -const ReactNativeTagHandles = require('../ReactNativeTagHandles');

12 +const ReactNativeTagHandles = require('../ReactNativeTagHandles').default;

13 const invariant = require('fbjs/lib/invariant');

15 // Map of viewTag -> {children: [childTag], parent: ?parentTag}

packages/react-native-renderer/src/__mocks__/View.js

+2 -1

@@ -7,7 +7,8 @@

8 'use strict';

10 -var createReactNativeComponentClass = require('../createReactNativeComponentClass');

10 +var createReactNativeComponentClass = require('../createReactNativeComponentClass')

11 + .default;

13 var View = createReactNativeComponentClass({

14 validAttributes: {},

packages/react-native-renderer/src/__tests__/ReactNativeAttributePayload-test.js

+1 -1

@@ -8,7 +8,7 @@

8 'use strict';

10 var ReactNativeAttributePayload = require('../ReactNativeAttributePayload');

11 -var ReactNativePropRegistry = require('../ReactNativePropRegistry');

11 +var ReactNativePropRegistry = require('../ReactNativePropRegistry').default;

13 var diff = ReactNativeAttributePayload.diff;

packages/react-native-renderer/src/__tests__/ReactNativeEvents-test.js

+5 -3

@@ -69,10 +69,12 @@ beforeEach(() => {

69 RCTEventEmitter = require('RCTEventEmitter');

70 React = require('react');

71 ReactNative = require('react-native-renderer');

72 - ReactNativeBridgeEventPlugin = require('../ReactNativeBridgeEventPlugin');

73 - ResponderEventPlugin = require('events/ResponderEventPlugin');

72 + ReactNativeBridgeEventPlugin = require('../ReactNativeBridgeEventPlugin')

73 + .default;

74 + ResponderEventPlugin = require('events/ResponderEventPlugin').default;

75 UIManager = require('UIManager');

75 - createReactNativeComponentClass = require('../createReactNativeComponentClass');

76 + createReactNativeComponentClass = require('../createReactNativeComponentClass')

77 + .default;

78 });

80 it('fails if unknown/unsupported event types are dispatched', () => {

packages/react-native-renderer/src/__tests__/ReactNativeMount-test.js

+2 -1

@@ -21,7 +21,8 @@ describe('ReactNative', () => {

21 React = require('react');

22 ReactNative = require('react-native-renderer');

23 UIManager = require('UIManager');

24 - createReactNativeComponentClass = require('../createReactNativeComponentClass');

24 + createReactNativeComponentClass = require('../createReactNativeComponentClass')

25 + .default;

26 });

28 it('should be able to create and render a native component', () => {

packages/react-native-renderer/src/__tests__/createReactNativeComponentClass-test.js

+2 -1

@@ -17,7 +17,8 @@ describe('createReactNativeComponentClass', () => {

17 beforeEach(() => {

18 jest.resetModules();

20 - createReactNativeComponentClass = require('../createReactNativeComponentClass');

20 + createReactNativeComponentClass = require('../createReactNativeComponentClass')

21 + .default;

22 React = require('react');

23 ReactNative = require('react-native-renderer');

24 });

packages/react-native-renderer/src/createReactNativeComponentClass.js

+3 -3

@@ -11,7 +11,7 @@

12 import type {ViewConfigGetter} from './ReactNativeTypes';

14 -const ReactNativeViewConfigRegistry = require('./ReactNativeViewConfigRegistry');

14 +import {register} from './ReactNativeViewConfigRegistry';

16 /**

17 * Creates a renderable ReactNative host component.

@@ -25,7 +25,7 @@ const createReactNativeComponentClass = function(

25 name: string,

26 callback: ViewConfigGetter,

27 ): string {

28 - return ReactNativeViewConfigRegistry.register(name, callback);

28 + return register(name, callback);

29 };

31 -module.exports = createReactNativeComponentClass;

31 +export default createReactNativeComponentClass;

packages/react-native-renderer/src/findNodeHandle.js

+7 -10

@@ -11,16 +11,13 @@

12 import type {Fiber} from 'react-reconciler/src/ReactFiber';

14 -var ReactInstanceMap = require('shared/ReactInstanceMap');

15 -var {ReactCurrentOwner} = require('shared/ReactGlobalSharedState');

16 -var getComponentName = require('shared/getComponentName');

17 -var invariant = require('fbjs/lib/invariant');

14 +import * as ReactInstanceMap from 'shared/ReactInstanceMap';

15 +import {ReactCurrentOwner} from 'shared/ReactGlobalSharedState';

16 +import getComponentName from 'shared/getComponentName';

17 +import invariant from 'fbjs/lib/invariant';

18 +import warning from 'fbjs/lib/warning';

19 -var ReactNativeFiberRenderer = require('./ReactNativeFiberRenderer');

20 -

21 -if (__DEV__) {

22 - var warning = require('fbjs/lib/warning');

23 -}

20 +import ReactNativeFiberRenderer from './ReactNativeFiberRenderer';

22 /**

23 * ReactNative vs ReactWeb

@@ -110,4 +107,4 @@ function findNodeHandle(componentOrHandle: any): any {

107 }

108 }

109

113 -module.exports = findNodeHandle;

110 +export default findNodeHandle;

packages/react-native-renderer/src/findNumericNodeHandle.js

+3 -3

@@ -8,14 +8,14 @@

8 */

9 'use strict';

11 -var findNodeHandle = require('./findNodeHandle');

11 +import findNodeHandle from './findNodeHandle';

13 /**

14 * External users of findNodeHandle() expect the host tag number return type.

15 * The injected findNodeHandle() strategy returns the instance wrapper though.

16 * See NativeMethodsMixin#setNativeProps for more info on why this is done.

17 */

18 -module.exports = function findNumericNodeHandleFiber(

18 +export default function findNumericNodeHandleFiber(

19 componentOrHandle: any,

20 ): ?number {

21 const instance: any = findNodeHandle(componentOrHandle);

@@ -23,4 +23,4 @@ module.exports = function findNumericNodeHandleFiber(

23 return instance;

24 }

25 return instance._nativeTag;

26 -};

26 +}

packages/react-native-renderer/src/takeSnapshot.js

+3 -5

@@ -9,9 +9,9 @@

9 'use strict';

11 // Module provided by RN:

12 -const UIManager = require('UIManager');

12 +import UIManager from 'UIManager';

14 -const findNumericNodeHandle = require('./findNumericNodeHandle');

14 +import findNumericNodeHandle from './findNumericNodeHandle';

16 /**

17 * Capture an image of the screen, window or an individual view. The image

@@ -30,7 +30,7 @@ const findNumericNodeHandle = require('./findNumericNodeHandle');

30 * Returns a Promise.

31 * @platform ios

32 */

33 -function takeSnapshot(

33 +export default function takeSnapshot(

34 view?: 'window' | React$Element<any> | number,

35 options?: {

36 width?: number,

@@ -47,5 +47,3 @@ function takeSnapshot(

47 // prevent accidental backwards-incompatible usage.

48 return UIManager.__takeSnapshot(view, options);

49 }

50 -

51 -module.exports = takeSnapshot;

packages/react-noop-renderer/index.js

+5 -1

@@ -9,4 +9,8 @@

10 'use strict';

12 -module.exports = require('./src/ReactNoop');

12 +var ReactNoop = require('./src/ReactNoop');

13 +

14 +// TODO: decide on the top-level export form.

15 +// This is hacky but makes it work with both Rollup and Jest.

16 +module.exports = ReactNoop.default ? ReactNoop.default : ReactNoop;

packages/react-noop-renderer/src/ReactNoop.js

+8 -8

@@ -20,12 +20,13 @@ import type {Fiber} from 'react-reconciler/src/ReactFiber';

20 import type {UpdateQueue} from 'react-reconciler/src/ReactFiberUpdateQueue';

22 // TODO: direct imports like some-package/src/* are bad. Fix me.

23 -var ReactFiberInstrumentation = require('react-reconciler/src/ReactFiberInstrumentation');

24 -var ReactFiberReconciler = require('react-reconciler');

25 -var ReactFeatureFlags = require('shared/ReactFeatureFlags');

26 -var ReactInstanceMap = require('shared/ReactInstanceMap');

27 -var emptyObject = require('fbjs/lib/emptyObject');

28 -var expect = require('expect');

23 +import ReactFiberInstrumentation

24 + from 'react-reconciler/src/ReactFiberInstrumentation';

25 +import ReactFiberReconciler from 'react-reconciler';

26 +import ReactFeatureFlags from 'shared/ReactFeatureFlags';

27 +import * as ReactInstanceMap from 'shared/ReactInstanceMap';

28 +import emptyObject from 'fbjs/lib/emptyObject';

29 +import expect from 'expect';

31 const UPDATE_SIGNAL = {};

@@ -558,9 +559,8 @@ var ReactNoop = {

559

560 __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: {

561 // Private. Used only by fixtures/fiber-debugger.

561 - // (To be fair, it's the only place where `react-noop-renderer` package is used at all.)

562 ReactFiberInstrumentation,

563 },

564 };

565

566 -module.exports = ReactNoop;

566 +export default ReactNoop;

packages/react-reconciler/index.js

+7 -1

@@ -16,4 +16,10 @@ export type {

16 Reconciler,

17 } from './src/ReactFiberReconciler';

19 -module.exports = require('./src/ReactFiberReconciler');

19 +var ReactFiberReconciler = require('./src/ReactFiberReconciler');

20 +

21 +// TODO: decide on the top-level export form.

22 +// This is hacky but makes it work with both Rollup and Jest.

23 +module.exports = ReactFiberReconciler.default

24 + ? ReactFiberReconciler.default

25 + : ReactFiberReconciler;

packages/react-reconciler/src/ReactChildFiber.js

+32 -37

@@ -16,19 +16,36 @@ import type {

16 ExpirationTime,

17 } from 'react-reconciler/src/ReactFiberExpirationTime';

19 -var ReactTypeOfSideEffect = require('shared/ReactTypeOfSideEffect');

20 -var ReactTypeOfWork = require('shared/ReactTypeOfWork');

21 -var ReactFeatureFlags = require('shared/ReactFeatureFlags');

22 -var emptyObject = require('fbjs/lib/emptyObject');

23 -var invariant = require('fbjs/lib/invariant');

24 -var {REACT_PORTAL_TYPE} = require('./ReactPortal');

25 -var ReactFiber = require('./ReactFiber');

19 +import ReactFeatureFlags from 'shared/ReactFeatureFlags';

20 +import {NoEffect, Placement, Deletion} from 'shared/ReactTypeOfSideEffect';

21 +import {

22 + FunctionalComponent,

23 + ClassComponent,

24 + HostText,

25 + HostPortal,

26 + CallComponent,

27 + ReturnComponent,

28 + Fragment,

29 +} from 'shared/ReactTypeOfWork';

30 +import emptyObject from 'fbjs/lib/emptyObject';

31 +import invariant from 'fbjs/lib/invariant';

32 +import warning from 'fbjs/lib/warning';

27 -if (__DEV__) {

28 - var warning = require('fbjs/lib/warning');

34 +import {REACT_PORTAL_TYPE} from './ReactPortal';

35 +import {

36 + createWorkInProgress,

37 + createFiberFromElement,

38 + createFiberFromFragment,

39 + createFiberFromText,

40 + createFiberFromCall,

41 + createFiberFromReturn,

42 + createFiberFromPortal,

43 +} from './ReactFiber';

44 +import ReactDebugCurrentFiber from './ReactDebugCurrentFiber';

30 - var {getCurrentFiberStackAddendum} = require('./ReactDebugCurrentFiber');

46 +const {getCurrentFiberStackAddendum} = ReactDebugCurrentFiber;

48 +if (__DEV__) {

49 var didWarnAboutMaps = false;

50 /**

51 * Warn if there's no key explicitly set on dynamic arrays of children or

@@ -72,30 +89,8 @@ if (__DEV__) {

89 };

90 }

75 -const {

76 - createWorkInProgress,

77 - createFiberFromElement,

78 - createFiberFromFragment,

79 - createFiberFromText,

80 - createFiberFromCall,

81 - createFiberFromReturn,

82 - createFiberFromPortal,

83 -} = ReactFiber;

84 -

92 const isArray = Array.isArray;

87 -const {

88 - FunctionalComponent,

89 - ClassComponent,

90 - HostText,

91 - HostPortal,

92 - CallComponent,

93 - ReturnComponent,

94 - Fragment,

95 -} = ReactTypeOfWork;

96 -

97 -const {NoEffect, Placement, Deletion} = ReactTypeOfSideEffect;

98 -

94 const ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;

95 const FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec.

@@ -1562,13 +1557,13 @@ function ChildReconciler(shouldClone, shouldTrackSideEffects) {

1557 return reconcileChildFibers;

1558 }

1559

1565 -exports.reconcileChildFibers = ChildReconciler(true, true);

1560 +export const reconcileChildFibers = ChildReconciler(true, true);

1561

1567 -exports.reconcileChildFibersInPlace = ChildReconciler(false, true);

1562 +export const reconcileChildFibersInPlace = ChildReconciler(false, true);

1563

1569 -exports.mountChildFibersInPlace = ChildReconciler(false, false);

1564 +export const mountChildFibersInPlace = ChildReconciler(false, false);

1565

1571 -exports.cloneChildFibers = function(

1566 +export function cloneChildFibers(

1567 current: Fiber | null,

1568 workInProgress: Fiber,

1569 ): void {

@@ -1600,4 +1595,4 @@ exports.cloneChildFibers = function(

1595 newChild.return = workInProgress;

1596 }

1597 newChild.sibling = null;

1603 -};

1598 +}

packages/react-reconciler/src/ReactDebugCurrentFiber.js

+6 -9

@@ -9,14 +9,11 @@

10 'use strict';

12 -var {ReactDebugCurrentFrame} = require('shared/ReactGlobalSharedState');

13 -

14 -if (__DEV__) {

15 - var getComponentName = require('shared/getComponentName');

16 - var {

17 - getStackAddendumByWorkInProgressFiber,

18 - } = require('shared/ReactFiberComponentTreeHook');

19 -}

12 +import {ReactDebugCurrentFrame} from 'shared/ReactGlobalSharedState';

13 +import {

14 + getStackAddendumByWorkInProgressFiber,

15 +} from 'shared/ReactFiberComponentTreeHook';

16 +import getComponentName from 'shared/getComponentName';

18 import type {Fiber} from './ReactFiber';

@@ -75,4 +72,4 @@ var ReactDebugCurrentFiber = {

72 getCurrentFiberStackAddendum,

73 };

78 -module.exports = ReactDebugCurrentFiber;

75 +export default ReactDebugCurrentFiber;

packages/react-reconciler/src/ReactDebugFiberPerf.js

+14 -12

@@ -9,8 +9,18 @@

10 import type {Fiber} from './ReactFiber';

12 +import getComponentName from 'shared/getComponentName';

13 +import {

14 + HostRoot,

15 + HostComponent,

16 + HostText,

17 + HostPortal,

18 + ReturnComponent,

19 + Fragment,

20 +} from 'shared/ReactTypeOfWork';

21 +

22 // Trust the developer to only use this with a __DEV__ check

13 -let ReactDebugFiberPerf = ((null: any): typeof ReactDebugFiberPerf);

23 +let ReactDebugFiberPerf = (({}: any): typeof ReactDebugFiberPerf);

25 type MeasurementPhase =

26 | 'componentWillMount'

@@ -23,16 +33,6 @@ type MeasurementPhase =

33 | 'getChildContext';

35 if (__DEV__) {

26 - const getComponentName = require('shared/getComponentName');

27 - const {

28 - HostRoot,

29 - HostComponent,

30 - HostText,

31 - HostPortal,

32 - ReturnComponent,

33 - Fragment,

34 - } = require('shared/ReactTypeOfWork');

35 -

36 // Prefix measurements so that it's possible to filter them.

37 // Longer prefixes are hard to read in DevTools.

38 const reactEmoji = '\u269B';

@@ -408,4 +408,6 @@ if (__DEV__) {

408 };

409 }

410

411 -module.exports = ReactDebugFiberPerf;

411 +// TODO: convert to named exports

412 +// if this doesn't inflate the bundle.

413 +export default ReactDebugFiberPerf;

packages/react-reconciler/src/ReactFiber.js

+24 -27

@@ -21,9 +21,9 @@ import type {TypeOfSideEffect} from 'shared/ReactTypeOfSideEffect';

21 import type {ExpirationTime} from './ReactFiberExpirationTime';

22 import type {UpdateQueue} from './ReactFiberUpdateQueue';

24 -var invariant = require('fbjs/lib/invariant');

25 -var {NoEffect} = require('shared/ReactTypeOfSideEffect');

26 -var {

24 +import invariant from 'fbjs/lib/invariant';

25 +import {NoEffect} from 'shared/ReactTypeOfSideEffect';

26 +import {

27 IndeterminateComponent,

28 ClassComponent,

29 HostRoot,

@@ -33,14 +33,13 @@ var {

33 CallComponent,

34 ReturnComponent,

35 Fragment,

36 -} = require('shared/ReactTypeOfWork');

36 +} from 'shared/ReactTypeOfWork';

37 +import getComponentName from 'shared/getComponentName';

38 -var {NoWork} = require('./ReactFiberExpirationTime');

39 -var {NoContext} = require('./ReactTypeOfInternalContext');

39 +import {NoWork} from './ReactFiberExpirationTime';

40 +import {NoContext} from './ReactTypeOfInternalContext';

42 if (__DEV__) {

42 - var getComponentName = require('shared/getComponentName');

43 -

43 var hasBadMapPolyfill = false;

44 try {

45 const nonExtensibleObject = Object.preventExtensions({});

@@ -228,7 +227,7 @@ function shouldConstruct(Component) {

227 }

228

229 // This is used to create an alternate fiber to do work on.

231 -exports.createWorkInProgress = function(

230 +export function createWorkInProgress(

231 current: Fiber,

232 pendingProps: any,

233 expirationTime: ExpirationTime,

@@ -282,14 +281,14 @@ exports.createWorkInProgress = function(

281 workInProgress.ref = current.ref;

282

283 return workInProgress;

285 -};

284 +}

285

287 -exports.createHostRootFiber = function(): Fiber {

286 +export function createHostRootFiber(): Fiber {

287 const fiber = createFiber(HostRoot, null, NoContext);

288 return fiber;

290 -};

289 +}

290

292 -exports.createFiberFromElement = function(

291 +export function createFiberFromElement(

292 element: ReactElement,

293 internalContextTag: TypeOfInternalContext,

294 expirationTime: ExpirationTime,

@@ -359,9 +358,9 @@ exports.createFiberFromElement = function(

358 fiber.expirationTime = expirationTime;

359

360 return fiber;

362 -};

361 +}

362

364 -function createFiberFromFragment(

363 +export function createFiberFromFragment(

364 elements: ReactFragment,

365 internalContextTag: TypeOfInternalContext,

366 expirationTime: ExpirationTime,

@@ -373,9 +372,7 @@ function createFiberFromFragment(

372 return fiber;

373 }

374

376 -exports.createFiberFromFragment = createFiberFromFragment;

377 -

378 -exports.createFiberFromText = function(

375 +export function createFiberFromText(

376 content: string,

377 internalContextTag: TypeOfInternalContext,

378 expirationTime: ExpirationTime,

@@ -384,15 +381,15 @@ exports.createFiberFromText = function(

381 fiber.pendingProps = content;

382 fiber.expirationTime = expirationTime;

383 return fiber;

387 -};

384 +}

385

389 -exports.createFiberFromHostInstanceForDeletion = function(): Fiber {

386 +export function createFiberFromHostInstanceForDeletion(): Fiber {

387 const fiber = createFiber(HostComponent, null, NoContext);

388 fiber.type = 'DELETED';

389 return fiber;

393 -};

390 +}

391

395 -exports.createFiberFromCall = function(

392 +export function createFiberFromCall(

393 call: ReactCall,

394 internalContextTag: TypeOfInternalContext,

395 expirationTime: ExpirationTime,

@@ -402,9 +399,9 @@ exports.createFiberFromCall = function(

399 fiber.pendingProps = call;

400 fiber.expirationTime = expirationTime;

401 return fiber;

405 -};

402 +}

403

407 -exports.createFiberFromReturn = function(

404 +export function createFiberFromReturn(

405 returnNode: ReactReturn,

406 internalContextTag: TypeOfInternalContext,

407 expirationTime: ExpirationTime,

@@ -412,9 +409,9 @@ exports.createFiberFromReturn = function(

409 const fiber = createFiber(ReturnComponent, null, internalContextTag);

410 fiber.expirationTime = expirationTime;

411 return fiber;

415 -};

412 +}

413

417 -exports.createFiberFromPortal = function(

414 +export function createFiberFromPortal(

415 portal: ReactPortal,

416 internalContextTag: TypeOfInternalContext,

417 expirationTime: ExpirationTime,

@@ -428,4 +425,4 @@ exports.createFiberFromPortal = function(

425 implementation: portal.implementation,

426 };

427 return fiber;

431 -};

428 +}

packages/react-reconciler/src/ReactFiberBeginWork.js

+21 -22

@@ -17,7 +17,7 @@ import type {HydrationContext} from './ReactFiberHydrationContext';

17 import type {FiberRoot} from './ReactFiberRoot';

18 import type {ExpirationTime} from './ReactFiberExpirationTime';

20 -var {

20 +import {

21 IndeterminateComponent,

22 FunctionalComponent,

23 ClassComponent,

@@ -29,46 +29,45 @@ var {

29 CallHandlerPhase,

30 ReturnComponent,

31 Fragment,

32 -} = require('shared/ReactTypeOfWork');

33 -var {

32 +} from 'shared/ReactTypeOfWork';

33 +import {

34 PerformedWork,

35 Placement,

36 ContentReset,

37 Err,

38 Ref,

39 -} = require('shared/ReactTypeOfSideEffect');

40 -var {ReactCurrentOwner} = require('shared/ReactGlobalSharedState');

41 -var invariant = require('fbjs/lib/invariant');

42 -var getComponentName = require('shared/getComponentName');

43 -

44 -var ReactFiberClassComponent = require('./ReactFiberClassComponent');

45 -var {

39 +} from 'shared/ReactTypeOfSideEffect';

40 +import {ReactCurrentOwner} from 'shared/ReactGlobalSharedState';

41 +import invariant from 'fbjs/lib/invariant';

42 +import getComponentName from 'shared/getComponentName';

43 +import warning from 'fbjs/lib/warning';

44 +import ReactDebugCurrentFiber from './ReactDebugCurrentFiber';

45 +import ReactDebugFiberPerf from './ReactDebugFiberPerf';

46 +

47 +import ReactFiberClassComponent from './ReactFiberClassComponent';

48 +import {

49 mountChildFibersInPlace,

50 reconcileChildFibers,

51 reconcileChildFibersInPlace,

52 cloneChildFibers,

50 -} = require('./ReactChildFiber');

51 -var {processUpdateQueue} = require('./ReactFiberUpdateQueue');

52 -var {

53 +} from './ReactChildFiber';

54 +import {processUpdateQueue} from './ReactFiberUpdateQueue';

55 +import {

56 getMaskedContext,

57 getUnmaskedContext,

58 hasContextChanged,

59 pushContextProvider,

60 pushTopLevelContextObject,

61 invalidateContextProvider,

59 -} = require('./ReactFiberContext');

60 -var {NoWork, Never} = require('./ReactFiberExpirationTime');

62 +} from './ReactFiberContext';

63 +import {NoWork, Never} from './ReactFiberExpirationTime';

65 +var {cancelWorkTimer} = ReactDebugFiberPerf;

66 if (__DEV__) {

63 - var warning = require('fbjs/lib/warning');

64 -

65 - var ReactDebugCurrentFiber = require('./ReactDebugCurrentFiber');

66 - var {cancelWorkTimer} = require('./ReactDebugFiberPerf');

67 -

67 var warnedAboutStatelessRefs = {};

68 }

71 -module.exports = function<T, P, I, TI, PI, C, CC, CX, PL>(

70 +export default function<T, P, I, TI, PI, C, CC, CX, PL>(

71 config: HostConfig<T, P, I, TI, PI, C, CC, CX, PL>,

72 hostContext: HostContext<C, CX>,

73 hydrationContext: HydrationContext<C, CX>,

@@ -865,4 +864,4 @@ module.exports = function<T, P, I, TI, PI, C, CC, CX, PL>(

864 beginWork,

865 beginFailedWork,

866 };

868 -};

867 +}

packages/react-reconciler/src/ReactFiberClassComponent.js

+20 -20

@@ -12,35 +12,35 @@

12 import type {Fiber} from './ReactFiber';

13 import type {ExpirationTime} from './ReactFiberExpirationTime';

15 -var {Update} = require('shared/ReactTypeOfSideEffect');

16 -var ReactFeatureFlags = require('shared/ReactFeatureFlags');

17 -var {isMounted} = require('shared/ReactFiberTreeReflection');

18 -var ReactInstanceMap = require('shared/ReactInstanceMap');

19 -var emptyObject = require('fbjs/lib/emptyObject');

20 -var getComponentName = require('shared/getComponentName');

21 -var shallowEqual = require('fbjs/lib/shallowEqual');

22 -var invariant = require('fbjs/lib/invariant');

23 -

24 -var {AsyncUpdates} = require('./ReactTypeOfInternalContext');

25 -var {

15 +import {Update} from 'shared/ReactTypeOfSideEffect';

16 +import ReactFeatureFlags from 'shared/ReactFeatureFlags';

17 +import {isMounted} from 'shared/ReactFiberTreeReflection';

18 +import * as ReactInstanceMap from 'shared/ReactInstanceMap';

19 +import emptyObject from 'fbjs/lib/emptyObject';

20 +import getComponentName from 'shared/getComponentName';

21 +import shallowEqual from 'fbjs/lib/shallowEqual';

22 +import invariant from 'fbjs/lib/invariant';

23 +import warning from 'fbjs/lib/warning';

24 +

25 +import ReactDebugFiberPerf from './ReactDebugFiberPerf';

26 +import {AsyncUpdates} from './ReactTypeOfInternalContext';

27 +import {

28 cacheContext,

29 getMaskedContext,

30 getUnmaskedContext,

31 isContextConsumer,

30 -} = require('./ReactFiberContext');

31 -var {

32 +} from './ReactFiberContext';

33 +import {

34 insertUpdateIntoFiber,

35 processUpdateQueue,

34 -} = require('./ReactFiberUpdateQueue');

35 -var {hasContextChanged} = require('./ReactFiberContext');

36 +} from './ReactFiberUpdateQueue';

37 +import {hasContextChanged} from './ReactFiberContext';

39 +var {startPhaseTimer, stopPhaseTimer} = ReactDebugFiberPerf;

40 const fakeInternalInstance = {};

41 const isArray = Array.isArray;

43 if (__DEV__) {

41 - var warning = require('fbjs/lib/warning');

42 -

43 - var {startPhaseTimer, stopPhaseTimer} = require('./ReactDebugFiberPerf');

44 var didWarnAboutStateAssignmentForComponent = {};

46 var warnOnInvalidCallback = function(callback: mixed, callerName: string) {

@@ -75,7 +75,7 @@ if (__DEV__) {

75 Object.freeze(fakeInternalInstance);

76 }

78 -module.exports = function(

78 +export default function(

79 scheduleWork: (fiber: Fiber, expirationTime: ExpirationTime) => void,

80 computeExpirationForFiber: (fiber: Fiber) => ExpirationTime,

81 memoizeProps: (workInProgress: Fiber, props: any) => void,

@@ -720,4 +720,4 @@ module.exports = function(

720 // resumeMountClassInstance,

721 updateClassInstance,

722 };

723 -};

723 +}

packages/react-reconciler/src/ReactFiberCommitWork.js

+15 -20

@@ -12,32 +12,27 @@

12 import type {HostConfig} from 'react-reconciler';

13 import type {Fiber} from './ReactFiber';

15 -var ReactFeatureFlags = require('shared/ReactFeatureFlags');

16 -var ReactTypeOfWork = require('shared/ReactTypeOfWork');

17 -var {

15 +import ReactFeatureFlags from 'shared/ReactFeatureFlags';

16 +import {

17 ClassComponent,

18 HostRoot,

19 HostComponent,

20 HostText,

21 HostPortal,

22 CallComponent,

24 -} = ReactTypeOfWork;

25 -var {

26 - invokeGuardedCallback,

27 - hasCaughtError,

28 - clearCaughtError,

29 -} = require('shared/ReactErrorUtils');

30 -var {Placement, Update, ContentReset} = require('shared/ReactTypeOfSideEffect');

31 -var invariant = require('fbjs/lib/invariant');

32 -

33 -var {commitCallbacks} = require('./ReactFiberUpdateQueue');

34 -var {onCommitUnmount} = require('./ReactFiberDevToolsHook');

35 -

36 -if (__DEV__) {

37 - var {startPhaseTimer, stopPhaseTimer} = require('./ReactDebugFiberPerf');

38 -}

23 +} from 'shared/ReactTypeOfWork';

24 +import ReactErrorUtils from 'shared/ReactErrorUtils';

25 +import {Placement, Update, ContentReset} from 'shared/ReactTypeOfSideEffect';

26 +import invariant from 'fbjs/lib/invariant';

27 +

28 +import {commitCallbacks} from './ReactFiberUpdateQueue';

29 +import {onCommitUnmount} from './ReactFiberDevToolsHook';

30 +import ReactDebugFiberPerf from './ReactDebugFiberPerf';

40 -module.exports = function<T, P, I, TI, PI, C, CC, CX, PL>(

32 +var {invokeGuardedCallback, hasCaughtError, clearCaughtError} = ReactErrorUtils;

33 +var {startPhaseTimer, stopPhaseTimer} = ReactDebugFiberPerf;

34 +

35 +export default function<T, P, I, TI, PI, C, CC, CX, PL>(

36 config: HostConfig<T, P, I, TI, PI, C, CC, CX, PL>,

37 captureError: (failedFiber: Fiber, error: mixed) => Fiber | null,

38 ) {

@@ -680,4 +675,4 @@ module.exports = function<T, P, I, TI, PI, C, CC, CX, PL>(

675 } else {

676 invariant(false, 'Mutating reconciler is disabled.');

677 }

683 -};

678 +}

packages/react-reconciler/src/ReactFiberCompleteWork.js

+11 -11

@@ -17,8 +17,8 @@ import type {HostContext} from './ReactFiberHostContext';

17 import type {HydrationContext} from './ReactFiberHydrationContext';

18 import type {FiberRoot} from './ReactFiberRoot';

20 -var ReactFeatureFlags = require('shared/ReactFeatureFlags');

21 -var {

20 +import ReactFeatureFlags from 'shared/ReactFeatureFlags';

21 +import {

22 IndeterminateComponent,

23 FunctionalComponent,

24 ClassComponent,

@@ -30,18 +30,18 @@ var {

30 CallHandlerPhase,

31 ReturnComponent,

32 Fragment,

33 -} = require('shared/ReactTypeOfWork');

34 -var {Placement, Ref, Update} = require('shared/ReactTypeOfSideEffect');

35 -var invariant = require('fbjs/lib/invariant');

33 +} from 'shared/ReactTypeOfWork';

34 +import {Placement, Ref, Update} from 'shared/ReactTypeOfSideEffect';

35 +import invariant from 'fbjs/lib/invariant';

37 -var {reconcileChildFibers} = require('./ReactChildFiber');

38 -var {

37 +import {reconcileChildFibers} from './ReactChildFiber';

38 +import {

39 popContextProvider,

40 popTopLevelContextObject,

41 -} = require('./ReactFiberContext');

42 -var {Never} = require('./ReactFiberExpirationTime');

41 +} from './ReactFiberContext';

42 +import {Never} from './ReactFiberExpirationTime';

44 -module.exports = function<T, P, I, TI, PI, C, CC, CX, PL>(

44 +export default function<T, P, I, TI, PI, C, CC, CX, PL>(

45 config: HostConfig<T, P, I, TI, PI, C, CC, CX, PL>,

46 hostContext: HostContext<C, CX>,

47 hydrationContext: HydrationContext<C, CX>,

@@ -606,4 +606,4 @@ module.exports = function<T, P, I, TI, PI, C, CC, CX, PL>(

606 return {

607 completeWork,

608 };

609 -};

609 +}

packages/react-reconciler/src/ReactFiberContext.js

+37 -40

@@ -12,21 +12,21 @@

12 import type {Fiber} from './ReactFiber';

13 import type {StackCursor} from './ReactFiberStack';

15 -var {isFiberMounted} = require('shared/ReactFiberTreeReflection');

16 -var {ClassComponent, HostRoot} = require('shared/ReactTypeOfWork');

17 -var getComponentName = require('shared/getComponentName');

18 -var emptyObject = require('fbjs/lib/emptyObject');

19 -var invariant = require('fbjs/lib/invariant');

15 +import {isFiberMounted} from 'shared/ReactFiberTreeReflection';

16 +import {ClassComponent, HostRoot} from 'shared/ReactTypeOfWork';

17 +import getComponentName from 'shared/getComponentName';

18 +import emptyObject from 'fbjs/lib/emptyObject';

19 +import invariant from 'fbjs/lib/invariant';

20 +import warning from 'fbjs/lib/warning';

21 +import checkPropTypes from 'prop-types/checkPropTypes';

21 -const {createCursor, pop, push} = require('./ReactFiberStack');

23 +import {createCursor, pop, push} from './ReactFiberStack';

24 +import ReactDebugCurrentFiber from './ReactDebugCurrentFiber';

25 +import ReactDebugFiberPerf from './ReactDebugFiberPerf';

23 -if (__DEV__) {

24 - var warning = require('fbjs/lib/warning');

25 - var checkPropTypes = require('prop-types/checkPropTypes');

26 -

27 - var ReactDebugCurrentFiber = require('./ReactDebugCurrentFiber');

28 - var {startPhaseTimer, stopPhaseTimer} = require('./ReactDebugFiberPerf');

27 +const {startPhaseTimer, stopPhaseTimer} = ReactDebugFiberPerf;

29 +if (__DEV__) {

30 var warnedAboutMissingGetChildContext = {};

31 }

@@ -39,7 +39,7 @@ let didPerformWorkStackCursor: StackCursor<boolean> = createCursor(false);

39 // pushed the next context provider, and now need to merge their contexts.

40 let previousContext: Object = emptyObject;

42 -function getUnmaskedContext(workInProgress: Fiber): Object {

42 +export function getUnmaskedContext(workInProgress: Fiber): Object {

43 const hasOwnContext = isContextProvider(workInProgress);

44 if (hasOwnContext) {

45 // If the fiber is a context provider itself, when we read its context

@@ -50,9 +50,8 @@ function getUnmaskedContext(workInProgress: Fiber): Object {

50 }

51 return contextStackCursor.current;

52 }

53 -exports.getUnmaskedContext = getUnmaskedContext;

55 -function cacheContext(

54 +export function cacheContext(

55 workInProgress: Fiber,

56 unmaskedContext: Object,

57 maskedContext: Object,

@@ -61,9 +60,8 @@ function cacheContext(

60 instance.__reactInternalMemoizedUnmaskedChildContext = unmaskedContext;

61 instance.__reactInternalMemoizedMaskedChildContext = maskedContext;

62 }

64 -exports.cacheContext = cacheContext;

66 -exports.getMaskedContext = function(

64 +export function getMaskedContext(

65 workInProgress: Fiber,

66 unmaskedContext: Object,

67 ) {

@@ -107,23 +105,21 @@ exports.getMaskedContext = function(

105 }

106

107 return context;

110 -};

108 +}

109

112 -exports.hasContextChanged = function(): boolean {

110 +export function hasContextChanged(): boolean {

111 return didPerformWorkStackCursor.current;

114 -};

112 +}

113

116 -function isContextConsumer(fiber: Fiber): boolean {

114 +export function isContextConsumer(fiber: Fiber): boolean {

115 return fiber.tag === ClassComponent && fiber.type.contextTypes != null;

116 }

119 -exports.isContextConsumer = isContextConsumer;

117

121 -function isContextProvider(fiber: Fiber): boolean {

118 +export function isContextProvider(fiber: Fiber): boolean {

119 return fiber.tag === ClassComponent && fiber.type.childContextTypes != null;

120 }

124 -exports.isContextProvider = isContextProvider;

121

126 -function popContextProvider(fiber: Fiber): void {

122 +export function popContextProvider(fiber: Fiber): void {

123 if (!isContextProvider(fiber)) {

124 return;

125 }

@@ -131,14 +127,13 @@ function popContextProvider(fiber: Fiber): void {

127 pop(didPerformWorkStackCursor, fiber);

128 pop(contextStackCursor, fiber);

129 }

134 -exports.popContextProvider = popContextProvider;

130

136 -exports.popTopLevelContextObject = function(fiber: Fiber) {

131 +export function popTopLevelContextObject(fiber: Fiber) {

132 pop(didPerformWorkStackCursor, fiber);

133 pop(contextStackCursor, fiber);

139 -};

134 +}

135

141 -exports.pushTopLevelContextObject = function(

136 +export function pushTopLevelContextObject(

137 fiber: Fiber,

138 context: Object,

139 didChange: boolean,

@@ -151,9 +146,12 @@ exports.pushTopLevelContextObject = function(

146

147 push(contextStackCursor, context, fiber);

148 push(didPerformWorkStackCursor, didChange, fiber);

154 -};

149 +}

150

156 -function processChildContext(fiber: Fiber, parentContext: Object): Object {

151 +export function processChildContext(

152 + fiber: Fiber,

153 + parentContext: Object,

154 +): Object {

155 const instance = fiber.stateNode;

156 const childContextTypes = fiber.type.childContextTypes;

157

@@ -214,9 +212,8 @@ function processChildContext(fiber: Fiber, parentContext: Object): Object {

212

213 return {...parentContext, ...childContext};

214 }

217 -exports.processChildContext = processChildContext;

215

219 -exports.pushContextProvider = function(workInProgress: Fiber): boolean {

216 +export function pushContextProvider(workInProgress: Fiber): boolean {

217 if (!isContextProvider(workInProgress)) {

218 return false;

219 }

@@ -240,9 +237,9 @@ exports.pushContextProvider = function(workInProgress: Fiber): boolean {

237 );

238

239 return true;

243 -};

240 +}

241

245 -exports.invalidateContextProvider = function(

242 +export function invalidateContextProvider(

243 workInProgress: Fiber,

244 didChange: boolean,

245 ): void {

@@ -271,15 +268,15 @@ exports.invalidateContextProvider = function(

268 pop(didPerformWorkStackCursor, workInProgress);

269 push(didPerformWorkStackCursor, didChange, workInProgress);

270 }

274 -};

271 +}

272

276 -exports.resetContext = function(): void {

273 +export function resetContext(): void {

274 previousContext = emptyObject;

275 contextStackCursor.current = emptyObject;

276 didPerformWorkStackCursor.current = false;

280 -};

277 +}

278

282 -exports.findCurrentUnmaskedContext = function(fiber: Fiber): Object {

279 +export function findCurrentUnmaskedContext(fiber: Fiber): Object {

280 // Currently this is only used with renderSubtreeIntoContainer; not sure if it

281 // makes sense elsewhere

282 invariant(

@@ -302,4 +299,4 @@ exports.findCurrentUnmaskedContext = function(fiber: Fiber): Object {

299 node = parent;

300 }

301 return node.stateNode.context;

305 -};

302 +}

packages/react-reconciler/src/ReactFiberDevToolsHook.js

+5 -11

@@ -12,11 +12,9 @@

12 import type {Fiber} from './ReactFiber';

13 import type {FiberRoot} from './ReactFiberRoot';

15 -declare var __REACT_DEVTOOLS_GLOBAL_HOOK__: Object | void;

15 +import warning from 'fbjs/lib/warning';

17 -if (__DEV__) {

18 - var warning = require('fbjs/lib/warning');

19 -}

17 +declare var __REACT_DEVTOOLS_GLOBAL_HOOK__: Object | void;

19 let onCommitFiberRoot = null;

20 let onCommitFiberUnmount = null;

@@ -35,7 +33,7 @@ function catchErrors(fn) {

33 };

34 }

38 -function injectInternals(internals: Object): boolean {

36 +export function injectInternals(internals: Object): boolean {

37 if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined') {

38 // No DevTools

39 return false;

@@ -72,18 +70,14 @@ function injectInternals(internals: Object): boolean {

70 return true;

71 }

75 -function onCommitRoot(root: FiberRoot) {

73 +export function onCommitRoot(root: FiberRoot) {

74 if (typeof onCommitFiberRoot === 'function') {

75 onCommitFiberRoot(root);

76 }

77 }

81 -function onCommitUnmount(fiber: Fiber) {

79 +export function onCommitUnmount(fiber: Fiber) {

80 if (typeof onCommitFiberUnmount === 'function') {

81 onCommitFiberUnmount(fiber);

82 }

83 }

86 -

87 -exports.injectInternals = injectInternals;

88 -exports.onCommitRoot = onCommitRoot;

89 -exports.onCommitUnmount = onCommitUnmount;

packages/react-reconciler/src/ReactFiberErrorLogger.js

+3 -5

@@ -11,13 +11,13 @@

12 import type {CapturedError} from './ReactFiberScheduler';

14 -const invariant = require('fbjs/lib/invariant');

14 +import invariant from 'fbjs/lib/invariant';

16 const defaultShowDialog = (capturedError: CapturedError) => true;

18 let showDialog = defaultShowDialog;

20 -function logCapturedError(capturedError: CapturedError): void {

20 +export function logCapturedError(capturedError: CapturedError): void {

21 const logError = showDialog(capturedError);

23 // Allow injected showDialog() to prevent default console.error logging.

@@ -74,7 +74,7 @@ function logCapturedError(capturedError: CapturedError): void {

74 }

75 }

77 -exports.injection = {

77 +export const injection = {

78 /**

79 * Display custom dialog for lifecycle errors.

80 * Return false to prevent default behavior of logging to console.error.

@@ -91,5 +91,3 @@ exports.injection = {

91 showDialog = fn;

92 },

93 };

94 -

95 -exports.logCapturedError = logCapturedError;

packages/react-reconciler/src/ReactFiberExpirationTime.js

+5 -11

@@ -12,29 +12,24 @@

12 // TODO: Use an opaque type once ESLint et al support the syntax

13 export type ExpirationTime = number;

15 -const NoWork = 0;

16 -const Sync = 1;

17 -const Never = 2147483647; // Max int32: Math.pow(2, 31) - 1

15 +export const NoWork = 0;

16 +export const Sync = 1;

17 +export const Never = 2147483647; // Max int32: Math.pow(2, 31) - 1

19 const UNIT_SIZE = 10;

20 const MAGIC_NUMBER_OFFSET = 2;

22 -exports.Sync = Sync;

23 -exports.NoWork = NoWork;

24 -exports.Never = Never;

25 -

22 // 1 unit of expiration time represents 10ms.

27 -function msToExpirationTime(ms: number): ExpirationTime {

23 +export function msToExpirationTime(ms: number): ExpirationTime {

24 // Always add an offset so that we don't clash with the magic number for NoWork.

25 return ((ms / UNIT_SIZE) | 0) + MAGIC_NUMBER_OFFSET;

26 }

31 -exports.msToExpirationTime = msToExpirationTime;

28 function ceiling(num: number, precision: number): number {

29 return (((num / precision) | 0) + 1) * precision;

30 }

37 -function computeExpirationBucket(

32 +export function computeExpirationBucket(

33 currentTime: ExpirationTime,

34 expirationInMs: number,

35 bucketSizeMs: number,

@@ -44,4 +39,3 @@ function computeExpirationBucket(

39 bucketSizeMs / UNIT_SIZE,

40 );

41 }

47 -exports.computeExpirationBucket = computeExpirationBucket;

packages/react-reconciler/src/ReactFiberHostContext.js

+4 -4

@@ -13,9 +13,9 @@ import type {HostConfig} from 'react-reconciler';

13 import type {Fiber} from './ReactFiber';

14 import type {StackCursor} from './ReactFiberStack';

16 -const invariant = require('fbjs/lib/invariant');

16 +import invariant from 'fbjs/lib/invariant';

18 -const {createCursor, pop, push} = require('./ReactFiberStack');

18 +import {createCursor, pop, push} from './ReactFiberStack';

20 declare class NoContextT {}

21 const NO_CONTEXT: NoContextT = ({}: any);

@@ -30,7 +30,7 @@ export type HostContext<C, CX> = {

30 resetHostContainer(): void,

31 };

33 -module.exports = function<T, P, I, TI, PI, C, CC, CX, PL>(

33 +export default function<T, P, I, TI, PI, C, CC, CX, PL>(

34 config: HostConfig<T, P, I, TI, PI, C, CC, CX, PL>,

35 ): HostContext<C, CX> {

36 const {getChildHostContext, getRootHostContext} = config;

@@ -124,4 +124,4 @@ module.exports = function<T, P, I, TI, PI, C, CC, CX, PL>(

124 pushHostContext,

125 resetHostContainer,

126 };

127 -};

127 +}

packages/react-reconciler/src/ReactFiberHydrationContext.js

+6 -6

@@ -12,11 +12,11 @@

12 import type {HostConfig} from 'react-reconciler';

13 import type {Fiber} from './ReactFiber';

15 -const {HostComponent, HostText, HostRoot} = require('shared/ReactTypeOfWork');

16 -const {Deletion, Placement} = require('shared/ReactTypeOfSideEffect');

17 -var invariant = require('fbjs/lib/invariant');

15 +import {HostComponent, HostText, HostRoot} from 'shared/ReactTypeOfWork';

16 +import {Deletion, Placement} from 'shared/ReactTypeOfSideEffect';

17 +import invariant from 'fbjs/lib/invariant';

19 -const {createFiberFromHostInstanceForDeletion} = require('./ReactFiber');

19 +import {createFiberFromHostInstanceForDeletion} from './ReactFiber';

21 export type HydrationContext<C, CX> = {

22 enterHydrationState(fiber: Fiber): boolean,

@@ -31,7 +31,7 @@ export type HydrationContext<C, CX> = {

31 popHydrationState(fiber: Fiber): boolean,

32 };

34 -module.exports = function<T, P, I, TI, PI, C, CC, CX, PL>(

34 +export default function<T, P, I, TI, PI, C, CC, CX, PL>(

35 config: HostConfig<T, P, I, TI, PI, C, CC, CX, PL>,

36 ): HydrationContext<C, CX> {

37 const {shouldSetTextContent, hydration} = config;

@@ -376,4 +376,4 @@ module.exports = function<T, P, I, TI, PI, C, CC, CX, PL>(

376 prepareToHydrateHostTextInstance,

377 popHydrationState,

378 };

379 -};

379 +}

packages/react-reconciler/src/ReactFiberReconciler.js

+20 -23

@@ -13,35 +13,32 @@ import type {Fiber} from './ReactFiber';

13 import type {FiberRoot} from './ReactFiberRoot';

14 import type {ReactNodeList} from 'shared/ReactTypes';

16 -var ReactFeatureFlags = require('shared/ReactFeatureFlags');

17 -var ReactInstanceMap = require('shared/ReactInstanceMap');

18 -var {HostComponent} = require('shared/ReactTypeOfWork');

19 -var emptyObject = require('fbjs/lib/emptyObject');

20 -

21 -var {

16 +import ReactFeatureFlags from 'shared/ReactFeatureFlags';

17 +import {

18 + findCurrentHostFiber,

19 + findCurrentHostFiberWithNoPortals,

20 +} from 'shared/ReactFiberTreeReflection';

21 +import * as ReactInstanceMap from 'shared/ReactInstanceMap';

22 +import {HostComponent} from 'shared/ReactTypeOfWork';

23 +import emptyObject from 'fbjs/lib/emptyObject';

24 +import getComponentName from 'shared/getComponentName';

25 +import warning from 'fbjs/lib/warning';

26 +

27 +import {

28 findCurrentUnmaskedContext,

29 isContextProvider,

30 processChildContext,

25 -} = require('./ReactFiberContext');

26 -var {createFiberRoot} = require('./ReactFiberRoot');

27 -var ReactFiberScheduler = require('./ReactFiberScheduler');

28 -var {insertUpdateIntoFiber} = require('./ReactFiberUpdateQueue');

31 +} from './ReactFiberContext';

32 +import {createFiberRoot} from './ReactFiberRoot';

33 +import ReactFiberScheduler from './ReactFiberScheduler';

34 +import {insertUpdateIntoFiber} from './ReactFiberUpdateQueue';

35 +import ReactFiberInstrumentation from './ReactFiberInstrumentation';

36 +import ReactDebugCurrentFiber from './ReactDebugCurrentFiber';

38 if (__DEV__) {

31 - var getComponentName = require('shared/getComponentName');

32 - var warning = require('fbjs/lib/warning');

33 -

34 - var ReactFiberInstrumentation = require('./ReactFiberInstrumentation');

35 - var ReactDebugCurrentFiber = require('./ReactDebugCurrentFiber');

36 -

39 var didWarnAboutNestedUpdates = false;

40 }

40 -var {

41 - findCurrentHostFiber,

42 - findCurrentHostFiberWithNoPortals,

43 -} = require('shared/ReactFiberTreeReflection');

44 -

42 export type Deadline = {

43 timeRemaining: () => number,

44 };

@@ -255,7 +252,7 @@ function getContextForSubtree(

252 : parentContext;

253 }

254

258 -module.exports = function<T, P, I, TI, PI, C, CC, CX, PL>(

255 +export default function<T, P, I, TI, PI, C, CC, CX, PL>(

256 config: HostConfig<T, P, I, TI, PI, C, CC, CX, PL>,

257 ): Reconciler<C, I, TI> {

258 var {getPublicInstance} = config;

@@ -407,4 +404,4 @@ module.exports = function<T, P, I, TI, PI, C, CC, CX, PL>(

404 return hostFiber.stateNode;

405 },

406 };

410 -};

407 +}

packages/react-reconciler/src/ReactFiberRoot.js

+4 -4

@@ -12,8 +12,8 @@

12 import type {Fiber} from './ReactFiber';

13 import type {ExpirationTime} from './ReactFiberExpirationTime';

15 -const {createHostRootFiber} = require('./ReactFiber');

16 -const {NoWork} = require('./ReactFiberExpirationTime');

15 +import {createHostRootFiber} from './ReactFiber';

16 +import {NoWork} from './ReactFiberExpirationTime';

18 export type FiberRoot = {

19 // Any additional information from the host associated with this root.

@@ -40,7 +40,7 @@ export type FiberRoot = {

40 nextScheduledRoot: FiberRoot | null,

41 };

43 -exports.createFiberRoot = function(

43 +export function createFiberRoot(

44 containerInfo: any,

45 hydrate: boolean,

46 ): FiberRoot {

@@ -61,4 +61,4 @@ exports.createFiberRoot = function(

61 };

62 uninitializedFiber.stateNode = root;

63 return root;

64 -};

64 +}

packages/react-reconciler/src/ReactFiberScheduler.js

+49 -52

@@ -15,17 +15,12 @@ import type {FiberRoot} from './ReactFiberRoot';

15 import type {HydrationContext} from './ReactFiberHydrationContext';

16 import type {ExpirationTime} from './ReactFiberExpirationTime';

18 -var {

18 +import {

19 getStackAddendumByWorkInProgressFiber,

20 -} = require('shared/ReactFiberComponentTreeHook');

21 -var {

22 - invokeGuardedCallback,

23 - hasCaughtError,

24 - clearCaughtError,

25 -} = require('shared/ReactErrorUtils');

26 -var {ReactCurrentOwner} = require('shared/ReactGlobalSharedState');

27 -var getComponentName = require('shared/getComponentName');

28 -var {

20 +} from 'shared/ReactFiberComponentTreeHook';

21 +import ReactErrorUtils from 'shared/ReactErrorUtils';

22 +import {ReactCurrentOwner} from 'shared/ReactGlobalSharedState';

23 +import {

24 PerformedWork,

25 Placement,

26 Update,

@@ -35,35 +30,57 @@ var {

30 Callback,

31 Err,

32 Ref,

38 -} = require('shared/ReactTypeOfSideEffect');

39 -var {

33 +} from 'shared/ReactTypeOfSideEffect';

34 +import {

35 HostRoot,

36 HostComponent,

37 HostPortal,

38 ClassComponent,

44 -} = require('shared/ReactTypeOfWork');

45 -var invariant = require('fbjs/lib/invariant');

46 -

47 -var ReactFiberBeginWork = require('./ReactFiberBeginWork');

48 -var ReactFiberCompleteWork = require('./ReactFiberCompleteWork');

49 -var ReactFiberCommitWork = require('./ReactFiberCommitWork');

50 -var ReactFiberHostContext = require('./ReactFiberHostContext');

51 -var ReactFiberHydrationContext = require('./ReactFiberHydrationContext');

52 -var {popContextProvider} = require('./ReactFiberContext');

53 -const {reset} = require('./ReactFiberStack');

54 -var {logCapturedError} = require('./ReactFiberErrorLogger');

55 -var {createWorkInProgress} = require('./ReactFiber');

56 -var {onCommitRoot} = require('./ReactFiberDevToolsHook');

57 -var {

39 +} from 'shared/ReactTypeOfWork';

40 +import getComponentName from 'shared/getComponentName';

41 +import invariant from 'fbjs/lib/invariant';

42 +import warning from 'fbjs/lib/warning';

43 +

44 +import ReactFiberBeginWork from './ReactFiberBeginWork';

45 +import ReactFiberCompleteWork from './ReactFiberCompleteWork';

46 +import ReactFiberCommitWork from './ReactFiberCommitWork';

47 +import ReactFiberHostContext from './ReactFiberHostContext';

48 +import ReactFiberHydrationContext from './ReactFiberHydrationContext';

49 +import ReactFiberInstrumentation from './ReactFiberInstrumentation';

50 +import ReactDebugCurrentFiber from './ReactDebugCurrentFiber';

51 +import ReactDebugFiberPerf from './ReactDebugFiberPerf';

52 +import {popContextProvider} from './ReactFiberContext';

53 +import {reset} from './ReactFiberStack';

54 +import {logCapturedError} from './ReactFiberErrorLogger';

55 +import {createWorkInProgress} from './ReactFiber';

56 +import {onCommitRoot} from './ReactFiberDevToolsHook';

57 +import {

58 NoWork,

59 Sync,

60 Never,

61 msToExpirationTime,

62 computeExpirationBucket,

63 -} = require('./ReactFiberExpirationTime');

64 -var {AsyncUpdates} = require('./ReactTypeOfInternalContext');

65 -var {getUpdateExpirationTime} = require('./ReactFiberUpdateQueue');

66 -var {resetContext} = require('./ReactFiberContext');

63 +} from './ReactFiberExpirationTime';

64 +import {AsyncUpdates} from './ReactTypeOfInternalContext';

65 +import {getUpdateExpirationTime} from './ReactFiberUpdateQueue';

66 +import {resetContext} from './ReactFiberContext';

67 +

68 +var {invokeGuardedCallback, hasCaughtError, clearCaughtError} = ReactErrorUtils;

69 +var {

70 + recordEffect,

71 + recordScheduleUpdate,

72 + startWorkTimer,

73 + stopWorkTimer,

74 + stopFailedWorkTimer,

75 + startWorkLoopTimer,

76 + stopWorkLoopTimer,

77 + startCommitTimer,

78 + stopCommitTimer,

79 + startCommitHostEffectsTimer,

80 + stopCommitHostEffectsTimer,

81 + startCommitLifeCyclesTimer,

82 + stopCommitLifeCyclesTimer,

83 +} = ReactDebugFiberPerf;

85 export type CapturedError = {

86 componentName: ?string,

@@ -80,26 +97,6 @@ export type HandleErrorInfo = {

97 };

99 if (__DEV__) {

83 - var warning = require('fbjs/lib/warning');

84 -

85 - var ReactFiberInstrumentation = require('./ReactFiberInstrumentation');

86 - var ReactDebugCurrentFiber = require('./ReactDebugCurrentFiber');

87 - var {

88 - recordEffect,

89 - recordScheduleUpdate,

90 - startWorkTimer,

91 - stopWorkTimer,

92 - stopFailedWorkTimer,

93 - startWorkLoopTimer,

94 - stopWorkLoopTimer,

95 - startCommitTimer,

96 - stopCommitTimer,

97 - startCommitHostEffectsTimer,

98 - stopCommitHostEffectsTimer,

99 - startCommitLifeCyclesTimer,

100 - stopCommitLifeCyclesTimer,

101 - } = require('./ReactDebugFiberPerf');

102 -

100 var didWarnAboutStateTransition = false;

101 var didWarnSetStateChildContext = false;

102 var didWarnStateUpdateForUnmountedComponent = {};

@@ -149,7 +146,7 @@ if (__DEV__) {

146 };

147 }

148

152 -module.exports = function<T, P, I, TI, PI, C, CC, CX, PL>(

149 +export default function<T, P, I, TI, PI, C, CC, CX, PL>(

150 config: HostConfig<T, P, I, TI, PI, C, CC, CX, PL>,

151 ) {

152 const hostContext = ReactFiberHostContext(config);

@@ -1634,4 +1631,4 @@ module.exports = function<T, P, I, TI, PI, C, CC, CX, PL>(

1631 flushSync,

1632 deferredUpdates,

1633 };

1637 -};

1634 +}

packages/react-reconciler/src/ReactFiberStack.js

+12 -18

@@ -11,14 +11,12 @@

12 import type {Fiber} from './ReactFiber';

14 +import warning from 'fbjs/lib/warning';

15 +

16 export type StackCursor<T> = {

17 current: T,

18 };

18 -if (__DEV__) {

19 - var warning = require('fbjs/lib/warning');

20 -}

21 -

20 const valueStack: Array<any> = [];

22 if (__DEV__) {

@@ -27,17 +25,17 @@ if (__DEV__) {

26 let index = -1;

30 -exports.createCursor = function<T>(defaultValue: T): StackCursor<T> {

28 +export function createCursor<T>(defaultValue: T): StackCursor<T> {

29 return {

30 current: defaultValue,

31 };

34 -};

32 +}

36 -exports.isEmpty = function(): boolean {

34 +export function isEmpty(): boolean {

35 return index === -1;

38 -};

36 +}

40 -exports.pop = function<T>(cursor: StackCursor<T>, fiber: Fiber): void {

38 +export function pop<T>(cursor: StackCursor<T>, fiber: Fiber): void {

39 if (index < 0) {

40 if (__DEV__) {

41 warning(false, 'Unexpected pop.');

@@ -60,13 +58,9 @@ exports.pop = function<T>(cursor: StackCursor<T>, fiber: Fiber): void {

58 }

60 index--;

63 -};

61 +}

65 -exports.push = function<T>(

66 - cursor: StackCursor<T>,

67 - value: T,

68 - fiber: Fiber,

69 -): void {

63 +export function push<T>(cursor: StackCursor<T>, value: T, fiber: Fiber): void {

64 index++;

66 valueStack[index] = cursor.current;

@@ -76,9 +70,9 @@ exports.push = function<T>(

70 }

72 cursor.current = value;

79 -};

73 +}

81 -exports.reset = function(): void {

75 +export function reset(): void {

76 while (index > -1) {

77 valueStack[index] = null;

@@ -88,4 +82,4 @@ exports.reset = function(): void {

83 index--;

84 }

91 -};

85 +}

packages/react-reconciler/src/ReactFiberUpdateQueue.js

+13 -15

@@ -12,14 +12,14 @@

12 import type {Fiber} from './ReactFiber';

13 import type {ExpirationTime} from './ReactFiberExpirationTime';

15 -const {Callback: CallbackEffect} = require('shared/ReactTypeOfSideEffect');

16 -const {ClassComponent, HostRoot} = require('shared/ReactTypeOfWork');

17 -const invariant = require('fbjs/lib/invariant');

15 +import {Callback as CallbackEffect} from 'shared/ReactTypeOfSideEffect';

16 +import {ClassComponent, HostRoot} from 'shared/ReactTypeOfWork';

17 +import invariant from 'fbjs/lib/invariant';

18 +import warning from 'fbjs/lib/warning';

19 -const {NoWork} = require('./ReactFiberExpirationTime');

20 +import {NoWork} from './ReactFiberExpirationTime';

22 if (__DEV__) {

22 - var warning = require('fbjs/lib/warning');

23 var didWarnUpdateInsideUpdate = false;

24 }

@@ -84,7 +84,7 @@ function createUpdateQueue<State>(baseState: State): UpdateQueue<State> {

84 return queue;

85 }

87 -function insertUpdateIntoQueue<State>(

87 +export function insertUpdateIntoQueue<State>(

88 queue: UpdateQueue<State>,

89 update: Update<State>,

90 ): void {

@@ -103,9 +103,8 @@ function insertUpdateIntoQueue<State>(

103 queue.expirationTime = update.expirationTime;

104 }

105 }

106 -exports.insertUpdateIntoQueue = insertUpdateIntoQueue;

106

108 -function insertUpdateIntoFiber<State>(

107 +export function insertUpdateIntoFiber<State>(

108 fiber: Fiber,

109 update: Update<State>,

110 ): void {

@@ -168,9 +167,8 @@ function insertUpdateIntoFiber<State>(

167 // But we still need to update the `last` pointer of queue2.

168 queue2.last = update;

169 }

171 -exports.insertUpdateIntoFiber = insertUpdateIntoFiber;

170

173 -function getUpdateExpirationTime(fiber: Fiber): ExpirationTime {

171 +export function getUpdateExpirationTime(fiber: Fiber): ExpirationTime {

172 if (fiber.tag !== ClassComponent && fiber.tag !== HostRoot) {

173 return NoWork;

174 }

@@ -180,7 +178,6 @@ function getUpdateExpirationTime(fiber: Fiber): ExpirationTime {

178 }

179 return updateQueue.expirationTime;

180 }

183 -exports.getUpdateExpirationTime = getUpdateExpirationTime;

181

182 function getStateFromUpdate(update, instance, prevState, props) {

183 const partialState = update.partialState;

@@ -192,7 +189,7 @@ function getStateFromUpdate(update, instance, prevState, props) {

189 }

190 }

191

195 -function processUpdateQueue<State>(

192 +export function processUpdateQueue<State>(

193 current: Fiber | null,

194 workInProgress: Fiber,

195 queue: UpdateQueue<State>,

@@ -322,9 +319,11 @@ function processUpdateQueue<State>(

319

320 return state;

321 }

325 -exports.processUpdateQueue = processUpdateQueue;

322

327 -function commitCallbacks<State>(queue: UpdateQueue<State>, context: any) {

323 +export function commitCallbacks<State>(

324 + queue: UpdateQueue<State>,

325 + context: any,

326 +) {

327 const callbackList = queue.callbackList;

328 if (callbackList === null) {

329 return;

@@ -346,4 +345,3 @@ function commitCallbacks<State>(queue: UpdateQueue<State>, context: any) {

345 callback.call(context);

346 }

347 }

349 -exports.commitCallbacks = commitCallbacks;

packages/react-reconciler/src/ReactPortal.js

+3 -5

@@ -13,11 +13,11 @@ import type {ReactNodeList, ReactPortal} from 'shared/ReactTypes';

14 // The Symbol used to tag the special React types. If there is no native Symbol

15 // nor polyfill, then a plain number is used for performance.

16 -var REACT_PORTAL_TYPE =

16 +export const REACT_PORTAL_TYPE =

17 (typeof Symbol === 'function' && Symbol.for && Symbol.for('react.portal')) ||

18 0xeaca;

20 -exports.createPortal = function(

20 +export function createPortal(

21 children: ReactNodeList,

22 containerInfo: any,

23 // TODO: figure out the API for cross-renderer implementation.

@@ -32,6 +32,4 @@ exports.createPortal = function(

32 containerInfo,

33 implementation,

34 };

35 -};

36 -

37 -exports.REACT_PORTAL_TYPE = REACT_PORTAL_TYPE;

35 +}

packages/react-reconciler/src/ReactTypeOfInternalContext.js

+2 -4

@@ -11,7 +11,5 @@

12 export type TypeOfInternalContext = number;

14 -module.exports = {

15 - NoContext: 0,

16 - AsyncUpdates: 1,

17 -};

14 +export const NoContext = 0;

15 +export const AsyncUpdates = 1;

packages/react-rt-renderer/index.js

+5 -1

@@ -9,4 +9,8 @@

10 'use strict';

12 -module.exports = require('./src/ReactNativeRT');

12 +var ReactNativeRT = require('./src/ReactNativeRT');

13 +

14 +// TODO: decide on the top-level export form.

15 +// This is hacky but makes it work with both Rollup and Jest.

16 +module.exports = ReactNativeRT.default ? ReactNativeRT.default : ReactNativeRT;

packages/react-rt-renderer/src/ReactNativeRT.js

+15 -16

@@ -13,18 +13,19 @@ import type {ReactNativeRTType} from './ReactNativeRTTypes';

13 import type {ReactNodeList} from 'shared/ReactTypes';

15 // TODO: direct imports like some-package/src/* are bad. Fix me.

16 -const ReactFiberErrorLogger = require('react-reconciler/src/ReactFiberErrorLogger');

17 -const ReactNativeFiberErrorDialog = require('react-native-renderer/src/ReactNativeFiberErrorDialog');

18 -const ReactPortal = require('react-reconciler/src/ReactPortal');

19 -const {

20 - injectInternals,

21 -} = require('react-reconciler/src/ReactFiberDevToolsHook');

22 -const ReactGenericBatching = require('events/ReactGenericBatching');

23 -const ReactVersion = require('shared/ReactVersion');

24 -

25 -const ReactNativeRTComponentTree = require('./ReactNativeRTComponentTree');

26 -const ReactNativeRTFiberRenderer = require('./ReactNativeRTFiberRenderer');

27 -const ReactNativeRTFiberInspector = require('./ReactNativeRTFiberInspector');

16 +import * as ReactFiberErrorLogger

17 + from 'react-reconciler/src/ReactFiberErrorLogger';

18 +import {

19 + showDialog,

20 +} from 'react-native-renderer/src/ReactNativeFiberErrorDialog';

21 +import * as ReactPortal from 'react-reconciler/src/ReactPortal';

22 +import {injectInternals} from 'react-reconciler/src/ReactFiberDevToolsHook';

23 +import ReactGenericBatching from 'events/ReactGenericBatching';

24 +import ReactVersion from 'shared/ReactVersion';

25 +

26 +import ReactNativeRTComponentTree from './ReactNativeRTComponentTree';

27 +import ReactNativeRTFiberRenderer from './ReactNativeRTFiberRenderer';

28 +import ReactNativeRTFiberInspector from './ReactNativeRTFiberInspector';

30 /**

31 * Make sure essential globals are available and are patched correctly. Please don't remove this

@@ -44,9 +45,7 @@ const roots = new Map();

46 // Intercept lifecycle errors and ensure they are shown with the correct stack

47 // trace within the native redbox component.

47 -ReactFiberErrorLogger.injection.injectDialog(

48 - ReactNativeFiberErrorDialog.showDialog,

49 -);

48 +ReactFiberErrorLogger.injection.injectDialog(showDialog);

50 const ReactNativeRTFiber: ReactNativeRTType = {

51 render(element: React$Element<any>, containerTag: any, callback: ?Function) {

@@ -96,4 +95,4 @@ injectInternals({

95 rendererPackageName: 'react-rt-renderer',

96 });

99 -module.exports = ReactNativeRTFiber;

98 +export default ReactNativeRTFiber;

packages/react-rt-renderer/src/ReactNativeRTComponentTree.js

+1 -1

@@ -43,4 +43,4 @@ var ReactNativeRTComponentTree = {

43 updateFiberProps,

44 };

46 -module.exports = ReactNativeRTComponentTree;

46 +export default ReactNativeRTComponentTree;

packages/react-rt-renderer/src/ReactNativeRTEventEmitter.js

+3 -3

@@ -8,11 +8,11 @@

8 */

9 'use strict';

11 -var ReactGenericBatching = require('events/ReactGenericBatching');

11 +import ReactGenericBatching from 'events/ReactGenericBatching';

12 // Module provided by RN:

13 -var BatchedBridge = require('BatchedBridge');

13 +import BatchedBridge from 'BatchedBridge';

15 -var ReactNativeRTComponentTree = require('./ReactNativeRTComponentTree');

15 +import ReactNativeRTComponentTree from './ReactNativeRTComponentTree';

17 var ReactNativeRTEventEmitter = {

18 /**

packages/react-rt-renderer/src/ReactNativeRTFiberInspector.js

+12 -11

@@ -8,17 +8,18 @@

8 */

9 'use strict';

11 -const ReactFiberTreeReflection = require('shared/ReactFiberTreeReflection');

12 -const getComponentName = require('shared/getComponentName');

13 -const ReactTypeOfWork = require('shared/ReactTypeOfWork');

14 -const emptyObject = require('fbjs/lib/emptyObject');

15 -const invariant = require('fbjs/lib/invariant');

16 -const {findCurrentFiberUsingSlowPath} = ReactFiberTreeReflection;

17 -const {HostComponent} = ReactTypeOfWork;

11 +import {

12 + findCurrentFiberUsingSlowPath,

13 + findCurrentHostFiber,

14 +} from 'shared/ReactFiberTreeReflection';

15 +import getComponentName from 'shared/getComponentName';

16 +import {HostComponent} from 'shared/ReactTypeOfWork';

17 +import emptyObject from 'fbjs/lib/emptyObject';

18 +import invariant from 'fbjs/lib/invariant';

19 -const ReactNativeRTComponentTree = require('./ReactNativeRTComponentTree');

20 -const {getFiberFromTag} = ReactNativeRTComponentTree;

20 +import ReactNativeRTComponentTree from './ReactNativeRTComponentTree';

22 +const {getFiberFromTag} = ReactNativeRTComponentTree;

23 let getInspectorDataForViewTag;

25 if (__DEV__) {

@@ -47,7 +48,7 @@ if (__DEV__) {

48 };

50 var getHostProps = function(fiber) {

50 - const host = ReactFiberTreeReflection.findCurrentHostFiber(fiber);

51 + const host = findCurrentHostFiber(fiber);

52 if (host) {

53 return host.memoizedProps || emptyObject;

54 }

@@ -102,6 +103,6 @@ if (__DEV__) {

103 };

104 }

105

105 -module.exports = {

106 +export default {

107 getInspectorDataForViewTag,

108 };

packages/react-rt-renderer/src/ReactNativeRTFiberRenderer.js

+7 -7

@@ -9,14 +9,14 @@

10 'use strict';

12 -const ReactFiberReconciler = require('react-reconciler');

13 -const emptyObject = require('fbjs/lib/emptyObject');

14 -const invariant = require('fbjs/lib/invariant');

12 +import ReactFiberReconciler from 'react-reconciler';

13 +import emptyObject from 'fbjs/lib/emptyObject';

14 +import invariant from 'fbjs/lib/invariant';

15 // Module provided by RN:

16 -const RTManager = require('RTManager');

16 +import RTManager from 'RTManager';

18 -const ReactNativeRTComponentTree = require('./ReactNativeRTComponentTree');

19 -const ReactNativeRTTagHandles = require('./ReactNativeRTTagHandles');

18 +import ReactNativeRTComponentTree from './ReactNativeRTComponentTree';

19 +import ReactNativeRTTagHandles from './ReactNativeRTTagHandles';

21 export type Container = number;

22 export type Instance = number;

@@ -242,4 +242,4 @@ const NativeRTRenderer = ReactFiberReconciler({

242 },

243 });

244

245 -module.exports = NativeRTRenderer;

245 +export default NativeRTRenderer;

packages/react-rt-renderer/src/ReactNativeRTTagHandles.js

+2 -2

@@ -8,7 +8,7 @@

8 */

9 'use strict';

11 -var invariant = require('fbjs/lib/invariant');

11 +import invariant from 'fbjs/lib/invariant';

13 /**

14 * Keeps track of allocating and associating native "tags" which are numeric,

@@ -49,4 +49,4 @@ var ReactNativeRTTagHandles = {

49 },

50 };

52 -module.exports = ReactNativeRTTagHandles;

52 +export default ReactNativeRTTagHandles;

packages/react-test-renderer/index.js

+7 -1

@@ -9,4 +9,10 @@

10 'use strict';

12 -module.exports = require('./src/ReactTestRenderer');

12 +var ReactTestRenderer = require('./src/ReactTestRenderer');

13 +

14 +// TODO: decide on the top-level export form.

15 +// This is hacky but makes it work with both Rollup and Jest.

16 +module.exports = ReactTestRenderer.default

17 + ? ReactTestRenderer.default

18 + : ReactTestRenderer;

packages/react-test-renderer/shallow.js

+7 -1

@@ -9,4 +9,10 @@

10 'use strict';

12 -module.exports = require('./src/ReactShallowRenderer');

12 +var ReactShallowRenderer = require('./src/ReactShallowRenderer');

13 +

14 +// TODO: decide on the top-level export form.

15 +// This is hacky but makes it work with both Rollup and Jest.

16 +module.exports = ReactShallowRenderer.default

17 + ? ReactShallowRenderer.default

18 + : ReactShallowRenderer;

packages/react-test-renderer/src/ReactShallowRenderer.js

+7 -7

@@ -8,12 +8,12 @@

9 'use strict';

11 -const React = require('react');

12 -const describeComponentFrame = require('shared/describeComponentFrame');

13 -const getComponentName = require('shared/getComponentName');

14 -const emptyObject = require('fbjs/lib/emptyObject');

15 -const invariant = require('fbjs/lib/invariant');

16 -const checkPropTypes = require('prop-types/checkPropTypes');

11 +import React from 'react';

12 +import describeComponentFrame from 'shared/describeComponentFrame';

13 +import getComponentName from 'shared/getComponentName';

14 +import emptyObject from 'fbjs/lib/emptyObject';

15 +import invariant from 'fbjs/lib/invariant';

16 +import checkPropTypes from 'prop-types/checkPropTypes';

18 class ReactShallowRenderer {

19 static createRenderer = function() {

@@ -267,4 +267,4 @@ function shouldConstruct(Component) {

267 return !!(Component.prototype && Component.prototype.isReactComponent);

268 }

269

270 -module.exports = ReactShallowRenderer;

270 +export default ReactShallowRenderer;

packages/react-test-renderer/src/ReactTestRenderer.js

+9 -12

@@ -12,20 +12,19 @@

12 import type {Fiber} from 'react-reconciler/src/ReactFiber';

13 import type {FiberRoot} from 'react-reconciler/src/ReactFiberRoot';

15 -var ReactFiberReconciler = require('react-reconciler');

16 -var ReactGenericBatching = require('events/ReactGenericBatching');

17 -var ReactFiberTreeReflection = require('shared/ReactFiberTreeReflection');

18 -var emptyObject = require('fbjs/lib/emptyObject');

19 -var ReactTypeOfWork = require('shared/ReactTypeOfWork');

20 -var invariant = require('fbjs/lib/invariant');

21 -var {

15 +import ReactFiberReconciler from 'react-reconciler';

16 +import ReactGenericBatching from 'events/ReactGenericBatching';

17 +import {findCurrentFiberUsingSlowPath} from 'shared/ReactFiberTreeReflection';

18 +import emptyObject from 'fbjs/lib/emptyObject';

19 +import {

20 Fragment,

21 FunctionalComponent,

22 ClassComponent,

23 HostComponent,

24 HostText,

25 HostRoot,

28 -} = ReactTypeOfWork;

26 +} from 'shared/ReactTypeOfWork';

27 +import invariant from 'fbjs/lib/invariant';

29 type TestRendererOptions = {

30 createNodeMock: (element: React$Element<any>) => any,

@@ -372,9 +371,7 @@ class ReactTestInstance {

371

372 _currentFiber(): Fiber {

373 // Throws if this component has been unmounted.

375 - const fiber = ReactFiberTreeReflection.findCurrentFiberUsingSlowPath(

376 - this._fiber,

377 - );

374 + const fiber = findCurrentFiberUsingSlowPath(this._fiber);

375 invariant(

376 fiber !== null,

377 "Can't read from currently-mounting component. This error is likely " +

@@ -642,4 +639,4 @@ var ReactTestRendererFiber = {

639 /* eslint-enable camelcase */

640 };

641

645 -module.exports = ReactTestRendererFiber;

642 +export default ReactTestRendererFiber;

packages/react/index.js

+5 -1

@@ -9,4 +9,8 @@

10 'use strict';

12 -module.exports = require('./src/React');

12 +var React = require('./src/React');

13 +

14 +// TODO: decide on the top-level export form.

15 +// This is hacky but makes it work with both Rollup and Jest.

16 +module.exports = React.default ? React.default : React;

packages/react/src/React.js

+34 -34

@@ -7,24 +7,25 @@

8 'use strict';

10 -var ReactVersion = require('shared/ReactVersion');

11 -var ReactFeatureFlags = require('shared/ReactFeatureFlags');

10 +import assign from 'object-assign';

11 +import ReactVersion from 'shared/ReactVersion';

12 +import ReactFeatureFlags from 'shared/ReactFeatureFlags';

13 -var ReactBaseClasses = require('./ReactBaseClasses');

14 -var ReactChildren = require('./ReactChildren');

15 -var ReactElement = require('./ReactElement');

16 -var onlyChild = require('./onlyChild');

17 -

18 -var createElement = ReactElement.createElement;

19 -var createFactory = ReactElement.createFactory;

20 -var cloneElement = ReactElement.cloneElement;

21 -

22 -if (__DEV__) {

23 - var ReactElementValidator = require('./ReactElementValidator');

24 - createElement = ReactElementValidator.createElement;

25 - createFactory = ReactElementValidator.createFactory;

26 - cloneElement = ReactElementValidator.cloneElement;

27 -}

14 +import {Component, PureComponent, AsyncComponent} from './ReactBaseClasses';

15 +import {forEach, map, count, toArray, only} from './ReactChildren';

16 +import ReactCurrentOwner from './ReactCurrentOwner';

17 +import {

18 + createElement,

19 + createFactory,

20 + cloneElement,

21 + isValidElement,

22 +} from './ReactElement';

23 +import {

24 + createElementWithValidation,

25 + createFactoryWithValidation,

26 + cloneElementWithValidation,

27 +} from './ReactElementValidator';

28 +import ReactDebugCurrentFrame from './ReactDebugCurrentFrame';

30 const REACT_FRAGMENT_TYPE =

31 (typeof Symbol === 'function' &&

@@ -34,29 +35,28 @@ const REACT_FRAGMENT_TYPE =

36 var React = {

37 Children: {

37 - map: ReactChildren.map,

38 - forEach: ReactChildren.forEach,

39 - count: ReactChildren.count,

40 - toArray: ReactChildren.toArray,

41 - only: onlyChild,

38 + map,

39 + forEach,

40 + count,

41 + toArray,

42 + only,

43 },

44 - Component: ReactBaseClasses.Component,

45 - PureComponent: ReactBaseClasses.PureComponent,

46 - unstable_AsyncComponent: ReactBaseClasses.AsyncComponent,

47 -

48 - createElement: createElement,

49 - cloneElement: cloneElement,

50 - isValidElement: ReactElement.isValidElement,

45 + Component,

46 + PureComponent,

47 + unstable_AsyncComponent: AsyncComponent,

52 - createFactory: createFactory,

49 + createElement: __DEV__ ? createElementWithValidation : createElement,

50 + cloneElement: __DEV__ ? cloneElementWithValidation : cloneElement,

51 + createFactory: __DEV__ ? createFactoryWithValidation : createFactory,

52 + isValidElement: isValidElement,

54 version: ReactVersion,

56 __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: {

57 - ReactCurrentOwner: require('./ReactCurrentOwner'),

57 + ReactCurrentOwner,

58 // Used by renderers to avoid bundling object-assign twice in UMD bundles:

59 - assign: require('object-assign'),

59 + assign,

60 },

61 };

@@ -67,11 +67,11 @@ if (ReactFeatureFlags.enableReactFragment) {

67 if (__DEV__) {

68 Object.assign(React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, {

69 // These should not be included in production.

70 - ReactDebugCurrentFrame: require('./ReactDebugCurrentFrame'),

70 + ReactDebugCurrentFrame,

71 // Shim for React DOM 16.0.0 which still destructured (but not used) this.

72 // TODO: remove in React 17.0.

73 ReactComponentTreeHook: {},

74 });

75 }

77 -module.exports = React;

77 +export default React;

packages/react/src/ReactBaseClasses.js

+21 -25

@@ -7,16 +7,16 @@

8 'use strict';

10 -var emptyObject = require('fbjs/lib/emptyObject');

11 -var invariant = require('fbjs/lib/invariant');

12 -var lowPriorityWarning = require('shared/lowPriorityWarning');

10 +import emptyObject from 'fbjs/lib/emptyObject';

11 +import invariant from 'fbjs/lib/invariant';

12 +import lowPriorityWarning from 'shared/lowPriorityWarning';

14 -var ReactNoopUpdateQueue = require('./ReactNoopUpdateQueue');

14 +import ReactNoopUpdateQueue from './ReactNoopUpdateQueue';

16 /**

17 * Base class helpers for the updating state of a component.

18 */

19 -function ReactComponent(props, context, updater) {

19 +function Component(props, context, updater) {

20 this.props = props;

21 this.context = context;

22 this.refs = emptyObject;

@@ -25,7 +25,7 @@ function ReactComponent(props, context, updater) {

25 this.updater = updater || ReactNoopUpdateQueue;

26 }

28 -ReactComponent.prototype.isReactComponent = {};

28 +Component.prototype.isReactComponent = {};

30 /**

31 * Sets a subset of the state. Always use this to mutate

@@ -52,7 +52,7 @@ ReactComponent.prototype.isReactComponent = {};

52 * @final

53 * @protected

54 */

55 -ReactComponent.prototype.setState = function(partialState, callback) {

55 +Component.prototype.setState = function(partialState, callback) {

56 invariant(

57 typeof partialState === 'object' ||

58 typeof partialState === 'function' ||

@@ -77,7 +77,7 @@ ReactComponent.prototype.setState = function(partialState, callback) {

77 * @final

78 * @protected

79 */

80 -ReactComponent.prototype.forceUpdate = function(callback) {

80 +Component.prototype.forceUpdate = function(callback) {

81 this.updater.enqueueForceUpdate(this, callback, 'forceUpdate');

82 };

@@ -100,7 +100,7 @@ if (__DEV__) {

100 ],

101 };

102 var defineDeprecationWarning = function(methodName, info) {

103 - Object.defineProperty(ReactComponent.prototype, methodName, {

103 + Object.defineProperty(Component.prototype, methodName, {

104 get: function() {

105 lowPriorityWarning(

106 false,

@@ -122,8 +122,8 @@ if (__DEV__) {

122 /**

123 * Base class helpers for the updating state of a component.

124 */

125 -function ReactPureComponent(props, context, updater) {

126 - // Duplicated from ReactComponent.

125 +function PureComponent(props, context, updater) {

126 + // Duplicated from Component.

127 this.props = props;

128 this.context = context;

129 this.refs = emptyObject;

@@ -133,15 +133,15 @@ function ReactPureComponent(props, context, updater) {

133 }

134

135 function ComponentDummy() {}

136 -ComponentDummy.prototype = ReactComponent.prototype;

137 -var pureComponentPrototype = (ReactPureComponent.prototype = new ComponentDummy());

138 -pureComponentPrototype.constructor = ReactPureComponent;

136 +ComponentDummy.prototype = Component.prototype;

137 +var pureComponentPrototype = (PureComponent.prototype = new ComponentDummy());

138 +pureComponentPrototype.constructor = PureComponent;

139 // Avoid an extra prototype jump for these methods.

140 -Object.assign(pureComponentPrototype, ReactComponent.prototype);

140 +Object.assign(pureComponentPrototype, Component.prototype);

141 pureComponentPrototype.isPureReactComponent = true;

142

143 -function ReactAsyncComponent(props, context, updater) {

144 - // Duplicated from ReactComponent.

143 +function AsyncComponent(props, context, updater) {

144 + // Duplicated from Component.

145 this.props = props;

146 this.context = context;

147 this.refs = emptyObject;

@@ -150,17 +150,13 @@ function ReactAsyncComponent(props, context, updater) {

150 this.updater = updater || ReactNoopUpdateQueue;

151 }

152

153 -var asyncComponentPrototype = (ReactAsyncComponent.prototype = new ComponentDummy());

154 -asyncComponentPrototype.constructor = ReactAsyncComponent;

153 +var asyncComponentPrototype = (AsyncComponent.prototype = new ComponentDummy());

154 +asyncComponentPrototype.constructor = AsyncComponent;

155 // Avoid an extra prototype jump for these methods.

156 -Object.assign(asyncComponentPrototype, ReactComponent.prototype);

156 +Object.assign(asyncComponentPrototype, Component.prototype);

157 asyncComponentPrototype.unstable_isAsyncReactComponent = true;

158 asyncComponentPrototype.render = function() {

159 return this.props.children;

160 };

161

162 -module.exports = {

163 - Component: ReactComponent,

164 - PureComponent: ReactPureComponent,

165 - AsyncComponent: ReactAsyncComponent,

166 -};

162 +export {Component, PureComponent, AsyncComponent};

packages/react/src/ReactChildren.js

+37 -20

@@ -7,16 +7,12 @@

8 'use strict';

10 -var emptyFunction = require('fbjs/lib/emptyFunction');

11 -var invariant = require('fbjs/lib/invariant');

10 +import emptyFunction from 'fbjs/lib/emptyFunction';

11 +import invariant from 'fbjs/lib/invariant';

12 +import warning from 'fbjs/lib/warning';

13 -var ReactElement = require('./ReactElement');

14 -

15 -if (__DEV__) {

16 - var warning = require('fbjs/lib/warning');

17 -

18 - var {getStackAddendum} = require('./ReactDebugCurrentFrame');

19 -}

14 +import {isValidElement, cloneAndReplaceKey} from './ReactElement';

15 +import ReactDebugCurrentFrame from './ReactDebugCurrentFrame';

17 var ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;

18 var FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec.

@@ -169,7 +165,7 @@ function traverseAllChildrenImpl(

165 'Using Maps as children is unsupported and will likely yield ' +

166 'unexpected results. Convert it to a sequence/iterable of keyed ' +

167 'ReactElements instead.%s',

172 - getStackAddendum(),

168 + ReactDebugCurrentFrame.getStackAddendum(),

169 );

170 didWarnAboutMaps = true;

171 }

@@ -194,7 +190,7 @@ function traverseAllChildrenImpl(

190 addendum =

191 ' If you meant to render a collection of children, use an array ' +

192 'instead.' +

197 - getStackAddendum();

193 + ReactDebugCurrentFrame.getStackAddendum();

194 }

195 var childrenString = '' + children;

196 invariant(

@@ -300,8 +296,8 @@ function mapSingleChildIntoContext(bookKeeping, child, childKey) {

296 emptyFunction.thatReturnsArgument,

297 );

298 } else if (mappedChild != null) {

303 - if (ReactElement.isValidElement(mappedChild)) {

304 - mappedChild = ReactElement.cloneAndReplaceKey(

299 + if (isValidElement(mappedChild)) {

300 + mappedChild = cloneAndReplaceKey(

301 mappedChild,

302 // Keep both the (mapped) and old keys if they differ, just as

303 // traverseAllChildren used to do for objects as children

@@ -383,11 +379,32 @@ function toArray(children) {

379 return result;

380 }

381

386 -var ReactChildren = {

387 - forEach: forEachChildren,

388 - map: mapChildren,

389 - count: countChildren,

390 - toArray: toArray,

391 -};

382 +/**

383 + * Returns the first child in a collection of children and verifies that there

384 + * is only one child in the collection.

385 + *

386 + * See https://reactjs.org/docs/react-api.html#react.children.only

387 + *

388 + * The current implementation of this function assumes that a single child gets

389 + * passed without a wrapper, but the purpose of this helper function is to

390 + * abstract away the particular structure of children.

391 + *

392 + * @param {?object} children Child collection structure.

393 + * @return {ReactElement} The first and only `ReactElement` contained in the

394 + * structure.

395 + */

396 +function onlyChild(children) {

397 + invariant(

398 + isValidElement(children),

399 + 'React.Children.only expected to receive a single React element child.',

400 + );

401 + return children;

402 +}

403

393 -module.exports = ReactChildren;

404 +export {

405 + forEachChildren as forEach,

406 + mapChildren as map,

407 + countChildren as count,

408 + onlyChild as only,

409 + toArray,

410 +};

packages/react/src/ReactCurrentOwner.js

+1 -3

@@ -7,8 +7,6 @@

7 * @flow

8 */

10 -'use strict';

11 -

10 import type {Fiber} from 'react-reconciler/src/ReactFiber';

12 /**

@@ -25,4 +23,4 @@ var ReactCurrentOwner = {

23 current: (null: null | Fiber),

24 };

28 -module.exports = ReactCurrentOwner;

26 +export default ReactCurrentOwner;

packages/react/src/ReactDebugCurrentFrame.js

+1 -1

@@ -24,4 +24,4 @@ if (__DEV__) {

24 };

25 }

27 -module.exports = ReactDebugCurrentFrame;

27 +export default ReactDebugCurrentFrame;

packages/react/src/ReactElement.js

+14 -17

@@ -7,12 +7,11 @@

8 'use strict';

10 -var ReactCurrentOwner = require('./ReactCurrentOwner');

11 -var hasOwnProperty = Object.prototype.hasOwnProperty;

10 +import warning from 'fbjs/lib/warning';

13 -if (__DEV__) {

14 - var warning = require('fbjs/lib/warning');

15 -}

12 +import ReactCurrentOwner from './ReactCurrentOwner';

13 +

14 +var hasOwnProperty = Object.prototype.hasOwnProperty;

16 // The Symbol used to tag the ReactElement type. If there is no native Symbol

17 // nor polyfill, then a plain number is used for performance.

@@ -175,7 +174,7 @@ var ReactElement = function(type, key, ref, self, source, owner, props) {

174 * Create and return a new ReactElement of the given type.

175 * See https://reactjs.org/docs/react-api.html#createelement

176 */

178 -ReactElement.createElement = function(type, config, children) {

177 +export function createElement(type, config, children) {

178 var propName;

179

180 // Reserved names are extracted

@@ -261,13 +260,13 @@ ReactElement.createElement = function(type, config, children) {

260 ReactCurrentOwner.current,

261 props,

262 );

264 -};

263 +}

264

265 /**

266 * Return a function that produces ReactElements of a given type.

267 * See https://reactjs.org/docs/react-api.html#createfactory

268 */

270 -ReactElement.createFactory = function(type) {

269 +export function createFactory(type) {

270 var factory = ReactElement.createElement.bind(null, type);

271 // Expose the type on the factory and the prototype so that it can be

272 // easily accessed on elements. E.g. `<Foo />.type === Foo`.

@@ -276,9 +275,9 @@ ReactElement.createFactory = function(type) {

275 // Legacy hook TODO: Warn if this is accessed

276 factory.type = type;

277 return factory;

279 -};

278 +}

279

281 -ReactElement.cloneAndReplaceKey = function(oldElement, newKey) {

280 +export function cloneAndReplaceKey(oldElement, newKey) {

281 var newElement = ReactElement(

282 oldElement.type,

283 newKey,

@@ -290,13 +289,13 @@ ReactElement.cloneAndReplaceKey = function(oldElement, newKey) {

289 );

290

291 return newElement;

293 -};

292 +}

293

294 /**

295 * Clone and return a new ReactElement using element as the starting point.

296 * See https://reactjs.org/docs/react-api.html#cloneelement

297 */

299 -ReactElement.cloneElement = function(element, config, children) {

298 +export function cloneElement(element, config, children) {

299 var propName;

300

301 // Original props are copied

@@ -359,7 +358,7 @@ ReactElement.cloneElement = function(element, config, children) {

358 }

359

360 return ReactElement(element.type, key, ref, self, source, owner, props);

362 -};

361 +}

362

363 /**

364 * Verifies the object is a ReactElement.

@@ -368,12 +367,10 @@ ReactElement.cloneElement = function(element, config, children) {

367 * @return {boolean} True if `object` is a valid component.

368 * @final

369 */

371 -ReactElement.isValidElement = function(object) {

370 +export function isValidElement(object) {

371 return (

372 typeof object === 'object' &&

373 object !== null &&

374 object.$$typeof === REACT_ELEMENT_TYPE

375 );

377 -};

378 -

379 -module.exports = ReactElement;

376 +}

packages/react/src/ReactElementValidator.js

+102 -107

@@ -14,21 +14,20 @@

15 'use strict';

17 -var ReactCurrentOwner = require('./ReactCurrentOwner');

18 -var ReactElement = require('./ReactElement');

17 +import lowPriorityWarning from 'shared/lowPriorityWarning';

18 +import describeComponentFrame from 'shared/describeComponentFrame';

19 +import getComponentName from 'shared/getComponentName';

20 +import checkPropTypes from 'prop-types/checkPropTypes';

21 +import warning from 'fbjs/lib/warning';

20 -if (__DEV__) {

21 - var lowPriorityWarning = require('shared/lowPriorityWarning');

22 - var describeComponentFrame = require('shared/describeComponentFrame');

23 - var getComponentName = require('shared/getComponentName');

24 - var checkPropTypes = require('prop-types/checkPropTypes');

25 - var warning = require('fbjs/lib/warning');

26 -

27 - var ReactDebugCurrentFrame = require('./ReactDebugCurrentFrame');

23 +import ReactCurrentOwner from './ReactCurrentOwner';

24 +import {isValidElement, createElement, cloneElement} from './ReactElement';

25 +import ReactDebugCurrentFrame from './ReactDebugCurrentFrame';

27 +if (__DEV__) {

28 var currentlyValidatingElement = null;

31 - var getDisplayName = function(element: ?ReactElement): string {

30 + var getDisplayName = function(element): string {

31 if (element == null) {

32 return '#empty';

33 } else if (typeof element === 'string' || typeof element === 'number') {

@@ -180,11 +179,11 @@ function validateChildKeys(node, parentType) {

179 if (Array.isArray(node)) {

180 for (var i = 0; i < node.length; i++) {

181 var child = node[i];

183 - if (ReactElement.isValidElement(child)) {

182 + if (isValidElement(child)) {

183 validateExplicitKey(child, parentType);

184 }

185 }

187 - } else if (ReactElement.isValidElement(node)) {

186 + } else if (isValidElement(node)) {

187 // This element was passed in a valid location.

188 if (node._store) {

189 node._store.validated = true;

@@ -199,7 +198,7 @@ function validateChildKeys(node, parentType) {

198 var iterator = iteratorFn.call(node);

199 var step;

200 while (!(step = iterator.next()).done) {

202 - if (ReactElement.isValidElement(step.value)) {

201 + if (isValidElement(step.value)) {

202 validateExplicitKey(step.value, parentType);

203 }

204 }

@@ -267,108 +266,104 @@ function validateFragmentProps(fragment) {

266 currentlyValidatingElement = null;

267 }

268

270 -var ReactElementValidator = {

271 - createElement: function(type, props, children) {

272 - var validType =

273 - typeof type === 'string' ||

274 - typeof type === 'function' ||

275 - typeof type === 'symbol' ||

276 - typeof type === 'number';

277 - // We warn in this case but don't throw. We expect the element creation to

278 - // succeed and there will likely be errors in render.

279 - if (!validType) {

280 - var info = '';

281 - if (

282 - type === undefined ||

283 - (typeof type === 'object' &&

284 - type !== null &&

285 - Object.keys(type).length === 0)

286 - ) {

287 - info +=

288 - ' You likely forgot to export your component from the file ' +

289 - "it's defined in.";

290 - }

269 +export function createElementWithValidation(type, props, children) {

270 + var validType =

271 + typeof type === 'string' ||

272 + typeof type === 'function' ||

273 + typeof type === 'symbol' ||

274 + typeof type === 'number';

275 + // We warn in this case but don't throw. We expect the element creation to

276 + // succeed and there will likely be errors in render.

277 + if (!validType) {

278 + var info = '';

279 + if (

280 + type === undefined ||

281 + (typeof type === 'object' &&

282 + type !== null &&

283 + Object.keys(type).length === 0)

284 + ) {

285 + info +=

286 + ' You likely forgot to export your component from the file ' +

287 + "it's defined in.";

288 + }

289

292 - var sourceInfo = getSourceInfoErrorAddendum(props);

293 - if (sourceInfo) {

294 - info += sourceInfo;

295 - } else {

296 - info += getDeclarationErrorAddendum();

297 - }

290 + var sourceInfo = getSourceInfoErrorAddendum(props);

291 + if (sourceInfo) {

292 + info += sourceInfo;

293 + } else {

294 + info += getDeclarationErrorAddendum();

295 + }

296

299 - info += ReactDebugCurrentFrame.getStackAddendum() || '';

297 + info += getStackAddendum() || '';

298

301 - warning(

302 - false,

303 - 'React.createElement: type is invalid -- expected a string (for ' +

304 - 'built-in components) or a class/function (for composite ' +

305 - 'components) but got: %s.%s',

306 - type == null ? type : typeof type,

307 - info,

308 - );

309 - }

299 + warning(

300 + false,

301 + 'React.createElement: type is invalid -- expected a string (for ' +

302 + 'built-in components) or a class/function (for composite ' +

303 + 'components) but got: %s.%s',

304 + type == null ? type : typeof type,

305 + info,

306 + );

307 + }

308

311 - var element = ReactElement.createElement.apply(this, arguments);

309 + var element = createElement.apply(this, arguments);

310

313 - // The result can be nullish if a mock or a custom function is used.

314 - // TODO: Drop this when these are no longer allowed as the type argument.

315 - if (element == null) {

316 - return element;

317 - }

311 + // The result can be nullish if a mock or a custom function is used.

312 + // TODO: Drop this when these are no longer allowed as the type argument.

313 + if (element == null) {

314 + return element;

315 + }

316

319 - // Skip key warning if the type isn't valid since our key validation logic

320 - // doesn't expect a non-string/function type and can throw confusing errors.

321 - // We don't want exception behavior to differ between dev and prod.

322 - // (Rendering will throw with a helpful message and as soon as the type is

323 - // fixed, the key warnings will appear.)

324 - if (validType) {

325 - for (var i = 2; i < arguments.length; i++) {

326 - validateChildKeys(arguments[i], type);

327 - }

317 + // Skip key warning if the type isn't valid since our key validation logic

318 + // doesn't expect a non-string/function type and can throw confusing errors.

319 + // We don't want exception behavior to differ between dev and prod.

320 + // (Rendering will throw with a helpful message and as soon as the type is

321 + // fixed, the key warnings will appear.)

322 + if (validType) {

323 + for (var i = 2; i < arguments.length; i++) {

324 + validateChildKeys(arguments[i], type);

325 }

326 + }

327

330 - if (typeof type === 'symbol' && type === REACT_FRAGMENT_TYPE) {

331 - validateFragmentProps(element);

332 - } else {

333 - validatePropTypes(element);

334 - }

328 + if (typeof type === 'symbol' && type === REACT_FRAGMENT_TYPE) {

329 + validateFragmentProps(element);

330 + } else {

331 + validatePropTypes(element);

332 + }

333

336 - return element;

337 - },

338 -

339 - createFactory: function(type) {

340 - var validatedFactory = ReactElementValidator.createElement.bind(null, type);

341 - // Legacy hook TODO: Warn if this is accessed

342 - validatedFactory.type = type;

343 -

344 - if (__DEV__) {

345 - Object.defineProperty(validatedFactory, 'type', {

346 - enumerable: false,

347 - get: function() {

348 - lowPriorityWarning(

349 - false,

350 - 'Factory.type is deprecated. Access the class directly ' +

351 - 'before passing it to createFactory.',

352 - );

353 - Object.defineProperty(this, 'type', {

354 - value: type,

355 - });

356 - return type;

357 - },

358 - });

359 - }

334 + return element;

335 +}

336

361 - return validatedFactory;

362 - },

337 +export function createFactoryWithValidation(type) {

338 + var validatedFactory = createElementWithValidation.bind(null, type);

339 + // Legacy hook TODO: Warn if this is accessed

340 + validatedFactory.type = type;

341

364 - cloneElement: function(element, props, children) {

365 - var newElement = ReactElement.cloneElement.apply(this, arguments);

366 - for (var i = 2; i < arguments.length; i++) {

367 - validateChildKeys(arguments[i], newElement.type);

368 - }

369 - validatePropTypes(newElement);

370 - return newElement;

371 - },

372 -};

342 + if (__DEV__) {

343 + Object.defineProperty(validatedFactory, 'type', {

344 + enumerable: false,

345 + get: function() {

346 + lowPriorityWarning(

347 + false,

348 + 'Factory.type is deprecated. Access the class directly ' +

349 + 'before passing it to createFactory.',

350 + );

351 + Object.defineProperty(this, 'type', {

352 + value: type,

353 + });

354 + return type;

355 + },

356 + });

357 + }

358

374 -module.exports = ReactElementValidator;

359 + return validatedFactory;

360 +}

361 +

362 +export function cloneElementWithValidation(element, props, children) {

363 + var newElement = cloneElement.apply(this, arguments);

364 + for (var i = 2; i < arguments.length; i++) {

365 + validateChildKeys(arguments[i], newElement.type);

366 + }

367 + validatePropTypes(newElement);

368 + return newElement;

369 +}

packages/react/src/ReactNoopUpdateQueue.js

+4 -5

@@ -7,10 +7,9 @@

8 'use strict';

10 -if (__DEV__) {

11 - var warning = require('fbjs/lib/warning');

12 - var didWarnStateUpdateForUnmountedComponent = {};

13 -}

10 +import warning from 'fbjs/lib/warning';

11 +

12 +var didWarnStateUpdateForUnmountedComponent = {};

14 function warnNoop(publicInstance, callerName) {

15 if (__DEV__) {

@@ -113,4 +112,4 @@ var ReactNoopUpdateQueue = {

112 },

113 };

114

116 -module.exports = ReactNoopUpdateQueue;

115 +export default ReactNoopUpdateQueue;

packages/react/src/onlyChild.js deleted

-35

@@ -1,35 +0,0 @@

1 -/**

3 - *

4 - * This source code is licensed under the MIT license found in the

5 - * LICENSE file in the root directory of this source tree.

6 - */

7 -'use strict';

8 -

9 -var invariant = require('fbjs/lib/invariant');

10 -

11 -var ReactElement = require('./ReactElement');

12 -

13 -/**

14 - * Returns the first child in a collection of children and verifies that there

15 - * is only one child in the collection.

16 - *

17 - * See https://reactjs.org/docs/react-api.html#react.children.only

18 - *

19 - * The current implementation of this function assumes that a single child gets

20 - * passed without a wrapper, but the purpose of this helper function is to

21 - * abstract away the particular structure of children.

22 - *

23 - * @param {?object} children Child collection structure.

24 - * @return {ReactElement} The first and only `ReactElement` contained in the

25 - * structure.

26 - */

27 -function onlyChild(children) {

28 - invariant(

29 - ReactElement.isValidElement(children),

30 - 'React.Children.only expected to receive a single React element child.',

31 - );

32 - return children;

33 -}

34 -

35 -module.exports = onlyChild;

packages/shared/ReactDOMFrameScheduling.js

+3 -5

@@ -19,11 +19,10 @@

20 import type {Deadline} from 'react-reconciler';

22 -var ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment');

22 +import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';

23 +import warning from 'fbjs/lib/warning';

25 if (__DEV__) {

25 - var warning = require('fbjs/lib/warning');

26 -

26 if (

27 ExecutionEnvironment.canUseDOM &&

28 typeof requestAnimationFrame !== 'function'

@@ -164,5 +163,4 @@ if (!ExecutionEnvironment.canUseDOM) {

163 rIC = requestIdleCallback;

164 }

165

167 -exports.now = now;

168 -exports.rIC = rIC;

166 +export {now, rIC};

packages/shared/ReactErrorUtils.js

+2 -2

@@ -9,7 +9,7 @@

10 'use strict';

12 -const invariant = require('fbjs/lib/invariant');

12 +import invariant from 'fbjs/lib/invariant';

14 const ReactErrorUtils = {

15 // Used by Fiber to simulate a try-catch.

@@ -272,4 +272,4 @@ let rethrowCaughtError = function() {

272 }

273 };

274

275 -module.exports = ReactErrorUtils;

275 +export default ReactErrorUtils;

packages/shared/ReactFeatureFlags.js

+1 -1

@@ -37,4 +37,4 @@ if (__DEV__) {

37 }

38 }

40 -module.exports = ReactFeatureFlags;

40 +export default ReactFeatureFlags;

packages/shared/ReactFiberComponentTreeHook.js

+7 -10

@@ -11,15 +11,14 @@

12 import type {Fiber} from 'react-reconciler/src/ReactFiber';

14 -var ReactTypeOfWork = require('./ReactTypeOfWork');

15 -var {

14 +import {

15 IndeterminateComponent,

16 FunctionalComponent,

17 ClassComponent,

18 HostComponent,

20 -} = ReactTypeOfWork;

21 -var describeComponentFrame = require('./describeComponentFrame');

22 -var getComponentName = require('./getComponentName');

19 +} from './ReactTypeOfWork';

20 +import describeComponentFrame from './describeComponentFrame';

21 +import getComponentName from './getComponentName';

23 function describeFiber(fiber: Fiber): string {

24 switch (fiber.tag) {

@@ -43,7 +42,9 @@ function describeFiber(fiber: Fiber): string {

42 // This function can only be called with a work-in-progress fiber and

43 // only during begin or complete phase. Do not call it under any other

44 // circumstances.

46 -function getStackAddendumByWorkInProgressFiber(workInProgress: Fiber): string {

45 +export function getStackAddendumByWorkInProgressFiber(

46 + workInProgress: Fiber,

47 +): string {

48 var info = '';

49 var node = workInProgress;

50 do {

@@ -53,7 +54,3 @@ function getStackAddendumByWorkInProgressFiber(workInProgress: Fiber): string {

54 } while (node);

55 return info;

56 }

56 -

57 -module.exports = {

58 - getStackAddendumByWorkInProgressFiber,

59 -};

packages/shared/ReactFiberTreeReflection.js

+18 -23

@@ -11,23 +11,20 @@

12 import type {Fiber} from 'react-reconciler/src/ReactFiber';

14 -var invariant = require('fbjs/lib/invariant');

14 +import invariant from 'fbjs/lib/invariant';

15 +import warning from 'fbjs/lib/warning';

16 -var ReactInstanceMap = require('./ReactInstanceMap');

17 -var {ReactCurrentOwner} = require('./ReactGlobalSharedState');

18 -var getComponentName = require('./getComponentName');

19 -var {

17 +import * as ReactInstanceMap from './ReactInstanceMap';

18 +import {ReactCurrentOwner} from './ReactGlobalSharedState';

19 +import getComponentName from './getComponentName';

20 +import {

21 ClassComponent,

22 HostComponent,

23 HostRoot,

24 HostPortal,

25 HostText,

25 -} = require('./ReactTypeOfWork');

26 -var {NoEffect, Placement} = require('./ReactTypeOfSideEffect');

27 -

28 -if (__DEV__) {

29 - var warning = require('fbjs/lib/warning');

30 -}

26 +} from './ReactTypeOfWork';

27 +import {NoEffect, Placement} from './ReactTypeOfSideEffect';

29 var MOUNTING = 1;

30 var MOUNTED = 2;

@@ -61,11 +58,12 @@ function isFiberMountedImpl(fiber: Fiber): number {

58 // that has been unmounted.

59 return UNMOUNTED;

60 }

64 -exports.isFiberMounted = function(fiber: Fiber): boolean {

61 +

62 +export function isFiberMounted(fiber: Fiber): boolean {

63 return isFiberMountedImpl(fiber) === MOUNTED;

66 -};

64 +}

68 -exports.isMounted = function(component: React$Component<any, any>): boolean {

66 +export function isMounted(component: React$Component<any, any>): boolean {

67 if (__DEV__) {

68 const owner = (ReactCurrentOwner.current: any);

69 if (owner !== null && owner.tag === ClassComponent) {

@@ -89,7 +87,7 @@ exports.isMounted = function(component: React$Component<any, any>): boolean {

87 return false;

88 }

89 return isFiberMountedImpl(fiber) === MOUNTED;

92 -};

90 +}

92 function assertIsMounted(fiber) {

93 invariant(

@@ -98,7 +96,7 @@ function assertIsMounted(fiber) {

96 );

97 }

101 -function findCurrentFiberUsingSlowPath(fiber: Fiber): Fiber | null {

99 +export function findCurrentFiberUsingSlowPath(fiber: Fiber): Fiber | null {

100 let alternate = fiber.alternate;

101 if (!alternate) {

102 // If there is no alternate, then we only need to check if it is mounted.

@@ -223,9 +221,8 @@ function findCurrentFiberUsingSlowPath(fiber: Fiber): Fiber | null {

221 // Otherwise B has to be current branch.

222 return alternate;

223 }

226 -exports.findCurrentFiberUsingSlowPath = findCurrentFiberUsingSlowPath;

224

228 -exports.findCurrentHostFiber = function(parent: Fiber): Fiber | null {

225 +export function findCurrentHostFiber(parent: Fiber): Fiber | null {

226 const currentParent = findCurrentFiberUsingSlowPath(parent);

227 if (!currentParent) {

228 return null;

@@ -256,11 +253,9 @@ exports.findCurrentHostFiber = function(parent: Fiber): Fiber | null {

253 // Flow needs the return null here, but ESLint complains about it.

254 // eslint-disable-next-line no-unreachable

255 return null;

259 -};

256 +}

257

261 -exports.findCurrentHostFiberWithNoPortals = function(

262 - parent: Fiber,

263 -): Fiber | null {

258 +export function findCurrentHostFiberWithNoPortals(parent: Fiber): Fiber | null {

259 const currentParent = findCurrentFiberUsingSlowPath(parent);

260 if (!currentParent) {

261 return null;

@@ -291,4 +286,4 @@ exports.findCurrentHostFiberWithNoPortals = function(

286 // Flow needs the return null here, but ESLint complains about it.

287 // eslint-disable-next-line no-unreachable

288 return null;

294 -};

289 +}

packages/shared/ReactGlobalSharedState.js

+6 -12

@@ -7,17 +7,11 @@

8 'use strict';

10 -var ReactInternals = require('react')

11 - .__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;

10 +import React from 'react';

13 -var ReactGlobalSharedState = {

14 - ReactCurrentOwner: ReactInternals.ReactCurrentOwner,

15 -};

12 +var ReactInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;

17 -if (__DEV__) {

18 - Object.assign(ReactGlobalSharedState, {

19 - ReactDebugCurrentFrame: ReactInternals.ReactDebugCurrentFrame,

20 - });

21 -}

22 -

23 -module.exports = ReactGlobalSharedState;

14 +export const ReactCurrentOwner = ReactInternals.ReactCurrentOwner;

15 +export const ReactDebugCurrentFrame = __DEV__

16 + ? ReactInternals.ReactDebugCurrentFrame

17 + : null;

packages/shared/ReactInstanceMap.js

+13 -17

@@ -17,27 +17,23 @@

17 * If this becomes an actual Map, that will break.

18 */

20 -var ReactInstanceMap = {

21 - /**

20 +/**

21 * This API should be called `delete` but we'd have to make sure to always

22 * transform these to strings for IE support. When this transform is fully

23 * supported we can rename it.

24 */

26 - remove: function(key) {

27 - key._reactInternalFiber = undefined;

28 - },

29 -

30 - get: function(key) {

31 - return key._reactInternalFiber;

32 - },

25 +export function remove(key) {

26 + key._reactInternalFiber = undefined;

27 +}

34 - has: function(key) {

35 - return key._reactInternalFiber !== undefined;

36 - },

29 +export function get(key) {

30 + return key._reactInternalFiber;

31 +}

38 - set: function(key, value) {

39 - key._reactInternalFiber = value;

40 - },

41 -};

33 +export function has(key) {

34 + return key._reactInternalFiber !== undefined;

35 +}

43 -module.exports = ReactInstanceMap;

37 +export function set(key, value) {

38 + key._reactInternalFiber = value;

39 +}

packages/shared/ReactTreeTraversal.js

+6 -14

@@ -7,7 +7,7 @@

8 'use strict';

10 -var {HostComponent} = require('./ReactTypeOfWork');

10 +import {HostComponent} from './ReactTypeOfWork';

12 function getParent(inst) {

13 do {

@@ -28,7 +28,7 @@ function getParent(inst) {

28 * Return the lowest common ancestor of A and B, or null if they are in

29 * different trees.

30 */

31 -function getLowestCommonAncestor(instA, instB) {

31 +export function getLowestCommonAncestor(instA, instB) {

32 var depthA = 0;

33 for (var tempA = instA; tempA; tempA = getParent(tempA)) {

34 depthA++;

@@ -65,7 +65,7 @@ function getLowestCommonAncestor(instA, instB) {

65 /**

66 * Return if A is an ancestor of B.

67 */

68 -function isAncestor(instA, instB) {

68 +export function isAncestor(instA, instB) {

69 while (instB) {

70 if (instA === instB || instA === instB.alternate) {

71 return true;

@@ -78,14 +78,14 @@ function isAncestor(instA, instB) {

78 /**

79 * Return the parent instance of the passed-in instance.

80 */

81 -function getParentInstance(inst) {

81 +export function getParentInstance(inst) {

82 return getParent(inst);

83 }

85 /**

86 * Simulates the traversal of a two-phase, capture/bubble event dispatch.

87 */

88 -function traverseTwoPhase(inst, fn, arg) {

88 +export function traverseTwoPhase(inst, fn, arg) {

89 var path = [];

90 while (inst) {

91 path.push(inst);

@@ -107,7 +107,7 @@ function traverseTwoPhase(inst, fn, arg) {

107 * Does not invoke the callback on the nearest common ancestor because nothing

108 * "entered" or "left" that element.

109 */

110 -function traverseEnterLeave(from, to, fn, argFrom, argTo) {

110 +export function traverseEnterLeave(from, to, fn, argFrom, argTo) {

111 const common = from && to ? getLowestCommonAncestor(from, to) : null;

112 const pathFrom = [];

113 while (true) {

@@ -146,11 +146,3 @@ function traverseEnterLeave(from, to, fn, argFrom, argTo) {

146 fn(pathTo[i], 'captured', argTo);

147 }

148 }

149 -

150 -module.exports = {

151 - isAncestor: isAncestor,

152 - getLowestCommonAncestor: getLowestCommonAncestor,

153 - getParentInstance: getParentInstance,

154 - traverseTwoPhase: traverseTwoPhase,

155 - traverseEnterLeave: traverseEnterLeave,

156 -};

packages/shared/ReactTypeOfSideEffect.js

+13 -14

@@ -11,17 +11,16 @@

12 export type TypeOfSideEffect = number;

14 -module.exports = {

15 - // Don't change these two values:

16 - NoEffect: 0, // 0b00000000

17 - PerformedWork: 1, // 0b00000001

18 - // You can change the rest (and add more).

19 - Placement: 2, // 0b00000010

20 - Update: 4, // 0b00000100

21 - PlacementAndUpdate: 6, // 0b00000110

22 - Deletion: 8, // 0b00001000

23 - ContentReset: 16, // 0b00010000

24 - Callback: 32, // 0b00100000

25 - Err: 64, // 0b01000000

26 - Ref: 128, // 0b10000000

27 -};

14 +// Don't change these two values:

15 +export const NoEffect = 0; // 0b00000000

16 +export const PerformedWork = 1; // 0b00000001

17 +

18 +// You can change the rest (and add more).

19 +export const Placement = 2; // 0b00000010

20 +export const Update = 4; // 0b00000100

21 +export const PlacementAndUpdate = 6; // 0b00000110

22 +export const Deletion = 8; // 0b00001000

23 +export const ContentReset = 16; // 0b00010000

24 +export const Callback = 32; // 0b00100000

25 +export const Err = 64; // 0b01000000

26 +export const Ref = 128; // 0b10000000

packages/shared/ReactTypeOfWork.js

+11 -13

@@ -11,16 +11,14 @@

12 export type TypeOfWork = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;

14 -module.exports = {

15 - IndeterminateComponent: 0, // Before we know whether it is functional or class

16 - FunctionalComponent: 1,

17 - ClassComponent: 2,

18 - HostRoot: 3, // Root of a host tree. Could be nested inside another node.

19 - HostPortal: 4, // A subtree. Could be an entry point to a different renderer.

20 - HostComponent: 5,

21 - HostText: 6,

22 - CallComponent: 7,

23 - CallHandlerPhase: 8,

24 - ReturnComponent: 9,

25 - Fragment: 10,

26 -};

14 +export const IndeterminateComponent = 0; // Before we know whether it is functional or class

15 +export const FunctionalComponent = 1;

16 +export const ClassComponent = 2;

17 +export const HostRoot = 3; // Root of a host tree. Could be nested inside another node.

18 +export const HostPortal = 4; // A subtree. Could be an entry point to a different renderer.

19 +export const HostComponent = 5;

20 +export const HostText = 6;

21 +export const CallComponent = 7;

22 +export const CallHandlerPhase = 8;

23 +export const ReturnComponent = 9;

24 +export const Fragment = 10;

packages/shared/ReactVersion.js

@@ -7,4 +7,5 @@

8 'use strict';

10 +// TODO: this is special because it gets imported during build.

11 module.exports = '16.0.0';

packages/shared/__tests__/ReactErrorUtils-test.js

+4 -4

@@ -14,7 +14,7 @@ var ReactErrorUtils;

14 describe('ReactErrorUtils', () => {

15 beforeEach(() => {

16 // TODO: can we express this test with only public API?

17 - ReactErrorUtils = require('shared/ReactErrorUtils');

17 + ReactErrorUtils = require('shared/ReactErrorUtils').default;

18 });

20 // Run tests in both DEV and production

@@ -36,7 +36,7 @@ describe('ReactErrorUtils', () => {

36 };

38 jest.resetModules();

39 - ReactErrorUtils = require('shared/ReactErrorUtils');

39 + ReactErrorUtils = require('shared/ReactErrorUtils').default;

40 });

42 afterEach(() => {

@@ -161,9 +161,9 @@ describe('ReactErrorUtils', () => {

161 });

162

163 it('handles nested errors in separate renderers', () => {

164 - const ReactErrorUtils1 = require('shared/ReactErrorUtils');

164 + const ReactErrorUtils1 = require('shared/ReactErrorUtils').default;

165 jest.resetModules();

166 - const ReactErrorUtils2 = require('shared/ReactErrorUtils');

166 + const ReactErrorUtils2 = require('shared/ReactErrorUtils').default;

167 expect(ReactErrorUtils1).not.toEqual(ReactErrorUtils2);

168

169 let ops = [];

packages/shared/__tests__/reactProdInvariant-test.js

+1 -1

@@ -13,7 +13,7 @@ var reactProdInvariant;

13 describe('reactProdInvariant', () => {

14 beforeEach(() => {

15 jest.resetModules();

16 - reactProdInvariant = require('shared/reactProdInvariant');

16 + reactProdInvariant = require('shared/reactProdInvariant').default;

17 });

19 it('should throw with the correct number of `%s`s in the URL', () => {

packages/shared/describeComponentFrame.js

+2 -2

@@ -9,7 +9,7 @@

10 'use strict';

12 -module.exports = function(

12 +export default function(

13 name: null | string,

14 source: any,

15 ownerName: null | string,

@@ -25,4 +25,4 @@ module.exports = function(

25 ')'

26 : ownerName ? ' (created by ' + ownerName + ')' : '')

27 );

28 -};

28 +}

packages/shared/getComponentName.js

+1 -1

@@ -22,4 +22,4 @@ function getComponentName(fiber: Fiber): string | null {

22 return null;

23 }

25 -module.exports = getComponentName;

25 +export default getComponentName;

packages/shared/isTextInputElement.js

+1 -1

@@ -44,4 +44,4 @@ function isTextInputElement(elem: ?HTMLElement): boolean {

44 return false;

45 }

47 -module.exports = isTextInputElement;

47 +export default isTextInputElement;

packages/shared/lowPriorityWarning.js

+1 -1

@@ -51,4 +51,4 @@ if (__DEV__) {

51 };

52 }

54 -module.exports = lowPriorityWarning;

54 +export default lowPriorityWarning;

packages/shared/reactProdInvariant.js

+1 -1

@@ -39,4 +39,4 @@ function reactProdInvariant(code: string): void {

39 throw error;

40 }

42 -module.exports = reactProdInvariant;

42 +export default reactProdInvariant;

packages/shared/validateCallback.js

+1 -1

@@ -20,4 +20,4 @@ function validateCallback(callback: ?Function) {

20 );

21 }

23 -module.exports = validateCallback;

23 +export default validateCallback;

scripts/babel/transform-object-assign-require.js

+3 -10

@@ -8,18 +8,11 @@

8 'use strict';

10 module.exports = function autoImporter(babel) {

11 - const t = babel.types;

12 -

11 function getAssignIdent(path, file, state) {

14 - if (!state.id) {

15 - state.id = path.scope.generateUidIdentifier('assign');

16 - path.scope.getProgramParent().push({

17 - id: state.id,

18 - init: t.callExpression(t.identifier('require'), [

19 - t.stringLiteral('object-assign'),

20 - ]),

21 - });

12 + if (state.id) {

13 + return state.id;

14 }

15 + state.id = file.addImport('object-assign', 'default', 'assign');

16 return state.id;

17 }

scripts/error-codes/__tests__/replace-invariant-error-codes-test.js

+21 -24

@@ -23,7 +23,7 @@ function compare(input, output) {

24 var oldEnv;

26 -describe('dev-expression', () => {

26 +describe('error codes transform', () => {

27 beforeEach(() => {

28 oldEnv = process.env.NODE_ENV;

29 process.env.NODE_ENV = '';

@@ -33,19 +33,12 @@ describe('dev-expression', () => {

33 process.env.NODE_ENV = oldEnv;

34 });

36 - it("should add `reactProdInvariant` when it finds `require('invariant')`", () => {

37 - compare(

38 - "var invariant = require('invariant');",

39 - `var _prodInvariant = require('shared/reactProdInvariant');

40 -

41 -var invariant = require('invariant');`

42 - );

43 - });

44 -

36 it('should replace simple invariant calls', () => {

37 compare(

47 - "invariant(condition, 'Do not override existing functions.');",

48 - "var _prodInvariant = require('shared/reactProdInvariant');\n\n" +

38 + "import invariant from 'shared/reactProdInvariant';\n" +

39 + "invariant(condition, 'Do not override existing functions.');",

40 + "import _prodInvariant from 'shared/reactProdInvariant';\n" +

41 + "import invariant from 'shared/reactProdInvariant';\n" +

42 '!condition ? ' +

43 '__DEV__ ? ' +

44 "invariant(false, 'Do not override existing functions.') : " +

@@ -61,12 +54,11 @@ var invariant = require('invariant');`

54 `_prodInvariant('16') : void 0;`;

56 compare(

64 - `var invariant = require('invariant');

57 + `import invariant from 'invariant';

58 invariant(condition, 'Do not override existing functions.');

59 invariant(condition, 'Do not override existing functions.');`,

67 - `var _prodInvariant = require('shared/reactProdInvariant');

68 -

69 -var invariant = require('invariant');

60 + `import _prodInvariant from 'shared/reactProdInvariant';

61 +import invariant from 'invariant';

62 ${expectedInvariantTransformResult}

63 ${expectedInvariantTransformResult}`

64 );

@@ -74,8 +66,10 @@ ${expectedInvariantTransformResult}`

67 it('should support invariant calls with args', () => {

68 compare(

77 - "invariant(condition, 'Expected %s target to be an array; got %s', 'foo', 'bar');",

78 - "var _prodInvariant = require('shared/reactProdInvariant');\n\n" +

69 + "import invariant from 'shared/reactProdInvariant';\n" +

70 + "invariant(condition, 'Expected %s target to be an array; got %s', 'foo', 'bar');",

71 + "import _prodInvariant from 'shared/reactProdInvariant';\n" +

72 + "import invariant from 'shared/reactProdInvariant';\n" +

73 '!condition ? ' +

74 '__DEV__ ? ' +

75 "invariant(false, 'Expected %s target to be an array; got %s', 'foo', 'bar') : " +

@@ -85,8 +79,10 @@ ${expectedInvariantTransformResult}`

80 it('should support invariant calls with a concatenated template string and args', () => {

81 compare(

88 - "invariant(condition, 'Expected a component class, ' + 'got %s.' + '%s', 'Foo', 'Bar');",

89 - "var _prodInvariant = require('shared/reactProdInvariant');\n\n" +

82 + "import invariant from 'shared/reactProdInvariant';\n" +

83 + "invariant(condition, 'Expected a component class, ' + 'got %s.' + '%s', 'Foo', 'Bar');",

84 + "import _prodInvariant from 'shared/reactProdInvariant';\n" +

85 + "import invariant from 'shared/reactProdInvariant';\n" +

86 '!condition ? ' +

87 '__DEV__ ? ' +

88 "invariant(false, 'Expected a component class, got %s.%s', 'Foo', 'Bar') : " +

@@ -96,10 +92,11 @@ ${expectedInvariantTransformResult}`

93 it('should correctly transform invariants that are not in the error codes map', () => {

94 compare(

99 - "invariant(condition, 'This is not a real error message.');",

100 - `var _prodInvariant = require('shared/reactProdInvariant');

101 -

102 -!condition ? invariant(false, 'This is not a real error message.') : void 0;`

95 + "import invariant from 'shared/reactProdInvariant';\n" +

96 + "invariant(condition, 'This is not a real error message.');",

97 + "import _prodInvariant from 'shared/reactProdInvariant';\n" +

98 + "import invariant from 'shared/reactProdInvariant';\n" +

99 + "!condition ? invariant(false, 'This is not a real error message.') : void 0;"

100 );

101 });

102 });

scripts/error-codes/replace-invariant-error-codes.js

+9 -21

@@ -16,17 +16,13 @@ module.exports = function(babel) {

16 var SEEN_SYMBOL = Symbol('replace-invariant-error-codes.seen');

18 // Generate a hygienic identifier

19 - function getProdInvariantIdentifier(path, localState) {

19 + function getProdInvariantIdentifier(path, file, localState) {

20 if (!localState.prodInvariantIdentifier) {

21 - localState.prodInvariantIdentifier = path.scope.generateUidIdentifier(

21 + localState.prodInvariantIdentifier = file.addImport(

22 + 'shared/reactProdInvariant',

23 + 'default',

24 'prodInvariant'

25 );

24 - path.scope.getProgramParent().push({

25 - id: localState.prodInvariantIdentifier,

26 - init: t.callExpression(t.identifier('require'), [

27 - t.stringLiteral('shared/reactProdInvariant'),

28 - ]),

29 - });

26 }

27 return localState.prodInvariantIdentifier;

28 }

@@ -40,23 +36,15 @@ module.exports = function(babel) {

37 visitor: {

38 CallExpression: {

43 - exit: function(path) {

39 + exit: function(path, file) {

40 var node = path.node;

41 // Ignore if it's already been processed

42 if (node[SEEN_SYMBOL]) {

43 return;

44 }

49 - // Insert `var PROD_INVARIANT = require('reactProdInvariant');`

50 - // before all `require('invariant')`s.

51 - // NOTE it doesn't support ES6 imports yet.

52 - if (

53 - path.get('callee').isIdentifier({name: 'require'}) &&

54 - path.get('arguments')[0] &&

55 - path.get('arguments')[0].isStringLiteral({value: 'invariant'})

56 - ) {

57 - node[SEEN_SYMBOL] = true;

58 - getProdInvariantIdentifier(path, this);

59 - } else if (path.get('callee').isIdentifier({name: 'invariant'})) {

45 + // Insert `import PROD_INVARIANT from 'reactProdInvariant';`

46 + // before all `invariant()` calls.

47 + if (path.get('callee').isIdentifier({name: 'invariant'})) {

48 // Turns this code:

49 //

50 // invariant(condition, argument, 'foo', 'bar');

@@ -105,7 +93,7 @@ module.exports = function(babel) {

93 );

94 var errorMap = invertObject(existingErrorMap);

108 - var localInvariantId = getProdInvariantIdentifier(path, this);

96 + var localInvariantId = getProdInvariantIdentifier(path, file, this);

97 var prodErrorId = errorMap[errorMsgLiteral];

98 var body = null;

scripts/flow/react-native-host-hooks.js

+1 -1

@@ -117,5 +117,5 @@ declare module 'CSComponent' {

117 }

118

119 declare module 'CSStatefulComponent' {

120 - declare function exports(spec: any): any;

120 + declare function CSStatefulComponent(spec: any): any;

121 }

scripts/jest/preprocessor.js

@@ -34,6 +34,9 @@ var pathToErrorCodes = require.resolve('../error-codes/codes.json');

34 // TODO: make sure this stays in sync with gulpfile

35 var babelOptions = {

36 plugins: [

37 + // For Node environment only. For builds, Rollup takes care of ESM.

38 + require.resolve('babel-plugin-transform-es2015-modules-commonjs'),

39 +

40 pathToBabelPluginDevWithCode,

41 // Keep stacks detailed in tests.

42 // Don't put this in .babelrc so that we don't embed filenames

scripts/jest/setup.js

+1 -1

@@ -3,7 +3,7 @@

3 // We want to globally mock this but jest doesn't let us do that by default

4 // for a file that already exists. So we have to explicitly mock it.

5 jest.mock('shared/ReactFeatureFlags', () => {

6 - const flags = require.requireActual('shared/ReactFeatureFlags');

6 + const flags = require.requireActual('shared/ReactFeatureFlags').default;

7 return Object.assign({}, flags, {

8 disableNewFiberFeatures: true,

9 });

scripts/rollup/build.js

+32 -18

@@ -221,6 +221,27 @@ function handleRollupWarnings(warning) {

221 console.error(warning.message);

222 process.exit(1);

223 }

224 + if (warning.code === 'UNUSED_EXTERNAL_IMPORT') {

225 + const match = warning.message.match(/external module '([^']+)'/);

226 + if (!match || typeof match[1] !== 'string') {

227 + throw new Error(

228 + 'Could not parse a Rollup warning. ' + 'Fix this method.'

229 + );

230 + }

231 + const importSideEffects = Modules.getImportSideEffects();

232 + const path = match[1];

233 + if (typeof importSideEffects[path] !== 'boolean') {

234 + throw new Error(

235 + 'An external module "' +

236 + path +

237 + '" is used in a DEV-only code path ' +

238 + 'but we do not know if it is safe to omit an unused require() to it in production. ' +

239 + 'Please add it to the `importSideEffects` list in `scripts/rollup/modules.js`.'

240 + );

241 + }

242 + // Don't warn. We will remove side effectless require() in a later pass.

243 + return;

244 + }

245 console.warn(warning.message || warning);

246 }

247

@@ -345,23 +366,6 @@ function getUglifyConfig(configs) {

366 };

367 }

368

348 -// We use this for various shims, such as www forks of the code,

349 -// renderer-specific feature flag overrides, and UMD optimizations.

350 -function shimModules(shims) {

351 - // For some reason, even if we use the alias plugin,

352 - // Rollup still attempts to bundle unused original code

353 - // if it exists. We have to explicitly stub it out.

354 - const nullStub = {

355 - transform(source, id) {

356 - if (shims[id]) {

357 - return 'module.exports = null;';

358 - }

359 - return source;

360 - },

361 - };

362 - return [nullStub, alias(shims)];

363 -}

364 -

369 // FB uses require('React') instead of require('react').

370 // We can't set up a forwarding module due to case sensitivity issues.

371 function rewriteFBReactImport() {

@@ -408,11 +412,15 @@ function getPlugins(

412 ) {

413 const shims = Modules.getShims(bundleType, entry, featureFlags);

414 const plugins = [

415 + // Extract error codes from invariant() messages into a file.

416 shouldExtractErrors && writeErrorCodes(),

412 - ...shimModules(shims),

417 + // Shim some modules for www custom behavior and optimizations.

418 + alias(shims),

419 + // Use Node resolution mechanism.

420 resolvePlugin({

421 skip: externals,

422 }),

423 + // Compile to ES5.

424 babel(getBabelConfig(updateBabelOptions, bundleType)),

425 stripUseStrict(),

426 ].filter(Boolean);

@@ -545,9 +553,15 @@ function createBundle(bundle, bundleType) {

553 externals = externals.concat(deps);

554 }

555

556 + const importSideEffects = Modules.getImportSideEffects();

557 + const pureExternalModules = Object.keys(importSideEffects).filter(

558 + module => !importSideEffects[module]

559 + );

560 +

561 console.log(`${chalk.bgYellow.black(' BUILDING ')} ${logKey}`);

562 return rollup({

563 input: resolvedEntry,

564 + pureExternalModules,

565 external(id) {

566 const containsThisModule = pkg => id === pkg || id.startsWith(pkg + '/');

567 const isProvidedByDependency = externals.some(containsThisModule);

scripts/rollup/modules.js

+22 -6

@@ -27,6 +27,20 @@ const forkedFBModules = Object.freeze([

27 'react/src/ReactCurrentOwner',

28 ]);

30 +// For any external that is used in a DEV-only condition, explicitly

31 +// specify whether it has side effects during import or not. This lets

32 +// us know whether we can safely omit them when they are unused.

33 +const HAS_NO_SIDE_EFFECTS_ON_IMPORT = false;

34 +// const HAS_SIDE_EFFECTS_ON_IMPORT = true;

35 +const importSideEffects = Object.freeze({

36 + 'fbjs/lib/invariant': HAS_NO_SIDE_EFFECTS_ON_IMPORT,

37 + 'fbjs/lib/warning': HAS_NO_SIDE_EFFECTS_ON_IMPORT,

38 + 'prop-types/checkPropTypes': HAS_NO_SIDE_EFFECTS_ON_IMPORT,

39 + 'fbjs/lib/camelizeStyleName': HAS_NO_SIDE_EFFECTS_ON_IMPORT,

40 + 'fbjs/lib/hyphenateStyleName': HAS_NO_SIDE_EFFECTS_ON_IMPORT,

41 + deepFreezeAndThrowOnMutationInDev: HAS_NO_SIDE_EFFECTS_ON_IMPORT,

42 +});

43 +

44 // Given ['react'] in bundle externals, returns { 'react': 'React' }.

45 function getPeerGlobals(externals, moduleType) {

46 const peerGlobals = {};

@@ -61,6 +75,10 @@ function getDependencies(bundleType, entry) {

75 return deps;

76 }

78 +function getImportSideEffects() {

79 + return importSideEffects;

80 +}

81 +

82 // Hijacks some modules for optimization and integration reasons.

83 function getShims(bundleType, entry, featureFlags) {

84 const shims = {};

@@ -84,24 +102,22 @@ function getShims(bundleType, entry, featureFlags) {

102 // so we resort to using a shim that re-exports the www module, and then

103 // treating shim's target destinations as external (see getDependencies).

104 forkedFBModules.forEach(srcPath => {

87 - const resolvedSrcPath = require.resolve(srcPath);

88 - const wwwName = path.parse(resolvedSrcPath).name;

105 + const wwwName = path.parse(srcPath).name;

106 const shimPath = path.resolve(

107 __dirname + `/shims/rollup/${wwwName}-www.js`

108 );

92 - shims[resolvedSrcPath] = shimPath;

109 + shims[srcPath] = shimPath;

110 });

111 break;

112 }

113 if (featureFlags) {

97 - shims[require.resolve('shared/ReactFeatureFlags')] = require.resolve(

98 - featureFlags

99 - );

114 + shims['shared/ReactFeatureFlags'] = require.resolve(featureFlags);

115 }

116 return shims;

117 }

118

119 module.exports = {

120 + getImportSideEffects,

121 getPeerGlobals,

122 getDependencies,

123 getShims,

scripts/rollup/results.json

+4 -4

@@ -41,12 +41,12 @@

41 "gzip": 33239

42 },

43 "ReactDOM-dev.js (FB_DEV)": {

44 - "size": 609049,

45 - "gzip": 136235

44 + "size": 580159,

45 + "gzip": 130593

46 },

47 "ReactDOM-prod.js (FB_PROD)": {

48 - "size": 422543,

49 - "gzip": 93634

48 + "size": 412862,

49 + "gzip": 91252

50 },

51 "react-dom-test-utils.development.js (NODE_DEV)": {

52 "size": 42927,

scripts/rollup/shims/rollup/ReactCurrentOwner-www.js

+1 -1

@@ -1 +1 @@

1 -module.exports = require('ReactCurrentOwner');

1 +export default require('ReactCurrentOwner');

scripts/rollup/shims/rollup/ReactFeatureFlags-www.js

+1 -1

@@ -1 +1 @@

1 -module.exports = require('ReactFeatureFlags');

1 +export default require('ReactFeatureFlags');

scripts/rollup/shims/rollup/assign-umd.js

+4 -3

@@ -1,4 +1,5 @@

1 -var ReactInternals = require('react')

2 - .__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;

1 +import React from 'react';

4 -module.exports = ReactInternals.assign;

3 +const ReactInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;

4 +

5 +export default ReactInternals.assign;

scripts/rollup/shims/rollup/lowPriorityWarning-www.js

+1 -1

@@ -1 +1 @@

1 -module.exports = require('lowPriorityWarning');

1 +export default require('lowPriorityWarning');