jails-js 5.0.0-beta.1 → 5.0.0-beta.12

package/src/component.js

@@ -1,128 +0,0 @@
-import { on, off, trigger } from './utils/events'
-import { rAF } from './utils'
-
-export default function Component ({
-	name,
-	element,
-	dependencies,
-	Pubsub,
-	ElementInterface,
-	AST
-}) {
-
-	const subscriptions = []
-
-	let stateSubscriptions = []
-	let resolver
-	let promise = new Promise(resolve => resolver = resolve)
-
-	const base = {
-
-		name,
-		dependencies,
-		elm: element,
-		publish: Pubsub.publish,
-		unsubscribe: Pubsub.unsubscribe,
-
-		__initialize() {
-			resolver(base)
-		},
-
-		main(fn) {
-			promise
-				.then( _ => fn().forEach(lambda => lambda(base)))
-				.catch( err => console.error( err) )
-		},
-
-		expose(methods) {
-			ElementInterface.instances[name].methods = methods
-		},
-
-		state: {
-			set( state ) {
-				if( state.constructor === Function ){
-					const model = ElementInterface.model
-					state(model)
-					ElementInterface.update(model)
-					stateSubscriptions.forEach( fn => fn(model) )
-				} else {
-					ElementInterface.update(state)
-					stateSubscriptions.forEach( fn => fn(state) )
-				}
-				return new Promise((resolve) => rAF(resolve))
-			},
-			get() {
-				return ElementInterface.model
-			},
-			subscribe(fn){
-				stateSubscriptions.push(fn)
-			},
-			unsubscribe(fn){
-				stateSubscriptions = stateSubscriptions.filter( item => item !== fn )
-			}
-		},
-
-		destroy(callback) {
-			ElementInterface.destroyers.push(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 })
-		},
-
-		update(fn) {
-			ElementInterface.parentUpdate = fn
-		},
-
-		get(name, query) {
-
-			return function () {
-				rAF(_ => {
-					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 item = AST.find( item => item.element == el )
-							if( item ) {
-								const instance = item.instances[name]
-								if (instance && (method in instance.methods))
-									instance.methods[method].apply(null, args)
-							}
-						})
-
-					if (element.matches(query)) {
-						const item = AST.find( item => item.element == element )
-						const instance = item.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
-}

package/src/index.js

@@ -1,187 +0,0 @@
-import morphdom from 'morphdom'
-import sodajs from 'sodajs'
-
-import { uuid, stripTemplateTags, stripTemplateTag, rAF } from './utils'
-import * as Pubsub from './utils/pubsub'
-import sodaSetConfig from './soda-config'
-
-import Component from './component'
-
-sodaSetConfig( sodajs )
-
-let SST = {}
-let AST = []
-const components = {}
-
-export default {
-
-	start() {
-		Template.start()
-		Template.observe()
-	},
-
-	register( name, module, dependencies = {} ) {
-		components[name] = { name, module, dependencies }
-	}
-}
-
-const Template = {
-
-	start() {
-		stripTemplateTag( document.body )
-		Template.scan( document.body, Element )
-	},
-
-	scan( root, callback ) {
-		if( root.nodeType === 1 ) {
-			const list = Array.from( root.querySelectorAll('[data-component]') )
-			const components = root.dataset.component? [root].concat(list) : list
-			components.reverse().forEach( callback )
-		}
-	},
-
-	observe() {
-		const observer = new MutationObserver(mutations => mutations.forEach( mutation => {
-			if (mutation.type === 'childList') {
-				if (mutation.addedNodes.length) {
-					Array.from(mutation.addedNodes).forEach( node => Template.scan(node, Element) )
-				} else if (mutation.removedNodes.length) {
-					Array.from(mutation.removedNodes).forEach( node => Template.scan(node, Template.remove) )
-				}
-			}
-		}))
-		observer.observe(document.body, { childList: true, subtree: true })
-	},
-
-	remove( node ) {
-		const item = AST.find( item => item.element == node )
-		if( item ){
-			item.dispose()
-		}
-	}
-}
-
-const Element = ( element ) => {
-
-	let tplid
-	let template
-
-	if( element.getAttribute('tplid') ) {
-		tplid = element.getAttribute('tplid')
-		const item = AST.find( item => item.tplid == tplid )
-		template = item.template
-	}else {
-		tplid = uuid()
-		element.setAttribute('tplid', tplid)
-		template = createTemplate(element.outerHTML)
-	}
-
-	const ElementInterface = {
-		tplid,
-		element,
-		template,
-		instances:{},
-		destroyers:[],
-		promises: [],
-		view: data => data,
-		parentUpdate: data => null,
-		dispose(){
-			if( ElementInterface.promises.length ){
-				Promise.all(ElementInterface.promises).then(_ => {
-					this.destroyers.forEach( destroy => destroy(ElementInterface) )
-				})
-			}else {
-				this.destroyers.forEach( destroy => destroy(ElementInterface) )
-			}
-		},
-
-		model: Object.assign({}, JSON.parse(element.getAttribute('initialState'))),
-
-		update( data, isParentUpdate = false ) {
-
-			this.model = Object.assign( { global: SST }, this.model, data )
-			SST = saveGlobal(data)
-
-			if( isParentUpdate )
-				this.parentUpdate( this.model )
-
-			const dupdata = JSON.parse(JSON.stringify(this.model))
-
-			morphdom( element, sodajs( this.template, this.view(dupdata) ), {
-				onNodeDiscarded(node) {
-					Template.scan(node, Template.remove)
-					return true
-				},
-				onBeforeElUpdated(node, toEl) {
-					if (node.isEqualNode(toEl))
-						return false
-					if( node.nodeType == 1 && 'static' in node.dataset )
-						return false
-					return true
-				}
-			})
-
-			rAF(_ => {
-				const elements = Array.from(element.querySelectorAll('[data-component]'))
-				elements.forEach( node => {
-					const initialState = JSON.parse(node.getAttribute('initialState')) || {}
-					const item = AST.find( item => item.element == node )
-					const { global, parent, ...model } = this.model
-					if( item ) {
-						const newmodel = Object.assign(initialState, { parent:model, global: SST })
-						item.update( newmodel, true )
-					}
-				})
-			})
-		}
-	}
-
-	AST.push( ElementInterface )
-
-	element.dataset.component.split(/\s/).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, Pubsub, ElementInterface, AST })
-
-		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 createTemplate = ( html ) => {
-	const vhtml = stripTemplateTags( html )
-	const vroot = document.createElement('div')
-	vroot.innerHTML = vhtml
-	const components = Array.from(vroot.querySelectorAll('[data-component]'))
-	components.forEach( c => {
-		const cache = AST.find( item => item.tplid === c.getAttribute('tplid') )
-		if( cache )
-			c.outerHTML = cache.template
-	})
-	return vroot.innerHTML
-}
-
-const saveGlobal = (data) => {
-	Object.assign(SST, data)
-	delete SST.parent
-	delete SST.global
-	return SST
-}

package/src/soda-config.js

@@ -1,82 +0,0 @@
-export default function sodaSetConfig (sodajs) {
-
-	sodajs.prefix('v-')
-
-	sodajs.directive('repeat', {
-
-		priority: 10,
-
-		link({ scope, el, expression, getValue, compileNode }) {
-
-			let itemName
-			let valueName
-			let trackName
-
-			const trackReg = /\s+by\s+([^\s]+)$/
-			const inReg = /([^\s]+)\s+in\s+([^\s]+)|\(([^,]+)\s*,\s*([^)]+)\)\s+in\s+([^\s]+)/
-
-			const opt = expression.replace(trackReg, (item, $1) => {
-				if ($1)
-					trackName = ($1 || '').trim()
-				return ''
-			})
-
-			const r = inReg.exec(opt)
-
-			if (r) {
-				if (r[1] && r[2]) {
-					itemName = (r[1] || '').trim()
-					valueName = (r[2] || '').trim()
-
-					if (!(itemName && valueName)) {
-						return
-					}
-				} else if (r[3] && r[4] && r[5]) {
-					trackName = (r[3] || '').trim()
-					itemName = (r[4] || '').trim()
-					valueName = (r[5] || '').trim()
-				}
-			} else {
-				return
-			}
-
-			trackName = trackName || '$index'
-
-			const repeatObj = getValue(scope, valueName) || []
-
-			const repeatFunc = (i) => {
-
-				const itemNode = el.cloneNode(true)
-				const itemScope = Object.create(scope)
-
-				itemScope[trackName] = i
-				itemScope[itemName] = repeatObj[i]
-
-				itemNode.removeAttribute(`${this._prefix}repeat`)
-				el.parentNode.insertBefore(itemNode, el)
-
-				Array.from(itemNode.querySelectorAll('[data-component]'))
-					.forEach(node => node.setAttribute('initialState', JSON.stringify(itemScope)))
-
-				compileNode(itemNode, itemScope)
-			}
-
-			if ('length' in repeatObj) {
-				for (var i = 0; i < repeatObj.length; i++) {
-					repeatFunc(i)
-				}
-			} else {
-				for (var i in repeatObj) {
-					if (repeatObj.hasOwnProperty(i)) {
-						repeatFunc(i)
-					}
-				}
-			}
-
-			el.parentNode.removeChild(el)
-
-			if (el.childNodes && el.childNodes.length)
-				el.innerHTML = ''
-		}
-	})
-}

package/src/utils/index.js

@@ -1,27 +0,0 @@
-
-export const rAF = (fn) => {
-	(requestAnimationFrame || setTimeout)(fn, 1000 / 60)
-}
-
-export const nextFrame = (fn) => {
-	rAF(() => rAF(fn))
-}
-
-export const uuid = () => {
-	return 'xxxxxxxx'.replace(/[xy]/g, (c) => {
-		const r = Math.random() * 8 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8)
-		return v.toString(8)
-	})
-}
-
-export const stripTemplateTags = ( html ) => {
-	return html.replace(/<template.*?>|<\/template>/g, '')
-}
-
-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 )
-	})
-}

package/webpack.config.babel.js

@@ -1,16 +0,0 @@
-const path = require('path')
-
-module.exports = {
-
-	entry: {
-		'jails': './src/index.js'
-	},
-
-	output: {
-		path		  : path.resolve(__dirname, './dist'),
-		filename	  : '[name].js',
-		libraryTarget : 'umd',
-		library		  : 'jails',
-		umdNamedDefine: true
-	}
-}