@rs-x/cli 2.0.0-next.16 → 2.0.0-next.18

package/bin/rsx.cjs

@@ -27,6 +27,12 @@ const REACT_DEMO_TEMPLATE_DIR = path.join(
   'templates',
   'react-demo',
 );
+const VUE_DEMO_TEMPLATE_DIR = path.join(
+  __dirname,
+  '..',
+  'templates',
+  'vue-demo',
+);
 const NEXT_DEMO_TEMPLATE_DIR = path.join(
   __dirname,
   '..',
@@ -669,6 +675,77 @@ function writeFileWithDryRun(filePath, content, dryRun) {
   fs.writeFileSync(filePath, content, 'utf8');
 }
 
+function stripJsonComments(content) {
+  let result = '';
+  let inString = false;
+  let stringDelimiter = '"';
+  let inLineComment = false;
+  let inBlockComment = false;
+
+  for (let index = 0; index < content.length; index += 1) {
+    const current = content[index];
+    const next = content[index + 1];
+
+    if (inLineComment) {
+      if (current === '\n') {
+        inLineComment = false;
+        result += current;
+      }
+      continue;
+    }
+
+    if (inBlockComment) {
+      if (current === '*' && next === '/') {
+        inBlockComment = false;
+        index += 1;
+      }
+      continue;
+    }
+
+    if (inString) {
+      result += current;
+      if (current === '\\') {
+        index += 1;
+        if (index < content.length) {
+          result += content[index];
+        }
+        continue;
+      }
+      if (current === stringDelimiter) {
+        inString = false;
+      }
+      continue;
+    }
+
+    if (current === '"' || current === "'") {
+      inString = true;
+      stringDelimiter = current;
+      result += current;
+      continue;
+    }
+
+    if (current === '/' && next === '/') {
+      inLineComment = true;
+      index += 1;
+      continue;
+    }
+
+    if (current === '/' && next === '*') {
+      inBlockComment = true;
+      index += 1;
+      continue;
+    }
+
+    result += current;
+  }
+
+  return result;
+}
+
+function parseJsonc(content) {
+  return JSON.parse(stripJsonComments(content.replace(/^\uFEFF/u, '')));
+}
+
 function copyPathWithDryRun(sourcePath, targetPath, dryRun) {
   if (dryRun) {
     logInfo(`[dry-run] copy ${sourcePath} -> ${targetPath}`);
@@ -720,7 +797,7 @@ function upsertTypescriptPluginInTsConfig(configPath, dryRun) {
     return;
   }
 
-  const tsConfig = JSON.parse(fs.readFileSync(configPath, 'utf8'));
+  const tsConfig = parseJsonc(fs.readFileSync(configPath, 'utf8'));
   const compilerOptions = tsConfig.compilerOptions ?? {};
   const plugins = Array.isArray(compilerOptions.plugins)
     ? compilerOptions.plugins
@@ -748,6 +825,26 @@ function upsertTypescriptPluginInTsConfig(configPath, dryRun) {
   fs.writeFileSync(configPath, `${JSON.stringify(tsConfig, null, 2)}\n`, 'utf8');
 }
 
+function ensureTsConfigIncludePattern(configPath, pattern, dryRun) {
+  if (!fs.existsSync(configPath)) {
+    return;
+  }
+
+  const tsConfig = parseJsonc(fs.readFileSync(configPath, 'utf8'));
+  const include = Array.isArray(tsConfig.include) ? tsConfig.include : [];
+  if (!include.includes(pattern)) {
+    include.push(pattern);
+  }
+  tsConfig.include = include;
+
+  if (dryRun) {
+    logInfo(`[dry-run] patch ${configPath}`);
+    return;
+  }
+
+  fs.writeFileSync(configPath, `${JSON.stringify(tsConfig, null, 2)}\n`, 'utf8');
+}
+
 function toFileDependencySpec(fromDir, targetPath) {
   const relative = path.relative(fromDir, targetPath).replace(/\\/gu, '/');
   const normalized = relative.startsWith('.') ? relative : `./${relative}`;
@@ -798,6 +895,7 @@ function resolveProjectRsxSpecs(
 ) {
   const includeAngularPackage = Boolean(options.includeAngularPackage);
   const includeReactPackage = Boolean(options.includeReactPackage);
+  const includeVuePackage = Boolean(options.includeVuePackage);
   const versionSpec = options.tag ? options.tag : RSX_PACKAGE_VERSION;
   const defaults = {
     '@rs-x/core': versionSpec,
@@ -807,6 +905,7 @@ function resolveProjectRsxSpecs(
     '@rs-x/typescript-plugin': versionSpec,
     ...(includeAngularPackage ? { '@rs-x/angular': versionSpec } : {}),
     ...(includeReactPackage ? { '@rs-x/react': versionSpec } : {}),
+    ...(includeVuePackage ? { '@rs-x/vue': versionSpec } : {}),
     '@rs-x/cli': versionSpec,
   };
 
@@ -818,6 +917,7 @@ function resolveProjectRsxSpecs(
     '@rs-x/typescript-plugin': 'rs-x-typescript-plugin',
     ...(includeAngularPackage ? { '@rs-x/angular': 'rs-x-angular' } : {}),
     ...(includeReactPackage ? { '@rs-x/react': 'rs-x-react' } : {}),
+    ...(includeVuePackage ? { '@rs-x/vue': 'rs-x-vue' } : {}),
     '@rs-x/cli': 'rs-x-cli',
   };
 
@@ -845,6 +945,11 @@ function resolveProjectRsxSpecs(
             'rs-x-react': path.join(tarballsDir, 'rs-x-react'),
           }
         : {}),
+      ...(includeVuePackage
+        ? {
+            'rs-x-vue': path.join(tarballsDir, 'rs-x-vue'),
+          }
+        : {}),
       'rs-x-cli': path.join(tarballsDir, 'rs-x-cli'),
     };
 
@@ -893,6 +998,11 @@ function resolveProjectRsxSpecs(
           '@rs-x/react': path.join(workspaceRoot, 'rs-x-react'),
         }
       : {}),
+    ...(includeVuePackage
+      ? {
+          '@rs-x/vue': path.join(workspaceRoot, 'rs-x-vue'),
+        }
+      : {}),
     '@rs-x/cli': path.join(workspaceRoot, 'rs-x-cli'),
   };
 
@@ -1687,6 +1797,120 @@ function applyReactDemoStarter(projectRoot, projectName, pm, flags) {
   }
 }
 
+function applyVueDemoStarter(projectRoot, projectName, pm, flags) {
+  const dryRun = Boolean(flags['dry-run']);
+  const tag = resolveInstallTag(flags);
+  const tarballsDir =
+    typeof flags['tarballs-dir'] === 'string'
+      ? path.resolve(process.cwd(), flags['tarballs-dir'])
+      : typeof process.env.RSX_TARBALLS_DIR === 'string' &&
+          process.env.RSX_TARBALLS_DIR.trim().length > 0
+        ? path.resolve(process.cwd(), process.env.RSX_TARBALLS_DIR)
+        : null;
+  const workspaceRoot = findRepoRoot(projectRoot);
+  const rsxSpecs = resolveProjectRsxSpecs(
+    projectRoot,
+    workspaceRoot,
+    tarballsDir,
+    { tag, includeVuePackage: true },
+  );
+
+  const templateFiles = ['README.md', 'src'];
+  for (const entry of templateFiles) {
+    copyPathWithDryRun(
+      path.join(VUE_DEMO_TEMPLATE_DIR, entry),
+      path.join(projectRoot, entry),
+      dryRun,
+    );
+  }
+
+  const staleVueFiles = [
+    path.join(projectRoot, 'public'),
+    path.join(projectRoot, 'src/components/HelloWorld.vue'),
+    path.join(projectRoot, 'src/assets'),
+  ];
+  for (const stalePath of staleVueFiles) {
+    removeFileOrDirectoryWithDryRun(stalePath, dryRun);
+  }
+
+  const readmePath = path.join(projectRoot, 'README.md');
+  if (fs.existsSync(readmePath)) {
+    const readmeSource = fs.readFileSync(readmePath, 'utf8');
+    const nextReadme = readmeSource.replace(
+      /^#\s+rsx-vue-example/mu,
+      `# ${projectName}`,
+    );
+    if (dryRun) {
+      logInfo(`[dry-run] patch ${readmePath}`);
+    } else {
+      fs.writeFileSync(readmePath, nextReadme, 'utf8');
+    }
+  }
+
+  const packageJsonPath = path.join(projectRoot, 'package.json');
+  if (!fs.existsSync(packageJsonPath)) {
+    logError(`package.json not found in generated Vue app: ${packageJsonPath}`);
+    process.exit(1);
+  }
+
+  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+  packageJson.name = projectName;
+  packageJson.private = true;
+  packageJson.version = '0.1.0';
+  packageJson.type = 'module';
+  packageJson.scripts = {
+    'build:rsx': 'rsx build --project tsconfig.app.json --no-emit --prod',
+    'typecheck:rsx': 'rsx typecheck --project tsconfig.app.json',
+    dev: 'npm run build:rsx && vite',
+    build: 'npm run build:rsx && vue-tsc -b && vite build',
+    preview: 'vite preview',
+  };
+  packageJson.rsx = {
+    build: {
+      preparse: true,
+      preparseFile: 'src/rsx-generated/rsx-aot-preparsed.generated.ts',
+      compiled: true,
+      compiledFile: 'src/rsx-generated/rsx-aot-compiled.generated.ts',
+      compiledResolvedEvaluator: false,
+    },
+  };
+  packageJson.dependencies = {
+    vue: packageJson.dependencies?.vue ?? '^3.5.30',
+    '@rs-x/core': rsxSpecs['@rs-x/core'],
+    '@rs-x/state-manager': rsxSpecs['@rs-x/state-manager'],
+    '@rs-x/expression-parser': rsxSpecs['@rs-x/expression-parser'],
+    '@rs-x/vue': rsxSpecs['@rs-x/vue'],
+  };
+  packageJson.devDependencies = {
+    ...(packageJson.devDependencies ?? {}),
+    '@rs-x/cli': rsxSpecs['@rs-x/cli'],
+    '@rs-x/compiler': rsxSpecs['@rs-x/compiler'],
+    '@rs-x/typescript-plugin': rsxSpecs['@rs-x/typescript-plugin'],
+  };
+
+  if (dryRun) {
+    logInfo(`[dry-run] patch ${packageJsonPath}`);
+  } else {
+    fs.writeFileSync(
+      packageJsonPath,
+      `${JSON.stringify(packageJson, null, 2)}\n`,
+      'utf8',
+    );
+  }
+
+  const tsConfigAppPath = path.join(projectRoot, 'tsconfig.app.json');
+  if (fs.existsSync(tsConfigAppPath)) {
+    upsertTypescriptPluginInTsConfig(tsConfigAppPath, dryRun);
+    ensureTsConfigIncludePattern(tsConfigAppPath, 'src/**/*.d.ts', dryRun);
+  }
+
+  if (!Boolean(flags['skip-install'])) {
+    logInfo(`Refreshing ${pm} dependencies for the RS-X Vue starter...`);
+    run(pm, ['install'], { dryRun });
+    logOk('Vue starter dependencies are up to date.');
+  }
+}
+
 function applyNextDemoStarter(projectRoot, projectName, pm, flags) {
   const dryRun = Boolean(flags['dry-run']);
   const tag = resolveInstallTag(flags);
@@ -1836,11 +2060,7 @@ async function runProjectWithTemplate(template, flags) {
       return;
     }
     if (normalizedTemplate === 'vuejs') {
-      runSetupVue({
-        ...flags,
-        entry: flags.entry ?? 'src/main.ts',
-      });
-      applyVueRsxTemplate(projectRoot, dryRun);
+      applyVueDemoStarter(projectRoot, projectName, pm, flags);
     }
   });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rs-x/cli",
-  "version": "2.0.0-next.16",
+  "version": "2.0.0-next.18",
   "description": "CLI for installing RS-X compiler tooling and VS Code integration",
   "bin": {
     "rsx": "./bin/rsx.cjs"

package/templates/next-demo/components/demo-app.tsx

@@ -9,6 +9,10 @@ import { VirtualTableShell } from './virtual-table-shell';
 type ThemeMode = 'light' | 'dark';
 
 function getInitialTheme(): ThemeMode {
+  if (typeof window === 'undefined') {
+    return 'dark';
+  }
+
   const storedTheme = window.localStorage.getItem('rsx-theme');
   if (storedTheme === 'light' || storedTheme === 'dark') {
     return storedTheme;

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,58 @@
+<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,
+  shallowRef,
+  type 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,
+  };
+}

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

@@ -0,0 +1,40 @@
+import { getCurrentScope, onMounted, onScopeDispose, type Ref } from 'vue';
+
+import type { VirtualTableController } from '../lib/virtual-table-controller';
+
+const COMPACT_BREAKPOINT_PX = 720;
+const DEFAULT_ROW_HEIGHT = 36;
+const COMPACT_ROW_HEIGHT = 168;
+
+export function useVirtualTableViewport(
+  controller: VirtualTableController,
+  viewportRef: Ref<HTMLDivElement | null>,
+): void {
+  let observer: ResizeObserver | undefined;
+
+  onMounted(() => {
+    const viewport = viewportRef.value;
+    if (!viewport) {
+      return;
+    }
+
+    const syncMetrics = (): void => {
+      controller.setViewportHeight(viewport.clientHeight);
+      controller.setRowHeight(
+        viewport.clientWidth <= COMPACT_BREAKPOINT_PX
+          ? COMPACT_ROW_HEIGHT
+          : DEFAULT_ROW_HEIGHT,
+      );
+    };
+
+    syncMetrics();
+    observer = new ResizeObserver(syncMetrics);
+    observer.observe(viewport);
+  });
+
+  if (getCurrentScope()) {
+    onScopeDispose(() => {
+      observer?.disconnect();
+    });
+  }
+}

package/templates/vue-demo/src/env.d.ts

@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+
+  const component: DefineComponent<Record<string, never>, Record<string, never>, unknown>;
+  export default component;
+}

package/templates/vue-demo/src/lib/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}`,
+  };
+}