rewrite JS to TS

Author: hienqn

src/backend/linkFiber.ts

@@ -36,7 +36,6 @@ import 'core-js';
 
 // const Tree = require('./tree').default;
 // const componentActionsRecord = require('./masterState');
-import { useGotoRecoilSnapshot, RecoilRoot, useRecoilSnapshot } from 'recoil';
 import {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   Snapshot,
@@ -48,7 +47,6 @@ import {
 import Tree from './tree';
 import componentActionsRecord from './masterState';
 import { throttle, getHooksNames } from './helpers';
-import ReactDOM from 'react-dom';
 
 declare global {
   interface Window {
@@ -166,8 +164,6 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
     //   });
     atomArray.push(memoizedProps);
 
-    // console.log('1st ATOM ARRAY', atomArray);
-
     function traverseRecoilHooks(memoizedState: any): HookStates {
       const hooksStates: HookStates = [];
       while (memoizedState && memoizedState.queue) {
@@ -200,7 +196,6 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
         // so we must traverse through the list and get the states.
         // We then store them along with the corresponding memoizedState.queue,
         // which includes the dispatch() function we use to change their state.
-
         const hooksStates = traverseRecoilHooks(memoizedState);
         const hooksNames = getHooksNames(elementType.toString());
         hooksStates.forEach((state, i) => {
@@ -333,8 +328,6 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
     const reactInstance = devTools ? devTools.renderers.get(1) : null;
     fiberRoot = devTools.getFiberRoots(1).values().next().value;
 
-    // console.log('FIBER ROOT', fiberRoot.current);
-
     const throttledUpdateSnapshot = throttle(updateSnapShotTree, 70);
     document.addEventListener('visibilitychange', onVisibilityChange);
     if (reactInstance && reactInstance.version) {

src/backend/masterState.js

@@ -3,11 +3,9 @@ import 'core-js';
 /* eslint-disable no-plusplus */
 /* eslint-disable guard-for-in */
 /* eslint-disable no-restricted-syntax */
-
 const componentActionsRecord = {};
 let index = 0;
 
-// module.exports = {
 export default {
   saveNew: (state, component) => {
     componentActionsRecord[index] = { state, component };

src/backend/masterState.ts

@@ -0,0 +1,24 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import 'core-js';
+/* eslint-disable no-plusplus */
+/* eslint-disable guard-for-in */
+/* eslint-disable no-restricted-syntax */
+const componentActionsRecord = {};
+let index = 0;
+
+export default {
+  saveNew: (state, component) => {
+    componentActionsRecord[index] = { state, component };
+    index++;
+    return index - 1;
+  },
+  getRecordByIndex: inputIndex => componentActionsRecord[inputIndex],
+  getComponentByIndex: inputIndex => (componentActionsRecord[inputIndex]
+    ? componentActionsRecord[inputIndex].component
+    : undefined),
+};
+
+class twoHaha {
+  private componenActionsRecord : Array<any>;
+  private index = 0; 
+}

src/backend/recoilidea.js

@@ -4,6 +4,7 @@
     "module": "es6",
     "target": "es5",
     "jsx": "react",
+    "removeComments": true,  
     "allowJs": true,
     "typeRoots": [
       "./node_modules/@types"