inertia_rails 3.18.0 → 3.19.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9e041109440a74fee87c6aa2ec7a338db68e01e1c5160dee3e9e00364a55f504
-  data.tar.gz: e4e8fc4f115e2f7d84f8f39bfe90099ca5b17a2490cd97aa6c21282b112ef15c
+  metadata.gz: 91497e407b470afd9fdc6c938bf97fd1f7e74e8b39ab6e76ca8b8c50b2d92f75
+  data.tar.gz: d132dd3a36f682357bcbeb63e7d0e825449603b2928d760c5a725e9a35657fc3
 SHA512:
-  metadata.gz: f399be828b7f2e01c5cb9dedb86d67d3a0fe278370846f2c70a37576246e96d8ea00395239152bd908aad238b9389e06c5349f6bbb51b68b1b131367fe51b317
-  data.tar.gz: 833c82fff42dce56d47e20dbfb32e9103a76dd889b921902f73f9f020369409bfcd81f8ddfecabe122b95983034d0c3eb2e24cf5a0e46e018a78b2aeb94f7b1e
+  metadata.gz: 385280b11bf6fc2aae7f067bb5c77e1bc641d886aa71aff1e3f25ded9db24256a53b68b0daeb4722fe28bca45f0e7b5daeff308b81d326348f3852b8e54e7f2e
+  data.tar.gz: 21548a2a8b4e1bf1ecf307d2298c78e24a7fad344f881197d8f421538ca7769704a2301979f45990c3af46fdf1578b49c53a65cfcd169ba5ac6b63150bccce1e

data/CHANGELOG.md

@@ -4,6 +4,16 @@ 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.19.0] - 2026-03-25
+
+* Upgrades to support Inertia.js 3.x! All thanks to @skyrukov!
+* Improvements to renderer code structure
+* Improved `inertia_share` implementation, including an instance method to go alongside the class method
+* Better SSR in development
+* Docs updates
+* Support nested deferred/optional props
+* ...and more!
+
 ## [3.18.0] - 2026-03-11
 
 * New (super awesome) landing page design (seriously, go look at the animated graphic) (@skryukov)

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

@@ -1,6 +1,7 @@
 react:
   inertia_package: "@inertiajs/react"
   packages:
+    - "@inertiajs/vite"
     - "@vitejs/plugin-react"
     - "react"
     - "react-dom"
@@ -25,11 +26,12 @@ react:
 vue:
   inertia_package: "@inertiajs/vue3"
   packages:
+    - "@inertiajs/vite"
     - "vue"
     - "@vitejs/plugin-vue"
     - "vite@latest"
   packages_ts:
-    - "typescript@~5.6.2"
+    - "typescript"
     - "vue-tsc"
   vite_plugin_import: "import vue from '@vitejs/plugin-vue'"
   vite_plugin_call: "vue()"
@@ -46,6 +48,7 @@ vue:
 svelte:
   inertia_package: "@inertiajs/svelte"
   packages:
+    - "@inertiajs/vite"
     - "svelte@5"
     - "@sveltejs/vite-plugin-svelte"
     - "vite@latest"

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

@@ -93,6 +93,12 @@ module Inertia
           prepend_file vite_config_path, "#{FRAMEWORKS[framework]['vite_plugin_import']}\n"
         end
 
+        unless File.read(vite_config_path).include?('@inertiajs/vite')
+          say 'Adding Inertia Vite plugin'
+          insert_into_file vite_config_path, "\n    inertia(),", after: 'plugins: ['
+          prepend_file vite_config_path, "import inertia from '@inertiajs/vite'\n"
+        end
+
         say "Copying #{inertia_entrypoint} entrypoint"
         copy_file "#{framework}/#{inertia_entrypoint}", js_file_path("entrypoints/#{inertia_entrypoint}")
 

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

@@ -1,54 +1,17 @@
 import { createInertiaApp } from '@inertiajs/react'
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
 
 createInertiaApp({
-  // Set default page title
-  // see https://inertia-rails.dev/guide/title-and-meta
-  //
-  // title: title => title ? `${title} - App` : 'App',
+  pages: "../pages",
 
-  // Disable progress bar
-  //
-  // see https://inertia-rails.dev/guide/progress-indicators
-  // progress: false,
-
-  resolve: (name) => {
-    const pages = import.meta.glob('../pages/**/*.jsx', {
-      eager: true,
-    })
-    const page = pages[`../pages/${name}.jsx`]
-    if (!page) {
-      console.error(`Missing Inertia page component: '${name}.jsx'`)
-    }
-
-    // To use a default layout, import the Layout component
-    // and use the following lines.
-    // see https://inertia-rails.dev/guide/pages#default-layouts
-    //
-    // page.default.layout ||= (page) => (<Layout>{page}</Layout>)
-
-    return page
-  },
-
-  setup({ el, App, props }) {
-    createRoot(el).render(
-      <StrictMode>
-        <App {...props} />
-      </StrictMode>
-    )
-  },
+  strictMode: true,
 
   defaults: {
     form: {
       forceIndicesArrayFormatInFormData: false,
       withAllErrors: true,
     },
-    future: {
-      useScriptElementForInitialPage: true,
-      useDataInertiaHeadAttribute: true,
-      useDialogForErrorModal: true,
-      preserveEqualProps: true,
+    visitOptions: () => {
+      return { queryStringArrayFormat: "brackets" }
     },
   },
 }).catch((error) => {

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

@@ -1,54 +1,17 @@
-import { createInertiaApp, type ResolvedComponent } from '@inertiajs/react'
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
+import { createInertiaApp } from '@inertiajs/react'
 
 void createInertiaApp({
-  // Set default page title
-  // see https://inertia-rails.dev/guide/title-and-meta
-  //
-  // title: title => title ? `${title} - App` : 'App',
+  pages: "../pages",
 
-  // Disable progress bar
-  //
-  // see https://inertia-rails.dev/guide/progress-indicators
-  // progress: false,
-
-  resolve: (name) => {
-    const pages = import.meta.glob<{default: ResolvedComponent}>('../pages/**/*.tsx', {
-      eager: true,
-    })
-    const page = pages[`../pages/${name}.tsx`]
-    if (!page) {
-      console.error(`Missing Inertia page component: '${name}.tsx'`)
-    }
-
-    // To use a default layout, import the Layout component
-    // and use the following line.
-    // see https://inertia-rails.dev/guide/pages#default-layouts
-    //
-    // page.default.layout ||= (page: ReactNode) => (<Layout>{page}</Layout>)
-
-    return page
-  },
-
-  setup({ el, App, props }) {
-    createRoot(el).render(
-      <StrictMode>
-        <App {...props} />
-      </StrictMode>
-    )
-  },
+  strictMode: true,
 
   defaults: {
     form: {
       forceIndicesArrayFormatInFormData: false,
       withAllErrors: true,
     },
-    future: {
-      useScriptElementForInitialPage: true,
-      useDataInertiaHeadAttribute: true,
-      useDialogForErrorModal: true,
-      preserveEqualProps: true,
+    visitOptions: () => {
+      return { queryStringArrayFormat: "brackets" }
     },
   },
 }).catch((error) => {

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

@@ -24,10 +24,9 @@
     "noFallthroughCasesInSwitch": true,
 
     /* Aliases */
-    "baseUrl": ".",
     "paths": {
-      "@/*": ["<%= js_destination_path %>/*"],
-      "~/*": ["<%= js_destination_path %>/*"]
+      "@/*": ["./<%= js_destination_path %>/*"],
+      "~/*": ["./<%= js_destination_path %>/*"]
     }
   },
   "include": ["<%= js_destination_path %>"]

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

@@ -1,50 +1,15 @@
 import { createInertiaApp } from '@inertiajs/svelte'
-import  { mount } from 'svelte';
 
 createInertiaApp({
-  // Disable progress bar
-  //
-  // see https://inertia-rails.dev/guide/progress-indicators
-  // progress: false,
-
-  resolve: (name) => {
-    const pages = import.meta.glob('../pages/**/*.svelte', {
-      eager: true,
-    })
-    const page = pages[`../pages/${name}.svelte`]
-    if (!page) {
-      console.error(`Missing Inertia page component: '${name}.svelte'`)
-    }
-
-    // To use a default layout, import the Layout component
-    // and use the following line.
-    // see https://inertia-rails.dev/guide/pages#default-layouts
-    //
-    // return { default: page.default, layout: page.layout || Layout }
-
-    return page
-  },
-
-  setup({ el, App, props }) {
-    if (el) {
-      mount(App, { target: el, props })
-    } else {
-      console.error(
-        "Missing root element.\n\n" +
-        "If you see this error, it probably means you load Inertia.js on non-Inertia pages.\n" +
-        'Consider moving <%= vite_javascript_tag "inertia" %> to the Inertia-specific layout instead.',
-      )
-    }
-  },
+  pages: "../pages",
 
   defaults: {
     form: {
       forceIndicesArrayFormatInFormData: false,
+      withAllErrors: true,
     },
-    future: {
-      useDataInertiaHeadAttribute: true,
-      useDialogForErrorModal: true,
-      preserveEqualProps: true,
+    visitOptions: () => {
+      return { queryStringArrayFormat: "brackets" }
     },
   },
 })

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

@@ -1,52 +1,15 @@
-import { createInertiaApp, type ResolvedComponent } from '@inertiajs/svelte'
-import { mount } from 'svelte'
+import { createInertiaApp } from '@inertiajs/svelte'
 
 createInertiaApp({
-  // Disable progress bar
-  //
-  // see https://inertia-rails.dev/guide/progress-indicators
-  // progress: false,
-
-  resolve: (name) => {
-    const pages = import.meta.glob<ResolvedComponent>('../pages/**/*.svelte', {
-      eager: true,
-    })
-    const page = pages[`../pages/${name}.svelte`]
-    if (!page) {
-      console.error(`Missing Inertia page component: '${name}.svelte'`)
-    }
-
-    // To use a default layout, import the Layout component
-    // and use the following line.
-    // see https://inertia-rails.dev/guide/pages#default-layouts
-    //
-    // return { default: page.default, layout: page.layout || Layout } as ResolvedComponent
-
-    return page
-  },
-
-  setup({ el, App, props }) {
-    if (el) {
-      mount(App, { target: el, props })
-    } else {
-      console.error(
-        'Missing root element.\n\n' +
-          'If you see this error, it probably means you load Inertia.js on non-Inertia pages.\n' +
-          'Consider moving <%= vite_typescript_tag "inertia" %> to the Inertia-specific layout instead.',
-      )
-    }
-  },
+  pages: "../pages",
 
   defaults: {
     form: {
       forceIndicesArrayFormatInFormData: false,
       withAllErrors: true,
     },
-    future: {
-      useScriptElementForInitialPage: true,
-      useDataInertiaHeadAttribute: true,
-      useDialogForErrorModal: true,
-      preserveEqualProps: true,
+    visitOptions: () => {
+      return { queryStringArrayFormat: "brackets" }
     },
   },
 })

data/lib/generators/inertia/install/templates/svelte/tsconfig.json

@@ -17,10 +17,9 @@
     "moduleDetection": "force",
 
     /* Aliases */
-    "baseUrl": ".",
     "paths": {
-      "@/*": ["<%= js_destination_path %>/*"],
-      "~/*": ["<%= js_destination_path %>/*"]
+      "@/*": ["./<%= js_destination_path %>/*"],
+      "~/*": ["./<%= js_destination_path %>/*"]
     }
   },
 

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

@@ -1,49 +1,15 @@
 import { createInertiaApp } from '@inertiajs/vue3'
-import { createApp, h } from 'vue'
 
 createInertiaApp({
-  // Set default page title
-  // see https://inertia-rails.dev/guide/title-and-meta
-  //
-  // title: title => title ? `${title} - App` : 'App',
-
-  // Disable progress bar
-  //
-  // see https://inertia-rails.dev/guide/progress-indicators
-  // progress: false,
-
-  resolve: (name) => {
-    const pages = import.meta.glob('../pages/**/*.vue', {
-      eager: true,
-    })
-    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
-    //
-    // page.default.layout = page.default.layout || Layout
-
-    return page
-  },
-
-  setup({ el, App, props, plugin }) {
-    createApp({ render: () => h(App, props) })
-      .use(plugin)
-      .mount(el)
-  },
+  pages: "../pages",
 
   defaults: {
     form: {
       forceIndicesArrayFormatInFormData: false,
+      withAllErrors: true,
     },
-    future: {
-      useDataInertiaHeadAttribute: true,
-      useDialogForErrorModal: true,
-      preserveEqualProps: true,
+    visitOptions: () => {
+      return { queryStringArrayFormat: "brackets" }
     },
   },
 }).catch((error) => {

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

@@ -1,51 +1,15 @@
 import { createInertiaApp } from '@inertiajs/vue3'
-import { createApp, DefineComponent, h } from 'vue'
 
 createInertiaApp({
-  // Set default page title
-  // see https://inertia-rails.dev/guide/title-and-meta
-  //
-  // title: title => title ? `${title} - App` : 'App',
-
-  // Disable progress bar
-  //
-  // see https://inertia-rails.dev/guide/progress-indicators
-  // progress: false,
-
-  resolve: (name) => {
-    const pages = import.meta.glob<DefineComponent>('../pages/**/*.vue', {
-      eager: true,
-    })
-    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
-    //
-    // page.default.layout = page.default.layout || Layout
-
-    return page
-  },
-
-  setup({ el, App, props, plugin }) {
-    createApp({ render: () => h(App, props) })
-      .use(plugin)
-      .mount(el)
-  },
+  pages: "../pages",
 
   defaults: {
     form: {
       forceIndicesArrayFormatInFormData: false,
       withAllErrors: true,
     },
-    future: {
-      useScriptElementForInitialPage: true,
-      useDataInertiaHeadAttribute: true,
-      useDialogForErrorModal: true,
-      preserveEqualProps: true,
+    visitOptions: () => {
+      return { queryStringArrayFormat: "brackets" }
     },
   },
 }).catch((error) => {

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

@@ -21,10 +21,9 @@
     "noFallthroughCasesInSwitch": true,
 
     /* Aliases */
-    "baseUrl": ".",
     "paths": {
-      "@/*": ["<%= js_destination_path %>/*"],
-      "~/*": ["<%= js_destination_path %>/*"]
+      "@/*": ["./<%= js_destination_path %>/*"],
+      "~/*": ["./<%= js_destination_path %>/*"]
     }
   },
 

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

@@ -1,16 +1,16 @@
+import { type FormComponentProps } from '@inertiajs/core'
 import { Form as InertiaForm } from '@inertiajs/react'
-import { type ComponentProps } from 'react'
 
-import type { <%= inertia_model_type %> } from './types'
+import type { <%= inertia_model_type %>, <%= inertia_model_form_type %> } from './types'
 
-type FormProps = Omit<ComponentProps<typeof InertiaForm>, 'children'> & {
+type FormProps = FormComponentProps<<%= inertia_model_form_type %>> & {
   <%= singular_table_name %>: <%= inertia_model_type %>
   submitText: string
 }
 
 export default function Form({ <%= singular_table_name %>, submitText, ...formProps }: FormProps) {
   return (
-    <InertiaForm
+    <InertiaForm<<%= inertia_model_form_type %>>
       transform={data => ({ <%= singular_table_name %>: data })}
       {...formProps}
     >

data/lib/generators/inertia_templates/scaffold/templates/svelte/form.svelte.tt

@@ -1,7 +1,7 @@
 <script>
   import { Form } from '@inertiajs/svelte'
 
-  let { <%= singular_table_name %>, submitText, restProps } = $props()
+  let { <%= singular_table_name %>, submitText, ...restProps } = $props()
 </script>
 
 <Form

data/lib/generators/inertia_templates/scaffold/templates/svelte/form.ts.svelte.tt

@@ -8,7 +8,7 @@
   let { <%= singular_table_name %>, submitText, ...restProps } = $props<{
     <%= singular_table_name %>: <%= inertia_model_type %>
     submitText: string
-  } & ComponentProps<Form>>()
+  } & ComponentProps<typeof Form>>()
 </script>
 
 <Form

data/lib/generators/inertia_templates/scaffold/templates/svelte/index.svelte.tt

@@ -9,8 +9,8 @@
   <title><%= human_name.pluralize %></title>
 </svelte:head>
 
-{#if $page.flash.notice}
-  <p class="notice">{$page.flash.notice}</p>
+{#if page.flash.notice}
+  <p class="notice">{page.flash.notice}</p>
 {/if}
 
 <h1><%= human_name.pluralize %></h1>

data/lib/generators/inertia_templates/scaffold/templates/svelte/index.ts.svelte.tt

@@ -12,8 +12,8 @@
   <title><%= human_name.pluralize %></title>
 </svelte:head>
 
-{#if $page.flash.notice}
-  <p class="notice">{$page.flash.notice}</p>
+{#if page.flash.notice}
+  <p class="notice">{page.flash.notice}</p>
 {/if}
 
 <h1><%= human_name.pluralize %></h1>

data/lib/generators/inertia_templates/scaffold/templates/svelte/show.svelte.tt

@@ -9,8 +9,8 @@
   <title><%= human_name %> #{<%= singular_table_name %>.id}</title>
 </svelte:head>
 
-{#if $page.flash.notice}
-  <p class="notice">{$page.flash.notice}</p>
+{#if page.flash.notice}
+  <p class="notice">{page.flash.notice}</p>
 {/if}
 
 <h1><%= human_name %> #{<%= singular_table_name %>.id}</h1>

data/lib/generators/inertia_templates/scaffold/templates/svelte/show.ts.svelte.tt

@@ -12,8 +12,8 @@
   <title><%= human_name %> #{<%= singular_table_name %>.id}</title>
 </svelte:head>
 
-{#if $page.flash.notice}
-  <p class="notice">{$page.flash.notice}</p>
+{#if page.flash.notice}
+  <p class="notice">{page.flash.notice}</p>
 {/if}
 
 <h1><%= human_name %> #{<%= singular_table_name %>.id}</h1>

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

@@ -1,16 +1,16 @@
+import { type FormComponentProps } from '@inertiajs/core'
 import { Form as InertiaForm } from '@inertiajs/react'
-import { type ComponentProps } from 'react'
 
-import { <%= inertia_model_type %> } from './types'
+import type { <%= inertia_model_type %>, <%= inertia_model_form_type %> } from './types'
 
-type FormProps = Omit<ComponentProps<typeof InertiaForm>, 'children'> & {
+type FormProps = FormComponentProps<<%= inertia_model_form_type %>> & {
   <%= singular_table_name %>: <%= inertia_model_type %>
   submitText: string
 }
 
 export default function Form({ <%= singular_table_name %>, submitText, ...formProps }: FormProps) {
   return (
-    <InertiaForm
+    <InertiaForm<<%= inertia_model_form_type %>>
       transform={data => ({ <%= singular_table_name %>: data })}
       className="contents"
       {...formProps}

data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/form.ts.svelte.tt

@@ -8,7 +8,7 @@
   let { <%= singular_table_name %>, submitText, ...restProps } = $props<{
     <%= singular_table_name %>: <%= inertia_model_type %>
     submitText: string
-  } & ComponentProps<Form>>()
+  } & ComponentProps<typeof Form>>()
 </script>
 
 <Form

data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/index.svelte.tt

@@ -10,9 +10,9 @@
 </svelte:head>
 
 <div class="mx-auto md:w-2/3 w-full px-8 pt-8">
-  {#if $page.flash.notice}
+  {#if page.flash.notice}
     <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block">
-      {$page.flash.notice}
+      {page.flash.notice}
     </p>
   {/if}
 

data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/index.ts.svelte.tt

@@ -13,9 +13,9 @@
 </svelte:head>
 
 <div class="mx-auto md:w-2/3 w-full px-8 pt-8">
-  {#if $page.flash.notice}
+  {#if page.flash.notice}
     <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block">
-      {$page.flash.notice}
+      {page.flash.notice}
     </p>
   {/if}
 

data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/show.svelte.tt

@@ -11,9 +11,9 @@
 
 <div class="mx-auto md:w-2/3 w-full px-8 pt-8">
   <div class="mx-auto">
-    {#if $page.flash.notice}
+    {#if page.flash.notice}
       <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block">
-        {$page.flash.notice}
+        {page.flash.notice}
       </p>
     {/if}
 

data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/show.ts.svelte.tt

@@ -14,9 +14,9 @@
 
 <div class="mx-auto md:w-2/3 w-full px-8 pt-8">
   <div class="mx-auto">
-    {#if $page.flash.notice}
+    {#if page.flash.notice}
       <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block">
-        {$page.flash.notice}
+        {page.flash.notice}
       </p>
     {/if}
 

data/lib/inertia_rails/base_prop.rb

@@ -7,7 +7,7 @@ module InertiaRails
       @block = block
     end
 
-    def call(controller)
+    def call(controller, **)
       controller.instance_exec(&@block)
     end
   end