RubyGems - react_on_rails - Versions diffs - 15.0.0.rc.2 → 16.0.0 - Mend

react_on_rails 15.0.0.rc.2 → 16.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (74) hide show

data/lib/generators/react_on_rails/templates/base/base/app/javascript/packs/server-bundle.js CHANGED Viewed

@@ -1,8 +1 @@
-import ReactOnRails from 'react-on-rails';
-import HelloWorld from '../bundles/HelloWorld/components/HelloWorldServer';
-// This is how react_on_rails can see the HelloWorld in the browser.
-ReactOnRails.register({
-  HelloWorld,
-});
+// Placeholder comment - auto-generated imports will be prepended here by react_on_rails:generate_packs

data/lib/generators/react_on_rails/templates/base/base/app/javascript/src/HelloWorld/ror_components/HelloWorld.client.jsx ADDED Viewed

@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+import * as style from './HelloWorld.module.css';
+const HelloWorld = (props) => {
+  const [name, setName] = useState(props.name);
+  return (
+    <div>
+      <h3>Hello, {name}!</h3>
+      <hr />
+      <form>
+        <label className={style.bright} htmlFor="name">
+          Say hello to:
+          <input id="name" type="text" value={name} onChange={(e) => setName(e.target.value)} />
+        </label>
+      </form>
+    </div>
+  );
+};
+export default HelloWorld;

data/lib/generators/react_on_rails/templates/base/base/app/javascript/src/HelloWorld/ror_components/HelloWorld.module.css ADDED Viewed

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

data/lib/generators/react_on_rails/templates/base/base/app/javascript/src/HelloWorld/ror_components/HelloWorld.server.jsx ADDED Viewed

@@ -0,0 +1,5 @@
+import HelloWorld from './HelloWorld.client';
+// This could be specialized for server rendering
+// 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/views/hello_world/index.html.erb.tt CHANGED Viewed

@@ -1,2 +1,2 @@
 <h1>Hello World</h1>
-<%%= react_component("<%= config[:component_name] %>", props: @hello_world_props, prerender: false) %>
+<%%= react_component("<%= config[:component_name] %>", props: @hello_world_props, prerender: true) %>

data/lib/generators/react_on_rails/templates/base/base/app/views/layouts/hello_world.html.erb CHANGED Viewed

@@ -3,8 +3,10 @@
   <head>
     <title>ReactOnRailsWithShakapacker</title>
     <%= csrf_meta_tags %>
-    <%= javascript_pack_tag 'hello-world-bundle' %>
-    <%= stylesheet_pack_tag 'hello-world-bundle' %>
+    <!-- Empty pack tags - React on Rails injects component CSS/JS here -->
+    <%= stylesheet_pack_tag %>
+    <%= javascript_pack_tag %>
   </head>
   <body>

data/lib/generators/react_on_rails/templates/base/base/babel.config.js.tt CHANGED Viewed

@@ -11,12 +11,15 @@ module.exports = function (api) {
         '@babel/preset-react',
         {
           development: !isProductionEnv,
-          useBuiltIns: true
+          useBuiltIns: true,
+          runtime: 'automatic'
         }
       ]
     ].filter(Boolean),
     plugins: [
-      process.env.WEBPACK_SERVE && 'react-refresh/babel',
+      // Enable React Refresh (Fast Refresh) only when webpack-dev-server is running (HMR mode)
+      // This prevents React Refresh from trying to connect when using static compilation
+      !isProductionEnv && process.env.WEBPACK_SERVE && 'react-refresh/babel',
       isProductionEnv && ['babel-plugin-transform-react-remove-prop-types',
         {
           removeImport: true

data/lib/generators/react_on_rails/templates/base/base/bin/dev ADDED Viewed

@@ -0,0 +1,46 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+# ReactOnRails Development Server
+#
+# This script provides a simple interface to the ReactOnRails development
+# server management. The core logic is implemented in ReactOnRails::Dev
+# classes for better maintainability and testing.
+#
+# Each command uses a specific Procfile for process management:
+# - bin/dev (default/hmr): Uses Procfile.dev
+# - bin/dev static: Uses Procfile.dev-static-assets
+# - bin/dev prod: Uses Procfile.dev-prod-assets
+#
+# To customize development environment:
+# 1. Edit the appropriate Procfile to modify which processes run
+# 2. Modify this script for project-specific command-line behavior
+# 3. Extend ReactOnRails::Dev classes in your Rails app for advanced customization
+# 4. Use classes directly: ReactOnRails::Dev::ServerManager.start(:development, "Custom.procfile")
+begin
+  require "bundler/setup"
+  require "react_on_rails/dev"
+rescue LoadError
+  # Fallback for when gem is not yet installed
+  puts "Loading ReactOnRails development tools..."
+  require_relative "../../lib/react_on_rails/dev"
+end
+# Main execution
+case ARGV[0]
+when "production-assets", "prod"
+  ReactOnRails::Dev::ServerManager.start(:production_like)
+when "static"
+  ReactOnRails::Dev::ServerManager.start(:static, "Procfile.dev-static-assets")
+when "kill"
+  ReactOnRails::Dev::ServerManager.kill_processes
+when "help", "--help", "-h"
+  ReactOnRails::Dev::ServerManager.show_help
+when "hmr", nil
+  ReactOnRails::Dev::ServerManager.start(:development, "Procfile.dev")
+else
+  puts "Unknown argument: #{ARGV[0]}"
+  puts "Run 'bin/dev help' for usage information"
+  exit 1
+end

data/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb.tt CHANGED Viewed

@@ -20,7 +20,7 @@ ReactOnRails.configure do |config|
   #
   # ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
   #
-  # with rspec then this controls what yarn command is run
+  # with rspec then this controls what npm command is run
   # to automatically refresh your webpack assets on every test run.
   #
   # Alternately, you can remove the `ReactOnRails::TestHelper.configure_rspec_to_compile_assets`
@@ -49,10 +49,10 @@ ReactOnRails.configure do |config|
   ################################################################################
   # `components_subdirectory`  is the name of the matching directories that contain automatically registered components
   # for use in the Rails views. The default is nil, you can enable the feature by updating it in the next line.
-  # config.components_subdirectory = "ror_components"
+  config.components_subdirectory = "ror_components"
   #
   # For automated component registry, `render_component` view helper method tries to load bundle for component from
   # generated directory. default is false, you can pass option at the time of individual usage or update the default
   # in the following line
-  config.auto_load_bundle = false
+  config.auto_load_bundle = true
 end

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

@@ -1,43 +1,109 @@
 # Note: You must restart bin/shakapacker-dev-server for changes to take effect
+# This file contains the defaults used by shakapacker.
 default: &default
   source_path: app/javascript
+  # You can have a subdirectory of the source_path, like 'packs' (recommended).
+  # Alternatively, you can use '/' to use the whole source_path directory.
+  # Notice that this is a relative path to source_path
   source_entry_path: packs
+  # If nested_entries is true, then we'll pick up subdirectories within the source_entry_path.
+  # You cannot set this option to true if you set source_entry_path to '/'
+  nested_entries: true
+  #  While using a File-System-based automated bundle generation feature, miscellaneous warnings suggesting css order
+  #  conflicts may arise due to the mini-css-extract-plugin. For projects where css ordering has been mitigated through
+  #  consistent use of scoping or naming conventions, the css order warnings can be disabled by setting
+  #  css_extract_ignore_order_warnings to true
+  css_extract_ignore_order_warnings: false
   public_root_path: public
   public_output_path: packs
   cache_path: tmp/shakapacker
   webpack_compile_output: true
+  # See https://github.com/shakacode/shakapacker#deployment
+  shakapacker_precompile: true
-  # Additional paths webpack should lookup modules
+  # Location for manifest.json, defaults to {public_output_path}/manifest.json if unset
+  # manifest_path: public/packs/manifest.json
+  # Additional paths webpack should look up modules
   # ['app/assets', 'engine/foo/app/assets']
   additional_paths: []
   # Reload manifest.json on all requests so we reload latest compiled packs
   cache_manifest: false
+  # Select loader to use, available options are 'babel' (default), 'swc' or 'esbuild'
+  webpack_loader: 'babel'
+  # Raises an error if there is a mismatch in the shakapacker gem and npm package being used
+  ensure_consistent_versioning: true
+  # Select whether the compiler will use SHA digest ('digest' option) or most recent modified timestamp ('mtime') to determine freshness
+  compiler_strategy: digest
+  # Select whether the compiler will always use a content hash and not just in production
+  # Don't use contentHash except for production for performance
+  # https://webpack.js.org/guides/build-performance/#avoid-production-specific-tooling
+  useContentHash: false
+  # Setting the asset host here will override Rails.application.config.asset_host.
+  # Here, you can set different asset_host per environment. Note that
+  # SHAKAPACKER_ASSET_HOST will override both configurations.
+  # asset_host: custom-path
+  # Utilizing webpack-subresource-integrity plugin, will generate integrity hashes for all entries in manifest.json
+  # https://github.com/waysact/webpack-subresource-integrity/tree/main/webpack-subresource-integrity
+  integrity:
+    enabled: false
+    # Which cryptographic function(s) to use, for generating the integrity hash(es). Default sha-384. Other possible values sha256, sha512
+    hash_functions: ["sha384"]
+    # Default "anonymous". Other possible value "use-credentials"
+    # https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity#cross-origin_resource_sharing_and_subresource_integrity
+    cross_origin: "anonymous"
 development:
   <<: *default
-  # This is false since we're running `bin/shakapacker -w` in Procfile.dev-static
-  compile: false
+  compile: true
+  compiler_strategy: mtime
   # Reference: https://webpack.js.org/configuration/dev-server/
+  # Keys not described there are documented inline and in https://github.com/shakacode/shakapacker/
   dev_server:
-    https: false
+    # For running dev server with https, set `server: https`.
+    # server: https
     host: localhost
     port: 3035
     # Hot Module Replacement updates modules while the application is running without a full reload
+    # Used instead of the `hot` key in https://webpack.js.org/configuration/dev-server/#devserverhot
     hmr: true
+    # If HMR is on, CSS will be inlined by delivering it as part of the script payload via style-loader. Be sure
+    # that you add style-loader to your project dependencies.
+    #
+    # If you want to instead deliver CSS via <link> with the mini-css-extract-plugin, set inline_css to false.
+    # In that case, style-loader is not needed as a dependency.
+    #
+    # mini-css-extract-plugin is a required dependency in both cases.
+    inline_css: true
+    # Defaults to the inverse of hmr. Uncomment to manually set this.
+    # live_reload: true
     client:
       # Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
       overlay: true
       # May also be a string
       # webSocketURL:
-      #  hostname: "0.0.0.0"
-      #  pathname: "/ws"
+      #  hostname: '0.0.0.0'
+      #  pathname: '/ws'
       #  port: 8080
+    # Should we use gzip compression?
     compress: true
     # Note that apps that do not check the host are vulnerable to DNS rebinding attacks
-    allowed_hosts: ['localhost']
+    allowed_hosts: 'auto'
+    # Shows progress and colorizes output of bin/shakapacker[-dev-server]
     pretty: true
     headers:
       'Access-Control-Allow-Origin': '*'
@@ -58,5 +124,8 @@ production:
   # Production depends on precompilation of packs prior to booting for performance.
   compile: false
+  # Use content hash for naming assets. Cannot be overridden in production.
+  useContentHash: true
   # Cache manifest.json for performance
   cache_manifest: true

data/lib/generators/react_on_rails/templates/base/base/config/webpack/commonWebpackConfig.js.tt CHANGED Viewed

@@ -14,4 +14,4 @@ const commonOptions = {
 // Copy the object using merge b/c the baseClientWebpackConfig and commonOptions are mutable globals
 const commonWebpackConfig = () => merge({}, baseClientWebpackConfig, commonOptions);
-module.exports = commonWebpackConfig;
+module.exports = commonWebpackConfig;

data/lib/generators/react_on_rails/templates/base/base/config/webpack/development.js.tt CHANGED Viewed

@@ -2,20 +2,20 @@
 const { devServer, inliningCss } = require('shakapacker');
-const webpackConfig = require('./webpackConfig');
+const generateWebpackConfigs = require('./generateWebpackConfigs');
 const developmentEnvOnly = (clientWebpackConfig, _serverWebpackConfig) => {
-  // plugins
-  if (inliningCss) {
-    // Note, when this is run, we're building the server and client bundles in separate processes.
-    // Thus, this plugin is not applied to the server bundle.
+  // React Refresh (Fast Refresh) setup - only when webpack-dev-server is running (HMR mode)
+  // This matches the condition in generateWebpackConfigs.js and babel.config.js
+  if (process.env.WEBPACK_SERVE) {
     // eslint-disable-next-line global-require
     const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
     clientWebpackConfig.plugins.push(
-      new ReactRefreshWebpackPlugin({}),
+      new ReactRefreshWebpackPlugin({
+        // Use default overlay configuration for better compatibility
+      }),
     );
   }
 };
-module.exports = webpackConfig(developmentEnvOnly);
+module.exports = generateWebpackConfigs(developmentEnvOnly);

data/lib/generators/react_on_rails/templates/base/base/config/webpack/production.js.tt CHANGED Viewed

@@ -1,9 +1,9 @@
 <%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_demo_ssr_hmr/blob/master/config/webpack/production.js") %>
-const webpackConfig = require('./webpackConfig');
+const generateWebpackConfigs = require('./generateWebpackConfigs');
 const productionEnvOnly = (_clientWebpackConfig, _serverWebpackConfig) => {
   // place any code here that is for production only
 };
-module.exports = webpackConfig(productionEnvOnly);
+module.exports = generateWebpackConfigs(productionEnvOnly);

data/lib/generators/react_on_rails/templates/base/base/config/webpack/test.js.tt CHANGED Viewed

@@ -1,9 +1,9 @@
 <%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_demo_ssr_hmr/blob/master/config/webpack/test.js") %>
-const webpackConfig = require('./webpackConfig')
+const generateWebpackConfigs = require('./generateWebpackConfigs')
 const testOnly = (_clientWebpackConfig, _serverWebpackConfig) => {
   // place any code here that is for test only
 }
-module.exports = webpackConfig(testOnly)
+module.exports = generateWebpackConfigs(testOnly)

data/lib/generators/react_on_rails/templates/dev_tests/spec/system/hello_world_spec.rb CHANGED Viewed

@@ -12,8 +12,6 @@ describe "Hello World", :js do
   end
 end
-private
 def name_input
   page.first("input")
 end

data/lib/generators/react_on_rails/templates/redux/base/app/javascript/bundles/HelloWorld/components/HelloWorld.jsx CHANGED Viewed

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import * as style from './HelloWorld.module.css';
@@ -18,9 +17,4 @@ const HelloWorld = ({ name, updateName }) => (
   </div>
 );
-HelloWorld.propTypes = {
-  name: PropTypes.string.isRequired,
-  updateName: PropTypes.func.isRequired,
-};
 export default HelloWorld;

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

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

data/lib/generators/react_on_rails/templates/redux/base/app/javascript/bundles/HelloWorld/startup/HelloWorldApp.server.jsx ADDED Viewed

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

data/lib/react_on_rails/configuration.rb CHANGED Viewed

@@ -46,8 +46,8 @@ module ReactOnRails
       components_subdirectory: nil,
       make_generated_server_bundle_the_entrypoint: false,
       defer_generated_component_packs: false,
-      # forces the loading of React components
-      force_load: true,
+      # React on Rails Pro (licensed) feature - enables immediate hydration of React components
+      immediate_hydration: false,
       # 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.
@@ -67,7 +67,7 @@ module ReactOnRails
                   :server_render_method, :random_dom_id, :auto_load_bundle,
                   :same_bundle_for_client_and_server, :rendering_props_extension,
                   :make_generated_server_bundle_the_entrypoint,
-                  :generated_component_packs_loading_strategy, :force_load, :rsc_bundle_js_file,
+                  :generated_component_packs_loading_strategy, :immediate_hydration, :rsc_bundle_js_file,
                   :react_client_manifest_file, :react_server_client_manifest_file, :component_registry_timeout
     # rubocop:disable Metrics/AbcSize
@@ -83,7 +83,7 @@ module ReactOnRails
                    same_bundle_for_client_and_server: 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, immediate_hydration: 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
@@ -128,7 +128,7 @@ module ReactOnRails
       self.auto_load_bundle = auto_load_bundle
       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.immediate_hydration = immediate_hydration
       self.generated_component_packs_loading_strategy = generated_component_packs_loading_strategy
     end
     # rubocop:enable Metrics/AbcSize

data/lib/react_on_rails/controller.rb CHANGED Viewed

@@ -9,14 +9,16 @@ module ReactOnRails
     #             JavaScript code.
     # props: Named parameter props which is a Ruby Hash or JSON string which contains the properties
     #        to pass to the redux store.
+    # immediate_hydration: React on Rails Pro (licensed) feature. Pass as true if you wish to hydrate this
+    #                      store immediately instead of waiting for the page to load.
     #
     # 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: {}, force_load: nil)
-      force_load = ReactOnRails.configuration.force_load if force_load.nil?
+    def redux_store(store_name, props: {}, immediate_hydration: nil)
+      immediate_hydration = ReactOnRails.configuration.immediate_hydration if immediate_hydration.nil?
       redux_store_data = { store_name: store_name,
                            props: props,
-                           force_load: force_load }
+                           immediate_hydration: immediate_hydration }
       @registered_stores_defer_render ||= []
       @registered_stores_defer_render << redux_store_data
     end

data/lib/react_on_rails/dev/file_manager.rb ADDED Viewed

@@ -0,0 +1,78 @@
+# frozen_string_literal: true
+module ReactOnRails
+  module Dev
+    class FileManager
+      class << self
+        def cleanup_stale_files
+          socket_cleanup = cleanup_overmind_sockets
+          pid_cleanup = cleanup_rails_pid_file
+          socket_cleanup || pid_cleanup
+        end
+        private
+        def cleanup_overmind_sockets
+          return false if overmind_running?
+          socket_files = [".overmind.sock", "tmp/sockets/overmind.sock"]
+          cleaned_any = false
+          socket_files.each do |socket_file|
+            cleaned_any = true if remove_file_if_exists(socket_file, "stale socket")
+          end
+          cleaned_any
+        end
+        def cleanup_rails_pid_file
+          server_pid_file = "tmp/pids/server.pid"
+          return false unless File.exist?(server_pid_file)
+          pid_content = File.read(server_pid_file).strip
+          begin
+            pid = Integer(pid_content)
+            # PIDs must be > 1 (0 is kernel, 1 is init)
+            if pid <= 1
+              remove_file_if_exists(server_pid_file, "stale Rails pid file")
+              return true
+            end
+          rescue ArgumentError, TypeError
+            remove_file_if_exists(server_pid_file, "stale Rails pid file")
+            return true
+          end
+          return false if process_running?(pid)
+          remove_file_if_exists(server_pid_file, "stale Rails pid file")
+        end
+        def overmind_running?
+          !`pgrep -f "overmind" 2>/dev/null`.split("\n").empty?
+        end
+        def process_running?(pid)
+          Process.kill(0, pid)
+          true
+        rescue Errno::ESRCH, ArgumentError, RangeError
+          # Process doesn't exist or invalid PID
+          false
+        rescue Errno::EPERM
+          # Process exists but we don't have permission to signal it
+          true
+        end
+        def remove_file_if_exists(file_path, description)
+          return false unless File.exist?(file_path)
+          puts "   🧹 Cleaning up #{description}: #{file_path}"
+          File.delete(file_path)
+          true
+        rescue StandardError
+          false
+        end
+      end
+    end
+  end
+end

data/lib/react_on_rails/dev/pack_generator.rb ADDED Viewed

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+require "English"
+module ReactOnRails
+  module Dev
+    class PackGenerator
+      class << self
+        def generate(verbose: false)
+          if verbose
+            puts "📦 Generating React on Rails packs..."
+            success = system "bundle exec rake react_on_rails:generate_packs"
+          else
+            print "📦 Generating packs... "
+            success = system "bundle exec rake react_on_rails:generate_packs > /dev/null 2>&1"
+            puts success ? "✅" : "❌"
+          end
+          return if success
+          puts "❌ Pack generation failed"
+          exit 1
+        end
+      end
+    end
+  end
+end

data/lib/react_on_rails/dev/process_manager.rb ADDED Viewed

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+module ReactOnRails
+  module Dev
+    class ProcessManager
+      class << self
+        def installed?(process)
+          IO.popen([process, "-v"], &:close)
+          true
+        rescue Errno::ENOENT
+          false
+        end
+        def ensure_procfile(procfile)
+          return if File.exist?(procfile)
+          warn <<~MSG
+            ERROR:
+            Please ensure `#{procfile}` exists in your project!
+          MSG
+          exit 1
+        end
+        def run_with_process_manager(procfile)
+          # Validate procfile path for security
+          unless valid_procfile_path?(procfile)
+            warn "ERROR: Invalid procfile path: #{procfile}"
+            exit 1
+          end
+          # Clean up stale files before starting
+          FileManager.cleanup_stale_files
+          if installed?("overmind")
+            system("overmind", "start", "-f", procfile)
+          elsif installed?("foreman")
+            system("foreman", "start", "-f", procfile)
+          else
+            warn <<~MSG
+              NOTICE:
+              For this script to run, you need either 'overmind' or 'foreman' installed on your machine. Please try this script after installing one of them.
+            MSG
+            exit 1
+          end
+        end
+        private
+        def valid_procfile_path?(procfile)
+          # Reject paths with shell metacharacters
+          return false if procfile.match?(/[;&|`$(){}\[\]<>]/)
+          # Ensure it's a readable file
+          File.readable?(procfile)
+        rescue StandardError
+          false
+        end
+      end
+    end
+  end
+end