Skip to content

Commit 29b29b7

Browse files
haejinjohaejinjo
committed
Merge branch 'hienqn-rewriteJStoTS' into staging
2 parents 5018666 + 3eb543b commit 29b29b7

File tree

9 files changed

+143
-229
lines changed

9 files changed

+143
-229
lines changed

‎src/backend/astParser.js

Lines changed: 0 additions & 65 deletions
This file was deleted.

‎src/backend/helpers.js renamed to ‎src/backend/helpers.ts

Lines changed: 112 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,112 @@
1-
/* eslint-disable linebreak-style */
2-
/* eslint-disable no-shadow */
3-
/* eslint-disable max-len */
4-
/* eslint-disable no-console */
5-
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
6-
/* eslint-disable @typescript-eslint/no-var-requires */
7-
/* eslint-disable linebreak-style */
8-
/* eslint-disable no-inner-declarations, no-loop-func */
9-
// eslint-disable-next-line import/newline-after-import
10-
const acorn = require('acorn');
11-
const jsx = require('acorn-jsx');
12-
// import { acorn } from 'acorn'; // javascript parser
13-
// import { jsx } from 'acorn-jsx';
14-
15-
const JSXParser = acorn.Parser.extend(jsx());
16-
17-
// Returns a throttled version of an input function
18-
// The returned throttled function only executes at most once every t milliseconds
19-
export const throttle = (f, t) => {
20-
let isOnCooldown = false;
21-
let isCallQueued = false;
22-
const throttledFunc = () => {
23-
if (isOnCooldown && isCallQueued) return;
24-
if (isOnCooldown) {
25-
isCallQueued = true;
26-
return;
27-
}
28-
f();
29-
isOnCooldown = true;
30-
isCallQueued = false;
31-
32-
const runAfterTimeout = () => {
33-
if (isCallQueued) {
34-
isCallQueued = false;
35-
isOnCooldown = true; // not needed I think
36-
f();
37-
setTimeout(runAfterTimeout, t);
38-
return;
39-
}
40-
isOnCooldown = false;
41-
};
42-
setTimeout(runAfterTimeout, t);
43-
};
44-
return throttledFunc;
45-
};
46-
47-
// Helper function to grab the getters/setters from `elementType`
48-
export const getHooksNames = (elementType) => {
49-
// Initialize empty object to store the setters and getter
50-
let ast;
51-
try {
52-
ast = JSXParser.parse(elementType);
53-
} catch (e) {
54-
return ['unknown'];
55-
}
56-
const hookState = {};
57-
const hooksNames = {};
58-
59-
while (Object.hasOwnProperty.call(ast, 'body')) {
60-
let tsCount = 0; // Counter for the number of TypeScript hooks seen (to distinguish in masterState)
61-
ast = ast.body;
62-
const statements = [];
63-
64-
/** All module exports always start off as a single 'FunctionDeclaration' type
65-
* Other types: "BlockStatement" / "ExpressionStatement" / "ReturnStatement"
66-
* Iterate through AST of every function declaration
67-
* Check within each function declaration if there are hook declarations */
68-
ast.forEach((functionDec) => {
69-
let body;
70-
if (functionDec.expression && functionDec.expression.body)
71-
body = functionDec.expression.body.body;
72-
else body = functionDec.body ? functionDec.body.body : [];
73-
// Traverse through the function's funcDecs and Expression Statements
74-
body.forEach((elem) => {
75-
if (elem.type === 'VariableDeclaration') {
76-
elem.declarations.forEach((hook) => {
77-
// * TypeScript hooks appear to have no "VariableDeclarator"
78-
// * with id.name of _useState, _useState2, etc...
79-
// * hook.id.type relevant for TypeScript applications
80-
// *
81-
// * Works for useState hooks
82-
if (hook.id.type === 'ArrayPattern') {
83-
hook.id.elements.forEach((hook) => {
84-
statements.push(hook.name);
85-
// * Unshift a wildcard name to achieve similar functionality as before
86-
statements.unshift(`_useWildcard${tsCount}`);
87-
tsCount += 1;
88-
});
89-
} else {
90-
if (hook.init.object && hook.init.object.name) {
91-
const varName = hook.init.object.name;
92-
if (!hooksNames[varName] && varName.match(/_use/)) {
93-
hooksNames[varName] = hook.id.name;
94-
}
95-
}
96-
if (hook.id.name !== undefined) {
97-
statements.push(hook.id.name);
98-
}
99-
}
100-
});
101-
}
102-
});
103-
104-
statements.forEach((el, i) => {
105-
if (el.match(/_use/)) hookState[el] = statements[i + 2];
106-
});
107-
});
108-
}
109-
return Object.values(hooksNames);
110-
};
1+
/* eslint-disable linebreak-style */
2+
/* eslint-disable no-shadow */
3+
/* eslint-disable max-len */
4+
/* eslint-disable no-console */
5+
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
6+
/* eslint-disable @typescript-eslint/no-var-requires */
7+
/* eslint-disable linebreak-style */
8+
/* eslint-disable no-inner-declarations, no-loop-func */
9+
// eslint-disable-next-line import/newline-after-import
10+
const acorn = require('acorn');
11+
const jsx = require('acorn-jsx');
12+
// import { acorn } from 'acorn'; // javascript parser
13+
// import { jsx } from 'acorn-jsx';
14+
15+
const JSXParser = acorn.Parser.extend(jsx());
16+
17+
// Returns a throttled version of an input function
18+
// The returned throttled function only executes at most once every t milliseconds
19+
export const throttle = (f : Function, t: number) : Function => {
20+
let isOnCooldown : boolean = false;
21+
let isCallQueued : boolean = false;
22+
const throttledFunc = () : any => {
23+
if (isOnCooldown && isCallQueued) return;
24+
if (isOnCooldown) {
25+
isCallQueued = true;
26+
return;
27+
}
28+
f();
29+
isOnCooldown = true;
30+
isCallQueued = false;
31+
const runAfterTimeout = () : any => {
32+
if (isCallQueued) {
33+
isCallQueued = false;
34+
isOnCooldown = true; // not needed I think
35+
f();
36+
setTimeout(runAfterTimeout, t);
37+
return;
38+
}
39+
isOnCooldown = false;
40+
};
41+
setTimeout(runAfterTimeout, t);
42+
};
43+
return throttledFunc;
44+
};
45+
46+
// Helper function to grab the getters/setters from `elementType`
47+
export const getHooksNames = (elementType : string) : Array<string> => {
48+
// Initialize empty object to store the setters and getter
49+
let ast : any;
50+
try {
51+
ast = JSXParser.parse(elementType);
52+
} catch (e) {
53+
return ['unknown'];
54+
}
55+
56+
// const hookState = {};
57+
// const hooksNames = {};
58+
const hookState: any = {};
59+
const hooksNames: any = {};
60+
61+
while (Object.hasOwnProperty.call(ast, 'body')) {
62+
let tsCount : number = 0; // Counter for the number of TypeScript hooks seen (to distinguish in masterState)
63+
ast = ast.body;
64+
const statements : Array<string> = [];
65+
66+
/** All module exports always start off as a single 'FunctionDeclaration' type
67+
* Other types: "BlockStatement" / "ExpressionStatement" / "ReturnStatement"
68+
* Iterate through AST of every function declaration
69+
* Check within each function declaration if there are hook declarations */
70+
ast.forEach((functionDec) => {
71+
let body : any;
72+
if (functionDec.expression && functionDec.expression.body)
73+
body = functionDec.expression.body.body;
74+
else body = functionDec.body ? functionDec.body.body : [];
75+
// Traverse through the function's funcDecs and Expression Statements
76+
body.forEach((elem : any) => {
77+
if (elem.type === 'VariableDeclaration') {
78+
elem.declarations.forEach((hook : any) => {
79+
// * TypeScript hooks appear to have no "VariableDeclarator"
80+
// * with id.name of _useState, _useState2, etc...
81+
// * hook.id.type relevant for TypeScript applications
82+
// *
83+
// * Works for useState hooks
84+
if (hook.id.type === 'ArrayPattern') {
85+
hook.id.elements.forEach((hook) => {
86+
statements.push(hook.name);
87+
// * Unshift a wildcard name to achieve similar functionality as before
88+
statements.unshift(`_useWildcard${tsCount}`);
89+
tsCount += 1;
90+
});
91+
} else {
92+
if (hook.init.object && hook.init.object.name) {
93+
const varName : any = hook.init.object.name;
94+
if (!hooksNames[varName] && varName.match(/_use/)) {
95+
hooksNames[varName] = hook.id.name;
96+
}
97+
}
98+
if (hook.id.name !== undefined) {
99+
statements.push(hook.id.name);
100+
}
101+
}
102+
});
103+
}
104+
});
105+
106+
statements.forEach((el, i) => {
107+
if (el.match(/_use/)) hookState[el] = statements[i + 2];
108+
});
109+
});
110+
}
111+
return Object.values(hooksNames);
112+
};

‎src/backend/linkFiber.ts

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@ import 'core-js';
3636

3737
// const Tree = require('./tree').default;
3838
// const componentActionsRecord = require('./masterState');
39-
import { useGotoRecoilSnapshot, RecoilRoot, useRecoilSnapshot } from 'recoil';
4039
import {
4140
// eslint-disable-next-line @typescript-eslint/no-unused-vars
4241
Snapshot,
@@ -48,7 +47,6 @@ import {
4847
import Tree from './tree';
4948
import componentActionsRecord from './masterState';
5049
import { throttle, getHooksNames } from './helpers';
51-
import ReactDOM from 'react-dom';
5250

5351
declare global {
5452
interface Window {
@@ -61,7 +59,6 @@ const circularComponentTable = new Set();
6159

6260
export default (snap: Snapshot, mode: Mode): (() => void) => {
6361
let fiberRoot = null;
64-
6562
function sendSnapshot(): void {
6663
// Don't send messages while jumping or while paused
6764
if (mode.jumping || mode.paused) return;
@@ -167,9 +164,6 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
167164
// });
168165
atomArray.push(memoizedProps);
169166

170-
171-
// console.log('1st ATOM ARRAY', atomArray);
172-
173167
function traverseRecoilHooks(memoizedState: any): HookStates {
174168
const hooksStates: HookStates = [];
175169
while (memoizedState && memoizedState.queue) {
@@ -203,10 +197,7 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
203197
// so we must traverse through the list and get the states.
204198
// We then store them along with the corresponding memoizedState.queue,
205199
// which includes the dispatch() function we use to change their state.
206-
207200
const hooksStates = traverseRecoilHooks(memoizedState);
208-
209-
const hooksNames = getHooksNames(elementType.toString());
210201
hooksStates.forEach((state, i) => {
211202

212203
hooksIndex = componentActionsRecord.saveNew(
@@ -354,8 +345,6 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
354345
const reactInstance = devTools ? devTools.renderers.get(1) : null;
355346
fiberRoot = devTools.getFiberRoots(1).values().next().value;
356347

357-
// console.log('FIBER ROOT', fiberRoot.current);
358-
359348
const throttledUpdateSnapshot = throttle(updateSnapShotTree, 70);
360349
document.addEventListener('visibilitychange', onVisibilityChange);
361350
if (reactInstance && reactInstance.version) {

‎src/backend/masterState.js

Lines changed: 0 additions & 41 deletions
This file was deleted.

0 commit comments

Comments
 (0)