diff --git a/src/backend/__tests__/timeJump.test.ts b/src/backend/__tests__/timeJump.test.ts index a5c81407a..749b496d0 100644 --- a/src/backend/__tests__/timeJump.test.ts +++ b/src/backend/__tests__/timeJump.test.ts @@ -62,7 +62,7 @@ describe('unit testing for timeJump.ts', () => { ]; snapShot = { tree }; - timeJump = timeJumpRequire(snapShot, mode); + timeJump = timeJumpRequire(mode); }); test('calling the initial require should return a function', () => { expect(typeof timeJumpRequire).toBe('function'); diff --git a/src/backend/index.ts b/src/backend/index.ts index 27ba07681..a66e510a4 100644 --- a/src/backend/index.ts +++ b/src/backend/index.ts @@ -29,13 +29,13 @@ const mode: Mode = { // linkFiber is now assigned the default function exported from the file linkFiber.ts const linkFiber = linkFiberStart(snapShot, mode); // timeJump is now assigned the default function exported from the file timeJump.ts -const timeJump = timeJumpStart(snapShot, mode); +const timeJump = timeJumpStart(mode); // * Event listener for time-travel actions window.addEventListener('message', ({ data: { action, payload } }: MsgData) => { switch (action) { case 'jumpToSnap': - timeJump(payload, true); // * This sets state with given payloa + timeJump(payload, true); // * This sets state with given payload break; case 'setPause': diff --git a/src/backend/linkFiber.ts b/src/backend/linkFiber.ts index 2d20450c3..add12e60f 100644 --- a/src/backend/linkFiber.ts +++ b/src/backend/linkFiber.ts @@ -2,7 +2,6 @@ /* eslint-disable no-restricted-syntax */ /* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable max-len */ -// import 'core-js'; /* eslint-disable indent */ /* eslint-disable brace-style */ /* eslint-disable comma-dangle */ @@ -10,6 +9,7 @@ /* eslint-disable func-names */ /* eslint-disable no-use-before-define */ /* eslint-disable no-param-reassign */ +/* eslint-disable-next-line no-mixed-operators */ // import typescript types import { @@ -17,7 +17,6 @@ import { Snapshot, // jump, pause Mode, - ComponentData, // array of state and component HookStates, // object with tree structure @@ -25,7 +24,7 @@ import { } from './types/backendTypes'; // import function that creates a tree import Tree from './tree'; -// passes the data down to its components ? +// passes the data down to its components import componentActionsRecord from './masterState'; import routes from './routes'; @@ -43,7 +42,6 @@ declare global { let fiberRoot = null; let doWork = true; const circularComponentTable = new Set(); -let initialstart = false; let rtidCounter = 0; let rtid = null; @@ -102,20 +100,9 @@ function updateSnapShotTree(snap: Snapshot, mode: Mode): void { sendSnapshot(snap, mode); } -// updating tree depending on current mode on the panel (pause, etc) -// function sendDevToolsInfo(snap: Snapshot, mode: Mode): void { -// window.postMessage( -// { -// action: 'recordSnap', -// payload, -// }, -// '*' -// ); -// } - /** * @method traverseHooks - * @param memoizedState memoizedState property on a stateful fctnl component's FiberNode object + * @param memoizedState memoizedState property on a stateful functional component's FiberNode object * @return An array of array of HookStateItem objects * * Helper function to traverse through memoizedState and inject instrumentation to update our state tree @@ -155,7 +142,6 @@ const exclude = ['alternate', '_owner', '_store', 'get key', 'ref', '_self', '_s // react elements throw errors on client side of application - convert react/functions into string function convertDataToString(newObj, oldObj) { const newPropData = oldObj || {}; - // const newPropData = Array.isArray(obj) === true ? {} : []; for (const key in newObj) { if (typeof newObj[key] === 'function') { newPropData[key] = 'function'; @@ -292,7 +278,6 @@ function createTree( let newNode = null; // We want to add this fiber node to the snapshot - // eslint-disable-next-line no-mixed-operators if (componentFound || newState === 'stateless' && !newState.hooksState) { if ( currentFiber.child @@ -359,7 +344,7 @@ function createTree( * @return a function to be invoked by index.js that initiates snapshot monitoring * linkFiber contains core module functionality, exported as an anonymous function. */ -export default (snap: Snapshot, mode: Mode): (() => void) => { + export default (snap: Snapshot, mode: Mode): (() => void) => { // checks for visiblity of document function onVisibilityChange(): void { // hidden property = background tab/minimized window diff --git a/src/backend/masterState.ts b/src/backend/masterState.ts index 1ca91ac8c..ef538e84c 100644 --- a/src/backend/masterState.ts +++ b/src/backend/masterState.ts @@ -4,7 +4,6 @@ /* eslint-disable guard-for-in */ /* eslint-disable no-restricted-syntax */ -// import {Hook} import { // eslint-disable-next-line @typescript-eslint/no-unused-vars HookStateItem, // obj with state and component @@ -18,7 +17,8 @@ import { // For functional components that utilize Hooks, there will be one "component" // for each setter/getter every time we have a new snapshot let componentActionsRecord: HookStates = []; -let index = 0; +let index: number; +index = 0; export default { clear: () => { @@ -40,7 +40,7 @@ export default { ? componentActionsRecord[inputIndex].component : undefined), // this is used for react hooks - hooks will be passed in as an array from timeJump.ts - getComponentByIndexHooks: (inputIndex: Array = []): any => { + getComponentByIndexHooks: (inputIndex: Array = []): Array => { const multiDispatch = []; for (let i = 0; i < inputIndex.length; i++) { if (componentActionsRecord[inputIndex[i]]) { diff --git a/src/backend/module.d.ts b/src/backend/module.d.ts index f3d907a79..4a40bcdeb 100644 --- a/src/backend/module.d.ts +++ b/src/backend/module.d.ts @@ -1,4 +1,18 @@ +// core-js is a library that includes polyfill for many types of native js +// features such as promise, symbols, collections, typed arrays, etc. +// Used in reactime to make sure our newest code +// can run on outdated platforms and with outdated applications declare module 'core-js'; +// Regenerator runtime provides runtime support for compiled/transpiled async functions. +// Like babel that compiles modern js into older js, +// async functions are also compiled to run on engines that don't support async. +// After babel does the syntax transformation or transpiles the async functions, +// the resulting code uses regen runtime to run +// https://stackoverflow.com/questions/65378542/what-is-regenerator-runtime-npm-package-used-for declare module 'regenerator-runtime/runtime'; +// Acorn is a jsx parser that was experimental to be faster than than the react.js jsx parser, +// however is not maintained at this time, last update was more than one year ago 10-5-21 declare module 'acorn-jsx'; +// Traspiler to traspile code to JSX AST but to use with regular es5 compliant js, +// still needs babel and buble trasnpilers which use acorn-jsx under the hood declare module 'acorn'; diff --git a/src/backend/timeJump.ts b/src/backend/timeJump.ts index 627c9cffc..81a22f78a 100644 --- a/src/backend/timeJump.ts +++ b/src/backend/timeJump.ts @@ -1,4 +1,3 @@ -import { Console } from 'console'; import routes from './routes'; /* eslint-disable @typescript-eslint/no-unused-vars */ @@ -22,10 +21,10 @@ import routes from './routes'; import componentActionsRecord from './masterState'; const circularComponentTable = new Set(); -export default (origin, mode) => { +export default mode => { // Recursively change state of tree // Set the state of the origin tree if the component is stateful - function jump(target, firstCall = false) { + function jump(target) { if (!target) return; if (target.state === 'stateless') { target.children.forEach(child => jump(child)); @@ -44,8 +43,8 @@ export default (origin, mode) => { // prevState contains the states of the snapshots we are jumping FROM, not jumping TO prevState => { Object.keys(prevState).forEach(key => { - // if conditional below does not appear to ever be reached if all states are defined - leaving code in just in case codebases do have undefined states - if (!target.state[key] === undefined) { + // the if conditional below does not appear to ever be reached if all states are defined - leaving code in just in case codebases do have undefined states + if (target.state[key] !== undefined) { target.state[key] = undefined; } }); @@ -82,6 +81,7 @@ export default (origin, mode) => { } } + // payload from index.ts is assigned to target return (target, firstCall = false) => { // * Setting mode disables setState from posting messages to window mode.jumping = true; diff --git a/src/backend/tree.ts b/src/backend/tree.ts index be51d6416..6ef656234 100644 --- a/src/backend/tree.ts +++ b/src/backend/tree.ts @@ -1,7 +1,6 @@ /* eslint-disable no-plusplus */ /* eslint-disable max-len */ /* eslint-disable @typescript-eslint/ban-types */ -// import 'core-js'; /* eslint-disable no-multiple-empty-lines */ /* eslint-disable max-classes-per-file */ /* eslint-disable no-console */