Add Svelte 5 support

CHANGELOG.md

@@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning].
 
 ## [Unreleased]
 
+Added:
+
+- [BREAKING] Svelte 5 support ([@skryukov])
+  - The `--framework=svelte` option now installs Svelte 5
+  - New `--framework=svelte4` option installs Svelte 4
+  - Support for Svelte 5 in the installation generator
+  - Support for Svelte 5 in the scaffold templates
+
 ## [0.2.2] - 2024-10-09
 
 Added:

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

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

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"

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

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
   },

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>

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>

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 })
   },
 })

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 })
   },
 })

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>