Update ReactOnRails package imports and enhance npm package resolution

- Introduced a method to determine the appropriate npm package for ReactOnRails, allowing for dynamic imports based on the environment (Pro or standard).
- Updated import statements across various components to utilize the new package resolution method, ensuring consistency and reducing hardcoded paths.
- Modified the `package.json` preinstall script to include linking for both react-on-rails and react-on-rails-pro, improving setup for development environments.
- Adjusted yarn.lock to reflect the new linking structure for the react-on-rails package.

These changes enhance the modularity and maintainability of the React on Rails framework.

Author: AbanoubGhadban

lib/react_on_rails/packs_generator.rb

@@ -16,6 +16,12 @@ def self.instance
       @instance ||= PacksGenerator.new
     end
 
+    def react_on_rails_npm_package
+      return "react-on-rails-pro" if ReactOnRails::Utils.react_on_rails_pro?
+
+      "react-on-rails"
+    end
+
     def generate_packs_if_stale
       return unless ReactOnRails.configuration.auto_load_bundle
 
@@ -104,7 +110,7 @@ def pack_file_contents(file_path)
 
       if load_server_components && !client_entrypoint?(file_path)
         return <<~FILE_CONTENT.strip
-          import registerServerComponent from 'react-on-rails/registerServerComponent/client';
+          import registerServerComponent from '#{react_on_rails_npm_package}/registerServerComponent/client';
 
           registerServerComponent("#{registered_component_name}");
         FILE_CONTENT
@@ -113,7 +119,7 @@ def pack_file_contents(file_path)
       relative_component_path = relative_component_path_from_generated_pack(file_path)
 
       <<~FILE_CONTENT.strip
-        import ReactOnRails from 'react-on-rails/client';
+        import ReactOnRails from '#{react_on_rails_npm_package}/client';
         import #{registered_component_name} from '#{relative_component_path}';
 
         ReactOnRails.register({#{registered_component_name}});
@@ -129,14 +135,14 @@ def create_server_pack
 
     def build_server_pack_content(component_on_server_imports, server_components, client_components)
       content = <<~FILE_CONTENT
-        import ReactOnRails from 'react-on-rails';
+        import ReactOnRails from '#{react_on_rails_npm_package}';
 
         #{component_on_server_imports.join("\n")}\n
       FILE_CONTENT
 
       if server_components.any?
         content += <<~FILE_CONTENT
-          import registerServerComponent from 'react-on-rails/registerServerComponent/server';
+          import registerServerComponent from '#{react_on_rails_npm_package}/registerServerComponent/server';
           registerServerComponent({#{server_components.join(",\n")}});\n
         FILE_CONTENT
       end

react_on_rails_pro/spec/dummy/client/app/components/AsyncOnServerSyncOnClient.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { Suspense, useEffect } from 'react';
-import RSCRoute from 'react-on-rails/RSCRoute';
+import RSCRoute from 'react-on-rails-pro/RSCRoute';
 
 const AsyncComponentOnServer = async ({
   promise,

react_on_rails_pro/spec/dummy/client/app/components/ServerComponentRouter.tsx

@@ -1,6 +1,6 @@
 import React, { Suspense } from 'react';
 import { Routes, Route, Link } from 'react-router-dom';
-import RSCRoute from 'react-on-rails/RSCRoute';
+import RSCRoute from 'react-on-rails-pro/RSCRoute';
 // @ts-expect-error - EchoProps is a JavaScript file without TypeScript types
 import EchoProps from './EchoProps';
 import { ErrorBoundary } from './ErrorBoundary';

react_on_rails_pro/spec/dummy/client/app/components/ServerComponentWithRetry.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
-import RSCRoute from 'react-on-rails/RSCRoute';
-import { useRSC } from 'react-on-rails/RSCProvider';
-import { isServerComponentFetchError } from 'react-on-rails/ServerComponentFetchError';
+import RSCRoute from 'react-on-rails-pro/RSCRoute';
+import { useRSC } from 'react-on-rails-pro/RSCProvider';
+import { isServerComponentFetchError } from 'react-on-rails-pro/ServerComponentFetchError';
 
 const ErrorFallback = ({ error, resetErrorBoundary }: { error: Error; resetErrorBoundary: () => void }) => {
   const { refetchComponent } = useRSC();

react_on_rails_pro/spec/dummy/client/app/ror-auto-load-components/AsyncOnServerSyncOnClient.client.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import wrapServerComponentRenderer from 'react-on-rails/wrapServerComponentRenderer/client';
+import wrapServerComponentRenderer from 'react-on-rails-pro/wrapServerComponentRenderer/client';
 import AsyncOnServerSyncOnClient from '../components/AsyncOnServerSyncOnClient';
 
 export default wrapServerComponentRenderer(AsyncOnServerSyncOnClient);

react_on_rails_pro/spec/dummy/client/app/ror-auto-load-components/AsyncOnServerSyncOnClient.server.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import wrapServerComponentRenderer from 'react-on-rails/wrapServerComponentRenderer/server';
+import wrapServerComponentRenderer from 'react-on-rails-pro/wrapServerComponentRenderer/server';
 import AsyncOnServerSyncOnClient from '../components/AsyncOnServerSyncOnClient';
 
 export default wrapServerComponentRenderer(AsyncOnServerSyncOnClient);

react_on_rails_pro/spec/dummy/client/app/ror-auto-load-components/ServerComponentRouter.client.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { BrowserRouter } from 'react-router-dom';
-import wrapServerComponentRenderer from 'react-on-rails/wrapServerComponentRenderer/client';
+import wrapServerComponentRenderer from 'react-on-rails-pro/wrapServerComponentRenderer/client';
 import App from '../components/ServerComponentRouter';
 
 function ClientComponentRouter(props: object) {

react_on_rails_pro/spec/dummy/client/app/ror-auto-load-components/ServerComponentRouter.server.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { StaticRouter } from 'react-router-dom/server.js';
 import { RailsContext, ReactComponentOrRenderFunction } from 'react-on-rails-pro';
-import wrapServerComponentRenderer from 'react-on-rails/wrapServerComponentRenderer/server';
+import wrapServerComponentRenderer from 'react-on-rails-pro/wrapServerComponentRenderer/server';
 import App from '../components/ServerComponentRouter';
 
 function ServerComponentRouter(props: object, railsContext: RailsContext) {

react_on_rails_pro/spec/dummy/package.json

@@ -95,7 +95,7 @@
   "scripts": {
     "test": "yarn run build:test && yarn run lint && rspec",
     "lint": "cd ../.. && nps lint",
-    "preinstall": "yarn run link-source && yalc add --link react-on-rails-pro && yalc add --link @shakacode-tools/react-on-rails-pro-node-renderer",
+    "preinstall": "yarn run link-source && yalc add --link react-on-rails-pro && cd .yalc/react-on-rails-pro && yalc add --link react-on-rails && cd ../.. && yalc add --link @shakacode-tools/react-on-rails-pro-node-renderer",
     "link-source": "cd ../../.. && yarn && yarn run yalc:publish",
     "postinstall": "test -f post-yarn-install.local && ./post-yarn-install.local || true",
     "build:test": "rm -rf public/webpack/test && rm -rf ssr-generated && RAILS_ENV=test NODE_ENV=test bin/shakapacker",

react_on_rails_pro/spec/dummy/yarn.lock

@@ -5357,10 +5357,9 @@ react-on-rails-rsc@^19.0.2:
     neo-async "^2.6.1"
     webpack-sources "^3.2.0"
 
-react-on-rails@*:
-  version "16.1.1"
-  resolved "https://registry.yarnpkg.com/react-on-rails/-/react-on-rails-16.1.1.tgz#bf5e752c44381252204482342ae5722d9f45f715"
-  integrity sha512-Ntw/4HSB/p9QJ1V2kc0aETzK0W0Vy0suSh0Ugs3Ctfso2ovIT2YUegJJyPtFzX9jUZSR6Q/tkmkgNgzASkO0pw==
+"react-on-rails@link:.yalc/react-on-rails-pro/.yalc/react-on-rails":
+  version "0.0.0"
+  uid ""
 
 react-proptypes@^1.0.0:
   version "1.0.0"