Skip to content
This repository has been archived by the owner on Dec 30, 2020. It is now read-only.

stepanvanzuriak/Finite

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

πŸ€” Why?

User interfaces can be expressed by two things:

  1. The state of the UI
  2. Actions that can change that state

And we can connect this two points with Finite-state machine. This simple micro framework use State as main part of web page.

πŸ’» Install and Usage

Install finite using your package manager

$ npm install @stepanvanzuriak/finite

And just use!

import Finite, { State, h } from "@stepanvanzuriak/finite";

const JustText = State({
  view: () => h`<p>Hello!</p>`
});

Finite.Render(JustText, document.body);

Simple counter example

const Counter = Finite.State({
  name: "counter",
  transitions: [
    Finite.T("INCREMENT", "counter"),
    Finite.T("DECREMENT", "counter")
  ],
  memory: { count: 0 },
  increment: (_, { count }) =>
    Finite.Transition("INCREMENT", { count: count + 1 }),
  decrement: (_, { count }) =>
    Finite.Transition("INCREMENT", { count: count - 1 }),
  view: ({ count, increment, decrement }) =>
    h`<div class="app">
        <button onclick=${decrement}>-1</button>
        <div>${count}</div>
        <button onclick=${increment}>+1</button>
      </div>`
});

Finite.Render(Counter, document.body);

Two state example

const A = Finite.State({
  name: "A",
  memory: {
    text: "Text A"
  },
  transitions: [Finite.T("MOVE_TO_B", "B")],
  onClick: e => Finite.Transition("MOVE_TO_B"),
  view: ({ text, onClick }) =>
    h`<div class="app">
        <div>${text}</div><button onclick=${onClick}>To B</button>
      </div>`
});

const B = Finite.State({
  name: "B",
  memory: {
    text: "Text B"
  },
  transitions: [Finite.T("MOVE_TO_A", "A")],
  onClick: e => Finite.Transition("MOVE_TO_A", { text: "New Text A" }),
  view: ({ text, onClick }) =>
    h`<div class="app">
        <div>${text}</div><button onclick=${onClick}>To A</button>
      </div>`
});

Finite.Render(A, document.body);
More examples in example folder

πŸ“ TODO

  • Write own html template (instead of lit-html) to reduce bundle size. See picohtml
  • Create Finite.State version as ES6 class
  • Rethink AsyncTransition (Promise rejection)
  • Move examples to CodeSandbox
  • Better tests

πŸ“– Api

State

Finite.State({
    view,
    [name],
    [memory],
    [transitions],
    [...rest]
}: IStateType)

You can use rest for own methods like onChange, onClick etc.

Transition

Finite.Transition(
  name : String,
  [payload] : Object
)

Change current state to another, name is name from state transitions and payload is extra data to send

AsyncTransition

Finite.Transition(
  name : String,
  [payload] : Object
)

Instead of normal Transition you can set data in payload as Promise and Finite will change state only when data become fetched.

See async.js in example folder

Render

Finite.Render(
  state: State,
  point: HTMLElement
)

Set render point and init state for app

T

Finite.T(
  name: String,
  to: String
) -> {name, to}

πŸ–ŠοΈ Typings

interface ITransition {
  name: string;
  to: string;
}

interface IStateType {
  view: (...args) => any;
  name: string;
  memory: object;
  transitions: ITransition[];
  rest: object;
}

πŸ’ Contribute

If you want to contribute to this project, please see our Contributing Guide !