react_on_rails 15.0.0.alpha.1 → 15.0.0.rc.0

data/knip.ts

@@ -0,0 +1,100 @@
+import type { KnipConfig } from 'knip';
+
+const config: KnipConfig = {
+  // ! at the end means files are used in production
+  workspaces: {
+    '.': {
+      entry: [
+        'node_package/src/ReactOnRails.node.ts!',
+        'node_package/src/ReactOnRailsRSC.ts!',
+        'node_package/src/registerServerComponent/client.tsx!',
+        'node_package/src/registerServerComponent/server.tsx!',
+        'node_package/src/registerServerComponent/server.rsc.ts!',
+        'node_package/src/wrapServerComponentRenderer/server.tsx!',
+        'node_package/src/wrapServerComponentRenderer/server.rsc.tsx!',
+        'node_package/src/RSCRoute.tsx!',
+        'node_package/src/ServerComponentFetchError.ts!',
+        'eslint.config.ts',
+      ],
+      project: ['node_package/src/**/*.[jt]s{x,}!', 'node_package/tests/**/*.[jt]s{x,}'],
+      babel: {
+        config: ['node_package/babel.config.js'],
+      },
+      ignore: ['node_package/tests/emptyForTesting.js'],
+      ignoreBinaries: [
+        // Knip fails to detect it's declared in devDependencies
+        'nps',
+        // local scripts
+        'node_package/scripts/.*',
+      ],
+      ignoreDependencies: [
+        // Required for TypeScript compilation, but we don't depend on Turbolinks itself.
+        '@types/turbolinks',
+        // The Knip ESLint plugin fails to detect these are transitively required by a config,
+        // though we don't actually use its rules anywhere.
+        '@babel/eslint-parser',
+        '@babel/preset-react',
+        'eslint-config-shakacode',
+        'eslint-import-resolver-alias',
+        'eslint-plugin-import',
+        'eslint-plugin-jsx-a11y',
+        'eslint-plugin-react',
+        'eslint-plugin-react-hooks',
+        // These are used as transitive dependencies and missing from package.json
+        '@eslint/eslintrc',
+        '@eslint/js',
+        // used by Jest
+        'jsdom',
+      ],
+    },
+    'spec/dummy': {
+      entry: [
+        'app/assets/config/manifest.js!',
+        'client/app/packs/**/*.js!',
+        // Not sure why this isn't detected as a dependency of client/app/packs/server-bundle.js
+        'client/app/generated/server-bundle-generated.js!',
+        'spec/fixtures/automated_packs_generation/**/*.js{x,}',
+        'config/webpack/{production,development,test}.js',
+        // Declaring this as webpack.config instead doesn't work correctly
+        'config/webpack/webpack.config.js',
+      ],
+      ignore: ['**/app-react16/**/*'],
+      project: ['**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}!', 'config/webpack/*.js'],
+      paths: {
+        'Assets/*': ['client/app/assets/*'],
+      },
+      ignoreBinaries: [
+        // Has to be installed globally
+        'yalc',
+        // Local binaries
+        'bin/.*',
+      ],
+      ignoreDependencies: [
+        // Knip thinks it can be a devDependency, but it's supposed to be in dependencies.
+        '@babel/runtime',
+        // There's no ReScript plugin for Knip
+        '@rescript/react',
+        // The Babel plugin fails to detect it
+        'babel-plugin-transform-react-remove-prop-types',
+        // This one is weird. It's long-deprecated and shouldn't be necessary.
+        // Probably need to update the Webpack config.
+        'node-libs-browser',
+        // The below dependencies are not detected by the Webpack plugin
+        // due to the config issue.
+        'css-loader',
+        'expose-loader',
+        'file-loader',
+        'imports-loader',
+        'mini-css-extract-plugin',
+        'null-loader',
+        'sass',
+        'sass-loader',
+        'sass-resources-loader',
+        'style-loader',
+        'url-loader',
+      ],
+    },
+  },
+};
+
+export default config;

data/lib/generators/USAGE

@@ -1,6 +1,6 @@
 Description:
 
-The react_on_rails:install generator integrates webpack with rails with ease. You
+The react_on_rails:install generator integrates Webpack with Rails with ease. You
 can pass the redux option if you'd like to have redux setup for you automatically.
 
 * Redux

data/lib/generators/react_on_rails/dev_tests_generator.rb

@@ -47,14 +47,10 @@ module ReactOnRails
 
       def add_yarn_relative_install_script_in_package_json
         package_json = File.join(destination_root, "package.json")
-        contents = File.read(package_json)
-        replacement_value = <<-STRING
-  "scripts": {
-    "postinstall": "yalc link react-on-rails",
-        STRING
-        new_client_package_json_contents = contents.gsub(/ {2}"scripts": {/,
-                                                         replacement_value)
-        File.open(package_json, "w+") { |f| f.puts new_client_package_json_contents }
+        contents = JSON.parse(File.read(package_json))
+        contents["scripts"] ||= {}
+        contents["scripts"]["postinstall"] = "yalc link react-on-rails"
+        File.open(package_json, "w+") { |f| f.puts JSON.pretty_generate(contents) }
       end
     end
   end

data/lib/generators/react_on_rails/templates/.eslintrc

@@ -1,5 +1,5 @@
 ---
-extends: 
+extends:
   - eslint-config-shakacode
   - prettier
 

data/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorld.module.css

@@ -1,4 +1,4 @@
 .bright {
-    color: green;
-    font-weight: bold;
+  color: green;
+  font-weight: bold;
 }

data/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorldServer.js

@@ -1,5 +1,5 @@
 import HelloWorld from './HelloWorld';
 // This could be specialized for server rendering
-// For example, if using React-Router, we'd have the SSR setup here.
+// For example, if using React Router, we'd have the SSR setup here.
 
 export default HelloWorld;

data/lib/generators/react_on_rails/templates/base/base/app/javascript/packs/registration.js.tt

@@ -1,4 +1,4 @@
-import ReactOnRails from 'react-on-rails';
+import ReactOnRails from 'react-on-rails/client';
 
 import <%= config[:component_name] %> from '<%= config[:app_relative_path] %>';
 

data/lib/generators/react_on_rails/templates/base/base/config/shakapacker.yml

@@ -37,7 +37,7 @@ development:
       #  port: 8080
     compress: true
     # Note that apps that do not check the host are vulnerable to DNS rebinding attacks
-    allowed_hosts: [ 'localhost' ]
+    allowed_hosts: ['localhost']
     pretty: true
     headers:
       'Access-Control-Allow-Origin': '*'

data/lib/generators/react_on_rails/templates/redux/base/app/javascript/bundles/HelloWorld/reducers/helloWorldReducer.js

@@ -1,7 +1,7 @@
 import { combineReducers } from 'redux';
 import { HELLO_WORLD_NAME_UPDATE } from '../constants/helloWorldConstants';
 
-const name = (state = '', action) => {
+const name = (state = '', action = {}) => {
   switch (action.type) {
     case HELLO_WORLD_NAME_UPDATE:
       return action.text;

data/lib/react_on_rails/configuration.rb

@@ -9,6 +9,9 @@ module ReactOnRails
   end
 
   DEFAULT_GENERATED_ASSETS_DIR = File.join(%w[public webpack], Rails.env).freeze
+  DEFAULT_REACT_CLIENT_MANIFEST_FILE = "react-client-manifest.json"
+  DEFAULT_REACT_SERVER_CLIENT_MANIFEST_FILE = "react-server-client-manifest.json"
+  DEFAULT_COMPONENT_REGISTRY_TIMEOUT = 5000
 
   def self.configuration
     @configuration ||= Configuration.new(
@@ -17,6 +20,9 @@ module ReactOnRails
       # generated_assets_dirs is deprecated
       generated_assets_dir: "",
       server_bundle_js_file: "",
+      rsc_bundle_js_file: "",
+      react_client_manifest_file: DEFAULT_REACT_CLIENT_MANIFEST_FILE,
+      react_server_client_manifest_file: DEFAULT_REACT_SERVER_CLIENT_MANIFEST_FILE,
       prerender: false,
       auto_load_bundle: false,
       replay_console: true,
@@ -39,9 +45,14 @@ module ReactOnRails
       i18n_output_format: nil,
       components_subdirectory: nil,
       make_generated_server_bundle_the_entrypoint: false,
-      defer_generated_component_packs: true,
+      defer_generated_component_packs: false,
       # forces the loading of React components
-      force_load: false
+      force_load: true,
+      # Maximum time in milliseconds to wait for client-side component registration after page load.
+      # If exceeded, an error will be thrown for server-side rendered components not registered on the client.
+      # Set to 0 to disable the timeout and wait indefinitely for component registration.
+      component_registry_timeout: DEFAULT_COMPONENT_REGISTRY_TIMEOUT,
+      generated_component_packs_loading_strategy: nil
     )
   end
 
@@ -52,26 +63,29 @@ module ReactOnRails
                   :generated_assets_dirs, :generated_assets_dir, :components_subdirectory,
                   :webpack_generated_files, :rendering_extension, :build_test_command,
                   :build_production_command, :i18n_dir, :i18n_yml_dir, :i18n_output_format,
+                  :i18n_yml_safe_load_options, :defer_generated_component_packs,
                   :server_render_method, :random_dom_id, :auto_load_bundle,
                   :same_bundle_for_client_and_server, :rendering_props_extension,
                   :make_generated_server_bundle_the_entrypoint,
-                  :defer_generated_component_packs,
-                  :force_load
+                  :generated_component_packs_loading_strategy, :force_load, :rsc_bundle_js_file,
+                  :react_client_manifest_file, :react_server_client_manifest_file, :component_registry_timeout
 
     # rubocop:disable Metrics/AbcSize
     def initialize(node_modules_location: nil, server_bundle_js_file: nil, prerender: nil,
                    replay_console: nil, make_generated_server_bundle_the_entrypoint: nil,
-                   trace: nil, development_mode: nil,
+                   trace: nil, development_mode: nil, defer_generated_component_packs: nil,
                    logging_on_server: nil, server_renderer_pool_size: nil,
                    server_renderer_timeout: nil, raise_on_prerender_error: true,
                    skip_display_none: nil, generated_assets_dirs: nil,
                    generated_assets_dir: nil, webpack_generated_files: nil,
                    rendering_extension: nil, build_test_command: nil,
-                   build_production_command: nil, defer_generated_component_packs: nil,
+                   build_production_command: nil, generated_component_packs_loading_strategy: nil,
                    same_bundle_for_client_and_server: nil,
-                   i18n_dir: nil, i18n_yml_dir: nil, i18n_output_format: nil,
+                   i18n_dir: nil, i18n_yml_dir: nil, i18n_output_format: nil, i18n_yml_safe_load_options: nil,
                    random_dom_id: nil, server_render_method: nil, rendering_props_extension: nil,
-                   components_subdirectory: nil, auto_load_bundle: nil, force_load: nil)
+                   components_subdirectory: nil, auto_load_bundle: nil, force_load: nil,
+                   rsc_bundle_js_file: nil, react_client_manifest_file: nil, react_server_client_manifest_file: nil,
+                   component_registry_timeout: nil)
       self.node_modules_location = node_modules_location.present? ? node_modules_location : Rails.root
       self.generated_assets_dirs = generated_assets_dirs
       self.generated_assets_dir = generated_assets_dir
@@ -80,6 +94,7 @@ module ReactOnRails
       self.i18n_dir = i18n_dir
       self.i18n_yml_dir = i18n_yml_dir
       self.i18n_output_format = i18n_output_format
+      self.i18n_yml_safe_load_options = i18n_yml_safe_load_options
 
       self.random_dom_id = random_dom_id
       self.prerender = prerender
@@ -94,9 +109,13 @@ module ReactOnRails
       self.raise_on_prerender_error = raise_on_prerender_error
       self.skip_display_none = skip_display_none
       self.rendering_props_extension = rendering_props_extension
+      self.component_registry_timeout = component_registry_timeout
 
       # Server rendering:
       self.server_bundle_js_file = server_bundle_js_file
+      self.rsc_bundle_js_file = rsc_bundle_js_file
+      self.react_client_manifest_file = react_client_manifest_file
+      self.react_server_client_manifest_file = react_server_client_manifest_file
       self.same_bundle_for_client_and_server = same_bundle_for_client_and_server
       self.server_renderer_pool_size = self.development_mode ? 1 : server_renderer_pool_size
       self.server_renderer_timeout = server_renderer_timeout # seconds
@@ -110,6 +129,7 @@ module ReactOnRails
       self.make_generated_server_bundle_the_entrypoint = make_generated_server_bundle_the_entrypoint
       self.defer_generated_component_packs = defer_generated_component_packs
       self.force_load = force_load
+      self.generated_component_packs_loading_strategy = generated_component_packs_loading_strategy
     end
     # rubocop:enable Metrics/AbcSize
 
@@ -124,10 +144,56 @@ module ReactOnRails
       error_if_using_packer_and_generated_assets_dir_not_match_public_output_path
       # check_deprecated_settings
       adjust_precompile_task
+      check_component_registry_timeout
+      validate_generated_component_packs_loading_strategy
     end
 
     private
 
+    def check_component_registry_timeout
+      self.component_registry_timeout = DEFAULT_COMPONENT_REGISTRY_TIMEOUT if component_registry_timeout.nil?
+
+      return if component_registry_timeout.is_a?(Integer) && component_registry_timeout >= 0
+
+      raise ReactOnRails::Error, "component_registry_timeout must be a positive integer"
+    end
+
+    # rubocop:disable Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity
+    def validate_generated_component_packs_loading_strategy
+      # rubocop:enable Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity
+
+      if defer_generated_component_packs
+        if %i[async sync].include?(generated_component_packs_loading_strategy)
+          Rails.logger.warn "**WARNING** ReactOnRails: config.defer_generated_component_packs is " \
+                            "superseded by config.generated_component_packs_loading_strategy"
+        else
+          Rails.logger.warn "[DEPRECATION] ReactOnRails: Use config." \
+                            "generated_component_packs_loading_strategy = :defer rather than " \
+                            "defer_generated_component_packs"
+          self.generated_component_packs_loading_strategy ||= :defer
+        end
+      end
+
+      msg = <<~MSG
+        ReactOnRails: Your current version of #{ReactOnRails::PackerUtils.packer_type.upcase_first} \
+        does not support async script loading,  which may cause performance issues. Please either:
+        1. Use :sync or :defer loading strategy instead of :async
+        2. Upgrade to Shakapacker v8.2.0 or above to enable async script loading
+      MSG
+      if PackerUtils.shakapacker_version_requirement_met?([8, 2, 0])
+        self.generated_component_packs_loading_strategy ||= :async
+      elsif generated_component_packs_loading_strategy.nil?
+        Rails.logger.warn("**WARNING** #{msg}")
+        self.generated_component_packs_loading_strategy = :sync
+      elsif generated_component_packs_loading_strategy == :async
+        raise ReactOnRails::Error, "**ERROR** #{msg}"
+      end
+
+      return if %i[async defer sync].include?(generated_component_packs_loading_strategy)
+
+      raise ReactOnRails::Error, "generated_component_packs_loading_strategy must be either :async, :defer, or :sync"
+    end
+
     def check_autobundling_requirements
       raise_missing_components_subdirectory if auto_load_bundle && !components_subdirectory.present?
       return unless components_subdirectory.present?
@@ -239,10 +305,13 @@ module ReactOnRails
     def ensure_webpack_generated_files_exists
       return unless webpack_generated_files.empty?
 
-      files = ["manifest.json"]
-      files << server_bundle_js_file if server_bundle_js_file.present?
-
-      self.webpack_generated_files = files
+      self.webpack_generated_files = [
+        "manifest.json",
+        server_bundle_js_file,
+        rsc_bundle_js_file,
+        react_client_manifest_file,
+        react_server_client_manifest_file
+      ].compact_blank
     end
 
     def configure_skip_display_none_deprecation

data/lib/react_on_rails/controller.rb

@@ -12,9 +12,11 @@ module ReactOnRails
     #
     # Be sure to include view helper `redux_store_hydration_data` at the end of your layout or view
     # or else there will be no client side hydration of your stores.
-    def redux_store(store_name, props: {})
+    def redux_store(store_name, props: {}, force_load: nil)
+      force_load = ReactOnRails.configuration.force_load if force_load.nil?
       redux_store_data = { store_name: store_name,
-                           props: props }
+                           props: props,
+                           force_load: force_load }
       @registered_stores_defer_render ||= []
       @registered_stores_defer_render << redux_store_data
     end

data/lib/react_on_rails/engine.rb

@@ -5,9 +5,7 @@ require "rails/railtie"
 module ReactOnRails
   class Engine < ::Rails::Engine
     config.to_prepare do
-      if File.exist?(VersionChecker::NodePackageVersion.package_json_path)
-        VersionChecker.build.raise_if_gem_and_node_package_versions_differ
-      end
+      VersionChecker.build.log_if_gem_and_node_package_versions_differ
       ReactOnRails::ServerRenderingPool.reset_pool
     end
   end