{"id":13735710,"url":"https://github.com/bryanmylee/svelte-keyed","last_synced_at":"2025-07-19T03:34:48.856Z","repository":{"id":40459911,"uuid":"436715374","full_name":"bryanmylee/svelte-keyed","owner":"bryanmylee","description":"A writable derived store for objects and arrays","archived":false,"fork":false,"pushed_at":"2024-04-03T17:13:26.000Z","size":691,"stargazers_count":71,"open_issues_count":2,"forks_count":6,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-03T04:49:10.780Z","etag":null,"topics":["derived","rxjs","stores","sveltejs","writable"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bryanmylee.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-12-09T18:09:03.000Z","updated_at":"2024-11-08T05:28:17.000Z","dependencies_parsed_at":"2024-01-06T12:02:50.807Z","dependency_job_id":"a30ee03f-98b9-4d41-b603-271b82273858","html_url":"https://github.com/bryanmylee/svelte-keyed","commit_stats":{"total_commits":48,"total_committers":5,"mean_commits":9.6,"dds":"0.35416666666666663","last_synced_commit":"cc27823959ae486005abdd070d1ebf70b6ec83f3"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/bryanmylee/svelte-keyed","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bryanmylee%2Fsvelte-keyed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bryanmylee%2Fsvelte-keyed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bryanmylee%2Fsvelte-keyed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bryanmylee%2Fsvelte-keyed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bryanmylee","download_url":"https://codeload.github.com/bryanmylee/svelte-keyed/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bryanmylee%2Fsvelte-keyed/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265883683,"owners_count":23843793,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["derived","rxjs","stores","sveltejs","writable"],"created_at":"2024-08-03T03:01:10.068Z","updated_at":"2025-07-19T03:34:48.832Z","avatar_url":"https://github.com/bryanmylee.png","language":"TypeScript","funding_links":[],"categories":["Stores affecting each other","TypeScript"],"sub_categories":[],"readme":"![svelte-keyed-banner](https://user-images.githubusercontent.com/42545742/145455110-0d90603a-5fb3-453a-a9ea-7c4e3b443913.png)\n\n# svelte-keyed\n\n[![npm version](http://img.shields.io/npm/v/svelte-keyed.svg)](https://www.npmjs.com/package/svelte-keyed)\n[![npm downloads](https://img.shields.io/npm/dm/svelte-keyed.svg)](https://www.npmjs.com/package/svelte-keyed)\n![license](https://img.shields.io/npm/l/svelte-keyed)\n![build](https://img.shields.io/github/actions/workflow/status/bryanmylee/svelte-keyed/publish.yml)\n[![coverage](https://coveralls.io/repos/github/bryanmylee/svelte-keyed/badge.svg?branch=main)](https://coveralls.io/github/bryanmylee/svelte-keyed?branch=main)\n[![size](https://img.shields.io/bundlephobia/min/svelte-keyed)](https://bundlephobia.com/result?p=svelte-keyed)\n\nA **writable** derived store for objects and arrays!\n\n```js\nconst user = writable({ name: { first: 'Rich', last: 'Harris' } });\nconst firstName = keyed(user, 'name.first');\n\n$firstName = 'Bryan';\n\nconsole.log($user); // { name: { first: 'Bryan', last: 'Harris' } };\n```\n\n## Installation\n\n```bash\n$ npm i -D svelte-keyed\n```\n\nSince Svelte automatically bundles all required dependencies, you only need to install this package as a dev dependency with the `-D` flag.\n\n## API\n\n`keyed` takes a writable object store and a **keypath**, and returns a writable store whose _changes are reflected on the original store_.\n\nProperties are accessed with dot notation, and arrays can be indexed with bracket notation.\n\n```js\nconst email = keyed(settings, 'profiles[0].email');\n```\n\n### Nullable parents\n\nIf the parent store is nullable, then the child store will also be nullable.\n\n```ts\ntype User = {\n  name: {\n    first: string;\n    last: string;\n  };\n  relations: {\n    partner?: User;\n  };\n};\n\nconst maybeUser = writable\u003cUser | undefined\u003e(undefined);\n// Writable\u003cstring | undefined\u003e\nconst firstName = keyed(maybeUser, 'name.first');\n```\n\n### Nullable properties\n\nNullable properties are accessed with [optional chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) behaviour.\n\n```ts\nconst user = writable(initUser);\n// Writable\u003cName | undefined\u003e\nconst partnerName = keyed(user, 'relations.partner.name');\n```\n\n### TypeScript\n\n`keyed` infers the return type of the keyed store from the keypath.\n\n```ts\nconst user = writable(initUser);\n// Writable\u003cstring\u003e\nconst firstName = keyed(user, 'name.first');\n```\n\n`keyed` will also try to guess all possible keypaths up to a depth limit of 3.\n\n```ts\nkeyed(user, '...');\n            ┌───────────────────────────────┐\n            │ • name                        │\n            │ • name.first                  │\n            │ • name.last                   │\n            │ • relations                   │\n            │ • relations.partner           │\n            │ • relations.partner.name      │\n            └───────────────────────────────┘\n```\n\n_This limit is due to a TypeScript limitation where structured types must be generated statically. Increasing the depth limit slows down type compilation._\n\nType hints will not be provided for keypaths with a depth greater than 3 but this does not affect the return type.\n\n```ts\nconst user = writable(user);\n// Writable\u003cstring | undefined\u003e\nconst firstName = keyed(user, 'relations.partner.name.first');\n```\n\n## Motivations\n\nWe usually read and write properties of an object store with [auto-subscriptions](https://svelte.dev/tutorial/auto-subscriptions).\n\n```svelte\n\u003cinput bind:value={$name.first}/\u003e\n```\n\nHowever, auto-subscriptions are isolated to a Svelte component. `svelte-keyed` aims to solve several common limitations listed below.\n\n### Context stores\n\nOften, we want to set a property or element of a store into component context, then allow child components to read / write to the property.\n\n```svelte\n\u003c!-- Settings.svelte --\u003e\n\u003cscript\u003e\n  setContext('profileSettings', keyed(settings, 'profile'));\n\u003c/script\u003e\n\n\u003cGeneralSettings /\u003e\n\u003cProfileSettings /\u003e\n```\n\n```svelte\n\u003c!-- ProfileSettings.svelte --\u003e\n\u003cscript\u003e\n  const profileSettings = getContext('profileSettings');\n\u003c/script\u003e\n\n\u003cinput type=\"text\" bind:value={$profileSettings.username} /\u003e\n```\n\n### Helper functions\n\nOne 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.\n\n```svelte\n\u003c!-- Settings.svelte --\u003e\n\u003cscript\u003e\n  const stats = writable({ userClicks: 0, userTaps: 0 });\n  const clicks = keyed(stats, 'userClicks');\n\u003c/script\u003e\n\n\u003cdiv use:trackClicks={clicks} /\u003e\n\u003cinput use:trackClicks={clicks} /\u003e\n```\n\n```js\nexport const trackClicks = (node, clicks) =\u003e {\n  const listen = () =\u003e {\n    clicks.update(($clicks) =\u003e $clicks + 1);\n  };\n  node.addEventListener('click', listen);\n  return {\n    destroy() {\n      node.removeEventListener('click', listen);\n    },\n  };\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbryanmylee%2Fsvelte-keyed","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbryanmylee%2Fsvelte-keyed","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbryanmylee%2Fsvelte-keyed/lists"}