v0.1.0

.eslintrc.js

@@ -8,9 +8,6 @@ module.exports = {
     'import/no-namespace': 0,
     'import/no-extraneous-dependencies': 0,
     // The most trash rule in existence
-    'import/no-unresolved': 0,
-    'react/jsx-uses-react': 0,
-    'react/react-in-jsx-scope': 0,
   },
   env: {
     browser: true,

CHANGELOG.md

@@ -1,3 +1,11 @@
+## 0.1.0 - Refactor
+
+- Rework internal logic, bump to `0.1.0`
+- Fix persited flags breaking after cache reset
+- Add error spash screen when api fails on load
+- Add retry button on-load
+- Rename `persisted` to `in-memory` or `filesystem`
+
 ## 0.0.30 - Turn off cors mode
 
 - Turn off cors mode fix issue with multi headers

e2e-backend.mjs

@@ -2,6 +2,9 @@
 import http from 'http';
 import tinyServer from './src/utils/tiny-server.mjs';
 import jamboxServer from './src/server/index.mjs';
+import { enable as enableDiagnostics } from './src/diagnostics.js';
+
+enableDiagnostics();
 
 const launch = async () => {
   await tinyServer(7777);

ext/Api.js

@@ -1,5 +1,6 @@
 // @ts-check
 import Observable from 'zen-observable';
+import { debounce } from './nodash';
 
 /**
  * @typedef {import('./types').Subscribtion} Subscribtion
@@ -36,9 +37,13 @@ export default class API {
     this.socketURL = new URL(`ws://${host}:${port}`);
     this.apiURL = new URL(`http://${host}:${port}/api`);
     this.callbacks = new Set();
+    this._listen = debounce(this._listen.bind(this), 10);
     this._listen();
   }
 
+  /**
+   * @private
+   */
   _listen() {
     if (this.#ws && this.#ws.readyState <= 1) {
       return;
@@ -48,12 +53,10 @@ export default class API {
       this.#sub.unsubscribe();
     }
 
-    const boundListen = this._listen.bind(this);
-
     try {
       this.#ws = new WebSocket(this.socketURL.toString());
       this.#ws.onerror = () => {
-        setTimeout(boundListen, WEBSOCKET_RETRY_TIMER);
+        setTimeout(this._listen, WEBSOCKET_RETRY_TIMER);
       };
       this.#ws.onopen = () => {
         this.observable = new Observable((observer) => {
@@ -78,11 +81,10 @@ export default class API {
         );
       };
       this.#ws.addEventListener('close', () => {
-        setTimeout(boundListen, WEBSOCKET_RETRY_TIMER);
+        setTimeout(this._listen, WEBSOCKET_RETRY_TIMER);
       });
     } catch (e) {
-      console.error(e.name, e);
-      setTimeout(boundListen, WEBSOCKET_RETRY_TIMER);
+      setTimeout(this._listen, WEBSOCKET_RETRY_TIMER);
     }
   }
 

ext/App.svelte

@@ -20,22 +20,48 @@
   let cleanup;
   let url = '/';
 
-  api.getConfig().then((payload) => {
-    store.update((state) => reducer(state, { type: 'config', payload }));
-  });
-  api.getCache().then((payload) => {
-    store.update((state) => reducer(state, { type: 'cache.load', payload }));
-  });
+  const loadCache = async () => {
+    try {
+      const payload = await api.getCache();
+      store.update((state) => reducer(state, { type: 'cache.load', payload }));
+    } catch (e) {
+      store.update((state) =>
+        reducer(state, { type: 'error', payload: [`${e.message} ${e.stack}`] })
+      );
+    }
+  };
+
+  const loadConfig = async () => {
+    try {
+      const payload = await api.getConfig();
+      store.update((state) =>
+        reducer(state, { type: 'config.update', payload })
+      );
+    } catch (e) {
+      store.update((state) =>
+        reducer(state, { type: 'error', payload: [`${e.message} ${e.stack}`] })
+      );
+    }
+  };
+
+  loadConfig();
+  loadCache();
 
   // Refresh when the page reloads
   chrome.webNavigation?.onBeforeNavigate.addListener((details) => {
-    if (details.tabId === chrome.devtools.inspectedWindow.tabId) {
+    if (
+      details.frameId === 0 &&
+      details.tabId === chrome.devtools.inspectedWindow.tabId
+    ) {
       store.update((state) => reducer(state, { type: 'refresh' }));
     }
   });
 
   chrome.webNavigation?.onCompleted.addListener((details) => {
-    if (details.tabId === chrome.devtools.inspectedWindow.tabId) {
+    if (
+      details.frameId === 0 &&
+      details.tabId === chrome.devtools.inspectedWindow.tabId
+    ) {
       store.update((state) => reducer(state, { type: 'complete' }));
     }
   });
@@ -45,6 +71,10 @@
     pauseChecked = $store.config.pause;
 
     cleanup = api.subscribe((action) => {
+      if (action.type === 'cache.reset') {
+        loadCache();
+        return;
+      }
       if (action.type === 'config') {
         chrome.notifications?.create('', {
           title: 'Jambox Config Updated!',
@@ -61,54 +91,76 @@
 </script>
 
 <main class="Container">
-  <Router {url} {history}>
+  {#if $store.errors.length}
     <div class="Box">
-      <div class="TopBar">
-        <Checkbox
-          checked={$store.config.paused}
-          inline
-          id="pause-proxy"
-          name="pause-proxy"
-          label="Pause Proxy"
-          onClick={() => {
-            api.pause(!$store.config.paused);
-          }}
-        />
-        <Checkbox
-          inline
-          id="block-network"
-          name="block-network"
-          checked={$store.config.blockNetworkRequests}
-          label="Block Network"
-          onClick={() => {
-            api.blockNetworkRequests(!$store.config.blockNetworkRequests);
-          }}
-        />
-        <Link to="/" data-cy-id="waterfall-link" class="SideNav-Link"
-          >Waterfall</Link
-        >
-        <Link data-cy-id="cache-link" to="/cache" class="SideNav-Link"
-          >Cache</Link
+      <button
+        on:click={() => {
+          loadConfig();
+          loadCache();
+        }}>Retry</button
+      >
+      <div>
+        <span
+          >Could not establish initial connection with the jambox api. You could
+          attempt to manually try again.</span
         >
-        <input
-          type="search"
-          bind:value={search}
-          autocomplete
-          placeholder="search"
-        />
+        {#each $store.errors as err}
+          <div class="Error">
+            <pre>{err}</pre>
+          </div>
+        {/each}
       </div>
-      <Route path="/">
-        <Waterfall {history} {search} />
-      </Route>
-      <Route path="/cache">
-        <Cache {search} {api} />
-      </Route>
-      <Route path="/cache/entry/:id" let:params>
-        <CacheEntry id={params.id} {api} {history} />
-      </Route>
-      <Route path="/request/:id" component={RequestInfo} />
     </div>
-  </Router>
+  {:else}
+    <Router {url} {history}>
+      <div class="Box">
+        <div class="TopBar">
+          <Checkbox
+            checked={$store.config.paused}
+            inline
+            id="pause-proxy"
+            name="pause-proxy"
+            label="Pause Proxy"
+            onClick={() => {
+              api.pause(!$store.config.paused);
+            }}
+          />
+          <Checkbox
+            inline
+            id="block-network"
+            name="block-network"
+            checked={$store.config.blockNetworkRequests}
+            label="Block Network"
+            onClick={() => {
+              api.blockNetworkRequests(!$store.config.blockNetworkRequests);
+            }}
+          />
+          <Link to="/" data-cy-id="waterfall-link" class="SideNav-Link"
+            >Waterfall</Link
+          >
+          <Link data-cy-id="cache-link" to="/cache" class="SideNav-Link"
+            >Cache</Link
+          >
+          <input
+            type="search"
+            bind:value={search}
+            autocomplete
+            placeholder="search"
+          />
+        </div>
+        <Route path="/">
+          <Waterfall {history} {search} />
+        </Route>
+        <Route path="/cache">
+          <Cache {search} {api} />
+        </Route>
+        <Route path="/cache/entry/:id" let:params>
+          <CacheEntry id={params.id} {api} {history} />
+        </Route>
+        <Route path="/request/:id" component={RequestInfo} />
+      </div>
+    </Router>
+  {/if}
 </main>
 
 <style>
@@ -199,4 +251,7 @@
     border-color: var(--stripeA);
     padding-bottom: 10px;
   }
+  .Error {
+    color: var(--red);
+  }
 </style>

ext/Cache/Cell.svelte

@@ -4,7 +4,7 @@
 
   export let row;
   export let col;
-  export let onSelect;
+  export let onSelect = () => {};
 
   const shortenKeys = ['host', 'path'];
   const shorten = (str) => {
@@ -37,7 +37,7 @@
     />
   {:else if col.key === 'persisted'}
     <span data-cy-id="cache-cell-persisted-{value}-{row.id}"
-      >{value ? 'yes' : 'no'}</span
+      >{value ? 'filesystem' : 'in-memory'}</span
     >
   {:else}
     <span data-cy-id="cache-cell-{cyID}">{value}</span>

ext/Cache/index.svelte

@@ -57,14 +57,11 @@
       value: () => true,
       renderComponent: {
         component: Cell,
-        props: {
-          onSelect,
-        },
       },
     },
     {
       key: 'persisted',
-      title: 'Persisted',
+      title: 'Cache',
       value: () => true,
       renderComponent: {
         component: Cell,
@@ -76,9 +73,6 @@
       value: (v) => v.host,
       renderComponent: {
         component: Cell,
-        props: {
-          onSelect,
-        },
       },
     },
     {
@@ -87,9 +81,6 @@
       value: (v) => v.pathname,
       renderComponent: {
         component: Cell,
-        props: {
-          onSelect,
-        },
       },
     },
     {
@@ -98,9 +89,6 @@
       value: (v) => v.statusCode,
       renderComponent: {
         component: Cell,
-        props: {
-          onSelect,
-        },
       },
     },
   ];
@@ -126,7 +114,7 @@
       on:click={() => {
         api.persist(checked);
         checked = [];
-      }}>Persist Selected</button
+      }}>Write to Filesystem</button
     >
   </div>
   <SvelteTable columns={COLUMNS} rows={data} classNameRow="Row">
@@ -149,7 +137,7 @@
         />
       </th>
       <th>Edit</th>
-      <th>Persisted</th>
+      <th>Cache</th>
       <th>Host</th>
       <th>Path</th>
       <th>Status</th>

ext/CacheEntry.svelte

@@ -11,9 +11,14 @@
   let currentTab = 'details';
 
   const cacheEntry = $store.cache[id];
-  let response, request, details;
+  let response, request, details, previousPage;
 
   $: {
+    // there is no history.back in svelte-routing so we always push a new path
+    // by using Link. This is fine though since there is no back/forward buttons
+    // inside an extension either way
+    const search = new URLSearchParams(history.location.search);
+    previousPage = search.get('from') || '/cache';
     response = cacheEntry.response;
     request = cacheEntry.request;
     details = without(['request', 'response'], cacheEntry);
@@ -30,7 +35,9 @@
 </script>
 
 <div data-cy-id="cache-detail" class="Wrapper">
-  <Link data-cy-id="back-to-cache" to="/cache">Back</Link>
+  <Link data-cy-id="back-to-cache" to={previousPage}
+    >Back to {previousPage}</Link
+  >
   <div class="Box">
     <button
       data-cy-id="select-details-tab"
@@ -96,7 +103,6 @@
   }
   .Request {
     margin-bottom: 20px;
-    height: 50%;
   }
   .Box {
     margin: 10px 0;