Address PR #112 review comments for basic-v16-rsc

Author: justin808

demos/basic-v16-rsc/.eslintrc.js

@@ -1 +1 @@
-../../packages/shakacode_demo_common/config/.eslintrc.js
+../../packages/shakacode_demo_common/configs/.eslintrc.js

demos/basic-v16-rsc/.github/workflows/ci.yml

@@ -1,3 +1,9 @@
+#
+# NOTE:
+# This workflow is a template for running this demo as a standalone repo.
+# GitHub Actions in this monorepo are only discovered from the root
+# `.github/workflows/` directory.
+#
 name: CI
 
 on:
@@ -10,7 +16,7 @@ jobs:
   lint-ruby:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Set up Ruby
         uses: ruby/setup-ruby@v1
         with:
@@ -22,11 +28,11 @@ jobs:
   lint-javascript:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Set up Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '20'
           cache: 'npm'
       - name: Install dependencies
         run: npm ci
@@ -51,16 +57,16 @@ jobs:
           - 5432:5432
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Set up Ruby
         uses: ruby/setup-ruby@v1
         with:
           ruby-version: '3.2'
           bundler-cache: true
       - name: Set up Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '20'
           cache: 'npm'
       - name: Install dependencies
         run: |
@@ -73,22 +79,13 @@ jobs:
         run: |
           bundle exec rails db:create
           bundle exec rails db:schema:load
+      - name: Build JavaScript bundles
+        env:
+          RAILS_ENV: test
+          DATABASE_URL: postgresql://postgres:postgres@localhost:5432/test
+        run: RAILS_ENV=test bin/shakapacker
       - name: Run tests
         env:
           RAILS_ENV: test
           DATABASE_URL: postgresql://postgres:postgres@localhost:5432/test
         run: bundle exec rails test
-
-  test-javascript:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - name: Set up Node
-        uses: actions/setup-node@v3
-        with:
-          node-version: '18'
-          cache: 'npm'
-      - name: Install dependencies
-        run: npm ci
-      - name: Run Jest tests
-        run: npm test

demos/basic-v16-rsc/README.md

@@ -1,24 +1,49 @@
-# README
+# basic-v16-rsc
 
-This README would normally document whatever steps are necessary to get the
-application up and running.
+React on Rails Pro demo for React Server Components (RSC) streaming.
 
-Things you may want to cover:
+## Requirements
 
-* Ruby version
+- Ruby 3.2+
+- Node 20+ (this app uses `npm@11`)
+- PostgreSQL
 
-* System dependencies
+## Setup
 
-* Configuration
+```bash
+# Install dependencies
+bundle install
+npm ci
 
-* Database creation
+# Database setup
+bin/rails db:create
+bin/rails db:migrate
+```
 
-* Database initialization
+## Run
 
-* How to run the test suite
+```bash
+# First run only: generate packs before starting dev processes
+ruby bin/shakapacker-precompile-hook
 
-* Services (job queues, cache servers, search engines, etc.)
+# Start Rails + renderer + bundler processes
+bin/dev
+```
 
-* Deployment instructions
+Open: `http://localhost:3000/hello_server`
 
-* ...
+## Test
+
+```bash
+# Rails tests
+bin/rails test
+
+# Lint
+npm run lint
+bundle exec rubocop
+```
+
+## Notes
+
+- This demo includes a Node renderer secured by `RENDERER_PASSWORD`.
+- In production-like environments, set `RENDERER_PASSWORD` explicitly.

demos/basic-v16-rsc/app/javascript/src/HelloServer/components/HelloServer.tsx

@@ -11,7 +11,6 @@
 // For more information, see:
 // https://www.shakacode.com/react-on-rails-pro/docs/react-server-components/
 
-import React from 'react';
 import LikeButton from './LikeButton';
 
 interface HelloServerProps {
@@ -24,7 +23,8 @@ interface GreetingData {
   facts: string[];
 }
 
-// Simulate an async data fetch (replace with a real API call or DB query)
+// Simulate an async data fetch (replace with a real API call or DB query).
+// This delay is intentionally artificial for demo purposes.
 async function fetchGreeting(name: string): Promise<GreetingData> {
   // In a real app, you could do:
   //   const data = await db.query('SELECT greeting FROM greetings WHERE name = ?', [name]);

demos/basic-v16-rsc/app/views/layouts/application.html.erb

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title><%= content_for(:title) || "Basic V16 Rsc" %></title>
     <meta name="viewport" content="width=device-width,initial-scale=1">
@@ -18,7 +18,7 @@
     <link rel="apple-touch-icon" href="/icon.png">
 
     <%# Includes all stylesheet files in app/assets/stylesheets %>
-    <%= stylesheet_link_tag :app %>
+    <%= stylesheet_link_tag :application %>
     <%= javascript_pack_tag "application" %>
   </head>
 

demos/basic-v16-rsc/bin/shakapacker-precompile-hook

@@ -24,12 +24,19 @@ exit 0 if ENV["SHAKAPACKER_SKIP_PRECOMPILE_HOOK"] == "true"
 ENV["REACT_ON_RAILS_SKIP_VALIDATION"] = "true"
 
 require_relative "../config/environment"
+begin
+  require "rainbow"
+rescue LoadError
+  nil
+end
 
 begin
-  puts Rainbow("🔄 Running React on Rails precompile hook...").cyan
+  start_msg = "🔄 Running React on Rails precompile hook..."
+  puts defined?(Rainbow) ? Rainbow(start_msg).cyan : start_msg
   ReactOnRails::PacksGenerator.instance.generate_packs_if_stale
 rescue StandardError => e
-  warn Rainbow("❌ Error in precompile hook: #{e.message}").red
+  error_msg = "❌ Error in precompile hook: #{e.message}"
+  warn defined?(Rainbow) ? Rainbow(error_msg).red : error_msg
   warn e.backtrace.first(5).join("\n")
   exit 1
 end

demos/basic-v16-rsc/bin/switch-bundler

@@ -91,7 +91,7 @@ class BundlerSwitcher
     end
 
     puts "✅ Removed #{@target_bundler == 'rspack' ? 'webpack' : 'rspack'} dependencies"
-    File.write(package_json_path, JSON.pretty_generate(package_json))
+    File.write(package_json_path, "#{JSON.pretty_generate(package_json)}\n")
   end
 
   def install_dependencies

demos/basic-v16-rsc/client/node-renderer.js

@@ -1,19 +1,27 @@
 const path = require('path');
+
 const { reactOnRailsProNodeRenderer } = require('react-on-rails-pro-node-renderer');
 
 const { env } = process;
+const parsedConcurrency =
+  env.NODE_RENDERER_CONCURRENCY != null ? Number(env.NODE_RENDERER_CONCURRENCY) : undefined;
 
 const config = {
   serverBundleCachePath: path.resolve(__dirname, '../.node-renderer-bundles'),
   port: Number(env.RENDERER_PORT) || 3800,
   logLevel: env.RENDERER_LOG_LEVEL || 'info',
 
   // See value in /config/initializers/react_on_rails_pro.rb
-  password: env.RENDERER_PASSWORD || 'devPassword',
+  password: (() => {
+    if (!env.RENDERER_PASSWORD && env.NODE_ENV === 'production') {
+      throw new Error('RENDERER_PASSWORD must be set in production');
+    }
+    return env.RENDERER_PASSWORD || 'devPassword';
+  })(),
 
   // Number of Node.js worker threads for SSR rendering
   // Set NODE_RENDERER_CONCURRENCY env var to override (e.g., for production tuning)
-  workersCount: env.NODE_RENDERER_CONCURRENCY != null ? Number(env.NODE_RENDERER_CONCURRENCY) : 3,
+  workersCount: parsedConcurrency ?? 3,
 
   // If set to true, `supportModules` enables the server-bundle code to call a default set of NodeJS modules
   // that get added to the VM context: { Buffer, process, setTimeout, setInterval, clearTimeout, clearInterval }.
@@ -34,7 +42,7 @@ const config = {
 // Renderer detects a total number of CPUs on virtual hostings like Heroku or CircleCI instead
 // of CPUs number allocated for current container. This results in spawning many workers while
 // only 1-2 of them really needed.
-if (env.CI) {
+if (env.CI && env.NODE_RENDERER_CONCURRENCY == null) {
   config.workersCount = 2;
 }
 

demos/basic-v16-rsc/config/initializers/cypress_on_rails.rb

@@ -4,7 +4,7 @@
     c.install_folder = File.expand_path("#{__dir__}/../../e2e")
     # WARNING!! CypressOnRails can execute arbitrary ruby code
     # please use with extra caution if enabling on hosted servers or starting your local server on 0.0.0.0
-    c.use_middleware = !Rails.env.production?
+    c.use_middleware = Rails.env.development? || Rails.env.test?
     #  c.use_vcr_middleware = !Rails.env.production?
     #  # Use this if you want to use use_cassette wrapper instead of manual insert/eject
     #  # c.use_vcr_use_cassette_middleware = !Rails.env.production?

demos/basic-v16-rsc/config/initializers/react_on_rails.rb

@@ -40,13 +40,16 @@
   # - Simpler configuration (no additional setup needed)
   # - Handled automatically by Shakapacker
   #
-  # ALTERNATIVE APPROACH: Uncomment below AND configure ReactOnRails::TestHelper
+  # ALTERNATIVE APPROACH: Keep the setting below enabled and configure ReactOnRails::TestHelper
   # - Provides explicit control over test asset compilation timing
   # - Requires adding ReactOnRails::TestHelper to spec/rails_helper.rb
   # - See: https://github.com/shakacode/react_on_rails/blob/master/docs/building-features/testing-configuration.md
   #
   config.build_test_command = "RAILS_ENV=test bin/shakapacker"
 
+  ################################################################################
+  # Component Loading
+  ################################################################################
   config.auto_load_bundle = true
   config.components_subdirectory = "ror_components"
   ################################################################################