simplyview 3.1.4 → 3.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simplyview",
-  "version": "3.1.4",
+  "version": "3.3.0",
   "description": "Library to rapidly build UI components, using declarative tools",
   "main": "src/everything.mjs",
   "type": "module",

package/src/action.mjs

@@ -1,17 +1,66 @@
-export function actions(options, optionsCompat) {
+export function actions(options, optionsCompat) 
+{
 	if (optionsCompat) {
 		let app = options
 		options = optionsCompat
 		options.app = app
 	}
+
 	if (options.app) {
+		const waitHandler = {
+			apply(target, thisArg, argumentsList)
+			{
+				try {
+					const result = target(...argumentsList)
+					if (result instanceof Promise) {
+						options.app.hooks.wait(true)
+						return result.finally(() => {
+							options.app.hooks.wait(false, target)
+						})
+					}
+					return result
+				} catch(err) {
+				}
+			}
+		}
+
+		const functionHandler = {
+			apply(target, thisArg, argumentsList)
+			{
+				try {
+					const result = target(...argumentsList)
+					if (result instanceof Promise) {
+						if (options.app.hooks.wait) {
+							options.app.hooks.wait(true, target)
+							return result.catch(err => {
+								return options.app.hooks.error(err, target)
+							})
+							.finally(() => {
+								options.app.hooks.wait(false, target)
+							})
+						} else {
+							return result.catch(err => {
+								return options.app.hooks.error(err, target)
+							})							
+						}
+					}
+					return result
+				} catch(err) {
+					return options.app.hooks.error(err, target)
+				}
+			}
+		}
+
 		const actionHandler = {
-			get(target, property) {
+			get(target, property)
+			{
 				if (!target[property]) {
 					return undefined
 				}
-				if (target.catch) {
+				if (options.app.hooks?.error) {
 					return new Proxy(target[property].bind(options.app), functionHandler)
+				} else if (options.app.hooks?.wait) {
+					return new Proxy(target[property].bind(options.app), waitHandler)
 				} else {
 					return target[property].bind(options.app)
 				}
@@ -21,20 +70,4 @@ export function actions(options, optionsCompat) {
 	} else {
 		return options
 	}
-}
-
-const functionHandler = {
-	apply(target, thisArg, argumentsList) {
-		try {
-			const result = target(...argumentsList)
-			if (result instanceof Promise) {
-				return result.catch(err => {
-					return thisArg.catch(err)
-				})
-			}
-			return result
-		} catch(err) {
-			return thisArg.catch(err)
-		}
-	}
 }

package/src/activate.mjs

@@ -1,3 +1,7 @@
+if (!Symbol.onDestroy) {
+    Symbol.onDestroy = Symbol('onDestroy')
+}
+
 const listeners = new Map()
 
 export const activate = {
@@ -31,7 +35,12 @@ function callListeners(node) {
     const activate = node?.dataset?.simplyActivate
     if (activate && listeners.has(activate)) {
         for (let callback of listeners.get(activate)) {
-            callback.call(node)
+            const onDestroy = callback.call(node)
+            if (typeof onDestroy == 'function') {
+                node[Symbol.onDestroy] = onDestroy
+            } else if (typeof onDestroy != 'undefined') {
+                console.warn('activate listener may only return a de-activate function, instead got', onDestroy)
+            }
         }
     }
 }
@@ -42,13 +51,26 @@ function handleChanges(changes) {
         if (change.type == 'childList') {
             for (let node of change.addedNodes) {
                 if (node.querySelectorAll) {
-                    var toActivate = Array.from(node.querySelectorAll('[data-simply-activate]'))
+                    let toActivate = Array.from(node.querySelectorAll('[data-simply-activate]'))
                     if (node.matches('[data-simply-activate]')) {
                         toActivate.push(node)
                     }
                     activateNodes = activateNodes.concat(toActivate)
                 }
             }
+            for (let node of change.removedNodes) {
+                if (node.querySelectorAll) {
+                    let toDestroy = Array.from(node.querySelectorAll('[data-simply-activate]'))
+                    if (node.matches['[data-simply-activate']) {
+                        toDestroy.push(node)
+                    }
+                    for (let child of toDestroy) {
+                        if (child[Symbol.onDestroy]) {
+                            child[Symbol.onDestroy].call(child)
+                        }
+                    }
+                }
+            }
         }
     }
     for (let node of activateNodes) {

package/src/app.mjs

@@ -16,16 +16,12 @@ class SimplyApp {
 				case 'keyboard': // backwards compatible
 					this.keys = keys({ app: this, keys: options.keys })
 					break
+				case 'root': // backwards compatibility
+				case 'baseURL':
+					this.baseURL = options[key]
+					break
 				case 'routes':
 					this.routes = routes({ app: this, routes: options.routes})
-					this.routes.handleEvents();
-					globalThis.setTimeout(() => {
-						if (this.routes.has(globalThis.location?.hash)) {
-							this.routes.match(globalThis.location.hash)
-						} else {
-							this.routes.match(globalThis.location?.pathname+globalThis.location?.hash)
-						}
-					});
 					break
 				case 'actions':
 					this.actions = actions({app: this, actions: options.actions})
@@ -39,8 +35,32 @@ class SimplyApp {
 				case 'view':
 					this.view = view({app: this, view: options.view})
 					break
+				case 'hooks':
+					const moduleHandler = {
+						get: (target, property) => {
+							if (!target[property]) {
+								return undefined
+							}
+							if (typeof target[property]=='function') {
+								return new Proxy(target[property], functionHandler)
+							} else if (target[property] && typeof target[property]=='object') {
+								return new Proxy(target[property], moduleHandler)
+							} else {
+								return target[property]
+							}
+						}
+					}
+					const functionHandler = {
+						apply: (target, thisArg, argumentsList) => {
+							// note: must use short function syntax so this is set to the app
+							return target.apply(this, argumentsList)
+						}
+					}
+					this[key] = new Proxy(options[key], moduleHandler)
+					break
 				default:
-					this[key] = options[key] // allows easy additions
+					console.log('simply.app: unknown initialization option "'+key+'", added as-is')
+					this[key] = options[key]
 					break
 			}
 		}
@@ -48,6 +68,24 @@ class SimplyApp {
 	get app() {
 		return this
 	}
+	async start() {
+		if (this.hooks?.start) {
+			await this.hooks.start()
+		}
+		if (this.routes) {
+			if (this.baseURL) {
+				this.routes.init({ baseURL: this.baseURL })
+			}
+			this.routes.handleEvents();
+			globalThis.setTimeout(() => {
+				if (this.routes.has(globalThis.location?.hash)) {
+					this.routes.match(globalThis.location.hash)
+				} else {
+					this.routes.match(globalThis.location?.pathname+globalThis.location?.hash)
+				}
+			});
+		}
+	}
 }
 
 export function app(options={}) {

package/src/route.mjs

@@ -12,7 +12,7 @@ class SimplyRoute
 {
     constructor(options={})
     {
-        this.root = options.root || '/'
+        this.baseURL = options.baseURL || '/'
         this.app = options.app || {}
         this.addMissingSlash = !!options.addMissingSlash
         this.matchExact = !!options.matchExact
@@ -63,7 +63,7 @@ class SimplyRoute
                     matches = route.match.exec(path+'/')
                     if (matches) {
                         path+='/'
-                        history.replaceState({}, '', getURL(path, this.root))
+                        history.replaceState({}, '', getURL(path, this.baseURL))
                     }
                 }
             }
@@ -91,7 +91,7 @@ class SimplyRoute
 
     runListeners(action, params)
     {
-        if (!Object.keys(this.listeners[action])) {
+        if (!this.listeners[action] || !Object.keys(this.listeners[action])) {
             return
         }
         Object.keys(this.listeners[action]).forEach((route) => {
@@ -112,8 +112,8 @@ class SimplyRoute
     handleEvents()
     {
         globalThis.addEventListener('popstate', () => {
-            if (this.match(getPath(document.location.pathname + document.location.hash, this.root)) === false) {
-                this.match(getPath(document.location.pathname, this.root))
+            if (this.match(getPath(document.location.pathname + document.location.hash, this.baseURL)) === false) {
+                this.match(getPath(document.location.pathname, this.baseURL))
             }
         })
         this.app.container.addEventListener('click', (evt) => {
@@ -136,7 +136,7 @@ class SimplyRoute
                 let check = [link.hash, link.pathname+link.hash, link.pathname]
                 let path
                 do {
-                    path = getPath(check.shift(), this.root);
+                    path = getPath(check.shift(), this.baseURL);
                 } while(check.length && !this.has(path))
                 if ( this.has(path) ) {
                     let params = this.runListeners('goto', { path: path});
@@ -154,13 +154,13 @@ class SimplyRoute
 
     goto(path)
     {
-        history.pushState({},'',getURL(path, this.root))
+        history.pushState({},'',getURL(path, this.baseURL))
         return this.match(path)
     }
 
     has(path)
     {
-        path = getPath(path, this.root)
+        path = getPath(path, this.baseURL)
         for (let route of this.routeInfo) {
             var matches = route.match.exec(path)
             if (matches && matches.length) {
@@ -196,22 +196,22 @@ class SimplyRoute
 
     init(options)
     {
-        if (options.root) {
-            this.root = options.root
+        if (options.baseURL) {
+            this.baseURL = options.baseURL
         }
     }
 }
 
-function getPath(path, root='/')
+function getPath(path, baseURL='/')
 {
-    if (path.substring(0,root.length)==root
+    if (path.substring(0,baseURL.length)==baseURL
         ||
-        ( root[root.length-1]=='/' 
-            && path.length==(root.length-1)
-            && path == root.substring(0,path.length)
+        ( baseURL[baseURL.length-1]=='/' 
+            && path.length==(baseURL.length-1)
+            && path == baseURL.substring(0,path.length)
         )
     ) {
-        path = path.substring(root.length)
+        path = path.substring(baseURL.length)
     }
     if (path[0]!='/' && path[0]!='#') {
         path = '/'+path
@@ -219,16 +219,16 @@ function getPath(path, root='/')
     return path
 }
 
-function getURL(path, root)
+function getURL(path, baseURL)
 {
-    path = getPath(path, root)
-    if (root[root.length-1]==='/' && path[0]==='/') {
+    path = getPath(path, baseURL)
+    if (baseURL[baseURL.length-1]==='/' && path[0]==='/') {
         path = path.substring(1)
     }
     if (path[0]=='#') {
         return path
     }
-    return root + path
+    return baseURL + path
 }
 
 function getRegexpFromRoute(route, exact=false)