jails-js 5.9.0 → 6.0.1-beta.1

package/src/component.ts

@@ -1,110 +1,136 @@
-import { type Component } from '..'
+import { safe, rAF, g } 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 }) => {
+	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 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 view 			= module.view? module.view : (data) => data
+
+	let updates 		= []
+
+	const base = {
+		name,
+		model,
+		elm: node,
+		template: tpl.template,
 		dependencies,
 		publish,
 		subscribe,
 
 		main(fn) {
-			options.main = fn
-		},
-
-		unmount(fn) {
-			options.unmount = fn
+			node.addEventListener(':mount', fn)
 		},
 
-		onupdate(fn) {
-			options.onupdate = fn
-		},
-
-		on(eventName, selectorOrCallback, callback) {
-			on(elm, eventName, selectorOrCallback, callback)
-		},
+		/**
+		 * @State
+		 */
+		state : {
 
-		off(eventName, callback) {
-			off(elm, eventName, callback)
-		},
+			save(data) {
+				if( data.constructor === Function ) {
+					data( state )
+				} else {
+					Object.assign(state, data)
+				}
+			},
 
-		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 })
-		},
+			set( data ) {
 
-		emit: ( ...args ) => {
-			trigger(elm, args.shift(), { args: args })
-		},
+				if (!document.body.contains(node)) {
+					return
+				}
 
-		state: {
-			set( data ) {
-				if (data.constructor === Function) {
-					const newstate = dup(state.data)
-					data(newstate)
-					base.render(newstate)
-				} else {
-					base.render(data)
+				if( data.constructor === Function ) {
+					data( state )
 				}
-				return new Promise((resolve) => rAF(_ => rAF(() => resolve(state.data))))
-			},
-			get() {
-				return dup(state.data)
+				const newstate = Object.assign({}, state)
+				render( newstate )
+
+				updates.push(data)
+
+				return new Promise((resolve) => {
+					rAF(() => rAF(() => {
+						Object.assign.apply(null, [state, ...updates ])
+						if( updates.length ){
+							const newstate = Object.assign({}, state)
+							render(newstate)
+							resolve(newstate)
+							updates = []
+						}
+					}))
+				})
 			},
 
-			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)
+		},
 
+		innerHTML ( target, html_ ) {
 			const element = html_? target : elm
 			const clone = element.cloneNode()
 			const html = html_? html_ : target
@@ -114,32 +140,34 @@ export default function Component( elm, { module, dependencies, templates, compo
 		}
 	}
 
-	return { base, options }
-}
+	const render = ( data ) => {
 
-const getOptions = (module) => ({
-	main: (a) => a,
-	unmount: (a) => a,
-	onupdate: (a) => a,
-	view: module.view ? module.view : (a) => a
-})
+		const html = tpl.render.call( view(data), node, safe, g )
+		Idiomorph.morph( node, html, IdiomorphOptions(node) )
 
-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}`))() : {}
+		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 )
 			}
 		})
-	})
-}
-
+		rAF(() => g.scope = {})
+	}
 
-const IdiomorphOptions = (parent) => ({
+	node.base = base
+	module.default( base )
+}
 
+const IdiomorphOptions = ( parent ) => ({
 	callbacks: {
-
 		beforeNodeMorphed( node ) {
 			if( node.nodeType === 1 ) {
 				if( 'html-static' in node.attributes ) {

package/src/element.ts

@@ -1,14 +1,11 @@
-import Component from './component'
-import { purge, rAF } from './utils'
+import { Component } from './component'
 
-export default function Element(module, dependencies, templates, components) {
+export const Element = ({ component, templates, start }) => {
 
-	return class extends HTMLElement {
+	const { name, module, dependencies } = component
+	const abortController = new AbortController()
 
-		base: any
-		options: any
-		returns : any
-		__events: any
+	return class extends HTMLElement {
 
 		constructor() {
 			super()
@@ -16,59 +13,28 @@ export default function Element(module, dependencies, templates, components) {
 
 		connectedCallback() {
 
-			const { base, options } = Component(this, { module, dependencies, templates, components })
-
-			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))
-						}
-					}
-				})
+			Component({
+				node:this,
+				name,
+				module,
+				dependencies,
+				templates,
+				signal: abortController.signal
+			})
+
+			this.dispatchEvent( new CustomEvent(':mount') )
+			this.base.state.set({})
 
-			} else {
-				if( this.base && this.options.main ){
-					const array = this.options.main(this.base)
-					if( array && array.length ) {
-						array.forEach(f => f(this.base))
-					}
-				}
-			}
 		}
 
 		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') )
+			abortController.abort()
+			delete this.base
 		}
 	}
 }

package/src/index.ts

@@ -1,42 +1,27 @@
-import { templateConfig, buildtemplates } from './template-system'
-import { publish, subscribe } from './utils/pubsub'
-import { html, attributes } from '../html'
-import Element from './element'
+import { Element } from './element'
+import { template, templateConfig as config } from './template-system'
 
-const templates = {}
 const components = {}
 
-export { html, attributes }
+export { publish, subscribe } from './utils/pubsub'
 
-export default {
-
-	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,76 +1,194 @@
-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 ), '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 = ( outerHTML ) => {
+
+	const html = transformAttributes( outerHTML )
+	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 '+ variable +';})+"'
 				})
 				.replace(/%%_(.+?)_%%/g, function(_, variable){
-					return '";' + decodeHTML(variable) +'\noutput+="'
+					return '";' + variable +'\noutput+="'
 				})};return output;
 		}
 	`)
 }
 
-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())
+		})
+}
+
+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 === 'scope-id' ) {
+				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 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++; } })() _%%`)
+
+				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-scope-id', '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
+				}
+			}
+
+			const html = 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)
 }