{"id":19074947,"url":"https://github.com/varbhat/slocation","last_synced_at":"2025-04-29T23:32:22.695Z","repository":{"id":57363292,"uuid":"380429708","full_name":"varbhat/slocation","owner":"varbhat","description":"Reactive Svelte Location Store","archived":false,"fork":false,"pushed_at":"2021-09-16T14:51:31.000Z","size":4,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-18T19:41:34.522Z","etag":null,"topics":["javascript","javascript-library","npm","npm-package","router","router-dom","router-hash","slocation","svelte","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/slocation","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/varbhat.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}},"created_at":"2021-06-26T06:19:35.000Z","updated_at":"2022-05-24T13:47:55.000Z","dependencies_parsed_at":"2022-09-26T16:32:10.063Z","dependency_job_id":null,"html_url":"https://github.com/varbhat/slocation","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/varbhat%2Fslocation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/varbhat%2Fslocation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/varbhat%2Fslocation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/varbhat%2Fslocation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/varbhat","download_url":"https://codeload.github.com/varbhat/slocation/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251139525,"owners_count":21542038,"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":["javascript","javascript-library","npm","npm-package","router","router-dom","router-hash","slocation","svelte","typescript"],"created_at":"2024-11-09T01:52:52.078Z","updated_at":"2025-04-29T23:32:22.533Z","avatar_url":"https://github.com/varbhat.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eslocation\u003c/h1\u003e \n\u003cp align=\"center\"\u003eReactive Svelte Location Store\u003c/p\u003e\n\n## Introduction\n\n`slocation` is [Reactive](https://svelte.dev/tutorial/reactive-assignments) Svelte Location [Store](https://svelte.dev/docs#svelte_store) . [location](https://developer.mozilla.org/en-US/docs/Web/API/Window/location) which is used to access information about current [Location](https://developer.mozilla.org/en-US/docs/Web/API/Location) is not Reactive . `slocation` wraps [location](https://developer.mozilla.org/en-US/docs/Web/API/Window/location) as [Readable](https://svelte.dev/docs#readable) [Svelte](https://svelte.dev/) Store which gets updated every time [location](https://developer.mozilla.org/en-US/docs/Web/API/Window/location) changes thus making it Reactive.\n\nIt also provides extra methods to update URL without reloading the page . With reactive location Object and methods to route without reloading the page , `slocation` can be viable minimal alternative to Router. It is also a very [small](src/slocation.ts) library.\n\n## Features\n\n- Small in Size\n- Reactive [location](https://developer.mozilla.org/en-US/docs/Web/API/Window/location) Object\n- Listens to `popstate` and `hashchange` events\n- Supports both [History](https://developer.mozilla.org/en-US/docs/Web/API/History) API and [hash](https://developer.mozilla.org/en-US/docs/Web/API/Location/hash)\n- Can be viable small alternative to Routers\n- Written in TypeScript\n\n## Installation\n\nInstall [`slocation`](https://www.npmjs.com/package/slocation) as [dependency](https://docs.npmjs.com/specifying-dependencies-and-devdependencies-in-a-package-json-file) in your project .\n\n```bash\nnpm install slocation\n```\n\n## Usage\n\n`slocation` is Readable Svelte Store. It must be imported to be used.\n\n```js\nimport slocation from \"slocation\";\n```\n\n\u003cbr\u003e\n\nIt wraps [location](https://developer.mozilla.org/en-US/docs/Web/API/Window/location) reactively\n\n```html\n\u003cdiv\u003e{JSON.stringify($slocation)}\u003c/div\u003e\n```\n\nIt's properties are reactive too!\n\n```html\n\u003cpre\u003e\n{$slocation.href}\n{$slocation.origin}\n{$slocation.protocol}\n{$slocation.host}\n{$slocation.hostname}\n{$slocation.port}\n{$slocation.pathname}\n{$slocation.search}\n{$slocation.hash}\n\u003c/pre\u003e\n```\n\nMost **Important** among these are [href](https://developer.mozilla.org/en-US/docs/Web/API/Location/href) , [pathname](https://developer.mozilla.org/en-US/docs/Web/API/Location/pathname) , [search](https://developer.mozilla.org/en-US/docs/Web/API/Location/search) and [hash](https://developer.mozilla.org/en-US/docs/Web/API/Location/search) because other properties of location only change on page reload. With these important properties , you can create routing in your [Svelte](https://svelte.dev/) Application.\n\nNote that Since `slocation` wraps `location` , methods of `location` are also exposed with `slocation` . Methods which are common to both `location` and `slocation` are effectively same.\n\n### Usage as History-API based Router\n\n```html\n{#if $slocation.pathname === '/'}\n\u003cHomeComponent /\u003e\n{:else if $slocation.pathname === '/about'}\n\u003cAboutComponent /\u003e\n{:else if $slocation.pathname.startsWith('/browse/') }\n\u003c!-- This Component will only appear if route begins with '/browse/' --\u003e\n\u003c!-- $slocation.pathname / $slocation.href can further --\u003e\n\u003c!-- be parsed to get required params (Out of Scope for this library) --\u003e\n\u003c!-- Parse $slocation.search to get queries --\u003e\n\u003c!-- Parse $slocation.hash to parse hash/fragment identifier --\u003e\n\u003cSpecialComponent /\u003e\n{:else}\n\u003cFallBackComponent /\u003e\n{/if}\n```\n\nTo Navigate without refreshing / reloading the Page , `slocation` provides these extra methods.\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n1. `slocation.goto(url?: string, replace?: boolean | undefined) =\u003e void`\n\nNavigates to specified URL path. `replace` is optional and defaults to `false`. If `replace` is given `true`, most recent entry on the history stack will be updated with new one.\n\nExample:\n\n```js\nslocation.goto(\"/about\"); // This will Navigate to '/about' without refreshing the page\nslocation.goto(\"/help\", true); // This will Navigate to '/help' without\n// refreshing the page but history State will be replaced instead of adding new one\n```\n\n2. `slocation.pushState(data: any,title: string,url?: string | null | undefined) =\u003e void`\n\nIf `history.pushState` is used , `slocation` store will not be updated breaking it's reactivity. So, `slocation.pushState` must be used which will update `slocation`. `slocation.pushState` is just wrapper function to [`history.pushState`](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState) which also updates `slocation` to keep it reactive.\n\nExample:\n\n```js\nslocation.pushState({}, \"\", \"/about\"); // This will Navigate to '/about'\n// without refreshing the page\n// Code Below won't update slocation\n// history.pushState({}, \"\", \"/about\"); // Although , this navigates to '/about',\n// slocation store won't be updated\n```\n\n3. `slocation.replaceState(data: any,title: string,url?: string | null | undefined) =\u003e void`\n\nSame as `slocation.pushState` but `slocation.replaceState` is wrapper to [`history.replaceState`](https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState) . `slocation.replaceState` must be used instead of `history.replaceState` .\n\n4. `slocation.reset() =\u003e void`\n\nResets `slocation` with current `location` object . This force-updates `slocation` store.\n\n\u003cbr\u003e\n\u003cbr\u003e\n\nNote that [`history.back()`](https://developer.mozilla.org/en-US/docs/Web/API/History/back) , [`history.forward()`](https://developer.mozilla.org/en-US/docs/Web/API/History/forward) , [`history.go()`](https://developer.mozilla.org/en-US/docs/Web/API/History/go) will update `slocation` automatically , so these can be used. Only use `slocation.pushState()` and `slocation.replaceState()` instead of `history.pushState()` and `history.replaceState()` respectively.\n\n### Usage as Hash based Router\n\n```html\n{#if $slocation.hash === ''}\n\u003cHomeComponent /\u003e\n{:else if $slocation.hash === '#/about'}\n\u003cAboutComponent /\u003e\n{:else if $slocation.hash.startsWith('#/browse/') }\n\u003c!-- This Component will only appear if hash route begins with '/browse/' --\u003e\n\u003c!-- Parse $slocation.hash to parse hash/fragment identifier --\u003e\n\u003cSpecialComponent /\u003e\n{:else}\n\u003cFallBackComponent /\u003e\n{/if}\n```\n\nTo Update the Route , you just need to update hash of `location` object which also updates `slocation`.\n\n```js\nlocation.hash = \"#/about\";\n```\n\nThis must update the Hash Along with `slocation` store.\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvarbhat%2Fslocation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvarbhat%2Fslocation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvarbhat%2Fslocation/lists"}