chore(refactor): use modern JS features in additional places (#1107)

README-in_HN.md

@@ -390,10 +390,10 @@ patch(vnode1, vnode2);
 
 ```mjs
 const myModule = {
-  create: function (oldVnode, vnode) {
+  create: (oldVnode, vnode) => {
     // invoked whenever a new virtual node is created
   },
-  update: function (oldVnode, vnode) {
+  update: (oldVnode, vnode) => {
     // invoked whenever a virtual node is updated
   }
 };
@@ -640,7 +640,7 @@ In particular, you should **not** do something like this:
 ```mjs
 // Does not work
 const sharedHandler = {
-  change: function (e) {
+  change: (e) => {
     console.log("you chose: " + e.target.value);
   }
 };
@@ -665,7 +665,7 @@ h("div", [
 
 ```mjs
 // Works
-const sharedHandler = function (e) {
+const sharedHandler = (e) => {
   console.log("you chose: " + e.target.value);
 };
 h("div", [

README-zh_CN.md

@@ -345,10 +345,10 @@ patch(vnode1, vnode2);
 
 ```mjs
 const myModule = {
-  create: function (oldVnode, vnode) {
+  create: (oldVnode, vnode) => {
     // invoked whenever a new virtual node is created
   },
-  update: function (oldVnode, vnode) {
+  update: (oldVnode, vnode) => {
     // invoked whenever a virtual node is updated
   }
 };

README.md

@@ -395,10 +395,10 @@ Modules work by registering global listeners for [hooks](#hooks). A module is si
 
 ```mjs
 const myModule = {
-  create: function (oldVnode, vnode) {
+  create: (oldVnode, vnode) => {
     // invoked whenever a new virtual node is created
   },
-  update: function (oldVnode, vnode) {
+  update: (oldVnode, vnode) => {
     // invoked whenever a virtual node is updated
   }
 };
@@ -648,7 +648,7 @@ In particular, you should **not** do something like this:
 ```mjs
 // Does not work
 const sharedHandler = {
-  change: function (e) {
+  change: (e) => {
     console.log("you chose: " + e.target.value);
   }
 };
@@ -673,7 +673,7 @@ Alternatively, simply make sure each node is passed unique `on` values:
 
 ```mjs
 // Works
-const sharedHandler = function (e) {
+const sharedHandler = (e) => {
   console.log("you chose: " + e.target.value);
 };
 h("div", [

examples/hero/hero.js

@@ -1,14 +1,14 @@
 const raf =
   (typeof window !== "undefined" && window.requestAnimationFrame) || setTimeout;
 
-const nextFrame = function (fn) {
-  raf(function () {
+const nextFrame = (fn) => {
+  raf(() => {
     raf(fn);
   });
 };
 
 function setNextFrame(obj, prop, val) {
-  nextFrame(function () {
+  nextFrame(() => {
     obj[prop] = val;
   });
 }
@@ -193,7 +193,7 @@ function post() {
         `translate(${-dx}px, ${-dy}px) scale(${wRatio}, ${hRatio})`
       ); // scale must be on far right for translate to be correct
       setNextFrame(oldStyle, "opacity", "0");
-      oldElm.addEventListener("transitionend", function (ev) {
+      oldElm.addEventListener("transitionend", (ev) => {
         if (ev.propertyName === "transform") {
           document.body.removeChild(ev.target);
         }

examples/reorder-animation/index.js

@@ -119,9 +119,7 @@ function add() {
 }
 
 function remove(movie) {
-  data = data.filter((m) => {
-    return m !== movie;
-  });
+  data = data.filter((m) => m !== movie);
   render();
 }
 

perf/benchmarks.js

@@ -23,16 +23,16 @@ for (var n = 0; n < elms; ++n) {
   arr[n] = n;
 }
 
-document.addEventListener("DOMContentLoaded", function () {
+document.addEventListener("DOMContentLoaded", () => {
   var elm = (global.elm = document.getElementById("container"));
   // add tests
   suite
     .add("a/ insert first", {
-      setup: function () {
+      setup: () => {
         var vnode1 = a.h("div", arr.map(a.spanNum));
         var vnode2 = a.h("div", ["new"].concat(arr).map(a.spanNum));
       },
-      fn: function () {
+      fn: () => {
         var emptyNode = a.emptyNodeAt(elm);
         a.patch(emptyNode, vnode1);
         a.patch(vnode1, vnode2);
@@ -40,11 +40,11 @@ document.addEventListener("DOMContentLoaded", function () {
       }
     })
     .add("b/ insert first", {
-      setup: function () {
+      setup: () => {
         var vnode1 = b.h("div", arr.map(b.spanNum));
         var vnode2 = b.h("div", ["new"].concat(arr).map(b.spanNum));
       },
-      fn: function () {
+      fn: () => {
         var emptyNode = b.emptyNodeAt(elm);
         b.patch(emptyNode, vnode1);
         b.patch(vnode1, vnode2);
@@ -52,10 +52,10 @@ document.addEventListener("DOMContentLoaded", function () {
       }
     })
     // add listeners
-    .on("cycle", function (event) {
+    .on("cycle", (event) => {
       console.log(String(event.target));
     })
-    .on("complete", function () {
+    .on("complete", () => {
       console.log("Fastest is " + this.filter("fastest").pluck("name"));
     })
     // run async

src/init.ts

@@ -3,15 +3,6 @@ import { Key, vnode, VNode } from "./vnode";
 import * as is from "./is";
 import { htmlDomApi, DOMAPI } from "./htmldomapi";
 
-type NonUndefined<T> = T extends undefined ? never : T;
-
-function isUndef(s: any): boolean {
-  return s === undefined;
-}
-function isDef<A>(s: A): s is NonUndefined<A> {
-  return s !== undefined;
-}
-
 type VNodeQueue = VNode[];
 
 const emptyNode = vnode("", {}, [], undefined, undefined);
@@ -146,22 +137,15 @@ export function init(
   }
 
   function createElm(vnode: VNode, insertedVnodeQueue: VNodeQueue): Node {
-    let i: any;
-    let data = vnode.data;
-    if (data !== undefined) {
-      const init = data.hook?.init;
-      if (isDef(init)) {
-        init(vnode);
-        data = vnode.data;
-      }
-    }
+    let i: number;
+    const data = vnode.data;
+    const hook = data?.hook;
+    hook?.init?.(vnode);
     const children = vnode.children;
     const sel = vnode.sel;
     if (sel === "!") {
-      if (isUndef(vnode.text)) {
-        vnode.text = "";
-      }
-      vnode.elm = api.createComment(vnode.text!);
+      vnode.text ??= "";
+      vnode.elm = api.createComment(vnode.text);
     } else if (sel === "") {
       // textNode has no selector
       vnode.elm = api.createTextNode(vnode.text!);
@@ -175,10 +159,12 @@ export function init(
         hashIdx !== -1 || dotIdx !== -1
           ? sel.slice(0, Math.min(hash, dot))
           : sel;
-      const elm = (vnode.elm =
-        isDef(data) && isDef((i = data.ns))
-          ? api.createElementNS(i, tag, data)
-          : api.createElement(tag, data));
+      const ns = data?.ns;
+      const elm =
+        ns === undefined
+          ? api.createElement(tag, data)
+          : api.createElementNS(ns, tag, data);
+      vnode.elm = elm;
       if (hash < dot) elm.setAttribute("id", sel.slice(hash + 1, dot));
       if (dotIdx > 0)
         elm.setAttribute("class", sel.slice(dot + 1).replace(/\./g, " "));
@@ -198,10 +184,9 @@ export function init(
           }
         }
       }
-      const hook = vnode.data!.hook;
-      if (isDef(hook)) {
+      if (hook !== undefined) {
         hook.create?.(emptyNode, vnode);
-        if (hook.insert) {
+        if (hook.insert !== undefined) {
           insertedVnodeQueue.push(vnode);
         }
       }
@@ -265,16 +250,15 @@ export function init(
   ): void {
     for (; startIdx <= endIdx; ++startIdx) {
       let listeners: number;
-      let rm: () => void;
       const ch = vnodes[startIdx];
       if (ch != null) {
-        if (isDef(ch.sel)) {
+        if (ch.sel !== undefined) {
           invokeDestroyHook(ch);
           listeners = cbs.remove.length + 1;
-          rm = createRmCb(ch.elm!, listeners);
+          const rm = createRmCb(ch.elm!, listeners);
           for (let i = 0; i < cbs.remove.length; ++i) cbs.remove[i](ch, rm);
           const removeHook = ch?.data?.hook?.remove;
-          if (isDef(removeHook)) {
+          if (removeHook !== undefined) {
             removeHook(ch, rm);
           } else {
             rm();
@@ -353,7 +337,7 @@ export function init(
           oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
         }
         idxInOld = oldKeyToIdx[newStartVnode.key!];
-        if (isUndef(idxInOld)) {
+        if (idxInOld === undefined) {
           // `newStartVnode` is new, create and insert it in beginning
           api.insertBefore(
             parentElm,
@@ -361,7 +345,7 @@ export function init(
             oldStartVnode.elm!
           );
           newStartVnode = newCh[++newStartIdx];
-        } else if (isUndef(oldKeyToIdx[newEndVnode.key!])) {
+        } else if (oldKeyToIdx[newEndVnode.key!] === undefined) {
           // `newEndVnode` is new, create and insert it in the end
           api.insertBefore(
             parentElm,
@@ -416,7 +400,7 @@ export function init(
     if (oldVnode === vnode) return;
     if (
       vnode.data !== undefined ||
-      (isDef(vnode.text) && vnode.text !== oldVnode.text)
+      (vnode.text !== undefined && vnode.text !== oldVnode.text)
     ) {
       vnode.data ??= {};
       oldVnode.data ??= {};
@@ -426,22 +410,22 @@ export function init(
     }
     const oldCh = oldVnode.children as VNode[];
     const ch = vnode.children as VNode[];
-    if (isUndef(vnode.text)) {
-      if (isDef(oldCh) && isDef(ch)) {
+    if (vnode.text === undefined) {
+      if (oldCh !== undefined && ch !== undefined) {
         if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue);
-      } else if (isDef(ch)) {
-        if (isDef(oldVnode.text)) api.setTextContent(elm, "");
+      } else if (ch !== undefined) {
+        if (oldVnode.text !== undefined) api.setTextContent(elm, "");
         addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue);
-      } else if (isDef(oldCh)) {
+      } else if (oldCh !== undefined) {
         removeVnodes(elm, oldCh, 0, oldCh.length - 1);
-      } else if (isDef(oldVnode.text)) {
+      } else if (oldVnode.text !== undefined) {
         api.setTextContent(elm, "");
       }
     } else if (oldVnode.text !== vnode.text) {
-      if (isDef(oldCh)) {
+      if (oldCh !== undefined) {
         removeVnodes(elm, oldCh, 0, oldCh.length - 1);
       }
-      api.setTextContent(elm, vnode.text!);
+      api.setTextContent(elm, vnode.text);
     }
     hook?.postpatch?.(oldVnode, vnode);
   }

src/modules/style.ts

@@ -15,15 +15,15 @@ const raf =
     ? window.requestAnimationFrame.bind(window)
     : setTimeout;
 
-const nextFrame = function (fn: any) {
-  raf(function () {
+const nextFrame = (fn: any) => {
+  raf(() => {
     raf(fn);
   });
 };
 let reflowForced = false;
 
 function setNextFrame(obj: any, prop: string, val: any): void {
-  nextFrame(function () {
+  nextFrame(() => {
     obj[prop] = val;
   });
 }
@@ -106,13 +106,10 @@ function applyRemoveStyle(vnode: VNode, rm: () => void): void {
   for (; i < props.length; ++i) {
     if (applied.indexOf(props[i]) !== -1) amount++;
   }
-  (elm as Element).addEventListener(
-    "transitionend",
-    function (ev: TransitionEvent) {
-      if (ev.target === elm) --amount;
-      if (amount === 0) rm();
-    }
-  );
+  (elm as Element).addEventListener("transitionend", (ev: TransitionEvent) => {
+    if (ev.target === elm) --amount;
+    if (amount === 0) rm();
+  });
 }
 
 function forceReflow() {

test/unit/attachto.ts

@@ -4,13 +4,13 @@ import { init, RemoveHook, attachTo, h } from "../../src/index";
 
 const patch = init([]);
 
-describe("attachTo", function () {
+describe("attachTo", () => {
   let elm: any, vnode0: any;
-  beforeEach(function () {
+  beforeEach(() => {
     elm = document.createElement("div");
     vnode0 = elm;
   });
-  it("adds element to target", function () {
+  it("adds element to target", () => {
     const vnode1 = h("div", [
       h("div#wrapper", [
         h("div", "Some element"),
@@ -20,7 +20,7 @@ describe("attachTo", function () {
     elm = patch(vnode0, vnode1).elm;
     assert.strictEqual(elm.children.length, 2);
   });
-  it("updates element at target", function () {
+  it("updates element at target", () => {
     const vnode1 = h("div", [
       h("div#wrapper", [
         h("div", "Some element"),
@@ -38,7 +38,7 @@ describe("attachTo", function () {
     elm = patch(vnode1, vnode2).elm;
     assert.strictEqual(elm.children[0].innerHTML, "New text");
   });
-  it("element can be inserted before modal", function () {
+  it("element can be inserted before modal", () => {
     const vnode1 = h("div", [
       h("div#wrapper", [
         h("div", "Some element"),
@@ -57,7 +57,7 @@ describe("attachTo", function () {
     elm = patch(vnode1, vnode2).elm;
     assert.strictEqual(elm.children[0].innerHTML, "Text");
   });
-  it("removes element at target", function () {
+  it("removes element at target", () => {
     const vnode1 = h("div", [
       h("div#wrapper", [
         h("div", "Some element"),
@@ -70,7 +70,7 @@ describe("attachTo", function () {
     elm = patch(vnode1, vnode2).elm;
     assert.strictEqual(elm.children.length, 1);
   });
-  it("remove hook receives real element", function () {
+  it("remove hook receives real element", () => {
     const rm: RemoveHook = (vnode, cb) => {
       const elm = vnode.elm as HTMLDivElement;
       assert.strictEqual(elm.tagName, "DIV");

test/unit/attributes.ts

@@ -4,13 +4,13 @@ import { init, attributesModule, h } from "../../src/index";
 
 const patch = init([attributesModule]);
 
-describe("attributes", function () {
+describe("attributes", () => {
   let elm: any, vnode0: any;
-  beforeEach(function () {
+  beforeEach(() => {
     elm = document.createElement("div");
     vnode0 = elm;
   });
-  it("have their provided values", function () {
+  it("have their provided values", () => {
     const vnode1 = h("div", {
       attrs: { href: "/foo", minlength: 1, selected: true, disabled: false }
     });
@@ -21,7 +21,7 @@ describe("attributes", function () {
     assert.strictEqual(elm.getAttribute("selected"), "");
     assert.strictEqual(elm.hasAttribute("disabled"), false);
   });
-  it("can be memoized", function () {
+  it("can be memoized", () => {
     const cachedAttrs = { href: "/foo", minlength: 1, selected: true };
     const vnode1 = h("div", { attrs: cachedAttrs });
     const vnode2 = h("div", { attrs: cachedAttrs });
@@ -34,7 +34,7 @@ describe("attributes", function () {
     assert.strictEqual(elm.getAttribute("minlength"), "1");
     assert.strictEqual(elm.getAttribute("selected"), "");
   });
-  it("are not omitted when falsy values are provided", function () {
+  it("are not omitted when falsy values are provided", () => {
     const vnode1 = h("div", {
       attrs: { href: null as any, minlength: 0, value: "", title: "undefined" }
     });
@@ -44,7 +44,7 @@ describe("attributes", function () {
     assert.ok(elm.hasAttribute("value"));
     assert.ok(elm.hasAttribute("title"));
   });
-  it("are set correctly when namespaced", function () {
+  it("are set correctly when namespaced", () => {
     const vnode1 = h("div", { attrs: { "xlink:href": "#foo" } });
     elm = patch(vnode0, vnode1).elm;
     assert.strictEqual(
@@ -52,7 +52,7 @@ describe("attributes", function () {
       "#foo"
     );
   });
-  it("should not touch class nor id fields", function () {
+  it("should not touch class nor id fields", () => {
     elm = document.createElement("div");
     elm.id = "myId";
     elm.className = "myClass";
@@ -64,7 +64,7 @@ describe("attributes", function () {
     assert.strictEqual(elm.className, "myClass");
     assert.strictEqual(elm.textContent, "Hello");
   });
-  it("should apply legacy namespace attributes, xmlns", function () {
+  it("should apply legacy namespace attributes, xmlns", () => {
     const elmNamespaceQualifiedName = "xmlns:xlink";
     const elmNamespaceValue = "http://www.w3.org/1999/xlink";
     const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
@@ -84,8 +84,8 @@ describe("attributes", function () {
       elmNamespaceValue
     );
   });
-  describe("boolean attribute", function () {
-    it("is present and empty string if the value is truthy", function () {
+  describe("boolean attribute", () => {
+    it("is present and empty string if the value is truthy", () => {
       const vnode1 = h("div", {
         attrs: { required: true, readonly: 1, noresize: "truthy" }
       });
@@ -97,13 +97,13 @@ describe("attributes", function () {
       assert.strictEqual(elm.hasAttribute("noresize"), true);
       assert.strictEqual(elm.getAttribute("noresize"), "truthy");
     });
-    it("is omitted if the value is false", function () {
+    it("is omitted if the value is false", () => {
       const vnode1 = h("div", { attrs: { required: false } });
       elm = patch(vnode0, vnode1).elm;
       assert.strictEqual(elm.hasAttribute("required"), false);
       assert.strictEqual(elm.getAttribute("required"), null);
     });
-    it("is not omitted if the value is falsy", function () {
+    it("is not omitted if the value is falsy", () => {
       const vnode1 = h("div", {
         attrs: { readonly: 0, noresize: null as any }
       });
@@ -112,8 +112,8 @@ describe("attributes", function () {
       assert.ok(elm.hasAttribute("noresize"));
     });
   });
-  describe("Object.prototype property", function () {
-    it("is not considered as a boolean attribute and shouldn't be omitted", function () {
+  describe("Object.prototype property", () => {
+    it("is not considered as a boolean attribute and shouldn't be omitted", () => {
       const vnode1 = h("div", { attrs: { constructor: true } });
       elm = patch(vnode0, vnode1).elm;
       assert.strictEqual(elm.hasAttribute("constructor"), true);

test/unit/dataset.ts

@@ -4,23 +4,23 @@ import { datasetModule, init, h, toVNode } from "../../src/index";
 
 const patch = init([datasetModule]);
 
-describe("dataset", function () {
-  before(function () {
+describe("dataset", () => {
+  before(() => {
     if (!Object.hasOwnProperty.call(HTMLElement.prototype, "dataset")) {
       this.skip();
     }
   });
 
   let elm: any, vnode0: any;
-  beforeEach(function () {
+  beforeEach(() => {
     elm = document.createElement("div");
     vnode0 = elm;
   });
-  it("is set on initial element creation", function () {
+  it("is set on initial element creation", () => {
     elm = patch(vnode0, h("div", { dataset: { foo: "foo" } })).elm;
     assert.strictEqual(elm.dataset.foo, "foo");
   });
-  it("toVNode & dataset", function () {
+  it("toVNode & dataset", () => {
     const elem1 = document.createElement("div");
     elem1.innerHTML = '<div data-foo="foo"></div>';
     const elem2 = document.createElement("div");
@@ -30,7 +30,7 @@ describe("dataset", function () {
     patch(oldNode, newNode);
     assert.strictEqual(elem1.innerHTML, '<div data-foo="foo-new"></div>');
   });
-  it("updates dataset", function () {
+  it("updates dataset", () => {
     const vnode1 = h("i", { dataset: { foo: "foo", bar: "bar" } });
     const vnode2 = h("i", { dataset: { baz: "baz" } });
     elm = patch(vnode0, vnode1).elm;
@@ -40,7 +40,7 @@ describe("dataset", function () {
     assert.strictEqual(elm.dataset.baz, "baz");
     assert.strictEqual(elm.dataset.foo, undefined);
   });
-  it("handles falsy values", function () {
+  it("handles falsy values", () => {
     const vnode1 = h("i", { dataset: { foo: "" } });
     const vnode2 = h("i", { dataset: { foo: "" } });
     elm = patch(vnode0, vnode1).elm;
@@ -48,7 +48,7 @@ describe("dataset", function () {
     elm = patch(vnode1, vnode2).elm;
     assert.strictEqual(elm.dataset.foo, "");
   });
-  it("can be memoized", function () {
+  it("can be memoized", () => {
     const cachedDataset = { foo: "foo", bar: "bar" };
     const vnode1 = h("i", { dataset: cachedDataset });
     const vnode2 = h("i", { dataset: cachedDataset });
@@ -59,7 +59,7 @@ describe("dataset", function () {
     assert.strictEqual(elm.dataset.foo, "foo");
     assert.strictEqual(elm.dataset.bar, "bar");
   });
-  it("handles string conversions", function () {
+  it("handles string conversions", () => {
     const vnode1 = h("i", {
       dataset: {
         empty: "",

test/unit/eventlisteners.ts

@@ -4,13 +4,13 @@ import { VNode, init, eventListenersModule, h } from "../../src/index";
 
 const patch = init([eventListenersModule]);
 
-describe("event listeners", function () {
+describe("event listeners", () => {
   let elm: any, vnode0: any;
-  beforeEach(function () {
+  beforeEach(() => {
     elm = document.createElement("div");
     vnode0 = elm;
   });
-  it("attaches click event handler to element", function () {
+  it("attaches click event handler to element", () => {
     const result = [];
     function clicked(ev: Event) {
       result.push(ev);
@@ -22,14 +22,14 @@ describe("event listeners", function () {
     elm.click();
     assert.strictEqual(1, result.length);
   });
-  it("does not attach new listener", function () {
+  it("does not attach new listener", () => {
     const result: number[] = [];
     // function clicked(ev) { result.push(ev); }
     const vnode1 = h(
       "div",
       {
         on: {
-          click: function () {
+          click: () => {
             result.push(1);
           }
         }
@@ -40,7 +40,7 @@ describe("event listeners", function () {
       "div",
       {
         on: {
-          click: function () {
+          click: () => {
             result.push(2);
           }
         }
@@ -53,7 +53,7 @@ describe("event listeners", function () {
     elm.click();
     assert.deepEqual(result, [1, 2]);
   });
-  it("detach attached click event handler to element", function () {
+  it("detach attached click event handler to element", () => {
     const result: Event[] = [];
     function clicked(ev: Event) {
       result.push(ev);
@@ -69,7 +69,7 @@ describe("event listeners", function () {
     elm.click();
     assert.strictEqual(1, result.length);
   });
-  it("multiple event handlers for same event on same element", function () {
+  it("multiple event handlers for same event on same element", () => {
     let called = 0;
     function clicked(ev: Event, vnode: VNode) {
       ++called;
@@ -91,7 +91,7 @@ describe("event listeners", function () {
     elm.click();
     assert.strictEqual(5, called);
   });
-  it("access to virtual node in event handler", function () {
+  it("access to virtual node in event handler", () => {
     const result: VNode[] = [];
     function clicked(this: VNode, ev: Event, vnode: VNode) {
       result.push(this);
@@ -106,10 +106,10 @@ describe("event listeners", function () {
     assert.strictEqual(vnode1, result[0]);
     assert.strictEqual(vnode1, result[1]);
   });
-  it("shared handlers in parent and child nodes", function () {
+  it("shared handlers in parent and child nodes", () => {
     const result = [];
     const sharedHandlers = {
-      click: function (ev: Event) {
+      click: (ev: Event) => {
         result.push(ev);
       }
     };

test/unit/htmldomapi.ts

@@ -4,21 +4,21 @@ import { init, h, attributesModule } from "../../src/index";
 
 const patch = init([attributesModule]);
 
-describe("svg", function () {
+describe("svg", () => {
   let elm: any, vnode0: any;
-  beforeEach(function () {
+  beforeEach(() => {
     elm = document.createElement("svg");
     vnode0 = elm;
   });
 
-  it("removes child svg elements", function () {
+  it("removes child svg elements", () => {
     const a = h("svg", {}, [h("g"), h("g")]);
     const b = h("svg", {}, [h("g")]);
     const result = patch(patch(vnode0, a), b).elm as SVGElement;
     assert.strictEqual(result.childNodes.length, 1);
   });
 
-  it("adds correctly xlink namespaced attribute", function () {
+  it("adds correctly xlink namespaced attribute", () => {
     const xlinkNS = "http://www.w3.org/1999/xlink";
     const testUrl = "/test";
     const a = h("svg", {}, [
@@ -38,7 +38,7 @@ describe("svg", function () {
     assert.strictEqual(child.getAttributeNS(xlinkNS, "href"), testUrl);
   });
 
-  it("adds correctly xml namespaced attribute", function () {
+  it("adds correctly xml namespaced attribute", () => {
     const xmlNS = "http://www.w3.org/XML/1998/namespace";
     const testAttrValue = "und";
     const a = h("svg", { attrs: { "xml:lang": testAttrValue } }, []);

test/unit/jsx.tsx

@@ -1,9 +1,9 @@
 import { assert } from "@esm-bundle/chai";
 import { jsx, Fragment, init } from "../../src/index";
 
-describe("snabbdom", function () {
-  describe("jsx", function () {
-    it("can be used as a jsxFactory method", function () {
+describe("snabbdom", () => {
+  describe("jsx", () => {
+    it("can be used as a jsxFactory method", () => {
       const vnode = <div title="Hello World">Hello World</div>;
 
       assert.deepStrictEqual(vnode, {
@@ -16,7 +16,7 @@ describe("snabbdom", function () {
       });
     });
 
-    it("creates text property for text only child", function () {
+    it("creates text property for text only child", () => {
       const vnode = <div>foo bar</div>;
 
       assert.deepStrictEqual(vnode, {
@@ -29,7 +29,7 @@ describe("snabbdom", function () {
       });
     });
 
-    it("creates an array of children for multiple children", function () {
+    it("creates an array of children for multiple children", () => {
       const vnode = (
         <div>
           {"foo"}
@@ -64,7 +64,7 @@ describe("snabbdom", function () {
       });
     });
 
-    it("flattens children", function () {
+    it("flattens children", () => {
       const vnode = (
         <section>
           <h1>A Heading</h1>
@@ -118,7 +118,7 @@ describe("snabbdom", function () {
       });
     });
 
-    it("removes falsey children", function () {
+    it("removes falsey children", () => {
       const showLogin = false;
       const showCaptcha = false;
       const loginAttempts = 0;
@@ -188,7 +188,7 @@ describe("snabbdom", function () {
       });
     });
 
-    it("works with a function component", function () {
+    it("works with a function component", () => {
       // workaround linter issue
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const Part = ({ part }: { part: string }) => <span>{part}</span>;
@@ -273,8 +273,8 @@ describe("snabbdom", function () {
     });
   });
 
-  describe("Fragment", function () {
-    it("can be used as a jsxFragmentFactory method", function () {
+  describe("Fragment", () => {
+    it("can be used as a jsxFragmentFactory method", () => {
       const vnode = <>Hello World</>;
 
       assert.deepStrictEqual(vnode, {
@@ -287,7 +287,7 @@ describe("snabbdom", function () {
       });
     });
 
-    it("creates text property for text only child", function () {
+    it("creates text property for text only child", () => {
       const vnode = <>foo bar</>;
 
       assert.deepStrictEqual(vnode, {
@@ -300,7 +300,7 @@ describe("snabbdom", function () {
       });
     });
 
-    it("creates an array of children for multiple children", function () {
+    it("creates an array of children for multiple children", () => {
       const vnode = (
         <>
           {"foo"}
@@ -335,7 +335,7 @@ describe("snabbdom", function () {
       });
     });
 
-    it("flattens children", function () {
+    it("flattens children", () => {
       const vnode = (
         <>
           <h1>A Heading</h1>
@@ -389,7 +389,7 @@ describe("snabbdom", function () {
       });
     });
 
-    it("removes falsey children", function () {
+    it("removes falsey children", () => {
       const showLogin = false;
       const showCaptcha = false;
       const loginAttempts = 0;
@@ -459,7 +459,7 @@ describe("snabbdom", function () {
       });
     });
 
-    it("works with a function component", function () {
+    it("works with a function component", () => {
       // workaround linter issue
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const Part = ({ part }: { part: string }) => <>{part}</>;
@@ -543,7 +543,7 @@ describe("snabbdom", function () {
       });
     });
 
-    it("can correctly be patched", function () {
+    it("can correctly be patched", () => {
       const patch = init([], undefined, {
         experimental: {
           fragments: true

test/unit/style.ts

@@ -9,17 +9,17 @@ featureDiscoveryElm.style.setProperty("--foo", "foo");
 const hasCssVariables =
   featureDiscoveryElm.style.getPropertyValue("--foo") === "foo";
 
-describe("style", function () {
+describe("style", () => {
   let elm: any, vnode0: any;
-  beforeEach(function () {
+  beforeEach(() => {
     elm = document.createElement("div");
     vnode0 = elm;
   });
-  it("is being styled", function () {
+  it("is being styled", () => {
     elm = patch(vnode0, h("div", { style: { fontSize: "12px" } })).elm;
     assert.strictEqual(elm.style.fontSize, "12px");
   });
-  it("can be memoized", function () {
+  it("can be memoized", () => {
     const cachedStyles = { fontSize: "14px", display: "inline" };
     const vnode1 = h("i", { style: cachedStyles });
     const vnode2 = h("i", { style: cachedStyles });
@@ -30,7 +30,7 @@ describe("style", function () {
     assert.strictEqual(elm.style.fontSize, "14px");
     assert.strictEqual(elm.style.display, "inline");
   });
-  it("updates styles", function () {
+  it("updates styles", () => {
     const vnode1 = h("i", { style: { fontSize: "14px", display: "inline" } });
     const vnode2 = h("i", { style: { fontSize: "12px", display: "block" } });
     const vnode3 = h("i", { style: { fontSize: "10px", display: "block" } });
@@ -44,7 +44,7 @@ describe("style", function () {
     assert.strictEqual(elm.style.fontSize, "10px");
     assert.strictEqual(elm.style.display, "block");
   });
-  it("explicialy removes styles", function () {
+  it("explicialy removes styles", () => {
     const vnode1 = h("i", { style: { fontSize: "14px" } });
     const vnode2 = h("i", { style: { fontSize: "" } });
     const vnode3 = h("i", { style: { fontSize: "10px" } });
@@ -55,7 +55,7 @@ describe("style", function () {
     patch(vnode2, vnode3);
     assert.strictEqual(elm.style.fontSize, "10px");
   });
-  it("handles falsy values", function () {
+  it("handles falsy values", () => {
     const vnode1 = h("i", { style: { flexShrink: 0 as any } });
     const vnode2 = h("i", { style: { flexShrink: 0 as any } });
     elm = patch(vnode0, vnode1).elm;
@@ -63,7 +63,7 @@ describe("style", function () {
     patch(vnode1, vnode2);
     assert.strictEqual(elm.style.flexShrink, "0");
   });
-  it("implicially removes styles from element", function () {
+  it("implicially removes styles from element", () => {
     const vnode1 = h("div", [h("i", { style: { fontSize: "14px" } })]);
     const vnode2 = h("div", [h("i")]);
     const vnode3 = h("div", [h("i", { style: { fontSize: "10px" } })]);
@@ -74,7 +74,7 @@ describe("style", function () {
     patch(vnode2, vnode3);
     assert.strictEqual(elm.firstChild.style.fontSize, "10px");
   });
-  it("updates css variables", function () {
+  it("updates css variables", () => {
     if (!hasCssVariables) {
       this.skip();
     } else {
@@ -89,7 +89,7 @@ describe("style", function () {
       assert.strictEqual(elm.style.getPropertyValue("--myVar"), "3");
     }
   });
-  it("explicialy removes css variables", function () {
+  it("explicialy removes css variables", () => {
     if (!hasCssVariables) {
       this.skip();
     } else {
@@ -104,7 +104,7 @@ describe("style", function () {
       assert.strictEqual(elm.style.getPropertyValue("--myVar"), "2");
     }
   });
-  it("implicially removes css variables from element", function () {
+  it("implicially removes css variables from element", () => {
     if (!hasCssVariables) {
       this.skip();
     } else {
@@ -119,7 +119,7 @@ describe("style", function () {
       assert.strictEqual(elm.firstChild.style.getPropertyValue("--myVar"), "2");
     }
   });
-  it("updates delayed styles in next frame", function (done) {
+  it("updates delayed styles in next frame", (done) => {
     const vnode1 = h("i", {
       style: { fontSize: "14px", delayed: { fontSize: "16px" } as any }
     });
@@ -142,7 +142,7 @@ describe("style", function () {
       });
     });
   });
-  it("applies tranform as transition on remove", function (done) {
+  it("applies tranform as transition on remove", (done) => {
     const btn = h(
       "button",
       {
@@ -160,13 +160,13 @@ describe("style", function () {
     patch(vnode1, vnode2);
     const button = document.querySelector("button") as HTMLButtonElement;
     assert.notStrictEqual(button, null);
-    button.addEventListener("transitionend", function () {
+    button.addEventListener("transitionend", () => {
       assert.strictEqual(document.querySelector("button"), null);
       done();
     });
   });
-  describe("using toVNode()", function () {
-    it("handles (ignoring) comment nodes", function () {
+  describe("using toVNode()", () => {
+    it("handles (ignoring) comment nodes", () => {
       const comment = document.createComment("yolo");
       const prevElm = document.createElement("div");
       prevElm.appendChild(comment);

test/unit/thunk.ts

@@ -4,12 +4,12 @@ import { init, h, thunk, VNode } from "../../src/index";
 
 const patch = init([]);
 
-describe("thunk", function () {
+describe("thunk", () => {
   let elm: any, vnode0: any;
-  beforeEach(function () {
+  beforeEach(() => {
     elm = vnode0 = document.createElement("div");
   });
-  it("returns vnode with data and render function", function () {
+  it("returns vnode with data and render function", () => {
     function numberInSpan(n: number) {
       return h("span", `Number is ${n}`);
     }
@@ -18,7 +18,7 @@ describe("thunk", function () {
     assert.deepEqual(vnode.data.key, "num");
     assert.deepEqual(vnode.data.args, [22]);
   });
-  it("calls render function once on data change", function () {
+  it("calls render function once on data change", () => {
     let called = 0;
     function numberInSpan(n: number) {
       called++;
@@ -31,7 +31,7 @@ describe("thunk", function () {
     patch(vnode1, vnode2);
     assert.strictEqual(called, 2);
   });
-  it("does not call render function on data unchanged", function () {
+  it("does not call render function on data unchanged", () => {
     let called = 0;
     function numberInSpan(n: number) {
       called++;
@@ -44,7 +44,7 @@ describe("thunk", function () {
     patch(vnode1, vnode2);
     assert.strictEqual(called, 1);
   });
-  it("calls render function once on data-length change", function () {
+  it("calls render function once on data-length change", () => {
     let called = 0;
     function numberInSpan(n: number) {
       called++;
@@ -57,7 +57,7 @@ describe("thunk", function () {
     patch(vnode1, vnode2);
     assert.strictEqual(called, 2);
   });
-  it("calls render function once on function change", function () {
+  it("calls render function once on function change", () => {
     let called = 0;
     function numberInSpan(n: number) {
       called++;
@@ -74,7 +74,7 @@ describe("thunk", function () {
     patch(vnode1, vnode2);
     assert.strictEqual(called, 2);
   });
-  it("renders correctly", function () {
+  it("renders correctly", () => {
     let called = 0;
     function numberInSpan(n: number) {
       called++;
@@ -94,7 +94,7 @@ describe("thunk", function () {
     assert.strictEqual(elm.firstChild.innerHTML, "Number is 2");
     assert.strictEqual(called, 2);
   });
-  it("supports leaving out the `key` argument", function () {
+  it("supports leaving out the `key` argument", () => {
     function vnodeFn(s: string) {
       return h("span.number", "Hello " + s);
     }
@@ -102,7 +102,7 @@ describe("thunk", function () {
     elm = patch(vnode0, vnode1).elm;
     assert.strictEqual(elm.innerText, "Hello World!");
   });
-  it("renders correctly when root", function () {
+  it("renders correctly when root", () => {
     let called = 0;
     function numberInSpan(n: number) {
       called++;
@@ -125,7 +125,7 @@ describe("thunk", function () {
     assert.strictEqual(elm.innerHTML, "Number is 2");
     assert.strictEqual(called, 2);
   });
-  it("can be replaced and removed", function () {
+  it("can be replaced and removed", () => {
     function numberInSpan(n: number) {
       return h("span", { key: "num" }, `Number is ${n}`);
     }
@@ -144,7 +144,7 @@ describe("thunk", function () {
     assert.strictEqual(elm.firstChild.tagName.toLowerCase(), "div");
     assert.strictEqual(elm.firstChild.innerHTML, "Even: 4");
   });
-  it("can be replaced and removed when root", function () {
+  it("can be replaced and removed when root", () => {
     function numberInSpan(n: number) {
       return h("span", { key: "num" }, `Number is ${n}`);
     }
@@ -163,7 +163,7 @@ describe("thunk", function () {
     assert.strictEqual(elm.tagName.toLowerCase(), "div");
     assert.strictEqual(elm.innerHTML, "Even: 4");
   });
-  it("invokes destroy hook on thunks", function () {
+  it("invokes destroy hook on thunks", () => {
     let called = 0;
     function destroyHook() {
       called++;
@@ -185,7 +185,7 @@ describe("thunk", function () {
     patch(vnode1, vnode2);
     assert.strictEqual(called, 1);
   });
-  it("invokes remove hook on thunks", function () {
+  it("invokes remove hook on thunks", () => {
     let called = 0;
     function hook() {
       called++;