Skip to content

Commit

Permalink
Added test case with an error that may be Svelte-related.
Browse files Browse the repository at this point in the history
ciscoheat committed Dec 1, 2024
1 parent fbd4251 commit 75086f4
Showing 6 changed files with 302 additions and 1 deletion.
3 changes: 2 additions & 1 deletion src/routes/(v2)/v2/Navigation.svelte
Original file line number Diff line number Diff line change
@@ -70,7 +70,8 @@
'component-regen',
'issue-485',
'arktype',
'effect'
'effect',
'issue-500'
].sort();
</script>

58 changes: 58 additions & 0 deletions src/routes/(v2)/v2/issue-500/+page.server.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
// +page.server.ts

import type { Actions, PageServerLoad } from './$types.js';

import { superValidate, message } from '$lib/index.js';
import { zod } from '$lib/adapters/zod.js';
import { fail } from '@sveltejs/kit';
import {
inviteUserToGroupSchema,
modifyGroupAccessSchema,
fixedModifyGroupAccessSchema
} from './schema.js';

const group = {
users: [
{
username: 'user1'
}
]
};

export const load: PageServerLoad = async () => {
return { group };
};

export const actions: Actions = {
invite: async ({ request }) => {
const form = await superValidate(request, zod(inviteUserToGroupSchema));

if (!form.valid) return fail(400, { form });

group.users.push({ username: form.data.username });

return message(form, 'Form posted successfully!');
},
modify: async ({ request }) => {
const form = await superValidate(request, zod(modifyGroupAccessSchema));

if (!form.valid) return fail(400, { form });

const removedUsernames = form.data.users.filter((u) => u.remove).map((u) => u.username);

group.users = group.users.filter((u) => removedUsernames.includes(u.username));

return message(form, 'Form posted successfully!');
},
['fixed-modify']: async ({ request }) => {
const form = await superValidate(request, zod(fixedModifyGroupAccessSchema));

if (!form.valid) return fail(400, { form });

const removedUsernames = form.data.users.filter((u) => u.removed).map((u) => u.username);

group.users = group.users.filter((u) => removedUsernames.includes(u.username));

return message(form, 'Form posted successfully!');
}
};
93 changes: 93 additions & 0 deletions src/routes/(v2)/v2/issue-500/+page.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
<!-- +page.svelte -->
<script lang="ts">
import { page } from '$app/stores';
import { defaults, superForm } from '$lib/index.js';
import { zod } from '$lib/adapters/zod.js';
import SuperDebug from '$lib/index.js';
import { inviteUserToGroupSchema } from './schema.js';
import Form from './Form.svelte';
export let data;
const { form, errors, message, enhance } = superForm(defaults(zod(inviteUserToGroupSchema)), {
dataType: 'json',
validators: zod(inviteUserToGroupSchema)
});
</script>

<SuperDebug data={$form} />

<h3>Add user</h3>

{#if $message}
<!-- eslint-disable-next-line svelte/valid-compile -->
<div class="status" class:error={$page.status >= 400} class:success={$page.status == 200}>
{$message}
</div>
{/if}

<form method="POST" use:enhance action="?/invite">
<label>
Username<br />
<input
name="username"
aria-invalid={$errors.username ? 'true' : undefined}
bind:value={$form.username}
/>
{#if $errors.username}<span class="invalid">{$errors.username}</span>{/if}
</label>

<button>Submit</button>
</form>

{#key data.group}
<Form group={data.group} />
{/key}

<!-- {#key data.group}
<FixedForm group={data.group} />
{/key} -->

<hr />
<p>
💥 <a target="_blank" href="https://superforms.rocks">Created with Superforms for SvelteKit</a> 💥
</p>

<style>
.invalid {
color: red;
}
.status {
color: white;
padding: 4px;
padding-left: 8px;
border-radius: 2px;
font-weight: 500;
}
.status.success {
background-color: seagreen;
}
.status.error {
background-color: #ff2a02;
}
input {
background-color: #ddd;
}
a {
text-decoration: underline;
}
hr {
margin-top: 4rem;
}
form {
padding-top: 1rem;
padding-bottom: 1rem;
}
</style>
63 changes: 63 additions & 0 deletions src/routes/(v2)/v2/issue-500/FixedForm.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<script lang="ts">
import { page } from '$app/stores';
import { defaults, superForm } from '$lib/index.js';
import { zod } from '$lib/adapters/zod.js';
import SuperDebug from '$lib/index.js';
import { fixedModifyGroupAccessSchema } from './schema.js';
export let group;
const { form, message, enhance } = superForm(defaults(group, zod(fixedModifyGroupAccessSchema)), {
dataType: 'json',
validators: zod(fixedModifyGroupAccessSchema)
});
</script>

<SuperDebug data={$form} />

{#if $message}
<!-- eslint-disable-next-line svelte/valid-compile -->
<div class="status" class:error={$page.status >= 400} class:success={$page.status == 200}>
{$message}
</div>
{/if}

<form method="POST" use:enhance action="?/fixed-modify">
{#each group.users as user, i}
<input type="hidden" name="username" bind:value={$form.username} />

<label>
Remove {user.username} (fixed)
<input name="removed" type="checkbox" bind:checked={$form.users[i].removed} />
</label>
{/each}

<button>Submit</button>
</form>

<style>
.status {
color: white;
padding: 4px;
padding-left: 8px;
border-radius: 2px;
font-weight: 500;
}
.status.success {
background-color: seagreen;
}
.status.error {
background-color: #ff2a02;
}
input {
background-color: #ddd;
}
form {
padding-top: 1rem;
padding-bottom: 1rem;
}
</style>
63 changes: 63 additions & 0 deletions src/routes/(v2)/v2/issue-500/Form.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<script lang="ts">
import { page } from '$app/stores';
import { defaults, superForm } from '$lib/index.js';
import { zod } from '$lib/adapters/zod.js';
import SuperDebug from '$lib/index.js';
import { modifyGroupAccessSchema } from './schema.js';
export let group;
const { form, message, enhance } = superForm(defaults(group, zod(modifyGroupAccessSchema)), {
dataType: 'json',
validators: zod(modifyGroupAccessSchema)
});
</script>

<SuperDebug data={$form} />

{#if $message}
<!-- eslint-disable-next-line svelte/valid-compile -->
<div class="status" class:error={$page.status >= 400} class:success={$page.status == 200}>
{$message}
</div>
{/if}

<form method="POST" use:enhance action="?/modify">
{#each group.users as user, i}
<input type="hidden" name="username" bind:value={$form.username} />

<label>
Remove {user.username}
<input name="remove" type="checkbox" bind:checked={$form.users[i].remove} />
</label>
{/each}

<button>Submit</button>
</form>

<style>
.status {
color: white;
padding: 4px;
padding-left: 8px;
border-radius: 2px;
font-weight: 500;
}
.status.success {
background-color: seagreen;
}
.status.error {
background-color: #ff2a02;
}
input {
background-color: #ddd;
}
form {
padding-top: 1rem;
padding-bottom: 1rem;
}
</style>
23 changes: 23 additions & 0 deletions src/routes/(v2)/v2/issue-500/schema.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { z } from 'zod';

export const inviteUserToGroupSchema = z.object({
username: z.string().min(2),
});

export const modifyGroupAccessSchema = z.object({
users: z
.object({
username: z.string().min(2),
remove: z.boolean(),
})
.array(),
});

export const fixedModifyGroupAccessSchema = z.object({
users: z
.object({
username: z.string().min(2),
removed: z.boolean(),
})
.array(),
});

0 comments on commit 75086f4

Please sign in to comment.