inertia_rails 3.12.1 → 3.14.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 (163) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +23 -0
  3. data/lib/generators/inertia/controller/templates/controller.rb.tt +1 -1
  4. data/lib/generators/inertia/install/frameworks.yml +10 -45
  5. data/lib/generators/inertia/install/install_generator.rb +102 -14
  6. data/lib/generators/inertia/install/js_package_manager.rb +6 -6
  7. data/lib/generators/inertia/install/templates/assets/rails.svg +9 -0
  8. data/lib/generators/inertia/install/templates/controller.rb +6 -3
  9. data/lib/generators/inertia/install/templates/inertia_controller.rb +5 -0
  10. data/lib/generators/inertia/install/templates/react/InertiaExample.jsx +43 -47
  11. data/lib/generators/inertia/install/templates/react/InertiaExample.module.css +63 -41
  12. data/lib/generators/inertia/install/templates/react/InertiaExample.tsx +46 -47
  13. data/lib/generators/inertia/install/templates/react/inertia.jsx +65 -0
  14. data/lib/generators/inertia/install/templates/react/inertia.tsx +65 -0
  15. data/lib/generators/inertia/install/templates/react/tsconfig.app.json +7 -0
  16. data/lib/generators/inertia/install/templates/react/types/globals.d.ts +8 -0
  17. data/lib/generators/inertia/install/templates/react/types/index.ts +8 -0
  18. data/lib/generators/inertia/install/templates/svelte/InertiaExample.svelte +103 -69
  19. data/lib/generators/inertia/install/templates/svelte/InertiaExample.ts.svelte +104 -69
  20. data/lib/generators/inertia/install/templates/svelte/inertia.js +14 -3
  21. data/lib/generators/inertia/install/templates/svelte/{inertia.ts.tt → inertia.ts} +12 -2
  22. data/lib/generators/inertia/install/templates/svelte/tsconfig.json +8 -0
  23. data/lib/generators/inertia/install/templates/svelte/types/globals.d.ts +8 -0
  24. data/lib/generators/inertia/install/templates/svelte/types/index.ts +8 -0
  25. data/lib/generators/inertia/install/templates/tailwind/application.css +3 -3
  26. data/lib/generators/inertia/install/templates/vue/InertiaExample.ts.vue +107 -70
  27. data/lib/generators/inertia/install/templates/vue/InertiaExample.vue +129 -92
  28. data/lib/generators/inertia/install/templates/vue/inertia.js +30 -3
  29. data/lib/generators/inertia/install/templates/vue/inertia.ts +31 -3
  30. data/lib/generators/inertia/install/templates/vue/tsconfig.app.json +9 -1
  31. data/lib/generators/inertia/install/templates/vue/types/globals.d.ts +8 -0
  32. data/lib/generators/inertia/install/templates/vue/types/index.ts +8 -0
  33. data/lib/generators/inertia/scaffold_controller/scaffold_controller_generator.rb +4 -0
  34. data/lib/generators/inertia/scaffold_controller/templates/controller.rb.tt +7 -5
  35. data/lib/generators/inertia_templates/scaffold/templates/react/{Edit.jsx.tt → edit.jsx.tt} +5 -8
  36. data/lib/generators/inertia_templates/scaffold/templates/react/{Edit.tsx.tt → edit.tsx.tt} +7 -9
  37. data/lib/generators/inertia_templates/scaffold/templates/react/form.jsx.tt +94 -0
  38. data/lib/generators/inertia_templates/scaffold/templates/react/form.tsx.tt +109 -0
  39. data/lib/generators/inertia_templates/scaffold/templates/react/{Index.jsx.tt → index.jsx.tt} +1 -1
  40. data/lib/generators/inertia_templates/scaffold/templates/react/{Index.tsx.tt → index.tsx.tt} +1 -1
  41. data/lib/generators/inertia_templates/scaffold/templates/react/{New.jsx.tt → new.jsx.tt} +3 -5
  42. data/lib/generators/inertia_templates/scaffold/templates/react/{New.tsx.tt → new.tsx.tt} +5 -6
  43. data/lib/generators/inertia_templates/scaffold/templates/react/{Show.jsx.tt → show.jsx.tt} +1 -1
  44. data/lib/generators/inertia_templates/scaffold/templates/react/{Show.tsx.tt → show.tsx.tt} +1 -1
  45. data/lib/generators/inertia_templates/scaffold/templates/svelte/{Edit.svelte.tt → edit.svelte.tt} +9 -13
  46. data/lib/generators/inertia_templates/scaffold/templates/{svelte4/Edit.svelte.tt → svelte/edit.ts.svelte.tt} +11 -15
  47. data/lib/generators/inertia_templates/scaffold/templates/svelte/form.svelte.tt +96 -0
  48. data/lib/generators/inertia_templates/scaffold/templates/svelte/form.ts.svelte.tt +103 -0
  49. data/lib/generators/inertia_templates/scaffold/templates/svelte/{Index.svelte.tt → index.svelte.tt} +1 -1
  50. data/lib/generators/inertia_templates/scaffold/templates/svelte/{Index.ts.svelte.tt → index.ts.svelte.tt} +1 -1
  51. data/lib/generators/inertia_templates/scaffold/templates/svelte/{New.svelte.tt → new.svelte.tt} +4 -7
  52. data/lib/generators/inertia_templates/scaffold/templates/{svelte4/New.svelte.tt → svelte/new.ts.svelte.tt} +6 -9
  53. data/lib/generators/inertia_templates/scaffold/templates/svelte/{Show.svelte.tt → show.svelte.tt} +1 -1
  54. data/lib/generators/inertia_templates/scaffold/templates/svelte/{Show.ts.svelte.tt → show.ts.svelte.tt} +1 -1
  55. data/lib/generators/inertia_templates/scaffold/templates/vue/{Edit.ts.vue.tt → edit.ts.vue.tt} +11 -15
  56. data/lib/generators/inertia_templates/scaffold/templates/vue/{Edit.vue.tt → edit.vue.tt} +9 -13
  57. data/lib/generators/inertia_templates/scaffold/templates/vue/form.ts.vue.tt +102 -0
  58. data/lib/generators/inertia_templates/scaffold/templates/vue/form.vue.tt +98 -0
  59. data/lib/generators/inertia_templates/scaffold/templates/vue/{Index.ts.vue.tt → index.ts.vue.tt} +1 -1
  60. data/lib/generators/inertia_templates/scaffold/templates/vue/{Index.vue.tt → index.vue.tt} +1 -1
  61. data/lib/generators/inertia_templates/scaffold/templates/vue/{New.ts.vue.tt → new.ts.vue.tt} +6 -9
  62. data/lib/generators/inertia_templates/scaffold/templates/vue/{New.vue.tt → new.vue.tt} +4 -7
  63. data/lib/generators/inertia_templates/scaffold/templates/vue/{Show.ts.vue.tt → show.ts.vue.tt} +1 -1
  64. data/lib/generators/inertia_templates/scaffold/templates/vue/{Show.vue.tt → show.vue.tt} +1 -1
  65. data/lib/generators/inertia_tw_templates/scaffold/templates/react/{Edit.jsx.tt → edit.jsx.tt} +5 -8
  66. data/lib/generators/inertia_tw_templates/scaffold/templates/react/{Edit.tsx.tt → edit.tsx.tt} +6 -9
  67. data/lib/generators/inertia_tw_templates/scaffold/templates/react/form.jsx.tt +106 -0
  68. data/lib/generators/inertia_tw_templates/scaffold/templates/react/form.tsx.tt +122 -0
  69. data/lib/generators/inertia_tw_templates/scaffold/templates/react/{Index.jsx.tt → index.jsx.tt} +1 -1
  70. data/lib/generators/inertia_tw_templates/scaffold/templates/react/{Index.tsx.tt → index.tsx.tt} +1 -1
  71. data/lib/generators/inertia_tw_templates/scaffold/templates/react/{New.jsx.tt → new.jsx.tt} +3 -5
  72. data/lib/generators/inertia_tw_templates/scaffold/templates/react/{New.tsx.tt → new.tsx.tt} +4 -6
  73. data/lib/generators/inertia_tw_templates/scaffold/templates/react/{Show.jsx.tt → show.jsx.tt} +1 -1
  74. data/lib/generators/inertia_tw_templates/scaffold/templates/react/{Show.tsx.tt → show.tsx.tt} +1 -1
  75. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/{Edit.svelte.tt → edit.svelte.tt} +9 -13
  76. data/lib/generators/inertia_tw_templates/scaffold/templates/{svelte4/Edit.svelte.tt → svelte/edit.ts.svelte.tt} +11 -15
  77. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/form.svelte.tt +109 -0
  78. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/form.ts.svelte.tt +115 -0
  79. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/{Index.svelte.tt → index.svelte.tt} +1 -1
  80. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/{Index.ts.svelte.tt → index.ts.svelte.tt} +1 -1
  81. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/{New.svelte.tt → new.svelte.tt} +4 -7
  82. data/lib/generators/inertia_tw_templates/scaffold/templates/{svelte4/New.svelte.tt → svelte/new.ts.svelte.tt} +6 -9
  83. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/{Show.svelte.tt → show.svelte.tt} +1 -1
  84. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/{Show.ts.svelte.tt → show.ts.svelte.tt} +1 -1
  85. data/lib/generators/inertia_tw_templates/scaffold/templates/vue/{Edit.ts.vue.tt → edit.ts.vue.tt} +10 -15
  86. data/lib/generators/inertia_tw_templates/scaffold/templates/vue/{Edit.vue.tt → edit.vue.tt} +8 -13
  87. data/lib/generators/inertia_tw_templates/scaffold/templates/vue/{Form.ts.vue.tt → form.ts.vue.tt} +19 -42
  88. data/lib/generators/inertia_tw_templates/scaffold/templates/vue/{Form.vue.tt → form.vue.tt} +18 -38
  89. data/lib/generators/inertia_tw_templates/scaffold/templates/vue/{Index.ts.vue.tt → index.ts.vue.tt} +1 -1
  90. data/lib/generators/inertia_tw_templates/scaffold/templates/vue/{Index.vue.tt → index.vue.tt} +1 -1
  91. data/lib/generators/inertia_tw_templates/scaffold/templates/vue/{New.ts.vue.tt → new.ts.vue.tt} +6 -9
  92. data/lib/generators/inertia_tw_templates/scaffold/templates/vue/{New.vue.tt → new.vue.tt} +4 -7
  93. data/lib/generators/inertia_tw_templates/scaffold/templates/vue/{Show.ts.vue.tt → show.ts.vue.tt} +1 -1
  94. data/lib/generators/inertia_tw_templates/scaffold/templates/vue/{Show.vue.tt → show.vue.tt} +1 -1
  95. data/lib/inertia_rails/generators/controller_template_base.rb +1 -1
  96. data/lib/inertia_rails/generators/helper.rb +2 -3
  97. data/lib/inertia_rails/generators/scaffold_template_base.rb +3 -3
  98. data/lib/inertia_rails/version.rb +1 -1
  99. data/lib/inertia_rails.rb +1 -0
  100. metadata +88 -116
  101. data/lib/generators/inertia/install/templates/react/inertia.js +0 -45
  102. data/lib/generators/inertia/install/templates/react/inertia.ts +0 -51
  103. data/lib/generators/inertia/install/templates/svelte4/InertiaExample.svelte +0 -116
  104. data/lib/generators/inertia/install/templates/svelte4/InertiaExample.ts.svelte +0 -116
  105. data/lib/generators/inertia/install/templates/svelte4/inertia.js +0 -43
  106. data/lib/generators/inertia/install/templates/svelte4/inertia.ts.tt +0 -44
  107. data/lib/generators/inertia/install/templates/svelte4/svelte.config.js +0 -7
  108. data/lib/generators/inertia/install/templates/svelte4/tsconfig.json +0 -21
  109. data/lib/generators/inertia/install/templates/svelte4/tsconfig.node.json +0 -12
  110. data/lib/generators/inertia/install/templates/svelte4/vite-env.d.ts +0 -2
  111. data/lib/generators/inertia_templates/controller/templates/svelte4/view.svelte.tt +0 -2
  112. data/lib/generators/inertia_templates/scaffold/templates/react/Form.jsx.tt +0 -111
  113. data/lib/generators/inertia_templates/scaffold/templates/react/Form.tsx.tt +0 -130
  114. data/lib/generators/inertia_templates/scaffold/templates/svelte/Edit.ts.svelte.tt +0 -37
  115. data/lib/generators/inertia_templates/scaffold/templates/svelte/Form.svelte.tt +0 -97
  116. data/lib/generators/inertia_templates/scaffold/templates/svelte/Form.ts.svelte.tt +0 -102
  117. data/lib/generators/inertia_templates/scaffold/templates/svelte/New.ts.svelte.tt +0 -30
  118. data/lib/generators/inertia_templates/scaffold/templates/svelte4/Edit.ts.svelte.tt +0 -38
  119. data/lib/generators/inertia_templates/scaffold/templates/svelte4/Form.svelte.tt +0 -96
  120. data/lib/generators/inertia_templates/scaffold/templates/svelte4/Form.ts.svelte.tt +0 -106
  121. data/lib/generators/inertia_templates/scaffold/templates/svelte4/Index.svelte.tt +0 -36
  122. data/lib/generators/inertia_templates/scaffold/templates/svelte4/Index.ts.svelte.tt +0 -37
  123. data/lib/generators/inertia_templates/scaffold/templates/svelte4/New.ts.svelte.tt +0 -31
  124. data/lib/generators/inertia_templates/scaffold/templates/svelte4/One.svelte.tt +0 -28
  125. data/lib/generators/inertia_templates/scaffold/templates/svelte4/One.ts.svelte.tt +0 -30
  126. data/lib/generators/inertia_templates/scaffold/templates/svelte4/Show.svelte.tt +0 -39
  127. data/lib/generators/inertia_templates/scaffold/templates/svelte4/Show.ts.svelte.tt +0 -40
  128. data/lib/generators/inertia_templates/scaffold/templates/svelte4/types.ts.tt +0 -19
  129. data/lib/generators/inertia_templates/scaffold/templates/vue/Form.ts.vue.tt +0 -101
  130. data/lib/generators/inertia_templates/scaffold/templates/vue/Form.vue.tt +0 -94
  131. data/lib/generators/inertia_tw_templates/controller/templates/svelte4/view.svelte.tt +0 -2
  132. data/lib/generators/inertia_tw_templates/scaffold/templates/react/Form.jsx.tt +0 -122
  133. data/lib/generators/inertia_tw_templates/scaffold/templates/react/Form.tsx.tt +0 -142
  134. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/Edit.ts.svelte.tt +0 -45
  135. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/Form.svelte.tt +0 -118
  136. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/Form.ts.svelte.tt +0 -123
  137. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/New.ts.svelte.tt +0 -33
  138. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/Edit.ts.svelte.tt +0 -46
  139. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/Form.svelte.tt +0 -120
  140. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/Form.ts.svelte.tt +0 -130
  141. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/Index.svelte.tt +0 -43
  142. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/Index.ts.svelte.tt +0 -44
  143. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/New.ts.svelte.tt +0 -34
  144. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/One.svelte.tt +0 -28
  145. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/One.ts.svelte.tt +0 -30
  146. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/Show.svelte.tt +0 -51
  147. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/Show.ts.svelte.tt +0 -52
  148. data/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/types.ts.tt +0 -19
  149. /data/lib/generators/inertia/install/templates/react/{vite-env.d.ts → types/vite-env.d.ts} +0 -0
  150. /data/lib/generators/inertia/install/templates/svelte/{vite-env.d.ts → types/vite-env.d.ts} +0 -0
  151. /data/lib/generators/inertia/install/templates/vue/{vite-env.d.ts → types/vite-env.d.ts} +0 -0
  152. /data/lib/generators/inertia_templates/scaffold/templates/react/{One.jsx.tt → one.jsx.tt} +0 -0
  153. /data/lib/generators/inertia_templates/scaffold/templates/react/{One.tsx.tt → one.tsx.tt} +0 -0
  154. /data/lib/generators/inertia_templates/scaffold/templates/svelte/{One.svelte.tt → one.svelte.tt} +0 -0
  155. /data/lib/generators/inertia_templates/scaffold/templates/svelte/{One.ts.svelte.tt → one.ts.svelte.tt} +0 -0
  156. /data/lib/generators/inertia_templates/scaffold/templates/vue/{One.ts.vue.tt → one.ts.vue.tt} +0 -0
  157. /data/lib/generators/inertia_templates/scaffold/templates/vue/{One.vue.tt → one.vue.tt} +0 -0
  158. /data/lib/generators/inertia_tw_templates/scaffold/templates/react/{One.jsx.tt → one.jsx.tt} +0 -0
  159. /data/lib/generators/inertia_tw_templates/scaffold/templates/react/{One.tsx.tt → one.tsx.tt} +0 -0
  160. /data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/{One.svelte.tt → one.svelte.tt} +0 -0
  161. /data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/{One.ts.svelte.tt → one.ts.svelte.tt} +0 -0
  162. /data/lib/generators/inertia_tw_templates/scaffold/templates/vue/{One.ts.vue.tt → one.ts.vue.tt} +0 -0
  163. /data/lib/generators/inertia_tw_templates/scaffold/templates/vue/{One.vue.tt → one.vue.tt} +0 -0
@@ -1,51 +0,0 @@
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.dev/guide/title-and-meta
14
- //
15
- // title: title => title ? `${title} - App` : 'App',
16
-
17
- // Disable progress bar
18
- //
19
- // see https://inertia-rails.dev/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.dev/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
- })
@@ -1,116 +0,0 @@
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
- export let name
7
-
8
- let count = 0
9
-
10
- function handleClick() {
11
- count += 1
12
- }
13
- </script>
14
-
15
- <svelte:head>
16
- <title>Inertia + Vite Ruby + Svelte Example</title>
17
- </svelte:head>
18
-
19
- <div class="inertia_example">
20
- <h1>Hello {name}!</h1>
21
-
22
- <div>
23
- <a href="https://inertia-rails.dev/" target="_blank">
24
- <img class="logo" src={inertiaSvg} alt="Inertia logo" />
25
- </a>
26
- <a href="https://vite-ruby.netlify.app" target="_blank">
27
- <img class="logo vite" src={viteRubySvg} alt="Vite Ruby logo" />
28
- </a>
29
- <a href="https://svelte.dev" target="_blank">
30
- <img class="logo svelte" src={svelteSvg} alt="Svelte logo" />
31
- </a>
32
- </div>
33
-
34
- <h2>Inertia + Vite Ruby + Svelte</h2>
35
-
36
- <div class="card">
37
- <button on:click={handleClick}>
38
- count is {count}
39
- </button>
40
- <p>
41
- Edit <code>app/frontend/pages/InertiaExample.svelte</code> and save to test
42
- HMR
43
- </p>
44
- </div>
45
- <p class="read-the-docs">
46
- Click on the Inertia, Vite Ruby, and Svelte logos to learn more
47
- </p>
48
- </div>
49
-
50
- <style>
51
- .inertia_example {
52
- font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
53
- line-height: 1.5;
54
- font-weight: 400;
55
- color: #213547;
56
- background-color: #ffffff;
57
- max-width: 1280px;
58
- margin: 0 auto;
59
- padding: 2rem;
60
- text-align: center;
61
- }
62
-
63
- h1 {
64
- font-size: 3.2em;
65
- line-height: 1.1;
66
- }
67
-
68
- h2 {
69
- font-size: 2.6em;
70
- line-height: 1.1;
71
- }
72
-
73
- button {
74
- border-radius: 8px;
75
- border: 1px solid transparent;
76
- padding: 0.6em 1.2em;
77
- font-size: 1em;
78
- font-weight: 500;
79
- font-family: inherit;
80
- background-color: #f9f9f9;
81
- cursor: pointer;
82
- transition: border-color 0.25s;
83
- }
84
- button:hover {
85
- border-color: #646cff;
86
- }
87
- button:focus,
88
- button:focus-visible {
89
- outline: 4px auto -webkit-focus-ring-color;
90
- }
91
-
92
- .logo {
93
- display: inline-block;
94
- height: 6em;
95
- padding: 1.5em;
96
- will-change: filter;
97
- transition: filter 300ms;
98
- }
99
- .logo:hover {
100
- filter: drop-shadow(0 0 2em #646cffaa);
101
- }
102
- .logo.vite:hover {
103
- filter: drop-shadow(0 0 2em #e4023baa);
104
- }
105
- .logo.svelte:hover {
106
- filter: drop-shadow(0 0 2em #ff3e00aa);
107
- }
108
-
109
- .card {
110
- padding: 2em;
111
- }
112
-
113
- .read-the-docs {
114
- color: #888;
115
- }
116
- </style>
@@ -1,116 +0,0 @@
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
- export let name: string
7
-
8
- let count = 0
9
-
10
- function handleClick() {
11
- count += 1
12
- }
13
- </script>
14
-
15
- <svelte:head>
16
- <title>Inertia + Vite Ruby + Svelte Example</title>
17
- </svelte:head>
18
-
19
- <div class="inertia_example">
20
- <h1>Hello {name}!</h1>
21
-
22
- <div>
23
- <a href="https://inertia-rails.dev" target="_blank">
24
- <img class="logo" src={inertiaSvg} alt="Inertia logo" />
25
- </a>
26
- <a href="https://vite-ruby.netlify.app" target="_blank">
27
- <img class="logo vite" src={viteRubySvg} alt="Vite Ruby logo" />
28
- </a>
29
- <a href="https://svelte.dev" target="_blank">
30
- <img class="logo svelte" src={svelteSvg} alt="Svelte logo" />
31
- </a>
32
- </div>
33
-
34
- <h2>Inertia + Vite Ruby + Svelte</h2>
35
-
36
- <div class="card">
37
- <button on:click={handleClick}>
38
- count is {count}
39
- </button>
40
- <p>
41
- Edit <code>app/frontend/pages/InertiaExample.svelte</code> and save to test
42
- HMR
43
- </p>
44
- </div>
45
- <p class="read-the-docs">
46
- Click on the Inertia, Vite Ruby, and Svelte logos to learn more
47
- </p>
48
- </div>
49
-
50
- <style>
51
- .inertia_example {
52
- font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
53
- line-height: 1.5;
54
- font-weight: 400;
55
- color: #213547;
56
- background-color: #ffffff;
57
- max-width: 1280px;
58
- margin: 0 auto;
59
- padding: 2rem;
60
- text-align: center;
61
- }
62
-
63
- h1 {
64
- font-size: 3.2em;
65
- line-height: 1.1;
66
- }
67
-
68
- h2 {
69
- font-size: 2.6em;
70
- line-height: 1.1;
71
- }
72
-
73
- button {
74
- border-radius: 8px;
75
- border: 1px solid transparent;
76
- padding: 0.6em 1.2em;
77
- font-size: 1em;
78
- font-weight: 500;
79
- font-family: inherit;
80
- background-color: #f9f9f9;
81
- cursor: pointer;
82
- transition: border-color 0.25s;
83
- }
84
- button:hover {
85
- border-color: #646cff;
86
- }
87
- button:focus,
88
- button:focus-visible {
89
- outline: 4px auto -webkit-focus-ring-color;
90
- }
91
-
92
- .logo {
93
- display: inline-block;
94
- height: 6em;
95
- padding: 1.5em;
96
- will-change: filter;
97
- transition: filter 300ms;
98
- }
99
- .logo:hover {
100
- filter: drop-shadow(0 0 2em #646cffaa);
101
- }
102
- .logo.vite:hover {
103
- filter: drop-shadow(0 0 2em #e4023baa);
104
- }
105
- .logo.svelte:hover {
106
- filter: drop-shadow(0 0 2em #ff3e00aa);
107
- }
108
-
109
- .card {
110
- padding: 2em;
111
- }
112
-
113
- .read-the-docs {
114
- color: #888;
115
- }
116
- </style>
@@ -1,43 +0,0 @@
1
- import { createInertiaApp } from '@inertiajs/svelte'
2
-
3
- createInertiaApp({
4
- // Set default page title
5
- // see https://inertia-rails.dev/guide/title-and-meta
6
- //
7
- // title: title => title ? `${title} - App` : 'App',
8
-
9
- // Disable progress bar
10
- //
11
- // see https://inertia-rails.dev/guide/progress-indicators
12
- // progress: false,
13
-
14
- resolve: (name) => {
15
- const pages = import.meta.glob('../pages/**/*.svelte', {
16
- eager: true,
17
- })
18
- const page = pages[`../pages/${name}.svelte`]
19
- if (!page) {
20
- console.error(`Missing Inertia page component: '${name}.svelte'`)
21
- }
22
-
23
- // To use a default layout, import the Layout component
24
- // and use the following lines.
25
- // see https://inertia-rails.dev/guide/pages#default-layouts
26
- //
27
- // return { default: page.default, layout: page.layout || Layout }
28
-
29
- return page
30
- },
31
-
32
- setup({ el, App, props }) {
33
- if (el) {
34
- new App({ target: el, props })
35
- } else {
36
- console.error(
37
- 'Missing root element.\n\n' +
38
- 'If you see this error, it probably means you load Inertia.js on non-Inertia pages.\n' +
39
- 'Consider moving <%%= vite_javascript_tag "inertia" %> to the Inertia-specific layout instead.',
40
- )
41
- }
42
- },
43
- })
@@ -1,44 +0,0 @@
1
- import { createInertiaApp, type ResolvedComponent } from '@inertiajs/svelte'
2
-
3
- createInertiaApp({
4
- // Set default page title
5
- // see https://inertia-rails.dev/guide/title-and-meta
6
- //
7
- // title: title => title ? `${title} - App` : 'App',
8
-
9
- // Disable progress bar
10
- //
11
- // see https://inertia-rails.dev/guide/progress-indicators
12
- // progress: false,
13
-
14
- resolve: (name) => {
15
- const pages = import.meta.glob<ResolvedComponent>('../pages/**/*.svelte', {
16
- eager: true,
17
- })
18
- const page = pages[`../pages/${name}.svelte`]
19
- if (!page) {
20
- console.error(`Missing Inertia page component: '${name}.svelte'`)
21
- }
22
-
23
- // To use a default layout, import the Layout component
24
- // and use the following line.
25
- // see https://inertia-rails.dev/guide/pages#default-layouts
26
- //
27
- // return { default: page.default, layout: page.layout || Layout }
28
-
29
- return page
30
- },
31
-
32
- setup({ el, App, props }) {
33
- if (el) {
34
- <%= "// @ts-expect-error 1.3.0 beta contains types mismatch\n" if inertia_resolved_version.release == Gem::Version.new('1.3.0') -%>
35
- new 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
- })
@@ -1,7 +0,0 @@
1
- import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
2
-
3
- export default {
4
- // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
5
- // for more information about preprocessors
6
- preprocess: vitePreprocess(),
7
- }
@@ -1,21 +0,0 @@
1
- {
2
- "extends": "@tsconfig/svelte/tsconfig.json",
3
- "compilerOptions": {
4
- "target": "ESNext",
5
- "useDefineForClassFields": true,
6
- "module": "ESNext",
7
- "resolveJsonModule": true,
8
- /**
9
- * Typecheck JS in `.svelte` and `.js` files by default.
10
- * Disable checkJs if you'd like to use dynamic types in JS.
11
- * Note that setting allowJs false does not prevent the use
12
- * of JS in `.svelte` files.
13
- */
14
- "allowJs": true,
15
- "checkJs": true,
16
- "isolatedModules": true,
17
- "moduleDetection": "force",
18
- },
19
- "include": ["<%= js_destination_path %>/**/*.ts", "<%= js_destination_path %>/**/*.js", "<%= js_destination_path %>/**/*.svelte"],
20
- "references": [{ "path": "./tsconfig.node.json" }]
21
- }
@@ -1,12 +0,0 @@
1
- {
2
- "compilerOptions": {
3
- "composite": true,
4
- "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
5
- "skipLibCheck": true,
6
- "module": "ESNext",
7
- "moduleResolution": "bundler",
8
- "strict": true,
9
- "noEmit": true,
10
- },
11
- "include": ["vite.config.ts"]
12
- }
@@ -1,2 +0,0 @@
1
- /// <reference types="svelte" />
2
- /// <reference types="vite/client" />
@@ -1,2 +0,0 @@
1
- <h1><%= class_name %>#<%= @action %></h1>
2
- <p>Find me in <%= @path %></p>
@@ -1,111 +0,0 @@
1
- import { useForm } from '@inertiajs/react'
2
-
3
- export default function Form({ <%= singular_table_name %>, onSubmit, submitText }) {
4
- const form = useForm({
5
- <% attributes.each do |attribute| -%>
6
- <% if attribute.password_digest? -%>
7
- password: '',
8
- password_confirmation: '',
9
- <% else -%>
10
- <%= attribute.column_name %>: <%= singular_table_name %>.<%= attribute.column_name %> || <%= default_value(attribute) %>,
11
- <% end -%>
12
- <% end -%>
13
- })
14
- const { data, setData, errors, processing } = form
15
-
16
- const handleSubmit = (e) => {
17
- e.preventDefault()
18
- onSubmit(form)
19
- }
20
-
21
- return (
22
- <form onSubmit={handleSubmit}>
23
- <% attributes.each do |attribute| -%>
24
- <% if attribute.password_digest? -%>
25
- <div>
26
- <label style={{ display: 'block' }} htmlFor="password">
27
- Password
28
- </label>
29
- <input
30
- type="password"
31
- name="password"
32
- id="password"
33
- onChange={(e) => setData('password', e.target.value)}
34
- />
35
- {errors.password && (
36
- <div style={{ color: 'red' }}>{errors.password.join(', ')}</div>
37
- )}
38
- </div>
39
-
40
- <div>
41
- <label style={{ display: 'block' }} htmlFor="password_confirmation">
42
- Password confirmation
43
- </label>
44
- <input
45
- type="password"
46
- name="password_confirmation"
47
- id="password_confirmation"
48
- onChange={(e) => setData('password_confirmation', e.target.value)}
49
- />
50
- {errors.password_confirmation && (
51
- <div style={{ color: 'red' }}>{errors.password_confirmation.join(', ')}</div>
52
- )}
53
- </div>
54
- <% else -%>
55
- <div>
56
- <label style={{ display: 'block' }} htmlFor="<%= attribute.singular_name %>">
57
- <%= attribute.human_name %>
58
- </label>
59
- <% if input_type(attribute) == "text_area" -%>
60
- <textarea
61
- name="<%= attribute.singular_name %>"
62
- id="<%= attribute.singular_name %>"
63
- value={data.<%= attribute.column_name %>}
64
- onChange={(e) => setData('<%= attribute.column_name %>', e.target.value)}
65
- />
66
- <% elsif attribute.attachment? -%>
67
- <input
68
- type="file"
69
- name="<%= attribute.singular_name %>"
70
- id="<%= attribute.singular_name %>"
71
- onChange={(e) => setData('<%= attribute.column_name %>', e.target.files[0])}
72
- />
73
- <% elsif attribute.attachments? -%>
74
- <input
75
- type="file"
76
- multiple
77
- name="<%= attribute.singular_name %>[]"
78
- id="<%= attribute.singular_name %>"
79
- onChange={(e) => setData('<%= attribute.column_name %>', Array.from(e.target.files))}
80
- />
81
- <% elsif input_type(attribute) == "checkbox" -%>
82
- <input
83
- type="<%= input_type(attribute) %>"
84
- name="<%= attribute.singular_name %>"
85
- id="<%= attribute.singular_name %>"
86
- checked={data.<%= attribute.column_name %>}
87
- onChange={(e) => setData('<%= attribute.column_name %>', e.target.checked)}
88
- />
89
- <% else -%>
90
- <input
91
- type="<%= input_type(attribute) %>"
92
- name="<%= attribute.singular_name %>"
93
- id="<%= attribute.singular_name %>"
94
- value={data.<%= attribute.column_name %>}
95
- onChange={(e) => setData('<%= attribute.column_name %>', e.target.value)}
96
- />
97
- <% end -%>
98
- {errors.<%= attribute.column_name %> && (
99
- <div style={{ color: 'red' }}>{errors.<%= attribute.column_name %>.join(', ')}</div>
100
- )}
101
- </div>
102
- <% end -%>
103
- <% end -%>
104
- <div>
105
- <button type="submit" disabled={processing}>
106
- {submitText}
107
- </button>
108
- </div>
109
- </form>
110
- )
111
- }
@@ -1,130 +0,0 @@
1
- import { useForm <%= ', InertiaFormProps ' if inertia_js_version.release == Gem::Version.new('1.3.0') %>} from '@inertiajs/react'
2
- import { FormEvent } from 'react'
3
- import { <%= inertia_model_form_type %>, <%= inertia_model_type %> } from './types'
4
- <% if inertia_js_version.release != Gem::Version.new('1.3.0') %>
5
- // Temporary fix for InertiaFormProps not being exported from @inertiajs/react
6
- type InertiaFormProps<TForm extends Record<string, any>> = ReturnType<typeof useForm<TForm>>
7
- <% end %>
8
- interface FormProps {
9
- <%= singular_table_name %>: <%= inertia_model_type %>
10
- onSubmit: (form: InertiaFormProps<<%= inertia_model_form_type %>>) => void
11
- submitText: string
12
- }
13
-
14
- export default function Form({ <%= singular_table_name %>, onSubmit, submitText }: FormProps) {
15
- const form = useForm<<%= inertia_model_form_type %>>({
16
- <% attributes.reject { |a| a.attachment? || a.attachments? }.each do |attribute| -%>
17
- <% if attribute.password_digest? -%>
18
- password: '',
19
- password_confirmation: '',
20
- <% else -%>
21
- <%= attribute.column_name %>: <%= singular_table_name %>.<%= attribute.column_name %>,
22
- <% end -%>
23
- <% end -%>
24
- })
25
- const { data, setData, errors, processing } = form
26
-
27
- const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
28
- e.preventDefault()
29
- onSubmit(form)
30
- }
31
-
32
- return (
33
- <form onSubmit={handleSubmit}>
34
- <% attributes.each do |attribute| -%>
35
- <% if attribute.password_digest? -%>
36
- <div>
37
- <label style={{ display: 'block' }} htmlFor="password">
38
- Password
39
- </label>
40
- <input
41
- type="password"
42
- name="password"
43
- id="password"
44
- onChange={(e) => setData('password', e.target.value)}
45
- />
46
- {errors.password && (
47
- <div style={{ color: 'red' }}>{errors.password}</div>
48
- )}
49
- </div>
50
-
51
- <div>
52
- <label style={{ display: 'block' }} htmlFor="password_confirmation">
53
- Password confirmation
54
- </label>
55
- <input
56
- type="password"
57
- name="password_confirmation"
58
- id="password_confirmation"
59
- onChange={(e) => setData('password_confirmation', e.target.value)}
60
- />
61
- {errors.password_confirmation && (
62
- <div style={{ color: 'red' }}>{errors.password_confirmation}</div>
63
- )}
64
- </div>
65
- <% else -%>
66
- <div>
67
- <label style={{ display: 'block' }} htmlFor="<%= attribute.singular_name %>">
68
- <%= attribute.human_name %>
69
- </label>
70
- <% if input_type(attribute) == "text_area" -%>
71
- <textarea
72
- name="<%= attribute.singular_name %>"
73
- id="<%= attribute.singular_name %>"
74
- value={data.<%= attribute.column_name %>}
75
- onChange={(e) => setData('<%= attribute.column_name %>', e.target.value)}
76
- />
77
- <% elsif attribute.attachment? -%>
78
- <input
79
- type="file"
80
- name="<%= attribute.singular_name %>"
81
- id="<%= attribute.singular_name %>"
82
- onChange={(e) => setData('<%= attribute.column_name %>', (e.target.files || [])[0])}
83
- />
84
- <% elsif attribute.attachments? -%>
85
- <input
86
- type="file"
87
- multiple
88
- name="<%= attribute.singular_name %>[]"
89
- id="<%= attribute.singular_name %>"
90
- onChange={(e) => setData('<%= attribute.column_name %>', Array.from(e.target.files || []))}
91
- />
92
- <% elsif input_type(attribute) == "checkbox" -%>
93
- <input
94
- type="<%= input_type(attribute) %>"
95
- name="<%= attribute.singular_name %>"
96
- id="<%= attribute.singular_name %>"
97
- checked={data.<%= attribute.column_name %>}
98
- onChange={(e) => setData('<%= attribute.column_name %>', e.target.checked)}
99
- />
100
- <% elsif input_type(attribute) == "number" -%>
101
- <input
102
- type="<%= input_type(attribute) %>"
103
- name="<%= attribute.singular_name %>"
104
- id="<%= attribute.singular_name %>"
105
- value={data.<%= attribute.column_name %>}
106
- onChange={(e) => setData('<%= attribute.column_name %>', parseInt(e.target.value))}
107
- />
108
- <% else -%>
109
- <input
110
- type="<%= input_type(attribute) %>"
111
- name="<%= attribute.singular_name %>"
112
- id="<%= attribute.singular_name %>"
113
- value={data.<%= attribute.column_name %>}
114
- onChange={(e) => setData('<%= attribute.column_name %>', e.target.value)}
115
- />
116
- <% end -%>
117
- {errors.<%= attribute.column_name %> && (
118
- <div style={{ color: 'red' }}>{errors.<%= attribute.column_name %>}</div>
119
- )}
120
- </div>
121
- <% end -%>
122
- <% end -%>
123
- <div>
124
- <button type="submit" disabled={processing}>
125
- {submitText}
126
- </button>
127
- </div>
128
- </form>
129
- )
130
- }