jails-js 5.9.0 → 6.0.0

package/src/component.ts

@@ -1,151 +1,176 @@
-import { type Component } from '..'
+import { safe, g, dup } from './utils'
 import { Idiomorph } from 'idiomorph/dist/idiomorph.esm'
-import { rAF, dup, safe } from './utils'
-import { buildtemplates } from './template-system'
-import { on, off, trigger } from './utils/events'
 import { publish, subscribe } from './utils/pubsub'
 
-export default function Component( elm, { module, dependencies, templates, components }) {
-
-	const options = getOptions( module )
-	const initialState = (new Function( `return ${elm.getAttribute('html-model') || '{}'}`))()
-	const selector = Object.keys(components).toString()
-
-	buildtemplates( elm, selector, templates, components )
-
-	const tplid = elm.getAttribute('tplid')
-	const template = tplid ? templates[tplid] : null
-	const state = { data: module.model ? dup(module.model) : {} }
-	state.data = Object.assign( state.data, initialState)
-
-	const base: Component = {
-		template,
-		elm,
+export const Component = ({ name, module, dependencies, node, templates, signal, register }) => {
+
+	let tick
+	let preserve		= []
+
+	const _model 		= module.model || {}
+	const initialState 	= (new Function( `return ${node.getAttribute('html-model') || '{}'}`))()
+	const tplid 		= node.getAttribute('tplid')
+	const scopeid 		= node.getAttribute('html-scopeid')
+	const tpl 			= templates[ tplid ]
+	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
+
+	const base = {
+		name,
+		model,
+		elm: node,
+		template: tpl.template,
 		dependencies,
 		publish,
 		subscribe,
 
 		main(fn) {
-			options.main = fn
-		},
-
-		unmount(fn) {
-			options.unmount = fn
-		},
-
-		onupdate(fn) {
-			options.onupdate = fn
-		},
-
-		on(eventName, selectorOrCallback, callback) {
-			on(elm, eventName, selectorOrCallback, callback)
+			node.addEventListener(':mount', fn)
 		},
 
-		off(eventName, callback) {
-			off(elm, eventName, callback)
-		},
+		/**
+		 * @State
+		 */
+		state : {
 
-		trigger(eventName, target, args) {
-			if (target.constructor === String) {
-				Array
-					.from(elm.querySelectorAll(target))
-					.forEach( children => trigger(children, eventName, { args: args }) )
-			}
-			else trigger(elm, eventName, { args: target })
-		},
+			protected( list ) {
+				if( list ) {
+					preserve = list
+				} else {
+					return preserve
+				}
+			},
 
-		emit: ( ...args ) => {
-			trigger(elm, args.shift(), { args: args })
-		},
+			save(data) {
+				if( data.constructor === Function ) {
+					data( state )
+				} else {
+					Object.assign(state, data)
+				}
+			},
 
-		state: {
 			set( data ) {
-				if (data.constructor === Function) {
-					const newstate = dup(state.data)
-					data(newstate)
-					base.render(newstate)
+
+				if (!document.body.contains(node)) {
+					return
+				}
+				if( data.constructor === Function ) {
+					data(state)
 				} else {
-					base.render(data)
+					Object.assign(state, data)
 				}
-				return new Promise((resolve) => rAF(_ => rAF(() => resolve(state.data))))
-			},
-			get() {
-				return dup(state.data)
+
+				const newstate = Object.assign({}, state, scope)
+				render(newstate)
+
+				return Promise.resolve(newstate)
 			},
 
-			getRaw(){
-				return state.data
+			get() {
+				return Object.assign({}, state)
 			}
 		},
-
-		render(data = state.data) {
-
-			if (!document.body.contains(elm)) {
-				return
+		/**
+		 * @Events
+		 */
+		on( ev, selectorOrCallback, callback ) {
+
+			if( callback ) {
+				callback.handler = (e) => {
+					const detail = e.detail || {}
+					let parent = e.target
+					while (parent) {
+						if (parent.matches(selectorOrCallback)) {
+							e.delegateTarget = parent
+							callback.apply(node, [e].concat(detail.args))
+						}
+						if (parent === node) break
+						parent = parent.parentNode
+					}
+				}
+				node.addEventListener(ev, callback.handler, {
+					signal,
+					capture: (ev == 'focus' || ev == 'blur' || ev == 'mouseenter' || ev == 'mouseleave')
+				})
+
+			} else {
+				selectorOrCallback.handler = (e) => {
+					e.delegateTarget = node
+					selectorOrCallback.apply(node, [e].concat(e.detail.args))
+				}
+				node.addEventListener(ev, selectorOrCallback.handler, { signal })
 			}
 
-			state.data = Object.assign(state.data, data)
-
-			const newdata = dup(state.data)
-			const newhtml = templates[tplid].call(Object.assign(options.view(newdata), elm.___scope___), elm, safe)
+		},
 
-			Idiomorph.morph(elm, newhtml, IdiomorphOptions(elm))
-			updateScope( elm )
+		off( ev, callback ) {
+			if( callback.handler ) {
+				node.removeEventListener(ev, callback.handler)
+			}
+		},
 
-			rAF(_ => {
+		trigger(ev, selectorOrCallback, data) {
+			if( selectorOrCallback.constructor === String ) {
 				Array
-					.from(elm.querySelectorAll('[tplid]'))
-					.forEach((child: any) => {
-						const props = Object.assign( child.base.state.getRaw(), data )
-						child.options.onupdate(props)
-						child.base.render(props)
+					.from(node.querySelectorAll(selectorOrCallback))
+					.forEach( children => {
+						children.dispatchEvent(new CustomEvent(ev, { bubbles: true, detail: { args: data } }) )
 					})
-			})
+			} else {
+				node.dispatchEvent(new CustomEvent(ev, { bubbles: true, detail:{ args: data } }))
+			}
 		},
 
-		innerHTML( target, html_ ) {
+		emit(ev, data) {
+			node.dispatchEvent(new CustomEvent(ev, { bubbles: true, detail: { args: data } }))
+		},
+
+		unmount( fn ) {
+			node.addEventListener(':unmount', fn)
+		},
 
-			const element = html_? target : elm
+		innerHTML ( target, html_ ) {
+			const element = html_? target : node
 			const clone = element.cloneNode()
 			const html = html_? html_ : target
 			clone.innerHTML = html
-
-			rAF( _ => Idiomorph.morph(element, clone, IdiomorphOptions) )
+			Idiomorph.morph(element, clone)
 		}
 	}
 
-	return { base, options }
-}
-
-const getOptions = (module) => ({
-	main: (a) => a,
-	unmount: (a) => a,
-	onupdate: (a) => a,
-	view: module.view ? module.view : (a) => a
-})
-
-const updateScope = (node) => {
-	node.querySelectorAll('[scope]').forEach( scopeElement => {
-		scopeElement.querySelectorAll('[tplid]').forEach( cp => {
-			if( !cp.___scope___ ) {
-				const script = scopeElement.lastElementChild
-				cp.___scope___ = 'scope' in script.dataset? (new Function(`return ${script.text}`))() : {}
-			}
+	const render = ( data ) => {
+		clearTimeout( tick )
+		tick = setTimeout(() => {
+			const html = tpl.render.call( view(data), node, safe, g )
+			Idiomorph.morph( node, html, IdiomorphOptions(node, register) )
+			Promise.resolve().then(() => {
+				node.querySelectorAll('[tplid]')
+					.forEach((element) => {
+						const child = register.get(element)
+						if(!child) return
+						child.state.protected().forEach( key => delete data[key] )
+						child.state.set(data)
+					})
+				Promise.resolve().then(() => g.scope = {})
+			})
 		})
-	})
-}
-
+	}
 
-const IdiomorphOptions = (parent) => ({
+	render( state )
+	register.set( node, base )
+	return module.default( base )
+}
 
+const IdiomorphOptions = ( parent, register ) => ({
 	callbacks: {
-
 		beforeNodeMorphed( node ) {
 			if( node.nodeType === 1 ) {
 				if( 'html-static' in node.attributes ) {
 					return false
 				}
-				if( node.base && node !== parent ) {
+				if( register.get(node) && node !== parent ) {
 					return false
 				}
 			}

package/src/element.ts

@@ -1,14 +1,12 @@
-import Component from './component'
-import { purge, rAF } from './utils'
+import { Component } from './component'
 
-export default function Element(module, dependencies, templates, components) {
+const register = new WeakMap()
 
-	return class extends HTMLElement {
+export const Element = ({ component, templates, start }) => {
+
+	const { name, module, dependencies } = component
 
-		base: any
-		options: any
-		returns : any
-		__events: any
+	return class extends HTMLElement {
 
 		constructor() {
 			super()
@@ -16,59 +14,34 @@ export default function Element(module, dependencies, templates, components) {
 
 		connectedCallback() {
 
-			const { base, options } = Component(this, { module, dependencies, templates, components })
+			this.abortController = new AbortController()
 
-			this.base = base
-			this.options = options
-			this.base.render()
-			this.returns = module.default(base)
-
-			if( this.__template && this.__template.constructor === Promise ) {
-				this.__template.then( _ => {
-					if( this.base && this.options.main) {
-						const array = this.options.main(this.base)
-						if( array && array.length ){
-							array.forEach(f => f(this.base))
-						}
-					}
-				})
-				return
+			if( !this.getAttribute('tplid') ) {
+				start( this.parentNode )
 			}
 
-			if( this.returns && this.returns.constructor === Promise ) {
-				this.returns.then( _ => {
-					if( this.base && this.options.main) {
-						const array = this.options.main(this.base)
-						if( array && array.length ){
-							array.forEach(f => f(this.base))
-						}
-					}
-				})
+			const rtrn = Component({
+				node:this,
+				name,
+				module,
+				dependencies,
+				templates,
+				signal: this.abortController.signal,
+				register
+			})
 
+			if ( rtrn && rtrn.constructor === Promise ) {
+				rtrn.then(() => {
+					this.dispatchEvent( new CustomEvent(':mount') )
+				})
 			} else {
-				if( this.base && this.options.main ){
-					const array = this.options.main(this.base)
-					if( array && array.length ) {
-						array.forEach(f => f(this.base))
-					}
-				}
+				this.dispatchEvent( new CustomEvent(':mount') )
 			}
 		}
 
 		disconnectedCallback() {
-			this.options.unmount(this.base)
-			rAF(() => {
-				if(!document.body.contains(this) ) {
-					this.__events? this.__events = null : null
-					this.base? this.base.elm = null : null
-					this.base? this.base = null : null
-					purge(this)
-				}
-			})
-		}
-
-		attributeChangedCallback() {
-			//TODO
+			this.dispatchEvent( new CustomEvent(':unmount') )
+			this.abortController.abort()
 		}
 	}
 }

package/src/index.ts

@@ -1,42 +1,28 @@
-import { templateConfig, buildtemplates } from './template-system'
-import { publish, subscribe } from './utils/pubsub'
-import { html, attributes } from '../html'
-import Element from './element'
 
-const templates = {}
-const components = {}
+import { Element } from './element'
+import { template, templateConfig as config } from './template-system'
 
-export { html, attributes }
+const components = {}
 
-export default {
+export { publish, subscribe } from './utils/pubsub'
 
-	templateConfig,
+export const templateConfig = (options) => {
+	config( options )
+}
 
-	publish,
-	subscribe,
+export const register = ( name, module, dependencies ) => {
+	components[ name ] = { name, module, dependencies }
+}
 
-	register( name, module, dependencies = {} ) {
-		components[name] = { name, module, dependencies }
-	},
+export const start = ( target = document.body ) => {
 
-	start( target = document.body ) {
-		const keys = Object.keys(components)
-		const selector = keys.toString()
-		if( keys.length ) {
-			buildtemplates( target, selector, templates, components )
-			registerComponents()
-		}
-	}
-}
+	const templates = template( target, { components } )
 
-const registerComponents = () => {
 	Object
 		.values( components )
-		.forEach( (component) => {
-			const { name, module, dependencies } = component as any
-			if( !customElements.get(name) ){
-				const Base = Element(module, dependencies, templates, components)
-				customElements.define(name, Base)
+		.forEach(({ name, module, dependencies }) => {
+			if( !customElements.get(name) ) {
+				customElements.define( name, Element({ component: { name, module, dependencies }, templates, start }))
 			}
-		})
+	})
 }

package/src/template-system.ts

@@ -1,26 +1,37 @@
-import Transpile from './transpile'
 import { uuid, decodeHTML } from './utils'
 
+const templates  = {}
+
 const config = {
 	tags: ['{{', '}}']
 }
 
 export const templateConfig = (newconfig) => {
-	Object.assign(config, newconfig)
+	Object.assign( config, newconfig )
 }
 
-export default function Template(element) {
+export const template = ( target, { components }) => {
+
+	tagElements( target, [...Object.keys( components ), '[html-if]', 'template'] )
+	const clone = target.cloneNode( true )
 
-	fixDIffIf(element)
-	const html = Transpile(element.outerHTML, config)
-	const decodedHTML  = JSON.stringify(html)
+	transformTemplate( clone )
+	removeTemplateTagsRecursively( clone )
+	setTemplates( clone, components )
+
+	return templates
+}
 
-	return new Function('$element', 'safe',`
+export const compile = ( html ) => {
+
+	const parsedHtml = JSON.stringify( html )
+
+	return new Function('$element', 'safe', '$g',`
 		var $data = this;
 		with( $data ){
-			var output=${decodedHTML
+			var output=${parsedHtml
 				.replace(/%%_=(.+?)_%%/g, function(_, variable){
-					return '"+safe(function(){return '+decodeHTML(variable)+';})+"'
+					return '"+safe(function(){return '+ decodeHTML(variable) +';})+"'
 				})
 				.replace(/%%_(.+?)_%%/g, function(_, variable){
 					return '";' + decodeHTML(variable) +'\noutput+="'
@@ -29,48 +40,146 @@ export default function Template(element) {
 	`)
 }
 
-export const buildtemplates = ( target, selector, templates, components ) => {
-	[]
-		.concat( target.matches? (target.matches(selector)? target : []) : [] )
-		.concat( Array.from(target.querySelectorAll( selector )) )
+const tagElements = ( target, keys ) => {
+	target
+		.querySelectorAll( keys.toString() )
+		.forEach((node) => {
+			if( node.localName === 'template' ) {
+				return tagElements( node.content, keys )
+			}
+			node.setAttribute('tplid', uuid())
+			if( node.getAttribute('html-if') && !node.id ) {
+				node.id = uuid()
+			}
+		})
+}
+
+const transformAttributes = ( html ) => {
+
+	const regexTags = new RegExp(`\\${config.tags[0]}(.+?)\\${config.tags[1]}`, 'g')
+
+	return html
+		.replace(/jails___scope-id/g, '%%_=$scopeid_%%')
+		.replace(regexTags, '%%_=$1_%%')
+		// Booleans
+		// https://meiert.com/en/blog/boolean-attributes-of-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 === 'scopeid' ) {
+				return all
+			}
+			if (value) {
+				value = value.replace(/^{|}$/g, '')
+				return `${key}="%%_=safe(function(){ return ${value} })_%%"`
+			} else {
+				return all
+			}
+		})
+}
+
+const transformTemplate = ( clone ) => {
+
+	clone.querySelectorAll('template, [html-for], [html-if], [html-inner], [html-class]')
+		.forEach(( element ) => {
+
+			const htmlFor 	= element.getAttribute('html-for')
+			const htmlIf 	= element.getAttribute('html-if')
+			const htmlInner = element.getAttribute('html-inner')
+			const htmlClass = element.getAttribute('html-class')
+
+			if ( htmlFor ) {
+
+				element.removeAttribute('html-for')
+
+				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)
+			}
+
+			if (htmlIf) {
+				element.removeAttribute('html-if')
+				const open = document.createTextNode(`%%_ if ( safe(function(){ return ${htmlIf} }) ){ _%%`)
+				const close = document.createTextNode(`%%_ }  _%%`)
+				wrap(open, element, close)
+			}
+
+			if (htmlInner) {
+				element.removeAttribute('html-inner')
+				element.innerHTML = `%%_=${htmlInner}_%%`
+			}
+
+			if (htmlClass) {
+				element.removeAttribute('html-class')
+				element.className = (element.className + ` %%_=${htmlClass}_%%`).trim()
+			}
+
+			if( element.localName === 'template' ) {
+				transformTemplate(element.content)
+			}
+		})
+}
+
+const setTemplates = ( clone, components ) => {
+
+	Array.from(clone.querySelectorAll('[tplid]'))
 		.reverse()
-		.forEach( (node:HTMLElement) => {
-			node.querySelectorAll('template').forEach( template => buildtemplates(template.content, selector, templates, components ))
-			createTemplateId(node, templates, components)
+		.forEach((node) => {
+
+			const tplid = node.getAttribute('tplid')
+			const name  = node.localName
+			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 })
+				node.innerHTML = html
+			}
+
+			const html = transformAttributes(node.outerHTML)
+
+			templates[ tplid ] = {
+				template: html,
+				render	: compile(html)
+			}
 		})
 }
 
-const createTemplateId = (element, templates, components ) => {
+const removeTemplateTagsRecursively = (node) => {
 
-	const tplid = element.getAttribute('tplid')
+	// Get all <template> elements within the node
+	const templates = node.querySelectorAll('template')
 
-	if (!tplid) {
-		const id = uuid()
-		element.setAttribute('tplid', id)
-		const name = element.localName
+	templates.forEach((template) => {
 
-		if( name in components && components[name].module.template ) {
-			const children = element.innerHTML
-			const html = components[name].module.template({ children })
-			if( html.constructor === Promise ) {
-				element.__template = html
-				html.then( htmlstring => {
-					element.innerHTML = htmlstring
-					templates[id] = Template(element)
-				})
-			}else {
-				element.innerHTML = html
+		if( template.getAttribute('html-if') || template.getAttribute('html-inner') ) {
+			return
+		}
+
+		// Process any nested <template> tags within this <template> first
+		removeTemplateTagsRecursively(template.content)
+
+		// Get the parent of the <template> tag
+		const parent = template.parentNode
+
+		if (parent) {
+			// Move all child nodes from the <template>'s content to its parent
+			const content = template.content
+			while (content.firstChild) {
+				parent.insertBefore(content.firstChild, template)
 			}
+			// Remove the <template> tag itself
+			parent.removeChild(template)
 		}
-		templates[id] = Template(element)
-	}
+	})
 }
 
-// Sometimes we don't know why something works, especially when using third party code like Idiomorph.
-// So just letting anyone knows that this part has to be improved some time.
-const fixDIffIf = (node) => {
-	const _if = node.querySelectorAll('[html-if]')
-	_if.forEach( el => {
-		el.parentNode.insertBefore(document.createComment(''), el.nextSibling)
-	})
+const wrap = (open, node, close) => {
+	node.parentNode?.insertBefore(open, node)
+	node.parentNode?.insertBefore(close, node.nextSibling)
 }