inertia_rails 3.4.0 → 3.6.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 (205) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +22 -0
  3. data/README.md +17 -13
  4. data/lib/generators/inertia/controller/controller_generator.rb +18 -0
  5. data/lib/generators/inertia/controller/templates/controller.rb.tt +10 -0
  6. data/lib/generators/inertia/install/frameworks.yml +98 -0
  7. data/lib/generators/inertia/install/helpers.rb +51 -0
  8. data/lib/generators/inertia/install/install_generator.rb +291 -0
  9. data/lib/generators/inertia/install/js_package_manager.rb +50 -0
  10. data/lib/generators/inertia/install/templates/assets/inertia.svg +1 -0
  11. data/lib/generators/inertia/install/templates/assets/react.svg +1 -0
  12. data/lib/generators/inertia/install/templates/assets/svelte.svg +1 -0
  13. data/lib/generators/inertia/install/templates/assets/vite_ruby.svg +1 -0
  14. data/lib/generators/inertia/install/templates/assets/vue.svg +1 -0
  15. data/lib/generators/{inertia_rails/install → inertia/install/templates}/controller.rb +3 -1
  16. data/lib/generators/inertia/install/templates/dev +23 -0
  17. data/lib/generators/inertia/install/templates/initializer.rb +6 -0
  18. data/lib/generators/inertia/install/templates/react/InertiaExample.jsx +60 -0
  19. data/lib/generators/inertia/install/templates/react/InertiaExample.module.css +80 -0
  20. data/lib/generators/inertia/install/templates/react/InertiaExample.tsx +60 -0
  21. data/lib/generators/inertia/install/templates/react/inertia.js +45 -0
  22. data/lib/generators/inertia/install/templates/react/inertia.ts +51 -0
  23. data/lib/generators/inertia/install/templates/react/tsconfig.app.json +27 -0
  24. data/lib/generators/inertia/install/templates/react/tsconfig.json +11 -0
  25. data/lib/generators/inertia/install/templates/react/tsconfig.node.json +13 -0
  26. data/lib/generators/inertia/install/templates/react/vite-env.d.ts +1 -0
  27. data/lib/generators/inertia/install/templates/svelte/InertiaExample.svelte +112 -0
  28. data/lib/generators/inertia/install/templates/svelte/InertiaExample.ts.svelte +112 -0
  29. data/lib/generators/inertia/install/templates/svelte/inertia.js +44 -0
  30. data/lib/generators/inertia/install/templates/svelte/inertia.ts.tt +45 -0
  31. data/lib/generators/inertia/install/templates/svelte/svelte.config.js +7 -0
  32. data/lib/generators/inertia/install/templates/svelte/tsconfig.json +21 -0
  33. data/lib/generators/inertia/install/templates/svelte/tsconfig.node.json +12 -0
  34. data/lib/generators/inertia/install/templates/svelte/vite-env.d.ts +2 -0
  35. data/lib/generators/inertia/install/templates/svelte4/InertiaExample.svelte +116 -0
  36. data/lib/generators/inertia/install/templates/svelte4/InertiaExample.ts.svelte +116 -0
  37. data/lib/generators/inertia/install/templates/svelte4/inertia.js +43 -0
  38. data/lib/generators/inertia/install/templates/svelte4/inertia.ts.tt +44 -0
  39. data/lib/generators/inertia/install/templates/svelte4/svelte.config.js +7 -0
  40. data/lib/generators/inertia/install/templates/svelte4/tsconfig.json +21 -0
  41. data/lib/generators/inertia/install/templates/svelte4/tsconfig.node.json +12 -0
  42. data/lib/generators/inertia/install/templates/svelte4/vite-env.d.ts +2 -0
  43. data/lib/generators/inertia/install/templates/tailwind/application.css +13 -0
  44. data/lib/generators/inertia/install/templates/tailwind/postcss.config.js +6 -0
  45. data/lib/generators/inertia/install/templates/tailwind/tailwind.config.js.tt +18 -0
  46. data/lib/generators/inertia/install/templates/vue/InertiaExample.ts.vue +117 -0
  47. data/lib/generators/inertia/install/templates/vue/InertiaExample.vue +117 -0
  48. data/lib/generators/inertia/install/templates/vue/inertia.js +35 -0
  49. data/lib/generators/inertia/install/templates/vue/inertia.ts +35 -0
  50. data/lib/generators/inertia/install/templates/vue/tsconfig.app.json +24 -0
  51. data/lib/generators/inertia/install/templates/vue/tsconfig.json +11 -0
  52. data/lib/generators/inertia/install/templates/vue/tsconfig.node.json +22 -0
  53. data/lib/generators/inertia/install/templates/vue/vite-env.d.ts +1 -0
  54. data/lib/generators/inertia/scaffold/scaffold_generator.rb +16 -0
  55. data/lib/generators/inertia/scaffold_controller/scaffold_controller_generator.rb +60 -0
  56. data/lib/generators/inertia/scaffold_controller/templates/controller.rb.tt +100 -0
  57. data/lib/generators/inertia_templates/controller/controller_generator.rb +12 -0
  58. data/lib/generators/inertia_templates/controller/templates/react/view.jsx.tt +8 -0
  59. data/lib/generators/inertia_templates/controller/templates/react/view.tsx.tt +8 -0
  60. data/lib/generators/inertia_templates/controller/templates/svelte/view.svelte.tt +2 -0
  61. data/lib/generators/inertia_templates/controller/templates/svelte4/view.svelte.tt +2 -0
  62. data/lib/generators/inertia_templates/controller/templates/vue/view.vue.tt +4 -0
  63. data/lib/generators/inertia_templates/scaffold/scaffold_generator.rb +12 -0
  64. data/lib/generators/inertia_templates/scaffold/templates/react/Edit.jsx.tt +35 -0
  65. data/lib/generators/inertia_templates/scaffold/templates/react/Edit.tsx.tt +40 -0
  66. data/lib/generators/inertia_templates/scaffold/templates/react/Form.jsx.tt +111 -0
  67. data/lib/generators/inertia_templates/scaffold/templates/react/Form.tsx.tt +130 -0
  68. data/lib/generators/inertia_templates/scaffold/templates/react/Index.jsx.tt +26 -0
  69. data/lib/generators/inertia_templates/scaffold/templates/react/Index.tsx.tt +32 -0
  70. data/lib/generators/inertia_templates/scaffold/templates/react/New.jsx.tt +27 -0
  71. data/lib/generators/inertia_templates/scaffold/templates/react/New.tsx.tt +32 -0
  72. data/lib/generators/inertia_templates/scaffold/templates/react/One.jsx.tt +26 -0
  73. data/lib/generators/inertia_templates/scaffold/templates/react/One.tsx.tt +32 -0
  74. data/lib/generators/inertia_templates/scaffold/templates/react/Show.jsx.tt +32 -0
  75. data/lib/generators/inertia_templates/scaffold/templates/react/Show.tsx.tt +38 -0
  76. data/lib/generators/inertia_templates/scaffold/templates/react/types.ts.tt +19 -0
  77. data/lib/generators/inertia_templates/scaffold/templates/svelte/Edit.svelte.tt +36 -0
  78. data/lib/generators/inertia_templates/scaffold/templates/svelte/Edit.ts.svelte.tt +37 -0
  79. data/lib/generators/inertia_templates/scaffold/templates/svelte/Form.svelte.tt +97 -0
  80. data/lib/generators/inertia_templates/scaffold/templates/svelte/Form.ts.svelte.tt +102 -0
  81. data/lib/generators/inertia_templates/scaffold/templates/svelte/Index.svelte.tt +35 -0
  82. data/lib/generators/inertia_templates/scaffold/templates/svelte/Index.ts.svelte.tt +39 -0
  83. data/lib/generators/inertia_templates/scaffold/templates/svelte/New.svelte.tt +29 -0
  84. data/lib/generators/inertia_templates/scaffold/templates/svelte/New.ts.svelte.tt +30 -0
  85. data/lib/generators/inertia_templates/scaffold/templates/svelte/One.svelte.tt +28 -0
  86. data/lib/generators/inertia_templates/scaffold/templates/svelte/One.ts.svelte.tt +30 -0
  87. data/lib/generators/inertia_templates/scaffold/templates/svelte/Show.svelte.tt +35 -0
  88. data/lib/generators/inertia_templates/scaffold/templates/svelte/Show.ts.svelte.tt +39 -0
  89. data/lib/generators/inertia_templates/scaffold/templates/svelte/types.ts.tt +19 -0
  90. data/lib/generators/inertia_templates/scaffold/templates/svelte4/Edit.svelte.tt +37 -0
  91. data/lib/generators/inertia_templates/scaffold/templates/svelte4/Edit.ts.svelte.tt +38 -0
  92. data/lib/generators/inertia_templates/scaffold/templates/svelte4/Form.svelte.tt +96 -0
  93. data/lib/generators/inertia_templates/scaffold/templates/svelte4/Form.ts.svelte.tt +106 -0
  94. data/lib/generators/inertia_templates/scaffold/templates/svelte4/Index.svelte.tt +36 -0
  95. data/lib/generators/inertia_templates/scaffold/templates/svelte4/Index.ts.svelte.tt +37 -0
  96. data/lib/generators/inertia_templates/scaffold/templates/svelte4/New.svelte.tt +30 -0
  97. data/lib/generators/inertia_templates/scaffold/templates/svelte4/New.ts.svelte.tt +31 -0
  98. data/lib/generators/inertia_templates/scaffold/templates/svelte4/One.svelte.tt +28 -0
  99. data/lib/generators/inertia_templates/scaffold/templates/svelte4/One.ts.svelte.tt +30 -0
  100. data/lib/generators/inertia_templates/scaffold/templates/svelte4/Show.svelte.tt +39 -0
  101. data/lib/generators/inertia_templates/scaffold/templates/svelte4/Show.ts.svelte.tt +40 -0
  102. data/lib/generators/inertia_templates/scaffold/templates/svelte4/types.ts.tt +19 -0
  103. data/lib/generators/inertia_templates/scaffold/templates/vue/Edit.ts.vue.tt +37 -0
  104. data/lib/generators/inertia_templates/scaffold/templates/vue/Edit.vue.tt +36 -0
  105. data/lib/generators/inertia_templates/scaffold/templates/vue/Form.ts.vue.tt +101 -0
  106. data/lib/generators/inertia_templates/scaffold/templates/vue/Form.vue.tt +94 -0
  107. data/lib/generators/inertia_templates/scaffold/templates/vue/Index.ts.vue.tt +35 -0
  108. data/lib/generators/inertia_templates/scaffold/templates/vue/Index.vue.tt +31 -0
  109. data/lib/generators/inertia_templates/scaffold/templates/vue/New.ts.vue.tt +30 -0
  110. data/lib/generators/inertia_templates/scaffold/templates/vue/New.vue.tt +29 -0
  111. data/lib/generators/inertia_templates/scaffold/templates/vue/One.ts.vue.tt +28 -0
  112. data/lib/generators/inertia_templates/scaffold/templates/vue/One.vue.tt +26 -0
  113. data/lib/generators/inertia_templates/scaffold/templates/vue/Show.ts.vue.tt +41 -0
  114. data/lib/generators/inertia_templates/scaffold/templates/vue/Show.vue.tt +37 -0
  115. data/lib/generators/inertia_templates/scaffold/templates/vue/types.ts.tt +19 -0
  116. data/lib/generators/inertia_tw_templates/controller/controller_generator.rb +12 -0
  117. data/lib/generators/inertia_tw_templates/controller/templates/react/view.jsx.tt +8 -0
  118. data/lib/generators/inertia_tw_templates/controller/templates/react/view.tsx.tt +8 -0
  119. data/lib/generators/inertia_tw_templates/controller/templates/svelte/view.svelte.tt +2 -0
  120. data/lib/generators/inertia_tw_templates/controller/templates/svelte4/view.svelte.tt +2 -0
  121. data/lib/generators/inertia_tw_templates/controller/templates/vue/view.vue.tt +4 -0
  122. data/lib/generators/inertia_tw_templates/scaffold/scaffold_generator.rb +12 -0
  123. data/lib/generators/inertia_tw_templates/scaffold/templates/react/Edit.jsx.tt +42 -0
  124. data/lib/generators/inertia_tw_templates/scaffold/templates/react/Edit.tsx.tt +47 -0
  125. data/lib/generators/inertia_tw_templates/scaffold/templates/react/Form.jsx.tt +122 -0
  126. data/lib/generators/inertia_tw_templates/scaffold/templates/react/Form.tsx.tt +142 -0
  127. data/lib/generators/inertia_tw_templates/scaffold/templates/react/Index.jsx.tt +43 -0
  128. data/lib/generators/inertia_tw_templates/scaffold/templates/react/Index.tsx.tt +49 -0
  129. data/lib/generators/inertia_tw_templates/scaffold/templates/react/New.jsx.tt +30 -0
  130. data/lib/generators/inertia_tw_templates/scaffold/templates/react/New.tsx.tt +35 -0
  131. data/lib/generators/inertia_tw_templates/scaffold/templates/react/One.jsx.tt +26 -0
  132. data/lib/generators/inertia_tw_templates/scaffold/templates/react/One.tsx.tt +32 -0
  133. data/lib/generators/inertia_tw_templates/scaffold/templates/react/Show.jsx.tt +47 -0
  134. data/lib/generators/inertia_tw_templates/scaffold/templates/react/Show.tsx.tt +53 -0
  135. data/lib/generators/inertia_tw_templates/scaffold/templates/react/types.ts.tt +19 -0
  136. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/Edit.svelte.tt +44 -0
  137. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/Edit.ts.svelte.tt +45 -0
  138. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/Form.svelte.tt +118 -0
  139. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/Form.ts.svelte.tt +123 -0
  140. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/Index.svelte.tt +42 -0
  141. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/Index.ts.svelte.tt +46 -0
  142. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/New.svelte.tt +32 -0
  143. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/New.ts.svelte.tt +33 -0
  144. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/One.svelte.tt +28 -0
  145. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/One.ts.svelte.tt +30 -0
  146. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/Show.svelte.tt +50 -0
  147. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/Show.ts.svelte.tt +54 -0
  148. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/types.ts.tt +19 -0
  149. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/Edit.svelte.tt +45 -0
  150. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/Edit.ts.svelte.tt +46 -0
  151. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/Form.svelte.tt +120 -0
  152. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/Form.ts.svelte.tt +130 -0
  153. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/Index.svelte.tt +43 -0
  154. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/Index.ts.svelte.tt +44 -0
  155. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/New.svelte.tt +33 -0
  156. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/New.ts.svelte.tt +34 -0
  157. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/One.svelte.tt +28 -0
  158. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/One.ts.svelte.tt +30 -0
  159. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/Show.svelte.tt +51 -0
  160. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/Show.ts.svelte.tt +52 -0
  161. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/types.ts.tt +19 -0
  162. data/lib/generators/inertia_tw_templates/scaffold/templates/vue/Edit.ts.vue.tt +45 -0
  163. data/lib/generators/inertia_tw_templates/scaffold/templates/vue/Edit.vue.tt +44 -0
  164. data/lib/generators/inertia_tw_templates/scaffold/templates/vue/Form.ts.vue.tt +134 -0
  165. data/lib/generators/inertia_tw_templates/scaffold/templates/vue/Form.vue.tt +127 -0
  166. data/lib/generators/inertia_tw_templates/scaffold/templates/vue/Index.ts.vue.tt +47 -0
  167. data/lib/generators/inertia_tw_templates/scaffold/templates/vue/Index.vue.tt +43 -0
  168. data/lib/generators/inertia_tw_templates/scaffold/templates/vue/New.ts.vue.tt +33 -0
  169. data/lib/generators/inertia_tw_templates/scaffold/templates/vue/New.vue.tt +32 -0
  170. data/lib/generators/inertia_tw_templates/scaffold/templates/vue/One.ts.vue.tt +28 -0
  171. data/lib/generators/inertia_tw_templates/scaffold/templates/vue/One.vue.tt +26 -0
  172. data/lib/generators/inertia_tw_templates/scaffold/templates/vue/Show.ts.vue.tt +53 -0
  173. data/lib/generators/inertia_tw_templates/scaffold/templates/vue/Show.vue.tt +49 -0
  174. data/lib/generators/inertia_tw_templates/scaffold/templates/vue/types.ts.tt +19 -0
  175. data/lib/inertia_rails/always_prop.rb +6 -0
  176. data/lib/inertia_rails/base_prop.rb +14 -0
  177. data/lib/inertia_rails/configuration.rb +4 -1
  178. data/lib/inertia_rails/controller.rb +16 -4
  179. data/lib/inertia_rails/defer_prop.rb +21 -0
  180. data/lib/inertia_rails/generators/controller_template_base.rb +63 -0
  181. data/lib/inertia_rails/generators/helper.rb +139 -0
  182. data/lib/inertia_rails/generators/scaffold_template_base.rb +45 -0
  183. data/lib/inertia_rails/ignore_on_first_load_prop.rb +6 -0
  184. data/lib/inertia_rails/inertia_rails.rb +34 -12
  185. data/lib/inertia_rails/lazy_prop.rb +24 -0
  186. data/lib/inertia_rails/merge_prop.rb +14 -0
  187. data/lib/inertia_rails/middleware.rb +7 -2
  188. data/lib/inertia_rails/optional_prop.rb +6 -0
  189. data/lib/inertia_rails/renderer.rb +106 -20
  190. data/lib/inertia_rails/version.rb +1 -1
  191. data/lib/inertia_rails.rb +2 -0
  192. data/lib/patches/better_errors.rb +10 -8
  193. data/lib/patches/debug_exceptions/patch-5-0.rb +7 -3
  194. data/lib/patches/debug_exceptions/patch-5-1.rb +7 -3
  195. data/lib/patches/mapper.rb +9 -5
  196. data/lib/patches/request.rb +10 -6
  197. metadata +185 -13
  198. data/lib/generators/inertia_rails/install/react/InertiaExample.jsx +0 -9
  199. data/lib/generators/inertia_rails/install/react/inertia.jsx +0 -17
  200. data/lib/generators/inertia_rails/install/svelte/InertiaExample.svelte +0 -11
  201. data/lib/generators/inertia_rails/install/svelte/inertia.js +0 -14
  202. data/lib/generators/inertia_rails/install/vue/InertiaExample.vue +0 -11
  203. data/lib/generators/inertia_rails/install/vue/inertia.js +0 -20
  204. data/lib/generators/inertia_rails/install_generator.rb +0 -84
  205. data/lib/inertia_rails/lazy.rb +0 -28
@@ -0,0 +1,23 @@
1
+ #!/usr/bin/env sh
2
+
3
+ export PORT="${PORT:-3000}"
4
+
5
+ if command -v overmind 1> /dev/null 2>&1
6
+ then
7
+ overmind start -f Procfile.dev "$@"
8
+ exit $?
9
+ fi
10
+
11
+ if command -v hivemind 1> /dev/null 2>&1
12
+ then
13
+ echo "Hivemind is installed. Running the application with Hivemind..."
14
+ exec hivemind Procfile.dev "$@"
15
+ exit $?
16
+ fi
17
+
18
+ if gem list --no-installed --exact --silent foreman; then
19
+ echo "Installing foreman..."
20
+ gem install foreman
21
+ fi
22
+
23
+ foreman start -f Procfile.dev "$@"
@@ -0,0 +1,6 @@
1
+ # frozen_string_literal: true
2
+
3
+ InertiaRails.configure do |config|
4
+ config.ssr_enabled = ViteRuby.config.ssr_build_enabled
5
+ config.version = ViteRuby.digest
6
+ end
@@ -0,0 +1,60 @@
1
+ import { Head } from '@inertiajs/react'
2
+ import { useState } from 'react'
3
+
4
+ import inertiaSvg from '/assets/inertia.svg'
5
+ import reactSvg from '/assets/react.svg'
6
+ import viteRubySvg from '/assets/vite_ruby.svg'
7
+
8
+ import cs from './InertiaExample.module.css'
9
+
10
+ export default function InertiaExample({ name }) {
11
+ const [count, setCount] = useState(0)
12
+
13
+ return (
14
+ <>
15
+ <Head title="Inertia + Vite Ruby + React Example" />
16
+
17
+ <div className={cs.root}>
18
+ <h1 className={cs.h1}>Hello {name}!</h1>
19
+
20
+ <div>
21
+ <a href="https://inertia-rails.netlify.app" target="_blank">
22
+ <img className={cs.logo} src={inertiaSvg} alt="Inertia logo" />
23
+ </a>
24
+ <a href="https://vite-ruby.netlify.app" target="_blank">
25
+ <img
26
+ className={`${cs.logo} ${cs.vite}`}
27
+ src={viteRubySvg}
28
+ alt="Vite Ruby logo"
29
+ />
30
+ </a>
31
+ <a href="https://react.dev" target="_blank">
32
+ <img
33
+ className={`${cs.logo} ${cs.react}`}
34
+ src={reactSvg}
35
+ alt="React logo"
36
+ />
37
+ </a>
38
+ </div>
39
+
40
+ <h2 className={cs.h2}>Inertia + Vite Ruby + React</h2>
41
+
42
+ <div className="card">
43
+ <button
44
+ className={cs.button}
45
+ onClick={() => setCount((count) => count + 1)}
46
+ >
47
+ count is {count}
48
+ </button>
49
+ <p>
50
+ Edit <code>app/frontend/pages/InertiaExample.jsx</code> and save to
51
+ test HMR
52
+ </p>
53
+ </div>
54
+ <p className={cs.readTheDocs}>
55
+ Click on the Inertia, Vite Ruby, and React logos to learn more
56
+ </p>
57
+ </div>
58
+ </>
59
+ )
60
+ }
@@ -0,0 +1,80 @@
1
+ .root {
2
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3
+ line-height: 1.5;
4
+ font-weight: 400;
5
+ color: #213547;
6
+ background-color: #ffffff;
7
+ max-width: 1280px;
8
+ margin: 0 auto;
9
+ padding: 2rem;
10
+ text-align: center;
11
+ }
12
+
13
+ .h1 {
14
+ font-size: 3.2em;
15
+ line-height: 1.1;
16
+ }
17
+
18
+ .h2 {
19
+ font-size: 2.6em;
20
+ line-height: 1.1;
21
+ }
22
+
23
+ .button {
24
+ border-radius: 8px;
25
+ border: 1px solid transparent;
26
+ padding: 0.6em 1.2em;
27
+ font-size: 1em;
28
+ font-weight: 500;
29
+ font-family: inherit;
30
+ background-color: #f9f9f9;
31
+ cursor: pointer;
32
+ transition: border-color 0.25s;
33
+ }
34
+ .button:hover {
35
+ border-color: #646cff;
36
+ }
37
+ .button:focus,
38
+ .button:focus-visible {
39
+ outline: 4px auto -webkit-focus-ring-color;
40
+ }
41
+
42
+ .logo {
43
+ display: inline-block;
44
+ height: 6em;
45
+ padding: 1.5em;
46
+ will-change: filter;
47
+ transition: filter 300ms;
48
+ }
49
+ .logo:hover {
50
+ filter: drop-shadow(0 0 2em #646cffaa);
51
+ }
52
+ .logo.vite:hover {
53
+ filter: drop-shadow(0 0 2em #e4023baa);
54
+ }
55
+ .logo.react:hover {
56
+ filter: drop-shadow(0 0 2em #61dafbaa);
57
+ }
58
+
59
+ @keyframes logo-spin {
60
+ from {
61
+ transform: rotate(0deg);
62
+ }
63
+ to {
64
+ transform: rotate(360deg);
65
+ }
66
+ }
67
+
68
+ @media (prefers-reduced-motion: no-preference) {
69
+ .logo.react {
70
+ animation: logo-spin infinite 20s linear;
71
+ }
72
+ }
73
+
74
+ .card {
75
+ padding: 2em;
76
+ }
77
+
78
+ .read-the-docs {
79
+ color: #888;
80
+ }
@@ -0,0 +1,60 @@
1
+ import { Head } from '@inertiajs/react'
2
+ import { useState } from 'react'
3
+
4
+ import inertiaSvg from '/assets/inertia.svg'
5
+ import reactSvg from '/assets/react.svg'
6
+ import viteRubySvg from '/assets/vite_ruby.svg'
7
+
8
+ import cs from './InertiaExample.module.css'
9
+
10
+ export default function InertiaExample({ name }: { name: string }) {
11
+ const [count, setCount] = useState(0)
12
+
13
+ return (
14
+ <>
15
+ <Head title="Inertia + Vite Ruby + React Example" />
16
+
17
+ <div className={cs.root}>
18
+ <h1 className={cs.h1}>Hello {name}!</h1>
19
+
20
+ <div>
21
+ <a href="https://inertia-rails.netlify.app" target="_blank">
22
+ <img className={cs.logo} src={inertiaSvg} alt="Inertia logo" />
23
+ </a>
24
+ <a href="https://vite-ruby.netlify.app" target="_blank">
25
+ <img
26
+ className={`${cs.logo} ${cs.vite}`}
27
+ src={viteRubySvg}
28
+ alt="Vite Ruby logo"
29
+ />
30
+ </a>
31
+ <a href="https://react.dev" target="_blank">
32
+ <img
33
+ className={`${cs.logo} ${cs.react}`}
34
+ src={reactSvg}
35
+ alt="React logo"
36
+ />
37
+ </a>
38
+ </div>
39
+
40
+ <h2 className={cs.h2}>Inertia + Vite Ruby + React</h2>
41
+
42
+ <div className="card">
43
+ <button
44
+ className={cs.button}
45
+ onClick={() => setCount((count) => count + 1)}
46
+ >
47
+ count is {count}
48
+ </button>
49
+ <p>
50
+ Edit <code>app/frontend/pages/InertiaExample.jsx</code> and save to
51
+ test HMR
52
+ </p>
53
+ </div>
54
+ <p className={cs.readTheDocs}>
55
+ Click on the Inertia, Vite Ruby, and React logos to learn more
56
+ </p>
57
+ </div>
58
+ </>
59
+ )
60
+ }
@@ -0,0 +1,45 @@
1
+ import { createInertiaApp } from '@inertiajs/react'
2
+ import { createElement } from 'react'
3
+ import { createRoot } from 'react-dom/client'
4
+
5
+ createInertiaApp({
6
+ // Set default page title
7
+ // see https://inertia-rails.netlify.app/guide/title-and-meta
8
+ //
9
+ // title: title => title ? `${title} - App` : 'App',
10
+
11
+ // Disable progress bar
12
+ //
13
+ // see https://inertia-rails.netlify.app/guide/progress-indicators
14
+ // progress: false,
15
+
16
+ resolve: (name) => {
17
+ const pages = import.meta.glob('../pages/**/*.jsx', {
18
+ eager: true,
19
+ })
20
+ const page = pages[`../pages/${name}.jsx`]
21
+ if (!page) {
22
+ console.error(`Missing Inertia page component: '${name}.jsx'`)
23
+ }
24
+
25
+ // To use a default layout, import the Layout component
26
+ // and use the following lines.
27
+ // see https://inertia-rails.netlify.app/guide/pages#default-layouts
28
+ //
29
+ // page.default.layout ||= (page) => createElement(Layout, null, page)
30
+
31
+ return page
32
+ },
33
+
34
+ setup({ el, App, props }) {
35
+ if (el) {
36
+ createRoot(el).render(createElement(App, props))
37
+ } else {
38
+ console.error(
39
+ 'Missing root element.\n\n' +
40
+ 'If you see this error, it probably means you load Inertia.js on non-Inertia pages.\n' +
41
+ 'Consider moving <%%= vite_javascript_tag "inertia" %> to the Inertia-specific layout instead.',
42
+ )
43
+ }
44
+ },
45
+ })
@@ -0,0 +1,51 @@
1
+ import { createInertiaApp } from '@inertiajs/react'
2
+ import { createElement, ReactNode } from 'react'
3
+ import { createRoot } from 'react-dom/client'
4
+
5
+ // Temporary type definition, until @inertiajs/react provides one
6
+ type ResolvedComponent = {
7
+ default: ReactNode
8
+ layout?: (page: ReactNode) => ReactNode
9
+ }
10
+
11
+ createInertiaApp({
12
+ // Set default page title
13
+ // see https://inertia-rails.netlify.app/guide/title-and-meta
14
+ //
15
+ // title: title => title ? `${title} - App` : 'App',
16
+
17
+ // Disable progress bar
18
+ //
19
+ // see https://inertia-rails.netlify.app/guide/progress-indicators
20
+ // progress: false,
21
+
22
+ resolve: (name) => {
23
+ const pages = import.meta.glob<ResolvedComponent>('../pages/**/*.tsx', {
24
+ eager: true,
25
+ })
26
+ const page = pages[`../pages/${name}.tsx`]
27
+ if (!page) {
28
+ console.error(`Missing Inertia page component: '${name}.tsx'`)
29
+ }
30
+
31
+ // To use a default layout, import the Layout component
32
+ // and use the following line.
33
+ // see https://inertia-rails.netlify.app/guide/pages#default-layouts
34
+ //
35
+ // page.default.layout ||= (page) => createElement(Layout, null, page)
36
+
37
+ return page
38
+ },
39
+
40
+ setup({ el, App, props }) {
41
+ if (el) {
42
+ createRoot(el).render(createElement(App, props))
43
+ } else {
44
+ console.error(
45
+ 'Missing root element.\n\n' +
46
+ 'If you see this error, it probably means you load Inertia.js on non-Inertia pages.\n' +
47
+ 'Consider moving <%%= vite_typescript_tag "inertia" %> to the Inertia-specific layout instead.',
48
+ )
49
+ }
50
+ },
51
+ })
@@ -0,0 +1,27 @@
1
+ {
2
+ "compilerOptions": {
3
+ "composite": true,
4
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
5
+ "target": "ES2020",
6
+ "useDefineForClassFields": true,
7
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
8
+ "module": "ESNext",
9
+ "skipLibCheck": true,
10
+
11
+ /* Bundler mode */
12
+ "moduleResolution": "bundler",
13
+ "allowImportingTsExtensions": true,
14
+ "resolveJsonModule": true,
15
+ "isolatedModules": true,
16
+ "moduleDetection": "force",
17
+ "noEmit": true,
18
+ "jsx": "react-jsx",
19
+
20
+ /* Linting */
21
+ "strict": true,
22
+ "noUnusedLocals": true,
23
+ "noUnusedParameters": true,
24
+ "noFallthroughCasesInSwitch": true,
25
+ },
26
+ "include": ["<%= js_destination_path %>"]
27
+ }
@@ -0,0 +1,11 @@
1
+ {
2
+ "files": [],
3
+ "references": [
4
+ {
5
+ "path": "./tsconfig.app.json"
6
+ },
7
+ {
8
+ "path": "./tsconfig.node.json"
9
+ }
10
+ ]
11
+ }
@@ -0,0 +1,13 @@
1
+ {
2
+ "compilerOptions": {
3
+ "composite": true,
4
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
5
+ "skipLibCheck": true,
6
+ "module": "ESNext",
7
+ "moduleResolution": "bundler",
8
+ "allowSyntheticDefaultImports": true,
9
+ "strict": true,
10
+ "noEmit": true
11
+ },
12
+ "include": ["vite.config.ts"]
13
+ }
@@ -0,0 +1 @@
1
+ /// <reference types="vite/client" />
@@ -0,0 +1,112 @@
1
+ <script>
2
+ import svelteSvg from '/assets/svelte.svg'
3
+ import inertiaSvg from '/assets/inertia.svg'
4
+ import viteRubySvg from '/assets/vite_ruby.svg'
5
+
6
+ let { name } = $props()
7
+
8
+ let count = $state(0)
9
+ </script>
10
+
11
+ <svelte:head>
12
+ <title>Inertia + Vite Ruby + Svelte Example</title>
13
+ </svelte:head>
14
+
15
+ <div class="inertia_example">
16
+ <h1>Hello {name}!</h1>
17
+
18
+ <div>
19
+ <a href="https://inertia-rails.netlify.app" target="_blank">
20
+ <img class="logo" src={inertiaSvg} alt="Inertia logo" />
21
+ </a>
22
+ <a href="https://vite-ruby.netlify.app" target="_blank">
23
+ <img class="logo vite" src={viteRubySvg} alt="Vite Ruby logo" />
24
+ </a>
25
+ <a href="https://svelte.dev" target="_blank">
26
+ <img class="logo svelte" src={svelteSvg} alt="Svelte logo" />
27
+ </a>
28
+ </div>
29
+
30
+ <h2>Inertia + Vite Ruby + Svelte</h2>
31
+
32
+ <div class="card">
33
+ <button onclick={() => count++}>
34
+ count is {count}
35
+ </button>
36
+ <p>
37
+ Edit <code>app/frontend/pages/InertiaExample.svelte</code> and save to test
38
+ HMR
39
+ </p>
40
+ </div>
41
+ <p class="read-the-docs">
42
+ Click on the Inertia, Vite Ruby, and Svelte logos to learn more
43
+ </p>
44
+ </div>
45
+
46
+ <style>
47
+ .inertia_example {
48
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
49
+ line-height: 1.5;
50
+ font-weight: 400;
51
+ color: #213547;
52
+ background-color: #ffffff;
53
+ max-width: 1280px;
54
+ margin: 0 auto;
55
+ padding: 2rem;
56
+ text-align: center;
57
+ }
58
+
59
+ h1 {
60
+ font-size: 3.2em;
61
+ line-height: 1.1;
62
+ }
63
+
64
+ h2 {
65
+ font-size: 2.6em;
66
+ line-height: 1.1;
67
+ }
68
+
69
+ button {
70
+ border-radius: 8px;
71
+ border: 1px solid transparent;
72
+ padding: 0.6em 1.2em;
73
+ font-size: 1em;
74
+ font-weight: 500;
75
+ font-family: inherit;
76
+ background-color: #f9f9f9;
77
+ cursor: pointer;
78
+ transition: border-color 0.25s;
79
+ }
80
+ button:hover {
81
+ border-color: #646cff;
82
+ }
83
+ button:focus,
84
+ button:focus-visible {
85
+ outline: 4px auto -webkit-focus-ring-color;
86
+ }
87
+
88
+ .logo {
89
+ display: inline-block;
90
+ height: 6em;
91
+ padding: 1.5em;
92
+ will-change: filter;
93
+ transition: filter 300ms;
94
+ }
95
+ .logo:hover {
96
+ filter: drop-shadow(0 0 2em #646cffaa);
97
+ }
98
+ .logo.vite:hover {
99
+ filter: drop-shadow(0 0 2em #e4023baa);
100
+ }
101
+ .logo.svelte:hover {
102
+ filter: drop-shadow(0 0 2em #ff3e00aa);
103
+ }
104
+
105
+ .card {
106
+ padding: 2em;
107
+ }
108
+
109
+ .read-the-docs {
110
+ color: #888;
111
+ }
112
+ </style>
@@ -0,0 +1,112 @@
1
+ <script lang="ts">
2
+ import svelteSvg from '/assets/svelte.svg'
3
+ import inertiaSvg from '/assets/inertia.svg'
4
+ import viteRubySvg from '/assets/vite_ruby.svg'
5
+
6
+ let { name }: { name: string } = $props()
7
+
8
+ let count = $state(0)
9
+ </script>
10
+
11
+ <svelte:head>
12
+ <title>Inertia + Vite Ruby + Svelte Example</title>
13
+ </svelte:head>
14
+
15
+ <div class="inertia_example">
16
+ <h1>Hello {name}!</h1>
17
+
18
+ <div>
19
+ <a href="https://inertia-rails.netlify.app" target="_blank">
20
+ <img class="logo" src={inertiaSvg} alt="Inertia logo" />
21
+ </a>
22
+ <a href="https://vite-ruby.netlify.app" target="_blank">
23
+ <img class="logo vite" src={viteRubySvg} alt="Vite Ruby logo" />
24
+ </a>
25
+ <a href="https://svelte.dev" target="_blank">
26
+ <img class="logo svelte" src={svelteSvg} alt="Svelte logo" />
27
+ </a>
28
+ </div>
29
+
30
+ <h2>Inertia + Vite Ruby + Svelte</h2>
31
+
32
+ <div class="card">
33
+ <button onclick={() => count++}>
34
+ count is {count}
35
+ </button>
36
+ <p>
37
+ Edit <code>app/frontend/pages/InertiaExample.svelte</code> and save to test
38
+ HMR
39
+ </p>
40
+ </div>
41
+ <p class="read-the-docs">
42
+ Click on the Inertia, Vite Ruby, and Svelte logos to learn more
43
+ </p>
44
+ </div>
45
+
46
+ <style>
47
+ .inertia_example {
48
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
49
+ line-height: 1.5;
50
+ font-weight: 400;
51
+ color: #213547;
52
+ background-color: #ffffff;
53
+ max-width: 1280px;
54
+ margin: 0 auto;
55
+ padding: 2rem;
56
+ text-align: center;
57
+ }
58
+
59
+ h1 {
60
+ font-size: 3.2em;
61
+ line-height: 1.1;
62
+ }
63
+
64
+ h2 {
65
+ font-size: 2.6em;
66
+ line-height: 1.1;
67
+ }
68
+
69
+ button {
70
+ border-radius: 8px;
71
+ border: 1px solid transparent;
72
+ padding: 0.6em 1.2em;
73
+ font-size: 1em;
74
+ font-weight: 500;
75
+ font-family: inherit;
76
+ background-color: #f9f9f9;
77
+ cursor: pointer;
78
+ transition: border-color 0.25s;
79
+ }
80
+ button:hover {
81
+ border-color: #646cff;
82
+ }
83
+ button:focus,
84
+ button:focus-visible {
85
+ outline: 4px auto -webkit-focus-ring-color;
86
+ }
87
+
88
+ .logo {
89
+ display: inline-block;
90
+ height: 6em;
91
+ padding: 1.5em;
92
+ will-change: filter;
93
+ transition: filter 300ms;
94
+ }
95
+ .logo:hover {
96
+ filter: drop-shadow(0 0 2em #646cffaa);
97
+ }
98
+ .logo.vite:hover {
99
+ filter: drop-shadow(0 0 2em #e4023baa);
100
+ }
101
+ .logo.svelte:hover {
102
+ filter: drop-shadow(0 0 2em #ff3e00aa);
103
+ }
104
+
105
+ .card {
106
+ padding: 2em;
107
+ }
108
+
109
+ .read-the-docs {
110
+ color: #888;
111
+ }
112
+ </style>
@@ -0,0 +1,44 @@
1
+ import { createInertiaApp } from '@inertiajs/svelte'
2
+ import { mount } from 'svelte';
3
+
4
+ createInertiaApp({
5
+ // Set default page title
6
+ // see https://inertia-rails.netlify.app/guide/title-and-meta
7
+ //
8
+ // title: title => title ? `${title} - App` : 'App',
9
+
10
+ // Disable progress bar
11
+ //
12
+ // see https://inertia-rails.netlify.app/guide/progress-indicators
13
+ // progress: false,
14
+
15
+ resolve: (name) => {
16
+ const pages = import.meta.glob('../pages/**/*.svelte', {
17
+ eager: true,
18
+ })
19
+ const page = pages[`../pages/${name}.svelte`]
20
+ if (!page) {
21
+ console.error(`Missing Inertia page component: '${name}.svelte'`)
22
+ }
23
+
24
+ // To use a default layout, import the Layout component
25
+ // and use the following line.
26
+ // see https://inertia-rails.netlify.app/guide/pages#default-layouts
27
+ //
28
+ // return { default: page.default, layout: page.layout || Layout }
29
+
30
+ return page
31
+ },
32
+
33
+ setup({ el, App, props }) {
34
+ if (el) {
35
+ mount(App, { target: el, props })
36
+ } else {
37
+ console.error(
38
+ 'Missing root element.\n\n' +
39
+ 'If you see this error, it probably means you load Inertia.js on non-Inertia pages.\n' +
40
+ 'Consider moving <%%= vite_javascript_tag "inertia" %> to the Inertia-specific layout instead.',
41
+ )
42
+ }
43
+ },
44
+ })