inertia_rails-contrib 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: fb44326fd223ef6e631746a499a84dff76d261304651eda8d819fe23decc8857
+  data.tar.gz: f9975ec1f185d40f88b34861d4104d0161daa8e070c39d2b60be4bcf75b61aa1
+SHA512:
+  metadata.gz: aa516f52b025be207b951b61e4f081607cd6c2b3202cb689ae7378d650f5001008667c55ef4d1e84d869fa9fb23c0403532b429f35eea3a10ffdd80c9226c7b5
+  data.tar.gz: e303ce54040f9d6268037210c7fe7f51929514900d22c7550b53fb0fb8264abab9cf0ac4c141e30c14bd005b261133268c15967ace013a1bf3b56bd25f24fa2c

data/CHANGELOG.md

@@ -0,0 +1,21 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog],
+and this project adheres to [Semantic Versioning].
+
+## [Unreleased]
+
+## [0.1.0] - 2024-06-11
+
+- Initial release ([@iurev], [@skryukov])
+
+[@iurev]: https://github.com/iurev
+[@skryukov]: https://github.com/skryukov
+
+[Unreleased]: https://github.com/skryukov/inertia_rails-contrib/compare/v0.1.0...HEAD
+[0.1.0]: https://github.com/skryukov/inertia_rails-contrib/commits/v0.1.0
+
+[Keep a Changelog]: https://keepachangelog.com/en/1.0.0/
+[Semantic Versioning]: https://semver.org/spec/v2.0.0.html

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2024 Svyatoslav Kryukov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,187 @@
+# InertiaRailsContrib
+
+A collection of extensions, developer tools, and the [community documentation](https://inertia-rails.netlify.app) for [Inertia's Rails adapter](https://github.com/inertiajs/inertia-rails).
+
+## Installation
+
+Install the gem and add to the application's Gemfile by executing:
+
+    $ bundle add inertia_rails-contrib
+
+If bundler is not being used to manage dependencies, install the gem by executing:
+
+    $ gem install inertia_rails-contrib
+
+## Usage
+
+### Installation generator
+
+`InertiaRailsContrib` comes with a generator that installs and sets up Inertia in a Rails application. **It requires the [Vite Ruby](https://vite-ruby.netlify.app) gem to be installed and configured in the application.**
+
+<details>
+<summary>Creating a new Rails application and configuring Vite</summary>
+
+This is actually a simple process. First, create a new Rails application:
+```bash
+rails new myapp --skip-js
+```
+
+Next, install the Vite Ruby gem:
+
+```bash
+bundle add vite_ruby
+bundle exec vite install
+```
+
+If you use macOS, you may need to edit the `config/vite.rb` file to add the following line:
+
+```json
+{
+  "development": {
++ "host": "127.0.0.1",
+  "autoBuild": true,
+  "publicOutputDir": "vite-dev",
+  "port": 3036
+  }
+}
+```
+
+That's it! Vite is now installed and configured in the Rails application. For more information, refer to the [Vite Ruby documentation](https://vite-ruby.netlify.app) and the [Vite-lizing Rails: get live reload and hot replacement with Vite Ruby](https://evilmartians.com/chronicles/vite-lizing-rails-get-live-reload-and-hot-replacement-with-vite-ruby) article.
+
+The next step is to install Inertia!
+</details>
+
+To install and setup Inertia in a Rails application, execute the following command in the terminal:
+
+```bash
+bundle add inertia_rails-contrib
+bin/rails generate inertia:install
+```
+
+This command will ask you for the frontend framework you are using (React, Vue, or Svelte) and will install the necessary dependencies and set up the application to work with Inertia.
+
+Example output:
+
+```bash
+$ bin/rails generate inertia:install
+
+Installing Inertia's Rails adapter
+Adding Inertia's Rails adapter initializer
+      create  config/initializers/inertia_rails.rb
+Installing Inertia npm packages
+What framework do you want to use with Turbo Mount? [react, vue, svelte] (react)
+         run  npm add @inertiajs/inertia @inertiajs/react react react-dom from "."
+
+added 6 packages, removed 42 packages, and audited 69 packages in 8s
+
+18 packages are looking for funding
+  run `npm fund` for details
+
+2 moderate severity vulnerabilities
+
+Some issues need review, and may require choosing
+a different dependency.
+
+Run `npm audit` for details.
+         run  npm add --save-dev @vitejs/plugin-react from "."
+
+added 58 packages, and audited 127 packages in 6s
+
+22 packages are looking for funding
+  run `npm fund` for details
+
+2 moderate severity vulnerabilities
+
+Some issues need review, and may require choosing
+a different dependency.
+
+Run `npm audit` for details.
+Adding Vite plugin for react
+      insert  vite.config.ts
+     prepend  vite.config.ts
+Add "type": "module", to the package.json file
+        gsub  package.json
+Copying inertia.js into Vite entrypoints
+      create  app/frontend/entrypoints/inertia.js
+Adding inertia.js script tag to the application layout
+      insert  app/views/layouts/application.html.erb
+Adding Vite React Refresh tag to the application layout
+      insert  app/views/layouts/application.html.erb
+Copying example Inertia controller
+      create  app/controllers/inertia_example_controller.rb
+Adding a route for the example Inertia controller
+       route  get 'inertia-example', to: 'inertia_example#index'
+Copying framework related files
+      create  app/frontend/pages/InertiaExample.jsx
+Inertia's Rails adapter successfully installed
+```
+
+With that done, you can now start the Rails server and the Vite development server (we recommend using [Overmind](https://github.com/DarthSim/overmind)):
+
+```bash
+overmind start -f Procfile.dev
+# or
+foreman start -f Procfile.dev
+```
+
+And navigate to `http://127.0.0.1:5100/inertia-example` to see the example Inertia page.
+
+### Scaffold generator
+
+`InertiaRailsContrib` also comes with a scaffold generator that generates a scaffold for a model with Inertia. To use it, execute the following command in the terminal:
+
+```bash
+bin/rails generate inertia:scaffold ModelName field1:type field2:type
+```
+
+Example output:
+
+```bash
+$ bin/rails generate inertia:scaffold Post title:string body:text
+      invoke  active_record
+      create    db/migrate/20240611123952_create_posts.rb
+      create    app/models/post.rb
+      invoke    test_unit
+      create      test/models/post_test.rb
+      create      test/fixtures/posts.yml
+      invoke  resource_route
+       route    resources :posts
+      invoke  scaffold_controller
+      create    app/controllers/posts_controller.rb
+      invoke    inertia_templates
+      create      app/frontend/pages/Post
+      create      app/frontend/pages/Post/Index.svelte
+      create      app/frontend/pages/Post/Edit.svelte
+      create      app/frontend/pages/Post/Show.svelte
+      create      app/frontend/pages/Post/New.svelte
+      create      app/frontend/pages/Post/Form.svelte
+      create      app/frontend/pages/Post/Post.svelte
+      invoke    resource_route
+      invoke    test_unit
+      create      test/controllers/posts_controller_test.rb
+      create      test/system/posts_test.rb
+      invoke    helper
+      create      app/helpers/posts_helper.rb
+      invoke      test_unit
+```
+
+#### Tailwind CSS integration
+
+`InertiaRailsContrib` tries to detect the presence of Tailwind CSS in the application and generate the templates accordingly. If you want to specify templates type, use the `--inertia-templates` option:
+
+- `inertia_templates` - default
+- `inertia_tw_templates` - Tailwind CSS
+
+## Development
+
+After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+
+To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/skryukov/inertia_rails-contrib.
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/lib/generators/inertia/controller/controller_generator.rb

@@ -0,0 +1,16 @@
+require "rails/generators/rails/controller/controller_generator"
+require "inertia_rails_contrib/generators_helper"
+
+module Inertia
+  module Generators
+    class ControllerGenerator < Rails::Generators::ControllerGenerator
+      include InertiaRailsContrib::GeneratorsHelper
+
+      source_root File.expand_path("./templates", __dir__)
+
+      remove_hook_for :template_engine
+
+      hook_for :inertia_templates, required: true, default: InertiaRailsContrib::GeneratorsHelper.guess_inertia_template
+    end
+  end
+end

data/lib/generators/inertia/controller/templates/controller.rb.tt

@@ -0,0 +1,10 @@
+<% module_namespacing do -%>
+class <%= class_name %>Controller < <%= parent_class_name.classify %>
+<% actions.each do |action| -%>
+  def <%= action %>
+    render inertia: '<%= "#{inertia_base_path}/#{action.camelize}" %>'
+  end
+<%= "\n" unless action == actions.last -%>
+<% end -%>
+end
+<% end -%>

data/lib/generators/inertia/install/install_generator.rb

@@ -0,0 +1,151 @@
+module Inertia
+  module Generators
+    class InstallGenerator < Rails::Generators::Base
+      source_root File.expand_path("./templates", __dir__)
+
+      APPLICATION_LAYOUT = Rails.root.join("app/views/layouts/application.html.erb")
+
+      FRAMEWORKS = {
+        "react" => {
+          packages: %w[@inertiajs/react react react-dom],
+          dev_packages: %w[@vitejs/plugin-react],
+          vite_plugin_import: "import react from '@vitejs/plugin-react'",
+          vite_plugin_call: "react()",
+          copy_files: {
+            "InertiaExample.jsx" => "app/frontend/pages/InertiaExample.jsx",
+            "InertiaExample.module.css" => "app/frontend/pages/InertiaExample.module.css",
+            "../assets/react.svg" => "app/frontend/assets/react.svg",
+            "../assets/inertia.svg" => "app/frontend/assets/inertia.svg",
+            "../assets/vite_ruby.svg" => "app/frontend/assets/vite_ruby.svg"
+          }
+        },
+        "vue" => {
+          packages: %w[@inertiajs/vue3 vue],
+          dev_packages: %w[@vitejs/plugin-vue],
+          vite_plugin_import: "import vue from '@vitejs/plugin-vue'",
+          vite_plugin_call: "vue()",
+          copy_files: {
+            "InertiaExample.vue" => "app/frontend/pages/InertiaExample.vue",
+            "../assets/vue.svg" => "app/frontend/assets/vue.svg",
+            "../assets/inertia.svg" => "app/frontend/assets/inertia.svg",
+            "../assets/vite_ruby.svg" => "app/frontend/assets/vite_ruby.svg"
+          }
+        },
+        "svelte" => {
+          packages: %w[@inertiajs/svelte svelte @sveltejs/vite-plugin-svelte],
+          dev_packages: %w[@vitejs/plugin-vue],
+          vite_plugin_import: "import { svelte } from '@sveltejs/vite-plugin-svelte'",
+          vite_plugin_call: "svelte()",
+          copy_files: {
+            "svelte.config.js" => "svelte.config.js",
+            "InertiaExample.svelte" => "app/frontend/pages/InertiaExample.svelte",
+            "../assets/svelte.svg" => "app/frontend/assets/svelte.svg",
+            "../assets/inertia.svg" => "app/frontend/assets/inertia.svg",
+            "../assets/vite_ruby.svg" => "app/frontend/assets/vite_ruby.svg"
+          }
+        }
+      }
+
+      def install
+        say "Installing Inertia's Rails adapter"
+
+        if package_manager.nil?
+          say "Could not find a package.json file to install Inertia to.", :red
+          exit!
+        end
+
+        unless ruby_vite?
+          say "Could not find a Vite configuration file `config/vite.json`. This generator only supports Ruby on Rails with Vite.", :red
+          exit!
+        end
+
+        install_inertia
+
+        say "Inertia's Rails adapter successfully installed", :green
+      end
+
+      private
+
+      def install_inertia
+        say "Adding Inertia's Rails adapter initializer"
+        template "initializer.rb", Rails.root.join("config/initializers/inertia_rails.rb").to_s
+
+        say "Installing Inertia npm packages"
+        add_packages(*FRAMEWORKS[framework][:packages])
+        add_packages("--save-dev", *FRAMEWORKS[framework][:dev_packages])
+
+        unless File.read(vite_config_path).include?(FRAMEWORKS[framework][:vite_plugin_import])
+          say "Adding Vite plugin for #{framework}"
+          insert_into_file vite_config_path, "\n    #{FRAMEWORKS[framework][:vite_plugin_call]},", after: "plugins: ["
+          prepend_file vite_config_path, "#{FRAMEWORKS[framework][:vite_plugin_import]}\n"
+        end
+
+        unless Rails.root.join("package.json").read.include?('"type": "module"')
+          say 'Add "type": "module", to the package.json file'
+          gsub_file Rails.root.join("package.json").to_s, /\A\s*\{/, "{\n  \"type\": \"module\","
+        end
+
+        say "Copying inertia.js into Vite entrypoints", :blue
+        template "#{framework}/inertia.js", Rails.root.join("app/frontend/entrypoints/inertia.js").to_s
+
+        say "Adding inertia.js script tag to the application layout"
+        headers = <<-ERB
+    <%= vite_javascript_tag 'inertia' %>
+
+    <%= inertia_headers %>
+        ERB
+        insert_into_file APPLICATION_LAYOUT.to_s, headers, after: "<%= vite_client_tag %>\n"
+
+        if framework == "react" && !APPLICATION_LAYOUT.read.include?("vite_react_refresh_tag")
+          say "Adding Vite React Refresh tag to the application layout"
+          insert_into_file APPLICATION_LAYOUT.to_s, "<%= vite_react_refresh_tag %>\n    ", before: "<%= vite_client_tag %>"
+        end
+
+        say "Copying example Inertia controller"
+        template "controller.rb", Rails.root.join("app/controllers/inertia_example_controller.rb").to_s
+
+        say "Adding a route for the example Inertia controller"
+        route "get 'inertia-example', to: 'inertia_example#index'"
+
+        say "Copying framework related files"
+        FRAMEWORKS[framework][:copy_files].each do |source, destination|
+          template "#{framework}/#{source}", Rails.root.join(destination).to_s
+        end
+      end
+
+      def ruby_vite?
+        Rails.root.join("config/vite.json").exist? && vite_config_path
+      end
+
+      def package_manager
+        return @package_manager if defined?(@package_manager)
+
+        @package_manager = detect_package_manager
+      end
+
+      def add_packages(*packages)
+        run "#{package_manager} add #{packages.join(" ")}"
+      end
+
+      def detect_package_manager
+        return nil unless Rails.root.join("package.json").exist?
+
+        if Rails.root.join("package-lock.json").exist?
+          "npm"
+        elsif Rails.root.join("bun.config.js").exist?
+          "bun"
+        else
+          "yarn"
+        end
+      end
+
+      def vite_config_path
+        @vite_config_path ||= Dir.glob(Rails.root.join("vite.config.{ts,js,mjs,cjs}")).first
+      end
+
+      def framework
+        @framework ||= ask("What framework do you want to use with Turbo Mount?", limited_to: FRAMEWORKS.keys, default: "react")
+      end
+    end
+  end
+end

data/lib/generators/inertia/install/templates/assets/inertia.svg

@@ -0,0 +1 @@
+<svg width="100%" height="100%" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"><linearGradient id="a" x1="0" y1="200" x2="400" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#9653ea"/><stop offset="1" stop-color="#6e74ef"/></linearGradient><path fill="url(#a)" fill-rule="evenodd" d="M400 200C400 89.543 310.457 0 200 0S0 89.543 0 200s89.543 200 200 200 200-89.543 200-200Z"/><path fill="#fff" d="M137.331 117.6H52.4l82.069 82.069L52.4 281.737h84.931L219.4 199.67Z"/><path fill="#fff" d="M265.231 117.6H180.3l82.069 82.069-82.069 82.068h84.931L347.3 199.67Z"/></svg>

data/lib/generators/inertia/install/templates/assets/react.svg

@@ -0,0 +1 @@
+<svg viewBox="-10.5 -9.45 21 18.9" fill="none" xmlns="http://www.w3.org/2000/svg" class="uwu-hidden mt-4 mb-3 text-brand dark:text-brand-dark w-24 lg:w-28 self-center text-sm me-0 flex origin-center transition-all ease-in-out"><circle r="2" fill="#58C4DC"/><g stroke="#58C4DC"><ellipse rx="10" ry="4.5"/><ellipse rx="10" ry="4.5" transform="rotate(60)"/><ellipse rx="10" ry="4.5" transform="rotate(120)"/></g></svg>

data/lib/generators/inertia/install/templates/assets/svelte.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="iconify iconify--logos" width="26.6" height="32" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056 86.566 86.566 0 0 0 8.536 55.576 82.425 82.425 0 0 0-12.296 30.719 87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057 86.601 86.601 0 0 0-8.53-55.577 82.409 82.409 0 0 0 12.29-30.718 87.573 87.573 0 0 0-14.963-66.244"/><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85 49.978 49.978 0 0 1 1.713-6.693l1.35-4.115 3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808-.245 2.659a16.067 16.067 0 0 0 2.89 10.656 17.143 17.143 0 0 0 18.397 6.828 15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977 15.923 15.923 0 0 0-2.713-12.011 17.156 17.156 0 0 0-18.404-6.832 15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849 49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85 50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809.246-2.658a16.099 16.099 0 0 0-2.89-10.656 17.143 17.143 0 0 0-18.398-6.828 15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975 15.9 15.9 0 0 0 2.709 12.012 17.156 17.156 0 0 0 18.404 6.832 15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848 49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"/></svg>

data/lib/generators/inertia/install/templates/assets/vite_ruby.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 366 304" fill="none"><path d="M91.95 46.973a5.5 5.5 0 0 0-.401.722l-59.724 69.638a5.5 5.5 0 0 0 .003 7.165l147 171.086a5.502 5.502 0 0 0 8.344 0l147-171.084a5.5 5.5 0 0 0 .003-7.165l-59.723-69.637a5.5 5.5 0 0 0-4.996-3.198H96.543a5.5 5.5 0 0 0-4.592 2.473z" fill="url(#a)" stroke="url(#b)" stroke-width="11" stroke-linecap="round" stroke-linejoin="round"/><path d="m265.857 19.004-116.154 5.598a4.346 4.346 0 0 0-3.643 3.885v109.121c-.267 2.885 2.326 5.217 5.182 4.659l20.815-4.659c3.114-.608 5.819 2.194 5.082 5.268l-8.01 45.423c-.767 3.199 2.18 6.052 5.371 5.201l17.232-3.395c3.195-.852 6.144 2.01 5.369 5.211l-18.069 74.653c-1.13 4.67 5.068 7.44 7.82 3.495l1.838-2.635L291.703 81.887c1.725-3.163-.947-6.923-4.518-6.357l-34.224 5.417c-3.217.508-5.839-2.544-4.834-5.627l22.576-50.691c1.006-3.088-1.626-6.144-4.846-5.625z" fill="url(#c)"/><defs><linearGradient id="a" x1="28.5" y1="34" x2="246.355" y2="194.428" gradientUnits="userSpaceOnUse"><stop stop-color="#FF006B"/><stop offset=".364" stop-color="#C00"/><stop offset="1" stop-color="#980D03"/></linearGradient><linearGradient id="b" x1="28.5" y1="34" x2="246.355" y2="194.428" gradientUnits="userSpaceOnUse"><stop stop-color="#FF006B"/><stop offset=".364" stop-color="#C00"/><stop offset="1" stop-color="#980D03"/></linearGradient><linearGradient id="c" x1="183.666" y1="-5.499" x2="211.353" y2="242.278" gradientUnits="userSpaceOnUse"><stop stop-color="#FFDD35"/><stop offset=".083" stop-color="#FFD233"/><stop offset=".594" stop-color="#FFA800"/><stop offset=".839" stop-color="#F90"/></linearGradient></defs></svg>

data/lib/generators/inertia/install/templates/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="iconify iconify--logos" width="37.07" height="36" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8 0 0h97.92L128 51.2 157.44 0h47.36Z"/><path fill="#41B883" d="m0 0 128 220.8L256 0h-51.2L128 132.48 50.56 0H0Z"/><path fill="#35495E" d="M50.56 0 128 133.12 204.8 0h-47.36L128 51.2 97.92 0H50.56Z"/></svg>

data/lib/generators/inertia/install/templates/controller.rb

@@ -0,0 +1,7 @@
+class InertiaExampleController < ApplicationController
+  def index
+    render inertia: "InertiaExample", props: {
+      name: params.fetch(:name, "World")
+    }
+  end
+end

data/lib/generators/inertia/install/templates/initializer.rb

@@ -0,0 +1,4 @@
+InertiaRails.configure do |config|
+  config.ssr_enabled = ViteRuby.config.ssr_build_enabled
+  config.version = ViteRuby.digest
+end

data/lib/generators/inertia/install/templates/react/InertiaExample.jsx

@@ -0,0 +1,60 @@
+import { Head } from '@inertiajs/react'
+import { useState } from 'react'
+
+import reactSvg from '/assets/react.svg'
+import inertiaSvg from '/assets/inertia.svg'
+import viteRubySvg from '/assets/vite_ruby.svg'
+
+import cs from './InertiaExample.module.css'
+
+export default function InertiaExample({ name }) {
+  const [count, setCount] = useState(0)
+
+  return (
+    <>
+      <Head title="Inertia + Vite Ruby + React Example" />
+
+      <div className={cs.root}>
+        <h1 className={cs.h1}>Hello {name}!</h1>
+
+        <div>
+          <a href="https://inertia-rails.netlify.app" target="_blank">
+            <img className={cs.logo} src={inertiaSvg} alt="Inertia logo" />
+          </a>
+          <a href="https://vite-ruby.netlify.app" target="_blank">
+            <img
+              className={`${cs.logo} ${cs.vite}`}
+              src={viteRubySvg}
+              alt="Vite Ruby logo"
+            />
+          </a>
+          <a href="https://react.dev" target="_blank">
+            <img
+              className={`${cs.logo} ${cs.react}`}
+              src={reactSvg}
+              alt="React logo"
+            />
+          </a>
+        </div>
+
+        <h2 className={cs.h2}>Inertia + Vite Ruby + React</h2>
+
+        <div className="card">
+          <button
+            className={cs.button}
+            onClick={() => setCount((count) => count + 1)}
+          >
+            count is {count}
+          </button>
+          <p>
+            Edit <code>app/frontend/pages/InertiaExample.jsx</code> and save to
+            test HMR
+          </p>
+        </div>
+        <p className={cs.readTheDocs}>
+          Click on the Inertia, Vite Ruby, and React logos to learn more
+        </p>
+      </div>
+    </>
+  )
+}

data/lib/generators/inertia/install/templates/react/InertiaExample.module.css

@@ -0,0 +1,80 @@
+.root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color: #213547;
+  background-color: #ffffff;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+.h2 {
+  font-size: 2.6em;
+  line-height: 1.1;
+}
+
+.button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #f9f9f9;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+.button:hover {
+  border-color: #646cff;
+}
+.button:focus,
+.button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.logo {
+  display: inline-block;
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vite:hover {
+  filter: drop-shadow(0 0 2em #e4023baa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .logo.react {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

data/lib/generators/inertia/install/templates/react/inertia.js

@@ -0,0 +1,34 @@
+import { createInertiaApp } from '@inertiajs/react'
+import { createElement } from 'react'
+import { createRoot } from 'react-dom/client'
+
+createInertiaApp({
+  // Set default page title
+  // see https://inertia-rails.netlify.app/guide/title-and-meta
+  //
+  // title: title => title ? `${title} - App` : 'App',
+
+  // Disable progress bar
+  //
+  // see https://inertia-rails.netlify.app/guide/progress-indicators
+  // progress: false,
+
+  resolve: (name) => {
+    const pages = import.meta.glob('../pages/**/*.jsx', { eager: true })
+    return pages[`../pages/${name}.jsx`]
+
+    // To use a default layout, import the Layout component
+    // and use the following lines.
+    // see https://inertia-rails.netlify.app/guide/pages#default-layouts
+    //
+    // const page = pages[`./pages/${name}.jsx`]
+    // page.default.layout ||= (page) => createElement(Layout, null, page)
+    // return page
+  },
+
+  setup({ el, App, props }) {
+    const root = createRoot(el)
+
+    root.render(createElement(App, props))
+  },
+})