jails-js 4.2.2 → 5.0.0-beta.10

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
-}

package/src/element.js

@@ -1,57 +0,0 @@
-import Component 	from './component'
-import { trigger } 	from './utils/events'
-import { nextFrame } from './utils'
-
-export const create = ({ element, view, modules }) => {
-
-	element.__instances__ = {}
-	element.__model__ = {}
-
-	const names = element.dataset.component.split(/\s/)
-
-	if(!element.dataset.reactorId){
-		view.setNewElement(element)
-	}
-
-	names.forEach( name => {
-
-		if( name in modules && (!element.__instances__[name]) ){
-
-			const component = modules[name]
-
-			nextFrame(_ => {
-				if( element.__instances__ ) {
-					const base = Component({ name, element, view, component })
-
-					element.__instances__[name] = { base, methods: {} }
-
-					element.__update__ = (state) => {
-						for ( let name in element.__instances__ )
-							element.__instances__[name].base.update(state)
-					}
-
-					component.module.default(base)
-					base.__initialize(base)
-					delete base.__initialize
-				}
-			})
-		}
-	})
-
-}
-
-export const ismounted = (element) => {
-	return Boolean( element.__instances__ )
-}
-
-export const destroy = ({ element }) => {
-
-	trigger(element, ':destroy')
-
-	for (let ev in element.__events)
-		element.removeEventListener(ev, element.__events[ev].listener)
-
-	delete element.__events
-	delete element.__instances__
-	delete element.__model__
-}

package/src/index.js

@@ -1,51 +0,0 @@
-import View from './view'
-import { ismounted, create, destroy } from './element'
-
-const modules = {}
-
-export default {
-
-	register( name, module, dependencies ){
-		modules[ name ] = { name, module, dependencies }
-	},
-
-	start(){
-		const view = getView()
-		view.mode = 'production'
-		view.observe()
-	},
-
-	devStart(){
-		console.time('jails')
-		const view = getView()
-		view.mode = 'development'
-		view.observe()
-		console.timeEnd('jails')
-	}
-}
-
-const getView = () => {
-
-	const view = View({
-
-		onAdd(elements) {
-			elements
-				.filter(el => !ismounted(el))
-				.forEach(element => create({ element, view, modules }))
-		},
-
-		onRemove(removedNodes) {
-			removedNodes.forEach(removedNode => {
-				if (removedNode.nodeType === 1) {
-					const children = Array.from(removedNode.querySelectorAll('[data-component]'))
-					children
-						.concat(removedNode.dataset.component ? removedNode : [])
-						.filter(element => !document.body.contains(element))
-						.forEach(element => destroy({ element }))
-				}
-			})
-		}
-	})
-
-	return view
-}

package/src/repeat.js

@@ -1,94 +0,0 @@
-import { uuid } from './utils'
-
-export default ({ sodajs: soda, models }) => {
-
-	soda.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]
-
-				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)
-
-				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 = ''
-		}
-	})
-}
-
-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)
-}

package/src/utils/index.js

@@ -1,77 +0,0 @@
-
-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)
-		return v.toString(8)
-	})
-}
-
-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 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>')
-
-	const elements = Array.from(virtual.querySelectorAll(SELECTOR))
-	const templates = elements.reverse().reduce(setIds, {})
-
-	return {
-		templates,
-		html: virtual.innerHTML.replace(/<x-template*.>/g, '<template>').replace(/<\/x-template>/g, '</template>')
-	}
-}
-
-export const dup = (object) => {
-	return JSON.parse(JSON.stringify(object))
-}
-
-export const getParent = (el, selector) => {
-	let elem = el.parentNode
-	for ( ; elem && elem !== document; elem = elem.parentNode ) {
-		if ( elem.matches( selector ) ) return elem
-	}
-	return null
-}

package/src/view.js

@@ -1,126 +0,0 @@
-import morphdom from 'morphdom'
-import sodajs from 'sodajs'
-
-import * as animation from './animation'
-import { dup, createTemplates, setIds } from './utils'
-import repeatDirective from './repeat'
-
-const STATIC = 'static'
-const COMPONENT = '[data-component]'
-
-export default function View( callback ) {
-
-	const root = document.body
-	const { templates, html } = createTemplates(root.innerHTML, 'html')
-	const models = {}
-	const SST = {}
-
-	sodajs.prefix('v-')
-	repeatDirective({ sodajs, models })
-
-	return {
-
-		mode : 'production',
-		templates,
-		models,
-		SST,
-
-		update( element, data ){
-			if (element) {
-				const id = element.dataset.reactorId
-				const template = templates[id]
-				const newstate = Object.assign({}, element.__model__, dup(data))
-				const newhtml = sodajs(template, newstate)
-				morphdom( element, newhtml, lifecycle(element, data, SST))
-				if( element.__model__ ){
-					Object.assign( element.__model__, newstate )
-				}
-			}
-		},
-
-		observe() {
-			const observer = observe( callback )
-			root.innerHTML = sodajs(html, {})
-			return observer
-		},
-
-		setNewElement(element){
-			setIds(templates, element)
-		}
-	}
-}
-
-const observe = ( callback ) => {
-	const observer = new MutationObserver(mutations => mutations.forEach(onMutation(callback)))
-	observer.observe(document.body, { childList: true, subtree: true })
-	return observer;
-}
-
-const onMutation = (callback) => (mutation) => {
-	if (mutation.type === 'childList') {
-		if (mutation.addedNodes.length) {
-			callback.onAdd(scan())
-		} else if (mutation.removedNodes.length) {
-			callback.onRemove(mutation.removedNodes)
-		}
-	}
-}
-
-const scan = () => {
-	return Array
-		.from( document.querySelectorAll(COMPONENT) )
-		.reverse()
-}
-
-const lifecycle = (elm, data, SST) => ({
-
-	getNodeKey(node) {
-		if (node.nodeType === 1) {
-			return node.dataset.key || node.dataset.reactorId
-		}
-		return false
-	},
-
-	onBeforeElUpdated(node) {
-		return update( elm, data, SST, node )
-	},
-
-	onBeforeElChildrenUpdated(node, tonode) {
-		return update( elm, data, SST, node )
-	},
-
-	onNodeAdded(node) {
-		animation.animateNodes(node, animation.onAdd)
-	},
-
-	onBeforeNodeAdded(node) {
-		animation.animateNodes(node, animation.onBeforeAdd)
-	},
-
-	onBeforeNodeDiscarded(node) {
-		return !animation.animateNodes(node, animation.onRemove)
-	}
-})
-
-const update = (elm, data, SST, node) => {
-
-	if (node.nodeType === 1) {
-		// If element has static property, don't update
-		if ( STATIC in node.dataset )
-			return false
-
-		// If element is child and a component, don't update
-		if (node !== elm && node.dataset.component && node.__update__) {
-
-			const newdata = Object.assign(SST, data)
-			node.__update__(newdata)
-
-			Array.from(node.querySelectorAll(COMPONENT)).forEach(el => {
-				if (el.dataset.component && el.__update__)
-					el.__update__(newdata)
-			})
-
-			return false
-		}
-	}
-}

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
-	}
-}