Skip to content

Commit 2dc1916

Browse files
skryukovskryukov
committed
Add TypeScript support for Svelte 5 scaffolds
1 parent 08a1643 commit 2dc1916

File tree

14 files changed

+621
-2
lines changed

14 files changed

+621
-2
lines changed

‎lib/generators/inertia_templates/scaffold/templates/svelte/Edit.ts.svelte.tt

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<script lang="ts">
2+
import { Link, type InertiaFormProps } from '@inertiajs/svelte'
3+
import type { <%= inertia_model_type %>, <%= inertia_model_form_type %> } from './types'
4+
import Form from './Form.svelte'
5+
6+
let { <%= singular_table_name %> } = $props<{ <%= singular_table_name %>: <%= inertia_model_type %> }>()
7+
8+
const handleSubmit = ({ form }: { form: InertiaFormProps<<%= inertia_model_form_type %>> }) => {
9+
form.transform((data) => ({ <%= singular_table_name %>: data }))
10+
<% if attributes.any?(&:attachments?) -%>
11+
form.post(`<%= js_resource_path %>`, {
12+
headers: { 'X-HTTP-METHOD-OVERRIDE': 'put' },
13+
})
14+
<% else -%>
15+
form.patch(`<%= js_resource_path %>`)
16+
<% end -%>
17+
}
18+
</script>
19+
20+
<svelte:head>
21+
<title>Editing <%= human_name.downcase %></title>
22+
</svelte:head>
23+
24+
<h1>Editing <%= human_name.downcase %></h1>
25+
26+
<Form
27+
{<%= singular_table_name %>}
28+
submitText="Update <%= human_name.downcase %>"
29+
onSubmit={handleSubmit}
30+
/>
31+
32+
<br />
33+
34+
<div>
35+
<Link href={`<%= js_resource_path %>`}>Show this <%= human_name.downcase %></Link> |
36+
<Link href="<%= js_resources_path %>">Back to <%= human_name.pluralize.downcase %></Link>
37+
</div>

‎lib/generators/inertia_templates/scaffold/templates/svelte/Form.svelte.tt

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<script>
22
import { useForm } from '@inertiajs/svelte'
3-
import { createEventDispatcher } from 'svelte'
43

54
let { <%= singular_table_name %>, submitText, onSubmit } = $props()
65

‎lib/generators/inertia_templates/scaffold/templates/svelte/Form.ts.svelte.tt

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<script lang="ts">
2+
import { useForm, type InertiaFormProps } from '@inertiajs/svelte'
3+
import type { <%= inertia_model_type %>, <%= inertia_model_form_type %> } from './types'
4+
5+
let { <%= singular_table_name %>, submitText, onSubmit } = $props<{
6+
<%= singular_table_name %>: <%= inertia_model_type %>
7+
onSubmit: (props: { form: InertiaFormProps<<%= inertia_model_form_type %>> }) => void
8+
submitText: string
9+
}>()
10+
11+
const form = useForm({
12+
<% attributes.each do |attribute| -%>
13+
<% if attribute.password_digest? -%>
14+
password: '',
15+
password_confirmation: '',
16+
<% else -%>
17+
<%= attribute.column_name %>: <%= singular_table_name %>.<%= attribute.column_name %> || <%= default_value(attribute) %>,
18+
<% end -%>
19+
<% end -%>
20+
})
21+
22+
const handleSubmit = (e: SubmitEvent) => {
23+
e.preventDefault()
24+
onSubmit({form: $form })
25+
}
26+
</script>
27+
28+
<form onsubmit={handleSubmit}>
29+
<% attributes.each do |attribute| -%>
30+
<% if attribute.password_digest? -%>
31+
<div>
32+
<label for="password">Password</label>
33+
<input
34+
type="password"
35+
name="password"
36+
id="password"
37+
bind:value={$form.password}
38+
/>
39+
{#if $form.errors.password}
40+
<div class="error">{$form.errors.password}</div>
41+
{/if}
42+
</div>
43+
44+
<div>
45+
<label for="password_confirmation">Password Confirmation</label>
46+
<input
47+
type="password"
48+
name="password_confirmation"
49+
id="password_confirmation"
50+
bind:value={$form.password_confirmation}
51+
/>
52+
{#if $form.errors.password_confirmation}
53+
<div class="error">{$form.errors.password_confirmation}</div>
54+
{/if}
55+
</div>
56+
<% else -%>
57+
<div>
58+
<label for="<%= attribute.singular_name %>"><%= attribute.human_name %></label>
59+
<% if input_type(attribute) == "text_area" -%>
60+
<textarea name="<%= attribute.singular_name %>" id="<%= attribute.singular_name %>" bind:value={$form.<%= attribute.column_name %>}></textarea>
61+
<% elsif attribute.attachment? -%>
62+
<input
63+
type="file"
64+
name="<%= attribute.singular_name %>"
65+
id="<%= attribute.singular_name %>"
66+
oninput={(e) => ($form.<%= attribute.column_name %> = ((e.target as HTMLInputElement).files || [])[0])}
67+
/>
68+
<% elsif attribute.attachments? -%>
69+
<input
70+
type="file"
71+
multiple
72+
name="<%= attribute.singular_name %>[]"
73+
id="<%= attribute.singular_name %>"
74+
oninput={(e) => ($form.<%= attribute.column_name %> = Array.from((e.target as HTMLInputElement).files || []))}
75+
/>
76+
<% else -%>
77+
<input
78+
type="<%= input_type(attribute) %>"
79+
name="<%= attribute.singular_name %>"
80+
id="<%= attribute.singular_name %>"
81+
<%= input_type(attribute) == "checkbox" ? "bind:checked" : "bind:value" %>={$form.<%= attribute.column_name %>}
82+
/>
83+
<% end -%>
84+
{#if $form.errors.<%= attribute.column_name %>}
85+
<div class="error">{$form.errors.<%= attribute.column_name %>}</div>
86+
{/if}
87+
</div>
88+
<% end -%>
89+
<% end -%>
90+
<div>
91+
<button type="submit" disabled={$form.processing}>{submitText}</button>
92+
</div>
93+
</form>
94+
95+
<style>
96+
label {
97+
display: block;
98+
}
99+
.error {
100+
color: red;
101+
}
102+
</style>

‎lib/generators/inertia_templates/scaffold/templates/svelte/Index.ts.svelte.tt

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<script lang="ts">
2+
import { Link } from '@inertiajs/svelte'
3+
import <%= inertia_component_name %> from './<%= inertia_component_name %>.svelte'
4+
import type { <%= inertia_model_type %> } from './types'
5+
6+
let { <%= plural_table_name %>, flash } = $props<{
7+
<%= plural_table_name %>: <%= inertia_model_type %>[]
8+
flash: { notice?: string }
9+
}>()
10+
</script>
11+
12+
<svelte:head>
13+
<title><%= human_name.pluralize %></title>
14+
</svelte:head>
15+
16+
{#if flash.notice}
17+
<p class="notice">{flash.notice}</p>
18+
{/if}
19+
20+
<h1><%= human_name.pluralize %></h1>
21+
22+
<div>
23+
{#each <%= plural_table_name %> as <%= singular_table_name %> (<%= singular_table_name %>.id)}
24+
<div>
25+
<<%= inertia_component_name %> {<%= singular_table_name %>} />
26+
<p>
27+
<Link href={`<%= js_resource_path %>`}>Show this <%= human_name.downcase %></Link>
28+
</p>
29+
</div>
30+
{/each}
31+
</div>
32+
33+
<Link href="<%= js_new_resource_path %>">New <%= human_name.downcase %></Link>
34+
35+
<style>
36+
.notice {
37+
color: green;
38+
}
39+
</style>

‎lib/generators/inertia_templates/scaffold/templates/svelte/New.ts.svelte.tt

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<script lang="ts">
2+
import { Link, type InertiaFormProps } from '@inertiajs/svelte'
3+
import type { <%= inertia_model_type %>, <%= inertia_model_form_type %> } from './types'
4+
import Form from './Form.svelte'
5+
6+
let { <%= singular_table_name %> } = $props<{ <%= singular_table_name %>: <%= inertia_model_type %> }>()
7+
8+
const handleSubmit = ({ form }: { form: InertiaFormProps<<%= inertia_model_form_type %>> }) => {
9+
form.transform((data) => ({ <%= singular_table_name %>: data }))
10+
form.post('<%= js_resources_path %>')
11+
}
12+
</script>
13+
14+
<svelte:head>
15+
<title>New <%= human_name.downcase %></title>
16+
</svelte:head>
17+
18+
<h1>New <%= human_name.downcase %></h1>
19+
20+
<Form
21+
{<%= singular_table_name %>}
22+
submitText="Create <%= human_name.downcase %>"
23+
onSubmit={handleSubmit}
24+
/>
25+
26+
<br />
27+
28+
<div>
29+
<Link href="<%= js_resources_path %>">Back to <%= human_name.pluralize.downcase %></Link>
30+
</div>

‎lib/generators/inertia_templates/scaffold/templates/svelte/One.ts.svelte.tt

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<script lang="ts">
2+
import type { <%= inertia_model_type %> } from './types'
3+
4+
let { <%= singular_table_name %> } = $props<{ <%= singular_table_name %>: <%= inertia_model_type %> }>()
5+
</script>
6+
7+
<div>
8+
<% attributes.reject(&:password_digest?).each do |attribute| -%>
9+
<p>
10+
<strong><%= attribute.human_name %>:</strong>
11+
<% if attribute.attachment? -%>
12+
{#if <%= singular_table_name %>.<%= attribute.column_name %>}
13+
<a href={<%= singular_table_name %>.<%= attribute.column_name %>.url}>
14+
{<%= singular_table_name %>.<%= attribute.column_name %>.filename}
15+
</a>
16+
{/if}
17+
</p>
18+
<% elsif attribute.attachments? -%>
19+
</p>
20+
{#each <%= singular_table_name %>.<%= attribute.column_name %> as { url, filename }}
21+
<div>
22+
<a href={url}>{filename}</a>
23+
</div>
24+
{/each}
25+
<% else -%>
26+
{<%= singular_table_name %>.<%= attribute.column_name %>}
27+
</p>
28+
<% end -%>
29+
<% end -%>
30+
</div>

‎lib/generators/inertia_templates/scaffold/templates/svelte/Show.ts.svelte.tt

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<script lang="ts">
2+
import { Link } from '@inertiajs/svelte'
3+
import <%= inertia_component_name %> from './<%= inertia_component_name %>.svelte'
4+
import type { <%= inertia_model_type %> } from './types'
5+
6+
let { <%= singular_table_name %>, flash } = $props<{
7+
<%= singular_table_name %>: <%= inertia_model_type %>
8+
flash: { notice?: string }
9+
}>()
10+
11+
const onDestroy = (e: MouseEvent) => {
12+
if (!confirm('Are you sure you want to delete this <%= human_name.downcase %>?')) {
13+
e.preventDefault()
14+
}
15+
}
16+
</script>
17+
18+
<svelte:head>
19+
<title><%= human_name %> #{<%= singular_table_name %>.id}</title>
20+
</svelte:head>
21+
22+
{#if flash.notice}
23+
<p class="notice">{flash.notice}</p>
24+
{/if}
25+
26+
<h1><%= human_name %> #{<%= singular_table_name %>.id}</h1>
27+
28+
<<%= inertia_component_name %> {<%= singular_table_name %>} />
29+
30+
<div>
31+
<Link href={`<%= js_edit_resource_path %>`}>Edit this <%= human_name.downcase %></Link> |
32+
<Link href="<%= js_resources_path %>">Back to <%= human_name.pluralize.downcase %></Link>
33+
34+
<br />
35+
36+
<Link href={`<%= js_resource_path %>`} method="delete" onclick={onDestroy}>
37+
Destroy this <%= human_name.downcase %>
38+
</Link>
39+
</div>
40+
41+
<style>
42+
.notice {
43+
color: green;
44+
}
45+
</style>

‎lib/generators/inertia_tw_templates/scaffold/templates/svelte/Edit.ts.svelte.tt

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<script lang="ts">
2+
import { Link, type InertiaFormProps } from '@inertiajs/svelte'
3+
import type { <%= inertia_model_type %>, <%= inertia_model_form_type %> } from './types'
4+
import Form from './Form.svelte'
5+
6+
let { <%= singular_table_name %> } = $props<{ <%= singular_table_name %>: <%= inertia_model_type %> }>()
7+
8+
const handleSubmit = ({ form }: { form: InertiaFormProps<<%= inertia_model_form_type %>> }) => {
9+
form.transform((data) => ({ <%= singular_table_name %>: data }))
10+
<% if attributes.any?(&:attachments?) -%>
11+
form.post(`<%= js_resource_path %>`, {
12+
headers: { 'X-HTTP-METHOD-OVERRIDE': 'put' },
13+
})
14+
<% else -%>
15+
form.patch(`<%= js_resource_path %>`)
16+
<% end -%>
17+
}
18+
</script>
19+
20+
<svelte:head>
21+
<title>Editing <%= human_name.downcase %></title>
22+
</svelte:head>
23+
24+
<div class="mx-auto md:w-2/3 w-full px-8 pt-8">
25+
<h1 class="font-bold text-4xl">Editing <%= human_name.downcase %></h1>
26+
27+
<Form
28+
{<%= singular_table_name %>}
29+
submitText="Update <%= human_name.downcase %>"
30+
onSubmit={handleSubmit}
31+
/>
32+
33+
<Link
34+
href={`<%= js_resource_path %>`}
35+
class="mt-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium"
36+
>
37+
Show this <%= human_name.downcase %>
38+
</Link>
39+
<Link
40+
href="<%= js_resources_path %>"
41+
class="ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium"
42+
>
43+
Back to <%= human_name.pluralize.downcase %>
44+
</Link>
45+
</div>

‎lib/generators/inertia_tw_templates/scaffold/templates/svelte/Form.svelte.tt

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<script>
22
import { useForm } from '@inertiajs/svelte'
3-
import { createEventDispatcher } from 'svelte'
43

54
let { <%= singular_table_name %>, submitText, onSubmit } = $props()
65

0 commit comments

Comments
 (0)