fix devtools and release 1.0.1 devtools version

Author: radubrehar

devtools/manifest.json

@@ -1,9 +1,9 @@
 {
   "manifest_version": 3,
   "name": "Infinite Table DevTools Extension",
-  "version": "1.0",
+  "version": "1.0.1",
   "description": "A Chrome extension for Infinite Table",
-  "permissions": ["activeTab", "tabs", "scripting", "storage"],
+  "permissions": ["tabs", "storage"],
   "devtools_page": "./src/index.html",
 
   "action": {

devtools/package.json

@@ -4,7 +4,7 @@
   "version": "1.0.0",
   "description": "A Chrome extension for Infinite Table",
   "scripts": {
-    "build": " vite build && zip -r devtools.zip dist",
+    "build": "rm -fr devtools.zip && vite build && zip -r devtools.zip dist",
     "watch": " vite build --watch",
     "lint": "eslint ."
   },

devtools/src/hooks/useOnPageStorageChange.ts

@@ -2,15 +2,27 @@ import { useCallback, useEffect, useState } from 'react';
 import { getPageUrlOfCurrentTab } from '../lib/getCurrentPageUrl';
 import { type PageData } from 'devtools-ui';
 
-import {
-  sendMessageToBackgroundScript,
-  sendMessageToHostPage,
-} from '../lib/messagingUtils';
+import { sendMessageToBackgroundScript } from '../lib/messagingUtils';
+
+const getEmptyPageData = (): PageData => ({
+  allLogs: [],
+  logsPerInstance: {},
+  instances: {},
+});
 
 export function useOnPageStorageChange<T>(
   storageArea: chrome.storage.SessionStorageArea,
 ) {
-  const [pageData, setPageData] = useState<PageData | null>(null);
+  const [pageData, doSetPageData] = useState<PageData | null>(null);
+  const setPageData = useCallback(
+    (pageData: PageData) => {
+      doSetPageData({
+        ...getEmptyPageData(),
+        ...pageData,
+      });
+    },
+    [doSetPageData],
+  );
 
   const getLogs = useCallback(
     (debugId?: string) => {

examples/src/pages/tests/table/props/data/huge-updates.page.tsx

@@ -80,6 +80,9 @@ const randomlyUpdateData = (
   }
   STARTED = true;
   setInterval(() => {
+    if (!STARTED) {
+      return;
+    }
     const numberOfRowsToUpdate = 2;
     const { renderStartIndex, renderEndIndex } = api.getVerticalRenderRange();
     const dataArray = dataSourceApi.getRowInfoArray();
@@ -93,7 +96,7 @@ const randomlyUpdateData = (
         updateRow(dataSourceApi, row);
       }
     }
-  }, 30);
+  }, 100);
 };
 
 const columns: InfiniteTablePropColumns<Developer> = {
@@ -140,9 +143,27 @@ const columns: InfiniteTablePropColumns<Developer> = {
 };
 
 export default () => {
+  const [api, setApi] = React.useState<InfiniteTableApi<Developer> | null>(
+    null,
+  );
+  const [dataSourceApi, setDataSourceApi] =
+    React.useState<DataSourceApi<Developer> | null>(null);
   return (
     <>
       <React.StrictMode>
+        <button
+          className="bg-blue-500 text-white p-2 rounded-md cursor-pointer"
+          onClick={() => {
+            STARTED = !STARTED;
+
+            console.log('STARTED', STARTED);
+            if (STARTED) {
+              randomlyUpdateData(api!, dataSourceApi!);
+            }
+          }}
+        >
+          Toggle updates
+        </button>
         <DataSource<Developer>
           data={dataSource}
           primaryKey="id"
@@ -153,12 +174,15 @@ export default () => {
           groupBy={[{ field: 'stack' }]}
         >
           <InfiniteTable<Developer>
+            debugId="huge-updates"
             domProps={{
               style: {
                 height: '100%',
               },
             }}
             onReady={({ api, dataSourceApi }) => {
+              setApi(api);
+              setDataSourceApi(dataSourceApi);
               randomlyUpdateData(api, dataSourceApi);
             }}
             columnDefaultWidth={100}