js/components/page.js
// NPM IMPORTS
// import assert from 'assert'
import vdom_parser from 'vdom-parser'
import diff from 'virtual-dom/diff'
import patch from 'virtual-dom/patch'
import create_element from 'virtual-dom/create-element'
import VNode from 'virtual-dom/vnode/vnode'
import VText from 'virtual-dom/vnode/vtext'
import html_to_vdom from 'html-to-vdom'
// COMMON IMPORTS
const convertHTML = html_to_vdom({
VNode: VNode,
VText: VText
})
// let context = 'browser/components/page'
/**
* @file client page class.
*
* @author Luc BORIES
*
* @license Apache-2.0
*/
export default class Page
{
/**
* Create a Page instance.
*
* @returns {nothing}
*/
constructor()
{
this.target_elem_head = window.document.head
this.target_elem_body = window.document.body
this.target_tree_head = undefined
this.target_tree_body = undefined
this.target_node_head = undefined
this.target_node_body = undefined
}
/**
* Render a page.
*/
render_html(arg_html)
{
console.log('Page.render_html')
$(document.body).html(arg_html)
// this.render_html_with_vdom(arg_html)
}
/**
* Render a page.
*/
render_html_with_vdom(arg_html)
{
console.log('Page.render_html_with_vdom')
if (! this.target_tree)
{
console.log('Page.render_html_with_vdom:init')
this.target_tree_head = vdom_parser(this.target_elem_head)
this.target_tree_body = vdom_parser(this.target_elem_body)
this.target_node_head = create_element(this.target_tree_head)
this.target_node_body = create_element(this.target_tree_body)
// console.log('Page.render_html:init:target_node', this.target_node)
// console.log('Page.render_html:init:target_node', this.target_node)
}
const new_tree = convertHTML(arg_html)
const new_tree_head = new_tree.children[0]
const new_tree_body = new_tree.children[2]
const patches_head = diff(this.target_tree_head, new_tree_head)
const patches_body = diff(this.target_tree_body, new_tree_body)
console.log('Page.render_html:new_tree_body', new_tree_body)
console.log('Page.render_html:patches_body', patches_body)
this.target_node_head = patch(this.target_node_head, patches_head)
this.target_node_body = patch(this.target_node_body, patches_body)
this.target_tree_head = new_tree_head
this.target_tree_body = new_tree_body
console.log('Page.render_html:target_node_body', this.target_node_body)
// console.log('Page.render_html:target_tree_body', this.target_tree_body)
// $(document.body).html(arg_html)
}
}