add memory tracker every 250ms (#206)

We can change this to requestIdleCallback later and do it in an infinite
recursive call

Any questions should be directed to @vujita

---

Replace any ":question:" below with information about your pull request.

## Pull Request Details

Provide details about your pull request and what it adds, fixes, or
changes.

:question:

## Breaking Changes

Describe what features are broken by this pull request and why, if any.

:question:

## Issues Fixed

Enter the issue numbers resolved by this pull request below, if any.

1. :question:

## Other Relevant Information

Provide any other important details below.

:question:

apps/newnew-performancetool/src/components/MemoryStats.tsx

@@ -0,0 +1,3 @@
+import { memoryStore } from "../stores/memory";
+
+console.log("memoryStats", memoryStore);

apps/newnew-performancetool/src/content.tsx

@@ -4,3 +4,9 @@ console.log("content script loaded", webVitalsStore);
 webVitalsStore.subscribe(() => {
   console.log("web-vitals update", webVitalsStore.getState());
 });
+// Always show for now,
+const div = document.createElement("div");
+
+div.id = "newnew-performancetool-memorystat";
+document.body.append(div);
+console.log(div);

apps/newnew-performancetool/src/stores/memory.ts

@@ -0,0 +1,57 @@
+import { useStore } from "zustand";
+import { createStore } from "zustand/vanilla";
+
+export interface MemoryState {
+  /** The maximum size of the heap, in bytes, that is available to the context. */
+  jsHeapSizeLimit: number;
+  /** The total allocated heap size, in bytes. */
+  totalJSHeapSize: number;
+  /** The currently active segment of JS heap, in bytes. */
+  usedJSHeapSize: number;
+}
+declare global {
+  interface Performance {
+    memory?: MemoryState;
+  }
+}
+
+export type MemorySnapshot = MemoryState & {
+  timestamp: number;
+};
+export const memoryStore = createStore<{
+  memory: MemorySnapshot[];
+}>((setState, getState) => {
+  const MEMORY_SIZE = 100;
+  const INTTERVAL_IN_MS = 200;
+  setInterval(() => {
+    const currentMemory = getState();
+    const memory = window.performance.memory;
+    if (!memory) {
+      return;
+    }
+    console.log({
+      currentMemory,
+      memory,
+    });
+    const newMemory: MemorySnapshot[] = [
+      ...currentMemory.memory,
+      {
+        jsHeapSizeLimit: memory.jsHeapSizeLimit,
+        timestamp: performance.now(),
+        totalJSHeapSize: memory.totalJSHeapSize,
+        usedJSHeapSize: memory.usedJSHeapSize,
+      },
+    ];
+    if (newMemory.length > MEMORY_SIZE) {
+      newMemory.shift();
+    }
+    setState({
+      memory: newMemory,
+    });
+  }, INTTERVAL_IN_MS);
+  return {
+    memory: [],
+  };
+});
+
+export const useMemoryStates = useStore(memoryStore, (s) => s.memory);