tiny-interpolator

    1.1.0 • Public • Published

    tiny-interpolator

    npm version

    About:

    A tiny, simple, template engine.

    Less than 1Kb! No dependencies! Wow!

    Usage:

    0. Include script in HTML
    <script src="interpolator.js"/></script> <!-- or wherever you put it -->
    1. Create a DOM element with a unique id to use as your render-target
    <div id="blog"></div>
    2. Write HTML template. ES6 Template Strings are recommended for easy line break support.
    let template = 
    `<div class="post">
      <h1>{{title}}</h1>
      <h3>{{author.firstName}} {{author.lastName}}</h3>
      <p>{{content}}</p>
    </div>`
    3. Write data. This should be an array of objects, in any order you wish.
    let data = [
      {
        title: 'My first blog post',
        author: {
          firstName: 'CoolGuy', //nested values supported!
          lastName: 'Jefferson'
        },
        content: 'Wow, I sure love writing blogs. What a neat new idea.'
      },
      {
        title: 'My second blog post',
        author: {
          firstName: 'Jared',
          lastName: 'Ganglyfingers'
        },
        content: 'This website is just okay, in my opinion. It could use a comments section'
      }
    ]
    4: Create new Interpolation and render at your target.
    let BlogPosts = new Interpolation(data, template);
    BlogPosts.renderAt('blog')
    Observe!

    preview

    code

    Other notes:

    • If you wanted to use this without immediately rendering, it will work fine. You can grab the outputted text for your needs with the exposed .output property on the Interpolation.
    • As of 1.0.3 you can require('tiny-interpolator') inside Node if you desire.
    • Run tests with npm test.

    Install

    npm i tiny-interpolator

    DownloadsWeekly Downloads

    11

    Version

    1.1.0

    License

    ISC

    Last publish

    Collaborators

    • nickells