igorfv · igorfv · Jun 2, 2022 · Jun 2, 2022 · Jun 3, 2022
diff --git a/.editorconfig b/.editorconfig
diff --git a/.eslintrc b/.eslintrc
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,2 @@
-node_modules/
-dist/
-.DS_Store
-extension.zip
+node_modules
+dist
diff --git a/README.md b/README.md
@@ -1,27 +1,14 @@
-# Apollo Tracing Developer Tools Extension
+# GraphQL Monitor with Tracing
 
-This is a chrome dev tool extension that I wrote in a couple of hours to help me visualize the GraphQL tracing data from my requests.
-It probably have some bugs but I'll fix them as soon as I can.
+![Interface Example](docs/interface-example.png)
 
-Also, this project was quickly done while I was learning how to create an extension, so as you can see it's not very organized. That means that before adding any new feature I need to organize it and create a build structure. Please feel free to contribute if you think you can help.
+## How to run
 
-![](docs/interface-example.png)
+### `npm start`
 
-## Todo list
+Runs the app in the development mode. Once the app is running it will update the `dist` on every change.  
+Open the [chrome://extensions](chrome://extensions) and click `load unpacked` to add the local extension, once the prompt opens select the `dist` folder.
 
-### Basic structure
-- [x] Pack extension on prod build
-- [x] Add webpack (or other tool)
-- [x] Uglify
-- [x] Add babel and JSX support
-- [x] Add SASS/Styled components
-- [ ] Add Jest and write unit tests
-- [x] Split component files
-- [x] Create a better layout
-- [ ] Find a designer to create an actual good layout
+### `npm run build`
 
-### Features
-- [ ] Save request for later
-- [ ] Compare requests
-- [x] Hide items slammer than 1ms
-- [x] Display requests made before extension opens
+Builds the app for production to the `dist` folder.  
diff --git a/assets/icon-128.png b/assets/icon-128.png
diff --git a/assets/icon-16.png b/assets/icon-16.png
diff --git a/assets/icon-48.png b/assets/icon-48.png
diff --git a/babel.config.json b/babel.config.json
diff --git a/devtools/global.css b/devtools/global.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/devtools/index.html b/devtools/index.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script type="module" src="./index.tsx"></script>
+  </head>
+</html>
diff --git a/devtools/index.tsx b/devtools/index.tsx
@@ -0,0 +1,9 @@
+chrome.devtools.panels.create(
+  "Apollo Tracing",
+  "assets/icon-16.png",
+  "devtools/panel.html",
+  (panel) => {
+    if (chrome.runtime.lastError) console.error(chrome.runtime.lastError);
+    console.log("panel", panel);
+  }
+);
diff --git a/devtools/panel.html b/devtools/panel.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>GraphQL Monitor</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./panel.tsx"></script>
+  </body>
+</html>
diff --git a/devtools/panel.tsx b/devtools/panel.tsx
@@ -0,0 +1,16 @@
+import { render, MountableElement } from "solid-js/web";
+import { onCleanup, createSignal } from "solid-js";
+
+import "./global.css";
+
+const CountingComponent = () => {
+  const [count, setCount] = createSignal(0);
+  const interval = setInterval(() => setCount((count) => count + 1), 1000);
+  onCleanup(() => clearInterval(interval));
+  return <div class="text-gray-500">Count value is {count()}</div>;
+};
+
+render(
+  () => <CountingComponent />,
+  document.getElementById("root") as MountableElement
+);