fix: filter duplicated cache data and fix layouts

koba04 · Aug 9, 2021 · 501a389 · 501a389
1 parent 70e5a14
commit 501a389
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 22 deletions.
diff --git a/packages/swr-devtools-extensions/src/runtime.ts b/packages/swr-devtools-extensions/src/runtime.ts
@@ -1,16 +1,26 @@
 import type { Cache } from "swr";
 
+const proccessedCacheData = new Set<Cache>();
+
 // @ts-expect-error
 window.__SWR_DEVTOOLS__ = {
   launch(cache: Cache) {
     cache.subscribe(() => {
-      const cacheData = cache.keys().reduce(
-        (acc, key) => ({
-          ...acc,
-          [key]: cache.get(key),
-        }),
-        {}
-      );
+      const cacheData = cache
+        .keys()
+        .map((key) => [key, cache.get(key)])
+        .filter(([_, value]) => !proccessedCacheData.has(value))
+        .map(([key, value]) => {
+          proccessedCacheData.add(value);
+          return { [key]: value };
+        })
+        .reduce(
+          (acc, data) => ({
+            ...acc,
+            ...data,
+          }),
+          {}
+        );
       // console.log(data);
       window.postMessage({ cacheData }, "*");
     });

diff --git a/packages/swr-devtools/src/cache.ts b/packages/swr-devtools/src/cache.ts
@@ -16,8 +16,11 @@ const formatTime = (date: Date) =>
     date.getMinutes()
   ).padStart(2, "0")}:${String(date.getSeconds()).padStart(2, "0")}`;
 
-const cacheLogsStore = new Set<any>();
-const latestCacheStore = new Map<any, any>();
+const cacheHistory = new Map<string, any>();
+const proccessedCacheData = new Map<any, any>();
+
+const getCacheHistoryKey = (key: string, timestamp: Date) =>
+  `${key}__${timestamp.getTime()}`;
 
 let id = 1;
 
@@ -30,15 +33,11 @@ const retrieveCache = (
     .filter((key) => !key.startsWith("validating@") && !key.startsWith("err@"))
     .map((key) => {
       const data = cache.get(key);
-      const devToolsCache = latestCacheStore.get(data);
-      if (devToolsCache) {
-        return devToolsCache;
-      }
 
       const isValidating = cache.get(`validating@${key}`);
       const error = cache.get(`err@${key}`);
       ++id;
-      const cacheData = {
+      const cacheData = proccessedCacheData.get(data) || {
         id,
         key,
         data,
@@ -47,11 +46,14 @@ const retrieveCache = (
         timestamp: date,
         timestampString: formatTime(date),
       };
-      latestCacheStore.set(data, cacheData);
-      cacheLogsStore.add(cacheData);
+      proccessedCacheData.set(data, cacheData);
+      const cacheHistoryKey = getCacheHistoryKey(key, cacheData.timestamp);
+      if (!cacheHistory.get(cacheHistoryKey)) {
+        cacheHistory.set(cacheHistoryKey, cacheData);
+      }
       return cacheData;
     });
-  return [retrieveCacheData, Array.from(cacheLogsStore).reverse()];
+  return [retrieveCacheData, Array.from(cacheHistory.values()).reverse()];
 };
 
 export const useSWRCache = (

diff --git a/packages/swr-devtools/src/components/Panel.tsx b/packages/swr-devtools/src/components/Panel.tsx
@@ -72,12 +72,10 @@ const PanelWrapper = styled.section`
 
 const PanelItem = styled.div`
   flex: 1;
+  overflow: scroll;
 `;
 
 const CacheItems = styled.ul`
-  overflow: scroll;
-  overflow-y: scroll;
-  height: 100%;
   margin: 0;
   list-style: none;
   padding-inline-start: 0;

diff --git a/packages/swr-devtools/src/components/SWRDevTool.tsx b/packages/swr-devtools/src/components/SWRDevTool.tsx
@@ -57,7 +57,8 @@ const DevToolWindow = styled.div`
 
 const Header = styled.header`
   display: flex;
-  gap: 10;
+  /* TODO: stop using the fixed size */
+  height: 40px;
 `;
 
 const HeaderTitle = styled.h3`
@@ -68,6 +69,6 @@ const HeaderTitle = styled.h3`
 
 const PanelWrapper = styled.div`
   position: relative;
-  flex-grow: 1;
+  height: calc(100% - 40px);
   width: 100%;
 `;