jails-js 4.2.2 → 5.0.0-beta.3

package/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 }
+	}
+}

package/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 })
+	}
+}

package/src/index.ts

@@ -0,0 +1,60 @@
+import { Element } from './Element'
+import { Scanner } from './Scanner'
+import { Component } from './Component'
+import { stripTemplateTag } from './utils'
+
+const components = {}
+
+export default {
+
+	start() {
+
+		const body: HTMLElement = document.body
+
+		stripTemplateTag( body )
+
+		Scanner.scan( body, createElement )
+		Scanner.observe( body, createElement, disposeElement )
+	},
+
+	register( name, module, dependencies = {} ) {
+		components[name] = { name, module, dependencies }
+	}
+}
+
+const createElement = ( element: HTMLElement ) => {
+
+	const ElementInterface = Element( element )
+	const names = element.dataset.component.split(/\s/)
+
+	names.forEach( name => {
+
+		const C = components[name]
+
+		if( !C ) {
+			console.warn(`Jails - Module ${name} not registered`)
+			return
+		}
+
+		const { module, dependencies } = C
+		ElementInterface.model = Object.assign({}, module.model, ElementInterface.model )
+
+		const base = Component({ name, element, dependencies, ElementInterface })
+		const promise = module.default(base)
+
+		if( promise && promise.then ) {
+			ElementInterface.promises.push(promise)
+		}
+
+		base.__initialize()
+		ElementInterface.view = module.view || ElementInterface.view
+		ElementInterface.instances[name] = { methods: {} }
+	})
+
+	ElementInterface.update()
+}
+
+const disposeElement = ( node ) => {
+	if( node.__instance__)
+		node.__instance__.dispose()
+}

package/src/{repeat.js → soda-config.js}

@@ -1,8 +1,10 @@
-import { uuid } from './utils'
+import sodajs from 'sodajs'
 
-export default ({ sodajs: soda, models }) => {
+export const setSodaConfig = () => {
 
-	soda.directive('repeat', {
+	sodajs.prefix('v-')
+
+	sodajs.directive('repeat', {
 
 		priority: 10,
 
@@ -52,17 +54,13 @@ export default ({ sodajs: soda, models }) => {
 				itemScope[trackName] = i
 				itemScope[itemName] = repeatObj[i]
 
-				const components = findComponents(itemNode)
-
-				components.forEach(node => {
-					const ID = uuid()
-					node.setAttribute('data-model-id', ID)
-					models[ID] = itemScope
-				})
-
 				itemNode.removeAttribute(`${this._prefix}repeat`)
+
 				el.parentNode.insertBefore(itemNode, el)
 
+				Array.from(itemNode.querySelectorAll('[data-component]'))
+					.forEach( node => node.setAttribute('data-initial-state', JSON.stringify(itemScope)) )
+
 				compileNode(itemNode, itemScope)
 			}
 
@@ -84,11 +82,6 @@ export default ({ sodajs: soda, models }) => {
 				el.innerHTML = ''
 		}
 	})
-}
 
-function findComponents(el) {
-	const isComponent = el.getAttribute('data-component')
-	const component = isComponent ? [el] : []
-	const childComponents = Array.prototype.slice.call(el.querySelectorAll('[data-component]'))
-	return component.concat(childComponents)
+	return sodajs
 }

package/src/utils/index.js

@@ -3,38 +3,6 @@ export const rAF = (fn) => {
 	(requestAnimationFrame || setTimeout)(fn, 1000 / 60)
 }
 
-export const nextFrame = (fn) => {
-	rAF(() => rAF(fn))
-}
-
-export const addClass = (element) => (string) => {
-	string.split(/\s/).map(item => element.classList.add(item))
-}
-
-export const removeClass = (element) => (string) => {
-	string.split(/\s/).map(item => element.classList.remove(item))
-}
-
-export const getPrefix = (object) => {
-	for (let key in object)
-		if (key in document.body.style)
-			return object[key]
-}
-
-export const animationEnd = getPrefix({
-	animation: 'animationend',
-	OAnimation: 'oAnimationEnd',
-	MozAnimation: 'animationend',
-	WebkitAnimation: 'webkitAnimationEnd'
-})
-
-export const transitionEnd = getPrefix({
-	transition: 'transitionend',
-	OTransition: 'oTransitionEnd',
-	MozTransition: 'transitionend',
-	WebkitTransition: 'webkitTransitionEnd'
-})
-
 export const uuid = () => {
 	return 'xxxxxxxx'.replace(/[xy]/g, (c) => {
 		const r = Math.random() * 8 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8)
@@ -42,36 +10,32 @@ export const uuid = () => {
 	})
 }
 
-export const setIds = (acc, element) => {
-	const id = uuid()
-	element.setAttribute('data-reactor-id', id)
-	acc[id] = element.outerHTML.replace(/<(x-)?template*.>|<\/(x-)?template>/g, '')
-	return acc
+export const stripTemplateTag = ( element ) => {
+	const templates = Array.from(element.querySelectorAll('template'))
+	// https://gist.github.com/harmenjanssen/07e425248779c65bc5d11b02fb913274
+	templates.forEach( template => {
+		template.parentNode.replaceChild(template.content, template )
+	})
 }
 
-export const createTemplates = ( html, type = 'div' ) => {
-
-	const SELECTOR = '[data-component]:not([data-reactor-id])'
-	const virtual = document.createElement(type)
-	virtual.innerHTML = html.replace(/<template*.>/g, '<x-template>').replace(/<\/template>/g, '</x-template>')
+export const dup = (o) => {
+	return JSON.parse( JSON.stringify(o) )
+}
 
-	const elements = Array.from(virtual.querySelectorAll(SELECTOR))
-	const templates = elements.reverse().reduce(setIds, {})
+export const createTemplate = ( html, templates ) => {
 
-	return {
-		templates,
-		html: virtual.innerHTML.replace(/<x-template*.>/g, '<template>').replace(/<\/x-template>/g, '</template>')
-	}
-}
+	const vroot = document.createElement('div')
+	vroot.innerHTML = html
+	stripTemplateTag( vroot )
 
-export const dup = (object) => {
-	return JSON.parse(JSON.stringify(object))
-}
+	Array
+		.from(vroot.querySelectorAll('[data-component]'))
+		.forEach( c => {
+			const tplid = c.getAttribute('tplid')
+			const cache = templates[tplid]
+			if( cache )
+				c.outerHTML = cache
+		})
 
-export const getParent = (el, selector) => {
-	let elem = el.parentNode
-	for ( ; elem && elem !== document; elem = elem.parentNode ) {
-		if ( elem.matches( selector ) ) return elem
-	}
-	return null
+	return vroot.innerHTML
 }

package/tsconfig.json

@@ -0,0 +1,6 @@
+{
+	"compilerOptions": {
+		"lib": [ "dom" ],
+		"sourceMap": true
+	}
+}

package/webpack.config.js

@@ -0,0 +1,35 @@
+const path = require('path')
+
+module.exports = {
+
+	devtool: 'source-map',
+
+	resolve: {
+		extensions: ['.ts', '.js', '.json']
+	},
+
+	entry: {
+		jails: './src/index.ts'
+	},
+
+	module: {
+        rules: [
+            {
+                test: /\.ts$/,
+                exclude: [/node_modules/],
+                loader: 'ts-loader',
+				options: {
+					transpileOnly: true
+				}
+            }
+        ]
+    },
+
+	output: {
+		path		  : path.resolve(__dirname, './dist'),
+		filename	  : '[name].js',
+		libraryTarget : 'umd',
+		library		  : 'jails',
+		umdNamedDefine: true
+	}
+}

package/.babelrc

@@ -1,16 +0,0 @@
-{
-	"comments": true,
-	"presets": [
-		[
-			"env",
-			{
-				"targets": {
-					"browsers": [
-						"ie 11"
-					]
-				},
-				"useBuiltIns": true
-			}
-		]
-	]
-}

package/.eslintignore

@@ -1,2 +0,0 @@
-node_modules/*
-build/*

package/.eslintrc

@@ -1,20 +0,0 @@
-{
-    "rules": {
-        "indent": [2,"tab", {"SwitchCase":1}],
-        "quotes": [2,"single"],
-        "semi": [2,"never"],
-        "no-unused-vars": ["warn", { "vars": "all", "args": "none" }],
-        "no-console": 0
-    },
-    "env": {
-        "es6": true,
-        "browser": true,
-        "node" : true,
-        "jquery": true,
-    },
-    "extends": "eslint:recommended",
-     "parserOptions": {
-        "sourceType": "module"
-    },
-    "globals":{}
-}

package/.eslintrc.js

@@ -1,28 +0,0 @@
-module.exports = {
-	"parser":"babel-eslint",
-	"rules": {
-		"indent": [2,"tab", {"SwitchCase":1}],
-		"quotes": [2,"single"],
-		"semi": [2,"never"],
-		"no-unused-vars": ["warn", { "vars": "all", "args": "none" }],
-		"no-console": 0
-	},
-	"env": {
-		"es6": true,
-		"browser": true,
-		"node" : true,
-		"jquery": true,
-	},
-	"extends": "eslint:recommended",
-	 "parserOptions": {
-		"sourceType": "module",
-		"ecmaVersion": 2017,
-        "ecmaFeatures": {
-            "experimentalObjectRestSpread": true
-        }
-	},
-	"globals":{
-		"APPCONFIG":true,
-		"webcomponents":true
-	}
-}

package/src/animation.js

@@ -1,94 +0,0 @@
-import {
-	addClass,
-	removeClass,
-	animationEnd,
-	transitionEnd,
-	nextFrame
-} from './utils'
-
-export const onBeforeAdd = (node, animation) => {
-
-	const enter = `${animation}-enter`
-	const enterActive = `${animation}-enter-active`
-	const addClassNames = addClass(node)
-
-	addClassNames(`${enter} ${enterActive}`)
-}
-
-export const onAdd = (node, animation) => {
-
-	const enter = `${animation}-enter`
-	const enterActive = `${animation}-enter-active`
-	const enterTo = `${animation}-enter-to`
-	const removeClassNames = removeClass(node)
-	const addClassNames = addClass(node)
-
-	const remove = () => {
-		removeClassNames(`${enter} ${enterActive} ${enterTo}`)
-		node.removeEventListener(transitionEnd, remove)
-		node.removeEventListener(animationEnd, remove)
-	}
-
-	node.addEventListener(transitionEnd, remove)
-	node.addEventListener(animationEnd, remove)
-
-	nextFrame(() => {
-		addClassNames(enterTo)
-		removeClassNames(enter)
-	})
-}
-
-export const onRemove = (node, animation) => {
-
-	const leave = `${animation}-leave`
-	const leaveActive = `${animation}-leave-active`
-	const leaveTo = `${animation}-leave-to`
-	const removeClassNames = removeClass(node)
-	const addClassNames = addClass(node)
-	const style = window.getComputedStyle(node)
-
-	let transitionsLength = style.transitionProperty.split(',').length
-
-	const remove = (e) => {
-		if (e.type == 'transitionend') {
-			if (e.target == node) {
-				transitionsLength -= 1
-				if (transitionsLength <= 1) {
-					removeClassNames(`${leaveActive} ${leaveTo}`)
-					node.removeEventListener(transitionEnd, remove)
-					node.parentNode ? node.parentNode.removeChild(node) : null
-				}
-			}
-		}
-		else {
-			removeClassNames(`${leaveActive} ${leaveTo}`)
-			node.removeEventListener(animationEnd, remove)
-			node.parentNode ? node.parentNode.removeChild(node) : null
-		}
-	}
-
-	node.addEventListener(transitionEnd, remove)
-	node.addEventListener(animationEnd, remove)
-
-	addClassNames(`${leave} ${leaveActive}`)
-
-	nextFrame(() => {
-		removeClassNames(leave)
-		addClassNames(leaveTo)
-	})
-}
-
-export const animateNodes = (node, callback) => {
-
-	const childnodes = node.nodeType == 1
-		? Array.prototype.slice.call(node.querySelectorAll('[data-animation]'))
-		: []
-
-	const list = node.dataset && node.dataset.animation
-		? [node].concat(childnodes)
-		: childnodes
-
-	list.forEach(n => callback(n, n.dataset.animation))
-
-	return list.length > 0
-}

package/src/component.js

@@ -1,143 +0,0 @@
-import { pandora, log } from 'jails.packages/pandora'
-import { on, off, trigger } from './utils/events'
-import * as Pubsub from './utils/pubsub'
-import { getParent } from './utils'
-
-export default function Component ({ name, element, view, component }) {
-
-	const module = component.module
-	const store = Store({ name, element, module, view })
-	const subscriptions = []
-	const destroyers = []
-
-	let resolver
-	let promise = new Promise(resolve => resolver = resolve)
-	let updater = () => null
-
-	const base = {
-
-		name,
-		injection: component.dependencies,
-		elm: element,
-		msg: store,
-		publish: Pubsub.publish,
-		unsubscribe: Pubsub.unsubscribe,
-
-		__initialize(base) {
-			resolver(base)
-			base.destroy( _ => {
-				subscriptions.forEach(topic => Pubsub.unsubscribe(topic))
-				destroyers.forEach(fn => element.removeEventListener(':destroy', fn))
-			})
-		},
-
-		main(fn) {
-			promise.then(() => fn().forEach(lambda => lambda(base)))
-		},
-
-		render(data) {
-			view.update(element, data)
-		},
-
-		expose(methods) {
-			element.__instances__[name].methods = methods
-		},
-
-		update(data) {
-			if( data.apply ){
-				const _parent = getParent(element, '[data-component]')
-				updater = data
-				updater( _parent.__model__ )
-			}else {
-				updater( data )
-			}
-		},
-
-		destroy(callback) {
-			destroyers.push(callback)
-			element.addEventListener(':destroy', callback)
-		},
-
-		on(name, selectorOrCallback, callback) {
-			on(element, name, selectorOrCallback, callback)
-		},
-
-		off(name, callback) {
-			off(element, name, callback)
-		},
-
-		trigger(ev, target, args) {
-			if (target.constructor === String)
-				trigger(element.querySelector(target), ev, { args: args })
-			else trigger(element, ev, { args: target })
-		},
-
-		emit(n, params) {
-			const args = Array.prototype.slice.call(arguments)
-			trigger(element, args.shift(), { args: args })
-		},
-
-		get(name, query) {
-
-			return function () {
-
-				const args = Array.prototype.slice.call(arguments),
-					method = args.shift(),
-					selector = `[data-component*=${name}]`
-
-				query = query ? selector + query : selector
-
-				Array.from(element.querySelectorAll(query))
-					.forEach(el => {
-						const instance = el.__instances__[name]
-						if (instance && (method in instance.methods))
-							instance.methods[method].apply(null, args)
-					})
-
-				if (element.matches(query)) {
-					const instance = element.__instances__[name]
-					if (instance && method in instance.methods)
-						instance.methods[method].apply(null, args)
-				}
-			}
-		},
-
-		subscribe(name, method) {
-			subscriptions.push({ name, method })
-			Pubsub.subscribe(name, method)
-		}
-	}
-
-	return base
-
-}
-
-const Store = ({ element, name, module, view:View }) => {
-
-	const view = module.view ? module.view : state => state
-	const initialState = View.models[element.dataset.modelId]
-	const model = Object.assign({}, module.model, initialState)
-	const title = name.charAt(0).toUpperCase() + name.substring(1)
-
-	const middlewares = View.mode === 'development'
-		? [log(`Component ${title}`)]
-		: []
-
-	const actions = module.actions || {}
-
-	const store = pandora({
-		model,
-		actions,
-		middlewares,
-		autostart: false,
-		callback(state) {
-			View.update(element, view(state))
-		}
-	})
-
-	if (module.model && Object.keys(module.model).length) {
-		View.update(element, view(model))
-	}
-
-	return store
-}