@srfnstack/fntags 0.3.6 → 0.3.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@srfnstack/fntags",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "author": "Robert Kempton <r@snow87.com>",
   "private": false,
   "homepage": "https://github.com/srfnstack/fntags",

package/src/fntags.mjs

@@ -29,9 +29,21 @@ export function h (tag, ...children) {
   if (isAttrs(children[firstChildIdx])) {
     const attrs = children[firstChildIdx]
     firstChildIdx += 1
+    let hasValue = false
     for (const a in attrs) {
+      // set value last to ensure value constraints are set before trying to set the value to avoid modification
+      // For example, when using a range and specifying a min and max
+      //  if the value is set first and is outside the default 1 to 100 range
+      //  the value will be adjusted to be within the range, even though the value attribute will be set correctly
+      if (a === 'value') {
+        hasValue = true
+        continue
+      }
       setAttribute(a, attrs[a], element)
     }
+    if (hasValue) {
+      setAttribute('value', attrs.value, element)
+    }
   }
   for (let i = firstChildIdx; i < children.length; i++) {
     const child = children[i]
@@ -169,6 +181,16 @@ export const fnstate = (initialValue, mapKey) => {
    */
   ctx.state.bindAs = (element, update) => doBindAs(ctx, element ?? ctx.state, update)
 
+  /**
+   * Bind a property of an object stored in this state as a simple value.
+   *
+   * Shortcut for `mystate.bindAs((current)=> current[prop])`
+   *
+   * @param {string} prop The object property to bind as
+   * @returns {(HTMLDivElement|Text)[]|HTMLDivElement|Text}
+   */
+  ctx.state.bindProp = (prop) => doBindAs(ctx, (st) => st[prop])
+
   /**
    * Bind attribute values to state changes
    * @param [attribute] A function that returns an attribute value. If not passed, defaults to the state's value