Skip to content

Commit 5f124d9

Browse files
aquinojardimaquinojardim
committed
merge master
2 parents 624771a + 0581708 commit 5f124d9

File tree

13 files changed

+1106
-442
lines changed

13 files changed

+1106
-442
lines changed

‎.vscode/settings.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"eslint.enable": true
3+
}

‎dev-reactime/index.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@ import 'core-js';
66
import 'regenerator-runtime/runtime';
77

88
// * State snapshot object initialized here
9-
const snapShot = { tree: null };
9+
const snapShot = {
10+
tree: null,
11+
unfilteredTree: null
12+
};
1013

1114
const mode = {
1215
jumping: false,

‎dev-reactime/linkFiber.js

Lines changed: 155 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
/* eslint-disable indent */
2+
/* eslint-disable brace-style */
3+
/* eslint-disable comma-dangle */
14
/**
25
* This file contains core module functionality.
36
*
@@ -41,14 +44,25 @@
4144
/* eslint-disable no-use-before-define */
4245
/* eslint-disable no-param-reassign */
4346

44-
const Tree = require('./tree');
47+
const { Tree, UnfilteredTreeNode } = require('./tree');
4548
const astParser = require('./astParser');
4649
const { saveState } = require('./masterState');
50+
// import * as reactWorkTags from './reactWorkTags';
4751

4852
module.exports = (snap, mode) => {
4953
let fiberRoot = null;
5054
let astHooks;
5155
let concurrent = false; // flag to check if we are in concurrent mode
56+
const reactWorkTags = [
57+
'FunctionComponent',
58+
'ClassComponent',
59+
'IndeterminateComponent',
60+
'HostRoot', // Root of a host tree. Could be nested inside another node.
61+
'HostPortal', // A subtree. Could be an entry point to a different renderer.
62+
'HostComponent',
63+
'HostText',
64+
];
65+
5266

5367
function sendSnapshot() {
5468
// Don't send messages while jumping or while paused
@@ -123,50 +137,72 @@ module.exports = (snap, mode) => {
123137
return memoized;
124138
}
125139

126-
function createTree(currentFiber, tree = new Tree('root')) {
127-
// Base case: child or sibling pointed to null
128-
if (!currentFiber) return tree;
129-
130-
const {
131-
sibling,
132-
stateNode,
133-
child,
134-
memoizedState,
135-
elementType,
136-
} = currentFiber;
140+
141+
function createTree(curFiber, parentNode) {
142+
// on call from updateSnapShot, no parentNode provided, so create a root node
143+
if(! parentNode) parentNode = new Tree('root');
144+
145+
// Base case: parentNode's child or sibling pointed to null
146+
if (!curFiber) return parentNode;
147+
148+
let newChildNode = null;
137149

138-
let nextTree = tree;
150+
// If stateful, add to parentNode's children array, then inject new setState into fiber node
151+
if (curFiber.stateNode && curFiber.stateNode.state) {
152+
newChildNode = parentNode.appendChild(curFiber.stateNode);
153+
changeSetState(curFiber.stateNode);
139154

140-
// Check if stateful component
141-
if (stateNode && stateNode.state) {
142-
nextTree = tree.appendChild(stateNode); // Add component to tree
143-
changeSetState(stateNode); // Change setState functionality
155+
// newChildNode.isStateful = true;
156+
newChildNode.tagLabel = reactWorkTags[curFiber.tag];
157+
newChildNode.actualDuration = curFiber.actualDuration;
158+
// newChildNode.actualStartTime = curFiber.actualStartTime;
159+
// newChildNode.selfBaseDuration = curFiber.selfBaseDuration;
160+
// newChildNode.treeBaseDuration = curFiber.treeBaseDuration;
144161
}
145162

146-
// Check if the component uses hooks
147-
if (
148-
memoizedState
149-
&& Object.hasOwnProperty.call(memoizedState, 'baseState')
150-
) {
151-
// 'catch-all' for suspense elements (experimental)
152-
if (typeof elementType.$$typeof === 'symbol') return;
153-
// Traverse through the currentFiber and extract the getters/setters
154-
astHooks = astParser(elementType);
155-
saveState(astHooks);
156-
// Create a traversed property and assign to the evaluated result of
157-
// invoking traverseHooks with memoizedState
158-
memoizedState.traversed = traverseHooks(memoizedState);
159-
nextTree = tree.appendChild(memoizedState);
160-
}
163+
// Recurse to sibling; siblings that have state should be added to our parentNode
164+
createTree(curFiber.sibling, parentNode);
161165

162-
// Recurse on siblings
163-
createTree(sibling, tree);
164-
// Recurse on children
165-
createTree(child, nextTree);
166+
// Recurse to child; If this fiber was stateful, then we added a newChildNode here, and we want
167+
// to attach further children to that. If this fiber wasn't stateful, we want to attach any
168+
// children to our existing parentNode.
169+
createTree(curFiber.child, newChildNode || parentNode);
166170

167-
return tree;
171+
return parentNode;
168172
}
169173

174+
175+
// function createUnfilteredTree(curFiber, parentNode) {
176+
// // on call from updateSnapShot, no parentNode provided, so create a root node
177+
// if(! parentNode) parentNode = new Tree('root');
178+
179+
// // Base case: parentNode's child or sibling pointed to null
180+
// if (!curFiber) return parentNode;
181+
182+
// let newChildNode = null;
183+
184+
// // If stateful, add to parentNode's children array, then inject new setState into fiber node
185+
// if (curFiber.stateNode && curFiber.stateNode.state) {
186+
// newChildNode = parentNode.appendChild(curFiber.stateNode);
187+
// // changeSetState(curFiber.stateNode);
188+
// newChildNode.isStateful = true;
189+
// }
190+
// else {
191+
192+
// }
193+
194+
// // Recurse to sibling; siblings that have state should be added to our parentNode
195+
// createTree(curFiber.sibling, parentNode);
196+
197+
// // Recurse to child; If this fiber was stateful, then we added a newChildNode here, and we want
198+
// // to attach further children to that. If this fiber wasn't stateful, we want to attach any
199+
// // children to our existing parentNode.
200+
// createTree(curFiber.child, newChildNode || parentNode);
201+
202+
// return parentNode;
203+
// }
204+
205+
170206
// ! BUG: skips 1st hook click
171207
async function updateSnapShotTree() {
172208
let current;
@@ -185,6 +221,9 @@ module.exports = (snap, mode) => {
185221
}
186222

187223
snap.tree = createTree(current);
224+
console.log("updateSnapShotTree -> snap.tree", snap.tree)
225+
// snap.unfilteredTree = createUnfilteredTree(current);
226+
// console.log("updateSnapShotTree -> snap.unfilteredTree", snap.unfilteredTree)
188227
}
189228

190229
return async container => {
@@ -213,3 +252,82 @@ module.exports = (snap, mode) => {
213252
});
214253
};
215254
};
255+
256+
257+
258+
259+
// function createUnfilteredTree(currentFiber, tree = new Tree('root')) {
260+
// // Base case: child or sibling pointed to null
261+
// if (!currentFiber) return tree;
262+
263+
// const { sibling, stateNode, child, memoizedState, elementType,
264+
// tag, actualDuration, actualStartTime, selfBaseDuration, treeBaseDuration,
265+
// } = currentFiber;
266+
267+
// const extraProps = {
268+
// tag, actualDuration, actualStartTime, selfBaseDuration, treeBaseDuration,
269+
// };
270+
271+
// let nextTree = tree;
272+
// let nextTreeUnfiltered = unfilteredTreeNode = new UnfilteredTreeNode('root');
273+
274+
// // Check if stateful component
275+
// if (stateNode && stateNode.state) {
276+
// nextTree = tree.appendChild(stateNode); // Add component to tree
277+
// changeSetState(stateNode); // Change setState functionality
278+
// }
279+
// nextTreeUnfiltered = unfilteredTreeNode.appendChild(stateNode);
280+
281+
// // TODO: handle Hooks cases...
282+
283+
// // Recurse on siblings
284+
// createTree(sibling, tree);
285+
// // Recurse on children
286+
// createTree(child, nextTree);
287+
288+
// return tree;
289+
// }
290+
291+
292+
293+
// Check if the component uses hooks
294+
// if (memoizedState && Object.hasOwnProperty.call(memoizedState, 'baseState')) {
295+
// // 'catch-all' for suspense elements (experimental)
296+
// if (typeof elementType.$$typeof === 'symbol') return;
297+
// // Traverse through the currentFiber and extract the getters/setters
298+
// astHooks = astParser(elementType);
299+
// saveState(astHooks);
300+
// // Create a traversed property and assign to the evaluated result of
301+
// // invoking traverseHooks with memoizedState
302+
// memoizedState.traversed = traverseHooks(memoizedState);
303+
// nextTree = tree.appendChild(memoizedState);
304+
// }
305+
306+
307+
308+
309+
310+
311+
312+
313+
// function createTree(currentFiber, tree = new Tree('root')) {
314+
// // Base case: child or sibling pointed to null
315+
// if (!currentFiber) return tree;
316+
317+
// const { sibling, stateNode, child, memoizedState, elementType } = currentFiber;
318+
319+
// let nextTree = tree;
320+
321+
// // Check if stateful component
322+
// if (stateNode && stateNode.state) {
323+
// nextTree = tree.appendChild(stateNode); // Add component to tree
324+
// changeSetState(stateNode); // Change setState functionality
325+
// }
326+
327+
// // Recurse on siblings
328+
// createTree(sibling, tree);
329+
// // Recurse on children
330+
// createTree(child, nextTree);
331+
332+
// return tree;
333+
// }

‎dev-reactime/reactWorkTags.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// eslint-disable-next-line import/prefer-default-export
2+
export const reactWorkTags = [
3+
{ 0: 'FunctionComponent' },
4+
{ 1: 'ClassComponent' },
5+
{ 2: 'IndeterminateComponent' },
6+
{ 3: 'HostRoot' }, // Root of a host tree. Could be nested inside another node.
7+
{ 4: 'HostPortal' }, // A subtree. Could be an entry point to a different renderer.
8+
{ 5: 'HostComponent' },
9+
{ 6: 'HostText' },
10+
];

‎dev-reactime/tree.js

Lines changed: 56 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
1+
/* eslint-disable no-multiple-empty-lines */
2+
/* eslint-disable max-classes-per-file */
13
/* eslint-disable no-console */
24
/* eslint-disable no-param-reassign */
5+
// import * as reactWorkTags from './reactWorkTags';
36

47
// this is the current snapshot that is being sent to the snapshots array.
58
class Tree {
@@ -35,30 +38,64 @@ class Tree {
3538
|| child.component.traversed, true, child.component.constructor.name),
3639
);
3740

41+
// copy.isStateful = this.isStateful;
42+
copy.tagLabel = this.tagLabel;
43+
copy.actualDuration = this.actualDuration;
44+
// copy.actualStartTime = this.actualStartTime;
45+
// copy.selfBaseDuration = this.selfBaseDuration;
46+
// copy.treeBaseDuration = this.treeBaseDuration;
47+
3848
// copy children's children recursively
3949
this.children.forEach((child, i) => child.getCopy(copy.children[i]));
4050
return copy;
4151
}
52+
}
53+
54+
class UnfilteredTreeNode extends Tree {
55+
constructor(component, useStateInstead = false, name, unfilteredProps) {
56+
super(component, useStateInstead, name);
57+
// this.isStateful = unfilteredProps.isStateful;
58+
// this.tagLabel = reactWorkTags[unfilteredProps.tag];
59+
if(unfilteredProps) {
60+
this.tag = unfilteredProps.tag;
61+
this.actualDuration = unfilteredProps.actualDuration;
62+
this.actualStartTime = unfilteredProps.actualStartTime;
63+
this.selfBaseDuration = unfilteredProps.selfBaseDuration;
64+
this.treeBaseDuration = unfilteredProps.treeBaseDuration;
65+
}
66+
}
4267

43-
// print out the tree structure in the console
44-
// DEV: Process may be different for useState components
45-
// BUG FIX: Don't print the Router as a component
46-
// Change how the children are printed
47-
print() {
48-
console.log("current tree structure for *this : ", this);
49-
const children = ['children: '];
50-
// DEV: What should we push instead for components using hooks (it wouldn't be state)
51-
this.children.forEach(child => { // if this.children is always initialized to empty array, when would there ever be anything to iterate through here?
52-
children.push(child.state || child.component.state);
53-
});
54-
if (this.name) console.log("this.name if exists: ", this.name);
55-
if (children.length === 1) {
56-
console.log(`children length 1. ${this.state ? `this.state: ` : `this.component.state: `}`, this.state || this.component.state);
57-
} else console.log(`children length !== 1. ${this.state ? `this.state: ` : `this.component.state, children: `}`, this.state || this.component.state, ...children);
58-
this.children.forEach(child => {
59-
child.print();
60-
});
68+
appendChild(component) {
69+
const newChild = new UnfilteredTreeNode(component);
70+
this.children.push(newChild);
71+
return newChild;
6172
}
6273
}
6374

64-
module.exports = Tree;
75+
module.exports = {
76+
Tree,
77+
UnfilteredTreeNode,
78+
};
79+
80+
81+
82+
83+
// // print out the tree structure in the console
84+
// // DEV: Process may be different for useState components
85+
// // BUG FIX: Don't print the Router as a component
86+
// // Change how the children are printed
87+
// print() {
88+
// console.log("current tree structure for *this : ", this);
89+
// const children = ['children: '];
90+
// // DEV: What should we push instead for components using hooks (it wouldn't be state)
91+
// this.children.forEach(child => { // if this.children is always initialized to empty array, when would there ever be anything to iterate through here?
92+
// children.push(child.state || child.component.state);
93+
// });
94+
// if (this.name) console.log("this.name if exists: ", this.name);
95+
// if (children.length === 1) {
96+
// console.log(`children length 1. ${this.state ? `this.state: ` : `this.component.state: `}`, this.state || this.component.state);
97+
// } else console.log(`children length !== 1. ${this.state ? `this.state: ` : `this.component.state, children: `}`, this.state || this.component.state, ...children);
98+
// this.children.forEach(child => {
99+
// child.print();
100+
// });
101+
// }

0 commit comments

Comments
 (0)