@rs-x/cli 2.0.0-next.0 → 2.0.0-next.11

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);
+      }
+    }
+  }
+}

package/templates/angular-demo/src/app/virtual-table/virtual-table.component.css

@@ -0,0 +1,174 @@
+:host {
+  display: block;
+}
+
+.table-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--border-soft);
+}
+
+.toolbar-left h2 {
+  margin: 0;
+  font-size: 20px;
+}
+
+.toolbar-left p {
+  margin: 4px 0 0;
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.toolbar-right {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.toolbar-right button {
+  border: 1px solid var(--border);
+  background: color-mix(in srgb, var(--surface-solid) 88%, var(--brand) 12%);
+  color: var(--text);
+  padding: 6px 12px;
+  border-radius: 999px;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.toolbar-right button:hover {
+  border-color: var(--focus);
+}
+
+.table-header {
+  display: grid;
+  grid-template-columns: 80px 1.4fr 1fr 0.8fr 0.6fr 1fr 0.9fr;
+  gap: 8px;
+  padding: 12px 8px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.table-viewport {
+  position: relative;
+  height: 520px;
+  overflow: auto;
+  border: 1px solid var(--border-soft);
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--surface-solid) 94%, transparent);
+}
+
+.table-spacer {
+  width: 100%;
+}
+
+.table-row {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 36px;
+  display: grid;
+  grid-template-columns: 80px 1.4fr 1fr 0.8fr 0.6fr 1fr 0.9fr;
+  align-items: center;
+  gap: 8px;
+  padding: 0 8px;
+  border-bottom: 1px solid var(--border-soft);
+  font-size: 13px;
+}
+
+.table-row:nth-child(odd) {
+  background: color-mix(in srgb, var(--surface-solid) 84%, transparent);
+}
+
+.table-row .total {
+  font-weight: 600;
+  color: var(--brand);
+}
+
+.table-footer {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 12px;
+  font-size: 12px;
+  color: var(--muted);
+}
+
+:host-context(.theme-dark) .table-viewport {
+  background: rgba(12, 18, 35, 0.88);
+}
+
+:host-context(.theme-dark) .table-row:nth-child(odd) {
+  background: rgba(255, 255, 255, 0.03);
+}
+
+:host-context(.theme-dark) .toolbar-right button {
+  background: rgba(122, 182, 255, 0.12);
+  border-color: rgba(237, 242, 255, 0.14);
+  color: #edf2ff;
+}
+
+@media (max-width: 900px) {
+  .table-header,
+  .table-row {
+    grid-template-columns: 72px 1.3fr 1fr 0.8fr 0.7fr 1fr;
+  }
+
+  .table-header span:last-child,
+  .table-row span:last-child {
+    display: none;
+  }
+}
+
+@media (max-width: 720px) {
+  .table-toolbar,
+  .table-footer {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .table-header {
+    display: none;
+  }
+
+  .table-viewport {
+    height: 460px;
+  }
+
+  .table-row {
+    height: 168px;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    align-content: start;
+    gap: 10px 16px;
+    padding: 14px 16px;
+    border: 1px solid var(--border-soft);
+    border-radius: 18px;
+    margin: 0 8px;
+  }
+
+  .table-row span {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
+    font-size: 0.95rem;
+  }
+
+  .table-row span::before {
+    content: attr(data-label);
+    color: var(--muted);
+    font-size: 0.72rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+  }
+
+  .table-row .total {
+    color: var(--brand);
+  }
+}

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

@@ -0,0 +1,50 @@
+<section class="table-toolbar">
+  <div class="toolbar-left">
+    <h2>Inventory Snapshot</h2>
+    <p>{{ state.totalRows }} rows • {{ state.poolSize }} pre-wired models</p>
+  </div>
+  <div class="toolbar-right">
+    <button type="button" (click)="toggleSort('price')">Sort by price</button>
+    <button type="button" (click)="toggleSort('quantity')">
+      Sort by stock
+    </button>
+    <button type="button" (click)="toggleSort('name')">Sort by name</button>
+  </div>
+</section>
+
+<div class="table-header">
+  <span>ID</span>
+  <span>Name</span>
+  <span>Category</span>
+  <span>Price</span>
+  <span>Qty</span>
+  <span>Total</span>
+  <span>Updated</span>
+</div>
+
+<div #scrollViewport class="table-viewport" (scroll)="onScroll($event)">
+  <div class="table-spacer" [style.height.px]="state.spacerHeight"></div>
+  <div
+    class="table-row"
+    *ngFor="let item of state.rowsExpression | rsx; trackBy: trackByIndex"
+    [style.transform]="'translateY(' + item.top + 'px)'"
+  >
+    <span data-label="ID">#{{ item.row.idExpr | rsx }}</span>
+    <span data-label="Name">{{ item.row.nameExpr | rsx }}</span>
+    <span data-label="Category">{{ item.row.categoryExpr | rsx }}</span>
+    <span data-label="Price">€{{ item.row.priceExpr | rsx }}</span>
+    <span data-label="Qty">{{ item.row.quantityExpr | rsx }}</span>
+    <span data-label="Total" class="total"
+      >€{{ item.row.totalExpr | rsx }}</span
+    >
+    <span data-label="Updated">{{ item.row.updatedAtExpr | rsx }}</span>
+  </div>
+</div>
+
+<div class="table-footer">
+  <div>
+    Rows in view: {{ state.rowsInView }} • Loaded pages:
+    {{ state.loadedPageCount }}
+  </div>
+  <div>Scroll to stream pages from a 1,000,000-row virtual dataset.</div>
+</div>

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

@@ -0,0 +1,83 @@
+import { CommonModule } from '@angular/common';
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  OnDestroy,
+  ViewChild,
+} from '@angular/core';
+
+import { RsxPipe } from '@rs-x/angular';
+
+import { type RowView, VirtualTableModel } from './virtual-table-model';
+
+@Component({
+  selector: 'rsx-virtual-table',
+  standalone: true,
+  imports: [CommonModule, RsxPipe],
+  templateUrl: './virtual-table.component.html',
+  styleUrls: ['./virtual-table.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class VirtualTableComponent implements AfterViewInit, OnDestroy {
+  private static readonly COMPACT_BREAKPOINT_PX = 720;
+  private static readonly DEFAULT_ROW_HEIGHT = 36;
+  private static readonly COMPACT_ROW_HEIGHT = 168;
+
+  public readonly state = new VirtualTableModel();
+
+  @ViewChild('scrollViewport', { static: true })
+  private readonly scrollViewport?: ElementRef<HTMLDivElement>;
+
+  private resizeObserver?: ResizeObserver;
+
+  public ngAfterViewInit(): void {
+    const viewport = this.scrollViewport?.nativeElement;
+    if (!viewport) {
+      return;
+    }
+
+    this.syncViewportMetrics(viewport);
+    this.resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        this.state.setViewportHeight(entry.contentRect.height);
+        this.state.setRowHeight(
+          entry.contentRect.width <= VirtualTableComponent.COMPACT_BREAKPOINT_PX
+            ? VirtualTableComponent.COMPACT_ROW_HEIGHT
+            : VirtualTableComponent.DEFAULT_ROW_HEIGHT,
+        );
+      }
+    });
+    this.resizeObserver.observe(viewport);
+  }
+
+  public ngOnDestroy(): void {
+    this.resizeObserver?.disconnect();
+  }
+
+  public onScroll(event: Event): void {
+    const target = event.target as HTMLDivElement | null;
+    if (!target) {
+      return;
+    }
+    this.state.setScrollTop(target.scrollTop);
+  }
+
+  public toggleSort(key: 'id' | 'name' | 'price' | 'quantity'): void {
+    this.state.toggleSort(key);
+  }
+
+  public trackByIndex(_: number, item: RowView): number {
+    return item.index;
+  }
+
+  private syncViewportMetrics(viewport: HTMLDivElement): void {
+    this.state.setViewportHeight(viewport.clientHeight);
+    this.state.setRowHeight(
+      viewport.clientWidth <= VirtualTableComponent.COMPACT_BREAKPOINT_PX
+        ? VirtualTableComponent.COMPACT_ROW_HEIGHT
+        : VirtualTableComponent.DEFAULT_ROW_HEIGHT,
+    );
+  }
+}

package/templates/angular-demo/src/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>RS-X Angular Virtual Table Demo</title>
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>

package/templates/angular-demo/src/main.ts

@@ -0,0 +1,16 @@
+import { enableProdMode, isDevMode } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
+
+import { providexRsx } from '@rs-x/angular';
+
+import { AppComponent } from './app/app.component';
+
+if (!isDevMode()) {
+  enableProdMode();
+}
+
+bootstrapApplication(AppComponent, {
+  providers: [...providexRsx()],
+}).catch((error) => {
+  console.error(error);
+});