@srfnstack/fntags 0.4.6 → 0.5.0

package/package.json

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

package/src/fnroute.d.mts

@@ -22,17 +22,17 @@
  *          )
  *      )
  *
- * @param {Object|Node} children The attributes and children of this element.
+ * @param {(Object|Node)[]} children The attributes and children of this element.
  * @returns {HTMLDivElement} A div element that will only be displayed if the current route starts with the path attribute.
  */
-export function route(...children: any | Node): HTMLDivElement;
+export function route(...children: (any | Node)[]): HTMLDivElement;
 /**
  * An element that only renders the first route that matches and updates when the route is changed
  * The primary purpose of this element is to provide catchall routes for not found pages and path variables
- * @param {any} children
+ * @param {(Object|Node)[]} children
  * @returns {Node|(()=>Node)}
  */
-export function routeSwitch(...children: any): Node | (() => Node);
+export function routeSwitch(...children: (any | Node)[]): Node | (() => Node);
 /**
  * The main function of this library. It will load the route at the specified path and render it into the container element.
  * @param {object} options
@@ -54,10 +54,10 @@ export function modRouter({ routePath, attrs, onerror, frame, sendRawPath, forma
 }): HTMLElement;
 /**
  * A link element that is a link to another route in this single page app
- * @param {any} children The attributes of the anchor element and any children
+ * @param {(Object|Node)[]} children The attributes of the anchor element and any children
  * @returns {HTMLAnchorElement} An anchor element that will navigate to the specified route when clicked
  */
-export function fnlink(...children: any): HTMLAnchorElement;
+export function fnlink(...children: (any | Node)[]): HTMLAnchorElement;
 /**
  * A function to navigate to the specified route
  * @param {string} route The route to navigate to

package/src/fnroute.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"fnroute.d.mts","sourceRoot":"","sources":["fnroute.mjs"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,mCAHW,MAAO,IAAI,GACT,cAAc,CAoB1B;AAED;;;;;GAKG;AACH,yCAHW,GAAG,GACD,IAAI,GAAC,CAAC,MAAI,IAAI,CAAC,CAwB3B;AAeD;;;;;;;;;;GAUG;AACH;eARW,MAAM;WACN,MAAM;qBACE,KAAK,gBAAgB,MAAM,KAAG,IAAI,GAAC,IAAI;kBACxC,IAAI,UAAU,MAAM,KAAG,IAAI;iBAClC,OAAO;uBACA,MAAM,KAAG,MAAM;IACrB,WAAW,CA0DtB;AAwBD;;;;GAIG;AACH,oCAHW,GAAG,GACD,iBAAiB,CAuB7B;AAED;;;;;;GAMG;AACH,4BALW,MAAM,WACN,GAAG,YACH,OAAO,WACP,OAAO,QA6CjB;AA6DD;;;;;;GAMG;AACH,qDAFY,MAAI,IAAI,CAanB;AAED;;;GAGG;AACH,sCAFW,MAAM,QAOhB;AApFD;;;GAGG;AAEH;;;GAGG;AACH,6BAFU,OAAO,cAAc,EAAE,OAAO,CAAC,cAAc,CAAC,CAEf;AAEzC;;;GAGG;AAEH;;;GAGG;AACH,wBAFU,OAAO,cAAc,EAAE,OAAO,CAAC,SAAS,CAAC,CAO/C;AAEJ;;GAEG;AACH;;;GAGG;AACH,gCAFU,UAAU,CAEgC;AACpD;;;GAGG;AACH,+BAFU,UAAU,CAE8B;AAClD;;;GAGG;AACH,kCAFU,UAAU,CAEoC;;;;;;;;wBA/B3C;IAAC,YAAY,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,GAAG,CAAA;CAAC;yBAetD,MAAM"}
+{"version":3,"file":"fnroute.d.mts","sourceRoot":"","sources":["fnroute.mjs"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,mCAHW,CAAC,MAAO,IAAI,CAAC,EAAE,GACb,cAAc,CAoB1B;AAED;;;;;GAKG;AACH,yCAHW,CAAC,MAAO,IAAI,CAAC,EAAE,GACb,IAAI,GAAC,CAAC,MAAI,IAAI,CAAC,CAwB3B;AAeD;;;;;;;;;;GAUG;AACH;eARW,MAAM;WACN,MAAM;qBACE,KAAK,gBAAgB,MAAM,KAAG,IAAI,GAAC,IAAI;kBACxC,IAAI,UAAU,MAAM,KAAG,IAAI;iBAClC,OAAO;uBACA,MAAM,KAAG,MAAM;IACrB,WAAW,CA0DtB;AAwBD;;;;GAIG;AACH,oCAHW,CAAC,MAAO,IAAI,CAAC,EAAE,GACb,iBAAiB,CAuB7B;AAED;;;;;;GAMG;AACH,4BALW,MAAM,WACN,GAAG,YACH,OAAO,WACP,OAAO,QA6CjB;AA6DD;;;;;;GAMG;AACH,qDAFY,MAAI,IAAI,CAanB;AAED;;;GAGG;AACH,sCAFW,MAAM,QAOhB;AApFD;;;GAGG;AAEH;;;GAGG;AACH,6BAFU,OAAO,cAAc,EAAE,OAAO,CAAC,cAAc,CAAC,CAEf;AAEzC;;;GAGG;AAEH;;;GAGG;AACH,wBAFU,OAAO,cAAc,EAAE,OAAO,CAAC,SAAS,CAAC,CAO/C;AAEJ;;GAEG;AACH;;;GAGG;AACH,gCAFU,UAAU,CAEgC;AACpD;;;GAGG;AACH,+BAFU,UAAU,CAE8B;AAClD;;;GAGG;AACH,kCAFU,UAAU,CAEoC;;;;;;;;wBA/B3C;IAAC,YAAY,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,GAAG,CAAA;CAAC;yBAetD,MAAM"}

package/src/fnroute.mjs

@@ -28,7 +28,7 @@ import { fnstate, getAttrs, h, isAttrs, renderNode } from './fntags.mjs'
  *          )
  *      )
  *
- * @param {Object|Node} children The attributes and children of this element.
+ * @param {(Object|Node)[]} children The attributes and children of this element.
  * @returns {HTMLDivElement} A div element that will only be displayed if the current route starts with the path attribute.
  */
 export function route (...children) {
@@ -54,7 +54,7 @@ export function route (...children) {
 /**
  * An element that only renders the first route that matches and updates when the route is changed
  * The primary purpose of this element is to provide catchall routes for not found pages and path variables
- * @param {any} children
+ * @param {(Object|Node)[]} children
  * @returns {Node|(()=>Node)}
  */
 export function routeSwitch (...children) {
@@ -187,7 +187,7 @@ function updatePathParameters () {
 
 /**
  * A link element that is a link to another route in this single page app
- * @param {any} children The attributes of the anchor element and any children
+ * @param {(Object|Node)[]} children The attributes of the anchor element and any children
  * @returns {HTMLAnchorElement} An anchor element that will navigate to the specified route when clicked
  */
 export function fnlink (...children) {

package/src/fntags.d.mts

@@ -42,18 +42,17 @@ export function fntemplate(templateFn: (any: any) => Node): (any: any) => Node;
 /**
  * @template T The type of data stored in the state container
  * @typedef FnStateObj A container for a state value that can be bound to.
- * @property {(element: Node|any|(()=>Node|any), update?: (Node)=>void) => Node|(() => Node)} bindAs Bind this state to the given element. This causes the element to update when state changes.
- * If called with no parameters, the state's value will be rendered as an element. If the first parameters is not a function,
- * the second parameter (the update function) must be provided and must be a function. This function receives the node the state is bound to.
- * @property {(parent: Node|any|(()=>Node|any),element: Node|any|(()=>Node|any), update?: (Node)=>void)=> Node|(()=> Node)} bindChildren Bind the values of this state to the given element.
+ * @property {(element?: ()=>(Node|any))=>Node} bindAs Bind this state to the given element function. This causes the element to be replaced when state changes.
+ * If called with no parameters, the state's value will be rendered as an element.
+ * @property {(parent: ()=>(Node|any)|any|Node, element: (childState: FnState)=>(Node|any))=>Node} bindChildren Bind the values of this state to the given element.
  * Values are items/elements of an array.
  * If the current value is not an array, this will behave the same as bindAs.
- * @property {((prop: string)=>Node)|(()=>Node)} bindProp Bind to a property of an object stored in this state instead of the state itself.
+ * @property {(prop: string)=>Node} bindProp Bind to a property of an object stored in this state instead of the state itself.
  * Shortcut for `mystate.bindAs((current)=> current[prop])`
- * @property {(attribute: string)=>any} bindAttr Bind attribute values to state changes
- * @property {(style: string)=> string} bindStyle Bind style values to state changes
- * @property {(element: Node|any|(()=>Node|any), update?: ((Node)=>void))=>Node|(()=>Node)} bindSelect Bind selected state to an element
- * @property {(attribute: string)=>any} bindSelectAttr Bind selected state to an attribute
+ * @property {(attribute?: ()=>(string|any))=>any} bindAttr Bind attribute values to state changes
+ * @property {(style?: ()=>string) => string} bindStyle Bind style values to state changes
+ * @property {(element?: ()=>(Node|any))=>Node} bindSelect Bind selected state to an element
+ * @property {(attribute?: ()=>(string|any))=>any} bindSelectAttr Bind selected state to an attribute
  * @property {(key: any)=>void} select Mark the element with the given key as selected
  * where the key is identified using the mapKey function passed on creation of the fnstate.
  * This causes the bound select functions to be executed.
@@ -119,38 +118,37 @@ export function styled<T extends HTMLElement | SVGElement>(style: object | strin
  */
 export type FnStateObj<T> = {
     /**
-     * Bind this state to the given element. This causes the element to update when state changes.
-     * If called with no parameters, the state's value will be rendered as an element. If the first parameters is not a function,
-     * the second parameter (the update function) must be provided and must be a function. This function receives the node the state is bound to.
+     * Bind this state to the given element function. This causes the element to be replaced when state changes.
+     * If called with no parameters, the state's value will be rendered as an element.
      */
-    bindAs: (element: Node | any | (() => Node | any), update?: (Node: any) => void) => Node | (() => Node);
+    bindAs: (element?: () => (Node | any)) => Node;
     /**
      * Bind the values of this state to the given element.
      * Values are items/elements of an array.
      * If the current value is not an array, this will behave the same as bindAs.
      */
-    bindChildren: (parent: Node | any | (() => Node | any), element: Node | any | (() => Node | any), update?: (Node: any) => void) => Node | (() => Node);
+    bindChildren: (parent: () => (Node | any) | any | Node, element: (childState: any) => (Node | any)) => Node;
     /**
      * Bind to a property of an object stored in this state instead of the state itself.
      * Shortcut for `mystate.bindAs((current)=> current[prop])`
      */
-    bindProp: ((prop: string) => Node) | (() => Node);
+    bindProp: (prop: string) => Node;
     /**
      * Bind attribute values to state changes
      */
-    bindAttr: (attribute: string) => any;
+    bindAttr: (attribute?: () => (string | any)) => any;
     /**
      * Bind style values to state changes
      */
-    bindStyle: (style: string) => string;
+    bindStyle: (style?: () => string) => string;
     /**
      * Bind selected state to an element
      */
-    bindSelect: (element: Node | any | (() => Node | any), update?: (Node: any) => void) => Node | (() => Node);
+    bindSelect: (element?: () => (Node | any)) => Node;
     /**
      * Bind selected state to an attribute
      */
-    bindSelectAttr: (attribute: string) => any;
+    bindSelectAttr: (attribute?: () => (string | any)) => any;
     /**
      * Mark the element with the given key as selected
      * where the key is identified using the mapKey function passed on creation of the fnstate.

package/src/fntags.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"fntags.d.mts","sourceRoot":"","sources":["fntags.mjs"],"names":[],"mappings":"AAAA;;GAEG;AACH;;;;;;;;;;;;;;;;;;;GAmBG;AACH,2DALW,MAAM,eACN,IAAI,MAAO,KA6CrB;AAUD;;;;;;;;;;;;;;;GAeG;AACH,qDAJkB,IAAI,iBACH,IAAI,CA0DtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH;;;GAGG;AAEH;;;;;;;;;;GAUG;AACH,iEAPgB,GAAG,cA4KlB;AAqSD;;;;GAIG;AACH,iCAHW,GAAG,GACD,IAAI,CAuBhB;AAwFD;;;;GAIG;AACH,6BAHW,GAAG,GACD,OAAO,CAInB;AAED;;;;GAIG;AACH,mCAHW,GAAG,GACF,MAAM,CAIjB;AAED;;;;;;;;;;GAUG;AACH,kEALW,MAAM,GAAC,MAAM,OACb,MAAM,YACN,MAAM,EAAE,GAAC,IAAI,EAAE,KAezB;;;;;;;;;;sBAhpBuB,IAAI,GAAC,GAAG,GAAC,CAAC,MAAI,IAAI,GAAC,GAAG,CAAC,0BAAmB,IAAI,KAAK,IAAI,GAAC,CAAC,MAAM,IAAI,CAAC;;;;;;2BAGrE,IAAI,GAAC,GAAG,GAAC,CAAC,MAAI,IAAI,GAAC,GAAG,CAAC,WAAU,IAAI,GAAC,GAAG,GAAC,CAAC,MAAI,IAAI,GAAC,GAAG,CAAC,0BAAmB,IAAI,KAAI,IAAI,GAAC,CAAC,MAAK,IAAI,CAAC;;;;;sBAGpG,MAAM,KAAG,IAAI,WAAO,IAAI;;;;0BAEpB,MAAM,KAAG,GAAG;;;;uBAChB,MAAM,KAAI,MAAM;;;;0BACd,IAAI,GAAC,GAAG,GAAC,CAAC,MAAI,IAAI,GAAC,GAAG,CAAC,0BAAoB,IAAI,KAAI,IAAI,GAAC,CAAC,MAAI,IAAI,CAAC;;;;gCAChE,MAAM,KAAG,GAAG;;;;;;kBAClB,GAAG,KAAG,IAAI;;;;cAGhB,MAAK,GAAG;;;;;qBACC,CAAC,KAAG,IAAI;;;;;;oBAEV,MAAM,KAAG,GAAG;;;;oBAGZ,MAAM,SAAS,GAAG,mBAAmB,OAAO,KAAG,IAAI;;;;uCAClC,CAAC,YAAY,CAAC,KAAG,IAAI,KAAK,IAAI;;;;oBAC7C,OAAO,KAAG,EAAE;;;;eACrB,OAAO;;;;;sDAKqB,CAAC,KAAG,CAAC"}
+{"version":3,"file":"fntags.d.mts","sourceRoot":"","sources":["fntags.mjs"],"names":[],"mappings":"AAAA;;GAEG;AACH;;;;;;;;;;;;;;;;;;;GAmBG;AACH,2DALW,MAAM,eACN,IAAI,MAAO,KA6CrB;AAUD;;;;;;;;;;;;;;;GAeG;AACH,qDAJkB,IAAI,iBACH,IAAI,CA0DtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH;;;GAGG;AAEH;;;;;;;;;;GAUG;AACH,iEAPgB,GAAG,cA+KlB;AAiRD;;;;GAIG;AACH,iCAHW,GAAG,GACD,IAAI,CAuBhB;AAwFD;;;;GAIG;AACH,6BAHW,GAAG,GACD,OAAO,CAInB;AAED;;;;GAIG;AACH,mCAHW,GAAG,GACF,MAAM,CAIjB;AAED;;;;;;;;;;GAUG;AACH,kEALW,MAAM,GAAC,MAAM,OACb,MAAM,YACN,MAAM,EAAE,GAAC,IAAI,EAAE,KAezB;;;;;;;;;uBA9nBwB,MAAI,CAAC,IAAI,GAAC,GAAG,CAAC,KAAG,IAAI;;;;;;2BAEvB,MAAI,CAAC,IAAI,GAAC,GAAG,CAAC,GAAC,GAAG,GAAC,IAAI,gCAAkC,CAAC,IAAI,GAAC,GAAG,CAAC,KAAG,IAAI;;;;;qBAG5E,MAAM,KAAG,IAAI;;;;2BAEP,MAAI,CAAC,MAAM,GAAC,GAAG,CAAC,KAAG,GAAG;;;;wBAC1B,MAAI,MAAM,KAAK,MAAM;;;;2BACnB,MAAI,CAAC,IAAI,GAAC,GAAG,CAAC,KAAG,IAAI;;;;iCACnB,MAAI,CAAC,MAAM,GAAC,GAAG,CAAC,KAAG,GAAG;;;;;;kBAC7B,GAAG,KAAG,IAAI;;;;cAGhB,MAAK,GAAG;;;;;qBACC,CAAC,KAAG,IAAI;;;;;;oBAEV,MAAM,KAAG,GAAG;;;;oBAGZ,MAAM,SAAS,GAAG,mBAAmB,OAAO,KAAG,IAAI;;;;uCAClC,CAAC,YAAY,CAAC,KAAG,IAAI,KAAK,IAAI;;;;oBAC7C,OAAO,KAAG,EAAE;;;;eACrB,OAAO;;;;;sDAKqB,CAAC,KAAG,CAAC"}

package/src/fntags.mjs

@@ -148,18 +148,17 @@ export function fntemplate (templateFn) {
 /**
  * @template T The type of data stored in the state container
  * @typedef FnStateObj A container for a state value that can be bound to.
- * @property {(element: Node|any|(()=>Node|any), update?: (Node)=>void) => Node|(() => Node)} bindAs Bind this state to the given element. This causes the element to update when state changes.
- * If called with no parameters, the state's value will be rendered as an element. If the first parameters is not a function,
- * the second parameter (the update function) must be provided and must be a function. This function receives the node the state is bound to.
- * @property {(parent: Node|any|(()=>Node|any),element: Node|any|(()=>Node|any), update?: (Node)=>void)=> Node|(()=> Node)} bindChildren Bind the values of this state to the given element.
+ * @property {(element?: ()=>(Node|any))=>Node} bindAs Bind this state to the given element function. This causes the element to be replaced when state changes.
+ * If called with no parameters, the state's value will be rendered as an element.
+ * @property {(parent: ()=>(Node|any)|any|Node, element: (childState: FnState)=>(Node|any))=>Node} bindChildren Bind the values of this state to the given element.
  * Values are items/elements of an array.
  * If the current value is not an array, this will behave the same as bindAs.
- * @property {((prop: string)=>Node)|(()=>Node)} bindProp Bind to a property of an object stored in this state instead of the state itself.
+ * @property {(prop: string)=>Node} bindProp Bind to a property of an object stored in this state instead of the state itself.
  * Shortcut for `mystate.bindAs((current)=> current[prop])`
- * @property {(attribute: string)=>any} bindAttr Bind attribute values to state changes
- * @property {(style: string)=> string} bindStyle Bind style values to state changes
- * @property {(element: Node|any|(()=>Node|any), update?: ((Node)=>void))=>Node|(()=>Node)} bindSelect Bind selected state to an element
- * @property {(attribute: string)=>any} bindSelectAttr Bind selected state to an attribute
+ * @property {(attribute?: ()=>(string|any))=>any} bindAttr Bind attribute values to state changes
+ * @property {(style?: ()=>string) => string} bindStyle Bind style values to state changes
+ * @property {(element?: ()=>(Node|any))=>Node} bindSelect Bind selected state to an element
+ * @property {(attribute?: ()=>(string|any))=>any} bindSelectAttr Bind selected state to an attribute
  * @property {(key: any)=>void} select Mark the element with the given key as selected
  * where the key is identified using the mapKey function passed on creation of the fnstate.
  * This causes the bound select functions to be executed.
@@ -216,22 +215,21 @@ export function fnstate (initialValue, mapKey) {
   /**
    * Bind this state to the given element
    *
-   * @param [element] The element to bind to. If not a function, an update function must be passed. If not passed, defaults to the state's value
-   * @param [update] If passed this will be executed directly when the state changes with no other intervention
-   * @returns {(HTMLDivElement|Text)[]|HTMLDivElement|Text}
+   * @param {((T)=>(Node|any))?} [element] The element to bind to. If not a function, an update function must be passed. If not passed, defaults to the state's value
+   * @returns {()=>Node}
    */
-  ctx.state.bindAs = (element, update) => doBindAs(ctx, element ?? ctx.state, update)
+  ctx.state.bindAs = (element) => doBindAs(ctx, element ?? ctx.state)
 
   /**
    * Bind the values of this state to the given element.
    * Values are items/elements of an array.
    * If the current value is not an array, this will behave the same as bindAs.
    *
-   * @param parent The parent to bind the children to.
-   * @param element The element to bind to. If not a function, an update function must be passed
-   * @param update If passed this will be executed directly when the state of any value changes with no other intervention
+   * @param {(()=>(Node|any)) | Node | any} parent The parent to bind the children to.
+   * @param {(childState: FnState)=>(Node|any)} element A function that receives each element wrapped as a fnstate and produces an element
+   * @returns {Node}
    */
-  ctx.state.bindChildren = (parent, element, update) => doBindChildren(ctx, parent, element, update)
+  ctx.state.bindChildren = (parent, element) => doBindChildren(ctx, parent, element)
 
   /**
    * Bind to a property of an object stored in this state instead of the state itself.
@@ -239,35 +237,35 @@ export function fnstate (initialValue, mapKey) {
    * Shortcut for `mystate.bindAs((current)=> current[prop])`
    *
    * @param {string} prop The object property to bind as
-   * @returns {(HTMLDivElement|Text)[]|HTMLDivElement|Text}
+   * @returns {()=>Node}
    */
   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
-   * @returns {()=>Node} A function that calls the passed function, with some extra metadata
+   * @param {(()=>(string|any))?} [attribute] A function that returns an attribute value. If not passed, defaults to the state's value
+   * @returns {()=>(string|any)} A function that calls the passed function, with some extra metadata
    */
   ctx.state.bindAttr = (attribute) => doBindAttr(ctx.state, attribute ?? ctx.state)
 
   /**
    * Bind style values to state changes
-   * @param [style] A function that returns a style's value. If not passed, defaults to the state's value
+   * @param {(()=>string)?} [style] A function that returns a style's value. If not passed, defaults to the state's value
    * @returns {()=>Node} A function that calls the passed function, with some extra metadata
    */
   ctx.state.bindStyle = (style) => doBindStyle(ctx.state, style ?? ctx.state)
 
   /**
    * Bind select and deselect to an element
-   * @param [element] The element to bind to. If not a function, an update function must be passed. If not passed, defaults to the state's value
-   * @param update If passed this will be executed directly when the state changes with no other intervention
+   * @param {(()=>(Node|any))?} [element] The element to bind to. If not passed, defaults to the state's value
+   * @returns {()=>Node}
    */
-  ctx.state.bindSelect = (element, update) => doBindSelect(ctx, element ?? ctx.state, update)
+  ctx.state.bindSelect = (element) => doBindSelect(ctx, element ?? ctx.state)
 
   /**
    * Bind select and deselect to an attribute
-   * @param [attribute] A function that returns an attribute value. If not passed, defaults to the state's value
-   * @returns {()=>any} A function that calls the passed function, with some extra metadata
+   * @param {(()=>(string|any))?} [attribute] A function that returns an attribute value. If not passed, defaults to the state's value
+   * @returns {()=>(string|any)} A function that calls the passed function, with some extra metadata
    */
   ctx.state.bindSelectAttr = (attribute) => doBindSelectAttr(ctx, attribute ?? ctx.state)
 
@@ -286,6 +284,7 @@ export function fnstate (initialValue, mapKey) {
 
   /**
    * Perform an Object.assign() on the current state using the provided update
+   * @param {T} [update]
    */
   ctx.state.assign = (update) => ctx.state(Object.assign(ctx.currentValue, update))
 
@@ -294,6 +293,7 @@ export function fnstate (initialValue, mapKey) {
    *
    * This returns a reference to the real current value. If you perform any modifications to the object, be sure to call setPath after you're done or the changes
    * will not be reflected correctly.
+   * @param {string} [path] a json path type path that points to a property
    */
   ctx.state.getPath = (path) => {
     if (typeof path !== 'string') {
@@ -318,9 +318,9 @@ export function fnstate (initialValue, mapKey) {
 
   /**
    * Set a value at the given property path
-   * @param path The JSON path of the value to set
-   * @param value The value to set the path to
-   * @param fillWithObjects Whether to non object values with new empty objects.
+   * @param {string} path The JSON path of the value to set
+   * @param {any} value The value to set the path to
+   * @param {boolean} fillWithObjects Whether to non object values with new empty objects.
    */
   ctx.state.setPath = (path, value, fillWithObjects = false) => {
     const s = path.split('.')
@@ -346,12 +346,14 @@ export function fnstate (initialValue, mapKey) {
 
   /**
    * Register a callback that will be executed whenever the state is changed
-   * @return a function to stop the subscription
+   * @param {(newValue:T,oldValue:T)=>void} callback
+   * @return {()=>void} a function to stop the subscription
    */
   ctx.state.subscribe = (callback) => doSubscribe(ctx, ctx.observers, callback)
 
   /**
    * Remove all the observers and optionally reset the value to it's initial value
+   * @param {boolean} reInit whether to reset the state to it's initial value
    */
   ctx.state.reset = (reInit) => doReset(ctx, reInit, initialValue)
 
@@ -428,13 +430,13 @@ function doSelect (ctx, key) {
   }
 }
 
-function doBindChildren (ctx, parent, element, update) {
+function doBindChildren (ctx, parent, element) {
   parent = renderNode(parent)
   if (parent === undefined || parent.nodeType === undefined) {
     throw new Error('You must provide a parent element to bind the children to. aka Need Bukkit.')
   }
-  if (typeof element !== 'function' && typeof update !== 'function') {
-    throw new Error('You must pass an update function when passing a non function element')
+  if (typeof element !== 'function') {
+    throw new Error('You must pass a function to produce child elements.')
   }
   if (typeof ctx.mapKey !== 'function') {
     console.warn('Using value index as key, may not work correctly when moving items...')
@@ -445,8 +447,8 @@ function doBindChildren (ctx, parent, element, update) {
     throw new Error('You can only use bindChildren with a state that contains an array. try myState([mystate]) before calling this function.')
   }
   ctx.currentValue = ctx.currentValue.map(v => v.isFnState ? v : fnstate(v))
-  ctx.bindContexts.push({ element, update, parent })
-  ctx.state.subscribe((newState, oldState) => {
+  ctx.bindContexts.push({ element, parent })
+  ctx.state.subscribe((_, oldState) => {
     if (!Array.isArray(ctx.currentValue)) {
       console.warn('A state used with bindChildren was updated to a non array value. This will be converted to an array of 1 and the state will be updated.')
       new Promise((resolve) => {
@@ -467,19 +469,13 @@ function doBindChildren (ctx, parent, element, update) {
   return parent
 }
 
-const doBind = function (ctx, element, update, handleUpdate, handleReplace) {
-  if (typeof element !== 'function' && typeof update !== 'function') {
-    throw new Error('You must pass an update function when passing a non function element')
-  }
-  if (typeof update === 'function') {
-    const boundElement = renderNode(evaluateElement(element, ctx.currentValue))
-    handleUpdate(boundElement)
-    return boundElement
-  } else {
-    const elCtx = { current: renderNode(evaluateElement(element, ctx.currentValue)) }
-    handleReplace(elCtx)
-    return () => elCtx.current
+const doBind = function (ctx, element, handleReplace) {
+  if (typeof element !== 'function') {
+    throw new Error('You must pass a function to bind with')
   }
+  const elCtx = { current: renderNode(evaluateElement(element, ctx.currentValue)) }
+  handleReplace(elCtx)
+  return () => elCtx.current
 }
 
 const updateReplacer = (ctx, element, elCtx) => () => {
@@ -509,25 +505,11 @@ const updateReplacer = (ctx, element, elCtx) => () => {
   }
 }
 
-const doBindSelect = (ctx, element, update) =>
-  doBind(ctx, element, update,
-    boundElement =>
-      subscribeSelect(ctx, () => update(boundElement)),
-    (elCtx) =>
-      subscribeSelect(
-        ctx,
-        updateReplacer(ctx, element, elCtx)
-      )
-  )
-
-const doBindAs = (ctx, element, update) =>
-  doBind(ctx, element, update,
-    boundElement => {
-      ctx.state.subscribe(() => update(boundElement))
-    },
-    (elCtx) =>
-      ctx.state.subscribe(updateReplacer(ctx, element, elCtx))
-  )
+const doBindSelect = (ctx, element) =>
+  doBind(ctx, element, (elCtx) => subscribeSelect(ctx, updateReplacer(ctx, element, elCtx)))
+
+const doBindAs = (ctx, element) =>
+  doBind(ctx, element, (elCtx) => ctx.state.subscribe(updateReplacer(ctx, element, elCtx)))
 
 /**
  * Reconcile the state of the current array value with the state of the bound elements