jails-js 5.0.0-beta.5 → 5.0.0-beta.8

package/package.json

@@ -1,41 +1,42 @@
 {
-  "name": "jails-js",
-  "version": "5.0.0-beta.5",
-  "description": "A Modern Javascript Library",
-  "main": "dist/jails.js",
-  "scripts": {
-    "start": "webpack --watch --mode=development",
-    "build": "webpack --mode=production",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/jails-org/Jails.git"
-  },
-  "keywords": [
-    "Jails",
-    "Javascript",
-    "Component",
-    "Micro-Library"
-  ],
-  "author": "javiani",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/jails-org/Jails/issues"
-  },
-  "homepage": "https://github.com/jails-org/Jails",
-  "devDependencies": {
-    "@babel/core": "^7.2.2",
-    "@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"
-  },
-  "dependencies": {
-    "morphdom": "^2.6.1",
-    "sodajs": "^0.4.10"
-  }
+	"name": "jails-js",
+	"version": "5.0.0-beta.8",
+	"description": "A Modern Javascript Library",
+	"main": "dist/jails.js",
+	"scripts": {
+		"start": "webpack --watch --mode=development",
+		"build": "webpack --mode=production",
+		"test": "echo \"Error: no test specified\" && exit 1"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/jails-org/Jails.git"
+	},
+	"keywords": [
+		"Jails",
+		"Javascript",
+		"Component",
+		"Micro-Library"
+	],
+	"author": "javiani",
+	"license": "MIT",
+	"bugs": {
+		"url": "https://github.com/jails-org/Jails/issues"
+	},
+	"homepage": "https://github.com/jails-org/Jails",
+	"devDependencies": {
+		"@babel/core": "^7.2.2",
+		"@babel/preset-env": "^7.2.3",
+		"babel-loader": "^8.0.5",
+		"babel-plugin-transform-custom-element-classes": "^0.1.0",
+		"babel-preset-env": "^1.7.0",
+		"ts-loader": "^9.2.6",
+		"typescript": "^4.5.4",
+		"webpack": "^5.59.1",
+		"webpack-cli": "^3.2.1"
+	},
+	"dependencies": {
+		"morphdom": "^2.6.1",
+		"template7": "^1.4.2"
+	}
 }

package/src/Component.ts

@@ -1,122 +1,178 @@
-import * as Pubsub from './utils/pubsub'
+import { rAF, dup, buildtemplates } from './utils'
 import { on, off, trigger } from './utils/events'
-import { rAF } from './utils'
+import { publish, subscribe, unsubscribe } from './utils/pubsub'
+import morphdom from 'morphdom'
 
-export const Component = ({
+type MainArgs = () => Array<Function>
 
-	name,
-	element,
-	dependencies,
-	ElementInterface
+export default function WebComponent(module, dependencies, templates, components) {
 
-}) => {
+	return class extends HTMLElement {
 
-	const subscriptions = []
+		constructor() {
 
-	let stateSubscriptions = []
-	let resolver
-	let promise = new Promise(resolve => resolver = resolve)
+			super()
 
-	const base = {
+			let batchUpdates = []
 
-		name,
-		dependencies,
-		elm: element,
-		publish: Pubsub.publish,
-		unsubscribe: Pubsub.unsubscribe,
+			buildtemplates(this, components, templates)
 
-		__initialize() {
-			resolver(base)
-		},
+			const tplid = this.getAttribute('tplid')
+			const template = templates[tplid]
 
-		main(fn) {
-			promise
-				.then( _ => fn().forEach(lambda => lambda(base)))
-				.catch( err => console.error( err) )
-		},
+			this.__internal__ = {
+				main: () => null,
+				unmount: () => null,
+				onupdate: _ => _,
+				view: module.view ? module.view : _ => _,
+				state: module.model ? dup(module.model) : {}
+			}
 
-		expose(methods) {
-			ElementInterface.instances[name].methods = methods
-		},
+			this.base = {
+				template,
+				dependencies,
+				publish,
+				subscribe,
+				unsubscribe,
+				elm: this,
 
-		state: {
-			set( state ) {
-				if( state.constructor === Function ){
-					const model = ElementInterface.model
-					state(model)
-					ElementInterface.update(model)
-				} else {
-					ElementInterface.update(state)
-				}
-				stateSubscriptions.forEach( fn => fn(ElementInterface.model) )
-				return new Promise((resolve) => rAF(_ => 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 () {
-				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.__instance__.instances[name]
-						if (instance && (method in instance.methods))
-							instance.methods[method].apply(null, args)
-					})
+				main: (fn: MainArgs) => { this.__internal__.main = fn },
+				unmount: (fn: () => null) => { this.__internal__.unmount = fn },
+				onupdate: (fn: () => null) => { this.__internal__.onupdate = fn },
+
+				render: (data: any = this.__internal__.state) => {
+
+					if (!document.body.contains(this))
+						return
+
+
+					batchUpdates.push(this.__internal__.view(data))
+
+					rAF(_ => {
+
+						if (batchUpdates.length) {
 
-				if (element.matches(query)) {
-					const instance = element.__instance__.instances[name]
-					if (instance && method in instance.methods)
-						instance.methods[method].apply(null, args)
+							const batchData = {}
+							batchUpdates.forEach(d => Object.assign(batchData, d))
+							batchUpdates = []
+
+							this.__internal__.state = Object.assign(this.__internal__.state, batchData)
+
+							const newdata = dup(this.__internal__.state)
+							const newhtml = this.base.template(newdata)
+
+							morphdom(this, newhtml, morphdomOptions(this, data))
+
+							Array
+								.from(this.querySelectorAll('*'))
+								.filter(el => el.__internal__)
+								.map(el => {
+									rAF(_ => {
+										el.__internal__.onupdate(newdata)
+										el.base.render(newdata)
+									})
+								})
+						}
+					})
+				},
+
+				state: {
+					set: (data: any) => {
+						if (data.constructor === Function) {
+							const newstate = dup(this.__internal__.state)
+							data(newstate)
+							this.base.render(newstate)
+						} else {
+							this.base.render(data)
+						}
+						return new Promise((resolve) => rAF(_ => rAF(resolve)))
+					},
+
+					get: () => {
+						return dup(this.__internal__.state)
+					}
+				},
+
+				on: (eventName: string, selectorOrCallback: object | Function, callback: Function) => {
+					on(this, eventName, selectorOrCallback, callback)
+				},
+
+				off: (eventName: string, callback: Function) => {
+					off(this, eventName, callback)
+				},
+
+				trigger: (eventName: string, target: string, args: any) => {
+					if (target.constructor === String)
+						trigger(this.querySelector(target), eventName, { args: args })
+					else trigger(this, eventName, { args: target })
+				},
+
+				emit: (...args) => {
+					trigger(this, args.shift(), { args: args })
 				}
 			}
-		},
 
-		subscribe(name, method) {
-			subscriptions.push({ name, method })
-			Pubsub.subscribe(name, method)
+			module.default(this.base)
+		}
+
+		connectedCallback() {
+			this.base.render()
+			this.__internal__.main().forEach(f => f(this.base))
+		}
+
+		disconnectedCallback() {
+			this.__internal__.unmount(this.base)
+			delete this.__internal__
+			delete this.base
+			delete this.__events
+		}
+
+		attributeChangedCallback() {
+			//TODO
+		}
+	}
+}
+
+const morphdomOptions = (_parent, data) => {
+
+	return {
+
+		onNodeAdded: onUpdates(_parent),
+		onElUpdated: onUpdates(_parent),
+		onBeforeElChildrenUpdated: checkStatic,
+		onBeforeElUpdated: checkStatic,
+
+		getNodeKey(node) {
+			if (node.nodeType === 1 && node.getAttribute('tplid'))
+				return node.dataset.key || node.getAttribute('tplid')
+			return false
 		}
 	}
+}
 
-	return base
+const checkStatic = (node) => {
+	if ('static' in node.dataset) {
+		return false
+	}
+}
+
+const onUpdates = (_parent) => (node) => {
+
+	if (node.nodeType === 1) {
+
+		if (node.getAttribute && node.getAttribute('scope')) {
+
+			const scope = JSON.parse(node.getAttribute('scope').replace(/\'/g, '\"'))
+
+			Array.from(node.querySelectorAll('*'))
+				.filter(el => el.__internal__)
+				.map(el => {
+					const data = Object.assign(el.__internal__.state, dup(_parent.__internal__.state), scope)
+					el.__internal__.onupdate(data)
+					el.base.render(data)
+				})
+
+			node.removeAttribute('scope')
+		}
+	}
 }

package/src/index.ts

@@ -1,60 +1,28 @@
-import { Element } from './Element'
-import { Scanner } from './Scanner'
-import { Component } from './Component'
-import { stripTemplateTag, dup } from './utils'
+import { buildtemplates, stripTemplateTag } from './utils'
+import WebComponent from './component'
 
-const components = {}
+export const templates = {}
+export const components = {}
 
 export default {
 
-	start() {
-
-		const body: HTMLElement = document.body
-
-		stripTemplateTag( body )
-
-		Scanner.scan( body, createElement )
-		Scanner.observe( body, createElement, disposeElement )
+	register(name: string, module: any, dependencies: object = {}) {
+		components[name] = { name, module, dependencies }
 	},
 
-	register( name, module, dependencies = {} ) {
-		components[name] = { name, module, dependencies }
+	start() {
+		const body = document.body
+		stripTemplateTag(body)
+		buildtemplates(body, components, templates)
+		registerComponents()
 	}
 }
 
-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? dup(module.model) : null, 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()
+const registerComponents = () => {
+	Object
+		.values(components)
+		.forEach(({ name, module, dependencies }) => {
+			const Element = WebComponent(module, dependencies, templates, components)
+			customElements.define(name, Element)
+		})
 }

package/src/template-system.ts

@@ -0,0 +1,87 @@
+import template7 from 'template7'
+import { stripTemplateTag, decodeHtmlEntities } from './utils'
+
+export default function templateSystem(element) {
+
+	const directives = [htmlRepeatAndIf]
+	const vdom = element.cloneNode(true)
+
+	stripTemplateTag(vdom)
+
+	const newvdom = directives.reduce((_, directive) => directive(vdom), vdom)
+	const html = newvdom.outerHTML.replace(/html-/g, '')
+	const template = template7.compile(html)
+
+	return (data) => {
+		return template(data)
+	}
+}
+
+/**@Directives */
+
+const htmlRepeatAndIf = (vdom) => {
+
+	const nodes = Array
+		.from(vdom.querySelectorAll('[html-repeat],[html-if]'))
+		.reverse()
+
+	if (nodes.length) {
+
+		nodes.forEach(node => {
+			if (node.getAttribute('html-repeat')) {
+				const instruction = node.getAttribute('html-repeat')
+				node.removeAttribute('html-repeat')
+				node.setAttribute('scope', '{{scope this}}')
+				const open = document.createTextNode(`{{#each ${instruction}}}`)
+				const close = document.createTextNode('{{/each}}')
+				node.parentNode.insertBefore(open, node)
+				node.parentNode.insertBefore(close, node.nextSibling)
+			} else if (node.getAttribute('html-if')) {
+				const instruction = node.getAttribute('html-if')
+				node.removeAttribute('html-if')
+				node.setAttribute('scope', '{{scope this}}')
+				const open = document.createTextNode(`{{#ifexp "${instruction}"}}`)
+				const close = document.createTextNode('{{/ifexp}}')
+				node.parentNode.insertBefore(open, node)
+				node.parentNode.insertBefore(close, node.nextSibling)
+			}
+		})
+	}
+
+	return vdom
+}
+
+/**@Global Settings */
+template7.global = {}
+
+/**@Helpers */
+template7.registerHelper('scope', (context, options) => {
+
+	const { data } = options
+	const { first, index, last, root } = data
+
+	const scope = {
+		...context,
+		['$first']: first,
+		['$index']: index,
+		['$last']: last,
+		['$parent']: root
+	}
+
+	return JSON.stringify(scope).replace(/\"/g, '\'')
+})
+
+template7.registerHelper('ifexp', function (value, options) {
+
+	const condition = decodeHtmlEntities(value)
+	const { root, data } = options
+
+	try {
+		const expression = (new Function('root', `with(root){ return ${condition} }`)).call(root, root)
+		return expression ? options.fn(this, data) : options.inverse(this, data)
+
+	} catch (err) {
+		return options.inverse(this, data)
+	}
+
+})

package/src/utils/index.js

@@ -1,3 +1,4 @@
+import templateSystem from '../template-system'
 
 export const rAF = (fn) => {
 	(requestAnimationFrame || setTimeout)(fn, 1000 / 60)
@@ -10,32 +11,65 @@ export const uuid = () => {
 	})
 }
 
-export const stripTemplateTag = ( element ) => {
+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 )
+	templates.forEach(template => {
+		template.parentNode.replaceChild(template.content, template)
+		stripTemplateTag(template.content)
 	})
 }
 
 export const dup = (o) => {
-	return JSON.parse( JSON.stringify(o) )
+	return JSON.parse(JSON.stringify(o))
 }
 
-export const createTemplate = ( html, templates ) => {
+export const createTemplate = (html, templates) => {
 
 	const vroot = document.createElement('div')
 	vroot.innerHTML = html
-	stripTemplateTag( vroot )
+	stripTemplateTag(vroot)
 
 	Array
 		.from(vroot.querySelectorAll('[data-component]'))
-		.forEach( c => {
+		.forEach(c => {
 			const tplid = c.getAttribute('tplid')
 			const cache = templates[tplid]
-			if( cache )
+			if (cache)
 				c.outerHTML = cache
 		})
 
 	return vroot.innerHTML
 }
+
+export const createTemplateId = (element, templates) => {
+
+	const tplid = element.getAttribute('tplid')
+
+	if (!tplid) {
+		const id = uuid()
+		element.setAttribute('tplid', id)
+		templates[id] = templateSystem(element)
+		return templates[id]
+	}
+
+	return templates[tplid]
+}
+
+export const buildtemplates = (target, components, templates) => {
+
+	return Array
+		.from(target.querySelectorAll('*'))
+		.filter(node => node.tagName.toLocaleLowerCase() in components)
+		.reverse()
+		.map(node => {
+			createTemplateId(node, templates)
+			return node
+		})
+}
+
+export const decodeHtmlEntities = (str) => {
+	const textarea = document.createElement('textarea')
+	textarea.innerHTML = str
+	return textarea.value
+}

package/tsconfig.json

@@ -1,6 +1,14 @@
 {
 	"compilerOptions": {
-		"lib": [ "dom" ],
-		"sourceMap": true
-	}
+		"baseUrl": "./src",
+		"outDir": "./dist/",
+		"target": "es6",
+		"allowJs": true,
+		"lib": [
+			"dom"
+		],
+	},
+	"exclude": [
+		"./node_modules"
+	]
 }