DEV Community

Cover image for Unified State Expressions - State (First Sketch)
rekreanto
rekreanto

Posted on • Edited on

Unified State Expressions - State (First Sketch)

Constructs 

 `alt` : e.g. `Red`, `Green`, `Yellow`, `Guest`, `LoggedIn`, `About`, `Welcome` `branch` : e.g. `@user`, `@page` `or` : `|` or `---` e.g. `Red` | `Green` | `Yellow` `branch-expand` : `:` e.g. `@user: Guest`, `@page: About` `sub-expand` : `:>` e.g. `Red` :> `Walking` | `Waiting` `optional-sub` : `:>` e.g. EditEvents :>? | SelectedEvent <id> | CreatedEvent <id> `atomic-marker` : `.` e.g. `Green.`, `Yellow`. // optional `composite-marker` : `...` e.g. `Red...` // optional `agnostic-view` : // the omission of atomic/composite marker `system-types` : `<...>`, such as <int>, <string>, <date>
Enter fullscreen mode Exit fullscreen mode

-- Alternatives (or-states) or Branches (and-states) is per default shown collapsed. The next step, the refinement/branch value, can be shown using the expand-constructs :> or :. Atomic states, marked per a trailing dot . cannot be expanded.

Sample STN Notation for some Traditional Toy State Machine Examples

TrafficLight from xstate.js.org

Example source

 // agnostiv view (we don't express whether or not there are refined states) TrafficLight :> Green | Yellow | Red // Collapsed explicit view (denotes atomic/compsed nature of states) TrafficLight :> | Green. | Yellow. | Red... // can be expanded TrafficLight :> | Green. | Yellow. | Red :> // expanded view of Red | Walking. | Waiting. | Stopped. | Blinking.
Enter fullscreen mode Exit fullscreen mode

Counter toy app from 7GUIs

Example source

 Counter :> <int>
Enter fullscreen mode Exit fullscreen mode

TempConv toy app from 7GUIs

Example source

// agnostic view TempConv :> F2C | C2F // expanded view TempConv :> | F2C >: <string Fahrenheit> | C2F >: <string Celcius> // this is all the essential state needed to restore the app to its state // the source number as well as the converted number are derived from the input string
Enter fullscreen mode Exit fullscreen mode

Sample small website GrowersAssociationSite (GA_Site)

Source: This is part of a (toy) site I'm working on as part of my web design educaton.

 // collapsed view GA_Site @lang @user @page // expanded view GA_Site @lang : sv | en | ja | eo @user : Guest | LoggedIn <string UserName> @page : About | Join | Calendar :> | BrowseEvents | EditEvents :>? | SelectedEvent <id> | CreatedEvent <id> | UpdatedEvent <id> | DeletedEvent [ <id>, <string date>, <string descr> ] | UndidDeletion <id>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)