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

package/src/component.ts

@@ -1,4 +1,4 @@
-import { safe, rAF, g } from './utils'
+import { safe, rAF, g, dup } from './utils'
 import { Idiomorph } from 'idiomorph/dist/idiomorph.esm'
 import { publish, subscribe } from './utils/pubsub'
 
@@ -7,14 +7,13 @@ export const Component = ({ name, module, dependencies, node, templates, signal
 	const _model 		= module.model || {}
 	const initialState 	= (new Function( `return ${node.getAttribute('html-model') || '{}'}`))()
 	const tplid 		= node.getAttribute('tplid')
-	const scopeid 		= node.getAttribute('html-scope-id')
+	const scopeid 		= node.getAttribute('html-scopeid')
 	const tpl 			= templates[ tplid ]
-	const data 			= g.scope[ scopeid ]
-	const model  		= module?.model?.apply ? _model({ elm:node, initialState }) : _model
-	const state 		= Object.assign({}, data, model, initialState)
+	const scope 		= g.scope[ scopeid ]
+	const model  		= dup(module?.model?.apply ? _model({ elm:node, initialState }) : _model)
+	const state 		= Object.assign({}, scope, model, initialState)
 	const view 			= module.view? module.view : (data) => data
-
-	let updates 		= []
+	let preserve		= []
 
 	const base = {
 		name,
@@ -34,6 +33,14 @@ export const Component = ({ name, module, dependencies, node, templates, signal
 		 */
 		state : {
 
+			protected( list ) {
+				if( list ) {
+					preserve = list
+				} else {
+					return preserve
+				}
+			},
+
 			save(data) {
 				if( data.constructor === Function ) {
 					data( state )
@@ -53,20 +60,11 @@ export const Component = ({ name, module, dependencies, node, templates, signal
 					Object.assign(state, data)
 				}
 
-				const newstate = Object.assign({}, state)
+				const newstate = Object.assign({}, state, scope)
 
-				updates.push(data)
+				render(newstate)
 
-				return new Promise((resolve) => {
-					rAF(() => {
-						Object.assign.apply(null, [newstate, ...updates ])
-						if( updates.length ){
-							render(newstate)
-							resolve(newstate)
-							updates = []
-						}
-					})
-				})
+				return Promise.resolve(newstate)
 			},
 
 			get() {
@@ -148,20 +146,11 @@ export const Component = ({ name, module, dependencies, node, templates, signal
 
 		rAF(() => {
 			node.querySelectorAll('[tplid]')
-			.forEach((element) => {
-				if(!element.base) return
-				const base = element.base
-				const props = Object.keys(base.model).reduce((acc, key) => {
-					if( key in data ) {
-						if( !acc ) acc = {}
-						acc[key] = data[key]
-					}
-					return acc
-				}, null)
-				if( props ) {
-					base.state.set( props )
-				}
-			})
+				.forEach((element) => {
+					if(!element.base) return
+					element.base.state.protected().forEach( key => delete data[key] )
+					element.base.state.set(data)
+				})
 			rAF(() => g.scope = {})
 		})
 

package/src/index.ts

@@ -21,7 +21,7 @@ export const start = ( target = document.body ) => {
 		.values( components )
 		.forEach(({ name, module, dependencies }) => {
 			if( !customElements.get(name) ) {
-				customElements.define( name, Element({ component: { name, module, dependencies }, templates, start }) )
+				customElements.define( name, Element({ component: { name, module, dependencies }, templates, start }))
 			}
 	})
 }

package/src/template-system.ts

@@ -22,9 +22,8 @@ export const template = ( target, { components }) => {
 	return templates
 }
 
-export const compile = ( outerHTML ) => {
+export const compile = ( html ) => {
 
-	const html = transformAttributes( outerHTML )
 	const parsedHtml = JSON.stringify( html )
 
 	return new Function('$element', 'safe', '$g',`
@@ -64,7 +63,7 @@ const transformAttributes = ( html ) => {
 		.replace(/html-(allowfullscreen|async|autofocus|autoplay|checked|controls|default|defer|disabled|formnovalidate|inert|ismap|itemscope|loop|multiple|muted|nomodule|novalidate|open|playsinline|readonly|required|reversed|selected)=\"(.*?)\"/g, `%%_if(safe(function(){ return $2 })){_%%$1%%_}_%%`)
 		// The rest
 		.replace(/html-(.*?)=\"(.*?)\"/g, (all, key, value) => {
-			if (key === 'key' || key === 'model' || key === 'scope-id' ) {
+			if (key === 'key' || key === 'model' || key === 'scopeid' ) {
 				return all
 			}
 			if (value) {
@@ -90,11 +89,12 @@ const transformTemplate = ( clone ) => {
 
 				element.removeAttribute('html-for')
 
-				const split 	= htmlFor.match(/(.*)\sin\s(.*)/) || ''
-				const varname 	= split[1]
-				const object 	= split[2]
-				const open 		= document.createTextNode(`%%_ ;(function(){ var $index = 0; for(var $key in safe(function(){ return ${object} }) ){ var $scopeid = Math.random().toString(36).substring(2, 9); var ${varname} = ${object}[$key]; $g.scope[$scopeid] = { ${varname} :${varname}, ${object}: ${object}, $index: $index, $key: $key }; _%%`)
-				const close 	= document.createTextNode(`%%_ $index++; } })() _%%`)
+				const split 	 = htmlFor.match(/(.*)\sin\s(.*)/) || ''
+				const varname 	 = split[1]
+				const object 	 = split[2]
+				const objectname = object.split(/\./).shift()
+				const open 		 = document.createTextNode(`%%_ ;(function(){ var $index = 0; for(var $key in safe(function(){ return ${object} }) ){ var $scopeid = Math.random().toString(36).substring(2, 9); var ${varname} = ${object}[$key]; $g.scope[$scopeid] = Object.assign({}, { ${objectname}: ${objectname} }, { ${varname} :${varname}, $index: $index, $key: $key }); _%%`)
+				const close 	 = document.createTextNode(`%%_ $index++; } })() _%%`)
 
 				wrap(open, element, close)
 			}
@@ -130,27 +130,15 @@ const setTemplates = ( clone, components ) => {
 
 			const tplid = node.getAttribute('tplid')
 			const name  = node.localName
-			node.setAttribute('html-scope-id', 'jails___scope-id')
+			node.setAttribute('html-scopeid', 'jails___scope-id')
 
 			if( name in components && components[name].module.template ) {
 				const children = node.innerHTML
 				const html = components[name].module.template({ elm:node, children })
-
-				if( html.constructor === Promise ) {
-					html.then( htmlstring => {
-						node.innerHTML = htmlstring
-						const html = node.outerHTML
-						templates[tplid] = {
-							template: html,
-							render: compile(html)
-						}
-					})
-				} else {
-					node.innerHTML = html
-				}
+				node.innerHTML = html
 			}
 
-			const html = node.outerHTML
+			const html = transformAttributes(node.outerHTML)
 
 			templates[ tplid ] = {
 				template: html,