Skip to content

Commit

Permalink
Add Svelte 5 support
Browse files Browse the repository at this point in the history
  • Loading branch information
skryukov committed Oct 25, 2024
1 parent d5162c4 commit d624bc1
Show file tree
Hide file tree
Showing 50 changed files with 1,103 additions and 125 deletions.
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down
4 changes: 2 additions & 2 deletions docs/guide/server-side-setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down
31 changes: 28 additions & 3 deletions lib/generators/inertia/install/frameworks.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
8 changes: 6 additions & 2 deletions lib/generators/inertia/install/install_generator.rb
Original file line number Diff line number Diff line change
Expand Up @@ -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>"
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand Down
6 changes: 3 additions & 3 deletions lib/generators/inertia/install/templates/react/inertia.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
5 changes: 3 additions & 2 deletions lib/generators/inertia/install/templates/svelte/inertia.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { createInertiaApp } from '@inertiajs/svelte'
import { mount } from 'svelte';

createInertiaApp({
// Set default page title
Expand All @@ -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 })
},
})
16 changes: 7 additions & 9 deletions lib/generators/inertia/install/templates/svelte/inertia.ts
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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 })
},
})
116 changes: 116 additions & 0 deletions lib/generators/inertia/install/templates/svelte4/InertiaExample.svelte
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit d624bc1

Please sign in to comment.