@rs-x/cli 2.0.0-next.5 → 2.0.0-next.7

package/templates/angular-demo/src/app/app.component.html

@@ -0,0 +1,58 @@
+<main class="app-shell">
+  <section class="hero">
+    <div class="container">
+      <div class="heroGrid">
+        <div class="heroLeft">
+          <p class="app-eyebrow">RS-X Angular Demo</p>
+          <h1 class="hTitle">Virtual Table</h1>
+          <p class="hSubhead">
+            Million-row scrolling with a fixed RS-X expression pool.
+          </p>
+          <p class="hSub">
+            This demo keeps rendering bounded while streaming pages on demand,
+            so scrolling stays smooth without growing expression memory with the
+            dataset.
+          </p>
+
+          <div class="heroActions">
+            <a
+              class="btn btnGhost"
+              href="https://www.rsxjs.com/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              rs-x
+            </a>
+            <button
+              type="button"
+              class="btn btnGhost theme-toggle"
+              (click)="toggleTheme()"
+              [attr.aria-label]="
+                'Switch to ' + (theme === 'dark' ? 'light' : 'dark') + ' mode'
+              "
+            >
+              {{ theme === 'dark' ? 'Light mode' : 'Dark mode' }}
+            </button>
+          </div>
+        </div>
+
+        <aside class="card heroNote">
+          <h2 class="cardTitle">What This Shows</h2>
+          <p class="cardText">
+            Only a small row-model pool stays alive while pages stream in around
+            the viewport. That means one million logical rows without one
+            million live bindings.
+          </p>
+        </aside>
+      </div>
+    </div>
+  </section>
+
+  <section class="section">
+    <div class="container">
+      <section class="app-panel card">
+        <rsx-virtual-table></rsx-virtual-table>
+      </section>
+    </div>
+  </section>
+</main>

package/templates/angular-demo/src/app/app.component.ts

@@ -0,0 +1,52 @@
+import { DOCUMENT } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  inject,
+  OnInit,
+} from '@angular/core';
+
+import { VirtualTableComponent } from './virtual-table/virtual-table.component';
+
+type ThemeMode = 'light' | 'dark';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [VirtualTableComponent],
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AppComponent implements OnInit {
+  private readonly _document = inject(DOCUMENT);
+  @HostBinding('class.theme-dark') public isDarkTheme = false;
+  public theme: ThemeMode = 'light';
+
+  public ngOnInit(): void {
+    this.theme = this.getInitialTheme();
+    this.applyTheme(this.theme);
+  }
+
+  public toggleTheme(): void {
+    this.theme = this.theme === 'dark' ? 'light' : 'dark';
+    this.applyTheme(this.theme);
+    window.localStorage.setItem('rsx-theme', this.theme);
+  }
+
+  private getInitialTheme(): ThemeMode {
+    const storedTheme = window.localStorage.getItem('rsx-theme');
+    if (storedTheme === 'light' || storedTheme === 'dark') {
+      return storedTheme;
+    }
+
+    return 'light';
+  }
+
+  private applyTheme(theme: ThemeMode): void {
+    this.isDarkTheme = theme === 'dark';
+    this._document.documentElement.setAttribute('data-theme', theme);
+    this._document.body.setAttribute('data-theme', theme);
+  }
+}

package/templates/angular-demo/src/app/virtual-table/row-data.ts

@@ -0,0 +1,35 @@
+export type SortKey = 'id' | 'name' | 'price' | 'quantity' | 'category';
+export type SortDirection = 'asc' | 'desc';
+
+export type RowData = {
+  id: number;
+  name: string;
+  price: number;
+  quantity: number;
+  category: string;
+  updatedAt: string;
+};
+
+const categories = ['Hardware', 'Software', 'Design', 'Ops'];
+
+function pad(value: number): string {
+  return value.toString().padStart(2, '0');
+}
+
+export function createRowData(id: number): RowData {
+  const zeroBasedId = id - 1;
+  const price = 25 + (zeroBasedId % 1000) / 10;
+  const quantity = 1 + (Math.floor(zeroBasedId / 1000) % 100);
+  const category = categories[zeroBasedId % categories.length] ?? 'General';
+  const month = pad(((zeroBasedId * 7) % 12) + 1);
+  const day = pad(((zeroBasedId * 11) % 28) + 1);
+
+  return {
+    id,
+    name: `Product ${id.toString().padStart(7, '0')}`,
+    price,
+    quantity,
+    category,
+    updatedAt: `2026-${month}-${day}`,
+  };
+}

package/templates/angular-demo/src/app/virtual-table/row-model.ts

@@ -0,0 +1,45 @@
+import { type IExpression, rsx } from '@rs-x/expression-parser';
+
+import type { RowData } from './row-data';
+
+export type RowModel = {
+  model: RowData;
+  idExpr: IExpression<number>;
+  nameExpr: IExpression<string>;
+  categoryExpr: IExpression<string>;
+  priceExpr: IExpression<number>;
+  quantityExpr: IExpression<number>;
+  updatedAtExpr: IExpression<string>;
+  totalExpr: IExpression<number>;
+};
+
+export function createRowModel(): RowModel {
+  const model: RowData = {
+    id: 0,
+    name: '',
+    price: 0,
+    quantity: 0,
+    category: 'General',
+    updatedAt: '2026-01-01',
+  };
+
+  return {
+    model,
+    idExpr: rsx<number>('id')(model),
+    nameExpr: rsx<string>('name')(model),
+    categoryExpr: rsx<string>('category')(model),
+    priceExpr: rsx<number>('price')(model),
+    quantityExpr: rsx<number>('quantity')(model),
+    updatedAtExpr: rsx<string>('updatedAt')(model),
+    totalExpr: rsx<number>('price * quantity')(model),
+  };
+}
+
+export function updateRowModel(target: RowModel, data: RowData): void {
+  target.model.id = data.id;
+  target.model.name = data.name;
+  target.model.price = data.price;
+  target.model.quantity = data.quantity;
+  target.model.category = data.category;
+  target.model.updatedAt = data.updatedAt;
+}

package/templates/angular-demo/src/app/virtual-table/virtual-table-data.service.ts

@@ -0,0 +1,136 @@
+import {
+  createRowData,
+  type RowData,
+  type SortDirection,
+  type SortKey,
+} from './row-data';
+
+export type VirtualTablePage = {
+  total: number;
+  items: RowData[];
+};
+
+const TOTAL_ROWS = 1_000_000;
+const REQUEST_DELAY_MS = 120;
+const CATEGORY_COUNT = 4;
+const PRICE_BUCKET_COUNT = 1_000;
+const QUANTITY_BUCKET_COUNT = 100;
+const MAX_CACHED_PAGES = 24;
+
+export class VirtualTableDataService {
+  private readonly _pageCache = new Map<string, VirtualTablePage>();
+
+  public get totalRows(): number {
+    return TOTAL_ROWS;
+  }
+
+  public async fetchPage(
+    pageIndex: number,
+    pageSize: number,
+    sortKey: SortKey,
+    sortDirection: SortDirection,
+  ): Promise<VirtualTablePage> {
+    const cacheKey = `${sortKey}:${sortDirection}:${pageIndex}:${pageSize}`;
+    const cached = this._pageCache.get(cacheKey);
+    if (cached) {
+      return cached;
+    }
+
+    await this.delay(REQUEST_DELAY_MS + (pageIndex % 5) * 35);
+
+    const startIndex = pageIndex * pageSize;
+    const items: RowData[] = [];
+    const endIndex = Math.min(startIndex + pageSize, TOTAL_ROWS);
+
+    for (
+      let visualIndex = startIndex;
+      visualIndex < endIndex;
+      visualIndex += 1
+    ) {
+      const id = this.getIdAtVisualIndex(visualIndex, sortKey, sortDirection);
+      items.push(createRowData(id));
+    }
+
+    const page = {
+      total: TOTAL_ROWS,
+      items,
+    };
+    this._pageCache.set(cacheKey, page);
+    this.trimCache();
+    return page;
+  }
+
+  private getIdAtVisualIndex(
+    visualIndex: number,
+    sortKey: SortKey,
+    sortDirection: SortDirection,
+  ): number {
+    const normalizedIndex =
+      sortDirection === 'asc' ? visualIndex : TOTAL_ROWS - 1 - visualIndex;
+
+    if (sortKey === 'price') {
+      return this.getPriceSortedId(normalizedIndex);
+    }
+
+    if (sortKey === 'quantity') {
+      return this.getQuantitySortedId(normalizedIndex);
+    }
+
+    if (sortKey === 'category') {
+      return this.getCategorySortedId(normalizedIndex);
+    }
+
+    // Name follows id order because names are deterministic from the row id.
+    return normalizedIndex + 1;
+  }
+
+  private getPriceSortedId(visualIndex: number): number {
+    const groupSize = TOTAL_ROWS / PRICE_BUCKET_COUNT;
+    const priceBucket = Math.floor(visualIndex / groupSize);
+    const offsetInBucket = visualIndex % groupSize;
+
+    return priceBucket + offsetInBucket * PRICE_BUCKET_COUNT + 1;
+  }
+
+  private getQuantitySortedId(visualIndex: number): number {
+    const groupSize = TOTAL_ROWS / QUANTITY_BUCKET_COUNT;
+    const quantityBucket = Math.floor(visualIndex / groupSize);
+    const offsetInBucket = visualIndex % groupSize;
+    const quantityStride = PRICE_BUCKET_COUNT * QUANTITY_BUCKET_COUNT;
+    const quantityBlock = Math.floor(offsetInBucket / PRICE_BUCKET_COUNT);
+    const priceBucket = offsetInBucket % PRICE_BUCKET_COUNT;
+
+    return (
+      priceBucket +
+      quantityBucket * PRICE_BUCKET_COUNT +
+      quantityBlock * quantityStride +
+      1
+    );
+  }
+
+  private getCategorySortedId(visualIndex: number): number {
+    const groupSize = TOTAL_ROWS / CATEGORY_COUNT;
+    const categoryBucket = Math.floor(visualIndex / groupSize);
+    const offsetInBucket = visualIndex % groupSize;
+
+    return categoryBucket + offsetInBucket * CATEGORY_COUNT + 1;
+  }
+
+  private delay(durationMs: number): Promise<void> {
+    return new Promise((resolve) => {
+      window.setTimeout(resolve, durationMs);
+    });
+  }
+
+  private trimCache(): void {
+    while (this._pageCache.size > MAX_CACHED_PAGES) {
+      const oldestKey = this._pageCache.keys().next().value as
+        | string
+        | undefined;
+      if (!oldestKey) {
+        return;
+      }
+      this._pageCache.delete(oldestKey);
+    }
+  }
+}

package/templates/angular-demo/src/app/virtual-table/virtual-table-model.ts

@@ -0,0 +1,224 @@
+import { type IExpression, rsx } from '@rs-x/expression-parser';
+
+import { type RowData, type SortDirection, type SortKey } from './row-data';
+import { createRowModel, type RowModel, updateRowModel } from './row-model';
+import { VirtualTableDataService } from './virtual-table-data.service';
+
+export type RowView = {
+  index: number;
+  top: number;
+  row: RowModel;
+};
+
+const ROW_HEIGHT = 36;
+const PAGE_SIZE = 50;
+const POOL_PAGES = 4;
+const CACHE_PADDING_PAGES = 2;
+const RETAIN_PADDING_PAGES = 4;
+
+export class VirtualTableModel {
+  public rowHeight = ROW_HEIGHT;
+  public readonly pageSize = PAGE_SIZE;
+  public readonly poolSize = PAGE_SIZE * POOL_PAGES;
+  public readonly totalRows: number;
+
+  public scrollTop = 0;
+  public viewportHeight = 480;
+  public sortKey: SortKey = 'id';
+  public sortDirection: SortDirection = 'asc';
+  public spacerHeight: number;
+  public rowsInView = Math.max(
+    1,
+    Math.ceil(this.viewportHeight / this.rowHeight),
+  );
+  public visibleRows: RowView[] = [];
+  public readonly rowsExpression: IExpression<RowView[]>;
+
+  private readonly rowsModel = {
+    rows: [] as RowView[],
+  };
+  private readonly pool = Array.from({ length: this.poolSize }, () =>
+    createRowModel(),
+  );
+  private readonly dataByIndex = new Map<number, RowData>();
+  private readonly loadedPages = new Set<number>();
+  private readonly pageLoading = new Map<number, Promise<void>>();
+  private readonly dataService = new VirtualTableDataService();
+
+  public constructor() {
+    this.totalRows = this.dataService.totalRows;
+    this.spacerHeight = this.totalRows * this.rowHeight;
+    this.rowsExpression = rsx<RowView[]>('rows')(this.rowsModel);
+    this.refresh();
+  }
+
+  public get loadedPageCount(): number {
+    return this.loadedPages.size;
+  }
+
+  public setViewportHeight(height: number): void {
+    this.viewportHeight = height;
+    this.rowsInView = Math.max(
+      1,
+      Math.ceil(this.viewportHeight / this.rowHeight),
+    );
+    this.refresh();
+  }
+
+  public setRowHeight(height: number): void {
+    if (this.rowHeight === height) {
+      return;
+    }
+
+    this.rowHeight = height;
+    this.spacerHeight = this.totalRows * this.rowHeight;
+    this.rowsInView = Math.max(
+      1,
+      Math.ceil(this.viewportHeight / this.rowHeight),
+    );
+    this.refresh();
+  }
+
+  public setScrollTop(value: number): void {
+    this.scrollTop = value;
+    this.refresh();
+  }
+
+  public toggleSort(nextKey: SortKey): void {
+    if (this.sortKey === nextKey) {
+      this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
+    } else {
+      this.sortKey = nextKey;
+      this.sortDirection = 'asc';
+    }
+
+    this.resetLoadedData();
+    this.refresh();
+  }
+
+  private refresh(): void {
+    const scrollIndex = Math.floor(this.scrollTop / this.rowHeight);
+    const bufferTop = Math.max(
+      0,
+      Math.floor((this.poolSize - this.rowsInView) / 2),
+    );
+    const maxStart = Math.max(0, this.totalRows - this.poolSize);
+    const startIndex = Math.min(Math.max(scrollIndex - bufferTop, 0), maxStart);
+    const endIndex = Math.min(startIndex + this.poolSize, this.totalRows);
+    const startPage = Math.max(
+      0,
+      Math.floor(startIndex / this.pageSize) - CACHE_PADDING_PAGES,
+    );
+    const endPage = Math.min(
+      Math.floor((endIndex - 1) / this.pageSize) + CACHE_PADDING_PAGES,
+      Math.floor((this.totalRows - 1) / this.pageSize),
+    );
+
+    this.ensurePages(startPage, endPage);
+    this.pruneCachedPages(startPage, endPage);
+
+    const nextRows: RowView[] = [];
+    const length = endIndex - startIndex;
+
+    for (let offset = 0; offset < length; offset += 1) {
+      const index = startIndex + offset;
+      const target = this.pool[offset];
+      updateRowModel(target, this.getRowData(index));
+
+      nextRows.push({
+        index,
+        top: index * this.rowHeight,
+        row: target,
+      });
+    }
+
+    this.rowsModel.rows = nextRows;
+    this.visibleRows = nextRows;
+  }
+
+  private ensurePages(startPage: number, endPage: number): void {
+    for (let pageIndex = startPage; pageIndex <= endPage; pageIndex += 1) {
+      this.ensurePageLoaded(pageIndex);
+    }
+  }
+
+  private ensurePageLoaded(pageIndex: number): void {
+    if (this.loadedPages.has(pageIndex) || this.pageLoading.has(pageIndex)) {
+      return;
+    }
+
+    const task = this.loadPageAsync(pageIndex).finally(() => {
+      this.pageLoading.delete(pageIndex);
+      this.loadedPages.add(pageIndex);
+      this.refresh();
+    });
+
+    this.pageLoading.set(pageIndex, task);
+  }
+
+  private async loadPageAsync(pageIndex: number): Promise<void> {
+    const page = await this.dataService.fetchPage(
+      pageIndex,
+      this.pageSize,
+      this.sortKey,
+      this.sortDirection,
+    );
+    const startIndex = pageIndex * this.pageSize;
+
+    for (let offset = 0; offset < page.items.length; offset += 1) {
+      const item = page.items[offset];
+      if (!item) {
+        continue;
+      }
+
+      this.dataByIndex.set(startIndex + offset, item);
+    }
+  }
+
+  private getRowData(index: number): RowData {
+    const cached = this.dataByIndex.get(index);
+    if (cached) {
+      return cached;
+    }
+
+    return this.buildPlaceholderRow(index);
+  }
+
+  private buildPlaceholderRow(index: number): RowData {
+    return {
+      id: index + 1,
+      name: 'Loading...',
+      price: 0,
+      quantity: 0,
+      category: 'Pending',
+      updatedAt: '--',
+    };
+  }
+
+  private resetLoadedData(): void {
+    this.dataByIndex.clear();
+    this.loadedPages.clear();
+    this.pageLoading.clear();
+  }
+
+  private pruneCachedPages(startPage: number, endPage: number): void {
+    const minPage = Math.max(0, startPage - RETAIN_PADDING_PAGES);
+    const maxPage = Math.min(
+      Math.floor((this.totalRows - 1) / this.pageSize),
+      endPage + RETAIN_PADDING_PAGES,
+    );
+
+    for (const pageIndex of Array.from(this.loadedPages)) {
+      if (pageIndex >= minPage && pageIndex <= maxPage) {
+        continue;
+      }
+
+      this.loadedPages.delete(pageIndex);
+      const pageStart = pageIndex * this.pageSize;
+      const pageEnd = Math.min(pageStart + this.pageSize, this.totalRows);
+      for (let index = pageStart; index < pageEnd; index += 1) {
+        this.dataByIndex.delete(index);
+      }
+    }
+  }
+}