eddieantonio/SmartTemplate.js

## SmartTemplate.js
/*!
 * Copyright (c) 2020 Eddie Antonio Santos
 *
 * This Source Code Form is subject to the terms of the Mozilla Public License,
 * v. 2.0. If a copy of the MPL was not distributed with this file, You can
 * obtain one at http://mozilla.org/MPL/2.0/.
 */

/**
 * Simplifies interaction with <template> tags:
 *
 * Access the innerText of all <slot>s as properties of the template tag.
 *
 *     <template id="template:hello">
 *       <h1> <slot name="salutation">Hello</slot>, <slot name="recipient">World</slot>!</h1>
 *     </template>
 *
 *     <body>
 *     </body>
 *
 *     <script>
 *       let greeting = SmartTemplate.fromId('template:hello')
 *       greeting.salutation = 'Goodbye'
 *       greeting.recipient = 'cruel world'
 *       greeting.appendTo(document.body)
 *     </script>
 */
export default class SmartTemplate {
  constructor(element) {
    this._el = element.content.firstElementChild.cloneNode(true)

    // Create getters and setters for each slot
    for (let slot of this._el.querySelectorAll('slot[name]')) {
      createGettersAndSetters(this, slot)
    }
  }

  set recipient(newText) {
    return this._el.querySelector('slot[name=recipient]').innerText = newText
  }

  static fromId(id) {
    let element = document.getElementById(id)
    if (element == null)
      throw new Error(`Could not find element with id="${id}"`)
    return new SmartTemplate(element)
  }

  appendTo(element) {
    element.appendChild(this._el)
    return this;
  }
}

function createGettersAndSetters(obj, slot) {
  return Object.defineProperty(obj, slot.name, {
    get: () => slot.innerText,
    set: (newValue) => slot.innerText = newValue
  })
}
	/*!
	* Copyright (c) 2020 Eddie Antonio Santos
	*
	* This Source Code Form is subject to the terms of the Mozilla Public License,
	* v. 2.0. If a copy of the MPL was not distributed with this file, You can
	* obtain one at http://mozilla.org/MPL/2.0/.
	*/

	/**
	* Simplifies interaction with <template> tags:
	*
	* Access the innerText of all <slot>s as properties of the template tag.
	*
	* <template id="template:hello">
	* <h1> <slot name="salutation">Hello</slot>, <slot name="recipient">World</slot>!</h1>
	* </template>
	*
	* <body>
	* </body>
	*
	* <script>
	* let greeting = SmartTemplate.fromId('template:hello')
	* greeting.salutation = 'Goodbye'
	* greeting.recipient = 'cruel world'
	* greeting.appendTo(document.body)
	* </script>
	*/
	export default class SmartTemplate {
	constructor(element) {
	this._el = element.content.firstElementChild.cloneNode(true)

	// Create getters and setters for each slot
	for (let slot of this._el.querySelectorAll('slot[name]')) {
	createGettersAndSetters(this, slot)
	}
	}

	set recipient(newText) {
	return this._el.querySelector('slot[name=recipient]').innerText = newText
	}

	static fromId(id) {
	let element = document.getElementById(id)
	if (element == null)
	throw new Error(`Could not find element with id="${id}"`)
	return new SmartTemplate(element)
	}

	appendTo(element) {
	element.appendChild(this._el)
	return this;
	}
	}

	function createGettersAndSetters(obj, slot) {
	return Object.defineProperty(obj, slot.name, {
	get: () => slot.innerText,
	set: (newValue) => slot.innerText = newValue
	})
	}