svelte-prop-dispatch

A simple abstraction for binding props up the hierarchy and propagating with the template and the store.

Usage

<!-- On your component, create the binder with a certain "id" -->
<PropBinder id="appbar" bind:title bind:color />

<!-- On another component, dispatch the new props related to an "id" -->
<PropDispatcher id="appbar" title="Home" color="green"/>

Example

App.html

<div>
  <AppBar/>
  {#if foo}
    <Home/>
  {:else}
    <About/>
  {/if}

  <br><br><br>

  <button on:click="set({ foo: !foo })">Switch pages</button>
</div>

<script>
  import { Store } from 'svelte/store.js';
  const store = new Store();

  export default {
    components: {
      AppBar: './AppBar.html',
      Home: './Home.html',
      About: './About.html',
    },
    store: () => store,
  };
</script>

AppBar.html

<PropBinder id="appbar" bind:title bind:color />

<h1 style="color: {color};">{title}</h1>

<script>
  export default {
    components: {
      PropBinder: 'svelte-prop-dispatch/binder.html'
    },
    data() {
      return {
        color: 'black',
        title: 'NO_TITLE'
      }
    }
  }
</script>

Home.html

<PropDispatcher id="appbar" title="Home" color="green"/>

Home content

<script>
  export default {
    components: {
      PropDispatcher: 'svelte-prop-dispatch/props.html'
    }
  }
</script>

About.html

<PropDispatcher id="appbar" title="About" color="purple" />

About content

<script>
  export default {
    components: {
      PropDispatcher: 'svelte-prop-dispatch/props.html'
    }
  }
</script>