fact

Templates as data

Usage no npm install needed!

<script type="module">
  import fact from 'https://cdn.skypack.dev/fact';
</script>

README

Fact

HTML Templates as data.

With Fact, you write your templates in an s-expression like abstract syntax tree which gets ran through a list evaluator that has support for macro evaluation.

Example template and usage:

var fact = require("fact");

var templateData = ["html",
  ["head",
    ["title", "Fact - Templates as data"],
    [":js",   "http://localhost/scripts/main.js"],
    [":css",  "http://localhost/style/main.css"]
  ],
  ["body",
    ["div", {id: "header", class: "nav"},
      ["@headers"]
    ],
    ["div", {id: "canvas"},
      ["@canvas"],
      ["ul",
        [":each", "@list",
          [":if", [":odd", "@key"],
            ["li", {class: "odd"}, "@val"],
            ["li", {class: "even"}, "@val"]
          ]
        ]
      ]
    ]
  ]
];

var template = evalTemplate(data);

console.log(template({
    headers: "header data",
    canvas: "canvas data",
    list: [
        "zero",
        "first",
        "second",
        "third",
        "fourth",
        "fifth"
    ]
}));