inject-template

Inject template into innerHTML

Usage no npm install needed!

<script type="module">
  import injectTemplate from 'https://cdn.skypack.dev/inject-template';
</script>

README

inject-template NPM version Build Status Dependency Status Coverage percentage

Inject template into innerHTML

Installation

$ npm install --save inject-template

Usage

  • An template tag in the desired element 1
  • An html template 2
var injectTemplate = require('inject-template');

let result = injectTemplate.inject({path: 'rainbow.js'}) // injects content from rainbow.html
// dosomething with result ...

result

class Rainbow extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = 'BIG RAINBOW';
  }
  ...
}

rainbow.js 1

class Rainbow extends HTMLElement {
  constructor() {
    super();
    // @template rainbow
  }
  ...
}

rainbow.html 2

<template>
  BIG RAINBOW
</template>

Named templates

var injectTemplate = require('inject-template');

let result = injectTemplate.inject({path: 'rainbow.js', name: 'rainbow-template'}) // injects content from rainbow-template.html

Custom templates path

var injectTemplate = require('inject-template');

let result = injectTemplate.inject({path: 'rainbow.js', templatePath: 'templates'}) // injects content from templates/rainbow.html

API

injectTemplate.inject({options})

injectTemplate.injectSync({options})

options

path

Type: string
Default: null

Path to file containing the template tag

templatePath

Type: string
Default: null

Path to the template (use when your template is in another directory).

When undefined inject-template assumes the template in in the same directory of the element

content

Type: string
Default: null

The content of the element (used in gulp-inject-html-template)

When streaming files, you can pass trough the content so inject-template doesn't need to read the element.

License

MIT © Glenn Vandeuren