inertia_rails 3.13.0 → 3.14.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 611e06ee0f1697740744921528223e862a4d4f7533fe195c40cfd5cdc8f6b7b4
-  data.tar.gz: 97f4302df2a4b8b1e09d36ae9f375942ce672079e247e7694f535fe1e5128206
+  metadata.gz: 8e02de8da9dda43a24dae17c59496938d35eef2caa4bade2543d4336201baa0e
+  data.tar.gz: ae6952effd0e1144dc78f2c7f2a3ae9ccc0f1b6011000ef9a7ecfe9f8d9166aa
 SHA512:
-  metadata.gz: 4aeb2fa0fc8bc672d74ab72c702706a9ddc0a98d7e0f224a3a933d9b66173c6232e125f2cca76a6b43c6e85c8fd1d12aaaee2ff203f85ce2a64476c01f2e9ce7
-  data.tar.gz: 6f8b818fb214b5f0ea18cc0c3930bd35587dd5a7b310e66e86dd4cbde5add15654ef26280427890182b12fc09f23e71bc5e5e4467c46a46ed0f68c2f23028d66
+  metadata.gz: 5426c306db138b90256fc924f20f6ce5b68583c431f10f49f1acd5eb64c013b9ed1f4d75472dfab8a971df43a9ad4a03a2854f2a1dff5fbbb4d09748b9b92a0d
+  data.tar.gz: f12bd8e51187679c56a6db6e545687d7ac5c795d20e9d74d5865897b61e9d0308480f4dc06a62fca9d32aa1129041977bdf4be2f69061aaccb3b571972d7d6cc

data/CHANGELOG.md

@@ -4,6 +4,23 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.14.0] - 2025-11-27
+
+Lots of quality of life improvements!
+
+* OG Pilot in Awesome page (@raulpopadineti)
+* Expose InertiaRails version (@capripot)
+* Svelte improvements to install generators (@alec-c4)
+* Add start kits to docs (@skryukov)
+* Fix types in React install templates (@skryukov)
+* Update docs with new inertia branding (@skryukov)
+* Add protocol diagram (@skryukov)
+* Fix forceIndicesArrayFormatInFormData in install generator (@skryukov)
+* Add Kickstart templates to awesome page (@alec-c4)
+* Improve generators for TypeScript users (@Andy9822)
+* Update example pages to mimic Rails styling and appear at root path by default (@capripot)
+* Update error types in install templates (@skryukov)
+
 ## [3.13.0] - 2025-11-19
 
 * Update installers (@skryukov)

data/lib/generators/inertia/install/frameworks.yml

@@ -13,16 +13,11 @@ react:
   vite_plugin_call: "react()"
   copy_files_ts:
     "InertiaExample.tsx": "%{js_destination_path}/pages/inertia_example/index.tsx"
-    "tsconfig.json": "tsconfig.json"
-    "tsconfig.app.json": "tsconfig.app.json"
-    "tsconfig.node.json": "tsconfig.node.json"
-    "types/vite-env.d.ts": "%{js_destination_path}/types/vite-env.d.ts"
-    "types/globals.d.ts": "%{js_destination_path}/types/globals.d.ts"
-    "types/index.ts": "%{js_destination_path}/types/index.ts"
   copy_files_js:
     "InertiaExample.jsx": "%{js_destination_path}/pages/inertia_example/index.jsx"
   copy_files:
     "InertiaExample.module.css": "%{js_destination_path}/pages/inertia_example/index.module.css"
+    "../assets/rails.svg": "%{js_destination_path}/assets/rails.svg"
     "../assets/react.svg": "%{js_destination_path}/assets/react.svg"
     "../assets/inertia.svg": "%{js_destination_path}/assets/inertia.svg"
     "../assets/vite_ruby.svg": "%{js_destination_path}/assets/vite_ruby.svg"
@@ -39,17 +34,12 @@ vue:
   vite_plugin_import: "import vue from '@vitejs/plugin-vue'"
   vite_plugin_call: "vue()"
   copy_files:
+    "../assets/rails.svg": "%{js_destination_path}/assets/rails.svg"
     "../assets/vue.svg": "%{js_destination_path}/assets/vue.svg"
     "../assets/inertia.svg": "%{js_destination_path}/assets/inertia.svg"
     "../assets/vite_ruby.svg": "%{js_destination_path}/assets/vite_ruby.svg"
   copy_files_ts:
     "InertiaExample.ts.vue": "%{js_destination_path}/pages/inertia_example/index.vue"
-    "tsconfig.json": "tsconfig.json"
-    "tsconfig.app.json": "tsconfig.app.json"
-    "tsconfig.node.json": "tsconfig.node.json"
-    "types/vite-env.d.ts": "%{js_destination_path}/types/vite-env.d.ts"
-    "types/globals.d.ts": "%{js_destination_path}/types/globals.d.ts"
-    "types/index.ts": "%{js_destination_path}/types/index.ts"
   copy_files_js:
     "InertiaExample.vue": "%{js_destination_path}/pages/inertia_example/index.vue"
 
@@ -68,15 +58,10 @@ svelte:
   vite_plugin_call: "svelte()"
   copy_files_ts:
     "InertiaExample.ts.svelte": "%{js_destination_path}/pages/inertia_example/index.svelte"
-    "tsconfig.json": "tsconfig.json"
-    "tsconfig.node.json": "tsconfig.node.json"
-    "types/vite-env.d.ts": "%{js_destination_path}/types/vite-env.d.ts"
-    "types/globals.d.ts": "%{js_destination_path}/types/globals.d.ts"
-    "types/index.ts": "%{js_destination_path}/types/index.ts"
   copy_files_js:
     "InertiaExample.svelte": "%{js_destination_path}/pages/inertia_example/index.svelte"
   copy_files:
-    "svelte.config.js": "svelte.config.js"
+    "../assets/rails.svg": "%{js_destination_path}/assets/rails.svg"
     "../assets/svelte.svg": "%{js_destination_path}/assets/svelte.svg"
     "../assets/inertia.svg": "%{js_destination_path}/assets/inertia.svg"
     "../assets/vite_ruby.svg": "%{js_destination_path}/assets/vite_ruby.svg"

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

@@ -101,6 +101,12 @@ module Inertia
         say "Copying #{inertia_entrypoint} entrypoint"
         copy_file "#{framework}/#{inertia_entrypoint}", js_file_path("entrypoints/#{inertia_entrypoint}")
 
+        # Copy framework-specific config files
+        if svelte?
+          say 'Copying svelte.config.js'
+          copy_file 'svelte/svelte.config.js', file_path('svelte.config.js')
+        end
+
         say 'Copying InertiaController'
         copy_file 'inertia_controller.rb', file_path('app/controllers/inertia_controller.rb')
 
@@ -112,7 +118,7 @@ module Inertia
           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')
+          if 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 %>'
@@ -124,7 +130,7 @@ module Inertia
           say_error '-  <title>...</title>'
           say_error '+  <title data-inertia>...</title>'
           say_error '+  <%= inertia_ssr_head %>'
-          say_error '+  <%= vite_react_refresh_tag %>' if framework == 'react'
+          say_error '+  <%= vite_react_refresh_tag %>' if react?
           say_error "+  <%= #{vite_tag} %>"
         end
       end
@@ -142,14 +148,30 @@ module Inertia
 
         add_dependencies(*FRAMEWORKS[framework]['packages_ts'])
 
-        say 'Copying adding scripts to package.json'
+        say 'Copying tsconfig and types'
+
+        # Copy tsconfig files
+        tsconfig_files = %w[tsconfig.json tsconfig.node.json]
+        tsconfig_files << 'tsconfig.app.json' unless svelte?
+
+        tsconfig_files.each do |file|
+          template "#{framework}/#{file}", file_path(file)
+        end
+
+        # Copy type definition files
+        types_files = %w[types/vite-env.d.ts types/globals.d.ts types/index.ts]
+        types_files.each do |file|
+          template "#{framework}/#{file}", file_path("#{js_destination_path}/#{file}")
+        end
+
+        say 'Adding TypeScript check scripts to package.json'
         if svelte?
           run 'npm pkg set scripts.check="svelte-check --tsconfig ./tsconfig.json && tsc -p tsconfig.node.json"'
-        end
-        if framework == 'vue'
+        elsif react?
+          run 'npm pkg set scripts.check="tsc -p tsconfig.app.json && tsc -p tsconfig.node.json"'
+        elsif vue?
           run 'npm pkg set scripts.check="vue-tsc -p tsconfig.app.json && tsc -p tsconfig.node.json"'
         end
-        run 'npm pkg set scripts.check="tsc -p tsconfig.app.json && tsc -p tsconfig.node.json"' if framework == 'react'
       end
 
       def install_example_page
@@ -158,6 +180,7 @@ module Inertia
 
         say 'Adding a route for the example Inertia controller'
         route "get 'inertia-example', to: 'inertia_example#index'"
+        route "root 'inertia_example#index'" unless File.read(file_path('config/routes.rb')).match?(/^\s*root\s+/)
 
         say 'Copying page assets'
         copy_files = FRAMEWORKS[framework]['copy_files'].merge(
@@ -201,6 +224,7 @@ module Inertia
               exit(false)
             end
             if (capture = run('bundle exec vite install', capture: !verbose?))
+              rename_application_js_to_ts if typescript?
               say 'Vite Rails successfully installed', :green
             else
               say capture
@@ -213,6 +237,15 @@ module Inertia
         end
       end
 
+      def rename_application_js_to_ts
+        return unless File.exist?(application_js_path)
+        return unless application_layout.read.include?("<%= vite_javascript_tag 'application' %>")
+
+        FileUtils.mv(application_js_path, application_ts_path)
+        gsub_file application_layout.to_s, /<%= vite_javascript_tag 'application' %>/,
+                  "<%= vite_typescript_tag 'application' %>"
+      end
+
       def ruby_vite_installed?
         return true if package_manager.present? && ruby_vite?
 
@@ -274,6 +307,14 @@ module Inertia
         @typescript = options[:typescript] || yes?('Would you like to use TypeScript? (y/n)', :green)
       end
 
+      def application_js_path
+        js_file_path('entrypoints/application.js')
+      end
+
+      def application_ts_path
+        js_file_path('entrypoints/application.ts')
+      end
+
       def inertia_entrypoint
         "inertia.#{typescript? ? 'ts' : 'js'}#{'x' if react?}"
       end
@@ -303,6 +344,10 @@ module Inertia
         framework.start_with? 'react'
       end
 
+      def vue?
+        framework.start_with? 'vue'
+      end
+
       def inertia_package
         "#{FRAMEWORKS[framework]['inertia_package']}@#{options[:inertia_version]}"
       end

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

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="rails">
+            <path d="M100,50 C100,22.38575 77.61425,0 50,0 C22.38575,0 0,22.38575 0,50 C0,77.61425 22.38575,100 50,100 C77.61425,100 100,77.61425 100,50 Z" id="Path" fill="#D30001"></path>
+            <path d="M93.892357,43.4595403 L93.892357,47.5730437 L86.5920182,47.5730437 L86.5920182,49.4715837 L90.2760899,49.4715837 C92.248599,49.4715837 94.348624,50.9380148 94.474087,53.4380961 L94.48,53.6754938 L94.48,55.2576105 C94.392176,58.2655695 91.9368789,59.3966123 90.4084611,59.4587878 L90.2760899,59.4615206 L82.8853448,59.4615206 L82.8853448,55.3706188 L90.3664966,55.3480172 L90.3664966,53.3590705 L86.8858399,53.3590705 C85.1105816,53.3590705 82.8040078,52.0201552 82.6658457,49.4041504 L82.6593281,49.1551604 L82.6593281,47.7312554 C82.6593281,45.0330152 84.937541,43.5484024 86.7247921,43.4634063 L86.8858399,43.4595403 L93.892357,43.4595403 Z M75.200778,43.4595403 L75.200778,55.3254155 L81.3710331,55.3254155 L81.3710331,59.4615206 L70.6352412,59.4615206 L70.6352412,43.4595403 L75.200778,43.4595403 Z M68.7593029,43.4595403 L68.7593029,59.4615206 L64.1711644,59.4615206 L64.1711644,43.4595403 L68.7593029,43.4595403 Z M53.5483809,43.4595403 L57.955706,43.4595403 L58.14343,43.4662215 C58.1772909,43.468495 58.2123757,43.4713714 58.2485901,43.4748858 L58.4786776,43.5039036 C59.7700605,43.7024512 62.0250592,44.6252852 62.1538484,47.4107623 L62.1596161,47.6634504 L62.1596161,59.4615206 L57.887901,59.4615206 L57.887901,56.6363122 L53.7517959,56.6363122 L53.7517959,59.4615206 L49.3444708,59.4615206 L49.3444708,47.6634504 C49.3444708,46.3450198 50.3485534,43.6166009 53.2913698,43.4660394 L53.5483809,43.4595403 Z M33.808529,43.4567822 L42.3887147,43.4573571 L42.6276381,43.4941033 L42.775584,43.5235203 L43.0497001,43.5888785 L43.2622199,43.6487853 L43.4945424,43.7235035 C43.5347217,43.7372739 43.5755826,43.7517236 43.6170534,43.7668839 L43.8726225,43.8666215 L44.1393843,43.9849067 C45.4954358,44.6251933 47.1420698,46.017065 47.1420698,49.0012007 C47.1420698,52.1842788 45.5955457,53.5026906 44.4432336,54.0432484 L44.2322685,54.1357529 L44.0333857,54.2116184 L43.849428,54.272437 L43.6832382,54.3198006 L43.4734874,54.3691007 L43.2138381,54.410937 L48.2195276,59.4615206 L41.8445687,59.4615206 L38.1183604,55.60063 L38.1183604,59.4615206 L33.808529,59.4615206 L33.808529,43.4567822 Z M55.8155893,40.3698629 L56.260581,40.7925436 L56.017613,40.9705317 L55.6693799,41.2398682 L55.4695226,41.4027886 C50.2296259,37.5282171 45.8218772,35.9806477 42.2724036,35.5874349 L41.7464229,35.5369641 C40.7073487,35.4527515 39.7456368,35.467154 38.8619927,35.5485103 L38.4266795,35.5946214 C38.3552127,35.6031876 38.2842888,35.6121822 38.2139083,35.6215867 L37.7981488,35.6827872 L37.3954497,35.7529479 L37.0058303,35.8311894 L36.6293105,35.9166321 C36.5676499,35.9314238 36.5065359,35.9464789 36.445969,35.9617791 L36.0891351,36.0563748 L35.7454497,36.155973 L35.4149323,36.2596943 L35.0976026,36.3666592 L34.7934801,36.4759882 L34.5025845,36.5868019 L34.0910843,36.7538822 L33.5888941,36.9736437 L32.9355205,37.2825393 L32.3254155,37.5831068 C27.6265289,40.2050856 25.4714861,44.4291779 24.5572153,48.4697531 L24.4349052,49.0455369 C24.3968548,49.2369202 24.3614774,49.4276945 24.328632,49.617667 L24.2375516,50.1849866 L24.1608198,50.7463387 L24.0975923,51.3005664 C24.0881329,51.3922798 24.0792009,51.4836481 24.0707789,51.5746472 L24.0262249,52.1160194 L23.9930648,52.647375 C23.9884406,52.7350353 23.9842561,52.8222301 23.9804935,52.9089352 L23.962841,53.423097 L23.9544717,53.9243501 L23.9545413,54.4115377 L23.9686219,55.1134156 L23.9969414,55.7771385 L24.0366503,56.3988022 L24.0848995,56.9745021 L24.1388397,57.5003338 L24.2146878,58.1171217 L24.288834,58.6290587 L24.3688342,59.1074343 L24.4374337,59.4615206 L6.5821167,59.4615206 L6.6406067,59.0197953 L6.6869435,58.7246505 L6.7499641,58.3599263 L6.863246,57.7707194 L6.9726247,57.2556287 L7.1546512,56.4771199 L7.3207888,55.8284427 L7.4467121,55.3668484 L7.6597595,54.6330259 L7.818725,54.1175217 L7.9918978,53.5820518 L8.1798441,53.0275292 L8.3831298,52.4548672 L8.6023211,51.8649789 L8.8379839,51.2587775 L9.0906843,50.6371763 C9.1342523,50.5323435 9.1785537,50.4269072 9.2236005,50.3208862 L9.5029185,49.6778975 L9.8006892,49.0217919 L10.1174786,48.3534827 L10.4538526,47.673883 L10.8103775,46.983906 C11.1771664,46.2890449 11.5750304,45.5799876 12.0065168,44.8608436 C16.7528669,36.9502602 24.8442637,30.9608184 31.4213488,30.373175 C36.4667294,29.8677656 41.3138924,31.3008573 45.3657116,33.2528185 L46.0156974,33.5736767 L46.6511742,33.902286 L47.2715761,34.237301 C47.3736887,34.2935959 47.4751497,34.3501017 47.5759471,34.4067902 L48.1726757,34.7488915 L48.7529147,35.0940354 L49.3160983,35.4408765 L49.8616607,35.7880697 L50.389036,36.1342696 L50.8976583,36.478131 C50.9808345,36.5351716 51.0632058,36.5920587 51.1447603,36.6487643 L51.6241923,36.9865955 L52.0834567,37.3187249 L52.5219877,37.6438074 L52.9392194,37.9604976 L53.523893,38.4168545 L54.0574604,38.8467616 L54.6860841,39.3709795 L55.3324273,39.932381 L55.8155893,40.3698629 Z M25.1154837,54.9411872 L27.5564638,55.8226522 C27.6694721,56.7078841 27.8295672,57.5460293 27.9975102,58.3109283 L28.0989038,58.7608689 L25.3867037,57.7889972 L25.352869,57.5768354 L25.2868269,57.1012511 L25.2256668,56.5600316 C25.1776383,56.0825714 25.1380854,55.5401313 25.1154837,54.9411872 Z M56.6222076,47.279222 L55.1078959,47.279222 C54.1678721,47.279222 53.8687735,47.688994 53.7736058,47.949758 L53.7453792,48.0447919 C53.7421422,48.0588649 53.7395526,48.0719445 53.737481,48.0838651 L53.7293237,48.155389 L53.7291942,52.0707754 L57.8652993,52.0707754 L57.863446,48.136006 L57.8531848,48.0690147 L57.8274641,47.9702906 C57.7439284,47.7111399 57.4765506,47.279222 56.6222076,47.279222 L56.6222076,47.279222 Z M6.1300834,47.618247 L8.7292751,48.567517 L8.3206341,49.5191009 C8.1081459,50.0185653 7.8928545,50.5339151 7.7172766,50.9768459 L7.5991917,51.2797171 L5,50.3304471 L5.1323662,49.9851438 L5.3907551,49.3459404 L5.6964662,48.617743 L6.0219537,47.8641186 C6.0581975,47.7813243 6.0942974,47.6992363 6.1300834,47.618247 L6.1300834,47.618247 Z M41.5752043,47.4748021 L38.1183604,47.4748021 L38.1183604,51.1336694 L41.5527572,51.1336694 L41.6074678,51.1082774 L41.6940662,51.0593791 L41.8088198,50.9806969 C42.1014626,50.7595521 42.5404269,50.2657172 42.5404269,49.2930122 C42.5404269,48.3203072 42.1114391,47.8364488 41.8254472,47.6219549 L41.7133017,47.5458808 L41.6286714,47.4989507 L41.5752043,47.4748021 Z M26.1325587,46.7141803 L27.7598788,48.0024754 C27.5790654,48.7076474 27.4416473,49.4128194 27.3476243,50.1179914 L27.2852437,50.6468704 L25.4545087,49.2003637 C25.6353221,48.3867037 25.8387371,47.550442 26.1325587,46.7141803 Z M30.1330538,40.4083152 L31.1501288,41.9452286 C30.7523395,42.3610993 30.3834803,42.7769699 30.0551233,43.2159847 L29.8166305,43.549947 L28.7317504,41.9226269 C29.1385804,41.4027886 29.6132155,40.8829502 30.1330538,40.4083152 L30.1330538,40.4083152 Z M13.9502602,37.0632685 L15.5549785,38.4645719 C15.1481485,38.8883531 14.754032,39.3375613 14.3821639,39.7931261 L14.0180652,40.2501036 L12.2777368,38.7583935 C12.7975751,38.1933519 13.3626168,37.6283102 13.9502602,37.0632685 L13.9502602,37.0632685 Z M36.3485123,36.9728618 L36.8457489,38.4645719 C36.3213903,38.6273039 35.7970316,38.8334311 35.2726729,39.0713814 L34.8794039,39.2556302 L34.3595655,37.6961152 C34.9246072,37.4474968 35.5800556,37.1988785 36.3485123,36.9728618 L36.3485123,36.9728618 Z M41.6373023,36.4304218 C42.215905,36.4665845 42.8089728,36.5316773 43.4165056,36.6372723 L43.8748674,36.7242435 L43.7844607,38.1255469 C43.1877767,37.9989775 42.5910927,37.9158034 41.9944087,37.8760245 L41.5468957,37.8543269 L41.6373023,36.4304218 Z M23.0813337,30.1923617 L24.0984087,31.7518767 C23.6576762,31.972243 23.2296571,32.2180361 22.7952813,32.479721 L22.3580803,32.7463501 L21.3184036,31.1642334 C21.9286486,30.8026067 22.516292,30.4861834 23.0813337,30.1923617 L23.0813337,30.1923617 Z M41.592099,30.8252084 L41.6825057,29.3334984 L42.126013,29.4640548 L42.5099933,29.58438 L42.8385391,29.6942879 L43.1157428,29.7935927 L43.4442343,29.9222617 L43.7407223,30.0549729 L43.8748674,30.1245567 L43.7844607,31.6388684 C43.3022918,31.4429873 42.8201229,31.2571514 42.3312572,31.0813606 L41.592099,30.8252084 Z M33.0486689,28 L33.5007022,29.3787017 L33.2746855,29.3787017 C32.7830993,29.3787017 32.291513,29.3914151 31.7999267,29.4263771 L31.3083405,29.4691084 L30.8789088,28.13561 C31.6247638,28.0452033 32.3480172,28 33.0486689,28 L33.0486689,28 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero"></path>
+        </g>
+    </g>
+</svg>

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

@@ -2,6 +2,11 @@
 
 class InertiaExampleController < InertiaController
   def index
-    render inertia: { name: params.fetch(:name, 'World') }
+    render inertia: {
+      rails_version: Rails.version,
+      ruby_version: RUBY_DESCRIPTION,
+      rack_version: Rack.release,
+      inertia_rails_version: InertiaRails::VERSION,
+    }
   end
 end

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

@@ -1,60 +1,56 @@
 import { Head } from '@inertiajs/react'
-import { useState } from 'react'
+import { version as react_version } from 'react'
 
+import railsSvg from '/assets/rails.svg'
 import inertiaSvg from '/assets/inertia.svg'
 import reactSvg from '/assets/react.svg'
-import viteRubySvg from '/assets/vite_ruby.svg'
 
 import cs from './index.module.css'
 
-export default function InertiaExample({ name }) {
-  const [count, setCount] = useState(0)
-
+export default function InertiaExample({ rails_version, ruby_version, rack_version, inertia_rails_version }) {
   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.dev" 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>
+    <div className={cs.root}>
+      <Head title="Ruby on Rails + Inertia + React" />
+
+      <nav className={cs.subNav}>
+        <a href="https://rubyonrails.org" target="_blank">
+          <img  className={`${cs.logo} ${cs.rails}`} alt="Ruby on Rails Logo" src={railsSvg} />
+        </a>
+        <a href="https://inertia-rails.dev" target="_blank">
+          <img className={`${cs.logo} ${cs.inertia}`} src={inertiaSvg} alt="Inertia logo" />
+        </a>
+        <a href="https://react.dev" target="_blank">
+          <img
+            className={`${cs.logo} ${cs.react}`}
+            src={reactSvg}
+            alt="React logo"
+          />
+        </a>
+      </nav>
+
+      <div className={cs.footer}>
+        <div className={cs.card}>
           <p>
-            Edit <code>app/frontend/pages/inertia_example/index.jsx</code> and save to
-            test HMR
+            Edit <code><%= js_destination_path %>/pages/inertia_example/index.jsx</code> and save to test <abbr title="Hot Module Replacement">HMR</abbr>.
           </p>
         </div>
-        <p className={cs.readTheDocs}>
-          Click on the Inertia, Vite Ruby, and React logos to learn more
-        </p>
+
+        <ul>
+          <li>
+            <ul>
+              <li><strong>Rails version:</strong> {rails_version}</li>
+              <li><strong>Rack version:</strong> {rack_version}</li>
+            </ul>
+          </li>
+          <li><strong>Ruby version:</strong> {ruby_version}</li>
+          <li>
+            <ul>
+              <li><strong>Inertia Rails version:</strong> {inertia_rails_version}</li>
+              <li><strong>React version:</strong> {react_version}</li>
+            </ul>
+          </li>
+          </ul>
       </div>
-    </>
+    </div>
   )
 }

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

@@ -1,60 +1,52 @@
 .root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  align-items: center;
+  background-color: #F0E7E9;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMjQiIHZpZXdCb3g9IjAgMCAxNDQwIDEwMjQiIHdpZHRoPSIxNDQwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0xNDQwIDUxMC4wMDA2NDh2LTUxMC4wMDA2NDhoLTE0NDB2Mzg0LjAwMDY0OGM0MTcuMzExOTM5IDEzMS4xNDIxNzkgODkxIDE3MS41MTMgMTQ0MCAxMjZ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  color: #261B23;
+  display: flex;
+  flex-direction: column;
+  font-family: Sans-Serif;
+  font-size: calc(0.9em + 0.5vw);
+  font-style: normal;
   font-weight: 400;
-  color: #213547;
-  background-color: #ffffff;
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
+  justify-content: center;
+  line-height: 1.25;
+  min-height: 100vh;
   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;
+@media (prefers-color-scheme: dark) {
+  .root {
+    background-color: #1a1a1a;
+    background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMjQiIHZpZXdCb3g9IjAgMCAxNDQwIDEwMjQiIHdpZHRoPSIxNDQwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0xNDQwIDUxMC4wMDA2NDh2LTUxMC4wMDA2NDhoLTE0NDB2Mzg0LjAwMDY0OGM0MTcuMzExOTM5IDEzMS4xNDIxNzkgODkxIDE3MS41MTMgMTQ0MCAxMjZ6IiBmaWxsPSIjMzMzIi8+PC9zdmc+);
+    color: #e0e0e0;
+  }
 }
 
 .logo {
   display: inline-block;
-  height: 6em;
+  height: 9.8vw;
+  min-height: 130px;
   padding: 1.5em;
   will-change: filter;
   transition: filter 300ms;
+  filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
 }
-.logo:hover {
+.logo.inertia: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);
 }
+.logo.rails:hover  {
+  filter: drop-shadow(0 0 2em rgb(211 0 1 / 0.6));
+}
 
 @keyframes logo-spin {
   from {
@@ -71,10 +63,40 @@
   }
 }
 
+@media (prefers-color-scheme: dark) {
+  .logo {
+    filter: drop-shadow(0 20px 13px rgb(255 255 255 / 0.03)) drop-shadow(0 8px 5px rgb(255 255 255 / 0.08));
+  }
+}
+
 .card {
   padding: 2em;
+  font-size: 0.7em;
+  color: #948e90;
+}
+
+.footer {
+  bottom: 0;
+  left: 0;
+  margin: 0 2rem 2rem 2rem;
+  position: absolute;
+  right: 0;
+}
+
+.footer ul {
+  list-style: none;
+}
+
+.footer ul li {
+  display: inline;
+}
+
+.footer ul ul li:after {
+  content: " | ";
+  font-weight: 300;
+  color: #948e90;
 }
 
-.read-the-docs {
-  color: #888;
+.footer ul ul li:last-child:after {
+  content: "";
 }

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

@@ -1,60 +1,59 @@
 import { Head } from '@inertiajs/react'
-import { useState } from 'react'
+import { version as react_version } from 'react'
 
+import railsSvg from '/assets/rails.svg'
 import inertiaSvg from '/assets/inertia.svg'
 import reactSvg from '/assets/react.svg'
-import viteRubySvg from '/assets/vite_ruby.svg'
 
 import cs from './index.module.css'
 
-export default function InertiaExample({ name }: { name: string }) {
-  const [count, setCount] = useState(0)
-
+export default function InertiaExample(
+  { rails_version, ruby_version, rack_version, inertia_rails_version }:
+  { rails_version: string, ruby_version: string, rack_version: string, inertia_rails_version: string }
+) {
   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.dev" 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>
+    <div className={cs.root}>
+      <Head title="Ruby on Rails + Inertia + React" />
+
+      <nav className={cs.subNav}>
+        <a href="https://rubyonrails.org" target="_blank">
+          <img  className={`${cs.logo} ${cs.rails}`} alt="Ruby on Rails Logo" src={railsSvg} />
+        </a>
+        <a href="https://inertia-rails.dev" target="_blank">
+          <img className={`${cs.logo} ${cs.inertia}`} src={inertiaSvg} alt="Inertia logo" />
+        </a>
+        <a href="https://react.dev" target="_blank">
+          <img
+            className={`${cs.logo} ${cs.react}`}
+            src={reactSvg}
+            alt="React logo"
+          />
+        </a>
+      </nav>
+
+      <div className={cs.footer}>
+        <div className={cs.card}>
           <p>
-            Edit <code>app/frontend/pages/inertia_example/index.tsx</code> and save to
-            test HMR
+            Edit <code><%= js_destination_path %>/pages/inertia_example/index.jsx</code> and save to test <abbr title="Hot Module Replacement">HMR</abbr>.
           </p>
         </div>
-        <p className={cs.readTheDocs}>
-          Click on the Inertia, Vite Ruby, and React logos to learn more
-        </p>
+
+        <ul>
+          <li>
+            <ul>
+              <li><strong>Rails version:</strong> {rails_version}</li>
+              <li><strong>Rack version:</strong> {rack_version}</li>
+            </ul>
+          </li>
+          <li><strong>Ruby version:</strong> {ruby_version}</li>
+          <li>
+            <ul>
+              <li><strong>Inertia Rails version:</strong> {inertia_rails_version}</li>
+              <li><strong>React version:</strong> {react_version}</li>
+            </ul>
+          </li>
+          </ul>
       </div>
-    </>
+    </div>
   )
 }

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

@@ -41,7 +41,7 @@ createInertiaApp({
 
   defaults: {
     form: {
-      forceIndicesArrayFormatInFormData: true,
+      forceIndicesArrayFormatInFormData: false,
     },
     future: {
       useDataInertiaHeadAttribute: true,

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

@@ -14,7 +14,7 @@ void createInertiaApp({
   // progress: false,
 
   resolve: (name) => {
-    const pages = import.meta.glob<ResolvedComponent>('../pages/**/*.tsx', {
+    const pages = import.meta.glob<{default: ResolvedComponent}>('../pages/**/*.tsx', {
       eager: true,
     })
     const page = pages[`../pages/${name}.tsx`]
@@ -26,7 +26,7 @@ void createInertiaApp({
     // and use the following line.
     // see https://inertia-rails.dev/guide/pages#default-layouts
     //
-    // page.default.layout ||= (page) => (<Layout>{page}</Layout>)
+    // page.default.layout ||= (page: ReactNode) => (<Layout>{page}</Layout>)
 
     return page
   },
@@ -41,7 +41,7 @@ void createInertiaApp({
 
   defaults: {
     form: {
-      forceIndicesArrayFormatInFormData: true,
+      forceIndicesArrayFormatInFormData: false,
     },
     future: {
       useDataInertiaHeadAttribute: true,