feat: debug stats (#759)

Author: pzanella

bun.lock

@@ -7,28 +7,35 @@
 	"repository": "github:moq-dev/moq",
 	"exports": {
 		"./publish/element": "./src/Components/publish/element.tsx",
-		"./watch/element": "./src/Components/watch/element.tsx"
+		"./watch/element": "./src/Components/watch/element.tsx",
+		"./stats": "./src/Components/stats/index.ts"
 	},
 	"sideEffects": [
 		"./src/Components/publish/element.tsx",
-		"./src/Components/watch/element.tsx"
+		"./src/Components/watch/element.tsx",
+		"./src/Components/stats/element.ts"
 	],
 	"scripts": {
 		"build": "bun run clean && rollup -c && bun ../scripts/package.ts",
 		"check": "tsc --noEmit",
 		"clean": "rimraf dist",
+		"fix": "biome check src --fix",
+		"test": "vitest",
 		"release": "bun ../scripts/release.ts"
 	},
 	"peerDependencies": {
-		"@moq/hang": "workspace:^0.1.0"
+		"@moq/hang": "workspace:^0.1.0",
+		"@moq/signals": "workspace:^0.1.0"
 	},
 	"devDependencies": {
 		"@rollup/plugin-node-resolve": "^16.0.3",
+		"happy-dom": "^13.3.5",
 		"rimraf": "^6.0.1",
 		"rollup": "^4.53.3",
 		"rollup-plugin-esbuild": "^6.2.1",
 		"solid-element": "^1.9.1",
 		"solid-js": "^1.9.10",
-		"unplugin-solid": "^1.0.0"
+		"unplugin-solid": "^1.0.0",
+		"vitest": "^3.2.4"
 	}
 }

deno.lock

@@ -1,4 +1,3 @@
-// rollup.config.mjs / rollup.config.js
 import { readFileSync } from "node:fs";
 import nodeResolve from "@rollup/plugin-node-resolve";
 import esbuild from "rollup-plugin-esbuild";

js/hang-ui/package.json

@@ -0,0 +1,19 @@
+# Stats Component
+
+Real-time statistics display for monitoring media streaming performance (network, video, audio, buffer).
+
+## Usage
+
+```tsx
+<Stats 
+  context={WatchUIContext}
+  getElement={(ctx) => ctx?.hangWatch()}
+/>
+```
+
+## Props
+
+- **context** - SolidJS context to read from
+- **getElement** - Function that extracts the media element from context
+
+The component displays four metrics: network, video, audio, and buffer statistics.

js/hang-ui/rollup.config.mjs

@@ -0,0 +1,28 @@
+import { type Context, Show, useContext } from "solid-js";
+import { StatsPanel } from "./components/StatsPanel";
+import styles from "./style.css?inline";
+import type { ProviderProps } from "./types";
+
+interface StatsProps<T = unknown> {
+	context: Context<T>;
+	getElement: (ctx: T) => ProviderProps | undefined;
+}
+
+/**
+ * Stats component for displaying real-time media streaming metrics
+ * Accepts a generic context and a function to extract the media element
+ */
+export const Stats = <T = unknown>(props: StatsProps<T>) => {
+	const contextValue = useContext(props.context);
+
+	return (
+		<Show when={props.getElement(contextValue)}>
+			{(_element) => (
+				<div class="stats">
+					<style>{styles}</style>
+					<StatsPanel audio={_element().audio} video={_element().video} />
+				</div>
+			)}
+		</Show>
+	);
+};