Merge pull request #10 from RamssCR/fix/metrics-issues

Fix/metrics issues

Author: RamssCR

CHANGELOG.md

@@ -0,0 +1,15 @@
+# Changelog
+
+All notable updates of this library will be documented on this file.
+
+This format is based on [Keep a Changelog](https://keepachangelog.com/1.0.0/)
+and this project follows [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.0.2] - 2025-08-12
+### Fixed
+- Corrected duplicated metrics on `getAccessibility`.
+- Fixed off-screen `web-vitals` changes.
+
+## [1.0.1] - 2025-08-11
+### Fixed
+- Removed incorrect `Debugger` props on the `README` file.

package.json

@@ -3,7 +3,7 @@
   "description": "A tool for measuring and optimizing web vitals in React applications, including Lighthouse measurements like Accessibility, Best Practices and SEO.",
   "module": "dist/vitals-tool.js",
   "types": "dist/index.d.ts",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "type": "module",
   "exports": {
     ".": {

src/components/debugger/DebugButton.tsx

@@ -11,7 +11,7 @@ export const DebugButton = ({ ...props }: ComponentProps<typeof Button>) => (
   <Button
     variant="none"
     size="icon"
-    className="tw:rounded-full tw:border-2 tw:border-muted/90 tw:size-12 tw:p-3 tw:bg-tool-bg tw:shadow tw:absolute tw:bottom-4 tw:right-4 tw:z-1000"
+    className="tw:rounded-full tw:border-2 tw:border-muted/90 tw:size-12 tw:p-3 tw:bg-tool-bg tw:shadow tw:fixed tw:bottom-4 tw:right-4 tw:z-1000"
     aria-label="Debug Button"
     {...props}
   >

src/helpers/getAccessibility.ts

@@ -27,22 +27,21 @@ export const getAccessibility = async (): Promise<Accessibility> => {
     }
   })
 
-  const total = result.violations.length + result.passes.length
-  const score = total === 0
-    ? 100
-    : Math.round((result.passes.length / total) * 100)
-
-  const details = result.violations.map((violation) => ({
-    label: violation.id,
-    value: 0
-  }))
+  const filteredResults = new Map<string, number>()
+  result.violations.forEach(violation => filteredResults.set(violation.id, 0))
 
-  result.passes.forEach((pass) => {
-    details.push({
-      label: pass.id,
-      value: 1
-    })
+  result.passes.forEach(pass => {
+    if (!filteredResults.has(pass.id)) {
+      filteredResults.set(pass.id, 1)
+    }
   })
+  
+  const details = Array.from(filteredResults, ([label, value]) => ({ label, value }))
+  const score = details.length === 0
+    ? 100
+    : Math.round(
+      (details.filter(detail => detail.value === 1).length / details.length) * 100
+    )
 
   return {
     score,

src/helpers/getPerformance.ts

@@ -29,11 +29,11 @@ export const normalizeScore = (name: string, value: number): number => {
 }
 
 const listeners = {
-  LCP: onLCP,
-  CLS: onCLS,
-  INP: onINP,
-  FCP: onFCP,
-  TTFB: onTTFB,
+  LCP: (cb: (metric: Metric) => void) => onLCP(cb, { reportAllChanges: true }),
+  CLS: (cb: (metric: Metric) => void) => onCLS(cb, { reportAllChanges: true }),
+  INP: (cb: (metric: Metric) => void) => onINP(cb, { reportAllChanges: true }),
+  FCP: (cb: (metric: Metric) => void) => onFCP(cb, { reportAllChanges: true }),
+  TTFB: (cb: (metric: Metric) => void) => onTTFB(cb, { reportAllChanges: true }),
 }
 
 /**