Svelte Mobx Observer

Svelte MobX Observer

Motivation

Svelte subscription system lacks possibility to observe values in deeply nested objects. This Svelte component lets you listen on MobX observable changes and update accordingly.

Example

<script>
  import { observable } from "mobx";
  import Observer from "svelte-mobx-observer";

  let foo = observable({ // standard, MobX observable
    deeply: {
      nested: {
        counter: 1
      }
    }
  });

  let counterVisible = true; // works with conditionals as well

  window.foo = foo; // you can use the "foo" observable anyywhere, it works at window and inside **nested components** AS WELL
</script>

<Observer>
  <main on:click={() => foo.deeply.nested.counter++}>
    <div on:click={()=> counterVisible = !counterVisible}>Counting up... click me to toggle</div>
    {#if counterVisible}
        <h1>{foo.deeply.nested.counter}</h1>    
    {/if}
  </main>
</Observer>

<style>
main {
    cursor: pointer;
}
</style>

Starter project

GitHub: Svelte - MobX Starter

Installation

yarn add svelte-mobx-observer

Method

This is a hand crafted component on a basis of Svelte generated code.

• stage1 - dir with Svelte generated files from Component.svelte
• stage2 - dist dir with hand modified files from stage1

Requirements

• MobX ^5.15.4
• Svelte ^3.24.0