Skip to content

Commit 03a4e54

Browse files
committed
refactored tree js to tree ts
1 parent b4ac425 commit 03a4e54

File tree

2 files changed

+104
-1
lines changed

2 files changed

+104
-1
lines changed

dev-reactime/linkFiber.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ import 'core-js';
3838
// const componentActionsRecord = require('./masterState');
3939
import acorn from 'acorn'; // javascript parser
4040
import jsx from 'acorn-jsx';
41-
import Tree from './tree';
41+
import Tree from './tree.ts';
4242
import componentActionsRecord from './masterState';
4343

4444
import { throttle, getHooksNames } from './helpers';

dev-reactime/tree.ts

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import 'core-js';
2+
/* eslint-disable no-multiple-empty-lines */
3+
/* eslint-disable max-classes-per-file */
4+
/* eslint-disable no-console */
5+
/* eslint-disable no-param-reassign */
6+
// import * as reactWorkTags from './reactWorkTags';
7+
8+
const Flatted = require('flatted');
9+
10+
let copyInstances: number = 0;
11+
const circularComponentTable = new Set<Tree>();
12+
13+
14+
15+
16+
// removes unserializable state data such as functions
17+
function scrubUnserializableMembers(tree: Tree): Tree {
18+
Object.entries(tree.state).forEach(keyValuePair => {
19+
if (typeof keyValuePair[1] === 'function') tree.state[keyValuePair[0]] = 'function';
20+
});
21+
return tree;
22+
}
23+
24+
// this is the current snapshot that is being sent to the snapshots array.
25+
class Tree {
26+
state: string | {};
27+
name: string;
28+
componentData: {};
29+
children: (Tree | string)[] ;
30+
parent: Tree
31+
constructor(state : string | {}, name: string = 'nameless', componentData: {} = {}) {
32+
this.state = state === 'root' ? 'root' : JSON.parse(JSON.stringify(state));
33+
this.name = name;
34+
this.componentData = componentData ? JSON.parse(JSON.stringify(componentData)) : {};
35+
this.children = [];
36+
this.parent = null; // ref to parent so we can add siblings
37+
}
38+
39+
addChild(state: string | {} , name: string, componentData: {}): Tree {
40+
const newChild: Tree = new Tree(state, name, componentData);
41+
newChild.parent = this;
42+
this.children.push(newChild);
43+
return newChild;
44+
}
45+
46+
addSibling(state: string | {} , name: string, componentData: {}): Tree {
47+
const newSibling: Tree = new Tree(state, name, componentData);
48+
newSibling.parent = this.parent;
49+
this.parent.children.push(newSibling);
50+
return newSibling;
51+
}
52+
53+
cleanTreeCopy(): Tree {
54+
// Clear circular component table only on first call, not recursive ones
55+
if (copyInstances === 0) {
56+
copyInstances++;
57+
circularComponentTable.clear();
58+
}
59+
// creates copy of present node
60+
let copy: Tree = new Tree(this.state, this.name, this.componentData);
61+
delete copy.parent;
62+
circularComponentTable.add(this);
63+
copy = scrubUnserializableMembers(copy);
64+
65+
// copy.children = this.children;
66+
67+
// creates copy of each child of the present node
68+
69+
copy.children = this.children.map((child: Tree): Tree | string => {
70+
if (!circularComponentTable.has(child)) {
71+
return child.cleanTreeCopy();
72+
}
73+
return 'circular';
74+
});
75+
76+
77+
// returns copy
78+
copyInstances--;
79+
return copy;
80+
}
81+
82+
// print out the tree structure in the console
83+
// DEV: Process may be different for useState components
84+
// BUG FIX: Don't print the Router as a component
85+
// Change how the children are printed
86+
// print() {
87+
// const children = ['children: '];
88+
// // DEV: What should we push instead for components using hooks (it wouldn't be state)
89+
// // if this.children is always initialized to empty array, when would there ever be anything to iterate through here?
90+
// this.children.forEach((child: any) => {
91+
// children.push(child.state || child.component.state);
92+
// });
93+
// if (this.name) console.log('this.name if exists: ', this.name);
94+
// if (children.length === 1) {
95+
// console.log(`children length 1. ${this.state ? 'this.state: ' : 'this.component.state: '}`, this.state || this.component.state);
96+
// } else console.log(`children length !== 1. ${this.state ? 'this.state: ' : 'this.component.state, children: '}`, this.state || this.component.state, ...children);
97+
// this.children.forEach((child: any) => {
98+
// child.print();
99+
// });
100+
// }
101+
}
102+
103+
export default Tree;

0 commit comments

Comments
 (0)