Add TanStack Router demo with SSR and TypeScript

demos/basic-v16-rspack-tanstack/.demo-metadata.yml

@@ -0,0 +1,15 @@
+---
+demo_name: basic-v16-rspack-tanstack
+demo_directory: demos/basic-v16-rspack-tanstack
+created_at: "2025-01-13"
+description: React on Rails demo with TanStack Router, TypeScript, Rspack, and SSR
+rails_version: "8.0.3"
+shakapacker_version: "9.3.4"
+react_on_rails_version: "16.2.0.rc1"
+bundler: rspack
+transpiler: swc
+features:
+  - typescript
+  - tanstack-router
+  - ssr
+  - rspack

demos/basic-v16-rspack-tanstack/.dev-services.yml.example

@@ -0,0 +1,76 @@
+# Service Dependencies Configuration
+#
+# This file defines external services that must be running before bin/dev starts.
+# Copy this file to .dev-services.yml and customize for your application.
+#
+# bin/dev will check each service before starting the development server.
+# If any service is not running, it will display helpful error messages with
+# instructions on how to start the service.
+#
+# ⚠️  SECURITY WARNING:
+# Commands in this file are executed during bin/dev startup. Only add commands
+# from trusted sources. This file should not be committed if it contains
+# sensitive information or custom paths specific to your machine. Consider
+# adding .dev-services.yml to .gitignore if it contains machine-specific config.
+#
+# Security best practices:
+# - Commands are executed without shell expansion (shell metacharacters won't work)
+# - Use simple, single commands (e.g., "redis-cli ping", "pg_isready")
+# - Do NOT use shell features: &&, ||, |, $, ;, backticks, etc. will fail
+# - Only include services you trust
+# - Keep commands simple and focused on service health checks
+# - Consider adding .dev-services.yml to .gitignore (commit .example instead)
+#
+# Example configuration:
+#
+# services:
+#   redis:
+#     check_command: "redis-cli ping"
+#     expected_output: "PONG"
+#     start_command: "redis-server"
+#     install_hint: "brew install redis (macOS) or apt-get install redis-server (Linux)"
+#     description: "Redis (for caching and background jobs)"
+#
+#   postgresql:
+#     check_command: "pg_isready"
+#     expected_output: "accepting connections"
+#     start_command: "pg_ctl -D /usr/local/var/postgres start"
+#     install_hint: "brew install postgresql (macOS) or apt-get install postgresql (Linux)"
+#     description: "PostgreSQL database"
+#
+#   elasticsearch:
+#     check_command: "curl -s http://localhost:9200"
+#     expected_output: "cluster_name"
+#     start_command: "brew services start elasticsearch-full"
+#     install_hint: "brew install elasticsearch-full"
+#     description: "Elasticsearch (for search)"
+#
+# Field descriptions:
+#   check_command:    Shell command to check if service is running (required)
+#   expected_output:  String that must appear in command output (optional)
+#   start_command:    Command to start the service (shown in error messages)
+#   install_hint:     How to install the service if not found
+#   description:      Human-readable description of the service
+#
+# To use this file:
+# 1. Copy to .dev-services.yml: cp .dev-services.yml.example .dev-services.yml
+# 2. Uncomment and configure the services your app needs
+# 3. Add .dev-services.yml to .gitignore if it contains sensitive info
+# 4. Run bin/dev - it will check services before starting
+
+services:
+  # Uncomment and configure the services your application requires:
+
+  # redis:
+  #   check_command: "redis-cli ping"
+  #   expected_output: "PONG"
+  #   start_command: "redis-server"
+  #   install_hint: "brew install redis (macOS) or apt-get install redis-server (Linux)"
+  #   description: "Redis (for caching and background jobs)"
+
+  # postgresql:
+  #   check_command: "pg_isready"
+  #   expected_output: "accepting connections"
+  #   start_command: "pg_ctl -D /usr/local/var/postgres start"  # macOS; Linux: sudo service postgresql start
+  #   install_hint: "brew install postgresql (macOS) or apt-get install postgresql (Linux)"
+  #   description: "PostgreSQL database"

demos/basic-v16-rspack-tanstack/.env.example

@@ -0,0 +1,6 @@
+# Node Renderer Configuration (optional)
+# RENDERER_URL=http://localhost:3800
+# RENDERER_PASSWORD=CHANGE_THIS_TO_A_STRONG_PASSWORD
+# RENDERER_PORT=3800
+# RENDERER_LOG_LEVEL=debug
+# NODE_RENDERER_CONCURRENCY=3

demos/basic-v16-rspack-tanstack/.gitignore

@@ -0,0 +1,39 @@
+# Ignore bundler cache
+.bundle
+
+# Ignore node modules
+node_modules/
+
+# Ignore Rails artifacts
+log/*
+tmp/*
+!log/.keep
+!tmp/.keep
+
+# Ignore generated assets
+/public/packs
+/public/packs-test
+/ssr-generated
+
+# Ignore TanStack Router generated files
+app/javascript/src/routeTree.gen.ts
+app/javascript/generated/
+app/javascript/packs/generated/
+
+# Ignore Playwright test results
+test-results/
+playwright-report/
+
+# Ignore environment files
+.env*
+!.env.example
+
+# React on Rails Pro (contains auth tokens)
+react-on-rails-pro/.npmrc
+react-on-rails-pro/node_modules/
+
+# Ignore master key
+config/master.key
+
+# Ignore credentials
+config/credentials/*.key

demos/basic-v16-rspack-tanstack/.rubocop.yml

@@ -0,0 +1,8 @@
+# Omakase Ruby styling for Rails
+inherit_gem: { rubocop-rails-omakase: rubocop.yml }
+
+# Overwrite or add rules to create your own house style
+#
+# # Use `[a, [b, c]]` not `[ a, [ b, c ] ]`
+# Layout/SpaceInsideArrayLiteralBrackets:
+#   Enabled: false

demos/basic-v16-rspack-tanstack/Gemfile

@@ -0,0 +1,54 @@
+source "https://rubygems.org"
+
+# Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
+gem "rails", "~> 8.0.3"
+# The modern asset pipeline for Rails [https://github.com/rails/propshaft]
+gem "propshaft"
+# Use postgresql as the database for Active Record
+gem "pg", "~> 1.1"
+# Use the Puma web server [https://github.com/puma/puma]
+gem "puma", ">= 5.0"
+# Build JSON APIs with ease [https://github.com/rails/jbuilder]
+gem "jbuilder"
+
+# Use Active Model has_secure_password [https://guides.rubyonrails.org/active_model_basics.html#securepassword]
+# gem "bcrypt", "~> 3.1.7"
+
+# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
+gem "tzinfo-data", platforms: %i[ windows jruby ]
+
+# Reduces boot times through caching; required in config/boot.rb
+gem "bootsnap", require: false
+
+# JavaScript bundling with Webpack/Rspack
+gem "shakapacker", "~> 9.3.0"
+
+# React integration for Rails with SSR support
+gem "react_on_rails", "16.2.0.rc1"
+
+# React on Rails Pro - Node Renderer for production-grade SSR (REQUIRED)
+# TanStack Router requires Node.js APIs (setTimeout, clearTimeout, etc.)
+# that are not available in the default ExecJS environment.
+gem "react_on_rails_pro"
+
+# Colored terminal output for build scripts
+gem "rainbow"
+
+# Add HTTP asset caching/compression and X-Sendfile acceleration to Puma [https://github.com/basecamp/thruster/]
+gem "thruster", require: false
+
+group :development, :test do
+  # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
+  gem "debug", platforms: %i[ mri windows ], require: "debug/prelude"
+
+  # Static analysis for security vulnerabilities [https://brakemanscanner.org/]
+  gem "brakeman", require: false
+
+  # Omakase Ruby styling [https://github.com/rails/rubocop-rails-omakase/]
+  gem "rubocop-rails-omakase", require: false
+end
+
+group :development do
+  # Use console on exceptions pages [https://github.com/rails/web-console]
+  gem "web-console"
+end