rearchitect devtools

.eslintrc

@@ -0,0 +1,97 @@
+{
+  "env": {
+    "node": true,
+    "browser": true,
+    "es6": true
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    },
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"]
+    },
+    "import/resolver": {
+      "node": true,
+      "typescript": {
+        "alwaysTryTypes": true,
+        "project": ["./tsconfig.json"]
+      }
+    }
+  },
+  "parser": "@typescript-eslint/parser",
+  "plugins": [
+    "react",
+    "@typescript-eslint",
+    "prettier",
+    "no-async-foreach"
+  ],
+  "extends": [
+    "eslint:recommended",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended",
+    "plugin:react-hooks/recommended"
+  ],
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "rules": {
+    "no-unused-expressions": [
+      "error",
+      {
+        "allowShortCircuit": true,
+        "enforceForJSX": true,
+        "allowTernary": true
+      }
+    ],
+    "no-async-foreach/no-async-foreach": 2,
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-explicit-any": 1,
+    "@typescript-eslint/no-inferrable-types": [
+      "warn",
+      {
+        "ignoreParameters": true
+      }
+    ],
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        "argsIgnorePattern": "^_"
+      }
+    ],
+    "no-console": ["warn"],
+    "no-restricted-imports": "off",
+    "react/react-in-jsx-scope": "off",
+    "react/prop-types": "off",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "import/order": [
+      "error",
+      {
+        "groups": [
+          "builtin",
+          "external",
+          "internal",
+          "parent",
+          "sibling",
+          "index",
+          "unknown"
+        ]
+      }
+    ],
+    "@typescript-eslint/prefer-ts-expect-error": "error"
+  }
+}

devtools.d.ts

@@ -7,7 +7,7 @@ import {
   FetchVisualChangesetPayload,
   TransformCopyPayload,
   UpdateVisualChangesetPayload,
-} from "./src/background";
+} from "@/background/visualEditorHandlers";
 
 declare global {
   interface Window {
@@ -152,6 +152,16 @@ type TransformCopyResponseMessage = {
   data: TransformCopyPayload;
 };
 
+type UpdateTabState = {
+  append?: boolean;
+  type: "UPDATE_TAB_STATE";
+  data: {
+    property: string;
+    value: unknown;
+    tabId: number;
+  };
+};
+
 // Messages sent to content script
 export type Message =
   | RequestRefreshMessage
@@ -165,7 +175,8 @@ export type Message =
   | UpdateVisualChangesetRequestMessage
   | UpdateVisualChangesetResponseMessage
   | TransformCopyRequestMessage
-  | TransformCopyResponseMessage;
+  | TransformCopyResponseMessage
+  | UpdateTabState;
 
 export type BGLoadVisualChangsetMessage = {
   type: "BG_LOAD_VISUAL_CHANGESET";
@@ -191,8 +202,36 @@ export type BGTransformCopyMessage = {
   };
 };
 
+type SDKHealthCheckResult = {
+  canConnect: boolean;
+  hasPayload: boolean;
+  hasClientKey?: boolean;
+  errorMessage?: string;
+  version?: string;
+  sdkFound: boolean;
+  clientKey?: string;
+  isLoading?: boolean;
+  payload?: Record<string, any>;
+  devModeEnabled: boolean;
+  hasTrackingCallback?: boolean;
+  trackingCallbackParams?: string[];
+  hasDecryptionKey?: boolean;
+  payloadDecrypted?:boolean;
+  usingLogEvents?: boolean;
+  isRemoteEval?: boolean;
+  usingStickyBucketing?: boolean;
+  streaming?: boolean;
+  apiHost?: string;
+};
+
+type BGSetSDKUsageData = {
+  type: "GB_SDK_UPDATED";
+  data: SDKHealthCheckResult & { tabId?: number };
+};
+
 // Messages sent to background script
 export type BGMessage =
   | BGLoadVisualChangsetMessage
   | BGUpdateVisualChangsetMessage
-  | BGTransformCopyMessage;
+  | BGTransformCopyMessage
+  | BGSetSDKUsageData;

package.json

@@ -21,8 +21,12 @@
     "@emotion/styled": "^11.13.0",
     "@growthbook/growthbook": "^1.3.1",
     "@medv/finder": "^3.2.0",
+    "@phosphor-icons/react": "^2.1.7",
+    "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-form": "^0.1.1",
     "@radix-ui/react-tooltip": "^1.1.2",
+    "@radix-ui/themes": "^3.1.3",
     "clsx": "^2.1.1",
     "dom-mutator": "^0.7.0",
     "framer-motion": "^11.3.24",
@@ -36,19 +40,33 @@
     "react-icons": "^5.3.0",
     "react-syntax-highlighter": "^15.5.0",
     "react-textarea-autosize": "^8.5.3",
-    "style-to-object": "^1.0.6"
+    "style-to-object": "^1.0.6",
+    "swr": "^2.3.0",
+    "uniqid": "^5.4.0"
   },
   "devDependencies": {
     "@types/chrome": "^0.0.270",
+    "@types/eslint": "^8.4.5",
     "@types/jest": "^29.5.12",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "@types/react-syntax-highlighter": "^15.5.13",
+    "@types/uniqid": "^5.3.4",
+    "@typescript-eslint/eslint-plugin": "^8.22.0",
+    "@typescript-eslint/parser": "^8.22.0",
     "autoprefixer": "^10.4.20",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.2",
+    "eslint": "^8.20.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-import-resolver-typescript": "^3.5.1",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-no-async-foreach": "^0.1.1",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-react": "^7.30.1",
     "glob": "^11.0.0",
     "jest": "^29.7.0",
+    "mini-css-extract-plugin": "^2.9.2",
     "node-fetch": "^3.3.2",
     "postcss": "^8.4.41",
     "postcss-loader": "^8.1.1",
@@ -61,7 +79,6 @@
     "typescript": "^5.5.4",
     "url-loader": "^4.1.1",
     "webpack": "^5.97.1",
-    "webpack-cli": "^6.0.1",
-    "webpack-merge": "^6.0.1"
+    "webpack-cli": "^6.0.1"
   }
 }

public/devtools_panel.html

@@ -1,11 +1,12 @@
 <!DOCTYPE html>
-<html>
+<html style="background: #fff; position: relative; overflow-y: hidden; min-height: 100vh;">
   <head>
+    <meta charset="UTF-8">
     <title>GrowthBook DevTools</title>
+    <link rel="stylesheet" href="css/popup.css">
   </head>
-
-  <body>
+  <body style="overflow-y: hidden;">
     <div id="root"></div>
-    <script src="js/devtools_panel.js"></script>
+    <script src="js/popup.js"></script>
   </body>
 </html>

public/manifest.json

@@ -19,9 +19,9 @@
       "resources": [
         "js/devtools_embed_script.js",
         "js/visual_editor.js",
-        "js/logo192.png",
-        "js/create-api-key.png",
-        "options.html"
+        "js/logo128.png",
+        "js/logo128-connected.png",
+        "js/logo128-problem.png"
       ]
     }
   ],
@@ -35,9 +35,9 @@
   "host_permissions": ["<all_urls>"],
 
   "icons": {
-    "16": "logo192.png",
-    "48": "logo192.png",
-    "128": "logo192.png"
+    "16": "logo128.png",
+    "48": "logo128.png",
+    "128": "logo128.png"
   },
 
   "devtools_page": "devtools.html",

public/popup.html

@@ -1,10 +1,12 @@
 <!DOCTYPE html>
-<html>
-<head>
+<html style="background: #fff; position: relative; overflow-y: hidden; width: 700px; height: 550px;">
+  <head>
+    <meta charset="UTF-8">
     <title>GrowthBook DevTools</title>
-</head>
-<body>
-<div id="root"></div>
-<script src="js/popup.js"></script>
-</body>
+    <link rel="stylesheet" href="css/popup.css">
+  </head>
+  <body style="overflow-y: hidden;">
+    <div id="root"></div>
+    <script src="js/popup.js"></script>
+  </body>
 </html>