npm install svelte-keyed
!license
!build
A writable derived store for objects and arrays!
``js
const user = writable({ name: { first: 'Rich', last: 'Harris' } });
const firstName = keyed(user, 'name.first');
$firstName = 'Bryan';
console.log($user); // { name: { first: 'Bryan', last: 'Harris' } };
`
`bash`
$ npm i -D svelte-keyed
Since Svelte automatically bundles all required dependencies, you only need to install this package as a dev dependency with the -D flag.
keyed takes a writable object store and a keypath, and returns a writable store whose _changes are reflected on the original store_.
Properties are accessed with dot notation, and arrays can be indexed with bracket notation.
`js`
const email = keyed(settings, 'profiles[0].email');
If the parent store is nullable, then the child store will also be nullable.
`ts
type User = {
name: {
first: string;
last: string;
};
relations: {
partner?: User;
};
};
const maybeUser = writable
// Writable
const firstName = keyed(maybeUser, 'name.first');
`
Nullable properties are accessed with optional chaining behaviour.
`ts`
const user = writable(initUser);
// Writable
const partnerName = keyed(user, 'relations.partner.name');
keyed infers the return type of the keyed store from the keypath.
`ts`
const user = writable(initUser);
// Writable
const firstName = keyed(user, 'name.first');
keyed will also try to guess all possible keypaths up to a depth limit of 3.
`ts`
keyed(user, '...');
┌───────────────────────────────┐
│ • name │
│ • name.first │
│ • name.last │
│ • relations │
│ • relations.partner │
│ • relations.partner.name │
└───────────────────────────────┘
_This limit is due to a TypeScript limitation where structured types must be generated statically. Increasing the depth limit slows down type compilation._
Type hints will not be provided for keypaths with a depth greater than 3 but this does not affect the return type.
`ts`
const user = writable(user);
// Writable
const firstName = keyed(user, 'relations.partner.name.first');
We usually read and write properties of an object store with auto-subscriptions.
`svelte`
However, auto-subscriptions are isolated to a Svelte component. svelte-keyed aims to solve several common limitations listed below.
Often, we want to set a property or element of a store into component context, then allow child components to read / write to the property.
`svelte
`
`svelte
`
One important method to reduce clutter on your component is to extract functionality into external helper functions. svelte-keyed allows you to create derived Writable stores that can be passed into or returned from helper functions.
`svelte
js
export const trackClicks = (node, clicks) => {
const listen = () => {
clicks.update(($clicks) => $clicks + 1);
};
node.addEventListener('click', listen);
return {
destroy() {
node.removeEventListener('click', listen);
},
};
};
``