Resolve flow errors with ReactTestRenderer (#7736)
* Resolve flow errors with ReactTestRenderer * Add whitespace between types and methods * extend ReactMultiChild instead of using Object.assign * Use ReactElement type from ReactElementType * Make ReactMultiChild a class
Brandon Dail committed
Sep 15, 2016 at 11:44 UTC
c78464f8ea9a5b00ec80252d20a71a1482210e57
10 files changed
+53
-39
src/renderers/art/ReactART.js
+1
-1
@@ -93,7 +93,7 @@ function injectAfter(parentNode, referenceNode, node) {
93
94
// ContainerMixin for components that can hold ART nodes
95
96
-const ContainerMixin = assign({}, ReactMultiChild, {
96
+const ContainerMixin = assign({}, ReactMultiChild.prototype, {
97
98
/**
99
* Moves a child component to the supplied index.
src/renderers/dom/shared/ReactDOMComponent.js
+1
-1
@@ -1200,7 +1200,7 @@ ReactDOMComponent.Mixin = {
1200
Object.assign(
1201
ReactDOMComponent.prototype,
1202
ReactDOMComponent.Mixin,
1203
- ReactMultiChild
1203
+ ReactMultiChild.prototype
1204
);
1205
1206
module.exports = ReactDOMComponent;
src/renderers/native/ReactNativeBaseComponent.js
+1
-1
@@ -224,7 +224,7 @@ ReactNativeBaseComponent.Mixin = {
224
*/
225
Object.assign(
226
ReactNativeBaseComponent.prototype,
227
- ReactMultiChild,
227
+ ReactMultiChild.prototype,
228
ReactNativeBaseComponent.Mixin,
229
NativeMethodsMixin
230
);
src/renderers/shared/stack/reconciler/ReactMultiChild.js
+27
-27
@@ -169,8 +169,8 @@ if (__DEV__) {
169
* children. This is used by `ReactDOMComponent` to mount, update, and
170
* unmount child components.
171
*/
172
-var ReactMultiChild = {
173
- _reconcilerInstantiateChildren: function(nestedChildren, transaction, context) {
172
+class ReactMultiChild {
173
+ _reconcilerInstantiateChildren(nestedChildren, transaction, context) {
174
if (__DEV__) {
175
var selfDebugID = getDebugID(this);
176
if (this._currentElement) {
@@ -187,9 +187,9 @@ var ReactMultiChild = {
187
return ReactChildReconciler.instantiateChildren(
188
nestedChildren, transaction, context
189
);
190
- },
190
+ }
191
192
- _reconcilerUpdateChildren: function(
192
+ _reconcilerUpdateChildren(
193
prevChildren,
194
nextNestedChildrenElements,
195
mountImages,
@@ -235,7 +235,7 @@ var ReactMultiChild = {
235
selfDebugID
236
);
237
return nextChildren;
238
- },
238
+ }
239
240
/**
241
* Generates a "mount image" for each of the supplied children. In the case
@@ -245,7 +245,7 @@ var ReactMultiChild = {
245
* @return {array} An array of mounted representations.
246
* @internal
247
*/
248
- mountChildren: function(nestedChildren, transaction, context) {
248
+ mountChildren(nestedChildren, transaction, context) {
249
var children = this._reconcilerInstantiateChildren(
250
nestedChildren, transaction, context
251
);
@@ -278,7 +278,7 @@ var ReactMultiChild = {
278
}
279
280
return mountImages;
281
- },
281
+ }
282
283
/**
284
* Replaces any rendered children with a text content string.
@@ -286,7 +286,7 @@ var ReactMultiChild = {
286
* @param {string} nextContent String of content.
287
* @internal
288
*/
289
- updateTextContent: function(nextContent) {
289
+ updateTextContent(nextContent) {
290
var prevChildren = this._renderedChildren;
291
// Remove any rendered children.
292
ReactChildReconciler.unmountChildren(prevChildren, false);
@@ -298,7 +298,7 @@ var ReactMultiChild = {
298
// Set new text content.
299
var updates = [makeTextContent(nextContent)];
300
processQueue(this, updates);
301
- },
301
+ }
302
303
/**
304
* Replaces any rendered children with a markup string.
@@ -306,7 +306,7 @@ var ReactMultiChild = {
306
* @param {string} nextMarkup String of markup.
307
* @internal
308
*/
309
- updateMarkup: function(nextMarkup) {
309
+ updateMarkup(nextMarkup) {
310
var prevChildren = this._renderedChildren;
311
// Remove any rendered children.
312
ReactChildReconciler.unmountChildren(prevChildren, false);
@@ -317,7 +317,7 @@ var ReactMultiChild = {
317
}
318
var updates = [makeSetMarkup(nextMarkup)];
319
processQueue(this, updates);
320
- },
320
+ }
321
322
/**
323
* Updates the rendered children with new children.
@@ -326,10 +326,10 @@ var ReactMultiChild = {
326
* @param {ReactReconcileTransaction} transaction
327
* @internal
328
*/
329
- updateChildren: function(nextNestedChildrenElements, transaction, context) {
329
+ updateChildren(nextNestedChildrenElements, transaction, context) {
330
// Hook used by React ART
331
this._updateChildren(nextNestedChildrenElements, transaction, context);
332
- },
332
+ }
333
334
/**
335
* @param {?object} nextNestedChildrenElements Nested child element maps.
@@ -337,7 +337,7 @@ var ReactMultiChild = {
337
* @final
338
* @protected
339
*/
340
- _updateChildren: function(nextNestedChildrenElements, transaction, context) {
340
+ _updateChildren(nextNestedChildrenElements, transaction, context) {
341
var prevChildren = this._renderedChildren;
342
var removedNodes = {};
343
var mountImages = [];
@@ -414,7 +414,7 @@ var ReactMultiChild = {
414
if (__DEV__) {
415
setChildrenForInstrumentation.call(this, nextChildren);
416
}
417
- },
417
+ }
418
419
/**
420
* Unmounts all rendered children. This should be used to clean up children
@@ -423,11 +423,11 @@ var ReactMultiChild = {
423
*
424
* @internal
425
*/
426
- unmountChildren: function(safely) {
426
+ unmountChildren(safely) {
427
var renderedChildren = this._renderedChildren;
428
ReactChildReconciler.unmountChildren(renderedChildren, safely);
429
this._renderedChildren = null;
430
- },
430
+ }
431
432
/**
433
* Moves a child component to the supplied index.
@@ -437,14 +437,14 @@ var ReactMultiChild = {
437
* @param {number} lastIndex Last index visited of the siblings of `child`.
438
* @protected
439
*/
440
- moveChild: function(child, afterNode, toIndex, lastIndex) {
440
+ moveChild(child, afterNode, toIndex, lastIndex) {
441
// If the index of `child` is less than `lastIndex`, then it needs to
442
// be moved. Otherwise, we do not need to move it because a child will be
443
// inserted or moved before `child`.
444
if (child._mountIndex < lastIndex) {
445
return makeMove(child, afterNode, toIndex);
446
}
447
- },
447
+ }
448
449
/**
450
* Creates a child component.
@@ -453,9 +453,9 @@ var ReactMultiChild = {
453
* @param {string} mountImage Markup to insert.
454
* @protected
455
*/
456
- createChild: function(child, afterNode, mountImage) {
456
+ createChild(child, afterNode, mountImage) {
457
return makeInsertMarkup(mountImage, afterNode, child._mountIndex);
458
- },
458
+ }
459
460
/**
461
* Removes a child component.
@@ -463,9 +463,9 @@ var ReactMultiChild = {
463
* @param {ReactComponent} child Child to remove.
464
* @protected
465
*/
466
- removeChild: function(child, node) {
466
+ removeChild(child, node) {
467
return makeRemove(child, node);
468
- },
468
+ }
469
470
/**
471
* Mounts a child with the supplied name.
@@ -478,7 +478,7 @@ var ReactMultiChild = {
478
* @param {ReactReconcileTransaction} transaction
479
* @private
480
*/
481
- _mountChildAtIndex: function(
481
+ _mountChildAtIndex(
482
child,
483
mountImage,
484
afterNode,
@@ -487,7 +487,7 @@ var ReactMultiChild = {
487
context) {
488
child._mountIndex = index;
489
return this.createChild(child, afterNode, mountImage);
490
- },
490
+ }
491
492
/**
493
* Unmounts a rendered child.
@@ -497,11 +497,11 @@ var ReactMultiChild = {
497
* @param {ReactComponent} child Component to unmount.
498
* @private
499
*/
500
- _unmountChild: function(child, node) {
500
+ _unmountChild(child, node) {
501
var update = this.removeChild(child, node);
502
child._mountIndex = null;
503
return update;
504
- },
504
+ }
505
};
506
507
module.exports = ReactMultiChild;
src/renderers/shared/stack/reconciler/ReactOwner.js
+2
-1
@@ -15,6 +15,7 @@
15
var invariant = require('invariant');
16
17
import type { ReactInstance } from 'ReactInstanceType';
18
+import type { Transaction } from 'Transaction';
19
20
/**
21
* @param {?object} object
@@ -73,7 +74,7 @@ var ReactOwner = {
74
component: ReactInstance,
75
ref: string,
76
owner: ReactInstance,
76
- transaction,
77
+ transaction: Transaction,
78
): void {
79
invariant(
80
isValidOwner(owner),
src/renderers/testing/ReactTestEmptyComponent.js
+2
@@ -13,6 +13,8 @@
13
'use strict';
14
15
class ReactTestEmptyComponent {
16
+ _currentElement: null;
17
+
18
constructor() {
19
this._currentElement = null;
20
}
src/renderers/testing/ReactTestMount.js
+4
-2
@@ -20,8 +20,10 @@ var getHostComponentFromComposite = require('getHostComponentFromComposite');
20
var instantiateReactComponent = require('instantiateReactComponent');
21
var invariant = require('invariant');
22
23
-type TestRendererOptions = {
24
- createNodeMock: (element: ReactElement) => Object,
23
+import type { ReactElement } from 'ReactElementType';
24
+
25
+export type TestRendererOptions = {
26
+ createNodeMock: (element: ReactElement) => any,
27
};
28
29
var defaultTestOptions = {
src/renderers/testing/ReactTestReconcileTransaction.js
+3
-1
@@ -16,6 +16,8 @@ var PooledClass = require('PooledClass');
16
var Transaction = require('Transaction');
17
var ReactUpdateQueue = require('ReactUpdateQueue');
18
19
+import type { TestRendererOptions } from 'ReactTestMount';
20
+
21
/**
22
* Provides a `CallbackQueue` queue for collecting `onDOMReady` callbacks during
23
* the performing of the transaction.
@@ -57,7 +59,7 @@ var TRANSACTION_WRAPPERS = [ON_DOM_READY_QUEUEING];
59
*
60
* @class ReactTestReconcileTransaction
61
*/
60
-function ReactTestReconcileTransaction(testOptions) {
62
+function ReactTestReconcileTransaction(testOptions: TestRendererOptions) {
63
this.reinitializeTransaction();
64
this.testOptions = testOptions;
65
this.reactMountReady = CallbackQueue.getPooled(this);
src/renderers/testing/ReactTestRenderer.js
+10
-5
@@ -24,11 +24,13 @@ var ReactTestTextComponent = require('ReactTestTextComponent');
24
var ReactTestEmptyComponent = require('ReactTestEmptyComponent');
25
26
import type { ReactElement } from 'ReactElementType';
27
+import type { ReactInstance } from 'ReactInstanceType';
28
29
type ReactTestRendererJSON = {
30
type: string,
31
props: { [propName: string]: string },
31
- children: Array<string | ReactTestRendererJSON>,
32
+ children: null | Array<string | ReactTestRendererJSON>,
33
+ $$typeof?: any
34
}
35
36
/**
@@ -46,8 +48,13 @@ function getRenderedHostOrTextFromComponent(component) {
48
return component;
49
}
50
49
-class ReactTestComponent {
51
+class ReactTestComponent extends ReactMultiChild {
52
+ _currentElement: ReactElement;
53
+ _renderedChildren: null | Object;
54
+ _topLevelWrapper: null | ReactInstance;
55
+
56
constructor(element: ReactElement) {
57
+ super();
58
this._currentElement = element;
59
this._renderedChildren = null;
60
this._topLevelWrapper = null;
@@ -89,7 +96,7 @@ class ReactTestComponent {
96
childrenJSON.push(json);
97
}
98
}
92
- var object = {
99
+ var object: ReactTestRendererJSON = {
100
type: this._currentElement.type,
101
props: props,
102
children: childrenJSON.length ? childrenJSON : null,
@@ -104,8 +111,6 @@ class ReactTestComponent {
111
unmountComponent(): void {}
112
}
113
107
-Object.assign(ReactTestComponent.prototype, ReactMultiChild);
108
-
114
// =============================================================================
115
116
ReactUpdates.injection.injectReconcileTransaction(
src/renderers/testing/ReactTestTextComponent.js
+2
@@ -15,6 +15,8 @@
15
import type { ReactText } from 'ReactTypes';
16
17
class ReactTestTextComponent {
18
+ _currentElement: ReactText;
19
+
20
constructor(element: ReactText) {
21
this._currentElement = element;
22
}