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)

Read next

alishgiri profile image

Launching my first game soon!

Alish Giri -

jagroop2001 profile image

Mastering Currying in JavaScript 🌟

Jagroop Singh -

alexandradev profile image

Devcon 2024 Highlights, Smart Contract Revolution, Yoav Weiss on AA Future and AA Developer Survey

Alexandra -

dumebii profile image

DevTools Startup Ideas: Build an AI-Powered Chatbot Using Claude And React

Dumebi Okolo -