svelte-deep-reactive-store

Deeply reactive object store for Svelte

Usage

// my-store.js
import reactive from './reactive.js'

export const obj = reactive({ 
    name: 'ehh', 
    deep: { 
        count: 1  // nested property
    } 
});

export function increment() {
    obj.deep.count++; // svelte will react to the change
}

export const myArray = reactive([]);

<!-- my-component.svelte -->
<script>
    import { obj, myArray, increment } from './my-store.js';
    
    function rename() {
        obj.name = 'kek'; // works here too without the $ prefix
    }
    
    function push() {
        myArray.push('test'); // you don't need to hack (myArray = myArray)
    }
</script>

<h1 on:click={ rename }>Hello {$obj.name}!</h1>
<p on:click={ increment }>
    Count: {$obj.deep.count}
</p>
<div>
    <p on:click={ push }>
        tags:
    </p>
    <ul on:click={ pop }>
        {#each $myArray as item}
            <li>{ item }</li>
        {/each}
    </ul>
</div>

TODO

• handle object inside arrays/etc