@capsuletech/web-profiler 0.1.0

package/README.md

@@ -0,0 +1,70 @@
+# @capsuletech/profiler
+
+Performance monitoring and profiling utilities for SolidJS applications.
+
+## Features
+
+- 🎯 Web Vitals tracking (CLS, FCP, INP, LCP, TTFB)
+- 📊 Real-time performance metrics dashboard
+- 💾 Memory usage monitoring
+- 📡 Network performance tracking
+- ⚡ Lightweight and non-intrusive
+
+## Installation
+
+```bash
+pnpm add @capsuletech/profiler
+```
+
+## Usage
+
+### VitalsMonitoringProvider
+
+Wrap your application with the provider to start collecting metrics:
+
+```tsx
+import { VitalsMonitoringProvider } from '@capsuletech/profiler/providers';
+
+export default function App() {
+  return (
+    <VitalsMonitoringProvider>
+      <YourComponent />
+    </VitalsMonitoringProvider>
+  );
+}
+```
+
+### Using Metrics in Components
+
+Access metrics from the context:
+
+```tsx
+import { useVitalsContext } from '@capsuletech/profiler/providers';
+
+function MyComponent() {
+  const context = useVitalsContext();
+  
+  return (
+    <div>
+      <p>Performance Metrics Available</p>
+    </div>
+  );
+}
+```
+
+## Monitored Metrics
+
+- **FCP** - First Contentful Paint
+- **LCP** - Largest Contentful Paint
+- **CLS** - Cumulative Layout Shift
+- **INP** - Interaction to Next Paint
+- **TTFB** - Time to First Byte
+- **Memory Usage** - JavaScript heap usage
+- **Network Load** - Total network data transferred
+- **Bundle Size** - Total resource bundle size
+- **Connection Type** - Network connection speed
+
+## License
+
+MIT
+

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@capsuletech/web-profiler",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/index.mjs",
+  "files": [
+    "dist",
+    "src",
+    "!**/*.tsbuildinfo"
+  ],
+  "dependencies": {},
+  "peerDependencies": {
+    "solid-js": "^1.9.0"
+  },
+  "devDependencies": {
+    "@capsuletech/shared-vite": "0.1.0"
+  }
+}

package/src/components/dashboard.tsx

@@ -0,0 +1,75 @@
+import { For, type JSX, Show } from 'solid-js';
+import { getRating } from '../utils';
+
+interface DashboardProps {
+  metrics: Record<string, number>;
+}
+
+export function Dashboard(props: DashboardProps) {
+  const entries = () => Object.entries(props.metrics);
+
+  return (
+    <Show when={entries().length > 0}>
+      <div
+        style={{
+          position: 'fixed',
+          top: '15px',
+          right: '15px',
+          'background-color': 'rgba(15, 15, 15, 0.95)',
+          color: '#fff',
+          padding: '12px',
+          'border-radius': '10px',
+          'font-size': '11px',
+          'z-index': '10000',
+          'font-family': 'monospace',
+          'min-width': '260px',
+          border: '1px solid #333',
+          'box-shadow': '0 10px 30px rgba(0,0,0,0.5)',
+          'pointer-events': 'none',
+        }}
+      >
+        <div
+          style={{
+            'font-weight': 'bold',
+            'margin-bottom': '8px',
+            'border-bottom': '1px solid #333',
+            'padding-bottom': '5px',
+            color: '#00d4ff',
+          }}
+        >
+          🚀 PERFORMANCE MONITOR
+        </div>
+        <For each={entries()}>
+          {(entry) => {
+            const [key, val] = entry;
+            const isNumeric = typeof val === 'number';
+            const rating = isNumeric
+              ? getRating(key, val)
+              : { label: 'INFO' as const, color: '#3498db', unit: '' };
+            const isFloat = key.includes('CLS') || key.includes('Load') || key.includes('Bundle');
+            const formattedValue = isNumeric ? val.toFixed(isFloat ? 2 : 0) : val;
+
+            return (
+              <div
+                style={{
+                  display: 'flex',
+                  'justify-content': 'space-between',
+                  'margin-bottom': '6px',
+                }}
+              >
+                <span style={{ color: '#aaa' }}>{key}:</span>
+                <div style={{ 'text-align': 'right' }}>
+                  <span style={{ color: rating.color, 'font-weight': 'bold' }}>
+                    {formattedValue}
+                    <span style={{ 'font-size': '9px', 'margin-left': '4px' }}>{rating.unit}</span>
+                  </span>
+                  <div style={{ 'font-size': '8px', opacity: 0.6 }}>{rating.label}</div>
+                </div>
+              </div>
+            );
+          }}
+        </For>
+      </div>
+    </Show>
+  );
+}

package/src/components/index.ts

@@ -0,0 +1 @@
+export { Dashboard } from './dashboard';

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from './components';
+export * from './providers';
+export * from './utils';
+
+export type { MetricRating } from './utils';

package/src/providers/index.ts

@@ -0,0 +1,6 @@
+export {
+  VitalsMonitoringProvider,
+  useVitalsContext,
+  VitalsMonitoringContext,
+} from './vitalsMonitor';
+export type { IMonitoringContextType, VitalsMonitoringProviderProps } from './vitalsMonitor';

package/src/providers/vitalsMonitor.tsx

@@ -0,0 +1,123 @@
+import {
+  type JSX,
+  createContext,
+  createEffect,
+  createMemo,
+  createSignal,
+  onCleanup,
+  useContext,
+} from 'solid-js';
+import { Dashboard } from '../components';
+import {
+  getConnectionType,
+  getDomReadyTime,
+  getMemoryMetrics,
+  getNetworkMetrics,
+  setupWebVitalsTracking,
+} from '../utils';
+
+export interface IMonitoringContextType {
+  updateComponentMetric: (name: string, value: number | string) => void;
+}
+
+export const VitalsMonitoringContext = createContext<IMonitoringContextType | undefined>(undefined);
+
+export interface VitalsMonitoringProviderProps {
+  children: JSX.Element;
+  showDashboard?: boolean;
+}
+
+export function VitalsMonitoringProvider(props: VitalsMonitoringProviderProps) {
+  const [displayMetrics, setDisplayMetrics] = createSignal<Record<string, number>>({});
+  const metricsRef: Record<string, number> = {};
+  let rafId: number | null = null;
+  const showDashboard = () => props.showDashboard !== false; // default true
+
+  const updateComponentMetric = (name: string, value: number | string) => {
+    if (metricsRef[name] === value) return;
+
+    if (typeof value === 'number') {
+      metricsRef[name] = value;
+    }
+
+    if (rafId === null) {
+      rafId = requestAnimationFrame(() => {
+        setDisplayMetrics({ ...metricsRef });
+        rafId = null;
+      });
+    }
+  };
+
+  createEffect(() => {
+    // Setup Web Vitals tracking
+    const handleVitals = (metric: any) => {
+      updateComponentMetric(metric.name, metric.value);
+    };
+
+    setupWebVitalsTracking(handleVitals);
+
+    // Initial resource metrics
+    const updateResourceMetrics = () => {
+      const { network, bundle } = getNetworkMetrics();
+      updateComponentMetric('📡 Network Load', network);
+      updateComponentMetric('📦 Total Bundle', bundle);
+    };
+
+    updateResourceMetrics();
+    setTimeout(updateResourceMetrics, 2000);
+
+    // Memory monitoring
+    const memoryInterval = setInterval(() => {
+      const mem = getMemoryMetrics();
+      if (mem !== null) {
+        updateComponentMetric('💻 Memory Usage', mem);
+      }
+    }, 2000);
+
+    // DOM ready time
+    const domTime = getDomReadyTime();
+    if (domTime !== null) {
+      updateComponentMetric('⏱️ Dom Ready', domTime);
+    }
+
+    // Connection type
+    const connection = getConnectionType();
+    if (connection !== 'unknown') {
+      updateComponentMetric('🌐 Network', connection);
+    }
+
+    // Performance Observer for new resources
+    const observer = new PerformanceObserver(() => {
+      updateResourceMetrics();
+    });
+
+    try {
+      observer.observe({ entryTypes: ['resource'] });
+    } catch {
+      // Some browsers may not support resource timing
+    }
+
+    onCleanup(() => {
+      clearInterval(memoryInterval);
+      observer.disconnect();
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+      }
+    });
+  });
+
+  const contextValue = createMemo(() => ({
+    updateComponentMetric,
+  }));
+
+  return (
+    <VitalsMonitoringContext.Provider value={contextValue()}>
+      {props.children}
+      {showDashboard() && <Dashboard metrics={displayMetrics()} />}
+    </VitalsMonitoringContext.Provider>
+  );
+}
+
+export function useVitalsContext(): IMonitoringContextType | undefined {
+  return useContext(VitalsMonitoringContext);
+}

package/src/utils.ts

@@ -0,0 +1,109 @@
+import { type Metric, onCLS, onFCP, onINP, onLCP, onTTFB } from 'web-vitals';
+
+export interface MetricRating {
+  label: 'GOOD' | 'NEEDS_IMPROVEMENT' | 'POOR' | 'INFO';
+  color: string;
+  unit: string;
+}
+
+export function getRating(metricName: string, value: number): MetricRating {
+  // Web Vitals thresholds
+  // https://web.dev/vitals/
+
+  if (metricName.includes('FCP')) {
+    // First Contentful Paint: Good < 1.8s
+    if (value < 1800) return { label: 'GOOD', color: '#10b981', unit: 'ms' };
+    if (value < 3000) return { label: 'NEEDS_IMPROVEMENT', color: '#f59e0b', unit: 'ms' };
+    return { label: 'POOR', color: '#ef4444', unit: 'ms' };
+  }
+
+  if (metricName.includes('LCP')) {
+    // Largest Contentful Paint: Good < 2.5s
+    if (value < 2500) return { label: 'GOOD', color: '#10b981', unit: 'ms' };
+    if (value < 4000) return { label: 'NEEDS_IMPROVEMENT', color: '#f59e0b', unit: 'ms' };
+    return { label: 'POOR', color: '#ef4444', unit: 'ms' };
+  }
+
+  if (metricName.includes('CLS')) {
+    // Cumulative Layout Shift: Good < 0.1
+    if (value < 0.1) return { label: 'GOOD', color: '#10b981', unit: '' };
+    if (value < 0.25) return { label: 'NEEDS_IMPROVEMENT', color: '#f59e0b', unit: '' };
+    return { label: 'POOR', color: '#ef4444', unit: '' };
+  }
+
+  if (metricName.includes('INP')) {
+    // Interaction to Next Paint: Good < 200ms
+    if (value < 200) return { label: 'GOOD', color: '#10b981', unit: 'ms' };
+    if (value < 500) return { label: 'NEEDS_IMPROVEMENT', color: '#f59e0b', unit: 'ms' };
+    return { label: 'POOR', color: '#ef4444', unit: 'ms' };
+  }
+
+  if (metricName.includes('TTFB')) {
+    // Time to First Byte: Good < 800ms
+    if (value < 800) return { label: 'GOOD', color: '#10b981', unit: 'ms' };
+    if (value < 1800) return { label: 'NEEDS_IMPROVEMENT', color: '#f59e0b', unit: 'ms' };
+    return { label: 'POOR', color: '#ef4444', unit: 'ms' };
+  }
+
+  // Memory and Network
+  if (metricName.includes('Memory')) {
+    // Less than 50MB is good
+    if (value < 50) return { label: 'GOOD', color: '#10b981', unit: 'MB' };
+    if (value < 100) return { label: 'NEEDS_IMPROVEMENT', color: '#f59e0b', unit: 'MB' };
+    return { label: 'POOR', color: '#ef4444', unit: 'MB' };
+  }
+
+  if (metricName.includes('Network') || metricName.includes('Bundle')) {
+    if (value < 1) return { label: 'GOOD', color: '#10b981', unit: 'MB' };
+    if (value < 3) return { label: 'NEEDS_IMPROVEMENT', color: '#f59e0b', unit: 'MB' };
+    return { label: 'POOR', color: '#ef4444', unit: 'MB' };
+  }
+
+  return { label: 'INFO', color: '#3498db', unit: '' };
+}
+
+export function setupWebVitalsTracking(onMetric: (metric: Metric) => void) {
+  onCLS(onMetric, { reportAllChanges: true });
+  onLCP(onMetric, { reportAllChanges: true });
+  onFCP(onMetric, { reportAllChanges: true });
+  onTTFB(onMetric);
+  onINP(onMetric, { reportAllChanges: true });
+}
+
+export function getNetworkMetrics() {
+  const resources = performance.getEntriesByType('resource') as PerformanceResourceTiming[];
+
+  let totalNetwork = 0;
+  let totalBundle = 0;
+
+  for (const res of resources) {
+    totalNetwork += res.transferSize;
+    const actualSize = res.decodedBodySize || res.encodedBodySize || res.transferSize;
+    totalBundle += actualSize;
+  }
+
+  return {
+    network: totalNetwork / 1024 / 1024, // MB
+    bundle: totalBundle / 1024 / 1024, // MB
+  };
+}
+
+export function getMemoryMetrics(): number | null {
+  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  const mem = (performance as any).memory;
+  if (!mem) return null;
+  return Math.round(mem.usedJSHeapSize / 1024 / 1024);
+}
+
+export function getConnectionType(): string {
+  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  const connection = (navigator as any).connection;
+  if (!connection) return 'unknown';
+  return connection.effectiveType || 'unknown';
+}
+
+export function getDomReadyTime(): number | null {
+  const navEntry = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;
+  if (!navEntry) return null;
+  return navEntry.domContentLoadedEventEnd;
+}