all packages seem to be installed now time for the errors

Author: Solodt55

.babelrc

@@ -1,6 +1,5 @@
 {
   "extends": [
-    "airbnb",
     "plugin:jest/recommended",
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended",

.eslintrc

@@ -3,7 +3,7 @@
   "description": "build web extension bundle.js",
   "scripts": {
     "build": "NODE_OPTIONS=--openssl-legacy-provider webpack --mode production",
-    "dev": " webpack --mode development --watch",
+    "dev": "cross-env NODE_ENV=development webpack --mode development --watch",
     "buildlegacy": "webpack --mode production",
     "devlegacy": "webpack --mode development --watch",
     "test": "jest --verbose --coverage",
@@ -119,21 +119,76 @@
   ],
   "license": "ISC",
   "devDependencies": {
-    "@babel/preset-env": "^7.23.6",
-    "@babel/preset-react": "^7.23.3",
-    "@babel/preset-typescript": "^7.23.3",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.1",
     "@types/chrome": "^0.0.254",
     "@types/jest": "^29.5.11",
     "@types/node": "^20.10.5",
-    "babel-loader": "^9.1.3",
+    "@typescript-eslint/eslint-plugin": "^6.15.0",
     "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.8.1",
+    "eslint-plugin-jest": "^27.6.0",
+    "eslint-plugin-jest-dom": "^5.1.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-testing-library": "^6.2.0",
     "html-webpack-plugin": "^5.5.4",
+    "identity-obj-proxy": "^3.0.0",
+    "jsdom": "^23.0.1",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.21.1",
+    "sass-loader": "^13.3.2",
+    "style-loader": "^3.3.3",
+    "ts-loader": "^9.5.1",
     "typedoc": "^0.25.4",
     "typescript": "^5.3.3",
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4"
   },
   "dependencies": {
-    "express": "^4.18.2"
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.15.1",
+    "@mui/material": "^5.15.1",
+    "@mui/system": "^5.15.1",
+    "@reduxjs/toolkit": "^2.0.1",
+    "@visx/axis": "^3.5.0",
+    "@visx/event": "^3.3.0",
+    "@visx/gradient": "^3.3.0",
+    "@visx/grid": "^3.5.0",
+    "@visx/group": "^3.3.0",
+    "@visx/hierarchy": "^3.3.0",
+    "@visx/responsive": "^3.3.0",
+    "@visx/scale": "^3.5.0",
+    "@visx/shape": "^3.5.0",
+    "@visx/text": "^3.3.0",
+    "@visx/tooltip": "^3.3.0",
+    "cross-env": "^7.0.3",
+    "d3": "^7.8.5",
+    "d3-scale-chromatic": "^3.0.0",
+    "d3-shape": "^3.2.0",
+    "dotenv": "^16.3.1",
+    "express": "^4.18.2",
+    "html-react-parser": "^5.0.11",
+    "intro.js": "^7.2.0",
+    "intro.js-react": "^1.0.0",
+    "jsondiffpatch": "^0.6.0",
+    "lodash": "^4.17.21",
+    "node": "^14.21.3",
+    "rc-slider": "^10.5.0",
+    "rc-tooltip": "^6.1.3",
+    "react": "^18.2.0",
+    "react-apexcharts": "^1.4.1",
+    "react-hover": "^3.0.1",
+    "react-json-tree": "^0.18.0",
+    "react-redux": "^9.0.4",
+    "react-select": "^5.8.0",
+    "react-spinners": "^0.13.8",
+    "redux": "^5.0.0",
+    "regenerator-runtime": "^0.14.1",
+    "sass": "^1.69.5",
+    "styled-components": "^6.1.2",
+    "web-vitals": "^3.5.0"
   }
 }

package.json

@@ -16,7 +16,7 @@ const mockState = {
   },
 }; // End
 
-const chrome = require('sinon-chrome');
+// const chrome = require('sinon-chrome');
 
 const mockActionContainer = jest.fn();
 jest.mock('../containers/ActionContainer', () => (props) => {
@@ -55,17 +55,17 @@ jest.mock('../../../node_modules/intro.js/introjs.css', () => jest.fn());
 useDispatch.mockReturnValue(dispatch);
 useSelector.mockImplementation((callback) => callback(mockState));
 
-global.chrome = chrome;
-const port = {
-  onMessage: {
-    addListener: () => {},
-    hasListener: () => {},
-  },
-  onDisconnect: {
-    addListener: () => {},
-  },
-};
-chrome.runtime.connect.returns(port);
+// global.chrome = chrome;
+// const port = {
+//   onMessage: {
+//     addListener: () => {},
+//     hasListener: () => {},
+//   },
+//   onDisconnect: {
+//     addListener: () => {},
+//   },
+// };
+// chrome.runtime.connect.returns(port);
 
 describe('With no snapshots, should not render any containers', () => {
   test('With no snapshots, ErrorContainer should render', () => {

src/app/__tests__/MainContainer.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { diff, formatters } from 'jsondiffpatch';
+import { diff } from 'jsondiffpatch';
+import formatters from 'jsondiffpatch/build/formatters';
 import HtmlReactParser from 'html-react-parser';
 import { CurrentTab, DiffProps, MainState, RootState, StatelessCleaning } from '../FrontendTypes';
 import { useSelector } from 'react-redux';

src/app/components/Diff.tsx

@@ -1,6 +1,4 @@
-const acorn = require('acorn');
-const jsx = require('acorn-jsx');
-const JSXParser = acorn.Parser.extend(jsx());
+import parse from 'html-react-parser';
 import { HookStateItem, Fiber } from '../types/backendTypes';
 import { exclude } from '../models/filterConditions';
 
@@ -92,7 +90,7 @@ export function getHooksNames(elementType: string): { hookName: string; varName:
   // Abstract Syntax Tree
   let AST: any;
   try {
-    AST = JSXParser.parse(elementType).body;
+    AST = parse(elementType).body;
     // Begin search for hook names, only if ast has a body property.
     // Statements get all the names of the hooks. For example: useCount, useWildcard, ...
     const statements: { hookName: string; varName: string }[] = [];

src/backend/controllers/statePropExtractors.ts

@@ -10,9 +10,3 @@ declare module 'core-js';
 // 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';

src/backend/module.d.ts

@@ -11,7 +11,7 @@
     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
 
     /* Language and Environment */
-    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "target": "ES6",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
     // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
     "jsx": "react",                                /* Specify what JSX code is generated. */
     // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
@@ -25,7 +25,7 @@
     // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
 
     /* Modules */
-    "module": "commonjs",                                /* Specify what module code is generated. */
+    "module": "ES6",                                /* Specify what module code is generated. */
     // "rootDir": "./",                                  /* Specify the root folder within your source files. */
     "moduleResolution": "node10",                     /* Specify how TypeScript looks up a file from a given module specifier. */
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
@@ -52,7 +52,7 @@
     // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
     // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
     // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
-    // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
+    "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
     // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
     // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
     "outDir": "./src/extension/build/bundles/",                                   /* Specify an output folder for all emitted files. */

tsconfig.json

@@ -1,3 +1,4 @@
+require('dotenv').config()
 /* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path');
 
@@ -9,7 +10,8 @@ const path = require('path');
 
 // const TypedocWebpackPlugin = require('typedoc-webpack-plugin');
 
-const config = {
+module.exports  = {
+  mode: process.env.NODE_ENV || "production",
   // use a "multi-main entry" to inject multiple dependent files together
   // and graph their dependencies into one "chunk"
   entry: {
@@ -18,5 +20,49 @@ const config = {
     content: './src/extension/contentScript.ts',
     backend: './src/backend/index.ts',
   },
+  watchOptions: {
+    aggregateTimeout: 1000,
+    ignored: /node_modules/,
+  },
+  output: {
+    path: path.resolve(__dirname, 'src/extension/build/bundles'),
+    filename: '[name].bundle.js',
+  },
+  devtool: "cheap-module-source-map",
+  module: {
+    rules: [ 
+      /**
+       * For all files ending in .ts or .tsx, except those in node_modules
+       * => transpile typescript files into javascript file.
+       */
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+        resolve: {
+          extensions: ['.tsx', '.ts', '.js'],
+        },
+      },
+      /**
+       * For all files ending in .scss or .css files
+       * Since sass-loader will only works with .scss & .sass files, for any .css file, webpack will skip sass-loader and use css-loader, then style-loader.
+       */
+      {
+        test: /\.s?css$/,
+        use: [
+          // Creates `style` nodes from JS strings
+          'style-loader',
+          // Translates CSS into CommonJS
+          'css-loader',
+          // Compiles Sass to CSS
+          'sass-loader',
+        ],
+      },
+    ]
+  },  
+  // Add `.ts` and `.tsx` as a resolvable extension.
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.jsx'],
+  },
 
 };