Fonctions distantes

/** @type {import('@sveltejs/kit').Config} */
const 
const config: {
    kit: {
        experimental: {
 remoteFunctions: boolean;
        };
    };
    compilerOptions: {
        experimental: {
 async: boolean;
        };
    };
}
@type{import('@sveltejs/kit').Config}config = {
	
kit: {
    experimental: {
        remoteFunctions: boolean;
    };
}kit: {
		
experimental: {
    remoteFunctions: boolean;
}experimental: {
			remoteFunctions: booleanremoteFunctions: true
		}
	},
	
compilerOptions: {
    experimental: {
        async: boolean;
    };
}compilerOptions: {
		
experimental: {
    async: boolean;
}experimental: {
			async: booleanasync: true
		}
	}
};

export default 
const config: {
    kit: {
        experimental: {
 remoteFunctions: boolean;
        };
    };
    compilerOptions: {
        experimental: {
 async: boolean;
        };
    };
}
@type{import('@sveltejs/kit').Config}config;

import { function query<Output>(fn: () => MaybePromise<Output>): RemoteQueryFunction<void, Output> (+2 overloads)
Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.
See Remote functions for full documentation.
@since2.27query } from '$app/server';
import * as module "$lib/server/database"db from '$lib/server/database';

export const const getPosts: RemoteQueryFunction<void, any[]>getPosts = query<any[]>(fn: () => MaybePromise<any[]>): RemoteQueryFunction<void, any[]> (+2 overloads)
Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.
See Remote functions for full documentation.
@since2.27query(async () => {
	const const posts: any[]posts = await module "$lib/server/database"db.function sql(strings: TemplateStringsArray, ...values: any[]): Promise<any[]>sql`
		SELECT title, slug
		FROM post
		ORDER BY published_at
		DESC
	`;

	return const posts: any[]posts;
});

<script>
	import { getPosts } from './data.remote';
</script>

<h1>Articles récents</h1>

<ul>
	{#each await getPosts() as { title, slug }}
		<li><a href="/blog/{slug}">{title}</a></li>
	{/each}
</ul>

<script lang="ts">
	import { getPosts } from './data.remote';
</script>

<h1>Articles récents</h1>

<ul>
	{#each await getPosts() as { title, slug }}
		<li><a href="/blog/{slug}">{title}</a></li>
	{/each}
</ul>

<script>
	import { getPosts } from './data.remote';

	const query = getPosts();
</script>

<h1>Articles récents</h1>

{#if query.error}
	<p>oups !</p>
{:else if query.loading}
	<p>chargement...</p>
{:else}
	<ul>
		{#each query.current as { title, slug }}
			<li><a href="/blog/{slug}">{title}</a></li>
		{/each}
	</ul>
{/if}

<script lang="ts">
	import { getPosts } from './data.remote';

	const query = getPosts();
</script>

<h1>Articles récents</h1>

{#if query.error}
	<p>oups !</p>
{:else if query.loading}
	<p>chargement...</p>
{:else}
	<ul>
		{#each query.current as { title, slug }}
			<li><a href="/blog/{slug}">{title}</a></li>
		{/each}
	</ul>
{/if}

<script>
	import { getPost } from '../data.remote';

	let { params } = $props();

	const post = $derived(await getPost(params.slug));
</script>

<h1>{post.title}</h1>
<div>{@html post.content}</div>

<script lang="ts">
	import { getPost } from '../data.remote';

	let { params } = $props();

	const post = $derived(await getPost(params.slug));
</script>

<h1>{post.title}</h1>
<div>{@html post.content}</div>

import * as import vv from 'valibot';
import { function error(status: number, body: App.Error): never (+1 overload)
Throws an error with a HTTP status code and an optional message.
When called during request handling, this will cause SvelteKit to
return an error response without invoking handleError.
Make sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.
@paramstatus The HTTP status code. Must be in the range 400-599.
@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.
@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.
@throwsError If the provided status is invalid (not between 400 and 599).error } from '@sveltejs/kit';
import { function query<Output>(fn: () => MaybePromise<Output>): RemoteQueryFunction<void, Output> (+2 overloads)
Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.
See Remote functions for full documentation.
@since2.27query } from '$app/server';
import * as module "$lib/server/database"db from '$lib/server/database';

export const const getPosts: RemoteQueryFunction<void, void>getPosts = query<void>(fn: () => MaybePromise<void>): RemoteQueryFunction<void, void> (+2 overloads)
Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.
See Remote functions for full documentation.
@since2.27query(async () => { /* ... */ });

export const const getPost: RemoteQueryFunction<string, any>getPost = query<v.StringSchema<undefined>, any>(schema: v.StringSchema<undefined>, fn: (arg: string) => any): RemoteQueryFunction<string, any> (+2 overloads)
Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.
See Remote functions for full documentation.
@since2.27query(import vv.
function string(): v.StringSchema<undefined> (+1 overload)
export string
Creates a string schema.
@returnsA string schema.string(), async (slug: stringslug) => {
	const [const post: anypost] = await module "$lib/server/database"db.function sql(strings: TemplateStringsArray, ...values: any[]): Promise<any[]>sql`
		SELECT * FROM post
		WHERE slug = ${slug: stringslug}
	`;

	if (!const post: anypost) 
function error(status: number, body?: {
    message: string;
} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)
Throws an error with a HTTP status code and an optional message.
When called during request handling, this will cause SvelteKit to
return an error response without invoking handleError.
Make sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.
@paramstatus The HTTP status code. Must be in the range 400-599.
@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.
@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.
@throwsError If the provided status is invalid (not between 400 and 599).error(404, 'Not found');
	return const post: anypost;
});

<button onclick={() => getPosts().refresh()}>
	Vérifier s'il y a des nouveaux articles
</button>

import * as import vv from 'valibot';
import { function query<Output>(fn: () => MaybePromise<Output>): RemoteQueryFunction<void, Output> (+2 overloads)
Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.
See Remote functions for full documentation.
@since2.27query } from '$app/server';
import * as module "$lib/server/database"db from '$lib/server/database';

export const const getWeather: RemoteQueryFunction<string, any>getWeather = function query<Output>(fn: () => MaybePromise<Output>): RemoteQueryFunction<void, Output> (+2 overloads)
Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.
See Remote functions for full documentation.
@since2.27query.function query.batch<v.StringSchema<undefined>, any>(schema: v.StringSchema<undefined>, fn: (args: string[]) => MaybePromise<(arg: string, idx: number) => any>): RemoteQueryFunction<string, any> (+1 overload)
Creates a batch query function that collects multiple calls and executes them in a single request
See Remote functions for full documentation.
@since2.35batch(import vv.
function string(): v.StringSchema<undefined> (+1 overload)
export string
Creates a string schema.
@returnsA string schema.string(), async (cities: string[]cities) => {
	const const weather: any[]weather = await module "$lib/server/database"db.function sql(strings: TemplateStringsArray, ...values: any[]): Promise<any[]>sql`
		SELECT * FROM weather
		WHERE city = ANY(${cities: string[]cities})
	`;
	const const lookup: Map<any, any>lookup = new 
var Map: MapConstructor
new <any, any>(iterable?: Iterable<readonly [any, any]> | null | undefined) => Map<any, any> (+3 overloads)Map(const weather: any[]weather.Array<any>.map<[any, any]>(callbackfn: (value: any, index: number, array: any[]) => [any, any], thisArg?: any): [any, any][]
Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.
@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map(w: anyw => [w: anyw.city, w: anyw]));

	return (city: stringcity) => const lookup: Map<any, any>lookup.Map<any, any>.get(key: any): any
Returns a specified element from the Map object. If the value that is associated to the provided key is an object, then you will get a reference to that object and any change made to that object will effectively modify it inside the Map.
@returnsReturns the element associated with the specified key. If no element is associated with the specified key, undefined is returned.get(city: stringcity);
});

<script>
	import CityWeather from './CityWeather.svelte';
	import { getWeather } from './weather.remote.js';

	let { cities } = $props();
	let limit = $state(5);
</script>

<h2>Weather</h2>

{#each cities.slice(0, limit) as city}
	<h3>{city.name}</h3>
	<CityWeather weather={await getWeather(city.id)} />
{/each}

{#if cities.length > limit}
	<button onclick={() => limit += 5}>
		Charger plus
	</button>
{/if}

<script lang="ts">
	import CityWeather from './CityWeather.svelte';
	import { getWeather } from './weather.remote.js';

	let { cities } = $props();
	let limit = $state(5);
</script>

<h2>Weather</h2>

{#each cities.slice(0, limit) as city}
	<h3>{city.name}</h3>
	<CityWeather weather={await getWeather(city.id)} />
{/each}

{#if cities.length > limit}
	<button onclick={() => limit += 5}>
		Charger plus
	</button>
{/if}

import * as import vv from 'valibot';
import { function error(status: number, body: App.Error): never (+1 overload)
Throws an error with a HTTP status code and an optional message.
When called during request handling, this will cause SvelteKit to
return an error response without invoking handleError.
Make sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.
@paramstatus The HTTP status code. Must be in the range 400-599.
@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.
@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.
@throwsError If the provided status is invalid (not between 400 and 599).error, function redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL): never
Redirect a request. When called during request handling, SvelteKit will return a redirect response.
Make sure you’re not catching the thrown redirect, which would prevent SvelteKit from handling it.
Most common status codes:

303 See Other: redirect as a GET request (often used after a form POST request)
307 Temporary Redirect: redirect will keep the request method
308 Permanent Redirect: redirect will keep the request method, SEO will be transferred to the new page

See all redirect status codes
@paramstatus The HTTP status code. Must be in the range 300-308.
@paramlocation The location to redirect to.
@throwsRedirect This error instructs SvelteKit to redirect to the specified location.
@throwsError If the provided status is invalid.redirect } from '@sveltejs/kit';
import { function query<Output>(fn: () => MaybePromise<Output>): RemoteQueryFunction<void, Output> (+2 overloads)
Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.
See Remote functions for full documentation.
@since2.27query, function form<Output>(fn: () => MaybePromise<Output>): RemoteForm<void, Output> (+2 overloads)
Creates a form object that can be spread onto a &#x3C;form> element.
See Remote functions for full documentation.
@since2.27form } from '$app/server';
import * as module "$lib/server/database"db from '$lib/server/database';
import * as module "$lib/server/auth"auth from '$lib/server/auth';

export const const getPosts: RemoteQueryFunction<void, void>getPosts = query<void>(fn: () => MaybePromise<void>): RemoteQueryFunction<void, void> (+2 overloads)
Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.
See Remote functions for full documentation.
@since2.27query(async () => { /* ... */ });

export const const getPost: RemoteQueryFunction<string, void>getPost = query<v.StringSchema<undefined>, void>(schema: v.StringSchema<undefined>, fn: (arg: string) => MaybePromise<void>): RemoteQueryFunction<string, void> (+2 overloads)
Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.
See Remote functions for full documentation.
@since2.27query(import vv.
function string(): v.StringSchema<undefined> (+1 overload)
export string
Creates a string schema.
@returnsA string schema.string(), async (slug: stringslug) => { /* ... */ });

export const 
const createPost: RemoteForm<{
    title: string;
    content: string;
}, never>createPost = 
form<v.ObjectSchema<{
    readonly title: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;
    readonly content: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;
}, undefined>, never>(validate: v.ObjectSchema<...>, fn: (data: {
    ...;
}) => Promise<...>): RemoteForm<...> (+2 overloads)
Creates a form object that can be spread onto a &#x3C;form> element.
See Remote functions for full documentation.
@since2.27form(
	import vv.
object<{
    readonly title: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;
    readonly content: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;
}>(entries: {
    readonly title: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;
    readonly content: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>;
}): v.ObjectSchema<...> (+1 overload)
export object
Creates an object schema.
Hint: This schema removes unknown entries. The output will only include the
entries you specify. To include unknown entries, use looseObject. To
return an issue for unknown entries, use strictObject. To include and
validate unknown entries, use objectWithRest.
@paramentries The entries schema.
@returnsAn object schema.object({
		title: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>title: import vv.
pipe<v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>>(schema: v.StringSchema<undefined>, item1: v.NonEmptyAction<string, undefined> | v.PipeAction<string, string, v.NonEmptyIssue<...>>): v.SchemaWithPipe<...> (+20 overloads)
export pipe
Adds a pipeline to a schema, that can validate and transform its input.
@paramschema The root schema.
@paramitem1 The first pipe item.
@returnsA schema with a pipeline.pipe(import vv.
function string(): v.StringSchema<undefined> (+1 overload)
export string
Creates a string schema.
@returnsA string schema.string(), import vv.
nonEmpty<string>(): v.NonEmptyAction<string, undefined> (+1 overload)
export nonEmpty
Creates a non-empty validation action.
@returnsA non-empty action.nonEmpty()),
		content: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>]>content:import vv.
pipe<v.StringSchema<undefined>, v.NonEmptyAction<string, undefined>>(schema: v.StringSchema<undefined>, item1: v.NonEmptyAction<string, undefined> | v.PipeAction<string, string, v.NonEmptyIssue<...>>): v.SchemaWithPipe<...> (+20 overloads)
export pipe
Adds a pipeline to a schema, that can validate and transform its input.
@paramschema The root schema.
@paramitem1 The first pipe item.
@returnsA schema with a pipeline.pipe(import vv.
function string(): v.StringSchema<undefined> (+1 overload)
export string
Creates a string schema.
@returnsA string schema.string(), import vv.
nonEmpty<string>(): v.NonEmptyAction<string, undefined> (+1 overload)
export nonEmpty
Creates a non-empty validation action.
@returnsA non-empty action.nonEmpty())
	}),
	async ({ title: stringtitle, content: stringcontent }) => {
		// Vérifie si l'utilisateur est loggué
		const const user: auth.User | nulluser = await module "$lib/server/auth"auth.function getUser(): Promise<auth.User | null>
Récupère les informations de l’utilisateur à partir des cookies, en utilisant getRequestEvent
getUser();
		if (!const user: auth.User | nulluser) 
function error(status: number, body?: {
    message: string;
} extends App.Error ? App.Error | string | undefined : never): never (+1 overload)
Throws an error with a HTTP status code and an optional message.
When called during request handling, this will cause SvelteKit to
return an error response without invoking handleError.
Make sure you’re not catching the thrown error, which would prevent SvelteKit from handling it.
@paramstatus The HTTP status code. Must be in the range 400-599.
@parambody An object that conforms to the App.Error type. If a string is passed, it will be used as the message property.
@throwsHttpError This error instructs SvelteKit to initiate HTTP error handling.
@throwsError If the provided status is invalid (not between 400 and 599).error(401, 'Unauthorized');

		const const slug: stringslug = title: stringtitle.String.toLowerCase(): string
Converts all the alphabetic characters in a string to lowercase.
toLowerCase().
String.replace(searchValue: {
    [Symbol.replace](string: string, replaceValue: string): string;
}, replaceValue: string): string (+3 overloads)
Passes a string and 
{@linkcode 
replaceValue
}
 to the [Symbol.replace] method on 
{@linkcode 
searchValue
}
. This method is expected to implement its own replacement algorithm.
@paramsearchValue An object that supports searching for and replacing matches within a string.
@paramreplaceValue The replacement text.replace(/ /g, '-');

		// Insère dans la base de données
		await module "$lib/server/database"db.function sql(strings: TemplateStringsArray, ...values: any[]): Promise<any[]>sql`
			INSERT INTO post (slug, title, content)
			VALUES (${const slug: stringslug}, ${title: stringtitle}, ${content: stringcontent})
		`;

		// Redirige vers la page nouvellement créée
		function redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL): never
Redirect a request. When called during request handling, SvelteKit will return a redirect response.
Make sure you’re not catching the thrown redirect, which would prevent SvelteKit from handling it.
Most common status codes:

303 See Other: redirect as a GET request (often used after a form POST request)
307 Temporary Redirect: redirect will keep the request method
308 Permanent Redirect: redirect will keep the request method, SEO will be transferred to the new page

See all redirect status codes
@paramstatus The HTTP status code. Must be in the range 300-308.
@paramlocation The location to redirect to.
@throwsRedirect This error instructs SvelteKit to redirect to the specified location.
@throwsError If the provided status is invalid.redirect(303, `/blog/${const slug: stringslug}`);
	}
)

<script>
	import { createPost } from '../data.remote';
</script>

<h1>Créer un nouvel article</h1>

<form {...createPost}>
	<!-- le contenu du formulaire est défini ici -->

	<button>Publier !</button>
</form>

<script lang="ts">
	import { createPost } from '../data.remote';
</script>

<h1>Créer un nouvel article</h1>

<form {...createPost}>
	<!-- le contenu du formulaire est défini ici -->

	<button>Publier !</button>
</form>

<form {...createPost}>
	<label>
		<h2>Titre</h2>
		<input {...createPost.fields.title.as('text')} />
	</label>

	<label>
		<h2>Écrivez votre article</h2>
		<textarea {...createPost.fields.content.as('text')}></textarea>
	</label>

	<button>Publier !</button>
</form>

const 
const datingProfile: v.ObjectSchema<{
    readonly name: v.StringSchema<undefined>;
    readonly photo: v.FileSchema<undefined>;
    readonly info: v.ObjectSchema<{
        readonly height: v.NumberSchema<undefined>;
        readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;
    }, undefined>;
    readonly attributes: v.ArraySchema<...>;
}, undefined>datingProfile = import vv.
object<{
    readonly name: v.StringSchema<undefined>;
    readonly photo: v.FileSchema<undefined>;
    readonly info: v.ObjectSchema<{
        readonly height: v.NumberSchema<undefined>;
        readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;
    }, undefined>;
    readonly attributes: v.ArraySchema<...>;
}>(entries: {
    readonly name: v.StringSchema<undefined>;
    readonly photo: v.FileSchema<undefined>;
    readonly info: v.ObjectSchema<{
        readonly height: v.NumberSchema<undefined>;
        readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;
    }, undefined>;
    readonly attributes: v.ArraySchema<...>;
}): v.ObjectSchema<...> (+1 overload)
export object
Creates an object schema.
Hint: This schema removes unknown entries. The output will only include the
entries you specify. To include unknown entries, use looseObject. To
return an issue for unknown entries, use strictObject. To include and
validate unknown entries, use objectWithRest.
@paramentries The entries schema.
@returnsAn object schema.object({
	name: v.StringSchema<undefined>name: import vv.
function string(): v.StringSchema<undefined> (+1 overload)
export string
Creates a string schema.
@returnsA string schema.string(),
	photo: v.FileSchema<undefined>photo: import vv.
function file(): v.FileSchema<undefined> (+1 overload)
export file
Creates a file schema.
@returnsA file schema.file(),
	
info: v.ObjectSchema<{
    readonly height: v.NumberSchema<undefined>;
    readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;
}, undefined>info: import vv.
object<{
    readonly height: v.NumberSchema<undefined>;
    readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;
}>(entries: {
    readonly height: v.NumberSchema<undefined>;
    readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;
}): v.ObjectSchema<...> (+1 overload)
export object
Creates an object schema.
Hint: This schema removes unknown entries. The output will only include the
entries you specify. To include unknown entries, use looseObject. To
return an issue for unknown entries, use strictObject. To include and
validate unknown entries, use objectWithRest.
@paramentries The entries schema.
@returnsAn object schema.object({
		height: v.NumberSchema<undefined>height: import vv.
function number(): v.NumberSchema<undefined> (+1 overload)
export number
Creates a number schema.
@returnsA number schema.number(),
		likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>likesDogs: import vv.
optional<v.BooleanSchema<undefined>, false>(wrapped: v.BooleanSchema<undefined>, default_: false): v.OptionalSchema<v.BooleanSchema<undefined>, false> (+1 overload)
export optional
Creates an optional schema.
@paramwrapped The wrapped schema.
@paramdefault_ The default value.
@returnsAn optional schema.optional(import vv.
function boolean(): v.BooleanSchema<undefined> (+1 overload)
export boolean
Creates a boolean schema.
@returnsA boolean schema.boolean(), false)
	}),
	attributes: v.ArraySchema<v.StringSchema<undefined>, undefined>attributes: import vv.
array<v.StringSchema<undefined>>(item: v.StringSchema<undefined>): v.ArraySchema<v.StringSchema<undefined>, undefined> (+1 overload)
export array
Creates an array schema.
@paramitem The item schema.
@returnsAn array schema.array(import vv.
function string(): v.StringSchema<undefined> (+1 overload)
export string
Creates a string schema.
@returnsA string schema.string())
});

export const 
const createProfile: RemoteForm<{
    name: string;
    photo: File;
    info: {
        height: number;
        likesDogs?: boolean | undefined;
    };
    attributes: string[];
}, void>createProfile = 
form<v.ObjectSchema<{
    readonly name: v.StringSchema<undefined>;
    readonly photo: v.FileSchema<undefined>;
    readonly info: v.ObjectSchema<{
        readonly height: v.NumberSchema<undefined>;
        readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;
    }, undefined>;
    readonly attributes: v.ArraySchema<...>;
}, undefined>, void>(validate: v.ObjectSchema<...>, fn: (data: {
    ...;
}) => MaybePromise<...>): RemoteForm<...> (+2 overloads)
Creates a form object that can be spread onto a &#x3C;form> element.
See Remote functions for full documentation.
@since2.27form(
const datingProfile: v.ObjectSchema<{
    readonly name: v.StringSchema<undefined>;
    readonly photo: v.FileSchema<undefined>;
    readonly info: v.ObjectSchema<{
        readonly height: v.NumberSchema<undefined>;
        readonly likesDogs: v.OptionalSchema<v.BooleanSchema<undefined>, false>;
    }, undefined>;
    readonly attributes: v.ArraySchema<...>;
}, undefined>datingProfile, (
data: {
    name: string;
    photo: File;
    info: {
        height: number;
        likesDogs: boolean;
    };
    attributes: string[];
}data) => { /* ... */ });

<script>
	import { createProfile } from './data.remote';

	const { name, photo, info, attributes } = createProfile.fields;
</script>

<form {...createProfile} enctype="multipart/form-data">
	<label>
		<input {...name.as('text')} /> Nom
	</label>

	<label>
		<input {...photo.as('file')} /> Photo
	</label>

	<label>
		<input {...info.height.as('number')} /> Hauteur (cm)
	</label>

	<label>
		<input {...info.likesDogs.as('checkbox')} /> J'aime les chiens
	</label>

	<h2>Mes meilleures compétences</h2>
	<input {...attributes[0].as('text')} />
	<input {...attributes[1].as('text')} />
	<input {...attributes[2].as('text')} />

	<button>envoyer</button>
</form>

export const 
const survey: RemoteForm<{
    operatingSystem: "windows" | "mac" | "linux";
    languages?: ("html" | "css" | "js")[] | undefined;
}, void>survey = 
form<v.ObjectSchema<{
    readonly operatingSystem: v.PicklistSchema<["windows", "mac", "linux"], undefined>;
    readonly languages: v.OptionalSchema<v.ArraySchema<v.PicklistSchema<["html", "css", "js"], undefined>, undefined>, readonly []>;
}, undefined>, void>(validate: v.ObjectSchema<...>, fn: (data: {
    ...;
}) => MaybePromise<...>): RemoteForm<...> (+2 overloads)
Creates a form object that can be spread onto a &#x3C;form> element.
See Remote functions for full documentation.
@since2.27form(
	import vv.
object<{
    readonly operatingSystem: v.PicklistSchema<["windows", "mac", "linux"], undefined>;
    readonly languages: v.OptionalSchema<v.ArraySchema<v.PicklistSchema<["html", "css", "js"], undefined>, undefined>, readonly []>;
}>(entries: {
    readonly operatingSystem: v.PicklistSchema<["windows", "mac", "linux"], undefined>;
    readonly languages: v.OptionalSchema<v.ArraySchema<v.PicklistSchema<["html", "css", "js"], undefined>, undefined>, readonly []>;
}): v.ObjectSchema<...> (+1 overload)
export object
Creates an object schema.
Hint: This schema removes unknown entries. The output will only include the
entries you specify. To include unknown entries, use looseObject. To
return an issue for unknown entries, use strictObject. To include and
validate unknown entries, use objectWithRest.
@paramentries The entries schema.
@returnsAn object schema.object({
		operatingSystem: v.PicklistSchema<["windows", "mac", "linux"], undefined>operatingSystem: import vv.
picklist<["windows", "mac", "linux"]>(options: ["windows", "mac", "linux"]): v.PicklistSchema<["windows", "mac", "linux"], undefined> (+1 overload)
export picklist
Creates a picklist schema.
@paramoptions The picklist options.
@returnsA picklist schema.picklist(['windows', 'mac', 'linux']),
		languages: v.OptionalSchema<v.ArraySchema<v.PicklistSchema<["html", "css", "js"], undefined>, undefined>, readonly []>languages: import vv.
optional<v.ArraySchema<v.PicklistSchema<["html", "css", "js"], undefined>, undefined>, readonly []>(wrapped: v.ArraySchema<v.PicklistSchema<["html", "css", "js"], undefined>, undefined>, default_: readonly []): v.OptionalSchema<...> (+1 overload)
export optional
Creates an optional schema.
@paramwrapped The wrapped schema.
@paramdefault_ The default value.
@returnsAn optional schema.optional(import vv.
array<v.PicklistSchema<["html", "css", "js"], undefined>>(item: v.PicklistSchema<["html", "css", "js"], undefined>): v.ArraySchema<v.PicklistSchema<["html", "css", "js"], undefined>, undefined> (+1 overload)
export array
Creates an array schema.
@paramitem The item schema.
@returnsAn array schema.array(import vv.
picklist<["html", "css", "js"]>(options: ["html", "css", "js"]): v.PicklistSchema<["html", "css", "js"], undefined> (+1 overload)
export picklist
Creates a picklist schema.
@paramoptions The picklist options.
@returnsA picklist schema.picklist(['html', 'css', 'js'])), [])
	}),
	(
data: {
    operatingSystem: "windows" | "mac" | "linux";
    languages: ("html" | "css" | "js")[];
}data) => { /* ... */ }
);

<form {...survey}>
	<h2>Quel système d'exploitation utilisez-vous ?</h2>

	{#each ['windows', 'mac', 'linux'] as os}
		<label>
			<input {...survey.fields.operatingSystem.as('radio', os)}>
			{os}
		</label>
	{/each}

	<h2>Dans quels langages écrivez-vous du code ?</h2>

	{#each ['html', 'css', 'js'] as language}
		<label>
			<input {...survey.fields.languages.as('checkbox', language)}>
			{language}
		</label>
	{/each}

	<button>envoyer</button>
</form>

<form {...survey}>
	<h2>Quel système d'exploitation utilisez-vous ?</h2>

	<select {...survey.fields.operatingSystem.as('select')}>
		<option>windows</option>
		<option>mac</option>
		<option>linux</option>
	</select>

	<h2>Dans quels langages écrivez-vous du code ?</h2>

	<select {...survey.fields.languages.as('select multiple')}>
		<option>html</option>
		<option>css</option>
		<option>js</option>
	</select>

	<button>envoyer</button>
</form>

import * as import vv from 'valibot';
import { function form<Output>(fn: () => MaybePromise<Output>): RemoteForm<void, Output> (+2 overloads)
Creates a form object that can be spread onto a &#x3C;form> element.
See Remote functions for full documentation.
@since2.27form } from '$app/server';
import * as import dbdb from '$lib/server/database';

export const const buyHotcakes: RemoteForm<RemoteFormInput, unknown>buyHotcakes = form<RemoteFormInput, unknown>(validate: "unchecked", fn: (data: RemoteFormInput) => unknown): RemoteForm<RemoteFormInput, unknown> (+2 overloads)
Creates a form object that can be spread onto a &#x3C;form> element.
See Remote functions for full documentation.
@since2.27form(
	import vv.
object<{
    readonly qty: v.SchemaWithPipe<readonly [v.NumberSchema<undefined>, v.MinValueAction<number, 1, "vous devez acheter au moins un gâteau">]>;
}>(entries: {
    readonly qty: v.SchemaWithPipe<readonly [v.NumberSchema<undefined>, v.MinValueAction<number, 1, "vous devez acheter au moins un gâteau">]>;
}): v.ObjectSchema<...> (+1 overload)
export object
Creates an object schema.
Hint: This schema removes unknown entries. The output will only include the
entries you specify. To include unknown entries, use looseObject. To
return an issue for unknown entries, use strictObject. To include and
validate unknown entries, use objectWithRest.
@paramentries The entries schema.
@returnsAn object schema.object({
		qty: v.SchemaWithPipe<readonly [v.NumberSchema<undefined>, v.MinValueAction<number, 1, "vous devez acheter au moins un gâteau">]>qty: import vv.
pipe<v.NumberSchema<undefined>, v.MinValueAction<number, 1, "vous devez acheter au moins un gâteau">>(schema: v.NumberSchema<undefined>, item1: v.MinValueAction<number, 1, "vous devez acheter au moins un gâteau"> | v.PipeAction<...>): v.SchemaWithPipe<...> (+20 overloads)
export pipe
Adds a pipeline to a schema, that can validate and transform its input.
@paramschema The root schema.
@paramitem1 The first pipe item.
@returnsA schema with a pipeline.pipe(
			import vv.
function number(): v.NumberSchema<undefined> (+1 overload)
export number
Creates a number schema.
@returnsA number schema.number(),
			import vv.
minValue<number, 1, "vous devez acheter au moins un gâteau">(requirement: 1, message: "vous devez acheter au moins un gâteau"): v.MinValueAction<number, 1, "vous devez acheter au moins un gâteau"> (+1 overload)
export minValue
Creates a min value validation action.
@paramrequirement The minimum value.
@parammessage The error message.
@returnsA min value action.minValue(1, 'vous devez acheter au moins un gâteau')
		)
	}),
	async (data: anydata, invalid: anyinvalid) => {
		try {
			await import dbdb.buy(data: anydata.qty);
		} catch (function (local var) e: unknowne) {
			if (function (local var) e: unknowne.code === 'OUT_OF_STOCK') {
				invalid: anyinvalid(
					invalid: anyinvalid.qty(`nous n'avons pas assez de gâteaux`)
				);
			}
		}
	}
);

<form {...createPost}>
	<label>
		<h2>Title</h2>

		{#each createPost.fields.title.issues() as issue}
			<p class="issue">{issue.message}</p>
		{/each}

		<input {...createPost.fields.title.as('text')} />
	</label>

	<label>
		<h2>Écrivez votre article</h2>

		{#each createPost.fields.content.issues() as issue}
			<p class="issue">{issue.message}</p>
		{/each}

		<textarea {...createPost.fields.content.as('text')}></textarea>
	</label>

	<button>Publier !</button>
</form>

<form {...createPost} oninput={() => createPost.validate()}>
	<!-- -->
</form>

<script>
	import * as v from 'valibot';
	import { createPost } from '../data.remote';

	const schema = v.object({
		title: v.pipe(v.string(), v.nonEmpty()),
		content: v.pipe(v.string(), v.nonEmpty())
	});
</script>

<h1>Créer un nouvel article</h1>

<form {...createPost.preflight(schema)}>
	<!-- -->
</form>

{#each createPost.fields.allIssues() as issue}
	<p>{issue.message}</p>
{/each}

<form {...createPost}>
	<!-- -->
</form>

<div class="preview">
	<h2>{createPost.fields.title.value()}</h2>
	<div>{@html render(createPost.fields.content.value())}</div>
</div>

<script>
	import { createPost } from '../data.remote';

	// ceci...
	createPost.fields.set({
		title: 'Mon nouvel article de blog',
		content: 'Lorem ipsum dolor sit amet...'
	});

	// ...est équivalent à ceci :
	createPost.fields.title.set('Mon nouvel article de blog');
	createPost.fields.content.set('Lorem ipsum dolor sit amet');
</script>

<form {...register}>
	<label>
		Nom
		<input {...register.fields.username.as('text')} />
	</label>

	<label>
		Mot de passe
		<input {...register.fields._password.as('password')} />
	</label>

	<button>S'inscrire !</button>
</form>

export const const getPosts: RemoteQueryFunction<void, void>getPosts = query<void>(fn: () => MaybePromise<void>): RemoteQueryFunction<void, void> (+2 overloads)
Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.
See Remote functions for full documentation.
@since2.27query(async () => { /* ... */ });

export const const getPost: RemoteQueryFunction<string, void>getPost = query<v.StringSchema<undefined>, void>(schema: v.StringSchema<undefined>, fn: (arg: string) => MaybePromise<void>): RemoteQueryFunction<string, void> (+2 overloads)
Creates a remote query. When called from the browser, the function will be invoked on the server via a fetch call.
See Remote functions for full documentation.
@since2.27query(import vv.
function string(): v.StringSchema<undefined> (+1 overload)
export string
Creates a string schema.
@returnsA string schema.string(), async (slug: stringslug) => { /* ... */ });

export const const createPost: RemoteForm<{}, never>createPost = form<v.ObjectSchema<{}, undefined>, never>(validate: v.ObjectSchema<{}, undefined>, fn: (data: {}) => Promise<never>): RemoteForm<{}, never> (+2 overloads)
Creates a form object that can be spread onto a &#x3C;form> element.
See Remote functions for full documentation.
@since2.27form(
	import vv.
object<{}>(entries: {}): v.ObjectSchema<{}, undefined> (+1 overload)
export object
Creates an object schema.
Hint: This schema removes unknown entries. The output will only include the
entries you specify. To include unknown entries, use looseObject. To
return an issue for unknown entries, use strictObject. To include and
validate unknown entries, use objectWithRest.
@paramentries The entries schema.
@returnsAn object schema.object({/* ... */}),
	async (data: {}data) => {
		// la logique du formulaire se place ici...

		// Met à jour `getPosts()` sur le serveur, et
		// renvoie les données au client avec le résultat
		// de `createPost`
		await const getPosts: (arg: void) => RemoteQuery<void>getPosts().function refresh(): Promise<void>
On the client, this function will re-fetch the query from the server.
On the server, this can be called in the context of a command or form and the refreshed data will accompany the action response back to the client.
This prevents SvelteKit needing to refresh all queries on the page in a second server round-trip.
refresh();

		// Redirige vers la page nouvellement créée
		function redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL): never
Redirect a request. When called during request handling, SvelteKit will return a redirect response.
Make sure you’re not catching the thrown redirect, which would prevent SvelteKit from handling it.
Most common status codes:

303 See Other: redirect as a GET request (often used after a form POST request)
307 Temporary Redirect: redirect will keep the request method
308 Permanent Redirect: redirect will keep the request method, SEO will be transferred to the new page

See all redirect status codes
@paramstatus The HTTP status code. Must be in the range 300-308.
@paramlocation The location to redirect to.
@throwsRedirect This error instructs SvelteKit to redirect to the specified location.
@throwsError If the provided status is invalid.redirect(303, `/blog/${const slug: ""slug}`);
	}
);

export const const updatePost: RemoteForm<{}, void>updatePost = form<v.ObjectSchema<{}, undefined>, void>(validate: v.ObjectSchema<{}, undefined>, fn: (data: {}) => MaybePromise<void>): RemoteForm<{}, void> (+2 overloads)
Creates a form object that can be spread onto a &#x3C;form> element.
See Remote functions for full documentation.
@since2.27form(
	import vv.
object<{}>(entries: {}): v.ObjectSchema<{}, undefined> (+1 overload)
export object
Creates an object schema.
Hint: This schema removes unknown entries. The output will only include the
entries you specify. To include unknown entries, use looseObject. To
return an issue for unknown entries, use strictObject. To include and
validate unknown entries, use objectWithRest.
@paramentries The entries schema.
@returnsAn object schema.object({/* ... */}),
	async (data: {}data) => {
		// la logique de formulaire s'écrit ici...
		const const result: anyresult = const externalApi: any
@type{any}externalApi.update(
const post: {
    id: string;
}post);

		// L'API nous donne déjà l'article mis à jour,
		// il n'y donc pas besoin de le rafraîchir, nous pouvons le définir directement
		await const getPost: (arg: string) => RemoteQuery<void>getPost(
const post: {
    id: string;
}post.id: stringid).function set(value: void): void
On the client, this function will update the value of the query without re-fetching it.
On the server, this can be called in the context of a command or form and the specified data will accompany the action response back to the client.
This prevents SvelteKit needing to refresh all queries on the page in a second server round-trip.
set(const result: anyresult);
	}
);