jails-js 6.0.1-beta.6 → 6.0.1-beta.8

package/src/component.ts

@@ -14,6 +14,7 @@ export const Component = ({ name, module, dependencies, node, templates, signal
 	const state 		= Object.assign({}, scope, model, initialState)
 	const view 			= module.view? module.view : (data) => data
 	let preserve		= []
+	let tick
 
 	const base = {
 		name,
@@ -61,7 +62,6 @@ export const Component = ({ name, module, dependencies, node, templates, signal
 				}
 
 				const newstate = Object.assign({}, state, scope)
-
 				render(newstate)
 
 				return Promise.resolve(newstate)
@@ -101,6 +101,7 @@ export const Component = ({ name, module, dependencies, node, templates, signal
 				}
 				node.addEventListener(ev, selectorOrCallback.handler, { signal })
 			}
+
 		},
 
 		off( ev, callback ) {
@@ -134,28 +135,28 @@ export const Component = ({ name, module, dependencies, node, templates, signal
 			const clone = element.cloneNode()
 			const html = html_? html_ : target
 			clone.innerHTML = html
-
-			rAF( _ => Idiomorph.morph(element, clone, IdiomorphOptions) )
+			Promise.resolve(() => Idiomorph.morph(element, clone, IdiomorphOptions))
 		}
 	}
 
 	const render = ( data ) => {
-
-		const html = tpl.render.call( view(data), node, safe, g )
-		Idiomorph.morph( node, html, IdiomorphOptions(node) )
-
-		rAF(() => {
-			node.querySelectorAll('[tplid]')
-				.forEach((element) => {
-					if(!element.base) return
-					element.base.state.protected().forEach( key => delete data[key] )
-					element.base.state.set(data)
-				})
-			rAF(() => g.scope = {})
+		clearTimeout( tick )
+		tick = setTimeout(() => {
+			const html = tpl.render.call( view(data), node, safe, g )
+			Idiomorph.morph( node, html, IdiomorphOptions(node) )
+			Promise.resolve().then(() => {
+				node.querySelectorAll('[tplid]')
+					.forEach((element) => {
+						if(!element.base) return
+						element.base.state.protected().forEach( key => delete data[key] )
+						element.base.state.set(data)
+					})
+				Promise.resolve().then(() => g.scope = {})
+			})
 		})
-
 	}
 
+	render( state )
 	node.base = base
 	return module.default( base )
 }

package/src/element.ts

@@ -3,7 +3,6 @@ import { Component } from './component'
 export const Element = ({ component, templates, start }) => {
 
 	const { name, module, dependencies } = component
-	const abortController = new AbortController()
 
 	return class extends HTMLElement {
 
@@ -13,6 +12,8 @@ export const Element = ({ component, templates, start }) => {
 
 		connectedCallback() {
 
+			this.abortController = new AbortController()
+
 			if( !this.getAttribute('tplid') ) {
 				start( this.parentNode )
 			}
@@ -23,21 +24,21 @@ export const Element = ({ component, templates, start }) => {
 				module,
 				dependencies,
 				templates,
-				signal: abortController.signal
+				signal: this.abortController.signal
 			})
 
 			if ( rtrn && rtrn.constructor === Promise ) {
-				rtrn.then(() => this.dispatchEvent( new CustomEvent(':mount') ))
+				rtrn.then(() => {
+					this.dispatchEvent( new CustomEvent(':mount') )
+				})
 			} else {
 				this.dispatchEvent( new CustomEvent(':mount') )
 			}
-
-			this.base.state.set({})
 		}
 
 		disconnectedCallback() {
 			this.dispatchEvent( new CustomEvent(':unmount') )
-			abortController.abort()
+			this.abortController.abort()
 			delete this.base
 		}
 	}

package/src/template-system.ts

@@ -12,7 +12,7 @@ export const templateConfig = (newconfig) => {
 
 export const template = ( target, { components }) => {
 
-	tagElements( target, [...Object.keys( components ), 'template'] )
+	tagElements( target, [...Object.keys( components ), '[html-if]', 'template'] )
 	const clone = target.cloneNode( true )
 
 	transformTemplate( clone )
@@ -48,6 +48,9 @@ const tagElements = ( target, keys ) => {
 				return tagElements( node.content, keys )
 			}
 			node.setAttribute('tplid', uuid())
+			if( node.getAttribute('html-if') && !node.id ) {
+				node.id = uuid()
+			}
 		})
 }
 
@@ -102,7 +105,7 @@ const transformTemplate = ( clone ) => {
 			if (htmlIf) {
 				element.removeAttribute('html-if')
 				const open = document.createTextNode(`%%_ if ( safe(function(){ return ${htmlIf} }) ){ _%%`)
-				const close = document.createTextNode(`%%_ } _%%`)
+				const close = document.createTextNode(`%%_ }  _%%`)
 				wrap(open, element, close)
 			}