inertia_rails 3.12.1 → 3.13.0

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

@@ -16,15 +16,18 @@ createInertiaApp({
     const pages = import.meta.glob('../pages/**/*.vue', {
       eager: true,
     })
-    return pages[`../pages/${name}.vue`]
+    const page = pages[`../pages/${name}.vue`]
+    if (!page) {
+      console.error(`Missing Inertia page component: '${name}.vue'`)
+    }
 
     // To use a default layout, import the Layout component
     // and use the following lines.
     // see https://inertia-rails.dev/guide/pages#default-layouts
     //
-    // const page = pages[`../pages/${name}.vue`]
     // page.default.layout = page.default.layout || Layout
-    // return page
+
+    return page
   },
 
   setup({ el, App, props, plugin }) {
@@ -32,4 +35,28 @@ createInertiaApp({
       .use(plugin)
       .mount(el)
   },
+
+  defaults: {
+    future: {
+      useDataInertiaHeadAttribute: true,
+      useDialogForErrorModal: true,
+      preserveEqualProps: true,
+    },
+    visitOptions: () => {
+      return { queryStringArrayFormat: "brackets" }
+    },
+  },
+}).catch((error) => {
+  // This ensures this entrypoint is only loaded on Inertia pages
+  // by checking for the presence of the root element (#app by default).
+  // Feel free to remove this `catch` if you don't need it.
+  if (document.getElementById("app")) {
+    throw error
+  } else {
+    console.error(
+      "Missing root element.\n\n" +
+      "If you see this error, it probably means you loaded Inertia.js on non-Inertia pages.\n" +
+      'Consider moving <%= vite_javascript_tag "inertia" %> to the Inertia-specific layout instead.',
+    )
+  }
 })

data/lib/generators/inertia/install/templates/vue/inertia.ts

@@ -16,15 +16,18 @@ createInertiaApp({
     const pages = import.meta.glob<DefineComponent>('../pages/**/*.vue', {
       eager: true,
     })
-    return pages[`../pages/${name}.vue`]
+    const page = pages[`../pages/${name}.vue`]
+    if (!page) {
+      console.error(`Missing Inertia page component: '${name}.vue'`)
+    }
 
     // To use a default layout, import the Layout component
     // and use the following lines.
     // see https://inertia-rails.dev/guide/pages#default-layouts
     //
-    // const page = pages[`../pages/${name}.vue`]
     // page.default.layout = page.default.layout || Layout
-    // return page
+
+    return page
   },
 
   setup({ el, App, props, plugin }) {
@@ -32,4 +35,29 @@ createInertiaApp({
       .use(plugin)
       .mount(el)
   },
+
+  defaults: {
+    future: {
+      useDataInertiaHeadAttribute: true,
+      useDialogForErrorModal: true,
+      preserveEqualProps: true,
+    },
+    visitOptions: () => {
+      return { queryStringArrayFormat: "brackets" }
+    },
+  },
+}).catch((error) => {
+  // This ensures this entrypoint is only loaded on Inertia pages
+  // by checking for the presence of the root element (#app by default).
+  // Feel free to remove this `catch` if you don't need it.
+  if (document.getElementById("app")) {
+    throw error
+  } else {
+    console.error(
+      "Missing root element.\n\n" +
+      "If you see this error, it probably means you loaded Inertia.js on non-Inertia pages.\n" +
+      'Consider moving <%= vite_javascript_tag "inertia" %> to the Inertia-specific layout instead.',
+    )
+  }
 })
+

data/lib/generators/inertia/install/templates/vue/tsconfig.app.json

@@ -18,7 +18,15 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+
+    /* Aliases */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["<%= js_destination_path %>/*"],
+      "~/*": ["<%= js_destination_path %>/*"]
+    }
   },
+
   "include": ["<%= js_destination_path %>/**/*.ts", "<%= js_destination_path %>/**/*.tsx", "<%= js_destination_path %>/**/*.vue"]
 }

data/lib/generators/inertia/install/templates/vue/types/globals.d.ts

@@ -0,0 +1,8 @@
+import type { SharedProps } from '@/types'
+
+declare module '@inertiajs/core' {
+  export interface InertiaConfig {
+    sharedPageProps: SharedProps
+    errorValueType: string[]
+  }
+}

data/lib/generators/inertia/install/templates/vue/types/index.ts

@@ -0,0 +1,8 @@
+export type Flash = {
+  notice?: string
+  alert?: string
+}
+
+export type SharedProps = {
+  flash: Flash
+}

data/lib/generators/inertia/scaffold_controller/scaffold_controller_generator.rb

@@ -55,6 +55,10 @@ module Inertia
         attribute = attributes.find { |attr| attr.name == name }
         attribute&.attachments?
       end
+
+      def parent_controller
+        defined?(InertiaController) ? 'InertiaController' : 'ApplicationController'
+      end
     end
   end
 end

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

@@ -1,17 +1,19 @@
 <% module_namespacing do -%>
-class <%= controller_class_name %>Controller < ApplicationController
+class <%= controller_class_name %>Controller < <%= parent_controller %>
   before_action :set_<%= singular_table_name %>, only: %i[ show edit update destroy ]
 
 <% if regular_class_path.any? -%>
   wrap_parameters :<%= singular_table_name %>
 
 <% end -%>
+<% if parent_controller != 'InertiaController' -%>
   inertia_share flash: -> { flash.to_hash }
 
+<% end -%>
   # GET <%= route_url %>
   def index
     @<%= plural_table_name %> = <%= orm_class.all(class_name) %>
-    render inertia: '<%= "#{inertia_base_path}/Index" %>', props: {
+    render inertia: {
       <%= plural_table_name %>: @<%= plural_table_name %>.map do |<%= singular_table_name %>|
         <%= "serialize_#{singular_table_name}" %>(<%= singular_table_name %>)
       end
@@ -20,7 +22,7 @@ class <%= controller_class_name %>Controller < ApplicationController
 
   # GET <%= route_url %>/1
   def show
-    render inertia: '<%= "#{inertia_base_path}/Show" %>', props: {
+    render inertia: {
       <%= singular_table_name %>: <%= "serialize_#{singular_table_name}" %>(@<%= singular_table_name %>)
     }
   end
@@ -28,14 +30,14 @@ class <%= controller_class_name %>Controller < ApplicationController
   # GET <%= route_url %>/new
   def new
     @<%= singular_table_name %> = <%= orm_class.build(class_name) %>
-    render inertia: '<%= "#{inertia_base_path}/New" %>', props: {
+    render inertia: {
       <%= singular_table_name %>: <%= "serialize_#{singular_table_name}" %>(@<%= singular_table_name %>)
     }
   end
 
   # GET <%= route_url %>/1/edit
   def edit
-    render inertia: '<%= "#{inertia_base_path}/Edit" %>', props: {
+    render inertia: {
       <%= singular_table_name %>: <%= "serialize_#{singular_table_name}" %>(@<%= singular_table_name %>)
     }
   end

data/lib/generators/inertia_templates/scaffold/templates/react/{Edit.jsx.tt → edit.jsx.tt}

@@ -1,5 +1,5 @@
 import { Head, Link } from '@inertiajs/react'
-import Form from './Form'
+import Form from './form'
 
 export default function Edit({ <%= singular_table_name %> }) {
   return (
@@ -10,16 +10,13 @@ export default function Edit({ <%= singular_table_name %> }) {
 
       <Form
         <%= singular_table_name %>={<%= singular_table_name %>}
-        onSubmit={(form) => {
-          form.transform((data) => ({ <%= singular_table_name %>: data }))
+        action={`<%= js_resource_path %>`}
 <% if attributes.any?(&:attachments?) -%>
-          form.post(`<%= js_resource_path %>`, {
-            headers: { 'X-HTTP-METHOD-OVERRIDE': 'put' },
-          })
+        method="post"
+        headers={{ 'X-HTTP-METHOD-OVERRIDE': 'patch' }}
 <% else -%>
-          form.patch(`<%= js_resource_path %>`)
+        method="patch"
 <% end -%>
-        }}
         submitText="Update <%= human_name %>"
       />
 

data/lib/generators/inertia_templates/scaffold/templates/react/{Edit.tsx.tt → edit.tsx.tt}

@@ -1,6 +1,7 @@
 import { Head, Link } from '@inertiajs/react'
-import Form from './Form'
-import { <%= inertia_model_type %> } from './types'
+
+import Form from './form'
+import type { <%= inertia_model_type %> } from './types'
 
 interface EditProps {
   <%= singular_table_name %>: <%= inertia_model_type %>
@@ -15,16 +16,13 @@ export default function Edit({ <%= singular_table_name %> }: EditProps) {
 
       <Form
         <%= singular_table_name %>={<%= singular_table_name %>}
-        onSubmit={(form) => {
-          form.transform((data) => ({ <%= singular_table_name %>: data }))
+        action={`<%= js_resource_path %>`}
 <% if attributes.any?(&:attachments?) -%>
-          form.post(`<%= js_resource_path %>`, {
-            headers: { 'X-HTTP-METHOD-OVERRIDE': 'put' },
-          })
+        method="post"
+        headers={{ 'X-HTTP-METHOD-OVERRIDE': 'patch' }}
 <% else -%>
-          form.patch(`<%= js_resource_path %>`)
+        method="patch"
 <% end -%>
-        }}
         submitText="Update <%= human_name %>"
       />
 

data/lib/generators/inertia_templates/scaffold/templates/react/form.jsx.tt

@@ -0,0 +1,94 @@
+import { Form as InertiaForm } from '@inertiajs/react'
+
+export default function Form({ <%= singular_table_name %>, submitText, ...formProps }) {
+  return (
+    <InertiaForm
+      transform={data => ({ <%= singular_table_name %>: data })}
+      {...formProps}
+    >
+      {({ errors, processing }) => (
+        <>
+<% attributes.each do |attribute| -%>
+<% if attribute.password_digest? -%>
+          <div>
+            <label style={{ display: 'block' }} htmlFor="password">
+              Password
+            </label>
+            <input
+              type="password"
+              name="password"
+              id="password"
+            />
+            {errors.password && (
+              <div style={{ color: 'red' }}>{errors.password.join(', ')}</div>
+            )}
+          </div>
+
+          <div>
+            <label style={{ display: 'block' }} htmlFor="password_confirmation">
+              Password confirmation
+            </label>
+            <input
+              type="password"
+              name="password_confirmation"
+              id="password_confirmation"
+            />
+            {errors.password_confirmation && (
+              <div style={{ color: 'red' }}>{errors.password_confirmation.join(', ')}</div>
+            )}
+          </div>
+<% else -%>
+          <div>
+            <label style={{ display: 'block' }} htmlFor="<%= attribute.singular_name %>">
+              <%= attribute.human_name %>
+            </label>
+<% if input_type(attribute) == "text_area" -%>
+            <textarea
+              name="<%= attribute.singular_name %>"
+              id="<%= attribute.singular_name %>"
+              defaultValue={<%= singular_table_name %>.<%= attribute.column_name %>}
+            />
+<% elsif attribute.attachment? -%>
+            <input
+              type="file"
+              name="<%= attribute.singular_name %>"
+              id="<%= attribute.singular_name %>"
+            />
+<% elsif attribute.attachments? -%>
+            <input
+              type="file"
+              multiple
+              name="<%= attribute.singular_name %>[]"
+              id="<%= attribute.singular_name %>"
+            />
+<% elsif input_type(attribute) == "checkbox" -%>
+            <input
+              type="<%= input_type(attribute) %>"
+              name="<%= attribute.singular_name %>"
+              id="<%= attribute.singular_name %>"
+              defaultChecked={<%= singular_table_name %>.<%= attribute.column_name %>}
+            />
+<% else -%>
+            <input
+              type="<%= input_type(attribute) %>"
+              name="<%= attribute.singular_name %>"
+              id="<%= attribute.singular_name %>"
+              defaultValue={<%= singular_table_name %>.<%= attribute.column_name %>}
+            />
+<% end -%>
+            {errors.<%= attribute.column_name %> && (
+              <div style={{ color: 'red' }}>{errors.<%= attribute.column_name %>.join(', ')}</div>
+            )}
+          </div>
+<% end -%>
+<% end -%>
+          <div>
+            <button type="submit" disabled={processing}>
+              {submitText}
+            </button>
+          </div>
+        </>
+      )}
+    </InertiaForm>
+  )
+}

data/lib/generators/inertia_templates/scaffold/templates/react/form.tsx.tt

@@ -0,0 +1,109 @@
+import { Form as InertiaForm } from '@inertiajs/react'
+import { type ComponentProps } from 'react'
+
+import type { <%= inertia_model_type %> } from './types'
+
+type FormProps = Omit<ComponentProps<typeof InertiaForm>, 'children'> & {
+  <%= singular_table_name %>: <%= inertia_model_type %>
+  submitText: string
+}
+
+export default function Form({ <%= singular_table_name %>, submitText, ...formProps }: FormProps) {
+  return (
+    <InertiaForm
+      transform={data => ({ <%= singular_table_name %>: data })}
+      {...formProps}
+    >
+      {({ errors, processing }) => (
+        <>
+<% attributes.each do |attribute| -%>
+<% if attribute.password_digest? -%>
+          <div>
+            <label style={{ display: 'block' }} htmlFor="password">
+              Password
+            </label>
+            <input
+              type="password"
+              name="password"
+              id="password"
+            />
+            {errors.password && (
+              <div style={{ color: 'red' }}>{errors.password}</div>
+            )}
+          </div>
+
+          <div>
+            <label style={{ display: 'block' }} htmlFor="password_confirmation">
+              Password confirmation
+            </label>
+            <input
+              type="password"
+              name="password_confirmation"
+              id="password_confirmation"
+            />
+            {errors.password_confirmation && (
+              <div style={{ color: 'red' }}>{errors.password_confirmation}</div>
+            )}
+          </div>
+<% else -%>
+          <div>
+            <label style={{ display: 'block' }} htmlFor="<%= attribute.singular_name %>">
+              <%= attribute.human_name %>
+            </label>
+<% if input_type(attribute) == "text_area" -%>
+            <textarea
+              name="<%= attribute.singular_name %>"
+              id="<%= attribute.singular_name %>"
+              defaultValue={<%= singular_table_name %>.<%= attribute.column_name %>}
+            />
+<% elsif attribute.attachment? -%>
+            <input
+              type="file"
+              name="<%= attribute.singular_name %>"
+              id="<%= attribute.singular_name %>"
+            />
+<% elsif attribute.attachments? -%>
+            <input
+              type="file"
+              multiple
+              name="<%= attribute.singular_name %>[]"
+              id="<%= attribute.singular_name %>"
+            />
+<% elsif input_type(attribute) == "checkbox" -%>
+            <input
+              type="<%= input_type(attribute) %>"
+              name="<%= attribute.singular_name %>"
+              id="<%= attribute.singular_name %>"
+              defaultChecked={<%= singular_table_name %>.<%= attribute.column_name %>}
+            />
+<% elsif input_type(attribute) == "number" -%>
+            <input
+              type="<%= input_type(attribute) %>"
+              name="<%= attribute.singular_name %>"
+              id="<%= attribute.singular_name %>"
+              defaultValue={<%= singular_table_name %>.<%= attribute.column_name %>}
+            />
+<% else -%>
+            <input
+              type="<%= input_type(attribute) %>"
+              name="<%= attribute.singular_name %>"
+              id="<%= attribute.singular_name %>"
+              defaultValue={<%= singular_table_name %>.<%= attribute.column_name %>}
+            />
+<% end -%>
+            {errors.<%= attribute.column_name %> && (
+              <div style={{ color: 'red' }}>{errors.<%= attribute.column_name %>}</div>
+            )}
+          </div>
+<% end -%>
+<% end -%>
+          <div>
+            <button type="submit" disabled={processing}>
+              {submitText}
+            </button>
+          </div>
+        </>
+      )}
+    </InertiaForm>
+  )
+}

data/lib/generators/inertia_templates/scaffold/templates/react/{Index.jsx.tt → index.jsx.tt}

@@ -1,5 +1,5 @@
 import { Head, Link } from '@inertiajs/react'
-import <%= inertia_component_name %> from './<%= inertia_component_name %>'
+import <%= inertia_component_name %> from './<%= singular_name %>'
 
 export default function Index({ <%= plural_table_name %>, flash }) {
   return (

data/lib/generators/inertia_templates/scaffold/templates/react/{Index.tsx.tt → index.tsx.tt}

@@ -1,5 +1,5 @@
 import { Head, Link } from '@inertiajs/react'
-import <%= inertia_component_name %> from './<%= inertia_component_name %>'
+import <%= inertia_component_name %> from './<%= singular_name %>'
 import { <%= inertia_model_type %> } from './types'
 
 interface IndexProps {

data/lib/generators/inertia_templates/scaffold/templates/react/{New.jsx.tt → new.jsx.tt}

@@ -1,5 +1,5 @@
 import { Head, Link } from '@inertiajs/react'
-import Form from './Form'
+import Form from './form'
 
 export default function New({ <%= singular_table_name %> }) {
   return (
@@ -10,10 +10,8 @@ export default function New({ <%= singular_table_name %> }) {
 
       <Form
         <%= singular_table_name %>={<%= singular_table_name %>}
-        onSubmit={(form) => {
-          form.transform((data) => ({ <%= singular_table_name %>: data }))
-          form.post('<%= js_resources_path %>')
-        }}
+        action="<%= js_resources_path %>"
+        method="post"
         submitText="Create <%= human_name %>"
       />
 

data/lib/generators/inertia_templates/scaffold/templates/react/{New.tsx.tt → new.tsx.tt}

@@ -1,6 +1,7 @@
 import { Head, Link } from '@inertiajs/react'
-import Form from './Form'
-import { <%= inertia_model_type %> } from './types'
+
+import Form from './form'
+import type { <%= inertia_model_type %> } from './types'
 
 interface NewProps {
   <%= singular_table_name %>: <%= inertia_model_type %>
@@ -15,10 +16,8 @@ export default function New({ <%= singular_table_name %> }: NewProps) {
 
       <Form
         <%= singular_table_name %>={<%= singular_table_name %>}
-        onSubmit={(form) => {
-          form.transform((data) => ({ <%= singular_table_name %>: data }))
-          form.post('<%= js_resources_path %>')
-        }}
+        action="<%= js_resources_path %>"
+        method="post"
         submitText="Create <%= human_name %>"
       />
 

data/lib/generators/inertia_templates/scaffold/templates/react/{Show.jsx.tt → show.jsx.tt}

@@ -1,5 +1,5 @@
 import { Head, Link } from '@inertiajs/react'
-import <%= inertia_component_name %> from './<%= inertia_component_name %>'
+import <%= inertia_component_name %> from './<%= singular_name %>'
 
 export default function Show({ <%= singular_table_name %>, flash }) {
   return (

data/lib/generators/inertia_templates/scaffold/templates/react/{Show.tsx.tt → show.tsx.tt}

@@ -1,5 +1,5 @@
 import { Head, Link } from '@inertiajs/react'
-import <%= inertia_component_name %> from './<%= inertia_component_name %>'
+import <%= inertia_component_name %> from './<%= singular_name %>'
 import { <%= inertia_model_type %> } from './types'
 
 interface ShowProps {

data/lib/generators/inertia_templates/scaffold/templates/svelte/{Edit.svelte.tt → edit.svelte.tt}

@@ -1,19 +1,9 @@
 <script>
   import { Link } from '@inertiajs/svelte'
-  import Form from './Form.svelte'
 
-  let { <%= singular_table_name %> } = $props()
+  import Form from './form.svelte'
 
-  const handleSubmit = ({ form }) => {
-    form.transform((data) => ({ <%= singular_table_name %>: data }))
-<% if attributes.any?(&:attachments?) -%>
-    form.post(`<%= js_resource_path %>`, {
-      headers: { 'X-HTTP-METHOD-OVERRIDE': 'put' },
-    })
-<% else -%>
-    form.patch(`<%= js_resource_path %>`)
-<% end -%>
-  }
+  let { <%= singular_table_name %> } = $props()
 </script>
 
 <svelte:head>
@@ -25,7 +15,13 @@
 <Form
   {<%= singular_table_name %>}
   submitText="Update <%= human_name %>"
-  onSubmit={handleSubmit}
+  action={`<%= js_resource_path %>`}
+<% if attributes.any?(&:attachments?) -%>
+  method="post"
+  headers={{ 'X-HTTP-METHOD-OVERRIDE': 'patch' }}
+<% else -%>
+  method="patch"
+<% end -%>
 />
 
 <br />

data/lib/generators/inertia_templates/scaffold/templates/{svelte4/Edit.svelte.tt → svelte/edit.ts.svelte.tt}

@@ -1,20 +1,10 @@
-<script>
+<script lang="ts">
   import { Link } from '@inertiajs/svelte'
-  import Form from './Form.svelte'
 
-  export let <%= singular_table_name %>
+  import type { <%= inertia_model_type %> } from './types'
+  import Form from './form.svelte'
 
-  const handleSubmit = (e) => {
-    const { form } = e.detail
-    form.transform((data) => ({ <%= singular_table_name %>: data }))
-<% if attributes.any?(&:attachments?) -%>
-    form.post(`<%= js_resource_path %>`, {
-      headers: { 'X-HTTP-METHOD-OVERRIDE': 'put' },
-    })
-<% else -%>
-    form.patch(`<%= js_resource_path %>`)
-<% end -%>
-  }
+  let { <%= singular_table_name %> } = $props<{ <%= singular_table_name %>: <%= inertia_model_type %> }>()
 </script>
 
 <svelte:head>
@@ -26,7 +16,13 @@
 <Form
   {<%= singular_table_name %>}
   submitText="Update <%= human_name %>"
-  on:submit={handleSubmit}
+  action={`<%= js_resource_path %>`}
+<% if attributes.any?(&:attachments?) -%>
+  method="post"
+  headers={{ 'X-HTTP-METHOD-OVERRIDE': 'patch' }}
+<% else -%>
+  method="patch"
+<% end -%>
 />
 
 <br />