musenalm/views/assets/js/client-side-templates.js

htmx.defineExtension('client-side-templates', {
  transformResponse: function(text, xhr, elt) {
    var mustacheTemplate = htmx.closest(elt, '[mustache-template]')
    if (mustacheTemplate) {
      var data = JSON.parse(text)
      var templateId = mustacheTemplate.getAttribute('mustache-template')
      var template = htmx.find('#' + templateId)
      if (template) {
        return Mustache.render(template.innerHTML, data)
      } else {
        throw new Error('Unknown mustache template: ' + templateId)
      }
    }

    var mustacheArrayTemplate = htmx.closest(elt, '[mustache-array-template]')
    if (mustacheArrayTemplate) {
      var data = JSON.parse(text)
      var templateId = mustacheArrayTemplate.getAttribute('mustache-array-template')
      var template = htmx.find('#' + templateId)
      if (template) {
        return Mustache.render(template.innerHTML, { data })
      } else {
        throw new Error('Unknown mustache template: ' + templateId)
      }
    }

    var handlebarsTemplate = htmx.closest(elt, '[handlebars-template]')
    if (handlebarsTemplate) {
      var data = JSON.parse(text)
      var templateId = handlebarsTemplate.getAttribute('handlebars-template')
      var templateElement = htmx.find('#' + templateId).innerHTML
      var renderTemplate = Handlebars.compile(templateElement)
      if (renderTemplate) {
        return renderTemplate(data)
      } else {
        throw new Error('Unknown handlebars template: ' + templateId)
      }
    }

    var handlebarsArrayTemplate = htmx.closest(elt, '[handlebars-array-template]')
    if (handlebarsArrayTemplate) {
      var data = JSON.parse(text)
      var templateId = handlebarsArrayTemplate.getAttribute('handlebars-array-template')
      var templateElement = htmx.find('#' + templateId).innerHTML
      var renderTemplate = Handlebars.compile(templateElement)
      if (renderTemplate) {
        return renderTemplate(data)
      } else {
        throw new Error('Unknown handlebars template: ' + templateId)
      }
    }

    var nunjucksTemplate = htmx.closest(elt, '[nunjucks-template]')
    if (nunjucksTemplate) {
      var data = JSON.parse(text)
      var templateName = nunjucksTemplate.getAttribute('nunjucks-template')
      var template = htmx.find('#' + templateName)
      if (template) {
        return nunjucks.renderString(template.innerHTML, data)
      } else {
        return nunjucks.render(templateName, data)
      }
    }

    var xsltTemplate = htmx.closest(elt, '[xslt-template]')
    if (xsltTemplate) {
      var templateId = xsltTemplate.getAttribute('xslt-template')
      var template = htmx.find('#' + templateId)
      if (template) {
        var content = template.innerHTML
          ? new DOMParser().parseFromString(template.innerHTML, 'application/xml')
          : template.contentDocument
        var processor = new XSLTProcessor()
        processor.importStylesheet(content)
        var data = new DOMParser().parseFromString(text, 'application/xml')
        var frag = processor.transformToFragment(data, document)
        return new XMLSerializer().serializeToString(frag)
      } else {
        throw new Error('Unknown XSLT template: ' + templateId)
      }
    }

    var nunjucksArrayTemplate = htmx.closest(elt, '[nunjucks-array-template]')
    if (nunjucksArrayTemplate) {
      var data = JSON.parse(text)
      var templateName = nunjucksArrayTemplate.getAttribute('nunjucks-array-template')
      var template = htmx.find('#' + templateName)
      if (template) {
        return nunjucks.renderString(template.innerHTML, { data })
      } else {
        return nunjucks.render(templateName, { data })
      }
    }
    return text
  }
})