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

package/bin/rsx.cjs

@@ -5,8 +5,28 @@ const path = require('node:path');
 const readline = require('node:readline/promises');
 const { spawnSync } = require('node:child_process');
 
-const CLI_VERSION = '0.2.0';
+const CLI_VERSION = (() => {
+  try {
+    const packageJsonPath = path.join(__dirname, '..', 'package.json');
+    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+    return packageJson.version ?? '0.0.0';
+  } catch {
+    return '0.0.0';
+  }
+})();
 const VS_CODE_EXTENSION_ID = 'rs-x.rs-x-vscode-extension';
+const ANGULAR_DEMO_TEMPLATE_DIR = path.join(
+  __dirname,
+  '..',
+  'templates',
+  'angular-demo',
+);
+const REACT_DEMO_TEMPLATE_DIR = path.join(
+  __dirname,
+  '..',
+  'templates',
+  'react-demo',
+);
 const RUNTIME_PACKAGES = [
   '@rs-x/core',
   '@rs-x/state-manager',
@@ -178,15 +198,38 @@ function detectPackageManager(explicitPm) {
   return 'npm';
 }
 
+function applyTagToPackages(packages, tag) {
+  return packages.map((pkg) => {
+    const lastAt = pkg.lastIndexOf('@');
+    const slashIndex = pkg.indexOf('/');
+    const hasVersion = pkg.startsWith('@') ? lastAt > slashIndex : lastAt > 0;
+    if (hasVersion) {
+      return pkg;
+    }
+    return `${pkg}@${tag}`;
+  });
+}
+
+function resolveInstallTag(flags) {
+  return parseBooleanFlag(flags.next, false) ? 'next' : undefined;
+}
+
 function installPackages(pm, packages, options = {}) {
-  const { dev = false, dryRun = false, label = 'packages' } = options;
+  const { dev = false, dryRun = false, label = 'packages', tag } = options;
+  const resolvedPackages = tag ? applyTagToPackages(packages, tag) : packages;
   const argsByPm = {
-    pnpm: dev ? ['add', '-D', ...packages] : ['add', ...packages],
+    pnpm: dev
+      ? ['add', '-D', ...resolvedPackages]
+      : ['add', ...resolvedPackages],
     npm: dev
-      ? ['install', '--save-dev', ...packages]
-      : ['install', '--save', ...packages],
-    yarn: dev ? ['add', '--dev', ...packages] : ['add', ...packages],
-    bun: dev ? ['add', '--dev', ...packages] : ['add', ...packages],
+      ? ['install', '--save-dev', ...resolvedPackages]
+      : ['install', '--save', ...resolvedPackages],
+    yarn: dev
+      ? ['add', '--dev', ...resolvedPackages]
+      : ['add', ...resolvedPackages],
+    bun: dev
+      ? ['add', '--dev', ...resolvedPackages]
+      : ['add', ...resolvedPackages],
   };
 
   const installArgs = argsByPm[pm];
@@ -195,23 +238,26 @@ function installPackages(pm, packages, options = {}) {
     process.exit(1);
   }
 
-  logInfo(`Installing ${label} with ${pm}...`);
+  const tagInfo = tag ? ` (tag: ${tag})` : '';
+  logInfo(`Installing ${label} with ${pm}${tagInfo}...`);
   run(pm, installArgs, { dryRun });
   logOk(`Installed ${label}.`);
 }
 
-function installRuntimePackages(pm, dryRun) {
+function installRuntimePackages(pm, dryRun, tag) {
   installPackages(pm, RUNTIME_PACKAGES, {
     dev: false,
     dryRun,
+    tag,
     label: 'runtime RS-X packages',
   });
 }
 
-function installCompilerPackages(pm, dryRun) {
+function installCompilerPackages(pm, dryRun, tag) {
   installPackages(pm, COMPILER_PACKAGES, {
     dev: true,
     dryRun,
+    tag,
     label: 'compiler tooling',
   });
 }
@@ -236,14 +282,50 @@ function installVsCodeExtension(flags) {
     return;
   }
 
-  const args = ['--install-extension', VS_CODE_EXTENSION_ID];
+  installBundledVsix(dryRun, force);
+}
+
+function resolveBundledVsix() {
+  const packageRoot = path.resolve(__dirname, '..');
+  const candidates = fs
+    .readdirSync(packageRoot)
+    .filter((name) => /^rs-x-vscode-extension-.*\.vsix$/u.test(name))
+    .map((name) => path.join(packageRoot, name));
+
+  if (candidates.length === 0) {
+    return null;
+  }
+
+  const latest = candidates
+    .map((fullPath) => ({
+      fullPath,
+      mtimeMs: fs.statSync(fullPath).mtimeMs,
+    }))
+    .sort((a, b) => b.mtimeMs - a.mtimeMs)[0];
+
+  return latest?.fullPath ?? null;
+}
+
+function installBundledVsix(dryRun, force) {
+  const bundledVsix = resolveBundledVsix();
+  if (!bundledVsix) {
+    logWarn(
+      'No bundled VSIX found in @rs-x/cli. Skipping VS Code extension install.',
+    );
+    logInfo(
+      'If you are developing in the rs-x repo, use `rsx install vscode --local` instead.',
+    );
+    return;
+  }
+
+  const args = ['--install-extension', bundledVsix];
   if (force) {
     args.push('--force');
   }
 
-  logInfo(`Installing ${VS_CODE_EXTENSION_ID} from VS Code marketplace...`);
+  logInfo(`Installing bundled VSIX from ${bundledVsix}...`);
   run('code', args, { dryRun });
-  logOk('VS Code extension installed.');
+  logOk('VS Code extension installed from bundled VSIX.');
 }
 
 function installLocalVsix(dryRun, force) {
@@ -559,6 +641,85 @@ function writeFileWithDryRun(filePath, content, dryRun) {
   fs.writeFileSync(filePath, content, 'utf8');
 }
 
+function copyPathWithDryRun(sourcePath, targetPath, dryRun) {
+  if (dryRun) {
+    logInfo(`[dry-run] copy ${sourcePath} -> ${targetPath}`);
+    return;
+  }
+
+  const stat = fs.statSync(sourcePath);
+  if (stat.isDirectory()) {
+    fs.mkdirSync(targetPath, { recursive: true });
+    for (const entry of fs.readdirSync(sourcePath, { withFileTypes: true })) {
+      copyPathWithDryRun(
+        path.join(sourcePath, entry.name),
+        path.join(targetPath, entry.name),
+        false,
+      );
+    }
+    return;
+  }
+
+  fs.mkdirSync(path.dirname(targetPath), { recursive: true });
+  fs.copyFileSync(sourcePath, targetPath);
+}
+
+function removeFileOrDirectoryWithDryRun(targetPath, dryRun) {
+  if (!fs.existsSync(targetPath)) {
+    return;
+  }
+
+  if (dryRun) {
+    logInfo(`[dry-run] remove ${targetPath}`);
+    return;
+  }
+
+  fs.rmSync(targetPath, { recursive: true, force: true });
+}
+
+function resolveAngularProjectTsConfig(projectRoot) {
+  const appTsConfigPath = path.join(projectRoot, 'tsconfig.app.json');
+  if (fs.existsSync(appTsConfigPath)) {
+    return appTsConfigPath;
+  }
+
+  return path.join(projectRoot, 'tsconfig.json');
+}
+
+function upsertTypescriptPluginInTsConfig(configPath, dryRun) {
+  if (!fs.existsSync(configPath)) {
+    logWarn(`TypeScript config not found: ${configPath}`);
+    return;
+  }
+
+  const tsConfig = JSON.parse(fs.readFileSync(configPath, 'utf8'));
+  const compilerOptions = tsConfig.compilerOptions ?? {};
+  const plugins = Array.isArray(compilerOptions.plugins)
+    ? compilerOptions.plugins
+    : [];
+
+  if (
+    !plugins.some(
+      (plugin) =>
+        plugin &&
+        typeof plugin === 'object' &&
+        plugin.name === '@rs-x/typescript-plugin',
+    )
+  ) {
+    plugins.push({ name: '@rs-x/typescript-plugin' });
+  }
+
+  compilerOptions.plugins = plugins;
+  tsConfig.compilerOptions = compilerOptions;
+
+  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}`;
@@ -608,14 +769,17 @@ function resolveProjectRsxSpecs(
   options = {},
 ) {
   const includeAngularPackage = Boolean(options.includeAngularPackage);
+  const includeReactPackage = Boolean(options.includeReactPackage);
+  const versionSpec = options.tag ? options.tag : RSX_PACKAGE_VERSION;
   const defaults = {
-    '@rs-x/core': RSX_PACKAGE_VERSION,
-    '@rs-x/state-manager': RSX_PACKAGE_VERSION,
-    '@rs-x/expression-parser': RSX_PACKAGE_VERSION,
-    '@rs-x/compiler': RSX_PACKAGE_VERSION,
-    '@rs-x/typescript-plugin': RSX_PACKAGE_VERSION,
-    ...(includeAngularPackage ? { '@rs-x/angular': RSX_PACKAGE_VERSION } : {}),
-    '@rs-x/cli': null,
+    '@rs-x/core': versionSpec,
+    '@rs-x/state-manager': versionSpec,
+    '@rs-x/expression-parser': versionSpec,
+    '@rs-x/compiler': versionSpec,
+    '@rs-x/typescript-plugin': versionSpec,
+    ...(includeAngularPackage ? { '@rs-x/angular': versionSpec } : {}),
+    ...(includeReactPackage ? { '@rs-x/react': versionSpec } : {}),
+    '@rs-x/cli': versionSpec,
   };
 
   const tarballSlugs = {
@@ -625,6 +789,7 @@ function resolveProjectRsxSpecs(
     '@rs-x/compiler': 'rs-x-compiler',
     '@rs-x/typescript-plugin': 'rs-x-typescript-plugin',
     ...(includeAngularPackage ? { '@rs-x/angular': 'rs-x-angular' } : {}),
+    ...(includeReactPackage ? { '@rs-x/react': 'rs-x-react' } : {}),
     '@rs-x/cli': 'rs-x-cli',
   };
 
@@ -647,6 +812,11 @@ function resolveProjectRsxSpecs(
             'rs-x-angular': path.join(tarballsDir, 'rs-x-angular'),
           }
         : {}),
+      ...(includeReactPackage
+        ? {
+            'rs-x-react': path.join(tarballsDir, 'rs-x-react'),
+          }
+        : {}),
       'rs-x-cli': path.join(tarballsDir, 'rs-x-cli'),
     };
 
@@ -690,6 +860,11 @@ function resolveProjectRsxSpecs(
           ),
         }
       : {}),
+    ...(includeReactPackage
+      ? {
+          '@rs-x/react': path.join(workspaceRoot, 'rs-x-react'),
+        }
+      : {}),
     '@rs-x/cli': path.join(workspaceRoot, 'rs-x-cli'),
   };
 
@@ -919,6 +1094,7 @@ async function runProject(flags) {
   const dryRun = Boolean(flags['dry-run']);
   const skipInstall = Boolean(flags['skip-install']);
   const pm = detectPackageManager(flags.pm);
+  const tag = resolveInstallTag(flags);
   let projectName = typeof flags.name === 'string' ? flags.name.trim() : '';
 
   if (!projectName) {
@@ -946,6 +1122,7 @@ async function runProject(flags) {
     projectRoot,
     workspaceRoot,
     tarballsDir,
+    { tag },
   );
   if (fs.existsSync(projectRoot) && fs.readdirSync(projectRoot).length > 0) {
     logError(`Target directory is not empty: ${projectRoot}`);
@@ -1153,6 +1330,315 @@ function scaffoldProjectTemplate(template, projectName, pm, flags) {
   process.exit(1);
 }
 
+function applyAngularDemoStarter(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, includeAngularPackage: true },
+  );
+
+  const templateFiles = ['README.md', 'src'];
+  for (const entry of templateFiles) {
+    copyPathWithDryRun(
+      path.join(ANGULAR_DEMO_TEMPLATE_DIR, entry),
+      path.join(projectRoot, entry),
+      dryRun,
+    );
+  }
+
+  const staleAngularFiles = [
+    path.join(projectRoot, 'src/app/app.ts'),
+    path.join(projectRoot, 'src/app/app.spec.ts'),
+    path.join(projectRoot, 'src/app/app.html'),
+    path.join(projectRoot, 'src/app/app.css'),
+    path.join(projectRoot, 'src/app/app.routes.ts'),
+    path.join(projectRoot, 'src/app/app.config.ts'),
+  ];
+  for (const stalePath of staleAngularFiles) {
+    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-angular-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 Angular app: ${packageJsonPath}`,
+    );
+    process.exit(1);
+  }
+
+  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+  const angularTsConfigPath = resolveAngularProjectTsConfig(projectRoot);
+  const angularTsConfigRelative = path
+    .relative(projectRoot, angularTsConfigPath)
+    .replace(/\\/gu, '/');
+  packageJson.name = projectName;
+  packageJson.private = true;
+  packageJson.version = '0.1.0';
+  packageJson.scripts = {
+    'build:rsx': `rsx build --project ${angularTsConfigRelative} --no-emit --prod`,
+    'typecheck:rsx': `rsx typecheck --project ${angularTsConfigRelative}`,
+    prebuild: 'npm run build:rsx',
+    start: 'npm run build:rsx && ng serve',
+    build: 'ng build',
+  };
+  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',
+      registrationFile: 'src/rsx-generated/rsx-aot-registration.generated.ts',
+      compiledResolvedEvaluator: false,
+    },
+  };
+  packageJson.dependencies = {
+    ...(packageJson.dependencies ?? {}),
+    '@rs-x/angular': rsxSpecs['@rs-x/angular'],
+    '@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'],
+  };
+  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 angularJsonPath = path.join(projectRoot, 'angular.json');
+  if (!fs.existsSync(angularJsonPath)) {
+    logError(
+      `angular.json not found in generated Angular app: ${angularJsonPath}`,
+    );
+    process.exit(1);
+  }
+
+  const angularJson = JSON.parse(fs.readFileSync(angularJsonPath, 'utf8'));
+  const projects = angularJson.projects ?? {};
+  const [angularProjectName] = Object.keys(projects);
+  if (!angularProjectName) {
+    logError('Generated angular.json does not define any projects.');
+    process.exit(1);
+  }
+
+  const angularProject = projects[angularProjectName];
+  const architect = angularProject.architect ?? angularProject.targets;
+  const build = architect?.build;
+  if (!build) {
+    logError('Generated Angular project is missing a build target.');
+    process.exit(1);
+  }
+
+  const buildOptions = build.options ?? {};
+  const styles = Array.isArray(buildOptions.styles) ? buildOptions.styles : [];
+  if (!styles.includes('src/styles.css')) {
+    styles.push('src/styles.css');
+  }
+  buildOptions.styles = styles;
+  buildOptions.preserveSymlinks = true;
+
+  const registrationFile =
+    'src/rsx-generated/rsx-aot-registration.generated.ts';
+  let polyfills = buildOptions.polyfills;
+  if (typeof polyfills === 'string') {
+    polyfills = [polyfills];
+  } else if (!Array.isArray(polyfills)) {
+    polyfills = [];
+  }
+  if (!polyfills.includes(registrationFile)) {
+    polyfills.push(registrationFile);
+  }
+  buildOptions.polyfills = polyfills;
+  build.options = buildOptions;
+
+  if (build.configurations?.production?.budgets) {
+    delete build.configurations.production.budgets;
+  }
+
+  if (dryRun) {
+    logInfo(`[dry-run] patch ${angularJsonPath}`);
+  } else {
+    fs.writeFileSync(
+      angularJsonPath,
+      `${JSON.stringify(angularJson, null, 2)}\n`,
+      'utf8',
+    );
+  }
+
+  if (!Boolean(flags['skip-install'])) {
+    logInfo(`Refreshing ${pm} dependencies for the RS-X Angular starter...`);
+    run(pm, ['install'], { dryRun });
+    logOk('Angular starter dependencies are up to date.');
+  }
+}
+
+function applyReactDemoStarter(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, includeReactPackage: true },
+  );
+
+  const templateFiles = [
+    'README.md',
+    'index.html',
+    'src',
+    'tsconfig.json',
+    'vite.config.ts',
+  ];
+  for (const entry of templateFiles) {
+    copyPathWithDryRun(
+      path.join(REACT_DEMO_TEMPLATE_DIR, entry),
+      path.join(projectRoot, entry),
+      dryRun,
+    );
+  }
+
+  const staleReactFiles = [
+    path.join(projectRoot, 'src/App.tsx'),
+    path.join(projectRoot, 'src/App.css'),
+    path.join(projectRoot, 'src/index.css'),
+    path.join(projectRoot, 'src/vite-env.d.ts'),
+    path.join(projectRoot, 'src/assets'),
+    path.join(projectRoot, 'public'),
+    path.join(projectRoot, 'eslint.config.js'),
+    path.join(projectRoot, 'eslint.config.ts'),
+    path.join(projectRoot, 'tsconfig.app.json'),
+    path.join(projectRoot, 'tsconfig.node.json'),
+  ];
+  for (const stalePath of staleReactFiles) {
+    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-react-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 React 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.json --no-emit --prod',
+    dev: 'npm run build:rsx && vite',
+    build: 'npm run build:rsx && 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 = {
+    react: packageJson.dependencies?.react ?? '^19.2.4',
+    'react-dom': packageJson.dependencies?.['react-dom'] ?? '^19.2.4',
+    '@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/react': rsxSpecs['@rs-x/react'],
+  };
+  packageJson.devDependencies = {
+    typescript: packageJson.devDependencies?.typescript ?? '^5.9.3',
+    vite: packageJson.devDependencies?.vite ?? '^7.3.1',
+    '@vitejs/plugin-react':
+      packageJson.devDependencies?.['@vitejs/plugin-react'] ?? '^5.1.4',
+    '@types/react': packageJson.devDependencies?.['@types/react'] ?? '^19.2.2',
+    '@types/react-dom':
+      packageJson.devDependencies?.['@types/react-dom'] ?? '^19.2.2',
+    '@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 tsConfigPath = path.join(projectRoot, 'tsconfig.json');
+  if (fs.existsSync(tsConfigPath)) {
+    upsertTypescriptPluginInTsConfig(tsConfigPath, dryRun);
+  }
+
+  if (!Boolean(flags['skip-install'])) {
+    logInfo(`Refreshing ${pm} dependencies for the RS-X React starter...`);
+    run(pm, ['install'], { dryRun });
+    logOk('React starter dependencies are up to date.');
+  }
+}
+
 async function runProjectWithTemplate(template, flags) {
   const normalizedTemplate = normalizeProjectTemplate(template);
   if (!normalizedTemplate) {
@@ -1184,14 +1670,11 @@ async function runProjectWithTemplate(template, flags) {
 
   withWorkingDirectory(projectRoot, () => {
     if (normalizedTemplate === 'angular') {
-      runSetupAngular(flags);
+      applyAngularDemoStarter(projectRoot, projectName, pm, flags);
       return;
     }
     if (normalizedTemplate === 'react') {
-      runSetupReact({
-        ...flags,
-        entry: flags.entry ?? 'src/main.tsx',
-      });
+      applyReactDemoStarter(projectRoot, projectName, pm, flags);
       return;
     }
     if (normalizedTemplate === 'nextjs') {
@@ -1700,11 +2183,12 @@ function runInit(flags) {
   const skipVscode = Boolean(flags['skip-vscode']);
   const skipInstall = Boolean(flags['skip-install']);
   const pm = detectPackageManager(flags.pm);
+  const tag = resolveInstallTag(flags);
   const projectRoot = process.cwd();
 
   if (!skipInstall) {
-    installRuntimePackages(pm, dryRun);
-    installCompilerPackages(pm, dryRun);
+    installRuntimePackages(pm, dryRun, tag);
+    installCompilerPackages(pm, dryRun, tag);
   } else {
     logInfo('Skipping package installation (--skip-install).');
   }
@@ -1758,11 +2242,112 @@ function runInit(flags) {
     }
   }
 
-  if (!skipVscode) {
-    installVsCodeExtension(flags);
+  logOk('RS-X init completed.');
+}
+
+function upsertRsxBuildConfigInPackageJson(projectRoot, dryRun) {
+  const packageJsonPath = path.join(projectRoot, 'package.json');
+  if (!fs.existsSync(packageJsonPath)) {
+    return false;
   }
 
-  logOk('RS-X init completed.');
+  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+  const currentRsx = packageJson.rsx ?? {};
+  const currentBuild = currentRsx.build ?? {};
+  const nextBuild = {
+    preparse: true,
+    preparseFile: 'src/rsx-generated/rsx-aot-preparsed.generated.ts',
+    compiled: true,
+    compiledFile: 'src/rsx-generated/rsx-aot-compiled.generated.ts',
+    registrationFile: 'src/rsx-generated/rsx-aot-registration.generated.ts',
+    compiledResolvedEvaluator: false,
+    ...currentBuild,
+  };
+
+  const nextPackageJson = {
+    ...packageJson,
+    rsx: {
+      ...currentRsx,
+      build: nextBuild,
+    },
+  };
+
+  if (dryRun) {
+    logInfo(`[dry-run] patch ${packageJsonPath} (rsx.build)`);
+    return true;
+  }
+
+  fs.writeFileSync(
+    packageJsonPath,
+    `${JSON.stringify(nextPackageJson, null, 2)}\n`,
+    'utf8',
+  );
+  logOk(`Patched ${packageJsonPath} (rsx.build)`);
+  return true;
+}
+
+function ensureAngularProvidersInEntry(entryFile, dryRun) {
+  if (!fs.existsSync(entryFile)) {
+    return false;
+  }
+
+  const original = fs.readFileSync(entryFile, 'utf8');
+  if (original.includes('providexRsx')) {
+    logInfo(`Angular entry already includes providexRsx: ${entryFile}`);
+    return true;
+  }
+
+  if (!original.includes('bootstrapApplication(')) {
+    logWarn(
+      `Could not automatically patch Angular providers in ${entryFile}. Expected bootstrapApplication(...).`,
+    );
+    logInfo(
+      "Manual setup: import { providexRsx } from '@rs-x/angular' and add providers: [...providexRsx()] to bootstrapApplication(...).",
+    );
+    return false;
+  }
+
+  const sourceWithImport = injectImport(
+    original,
+    "import { providexRsx } from '@rs-x/angular';",
+  );
+
+  let updated = sourceWithImport;
+  if (
+    /bootstrapApplication\([\s\S]*?,\s*\{[\s\S]*?providers\s*:/mu.test(updated)
+  ) {
+    updated = updated.replace(
+      /providers\s*:\s*\[/mu,
+      'providers: [...providexRsx(), ',
+    );
+  } else if (/bootstrapApplication\([\s\S]*?,\s*\{/mu.test(updated)) {
+    updated = updated.replace(
+      /bootstrapApplication\(([\s\S]*?),\s*\{/mu,
+      'bootstrapApplication($1, {\n  providers: [...providexRsx()],',
+    );
+  } else {
+    updated = updated.replace(
+      /bootstrapApplication\(([\s\S]*?)\)\s*(?:\.catch\([\s\S]*?\))?\s*;/mu,
+      'bootstrapApplication($1, {\n  providers: [...providexRsx()],\n}).catch((error) => {\n  console.error(error);\n});',
+    );
+  }
+
+  if (updated === sourceWithImport) {
+    logWarn(`Could not automatically inject providexRsx into ${entryFile}.`);
+    logInfo(
+      "Manual setup: import { providexRsx } from '@rs-x/angular' and add providers: [...providexRsx()] to bootstrapApplication(...).",
+    );
+    return false;
+  }
+
+  if (dryRun) {
+    logInfo(`[dry-run] patch ${entryFile} (providexRsx)`);
+    return true;
+  }
+
+  fs.writeFileSync(entryFile, updated, 'utf8');
+  logOk(`Patched ${entryFile} to include providexRsx.`);
+  return true;
 }
 
 function upsertScriptInPackageJson(
@@ -2124,95 +2709,15 @@ ${patchBlock}
   logOk(`Patched ${nextConfigJs} with RS-X webpack loader.`);
 }
 
-function wireRsxAngularWebpack(projectRoot, dryRun) {
-  const angularJsonPath = path.join(projectRoot, 'angular.json');
-  if (!fs.existsSync(angularJsonPath)) {
-    logWarn('angular.json not found. Skipping Angular build integration.');
-    return;
-  }
-
-  createRsxWebpackLoaderFile(projectRoot, dryRun);
-
-  const webpackConfigPath = path.join(projectRoot, 'rsx-angular-webpack.cjs');
-  const webpackConfigSource = `const path = require('node:path');
-
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\\.[jt]sx?$/u,
-        exclude: /node_modules/u,
-        use: [
-          {
-            loader: path.resolve(__dirname, './rsx-webpack-loader.cjs'),
-          },
-        ],
-      },
-    ],
-  },
-};
-`;
-
-  if (dryRun) {
-    logInfo(`[dry-run] create ${webpackConfigPath}`);
-  } else {
-    fs.writeFileSync(webpackConfigPath, webpackConfigSource, 'utf8');
-    logOk(`Created ${webpackConfigPath}`);
-  }
-
-  const angularJson = JSON.parse(fs.readFileSync(angularJsonPath, 'utf8'));
-  const projects = angularJson.projects ?? {};
-  const projectNames = Object.keys(projects);
-  if (projectNames.length === 0) {
-    logWarn('No Angular projects found in angular.json.');
-    return;
-  }
-
-  const patchPath = 'rsx-angular-webpack.cjs';
-  for (const projectName of projectNames) {
-    const project = projects[projectName];
-    const architect = project.architect ?? project.targets;
-    if (!architect?.build) {
-      continue;
-    }
-
-    const build = architect.build;
-    if (build.builder !== '@angular-builders/custom-webpack:browser') {
-      build.builder = '@angular-builders/custom-webpack:browser';
-    }
-    build.options = build.options ?? {};
-    build.options.customWebpackConfig = build.options.customWebpackConfig ?? {};
-    build.options.customWebpackConfig.path = patchPath;
-
-    if (architect.serve) {
-      const serve = architect.serve;
-      if (serve.builder !== '@angular-builders/custom-webpack:dev-server') {
-        serve.builder = '@angular-builders/custom-webpack:dev-server';
-      }
-      serve.options = serve.options ?? {};
-      serve.options.buildTarget =
-        serve.options.buildTarget ?? `${projectName}:build`;
-      serve.options.browserTarget =
-        serve.options.browserTarget ?? `${projectName}:build`;
-    }
-  }
-
-  if (dryRun) {
-    logInfo(`[dry-run] patch ${angularJsonPath}`);
-  } else {
-    fs.writeFileSync(
-      angularJsonPath,
-      `${JSON.stringify(angularJson, null, 2)}\n`,
-      'utf8',
-    );
-    logOk(`Patched ${angularJsonPath} for RS-X Angular webpack integration.`);
-  }
-}
-
 function runSetupReact(flags) {
   const dryRun = Boolean(flags['dry-run']);
   const pm = detectPackageManager(flags.pm);
+  const tag = resolveInstallTag(flags);
   const projectRoot = process.cwd();
+  const angularTsConfigPath = resolveAngularProjectTsConfig(projectRoot);
+  const angularTsConfigRelative = path
+    .relative(projectRoot, angularTsConfigPath)
+    .replace(/\\/gu, '/');
   const packageJsonPath = path.join(projectRoot, 'package.json');
   if (!fs.existsSync(packageJsonPath)) {
     logError(`package.json not found in ${projectRoot}`);
@@ -2238,21 +2743,20 @@ function runSetupReact(flags) {
     installPackages(pm, ['@rs-x/react'], {
       dev: false,
       dryRun,
+      tag,
       label: 'RS-X React bindings',
     });
   } else {
     logInfo('Skipping RS-X React bindings install (--skip-install).');
   }
   wireRsxVitePlugin(projectRoot, dryRun);
-  if (!Boolean(flags['skip-vscode'])) {
-    installVsCodeExtension(flags);
-  }
   logOk('RS-X React setup completed.');
 }
 
 function runSetupNext(flags) {
   const dryRun = Boolean(flags['dry-run']);
   const pm = detectPackageManager(flags.pm);
+  const tag = resolveInstallTag(flags);
   runInit({
     ...flags,
     'skip-vscode': true,
@@ -2261,21 +2765,20 @@ function runSetupNext(flags) {
     installPackages(pm, ['@rs-x/react'], {
       dev: false,
       dryRun,
+      tag,
       label: 'RS-X React bindings',
     });
   } else {
     logInfo('Skipping RS-X React bindings install (--skip-install).');
   }
   wireRsxNextWebpack(process.cwd(), dryRun);
-  if (!Boolean(flags['skip-vscode'])) {
-    installVsCodeExtension(flags);
-  }
   logOk('RS-X Next.js setup completed.');
 }
 
 function runSetupVue(flags) {
   const dryRun = Boolean(flags['dry-run']);
   const pm = detectPackageManager(flags.pm);
+  const tag = resolveInstallTag(flags);
   runInit({
     ...flags,
     'skip-vscode': true,
@@ -2284,67 +2787,79 @@ function runSetupVue(flags) {
     installPackages(pm, ['@rs-x/vue'], {
       dev: false,
       dryRun,
+      tag,
       label: 'RS-X Vue bindings',
     });
   } else {
     logInfo('Skipping RS-X Vue bindings install (--skip-install).');
   }
   wireRsxVitePlugin(process.cwd(), dryRun);
-  if (!Boolean(flags['skip-vscode'])) {
-    installVsCodeExtension(flags);
-  }
   logOk('RS-X Vue setup completed.');
 }
 
 function runSetupAngular(flags) {
   const dryRun = Boolean(flags['dry-run']);
   const pm = detectPackageManager(flags.pm);
-
-  runInit({
-    ...flags,
-    'skip-vscode': true,
-  });
+  const tag = resolveInstallTag(flags);
+  const projectRoot = process.cwd();
 
   if (!Boolean(flags['skip-install'])) {
+    installRuntimePackages(pm, dryRun, tag);
+    installCompilerPackages(pm, dryRun, tag);
     installPackages(pm, ['@rs-x/angular'], {
       dev: false,
       dryRun,
+      tag,
       label: 'RS-X Angular bindings',
     });
-    installPackages(pm, ['@angular-builders/custom-webpack'], {
-      dev: true,
-      dryRun,
-      label: 'Angular custom webpack builder',
-    });
   } else {
+    logInfo('Skipping package installation (--skip-install).');
+  }
+
+  const entryFile = resolveEntryFile(projectRoot, 'angular', flags.entry);
+  if (entryFile) {
+    logInfo(`Using Angular entry file: ${entryFile}`);
+    ensureAngularProvidersInEntry(entryFile, dryRun);
+  } else {
+    logWarn('Could not detect an Angular entry file automatically.');
     logInfo(
-      'Skipping Angular custom webpack builder install (--skip-install).',
+      'Manual setup: add providexRsx() to bootstrapApplication(...) in your main entry file.',
     );
   }
 
-  wireRsxAngularWebpack(process.cwd(), dryRun);
+  upsertRsxBuildConfigInPackageJson(projectRoot, dryRun);
+
   upsertScriptInPackageJson(
-    process.cwd(),
+    projectRoot,
     'build:rsx',
-    'rsx build --project tsconfig.json',
+    `rsx build --project ${angularTsConfigRelative} --no-emit --prod`,
     dryRun,
   );
   upsertScriptInPackageJson(
-    process.cwd(),
+    projectRoot,
     'typecheck:rsx',
-    'rsx typecheck --project tsconfig.json',
+    `rsx typecheck --project ${angularTsConfigRelative}`,
     dryRun,
   );
 
-  if (!Boolean(flags['skip-vscode'])) {
-    installVsCodeExtension(flags);
-  }
+  const rsxRegistrationFile = path.join(
+    projectRoot,
+    'src/rsx-generated/rsx-aot-registration.generated.ts',
+  );
+  ensureAngularPolyfillsContainsFile({
+    projectRoot,
+    configPath: angularTsConfigPath,
+    filePath: rsxRegistrationFile,
+    dryRun,
+  });
+
   logOk('RS-X Angular setup completed.');
 }
 
 function runSetupAuto(flags) {
   const projectRoot = process.cwd();
   const context = detectProjectContext(projectRoot);
+  const tag = resolveInstallTag(flags);
 
   if (context === 'react') {
     logInfo('Auto-detected framework: react');
@@ -2372,9 +2887,8 @@ function runSetupAuto(flags) {
 
   logInfo('No framework-specific setup detected; running generic setup.');
   const pm = detectPackageManager(flags.pm);
-  installRuntimePackages(pm, Boolean(flags['dry-run']));
-  installCompilerPackages(pm, Boolean(flags['dry-run']));
-  installVsCodeExtension(flags);
+  installRuntimePackages(pm, Boolean(flags['dry-run']), tag);
+  installCompilerPackages(pm, Boolean(flags['dry-run']), tag);
 }
 
 function resolveProjectModule(projectRoot, moduleName) {
@@ -3142,24 +3656,27 @@ function printInstallHelp(target) {
   if (target === 'compiler') {
     console.log('Usage:');
     console.log(
-      '  rsx install compiler [--pm <pnpm|npm|yarn|bun>] [--dry-run]',
+      '  rsx install compiler [--pm <pnpm|npm|yarn|bun>] [--next] [--dry-run]',
     );
     console.log('');
     console.log('Options:');
     console.log('  --pm        Explicit package manager');
+    console.log('  --next      Install prerelease versions (dist-tag next)');
     console.log('  --dry-run   Print commands without executing them');
     return;
   }
 
   console.log('Usage:');
   console.log('  rsx install vscode [--force] [--local] [--dry-run]');
-  console.log('  rsx install compiler [--pm <pnpm|npm|yarn|bun>] [--dry-run]');
+  console.log(
+    '  rsx install compiler [--pm <pnpm|npm|yarn|bun>] [--next] [--dry-run]',
+  );
 }
 
 function printSetupHelp() {
   console.log('Usage:');
   console.log(
-    '  rsx setup [--pm <pnpm|npm|yarn|bun>] [--force] [--local] [--dry-run]',
+    '  rsx setup [--pm <pnpm|npm|yarn|bun>] [--next] [--force] [--local] [--dry-run]',
   );
   console.log('');
   console.log('What it does:');
@@ -3173,6 +3690,7 @@ function printSetupHelp() {
   console.log('');
   console.log('Options:');
   console.log('  --pm        Explicit package manager');
+  console.log('  --next      Install prerelease versions (dist-tag next)');
   console.log('  --force     Reinstall extension if already installed');
   console.log('  --local     Build/install local VSIX from repo workspace');
   console.log('  --dry-run   Print commands without executing them');
@@ -3181,7 +3699,7 @@ function printSetupHelp() {
 function printInitHelp() {
   console.log('Usage:');
   console.log(
-    '  rsx init [--pm <pnpm|npm|yarn|bun>] [--entry <path>] [--skip-install] [--skip-vscode] [--force] [--local] [--dry-run]',
+    '  rsx init [--pm <pnpm|npm|yarn|bun>] [--entry <path>] [--next] [--skip-install] [--skip-vscode] [--force] [--local] [--dry-run]',
   );
   console.log('');
   console.log('What it does:');
@@ -3196,6 +3714,7 @@ function printInitHelp() {
   console.log('Options:');
   console.log('  --pm            Explicit package manager');
   console.log('  --entry         Explicit application entry file');
+  console.log('  --next          Install prerelease versions (dist-tag next)');
   console.log('  --skip-install  Skip npm/pnpm/yarn/bun package installation');
   console.log('  --skip-vscode   Skip VS Code extension installation');
   console.log('  --force         Reinstall extension if already installed');
@@ -3206,18 +3725,23 @@ function printInitHelp() {
 function printProjectHelp() {
   console.log('Usage:');
   console.log(
-    '  rsx project [angular|vuejs|react|nextjs|nodejs] [--name <project-name>] [--pm <pnpm|npm|yarn|bun>] [--template <angular|vuejs|react|nextjs|nodejs>] [--tarballs-dir <path>] [--skip-install] [--skip-vscode] [--dry-run]',
+    '  rsx project [angular|vuejs|react|nextjs|nodejs] [--name <project-name>] [--pm <pnpm|npm|yarn|bun>] [--next] [--template <angular|vuejs|react|nextjs|nodejs>] [--tarballs-dir <path>] [--skip-install] [--skip-vscode] [--dry-run]',
   );
   console.log('');
   console.log('What it does:');
   console.log('  - Creates a new project folder');
   console.log('  - Supports templates: angular, vuejs, react, nextjs, nodejs');
+  console.log(
+    '  - Angular generates the RS-X virtual-table demo starter on top of the latest Angular scaffold',
+  );
   console.log('  - Scaffolds framework app and wires RS-X bootstrap/setup');
   console.log('  - Writes package.json with RS-X dependencies');
   console.log(
     '  - Adds tsconfig + TypeScript plugin config for editor support',
   );
-  console.log('  - For Angular template: also installs @rs-x/angular');
+  console.log(
+    '  - For Angular template: uses the latest Angular CLI scaffold, then applies the RS-X demo starter',
+  );
   console.log('  - For React/Next templates: also installs @rs-x/react');
   console.log('  - For Vue template: also installs @rs-x/vue');
   console.log('  - Installs dependencies (unless --skip-install)');
@@ -3228,6 +3752,7 @@ function printProjectHelp() {
     '  --template      Project template (if omitted, asks interactively)',
   );
   console.log('  --pm            Explicit package manager');
+  console.log('  --next          Install prerelease versions (dist-tag next)');
   console.log(
     '  --tarballs-dir  Directory containing local RS-X package tarballs (*.tgz)',
   );
@@ -3449,7 +3974,8 @@ function main() {
 
   if (command === 'install' && target === 'compiler') {
     const pm = detectPackageManager(flags.pm);
-    installCompilerPackages(pm, Boolean(flags['dry-run']));
+    const tag = resolveInstallTag(flags);
+    installCompilerPackages(pm, Boolean(flags['dry-run']), tag);
     return;
   }