{"id":13735631,"url":"https://github.com/bryanmylee/svelte-previous","last_synced_at":"2025-05-07T21:29:15.067Z","repository":{"id":40459924,"uuid":"323051429","full_name":"bryanmylee/svelte-previous","owner":"bryanmylee","description":"A Svelte store that remembers previous values","archived":false,"fork":false,"pushed_at":"2023-10-17T11:17:33.000Z","size":1132,"stargazers_count":84,"open_issues_count":3,"forks_count":2,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-05-03T21:33:19.855Z","etag":null,"topics":["history","previous","svelte","svelte-stores"],"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}},"created_at":"2020-12-20T11:02:49.000Z","updated_at":"2025-03-25T16:02:48.000Z","dependencies_parsed_at":"2024-01-06T12:02:38.328Z","dependency_job_id":"7c26a733-53d3-4cd9-8fea-56e050963194","html_url":"https://github.com/bryanmylee/svelte-previous","commit_stats":{"total_commits":58,"total_committers":4,"mean_commits":14.5,"dds":0.3275862068965517,"last_synced_commit":"40b215a9acc367c3f0c957376eb14b5f65529269"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bryanmylee%2Fsvelte-previous","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bryanmylee%2Fsvelte-previous/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bryanmylee%2Fsvelte-previous/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bryanmylee%2Fsvelte-previous/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bryanmylee","download_url":"https://codeload.github.com/bryanmylee/svelte-previous/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252956818,"owners_count":21831381,"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":["history","previous","svelte","svelte-stores"],"created_at":"2024-08-03T03:01:09.100Z","updated_at":"2025-05-07T21:29:15.013Z","avatar_url":"https://github.com/bryanmylee.png","language":"TypeScript","funding_links":[],"categories":["Undo"],"sub_categories":[],"readme":"![svelte-previous-banner](https://user-images.githubusercontent.com/42545742/102723346-20ac5700-4342-11eb-978d-222a2f4109d5.png)\n\n# svelte-previous\n\n[![npm version](http://img.shields.io/npm/v/svelte-previous.svg)](https://www.npmjs.com/package/svelte-previous)\n[![npm downloads](https://img.shields.io/npm/dm/svelte-previous.svg)](https://www.npmjs.com/package/svelte-previous)\n![license](https://img.shields.io/npm/l/svelte-previous)\n![build](https://img.shields.io/github/actions/workflow/status/bryanmylee/svelte-previous/publish.yml)\n[![coverage](https://coveralls.io/repos/github/bryanmylee/svelte-previous/badge.svg?branch=master)](https://coveralls.io/github/bryanmylee/svelte-previous?branch=master)\n[![size](https://img.shields.io/bundlephobia/min/svelte-previous)](https://bundlephobia.com/result?p=svelte-previous)\n\nSvelte stores that remember previous values!\n\nThis allows us to perform actions that depend on previous values, such as transitions between old and new values.\n\n## Installation\n\n```bash\n$ npm i -D svelte-previous\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## Demo\n\nVisit the [REPL demo](https://svelte.dev/repl/1d3e752c51b848e6af264f3244f3e85c?version=3.31.0).\n\n## Usage\n\n`withPrevious` accepts an initial value, and returns a tuple comprising a [Writable](https://svelte.dev/tutorial/writable-stores) and a [Readable](https://svelte.dev/tutorial/readable-stores) store.\n\n```svelte\n\u003cscript\u003e\n  import { withPrevious } from 'svelte-previous';\n\n  export let name;\n  // current is writable, while previous is read-only.\n  const [currentName, previousName] = withPrevious(0);\n  // To update the values, assign to the writable store.\n  $: $currentName = name;\n\u003c/script\u003e\n\ntransition from {$previousName} to {$currentName}.\n```\n\n## Options\n\n`withPrevious` takes an options object as its second argument.\n\n### `numToTrack: number`\n\nBy default, `withPrevious` tracks one previous value.\n\nTo track more than one value, set `numToTrack`.\n\n```svelte\n\u003cscript\u003e\n  const [current, prev1, prev2] = withPrevious(0, { numToTrack: 2 });\n\u003c/script\u003e\n\nfrom {$prev2} to {$prev1} to {$current}.\n```\n\n### `initPrevious: T[]`\n\nTo initialize previous values with something besides `null`, pass an array of values from newest to oldest.\n\nMissing values will be filled with `null` and extra values will be ignored.\n\n```svelte\n\u003cscript\u003e\n  const [current, prev1, prev2] = withPrevious(0, { numToTrack: 2, initPrevious: [1, 2, 3] })\n\u003c/script\u003e\n\nfrom {$prev2} to {$prev1} to {$current}. \u003c!-- from 2 to 1 to 0. --\u003e\n```\n\n### `requireChange: boolean`\n\nDue to how reactivity is handled in Svelte, some assignments may assign the same value multiple times to a variable. Therefore, to prevent a single value from overwriting all previous values, a change in value is required before the current and previous values are updated.\n\nSet `requireChange = false` to change this behaviour.\n\n```ts\nconst [current, previous] = withPrevious(0, { requireChange: false });\n```\n\n### `isEqual: (a: T, b: T) =\u003e boolean`\n\nBy default, equality is determined with the `===` operator. However, `===` only checks equality by reference when comparing objects.\n\nProvide a custom `isEqual` function to compare objects.\n\n```ts\nconst [current, previous] = withPrevious(0, {\n  isEqual: (a, b) =\u003e a.name === b.name \u0026\u0026 a.age === b.age,\n});\n```\n\nIt is also possible to use [lodash.isequal](https://www.npmjs.com/package/lodash.isequal).\n\n```ts\nimport isEqual from 'lodash.isequal';\n\nconst [current, previous] = withPrevious(0, {\n  isEqual: isEqual,\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbryanmylee%2Fsvelte-previous","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbryanmylee%2Fsvelte-previous","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbryanmylee%2Fsvelte-previous/lists"}