@rs-x/cli 2.0.0-next.2 → 2.0.0-next.21

package/scripts/verify-rsx-setup.sh

@@ -0,0 +1,190 @@
+#!/bin/zsh
+
+set -u
+
+unset INIT_CWD
+unset npm_package_json
+unset npm_package_name
+unset npm_package_version
+unset npm_lifecycle_event
+unset npm_lifecycle_script
+unset npm_config_local_prefix
+unset npm_prefix
+unset npm_execpath
+unset npm_command
+unset npm_config_node_linker
+unset NPM_CONFIG_NODE_LINKER
+export CI=true
+
+script_dir="${0:A:h}"
+package_root="${script_dir:h}"
+rsx_cmd=(node "$package_root/bin/rsx.cjs")
+default_base_dir="$package_root/.tests/rsx-setup-smoke"
+prebuild_script="$script_dir/prepare-local-rsx-packages.sh"
+
+base_dir="${RSX_SETUP_VERIFY_DIR:-$default_base_dir}"
+work_base_dir="${RSX_SETUP_WORK_DIR:-$base_dir/workspace}"
+pm="${RSX_PM:-npm}"
+tag_flag="${RSX_TAG_FLAG:---next}"
+skip_vscode_flag="${RSX_SKIP_VSCODE_FLAG:---skip-vscode}"
+
+typeset -a summary_lines
+overall_status=0
+
+run_in_log() {
+  local log_file="$1"
+  shift
+
+  "$@" < /dev/null >"$log_file" 2>&1
+}
+
+run_in_dir_log() {
+  local project_dir="$1"
+  local log_file="$2"
+  shift 2
+
+  (
+    cd "$project_dir" || exit 1
+    "$@" < /dev/null
+  ) >"$log_file" 2>&1
+}
+
+print_log_tail() {
+  local log_file="$1"
+
+  printf '  log: %s\n' "$log_file"
+  printf '  last lines:\n'
+  tail -n 20 "$log_file" | sed 's/^/    /'
+}
+
+run_step() {
+  local framework="$1"
+  local step_name="$2"
+  local log_file="$3"
+  shift 3
+
+  printf '%s: %s...\n' "$framework" "$step_name"
+  if ! run_in_log "$log_file" "$@"; then
+    printf '%s: %s failed.\n' "$framework" "$step_name"
+    print_log_tail "$log_file"
+    return 1
+  fi
+
+  return 0
+}
+
+run_step_in_dir() {
+  local framework="$1"
+  local step_name="$2"
+  local project_dir="$3"
+  local log_file="$4"
+  shift 4
+
+  printf '%s: %s...\n' "$framework" "$step_name"
+  if ! run_in_dir_log "$project_dir" "$log_file" "$@"; then
+    printf '%s: %s failed.\n' "$framework" "$step_name"
+    print_log_tail "$log_file"
+    return 1
+  fi
+
+  return 0
+}
+
+rm -rf "$base_dir"
+mkdir -p "$base_dir"
+mkdir -p "$work_base_dir"
+cat > "$work_base_dir/package.json" <<'EOF'
+{
+  "name": "rsx-setup-smoke-workspace",
+  "private": true
+}
+EOF
+: > "$work_base_dir/.npmrc"
+
+printf 'Using workspace: %s\n' "$base_dir"
+printf 'Using project dir: %s\n' "$work_base_dir"
+printf 'Using package manager: %s\n' "$pm"
+printf 'Using tag flag: %s\n' "$tag_flag"
+
+printf 'Preparing local RS-X packages...\n'
+if ! run_in_log "$base_dir/prepare-packages.log" zsh "$prebuild_script"; then
+  printf 'Preparation failed.\n'
+  print_log_tail "$base_dir/prepare-packages.log"
+  exit 1
+fi
+
+verify_framework() {
+  local framework="$1"
+  local project_name="rsx-setup-${framework}-verify"
+  local project_dir="$work_base_dir/$project_name"
+  local project_arg="./$project_name"
+  local scaffold_log="$base_dir/${framework}-scaffold.log"
+  local install_log="$base_dir/${framework}-install.log"
+  local setup_log="$base_dir/${framework}-setup.log"
+  local setup_repeat_log="$base_dir/${framework}-setup-repeat.log"
+  local build_log="$base_dir/${framework}-build.log"
+
+  rm -rf "$project_dir"
+
+  printf '\n== %s ==\n' "$framework"
+
+  case "$framework" in
+    angular)
+      run_step_in_dir "$framework" "scaffold" "$work_base_dir" "$scaffold_log" \
+        npx @angular/cli@latest new "$project_name" --directory "$project_arg" --style css --routing --skip-git --skip-install --defaults \
+        || { summary_lines+=("$framework: scaffold failed"); overall_status=1; return; }
+      run_step_in_dir "$framework" "install" "$project_dir" "$install_log" "$pm" install \
+        || { summary_lines+=("$framework: install failed"); overall_status=1; return; }
+      ;;
+    react)
+      run_step_in_dir "$framework" "scaffold" "$work_base_dir" "$scaffold_log" \
+        npx create-vite@latest "$project_arg" --no-interactive --template react-ts \
+        || { summary_lines+=("$framework: scaffold failed"); overall_status=1; return; }
+      run_step_in_dir "$framework" "install" "$project_dir" "$install_log" "$pm" install \
+        || { summary_lines+=("$framework: install failed"); overall_status=1; return; }
+      ;;
+    vue)
+      run_step_in_dir "$framework" "scaffold" "$work_base_dir" "$scaffold_log" \
+        npx create-vite@latest "$project_arg" --no-interactive --template vue-ts \
+        || { summary_lines+=("$framework: scaffold failed"); overall_status=1; return; }
+      run_step_in_dir "$framework" "install" "$project_dir" "$install_log" "$pm" install \
+        || { summary_lines+=("$framework: install failed"); overall_status=1; return; }
+      ;;
+    next)
+      run_step_in_dir "$framework" "scaffold" "$work_base_dir" "$scaffold_log" \
+        npx create-next-app@latest "$project_arg" --ts --app --empty --use-npm --yes --disable-git \
+        || { summary_lines+=("$framework: scaffold failed"); overall_status=1; return; }
+      ;;
+    *)
+      printf 'Unknown framework: %s\n' "$framework"
+      summary_lines+=("$framework: unsupported")
+      overall_status=1
+      return
+      ;;
+  esac
+
+  run_step_in_dir "$framework" "rsx setup" "$project_dir" "$setup_log" "${rsx_cmd[@]}" setup --pm "$pm" "$tag_flag" "$skip_vscode_flag" \
+    || { summary_lines+=("$framework: rsx setup failed"); overall_status=1; return; }
+
+  run_step_in_dir "$framework" "rsx setup (repeat)" "$project_dir" "$setup_repeat_log" "${rsx_cmd[@]}" setup --pm "$pm" "$tag_flag" "$skip_vscode_flag" \
+    || { summary_lines+=("$framework: repeat rsx setup failed"); overall_status=1; return; }
+
+  run_step_in_dir "$framework" "build" "$project_dir" "$build_log" "$pm" run build \
+    || { summary_lines+=("$framework: build failed"); overall_status=1; return; }
+
+  printf '%s: build passed.\n' "$framework"
+  summary_lines+=("$framework: pass")
+}
+
+cd "$base_dir" || exit 1
+verify_framework angular
+verify_framework react
+verify_framework vue
+verify_framework next
+
+printf '\nSummary\n'
+for line in "${summary_lines[@]}"; do
+  printf '  %s\n' "$line"
+done
+
+exit "$overall_status"

package/templates/angular-demo/README.md

@@ -0,0 +1,115 @@
+# rsx-angular-example
+
+Angular demo app for RS-X.
+
+**Website & docs:** [rsxjs.com](https://www.rsxjs.com/)
+
+This example shows a million-row virtual table that:
+
+- uses the `rsx` pipe from `@rs-x/angular`
+- 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-angular-example
+npm install
+```
+
+## Start
+
+```bash
+npm start
+```
+
+`npm start` first runs the RS-X build step, then starts Angular.
+
+## Build
+
+```bash
+npm run build
+```
+
+This runs:
+
+1. `rsx build --project tsconfig.json --no-emit --prod`
+2. `ng build`
+
+So the example gets:
+
+- RS-X semantic checks
+- generated AOT RS-X caches
+- Angular production build output
+
+## Basic RS-X Angular setup
+
+The example uses the normal Angular RS-X setup:
+
+### 1. Register RS-X providers at bootstrap
+
+In `src/main.ts`:
+
+```ts
+import { bootstrapApplication } from '@angular/platform-browser';
+import { providexRsx } from '@rs-x/angular';
+
+bootstrapApplication(AppComponent, {
+  providers: [...providexRsx()],
+});
+```
+
+### 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 `RsxPipe`
+
+In `src/app/virtual-table/virtual-table.component.html`:
+
+```html
+<div *ngFor="let item of state.rowsExpression | rsx; trackBy: trackByIndex">
+  <span>{{ item.row.nameExpr | rsx }}</span>
+  <span>{{ item.row.totalExpr | rsx }}</span>
+</div>
+```
+
+## 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 Angular 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 `rsx` pipe in this demo
+
+This example uses the `rsx` pipe directly in the template so the RS-X behavior is easy to see.
+
+That is a demo choice, not a restriction.
+
+In a real Angular app, you can also adapt RS-X values into standard Angular constructs such as signals if that fits your component architecture better.
+
+## Key files
+
+- `src/main.ts`
+- `src/app/app.component.ts`
+- `src/app/app.component.html`
+- `src/app/virtual-table/virtual-table.component.ts`
+- `src/app/virtual-table/virtual-table.component.html`
+- `src/app/virtual-table/virtual-table-model.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/angular-demo/src/app/app.component.css

@@ -0,0 +1,97 @@
+:host {
+  display: block;
+  min-height: 100vh;
+  color: var(--text);
+  background: transparent;
+  transition: color 180ms ease;
+}
+
+.app-shell {
+  max-width: 1120px;
+  margin: 0 auto;
+  padding: 32px 24px 72px;
+}
+
+.app-header {
+  margin-bottom: 24px;
+}
+
+.app-header-top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 20px;
+}
+
+.app-eyebrow {
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  font-size: 12px;
+  color: var(--brand);
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.app-header h1 {
+  margin: 0 0 12px;
+  font-size: 34px;
+  line-height: 1.08;
+}
+
+.app-subtitle {
+  margin: 0;
+  color: var(--muted);
+  max-width: 640px;
+}
+
+.app-panel {
+  background: var(--surface);
+  border: 1px solid var(--border-soft);
+  border-radius: 24px;
+  padding: 24px;
+  box-shadow: var(--shadow-2);
+  backdrop-filter: blur(12px);
+}
+
+.theme-toggle {
+  border: 1px solid var(--border);
+  background: linear-gradient(
+    135deg,
+    color-mix(in srgb, var(--surface-solid) 92%, var(--brand) 8%),
+    color-mix(in srgb, var(--surface-solid) 92%, var(--brand-2) 8%)
+  );
+  color: var(--text);
+  border-radius: 999px;
+  padding: 10px 14px;
+  cursor: pointer;
+  box-shadow: var(--shadow-1);
+  transition:
+    transform 160ms ease,
+    border-color 160ms ease,
+    background 160ms ease;
+}
+
+.theme-toggle:hover {
+  transform: translateY(-1px);
+  border-color: var(--focus);
+}
+
+.theme-toggle:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+
+@media (max-width: 760px) {
+  .app-shell {
+    padding: 24px 16px 48px;
+  }
+
+  .app-header-top {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .theme-toggle {
+    align-self: flex-start;
+  }
+}

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 = 'dark';
+
+  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 'dark';
+  }
+
+  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;
+}