snabbdom-template

v0.1.5

Published

2 years ago

Virtual-DOM-based template module for populating HTML templates with dynamic data and building dynamic lists and tables.

Downloads

0High
0Medium
0Low

bloodyknuckles

snabbdom virtual-dom template HTML CSS

snabbdom-template

Content insertion is accomplished by targeting standard HTML tag names and other CSS selectors. Works with Snabbdom.

This module allows you to develop plain HTML/CSS templates with dummy data in the places dynamic data will be inserted. The benefit is that the templates can be developed independently from the programming that dynamically incorporates data into the web page.

layering templates and map example

var outer = fs.readFileSync('public/outer.html', 'utf-8')
var section = fs.readFileSync('public/section.html', 'utf-8')
var template = fs.readFileSync('public/template.html', 'utf-8')

var vtree = snabbdomTemplate([outer, section, template], {
  '#sectionheader': 'Start Here:',
  'div#message': {class: 'myclass', '_html': 'Ready.'},
  '#mapme': {_map: {'li': ['one', 'two', 'three', 'four']}},
})

outer.html

<!DOCTYPE html>
<html>
  <head>
    <title>snabbdom-template</title>
    <link rel="stylesheet" type="text/css" href="public/css/main.css">
  </head>
  <body>
    <div class="template">template</div>
    <div id="scripts">
      <script src="public/js/main.js"></script>
    </div>
  </body>
</html>

section.html

      <h2 id="sectionheader">section header</h2>
      <div class="template"></div>

template.html

        <div><div id="message">message goes here</div>
        <ul id="mapme">
          <li>a</li>
          <li>b</li>
          <li>c</li>
        </ul>

...outputs a vtree that renders to:

<!DOCTYPE html>
<html>
  <head>
    <title>snabbdom-template</title>
    <link rel="stylesheet" type="text/css" href="public/css/main.css">
  </head>
  <body>
  </head>
  <body>
    <div class="template">
      <h2 id="sectionheader">Start Here:</h2>
      <div class="template">
        <div><div id="message" class="myclass">Ready.</div>
        <ul id="mapme">
          <li>one</li>
          <li>two</li>
          <li>three</li>
          <li>four</li>
        </ul>
      </div>
    </div>
    <div id="scripts">
      <script src="public/js/main.js"></script>
    </div>
  </body>
</html>

vtree example

var sh = require('snabbdom/h')
var outer = fs.readFileSync('public/outer.html', 'utf-8')

var vtree = snabbdomTemplate(outer, sh('div.myclass', 'My content.'))

...outputs a vtree that renders to:

<!DOCTYPE html>
<html>
  <head>
    <title>snabbdom-template</title>
    <link rel="stylesheet" type="text/css" href="public/css/main.css">
  </head>
  <body>
  </head>
  <body>
    <div class="template">
      <div class="myclass">My content.</div>
    </div>
    <div id="scripts">
      <script src="public/js/main.js"></script>
    </div>
  </body>
</html>

main-loop example

var fs = require('fs')
var sT = require('snabbdom-template')
var mL = require('main-loop')

var patch = require('snabbdom').init([
  require('snabbdom/modules/eventlisteners').default,
])
var initstate = {n:0}

var outer = fs.readFileSync('public/mainsimple.html', 'utf-8')
var inner = fs.readFileSync('public/button.html', 'utf-8')

var view = function (state) {
  return sT([outer, inner], {
    '#count': state.n,
    'button': {'_on': {click: onclick}}
  })
}

var loop = mL(initstate, view, {
  target: document.getElementById('content'),
  diff: function (tree, newTree) { return newTree }, // snabbdom incorporates diff in patch
  patch: patch
})
loop.update(initstate)

function onclick () {
  initstate.n++
  loop.update(initstate)
}

...then browserify -t brfs index.js > public/bundle.js and include <script src="bundle.js"></script> at the bottom of your HTML body.

license

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

snabbdom-template

layering templates and map example

vtree example

license