User interfaces as pure JSON data

Sometimes it is practical if the user interface is a pure JSON data structure:

This is needed when making https://appedit.solsort.com. I do not want to reinvent the wheel, so I build upon the following ideas:

So what I do is:

An example of a UI data structure is:

["div",
  ["button",
    {"onClick": {"solsortEvent": 
      {"name": "hi",
       "pid": "PID6aih4gsogfj3gmfou82qof75k53da7fg",
       "extract": ["clientX", "clientY"]}}},
    "Click me"],
  ["react-star-rating:default", {"name": "star-rating", "rating": 5}]]

The {"solsortEvent": ... } describes how to handle events, - in this case extract clientX and clientY of the event and send it as a message to a mailbox name hi, in the process PID6ai...a7fg. The react-star-rating:default tag, refers to the react-component require('react-star-rating').default, and can be used to load react components directly from npmjs.

In practice I have utility functions for making event objects etc., so a full UI example could be:

var ss = require('solsort');
ss.html(
  ['div',
    ['button', {onClick: ss.event('hi', {extract: ['clientX', 'clientY']})},
      'Click me'],
    ['react-star-rating:default', {name: 'star-rating', rating: 5}]]);
ss.handle('hi', e => console.log('hi', e));

The ss.event automatically sets the target for the event message to the current thread. Thus when another thread reads and renders the UI data structure, the events end up in the right thread. Clicking on the button prints ‘hi’, and the coordinates of the click. ss.html saves the UI as a part of the state for the current thread, which other thread can subscribe to reactively.