@brandchamp/template-parser

Template Parser

Simple small and opinionated template parser without external dependencies (~950B minified).

Api

• parseTemplate - Replace tokens in text with provided values
• extractTokensFromTemplate - Get tokens metadata from provided template

parseTemplate

import { parseTemplate } from '@brandchamp/simple-template-parser';

const template = `
  Hi {{FIRST-NAME}} {{LAST-NAME}},

  Please register to our portal to earn free stuff

  {{LINK-BUTTON "Register" REGISTER-URL}}

  All the best
  {{COMPANY-LOGO}}
`;

// Example 1 - Parsing template with all tokens available
const { text, unreplacedTokens } = parseTemplate(template, {
  'FIRST-NAME': 'John',
  'LAST-NAME': 'Doe',
  'COMPANY-LOGO': '<img src="http://company-logo.example.com"></img>',
  'REGISTER-URL': 'https://register.example.com',
  'LINK-BUTTON'(name, url) {
    return `<a class="ui large primary button" href="${url}">${name}</a>`;
  },
});

/*
<<<<<<<<OUTPUT [text]>>>>>>>
  Hi John Doe,

  Please register to our portal to earn free stuff

  <a class="ui large primary button" href="https://register.example.com">Register</a>

  All the best
  <img src="http://company-logo.example.com"></img>

<<<<<<<<OUTPUT [unreplacedTokens]>>>>>>>
[]
*/

// Example 2 - Parsing template without having value for all tokens
const { text, unreplacedTokens } = parseTemplate(template, {
  'FIRST-NAME': 'John',
  'COMPANY-LOGO': '<img src="http://company-logo.example.com"></img>',
});

/*
<<<<<<<<OUTPUT [text]>>>>>>>
  Hi John {{LAST-NAME}},

  Please register to our portal to earn free stuff

  {{LINK-BUTTON "Register" REGISTER-URL}}

  All the best
  <img src="http://company-logo.example.com"></img>

<<<<<<<<OUTPUT [unreplacedTokens]>>>>>>>
[{
  expression: '{{LAST-NAME}}',
  token: 'LAST-NAME',
  props: [],
}, {
  expression: '{{LINK-BUTTON "Register" REGISTER-URL}}',
  token: 'LINK-BUTTON',
  props: ['"Register"', 'REGISTER-URL'],
}]
*/

extractTokensFromTemplate

import { extractTokensFromTemplate } from '@brandchamp/simple-template-parser';

const template = `
  Hi {{FIRST-NAME}} {{LAST-NAME}},

  Please register to our portal to earn free stuff

  {{LINK-BUTTON "Register" REGISTER-URL}}

  All the best
  {{COMPANY-LOGO}}

  P.S Keep in mind that token naming convention is up to you ;)
  {{ functionName prop1 prop2 }}
`;

// Example3 - Extracting tokens from template without parsing it

const tokens = extractTokensFromTemplate(template)

/*
<<<<<<<<OUTPUT [tokens]>>>>>>>
[{
  expression: '{{FIRST-NAME}}',
  token: 'FIRST-NAME',
  props: [],
}, {
  expression: '{{LAST-NAME}}',
  token: 'LAST-NAME',
  props: [],
}, {
  expression: '{{LINK-BUTTON "Register" REGISTER-URL}}',
  token: 'LINK-BUTTON',
  props: ['"Register"', 'REGISTER-URL'],
}, {
  expression: '{{COMPANY-LOGO}}',
  token: 'COMPANY-LOGO',
  props: [],
}, {
  expression: '{{ functionName prop1 prop2 }}',
  token: 'functionName',
  props: [prop1, prop2],
}]
*/

More examples

For more examples reference provided test test/templateParser.spec.ts