es6-string-template-loader

install

npm install --save-dev es6-string-template-loader

config

  // webpack config
  {
    test: /\.xhtml/,
    use: [
      {
        loader: 'babel-loader',
        query: {
          presets: ['env'],
          plugins: ['transform-runtime']
        }
      },
      {
        loader: 'html-template-loader'
      }
    ]
  }

demo1

// 1.xhtml
<h1 class="author">${it.name}</h1>

import x1 from './1.xhtml'
let html = x1({name: '<strong>template</strong>'})
// result:
// <h1 class="author"><strong>template</strong></h1>

demo2

// 2.xhtml
<h1 class="author">${utils.escape(it.name)}</h1>

import x1 from './2.xhtml'
import escape from './escape.js'
let html = x1({name: '<strong>template</strong>'}, {escape})
// result:
// <h1 class="author">&lt;strong&gt;template&lt;/strong&gt;</h1>

// escape.js
function _escape(string) {
  var entityMap = {
    '&': '&',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#x27;',
    '/': '&#x2f;',
    '\\': '&#x5c;'
  }
  return String(string).replace(/[&<>"'/\\%]/g, function (key) {
    return entityMap[key]
  })
}
export function escape (sections, ...vars) {
  let ret = ''
  for (let i = 0, raws = sections.raw, l = raws.length; i < l; ++i) {
    let raw = raws[i]
    let value = vars[i] == null ? '' : vars[i]
    if (raw[raw.length - 1] === '$') {
      raw = raw.slice(0, -1)
    } else {
      value = _escape(value)
    }
    ret += raw + value
  }
  return ret
}

demo3

// 3.xhtml
<h1 class="${css.author}">${utils.escape(it.name)}</h1>

import css from './all.scss'
import x1 from './2.xhtml'
import escape from './escape.js'
let html = x1({name: '<strong>template</strong>'}, {escape}, css)