rendex

render :: Model -> renderNode -> Template -> renderBranch -> render

Usage

import Immutable from "immutable"
import {patch, elementOpen, elementClose} from "incremental-dom"
import Rendex from "rendex"

const $model = Immutable.Map({
  'root':{
    render:{
      template:'rootTmpl'
    },
    branch:[ {id: 'node1'}, {id: 'node2'} ]
  }, 
  'node1':{
    content:'Hello, ',
    render:{
      template:'nodeTmpl'
    }
  }, 
  'node2':{
    content:'World!',
    render:{
      template:'nodeTmpl'
    }
  }
});

const rootTmpl = data => {
  elementOpen('p')
    Rendex.renderBranch(data)
  elementClose('p')
}

const nodeTmpl = data => {
  elementOpen('span')
    text( data.$node.content )
  elementClose('span')
}

const $templates = { rootTmpl, nodeTmpl }

const data = {$id: 'root', $templates, $model}

const render = () => patch( document.body, Rendex.renderNode, data )

Description

Model

A set of interconnected nodes

Node

Terminal | Branch

Terminal

A node with at least one property render.
May have optional context property.

{
  context: "...", /* optional */
  render: {...}
}

Branch

A node with at least two properties render and branch
May have optional context property.

{
  context: "...", /* optional */
  render: {...},
  branch: [{...}, ...]
}

render

contextless | contextual | complex

contextless render

An object with at least one property template. May contain properties render::branch and/or options.

{
  render: {
    template: "...",
    branch:{ ...}, /* optional */
    options:{ ...}, /* optional */
  }
}

contextual render

An object with at least one property context.
context may contain one or more named contextless render objects.

{
  render: {
    context:{
      "my-context-1":{
        template: "...",
        branch: { ... }, /* optional */
        options:{ ... }  /* optional */
      },
      myContext2:{ ... }
  }
}

complex render

A combination of contextual render and contextless render

{
  render: {
    template: "...",
    branch:{ ...}, /* optional */
    options:{ ...}, /* optional */
    context:{
      "my-context-1":{
        template: "...",
        branch: { ... }, /* optional */
        options:{ ... }  /* optional */
      },
      myContext2:{ ... }
  }
}

render::branch

A fine-tuning of branch rendering.
May contain optional properties render::branch::show, render::branch::hide or render::branch::options.

{
  render: {
    template: "...",
    branch:{
      show: { ... },
      hide: { ... },
      options: { ... }
  }
}

branch

Defines parent-child relation with other nodes.

{
  branch: [
    {
      id: "...",
      options: { ... }, /* optional */
      context: "..."    /* optional */
    },
    {
      id: "..."
    }
  ]
}

Template

const myTemplate = ({$id, $node, $context, $options, $model, $templates, $index}){
  ...
  Rendex.renderBranch({$id, $node, $context, $options, $model, $templates})
  ...
  Rendex.renderSection({$id, $node, $context, $options, $model, $templates}, start, end )
  ...
}