svelte-anchorable

Create svelte stores and sync thier values with location.hash.

Install with

npm i -D svelte-anchorable

and use like so

// $lib/store_show_description.js

import { anchorable } from 'svelte-anchorable';

export let store_show_description = anchorable('store_show_description', false);

<script>
  // +page.svelte
  import { store_show_description } from '$lib/store_show_description.js';

  setTimeout(function () {
    $store_show_description = true;
  }, 2000);
</script>

<h1>Welcome to your library project</h1>
{#if $store_show_description}
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
    Itaque vel laborum obcaecati, quos hic repudiandae enim odio nulla 
    explicabo minus, nam ipsum, possimus voluptatem amet saepe ipsam! 
    Quos accusamus a eum.Deleniti aspernatur veniam sed itaque ratione 
    exercitationem dolore porro! Nemo consectetur eius placeat labore 
    sit eligendi distinctio ad, totam, illum quos maxime cupiditate 
    repellat a vero minima unde ipsa dolorum dolorem ullam quaerat? 
    Asperiores earum repellat ratione animi voluptates dolor accusamus 
    minima possimus? Consectetur aliquam nisi eum illum, repudiandae 
    eligendi quas ipsa, quisquam nulla neque fugit porro assumenda 
    reprehenderit molestias enim suscipit architecto ipsum nesciunt 
    dignissimos maiores rem amet?</p>
{/if}

You're not limited to primitives, you can serialize whole objects

<script>
  // +page.svelte
  import { store_show_description } from '$lib/store_show_description.js';

  setTimeout(function () {
    $store_show_description = {
      title: 'this is a description',
      content: 'hello from description'
    };
  }, 2000);
</script>

<h1>Welcome to your library project</h1>
{#if $store_show_description}
  <h3>{$store_show_description.title}</h3>
  <p>{$store_show_description.content}</p>
{/if}