Skip to content

Commit 75086f4

Browse files
ciscoheatciscoheat
committed
Added test case with an error that may be Svelte-related.
1 parent fbd4251 commit 75086f4

File tree

6 files changed

+302
-1
lines changed

6 files changed

+302
-1
lines changed

‎src/routes/(v2)/v2/Navigation.svelte‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,8 @@
7070
'component-regen',
7171
'issue-485',
7272
'arktype',
73-
'effect'
73+
'effect',
74+
'issue-500'
7475
].sort();
7576
</script>
7677

‎src/routes/(v2)/v2/issue-500/+page.server.ts‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
// +page.server.ts
2+
3+
import type { Actions, PageServerLoad } from './$types.js';
4+
5+
import { superValidate, message } from '$lib/index.js';
6+
import { zod } from '$lib/adapters/zod.js';
7+
import { fail } from '@sveltejs/kit';
8+
import {
9+
inviteUserToGroupSchema,
10+
modifyGroupAccessSchema,
11+
fixedModifyGroupAccessSchema
12+
} from './schema.js';
13+
14+
const group = {
15+
users: [
16+
{
17+
username: 'user1'
18+
}
19+
]
20+
};
21+
22+
export const load: PageServerLoad = async () => {
23+
return { group };
24+
};
25+
26+
export const actions: Actions = {
27+
invite: async ({ request }) => {
28+
const form = await superValidate(request, zod(inviteUserToGroupSchema));
29+
30+
if (!form.valid) return fail(400, { form });
31+
32+
group.users.push({ username: form.data.username });
33+
34+
return message(form, 'Form posted successfully!');
35+
},
36+
modify: async ({ request }) => {
37+
const form = await superValidate(request, zod(modifyGroupAccessSchema));
38+
39+
if (!form.valid) return fail(400, { form });
40+
41+
const removedUsernames = form.data.users.filter((u) => u.remove).map((u) => u.username);
42+
43+
group.users = group.users.filter((u) => removedUsernames.includes(u.username));
44+
45+
return message(form, 'Form posted successfully!');
46+
},
47+
['fixed-modify']: async ({ request }) => {
48+
const form = await superValidate(request, zod(fixedModifyGroupAccessSchema));
49+
50+
if (!form.valid) return fail(400, { form });
51+
52+
const removedUsernames = form.data.users.filter((u) => u.removed).map((u) => u.username);
53+
54+
group.users = group.users.filter((u) => removedUsernames.includes(u.username));
55+
56+
return message(form, 'Form posted successfully!');
57+
}
58+
};

‎src/routes/(v2)/v2/issue-500/+page.svelte‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<!-- +page.svelte -->
2+
<script lang="ts">
3+
import { page } from '$app/stores';
4+
import { defaults, superForm } from '$lib/index.js';
5+
import { zod } from '$lib/adapters/zod.js';
6+
import SuperDebug from '$lib/index.js';
7+
import { inviteUserToGroupSchema } from './schema.js';
8+
import Form from './Form.svelte';
9+
10+
export let data;
11+
12+
const { form, errors, message, enhance } = superForm(defaults(zod(inviteUserToGroupSchema)), {
13+
dataType: 'json',
14+
validators: zod(inviteUserToGroupSchema)
15+
});
16+
</script>
17+
18+
<SuperDebug data={$form} />
19+
20+
<h3>Add user</h3>
21+
22+
{#if $message}
23+
<!-- eslint-disable-next-line svelte/valid-compile -->
24+
<div class="status" class:error={$page.status >= 400} class:success={$page.status == 200}>
25+
{$message}
26+
</div>
27+
{/if}
28+
29+
<form method="POST" use:enhance action="?/invite">
30+
<label>
31+
Username<br />
32+
<input
33+
name="username"
34+
aria-invalid={$errors.username ? 'true' : undefined}
35+
bind:value={$form.username}
36+
/>
37+
{#if $errors.username}<span class="invalid">{$errors.username}</span>{/if}
38+
</label>
39+
40+
<button>Submit</button>
41+
</form>
42+
43+
{#key data.group}
44+
<Form group={data.group} />
45+
{/key}
46+
47+
<!-- {#key data.group}
48+
<FixedForm group={data.group} />
49+
{/key} -->
50+
51+
<hr />
52+
<p>
53+
💥 <a target="_blank" href="https://superforms.rocks">Created with Superforms for SvelteKit</a> 💥
54+
</p>
55+
56+
<style>
57+
.invalid {
58+
color: red;
59+
}
60+
61+
.status {
62+
color: white;
63+
padding: 4px;
64+
padding-left: 8px;
65+
border-radius: 2px;
66+
font-weight: 500;
67+
}
68+
69+
.status.success {
70+
background-color: seagreen;
71+
}
72+
73+
.status.error {
74+
background-color: #ff2a02;
75+
}
76+
77+
input {
78+
background-color: #ddd;
79+
}
80+
81+
a {
82+
text-decoration: underline;
83+
}
84+
85+
hr {
86+
margin-top: 4rem;
87+
}
88+
89+
form {
90+
padding-top: 1rem;
91+
padding-bottom: 1rem;
92+
}
93+
</style>

‎src/routes/(v2)/v2/issue-500/FixedForm.svelte‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<script lang="ts">
2+
import { page } from '$app/stores';
3+
import { defaults, superForm } from '$lib/index.js';
4+
import { zod } from '$lib/adapters/zod.js';
5+
import SuperDebug from '$lib/index.js';
6+
import { fixedModifyGroupAccessSchema } from './schema.js';
7+
8+
export let group;
9+
10+
const { form, message, enhance } = superForm(defaults(group, zod(fixedModifyGroupAccessSchema)), {
11+
dataType: 'json',
12+
validators: zod(fixedModifyGroupAccessSchema)
13+
});
14+
</script>
15+
16+
<SuperDebug data={$form} />
17+
18+
{#if $message}
19+
<!-- eslint-disable-next-line svelte/valid-compile -->
20+
<div class="status" class:error={$page.status >= 400} class:success={$page.status == 200}>
21+
{$message}
22+
</div>
23+
{/if}
24+
25+
<form method="POST" use:enhance action="?/fixed-modify">
26+
{#each group.users as user, i}
27+
<input type="hidden" name="username" bind:value={$form.username} />
28+
29+
<label>
30+
Remove {user.username} (fixed)
31+
<input name="removed" type="checkbox" bind:checked={$form.users[i].removed} />
32+
</label>
33+
{/each}
34+
35+
<button>Submit</button>
36+
</form>
37+
38+
<style>
39+
.status {
40+
color: white;
41+
padding: 4px;
42+
padding-left: 8px;
43+
border-radius: 2px;
44+
font-weight: 500;
45+
}
46+
47+
.status.success {
48+
background-color: seagreen;
49+
}
50+
51+
.status.error {
52+
background-color: #ff2a02;
53+
}
54+
55+
input {
56+
background-color: #ddd;
57+
}
58+
59+
form {
60+
padding-top: 1rem;
61+
padding-bottom: 1rem;
62+
}
63+
</style>

‎src/routes/(v2)/v2/issue-500/Form.svelte‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<script lang="ts">
2+
import { page } from '$app/stores';
3+
import { defaults, superForm } from '$lib/index.js';
4+
import { zod } from '$lib/adapters/zod.js';
5+
import SuperDebug from '$lib/index.js';
6+
import { modifyGroupAccessSchema } from './schema.js';
7+
8+
export let group;
9+
10+
const { form, message, enhance } = superForm(defaults(group, zod(modifyGroupAccessSchema)), {
11+
dataType: 'json',
12+
validators: zod(modifyGroupAccessSchema)
13+
});
14+
</script>
15+
16+
<SuperDebug data={$form} />
17+
18+
{#if $message}
19+
<!-- eslint-disable-next-line svelte/valid-compile -->
20+
<div class="status" class:error={$page.status >= 400} class:success={$page.status == 200}>
21+
{$message}
22+
</div>
23+
{/if}
24+
25+
<form method="POST" use:enhance action="?/modify">
26+
{#each group.users as user, i}
27+
<input type="hidden" name="username" bind:value={$form.username} />
28+
29+
<label>
30+
Remove {user.username}
31+
<input name="remove" type="checkbox" bind:checked={$form.users[i].remove} />
32+
</label>
33+
{/each}
34+
35+
<button>Submit</button>
36+
</form>
37+
38+
<style>
39+
.status {
40+
color: white;
41+
padding: 4px;
42+
padding-left: 8px;
43+
border-radius: 2px;
44+
font-weight: 500;
45+
}
46+
47+
.status.success {
48+
background-color: seagreen;
49+
}
50+
51+
.status.error {
52+
background-color: #ff2a02;
53+
}
54+
55+
input {
56+
background-color: #ddd;
57+
}
58+
59+
form {
60+
padding-top: 1rem;
61+
padding-bottom: 1rem;
62+
}
63+
</style>

‎src/routes/(v2)/v2/issue-500/schema.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { z } from 'zod';
2+
3+
export const inviteUserToGroupSchema = z.object({
4+
username: z.string().min(2),
5+
});
6+
7+
export const modifyGroupAccessSchema = z.object({
8+
users: z
9+
.object({
10+
username: z.string().min(2),
11+
remove: z.boolean(),
12+
})
13+
.array(),
14+
});
15+
16+
export const fixedModifyGroupAccessSchema = z.object({
17+
users: z
18+
.object({
19+
username: z.string().min(2),
20+
removed: z.boolean(),
21+
})
22+
.array(),
23+
});

0 commit comments

Comments
 (0)