easy-render

Easy-Render is a vdom renderer with an easy to understand and easy use functional interface.

WIP

import { render } from 'easy-render';

render`
<div class="box">
  <button
    click=${e => console.log(e)}
    style=${{
      background: 'orangered',
      ':hover': {
        background: 'skyblue',
      }
    }}
  >Click me</button>
</div>
`;

Data in ${} may either be a CSS object, an event handler function, a string, a number, or a list of strings or numbers

1. Intermediate structure, to preserve clojures for functions, to reduce amount of parcing for style object, and to allow for caching the parsed XML result unless the string structure changes.

<div class="box">
  <button
    click="placeholder-function-0"
    style="placeholder-object-0"
  >Click me</button>
</div>

2. Check if intermediate structure is the same as the cached structure.

3. If cache miss: I) Pass the intermediate structure into an xml parser. II) Create a Brynja builder for the resulting XML elements.

4. Call the stored Brynja builder, passing in any placeholder values as arguments.

Same as the following:

import { render } from 'brynja';

const builder = (args) =>
  render(_=>_
   .child('div', _=>_
     .class('box')
     .child('button', _=>_
       .on('click', args.function[0])
       .style(args.object[0])
       .text('Click me')
     )
   )
  );

builder({
  function: [
    e => console.log(e),
  ],
  object: [
    {background: 'orangered', ':hover':{background: 'skyblue'}},
  ],
});

Resources:

• XML parser: https://github.com/TobiasNickel/tXml

GitHub

View Github