|
1 |
| -/* eslint-disable @typescript-eslint/no-explicit-any */ |
2 |
| -/* eslint-disable consistent-return */ |
3 |
| -/* eslint-disable import/no-extraneous-dependencies */ |
4 |
| -/* eslint-disable import/order */ |
5 |
| -/* eslint-disable @typescript-eslint/no-unused-vars */ |
6 | 1 | /**
|
7 | 2 | * 'reactime' module has a single export
|
8 | 3 | * @function linkFiber
|
9 | 4 | */
|
| 5 | +// --------------------------START OF IMPORT------------------------------------ |
10 | 6 | // regenerator runtime supports async functionality
|
11 | 7 | import 'regenerator-runtime/runtime';
|
12 | 8 | import linkFiberInitialization from './routers/linkFiber';
|
13 | 9 | import timeJumpInitialization from './controllers/timeJump';
|
14 | 10 | import { Snapshot, Status, MsgData } from './types/backendTypes';
|
15 | 11 | import routes from './models/routes';
|
16 | 12 |
|
17 |
| -// * State snapshot object initialized here |
| 13 | +// -------------------------INITIALIZE SNAPSHOT & MODE-------------------------- |
| 14 | +/** The snapshot of the current ReactFiber tree */ |
18 | 15 | const snapShot: Snapshot = {
|
19 | 16 | tree: null,
|
20 | 17 | };
|
21 | 18 |
|
| 19 | +/** Indicate if mode is jumping/not jumping or navigating during jumping */ |
22 | 20 | const mode: Status = {
|
23 | 21 | jumping: false,
|
24 |
| - paused: false, |
25 | 22 | };
|
26 | 23 |
|
27 |
| -// linkFiber is now assigned the default function exported from the file linkFiber.ts |
28 |
| - |
29 |
| -console.log('Index ts Initiation'); |
| 24 | +// ---------------------INITIALIZE LINKFIBER & TIMEJUMP------------------------- |
| 25 | +// linkFiber is now assigned the default ASYNC function exported from the file linkFiber.ts |
30 | 26 | const linkFiber = linkFiberInitialization(snapShot, mode);
|
31 |
| -// timeJump is now assigned the default function exported from the file timeJump.ts |
| 27 | +// timeJump is now assigned the default ASYNC function exported from the file timeJump.ts |
32 | 28 | const timeJump = timeJumpInitialization(mode);
|
33 | 29 |
|
34 |
| -// * Event listener for time-travel actions |
| 30 | +/** |
| 31 | + * Invoke linkFiber to perform the follwoing: |
| 32 | + * 1. Check for ReactDev installation, valid target React App |
| 33 | + * 2. Obtain the intial ReactFiber Tree from target React App |
| 34 | + * 3. Send a snapshot of ReactFiber Tree to frontend/Chrome Extension |
| 35 | + */ |
| 36 | +linkFiber(); |
| 37 | + |
| 38 | +// -----------------SET UP EVENT LISTENER FOR TIME TRAVEL----------------------- |
| 39 | +/** |
| 40 | + * On the chrome extension, if user click left/right arrow or the play button (a.k.a time travel functionality), frontend will send a message jumpToSnap with payload of the cached snapShot tree at the current step |
| 41 | + * 1. Set jumping mode to true => dictate we are jumping => no new snapshot will be sent to frontend |
| 42 | + * 2. If navigate to a new route during jumping => cache timeJump in navigate. |
| 43 | + * Otherwise, invoke timeJump to update ReactFiber tree with cached data from the snapshot payload |
| 44 | + */ |
35 | 45 | window.addEventListener('message', async ({ data: { action, payload } }: MsgData) => {
|
36 | 46 | switch (action) {
|
37 | 47 | case 'jumpToSnap':
|
38 |
| - console.log('Index ts - jumpToSnap', { payload }); |
39 | 48 | // Set mode to jumping to prevent snapShot being sent to frontEnd
|
40 | 49 | // NOTE: mode.jumping is set to false inside the timeJump.ts
|
41 | 50 | mode.jumping = true;
|
42 | 51 | // Check if we are navigating to another route
|
43 | 52 | const navigating: boolean = routes.navigate(payload.route);
|
44 | 53 | // If need to navigate
|
45 | 54 | if (navigating) {
|
46 |
| - // Pass timeJump function to mode.navigating => which will be invoked during onCommitFiberRoot: |
| 55 | + // Cache timeJump function in mode.navigating => which will be invoked during onCommitFiberRoot: |
47 | 56 | mode.navigating = () => timeJump(payload);
|
48 | 57 | }
|
49 |
| - // If not navitating, invoke timeJump immediately to update React Application FiberTree based on the snapshotTree |
| 58 | + // If not navitating, invoke timeJump immediately to update React Application FiberTree based on the snapshotTree payload |
50 | 59 | else {
|
51 | 60 | await timeJump(payload); // * This sets state with given payload
|
52 | 61 | }
|
53 | 62 | break;
|
54 |
| - |
55 | 63 | default:
|
56 | 64 | break;
|
57 | 65 | }
|
58 | 66 | });
|
59 |
| -// connect to dev tools and new fiber, |
60 |
| -// invokes anonymous function from linkFiber.ts set to linkFiber on line 30 |
61 |
| -linkFiber(); |
|
0 commit comments