jails-js 6.0.1-beta.5 → 6.0.1-beta.7

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 ) {
@@ -130,32 +131,32 @@ export const Component = ({ name, module, dependencies, node, templates, signal
 		},
 
 		innerHTML ( target, html_ ) {
-			const element = html_? target : elm
+			const element = html_? target : node
 			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

@@ -5,6 +5,8 @@ export const Element = ({ component, templates, start }) => {
 	const { name, module, dependencies } = component
 	const abortController = new AbortController()
 
+	let ismounted = false
+
 	return class extends HTMLElement {
 
 		constructor() {
@@ -17,6 +19,10 @@ export const Element = ({ component, templates, start }) => {
 				start( this.parentNode )
 			}
 
+			if( ismounted ) {
+				return
+			}
+
 			const rtrn = Component({
 				node:this,
 				name,
@@ -32,7 +38,7 @@ export const Element = ({ component, templates, start }) => {
 				this.dispatchEvent( new CustomEvent(':mount') )
 			}
 
-			this.base.state.set({})
+			ismounted = true
 		}
 
 		disconnectedCallback() {

package/src/template-system.ts

@@ -1,4 +1,4 @@
-import { uuid } from './utils'
+import { uuid, decodeHTML } from './utils'
 
 const templates  = {}
 
@@ -31,10 +31,10 @@ export const compile = ( html ) => {
 		with( $data ){
 			var output=${parsedHtml
 				.replace(/%%_=(.+?)_%%/g, function(_, variable){
-					return '"+safe(function(){return '+ variable +';})+"'
+					return '"+safe(function(){return '+ decodeHTML(variable) +';})+"'
 				})
 				.replace(/%%_(.+?)_%%/g, function(_, variable){
-					return '";' + variable +'\noutput+="'
+					return '";' + decodeHTML(variable) +'\noutput+="'
 				})};return output;
 		}
 	`)
@@ -101,8 +101,11 @@ const transformTemplate = ( clone ) => {
 
 			if (htmlIf) {
 				element.removeAttribute('html-if')
+				if( !element.getAttribute('id') ) {
+					element.setAttribute('id', uuid())
+				}
 				const open = document.createTextNode(`%%_ if ( safe(function(){ return ${htmlIf} }) ){ _%%`)
-				const close = document.createTextNode(`%%_ } _%%`)
+				const close = document.createTextNode(`%%_ }  _%%`)
 				wrap(open, element, close)
 			}
 

package/src/utils/index.ts

@@ -1,8 +1,15 @@
 
+const textarea = document.createElement('textarea')
+
 export const g = {
 	scope: {}
 }
 
+export const decodeHTML = (text) => {
+	textarea.innerHTML = text
+	return textarea.value
+}
+
 export const rAF = (fn) => {
 	if (requestAnimationFrame)
 		return requestAnimationFrame(fn)