Skip to content

Commit f016269

Browse files
crpereztcrperezt
committed
Merge branch 'master' into byebyenpm
2 parents db460e5 + 69d0d8f commit f016269

File tree

18 files changed

+1171
-425
lines changed

18 files changed

+1171
-425
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
@@ -7,7 +7,10 @@ import 'regenerator-runtime/runtime';
77
import { exist } from 'acorn-jsx/xhtml';
88

99
// * State snapshot object initialized here
10-
const snapShot = { tree: null };
10+
const snapShot = {
11+
tree: null,
12+
unfilteredTree: null
13+
};
1114

1215

1316
const mode = {

‎dev-reactime/linkFiber.js

Lines changed: 150 additions & 2 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
*
@@ -113,6 +116,8 @@ module.exports = (snap, mode) => {
113116

114117
// Check if node is a stateful setState component
115118
if (stateNode && stateNode.state && (tag === 0 || tag === 1)) {
119+
console.log('in create tree if')
120+
console.log('this is currentFiber from createTree', currentFiber)
116121
// Save component's state and setState() function to our record for future
117122
// time-travel state changing. Add record index to snapshot so we can retrieve.
118123
componentData.index = componentActionsRecord.saveNew(stateNode.state, stateNode);
@@ -123,6 +128,8 @@ module.exports = (snap, mode) => {
123128
// Check if node is a hooks useState function
124129
let hooksIndex;
125130
if (memoizedState && (tag === 0 || tag === 1 || tag === 10)) {
131+
console.log('in create tree if')
132+
console.log('this is currentFiber from createTree', currentFiber)
126133
if (memoizedState.queue) {
127134
// Hooks states are stored as a linked list using memoizedState.next,
128135
// so we must traverse through the list and get the states.
@@ -141,6 +148,18 @@ module.exports = (snap, mode) => {
141148
componentFound = true;
142149
});
143150
}
151+
} else {
152+
console.log('in create tree else')
153+
console.log('this is currentFiber from createTree', currentFiber)
154+
console.log('this is memoizedState from createTree', memoizedState)
155+
// grab stateless components here
156+
if(elementType){
157+
if(elementType.name){
158+
tree.appendChild('stateless', elementType.name, index);
159+
} else {
160+
tree.appendChild('stateless', elementType, index);
161+
}
162+
}
144163
}
145164

146165
// This grabs stateless components
@@ -180,10 +199,58 @@ module.exports = (snap, mode) => {
180199
return tree;
181200
}
182201

202+
203+
// function createUnfilteredTree(curFiber, parentNode) {
204+
// // on call from updateSnapShot, no parentNode provided, so create a root node
205+
// if(! parentNode) parentNode = new Tree('root');
206+
207+
// // Base case: parentNode's child or sibling pointed to null
208+
// if (!curFiber) return parentNode;
209+
210+
// let newChildNode = null;
211+
212+
// // If stateful, add to parentNode's children array, then inject new setState into fiber node
213+
// if (curFiber.stateNode && curFiber.stateNode.state) {
214+
// newChildNode = parentNode.appendChild(curFiber.stateNode);
215+
// // changeSetState(curFiber.stateNode);
216+
// newChildNode.isStateful = true;
217+
// }
218+
// else {
219+
220+
// }
221+
222+
// // Recurse to sibling; siblings that have state should be added to our parentNode
223+
// createTree(curFiber.sibling, parentNode);
224+
225+
// // Recurse to child; If this fiber was stateful, then we added a newChildNode here, and we want
226+
// // to attach further children to that. If this fiber wasn't stateful, we want to attach any
227+
// // children to our existing parentNode.
228+
// createTree(curFiber.child, newChildNode || parentNode);
229+
230+
// return parentNode;
231+
// }
232+
233+
183234
// ! BUG: skips 1st hook click
184235
function updateSnapShotTree() {
185-
const { current } = fiberRoot;
186-
snap.tree = createTree(current);
236+
<<<<<<< HEAD
237+
/* let current;
238+
// If concurrent mode, grab current.child
239+
if (concurrent) {
240+
// we need a way to wait for current child to populate
241+
const promise = new Promise((resolve, reject) => {
242+
setTimeout(() => resolve(fiberRoot.current.child), 400);
243+
});
244+
current = await promise;
245+
current = fiberRoot.current.child;
246+
} else {
247+
current = fiberRoot.current;
248+
} */
249+
const { current } = fiberRoot; // Carlos: get rid of concurrent mode for now
250+
251+
// console.log('FIBER COMMITTED, new fiber is:', util.inspect(current, false, 4));
252+
// fs.appendFile('fiberlog.txt', util.inspect(current, false, 10));
253+
snap.tree = createTree(current); // Carlos: pass new hooks state here?
187254
}
188255

189256
return async container => {
@@ -199,12 +266,14 @@ module.exports = (snap, mode) => {
199266
fiberRoot = _internalRoot || _reactRootContainer;
200267
}
201268
const devTools = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
269+
console.log('this is devTools', devTools)
202270
const reactInstance = devTools ? devTools.renderers.get(1) : null;
203271

204272
if (reactInstance && reactInstance.version) {
205273
devTools.onCommitFiberRoot = (function (original) {
206274
return function (...args) {
207275
fiberRoot = args[1];
276+
console.log('this is fiberRoot', fiberRoot)
208277
updateSnapShotTree();
209278
sendSnapshot();
210279
return original(...args);
@@ -221,3 +290,82 @@ module.exports = (snap, mode) => {
221290
});
222291
};
223292
};
293+
294+
295+
296+
297+
// function createUnfilteredTree(currentFiber, tree = new Tree('root')) {
298+
// // Base case: child or sibling pointed to null
299+
// if (!currentFiber) return tree;
300+
301+
// const { sibling, stateNode, child, memoizedState, elementType,
302+
// tag, actualDuration, actualStartTime, selfBaseDuration, treeBaseDuration,
303+
// } = currentFiber;
304+
305+
// const extraProps = {
306+
// tag, actualDuration, actualStartTime, selfBaseDuration, treeBaseDuration,
307+
// };
308+
309+
// let nextTree = tree;
310+
// let nextTreeUnfiltered = unfilteredTreeNode = new UnfilteredTreeNode('root');
311+
312+
// // Check if stateful component
313+
// if (stateNode && stateNode.state) {
314+
// nextTree = tree.appendChild(stateNode); // Add component to tree
315+
// changeSetState(stateNode); // Change setState functionality
316+
// }
317+
// nextTreeUnfiltered = unfilteredTreeNode.appendChild(stateNode);
318+
319+
// // TODO: handle Hooks cases...
320+
321+
// // Recurse on siblings
322+
// createTree(sibling, tree);
323+
// // Recurse on children
324+
// createTree(child, nextTree);
325+
326+
// return tree;
327+
// }
328+
329+
330+
331+
// Check if the component uses hooks
332+
// if (memoizedState && Object.hasOwnProperty.call(memoizedState, 'baseState')) {
333+
// // 'catch-all' for suspense elements (experimental)
334+
// if (typeof elementType.$$typeof === 'symbol') return;
335+
// // Traverse through the currentFiber and extract the getters/setters
336+
// astHooks = astParser(elementType);
337+
// saveState(astHooks);
338+
// // Create a traversed property and assign to the evaluated result of
339+
// // invoking traverseHooks with memoizedState
340+
// memoizedState.traversed = traverseHooks(memoizedState);
341+
// nextTree = tree.appendChild(memoizedState);
342+
// }
343+
344+
345+
346+
347+
348+
349+
350+
351+
// function createTree(currentFiber, tree = new Tree('root')) {
352+
// // Base case: child or sibling pointed to null
353+
// if (!currentFiber) return tree;
354+
355+
// const { sibling, stateNode, child, memoizedState, elementType } = currentFiber;
356+
357+
// let nextTree = tree;
358+
359+
// // Check if stateful component
360+
// if (stateNode && stateNode.state) {
361+
// nextTree = tree.appendChild(stateNode); // Add component to tree
362+
// changeSetState(stateNode); // Change setState functionality
363+
// }
364+
365+
// // Recurse on siblings
366+
// createTree(sibling, tree);
367+
// // Recurse on children
368+
// createTree(child, nextTree);
369+
370+
// return tree;
371+
// }

‎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: 52 additions & 1 deletion
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
// removes unserializable state data such as functions
58
function scrubUnserializableMembers(tree) {
@@ -129,4 +132,52 @@ class Tree {
129132
}
130133
}
131134

132-
module.exports = Tree;
135+
// class UnfilteredTreeNode extends Tree {
136+
// constructor(component, useStateInstead = false, name, unfilteredProps) {
137+
// super(component, useStateInstead, name);
138+
// // this.isStateful = unfilteredProps.isStateful;
139+
// // this.tagLabel = reactWorkTags[unfilteredProps.tag];
140+
// if(unfilteredProps) {
141+
// this.tag = unfilteredProps.tag;
142+
// this.actualDuration = unfilteredProps.actualDuration;
143+
// this.actualStartTime = unfilteredProps.actualStartTime;
144+
// this.selfBaseDuration = unfilteredProps.selfBaseDuration;
145+
// this.treeBaseDuration = unfilteredProps.treeBaseDuration;
146+
// }
147+
// }
148+
149+
// appendChild(component) {
150+
// const newChild = new UnfilteredTreeNode(component);
151+
// this.children.push(newChild);
152+
// return newChild;
153+
// }
154+
// }
155+
156+
module.exports = Tree
157+
// module.exports = {
158+
// Tree,
159+
// UnfilteredTreeNode,
160+
// };
161+
162+
163+
164+
165+
// // print out the tree structure in the console
166+
// // DEV: Process may be different for useState components
167+
// // BUG FIX: Don't print the Router as a component
168+
// // Change how the children are printed
169+
// print() {
170+
// console.log("current tree structure for *this : ", this);
171+
// const children = ['children: '];
172+
// // DEV: What should we push instead for components using hooks (it wouldn't be state)
173+
// this.children.forEach(child => { // if this.children is always initialized to empty array, when would there ever be anything to iterate through here?
174+
// children.push(child.state || child.component.state);
175+
// });
176+
// if (this.name) console.log("this.name if exists: ", this.name);
177+
// if (children.length === 1) {
178+
// console.log(`children length 1. ${this.state ? `this.state: ` : `this.component.state: `}`, this.state || this.component.state);
179+
// } else console.log(`children length !== 1. ${this.state ? `this.state: ` : `this.component.state, children: `}`, this.state || this.component.state, ...children);
180+
// this.children.forEach(child => {
181+
// child.print();
182+
// });
183+
// }

0 commit comments

Comments
 (0)