github-forks
/
snabbdom
mirror of https://github.com/snabbdom/snabbdom.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

Browse Source
pull/1108/head
Simon Friis Vindum 1 year ago committed by GitHub
parent f3f7b9f561
commit 890dac8d3e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
17 changed files with 300 additions and 331 deletions
Show Stats Download Patch File Download Diff File

8
README-in_HN.md
Unescape Escape View File

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

4
README-zh_CN.md
Unescape Escape View File

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

8
README.md
Unescape Escape View File

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

8
examples/hero/hero.js
Unescape Escape View File

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

4
examples/reorder-animation/index.js
Unescape Escape View File

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

14
perf/benchmarks.js
Unescape Escape View File

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

72
src/init.ts
Unescape Escape View File

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

13
src/modules/style.ts
Unescape Escape View File

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

14
test/unit/attachto.ts
Unescape Escape View File

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

28
test/unit/attributes.ts
Unescape Escape View File

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

312
test/unit/core.ts
View File

File diff suppressed because it is too large Load Diff

18
test/unit/dataset.ts
Unescape Escape View File

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

22
test/unit/eventlisteners.ts
Unescape Escape View File

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

10
test/unit/htmldomapi.ts
Unescape Escape View File

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

32
test/unit/jsx.tsx
Unescape Escape View File

@ -1,9 +1,9 @@
import { assert } from "@esm-bundle/chai"; import { assert } from "@esm-bundle/chai";
import { jsx, Fragment, init } from "../../src/index"; import { jsx, Fragment, init } from "../../src/index";
describe("snabbdom", function () { describe("snabbdom", () => {
describe("jsx", function () { describe("jsx", () => {
it("can be used as a jsxFactory method", function () { it("can be used as a jsxFactory method", () => {
const vnode = <div title="Hello World">Hello World</div>; const vnode = <div title="Hello World">Hello World</div>;
assert.deepStrictEqual(vnode, { 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>; const vnode = <div>foo bar</div>;
assert.deepStrictEqual(vnode, { 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 = ( const vnode = (
<div> <div>
{"foo"} {"foo"}
@ -64,7 +64,7 @@ describe("snabbdom", function () {
}); });
}); });
it("flattens children", function () { it("flattens children", () => {
const vnode = ( const vnode = (
<section> <section>
<h1>A Heading</h1> <h1>A Heading</h1>
@ -118,7 +118,7 @@ describe("snabbdom", function () {
}); });
}); });
it("removes falsey children", function () { it("removes falsey children", () => {
const showLogin = false; const showLogin = false;
const showCaptcha = false; const showCaptcha = false;
const loginAttempts = 0; 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 // workaround linter issue
// eslint-disable-next-line @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
const Part = ({ part }: { part: string }) => <span>{part}</span>; const Part = ({ part }: { part: string }) => <span>{part}</span>;
@ -273,8 +273,8 @@ describe("snabbdom", function () {
}); });
}); });
describe("Fragment", function () { describe("Fragment", () => {
it("can be used as a jsxFragmentFactory method", function () { it("can be used as a jsxFragmentFactory method", () => {
const vnode = <>Hello World</>; const vnode = <>Hello World</>;
assert.deepStrictEqual(vnode, { 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</>; const vnode = <>foo bar</>;
assert.deepStrictEqual(vnode, { 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 = ( const vnode = (
<> <>
{"foo"} {"foo"}
@ -335,7 +335,7 @@ describe("snabbdom", function () {
}); });
}); });
it("flattens children", function () { it("flattens children", () => {
const vnode = ( const vnode = (
<> <>
<h1>A Heading</h1> <h1>A Heading</h1>
@ -389,7 +389,7 @@ describe("snabbdom", function () {
}); });
}); });
it("removes falsey children", function () { it("removes falsey children", () => {
const showLogin = false; const showLogin = false;
const showCaptcha = false; const showCaptcha = false;
const loginAttempts = 0; 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 // workaround linter issue
// eslint-disable-next-line @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
const Part = ({ part }: { part: string }) => <>{part}</>; 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, { const patch = init([], undefined, {
experimental: { experimental: {
fragments: true fragments: true

32
test/unit/style.ts
Unescape Escape View File

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

28
test/unit/thunk.ts
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save