feat: hydratable and friends
#16960
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| export { | ||
| get_hydratable_value as getHydratableValue, | ||
| has_hydratable_value as hasHydratableValue | ||
| } from '../internal/client/hydratable.js'; | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| /** @import { Decode, Transport } from '#shared' */ | ||
| import { hydrating } from './dom/hydration.js'; | ||
|
|
||
| /** | ||
| * @template T | ||
| * @param {string} key | ||
| * @param {() => T} fn | ||
| * @param {Transport<T>} [options] | ||
| * @returns {T} | ||
| */ | ||
| export function hydratable(key, fn, options) { | ||
| if (!hydrating) { | ||
| return fn(); | ||
| } | ||
| var store = window.__svelte?.h; | ||
| const val = store?.get(key); | ||
| if (val === undefined) { | ||
| // TODO this should really be an error or at least a warning because it would be disastrous to expect | ||
| // something to be synchronously hydratable and then have it not be | ||
| return fn(); | ||
| } | ||
| return decode(val, options?.decode); | ||
| } | ||
|
|
||
| /** | ||
| * @template T | ||
| * @param {string} key | ||
| * @param {{ decode?: Decode<T> }} [options] | ||
| * @returns {T | undefined} | ||
| */ | ||
| export function get_hydratable_value(key, options = {}) { | ||
| // TODO probably can DRY this out with the above | ||
| if (!hydrating) { | ||
| return undefined; | ||
| } | ||
|
|
||
| var store = window.__svelte?.h; | ||
| const val = store?.get(key); | ||
| if (val === undefined) { | ||
| return undefined; | ||
| } | ||
|
|
||
| return decode(val, options.decode); | ||
| } | ||
|
|
||
| /** | ||
| * @param {string} key | ||
| * @returns {boolean} | ||
| */ | ||
| export function has_hydratable_value(key) { | ||
| if (!hydrating) { | ||
| return false; | ||
| } | ||
| var store = window.__svelte?.h; | ||
| return store?.has(key) ?? false; | ||
| } | ||
|
|
||
| /** | ||
| * @template T | ||
| * @param {unknown} val | ||
| * @param {Decode<T> | undefined} decode | ||
| * @returns {T} | ||
| */ | ||
| function decode(val, decode) { | ||
| return (decode ?? ((val) => /** @type {T} */ (val)))(val); | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| /** @import { CacheEntry } from '#shared' */ | ||
| import { BaseCacheObserver } from '../../shared/cache-observer.js'; | ||
| import { tick } from '../runtime.js'; | ||
| import { get_effect_validation_error_code, render_effect } from './effects.js'; | ||
|
|
||
| /** @typedef {{ count: number, item: any }} Entry */ | ||
| /** @type {Map<string, CacheEntry>} */ | ||
| const client_cache = new Map(); | ||
|
||
|
|
||
| /** | ||
| * @template {(...args: any[]) => any} TFn | ||
| * @param {string} key | ||
| * @param {TFn} fn | ||
| * @returns {ReturnType<TFn>} | ||
| */ | ||
| export function cache(key, fn) { | ||
| const cached = client_cache.has(key); | ||
| const entry = client_cache.get(key); | ||
elliott-with-the-longest-name-on-github marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| const maybe_remove = create_remover(key); | ||
|
|
||
| const tracking = get_effect_validation_error_code() === null; | ||
| if (tracking) { | ||
| render_effect(() => { | ||
| if (entry) entry.count++; | ||
| return () => { | ||
| const entry = client_cache.get(key); | ||
| if (!entry) return; | ||
| entry.count--; | ||
| maybe_remove(entry); | ||
| }; | ||
| }); | ||
| } | ||
|
|
||
| if (cached) { | ||
elliott-with-the-longest-name-on-github marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| return entry?.item; | ||
| } | ||
|
|
||
| const item = fn(); | ||
| const new_entry = { | ||
| item, | ||
| count: tracking ? 1 : 0 | ||
| }; | ||
| client_cache.set(key, new_entry); | ||
|
|
||
| Promise.resolve(item).then( | ||
| () => maybe_remove(new_entry), | ||
| () => maybe_remove(new_entry) | ||
| ); | ||
| return item; | ||
| } | ||
|
|
||
| /** | ||
| * @param {string} key | ||
| */ | ||
| function create_remover(key) { | ||
| /** | ||
| * @param {Entry | undefined} entry | ||
| */ | ||
| return (entry) => | ||
| tick().then(() => { | ||
| if (!entry?.count && entry === client_cache.get(key)) { | ||
| client_cache.delete(key); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| /** | ||
| * @template T | ||
| * @extends BaseCacheObserver<T> | ||
| */ | ||
| export class CacheObserver extends BaseCacheObserver { | ||
| constructor(prefix = '') { | ||
| super(() => client_cache, prefix); | ||
| } | ||
| } | ||
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,16 @@ | ||||||
| /** @import { GetRequestInit, Resource } from '#shared' */ | ||||||
| import { cache } from './cache'; | ||||||
| import { fetch_json } from '../../shared/utils.js'; | ||||||
| import { hydratable } from '../hydratable'; | ||||||
| import { resource } from './resource'; | ||||||
|
|
||||||
| /** | ||||||
| * @template TReturn | ||||||
| * @param {string | URL} url | ||||||
| * @param {GetRequestInit} [init] | ||||||
| * @returns {Resource<TReturn>} | ||||||
| */ | ||||||
| export function fetcher(url, init) { | ||||||
| const key = `svelte/fetcher/${typeof url === 'string' ? url : url.toString()}`; | ||||||
|
||||||
| const key = `svelte/fetcher/${typeof url === 'string' ? url : url.toString()}`; | |
| const key = `svelte/fetcher/${url}`; |
I definitely think there's value in shipping this — it'll be the most common way to consume resources other than remote functions (or maybe including remote functions), and even if we say 'it's a one-liner' it's a hell of a one-liner. Nesting three thunks and duplicating a key is kind of a lot, even once you understand why it's all necessary.
Of course it does mean we have to nail the fetcher API, though minus the TODO error message I'm not sure what could change. Unless we wanted to make any changes to the underlying primitives:
- we've probably had this convo already but are there any times we wouldn't want a resource to be cached, and if so does
resource(key, fn)make more sense thancache(key, () => resource(fn))? (We could still exposecachefor non-resource things of course) - do we have opinions about abort signals? obviously you could pass
signal: getAbortSignal()with yourinitargument but if you created/refreshed stuff outside the effect cycle then you can't use it. do we need to do something likeresource((signal) => ...)or no? (it would be a shame to have to create the abort signal eagerly. and maybe you don't want to abort previous fetches? so in summary, probably not, though i want to make sure we consider it)
There was a problem hiding this comment.
cache / no cache
My main thought around this is for long-lived resources or cases where you need to handle caching that doesn't fit perfectly within our "cached as long as it's reactively referenced" paradigm. Eg. It would be valid to do this:
export const space_ship = resource(get_random_ship);Where the "cache" is the module, i.e. "this should always exist". This just straight up is not possible with how cache is right now, nor do I think it's a use case we should really try to tackle with cache. It would be really weird to have to provide a key to the above declaration, and even weirder when another declaration with the same key didn't refer to the same object.
abort
Given we allow you to pass your own init, I think it's okay to expect people to pass in getAbortSignal() if they need that functionality.
There was a problem hiding this comment.
HOLD ON A MINUTE
Why do we need to provide a cache key at all? The function is the key!
If we do that, then the space_ship example makes perfect sense — we just don't use the cache when cache is called outside a tracking context.
Of course there are still cases where you do want deduping, e.g. two fetcher(...) occurrences with the same argument. So maybe it's like this:
function cache(fn, key = fn) {
// ...
}Abort signals — actually I realised it's not as straightforward as passing it in init, because you might be calling fetcher outside an effect, in which case you can't call getAbortSignal. So if you did want cancellation it would have to be managed by fetcher rather than by Svelte's lifecycle, which suggests adding an options object separate from init... hmm. Maybe 'nail the fetcher API' isn't quite as trivial as we thought.
There was a problem hiding this comment.
Errr... wait. I think I had a brain malfunction. That won't work in a lot of cases. But maybe it works in the cases like space_ship?
There was a problem hiding this comment.
This just straight up is not possible with how
cacheis right now
To be clear, it is possible — it works fine. It just doesn't cache the result for longer than a microtask because it's being created outside a tracking context, and that's fine.
But, yeah... it's also pointless. The only times you'd call resource outside a tracking context are the times when you're holding a reference to the resource yourself, in which case you don't need it to be cached. When you do need it to be cached, it's because you're calling it with a fresh arrow function each time which is obviously no good as a key.
Look forward to having this conversation with myself again in a few weeks when I've forgotten this one
There was a problem hiding this comment.
I'll save a link to this just in case, will be ready to fire it off to you 😂
Uh oh!
There was an error while loading. Please reload this page.