generator: refactor templates to default to auto registration

Author: ihabadham

lib/generators/react_on_rails/base_generator.rb

@@ -22,8 +22,8 @@ def add_hello_world_route
       end
 
       def create_react_directories
-        dirs = %w[components]
-        dirs.each { |name| empty_directory("app/javascript/bundles/HelloWorld/#{name}") }
+        # Create auto-registration directory structure
+        empty_directory("app/javascript/src/HelloWorld/ror_components")
       end
 
       def copy_base_files
@@ -44,8 +44,8 @@ def copy_base_files
       def copy_js_bundle_files
         base_path = "base/base/"
         base_files = %w[app/javascript/packs/server-bundle.js
-                        app/javascript/bundles/HelloWorld/components/HelloWorldServer.js
-                        app/javascript/bundles/HelloWorld/components/HelloWorld.module.css]
+                        app/javascript/src/HelloWorld/HelloWorldServer.js
+                        app/javascript/src/HelloWorld/HelloWorld.module.css]
         base_files.each { |file| copy_file("#{base_path}#{file}", file) }
       end
 
@@ -60,7 +60,7 @@ def copy_webpack_config
                         config/webpack/production.js
                         config/webpack/serverWebpackConfig.js
                         config/webpack/webpack.config.js
-                        config/webpack/webpackConfig.js]
+                        config/webpack/generateWebpackConfigs.js]
         config = {
           message: "// The source code including full typescript support is available at:"
         }
@@ -114,6 +114,22 @@ def add_js_dependencies
                                  ], type: :dev)
       end
 
+      def update_gitignore_for_auto_registration
+        gitignore_path = File.join(destination_root, ".gitignore")
+        return unless File.exist?(gitignore_path)
+
+        gitignore_content = File.read(gitignore_path)
+        return if gitignore_content.include?("**/generated/**")
+
+        append_to_file ".gitignore" do
+          <<~GITIGNORE
+
+            # Generated React on Rails packs
+            **/generated/**
+          GITIGNORE
+        end
+      end
+
       def append_to_spec_rails_helper
         rails_helper = File.join(destination_root, "spec/rails_helper.rb")
         if File.exist?(rails_helper)

lib/generators/react_on_rails/react_no_redux_generator.rb

@@ -12,19 +12,17 @@ class ReactNoReduxGenerator < Rails::Generators::Base
 
       def copy_base_files
         base_js_path = "base/base"
-        base_files = %w[app/javascript/bundles/HelloWorld/components/HelloWorld.jsx]
+        base_files = %w[app/javascript/src/HelloWorld/ror_components/HelloWorld.jsx]
         base_files.each { |file| copy_file("#{base_js_path}/#{file}", file) }
       end
 
       def create_appropriate_templates
         base_path = "base/base"
         config = {
-          component_name: "HelloWorld",
-          app_relative_path: "../bundles/HelloWorld/components/HelloWorld"
+          component_name: "HelloWorld"
         }
 
-        template("#{base_path}/app/javascript/packs/registration.js.tt",
-                 "app/javascript/packs/hello-world-bundle.js", config)
+        # Only create the view template - no manual bundle needed for auto registration
         template("#{base_path}/app/views/hello_world/index.html.erb.tt",
                  "app/views/hello_world/index.html.erb", config)
       end

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

@@ -1,6 +1,6 @@
 import ReactOnRails from 'react-on-rails';
 
-import HelloWorld from '../bundles/HelloWorld/components/HelloWorldServer';
+import HelloWorld from '../src/HelloWorld/HelloWorldServer';
 
 // This is how react_on_rails can see the HelloWorld in the browser.
 ReactOnRails.register({

lib/generators/react_on_rails/templates/base/base/app/javascript/src/HelloWorld/HelloWorld.module.css

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

lib/generators/react_on_rails/templates/base/base/app/javascript/src/HelloWorld/HelloWorldServer.js

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

lib/generators/react_on_rails/templates/base/base/app/javascript/src/HelloWorld/ror_components/HelloWorld.jsx

@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+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>
+  );
+};
+
+HelloWorld.propTypes = {
+  name: PropTypes.string.isRequired, // this is passed from the Rails view
+};
+
+export default HelloWorld;

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

@@ -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>

lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb.tt

@@ -54,5 +54,5 @@ ReactOnRails.configure do |config|
   # 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

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

@@ -7,6 +7,8 @@ default: &default
   public_output_path: packs
   cache_path: tmp/shakapacker
   webpack_compile_output: true
+  
+  # Enable nested entry points for auto-registration
   nested_entries: true
 
   # Additional paths webpack should lookup modules
@@ -23,9 +25,9 @@ development:
 
   # Reference: https://webpack.js.org/configuration/dev-server/
   dev_server:
-    https: false
     host: localhost
     port: 3035
+    server: http
     # Hot Module Replacement updates modules while the application is running without a full reload
     hmr: true
     client: