Merge branch 'v5/refactory'

.gitignore

@@ -5,6 +5,4 @@ files to ignore
 *.swp
 *.out
 node_modules/
-main.js
-index.htm
-example.js
+*.cache

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jails-js",
-  "version": "5.0.0-beta.2",
+  "version": "5.0.0-beta.3",
   "description": "A Modern Javascript Library",
   "main": "dist/jails.js",
   "scripts": {
@@ -29,6 +29,8 @@
     "@babel/preset-env": "^7.2.3",
     "babel-loader": "^8.0.5",
     "babel-preset-env": "^1.7.0",
+    "ts-loader": "^9.2.6",
+    "typescript": "^4.5.4",
     "webpack": "^5.59.1",
     "webpack-cli": "^3.2.1"
   },

src/component.js → src/Component.ts

@@ -1,13 +1,15 @@
+import * as Pubsub from './utils/pubsub'
 import { on, off, trigger } from './utils/events'
 import { rAF } from './utils'
 
-export default function Component ({
+export const Component = ({
+
 	name,
 	element,
 	dependencies,
-	Pubsub,
 	ElementInterface
-}) {
+
+}) => {
 
 	const subscriptions = []
 

src/Element.ts

@@ -0,0 +1,117 @@
+import { stripTemplateTag, dup, rAF, createTemplate, uuid } from './utils'
+import morphdom from 'morphdom'
+import { setSodaConfig } from './soda-config'
+
+const sodajs = setSodaConfig()
+const templates = {}
+
+export const Element = ( el:HTMLElement ) => {
+
+	stripTemplateTag( el )
+
+	let updates = []
+
+	const model = Object.assign({}, JSON.parse(el.dataset.initialState || '{}'))
+	const morphdomOptions = lifecycle(el)
+	const { template, tplid } = getTemplateData(el)
+
+	const api = {
+
+		tplid,
+		el,
+		template,
+		model,
+		parent: {},
+		view : _ => _,
+		instances:{},
+		destroyers:[],
+		promises: [],
+		parentUpdate: data => null,
+
+		dispose(){
+			if( api.promises.length ){
+				Promise.all(api.promises)
+					.then(_ => api.destroyers.forEach( destroy => destroy(api) ))
+			}else {
+				api.destroyers.forEach( destroy => destroy(api) )
+			}
+		},
+
+		update( data = {}, isParentUpdate ) {
+
+			if( !document.body.contains(el) )
+				return
+
+			updates.push( data )
+
+			rAF( _ => {
+
+				if( updates.length ) {
+
+					const newdata = {}
+					updates.forEach( d => Object.assign(newdata, d ) )
+					updates = []
+
+					api.model = Object.assign( api.model, newdata )
+
+					if( isParentUpdate ) {
+						api.parentUpdate( api.model )
+					}
+
+					const newhtml = sodajs(template, api.view(dup(api.model)))
+					morphdom( el, newhtml, morphdomOptions )
+
+					Array
+						.from( el.querySelectorAll('[data-component]') )
+						.forEach( node => {
+							if( !node.__instance__ ) return
+							const { parent, ...model } = api.model
+							const initialState = node.dataset.initialState? JSON.parse(node.dataset.initialState): {}
+							const newmodel = Object.assign(initialState, { parent:model })
+							node.__instance__.update( newmodel, true )
+						})
+				}
+			})
+		}
+	}
+
+	el.__instance__ = api
+
+	return api
+}
+
+const lifecycle = ( element: HTMLElement ) => {
+	return {
+		onBeforeElUpdated: update(element),
+		onBeforeElChildrenUpdated: update(element),
+		getNodeKey(node) {
+			if( node.nodeType === 1 && node.dataset.tplid )
+				return node.dataset.key || node.dataset.tplid
+			return false
+		}
+	}
+}
+
+const update = ( element: HTMLElement ) => ( node: HTMLElement, toEl: HTMLElement ) => {
+	if ( node.isEqualNode(toEl) )
+		return false
+	if( node.nodeType == 1 ) {
+		if( 'static' in node.dataset )
+			return false
+	}
+	return true
+}
+
+const getTemplateData = ( element: HTMLElement ) => {
+	if( element.getAttribute('tplid') ) {
+		const tplid = element.getAttribute('tplid')
+		const template = templates[tplid]
+		return { tplid, template }
+	}else {
+		const tplid = uuid()
+		element.setAttribute('tplid', tplid)
+		templates[tplid] = createTemplate(element.outerHTML, templates)
+		const template = templates[tplid]
+		return { tplid, template }
+	}
+}

src/Scanner.ts

@@ -0,0 +1,26 @@
+
+export const Scanner = {
+
+	scan( node: HTMLElement, callback ) {
+		if( node.nodeType === 1 ) {
+			const list : Array<HTMLElement> = Array.from( node.querySelectorAll('[data-component]') )
+			const elements : Array<HTMLElement> = node.dataset.component? [node].concat(list) : list
+			if( elements.length ) {
+				elements.reverse().forEach( callback )
+			}
+		}
+	},
+
+	observe( target: HTMLElement, onAdd, onRemove  ) {
+		const observer = new MutationObserver(mutations => mutations.forEach( mutation => {
+			if (mutation.type === 'childList') {
+				if (mutation.addedNodes.length) {
+					Array.from( mutation.addedNodes ).forEach( node => Scanner.scan(node, onAdd) )
+				} else if (mutation.removedNodes.length) {
+					Array.from( mutation.removedNodes ).forEach( node => Scanner.scan(node, onRemove) )
+				}
+			}
+		}))
+		observer.observe(target, { childList: true, subtree: true })
+	}
+}