{"id":21412815,"url":"https://github.com/hunghg255/sveltejs-valtio","last_synced_at":"2025-07-14T02:32:24.240Z","repository":{"id":194260409,"uuid":"690648345","full_name":"hunghg255/sveltejs-valtio","owner":"hunghg255","description":"Svelte Valtio State Management","archived":false,"fork":false,"pushed_at":"2024-05-03T11:23:43.000Z","size":237,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-07T05:05:43.311Z","etag":null,"topics":["npm","state-management","svelte","valtio"],"latest_commit_sha":null,"homepage":"https://stackblitz.com/edit/vitejs-vite-kz7hyk?file=src%2FApp.svelte","language":"JavaScript","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/hunghg255.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":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-09-12T15:39:18.000Z","updated_at":"2024-10-07T02:26:06.000Z","dependencies_parsed_at":"2023-09-12T16:07:30.384Z","dependency_job_id":"c1caa9f4-c52f-485c-a808-2f826389f9af","html_url":"https://github.com/hunghg255/sveltejs-valtio","commit_stats":null,"previous_names":["hunghg255/sveltejs-valtio"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/hunghg255/sveltejs-valtio","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hunghg255%2Fsveltejs-valtio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hunghg255%2Fsveltejs-valtio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hunghg255%2Fsveltejs-valtio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hunghg255%2Fsveltejs-valtio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hunghg255","download_url":"https://codeload.github.com/hunghg255/sveltejs-valtio/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hunghg255%2Fsveltejs-valtio/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265233753,"owners_count":23731825,"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":["npm","state-management","svelte","valtio"],"created_at":"2024-11-22T18:15:50.483Z","updated_at":"2025-07-14T02:32:23.590Z","avatar_url":"https://github.com/hunghg255.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# sveltejs-valtio\n\nState management solution for Svelte using proxies. Powered by [valtio](https://github.com/pmndrs/valtio).\n\n## Demo\n\n[Demo](https://stackblitz.com/edit/vitejs-vite-kz7hyk?file=src%2FApp.svelte)\n\n## Installation\n\n```sh\nnpm i sveltejs-valtio\n```\n\n## Usage\n\n```ts\n// store.ts\nimport { proxy } from 'sveltejs-valtio';\n\nexport const state = proxy({ count: 0 });\n```\n\nRead from snapshots, mutate the source.\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n  import { useSnapshot } from 'sveltejs-valtio'\n  import { state } from './store'\n  const snap = useSnapshot(state)\n\u003c/script\u003e\n\n\u003cbutton on:click={() =\u003e state.count++}\u003e\n  Clicks: {$snap.count}\n\u003c/button\u003e\n```\n\n## Utilities\n\n### `derive`\n\nYou can subscribe to some proxies and create a derived proxy.\n\n```ts\nimport { derive } from 'sveltejs-valtio';\n\n// create a base proxy\nconst state = proxy({\n  count: 1,\n});\n\n// create a derived proxy\nconst derived = derive({\n  doubled: (get) =\u003e get(state).count * 2,\n});\n\n// alternatively, attach derived properties to an existing proxy\nderive(\n  {\n    tripled: (get) =\u003e get(state).count * 3,\n  },\n  {\n    proxy: state,\n  },\n);\n```\n\n### `proxyWithComputed`\n\nYou can define own computed properties within a proxy. By combining with a memoization library such as [proxy-memoize](https://github.com/dai-shi/proxy-memoize), optimizing function calls is possible.\n\n```ts\nimport memoize from 'proxy-memoize';\nimport { proxyWithComputed } from 'sveltejs-valtio';\n\nconst state = proxyWithComputed(\n  {\n    count: 1,\n  },\n  {\n    doubled: memoize((snap) =\u003e snap.count * 2),\n  },\n);\n\n// Computed values accept custom setters too:\nconst state2 = proxyWithComputed(\n  {\n    firstName: 'Alec',\n    lastName: 'Baldwin',\n  },\n  {\n    fullName: {\n      get: memoize((snap) =\u003e `${snap.firstName} ${snap.lastName}`),\n      set: (state, newValue) =\u003e {\n        [state.firstName, state.lastName] = newValue.split(' ');\n      },\n    },\n  },\n);\n\n// if you want a computed value to derive from another computed, you must declare the dependency first:\nconst state = proxyWithComputed(\n  {\n    count: 1,\n  },\n  {\n    doubled: memoize((snap) =\u003e snap.count * 2),\n    quadrupled: memoize((snap) =\u003e snap.doubled * 2),\n  },\n);\n```\n\n### `proxyWithHistory`\n\nThis is a utility function to create a proxy with snapshot history.\n\n```ts\nimport { proxyWithHistory } from 'sveltejs-valtio';\n\nconst state = proxyWithHistory({ count: 0 });\nconsole.log(state.value); // ---\u003e { count: 0 }\nstate.value.count += 1;\nconsole.log(state.value); // ---\u003e { count: 1 }\nstate.undo();\nconsole.log(state.value); // ---\u003e { count: 0 }\nstate.redo();\nconsole.log(state.value); // ---\u003e { count: 1 }\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhunghg255%2Fsveltejs-valtio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhunghg255%2Fsveltejs-valtio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhunghg255%2Fsveltejs-valtio/lists"}