Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bryanmylee/svelte-keyed
A writable derived store for objects and arrays
https://github.com/bryanmylee/svelte-keyed
derived rxjs stores sveltejs writable
Last synced: 2 months ago
JSON representation
A writable derived store for objects and arrays
- Host: GitHub
- URL: https://github.com/bryanmylee/svelte-keyed
- Owner: bryanmylee
- License: mit
- Created: 2021-12-09T18:09:03.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-03T17:13:26.000Z (8 months ago)
- Last Synced: 2024-09-30T09:40:52.438Z (2 months ago)
- Topics: derived, rxjs, stores, sveltejs, writable
- Language: TypeScript
- Homepage:
- Size: 675 KB
- Stars: 68
- Watchers: 3
- Forks: 6
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
- awesome-svelte-stores - svelte-keyed
README
# svelte-keyed
[](https://www.npmjs.com/package/svelte-keyed)
[](https://www.npmjs.com/package/svelte-keyed)
[](https://coveralls.io/github/bryanmylee/svelte-keyed?branch=main)
[](https://bundlephobia.com/result?p=svelte-keyed)
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' } };
```
## Installation
```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.
## API
`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');
```
### Nullable parents
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(undefined);
// Writable
const firstName = keyed(maybeUser, 'name.first');
```
### Nullable properties
Nullable properties are accessed with [optional chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) behaviour.
```ts
const user = writable(initUser);
// Writable
const partnerName = keyed(user, 'relations.partner.name');
```
### TypeScript
`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');
```
## Motivations
We usually read and write properties of an object store with [auto-subscriptions](https://svelte.dev/tutorial/auto-subscriptions).
```svelte
```
However, auto-subscriptions are isolated to a Svelte component. `svelte-keyed` aims to solve several common limitations listed below.
### Context stores
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
setContext('profileSettings', keyed(settings, 'profile'));
```
```svelte
const profileSettings = getContext('profileSettings');
```
### Helper functions
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
const stats = writable({ userClicks: 0, userTaps: 0 });
const clicks = keyed(stats, 'userClicks');
```
```js
export const trackClicks = (node, clicks) => {
const listen = () => {
clicks.update(($clicks) => $clicks + 1);
};
node.addEventListener('click', listen);
return {
destroy() {
node.removeEventListener('click', listen);
},
};
};
```