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

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

@@ -0,0 +1,422 @@
+: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);
+  --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);
+  --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,
+#root {
+  min-height: 100%;
+}
+
+html {
+  color-scheme: dark;
+  background: var(--bg);
+}
+
+html[data-theme='light'] {
+  color-scheme: light;
+}
+
+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;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+.container {
+  max-width: var(--container);
+  margin: 0 auto;
+  padding: 0 var(--sp-6);
+}
+
+.app-shell {
+  min-height: 100vh;
+}
+
+.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);
+}
+
+.app-eyebrow {
+  margin: 0 0 var(--sp-4);
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  font-size: 0.82rem;
+  font-weight: 700;
+  color: var(--brand);
+}
+
+.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;
+  text-decoration: 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);
+}
+
+.app-panel {
+  backdrop-filter: blur(12px);
+}
+
+.theme-toggle {
+  cursor: pointer;
+}
+
+.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-of-type(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);
+}
+
+@media (max-width: 920px) {
+  .heroGrid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@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) {
+  .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);
+  }
+
+  .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;
+  }
+}

package/templates/react-demo/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "baseUrl": "./",
+    "plugins": [
+      {
+        "name": "@rs-x/typescript-plugin"
+      }
+    ]
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts"]
+}

package/templates/react-demo/vite.config.ts

@@ -0,0 +1,6 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [react()],
+});

package/templates/vue-demo/README.md

@@ -0,0 +1,27 @@
+# rsx-vue-example
+
+Website & docs: https://www.rsxjs.com/
+
+This starter shows how to use RS-X in a Vue 3 application with a million-row
+virtual table that keeps rendering and expression memory bounded.
+
+## Scripts
+
+- `npm run dev` runs the RS-X build step and starts Vite
+- `npm run build` generates RS-X artifacts and builds the production app
+- `npm run preview` previews the production build
+
+## Structure
+
+- `src/App.vue` contains the app shell and theme toggle
+- `src/components/` contains UI components
+- `src/composables/` contains reusable Vue composables
+- `src/lib/` contains RS-X bootstrap and virtual-table state/data utilities
+- `src/env.d.ts` declares Vue SFC modules for the RS-X build/typecheck pass
+
+## Notes
+
+- The demo defaults to dark mode.
+- It uses the `useRsxExpression` composable from `@rs-x/vue`.
+- The generated RS-X cache files in `src/rsx-generated` are created by
+  `npm run build:rsx`; they are not checked into the starter template.

package/templates/vue-demo/src/App.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+
+import VirtualTableShell from './components/VirtualTableShell.vue';
+
+type ThemeMode = 'light' | 'dark';
+
+const theme = ref<ThemeMode>('dark');
+
+onMounted(() => {
+  const storedTheme = window.localStorage.getItem('rsx-theme');
+  if (storedTheme === 'light' || storedTheme === 'dark') {
+    theme.value = storedTheme;
+  }
+});
+
+watch(
+  theme,
+  (nextTheme) => {
+    document.documentElement.setAttribute('data-theme', nextTheme);
+    document.body.setAttribute('data-theme', nextTheme);
+    window.localStorage.setItem('rsx-theme', nextTheme);
+  },
+  { immediate: true },
+);
+
+function toggleTheme(): void {
+  theme.value = theme.value === 'dark' ? 'light' : 'dark';
+}
+</script>
+
+<template>
+  <main class="app-shell">
+    <section class="hero">
+      <div class="container">
+        <div class="heroGrid">
+          <div class="heroLeft">
+            <p class="app-eyebrow">RS-X Vue 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"
+                :aria-label="`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`"
+                @click="toggleTheme"
+              >
+                {{ 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">
+          <VirtualTableShell />
+        </section>
+      </div>
+    </section>
+  </main>
+</template>

package/templates/vue-demo/src/components/VirtualTableRow.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { useRsxExpression } from '@rs-x/vue';
+
+import type { RowView } from '../lib/virtual-table-controller';
+
+const props = defineProps<{ item: RowView }>();
+
+const style = computed(() => ({
+  transform: `translateY(${props.item.top}px)`,
+}));
+
+const id = useRsxExpression(props.item.row.idExpr);
+const name = useRsxExpression(props.item.row.nameExpr);
+const category = useRsxExpression(props.item.row.categoryExpr);
+const price = useRsxExpression(props.item.row.priceExpr);
+const quantity = useRsxExpression(props.item.row.quantityExpr);
+const total = useRsxExpression(props.item.row.totalExpr);
+const updatedAt = useRsxExpression(props.item.row.updatedAtExpr);
+</script>
+
+<template>
+  <div class="table-row" :style="style">
+    <span data-label="ID">#{{ id ?? 0 }}</span>
+    <span data-label="Name">{{ name ?? '' }}</span>
+    <span data-label="Category">{{ category ?? '' }}</span>
+    <span data-label="Price">€{{ price ?? 0 }}</span>
+    <span data-label="Qty">{{ quantity ?? 0 }}</span>
+    <span data-label="Total" class="total">€{{ total ?? 0 }}</span>
+    <span data-label="Updated">{{ updatedAt ?? '--' }}</span>
+  </div>
+</template>

package/templates/vue-demo/src/components/VirtualTableShell.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { computed, useTemplateRef } from 'vue';
+
+import { useVirtualTableController } from '../composables/use-virtual-table-controller';
+import { useVirtualTableViewport } from '../composables/use-virtual-table-viewport';
+import VirtualTableRow from './VirtualTableRow.vue';
+
+const { controller, snapshot } = useVirtualTableController();
+const viewport = useTemplateRef<HTMLDivElement>('viewport');
+useVirtualTableViewport(controller, viewport);
+
+const visibleRows = computed(() => snapshot.value.visibleRows);
+</script>
+
+<template>
+  <section class="table-toolbar">
+    <div class="toolbar-left">
+      <h2>Inventory Snapshot</h2>
+      <p>
+        {{ snapshot.totalRows }} rows • {{ snapshot.poolSize }} pre-wired models
+      </p>
+    </div>
+    <div class="toolbar-right">
+      <button type="button" @click="controller.toggleSort('price')">
+        Sort by price
+      </button>
+      <button type="button" @click="controller.toggleSort('quantity')">
+        Sort by stock
+      </button>
+      <button type="button" @click="controller.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
+    ref="viewport"
+    class="table-viewport"
+    @scroll="
+      controller.setScrollTop(($event.target as HTMLDivElement).scrollTop)
+    "
+  >
+    <div
+      class="table-spacer"
+      :style="{ height: `${snapshot.spacerHeight}px` }"
+    />
+    <VirtualTableRow
+      v-for="item in visibleRows"
+      :key="item.index"
+      :item="item"
+    />
+  </div>
+
+  <div class="table-footer">
+    <div>
+      Rows in view: {{ snapshot.rowsInView }} • Loaded pages:
+      {{ snapshot.loadedPageCount }}
+    </div>
+    <div>Scroll to stream pages from a 1,000,000-row virtual dataset.</div>
+  </div>
+</template>

package/templates/vue-demo/src/composables/use-virtual-table-controller.ts

@@ -0,0 +1,33 @@
+import {
+  getCurrentScope,
+  onScopeDispose,
+  type ShallowRef,
+  shallowRef,
+} from 'vue';
+
+import {
+  VirtualTableController,
+  type VirtualTableSnapshot,
+} from '../lib/virtual-table-controller';
+
+export function useVirtualTableController(): {
+  controller: VirtualTableController;
+  snapshot: ShallowRef<VirtualTableSnapshot>;
+} {
+  const controller = new VirtualTableController();
+  const snapshot = shallowRef(controller.getSnapshot());
+  const unsubscribe = controller.subscribe(() => {
+    snapshot.value = controller.getSnapshot();
+  });
+
+  if (getCurrentScope()) {
+    onScopeDispose(() => {
+      unsubscribe();
+    });
+  }
+
+  return {
+    controller,
+    snapshot,
+  };
+}