Tidying up
Brian Vaughn committed
Jan 30, 2019 at 10:38 UTC
1f46df66cb753a8549bd852364f408054b1bd336
4 files changed
+43
-10
shells/browser/shared/webpack.backend.js
+1
-2
@@ -1,8 +1,7 @@
1
const { readFileSync } = require('fs');
2
const { resolve } = require('path');
3
4
-//const __DEV__ = process.env.NODE_ENV !== 'production';
5
-const __DEV__ = true; // TODO
4
+const __DEV__ = process.env.NODE_ENV !== 'production';
5
6
module.exports = {
7
mode: __DEV__ ? 'development' : 'production',
shells/browser/shared/webpack.config.js
+1
-2
@@ -2,8 +2,7 @@ const { readFileSync } = require('fs');
2
const { resolve } = require('path');
3
const webpack = require('webpack');
4
5
-//const __DEV__ = process.env.NODE_ENV !== 'production';
6
-const __DEV__ = true; // TODO
5
+const __DEV__ = process.env.NODE_ENV !== 'production';
6
7
module.exports = {
8
mode: __DEV__ ? 'development' : 'production',
src/backend/renderer.js
+32
@@ -14,6 +14,7 @@ import {
14
import { utfEncodeString } from '../utils';
15
import { getDisplayName } from './utils';
16
import {
17
+ __DEBUG__,
18
TREE_OPERATION_ADD,
19
TREE_OPERATION_REMOVE,
20
TREE_OPERATION_RESET_CHILDREN,
@@ -186,6 +187,31 @@ export function attach(
187
DEPRECATED_PLACEHOLDER_SYMBOL_STRING,
188
} = ReactSymbols;
189
190
+ const debug = (name: string, fiber: Fiber, parentFiber: ?Fiber): void => {
191
+ if (__DEBUG__) {
192
+ const fiberData = getDataForFiber(fiber);
193
+ const fiberDisplayName = (fiberData && fiberData.displayName) || 'null';
194
+ const parentFiberData =
195
+ parentFiber == null ? null : getDataForFiber(parentFiber);
196
+ const parentFiberDisplayName =
197
+ (parentFiberData && parentFiberData.displayName) || 'null';
198
+ console.log(
199
+ `[renderer] %c${name} %c${getFiberID(
200
+ getPrimaryFiber(fiber)
201
+ )}:${fiberDisplayName} %c${
202
+ parentFiber
203
+ ? getFiberID(getPrimaryFiber(parentFiber)) +
204
+ ':' +
205
+ parentFiberDisplayName
206
+ : ''
207
+ }`,
208
+ 'color: red; font-weight: bold;',
209
+ 'color: blue;',
210
+ 'color: purple;'
211
+ );
212
+ }
213
+ };
214
+
215
const primaryFibers: WeakSet<Fiber> = new WeakSet();
216
217
// Keep this function in sync with getDataForFiber()
@@ -571,6 +597,8 @@ export function attach(
597
}
598
599
function mountFiber(fiber: Fiber, parentFiber: Fiber | null) {
600
+ debug('mountFiber()', fiber, parentFiber);
601
+
602
const shouldEnqueueMount = !shouldFilterFiber(fiber);
603
604
if (shouldEnqueueMount) {
@@ -590,6 +618,8 @@ export function attach(
618
fiber: Fiber,
619
hasChildOrderChanged: boolean
620
) {
621
+ debug('enqueueUpdateIfNecessary()', fiber);
622
+
623
// The frontend only really cares about the displayName, key, and children.
624
// The first two don't really change, so we are only concerned with the order of children here.
625
// This is trickier than a simple comparison though, since certain types of fibers are filtered.
@@ -633,6 +663,8 @@ export function attach(
663
prevFiber: Fiber,
664
parentFiber: Fiber | null
665
) {
666
+ debug('enqueueUpdateIfNecessary()', nextFiber, parentFiber);
667
+
668
const shouldEnqueueUpdate = !shouldFilterFiber(nextFiber);
669
670
// Suspense components only have a non-null memoizedState if they're timed-out.
src/devtools/store.js
+9
-6
@@ -28,7 +28,8 @@ const debug = (methodName, ...args) => {
28
* ContextProviders can subscribe to the Store for specific things they want to provide.
29
*/
30
export default class Store extends EventEmitter {
31
- // TODO Should items in this map be read-only for easier props comparison?
31
+ // TODO Should items in this map be read-only/immutable for easier props comparison?
32
+ // We currently mutate "children" and "weight" props.
33
_idToElement: Map<number, Element> = new Map();
34
35
// Total number of visible elements (within all roots).
@@ -169,13 +170,15 @@ export default class Store extends EventEmitter {
170
: utfDecodeString((operations.slice(i, i + keyLength): any));
171
i += +keyLength;
172
172
- debug('Add', `fiber ${id}, type ${type}, as child of ${parentID}`);
173
+ debug(
174
+ 'Add',
175
+ `fiber ${id} (${displayName || 'null'}) as child of ${parentID}`
176
+ );
177
174
- // TODO Fix this; there should not be duplicate "ADD" operations for a given element.
178
if (this._idToElement.has(id)) {
176
- console.warn(
177
- `fiber ${id}, type ${type}, already added as child of ${parentID}`
178
- );
179
+ // The renderer's tree walking approach sometimes mounts the same Fiber twice with Suspense and Lazy.
180
+ // For now, we avoid adding it to the tree twice by checking if it's already been mounted.
181
+ // Maybe in the future we'll revisit this.
182
} else {
183
parentElement = ((this._idToElement.get(parentID): any): Element);
184
parentElement.children = parentElement.children.concat(id);