elliott/hydratable
Elliott Johnson 1 week ago
parent 2d475ac961
commit 2218b1e97f

@ -369,3 +369,4 @@ export interface Fork {
} }
export * from './index-client.js'; export * from './index-client.js';
export { Hydratable, Transport, Encode, Decode } from '#shared';

@ -450,6 +450,55 @@ declare module 'svelte' {
* @deprecated Use [`$effect`](https://svelte.dev/docs/svelte/$effect) instead * @deprecated Use [`$effect`](https://svelte.dev/docs/svelte/$effect) instead
* */ * */
export function afterUpdate(fn: () => void): void; export function afterUpdate(fn: () => void): void;
type Getters<T> = {
[K in keyof T]: () => T[K];
};
/** Decode a value. The value will be whatever the evaluated JavaScript emitted by the corresponding {@link Encode} function evaluates to. */
export type Decode<T> = (value: any) => T;
/** Encode a value as a string. The string should be _valid JavaScript code_ -- for example, the output of `devalue`'s `uneval` function. */
export type Encode<T> = (value: T) => string;
/**
* Custom encode and decode options. This must be used in combination with an environment variable to enable treeshaking, eg:
* ```ts
* import { BROWSER } from 'esm-env';
* const transport: Transport<MyType> = BROWSER ? { decode: myDecodeFunction } : { encode: myEncodeFunction };
* ```
*/
export type Transport<T> =
| {
encode: Encode<T>;
decode?: undefined;
}
| {
encode?: undefined;
decode: Decode<T>;
};
/** Make the result of a function hydratable. This means it will be serialized on the server and available synchronously during hydration on the client. */
export type Hydratable = {
<T>(
/**
* A key to identify this hydratable value. Each hydratable value must have a unique key.
* If writing a library that utilizes `hydratable`, prefix your keys with your library name to prevent naming collisions.
*/
key: string,
/**
* A function that returns the value to be hydrated. On the server, this value will be stashed and serialized.
* On the client during hydration, the value will be used synchronously instead of invoking the function.
*/
fn: () => T,
options?: { transport?: Transport<T> }
): T;
/** Get a hydratable value from the server-rendered store. If used after hydration, will always return `undefined`. Only works on the client. */
get: <T>(key: string, options?: { decode?: Decode<T> }) => T | undefined;
/** Check if a hydratable value exists in the server-rendered store. */
has: (key: string) => boolean;
/** Set a hydratable value. Only works on the server during `render`. */
set: <T>(key: string, value: T, options?: { encode?: Encode<T> }) => void;
};
export const hydratable: Hydratable; export const hydratable: Hydratable;
/** /**
* Create a snippet programmatically * Create a snippet programmatically
@ -592,55 +641,6 @@ declare module 'svelte' {
* ``` * ```
* */ * */
export function untrack<T>(fn: () => T): T; export function untrack<T>(fn: () => T): T;
type Getters<T> = {
[K in keyof T]: () => T[K];
};
/** Decode a value. The value will be whatever the evaluated JavaScript emitted by the corresponding {@link Encode} function evaluates to. */
type Decode<T> = (value: any) => T;
/** Encode a value as a string. The string should be _valid JavaScript code_ -- for example, the output of `devalue`'s `uneval` function. */
type Encode<T> = (value: T) => string;
/**
* Custom encode and decode options. This must be used in combination with an environment variable to enable treeshaking, eg:
* ```ts
* import { BROWSER } from 'esm-env';
* const transport: Transport<MyType> = BROWSER ? { decode: myDecodeFunction } : { encode: myEncodeFunction };
* ```
*/
type Transport<T> =
| {
encode: Encode<T>;
decode?: undefined;
}
| {
encode?: undefined;
decode: Decode<T>;
};
/** Make the result of a function hydratable. This means it will be serialized on the server and available synchronously during hydration on the client. */
type Hydratable = {
<T>(
/**
* A key to identify this hydratable value. Each hydratable value must have a unique key.
* If writing a library that utilizes `hydratable`, prefix your keys with your library name to prevent naming collisions.
*/
key: string,
/**
* A function that returns the value to be hydrated. On the server, this value will be stashed and serialized.
* On the client during hydration, the value will be used synchronously instead of invoking the function.
*/
fn: () => T,
options?: { transport?: Transport<T> }
): T;
/** Get a hydratable value from the server-rendered store. If used after hydration, will always return `undefined`. Only works on the client. */
get: <T>(key: string, options?: { decode?: Decode<T> }) => T | undefined;
/** Check if a hydratable value exists in the server-rendered store. */
has: (key: string) => boolean;
/** Set a hydratable value. Only works on the server during `render`. */
set: <T>(key: string, value: T, options?: { encode?: Encode<T> }) => void;
};
export {}; export {};
} }

Loading…
Cancel
Save