yatta/frameworks

Binds a call and hands back a start/stop pair.

The store's subscription is established here so no adapter has to remember to.

The key a call is stored under.

Both the route and the arguments, so two calls cannot share a value by accident and the same call always does.

Builds an Angular client whose calls drive Angular signals.

No framework at all — a plain page, a script tag, a worker, a Web Component.

The same contract the other adapters implement, so a page with no framework behaves identically to one inside a component tree: same caching, same de-duplication, same rollback. ```ts const call = createDomCall(store, api.getUser, { params: { id } }); const off = call.subscribe((state) => render(state.data)); ```

1const call = createDomCall(store, api.getUser, { params: { id } });2const off = call.subscribe((state) => render(state.data));

Reads a Svelte call from plain TypeScript, with no template.

Provided because the store contract needs a subscription to be read from outside a component, and without this there is no non-template way to do it. Inside a component, use <code>$user</code> instead.

The prefix a target's cache keys start with.

`getUser` and `getUser:` both become `getUser:`. A plain string with no colon is treated as a route name rather than as a literal key, because "invalidate this exact key" is almost never what a caller means when they are naming a route.

The optimistic-write-then-request sequence, shared so rollback cannot differ.

Vue 3.

`shallowRef` rather than `ref`. A response is a plain object, and a deep reactive proxy around it means every read goes through a proxy — and an optimistic rollback would then mutate the proxy instead of restoring what was there. ```vue <script setup lang="ts"> const { state, reload } = useCall(api.getUser, { params: { id: props.id } }); const user = computed(() => state.value.data); </script> ```

1<script setup lang="ts">2const { state, reload } = useCall(api.getUser, { params: { id: props.id } });3const user = computed(() => state.value.data);4</script>

Qwik.

A signal and a resource, rather than a subscription. Qwik containers are rendered on the server, serialized, and *resumed* in the browser without re-running the component — so anything held in a closure is gone, and the only thing that survives is serialized state. A resource is exactly that. Must be called during a component's render. That is a Qwik requirement rather than one this binding adds.

Solid.

The closest fit of the group: Solid's reactivity is push-based, which is what the store's subscription already is, so a signal write is the whole adapter. ```tsx const user = useCall(api.getUser, { params: { id } }); return <Show when={user().data}>{u => <span>{u().name}</span>}</Show>; ```

1const user = useCall(api.getUser, { params: { id } });2return <Show when={user().data}>{u => <span>{u().name}</span>}</Show>;

Angular.

A plain class rather than a service decorator, so it can be constructed in a factory provider or built by hand in a test. Angular's own `signal` is used, not an RxJS subject: a signal is readable straight from a template with no async pipe, and this keeps RxJS out of the dependency list. ```ts

The options every mutation binding accepts.

Keys an optimistic write and rollback operate on.

Subscribes a callback to a bound call.

Returned rather than done inside the constructor of the holder, because a binding is created during a framework's render and doing work there is what causes a request per render.

Svelte.

Returns a **Svelte store**, not an object with getters. Getters on a plain object are not reactive in Svelte. It compiles components and only tracks reads of `$state` or a store's `subscribe`; a getter on a plain object is invisible to it, so the earlier version here — getters plus an empty change callback — would render once and then never update again. The store contract is the one thing Svelte actually subscribes to, and `$user` works on it directly. ```svelte <script lang="ts"> import { useSvelteCall } from "yatta/frameworks"; const user = useSvelteCall(store, api.getUser, { params: { id: data.id } }); </script> {$user.data?.name} ``` Also usable outside a component: `user.subscribe(fn)` works in plain TypeScript.

1<script lang="ts">2  import { useSvelteCall } from "yatta/frameworks";3  const user = useSvelteCall(store, api.getUser, { params: { id: data.id } });4</script>5 6{$user.data?.name}

The Svelte store contract, declared here so Svelte is not a build-time dependency.

What a mutation can invalidate.

A route method, so `api.getUser` invalidates every `getUser` key whatever its arguments. A mutation on a user has to invalidate `getUser` for every id, and listing each id means writing down every id that was ever fetched — which is wrong the moment a component asks for an id nobody predicted. A string is accepted too, read as a prefix when it ends in ":".