Move React/Shakapacker version compatibility to generator smoke tests (#2125)

## Summary

This PR moves React and Shakapacker version compatibility testing from
spec/dummy to the generator smoke tests, as suggested in [PR
#2114](#2114) review.

Key changes:
- Update spec/dummy to always use latest React 19 and Shakapacker 9.4.0
- Add minimum version example apps (`basic-minimum`,
`basic-server-rendering-minimum`) that test React 18.0.0 and Shakapacker
8.2.0
- Simplify `script/convert` to only handle Node.js tooling compatibility
(removed React/Shakapacker version modifications)
- Update CI workflows to run appropriate examples per dependency level:
- **Latest CI**: runs `run_rspec:shakapacker_examples_latest` (basic,
redux, etc.)
- **Minimum CI**: runs `run_rspec:shakapacker_examples_minimum`
(basic-minimum, etc.)

## Benefits

- **Clearer separation**: spec/dummy tests latest versions, generators
test compatibility matrix
- **Simpler CI configuration**: spec/dummy integration tests no longer
need version conversions
- **Better reflects real-world usage**: users running the generators get
their compatibility tested

## Test plan

- [x] Verify rake tasks are created correctly for new example types
- [x] Verify `run_rspec:shakapacker_examples_latest` includes only
non-minimum examples
- [x] Verify `run_rspec:shakapacker_examples_minimum` includes only
minimum examples
- [x] RuboCop passes
- [ ] CI runs generator tests with correct examples per dependency level

## Manual Testing Checklist

Before merging, verify the following locally:

```bash
# Verify TypeScript and linting
pnpm run type-check
pnpm run lint
pnpm run build

# Run react-on-rails package tests
cd packages/react-on-rails && pnpm run test

# Verify rake tasks exist and match expectations
cd react_on_rails && bundle exec rake -T | grep shakapacker_examples

# Test latest examples (if CI is running latest config)
bundle exec rake run_rspec:shakapacker_examples_latest

# Test minimum examples (if CI is running minimum config)
bundle exec rake run_rspec:shakapacker_examples_pinned
```

Closes #2123

🤖 Generated with [Claude Code](https://claude.com/claude-code)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
- CI now runs separate conditional example suites for latest and
pinned/minimum setups.

* **Tests**
- Added targeted test tasks for React 16/17/18/19 and pinned groups;
pinned suites run isolated installs and conversion steps.
  - Test adjusted to expect failure output on STDERR.

* **Dependencies**
- Upgraded React/React‑DOM and related types to v19; added RSC support
package.

* **Chores**
- Helmet switched to provider-based usage; removed deprecated
chromedriver-helper; improved example generation to support pinned
React/Shakapacker versions.

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude <[email protected]>

Author: justin808

.github/workflows/examples.yml

@@ -137,7 +137,7 @@ jobs:
           echo "Node version: "; node -v
           echo "pnpm version: "; pnpm --version
           echo "Bundler version: "; bundle --version
-      - name: run conversion script to support shakapacker v6
+      - name: Run conversion script for older Node compatibility
         if: matrix.dependency-level == 'minimum'
         run: script/convert
       - name: Save root ruby gems to cache
@@ -180,8 +180,24 @@ jobs:
       - name: Set packer version environment variable
         run: |
           echo "CI_DEPENDENCY_LEVEL=${{ matrix.dependency-level }}" >> $GITHUB_ENV
-      - name: Main CI
-        run: cd react_on_rails && bundle exec rake run_rspec:shakapacker_examples
+      - name: Verify rake tasks exist
+        run: |
+          cd react_on_rails
+          echo "Available shakapacker_examples tasks:"
+          bundle exec rake -T | grep shakapacker_examples || true
+          # Verify the specific task we need exists
+          TASK_NAME="run_rspec:shakapacker_examples_${{ matrix.dependency-level == 'latest' && 'latest' || 'pinned' }}"
+          if ! bundle exec rake -T | grep -q "$TASK_NAME"; then
+            echo "ERROR: Required rake task '$TASK_NAME' not found!"
+            exit 1
+          fi
+          echo "✓ Found required task: $TASK_NAME"
+      - name: Main CI - Latest version examples
+        if: matrix.dependency-level == 'latest'
+        run: cd react_on_rails && bundle exec rake run_rspec:shakapacker_examples_latest
+      - name: "Main CI - Pinned version examples (React 16, 17, 18 with Shakapacker 8.2.0)"
+        if: matrix.dependency-level == 'minimum'
+        run: cd react_on_rails && bundle exec rake run_rspec:shakapacker_examples_pinned
       - name: Store test results
         uses: actions/upload-artifact@v4
         with:

.github/workflows/integration-tests.yml

@@ -140,7 +140,7 @@ jobs:
           echo "Node version: "; node -v
           echo "pnpm version: "; pnpm --version
           echo "Bundler version: "; bundle --version
-      - name: run conversion script to support shakapacker v6
+      - name: Run conversion script for older Node compatibility
         if: matrix.dependency-level == 'minimum'
         run: script/convert
       - name: Install Node modules with pnpm for renderer package
@@ -230,7 +230,7 @@ jobs:
           echo "Node version: "; node -v
           echo "pnpm version: "; pnpm --version
           echo "Bundler version: "; bundle --version
-      - name: run conversion script to support shakapacker v6
+      - name: Run conversion script for older Node compatibility
         if: matrix.dependency-level == 'minimum'
         run: script/convert
       - name: Save root ruby gems to cache

package.json

@@ -31,8 +31,8 @@
     "@tsconfig/node14": "^14.1.2",
     "@types/jest": "^29.5.14",
     "@types/node": "^20.17.16",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@types/turbolinks": "^5.2.2",
     "create-react-class": "^15.7.0",
     "eslint": "^9.24.0",
@@ -58,8 +58,9 @@
     "prettier": "^3.5.2",
     "prop-types": "^15.8.1",
     "publint": "^0.3.4",
-    "react": "18.0.0",
-    "react-dom": "18.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-on-rails-rsc": "19.0.2",
     "redux": "^4.2.1",
     "size-limit": "^12.0.0",
     "stylelint": "^16.14.0",

packages/react-on-rails/src/ClientRenderer.ts

@@ -174,7 +174,6 @@ function unmountAllComponents(): void {
         root.unmount();
       } else {
         // React 16-17 legacy API
-        // eslint-disable-next-line @typescript-eslint/no-deprecated
         unmountComponentAtNode(domNode);
       }
     } catch (error) {

packages/react-on-rails/src/reactApis.cts

@@ -4,6 +4,14 @@ import * as ReactDOM from 'react-dom';
 import type { ReactElement } from 'react';
 import type { RenderReturnType } from './types/index.ts' with { 'resolution-mode': 'import' };
 
+// Type for legacy React DOM APIs (React 16/17) that were removed from @types/react-dom@19
+// These are only used at runtime when supportsRootApi is false
+interface LegacyReactDOM {
+  hydrate(element: ReactElement, container: Element): void;
+  render(element: ReactElement, container: Element): RenderReturnType;
+  unmountComponentAtNode(container: Element): boolean;
+}
+
 const reactMajorVersion = Number(ReactDOM.version?.split('.')[0]) || 16;
 
 // TODO: once we require React 18, we can remove this and inline everything guarded by it.
@@ -29,12 +37,27 @@ if (supportsRootApi) {
 
 type HydrateOrRenderType = (domNode: Element, reactElement: ReactElement) => RenderReturnType;
 
-/* eslint-disable @typescript-eslint/no-deprecated,@typescript-eslint/no-non-null-assertion,react/no-deprecated --
- * while we need to support React 16
- */
+// Cast ReactDOM to include legacy APIs for React 16/17 compatibility
+// These methods exist at runtime but are removed from @types/react-dom@19
+const legacyReactDOM = ReactDOM as unknown as LegacyReactDOM;
+
+// Validate legacy APIs exist at runtime when needed (React < 18)
+if (!supportsRootApi) {
+  if (typeof legacyReactDOM.hydrate !== 'function') {
+    throw new Error('React legacy hydrate API not available. Expected React 16/17.');
+  }
+  if (typeof legacyReactDOM.render !== 'function') {
+    throw new Error('React legacy render API not available. Expected React 16/17.');
+  }
+  if (typeof legacyReactDOM.unmountComponentAtNode !== 'function') {
+    throw new Error('React legacy unmountComponentAtNode API not available. Expected React 16/17.');
+  }
+}
+
+/* eslint-disable @typescript-eslint/no-non-null-assertion -- reactDomClient is always defined when supportsRootApi is true */
 export const reactHydrate: HydrateOrRenderType = supportsRootApi
   ? reactDomClient!.hydrateRoot
-  : (domNode, reactElement) => ReactDOM.hydrate(reactElement, domNode);
+  : (domNode, reactElement) => legacyReactDOM.hydrate(reactElement, domNode);
 
 export function reactRender(domNode: Element, reactElement: ReactElement): RenderReturnType {
   if (supportsRootApi) {
@@ -43,14 +66,14 @@ export function reactRender(domNode: Element, reactElement: ReactElement): Rende
     return root;
   }
 
-  // eslint-disable-next-line react/no-render-return-value
-  return ReactDOM.render(reactElement, domNode);
+  return legacyReactDOM.render(reactElement, domNode);
 }
 
-export const unmountComponentAtNode: typeof ReactDOM.unmountComponentAtNode = supportsRootApi
+export const unmountComponentAtNode: (container: Element) => boolean = supportsRootApi
   ? // not used if we use root API
-    () => false
-  : ReactDOM.unmountComponentAtNode;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    (_container: Element) => false
+  : (container: Element) => legacyReactDOM.unmountComponentAtNode(container);
 
 export const ensureReactUseAvailable = () => {
   if (!('use' in React) || typeof React.use !== 'function') {

packages/react-on-rails/src/types/index.ts

@@ -125,9 +125,9 @@ interface ServerRenderResult {
   error?: Error;
 }
 
-type CreateReactOutputSyncResult = ServerRenderResult | ReactElement<unknown>;
+type CreateReactOutputSyncResult = ServerRenderResult | ReactElement;
 
-type CreateReactOutputAsyncResult = Promise<string | ServerRenderHashRenderedHtml | ReactElement<unknown>>;
+type CreateReactOutputAsyncResult = Promise<string | ServerRenderHashRenderedHtml | ReactElement>;
 
 type CreateReactOutputResult = CreateReactOutputSyncResult | CreateReactOutputAsyncResult;