class Template {
  #embeddedTemplates = new Map()

  constructor(source, ...values) {
    this.element = document.createElement('template')
    // pre-process the template string values
    const updatedValues = this.#prepareValues(values)
    this.source = String.raw({ raw: source }, ...updatedValues)
    this.element.innerHTML = this.source
  }

  #prepareValues(values) {
    let index = 0

    const prepareValue = v => {
      index += 1
      const i = String(index)

      if (typeof v === 'boolean' || v === null || v === undefined) {
        return ''
      }

      if (v instanceof Template) {
        // if we find a template, store it in our Map
        this.#embeddedTemplates.set(i, v)
        // substitute a small custom element including the index in the Map for this embedded template
        // our template content must be a string, so we are using this little custom element to stand in for our non-string Template object
        return `<t- data-i="${i}"></t->`
      }

      return String(v)
    }

    return values.map(v => {
      // just in case someone interpolated an array, then let's map over it
      if (Array.isArray(v)) {
        return v.map(prepareValue).join('')
      }

      return prepareValue(v)
    })
  }

  // we'll just always imagine it's true
  cloneNode() {
    const node = this.element.content.cloneNode(true)
    
    // find all those custom elements that are standing in for embedded template objects
    const embeddedTemplates = node.querySelectorAll('t-')

    // for each custom element, replace it with the cloned fragment of the template object it's standing in for
    embeddedTemplates.forEach(t => {
      const i = t.dataset.i
      const template = this.#embeddedTemplates.get(i)
      t.replaceWith(template.cloneNode())
    })

    return node
  }
}

function html(strings, ...args) {
	return new Template(strings, ...args)
}

const groceryItems = ['milk', 'eggs', 'eggos']

const template = html`
  <ul>
    ${groceryItems.map(item => html`
      <li>${item}</li>
    `)}
  </ul>
`

document.body.append(template.cloneNode())