simplyflow 0.2.3 → 0.3.1

package/src/bind.mjs

@@ -1,12 +1,36 @@
 import { throttledEffect, destroy } from './state.mjs'
 
-class SimplyBind {
-    constructor(options) {
+/**
+ * Implements one way databinding, updating dom elements with matching attributes
+ * to changes in signals (see state.mjs)
+ * 
+ * @class
+ */
+class SimplyBind
+{
+    
+    /**
+     * @param Object options - a set of options for this instance, options may include:
+     *  - root (signal) (required) - the root data object that contains al signals that can be bound
+     *  - container (HTMLElement) - the dom element to use as the root for all bindings
+     *  - attribute (string) - the prefix for the field, list and map attributes, e.g. 'data-bind'
+     *  - transformers (object name:function) - a map of transformer names and functions
+     *  - defaultTransformers (object with field, list and map properties)
+     */
+    constructor(options)
+    {
+        /**
+         * A map of HTMLElements and the data bindings on each, in the form of 
+         * the connectedSignal returned by the (throttled)Effect.
+         * @type {Map}
+         * @public
+         */
         this.bindings = new Map()
+
         const defaultOptions = {
             container: document.body,
             attribute: 'data-bind',
-            transformers: [],
+            transformers: {},
             defaultTransformers: {
                 field: [defaultFieldTransformer],
                 list: [defaultListTransformer],
@@ -17,10 +41,10 @@ class SimplyBind {
             throw new Error('bind needs at least options.root set')
         }
         this.options = Object.assign({}, defaultOptions, options)
-
         const attribute      = this.options.attribute
         const bindAttributes = [attribute+'-field',attribute+'-list',attribute+'-map']
         const bindSelector   = `[${attribute}-field],[${attribute}-list],[${attribute}-map]`
+        const transformAttribute = attribute+'-transform'
 
         const getBindingAttribute = (el) => {
             const foundAttribute = bindAttributes.find(attr => el.hasAttribute(attr))
@@ -32,9 +56,17 @@ class SimplyBind {
 
         // sets up the effect that updates the element if its
         // data binding value changes
-
         const render = (el) => {
             this.bindings.set(el, throttledEffect(() => {
+                if (!el.isConnected) {
+                    // el is no longer part of this document
+                    untrack(el, this.getBindingPath(el))
+                    destroy(this.bindings.get(el))
+                    // doing this here instead of in a mutationobserver
+                    // allows an element to be temporary removed and then inserted
+                    // without the binding having to be reset
+                    return
+                }
                 const context = {
                     templates: el.querySelectorAll(':scope > template'),
                     attribute: getBindingAttribute(el)
@@ -42,8 +74,9 @@ class SimplyBind {
                 context.path = this.getBindingPath(el)
                 context.value = getValueByPath(this.options.root, context.path)
                 context.element = el
+                track(el, context)
                 runTransformers(context)
-            }, 100))
+            }, 50))
         }
 
         // finds and runs applicable transformers
@@ -63,14 +96,16 @@ class SimplyBind {
                     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]) {
-                        transformers.push(this.options.transformers[t])
-                    } else {
-                        console.warn('No transformer with name '+t+' configured', {cause:context.element})
-                    }
-                })
+            if (context.element.hasAttribute(transformAttribute)) {
+                context.element.getAttribute(transformAttribute)
+                    .split(' ').filter(Boolean)
+                    .forEach(t => {
+                        if (this.options.transformers[t]) {
+                            transformers.push(this.options.transformers[t])
+                        } else {
+                            console.warn('No transformer with name '+t+' configured', {cause:context.element})
+                        }
+                    })
             }
             let next
             for (let transformer of transformers) {
@@ -87,7 +122,9 @@ class SimplyBind {
         // this renders each of those elements
         const applyBindings = (bindings) => {
             for (let bindingEl of bindings) {
-                render(bindingEl)
+                if (!this.bindings.get(bindingEl)) { // bindingEl may have moved from somewhere else in this document
+                    render(bindingEl)
+                }
             }
         }
 
@@ -141,8 +178,11 @@ class SimplyBind {
     /**
      * Finds the first matching template and creates a new DocumentFragment
      * with the correct data bind attributes in it (prepends the current path)
+     * @param Context context
+     * @return DocumentFragment
      */
-    applyTemplate(context) {
+    applyTemplate(context)
+    {
         const path      = context.path
         const templates = context.templates
         const list      = context.list
@@ -182,13 +222,28 @@ class SimplyBind {
         if (typeof index !== 'undefined') {
             clone.children[0].setAttribute(attribute+'-key',index)
         }
-        // keep track of the used template, so if that changes, the 
-        // item can be updated
-        clone.children[0].$bindTemplate = template
+        // keep track of the used template, so if that changes, the item can be updated
+        Object.defineProperty(
+            clone.children[0],
+            '$bindTemplate',
+            {
+                value: template,
+                enumerable: false,
+                writable: true,
+                configurable: true
+            }
+        )
+        // return clone, not the firstChild, so that all whitespace is cloned as well
         return clone
     }
 
-    getBindingPath(el) {
+    /**
+     * Returns the path referenced in either the field, list or map attribute
+     * @param HTMLElement el
+     * @return string The path referenced, or void
+     */
+    getBindingPath(el)
+    {
         const attributes = [
             this.options.attribute+'-field', 
             this.options.attribute+'-list',
@@ -205,7 +260,8 @@ class SimplyBind {
      * Finds the first template from an array of templates that
      * matches the given value. 
      */
-    findTemplate(templates, value) {
+    findTemplate(templates, value)
+    {
         const templateMatches = t => {
             // find the value to match against (e.g. data-bind="foo")
             let path = this.getBindingPath(t)
@@ -253,7 +309,8 @@ class SimplyBind {
         return template
     }
 
-    destroy() {
+    destroy()
+    {
         this.bindings.forEach(binding => {
             destroy(binding)
         })
@@ -272,11 +329,33 @@ export function bind(options)
     return new SimplyBind(options)
 }
 
+const tracking = new Map()
+
+export function trace(path)
+{
+    return tracking.get(path)
+}
+
+function track(el, context) {
+    if (!tracking.has(context.path)) {
+        tracking.set(context.path, [context])
+    } else {
+        tracking.get(context.path).push(context)
+    }
+}
+
+function untrack(el, path) {
+    let list = tracking.get(path)
+    list = list.filter(context => context.element == el)
+    tracking.set(path, list)
+}
+
 /**
  * Returns true if a matches b, either by having the
  * same string value, or matching string :empty against a falsy value
  */
-export function matchValue(a,b) {
+export function matchValue(a,b)
+{
     if (a==':empty' && !b) {
         return true
     }
@@ -290,10 +369,12 @@ export function matchValue(a,b) {
 }
 
 /**
- * Returns the value by walking the given path
- * as a json pointer, starting at root
- * if you have a property with a '.' in its name
- * urlencode the '.', e.g: %46
+ * Returns the value by walking the given path as a json pointer, starting at root
+ * if you have a property with a '.' in its name urlencode the '.', e.g: %46
+ * 
+ * @param HTMLElement root
+ * @param string path e.g. 'foo.bar'
+ * @return mixed the value found by walking the path from the root object or undefined
  */
 export function getValueByPath(root, path)
 {
@@ -321,7 +402,8 @@ export function getValueByPath(root, path)
  * Default transformer for data binding
  * Will be used unless overriden in the SimplyBind options parameter
  */
-export function defaultFieldTransformer(context) {
+export function defaultFieldTransformer(context)
+{
     const el             = context.element
     const templates      = context.templates
     const templatesCount = templates.length 
@@ -345,6 +427,15 @@ export function defaultFieldTransformer(context) {
             case 'A':
                 transformAnchor.call(this, context)
                 break
+            case 'IMG':
+                transformImage.call(this, contet)
+                break
+            case 'IFRAME':
+                transformIframe.call(this, context)
+                break
+            case 'META':
+                transformMeta.call(this, context)
+                break
             case 'TEMPLATE': // never touch templates!
                 break
             default:
@@ -355,7 +446,8 @@ export function defaultFieldTransformer(context) {
     return context
 }
 
-export function defaultListTransformer(context) {
+export function defaultListTransformer(context)
+{
     const el             = context.element
     const templates      = context.templates
     const templatesCount = templates.length 
@@ -373,7 +465,8 @@ export function defaultListTransformer(context) {
     return context
 }
 
-export function defaultMapTransformer(context) {
+export function defaultMapTransformer(context)
+{
     const el             = context.element
     const templates      = context.templates
     const templatesCount = templates.length 
@@ -399,7 +492,8 @@ export function defaultMapTransformer(context) {
  * 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) {
+export function transformArrayByTemplates(context)
+{
     const el             = context.element
     const templates      = context.templates
     const templatesCount = templates.length 
@@ -476,7 +570,8 @@ export function transformArrayByTemplates(context) {
  * Replaces,moves or removes existing DOM children if needed
  * Reuses (doesn't touch) DOM children if template doesn't change
  */
-export function transformObjectByTemplates(context) {
+export function transformObjectByTemplates(context)
+{
     const el             = context.element
     const templates      = context.templates
     const templatesCount = templates.length 
@@ -521,7 +616,8 @@ export function transformObjectByTemplates(context) {
     }
 }
 
-function getParentPath(el, attribute) {
+function getParentPath(el, attribute)
+{
     const parentEl  = el.parentElement?.closest(`[${attribute}-list],[${attribute}-map]`)
     if (!parentEl) {
         return ':root'
@@ -538,7 +634,8 @@ function getParentPath(el, attribute) {
  * data-bind attributes inside the template use the same
  * parent path as this html element uses
  */
-export function transformLiteralByTemplates(context) {
+export function transformLiteralByTemplates(context)
+{
     const el             = context.element
     const templates      = context.templates
     const value          = context.value
@@ -568,12 +665,16 @@ export function transformLiteralByTemplates(context) {
  * for radio/checkbox inputs it only sets the checked attribute to true/false
  * if the value attribute matches the current value
  * for other inputs the value attribute is updated
- * FIXME: handle radio/checkboxes in separate transformer
  */
-export function transformInput(context) {
-    const el    = context.element
-    const value = context.value
+export function transformInput(context)
+{
+    const el  = context.element
+    let value = context.value
 
+    transformElement(context)
+    if (typeof value == 'undefined') {
+        value = ''
+    }
     if (el.type=='checkbox' || el.type=='radio') {
         if (matchValue(el.value, value)) {
             el.checked = true
@@ -588,36 +689,80 @@ export function transformInput(context) {
 /**
  * Sets the value of the button, doesn't touch the innerHTML
  */
-export function transformButton(context) {
+export function transformButton(context)
+{
     const el    = context.element
     const value = context.value
 
-    if (!matchValue(el.value,value)) {
-        el.value = ''+value
-    }
+    transformElement(context)
+    setProperties(el, value, 'value')
 }
 
 /**
  * Sets the selected attribute of select options
  */
-export function transformSelect(context) {
-    const el    = context.element
-    const value = context.value
+export function transformSelect(context)
+{
+    const el  = context.element
+    let value = context.value
 
-    if (el.multiple) {
-        if (Array.isArray(value)) {
-            for (let option of el.options) {
-                if (value.indexOf(option.value)===false) {
-                    option.selected = false
-                } else {
-                    option.selected = true
+    if (value === null) {
+        value = ''
+    }
+    if (typeof value!='object') {
+        if (el.multiple) {
+            if (Array.isArray(value)) { //FIXME: cannot be true, since typeof != 'object'
+                for (let option of el.options) {
+                    if (value.indexOf(option.value)===false) {
+                        option.selected = false
+                    } else {
+                        option.selected = true
+                    }
                 }
             }
+        } else {
+            let option = el.options.find(o => matchValue(o.value,value))
+            if (option) {
+                option.selected = true
+                option.setAttribute('selected', true)
+            }
         }
-    } else {
-        let option = el.options.find(o => matchValue(o.value,value))
-        if (option) {
-            option.selected = true
+    } else { // value is a non-null object
+        if (value.options) {
+            setSelectOptions(el, value.options)
+        }
+        if (value.selected) {
+            transformSelect(Object.asssign({}, context, {value:value.selected}))
+        }
+        setProperties(el, value, 'name', 'id', 'selectedIndex', 'className') // allow innerHTML? if so call transformElement instead
+    }
+}
+
+export function addOption(select, option)
+{
+    if (!option) {
+        return
+    }
+    if (typeof option !== 'object') {
+        select.options.add(new Option(''+option))
+    } else if (option.text) {
+        select.options.add(new Option(option.text, option.value, option.defaultSelected, option.selected))
+    } else if (typeof option.value != 'undefined') {
+        select.options.add(new Option(''+option.value, option.value, option.defaultSelected, option.selected))
+    }
+}
+
+export function setSelectOptions(select,options)
+{
+    //@TODO: only update in case of changes?
+    select.innerHTML = ''
+    if (Array.isArray(options)) {
+        for (const option of options) {
+            addOption(select, option)
+        }
+    } else if (options && typeof options == 'object') {
+        for (const option in options) {
+            addOption(select, { text: options[option], value: option })
         }
     }
 }
@@ -626,30 +771,80 @@ export function transformSelect(context) {
  * Sets the innerHTML and href attribute of an anchor
  * TODO: support target, title, etc. attributes
  */
-export function transformAnchor(context) {
+export function transformAnchor(context)
+{
     const el    = context.element
     const value = context.value
 
-    if (value?.innerHTML && !matchValue(el.innerHTML, value.innerHTML)) {
-        el.innerHTML = ''+value.innerHTML
-    }
-    if (value?.href && !matchValue(el.href,value.href)) {
-        el.href = ''+value.href
-    }    
+    transformElement(context)
+    setProperties(el, value, 'title', 'target', 'href', 'name', 'newwindow', 'nofollow')
 }
 
-/**
- * sets the innerHTML of any HTML element
- */
-export function transformElement(context) {
+export function transformImage(context)
+{
+    const el    = context.element
+    const value = context.value
+
+    transformElement(context)
+    setProperties(el, value, 'title', 'alt', 'src')
+}
+
+export function transformIframe(context)
+{
     const el    = context.element
     const value = context.value
 
-    if (!matchValue(el.innerHTML, value)) {
-        if (typeof value=='undefined' || value==null) {
-            el.innerHTML = ''
+    transformElement(context)
+    setProperties(el, value, 'title', 'src')
+}
+
+export function transformMeta(context)
+{
+    const el    = context.element
+    const value = context.value
+
+    transformElement(context)
+    setProperties(el, value, 'content')    
+}
+/**
+ * sets the innerHTML and title and id properties of any HTML element
+ */
+export function transformElement(context)
+{
+    const el  = context.element
+    let value = context.value
+
+    if (typeof value=='undefined' || value==null) {
+        value = ''
+    }
+    let strValue = ''+value
+    if (typeof value!='object' || strValue.substring(0,8)!='[object ') {
+        el.innerHTML = strValue
+        return
+    }
+    setProperties(el, value, 'innerHTML', 'title', 'id', 'className')
+}
+
+/**
+ * Sets a list of properties on a dom element, equal to 
+ * the string value of a data object
+ * only updates the dom element if the property doesn't match
+ */
+export function setProperties(el, data, ...properties) {
+    if (!data || typeof data!=='object') {
+        return
+    }
+    for (const property of properties) {
+        if (typeof data[property] === 'undefined') {
+            continue
+        }
+        if (matchValue(el[property], data[property])) {
+            continue
+        }
+        if (data[property] === null) {
+            el[property] = ''
         } else {
-            el.innerHTML = ''+value
+            el[property] = ''+data[property]
         }
     }
-}
+}

package/src/model.mjs

@@ -1,4 +1,4 @@
-import {signal, effect, batch} from './state.mjs'
+import {signal, effect, throttledEffect, batch} from './state.mjs'
 
 /**
  * This class implements a pluggable data model, where you can
@@ -84,13 +84,13 @@ export function sort(options={}) {
 		}, options);
 		// then return the effect, which is called when
 		// either the data or the sort options change
-		return effect(() => {
+		return throttledEffect(() => {
 			const sort = this.state.options.sort
 			if (sort?.sortBy && sort?.direction) {
 				return data.current.toSorted(sort?.sortFn)
 			}
 			return data.current
-		})
+		}, 50)
 	}
 }
 
@@ -112,7 +112,7 @@ export function paging(options={}) {
 			pageSize: 20,
 			max: 1
 		}, options)
-		return effect(() => {
+		return throttledEffect(() => {
 			return batch(() => {
 				const paging = this.state.options.paging
 				if (!paging.pageSize) {
@@ -125,7 +125,7 @@ export function paging(options={}) {
 				const end = start + paging.pageSize
 				return data.current.slice(start, end)
 			})
-		})
+		}, 50)
 	}
 }
 
@@ -149,12 +149,12 @@ export function filter(options) {
 			throw new Error('a filter with this name already exists on this model')
 		}
 		this.state.options[options.name] = options
-		return effect(() => {
+		return throttledEffect(() => {
 			if (this.state.options[options.name].enabled) {
 				return data.current.filter(this.state.options[options.name].matches.bind(this))
 			}
 			return data.current
-		})
+		}, 50)
 	}
 }
 
@@ -176,7 +176,7 @@ export function columns(options={}) {
 	}
 	return function(data) {
 		this.state.options.columns = options
-		return effect(() => {
+		return throttledEffect(() => {
 			return data.current.map(input => {
 				let result = {}
 				for (let key of Object.keys(this.state.options.columns)) {
@@ -186,7 +186,7 @@ export function columns(options={}) {
 				}
 				return result
 			})
-		})
+		}, 50)
 	}
 }
 
@@ -229,13 +229,13 @@ export function scroll(options) {
 				})
 			}
 
-			effect(() => {
+			throttledEffect(() => {
 				scrollOptions.size = data.current.length * scrollOptions.rowHeight
 				scrollbar.style.height = scrollOptions.size + 'px'
-			})
+			}, 50)
 		}
 
-		return effect(() => {
+		return throttledEffect(() => {
 			if (scrollOptions.container) {
 				//TODO: add a resize listener so that if the size of the container
 				// changes, the rowCount is calculated again
@@ -252,6 +252,6 @@ export function scroll(options) {
 				start = end - scrollOptions.rowCount
 			}
 			return data.current.slice(start, end)
-		})
+		}, 50)
 	}
 }