https://assets.feedbin.com/assets/helpers/template_helpers-d6063dc…b28fe05c365a1ce5bfe163245e554bc094b9196e.js

1export function templateText(element, selector, value) {
2  let result = element.querySelector(`[data-template~=${selector}]`)
3  if (result) {
4    result.textContent = value
5  } else {
6    console.trace(`templateText missing selector: ${selector}`)
7  }
8}
9
10// Nodes only. This used to accept a string and assign it to innerHTML, which
11// made it an unescaped sink for whatever any caller happened to pass. Callers
12// with text want templateText.
13export function templateHTML(element, selector, value) {
14  let result = element.querySelector(`[data-template~=${selector}]`)
15  if (result) {
16    if (typeof value === "object") {
17      html(result, value)
18    } else {
19      console.trace(`templateHTML got a string, use type "text": ${selector}`)
20    }
21  } else {
22    console.trace(`templateHTML missing selector: ${selector}`)
23  }
24}
25
26export function templateAttribute(element, selector, value, attribute) {
27  let result = element.querySelector(selector)
28  if (result) {
29    result.setAttribute(attribute, value)
30  } else {
31    console.trace(`templateAttribute missing attribute: ${attribute}`)
32  }
33}
34
35export function html(target, elements) {
36  target.innerHTML = ""
37  target.append(...[elements].flat())
38}
39
40export function hydrate(element, items) {
41  items.forEach((item) => {
42    switch (item.type) {
43      case "text":
44        templateText(element, item.selector, item.value)
45        break
46      case "html":
47        templateHTML(element, item.selector, item.value)
48        break
49      case "attribute":
50        templateAttribute(element, item.selector, item.value, item.attribute)
51        break
52    }
53  })
54  return element
55};