bump

aidenybai · Dec 16, 2024 · c0856f8 · c0856f8
1 parent 882c87e
commit c0856f8
Show file tree

Hide file tree

Showing 5 changed files with 128 additions and 762 deletions.
diff --git a/packages/scan/src/core/index.ts b/packages/scan/src/core/index.ts
@@ -31,6 +31,8 @@ import { type getSession } from './monitor/utils';
 // @ts-expect-error CSS import
 import styles from './web/assets/css/styles.css';
 
+let toolbarContainer: HTMLElement | null = null;
+
 export interface Options {
   /**
    * Enable/disable scanning
@@ -218,10 +220,19 @@ export const setOptions = (options: Options) => {
     instrumentation.isPaused.value = options.enabled === false;
   }
 
+  const previousOptions = ReactScanInternals.options.value;
+
   ReactScanInternals.options.value = {
     ...ReactScanInternals.options.value,
     ...options,
   };
+
+  if (previousOptions.showToolbar && !options.showToolbar) {
+    if (toolbarContainer) {
+      toolbarContainer.remove();
+      toolbarContainer = null;
+    }
+  }
 };
 
 export const getOptions = () => ReactScanInternals.options;
@@ -409,7 +420,7 @@ export const start = () => {
   ReactScanInternals.instrumentation = instrumentation;
 
   if (options.showToolbar) {
-    createToolbar(shadow);
+    toolbarContainer = createToolbar(shadow);
   }
 
   // Add this right after creating the container

diff --git a/packages/scan/src/core/web/assets/css/styles.tailwind.css b/packages/scan/src/core/web/assets/css/styles.tailwind.css
@@ -41,7 +41,6 @@ button {
   }
 }
 
-
 /* Default scrollbar styles for all elements in shadow DOM */
 :host *::-webkit-scrollbar {
   width: 6px;
@@ -114,10 +113,12 @@ button {
   inset: 0;
   transform: translateX(-100%);
   animation: shimmer 2s infinite;
-  background: linear-gradient(to right,
-      transparent,
-      rgba(142, 97, 227, 0.3),
-      transparent);
+  background: linear-gradient(
+    to right,
+    transparent,
+    rgba(142, 97, 227, 0.3),
+    transparent
+  );
 }
 
 @keyframes shimmer {
@@ -126,12 +127,12 @@ button {
   }
 }
 
-
 #react-scan-toolbar {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  z-index: 999999999;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, sans-serif;
+  z-index: 2147483651;
   text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
+  -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   backface-visibility: hidden;
 
@@ -197,7 +198,6 @@ button {
   @apply truncate;
 }
 
-
 .react-scan-section {
   @apply flex flex-col py-1;
   @apply py-2 px-4;
@@ -226,15 +226,15 @@ button {
 }
 
 .react-scan-string {
-  color: #9ECBFF;
+  color: #9ecbff;
 }
 
 .react-scan-number {
-  color: #79C7FF;
+  color: #79c7ff;
 }
 
 .react-scan-boolean {
-  color: #56B6C2;
+  color: #56b6c2;
 }
 
 .react-scan-input {
@@ -272,10 +272,9 @@ button {
     @apply origin-center;
     @apply transition-transform duration-150;
   }
-
 }
 
-.react-scan-expanded>.react-scan-arrow:before {
+.react-scan-expanded > .react-scan-arrow:before {
   transform: rotate(90deg);
 }
 
@@ -337,7 +336,7 @@ button {
 }
 
 #react-scan-toolbar button:focus-visible {
-  outline: 2px solid #0070F3;
+  outline: 2px solid #0070f3;
   outline-offset: -2px;
 }
 
@@ -362,7 +361,6 @@ button {
 #react-scan-toolbar::-webkit-scrollbar {
   width: 4px;
   height: 4px;
-
 }
 
 #react-scan-toolbar::-webkit-scrollbar-track {

diff --git a/packages/scan/src/core/web/components/widget/FpsMeter.tsx b/packages/scan/src/core/web/components/widget/FpsMeter.tsx
@@ -0,0 +1,41 @@
+import { useState, useEffect } from 'preact/hooks';
+import { getFPS } from '../../../instrumentation';
+import { cn } from '@web-utils/helpers';
+
+export const FpsMeter = () => {
+  const [fps, setFps] = useState(getFPS());
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setFps(getFPS());
+    }, 100);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  let textColor = 'text-white';
+  let bgColor = 'bg-neutral-700';
+
+  if (fps < 10) {
+    textColor = 'text-white';
+    bgColor = 'bg-red-500';
+  } else if (fps < 30) {
+    textColor = 'text-black';
+    bgColor = 'bg-yellow-300';
+  }
+
+  return (
+    <span
+      className={cn(
+        'flex gap-1 items-center ml-2 px-2 py-1 rounded-full text-xs font-mono',
+        bgColor,
+        textColor,
+        'whitespace-nowrap',
+      )}
+    >
+      {fps} <span className="text-[0.5rem]">FPS</span>
+    </span>
+  );
+};
+
+export default FpsMeter;
diff --git a/packages/scan/src/core/web/components/widget/toolbar.tsx b/packages/scan/src/core/web/components/widget/toolbar.tsx
@@ -1,9 +1,11 @@
-import { useCallback, useEffect, useMemo } from "preact/hooks";
-import { cn, readLocalStorage, saveLocalStorage } from "@web-utils/helpers";
-import { ReactScanInternals, setOptions, Store } from "../../../..";
-import { INSPECT_TOGGLE_ID } from "../../inspect-element/inspect-state-machine";
-import { getNearestFiberFromElement } from "../../inspect-element/utils";
-import { Icon } from "../icon";
+import { useCallback, useEffect, useMemo, useState } from 'preact/hooks';
+import { cn, readLocalStorage, saveLocalStorage } from '@web-utils/helpers';
+import { ReactScanInternals, setOptions, Store } from '../../../..';
+import { INSPECT_TOGGLE_ID } from '../../inspect-element/inspect-state-machine';
+import { getNearestFiberFromElement } from '../../inspect-element/utils';
+import { Icon } from '../icon';
+import { getFPS } from '../../../instrumentation';
+import { FpsMeter } from './FpsMeter';
 
 interface ToolbarProps {
   refPropContainer: preact.RefObject<HTMLDivElement>;
@@ -175,66 +177,73 @@ export const Toolbar = ({ refPropContainer }: ToolbarProps) => {
       </button>
       <button
         id="react-scan-power"
-        title={ReactScanInternals.instrumentation?.isPaused.value ? 'Start' : 'Stop'}
+        title={
+          ReactScanInternals.instrumentation?.isPaused.value ? 'Start' : 'Stop'
+        }
         onClick={onToggleActive}
         className={cn('flex items-center justify-center px-3', {
           'text-white': !ReactScanInternals.instrumentation?.isPaused.value,
           'text-[#999]': ReactScanInternals.instrumentation?.isPaused.value,
         })}
       >
-        <Icon name={`icon-${ReactScanInternals.instrumentation?.isPaused.value ? 'eye-off' : 'eye'}`} />
+        <Icon
+          name={`icon-${ReactScanInternals.instrumentation?.isPaused.value ? 'eye-off' : 'eye'}`}
+        />
       </button>
       <button
         id="react-scan-sound-toggle"
         onClick={onSoundToggle}
-        title={ReactScanInternals.options.value.playSound ? 'Sound On' : 'Sound Off'}
+        title={
+          ReactScanInternals.options.value.playSound ? 'Sound On' : 'Sound Off'
+        }
         className={cn('flex items-center justify-center px-3', {
           'text-white': ReactScanInternals.options.value.playSound,
           'text-[#999]': !ReactScanInternals.options.value.playSound,
         })}
       >
-        <Icon name={`icon-${ReactScanInternals.options.value.playSound ? 'volume-on' : 'volume-off'}`} />
+        <Icon
+          name={`icon-${ReactScanInternals.options.value.playSound ? 'volume-on' : 'volume-off'}`}
+        />
       </button>
 
-      {
-        isInspectFocused && (
-          <div
-            className={cn(
-              "flex items-stretch justify-between",
-              "ml-auto",
-              "border-l-1 border-white/10 text-[#999]",
-              "overflow-hidden",
-            )}
+      {isInspectFocused && (
+        <div
+          className={cn(
+            'flex items-stretch justify-between',
+            'ml-auto',
+            'border-l-1 border-white/10 text-[#999]',
+            'overflow-hidden',
+          )}
+        >
+          <button
+            id="react-scan-previous-focus"
+            title="Previous element"
+            onClick={onPreviousFocus}
+            className="flex items-center justify-center px-3"
           >
-            <button
-              id="react-scan-previous-focus"
-              title="Previous element"
-              onClick={onPreviousFocus}
-              className="flex items-center justify-center px-3"
-            >
-              <Icon name="icon-previous" />
-            </button>
-            <button
-              id="react-scan-next-focus"
-              title="Next element"
-              onClick={onNextFocus}
-              className="flex items-center justify-center px-3"
-            >
-              <Icon name="icon-next" />
-            </button>
-          </div>
-        )
-      }
-      <span
+            <Icon name="icon-previous" />
+          </button>
+          <button
+            id="react-scan-next-focus"
+            title="Next element"
+            onClick={onNextFocus}
+            className="flex items-center justify-center px-3"
+          >
+            <Icon name="icon-next" />
+          </button>
+        </div>
+      )}
+      <div
         className={cn(
-          "flex items-center whitespace-nowrap px-3 text-sm text-white",
+          'flex items-center justify-center whitespace-nowrap px-3 text-sm text-white',
           {
             'ml-auto': !isInspectFocused,
-          }
+          },
         )}
       >
-        react-scan
-      </span>
+        <div>react-scan</div>
+        <FpsMeter />
+      </div>
     </div>
   );
 };