simplyflow 0.7.5 → 0.7.7

package/src/dom.mjs

@@ -0,0 +1,99 @@
+import { signals, signal as stateSignal, notifyGet, notifySet, makeContext } from './state.mjs'
+
+const domSignalHandler = {
+    get: (target, property, receiver) => {
+        if (property===Symbol.xRay) {
+            return target // don't notifyGet here, this is only called by set
+        }
+        if (property===Symbol.Signal) {
+            return true
+        }
+        const value = target?.[property]
+        notifyGet(receiver, property)
+        if (typeof value === 'function') {
+            return value.bind(target) // make sure element functions are not linked to the proxy
+        }
+        if (value && typeof value == 'object') {
+            return stateSignal(value)
+        }
+        return value
+    },
+    has: (target, property) => {
+        let receiver = signals.get(target)
+        if (receiver) {
+            notifyGet(receiver, property)
+        }
+        return Object.hasOwn(target, property)
+    },
+    ownKeys: (target) => {
+        let receiver = signals.get(target) // receiver is not part of the trap arguments, so retrieve it here
+        if (receiver) {
+            notifyGet(receiver, iterate)
+        }
+        return Reflect.ownKeys(target)
+    }
+}
+
+export function signal(el) {
+    if (el[Symbol.xRay]) {
+        return el
+    }
+    if (!signals.has(el)) {
+        signals.set(el, new Proxy(el, domSignalHandler))
+        domListen(el, signals.get(el))
+    }
+    return signals.get(el)
+}
+
+const observers = new WeakMap()
+
+function domListen(el, signal) {
+    let oldContentHTML = el.innerHTML
+    let oldContentText = el.innerText
+    if (!observers.has(el)) {
+        const observer = new MutationObserver((mutationList, observer) => {
+            // collect changes
+            const changes = {}
+            for (const mutation of mutationList) {
+                if (mutation.type==='attributes') {
+                    // check if any listeners for each attribute
+                    changes[mutation.attributeName] = mutation.attributeOldValue
+                } else if (mutation.type==='subtree' || mutation.type==='characterData') {
+                    // change on innerHTML/innerText
+                    if (el.innerHTML != oldContentHTML) {
+                        changes.innerHTML = oldContentHTML
+                        oldContentHTML = el.innerHTML
+                    }
+                    if (el.innerText != oldContentText) {
+                        changes.innerText = oldContentText
+                        oldContentText = el.innerText
+                    }
+                }
+            }
+            for (const prop in changes) {
+                notifySet(signal, makeContext(prop, { was: changes[prop], now: el[prop] }))
+            }
+        })
+        observer.observe(el, {
+            characterData: true,
+            subtree: true,
+            attributes: true,
+            attributesOldValue: true
+        })
+        observers.set(el, observer)
+        //@TODO: unregister the observer when el is removed from the dom (after a timeout)
+        if (el.matches('input, textarea, select')) {
+            let prevValue = el.value
+            el.addEventListener('change', (evt) => {
+                notifySet(signal, makeContext('value', { was: prevValue, now: el.value }))
+                prevValue = el.value
+            })
+            if (el.matches('input, textarea')) {
+                el.addEventListener('input', (evt) => {
+                    notifySet(signal, makeContext('value', { was: prevValue, now: el.value }))
+                    prevValue = el.value
+                })
+            }
+        }
+    }
+}

package/src/flow.mjs

@@ -2,6 +2,7 @@ import { bind } from './bind.mjs'
 import * as model from './model.mjs'
 import * as state from './state.mjs'
 import './render.mjs'
+import * as dom from './dom.mjs'
 
 if (!globalThis.simply) {
 	globalThis.simply = {}
@@ -9,7 +10,8 @@ if (!globalThis.simply) {
 Object.assign(globalThis.simply, {
 	bind,
 	flow: model,
-	state
+	state,
+	dom
 })
 
 export default globalThis.simply

package/src/model.mjs

@@ -198,7 +198,7 @@ export function columns(options={}) {
 				let result = {}
 				for (let key of Object.keys(this.state.options.columns)) {
 					if (!this.state.options.columns[key]?.hidden) {
-						result[key] = input[key]
+						result[key] = input[key] ?? null
 					}
 				}
 				return result

package/src/state.mjs

@@ -68,7 +68,7 @@ const signalHandler = {
     set: (target, property, value, receiver) => {
         value = value?.[Symbol.xRay] || value // unwraps signal
         //FIXME: if value contains child objects, these may be signals as well... so do this recursively
-        unwrap(value)
+        //unwrap(value)
         let current = target[property]
         if (current!==value) {
             target[property] = value
@@ -116,14 +116,14 @@ const signalHandler = {
  * Makes sure that a given object or function always uses the same
  * signal
  */
-const signals = new WeakMap()
+export const signals = new WeakMap()
 
 /**
  * Creates a new signal proxy of the given object, that intercepts get/has and set/delete
  * to allow reactive functions to be triggered when signal values change.
  */
 export function signal(v) {
-    unwrap(v)
+    //unwrap(v)
     if (v[Symbol.Signal]) { // avoid wrapping a Signal inside a Signal
         let target = v[Symbol.xRay]
         if (!signals.has(target)) {
@@ -136,52 +136,6 @@ export function signal(v) {
     return signals.get(v)
 }
 
-const domSignalHandler = {
-    get: (target, property, receiver) => {
-        if (property===Symbol.xRay) {
-            return target // don't notifyGet here, this is only called by set
-        }
-        if (property===Symbol.Signal) {
-            return true
-        }
-        const value = target?.[property]
-        domListen(target, receiver)
-        notifyGet(receiver, property)
-        if (typeof value === 'function') {
-            return value.bind(target) // make sure element functions are not linked to the proxy
-        }
-        if (value && typeof value == 'object') {
-            return signal(value)
-        }
-        return value
-    },
-    has: (target, property) => {
-        let receiver = signals.get(target)
-        if (receiver) {
-            domListen(target, receiver)
-            notifyGet(receiver, property)
-        }
-        return Object.hasOwn(target, property)
-    },
-    ownKeys: (target) => {
-        let receiver = signals.get(target) // receiver is not part of the trap arguments, so retrieve it here
-        if (receiver) {
-            domListen(target, receiver)
-            notifyGet(receiver, iterate)
-        }
-        return Reflect.ownKeys(target)
-    }
-}
-
-export function domSignal(el) {
-    if (el[Symbol.xRay]) {
-        return el
-    }
-    if (!signals.has(el)) {
-        signals.set(el, new Proxy(el, domSignalHandler))
-    }
-    return signals.get(el)
-}
 
 let tracers = []
 let tracing = false
@@ -254,7 +208,7 @@ let batchMode = 0
  * Triggers any reactor function that depends on this signal
  * to re-compute its values
  */
-function notifySet(self, context={}) {
+export function notifySet(self, context={}) {
     if (disableTracking) {
         return
     }
@@ -287,60 +241,8 @@ function notifySet(self, context={}) {
     }
 }
 
-const observers = new WeakMap()
-
-function domListen(el, signal) {
-    let oldContentHTML = el.innerHTML
-    let oldContentText = el.innerText
-    if (!observers.has(el)) {
-        const observer = new MutationObserver((mutationList, observer) => {
-            // collect changes
-            const changes = {}
-            for (const mutation of mutationList) {
-                if (mutation.type==='attributes') {
-                    // check if any listeners for each attribute
-                    changes[mutation.attributeName] = mutation.attributeOldValue
-                } else if (mutation.type==='subtree' || mutation.type==='characterData') {
-                    // change on innerHTML/innerText
-                    if (el.innerHTML != oldContentHTML) {
-                        changes.innerHTML = oldContentHTML
-                        oldContentHTML = el.innerHTML
-                    }
-                    if (el.innerText != oldContentText) {
-                        changes.innerText = oldContentText
-                        oldContentText = el.innerText
-                    }
-                }
-            }
-            for (const prop in changes) {
-                notifySet(signal, makeContext(prop, { was: changes[prop], now: el[prop] }))
-            }
-        })
-        observer.observe(el, {
-            characterData: true,
-            subtree: true,
-            attributes: true,
-            attributesOldValue: true
-        })
-        observers.set(el, observer)
-        //@TODO: unregister the observer when el is removed from the dom (after a timeout)
-        if (el.matches('input, textarea, select')) {
-            let prevValue = el.value
-            el.addEventListener('change', (evt) => {
-                notifySet(signal, makeContext('value', { was: prevValue, now: el.value }))
-                prevValue = el.value
-            })
-            if (el.matches('input, textarea')) {
-                el.addEventListener('input', (evt) => {
-                    notifySet(signal, makeContext('value', { was: prevValue, now: el.value }))
-                    prevValue = el.value
-                })
-            }
-        }
-    }
-}
 
-function makeContext(property, change) {
+export function makeContext(property, change) {
     let context = new Map()
     if (typeof property === 'object') {
         for (let prop in property) {
@@ -374,7 +276,7 @@ function clearContext(listener) {
  * then it adds the current reactor (top of this stack) to its
  * listeners. These are later called if this property changes
  */
-function notifyGet(self, property) {
+export function notifyGet(self, property) {
     if (disableTracking) {
         return
     }
@@ -734,7 +636,7 @@ export function untracked(fn) {
 let seen = new WeakMap()
 
 function innerUnwrap(ob) {
-    if (!ob || typeof ob!=='object' || seen.has(ob)) {
+    if (!ob || typeof ob!=='object' || ob instanceof HTMLElement || seen.has(ob)) {
         return
     }
     seen.set(ob, true)