@smartnet360/svelte-components 0.0.123 → 0.0.125

package/dist/core/Benchmark/Benchmark.svelte

@@ -0,0 +1,662 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+  import { tick } from 'svelte';
+  import { 
+    generateTestData, 
+    runBenchmark, 
+    formatDuration,
+    type BenchmarkResult,
+    type TestItem 
+  } from './benchmark-utils';
+
+  // Test configuration
+  const DATA_SIZES = [100, 1000, 5000, 10000];
+  
+  // Reactive state
+  let selectedSize = $state(1000);
+  let items = $state<TestItem[]>([]);
+  let results = $state<BenchmarkResult[]>([]);
+  let isRunning = $state(false);
+  let currentTest = $state('');
+  let filterValue = $state(500);
+  
+  // Derived state - this is what we want to benchmark
+  let filteredItems = $derived(items.filter(item => item.value > filterValue));
+  let activeItems = $derived(items.filter(item => item.active));
+  let totalValue = $derived(items.reduce((sum, item) => sum + item.value, 0));
+  let groupedByCategory = $derived(() => {
+    const groups = new Map<string, TestItem[]>();
+    for (const item of items) {
+      const existing = groups.get(item.category) || [];
+      existing.push(item);
+      groups.set(item.category, existing);
+    }
+    return groups;
+  });
+
+  function log(message: string, data?: any) {
+    const timestamp = new Date().toISOString().split('T')[1].slice(0, -1);
+    if (data !== undefined) {
+      console.log(`%c[${timestamp}] ${message}`, 'color: #2196F3;', data);
+    } else {
+      console.log(`%c[${timestamp}] ${message}`, 'color: #2196F3;');
+    }
+  }
+
+  /** Wait for Svelte to finish updating the DOM */
+  async function waitForRender(): Promise<void> {
+    await tick(); // Wait for Svelte's microtask queue
+    return new Promise(resolve => {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          resolve(); // Double rAF ensures paint is complete
+        });
+      });
+    });
+  }
+
+  /** Measure REAL time including DOM updates */
+  async function measureReal<T>(name: string, fn: () => T, itemCount: number): Promise<BenchmarkResult> {
+    const start = performance.now();
+    
+    log(`[REAL] Starting: ${name}`);
+    
+    // Execute the function
+    const result = fn();
+    const jsTime = performance.now() - start;
+    
+    log(`[REAL] JS execution: ${formatDuration(jsTime)}`);
+    
+    // Wait for Svelte + DOM + Paint
+    await waitForRender();
+    
+    const totalTime = performance.now() - start;
+    
+    log(`[REAL] Total time (including render): ${formatDuration(totalTime)}`);
+    log(`[REAL] Render overhead: ${formatDuration(totalTime - jsTime)}`);
+    
+    return {
+      name: `${name} (REAL)`,
+      duration: totalTime,
+      itemCount,
+      opsPerSecond: (itemCount / totalTime) * 1000,
+      timestamp: new Date()
+    };
+  }
+
+  function clearResults() {
+    results = [];
+    items = [];
+    log('Results cleared');
+  }
+
+  // Test 1: Initial data generation
+  function testDataGeneration() {
+    currentTest = 'Data Generation';
+    log(`Starting: ${currentTest} with ${selectedSize} items`);
+    
+    const result = runBenchmark(
+      `Generate ${selectedSize} items`,
+      () => {
+        items = generateTestData(selectedSize);
+      },
+      selectedSize
+    );
+    
+    results = [...results, result];
+    log(`Completed: ${currentTest}`, { itemCount: items.length });
+  }
+
+  // Test 2: Filter operation (triggers $derived)
+  function testFilterOperation() {
+    if (items.length === 0) {
+      log('ERROR: No items loaded. Run data generation first.');
+      return;
+    }
+    
+    currentTest = 'Filter Operation';
+    log(`Starting: ${currentTest}`);
+    
+    const start = performance.now();
+    
+    // Change filter value to trigger $derived recalculation
+    filterValue = Math.random() * 1000;
+    
+    // Access the derived value to force computation
+    const count = filteredItems.length;
+    
+    const duration = performance.now() - start;
+    
+    const result: BenchmarkResult = {
+      name: `Filter items (threshold: ${filterValue.toFixed(0)})`,
+      duration,
+      itemCount: items.length,
+      opsPerSecond: (items.length / duration) * 1000,
+      timestamp: new Date()
+    };
+    
+    results = [...results, result];
+    log(`Completed: ${currentTest}`, { filtered: count, total: items.length });
+  }
+
+  // Test 3: Update single item
+  function testSingleUpdate() {
+    if (items.length === 0) {
+      log('ERROR: No items loaded. Run data generation first.');
+      return;
+    }
+    
+    currentTest = 'Single Item Update';
+    log(`Starting: ${currentTest}`);
+    
+    const result = runBenchmark(
+      'Update single item',
+      () => {
+        const index = Math.floor(Math.random() * items.length);
+        items[index] = { ...items[index], value: Math.random() * 1000 };
+      },
+      1
+    );
+    
+    results = [...results, result];
+    log(`Completed: ${currentTest}`);
+  }
+
+  // Test 4: Bulk update (update all items)
+  function testBulkUpdate() {
+    if (items.length === 0) {
+      log('ERROR: No items loaded. Run data generation first.');
+      return;
+    }
+    
+    currentTest = 'Bulk Update';
+    log(`Starting: ${currentTest} for ${items.length} items`);
+    
+    const result = runBenchmark(
+      `Bulk update ${items.length} items`,
+      () => {
+        items = items.map(item => ({
+          ...item,
+          value: item.value * 1.1,
+          active: !item.active
+        }));
+      },
+      items.length
+    );
+    
+    results = [...results, result];
+    log(`Completed: ${currentTest}`);
+  }
+
+  // Test 5: Array push operations
+  function testArrayPush() {
+    currentTest = 'Array Push';
+    log(`Starting: ${currentTest}`);
+    
+    const pushCount = 1000;
+    const result = runBenchmark(
+      `Push ${pushCount} items`,
+      () => {
+        for (let i = 0; i < pushCount; i++) {
+          items = [...items, {
+            id: items.length,
+            name: `New Item ${items.length}`,
+            value: Math.random() * 1000,
+            category: 'NEW',
+            active: true,
+            data: [1, 2, 3]
+          }];
+        }
+      },
+      pushCount
+    );
+    
+    results = [...results, result];
+    log(`Completed: ${currentTest}`, { totalItems: items.length });
+  }
+
+  // Test 6: Derived with grouping (heavy operation)
+  function testGroupingDerived() {
+    if (items.length === 0) {
+      log('ERROR: No items loaded. Run data generation first.');
+      return;
+    }
+    
+    currentTest = 'Grouping Derived';
+    log(`Starting: ${currentTest}`);
+    
+    const start = performance.now();
+    
+    // Access the grouped derived to force computation
+    const groups = groupedByCategory();
+    const groupCount = groups.size;
+    
+    const duration = performance.now() - start;
+    
+    const result: BenchmarkResult = {
+      name: `Group ${items.length} items into categories`,
+      duration,
+      itemCount: items.length,
+      opsPerSecond: (items.length / duration) * 1000,
+      timestamp: new Date()
+    };
+    
+    results = [...results, result];
+    log(`Completed: ${currentTest}`, { groups: groupCount });
+  }
+
+  // Test 7: Multiple derived access (simulates real component)
+  function testMultipleDerivedAccess() {
+    if (items.length === 0) {
+      log('ERROR: No items loaded. Run data generation first.');
+      return;
+    }
+    
+    currentTest = 'Multiple Derived Access';
+    log(`Starting: ${currentTest}`);
+    
+    const iterations = 100;
+    const start = performance.now();
+    
+    for (let i = 0; i < iterations; i++) {
+      // Access multiple derived values (like a component would during render)
+      const _f = filteredItems.length;
+      const _a = activeItems.length;
+      const _t = totalValue;
+      const _g = groupedByCategory().size;
+    }
+    
+    const duration = performance.now() - start;
+    
+    const result: BenchmarkResult = {
+      name: `Access 4 derived values ${iterations}x`,
+      duration,
+      itemCount: iterations * 4,
+      opsPerSecond: ((iterations * 4) / duration) * 1000,
+      timestamp: new Date()
+    };
+    
+    results = [...results, result];
+    log(`Completed: ${currentTest}`);
+  }
+
+  // ============================================
+  // REAL TIME TESTS (including DOM updates)
+  // ============================================
+
+  // Test R1: Generate data and wait for render
+  async function testRealDataGeneration() {
+    currentTest = 'REAL: Data Generation + Render';
+    const result = await measureReal(
+      `Generate ${selectedSize} items + render`,
+      () => {
+        items = generateTestData(selectedSize);
+      },
+      selectedSize
+    );
+    results = [...results, result];
+  }
+
+  // Test R2: Bulk update and wait for render
+  async function testRealBulkUpdate() {
+    if (items.length === 0) {
+      log('ERROR: No items loaded.');
+      return;
+    }
+    currentTest = 'REAL: Bulk Update + Render';
+    const result = await measureReal(
+      `Bulk update ${items.length} items + render`,
+      () => {
+        items = items.map(item => ({
+          ...item,
+          value: item.value * 1.1,
+          active: !item.active
+        }));
+      },
+      items.length
+    );
+    results = [...results, result];
+  }
+
+  // Test R3: Filter change and wait for render
+  async function testRealFilterChange() {
+    if (items.length === 0) {
+      log('ERROR: No items loaded.');
+      return;
+    }
+    currentTest = 'REAL: Filter Change + Render';
+    const result = await measureReal(
+      'Filter change + render',
+      () => {
+        filterValue = Math.random() * 1000;
+        // Force access to trigger derived
+        const _ = filteredItems.length;
+      },
+      items.length
+    );
+    results = [...results, result];
+  }
+
+  // Test R4: Array push (1000 individual reactive updates) - THE SLOW ONE
+  async function testRealArrayPush() {
+    currentTest = 'REAL: Array Push (1000 individual updates)';
+    const pushCount = 1000;
+    
+    const result = await measureReal(
+      `Push ${pushCount} items individually + render`,
+      () => {
+        for (let i = 0; i < pushCount; i++) {
+          items = [...items, {
+            id: items.length,
+            name: `New Item ${items.length}`,
+            value: Math.random() * 1000,
+            category: 'NEW',
+            active: true,
+            data: [1, 2, 3]
+          }];
+        }
+      },
+      pushCount
+    );
+    results = [...results, result];
+  }
+
+  // Run all tests
+  async function runAllTests() {
+    isRunning = true;
+    results = [];
+    items = [];
+    
+    log('=== STARTING FULL BENCHMARK SUITE ===');
+    log(`Data size: ${selectedSize} items`);
+    log(`Environment: ${import.meta.env.DEV ? 'DEVELOPMENT' : 'PRODUCTION'}`);
+    log(`User Agent: ${navigator.userAgent}`);
+    
+    // Sync tests (JS only)
+    const syncTests = [
+      testDataGeneration,
+      testFilterOperation,
+      testSingleUpdate,
+      testBulkUpdate,
+      testGroupingDerived,
+      testMultipleDerivedAccess,
+      testArrayPush,
+    ];
+    
+    log('--- Running JS-only tests ---');
+    for (const test of syncTests) {
+      await new Promise(resolve => setTimeout(resolve, 100));
+      test();
+    }
+    
+    // Reset for real tests
+    items = [];
+    await waitForRender();
+    
+    log('--- Running REAL tests (including render) ---');
+    
+    // Async tests (including render)
+    await new Promise(resolve => setTimeout(resolve, 200));
+    await testRealDataGeneration();
+    
+    await new Promise(resolve => setTimeout(resolve, 200));
+    await testRealBulkUpdate();
+    
+    await new Promise(resolve => setTimeout(resolve, 200));
+    await testRealFilterChange();
+    
+    log('=== BENCHMARK SUITE COMPLETED ===');
+    logSummary();
+    
+    isRunning = false;
+    currentTest = '';
+  }
+
+  // Run only REAL tests (including the slow array push)
+  async function runRealTests() {
+    isRunning = true;
+    results = [];
+    items = [];
+    
+    log('=== STARTING REAL-TIME BENCHMARK ===');
+    log(`Data size: ${selectedSize} items`);
+    log(`Environment: ${import.meta.env.DEV ? 'DEVELOPMENT' : 'PRODUCTION'}`);
+    
+    await testRealDataGeneration();
+    await new Promise(resolve => setTimeout(resolve, 300));
+    
+    await testRealBulkUpdate();
+    await new Promise(resolve => setTimeout(resolve, 300));
+    
+    await testRealFilterChange();
+    await new Promise(resolve => setTimeout(resolve, 300));
+    
+    // Reset and test array push
+    items = [];
+    await waitForRender();
+    await new Promise(resolve => setTimeout(resolve, 300));
+    
+    await testRealArrayPush();
+    
+    log('=== REAL-TIME BENCHMARK COMPLETED ===');
+    logSummary();
+    
+    isRunning = false;
+    currentTest = '';
+  }
+
+  function logSummary() {
+    console.log('%c\n=== BENCHMARK SUMMARY ===', 'color: #4CAF50; font-weight: bold; font-size: 14px;');
+    
+    const totalDuration = results.reduce((sum, r) => sum + r.duration, 0);
+    
+    console.table(results.map(r => ({
+      Test: r.name,
+      Duration: formatDuration(r.duration),
+      Items: r.itemCount,
+      'Ops/sec': r.opsPerSecond > 1000 
+        ? `${(r.opsPerSecond / 1000).toFixed(1)}K` 
+        : r.opsPerSecond.toFixed(1)
+    })));
+    
+    console.log(`%cTotal time: ${formatDuration(totalDuration)}`, 'color: #FF9800; font-weight: bold;');
+  }
+</script>
+
+<div class="benchmark-container p-4">
+  <div class="card">
+    <div class="card-header bg-primary text-white">
+      <h5 class="mb-0">
+        <i class="bi bi-speedometer2 me-2"></i>
+        Svelte Reactivity Benchmark
+      </h5>
+    </div>
+    
+    <div class="card-body">
+      <!-- Configuration -->
+      <div class="row mb-4">
+        <div class="col-md-6">
+          <label class="form-label fw-bold">Data Size</label>
+          <div class="btn-group w-100" role="group">
+            {#each DATA_SIZES as size}
+              <button
+                type="button"
+                class="btn {selectedSize === size ? 'btn-primary' : 'btn-outline-primary'}"
+                onclick={() => selectedSize = size}
+                disabled={isRunning}
+              >
+                {size.toLocaleString()}
+              </button>
+            {/each}
+          </div>
+        </div>
+        <div class="col-md-6">
+          <label class="form-label fw-bold">Environment</label>
+          <div class="alert alert-info py-2 mb-0">
+            <strong>{import.meta.env.DEV ? '🔧 DEVELOPMENT' : '🚀 PRODUCTION'}</strong>
+            <br>
+            <small class="text-muted">Items loaded: {items.length.toLocaleString()}</small>
+          </div>
+        </div>
+      </div>
+
+      <!-- Test Buttons -->
+      <div class="row g-2 mb-4">
+        <div class="col-12">
+          <label class="form-label fw-bold">Individual Tests</label>
+        </div>
+        <div class="col-auto">
+          <button class="btn btn-outline-secondary" onclick={testDataGeneration} disabled={isRunning}>
+            1. Generate Data
+          </button>
+        </div>
+        <div class="col-auto">
+          <button class="btn btn-outline-secondary" onclick={testFilterOperation} disabled={isRunning || items.length === 0}>
+            2. Filter
+          </button>
+        </div>
+        <div class="col-auto">
+          <button class="btn btn-outline-secondary" onclick={testSingleUpdate} disabled={isRunning || items.length === 0}>
+            3. Single Update
+          </button>
+        </div>
+        <div class="col-auto">
+          <button class="btn btn-outline-secondary" onclick={testBulkUpdate} disabled={isRunning || items.length === 0}>
+            4. Bulk Update
+          </button>
+        </div>
+        <div class="col-auto">
+          <button class="btn btn-outline-secondary" onclick={testGroupingDerived} disabled={isRunning || items.length === 0}>
+            5. Grouping
+          </button>
+        </div>
+        <div class="col-auto">
+          <button class="btn btn-outline-secondary" onclick={testMultipleDerivedAccess} disabled={isRunning || items.length === 0}>
+            6. Multi-Derived
+          </button>
+        </div>
+        <div class="col-auto">
+          <button class="btn btn-outline-secondary" onclick={testArrayPush} disabled={isRunning}>
+            7. Array Push
+          </button>
+        </div>
+      </div>
+
+      <!-- Run All -->
+      <div class="d-flex gap-2 mb-4">
+        <button 
+          class="btn btn-success btn-lg flex-grow-1" 
+          onclick={runAllTests}
+          disabled={isRunning}
+        >
+          {#if isRunning}
+            <span class="spinner-border spinner-border-sm me-2" role="status"></span>
+            Running: {currentTest}...
+          {:else}
+            <i class="bi bi-play-fill me-2"></i>
+            Run All Tests
+          {/if}
+        </button>
+        <button 
+          class="btn btn-warning btn-lg flex-grow-1" 
+          onclick={runRealTests}
+          disabled={isRunning}
+        >
+          <i class="bi bi-stopwatch me-2"></i>
+          Run REAL Tests
+        </button>
+        <button class="btn btn-outline-danger" onclick={clearResults} disabled={isRunning}>
+          <i class="bi bi-trash"></i>
+        </button>
+      </div>
+
+      <!-- Results -->
+      {#if results.length > 0}
+        <div class="table-responsive">
+          <table class="table table-sm table-striped">
+            <thead class="table-dark">
+              <tr>
+                <th>#</th>
+                <th>Test</th>
+                <th class="text-end">Duration</th>
+                <th class="text-end">Items</th>
+                <th class="text-end">Ops/sec</th>
+              </tr>
+            </thead>
+            <tbody>
+              {#each results as result, i}
+                <tr class={result.duration > 1000 ? 'table-danger' : result.duration > 100 ? 'table-warning' : ''}>
+                  <td>{i + 1}</td>
+                  <td>{result.name}</td>
+                  <td class="text-end font-monospace">
+                    {formatDuration(result.duration)}
+                  </td>
+                  <td class="text-end">{result.itemCount.toLocaleString()}</td>
+                  <td class="text-end font-monospace">
+                    {result.opsPerSecond > 1000 
+                      ? `${(result.opsPerSecond / 1000).toFixed(1)}K` 
+                      : result.opsPerSecond.toFixed(1)}
+                  </td>
+                </tr>
+              {/each}
+            </tbody>
+            <tfoot class="table-light">
+              <tr class="fw-bold">
+                <td colspan="2">Total</td>
+                <td class="text-end font-monospace">
+                  {formatDuration(results.reduce((sum, r) => sum + r.duration, 0))}
+                </td>
+                <td colspan="2"></td>
+              </tr>
+            </tfoot>
+          </table>
+        </div>
+      {:else}
+        <div class="text-center text-muted py-4">
+          <i class="bi bi-bar-chart" style="font-size: 3rem;"></i>
+          <p class="mt-2">Run tests to see results</p>
+          <p class="small">Check browser console (F12) for detailed logs</p>
+        </div>
+      {/if}
+
+      <!-- Current State Display -->
+      {#if items.length > 0}
+        <div class="mt-4 p-3 bg-light rounded">
+          <h6 class="mb-2">Current Derived State:</h6>
+          <div class="row text-center">
+            <div class="col">
+              <div class="fw-bold">{filteredItems.length}</div>
+              <small class="text-muted">Filtered</small>
+            </div>
+            <div class="col">
+              <div class="fw-bold">{activeItems.length}</div>
+              <small class="text-muted">Active</small>
+            </div>
+            <div class="col">
+              <div class="fw-bold">{totalValue.toFixed(0)}</div>
+              <small class="text-muted">Total Value</small>
+            </div>
+            <div class="col">
+              <div class="fw-bold">{groupedByCategory().size}</div>
+              <small class="text-muted">Groups</small>
+            </div>
+          </div>
+        </div>
+      {/if}
+    </div>
+    
+    <div class="card-footer text-muted small">
+      <i class="bi bi-info-circle me-1"></i>
+      Open browser console (F12) for detailed benchmark logs. 
+      Red rows = &gt;1s, Yellow rows = &gt;100ms
+    </div>
+  </div>
+</div>
+
+<style>
+  .benchmark-container {
+    max-width: 900px;
+    margin: 0 auto;
+  }
+</style>

package/dist/core/Benchmark/Benchmark.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Benchmark: import("svelte").Component<Record<string, never>, {}, "">;
+type Benchmark = ReturnType<typeof Benchmark>;
+export default Benchmark;

package/dist/core/Benchmark/benchmark-utils.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Benchmark utilities for measuring Svelte reactivity performance
+ */
+export interface BenchmarkResult {
+    name: string;
+    duration: number;
+    itemCount: number;
+    opsPerSecond: number;
+    timestamp: Date;
+}
+export interface TestItem {
+    id: number;
+    name: string;
+    value: number;
+    category: string;
+    active: boolean;
+    data: number[];
+}
+/**
+ * Generate test data array
+ */
+export declare function generateTestData(count: number): TestItem[];
+/**
+ * Measure execution time of a function
+ */
+export declare function measure<T>(fn: () => T): {
+    result: T;
+    duration: number;
+};
+/**
+ * Measure async execution time
+ */
+export declare function measureAsync<T>(fn: () => Promise<T>): Promise<{
+    result: T;
+    duration: number;
+}>;
+/**
+ * Format duration for display
+ */
+export declare function formatDuration(ms: number): string;
+/**
+ * Create a detailed log entry
+ */
+export declare function logBenchmark(result: BenchmarkResult): void;
+/**
+ * Run a benchmark and return result
+ */
+export declare function runBenchmark(name: string, fn: () => void, itemCount: number): BenchmarkResult;