Nightly Panic Munchies

    @ezy/svelte-makina
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.2 • Public • Published

    svelte-makina

    Svelte bindings for Makina

    Installation

    npm i @ezy/svelte-makina

    Usage

    counter.ts

    import { createBase, Filterables } from '@ezy/makina';
    import "@ezy/svelte-makina"
    
    class Counter extends createBase()<number> {
    
      constructor(initialState = 0) {
        super(initialState);
      }
    
      public get display() {
        return `Times clicked: ${this.state}`;
      }
    
      public increment() {
        this.commit('increment', this.state + 1);
      }
    
      public decrement() {
        this.commit('decrement', this.state - 1);
      }
    }
    
    const counter: Filterables<Counter> = Counter.create();
    
    export default counter;

    Counter.svelte

    <script lang="ts">
    	import counter from "./counter"
    </script>
    
    <h1>The count is {$counter.display}</h1>
    
    <button on:click={counter.increment}>+</button>
    <button on:click={counter.decrement}>-</button>

    On mutation

    Svelte being based on mutation, you will pretty quickly run into mutating your app state directly from your components, which destroy the entire point of having a state machine.

    to avoid that kind of issues please consider to freeze the state of your state machine, see here.

    Links

    Makina

    Install

    npm i @ezy/svelte-makina

    DownloadsWeekly Downloads

    0

    Version

    2.0.2

    License

    MIT

    Unpacked Size

    17.4 kB

    Total Files

    16

    Last publish

    Collaborators

    • didierdemoniere