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

package/templates/angular-demo/src/styles.css

@@ -0,0 +1,261 @@
+:root {
+  --font-sans:
+    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    sans-serif;
+  --font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+
+  --bg: #f6f8fc;
+  --surface: rgba(255, 255, 255, 0.86);
+  --surface-2: rgba(255, 255, 255, 0.72);
+  --surface-solid: #ffffff;
+  --text: #0b1324;
+  --muted: rgba(11, 19, 36, 0.66);
+  --border: rgba(10, 25, 55, 0.14);
+  --border-soft: rgba(10, 25, 55, 0.1);
+  --brand: #0b66ff;
+  --brand-2: #2bb6a9;
+  --focus: rgba(11, 102, 255, 0.35);
+  --shadow-1:
+    0 1px 2px rgba(16, 24, 40, 0.06), 0 12px 34px rgba(16, 24, 40, 0.1);
+  --shadow-2:
+    0 2px 10px rgba(16, 24, 40, 0.08), 0 18px 52px rgba(16, 24, 40, 0.12);
+  --page-glow-a: rgba(11, 102, 255, 0.06);
+  --page-glow-b: rgba(43, 182, 169, 0.05);
+  --code-surface: #f7f9ff;
+  --hero-section-bg: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.72),
+    rgba(255, 255, 255, 0.42)
+  );
+  --r-xl: 1.75rem;
+  --sp-2: 0.5rem;
+  --sp-3: 0.75rem;
+  --sp-4: 1rem;
+  --sp-5: 1.25rem;
+  --sp-6: 1.5rem;
+  --sp-7: 2rem;
+  --sp-8: 2.5rem;
+  --sp-9: 3rem;
+  --sp-10: 4rem;
+  --container: 1120px;
+}
+
+html[data-theme='dark'],
+body[data-theme='dark'] {
+  --bg: #070b14;
+  --surface: rgba(12, 18, 35, 0.82);
+  --surface-2: rgba(12, 18, 35, 0.68);
+  --surface-solid: #0c1223;
+  --text: #edf2ff;
+  --muted: rgba(237, 242, 255, 0.7);
+  --border: rgba(237, 242, 255, 0.16);
+  --border-soft: rgba(237, 242, 255, 0.12);
+  --brand: #7ab6ff;
+  --brand-2: #49d9c8;
+  --focus: rgba(122, 182, 255, 0.35);
+  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.22), 0 12px 34px rgba(0, 0, 0, 0.32);
+  --shadow-2: 0 2px 10px rgba(0, 0, 0, 0.24), 0 18px 52px rgba(0, 0, 0, 0.34);
+  --page-glow-a: rgba(122, 182, 255, 0.1);
+  --page-glow-b: rgba(73, 217, 200, 0.08);
+  --code-surface: #0f182b;
+  --hero-section-bg: linear-gradient(
+    180deg,
+    rgba(12, 18, 35, 0.56),
+    rgba(12, 18, 35, 0.24)
+  );
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+html {
+  color-scheme: light;
+  background: var(--bg);
+}
+
+html[data-theme='dark'] {
+  color-scheme: dark;
+  background: var(--bg);
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-sans);
+  color: var(--text);
+  background-color: var(--bg);
+  background:
+    radial-gradient(circle at top, var(--page-glow-a), transparent 32%),
+    radial-gradient(circle at 85% 12%, var(--page-glow-b), transparent 28%),
+    var(--bg);
+  transition:
+    background 180ms ease,
+    color 180ms ease;
+}
+
+html[data-theme='dark'] body,
+body[data-theme='dark'] {
+  background-color: var(--bg);
+  background:
+    radial-gradient(circle at top, var(--page-glow-a), transparent 32%),
+    radial-gradient(circle at 85% 12%, var(--page-glow-b), transparent 28%),
+    var(--bg);
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+.container {
+  max-width: var(--container);
+  margin: 0 auto;
+  padding: 0 var(--sp-6);
+}
+
+.hero {
+  position: relative;
+  padding: calc(var(--sp-10) + 1rem) 0 calc(var(--sp-8) + 0.5rem);
+  background: var(--hero-section-bg);
+}
+
+.heroGrid {
+  display: grid;
+  grid-template-columns: minmax(540px, 1.05fr) minmax(300px, 0.95fr);
+  column-gap: var(--sp-6);
+  row-gap: var(--sp-8);
+  align-items: center;
+}
+
+.heroLeft {
+  min-width: 0;
+  padding-top: var(--sp-4);
+}
+
+.hTitle {
+  margin: 0 0 var(--sp-5);
+  font-size: clamp(3.6rem, 5.2vw, 4.8rem);
+  line-height: 0.96;
+  letter-spacing: -0.052em;
+}
+
+.hSubhead {
+  margin: 0 0 var(--sp-2);
+  font-size: clamp(1.42rem, 2vw, 1.82rem);
+  font-weight: 640;
+  letter-spacing: -0.03em;
+  line-height: 1.08;
+}
+
+.hSub {
+  margin: var(--sp-5) 0 0;
+  color: var(--muted);
+  font-size: 1.1rem;
+  line-height: 1.72;
+  max-width: 31.5rem;
+}
+
+.heroActions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sp-3);
+  margin-top: var(--sp-5);
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sp-2);
+  padding: 0.82rem 1.18rem;
+  border-radius: 14px;
+  border: 1px solid transparent;
+  font-weight: 800;
+  line-height: 1;
+  white-space: nowrap;
+  transition:
+    transform 160ms ease,
+    background 240ms ease,
+    border-color 240ms ease,
+    box-shadow 240ms ease;
+}
+
+.btn:active {
+  transform: translateY(1px);
+}
+
+.btnGhost {
+  background: var(--surface-2);
+  color: var(--text);
+  border-color: var(--border);
+  box-shadow: none;
+}
+
+.btnGhost:hover {
+  box-shadow: var(--shadow-1);
+}
+
+.card {
+  position: relative;
+  min-width: 0;
+  border: 1px solid var(--border-soft);
+  background: linear-gradient(180deg, var(--surface), var(--surface-2));
+  border-radius: var(--r-xl);
+  padding: var(--sp-6);
+  box-shadow: var(--shadow-1);
+  display: flex;
+  flex-direction: column;
+}
+
+.cardTitle {
+  margin: 0 0 var(--sp-3);
+  font-weight: 700;
+  font-size: clamp(1.12rem, 0.96vw, 1.22rem);
+  letter-spacing: -0.02em;
+}
+
+.cardText {
+  margin: 0;
+  color: var(--muted);
+  line-height: 1.62;
+}
+
+.heroNote {
+  align-self: center;
+  margin-top: 0;
+}
+
+.section {
+  padding: var(--sp-7) 0 var(--sp-10);
+}
+
+@media (max-width: 920px) {
+  .heroGrid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 720px) {
+  .container {
+    padding: 0 var(--sp-4);
+  }
+
+  .hero {
+    padding: calc(var(--sp-8) + 0.5rem) 0 var(--sp-8);
+  }
+
+  .hTitle {
+    font-size: clamp(2.9rem, 14vw, 3.6rem);
+  }
+}

package/templates/react-demo/README.md

@@ -0,0 +1,113 @@
+# rsx-react-example
+
+React demo app for RS-X.
+
+**Website & docs:** [rsxjs.com](https://www.rsxjs.com/)
+
+This example shows a million-row virtual table that:
+
+- uses the `useRsxExpression` hook from `@rs-x/react`
+- creates row expressions with `rsx(...)`
+- keeps a fixed pool of row models and expressions
+- loads pages on demand while scrolling
+- keeps memory bounded by reusing the row pool and pruning old page data
+
+## Install
+
+```bash
+cd rsx-react-example
+npm install
+```
+
+## Start
+
+```bash
+npm run dev
+```
+
+`npm run dev` first runs the RS-X build step, then starts Vite.
+
+## Build
+
+```bash
+npm run build
+```
+
+This runs:
+
+1. `rsx build --project tsconfig.json --no-emit --prod`
+2. `vite build`
+
+So the example gets:
+
+- RS-X semantic checks
+- generated AOT RS-X caches
+- React production build output
+
+## Basic RS-X React setup
+
+The example uses the normal React RS-X setup:
+
+### 1. Initialize RS-X before rendering React
+
+In `src/rsx-bootstrap.ts`:
+
+```ts
+import { InjectionContainer } from '@rs-x/core';
+import { RsXExpressionParserModule } from '@rs-x/expression-parser';
+
+export async function initRsx(): Promise<void> {
+  await InjectionContainer.load(RsXExpressionParserModule);
+}
+```
+
+### 2. Create expressions with `rsx(...)`
+
+In `src/app/virtual-table/row-model.ts`:
+
+```ts
+idExpr: rsx<number>('id')(model),
+nameExpr: rsx<string>('name')(model),
+totalExpr: rsx<number>('price * quantity')(model),
+```
+
+### 3. Bind them with `useRsxExpression`
+
+In `src/app/virtual-table/virtual-table-row.tsx`:
+
+```tsx
+const total = useRsxExpression(row.totalExpr);
+return <span>{total}</span>;
+```
+
+## Why this example is useful
+
+The point of the demo is not just rendering a table. It shows how RS-X behaves in a realistic React scenario:
+
+- large logical dataset: `1,000,000` rows
+- small live expression pool: only the pooled row models stay active
+- page loading is async to simulate real server requests
+- old loaded pages are pruned so scrolling does not grow memory forever
+
+## About the React integration in this demo
+
+This example uses `useRsxExpression` directly in row components so the RS-X behavior is easy to see.
+
+That is a demo choice, not a restriction.
+
+In a real React app, you can also bridge RS-X values into other React-friendly state shapes such as `useSyncExternalStore`, memoized selectors, or your preferred state container if that fits better.
+
+## Key files
+
+- `src/main.tsx`
+- `src/rsx-bootstrap.ts`
+- `src/app/app.tsx`
+- `src/app/virtual-table/virtual-table-shell.tsx`
+- `src/app/virtual-table/virtual-table-row.tsx`
+- `src/app/virtual-table/virtual-table-controller.ts`
+- `src/app/virtual-table/virtual-table-data.service.ts`
+- `src/app/virtual-table/row-model.ts`
+
+## Notes
+
+- The virtual table uses a bounded pool and bounded page retention on purpose, so performance characteristics stay visible while memory stays under control.

package/templates/react-demo/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>RS-X React Demo</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/react-demo/src/app/app.tsx

@@ -0,0 +1,87 @@
+import { type FC, useEffect, useState } from 'react';
+
+import { VirtualTableShell } from './virtual-table/virtual-table-shell';
+
+type ThemeMode = 'light' | 'dark';
+
+function getInitialTheme(): ThemeMode {
+  const storedTheme = window.localStorage.getItem('rsx-theme');
+  if (storedTheme === 'light' || storedTheme === 'dark') {
+    return storedTheme;
+  }
+
+  return 'dark';
+}
+
+export const App: FC = () => {
+  const [theme, setTheme] = useState<ThemeMode>(() => getInitialTheme());
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme);
+    document.body.setAttribute('data-theme', theme);
+    window.localStorage.setItem('rsx-theme', theme);
+  }, [theme]);
+
+  return (
+    <main className="app-shell">
+      <section className="hero">
+        <div className="container">
+          <div className="heroGrid">
+            <div className="heroLeft">
+              <p className="app-eyebrow">RS-X React Demo</p>
+              <h1 className="hTitle">Virtual Table</h1>
+              <p className="hSubhead">
+                Million-row scrolling with a fixed RS-X expression pool.
+              </p>
+              <p className="hSub">
+                This demo keeps rendering bounded while streaming pages on demand,
+                so scrolling stays smooth without growing expression memory with the
+                dataset.
+              </p>
+
+              <div className="heroActions">
+                <a
+                  className="btn btnGhost"
+                  href="https://www.rsxjs.com/"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  rs-x
+                </a>
+                <button
+                  type="button"
+                  className="btn btnGhost theme-toggle"
+                  aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
+                  onClick={() => {
+                    setTheme((currentTheme) =>
+                      currentTheme === 'dark' ? 'light' : 'dark',
+                    );
+                  }}
+                >
+                  {theme === 'dark' ? 'Light mode' : 'Dark mode'}
+                </button>
+              </div>
+            </div>
+
+            <aside className="card heroNote">
+              <h2 className="cardTitle">What This Shows</h2>
+              <p className="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 className="section">
+        <div className="container">
+          <section className="app-panel card">
+            <VirtualTableShell />
+          </section>
+        </div>
+      </section>
+    </main>
+  );
+};

package/templates/react-demo/src/app/hooks/use-virtual-table-controller.ts

@@ -0,0 +1,24 @@
+import { useRef, useSyncExternalStore } from 'react';
+
+import {
+  VirtualTableController,
+  type VirtualTableSnapshot,
+} from '../virtual-table/virtual-table-controller';
+
+export function useVirtualTableController(): {
+  controller: VirtualTableController;
+  snapshot: VirtualTableSnapshot;
+} {
+  const controllerRef = useRef<VirtualTableController | null>(null);
+  if (!controllerRef.current) {
+    controllerRef.current = new VirtualTableController();
+  }
+  const controller = controllerRef.current;
+  const snapshot = useSyncExternalStore(
+    controller.subscribe,
+    controller.getSnapshot,
+    controller.getSnapshot,
+  );
+
+  return { controller, snapshot };
+}

package/templates/react-demo/src/app/hooks/use-virtual-table-viewport.ts

@@ -0,0 +1,39 @@
+import { type RefObject, useEffect, useRef } from 'react';
+
+import type { VirtualTableController } from '../virtual-table/virtual-table-controller';
+
+const COMPACT_BREAKPOINT_PX = 720;
+const DEFAULT_ROW_HEIGHT = 36;
+const COMPACT_ROW_HEIGHT = 168;
+
+export function useVirtualTableViewport(
+  controller: VirtualTableController,
+): RefObject<HTMLDivElement | null> {
+  const viewportRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const viewport = viewportRef.current;
+    if (!viewport) {
+      return;
+    }
+
+    const syncMetrics = (): void => {
+      controller.setViewportHeight(viewport.clientHeight);
+      controller.setRowHeight(
+        viewport.clientWidth <= COMPACT_BREAKPOINT_PX
+          ? COMPACT_ROW_HEIGHT
+          : DEFAULT_ROW_HEIGHT,
+      );
+    };
+
+    syncMetrics();
+    const observer = new ResizeObserver(syncMetrics);
+    observer.observe(viewport);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [controller]);
+
+  return viewportRef;
+}

package/templates/react-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/react-demo/src/app/virtual-table/row-model.ts

@@ -0,0 +1,45 @@
+import { rsx, type IExpression } 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;
+}