Dev/2.0.0 (#29)

# Breaking changes: * Removed custom profiles support # Chores: * Vite migration * React 18 * Bumped package versions to fix yarn audit * React-jss => emotion transition*
Artboomy · Apr 8, 2024 · d2554e0 · d2554e0
1 parent 3b9e0b0
commit d2554e0
Show file tree

Hide file tree

Showing 87 changed files with 7,464 additions and 13,625 deletions.
diff --git a/.eslintignore b/.eslintignore
diff --git a/.eslintrc.js b/.eslintrc.js
diff --git a/.gitignore b/.gitignore
@@ -6,3 +6,5 @@ node_modules/
 roadmap.md
 yarn-error.log
 src/secrets.json
+stats-*.html
+.cache
diff --git a/.ladle/components.tsx b/.ladle/components.tsx
@@ -0,0 +1,21 @@
+import type { GlobalProvider } from '@ladle/react';
+import { ThemeProvider } from '@emotion/react';
+import { theme } from '../src/theme/light';
+import React from 'react';
+import { ModalContainer } from '../src/components/modal/Container';
+import ErrorBoundary from '../src/components/ErrorBoundary';
+
+export const Provider: GlobalProvider = ({
+    children
+    // globalState,
+    // storyMeta
+}) => (
+    <>
+        <ErrorBoundary>
+            <ThemeProvider theme={theme}>
+                <div id='modal'></div>
+                <ModalContainer>{children}</ModalContainer>
+            </ThemeProvider>
+        </ErrorBoundary>
+    </>
+);
diff --git a/dist/devtools.html b/dist/devtools.html
@@ -2,6 +2,6 @@
 <html>
 <head>
     <meta charset="UTF-8">
-    <script src="js/devtools.js"></script>
+    <script src="js/devtools.mjs"></script>
 </head>
 </html>
diff --git a/dist/manifest.json b/dist/manifest.json
@@ -1,6 +1,6 @@
 {
     "name": "Net logs",
-    "version": "1.7.0",
+    "version": "2.0.0",
     "default_locale": "en",
     "manifest_version": 3,
     "minimum_chrome_version": "88",
@@ -18,7 +18,7 @@
         "debugger"
     ],
     "background": {
-      "service_worker": "js/background.js",
+      "service_worker": "js/background.mjs",
       "type": "module"
     },
     "sandbox": {
@@ -35,14 +35,14 @@
     "content_scripts": [
         {
             "matches": ["<all_urls>"],
-            "js": ["js/content.js"],
+            "js": ["js/content.mjs"],
             "run_at": "document_idle"
         }
     ],
     "web_accessible_resources": [
         {
           "resources": [
-            "js/inject.js"
+            "js/inject.mjs"
           ],
           "matches": [
             "*://*/*"

diff --git a/dist/options.html b/dist/options.html
@@ -7,8 +7,8 @@
 <body>
     <div id="root"></div>
     <div id="modal"></div>
-    <script src="js/react-vendors.js"></script>
-    <script src="js/settings.js"></script>
-    <script src="js/options.js"></script>
+    <script type="module" src="js/react-vendors.mjs"></script>
+    <script type="module" src="js/settings.mjs"></script>
+    <script type="module" src="js/options.mjs"></script>
 </body>
 </html>
diff --git a/dist/panel.html b/dist/panel.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <title>NET LOGS</title>
     <link rel="stylesheet" href="css/panel.css">
-    <script src="js/panel.js" type="application/javascript"></script>
+    <script type="module" src="js/panel.mjs"></script>
 </head>
 <body>
     <iframe id="sandbox" src="sandbox.html"></iframe>

diff --git a/dist/sandbox.html b/dist/sandbox.html
@@ -5,12 +5,13 @@
   <meta
     http-equiv="Content-Security-Policy"
     content="default-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'unsafe-inline'; img-src 'self' data:; media-src 'self' data:;">
+    <link rel="stylesheet" href="js/react-vendors.css">
 </head>
 <body>
-<div id="root"></div>
-<div id="modal"></div>
-<script src="js/react-vendors.js"></script>
-<script src="js/settings.js"></script>
-<script src="js/sandbox.js"></script>
+  <div id="root"></div>
+  <div id="modal"></div>
+  <script type="module" src="js/react-vendors.mjs"></script>
+  <script type="module" src="js/settings.mjs"></script>
+  <script type="module" src="js/sandbox.mjs"></script>
 </body>
 </html>
diff --git a/dist/sandboxSettings.html b/dist/sandboxSettings.html
@@ -5,12 +5,14 @@
     <meta
       http-equiv="Content-Security-Policy"
       content="default-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'unsafe-inline'; img-src 'self' data:;">
+    <link rel="stylesheet" href="js/react-vendors.css">
 </head>
 <body>
     <div id="root"></div>
     <div id="modal"></div>
-    <script src="js/react-vendors.js"></script>
-    <script src="js/settings.js"></script>
-    <script src="js/sandboxSettings.js"></script>
+    <script src="js/react-vendors.mjs"></script>
+
+    <script src="js/settings.mjs"></script>
+    <script src="js/sandboxSettings.mjs"></script>
 </body>
 </html>
diff --git a/dist/website.html b/dist/website.html
@@ -1,11 +1,12 @@
 <!DOCTYPE html>
 <html>
+<!--DOESN'T WORK: toastify styles are broken. theme doesn't change -->
 <head>
   <meta charset="UTF-8">
   <title>Net logs</title>
   <link rel="icon" type="image/png" href="icons/16.png">
   <link rel="stylesheet" href="css/panel.css">
-  <script src="js/panel.js" type="application/javascript"></script>
+  <script src="js/panel.mjs" type="module"></script>
   <meta http-equiv="Content-Security-Policy"
         content="default-src 'self'; script-src 'self' 'unsafe-eval';frame-src 'self' 'unsafe-eval';">
 </head>

diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,31 @@
+// @ts-check
+
+import eslint from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import eslintConfigPrettier from 'eslint-config-prettier';
+
+export default tseslint.config(
+    {
+        // config with just ignores is the replacement for `.eslintignore`
+        ignores: ['**/coverage/**', '**/dist/**', '**/node_modules/**']
+    },
+    eslint.configs.recommended,
+    ...tseslint.configs.recommended,
+    eslintConfigPrettier,
+    {
+        rules: {
+            '@typescript-eslint/no-unused-vars': [
+                'error',
+                {
+                    args: 'all',
+                    argsIgnorePattern: '^_',
+                    caughtErrors: 'all',
+                    caughtErrorsIgnorePattern: '^_',
+                    destructuredArrayIgnorePattern: '^_',
+                    varsIgnorePattern: '^_',
+                    ignoreRestSiblings: true
+                }
+            ]
+        }
+    }
+);
diff --git a/package.json b/package.json
@@ -1,77 +1,73 @@
 {
     "name": "netlogs",
-    "version": "1.7.0",
+    "version": "2.0.0",
     "description": "Web extension for custom network logs representation",
     "main": "index.js",
     "author": "artboomy",
     "repository": "https://github.com/Artboomy/netlogs",
     "license": "MIT",
     "private": true,
+    "type": "module",
     "scripts": {
-        "lint": "npx tsc --noEmit && npx eslint ./src --max-warnings=0 --ext .ts,.tsx",
+        "lint": "npx tsc --noEmit && npx eslint -c eslint.config.js --max-warnings=0 ./src",
         "lint:ci": "echo '{\"api_secret\": \"mockData\", \"measurement_id\": \"mockData\"}' > src/secrets.json && yarn run lint",
-        "build": "npx webpack --config webpack.dev.js",
-        "build:prod": "yarn run lint && npx webpack --config webpack.prod.js",
-        "build:analyze": "yarn run lint && npx webpack --config webpack.analyze.js",
-        "build:watch": "npx webpack --config webpack.dev.js --watch",
-        "package": "yarn run lint && yarn run build:prod && tar -C dist -caf netlogs.zip *",
-        "site": "http-server dist",
-        "storybook": "start-storybook -p 6006",
-        "build-storybook": "build-storybook"
+        "build": "vite build --mode development",
+        "build:prod": "yarn run lint && vite build --mode production",
+        "build:analyze:treemap": "cross-env ANALYZE=treemap yarn run build",
+        "build:analyze:sunburst": "cross-env ANALYZE=sunburst yarn run build",
+        "build:analyze:network": "cross-env ANALYZE=network yarn run build",
+        "build:watch": "vite build --watch",
+        "package": "yarn run build:prod && tar -C dist -caf netlogs.zip *",
+        "site": "vite serve dist",
+        "storybook": "yarn ladle serve",
+        "build-storybook": "yarn ladle build"
     },
     "dependencies": {
+        "@emotion/css": "^11.11.2",
+        "@emotion/react": "^11.11.4",
+        "@emotion/styled": "^11.11.5",
         "base16": "1.0.0",
         "classnames": "2.2.6",
-        "codemirror": "5.59.4",
         "i18n-js": "^4.4.3",
-        "jszip": "^3.6.0",
+        "jszip": "^3.10.1",
         "lodash.clonedeep": "4.5.0",
         "lodash.isequal": "4.5.0",
-        "nanoid": "3.1.22",
-        "react": "17.0.1",
-        "react-codemirror2": "7.2.1",
-        "react-dnd": "14.0.2",
-        "react-dnd-html5-backend": "14.0.0",
-        "react-dom": "17.0.1",
+        "nanoid": "5.0.6",
+        "react": "^18.2.0",
+        "react-dnd": "^16.0.1",
+        "react-dnd-html5-backend": "^16.0.1",
+        "react-dom": "^18.2.0",
         "react-inspector": "https://github.com/Artboomy/react-inspector/releases/download/5.3.7/react-inspector-5.3.7.tgz",
-        "react-jss": "10.5.0",
         "react-multi-select-component": "^4.3.4",
-        "react-toastify": "9.1.3",
-        "react-use": "17.2.4",
-        "zustand": "3.3.3"
+        "react-toastify": "^10.0.5",
+        "react-use": "17.5.0",
+        "zustand": "^4.5.2"
     },
     "devDependencies": {
-        "@babel/core": "^7.13.10",
-        "@storybook/addon-actions": "^6.3.12",
-        "@storybook/addon-essentials": "^6.3.12",
-        "@storybook/addon-links": "^6.3.12",
-        "@storybook/react": "^6.3.12",
+        "@ladle/react": "^4.0.3",
         "@types/base16": "1.0.2",
         "@types/chrome": "0.0.262",
         "@types/classnames": "2.2.11",
-        "@types/codemirror": "0.0.108",
         "@types/har-format": "1.2.5",
         "@types/lodash.clonedeep": "4.5.6",
         "@types/lodash.isequal": "4.5.5",
-        "@types/react": "17.0.0",
-        "@types/react-dom": "17.0.0",
-        "@typescript-eslint/eslint-plugin": "^4.29.0",
-        "@typescript-eslint/parser": "^4.29.0",
-        "babel-loader": "^8.2.2",
-        "circular-dependency-plugin": "^5.2.2",
-        "clean-webpack-plugin": "^3.0.0",
-        "css-loader": "5.1.1",
-        "esbuild-loader": "^2.13.1",
-        "eslint": "^7.17.0",
-        "eslint-plugin-prettier": "^3.4.1",
-        "eslint-plugin-react": "^7.22.0",
-        "prettier": "2.2.1",
-        "style-loader": "2.0.0",
-        "tsconfig-paths-webpack-plugin": "3.3.0",
-        "typescript": "^4.6.0",
-        "webpack": "^5.11.1",
-        "webpack-bundle-analyzer": "^4.4.0",
-        "webpack-cli": "^4.3.1",
-        "webpack-merge": "^5.7.3"
+        "@types/node": "^20.12.5",
+        "@types/react": "^18.2.74",
+        "@types/react-dom": "^18.2.24",
+        "@typescript-eslint/eslint-plugin": "^7.5.0",
+        "@typescript-eslint/parser": "^7.5.0",
+        "@vitejs/plugin-react": "^4.2.1",
+        "cross-env": "^7.0.3",
+        "eslint": "^8.0.0",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-prettier": "^5.1.3",
+        "eslint-plugin-react": "^7.34.1",
+        "prettier": "^3.2.5",
+        "rollup-plugin-visualizer": "^5.12.0",
+        "typescript": "^5.4.4",
+        "typescript-eslint": "^7.5.0",
+        "vite": "^5.2.8",
+        "vite-plugin-circular-dependency": "^0.4.1",
+        "vite-tsconfig-paths": "^4.3.2"
     }
 }
diff --git a/src/ThemeContainer.tsx b/src/ThemeContainer.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useMemo } from 'react';
-import { ThemeProvider } from 'react-jss';
+import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
 import { useSettings } from 'hooks/useSettings';
 import { theme as themeLight } from './theme/light';
 import { theme as themeDark } from './theme/dark';
@@ -8,8 +8,12 @@ const themeMap = {
     light: themeLight,
     dark: themeDark
 };
-export const ThemeContainer: FC = ({ children }) => {
+export const ThemeContainer: FC<{ children?: React.ReactNode }> = ({
+    children
+}) => {
     const [{ theme: themeKey }] = useSettings();
     const theme = useMemo(() => themeMap[themeKey], [themeKey]);
-    return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+    return (
+        <EmotionThemeProvider theme={theme}>{children}</EmotionThemeProvider>
+    );
 };
diff --git a/src/api/analytics.ts b/src/api/analytics.ts
@@ -1,6 +1,8 @@
+import { isExtension } from 'utils';
+import secrets from '../secrets.json';
+
 const GA_ENDPOINT = 'https://www.google-analytics.com/mp/collect';
 const GA_DEBUG_ENDPOINT = 'https://www.google-analytics.com/debug/mp/collect';
-import secrets from '../secrets.json';
 // File taken from https://github.com/GoogleChrome/chrome-extensions-samples/blob/main/functional-samples/tutorial.google-analytics/scripts/google-analytics.js
 // Get via https://developers.google.com/analytics/devguides/collection/protocol/ga4/sending-events?client_type=gtag#recommended_parameters_for_reports
 const MEASUREMENT_ID = secrets.measurement_id;
@@ -33,7 +35,7 @@ class Analytics {
                 await chrome.storage.local.set({ firstTime: false });
                 this.fireEvent('first_open');
             }
-        } catch (e) {
+        } catch (_e) {
             // pass
         }
     }
@@ -157,4 +159,7 @@ class Analytics {
     }
 }
 
-export default new Analytics(false, process.env.NODE_ENV === 'development'); //process.env.NODE_ENV === 'development');
+export default new Analytics(
+    false,
+    import.meta.env.MODE === 'development' || !isExtension()
+); //process.env.NODE_ENV === 'development');