simplyview 3.0.1 → 3.0.3

package/src/bind.mjs

@@ -7,14 +7,28 @@ class SimplyBind {
             container: document.body,
             attribute: 'data-bind',
             transformers: [],
-            defaultTransformers: [defaultTransformer]
+            defaultTransformers: {
+                field: [defaultFieldTransformer],
+                list: [defaultListTransformer],
+                map: [defaultMapTransformer]
+            }
         }
         if (!options?.root) {
             throw new Error('bind needs at least options.root set')
         }
         this.options = Object.assign({}, defaultOptions, options)
 
-        const attribute = this.options.attribute
+        const attribute      = this.options.attribute
+        const bindAttributes = [attribute+'-field',attribute+'-list',attribute+'-map']
+        const bindSelector   = `[${attribute}-field],[${attribute}-list],[${attribute}-map]`
+
+        const getBindingAttribute = (el) => {
+            const foundAttribute = bindAttributes.find(attr => el.hasAttribute(attr))
+            if (!foundAttribute) {
+                console.error('No matching attribute found',el)
+            }
+            return foundAttribute
+        }
 
         // sets up the effect that updates the element if its
         // data binding value changes
@@ -23,8 +37,9 @@ class SimplyBind {
             this.bindings.set(el, throttledEffect(() => {
                 const context = {
                     templates: el.querySelectorAll(':scope > template'),
-                    path: this.getBindingPath(el)
+                    attribute: getBindingAttribute(el)
                 }
+                context.path = this.getBindingPath(el)
                 context.value = getValueByPath(this.options.root, context.path)
                 context.element = el
                 runTransformers(context)
@@ -36,7 +51,18 @@ class SimplyBind {
         // each transformer can opt to call the next or not
         // transformers should return the context object (possibly altered)
         const runTransformers = (context) => {
-            let transformers = this.options.defaultTransformers || []
+            let transformers
+            switch(context.attribute) {
+                case this.options.attribute+'-field':
+                    transformers = this.options.defaultTransformers.field || []
+                    break
+                case this.options.attribute+'-list':
+                    transformers = this.options.defaultTransformers.list || []
+                    break
+                case this.options.attribute+'-map':
+                    transformers = this.options.defaultTransformers.map || []
+                    break
+            }
             if (context.element.dataset.transform) {
                 context.element.dataset.transform.split(' ').filter(Boolean).forEach(t => {
                     if (this.options.transformers[t]) {
@@ -69,12 +95,13 @@ class SimplyBind {
         // if any element is added, and has a data bind attribute
         // it applies that data binding
         const updateBindings = (changes) => {
+            const selector = `[${attribute}-field],[${attribute}-list],[${attribute}-map]`
             for (const change of changes) {
                 if (change.type=="childList" && change.addedNodes) {
                     for (let node of change.addedNodes) {
                         if (node instanceof HTMLElement) {
-                            let bindings = Array.from(node.querySelectorAll(`[${attribute}]`))
-                            if (node.matches(`[${attribute}]`)) {
+                            let bindings = Array.from(node.querySelectorAll(selector))
+                            if (node.matches(selector)) {
                                 bindings.unshift(node)
                             }
                             if (bindings.length) {
@@ -100,7 +127,11 @@ class SimplyBind {
         // this finds elements with data binding attributes and applies those bindings
         // must come after setting up the observer, or included templates
         // won't trigger their own bindings
-        const bindings = this.options.container.querySelectorAll('['+this.options.attribute+']:not(template)')
+        const bindings = this.options.container.querySelectorAll(
+            '['+this.options.attribute+'-field]'+
+            ',['+this.options.attribute+'-list]'+
+            ',['+this.options.attribute+'-map]'
+        )
         if (bindings.length) {
             applyBindings(bindings)
         }
@@ -127,23 +158,25 @@ class SimplyBind {
         }
         let clone = template.content.cloneNode(true)
         if (!clone.children?.length) {
-            throw new Error('template must contain a single html element', { cause: template })
+            return clone
         }
         if (clone.children.length>1) {
             throw new Error('template must contain a single root node', { cause: template })
         }
-        const bindings = clone.querySelectorAll('['+this.options.attribute+']')
         const attribute = this.options.attribute
+        const attributes = [attribute+'-field',attribute+'-list',attribute+'-map']
+        const bindings = clone.querySelectorAll(`[${attribute}-field],[${attribute}-list],[${attribute}-map]`)
         for (let binding of bindings) {
-            const bind = binding.getAttribute(attribute)
-            if (bind.substring(0, '#root.'.length)=='#root.') {
-                binding.setAttribute(attribute, bind.substring('#root.'.length))
-            } else if (bind=='#value' && index!=null) {
-                binding.setAttribute(attribute, path+'.'+index)
+            const attr = attributes.find(attr => binding.hasAttribute(attr))
+            const bind = binding.getAttribute(attr)
+            if (bind.substring(0, ':root.'.length)==':root.') {
+                binding.setAttribute(attr, bind.substring(':root.'.length))
+            } else if (bind==':value' && index!=null) {
+                binding.setAttribute(attr, path+'.'+index)
             } else if (index!=null) {
-                binding.setAttribute(attribute, path+'.'+index+'.'+bind)
+                binding.setAttribute(attr, path+'.'+index+'.'+bind)
             } else {
-                binding.setAttribute(attribute, parent+'.'+bind)
+                binding.setAttribute(attr, parent+'.'+bind)
             }
         }
         if (typeof index !== 'undefined') {
@@ -156,7 +189,16 @@ class SimplyBind {
     }
 
     getBindingPath(el) {
-        return el.getAttribute(this.options.attribute)
+        const attributes = [
+            this.options.attribute+'-field', 
+            this.options.attribute+'-list',
+            this.options.attribute+'-map'
+        ]
+        for (let attr of attributes) {
+            if (el.hasAttribute(attr)) {
+                return el.getAttribute(attr)
+            }
+        }
     }
 
     /**
@@ -169,7 +211,7 @@ class SimplyBind {
             let path = this.getBindingPath(t)
             let currentItem
             if (path) {
-                if (path.substr(0,6)=='#root.') {
+                if (path.substr(0,6)==':root.') {
                     currentItem = getValueByPath(this.options.root, path)
                 } else {
                     currentItem = getValueByPath(value, path)
@@ -182,20 +224,21 @@ class SimplyBind {
             const strItem = ''+currentItem
             let matches = t.getAttribute(this.options.attribute+'-match')
             if (matches) {
-                if (matches==='#empty' && !currentItem) {
+                if (matches===':empty' && !currentItem) {
                     return t
-                } else if (matches==='#notempty' && currentItem) {
+                } else if (matches===':notempty' && currentItem) {
                     return t
                 }
                 if (strItem.match(matches)) {
                     return t
                 }
             }
-            if (!matches) {
-                // no data-bind-match is set, so return this template is currentItem is truthy
-                if (currentItem) {
-                    return t
-                }
+            if (!matches && currentItem!==null && currentItem!==undefined) {
+                //FIXME: this doesn't run templates in lists where list entry is null
+                //which messes up the count
+                //
+                // no data-bind-match is set, so return this template
+                return t
             }
         }
         let template = Array.from(templates).find(templateMatches)
@@ -231,13 +274,13 @@ export function bind(options)
 
 /**
  * Returns true if a matches b, either by having the
- * same string value, or matching string #empty against a falsy value
+ * same string value, or matching string :empty against a falsy value
  */
 export function matchValue(a,b) {
-    if (a=='#empty' && !b) {
+    if (a==':empty' && !b) {
         return true
     }
-    if (b=='#empty' && !a) {
+    if (b==':empty' && !a) {
         return true
     }
     if (''+a == ''+b) {
@@ -259,11 +302,11 @@ export function getValueByPath(root, path)
     let part, prevPart;
     while (parts.length && curr) {
         part = parts.shift()
-        if (part=='#key') {
+        if (part==':key') {
             return prevPart
-        } else if (part=='#value') {
+        } else if (part==':value') {
             return curr
-        } else if (part=='#root') {
+        } else if (part==':root') {
             curr = root
         } else {
             part = decodeURIComponent(part)
@@ -278,7 +321,7 @@ export function getValueByPath(root, path)
  * Default transformer for data binding
  * Will be used unless overriden in the SimplyBind options parameter
  */
-export function defaultTransformer(context) {
+export function defaultFieldTransformer(context) {
     const el             = context.element
     const templates      = context.templates
     const templatesCount = templates.length 
@@ -286,11 +329,7 @@ export function defaultTransformer(context) {
     const value          = context.value
     const attribute      = this.options.attribute
 
-    if (Array.isArray(value) && templates?.length) {
-        transformArrayByTemplates.call(this, context)
-    } else if (typeof value == 'object' && templates?.length) {
-        transformObjectByTemplates.call(this, context)
-    } else if (templates?.length) {
+    if (templates?.length) {
         transformLiteralByTemplates.call(this, context)
     } else if (el.tagName=='INPUT') {
         transformInput.call(this, context)
@@ -306,10 +345,49 @@ export function defaultTransformer(context) {
     return context
 }
 
+export function defaultListTransformer(context) {
+    const el             = context.element
+    const templates      = context.templates
+    const templatesCount = templates.length 
+    const path           = context.path
+    const value          = context.value
+    const attribute      = this.options.attribute
+
+    if (!Array.isArray(value)) {
+        console.error('Value is not an array.', el, value)
+    } else if (!templates?.length) {
+        console.error('No templates found in', el)
+    } else {
+        transformArrayByTemplates.call(this, context)
+    }
+    return context
+}
+
+export function defaultMapTransformer(context) {
+    const el             = context.element
+    const templates      = context.templates
+    const templatesCount = templates.length 
+    const path           = context.path
+    const value          = context.value
+    const attribute      = this.options.attribute
+
+    if (typeof value != 'object') {
+        console.error('Value is not an object.', el, value)
+    } else if (!templates?.length) {
+        console.error('No templates found in', el)
+    } else {
+        transformObjectByTemplates.call(this, context)
+    }
+    return context
+}
+
+
 /**
  * Renders an array value by applying templates for each entry
  * Replaces or removes existing DOM children if needed
  * Reuses (doesn't touch) DOM children if template doesn't change
+ * FIXME: this doesn't handle situations where there is no matching template
+ * this messes up self healing. check transformObjectByTemplates for a better implementation
  */
 export function transformArrayByTemplates(context) {
     const el             = context.element
@@ -335,14 +413,14 @@ export function transformArrayByTemplates(context) {
             // remove this
             item.remove()
         } else {
-            // check that all data-bind params start with current json path or a '#', otherwise replaceChild
+            // check that all data-bind params start with current json path or ':root', otherwise replaceChild
             let bindings = Array.from(item.querySelectorAll(`[${attribute}]`))
             if (item.matches(`[${attribute}]`)) {
                 bindings.unshift(item)
             }
             let needsReplacement = bindings.find(b => {
                 let databind = b.getAttribute(attribute)
-                return (databind.substr(0,5)!=='#root' 
+                return (databind.substr(0,5)!==':root' 
                     && databind.substr(0, path.length)!==path)
             })
             if (!needsReplacement) {
@@ -385,7 +463,7 @@ export function transformArrayByTemplates(context) {
 
 /**
  * Renders an object value by applying templates for each entry (Object.entries)
- * Replaces or removes existing DOM children if needed
+ * Replaces,moves or removes existing DOM children if needed
  * Reuses (doesn't touch) DOM children if template doesn't change
  */
 export function transformObjectByTemplates(context) {
@@ -397,61 +475,55 @@ export function transformObjectByTemplates(context) {
     const attribute      = this.options.attribute
     context.list = value
 
-    let list    = Object.entries(value)
-    let items   = el.querySelectorAll(':scope > ['+attribute+'-key]')
-    let current = 0
-    let skipped = 0
-    for (let item of items) {
-        if (current>=list.length) {
-            break
+    let items = Array.from(el.querySelectorAll(':scope > ['+attribute+'-key]'))
+    for (let key in context.list) {
+        context.index = key
+        let item = items.shift()
+        if (!item) { // more properties than rendered items
+            let clone = this.applyTemplate(context)
+            if (clone.firstElementChild) {
+                el.appendChild(clone)
+            }
+            continue
         }
-        let key = list[current][0]
-        current++
-        let keypath = path+'.'+key
-        // check that all data-bind params start with current json path or a '#', otherwise replaceChild
-        let needsReplacement
-        const databind = item.getAttribute(attribute)
-        if (databind && databind.substr(0, keypath.length)!=keypath) {
-            needsReplacement=true
-        } else {
-            let bindings = Array.from(item.querySelectorAll(`[${attribute}]`))
-            needsReplacement = bindings.find(b => {
-                const db = b.getAttribute(attribute)
-                return (db.substr(0,5)!=='#root' && db.substr(0, keypath.length)!==keypath)
-            })
-            if (!needsReplacement) {
-                if (item.$bindTemplate) {
-                    let newTemplate = this.findTemplate(templates, value[key])
-                    if (newTemplate != item.$bindTemplate){
-                        needsReplacement = true
-                        if (!newTemplate) {
-                            skipped++
-                        }
-                    }
+        if (item.getAttribute[attribute+'-key']!=key) { 
+            // next item doesn't match key
+            items.unshift(item) // put item back for next cycle
+            let outOfOrderItem = el.querySelector(':scope > ['+attribute+'-key="'+key+'"]') //FIXME: escape key
+            if (!outOfOrderItem) {
+                let clone = this.applyTemplate(context)
+                if (clone.firstElementChild) {
+                    el.insertBefore(clone, item)
                 }
+                continue // new template doesn't need replacement, so continue 
+            } else {
+                el.insertBefore(outOfOrderItem, item)
+                item = outOfOrderItem // check needsreplacement next
+                items = items.filter(i => i!=outOfOrderItem)
             }
         }
-        if (needsReplacement) {
-            context.index = key
+        let newTemplate = this.findTemplate(templates, value[key])
+        if (newTemplate != item.$bindTemplate){
             let clone = this.applyTemplate(context)
             el.replaceChild(clone, item)
         }
     }
-    items  = el.querySelectorAll(':scope > ['+attribute+'-key]')
-    let length = items.length + skipped
-    if (length>list.length) {
-        while (length>list.length) {
-            let child = el.querySelectorAll(':scope > :not(template)')?.[length-1]
-            child?.remove()
-            length--
-        }
-    } else if (length < list.length) {
-        while (length < list.length) {
-            context.index = list[length][0]
-            el.appendChild(this.applyTemplate(context))
-            length++
-        }
-    } 
+    // clean up remaining items
+    while (items.length) {
+        item = items.shift()
+        item.remove()
+    }
+}
+
+function getParentPath(el, attribute) {
+    const parentEl  = el.parentElement?.closest(`[${attribute}-list],[${attribute}-map]`)
+    if (!parentEl) {
+        return ':root'
+    }
+    if (parentEl.hasAttribute(`${attribute}-list`)) {
+        return parentEl.getAttribute(`${attribute}-list`)
+    }
+    return parentEl.getAttribute(`${attribute}-map`)
 }
 
 /**
@@ -468,7 +540,8 @@ export function transformLiteralByTemplates(context) {
 
     const rendered = el.querySelector(':scope > :not(template)')
     const template = this.findTemplate(templates, value)
-    context.parent = el.parentElement?.closest(`[${attribute}]`)?.getAttribute(attribute) || '#root'
+
+    context.parent = getParentPath(el, attribute)
     if (rendered) {
         if (template) {
             if (rendered?.$bindTemplate != template) {
@@ -567,6 +640,10 @@ export function transformElement(context) {
     const value = context.value
 
     if (!matchValue(el.innerHTML, value)) {
-        el.innerHTML = ''+value
+        if (typeof value=='undefined' || value==null) {
+            el.innerHTML = ''
+        } else {
+            el.innerHTML = ''+value
+        }
     }
 }

package/src/command.mjs

@@ -21,7 +21,7 @@ class SimplyCommands {
                 return
 			}
             const shouldContinue = this[command.name].call(options.app, command.source, command.value)
-            if (shouldContinue===false) {
+            if (shouldContinue!==true) {
                 evt.preventDefault()
                 evt.stopPropagation()
                 return false

package/src/everything.mjs

@@ -1,25 +1,21 @@
 import { activate } from './activate.mjs'
-import * as action from './action.mjs'
+import { actions as action } from './action.mjs'
 import { app } from './app.mjs'
-import { bind } from './bind.mjs'
-import * as command from './command.mjs'
+import { commands as command } from './command.mjs'
 import { include } from './include.mjs'
-import * as key from './key.mjs'
-import * as model from './model.mjs'
-import * as route from './route.mjs'
-import * as state from './state.mjs'
+import { keys as key } from './key.mjs'
+import { routes as route } from './route.mjs'
+import { view } from './view.mjs'
 
 const simply = {
 	activate,
 	action,
 	app,
-	bind,
 	command,
 	include,
 	key,
-	model,
 	route,
-	state
+	view
 }
 
 window.simply = simply

package/src/include.mjs

@@ -53,7 +53,7 @@ const waitForPreviousScripts = async () => {
     // that triggers the Promise.resolve method
     return new Promise(function(resolve) {
         var next = globalThis.document.createElement('script')
-        next.src = rebaseHref('simply.include.next.js', currentScriptURL)
+        next.src = "https://cdn.jsdelivr.net/gh/simplyedit/simplyview/dist/simply.include.next.js"
         next.async = false
         globalThis.document.addEventListener('simply-include-next', () => {
             head.removeChild(next)
@@ -122,18 +122,21 @@ export const include = {
         // order in which they are defined
         let scriptsFragment = globalThis.document.createDocumentFragment()
         const scripts = fragment.querySelectorAll('script')
-        for (let script of scripts) {
-            let placeholder = globalThis.document.createComment(script.src || 'inline script')
-            script.parentNode.insertBefore(placeholder, script)
-            script.dataset.simplyLocation = scriptLocations.length
-            scriptLocations.push(placeholder)
-            scriptsFragment.appendChild(script)
+        if (scripts.length) {
+            for (let script of scripts) {
+                let placeholder = globalThis.document.createComment(script.src || 'inline script')
+                script.parentNode.insertBefore(placeholder, script)
+                script.dataset.simplyLocation = scriptLocations.length
+                scriptLocations.push(placeholder)
+                scriptsFragment.appendChild(script)
+            }
+            globalThis.setTimeout(function() {
+                include.scripts(Array.from(scriptsFragment.children), link ? link.href : globalThis.location.href )
+            }, 10)
         }
         // add the remainder before the include link
         link.parentNode.insertBefore(fragment, link ? link : null)
-        globalThis.setTimeout(function() {
-            include.scripts(scriptsFragment.childNodes, link ? link.href : globalThis.location.href )
-        }, 10)
+
     }
 }
 

package/src/key.mjs

@@ -1,4 +1,12 @@
-class SimplyKeys {
+const KEY = Object.freeze({
+	Compose: 229,
+	Control: 17,
+	Meta:    224,
+	Alt:     18,
+	Shift:   16
+})
+
+class SimplyKey {
 	constructor(options = {}) {
 		if (!options.app) {
 			options.app = {}
@@ -9,38 +17,83 @@ class SimplyKeys {
 		Object.assign(this, options.keys)
 
 		const keyHandler = (e) => {
-			if (e.isComposing || e.keyCode === 229) {
-			    return;
+			if (e.isComposing || e.keyCode === KEY.Compose) {
+			    return
 			}
 			if (e.defaultPrevented) {
-			    return;
+			    return
 			}
 			if (!e.target) {
-			    return;
+			    return
 			}
 
-			let selectedKeyboard = 'default';
+			let selectedKeyboard = 'default'
 			if (e.target.closest('[data-simply-keyboard]')) {
-			    selectedKeyboard = e.target.closest('[data-simply-keyboard]').dataset.simplyKeyboard;
+			    selectedKeyboard = e.target.closest('[data-simply-keyboard]')
+			    					.dataset.simplyKeyboard
+			}
+			let keyCombination = []
+			if (e.ctrlKey && e.keyCode!=KEY.Control) {
+			    keyCombination.push('Control')
 			}
-			let key = '';
-			if (e.ctrlKey && e.keyCode!=17) {
-			    key+='Control+';
+			if (e.metaKey && e.keyCode!=KEY.Meta) {
+			    keyCombination.push('Meta')
 			}
-			if (e.metaKey && e.keyCode!=224) {
-			    key+='Meta+';
+			if (e.altKey && e.keyCode!=KEY.Alt) {
+			    keyCombination.push('Alt')
 			}
-			if (e.altKey && e.keyCode!=18) {
-			    key+='Alt+';
+			if (e.shiftKey && e.keyCode!=KEY.Shift) {
+			    keyCombination.push('Shift')
 			}
-			if (e.shiftKey && e.keyCode!=16) {
-			    key+='Shift+';
+			keyCombination.push(e.key.toLowerCase())
+
+			let keyboards = []
+			let keyboardElement = event.target.closest('[data-simply-keyboard]')
+			while (keyboardElement) {
+				keyboards.push(keyboardElement.dataset.simplyKeyboard)
+				keyboardElement = keyboardElement.parentNode.closest('[data-simply-keyboard]')
 			}
-			key+=e.key;
+			keyboards.push('')
+
+			let keyboard, subkeyboard
+			let separators = ['+','-']
+
+			for (i in keyboards) {
+				keyboard = keyboards[i]
+				if (keyboard == '') {
+					subkeyboard = 'default'
+				} else {
+					subkeyboard = keyboard
+					keyboard += '.'
+				}
+				for (let separator of separators) {
+					let keyString = keyCombination.join(separator)
+
+					if (this[subkeyboard] && (typeof this[subkeyboard][keyString]=='function')) {
+						let _continue = this[subkeyboard][keyString].call(this[subkeyboard], e)
+						if (!_continue) {
+							e.preventDefault()
+							return
+						}
+					}
+					if (typeof this[subkeyboard + keyString] == 'function') {
+						let _continue = this[subkeyboard + keyString].call(this, e)
+						if (!_continue) {
+							e.preventDefault()
+							return
+						}					
+					}
+
+					if (this[selectedKeyboard] && this[selectedKeyboard][keyString]) {
+						let targets = options.app.container.querySelectorAll('[data-simply-accesskey="'
+							+ keyboard + keyString + '"]')
+						if (targets.length) {
+							targets.forEach(t => t.click())
+							e.preventDefault()
+						}
+					}
 
-			if (this[selectedKeyboard] && this[selectedKeyboard][key]) {
-			    let keyboard = this[selectedKeyboard]
-			    keyboard[key].call(options.app,e);
+				}
 			}
 		}
 
@@ -50,6 +103,6 @@ class SimplyKeys {
 }
 
 export function keys(options={}) {
-	return new SimplyKeys(options)
+	return new SimplyKey(options)
 }
 

package/src/route.mjs

@@ -65,6 +65,8 @@ class SimplyRoute {
         if (path && path[path.length-1]!='/') {
         	return this.match(path+'/', options)
         }
+        console.log(path, this.routeInfo)
+        process.exit()
         return false
 	}
 
@@ -199,8 +201,7 @@ function getRegexpFromRoute(route) {
     return new RegExp('^'+route.replace(/:\w+/g, '([^/]+)').replace(/:\*/, '(.*)'));
 }
 
-function parseRoutes(routes) {
-    let routeInfo = []
+function parseRoutes(routes, routeInfo) {
     const paths = Object.keys(routes)
     const matchParams = /:(\w+|\*)/g
     for (let path of paths) {