import { counter } from './store';

import Child from './Child.svelte';

console.log('With love, Sony AK <sony@sony-ak.com>. GitHub https://github.com/sonyarianto');

</script>

<h1>Counter on parent component is {$counter}.</h1>

<Child />

<br/>

<button on:click={() => $counter--}>I am a button on parent component to decrease the global state of counter</button>

<br/>

<button on:click={() => counter.set(0)}>Reset the global state counter</button>

<h3>When you click the button it will sync all counter anywhere we need it.</h3>

<pre>

- Where is the store defined? Just open store.js

- What is the $ in front of counter? ($counter) is the auto-subscribe magic in Svelte

</pre>