feat(angular): improvements to angularReactivityFeature, try to remove proxies

[riccardoperra]

Those are some experiments with angularReactivityFeature. The goal of this pr is to remove the proxies and make the table reactive with signals directly via a custom feature.

createAngularTable/injectTable return value is currently a proxy into a proxy :

• lazyInit -> needed to support required input signals. This basically schedule the table object creation in a microtask
• proxifyTable -> needed to override table properties and make them reactive when the table signal changes

Using proxifyTable doesn't directly lead in issues after the new FlexRender implementation, but the returned table it's just a different object compared to the one obtained via (header|cell).getContext(), which the latter is not reactive.

Thanks to table features added in v9, we could move away from proxyTable by just overriding table/cell/header/column/row props recursively via TableFeature interface.

This allows to make all properties reactive via the same logic used by the table proxy right now using toComputed.

Overriding all properties can be costly because if there are a lot of elements, a potential reactive signal would be created for each property of each header/row/column/cell. To work around this, we can disable reactive properties via table options (name to be decided).

export interface AngularReactivityFlags {
  header: boolean
  column: boolean
  row: boolean
  cell: boolean
  table: boolean
}

interface TableOptions_AngularReactivity {
  reactivity?: Partial<AngularReactivityFlags>
}

---

• skipBaseProperties now check via string indexs instead of endsWith/startsWith to improve performance a little when there are many rows
• Removed enableExperimentalReactivity with a new reactivity object that allows to make reactive properties based on the type of object
• setReactiveProp will now override with a getter that will create the computed lazily. This may improve performance a bit since previously a computed was created synchronously, while now it is created only once the getter is invoked for the first time
• BREAKING CHANGE: instead of calling table() to handle the entire table as a signal, you now need to call table.get()

---

// todo

Still in draft, so there may be changes about this.

FlexRender now relies on ngDoCheck to check if the content is dirty

I introduced a new input (named flexRenderNotifier, note: tbd) that allows to change this behavior. This can be used to run view checks introduced in the previous release only when the state of the table changes, instead of every time angular determine the view is dirty.

Benchmarks

On average, no reactivity takes about 34.11% less time than enabling all reactivity flags

 ✓ tests/benchmarks/injectTable.benchmark.ts (16) 89397ms
   ✓ injectTable - 100 elements (2) 1228ms
     name                 hz     min     max    mean     p75     p99    p995    p999     rme  samples
   · No reactivity    478.95  0.8006  4.7787  2.0879  2.1033  4.4813  4.7538  4.7787  ±2.84%      240   fastest
   · Full reactivity  402.47  1.2451  5.2326  2.4846  2.5394  4.4560  5.1281  5.2326  ±2.44%      202
   ✓ injectTable - 1000 elements (2) 1285ms
     name                  hz      min      max     mean      p75      p99     p995     p999     rme  samples
   · No reactivity    88.1605   9.5865  23.9425  11.3429  11.0828  23.9425  23.9425  23.9425  ±5.55%       45   fastest
   · Full reactivity  59.9771  15.4324  30.0653  16.6730  16.4753  30.0653  30.0653  30.0653  ±5.94%       30
   ✓ injectTable - 2000 elements (2) 1457ms
     name                  hz      min      max     mean      p75      p99     p995     p999      rme  samples
   · No reactivity    43.1559  19.0770  48.5802  23.1718  23.8451  48.5802  48.5802  48.5802  ±12.15%       22   fastest
   · Full reactivity  26.7554  31.2603  61.8903  37.3757  35.1764  61.8903  61.8903  61.8903  ±16.16%       14
   ✓ injectTable - 5000 elements (2) 2069ms
     name                  hz      min      max     mean      p75      p99     p995     p999      rme  samples
   · No reactivity    18.7756  48.8352  80.7604  53.2605  51.9892  80.7604  80.7604  80.7604  ±13.12%       10   fastest
   · Full reactivity  11.4146  78.1029   114.20  87.6068  89.7341   114.20   114.20   114.20  ±16.41%        6
   ✓ injectTable - 10000 elements (2) 3425ms
     name                 hz     min     max    mean     p75     p99    p995    p999      rme  samples
   · No reactivity    9.2817  100.05  131.47  107.74  105.85  131.47  131.47  131.47  ±15.53%        5   fastest
   · Full reactivity  5.8318  160.01  190.27  171.47  175.66  190.27  190.27  190.27   ±8.83%        5
   ✓ injectTable - 25000 elements (2) 9133ms
     name                 hz     min     max    mean     p75     p99    p995    p999      rme  samples
   · No reactivity    3.4413  255.76  329.70  290.59  326.18  329.70  329.70  329.70  ±14.88%        5   fastest
   · Full reactivity  2.1823  417.27  523.97  458.23  483.82  523.97  523.97  523.97  ±12.22%        5
   ✓ injectTable - 50000 elements (2) 24258ms
     name                 hz       min       max      mean       p75       p99      p995      p999      rme  samples
   · No reactivity    1.1524    656.22  1,147.60    867.73  1,027.44  1,147.60  1,147.60  1,147.60  ±31.03%        5   fastest
   · Full reactivity  0.7608  1,052.31  1,654.41  1,314.38  1,434.89  1,654.41  1,654.41  1,654.41  ±22.38%        5
   ✓ injectTable - 100000 elements (2) 46539ms
     name                 hz       min       max      mean       p75       p99      p995      p999     rme  samples
   · No reactivity    0.7196  1,270.23  1,511.27  1,389.61  1,427.98  1,511.27  1,511.27  1,511.27  ±7.95%        5   fastest
   · Full reactivity  0.4286  2,237.14  2,524.88  2,333.38  2,320.52  2,524.88  2,524.88  2,524.88  ±5.98%        5

 BENCH  Summary

  No reactivity - tests/benchmarks/injectTable.benchmark.ts > injectTable - 100 elements
    1.19x faster than Full reactivity

  No reactivity - tests/benchmarks/injectTable.benchmark.ts > injectTable - 1000 elements
    1.47x faster than Full reactivity

  No reactivity - tests/benchmarks/injectTable.benchmark.ts > injectTable - 2000 elements
    1.61x faster than Full reactivity

  No reactivity - tests/benchmarks/injectTable.benchmark.ts > injectTable - 5000 elements
    1.64x faster than Full reactivity

  No reactivity - tests/benchmarks/injectTable.benchmark.ts > injectTable - 10000 elements
    1.59x faster than Full reactivity

  No reactivity - tests/benchmarks/injectTable.benchmark.ts > injectTable - 25000 elements
    1.58x faster than Full reactivity

  No reactivity - tests/benchmarks/injectTable.benchmark.ts > injectTable - 50000 elements
    1.51x faster than Full reactivity

  No reactivity - tests/benchmarks/injectTable.benchmark.ts > injectTable - 100000 elements
    1.68x faster than Full reactivity

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 810c37a.

Command	Status	Duration	Result
nx affected --targets=test:format,test:eslint,t...	❌ Failed	2m 44s	View ↗
nx run-many --targets=build --exclude=examples/**	✅ Succeeded	5s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-02-15 15:28:40 UTC