fix type defs and remove deprecated html elements

docs/lib/fnroute.mjs

@@ -28,7 +28,7 @@ import { fnstate, getAttrs, h, isAttrs, renderNode } from './fntags.mjs'
  *          )
  *      )
  *
- * @param {any} 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) {
@@ -55,7 +55,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
- * @returns {HTMLDivElement}
+ * @returns {Node|(()=>Node)}
  */
 export function routeSwitch (...children) {
   const sw = h('div', getAttrs(children))
@@ -82,11 +82,11 @@ export function routeSwitch (...children) {
 }
 
 function stripParameterValues (currentRoute) {
-  return removeTrailingSlash(currentRoute.substr(1)).split('/').reduce((res, part) => {
+  return removeTrailingSlash(currentRoute.substring(1)).split('/').reduce((res, part) => {
     const paramStart = part.indexOf(':')
     let value = part
     if (paramStart > -1) {
-      value = part.substr(0, paramStart)
+      value = part.substring(0, paramStart)
     }
     return `${res}/${value}`
   }, '')
@@ -99,7 +99,7 @@ const moduleCache = {}
  * @param {object} options
  * @param {string} options.routePath The path to the root of the routes. This is used to resolve the paths of the routes.
  * @param {object} options.attrs The attributes of the container element
- * @param {(error: Error, newPathState: object)=>void} options.onerror A function that will be called if the route fails to load. The function receives the error and the current pathState object.
+ * @param {(error: Error, newPathState: object)=>void|Node} options.onerror A function that will be called if the route fails to load. The function receives the error and the current pathState object. Should return an error to display if it's not handled.
  * @param {(node: Node, module: object)=>Node} options.frame A function that will be called with the rendered route element and the module that was loaded. The function should return a new element to be rendered.
  * @param {boolean} options.sendRawPath If true, the raw path will be sent to the route. Otherwise, the path will be stripped of parameter values.
  * @param {(path: string)=>string} options.formatPath A function that will be called with the raw path before it is used to load the route. The function should return a new path.
@@ -174,8 +174,8 @@ function updatePathParameters () {
     const part = pathParts[i]
     const paramStart = part.indexOf(':')
     if (paramStart > -1) {
-      const paramName = part.substr(0, paramStart)
-      const paramValue = part.substr(paramStart + 1)
+      const paramName = part.substring(0, paramStart)
+      const paramValue = part.substring(paramStart + 1)
       parameters.idx.push(paramValue)
       if (paramName) {
         parameters[paramName] = paramValue

docs/lib/fntags.mjs

@@ -15,9 +15,10 @@
  *
  * The rest of the arguments will be considered children of this element and appended to it in the same order as passed.
  *
+ * @template {HTMLElement|SVGElement} T
  * @param {string} tag html tag to use when created the element
- * @param {object[]|Node[]} children optional attributes object and children for the element
- * @return {HTMLElement} an html element
+ * @param {Node|Object} children optional attributes object and children for the element
+ * @return {T} an html element
  *
  */
 export function h (tag, ...children) {
@@ -83,7 +84,7 @@ function hasNs (val) {
  * not be updated when the state changes because they will not be bound to the cloned element.
  * All state bindings must be passed in the context to the compiled template to work correctly.
  *
- * @param {(any)=>Node} templateFn A function that returns an html node.
+ * @param {(any)=>Node} templateFn A function that returns a html node.
  * @return {(any)=>Node} A function that takes a context object and returns a rendered node.
  *
  */
@@ -147,17 +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.
+ * @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 {(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.
  * 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)|(()=>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 {(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 {(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.
@@ -169,14 +170,14 @@ export function fntemplate (templateFn) {
  * 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.
  * @property {(path: string, value: any, fillWithObjects: boolean)=>void} setPath Set a value at the given property path
- * @property {((newState: T, oldState: T)=>void)=>void} subscribe Register a callback that will be executed whenever the state is changed
+ * @property {(subscriber: (newState: T, oldState: T)=>void) => void} subscribe Register a callback that will be executed whenever the state is changed
  * @property {(reinit: boolean)=>{}} reset Remove all of the observers and optionally reset the value to it's initial value
- * @property {} isFnState A flag to indicate that this is an fnstate object
+ * @property {boolean} isFnState A flag to indicate that this is a fnstate object
  */
 
 /**
  * @template T The type of data stored in the state container
- * @typedef {FnStateObj<T> & (newState?: T)=>T} FnState A container for a state value that can be bound to.
+ * @typedef {FnStateObj<T> & ((newState?: T)=>T)} FnState A container for a state value that can be bound to.
  */
 
 /**
@@ -350,7 +351,7 @@ export function fnstate (initialValue, mapKey) {
   ctx.state.subscribe = (callback) => doSubscribe(ctx, ctx.observers, callback)
 
   /**
-   * Remove all of the observers and optionally reset the value to it's initial value
+   * Remove all the observers and optionally reset the value to it's initial value
    */
   ctx.state.reset = (reInit) => doReset(ctx, reInit, initialValue)
 
@@ -582,7 +583,7 @@ function arrangeElements (ctx, bindContext, oldState) {
     const valueState = ctx.currentValue[i]
     let current = bindContext.boundElementByKey[key]
     let isNew = false
-    // ensure the parent state is always set and can be accessed by the child states to lsiten to the selection change and such
+    // ensure the parent state is always set and can be accessed by the child states to listen to the selection change and such
     if (valueState.parentCtx === undefined) {
       valueState.parentCtx = ctx
     }
@@ -600,7 +601,7 @@ function arrangeElements (ctx, bindContext, oldState) {
       if (prev.previousSibling === null) {
         // insertAdjacentElement is faster, but some nodes don't have it (lookin' at you text)
         if (prev.insertAdjacentElement !== undefined && current.insertAdjacentElement !== undefined) {
-          prev.insertAdjacentElement('beforeBegin', current)
+          prev.insertAdjacentElement('beforebegin', current)
         } else {
           parent.insertBefore(current, prev)
         }
@@ -615,7 +616,7 @@ function arrangeElements (ctx, bindContext, oldState) {
         } else if (isNew) {
           // insertAdjacentElement is faster, but some nodes don't have it (lookin' at you text)
           if (prev.insertAdjacentElement !== undefined) {
-            prev.insertAdjacentElement('beforeBegin', current)
+            prev.insertAdjacentElement('beforebegin', current)
           } else {
             parent.insertBefore(current, prev)
           }
@@ -784,10 +785,12 @@ export function getAttrs (children) {
  * A function to create an element with a pre-defined style.
  * For example, the flex* elements in fnelements.
  *
+ * @template {HTMLElement|SVGElement} T
+ *
  * @param {object|string} style The style to apply to the element
  * @param {string} tag The tag to use when creating the element
  * @param {object[]|Node[]} children The children to append to the element
- * @return {HTMLElement} The styled element
+ * @return {T} The styled element
  */
 export function styled (style, tag, children) {
   const firstChild = children[0]