How to use AceBase with SvelteKit

[EulerTourist]

Thought this might save someone some grief. Here's how I got a tidy implementation sharing AceBase.WithIndexedDB with multiple Svelte pages, noting that WithIndexedDB wants to run in browser only. You can do a similar thing with proxy.value if you want to push data upstream as well, however, you won't need svelte/store in that case, since it's already reactive.

+layout.js

export const ssr = false

+layout.svelte

<script>
    import HeaderBar from "/src/components/HeaderBar.svelte"
    import '/src/ds-global.css' 
    import { layout } from '$lib/design.js' //to populate my db
    import { setContext } from 'svelte' 
    import { writable } from 'svelte/store'
    import { AceBase } from "acebase"
    
    const livedata = writable()
    setContext('livedata', livedata)
  
    const db = AceBase.WithIndexedDB('mydb', {logLevel: 'warn'}) //verbose | log | warn | error
  
    db.ready(() => {
      console.log('DB ready to use')
      db.ref('datamodel')
        .update(layout)
      db.ref('datamodel')
        .on('value', {newOnly:false})
        .subscribe(snap=>{
          livedata.set(snap.val())
        })
    })
</script>

<HeaderBar/>
<slot/>

+page.svelte ( in any route )

<script>
    import Layout from '/src/components/Layout.svelte' //my custom component
    import { getContext } from 'svelte' 
  
    const livedata = getContext('livedata')
  
    $: console.log('Page update:', $livedata);  //test
</script>

<Layout on:event layout={ $livedata }/>