From d624bc185ee245113c3208c781b16e6b61c6d334 Mon Sep 17 00:00:00 2001
From: Svyatoslav Kryukov <me@skryukov.dev>
Date: Fri, 25 Oct 2024 21:37:32 +0300
Subject: [PATCH] Add Svelte 5 support

---
 README.md                                     |   4 +-
 docs/guide/server-side-setup.md               |   4 +-
 lib/generators/inertia/install/frameworks.yml |  31 ++++-
 .../inertia/install/install_generator.rb      |   8 +-
 .../install/templates/react/inertia.ts        |   6 +-
 .../templates/svelte/InertiaExample.svelte    |  10 +-
 .../templates/svelte/InertiaExample.ts.svelte |  10 +-
 .../install/templates/svelte/inertia.js       |   5 +-
 .../install/templates/svelte/inertia.ts       |  16 +--
 .../templates/svelte4/InertiaExample.svelte   | 116 +++++++++++++++++
 .../svelte4/InertiaExample.ts.svelte          | 116 +++++++++++++++++
 .../install/templates/svelte4/inertia.js      |  29 +++++
 .../install/templates/svelte4/inertia.ts      |  29 +++++
 .../templates/svelte4/svelte.config.js        |   7 +
 .../install/templates/svelte4/tsconfig.json   |  21 +++
 .../templates/svelte4/tsconfig.node.json      |  12 ++
 .../install/templates/svelte4/vite-env.d.ts   |   2 +
 .../inertia/install/templates/vue/inertia.ts  |   6 +-
 .../templates/svelte4/view.svelte.tt          |   2 +
 .../scaffold/templates/react/Form.jsx.tt      |   2 +-
 .../scaffold/templates/svelte/Edit.svelte.tt  |   7 +-
 .../scaffold/templates/svelte/Form.svelte.tt  |  22 ++--
 .../scaffold/templates/svelte/Index.svelte.tt |   9 +-
 .../scaffold/templates/svelte/New.svelte.tt   |   7 +-
 .../scaffold/templates/svelte/One.svelte.tt   |   2 +-
 .../scaffold/templates/svelte/Show.svelte.tt  |  13 +-
 .../scaffold/templates/svelte4/Edit.svelte.tt |  37 ++++++
 .../scaffold/templates/svelte4/Form.svelte.tt |  96 ++++++++++++++
 .../templates/svelte4/Index.svelte.tt         |  36 ++++++
 .../scaffold/templates/svelte4/New.svelte.tt  |  30 +++++
 .../scaffold/templates/svelte4/One.svelte.tt  |  28 ++++
 .../scaffold/templates/svelte4/Show.svelte.tt |  46 +++++++
 .../scaffold/templates/vue/Form.vue.tt        |   2 +-
 .../templates/svelte4/view.svelte.tt          |   2 +
 .../scaffold/templates/react/Form.jsx.tt      |   2 +-
 .../scaffold/templates/svelte/Edit.svelte.tt  |   7 +-
 .../scaffold/templates/svelte/Form.svelte.tt  |  23 ++--
 .../scaffold/templates/svelte/Index.svelte.tt |   9 +-
 .../scaffold/templates/svelte/New.svelte.tt   |   7 +-
 .../scaffold/templates/svelte/One.svelte.tt   |   2 +-
 .../scaffold/templates/svelte/Show.svelte.tt  |  15 +--
 .../scaffold/templates/svelte4/Edit.svelte.tt |  45 +++++++
 .../scaffold/templates/svelte4/Form.svelte.tt | 120 ++++++++++++++++++
 .../templates/svelte4/Index.svelte.tt         |  43 +++++++
 .../scaffold/templates/svelte4/New.svelte.tt  |  33 +++++
 .../scaffold/templates/svelte4/One.svelte.tt  |  28 ++++
 .../scaffold/templates/svelte4/Show.svelte.tt |  58 +++++++++
 .../scaffold/templates/vue/Form.vue.tt        |   2 +-
 .../generators_helper.rb                      |   7 +-
 .../install/install_generator_spec.rb         |  54 +++++++-
 50 files changed, 1103 insertions(+), 125 deletions(-)
 create mode 100644 lib/generators/inertia/install/templates/svelte4/InertiaExample.svelte
 create mode 100644 lib/generators/inertia/install/templates/svelte4/InertiaExample.ts.svelte
 create mode 100644 lib/generators/inertia/install/templates/svelte4/inertia.js
 create mode 100644 lib/generators/inertia/install/templates/svelte4/inertia.ts
 create mode 100644 lib/generators/inertia/install/templates/svelte4/svelte.config.js
 create mode 100644 lib/generators/inertia/install/templates/svelte4/tsconfig.json
 create mode 100644 lib/generators/inertia/install/templates/svelte4/tsconfig.node.json
 create mode 100644 lib/generators/inertia/install/templates/svelte4/vite-env.d.ts
 create mode 100644 lib/generators/inertia_templates/controller/templates/svelte4/view.svelte.tt
 create mode 100644 lib/generators/inertia_templates/scaffold/templates/svelte4/Edit.svelte.tt
 create mode 100644 lib/generators/inertia_templates/scaffold/templates/svelte4/Form.svelte.tt
 create mode 100644 lib/generators/inertia_templates/scaffold/templates/svelte4/Index.svelte.tt
 create mode 100644 lib/generators/inertia_templates/scaffold/templates/svelte4/New.svelte.tt
 create mode 100644 lib/generators/inertia_templates/scaffold/templates/svelte4/One.svelte.tt
 create mode 100644 lib/generators/inertia_templates/scaffold/templates/svelte4/Show.svelte.tt
 create mode 100644 lib/generators/inertia_tw_templates/controller/templates/svelte4/view.svelte.tt
 create mode 100644 lib/generators/inertia_tw_templates/scaffold/templates/svelte4/Edit.svelte.tt
 create mode 100644 lib/generators/inertia_tw_templates/scaffold/templates/svelte4/Form.svelte.tt
 create mode 100644 lib/generators/inertia_tw_templates/scaffold/templates/svelte4/Index.svelte.tt
 create mode 100644 lib/generators/inertia_tw_templates/scaffold/templates/svelte4/New.svelte.tt
 create mode 100644 lib/generators/inertia_tw_templates/scaffold/templates/svelte4/One.svelte.tt
 create mode 100644 lib/generators/inertia_tw_templates/scaffold/templates/svelte4/Show.svelte.tt

diff --git a/README.md b/README.md
index d367001..3a7e1cd 100644
--- a/README.md
+++ b/README.md
@@ -32,7 +32,7 @@ bin/rails generate inertia:install
 This command will:
 - Check for Vite Rails and install it if not present
 - Ask if you want to use TypeScript
-- Ask you to choose your preferred frontend framework (React, Vue, or Svelte)
+- Ask you to choose your preferred frontend framework (React, Vue, Svelte 4, or Svelte 5)
 - Ask if you want to install Tailwind CSS
 - Install necessary dependencies
 - Set up the application to work with Inertia
@@ -51,7 +51,7 @@ Vite Rails gem successfully installed
 Vite Rails successfully installed
 Would you like to use TypeScript? (y/n) y
 Adding TypeScript support
-What framework do you want to use with Inertia? [react, vue, svelte] (react)
+What framework do you want to use with Inertia? [react, vue, svelte4, svelte] (react)
          run  npm add @types/react @types/react-dom typescript --silent from "."
 Would you like to install Tailwind CSS? (y/n) y
 Installing Tailwind CSS
diff --git a/docs/guide/server-side-setup.md b/docs/guide/server-side-setup.md
index da0dc74..e78dbaf 100644
--- a/docs/guide/server-side-setup.md
+++ b/docs/guide/server-side-setup.md
@@ -27,7 +27,7 @@ bin/rails generate inertia:install
 This command will:
 - Check for Vite Rails and install it if not present
 - Ask if you want to use TypeScript
-- Ask you to choose your preferred frontend framework (React, Vue, or Svelte)
+- Ask you to choose your preferred frontend framework (React, Vue, Svelte 4, or Svelte 5)
 - Ask if you want to install Tailwind CSS
 - Install necessary dependencies
 - Set up the application to work with Inertia
@@ -52,7 +52,7 @@ Vite Rails gem successfully installed
 Vite Rails successfully installed
 Would you like to use TypeScript? (y/n) y
 Adding TypeScript support
-What framework do you want to use with Inertia? [react, vue, svelte] (react)
+What framework do you want to use with Inertia? [react, vue, svelte4, svelte] (react)
          run  npm add @types/react @types/react-dom typescript --silent from "."
 Would you like to install Tailwind CSS? (y/n) y
 Installing Tailwind CSS
diff --git a/lib/generators/inertia/install/frameworks.yml b/lib/generators/inertia/install/frameworks.yml
index 8868514..6a11dc6 100644
--- a/lib/generators/inertia/install/frameworks.yml
+++ b/lib/generators/inertia/install/frameworks.yml
@@ -47,13 +47,38 @@ vue:
   copy_files_js:
     "InertiaExample.vue": "%{js_destination_path}/pages/InertiaExample.vue"
 
+svelte4:
+  inertia_package: "@inertiajs/svelte"
+  packages:
+    - "svelte@4"
+    - "@sveltejs/vite-plugin-svelte@3"
+  packages_ts:
+    - "@tsconfig/svelte@4"
+    - "svelte-check"
+    - "typescript"
+    - "tslib"
+  vite_plugin_import: "import { svelte } from '@sveltejs/vite-plugin-svelte'"
+  vite_plugin_call: "svelte()"
+  copy_files_ts:
+    "InertiaExample.ts.svelte": "%{js_destination_path}/pages/InertiaExample.svelte"
+    "tsconfig.json": "tsconfig.json"
+    "tsconfig.node.json": "tsconfig.node.json"
+    "vite-env.d.ts": "%{js_destination_path}/vite-env.d.ts"
+  copy_files_js:
+    "InertiaExample.svelte": "%{js_destination_path}/pages/InertiaExample.svelte"
+  copy_files:
+    "svelte.config.js": "svelte.config.js"
+    "../assets/svelte.svg": "%{js_destination_path}/assets/svelte.svg"
+    "../assets/inertia.svg": "%{js_destination_path}/assets/inertia.svg"
+    "../assets/vite_ruby.svg": "%{js_destination_path}/assets/vite_ruby.svg"
+
 svelte:
   inertia_package: "@inertiajs/svelte"
   packages:
-    - "svelte"
-    - "@sveltejs/vite-plugin-svelte"
+    - "svelte@5"
+    - "@sveltejs/vite-plugin-svelte@4"
   packages_ts:
-    - "@tsconfig/svelte"
+    - "@tsconfig/svelte@5"
     - "svelte-check"
     - "typescript"
     - "tslib"
diff --git a/lib/generators/inertia/install/install_generator.rb b/lib/generators/inertia/install/install_generator.rb
index f124183..8315216 100644
--- a/lib/generators/inertia/install/install_generator.rb
+++ b/lib/generators/inertia/install/install_generator.rb
@@ -99,7 +99,7 @@ def install_inertia
             insert_into_file application_layout.to_s, "<%= vite_react_refresh_tag %>\n    ", before: "<%= vite_client_tag %>"
           end
 
-          gsub_file application_layout.to_s, /<title>/, "<title inertia>" if framework != "svelte"
+          gsub_file application_layout.to_s, /<title>/, "<title inertia>" unless svelte?
         else
           say_error "Could not find the application layout file. Please add the following tags manually:", :red
           say_error "-  <title>...</title>"
@@ -112,7 +112,7 @@ def install_inertia
 
       def install_typescript
         say "Adding TypeScript support"
-        if framework == "svelte" && inertia_resolved_version.release < Gem::Version.new("1.3.0")
+        if svelte? && inertia_resolved_version.release < Gem::Version.new("1.3.0")
           say "WARNING: @inertiajs/svelte < 1.3.0 does not support TypeScript (resolved version: #{inertia_resolved_version}).", :yellow
           say "Skipping TypeScript support for @inertiajs/svelte", :yellow
           @typescript = false
@@ -270,6 +270,10 @@ def verbose?
         options[:verbose]
       end
 
+      def svelte?
+        framework.start_with? "svelte"
+      end
+
       def inertia_package
         "#{FRAMEWORKS[framework]["inertia_package"]}@#{options[:inertia_version]}"
       end
diff --git a/lib/generators/inertia/install/templates/react/inertia.ts b/lib/generators/inertia/install/templates/react/inertia.ts
index b6017fe..4ef3a28 100644
--- a/lib/generators/inertia/install/templates/react/inertia.ts
+++ b/lib/generators/inertia/install/templates/react/inertia.ts
@@ -16,14 +16,14 @@ createInertiaApp({
   // progress: false,
 
   resolve: (name) => {
-    const pages = import.meta.glob('../pages/**/*.tsx', { eager: true })
-    return pages[`../pages/${name}.tsx`] as ResolvedComponent
+    const pages = import.meta.glob<ResolvedComponent>('../pages/**/*.tsx', { eager: true })
+    return pages[`../pages/${name}.tsx`]
 
     // To use a default layout, import the Layout component
     // and use the following lines.
     // see https://inertia-rails.netlify.app/guide/pages#default-layouts
     //
-    // const page = pages[`../pages/${name}.tsx`] as ResolvedComponent
+    // const page = pages[`../pages/${name}.tsx`]
     // page.default.layout ||= (page) => createElement(Layout, null, page)
     // return page
   },
diff --git a/lib/generators/inertia/install/templates/svelte/InertiaExample.svelte b/lib/generators/inertia/install/templates/svelte/InertiaExample.svelte
index 96785fe..4c6d294 100644
--- a/lib/generators/inertia/install/templates/svelte/InertiaExample.svelte
+++ b/lib/generators/inertia/install/templates/svelte/InertiaExample.svelte
@@ -3,13 +3,9 @@
   import inertiaSvg from '/assets/inertia.svg'
   import viteRubySvg from '/assets/vite_ruby.svg'
 
-  export let name
+  let { name } = $props()
 
-  let count = 0
-
-  function handleClick() {
-    count += 1
-  }
+  let count = $state(0)
 </script>
 
 <svelte:head>
@@ -34,7 +30,7 @@
   <h2>Inertia + Vite Ruby + Svelte</h2>
 
   <div class="card">
-    <button on:click={handleClick}>
+    <button onclick={() => count++}>
       count is {count}
     </button>
     <p>
diff --git a/lib/generators/inertia/install/templates/svelte/InertiaExample.ts.svelte b/lib/generators/inertia/install/templates/svelte/InertiaExample.ts.svelte
index b0d42e3..0ed1c7d 100644
--- a/lib/generators/inertia/install/templates/svelte/InertiaExample.ts.svelte
+++ b/lib/generators/inertia/install/templates/svelte/InertiaExample.ts.svelte
@@ -3,13 +3,9 @@
   import inertiaSvg from '/assets/inertia.svg'
   import viteRubySvg from '/assets/vite_ruby.svg'
 
-  export let name: string
+  let { name }: { name: string } = $props()
 
-  let count = 0
-
-  function handleClick() {
-    count += 1
-  }
+  let count = $state(0)
 </script>
 
 <svelte:head>
@@ -34,7 +30,7 @@
   <h2>Inertia + Vite Ruby + Svelte</h2>
 
   <div class="card">
-    <button on:click={handleClick}>
+    <button onclick={() => count++}>
       count is {count}
     </button>
     <p>
diff --git a/lib/generators/inertia/install/templates/svelte/inertia.js b/lib/generators/inertia/install/templates/svelte/inertia.js
index 19c3a31..1ea6c22 100644
--- a/lib/generators/inertia/install/templates/svelte/inertia.js
+++ b/lib/generators/inertia/install/templates/svelte/inertia.js
@@ -1,4 +1,5 @@
 import { createInertiaApp } from '@inertiajs/svelte'
+import  { mount } from 'svelte';
 
 createInertiaApp({
   // Set default page title
@@ -23,7 +24,7 @@ createInertiaApp({
     // return { default: page.default, layout: page.layout || Layout }
   },
 
-  setup({ el, App }) {
-    new App({ target: el })
+  setup({ el, App, props }) {
+    mount(App, { target: el, props })
   },
 })
diff --git a/lib/generators/inertia/install/templates/svelte/inertia.ts b/lib/generators/inertia/install/templates/svelte/inertia.ts
index 93210da..d6d55cd 100644
--- a/lib/generators/inertia/install/templates/svelte/inertia.ts
+++ b/lib/generators/inertia/install/templates/svelte/inertia.ts
@@ -1,7 +1,5 @@
-import { createInertiaApp } from '@inertiajs/svelte'
-import type { ComponentType } from 'svelte';
-
-type ResolvedComponent = { default: ComponentType, layout?: ComponentType }
+import { createInertiaApp, type ResolvedComponent } from '@inertiajs/svelte'
+import { mount } from 'svelte'
 
 createInertiaApp({
   // Set default page title
@@ -15,18 +13,18 @@ createInertiaApp({
   // progress: false,
 
   resolve: (name) => {
-    const pages = import.meta.glob('../pages/**/*.svelte', { eager: true })
-    return pages[`../pages/${name}.svelte`] as ResolvedComponent
+    const pages = import.meta.glob<ResolvedComponent>('../pages/**/*.svelte', { eager: true })
+    return pages[`../pages/${name}.svelte`]
 
     // To use a default layout, import the Layout component
     // and use the following lines.
     // see https://inertia-rails.netlify.app/guide/pages#default-layouts
     //
-    // const page = pages[`../pages/${name}.svelte`] as ResolvedComponent
+    // const page = pages[`../pages/${name}.svelte`]
     // return { default: page.default, layout: page.layout || Layout }
   },
 
-  setup({ el, App }) {
-    new App({ target: el })
+  setup({ el, App, props }) {
+    mount(App, { target: el, props })
   },
 })
diff --git a/lib/generators/inertia/install/templates/svelte4/InertiaExample.svelte b/lib/generators/inertia/install/templates/svelte4/InertiaExample.svelte
new file mode 100644
index 0000000..96785fe
--- /dev/null
+++ b/lib/generators/inertia/install/templates/svelte4/InertiaExample.svelte
@@ -0,0 +1,116 @@
+<script>
+  import svelteSvg from '/assets/svelte.svg'
+  import inertiaSvg from '/assets/inertia.svg'
+  import viteRubySvg from '/assets/vite_ruby.svg'
+
+  export let name
+
+  let count = 0
+
+  function handleClick() {
+    count += 1
+  }
+</script>
+
+<svelte:head>
+  <title>Inertia + Vite Ruby + Svelte Example</title>
+</svelte:head>
+
+<div class="inertia_example">
+  <h1>Hello {name}!</h1>
+
+  <div>
+    <a href="https://inertia-rails.netlify.app" target="_blank">
+      <img class="logo" src={inertiaSvg} alt="Inertia logo" />
+    </a>
+    <a href="https://vite-ruby.netlify.app" target="_blank">
+      <img class="logo vite" src={viteRubySvg} alt="Vite Ruby logo" />
+    </a>
+    <a href="https://svelte.dev" target="_blank">
+      <img class="logo svelte" src={svelteSvg} alt="Svelte logo" />
+    </a>
+  </div>
+
+  <h2>Inertia + Vite Ruby + Svelte</h2>
+
+  <div class="card">
+    <button on:click={handleClick}>
+      count is {count}
+    </button>
+    <p>
+      Edit <code>app/frontend/pages/InertiaExample.svelte</code> and save to test
+      HMR
+    </p>
+  </div>
+  <p class="read-the-docs">
+    Click on the Inertia, Vite Ruby, and Svelte logos to learn more
+  </p>
+</div>
+
+<style>
+  .inertia_example {
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
+    color: #213547;
+    background-color: #ffffff;
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+  }
+
+  h1 {
+    font-size: 3.2em;
+    line-height: 1.1;
+  }
+
+  h2 {
+    font-size: 2.6em;
+    line-height: 1.1;
+  }
+
+  button {
+    border-radius: 8px;
+    border: 1px solid transparent;
+    padding: 0.6em 1.2em;
+    font-size: 1em;
+    font-weight: 500;
+    font-family: inherit;
+    background-color: #f9f9f9;
+    cursor: pointer;
+    transition: border-color 0.25s;
+  }
+  button:hover {
+    border-color: #646cff;
+  }
+  button:focus,
+  button:focus-visible {
+    outline: 4px auto -webkit-focus-ring-color;
+  }
+
+  .logo {
+    display: inline-block;
+    height: 6em;
+    padding: 1.5em;
+    will-change: filter;
+    transition: filter 300ms;
+  }
+  .logo:hover {
+    filter: drop-shadow(0 0 2em #646cffaa);
+  }
+  .logo.vite:hover {
+    filter: drop-shadow(0 0 2em #e4023baa);
+  }
+  .logo.svelte:hover {
+    filter: drop-shadow(0 0 2em #ff3e00aa);
+  }
+
+  .card {
+    padding: 2em;
+  }
+
+  .read-the-docs {
+    color: #888;
+  }
+</style>
diff --git a/lib/generators/inertia/install/templates/svelte4/InertiaExample.ts.svelte b/lib/generators/inertia/install/templates/svelte4/InertiaExample.ts.svelte
new file mode 100644
index 0000000..b0d42e3
--- /dev/null
+++ b/lib/generators/inertia/install/templates/svelte4/InertiaExample.ts.svelte
@@ -0,0 +1,116 @@
+<script lang="ts">
+  import svelteSvg from '/assets/svelte.svg'
+  import inertiaSvg from '/assets/inertia.svg'
+  import viteRubySvg from '/assets/vite_ruby.svg'
+
+  export let name: string
+
+  let count = 0
+
+  function handleClick() {
+    count += 1
+  }
+</script>
+
+<svelte:head>
+  <title>Inertia + Vite Ruby + Svelte Example</title>
+</svelte:head>
+
+<div class="inertia_example">
+  <h1>Hello {name}!</h1>
+
+  <div>
+    <a href="https://inertia-rails.netlify.app" target="_blank">
+      <img class="logo" src={inertiaSvg} alt="Inertia logo" />
+    </a>
+    <a href="https://vite-ruby.netlify.app" target="_blank">
+      <img class="logo vite" src={viteRubySvg} alt="Vite Ruby logo" />
+    </a>
+    <a href="https://svelte.dev" target="_blank">
+      <img class="logo svelte" src={svelteSvg} alt="Svelte logo" />
+    </a>
+  </div>
+
+  <h2>Inertia + Vite Ruby + Svelte</h2>
+
+  <div class="card">
+    <button on:click={handleClick}>
+      count is {count}
+    </button>
+    <p>
+      Edit <code>app/frontend/pages/InertiaExample.svelte</code> and save to test
+      HMR
+    </p>
+  </div>
+  <p class="read-the-docs">
+    Click on the Inertia, Vite Ruby, and Svelte logos to learn more
+  </p>
+</div>
+
+<style>
+  .inertia_example {
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
+    color: #213547;
+    background-color: #ffffff;
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+  }
+
+  h1 {
+    font-size: 3.2em;
+    line-height: 1.1;
+  }
+
+  h2 {
+    font-size: 2.6em;
+    line-height: 1.1;
+  }
+
+  button {
+    border-radius: 8px;
+    border: 1px solid transparent;
+    padding: 0.6em 1.2em;
+    font-size: 1em;
+    font-weight: 500;
+    font-family: inherit;
+    background-color: #f9f9f9;
+    cursor: pointer;
+    transition: border-color 0.25s;
+  }
+  button:hover {
+    border-color: #646cff;
+  }
+  button:focus,
+  button:focus-visible {
+    outline: 4px auto -webkit-focus-ring-color;
+  }
+
+  .logo {
+    display: inline-block;
+    height: 6em;
+    padding: 1.5em;
+    will-change: filter;
+    transition: filter 300ms;
+  }
+  .logo:hover {
+    filter: drop-shadow(0 0 2em #646cffaa);
+  }
+  .logo.vite:hover {
+    filter: drop-shadow(0 0 2em #e4023baa);
+  }
+  .logo.svelte:hover {
+    filter: drop-shadow(0 0 2em #ff3e00aa);
+  }
+
+  .card {
+    padding: 2em;
+  }
+
+  .read-the-docs {
+    color: #888;
+  }
+</style>
diff --git a/lib/generators/inertia/install/templates/svelte4/inertia.js b/lib/generators/inertia/install/templates/svelte4/inertia.js
new file mode 100644
index 0000000..7c288a6
--- /dev/null
+++ b/lib/generators/inertia/install/templates/svelte4/inertia.js
@@ -0,0 +1,29 @@
+import { createInertiaApp } from '@inertiajs/svelte'
+
+createInertiaApp({
+  // Set default page title
+  // see https://inertia-rails.netlify.app/guide/title-and-meta
+  //
+  // title: title => title ? `${title} - App` : 'App',
+
+  // Disable progress bar
+  //
+  // see https://inertia-rails.netlify.app/guide/progress-indicators
+  // progress: false,
+
+  resolve: (name) => {
+    const pages = import.meta.glob('../pages/**/*.svelte', { eager: true })
+    return pages[`../pages/${name}.svelte`]
+
+    // To use a default layout, import the Layout component
+    // and use the following lines.
+    // see https://inertia-rails.netlify.app/guide/pages#default-layouts
+    //
+    // const page = pages[`../pages/${name}.svelte`]
+    // return { default: page.default, layout: page.layout || Layout }
+  },
+
+  setup({ el, App, props }) {
+    new App({ target: el, props })
+  },
+})
diff --git a/lib/generators/inertia/install/templates/svelte4/inertia.ts b/lib/generators/inertia/install/templates/svelte4/inertia.ts
new file mode 100644
index 0000000..a4a7549
--- /dev/null
+++ b/lib/generators/inertia/install/templates/svelte4/inertia.ts
@@ -0,0 +1,29 @@
+import { createInertiaApp, type ResolvedComponent } from '@inertiajs/svelte'
+
+createInertiaApp({
+  // Set default page title
+  // see https://inertia-rails.netlify.app/guide/title-and-meta
+  //
+  // title: title => title ? `${title} - App` : 'App',
+
+  // Disable progress bar
+  //
+  // see https://inertia-rails.netlify.app/guide/progress-indicators
+  // progress: false,
+
+  resolve: (name) => {
+    const pages = import.meta.glob<ResolvedComponent>('../pages/**/*.svelte', { eager: true })
+    return pages[`../pages/${name}.svelte`]
+
+    // To use a default layout, import the Layout component
+    // and use the following lines.
+    // see https://inertia-rails.netlify.app/guide/pages#default-layouts
+    //
+    // const page = pages[`../pages/${name}.svelte`]
+    // return { default: page.default, layout: page.layout || Layout }
+  },
+
+  setup({ el, App, props }) {
+    new App({ target: el, props })
+  },
+})
diff --git a/lib/generators/inertia/install/templates/svelte4/svelte.config.js b/lib/generators/inertia/install/templates/svelte4/svelte.config.js
new file mode 100644
index 0000000..b0683fd
--- /dev/null
+++ b/lib/generators/inertia/install/templates/svelte4/svelte.config.js
@@ -0,0 +1,7 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+export default {
+  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+}
diff --git a/lib/generators/inertia/install/templates/svelte4/tsconfig.json b/lib/generators/inertia/install/templates/svelte4/tsconfig.json
new file mode 100644
index 0000000..acbc1cd
--- /dev/null
+++ b/lib/generators/inertia/install/templates/svelte4/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "resolveJsonModule": true,
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable checkJs if you'd like to use dynamic types in JS.
+     * Note that setting allowJs false does not prevent the use
+     * of JS in `.svelte` files.
+     */
+    "allowJs": true,
+    "checkJs": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+  },
+  "include": ["<%= js_destination_path %>/**/*.ts", "<%= js_destination_path %>/**/*.js", "<%= js_destination_path %>/**/*.svelte"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/lib/generators/inertia/install/templates/svelte4/tsconfig.node.json b/lib/generators/inertia/install/templates/svelte4/tsconfig.node.json
new file mode 100644
index 0000000..3126cd7
--- /dev/null
+++ b/lib/generators/inertia/install/templates/svelte4/tsconfig.node.json
@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noEmit": true,
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/lib/generators/inertia/install/templates/svelte4/vite-env.d.ts b/lib/generators/inertia/install/templates/svelte4/vite-env.d.ts
new file mode 100644
index 0000000..4078e74
--- /dev/null
+++ b/lib/generators/inertia/install/templates/svelte4/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
diff --git a/lib/generators/inertia/install/templates/vue/inertia.ts b/lib/generators/inertia/install/templates/vue/inertia.ts
index e9cb4cb..b4c62d6 100644
--- a/lib/generators/inertia/install/templates/vue/inertia.ts
+++ b/lib/generators/inertia/install/templates/vue/inertia.ts
@@ -13,14 +13,14 @@ createInertiaApp({
   // progress: false,
 
   resolve: (name) => {
-    const pages = import.meta.glob('../pages/**/*.vue', { eager: true })
-    return pages[`../pages/${name}.vue`] as DefineComponent
+    const pages = import.meta.glob<DefineComponent>('../pages/**/*.vue', { eager: true })
+    return pages[`../pages/${name}.vue`]
 
     // To use a default layout, import the Layout component
     // and use the following lines.
     // see https://inertia-rails.netlify.app/guide/pages#default-layouts
     //
-    // const page = pages[`../pages/${name}.vue`] as DefineComponent
+    // const page = pages[`../pages/${name}.vue`]
     // page.default.layout = page.default.layout || Layout
     // return page
   },
diff --git a/lib/generators/inertia_templates/controller/templates/svelte4/view.svelte.tt b/lib/generators/inertia_templates/controller/templates/svelte4/view.svelte.tt
new file mode 100644
index 0000000..cd54d13
--- /dev/null
+++ b/lib/generators/inertia_templates/controller/templates/svelte4/view.svelte.tt
@@ -0,0 +1,2 @@
+<h1><%= class_name %>#<%= @action %></h1>
+<p>Find me in <%= @path %></p>
diff --git a/lib/generators/inertia_templates/scaffold/templates/react/Form.jsx.tt b/lib/generators/inertia_templates/scaffold/templates/react/Form.jsx.tt
index 2707eaa..648269c 100644
--- a/lib/generators/inertia_templates/scaffold/templates/react/Form.jsx.tt
+++ b/lib/generators/inertia_templates/scaffold/templates/react/Form.jsx.tt
@@ -73,7 +73,7 @@ export default function Form({ <%= singular_table_name %>, onSubmit, submitText
 <% elsif attribute.attachments? -%>
         <input
           type="file"
-          multiple="multiple"
+          multiple
           name="<%= attribute.singular_name %>[]"
           id="<%= attribute.singular_name %>"
           onChange={(e) => setData('<%= attribute.column_name %>', Array.from(e.target.files))}
diff --git a/lib/generators/inertia_templates/scaffold/templates/svelte/Edit.svelte.tt b/lib/generators/inertia_templates/scaffold/templates/svelte/Edit.svelte.tt
index 8f45c81..60b691e 100644
--- a/lib/generators/inertia_templates/scaffold/templates/svelte/Edit.svelte.tt
+++ b/lib/generators/inertia_templates/scaffold/templates/svelte/Edit.svelte.tt
@@ -2,10 +2,9 @@
   import { Link } from '@inertiajs/svelte'
   import Form from './Form.svelte'
 
-  export let <%= singular_table_name %>
+  let { <%= singular_table_name %> } = $props()
 
-  const handleSubmit = (e) => {
-    const { form } = e.detail
+  const handleSubmit = ({ form }) => {
     form.transform((data) => ({ <%= singular_table_name %>: data }))
 <% if attributes.any?(&:attachments?) -%>
     form.post(`<%= js_resource_path %>`, {
@@ -26,7 +25,7 @@
 <Form
   {<%= singular_table_name %>}
   submitText="Update <%= human_name.downcase %>"
-  on:submit={handleSubmit}
+  onSubmit={handleSubmit}
 />
 
 <br />
diff --git a/lib/generators/inertia_templates/scaffold/templates/svelte/Form.svelte.tt b/lib/generators/inertia_templates/scaffold/templates/svelte/Form.svelte.tt
index c9f1c89..c0ef8c2 100644
--- a/lib/generators/inertia_templates/scaffold/templates/svelte/Form.svelte.tt
+++ b/lib/generators/inertia_templates/scaffold/templates/svelte/Form.svelte.tt
@@ -2,10 +2,7 @@
   import { useForm } from '@inertiajs/svelte'
   import { createEventDispatcher } from 'svelte'
 
-  const dispatch = createEventDispatcher()
-
-  export let <%= singular_table_name %>
-  export let submitText
+  let { <%= singular_table_name %>, submitText, onSubmit } = $props()
 
   const form = useForm({
 <% attributes.each do |attribute| -%>
@@ -17,9 +14,14 @@
 <% end -%>
 <% end -%>
   })
+
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    onSubmit({form: $form })
+  }
 </script>
 
-<form on:submit|preventDefault={dispatch('submit', { form: $form })}>
+<form onsubmit={handleSubmit}>
 <% attributes.each do |attribute| -%>
 <% if attribute.password_digest? -%>
   <div>
@@ -51,28 +53,28 @@
   <div>
     <label for="<%= attribute.singular_name %>"><%= attribute.human_name %></label>
 <% if input_type(attribute) == "text_area" -%>
-    <textarea name="<%= attribute.singular_name %>" id="<%= attribute.singular_name %>" bind:value={$form.<%= attribute.column_name %>} />
+    <textarea name="<%= attribute.singular_name %>" id="<%= attribute.singular_name %>" bind:value={$form.<%= attribute.column_name %>}></textarea>
 <% elsif attribute.attachment? -%>
     <input
       type="file"
       name="<%= attribute.singular_name %>"
       id="<%= attribute.singular_name %>"
-      on:input={(e) => ($form.<%= attribute.column_name %> = e.target.files[0])}
+      oninput={(e) => ($form.<%= attribute.column_name %> = e.target.files[0])}
     />
 <% elsif attribute.attachments? -%>
     <input
       type="file"
-      multiple="multiple"
+      multiple
       name="<%= attribute.singular_name %>[]"
       id="<%= attribute.singular_name %>"
-      on:input={(e) => ($form.<%= attribute.column_name %> = Array.from(e.target.files))}
+      oninput={(e) => ($form.<%= attribute.column_name %> = Array.from(e.target.files))}
     />
 <% else -%>
     <input
       type="<%= input_type(attribute) %>"
       name="<%= attribute.singular_name %>"
       id="<%= attribute.singular_name %>"
-      bind:value={$form.<%= attribute.column_name %>}
+      <%= input_type(attribute) == "checkbox" ? "bind:checked" : "bind:value" %>={$form.<%= attribute.column_name %>}
     />
 <% end -%>
     {#if $form.errors.<%= attribute.column_name %>}
diff --git a/lib/generators/inertia_templates/scaffold/templates/svelte/Index.svelte.tt b/lib/generators/inertia_templates/scaffold/templates/svelte/Index.svelte.tt
index d7af851..e8a7e7d 100644
--- a/lib/generators/inertia_templates/scaffold/templates/svelte/Index.svelte.tt
+++ b/lib/generators/inertia_templates/scaffold/templates/svelte/Index.svelte.tt
@@ -2,14 +2,7 @@
   import { Link } from '@inertiajs/svelte'
   import <%= inertia_component_name %> from './<%= inertia_component_name %>.svelte'
 
-  export let <%= plural_table_name %>
-  export let flash
-
-  const onDestroy = (e) => {
-    if (!confirm('Are you sure you want to delete this <%= human_name.downcase %>?')) {
-      e.preventDefault()
-    }
-  }
+  let { <%= plural_table_name %>, flash } = $props()
 </script>
 
 <svelte:head>
diff --git a/lib/generators/inertia_templates/scaffold/templates/svelte/New.svelte.tt b/lib/generators/inertia_templates/scaffold/templates/svelte/New.svelte.tt
index 6238cd2..d46b465 100644
--- a/lib/generators/inertia_templates/scaffold/templates/svelte/New.svelte.tt
+++ b/lib/generators/inertia_templates/scaffold/templates/svelte/New.svelte.tt
@@ -2,10 +2,9 @@
   import { Link } from '@inertiajs/svelte'
   import Form from './Form.svelte'
 
-  export let <%= singular_table_name %>
+  let { <%= singular_table_name %> } = $props()
 
-  const handleSubmit = (e) => {
-    const { form } = e.detail
+  const handleSubmit = ({ form }) => {
     form.transform((data) => ({ <%= singular_table_name %>: data }))
     form.post('<%= js_resources_path %>')
   }
@@ -20,7 +19,7 @@
 <Form
   {<%= singular_table_name %>}
   submitText="Create <%= human_name.downcase %>"
-  on:submit={handleSubmit}
+  onSubmit={handleSubmit}
 />
 
 <br />
diff --git a/lib/generators/inertia_templates/scaffold/templates/svelte/One.svelte.tt b/lib/generators/inertia_templates/scaffold/templates/svelte/One.svelte.tt
index 01b918a..717b129 100644
--- a/lib/generators/inertia_templates/scaffold/templates/svelte/One.svelte.tt
+++ b/lib/generators/inertia_templates/scaffold/templates/svelte/One.svelte.tt
@@ -1,5 +1,5 @@
 <script>
-  export let <%= singular_table_name %>
+  let { <%= singular_table_name %> } = $props()
 </script>
 
 <div>
diff --git a/lib/generators/inertia_templates/scaffold/templates/svelte/Show.svelte.tt b/lib/generators/inertia_templates/scaffold/templates/svelte/Show.svelte.tt
index c165323..065a058 100644
--- a/lib/generators/inertia_templates/scaffold/templates/svelte/Show.svelte.tt
+++ b/lib/generators/inertia_templates/scaffold/templates/svelte/Show.svelte.tt
@@ -1,9 +1,8 @@
 <script>
-  import { inertia, Link } from '@inertiajs/svelte'
+  import { Link } from '@inertiajs/svelte'
   import <%= inertia_component_name %> from './<%= inertia_component_name %>.svelte'
 
-  export let <%= singular_table_name %>
-  export let flash
+  let { <%= singular_table_name %>, flash } = $props()
 
   const onDestroy = (e) => {
     if (!confirm('Are you sure you want to delete this <%= human_name.downcase %>?')) {
@@ -30,13 +29,9 @@
 
   <br />
 
-  <button
-    use:inertia={{ href: `<%= js_resource_path %>`, method: 'delete' }}
-    on:click={onDestroy}
-    type="button"
-  >
+  <Link href={`<%= js_resource_path %>`} method="delete" onclick={onDestroy}>
     Destroy this <%= human_name.downcase %>
-  </button>
+  </Link>
 </div>
 
 <style>
diff --git a/lib/generators/inertia_templates/scaffold/templates/svelte4/Edit.svelte.tt b/lib/generators/inertia_templates/scaffold/templates/svelte4/Edit.svelte.tt
new file mode 100644
index 0000000..8f45c81
--- /dev/null
+++ b/lib/generators/inertia_templates/scaffold/templates/svelte4/Edit.svelte.tt
@@ -0,0 +1,37 @@
+<script>
+  import { Link } from '@inertiajs/svelte'
+  import Form from './Form.svelte'
+
+  export let <%= singular_table_name %>
+
+  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 -%>
+  }
+</script>
+
+<svelte:head>
+  <title>Editing <%= human_name.downcase %></title>
+</svelte:head>
+
+<h1>Editing <%= human_name.downcase %></h1>
+
+<Form
+  {<%= singular_table_name %>}
+  submitText="Update <%= human_name.downcase %>"
+  on:submit={handleSubmit}
+/>
+
+<br />
+
+<div>
+  <Link href={`<%= js_resource_path %>`}>Show this <%= human_name.downcase %></Link> |
+  <Link href="<%= js_resources_path %>">Back to <%= human_name.pluralize.downcase %></Link>
+</div>
diff --git a/lib/generators/inertia_templates/scaffold/templates/svelte4/Form.svelte.tt b/lib/generators/inertia_templates/scaffold/templates/svelte4/Form.svelte.tt
new file mode 100644
index 0000000..8519c33
--- /dev/null
+++ b/lib/generators/inertia_templates/scaffold/templates/svelte4/Form.svelte.tt
@@ -0,0 +1,96 @@
+<script>
+  import { useForm } from '@inertiajs/svelte'
+  import { createEventDispatcher } from 'svelte'
+
+  const dispatch = createEventDispatcher()
+
+  export let <%= singular_table_name %>
+  export let submitText
+
+  const form = useForm({
+<% attributes.each do |attribute| -%>
+<% if attribute.password_digest? -%>
+    password: '',
+    password_confirmation: '',
+<% else -%>
+    <%= attribute.column_name %>: <%= singular_table_name %>.<%= attribute.column_name %> || <%= default_value(attribute) %>,
+<% end -%>
+<% end -%>
+  })
+</script>
+
+<form on:submit|preventDefault={dispatch('submit', { form: $form })}>
+<% attributes.each do |attribute| -%>
+<% if attribute.password_digest? -%>
+  <div>
+    <label for="password">Password</label>
+    <input
+      type="password"
+      name="password"
+      id="password"
+      bind:value={$form.password}
+    />
+    {#if $form.errors.password}
+      <div class="error">{$form.errors.password.join(', ')}</div>
+    {/if}
+  </div>
+
+  <div>
+    <label for="password_confirmation">Password Confirmation</label>
+    <input
+      type="password"
+      name="password_confirmation"
+      id="password_confirmation"
+      bind:value={$form.password_confirmation}
+    />
+    {#if $form.errors.password_confirmation}
+      <div class="error">{$form.errors.password_confirmation.join(', ')}</div>
+    {/if}
+  </div>
+<% else -%>
+  <div>
+    <label for="<%= attribute.singular_name %>"><%= attribute.human_name %></label>
+<% if input_type(attribute) == "text_area" -%>
+    <textarea name="<%= attribute.singular_name %>" id="<%= attribute.singular_name %>" bind:value={$form.<%= attribute.column_name %>}></textarea>
+<% elsif attribute.attachment? -%>
+    <input
+      type="file"
+      name="<%= attribute.singular_name %>"
+      id="<%= attribute.singular_name %>"
+      oninput={(e) => ($form.<%= attribute.column_name %> = e.target.files[0])}
+    />
+<% elsif attribute.attachments? -%>
+    <input
+      type="file"
+      multiple
+      name="<%= attribute.singular_name %>[]"
+      id="<%= attribute.singular_name %>"
+      oninput={(e) => ($form.<%= attribute.column_name %> = Array.from(e.target.files))}
+    />
+<% else -%>
+    <input
+      type="<%= input_type(attribute) %>"
+      name="<%= attribute.singular_name %>"
+      id="<%= attribute.singular_name %>"
+      <%= input_type(attribute) == "checkbox" ? "bind:checked" : "bind:value" %>={$form.<%= attribute.column_name %>}
+    />
+<% end -%>
+    {#if $form.errors.<%= attribute.column_name %>}
+      <div class="error">{$form.errors.<%= attribute.column_name %>.join(', ')}</div>
+    {/if}
+  </div>
+<% end -%>
+<% end -%>
+  <div>
+    <button type="submit" disabled={$form.processing}>{submitText}</button>
+  </div>
+</form>
+
+<style>
+  label {
+    display: block;
+  }
+  .error {
+    color: red;
+  }
+</style>
diff --git a/lib/generators/inertia_templates/scaffold/templates/svelte4/Index.svelte.tt b/lib/generators/inertia_templates/scaffold/templates/svelte4/Index.svelte.tt
new file mode 100644
index 0000000..7164c7b
--- /dev/null
+++ b/lib/generators/inertia_templates/scaffold/templates/svelte4/Index.svelte.tt
@@ -0,0 +1,36 @@
+<script>
+  import { Link } from '@inertiajs/svelte'
+  import <%= inertia_component_name %> from './<%= inertia_component_name %>.svelte'
+
+  export let <%= plural_table_name %>
+  export let flash
+</script>
+
+<svelte:head>
+  <title><%= human_name.pluralize %></title>
+</svelte:head>
+
+{#if flash.notice}
+  <p class="notice">{flash.notice}</p>
+{/if}
+
+<h1><%= human_name.pluralize %></h1>
+
+<div>
+  {#each <%= plural_table_name %> as <%= singular_table_name %> (<%= singular_table_name %>.id)}
+    <div>
+      <<%= inertia_component_name %> {<%= singular_table_name %>} />
+      <p>
+        <Link href={`<%= js_resource_path %>`}>Show this <%= human_name.downcase %></Link>
+      </p>
+    </div>
+  {/each}
+</div>
+
+<Link href="<%= js_new_resource_path %>">New <%= human_name.downcase %></Link>
+
+<style>
+  .notice {
+    color: green;
+  }
+</style>
diff --git a/lib/generators/inertia_templates/scaffold/templates/svelte4/New.svelte.tt b/lib/generators/inertia_templates/scaffold/templates/svelte4/New.svelte.tt
new file mode 100644
index 0000000..6238cd2
--- /dev/null
+++ b/lib/generators/inertia_templates/scaffold/templates/svelte4/New.svelte.tt
@@ -0,0 +1,30 @@
+<script>
+  import { Link } from '@inertiajs/svelte'
+  import Form from './Form.svelte'
+
+  export let <%= singular_table_name %>
+
+  const handleSubmit = (e) => {
+    const { form } = e.detail
+    form.transform((data) => ({ <%= singular_table_name %>: data }))
+    form.post('<%= js_resources_path %>')
+  }
+</script>
+
+<svelte:head>
+  <title>New <%= human_name.downcase %></title>
+</svelte:head>
+
+<h1>New <%= human_name.downcase %></h1>
+
+<Form
+  {<%= singular_table_name %>}
+  submitText="Create <%= human_name.downcase %>"
+  on:submit={handleSubmit}
+/>
+
+<br />
+
+<div>
+  <Link href="<%= js_resources_path %>">Back to <%= human_name.pluralize.downcase %></Link>
+</div>
diff --git a/lib/generators/inertia_templates/scaffold/templates/svelte4/One.svelte.tt b/lib/generators/inertia_templates/scaffold/templates/svelte4/One.svelte.tt
new file mode 100644
index 0000000..01b918a
--- /dev/null
+++ b/lib/generators/inertia_templates/scaffold/templates/svelte4/One.svelte.tt
@@ -0,0 +1,28 @@
+<script>
+  export let <%= singular_table_name %>
+</script>
+
+<div>
+<% attributes.reject(&:password_digest?).each do |attribute| -%>
+  <p>
+    <strong><%= attribute.human_name %>:</strong>
+<% if attribute.attachment? -%>
+    {#if <%= singular_table_name %>.<%= attribute.column_name %>}
+      <a href={<%= singular_table_name %>.<%= attribute.column_name %>.url}>
+        {<%= singular_table_name %>.<%= attribute.column_name %>.filename}
+      </a>
+    {/if}
+  </p>
+<% elsif attribute.attachments? -%>
+  </p>
+  {#each <%= singular_table_name %>.<%= attribute.column_name %> as { url, filename }}
+    <div>
+      <a href={url}>{filename}</a>
+    </div>
+  {/each}
+<% else -%>
+    {<%= singular_table_name %>.<%= attribute.column_name %>}
+  </p>
+<% end -%>
+<% end -%>
+</div>
diff --git a/lib/generators/inertia_templates/scaffold/templates/svelte4/Show.svelte.tt b/lib/generators/inertia_templates/scaffold/templates/svelte4/Show.svelte.tt
new file mode 100644
index 0000000..c165323
--- /dev/null
+++ b/lib/generators/inertia_templates/scaffold/templates/svelte4/Show.svelte.tt
@@ -0,0 +1,46 @@
+<script>
+  import { inertia, Link } from '@inertiajs/svelte'
+  import <%= inertia_component_name %> from './<%= inertia_component_name %>.svelte'
+
+  export let <%= singular_table_name %>
+  export let flash
+
+  const onDestroy = (e) => {
+    if (!confirm('Are you sure you want to delete this <%= human_name.downcase %>?')) {
+      e.preventDefault()
+    }
+  }
+</script>
+
+<svelte:head>
+  <title><%= human_name %> #{<%= singular_table_name %>.id}</title>
+</svelte:head>
+
+{#if flash.notice}
+  <p class="notice">{flash.notice}</p>
+{/if}
+
+<h1><%= human_name %> #{<%= singular_table_name %>.id}</h1>
+
+<<%= inertia_component_name %> {<%= singular_table_name %>} />
+
+<div>
+  <Link href={`<%= js_edit_resource_path %>`}>Edit this <%= human_name.downcase %></Link> |
+  <Link href="<%= js_resources_path %>">Back to <%= human_name.pluralize.downcase %></Link>
+
+  <br />
+
+  <button
+    use:inertia={{ href: `<%= js_resource_path %>`, method: 'delete' }}
+    on:click={onDestroy}
+    type="button"
+  >
+    Destroy this <%= human_name.downcase %>
+  </button>
+</div>
+
+<style>
+  .notice {
+    color: green;
+  }
+</style>
diff --git a/lib/generators/inertia_templates/scaffold/templates/vue/Form.vue.tt b/lib/generators/inertia_templates/scaffold/templates/vue/Form.vue.tt
index 2833782..226d933 100644
--- a/lib/generators/inertia_templates/scaffold/templates/vue/Form.vue.tt
+++ b/lib/generators/inertia_templates/scaffold/templates/vue/Form.vue.tt
@@ -44,7 +44,7 @@
 <% elsif attribute.attachments? -%>
       <input
         type="file"
-        multiple="multiple"
+        multiple
         name="<%= attribute.singular_name %>[]"
         id="<%= attribute.singular_name %>"
         @input="form.<%= attribute.column_name %> = Array.from($event.target.files)"
diff --git a/lib/generators/inertia_tw_templates/controller/templates/svelte4/view.svelte.tt b/lib/generators/inertia_tw_templates/controller/templates/svelte4/view.svelte.tt
new file mode 100644
index 0000000..764fff8
--- /dev/null
+++ b/lib/generators/inertia_tw_templates/controller/templates/svelte4/view.svelte.tt
@@ -0,0 +1,2 @@
+<h1 class="font-bold text-4xl"><%= class_name %>#<%= @action %></h1>
+<p>Find me in <%= @path %></p>
diff --git a/lib/generators/inertia_tw_templates/scaffold/templates/react/Form.jsx.tt b/lib/generators/inertia_tw_templates/scaffold/templates/react/Form.jsx.tt
index 7b58710..06e3127 100644
--- a/lib/generators/inertia_tw_templates/scaffold/templates/react/Form.jsx.tt
+++ b/lib/generators/inertia_tw_templates/scaffold/templates/react/Form.jsx.tt
@@ -74,7 +74,7 @@ export default function Form({ <%= singular_table_name %>, onSubmit, submitText
 <% elsif attribute.attachments? -%>
         <input
           type="file"
-          multiple="multiple"
+          multiple
           name="<%= attribute.singular_name %>[]"
           id="<%= attribute.singular_name %>"
           className="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
diff --git a/lib/generators/inertia_tw_templates/scaffold/templates/svelte/Edit.svelte.tt b/lib/generators/inertia_tw_templates/scaffold/templates/svelte/Edit.svelte.tt
index 13728cf..18192e5 100644
--- a/lib/generators/inertia_tw_templates/scaffold/templates/svelte/Edit.svelte.tt
+++ b/lib/generators/inertia_tw_templates/scaffold/templates/svelte/Edit.svelte.tt
@@ -2,10 +2,9 @@
   import { Link } from '@inertiajs/svelte'
   import Form from './Form.svelte'
 
-  export let <%= singular_table_name %>
+  let { <%= singular_table_name %> } = $props()
 
-  const handleSubmit = (e) => {
-    const { form } = e.detail
+  const handleSubmit = ({ form }) => {
     form.transform((data) => ({ <%= singular_table_name %>: data }))
 <% if attributes.any?(&:attachments?) -%>
     form.post(`<%= js_resource_path %>`, {
@@ -27,7 +26,7 @@
   <Form
     {<%= singular_table_name %>}
     submitText="Update <%= human_name.downcase %>"
-    on:submit={handleSubmit}
+    onSubmit={handleSubmit}
   />
 
   <Link
diff --git a/lib/generators/inertia_tw_templates/scaffold/templates/svelte/Form.svelte.tt b/lib/generators/inertia_tw_templates/scaffold/templates/svelte/Form.svelte.tt
index b8c616f..dc8313c 100644
--- a/lib/generators/inertia_tw_templates/scaffold/templates/svelte/Form.svelte.tt
+++ b/lib/generators/inertia_tw_templates/scaffold/templates/svelte/Form.svelte.tt
@@ -2,10 +2,7 @@
   import { useForm } from '@inertiajs/svelte'
   import { createEventDispatcher } from 'svelte'
 
-  const dispatch = createEventDispatcher()
-
-  export let <%= singular_table_name %>
-  export let submitText
+  let { <%= singular_table_name %>, submitText, onSubmit } = $props()
 
   const form = useForm({
 <% attributes.each do |attribute| -%>
@@ -17,12 +14,14 @@
 <% end -%>
 <% end -%>
   })
+
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    onSubmit({form: $form })
+  }
 </script>
 
-<form
-  class="contents"
-  on:submit|preventDefault={dispatch('submit', { form: $form })}
->
+<form class="contents" onsubmit={handleSubmit}>
 <% attributes.each do |attribute| -%>
   <div class="my-5">
 <% if attribute.password_digest? -%>
@@ -64,22 +63,22 @@
       bind:value={$form.<%= attribute.column_name %>}
       rows="4"
       class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
-    />
+    ></textarea>
 <% elsif attribute.attachment? -%>
     <input
       type="file"
       name="<%= attribute.singular_name %>"
       id="<%= attribute.singular_name %>"
-      on:input={(e) => ($form.<%= attribute.column_name %> = e.target.files[0])}
+      oninput={(e) => ($form.<%= attribute.column_name %> = e.target.files[0])}
       class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
     />
 <% elsif attribute.attachments? -%>
     <input
       type="file"
-      multiple="multiple"
+      multiple
       name="<%= attribute.singular_name %>[]"
       id="<%= attribute.singular_name %>"
-      on:input={(e) => ($form.<%= attribute.column_name %> = Array.from(e.target.files))}
+      oninput={(e) => ($form.<%= attribute.column_name %> = Array.from(e.target.files))}
       class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
     />
 <% elsif attribute.field_type == :check_box -%>
diff --git a/lib/generators/inertia_tw_templates/scaffold/templates/svelte/Index.svelte.tt b/lib/generators/inertia_tw_templates/scaffold/templates/svelte/Index.svelte.tt
index f786e87..2be8bfa 100644
--- a/lib/generators/inertia_tw_templates/scaffold/templates/svelte/Index.svelte.tt
+++ b/lib/generators/inertia_tw_templates/scaffold/templates/svelte/Index.svelte.tt
@@ -2,14 +2,7 @@
   import { Link } from '@inertiajs/svelte'
   import <%= inertia_component_name %> from './<%= inertia_component_name %>.svelte'
 
-  export let <%= plural_table_name %>
-  export let flash
-
-  const onDestroy = (e) => {
-    if (!confirm('Are you sure you want to delete this <%= human_name.downcase %>?')) {
-      e.preventDefault()
-    }
-  }
+  let { <%= plural_table_name %>, flash } = $props()
 </script>
 
 <svelte:head>
diff --git a/lib/generators/inertia_tw_templates/scaffold/templates/svelte/New.svelte.tt b/lib/generators/inertia_tw_templates/scaffold/templates/svelte/New.svelte.tt
index dc3b0a1..d92a6f6 100644
--- a/lib/generators/inertia_tw_templates/scaffold/templates/svelte/New.svelte.tt
+++ b/lib/generators/inertia_tw_templates/scaffold/templates/svelte/New.svelte.tt
@@ -2,10 +2,9 @@
   import { Link } from '@inertiajs/svelte'
   import Form from './Form.svelte'
 
-  export let <%= singular_table_name %>
+  let { <%= singular_table_name %> } = $props()
 
-  const handleSubmit = (e) => {
-    const { form } = e.detail
+  const handleSubmit = ({ form }) => {
     form.transform((data) => ({ <%= singular_table_name %>: data }))
     form.post('<%= js_resources_path %>')
   }
@@ -21,7 +20,7 @@
   <Form
     {<%= singular_table_name %>}
     submitText="Create <%= human_name.downcase %>"
-    on:submit={handleSubmit}
+    onSubmit={handleSubmit}
   />
 
   <Link
diff --git a/lib/generators/inertia_tw_templates/scaffold/templates/svelte/One.svelte.tt b/lib/generators/inertia_tw_templates/scaffold/templates/svelte/One.svelte.tt
index 42c56db..1d4697f 100644
--- a/lib/generators/inertia_tw_templates/scaffold/templates/svelte/One.svelte.tt
+++ b/lib/generators/inertia_tw_templates/scaffold/templates/svelte/One.svelte.tt
@@ -1,5 +1,5 @@
 <script>
-  export let <%= singular_table_name %>
+  let { <%= singular_table_name %> } = $props()
 </script>
 
 <div>
diff --git a/lib/generators/inertia_tw_templates/scaffold/templates/svelte/Show.svelte.tt b/lib/generators/inertia_tw_templates/scaffold/templates/svelte/Show.svelte.tt
index 4ceafd1..c5c6380 100644
--- a/lib/generators/inertia_tw_templates/scaffold/templates/svelte/Show.svelte.tt
+++ b/lib/generators/inertia_tw_templates/scaffold/templates/svelte/Show.svelte.tt
@@ -1,9 +1,8 @@
 <script>
-  import { inertia, Link } from '@inertiajs/svelte'
+  import { Link } from '@inertiajs/svelte'
   import <%= inertia_component_name %> from './<%= inertia_component_name %>.svelte'
 
-  export let <%= singular_table_name %>
-  export let flash
+  let { <%= singular_table_name %>, flash } = $props()
 
   const onDestroy = (e) => {
     if (!confirm('Are you sure you want to delete this <%= human_name.downcase %>?')) {
@@ -41,14 +40,14 @@
       Back to <%= human_name.pluralize.downcase %>
     </Link>
     <div class="inline-block ml-2">
-      <button
-        use:inertia={{ href: `<%= js_resource_path %>`, method: 'delete' }}
-        on:click={onDestroy}
-        type="button"
+      <Link
+        href={`<%= js_resource_path %>`}
+        method="delete"
+        onclick={onDestroy}
         class="mt-2 rounded-lg py-3 px-5 bg-gray-100 font-medium"
       >
         Destroy this <%= human_name.downcase %>
-      </button>
+      </Link>
     </div>
   </div>
 </div>
diff --git a/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/Edit.svelte.tt b/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/Edit.svelte.tt
new file mode 100644
index 0000000..13728cf
--- /dev/null
+++ b/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/Edit.svelte.tt
@@ -0,0 +1,45 @@
+<script>
+  import { Link } from '@inertiajs/svelte'
+  import Form from './Form.svelte'
+
+  export let <%= singular_table_name %>
+
+  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 -%>
+  }
+</script>
+
+<svelte:head>
+  <title>Editing <%= human_name.downcase %></title>
+</svelte:head>
+
+<div class="mx-auto md:w-2/3 w-full px-8 pt-8">
+  <h1 class="font-bold text-4xl">Editing <%= human_name.downcase %></h1>
+
+  <Form
+    {<%= singular_table_name %>}
+    submitText="Update <%= human_name.downcase %>"
+    on:submit={handleSubmit}
+  />
+
+  <Link
+    href={`<%= js_resource_path %>`}
+    class="mt-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium"
+  >
+    Show this <%= human_name.downcase %>
+  </Link>
+  <Link
+    href="<%= js_resources_path %>"
+    class="ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium"
+  >
+    Back to <%= human_name.pluralize.downcase %>
+  </Link>
+</div>
diff --git a/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/Form.svelte.tt b/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/Form.svelte.tt
new file mode 100644
index 0000000..fb08070
--- /dev/null
+++ b/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/Form.svelte.tt
@@ -0,0 +1,120 @@
+<script>
+  import { useForm } from '@inertiajs/svelte'
+  import { createEventDispatcher } from 'svelte'
+
+  const dispatch = createEventDispatcher()
+
+  export let <%= singular_table_name %>
+  export let submitText
+
+  const form = useForm({
+<% attributes.each do |attribute| -%>
+<% if attribute.password_digest? -%>
+    password: '',
+    password_confirmation: '',
+<% else -%>
+    <%= attribute.column_name %>: <%= singular_table_name %>.<%= attribute.column_name %> || <%= default_value(attribute) %>,
+<% end -%>
+<% end -%>
+  })
+</script>
+
+<form
+  class="contents"
+  on:submit|preventDefault={dispatch('submit', { form: $form })}
+>
+<% attributes.each do |attribute| -%>
+  <div class="my-5">
+<% if attribute.password_digest? -%>
+    <label for="password">Password</label>
+    <input
+      type="password"
+      name="password"
+      id="password"
+      bind:value={$form.password}
+      class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+    />
+    {#if $form.errors.password}
+      <div class="text-red-500 px-3 py-2 font-medium">
+        {$form.errors.password.join(', ')}
+      </div>
+    {/if}
+  </div>
+
+  <div class="my-5">
+    <label for="password_confirmation">Password Confirmation</label>
+    <input
+      type="password"
+      name="password_confirmation"
+      id="password_confirmation"
+      bind:value={$form.password_confirmation}
+      class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+    />
+    {#if $form.errors.password_confirmation}
+      <div class="text-red-500 px-3 py-2 font-medium">
+        {$form.errors.password_confirmation.join(', ')}
+      </div>
+    {/if}
+<% else -%>
+    <label for="<%= attribute.singular_name %>"><%= attribute.human_name %></label>
+<% if input_type(attribute) == "text_area" -%>
+    <textarea
+      name="<%= attribute.singular_name %>"
+      id="<%= attribute.singular_name %>"
+      bind:value={$form.<%= attribute.column_name %>}
+      rows="4"
+      class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+    />
+<% elsif attribute.attachment? -%>
+    <input
+      type="file"
+      name="<%= attribute.singular_name %>"
+      id="<%= attribute.singular_name %>"
+      on:input={(e) => ($form.<%= attribute.column_name %> = e.target.files[0])}
+      class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+    />
+<% elsif attribute.attachments? -%>
+    <input
+      type="file"
+      multiple
+      name="<%= attribute.singular_name %>[]"
+      id="<%= attribute.singular_name %>"
+      on:input={(e) => ($form.<%= attribute.column_name %> = Array.from(e.target.files))}
+      class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+    />
+<% elsif attribute.field_type == :check_box -%>
+    <input
+      type="<%= input_type(attribute) %>"
+      name="<%= attribute.singular_name %>"
+      id="<%= attribute.singular_name %>"
+      bind:checked={$form.<%= attribute.column_name %>}
+      class="block mt-2 h-5 w-5"
+    />
+<% else -%>
+    <input
+      type="<%= input_type(attribute) %>"
+      name="<%= attribute.singular_name %>"
+      id="<%= attribute.singular_name %>"
+      bind:value={$form.<%= attribute.column_name %>}
+      class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+    />
+<% end -%>
+    {#if $form.errors.<%= attribute.column_name %>}
+      <div class="text-red-500 px-3 py-2 font-medium">
+        {$form.errors.<%= attribute.column_name %>.join(', ')}
+      </div>
+    {/if}
+<% end -%>
+  </div>
+
+<% end -%>
+ <div class="inline">
+    <button
+      type="submit"
+      disabled={$form.processing}
+      class="rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer"
+    >
+      {submitText}
+    </button>
+  </div>
+</form>
diff --git a/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/Index.svelte.tt b/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/Index.svelte.tt
new file mode 100644
index 0000000..9700196
--- /dev/null
+++ b/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/Index.svelte.tt
@@ -0,0 +1,43 @@
+<script>
+  import { Link } from '@inertiajs/svelte'
+  import <%= inertia_component_name %> from './<%= inertia_component_name %>.svelte'
+
+  export let <%= plural_table_name %>
+  export let flash
+</script>
+
+<svelte:head>
+  <title><%= human_name.pluralize %></title>
+</svelte:head>
+
+<div class="mx-auto md:w-2/3 w-full px-8 pt-8">
+  {#if flash.notice}
+    <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block">
+      {flash.notice}
+    </p>
+  {/if}
+
+  <div class="flex justify-between items-center">
+    <h1 class="font-bold text-4xl"><%= human_name.pluralize %></h1>
+    <Link
+      href="<%= js_new_resource_path %>"
+      class="rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium"
+    >
+      New <%= human_name.downcase %>
+    </Link>
+  </div>
+
+  <div class="min-w-full">
+    {#each <%= plural_table_name %> as <%= singular_table_name %> (<%= singular_table_name %>.id)}
+      <<%= inertia_component_name %> {<%= singular_table_name %>} />
+      <p>
+        <Link
+          href={`<%= js_resource_path %>`}
+          class="ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium"
+        >
+          Show this <%= human_name.downcase %>
+        </Link>
+      </p>
+    {/each}
+  </div>
+</div>
diff --git a/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/New.svelte.tt b/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/New.svelte.tt
new file mode 100644
index 0000000..dc3b0a1
--- /dev/null
+++ b/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/New.svelte.tt
@@ -0,0 +1,33 @@
+<script>
+  import { Link } from '@inertiajs/svelte'
+  import Form from './Form.svelte'
+
+  export let <%= singular_table_name %>
+
+  const handleSubmit = (e) => {
+    const { form } = e.detail
+    form.transform((data) => ({ <%= singular_table_name %>: data }))
+    form.post('<%= js_resources_path %>')
+  }
+</script>
+
+<svelte:head>
+  <title>New <%= human_name.downcase %></title>
+</svelte:head>
+
+<div class="mx-auto md:w-2/3 w-full px-8 pt-8">
+  <h1 class="font-bold text-4xl">New <%= human_name.downcase %></h1>
+
+  <Form
+    {<%= singular_table_name %>}
+    submitText="Create <%= human_name.downcase %>"
+    on:submit={handleSubmit}
+  />
+
+  <Link
+    href="<%= js_resources_path %>"
+    class="ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium"
+  >
+    Back to <%= human_name.pluralize.downcase %>
+  </Link>
+</div>
diff --git a/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/One.svelte.tt b/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/One.svelte.tt
new file mode 100644
index 0000000..42c56db
--- /dev/null
+++ b/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/One.svelte.tt
@@ -0,0 +1,28 @@
+<script>
+  export let <%= singular_table_name %>
+</script>
+
+<div>
+<% attributes.reject(&:password_digest?).each do |attribute| -%>
+  <p class="my-5">
+    <strong class="block font-medium mb-1"><%= attribute.human_name %>:</strong>
+<% if attribute.attachment? -%>
+    {#if <%= singular_table_name %>.<%= attribute.column_name %>}
+      <a href={<%= singular_table_name %>.<%= attribute.column_name %>.url}>
+        {<%= singular_table_name %>.<%= attribute.column_name %>.filename}
+      </a>
+    {/if}
+  </p>
+<% elsif attribute.attachments? -%>
+  </p>
+  {#each <%= singular_table_name %>.<%= attribute.column_name %> as { url, filename }}
+    <div>
+      <a href={url}>{filename}</a>
+    </div>
+  {/each}
+<% else -%>
+    {<%= singular_table_name %>.<%= attribute.column_name %>}
+  </p>
+<% end -%>
+<% end -%>
+</div>
diff --git a/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/Show.svelte.tt b/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/Show.svelte.tt
new file mode 100644
index 0000000..4ceafd1
--- /dev/null
+++ b/lib/generators/inertia_tw_templates/scaffold/templates/svelte4/Show.svelte.tt
@@ -0,0 +1,58 @@
+<script>
+  import { inertia, Link } from '@inertiajs/svelte'
+  import <%= inertia_component_name %> from './<%= inertia_component_name %>.svelte'
+
+  export let <%= singular_table_name %>
+  export let flash
+
+  const onDestroy = (e) => {
+    if (!confirm('Are you sure you want to delete this <%= human_name.downcase %>?')) {
+      e.preventDefault()
+    }
+  }
+</script>
+
+<svelte:head>
+  <title><%= human_name %> #{<%= singular_table_name %>.id}</title>
+</svelte:head>
+
+<div class="mx-auto md:w-2/3 w-full px-8 pt-8">
+  <div class="mx-auto">
+    {#if flash.notice}
+      <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block">
+        {flash.notice}
+      </p>
+    {/if}
+
+    <h1 class="font-bold text-4xl"><%= human_name %> #{<%= singular_table_name %>.id}</h1>
+
+    <<%= inertia_component_name %> {<%= singular_table_name %>} />
+
+    <Link
+      href={`<%= js_edit_resource_path %>`}
+      class="ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium"
+    >
+      Edit this <%= human_name.downcase %>
+    </Link>
+    <Link
+      href="<%= js_resources_path %>"
+      class="ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium"
+    >
+      Back to <%= human_name.pluralize.downcase %>
+    </Link>
+    <div class="inline-block ml-2">
+      <button
+        use:inertia={{ href: `<%= js_resource_path %>`, method: 'delete' }}
+        on:click={onDestroy}
+        type="button"
+        class="mt-2 rounded-lg py-3 px-5 bg-gray-100 font-medium"
+      >
+        Destroy this <%= human_name.downcase %>
+      </button>
+    </div>
+  </div>
+</div>
+
+
+
+
diff --git a/lib/generators/inertia_tw_templates/scaffold/templates/vue/Form.vue.tt b/lib/generators/inertia_tw_templates/scaffold/templates/vue/Form.vue.tt
index 9362acd..a12211d 100644
--- a/lib/generators/inertia_tw_templates/scaffold/templates/vue/Form.vue.tt
+++ b/lib/generators/inertia_tw_templates/scaffold/templates/vue/Form.vue.tt
@@ -57,7 +57,7 @@
 <% elsif attribute.attachments? -%>
       <input
         type="file"
-        multiple="multiple"
+        multiple
         name="<%= attribute.singular_name %>[]"
         id="<%= attribute.singular_name %>"
         @input="form.<%= attribute.column_name %> = Array.from($event.target.files)"
diff --git a/lib/inertia_rails_contrib/generators_helper.rb b/lib/inertia_rails_contrib/generators_helper.rb
index 0dfc966..2c7797f 100644
--- a/lib/inertia_rails_contrib/generators_helper.rb
+++ b/lib/inertia_rails_contrib/generators_helper.rb
@@ -1,15 +1,16 @@
 module InertiaRailsContrib
   module GeneratorsHelper
     def self.guess_the_default_framework
-      case Rails.root.join("package.json").read
+      package = Rails.root.join("package.json").read
+      case package
       when /@inertiajs\/react/
         "react"
       when /@inertiajs\/svelte/
-        "svelte"
+        package.match?(/"svelte": "\^5/) ? "svelte" : "svelte4"
       when /@inertiajs\/vue3/
         "vue"
       else
-        say_error "Could not determine the Inertia.js framework you are using."
+        Thor::Shell::Basic.new.say_error "Could not determine the Inertia.js framework you are using."
       end
     end
 
diff --git a/spec/lib/generators/install/install_generator_spec.rb b/spec/lib/generators/install/install_generator_spec.rb
index 02fcba8..f603bda 100644
--- a/spec/lib/generators/install/install_generator_spec.rb
+++ b/spec/lib/generators/install/install_generator_spec.rb
@@ -91,6 +91,26 @@
     end
   end
 
+  context "with --framework=svelte4" do
+    let(:framework) { :svelte4 }
+    include_context "assert framework structure"
+
+    context "with --typescript" do
+      let(:inertia_version) { "1.3.0-beta.1" }
+      let(:args) { super() + %W[--typescript --inertia-version=#{inertia_version}] }
+      let(:ext) { "ts" }
+
+      include_context "assert framework structure"
+
+      context "with old Inertia version" do
+        let(:inertia_version) { "1.2.0" }
+        let(:ext) { "js" }
+
+        include_context "assert framework structure"
+      end
+    end
+  end
+
   context "with --framework=vue" do
     let(:framework) { :vue }
 
@@ -212,7 +232,7 @@ def expect_packages_for(framework, ext: "js")
             contains('"typescript":')
             contains('"vue-tsc":')
           end
-        when :svelte
+        when :svelte, :svelte4
           contains('"@inertiajs/svelte":')
           contains('"svelte":')
           contains('"@sveltejs/vite-plugin-svelte":')
@@ -244,7 +264,7 @@ def expect_inertia_prepared_for(framework, ext: "js")
         file("app/frontend/entrypoints/inertia.#{ext}") do
           contains("import { createInertiaApp } from '@inertiajs/vue3'")
         end
-      when :svelte
+      when :svelte, :svelte4
         file("svelte.config.js") do
           contains("preprocess: vitePreprocess()")
         end
@@ -252,7 +272,16 @@ def expect_inertia_prepared_for(framework, ext: "js")
           contains("svelte()")
         end
         file("app/frontend/entrypoints/inertia.#{ext}") do
-          contains("import { createInertiaApp } from '@inertiajs/svelte'")
+          if ext == "ts"
+            contains("import { createInertiaApp, type ResolvedComponent } from '@inertiajs/svelte'")
+          else
+            contains("import { createInertiaApp } from '@inertiajs/svelte'")
+          end
+          if framework == :svelte4
+            contains("new App({ target: el, props })")
+          else
+            contains("mount(App, { target: el, props })")
+          end
         end
       end
       file("app/views/layouts/application.html.erb") do
@@ -297,7 +326,7 @@ def expect_inertia_prepared_for(framework, ext: "js")
           file("tsconfig.app.json") do
             contains('"include": ["app/frontend/**/*.ts", "app/frontend/**/*.tsx", "app/frontend/**/*.vue"]')
           end
-        when :svelte
+        when :svelte, :svelte4
           file("tsconfig.json") do
             contains('"include": ["app/frontend/**/*.ts", "app/frontend/**/*.js", "app/frontend/**/*.svelte"]')
           end
@@ -317,8 +346,23 @@ def expect_example_page_for(framework, ext: "js")
         when :vue
           file("pages/InertiaExample.vue")
           file("assets/vue.svg")
+        when :svelte4
+          file("pages/InertiaExample.svelte") do
+            if ext == "ts"
+              contains("export let name: string")
+            else
+              contains("export let name")
+            end
+          end
+          file("assets/svelte.svg")
         when :svelte
-          file("pages/InertiaExample.svelte")
+          file("pages/InertiaExample.svelte") do
+            if ext == "ts"
+              contains("let { name }: { name: string } = $props()")
+            else
+              contains("let { name } = $props()")
+            end
+          end
           file("assets/svelte.svg")
         end