Updated JSDoc types.

1. Changed HTMLElement types to Node. This required treating HTMLElement methods, such as “setAttribute” as expando properties escaped with [“”], because they do not exist on type Node. Browsers will automatically coerce a Node to an HTMLElement type to allow using its methods. Static type checkers can’t, sigh.
2. Switch from using generic Object type to Object.<string, any> to designate generic object literal type.

lib/component.js

@@ -4,8 +4,8 @@ import { updateComponent } from './utils/componentHelpers/updateComponent'
 import { unmountComponent } from './utils/componentHelpers/unmountComponent'
 
 /**
- * @description This is a Time object used as a key to create a pseudo-private property in the Component class for holding state.
- * @type {Object} dataStore A Date object to use as pseudo-private key to store the component's state.
+ * @description This is a numeric value derived from the Date object used as a key to create a pseudo-private property in the Component class for holding state.
+ * @type {number} dataStore A numeric value to use as pseudo-private key to store the component's state.
  */
 const dataStore = new Date().getTime()
 

lib/h.js

@@ -4,7 +4,7 @@
  * @property {string | Function} VNode.type;
  * @property {any[]} VNode.children;
  * @property {string | number | null} VNode.key;
- * @property {Object.<string, string | number | boolean> }  VNode.props;
+ * @property {Object.<string, any> }  VNode.props;
  */
 /**
  * @description Hyperscript function. Enables definition of HTML/SVG using functions.

lib/render.js

@@ -6,7 +6,7 @@ import { patch } from './patch'
  * const element = mount(<Title message='Hello World!'/>, 'section')
  * // Pass the captured element to the render function:
  * render(<Title message='Hello Everyone!'/>, 'header')
- * @param {Function} tag A JSX tag or hyperscript function to render.
+ * @param {() => import('./h').VNode} tag A JSX tag or hyperscript function to render.
  * @param {Node} [element] The element in the DOM which will be updated.
  * @returns {Node} The base element of the rendered tag.
  */

lib/utils/componentHelpers/eventWhitelist.js

@@ -25,4 +25,4 @@ export const eventWhitelist = [
   'touchend',
   'touchmove',
   'touchstart'
-]
+]

lib/utils/componentHelpers/isObject.js

@@ -1,6 +1,6 @@
 /**
  * @description A function to test where something is an object literal or not. Used by Component setState.
- * @param {Object} obj An object literal to test.
+ * @param {Object.<string, any>} obj An object literal to test.
  * @returns boolean
  */
 export function isObject(obj) {

lib/utils/componentHelpers/updateComponent.js

@@ -3,7 +3,7 @@ import { patch } from '../../patch'
 
 /**
  * @description This function updates an already rendered component. In doing so it checks to see if user provided data as an argument to this function. If data was provided, it uses that to render the component. Otherwise it checks if the component has state. If true, the function uses that to render the component. If no data was provided and the component is stateless, nothing will happen.
- * @param {boolean | number | string | Object | any[]} data
+ * @param {boolean | number | string | Object.<string, any> | any[]} data
  * @param {import('../../component').Component} component 
  */
 export function updateComponent(data, component) {
@@ -27,7 +27,7 @@ export function updateComponent(data, component) {
   // Create virtual dom and check if component id
   // already exists in document.
   /**
-   * @type {Object | null}
+   * @type {Object.<string, any> | null}
    */
   const vdom = component.render(__data)
   let elem

lib/utils/mixin.js

@@ -1,8 +1,8 @@
 /**
  * @description A function to merge two objects together. The properties of the second object will overwrite any matching properties in the first object.
- * @param {Object} obj1 The first object to merge.
- * @param {Object} obj2 The second object to merge.
- * @returns {Object} Returns a new object of the second object merged with the first.
+ * @param {Object.<string, any>} obj1 The first object to merge.
+ * @param {Object.<string, any>} obj2 The second object to merge.
+ * @returns {Object.<string, any>} Returns a new object of the second object merged with the first.
  */
 export function mixin(obj1, obj2) {
   const result = {}

lib/utils/patchElement.js

@@ -9,7 +9,7 @@ import { removeOldKeyedElements } from './patchElementHelpers/removeOldKeyedElem
 /**
  * @description A function to diff and patch a DOM node with a virtual node.
  * @param {Node} parent The parent node of the elment being patched.
- * @param {HTMLElement | Node} element The element being patched.
+ * @param {Node} element The element being patched.
  * @param {Object} oldNode A virtual dom newNode from the previous patch.
  * @param {Object} newNode The current virtual dom node.
  * @param {boolean} [isSVG] Whether we are dealing with an SVG element or not.

lib/utils/patchElementHelpers/createElement.js

@@ -2,7 +2,7 @@ import { setProp } from '../setProp'
 
 /**
  * @description Function to convert hyperscript/JSX into DOM nodes.
- * @param {Object | string} node A node to create. This may be a hyperscript function or a JSX tag which gets converted to hyperscript during transpilation.
+ * @param {string | number | Object} node A node to create. This may be a hyperscript function or a JSX tag which gets converted to hyperscript during transpilation.
  * @param {boolean} [isSVG] Whether the node is SVG or not.
  * @returns {Node} An element created from a virtual dom object.
  */

lib/utils/patchElementHelpers/removeElement.js

@@ -5,7 +5,7 @@ import { removeChildren } from './removeChildren'
  * @param {Node} parent The containing element in which the component resides.
  * @param {Node} element The parent of the element to remove.
  * @namespace {Node} node The element to remove.
- * @property {Object} node.props
+ * @property {Object.<string, any>} node.props
  * @returns {void} undefined
  */
 export const removeElement = (parent, element, node) => {

lib/utils/patchElementHelpers/removeOldKeyedElements.js

@@ -3,8 +3,8 @@ import { removeElement } from '../patchElementHelpers/removeElement'
 /**
  * @description Remove old keyed elements.
  * @param {Node} element 
- * @param {Object} oldKeyed 
- * @param {Object} newKeyed 
+ * @param {Object.<string, any>} oldKeyed
+ * @param {Object.<string, any>} newKeyed
  * @returns {void} undefined
  */
 export function removeOldKeyedElements(element, oldKeyed, newKeyed) {

lib/utils/patchElementHelpers/trackOldElements.js

@@ -5,7 +5,7 @@ import { getKey } from '../patchElementHelpers/getKey'
  * @param {Node} element 
  * @param {Node[]} oldElements
  * @param {Node[]} oldChildren
- * @param {Object} oldKeyed 
+ * @param {Object.<string, any>} oldKeyed 
  * @returns {void} undefined
  */
 export function trackOldElements(element, oldElements, oldChildren, oldKeyed) {

lib/utils/patchElementHelpers/updateElement.js

@@ -3,9 +3,9 @@ import { setProp } from '../setProp'
 
 /**
  * @description A function to update an element based on a virtual dom node.
- * @param {HTMLElement} element
- * @param {import('../../h').VNode} oldProps The original props used to create the element.
- * @param {import('../../h').VNode} props New props generated by the virtual dom.
+ * @param {Node} element
+ * @param {Object} oldProps The original props used to create the element.
+ * @param {Object} props New props generated by the virtual dom.
  * @param {boolean} isSVG Whether we are dealing with SVG or not.
  * @function {function(element: Node, oldProps: VNode, props: VNode,isSVG: boolean): void}
  * @returns {void} undefined

lib/utils/rAF.js

@@ -1,7 +1,7 @@
 /**
  * @description A cross-browser normalization/polyfill for requestAnimationFrame.
  * @param {Function} cb A callback to execute.
- * @returns {any} The result of the callback.
+ * @returns {number} The request id, that uniquely identifies the entry in the browser's callback list.
  */
 export const rAF =
   (window && window.requestAnimationFrame) ||

lib/utils/setProp.js

@@ -5,10 +5,10 @@ import { handleXlinkHref } from './setPropHelpers/handleXlinkHref'
 
 /**
  * @description Function to set properties and attributes on element.
- * @param {HTMLElement} element The element to set props on.
+ * @param {Node} element The element to set props on.
  * @param {string} prop The property/attribute.
- * @param {string} value The value of the prop.
- * @param {string} oldValue The original value of the prop.
+ * @param {string | number | boolean} value The value of the prop.
+ * @param {string | number | boolean} oldValue The original value of the prop.
  * @param {boolean} isSVG Whether this is SVG or not
  * @returns {void} undefined
  */
@@ -49,7 +49,7 @@ export function setProp(element, prop, value, oldValue, isSVG) {
         if (value === 'true') value = ''
         // Set prop as attribute, except dangerouslySetInnerHTML:
         if (prop !== 'dangerouslysetinnerhtml')
-          element.setAttribute(prop, value)
+          element['setAttribute'](prop, value)
       }
     }
 
@@ -61,7 +61,7 @@ export function setProp(element, prop, value, oldValue, isSVG) {
       value === 'no' ||
       value === 'off'
     ) {
-      element.removeAttribute(prop)
+      element['removeAttribute'](prop)
     }
   }
 }

lib/utils/setPropHelpers/handleDangerouslySetInnerHTML.js

@@ -1,12 +1,12 @@
 /**
  * @description Enable setting innerHTML as a prop.
- * @param {HTMLElement} element
+ * @param {Node} element
  * @param {string} prop
  * @param {string | number | boolean | any[] | Object} value
  * @returns {void} undefined
  */
 export function handleDangerouslySetInnerHTML(element, prop, value) {
   if (prop === 'dangerouslysetinnerhtml') {
-    element.innerHTML = value
+    element['innerHTML'] = value
   }
 }

lib/utils/setPropHelpers/handleStyles.js

@@ -2,10 +2,10 @@ import { mixin } from '../mixin'
 
 /**
  * @description Handle styles defined as object literals.
- * @param {HTMLElement} element
+ * @param {Node} element
  * @param {string} prop
- * @param {string | number | boolean | any[] | Object} value
- * @param {string | number | boolean | any[] | Object} oldValue
+ * @param {any} value
+ * @param {any} oldValue
  * @returns {void} undefined
  */
 export function handleStyles(element, prop, value, oldValue) {

lib/utils/setPropHelpers/handleXlinkHref.js

@@ -1,11 +1,11 @@
 /**
  * @description Enable setting xlink href value for browser that only support SVG 1.0.
- * @param {HTMLElement} element
+ * @param {Node} element
  * @param {string} prop
  * @param {string | number | boolean | any[] | Object} value
  * @returns {void} undefined
  */
 export function handleXlinkHref(element, prop, value) {
-  element.setAttributeNS('http://www.w3.org/1999/xlink', 'href', value)
-  element.setAttribute('href', value)
+  element['setAttributeNS']('http://www.w3.org/1999/xlink', 'href', value)
+  element['setAttribute']('href', value)
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "composi",
-  "version": "2.4.6",
+  "version": "2.4.7",
   "description": "A JavaScript library for creating websites, PWAs and hybrid apps.",
   "main": "index.js",
   "scripts": {