svelte-mobx

svelte-mobx (npm)

MobX connector for Svelte

Installation

npm i -S svelte-mobx

Usage (example repository)

import App from "./App.svelte";
import { AppVm } from "./App.vm";

new App({
    props: { vm: new AppVm() },
    target: document.body,
});

// App.svelte

<script context="module">
    import { connect } from "svelte-mobx";
</script>

<script>
    export let vm;
    const { autorun } = connect();

    let currentTimeString;
    let elapsedSecondsString;

    $: autorun(() => {
        currentTimeString = vm.currentTimeString;
        elapsedSecondsString = vm.elapsedSecondsString;
    });
</script>

<div>
    <h1>The time is {currentTimeString}</h1>
    <div>This page has been open for {elapsedSecondsString}</div>
</div>

// App.vm.ts

export class AppVm {
    startTime: Date = new Date();
    currentTime: Date = new Date();

    constructor() {
        makeAutoObservable(this, {
            startTime: observable,
            currentTime: observable,
            elapsedSeconds: computed,
            currentTimeString: computed,
            elapsedSecondsString: computed,
            updateCurrentTime: action,
        });

        setInterval(() => this.updateCurrentTime(), UPDATE_INTERVAL);
    }

    get elapsedSeconds() {
        return Math.round((this.currentTime.getTime() - this.startTime.getTime()) / 1000);
    }

    get currentTimeString() {
        return timeFormatter.format(this.currentTime);
    }

    get elapsedSecondsString() {
        return `${this.elapsedSeconds} ${this.elapsedSeconds === 1 ? "second" : "seconds"}`;
    }

    updateCurrentTime() {
        this.currentTime = new Date();
    }
}