Source: render/render.js

  1. import Script from '../component/script'
  3. /**
  4.  * Representa o Render do framework.
  5.  * @module Render
  6.  * @param rootElement {HTMLElement} rootElement - Elemento HTML raíz da SPA.
  7.  * @property {Object} targetComponent - Objeto literal contendo as propriedades de um componente a ser renderizado.
  8.  * @property {HTMLElement} targetComponent.originalComponent - Elemento HTML do componente a ser renderizado.
  9.  * @property {HTMLElement} targetComponent.formattedComponent - Elemento HTML formatado do componente renderizado.
  10.  * @property {HTMLElement} targetComponent.rawTemplate - Elemento HTML TEMPLATE do componente.
  11.  * @property {HTMLElement} targetComponent.rawScript - Elemento HTML SCRIPT do componente.
  12.  * @property {HTMLElement} targetComponent.rawStyle - Elemento HTML STYLE do componente.
  13.  * @property {Object} targetComponent.virtualTemplate - Objeto com a instância virtual do TEMPLATE.
  14.  * @property {Object} targetComponent.virtualScript - Objeto com a instância virtual do SCRIPT.
  15.  */
  16. export default class Render {
  17.   constructor({ rootElement }) {
  18.     this.rootElement = rootElement
  20.     this.targetComponent = {
  21.       originalComponent: undefined,
  22.       formattedComponent: undefined,
  23.       rawTemplate: undefined,
  24.       rawScript: undefined,
  25.       rawStyle: undefined,
  26.       virtualScript: undefined,
  27.     }
  28.   }
  30.   /**
  31.    * Renderiza um Componente no rootElement caso receba o pârametro targetComponent ou atualiza os HTMLElements do rootElement baseados nos parâmetros virtuais.
  32.    * @function render
  33.    * @param targetComponent {Object | Undefined} targetComponent - Objeto literal contido nas rotas do Router.
  34.    * @returns {undefined}
  35.    */
  36.   render(targetComponent) {
  37.     this.clearElement()
  39.     if (targetComponent) this.setTargetComponent(targetComponent)
  41.     this.updateRawTemplateBasedOnVirtualScript()
  43.     this.setTargetComponentFormattedDocument()
  45.     this.appendFormattedComponentOnRootElement()
  46.   }
  48.   /**
  49.    * Concatena a propriedade formattedComponent do Objeto literal targetComponent no rootElement.
  50.    * @function appendFormattedComponentOnRootElement
  51.    * @returns {undefined}
  52.    */
  53.   appendFormattedComponentOnRootElement() {
  54.     const formatted = this.targetComponent.formattedComponent.cloneNode(true)
  56.     this.rootElement.append(formatted)
  57.   }
  59.   /**
  60.    * Atualiza os HTMLElements da propriedade rawTemplate do Objeto literal targetComponent baseados nos dados contidos na variável virtualScript no Objeto literal targetComponent.
  61.    * @function updateRawTemplateBasedOnVirtualScript
  62.    * @returns {undefined}
  63.    */
  64.   updateRawTemplateBasedOnVirtualScript() {
  65.     const formatted = this.targetComponent.rawTemplate.content
  66.     const reactiveElements = formatted.querySelectorAll('[leo-data]')
  68.     reactiveElements.forEach((element) => {
  69.       const propertyName = element.attributes['leo-data'].value
  70.       const instance = this.targetComponent.virtualScript.instance
  71.       const virtualValue = instance[propertyName]
  73.       element.innerHTML = virtualValue
  74.     })
  75.   }
  77.   /**
  78.    * Exclui o conteúdo HTML de dentro do elemento desejado.
  79.    * @function clearElement
  80.    * @param targetElement {HTMLElement} targetElement - Elemento HTML a ser limpo.
  81.    * @returns {undefined}
  82.    */
  83.   clearElement(targetElement = this.rootElement) {
  84.     if (
  85.       targetElement &&
  86.       HTMLCollection.prototype.isPrototypeOf(targetElement.children)
  87.     )
  88.       targetElement.innerHTML = ''
  89.   }
  91.   /**
  92.    * Chama as funções responsáveis por povoar as propriedades [originalComponent, rawTemplate, rawScript, rawStyle, virtualTemplate, virtualScript] do Objeto literal targetComponent.
  93.    * @function setTargetComponent
  94.    * @param targetComponent {HTMLElement} targetComponent - Elemento HTML do componente a ser instanciado.
  95.    * @returns {undefined}
  96.    */
  97.   setTargetComponent(targetComponent) {
  98.     this.setTargetComponentRawProperties(targetComponent)
  99.     this.setTargetComponentVirtualProperties()
  100.   }
  102.   /**
  103.    * Povoa as propriedades Object do Objeto literal targetComponent.
  104.    * @function setTargetComponentVirtualProperties
  105.    * @returns {undefined}
  106.    */
  107.   setTargetComponentVirtualProperties() {
  108.     if (this.targetComponent.rawScript) {
  109.       this.setVirtualScript()
  110.       this.setVirtualScriptListener()
  111.     }
  112.   }
  114.   /**
  115.    * Povoa a propriedade virtualScript do Objeto literal targetComponent com uma instância da classe Script a partir da propriedade HTMLElement rawScript do Objeto literal targetComponent.
  116.    * @function setVirtualScript
  117.    * @returns {undefined}
  118.    */
  119.   setVirtualScript() {
  120.     try {
  121.       const rawJSCode = this.targetComponent.rawScript.innerHTML
  122.       const ComponentScript = eval(rawJSCode)
  124.       this.targetComponent.virtualScript = new Script(ComponentScript)
  125.     } catch (err) {
  126.       console.error(`@setVirtualScript: ${err}`)
  127.     }
  128.   }
  130.   /**
  131.    * Cria os listeners de eventos da propriedade virtualScript do Objeto literal targetComponent.
  132.    * @function setVirtualScriptListener
  133.    * @returns {undefined}
  134.    */
  135.   setVirtualScriptListener() {
  136.     const self = this
  138.     this.targetComponent.virtualScript.emitter.addListener('change', () =>
  139.       self.onVirtualScriptChange()
  140.     )
  141.   }
  143.   /**
  144.    * Cria o handler do evento "change" da propriedade virtualScript do Objeto literal targetComponent.
  145.    * @function onVirtualScriptChange
  146.    * @returns {undefined}
  147.    */
  148.   onVirtualScriptChange() {
  149.     this.render()
  150.   }
  152.   /**
  153.    * Povoa as propriedades HTMLElement do Objeto literal targetComponent.
  154.    * @function setTargetComponentRawProperties
  155.    * @param targetComponent {HTMLElement} targetComponent - Elemento HTML do componente a ser instanciado.
  156.    * @returns {undefined}
  157.    */
  158.   setTargetComponentRawProperties(targetComponent) {
  159.     try {
  160.       const documentFragment = this.getDocumentFragment(targetComponent)
  162.       if (!documentFragment) throw `DocumentFragment not loaded!`
  164.       if (!this.validateDocumentFragmentTagNames(documentFragment))
  165.         throw `Invalid DocumentFragment TagNames!`
  167.       let template = documentFragment.querySelector('template')
  168.       let script = documentFragment.querySelector('script')
  169.       let style = documentFragment.querySelector('style')
  171.       this.targetComponent.originalComponent = documentFragment
  172.       this.targetComponent.rawTemplate = template ? template : undefined
  173.       this.targetComponent.rawScript = script ? script : undefined
  174.       this.targetComponent.rawStyle = style ? style : undefined
  175.     } catch (err) {
  176.       console.error(`@setTargetComponentRawProperties: ${err}`)
  177.     }
  178.   }
  180.   /**
  181.    * Povoa a propriedade formattedComponent do Objeto literal targetComponent com a versão final dos HTMLElements a serem renderizados.
  182.    * @function setTargetComponentFormattedDocument
  183.    * @returns {undefined}
  184.    */
  185.   setTargetComponentFormattedDocument() {
  186.     try {
  187.       const rawTemplate = this.targetComponent.rawTemplate
  188.       const rawStyle = this.targetComponent.rawStyle
  190.       let newFormattedComponent = document.createDocumentFragment()
  192.       if (rawTemplate)
  193.         newFormattedComponent.append(rawTemplate.content.cloneNode(true))
  195.       if (rawStyle) newFormattedComponent.append(rawStyle.cloneNode(true))
  197.       this.targetComponent.formattedComponent = newFormattedComponent
  198.     } catch (err) {
  199.       console.error(`@setTargetComponentFormattedDocument: ${err}`)
  200.     }
  201.   }
  203.   /**
  204.    * Retorna o DocumentFragment do componente.
  205.    * @function getDocumentFragment
  206.    * @param targetComponent {Object} targetComponent - Objeto do componente.
  207.    * @returns {DocumentFragment | undefined}
  208.    */
  209.   getDocumentFragment(targetComponent) {
  210.     try {
  211.       if (!targetComponent) throw `Component not found!`
  212.       if (typeof targetComponent !== 'object') throw `Component is invalid!`
  214.       const range = document.createRange()
  216.       return range.createContextualFragment(targetComponent.component)
  217.     } catch (err) {
  218.       console.error(`@getDocumentFragment: ${err}`)
  219.     }
  220.   }
  222.   /**
  223.    * Valida as TagNames do DocumentFragment.
  224.    * @function validateDocumentFragmentTagNames
  225.    * @param contextualFragments {DocumentFragment} contextualFragments - Objeto do componente.
  226.    * @returns {boolean}
  227.    */
  228.   validateDocumentFragmentTagNames(documentFragment) {
  229.     try {
  230.       if (!documentFragment) throw `DocumentFragment not found!`
  231.       if (!documentFragment.children) throw `Object is not a DocumentFragment!`
  233.       const children = documentFragment.children
  235.       if (!children.length > 0) throw `DocumentFragment is empty!`
  237.       Array.from(children).forEach((child) => {
  238.         switch (child.tagName) {
  239.           case 'TEMPLATE':
  240.           case 'SCRIPT':
  241.           case 'STYLE':
  242.             break
  244.           default:
  245.             throw `Tag ${child.tagName} not supported!`
  246.         }
  247.       })
  249.       return true
  250.     } catch (err) {
  251.       console.error(`@validateDocumentFragmentTagNames: ${err}`)
  253.       return false
  254.     }
  255.   }
  257.   /**
  258.    * Envia a propriedade virtualScript do Objeto literal targetComponent o sinal para a sua finalização.
  259.    * @function finishTargetComponent
  260.    * @returns {undefined}
  261.    */
  262.   finishTargetComponent() {
  263.     if (this.targetComponent.virtualScript)
  264.       this.targetComponent.virtualScript.onFinish()
  265.   }
  266. }