Updated packages and added catch for null root

Author: James Hill

README.md

@@ -1,4 +1,4 @@
-A super fast and lightweight (**971bytes** gzipped) utility function to build HTML node trees and stateful functional components. Can be used either directly via the `h` function, or from transpiled `JSX`.
+A super fast and lightweight (**1kb** gzipped) utility function to build HTML node trees and stateful functional components. Can be used either directly via the `h` function, or from transpiled `JSX`.
 
 Due to it's size, `hypnode` is a useful companion utility for writing _WebComponents_, simplifying `HTML` structures, element references and state management. See section entitled "WebComponents" for an example.
 

package.json

@@ -28,15 +28,15 @@
   },
   "homepage": "https://github.com/jhdevuk/hypnode#readme",
   "devDependencies": {
-    "@types/jest": "^25.1.1",
-    "jest": "^25.1.0",
+    "@types/jest": "^26.0.10",
+    "jest": "^26.4.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^1.19.1",
-    "ts-jest": "^25.1.0",
+    "prettier": "^2.0.5",
+    "ts-jest": "^26.2.0",
     "tslint": "^5.20.1",
     "tslint-config-prettier": "^1.18.0",
     "tslint-eslint-rules": "^5.4.0",
-    "typescript": "^3.7.5",
+    "typescript": "^3.9.7",
     "typescript-tslint-plugin": "^0.5.5"
   }
 }

src/index.ts

@@ -156,10 +156,10 @@ function addStyleProperies(
 
   const items = Object.keys(value);
 
-  const result = items.reduce((style: string, key, index) => {
-    const name = key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+  const result = items.reduce((style, item) => {
+    const name = item.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
 
-    style += `${name}:${value[key]};`;
+    style += `${name}:${value[item]};`;
 
     return style;
   }, '');
@@ -199,7 +199,11 @@ function addAttributes(element: HTMLElement, key: string, value: string) {
  *
  * -------------------------------- */
 
-function render(root: HTMLElement, output: HTMLElement) {
+function render(root: HTMLElement | null, output: HTMLElement) {
+  if (!root) {
+    throw new Error('hypnode -> render(): Missing root element');
+  }
+
   if (!root.firstElementChild) {
     root.appendChild(output);
 

tests/src/index.spec.ts

@@ -136,21 +136,27 @@ describe('Core:Hypnode', () => {
     expect(result.outerHTML).toEqual(sample);
   });
 
-  it('correctly appends output with "render()" to root element', () => {
-    const root = mockRoot(false) as any;
-    const result = h('div', { title: testText }, testText);
+  describe('render()', () => {
+    it('correctly appends output with "render()" to root element', () => {
+      const root = mockRoot(false) as any;
+      const result = h('div', { title: testText }, testText);
 
-    render(root, result);
+      render(root, result);
 
-    expect(mockAppendChild).toBeCalledWith(result);
-  });
+      expect(mockAppendChild).toBeCalledWith(result);
+    });
+
+    it('correctly replaces root child with "render()"', () => {
+      const root = mockRoot(true) as any;
+      const result = h('div', { title: testText }, testText);
 
-  it('correctly replaces root child with "render()"', () => {
-    const root = mockRoot(true) as any;
-    const result = h('div', { title: testText }, testText);
+      render(root, result);
 
-    render(root, result);
+      expect(mockReplaceChild).toBeCalledWith(result, root.firstElementChild);
+    });
 
-    expect(mockReplaceChild).toBeCalledWith(result, root.firstElementChild);
+    it('throws an error if root is undefined', () => {
+      expect(() => render(null, h('div'))).toThrowError();
+    });
   });
 });

tests/src/useState.spec.ts

@@ -23,7 +23,9 @@ import { h, useState } from '../../src/index';
  * -------------------------------- */
 
 describe('Core:useState', () => {
-  beforeEach(() => jest.clearAllMocks());
+  jest.useFakeTimers();
+
+  afterEach(() => jest.clearAllMocks());
 
   it('correctly renders component from "useState" function', () => {
     const sample = `<a>${testValue + 1}</a>`;