Restore 'use client' directives to RSCProvider and RSCRoute

These files MUST be client components because they use client-only React APIs:
- React.createContext and React.useContext (RSCProvider)
- React.Component class (RSCRoute)

The previous commit incorrectly removed 'use client' from these files.
The ESLint rule preventing 'use client' only applies to .server.tsx files,
not to regular .tsx files that need client-side APIs.

Without 'use client', webpack includes these files in the server bundle,
which fails because React's server exports don't include client-only APIs.

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

Co-Authored-By: Claude <[email protected]>

Author: justin808

packages/react-on-rails-pro/src/RSCProvider.tsx

@@ -12,15 +12,16 @@
  * https://github.com/shakacode/react_on_rails/blob/master/REACT-ON-RAILS-PRO-LICENSE.md
  */
 
-import type { ReactNode } from 'react';
+'use client';
+
 import * as React from 'react';
 import type { ClientGetReactServerComponentProps } from './getReactServerComponent.client.ts';
 import { createRSCPayloadKey } from './utils.ts';
 
 type RSCContextType = {
-  getComponent: (componentName: string, componentProps: unknown) => Promise<ReactNode>;
+  getComponent: (componentName: string, componentProps: unknown) => Promise<React.ReactNode>;
 
-  refetchComponent: (componentName: string, componentProps: unknown) => Promise<ReactNode>;
+  refetchComponent: (componentName: string, componentProps: unknown) => Promise<React.ReactNode>;
 };
 
 const RSCContext = React.createContext<RSCContextType | undefined>(undefined);
@@ -47,9 +48,9 @@ const RSCContext = React.createContext<RSCContextType | undefined>(undefined);
 export const createRSCProvider = ({
   getServerComponent,
 }: {
-  getServerComponent: (props: ClientGetReactServerComponentProps) => Promise<ReactNode>;
+  getServerComponent: (props: ClientGetReactServerComponentProps) => Promise<React.ReactNode>;
 }) => {
-  const fetchRSCPromises: Record<string, Promise<ReactNode>> = {};
+  const fetchRSCPromises: Record<string, Promise<React.ReactNode>> = {};
 
   const getComponent = (componentName: string, componentProps: unknown) => {
     const key = createRSCPayloadKey(componentName, componentProps);
@@ -75,7 +76,7 @@ export const createRSCProvider = ({
 
   const contextValue = { getComponent, refetchComponent };
 
-  return ({ children }: { children: ReactNode }) => {
+  return ({ children }: { children: React.ReactNode }) => {
     return <RSCContext.Provider value={contextValue}>{children}</RSCContext.Provider>;
   };
 };

packages/react-on-rails-pro/src/RSCRoute.tsx

@@ -14,7 +14,8 @@
 
 /// <reference types="react/experimental" />
 
-import type { ReactNode } from 'react';
+'use client';
+
 import * as React from 'react';
 import { useRSC } from './RSCProvider.tsx';
 import { ServerComponentFetchError } from './ServerComponentFetchError.ts';
@@ -24,10 +25,10 @@ import { ServerComponentFetchError } from './ServerComponentFetchError.ts';
  * So, the parent ErrorBoundary can refetch the server component
  */
 class RSCRouteErrorBoundary extends React.Component<
-  { children: ReactNode; componentName: string; componentProps: unknown },
+  { children: React.ReactNode; componentName: string; componentProps: unknown },
   { error: Error | null }
 > {
-  constructor(props: { children: ReactNode; componentName: string; componentProps: unknown }) {
+  constructor(props: { children: React.ReactNode; componentName: string; componentProps: unknown }) {
     super(props);
     this.state = { error: null };
   }
@@ -74,7 +75,7 @@ export type RSCRouteProps = {
   componentProps: unknown;
 };
 
-const PromiseWrapper = ({ promise }: { promise: Promise<ReactNode> }) => {
+const PromiseWrapper = ({ promise }: { promise: Promise<React.ReactNode> }) => {
   // React.use is available in React 18.3+
   const promiseResult = React.use(promise);
 
@@ -87,7 +88,7 @@ const PromiseWrapper = ({ promise }: { promise: Promise<ReactNode> }) => {
   return promiseResult;
 };
 
-const RSCRoute = ({ componentName, componentProps }: RSCRouteProps): ReactNode => {
+const RSCRoute = ({ componentName, componentProps }: RSCRouteProps): React.ReactNode => {
   const { getComponent } = useRSC();
   const componentPromise = getComponent(componentName, componentProps);
   return (