Skip to content

Commit 4eab364

Browse files
crpereztcrperezt
committed
adding throttling to updateSnapshot; adding ast parser and acorn dependencies
1 parent d331069 commit 4eab364

File tree

12 files changed

+532
-42
lines changed

12 files changed

+532
-42
lines changed

‎.vscode/settings.json

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,22 @@
11
{
2-
"eslint.enable": true
2+
"eslint.enable": true,
3+
"workbench.colorCustomizations": {
4+
"activityBar.activeBackground": "#93e6fc",
5+
"activityBar.activeBorder": "#fa45d4",
6+
"activityBar.background": "#93e6fc",
7+
"activityBar.foreground": "#15202b",
8+
"activityBar.inactiveForeground": "#15202b99",
9+
"activityBarBadge.background": "#fa45d4",
10+
"activityBarBadge.foreground": "#15202b",
11+
"statusBar.background": "#61dafb",
12+
"statusBar.border": "#61dafb",
13+
"statusBar.foreground": "#15202b",
14+
"statusBarItem.hoverBackground": "#2fcefa",
15+
"titleBar.activeBackground": "#61dafb",
16+
"titleBar.activeForeground": "#15202b",
17+
"titleBar.border": "#61dafb",
18+
"titleBar.inactiveBackground": "#61dafb99",
19+
"titleBar.inactiveForeground": "#15202b99"
20+
},
21+
"peacock.color": "#61dafb"
322
}

‎dev-reactime/__tests__/index.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Testing LinkFiber</title>
7+
</head>
8+
<body>
9+
10+
</body>
11+
</html>

‎dev-reactime/__tests__/linkFiber.test.js

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
import React, { Component } from 'react';
33
import { render } from 'react-dom';
44
import linkFiberStart from '../linkFiber';
5-
import 'expect-puppeteer';
6-
import 'puppeteer';
5+
// import 'expect-puppeteer';
6+
import puppeteer from 'puppeteer';
77

8-
// const SERVER = require('puppeteerServer');
8+
const SERVER = require('./puppeteerServer');
99

1010
const APP = 'http://localhost:3002';
1111

@@ -31,13 +31,25 @@ class App extends Component {
3131
describe('unit test for linkFiber', () => {
3232
beforeAll(async () => {
3333
await SERVER;
34+
const args = puppeteer.defaultArgs().filter(arg => String(arg).toLowerCase() !== '--disable-extensions');
3435
browser = await puppeteer.launch({
35-
args: ['--no-sandbox', '--disable-setuid-sandbox',
36+
args: args.concat(['--no-sandbox', '--disable-setuid-sandbox',
37+
'---extensions-on-chrome-urls',
3638
'--whitelisted-extension-id=fmkadmapgofadopljbjfkapdkoienihi',
37-
'--whitelisted-extension-id=hilpbahfbckghckaiafiiinjkeagmfhn'],
39+
'--whitelisted-extension-id=hilpbahfbckghckaiafiiinjkeagmfhn',
40+
'--load-extension=/mnt/d/Libraries/Documents/codeRepos/reactime/src/extension/build']),
41+
devtools: true,
42+
ignoreDefaultArgs: true,
3843
// '--load-extension', '../../src/extension/build'],
39-
headless: false,
44+
45+
// headless: false,
46+
});
47+
48+
const c = await puppeteer.connect({
49+
browserWSEndpoint: browser.wsEndpoint(), //`ws://${host}:${port}/devtools/browser/<id>`,
50+
ignoreHTTPSErrors: false
4051
});
52+
4153
page = await browser.newPage();
4254
});
4355

@@ -57,10 +69,10 @@ describe('unit test for linkFiber', () => {
5769
};
5870
linkFiber = linkFiberStart(snapShot, mode);
5971

60-
page.waitForFunction(async linkFiber => {
72+
page.waitForFunction(async lf => {
6173
const container = document.createElement('div');
6274
render(<App />, container);
63-
linkFiber(container);
75+
lf(container);
6476
}, {}, linkFiber);
6577
});
6678

‎dev-reactime/__tests__/puppeteerServer.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
const express = require('express');
2+
const path = require('path');
3+
4+
const app = express();
5+
6+
app.use(express.static(path.resolve(__dirname)));
7+
8+
const server = app.listen(3002);
9+
// () => {console.log('Express listening on port 3000');}
10+
11+
module.exports = server;

‎dev-reactime/helpers.js

Lines changed: 57 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
1-
// returns a throttled version of an input function
2-
// the returned throttled function only executes at most once every t milliseconds
1+
/* eslint-disable linebreak-style */
2+
/* eslint-disable no-inner-declarations, no-loop-func */
3+
// eslint-disable-next-line import/newline-after-import
4+
import acorn from 'acorn'; // javascript parser
5+
import jsx from 'acorn-jsx';
6+
7+
// Returns a throttled version of an input function
8+
// The returned throttled function only executes at most once every t milliseconds
39
export const throttle = (f, t) => {
410
let isOnCooldown = false;
511
let isCallQueued = false;
@@ -27,4 +33,52 @@ export const throttle = (f, t) => {
2733
return throttledFunc;
2834
};
2935

30-
export const helper2 = () => {};
36+
// Helper function to grab the getters/setters from `elementType`
37+
export const getHooksNames = elementType => {
38+
const JSXParser = acorn.Parser.extend(jsx());
39+
// Initialize empty object to store the setters and getter
40+
let ast = JSXParser.parse(elementType);
41+
const hookState = {};
42+
43+
while (Object.hasOwnProperty.call(ast, 'body')) {
44+
let tsCount = 0; // Counter for the number of TypeScript hooks seen (to distinguish in masterState)
45+
ast = ast.body;
46+
const statements = [];
47+
48+
/** All module exports always start off as a single 'FunctionDeclaration' type
49+
* Other types: "BlockStatement" / "ExpressionStatement" / "ReturnStatement"
50+
* Iterate through AST of every function declaration
51+
* Check within each function declaration if there are hook declarations */
52+
ast.forEach(functionDec => {
53+
let body;
54+
if (functionDec.expression) body = functionDec.expression.body.body;
55+
else body = functionDec.body.body;
56+
// Traverse through the function's funcDecs and Expression Statements
57+
body.forEach(elem => {
58+
if (elem.type === 'VariableDeclaration') {
59+
elem.declarations.forEach(hook => {
60+
// * TypeScript hooks appear to have no "VariableDeclarator"
61+
// * with id.name of _useState, _useState2, etc...
62+
// * hook.id.type relevant for TypeScript applications
63+
// *
64+
// * Works for useState hooks
65+
if (hook.id.type === 'ArrayPattern') {
66+
hook.id.elements.forEach(hook => {
67+
statements.push(hook.name);
68+
// * Unshift a wildcard name to achieve similar functionality as before
69+
statements.unshift(`_useWildcard${tsCount}`);
70+
tsCount += 1;
71+
});
72+
} else statements.push(hook.id.name);
73+
});
74+
}
75+
});
76+
77+
// Iterate array and determine getter/setters based on pattern
78+
statements.forEach((el, i) => {
79+
if (el.match(/_use/)) hookState[el] = statements[i + 2];
80+
});
81+
});
82+
}
83+
return hookState;
84+
};

‎dev-reactime/linkFiber.js

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,9 @@
4848
// const componentActionsRecord = require('./masterState');
4949
import Tree from './tree';
5050
import componentActionsRecord from './masterState';
51-
import throttle from './helpers';
51+
import { throttle } from './helpers';
5252

53-
const DEBUG_MODE = false;
53+
const DEBUG_MODE = true;
5454

5555
const alwaysLog = console.log;
5656

@@ -70,7 +70,7 @@ export default (snap, mode) => {
7070
function sendSnapshot() {
7171
alwaysLog('sendSnapshot called');
7272
// Don't send messages while jumping or while paused
73-
circularComponentTable.clear();
73+
7474
if (mode.jumping || mode.paused) return;
7575

7676
if (!snap.tree) {
@@ -93,10 +93,11 @@ export default (snap, mode) => {
9393
// a hooks component changes state
9494
function traverseHooks(memoizedState) {
9595
const hooksStates = [];
96-
while (memoizedState && memoizedState.queue) {
96+
if (memoizedState && memoizedState.queue) {
9797
// Carlos: these two are legacy comments, we should look into them later
9898
// prevents useEffect from crashing on load
9999
// if (memoizedState.next.queue === null) { // prevents double pushing snapshot updates
100+
alwaysLog('traverse hooks memoizedState', memoizedState);
100101
if (memoizedState.memoizedState) {
101102
hooksStates.push({
102103
component: memoizedState.queue,
@@ -165,6 +166,7 @@ export default (snap, mode) => {
165166
newState = { hooksState: [[state.state, hooksIndex]] };
166167
}
167168
componentFound = true;
169+
console.log('currentFiber of hooks state:', currentFiber);
168170
});
169171
}
170172
}
@@ -227,6 +229,7 @@ export default (snap, mode) => {
227229
function updateSnapShotTree() {
228230
if (fiberRoot) {
229231
const { current } = fiberRoot;
232+
circularComponentTable.clear();
230233
snap.tree = createTree(current);
231234
}
232235
sendSnapshot();

0 commit comments

Comments
 (0)