Necesito que la salida sea:
<p>123<span>321</span></p>Pero ahora eso es:
<span>321</span><p>123<span>321</span></p>¿Cuál es la mejor opción para comenzar a ejecutar p() y luego span() dentro de él?
class Templater { constructor() { this.output = ''; } span(...tags) { const transform = tags => tags.join(''); this.output += `<span>${transform(tags)}</span>` return this; } p(...tags) { const transform = tags => tags.join(''); this.output += `<p>${transform(tags)}</p>` return this; } toString() { return this.output; } } const template = new Templater(); console.log(template.p('123', template.span('321')).toString());Lo más fácil es simplemente omitir todo el asunto this.output por completo y simplemente confiar en la pila de llamadas.
class Templater { _transform(tags) { return tags.join(""); } span(...tags) { return `<span>${this._transform(tags)}</span>`; } p(...tags) { return `<p>${this._transform(tags)}</p>`; } } const template = new Templater(); console.log(template.p('123', template.span('321')).toString());Otra opción es construir un árbol de objetos que sepan cómo convertirse en una cadena:
class Tag { constructor(tag, children) { this.tag = tag; this.children = children; } toString() { const children = this.children.map(c => c.toString()).join(""); return `<${this.tag}>${children}</${this.tag}>`; } } class Templater { span(...children) { return new Tag('span', children); } p(...children) { return new Tag('p', children); } } const template = new Templater(); console.log(template.p('123', template.span('321')).toString());