wip: setup benchmark test

Author: riccardoperra

packages/angular-table/package.json

@@ -46,6 +46,7 @@
     "test:build": "publint --strict",
     "test:eslint": "eslint ./src",
     "test:lib": "vitest",
+    "test:benchmark": "vitest bench",
     "test:lib:dev": "vitest --watch",
     "test:types": "tsc && vitest --typecheck"
   },

packages/angular-table/src/angularReactivityFeature.ts

@@ -75,6 +75,9 @@ export function constructAngularReactivityFeature<
         equal: () => false,
       })
 
+      if (table.options.reactivity?.table === false) {
+        return
+      }
       markReactive(table)
       setReactiveProps(table.get, table, {
         skipProperty: skipBaseProperties,

packages/angular-table/src/flex-render.ts

@@ -158,7 +158,6 @@ export class FlexRenderDirective<
     this.#tableChangeEffect?.destroy()
     this.#tableChangeEffect = null
     let firstCheck = !!(this.renderFlags & FlexRenderFlags.ViewFirstRender)
-    console.log(this.table)
     if (
       this.table &&
       this.notifier === 'tableChange' &&

packages/angular-table/src/reactivityUtils.ts

@@ -43,7 +43,6 @@ export function defineLazyComputedProperty<T extends object>(
         configurable: true,
         enumerable: true,
       })
-
       return computedValue
     },
   })

packages/angular-table/tests/benchmark.test.ts

@@ -0,0 +1,35 @@
+import { setTimeout } from 'node:timers/promises'
+import { bench, describe } from 'vitest'
+import { benchCases, columns, createTestTable, dataMap } from './setup'
+
+const nIteration = 5
+
+for (const benchCase of benchCases) {
+  describe(`injectTable (${benchCase.size} elements)`, () => {
+    const data = dataMap[benchCase.size]!
+
+    bench(
+      `${benchCase.size} elements - No reactivity`,
+      async () => {
+        const table = createTestTable(false, data, columns)
+        await setTimeout(0)
+        table.getRowModel()
+      },
+      {
+        iterations: nIteration,
+      },
+    )
+
+    bench(
+      `${benchCase.size} Enabled reactivity`,
+      async () => {
+        const table = createTestTable(true, data, columns)
+        await setTimeout(0)
+        table.getRowModel()
+      },
+      {
+        iterations: nIteration,
+      },
+    )
+  })
+}

packages/angular-table/tests/benchmarks/injectTable.benchmark.ts

@@ -0,0 +1,60 @@
+import { injectTable, stockFeatures } from '../../src'
+import type { ColumnDef } from '../../src'
+
+export function createData(size: number) {
+  return Array.from({ length: size }, (_, index) => ({
+    id: index,
+    title: `title-${index}`,
+    name: `name-${index}`,
+  }))
+}
+
+export const columns: Array<ColumnDef<typeof stockFeatures, any>> = [
+  { id: 'col1' },
+  { id: 'col2' },
+  { id: 'col3' },
+  { id: 'col4' },
+  { id: 'col5' },
+  { id: 'col6' },
+  { id: 'col7' },
+]
+
+export function createTestTable(
+  enableGranularReactivity: boolean,
+  data: Array<any>,
+  columns: Array<any>,
+) {
+  return injectTable(() => ({
+    _features: stockFeatures,
+    columns: columns,
+    data,
+    reactivity: {
+      table: enableGranularReactivity,
+      row: enableGranularReactivity,
+      column: enableGranularReactivity,
+      cell: enableGranularReactivity,
+      header: enableGranularReactivity,
+    },
+  }))
+}
+
+export const benchCases = [
+  { size: 100, max: 5, threshold: 10 },
+  { size: 1000, max: 25, threshold: 50 },
+  { size: 2000, max: 50, threshold: 100 },
+  { size: 5000, max: 100, threshold: 500 },
+  { size: 10_000, max: 200, threshold: 1000 },
+  { size: 25_000, max: 500, threshold: 1000 },
+  { size: 50_000, max: 1500, threshold: 1000 },
+  { size: 100_000, max: 2000, threshold: 1500 },
+]
+
+console.log('Seeding data...')
+
+export const dataMap = {} as Record<number, Array<any>>
+
+for (const benchCase of benchCases) {
+  dataMap[benchCase.size] = createData(benchCase.size)
+}
+
+console.log('Seed data completed')

packages/angular-table/tests/benchmarks/setup.ts

@@ -1,6 +1,6 @@
 import { input } from '@angular/core'
 import { test } from 'vitest'
-import { flexRenderComponent } from '../src'
+import { flexRenderComponent } from '../../src'
 
 test('Infer component inputs', () => {
   class Test {

…le/tests/flex-render-component.test-d.ts …x-render/flex-render-component.test-d.tspackages/angular-table/tests/flex-render-component.test-d.ts renamed to packages/angular-table/tests/flex-render/flex-render-component.test-d.ts packages/angular-table/tests/flex-render-component.test-d.ts renamed to packages/angular-table/tests/flex-render/flex-render-component.test-d.ts

@@ -19,8 +19,8 @@ import {
   flexRenderComponent,
   injectFlexRenderContext,
   injectTable,
-} from '../src'
-import type { FlexRenderContent } from '../src'
+} from '../../src'
+import type { FlexRenderContent } from '../../src'
 import type {
   CellContext,
   ExpandedState,

…ar-table/tests/flex-render-table.test.ts …ts/flex-render/flex-render-table.test.tspackages/angular-table/tests/flex-render-table.test.ts renamed to packages/angular-table/tests/flex-render/flex-render-table.test.ts packages/angular-table/tests/flex-render-table.test.ts renamed to packages/angular-table/tests/flex-render/flex-render-table.test.ts

@@ -1,13 +1,15 @@
-import { Component, input, type TemplateRef, ViewChild } from '@angular/core'
-import { type ComponentFixture, TestBed } from '@angular/core/testing'
+import { Component, ViewChild, input } from '@angular/core'
+import { TestBed } from '@angular/core/testing'
 import { createColumnHelper } from '@tanstack/table-core'
 import { describe, expect, test } from 'vitest'
 import {
   FlexRenderDirective,
   injectFlexRenderContext,
-} from '../src/flex-render'
-import { setFixtureSignalInput, setFixtureSignalInputs } from './test-utils'
-import { flexRenderComponent } from '../src/flex-render/flex-render-component'
+} from '../../src/flex-render'
+import { setFixtureSignalInput, setFixtureSignalInputs } from '../test-utils'
+import { flexRenderComponent } from '../../src/flex-render/flex-render-component'
+import type { TemplateRef } from '@angular/core'
+import type { ComponentFixture } from '@angular/core/testing'
 
 interface Data {
   id: string