jails-js 6.0.1-beta.9 → 6.0.1

package/src/component.ts

@@ -2,7 +2,10 @@ import { safe, g, dup } from './utils'
 import { Idiomorph } from 'idiomorph/dist/idiomorph.esm'
 import { publish, subscribe } from './utils/pubsub'
 
-export const Component = ({ name, module, dependencies, node, templates, signal }) => {
+export const Component = ({ name, module, dependencies, node, templates, signal, register }) => {
+
+	let tick
+	let preserve		= []
 
 	const _model 		= module.model || {}
 	const initialState 	= (new Function( `return ${node.getAttribute('html-model') || '{}'}`))()
@@ -13,8 +16,6 @@ export const Component = ({ name, module, dependencies, node, templates, signal
 	const model  		= dup(module?.model?.apply ? _model({ elm:node, initialState }) : _model)
 	const state 		= Object.assign({}, scope, model, initialState)
 	const view 			= module.view? module.view : (data) => data
-	let preserve		= []
-	let tick
 
 	const base = {
 		name,
@@ -62,9 +63,10 @@ export const Component = ({ name, module, dependencies, node, templates, signal
 				}
 
 				const newstate = Object.assign({}, state, scope)
-				render(newstate)
 
-				return Promise.resolve(newstate)
+				return new Promise((resolve) => {
+					render(newstate, () => resolve(newstate))
+				})
 			},
 
 			get() {
@@ -139,36 +141,40 @@ export const Component = ({ name, module, dependencies, node, templates, signal
 		}
 	}
 
-	const render = ( data ) => {
+	const render = ( data, callback = (() => {}) ) => {
 		clearTimeout( tick )
 		tick = setTimeout(() => {
 			const html = tpl.render.call( view(data), node, safe, g )
-			Idiomorph.morph( node, html, IdiomorphOptions(node) )
+			Idiomorph.morph( node, html, IdiomorphOptions(node, register) )
 			Promise.resolve().then(() => {
 				node.querySelectorAll('[tplid]')
 					.forEach((element) => {
-						if(!element.base) return
-						element.base.state.protected().forEach( key => delete data[key] )
-						element.base.state.set(data)
+						const child = register.get(element)
+						if(!child) return
+						child.state.protected().forEach( key => delete data[key] )
+						child.state.set(data)
 					})
-				Promise.resolve().then(() => g.scope = {})
+				Promise.resolve().then(() => {
+					g.scope = {}
+					callback()
+				})
 			})
 		})
 	}
 
 	render( state )
-	node.base = base
+	register.set( node, base )
 	return module.default( base )
 }
 
-const IdiomorphOptions = ( parent ) => ({
+const IdiomorphOptions = ( parent, register ) => ({
 	callbacks: {
 		beforeNodeMorphed( node ) {
 			if( node.nodeType === 1 ) {
 				if( 'html-static' in node.attributes ) {
 					return false
 				}
-				if( node.base && node !== parent ) {
+				if( register.get(node) && node !== parent ) {
 					return false
 				}
 			}

package/src/element.ts

@@ -1,5 +1,7 @@
 import { Component } from './component'
 
+const register = new WeakMap()
+
 export const Element = ({ component, templates, start }) => {
 
 	const { name, module, dependencies } = component
@@ -24,7 +26,8 @@ export const Element = ({ component, templates, start }) => {
 				module,
 				dependencies,
 				templates,
-				signal: this.abortController.signal
+				signal: this.abortController.signal,
+				register
 			})
 
 			if ( rtrn && rtrn.constructor === Promise ) {
@@ -39,7 +42,6 @@ export const Element = ({ component, templates, start }) => {
 		disconnectedCallback() {
 			this.dispatchEvent( new CustomEvent(':unmount') )
 			this.abortController.abort()
-			delete this.base
 		}
 	}
 }

package/src/index.ts

@@ -1,3 +1,4 @@
+
 import { Element } from './element'
 import { template, templateConfig as config } from './template-system'
 

package/tsconfig.json

@@ -1,5 +1,8 @@
 {
   "compilerOptions": {
+		"declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "dist",
     /* Visit https://aka.ms/tsconfig to read more about this file */
 
     /* Projects */

package/types.d.ts

@@ -0,0 +1,47 @@
+type EventCallback = ( Event: Event, data?:any ) => void
+
+export declare const templateConfig: (options: any) => void;
+export declare const register: (name: string, module: Module, dependencies?: any) => void
+export declare const start: (target?: HTMLElement) => void;
+export declare const subscribe:( subject: string, callback: (data:any) => void ) => Function
+export declare const publish: ( subject: string, data :any ) => void
+
+export type Component = {
+
+	elm: HTMLElement
+	dependencies: any
+
+	state : {
+		protected( props: Array<string> ): Array<string>
+		set( data: object ) : Promise<any>
+		set( callback: ( state: object ) => any ) : Promise<any>
+		get() : object
+		getRaw() : object
+	}
+
+	main( mainArgs: ( t: Component ) => void ): void
+
+	publish( name: string, value: any ) : void
+
+	subscribe( name: string, value: Function ) : Function
+
+	unmount( callback: () => void ) : void
+
+	on( eventName: string, selector: string | EventCallback, callback?: EventCallback ): void
+
+	emit( eventName: string, data: any ) : void
+
+	off( eventName: string, callback: () => void ): void
+
+	trigger( eventName: string, selector :string, data: any ): void
+
+	innerHTML( target: HTMLElement | string, html?: string ) : void
+}
+
+export type Model = {
+	[key: string] : object
+}
+
+export type View = ( state: object ) => object
+
+export type Template = ({ elm: HTMLElement, children: string }) => string