mikemaccana / dynamic-template

Simple dynamic ES6 templates

ES6 Dynamic Templates

Simple dynamic ES6 templates

Actual real ES6 templates. Just dynamic.

Why would I want to make ES6 templates dynamically?

Because you have a whole bunch of templates, and don't want to write a function for every possible template string. The purpose of the module is that variables are resolved later, which makes it easier to do dynamic templating. This is surprisingly tricky as this for TemplateStrings is a bit weird.

Changes since version 1

Version 1 used eval, requiring you to sanitise user input before use. While that's a commopn expectation for web development, the new version uses a regex based approach while keeping the same API.

Usage

Load the module:

const fillTemplate = require('es6-dynamic-template');

Use it (use regular quotes, not backticks, for template string):

const greeting = fillTemplate('Hi ${firstName}', {firstName: 'Joe'});

Returns:

'Hi Joe'

Tests

mocha

Issues

Everything works, AFAIK, if it doesn't, send a PR rather than complaining otherwise I will mock you.

dynamic-template's Issues

Iterate arrays

Tried rendering an array using this template....

    <ul>
      ${this._items.map((item) => `
        <li>${item}</li>
      `.trim()).join('')}
    </ul>

but this module's function renders it as:

 <ul>
      ${this._items.map((item) =&gt; `
        <li>${item}</li>
      `.trim()).join('')}
 </ul>

is there another technique to get this module to render an array?

Interpolate nested object properties

It is more a feature request, but ES6 string templates can interpolate the nested properties of an object:

describe('String interpolation', () => {
  it("Allow top level fields ", async () => {
    const res = fillTemplate("A: ${a}, B: ${b}", { a: 100, b: "xxx" })
    expect(res).eq("A: 100, B: xxx")
  })

  it("Allow object fields ES6 dynamic", async () => {
    const res = fillTemplate("A: ${model.a}, B: ${model.b}", { model: { a: 100, b: "xxx" } })
    expect(res).eq("A: 100, B: xxx")
  })

  it("Allow object fields ES6", async () => {
    const obj = { model: { a: 100, b: "xxx" } }
    const res = `A: ${obj.model.a}, B: ${obj.model.b}`
    expect(res).eq("A: 100, B: xxx")
  })
})

This package implements it, but the syntax is questioning: https://www.npmjs.com/package/string-interpolation

Using a Function constructor might be dangerous

an can lead to XSS vulnerabilities. This is an example how this can happen:

https://jsfiddle.net/Lamik/w97qdpvf/

So you should point this out in your module description.