⬅ Back to 🍕

🍕 Simple UI

Example of a simple UI utilizing State Machine Snacks and Plugin Components.

Script	Description
npm run dev	Start the dev server.
npm run build	Build project.
npm run serve	Serve a static copy of the build.

import sms from "state-machine-snacks";
import components from "sms-plugin---components";
import logger from "sms-plugin---logger";

import config from "./machine/machine.config.js";

// Create your service with 🍕.
const service = sms({
    config,

    plugins : [
        components(),
        logger(),
    ],
});

service.start();

export default service;

import { component } from "sms-plugin---components";

import ViewOne from "shared/components/views/one.svelte";
import ViewTwo from "shared/components/views/two.svelte";

export default {
    initial : "resting",
    
    on : {
        GO_ONE : ".one",
        RESET  : ".resting",
    },

    states : {
        resting : {},
        one     : component(ViewOne, {
            on : {
                GO_TWO : ".two",
            },

            states : {
                two : component(ViewTwo),
            },
        }),
    },
};