chore(tools): apply prettier-format to all files (#1077)

Co-authored-by: chris <chris@bumblehead.com>
pull/1062/head
iambumblehead 1 year ago committed by GitHub
parent 49c01df531
commit f5fcde33ec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -4,36 +4,36 @@ export default {
browserName: "chrome", browserName: "chrome",
browser_version: "latest", browser_version: "latest",
os: "Windows", os: "Windows",
os_version: "10", os_version: "10"
}, },
BS_Firefox_Current: { BS_Firefox_Current: {
browserName: "firefox", browserName: "firefox",
browser_version: "latest", browser_version: "latest",
os: "Windows", os: "Windows",
os_version: "10", os_version: "10"
}, },
BS_Safari_Current: { BS_Safari_Current: {
browserName: "safari", browserName: "safari",
browser_version: "latest", browser_version: "latest",
os: "OS X", os: "OS X",
os_version: "Big Sur", os_version: "Big Sur"
}, },
BS_Android_Current: { BS_Android_Current: {
browserName: "chrome", browserName: "chrome",
device: "Samsung Galaxy S23", device: "Samsung Galaxy S23",
os: "Android", os: "Android",
os_version: "13.0", os_version: "13.0"
}, },
BS_Android_10: { BS_Android_10: {
browserName: "Android", browserName: "Android",
device: "OnePlus 8", device: "OnePlus 8",
os: "Android", os: "Android",
os_version: "10.0", os_version: "10.0"
}, },
BS_MS_Edge: { BS_MS_Edge: {
browserName: "edge", browserName: "edge",
browser_version: "latest", browser_version: "latest",
os: "Windows", os: "Windows",
os_version: "10", os_version: "10"
}, }
}; };

@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta <meta

@ -3,7 +3,7 @@ import {
attributesModule, attributesModule,
styleModule, styleModule,
eventListenersModule, eventListenersModule,
h, h
} from "../../build/index.js"; } from "../../build/index.js";
const patch = init([attributesModule, styleModule, eventListenersModule]); const patch = init([attributesModule, styleModule, eventListenersModule]);
@ -11,7 +11,7 @@ const patch = init([attributesModule, styleModule, eventListenersModule]);
let vnode; let vnode;
let data = { let data = {
degRotation: 0, degRotation: 0
}; };
function gRotation() { function gRotation() {
@ -45,13 +45,13 @@ const hTriangle = (id, degRotation) =>
attrs: { attrs: {
points: "-50,-88 0,-175 50,-88", points: "-50,-88 0,-175 50,-88",
transform: "rotate(" + degRotation + ")", transform: "rotate(" + degRotation + ")",
"stroke-width": 3, "stroke-width": 3
}, },
on: { on: {
click: () => { click: () => {
triangleClick(id); triangleClick(id);
}, }
}, }
}); });
const view = () => const view = () =>
@ -64,7 +64,7 @@ const view = () =>
h( h(
"g#carousel", "g#carousel",
{ {
style: { "-webkit-transform": gRotation(), transform: gRotation() }, style: { "-webkit-transform": gRotation(), transform: gRotation() }
}, },
[ [
hTriangle("yellow", 0), hTriangle("yellow", 0),
@ -72,9 +72,9 @@ const view = () =>
hTriangle("magenta", 120), hTriangle("magenta", 120),
hTriangle("red", 180), hTriangle("red", 180),
hTriangle("cyan", 240), hTriangle("cyan", 240),
hTriangle("blue", 300), hTriangle("blue", 300)
] ]
), )
] ]
), ),
h( h(
@ -83,8 +83,8 @@ const view = () =>
on: { on: {
click: () => { click: () => {
handleRotate(60); handleRotate(60);
}, }
}, }
}, },
"Rotate Clockwise" "Rotate Clockwise"
), ),
@ -94,8 +94,8 @@ const view = () =>
on: { on: {
click: () => { click: () => {
handleRotate(-60); handleRotate(-60);
}, }
}, }
}, },
"Rotate Anticlockwise" "Rotate Anticlockwise"
), ),
@ -105,11 +105,11 @@ const view = () =>
on: { on: {
click: () => { click: () => {
handleReset(0); handleReset(0);
}, }
}, }
}, },
"Reset" "Reset"
), )
]); ]);
window.addEventListener("DOMContentLoaded", () => { window.addEventListener("DOMContentLoaded", () => {

@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

@ -3,7 +3,7 @@ import {
classModule, classModule,
styleModule, styleModule,
eventListenersModule, eventListenersModule,
h, h
} from "../../build/index.js"; } from "../../build/index.js";
import { heroModule } from "./hero.js"; import { heroModule } from "./hero.js";
@ -12,7 +12,7 @@ const patch = init([
classModule, classModule,
heroModule, heroModule,
styleModule, styleModule,
eventListenersModule, eventListenersModule
]); ]);
let vnode; let vnode;
@ -23,54 +23,54 @@ const data = {
{ {
rank: 1, rank: 1,
title: "This is an", title: "This is an",
desc: "Lorem ipsum dolor sit amet, sed pede integer vitae bibendum, accumsan sit, vulputate aenean tempora ipsum. Lorem sed id et metus, eros posuere suspendisse nec nunc justo, fusce augue placerat nibh purus suspendisse. Aliquam aliquam, ut eget. Mollis a eget sed nibh tincidunt nec, mi integer, proin magna lacus iaculis tortor. Aliquam vel arcu arcu, vivamus a urna fames felis vel wisi, cursus tortor nec erat dignissim cras sem, mauris ac venenatis tellus elit.", desc: "Lorem ipsum dolor sit amet, sed pede integer vitae bibendum, accumsan sit, vulputate aenean tempora ipsum. Lorem sed id et metus, eros posuere suspendisse nec nunc justo, fusce augue placerat nibh purus suspendisse. Aliquam aliquam, ut eget. Mollis a eget sed nibh tincidunt nec, mi integer, proin magna lacus iaculis tortor. Aliquam vel arcu arcu, vivamus a urna fames felis vel wisi, cursus tortor nec erat dignissim cras sem, mauris ac venenatis tellus elit."
}, },
{ {
rank: 2, rank: 2,
title: "example of", title: "example of",
desc: "Consequuntur ipsum nulla, consequat curabitur in magnis risus. Taciti mattis bibendum tellus nibh, at dui neque eget, odio pede ut, sapien pede, ipsum ut. Sagittis dui, sodales sem, praesent ipsum conubia eget lorem lobortis wisi.", desc: "Consequuntur ipsum nulla, consequat curabitur in magnis risus. Taciti mattis bibendum tellus nibh, at dui neque eget, odio pede ut, sapien pede, ipsum ut. Sagittis dui, sodales sem, praesent ipsum conubia eget lorem lobortis wisi."
}, },
{ {
rank: 3, rank: 3,
title: "Snabbdom", title: "Snabbdom",
desc: "Quam lorem aliquam fusce wisi, urna purus ipsum pharetra sed, at cras sodales enim vestibulum odio cras, luctus integer phasellus.", desc: "Quam lorem aliquam fusce wisi, urna purus ipsum pharetra sed, at cras sodales enim vestibulum odio cras, luctus integer phasellus."
}, },
{ {
rank: 4, rank: 4,
title: "doing hero transitions", title: "doing hero transitions",
desc: "Et orci hac ultrices id in. Diam ultrices luctus egestas, sem aliquam auctor molestie odio laoreet. Pede nam cubilia, diam vestibulum ornare natoque, aenean etiam fusce id, eget dictum blandit et mauris mauris. Metus amet ad, elit porttitor a aliquet commodo lacus, integer neque imperdiet augue laoreet, nonummy turpis lacus sed pulvinar condimentum platea. Wisi eleifend quis, tristique dictum, ac dictumst. Sem nec tristique vel vehicula fringilla, nibh eu et posuere mi rhoncus.", desc: "Et orci hac ultrices id in. Diam ultrices luctus egestas, sem aliquam auctor molestie odio laoreet. Pede nam cubilia, diam vestibulum ornare natoque, aenean etiam fusce id, eget dictum blandit et mauris mauris. Metus amet ad, elit porttitor a aliquet commodo lacus, integer neque imperdiet augue laoreet, nonummy turpis lacus sed pulvinar condimentum platea. Wisi eleifend quis, tristique dictum, ac dictumst. Sem nec tristique vel vehicula fringilla, nibh eu et posuere mi rhoncus."
}, },
{ {
rank: 5, rank: 5,
title: "using the", title: "using the",
desc: "Pede nam cubilia, diam vestibulum ornare natoque, aenean etiam fusce id, eget dictum blandit et mauris mauris. Metus amet ad, elit porttitor a aliquet commodo lacus, integer neque imperdiet augue laoreet, nonummy turpis lacus sed pulvinar condimentum platea. Wisi eleifend quis, tristique dictum, ac dictumst. Sem nec tristique vel vehicula fringilla, nibh eu et posuere mi rhoncus.", desc: "Pede nam cubilia, diam vestibulum ornare natoque, aenean etiam fusce id, eget dictum blandit et mauris mauris. Metus amet ad, elit porttitor a aliquet commodo lacus, integer neque imperdiet augue laoreet, nonummy turpis lacus sed pulvinar condimentum platea. Wisi eleifend quis, tristique dictum, ac dictumst. Sem nec tristique vel vehicula fringilla, nibh eu et posuere mi rhoncus."
}, },
{ {
rank: 6, rank: 6,
title: "module for hero transitions", title: "module for hero transitions",
desc: "Sapien laoreet, ligula elit tortor nulla pellentesque, maecenas enim turpis, quae duis venenatis vivamus ultricies, nunc imperdiet sollicitudin ipsum malesuada. Ut sem. Wisi fusce nullam nibh enim. Nisl hymenaeos id sed sed in. Proin leo et, pulvinar nunc pede laoreet.", desc: "Sapien laoreet, ligula elit tortor nulla pellentesque, maecenas enim turpis, quae duis venenatis vivamus ultricies, nunc imperdiet sollicitudin ipsum malesuada. Ut sem. Wisi fusce nullam nibh enim. Nisl hymenaeos id sed sed in. Proin leo et, pulvinar nunc pede laoreet."
}, },
{ {
rank: 7, rank: 7,
title: "click on ar element in", title: "click on ar element in",
desc: "Accumsan quia, id nascetur dui et congue erat, id excepteur, primis ratione nec. At nulla et. Suspendisse lobortis, lobortis in tortor fringilla, duis adipiscing vestibulum voluptates sociosqu auctor.", desc: "Accumsan quia, id nascetur dui et congue erat, id excepteur, primis ratione nec. At nulla et. Suspendisse lobortis, lobortis in tortor fringilla, duis adipiscing vestibulum voluptates sociosqu auctor."
}, },
{ {
rank: 8, rank: 8,
title: "the list", title: "the list",
desc: "Ante tellus egestas vel hymenaeos, ut viverra nibh ut, ipsum nibh donec donec dolor. Eros ridiculus vel egestas convallis ipsum, commodo ut venenatis nullam porta iaculis, suspendisse ante proin leo, felis risus etiam.", desc: "Ante tellus egestas vel hymenaeos, ut viverra nibh ut, ipsum nibh donec donec dolor. Eros ridiculus vel egestas convallis ipsum, commodo ut venenatis nullam porta iaculis, suspendisse ante proin leo, felis risus etiam."
}, },
{ {
rank: 9, rank: 9,
title: "to witness", title: "to witness",
desc: "Metus amet ad, elit porttitor a aliquet commodo lacus, integer neque imperdiet augue laoreet, nonummy turpis lacus sed pulvinar condimentum platea. Wisi eleifend quis, tristique dictum, ac dictumst.", desc: "Metus amet ad, elit porttitor a aliquet commodo lacus, integer neque imperdiet augue laoreet, nonummy turpis lacus sed pulvinar condimentum platea. Wisi eleifend quis, tristique dictum, ac dictumst."
}, },
{ {
rank: 10, rank: 10,
title: "the effect", title: "the effect",
desc: "Et orci hac ultrices id in. Diam ultrices luctus egestas, sem aliquam auctor molestie odio laoreet. Pede nam cubilia, diam vestibulum ornare natoque, aenean etiam fusce id, eget dictum blandit et mauris mauris", desc: "Et orci hac ultrices id in. Diam ultrices luctus egestas, sem aliquam auctor molestie odio laoreet. Pede nam cubilia, diam vestibulum ornare natoque, aenean etiam fusce id, eget dictum blandit et mauris mauris"
}, }
], ]
}; };
function select(m) { function select(m) {
@ -85,7 +85,7 @@ function render() {
const fadeInOutStyle = { const fadeInOutStyle = {
opacity: "0", opacity: "0",
delayed: { opacity: "1" }, delayed: { opacity: "1" },
remove: { opacity: "0" }, remove: { opacity: "0" }
}; };
const detailView = (movie) => const detailView = (movie) =>
@ -94,7 +94,7 @@ const detailView = (movie) =>
h( h(
"div.header-content.detail", "div.header-content.detail",
{ {
style: { opacity: "1", remove: { opacity: "0" } }, style: { opacity: "1", remove: { opacity: "0" } }
}, },
[ [
h("div.rank", [ h("div.rank", [
@ -107,9 +107,9 @@ const detailView = (movie) =>
style: { style: {
transform: "scale(0)", transform: "scale(0)",
delayed: { transform: "scale(1)" }, delayed: { transform: "scale(1)" },
destroy: { transform: "scale(0)" }, destroy: { transform: "scale(0)" }
}, }
}), })
]), ]),
h( h(
"div.hero.header-title", "div.hero.header-title",
@ -123,18 +123,18 @@ const detailView = (movie) =>
on: { on: {
click: () => { click: () => {
select(undefined); select(undefined);
}, }
}, },
style: { style: {
transform: "scale(0)", transform: "scale(0)",
delayed: { transform: "scale(1)" }, delayed: { transform: "scale(1)" },
destroy: { transform: "scale(0)" }, destroy: { transform: "scale(0)" }
}, }
}, },
"x" "x"
), )
] ]
), )
]), ]),
h("div.page-content", [ h("div.page-content", [
h( h(
@ -149,13 +149,13 @@ const detailView = (movie) =>
position: "absolute", position: "absolute",
top: "0", top: "0",
left: "0", left: "0",
transform: "translateX(3em)", transform: "translateX(3em)"
}, }
}, }
}, },
[h("h2", "Description:"), h("span", movie.desc)] [h("h2", "Description:"), h("span", movie.desc)]
), )
]), ])
]); ]);
const overviewView = (movies) => const overviewView = (movies) =>
@ -164,7 +164,7 @@ const overviewView = (movies) =>
h( h(
"div.header-content.overview", "div.header-content.overview",
{ {
style: fadeInOutStyle, style: fadeInOutStyle
}, },
[ [
h( h(
@ -173,14 +173,14 @@ const overviewView = (movies) =>
style: { style: {
transform: "translateY(-2em)", transform: "translateY(-2em)",
delayed: { transform: "translate(0)" }, delayed: { transform: "translate(0)" },
destroy: { transform: "translateY(-2em)" }, destroy: { transform: "translateY(-2em)" }
}, }
}, },
"Top 10 movies" "Top 10 movies"
), ),
h("div.spacer"), h("div.spacer")
] ]
), )
]), ]),
h("div.page-content", [ h("div.page-content", [
h( h(
@ -189,8 +189,8 @@ const overviewView = (movies) =>
style: { style: {
opacity: "0", opacity: "0",
delayed: { opacity: "1" }, delayed: { opacity: "1" },
remove: { opacity: "0", position: "absolute", top: "0", left: "0" }, remove: { opacity: "0", position: "absolute", top: "0", left: "0" }
}, }
}, },
movies.map((movie) => movies.map((movie) =>
h( h(
@ -199,8 +199,8 @@ const overviewView = (movies) =>
on: { on: {
click: () => { click: () => {
select(movie); select(movie);
}, }
}, }
}, },
[ [
h("div.hero.rank", [ h("div.hero.rank", [
@ -208,19 +208,19 @@ const overviewView = (movies) =>
"span.hero", "span.hero",
{ hero: { id: "rank" + movie.rank } }, { hero: { id: "rank" + movie.rank } },
movie.rank movie.rank
), )
]), ]),
h("div.hero", { hero: { id: movie.title } }, movie.title), h("div.hero", { hero: { id: movie.title } }, movie.title)
] ]
) )
) )
), )
]), ])
]); ]);
const view = (data) => const view = (data) =>
h("div.page-container", [ h("div.page-container", [
data.selected ? detailView(data.selected) : overviewView(data.movies), data.selected ? detailView(data.selected) : overviewView(data.movies)
]); ]);
window.addEventListener("DOMContentLoaded", () => { window.addEventListener("DOMContentLoaded", () => {

@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
@ -27,7 +27,9 @@
.btn:active, .btn:active,
.active, .active,
.active:hover { .active:hover {
box-shadow: 0 0 1px rgba(0, 0, 0, 0.2), inset 0 0 4px rgba(0, 0, 0, 0.1); box-shadow:
0 0 1px rgba(0, 0, 0, 0.2),
inset 0 0 4px rgba(0, 0, 0, 0.1);
} }
.add { .add {
float: right; float: right;
@ -49,9 +51,13 @@
padding: 1em; padding: 1em;
background: #fff; background: #fff;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.2); box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
transition: transform 0.5s ease-in-out, opacity 0.5s ease-out, transition:
transform 0.5s ease-in-out,
opacity 0.5s ease-out,
left 0.5s ease-in-out; left 0.5s ease-in-out;
-webkit-transition: transform 0.5s ease-in-out, opacity 0.5s ease-out, -webkit-transition:
transform 0.5s ease-in-out,
opacity 0.5s ease-out,
left 0.5s ease-in-out; left 0.5s ease-in-out;
} }
.row div { .row div {

@ -4,14 +4,14 @@ import {
propsModule, propsModule,
styleModule, styleModule,
eventListenersModule, eventListenersModule,
h, h
} from "../../build/index.js"; } from "../../build/index.js";
const patch = init([ const patch = init([
classModule, classModule,
propsModule, propsModule,
styleModule, styleModule,
eventListenersModule, eventListenersModule
]); ]);
let vnode; let vnode;
@ -25,62 +25,62 @@ const originalData = [
rank: 1, rank: 1,
title: "The Shawshank Redemption", title: "The Shawshank Redemption",
desc: "Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.", desc: "Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.",
elmHeight: 0, elmHeight: 0
}, },
{ {
rank: 2, rank: 2,
title: "The Godfather", title: "The Godfather",
desc: "The aging patriarch of an organized crime dynasty transfers control of his clandestine empire to his reluctant son.", desc: "The aging patriarch of an organized crime dynasty transfers control of his clandestine empire to his reluctant son.",
elmHeight: 0, elmHeight: 0
}, },
{ {
rank: 3, rank: 3,
title: "The Godfather: Part II", title: "The Godfather: Part II",
desc: "The early life and career of Vito Corleone in 1920s New York is portrayed while his son, Michael, expands and tightens his grip on his crime syndicate stretching from Lake Tahoe, Nevada to pre-revolution 1958 Cuba.", desc: "The early life and career of Vito Corleone in 1920s New York is portrayed while his son, Michael, expands and tightens his grip on his crime syndicate stretching from Lake Tahoe, Nevada to pre-revolution 1958 Cuba.",
elmHeight: 0, elmHeight: 0
}, },
{ {
rank: 4, rank: 4,
title: "The Dark Knight", title: "The Dark Knight",
desc: "When the menace known as the Joker wreaks havoc and chaos on the people of Gotham, the caped crusader must come to terms with one of the greatest psychological tests of his ability to fight injustice.", desc: "When the menace known as the Joker wreaks havoc and chaos on the people of Gotham, the caped crusader must come to terms with one of the greatest psychological tests of his ability to fight injustice.",
elmHeight: 0, elmHeight: 0
}, },
{ {
rank: 5, rank: 5,
title: "Pulp Fiction", title: "Pulp Fiction",
desc: "The lives of two mob hit men, a boxer, a gangster's wife, and a pair of diner bandits intertwine in four tales of violence and redemption.", desc: "The lives of two mob hit men, a boxer, a gangster's wife, and a pair of diner bandits intertwine in four tales of violence and redemption.",
elmHeight: 0, elmHeight: 0
}, },
{ {
rank: 6, rank: 6,
title: "Schindler's List", title: "Schindler's List",
desc: "In Poland during World War II, Oskar Schindler gradually becomes concerned for his Jewish workforce after witnessing their persecution by the Nazis.", desc: "In Poland during World War II, Oskar Schindler gradually becomes concerned for his Jewish workforce after witnessing their persecution by the Nazis.",
elmHeight: 0, elmHeight: 0
}, },
{ {
rank: 7, rank: 7,
title: "12 Angry Men", title: "12 Angry Men",
desc: "A dissenting juror in a murder trial slowly manages to convince the others that the case is not as obviously clear as it seemed in court.", desc: "A dissenting juror in a murder trial slowly manages to convince the others that the case is not as obviously clear as it seemed in court.",
elmHeight: 0, elmHeight: 0
}, },
{ {
rank: 8, rank: 8,
title: "The Good, the Bad and the Ugly", title: "The Good, the Bad and the Ugly",
desc: "A bounty hunting scam joins two men in an uneasy alliance against a third in a race to find a fortune in gold buried in a remote cemetery.", desc: "A bounty hunting scam joins two men in an uneasy alliance against a third in a race to find a fortune in gold buried in a remote cemetery.",
elmHeight: 0, elmHeight: 0
}, },
{ {
rank: 9, rank: 9,
title: "The Lord of the Rings: The Return of the King", title: "The Lord of the Rings: The Return of the King",
desc: "Gandalf and Aragorn lead the World of Men against Sauron's army to draw his gaze from Frodo and Sam as they approach Mount Doom with the One Ring.", desc: "Gandalf and Aragorn lead the World of Men against Sauron's army to draw his gaze from Frodo and Sam as they approach Mount Doom with the One Ring.",
elmHeight: 0, elmHeight: 0
}, },
{ {
rank: 10, rank: 10,
title: "Fight Club", title: "Fight Club",
desc: "An insomniac office worker looking for a way to change his life crosses paths with a devil-may-care soap maker and they form an underground fight club that evolves into something much, much more...", desc: "An insomniac office worker looking for a way to change his life crosses paths with a devil-may-care soap maker and they form an underground fight club that evolves into something much, much more...",
elmHeight: 0, elmHeight: 0
}, }
]; ];
let data = [ let data = [
originalData[0], originalData[0],
@ -92,7 +92,7 @@ let data = [
originalData[6], originalData[6],
originalData[7], originalData[7],
originalData[8], originalData[8],
originalData[9], originalData[9]
]; ];
function changeSort(prop) { function changeSort(prop) {
@ -112,7 +112,7 @@ function changeSort(prop) {
function add() { function add() {
const n = originalData[Math.floor(Math.random() * 10)]; const n = originalData[Math.floor(Math.random() * 10)];
data = [ data = [
{ rank: nextKey++, title: n.title, desc: n.desc, elmHeight: 0 }, { rank: nextKey++, title: n.title, desc: n.desc, elmHeight: 0 }
].concat(data); ].concat(data);
render(); render();
render(); render();
@ -136,14 +136,14 @@ function movieView(movie) {
delayed: { transform: `translateY(${movie.offset}px)`, opacity: "1" }, delayed: { transform: `translateY(${movie.offset}px)`, opacity: "1" },
remove: { remove: {
opacity: "0", opacity: "0",
transform: `translateY(${movie.offset}px) translateX(200px)`, transform: `translateY(${movie.offset}px) translateX(200px)`
}, }
}, },
hook: { hook: {
insert: (vnode) => { insert: (vnode) => {
movie.elmHeight = vnode.elm.offsetHeight; movie.elmHeight = vnode.elm.offsetHeight;
}, }
}, }
}, },
[ [
h("div", { style: { fontWeight: "bold" } }, movie.rank), h("div", { style: { fontWeight: "bold" } }, movie.rank),
@ -155,11 +155,11 @@ function movieView(movie) {
on: { on: {
click: () => { click: () => {
remove(movie); remove(movie);
}, }
}, }
}, },
"x" "x"
), )
] ]
); );
} }
@ -191,8 +191,8 @@ function view(data) {
on: { on: {
click: () => { click: () => {
changeSort("rank"); changeSort("rank");
}, }
}, }
}, },
"Rank" "Rank"
), ),
@ -203,8 +203,8 @@ function view(data) {
on: { on: {
click: () => { click: () => {
changeSort("title"); changeSort("title");
}, }
}, }
}, },
"Title" "Title"
), ),
@ -215,18 +215,18 @@ function view(data) {
on: { on: {
click: () => { click: () => {
changeSort("desc"); changeSort("desc");
}, }
}, }
}, },
"Description" "Description"
), )
]), ])
]), ]),
h( h(
"div.list", "div.list",
{ style: { height: totalHeight + "px" } }, { style: { height: totalHeight + "px" } },
data.map(movieView) data.map(movieView)
), )
]); ]);
} }

@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
@ -27,7 +27,9 @@
.btn:active, .btn:active,
.active, .active,
.active:hover { .active:hover {
box-shadow: 0 0 1px rgba(0, 0, 0, 0.2), inset 0 0 4px rgba(0, 0, 0, 0.1); box-shadow:
0 0 1px rgba(0, 0, 0, 0.2),
inset 0 0 4px rgba(0, 0, 0, 0.1);
} }
.add { .add {
float: right; float: right;
@ -49,9 +51,13 @@
padding: 1em; padding: 1em;
background: #fff; background: #fff;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.2); box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
transition: transform 0.5s ease-in-out, opacity 0.5s ease-out, transition:
transform 0.5s ease-in-out,
opacity 0.5s ease-out,
left 0.5s ease-in-out; left 0.5s ease-in-out;
-webkit-transition: transform 0.5s ease-in-out, opacity 0.5s ease-out, -webkit-transition:
transform 0.5s ease-in-out,
opacity 0.5s ease-out,
left 0.5s ease-in-out; left 0.5s ease-in-out;
} }
.row div { .row div {

@ -13,10 +13,10 @@ window.addEventListener("DOMContentLoaded", () => {
r: 40, r: 40,
stroke: "green", stroke: "green",
"stroke-width": 4, "stroke-width": 4,
fill: "yellow", fill: "yellow"
}, }
}), })
]), ])
]); ]);
patch(container, vnode); patch(container, vnode);
}); });

@ -37,7 +37,7 @@ document.addEventListener("DOMContentLoaded", function () {
a.patch(emptyNode, vnode1); a.patch(emptyNode, vnode1);
a.patch(vnode1, vnode2); a.patch(vnode1, vnode2);
a.patch(vnode2, a.emptyNode); a.patch(vnode2, a.emptyNode);
}, }
}) })
.add("b/ insert first", { .add("b/ insert first", {
setup: function () { setup: function () {
@ -49,7 +49,7 @@ document.addEventListener("DOMContentLoaded", function () {
b.patch(emptyNode, vnode1); b.patch(emptyNode, vnode1);
b.patch(vnode1, vnode2); b.patch(vnode1, vnode2);
b.patch(vnode2, b.emptyNode); b.patch(vnode2, b.emptyNode);
}, }
}) })
// add listeners // add listeners
.on("cycle", function (event) { .on("cycle", function (event) {

@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

@ -16,7 +16,7 @@ export type VNodeChildren = ArrayOrElement<VNodeChildElement>;
export function addNS( export function addNS(
data: any, data: any,
children: Array<VNode | string> | undefined, children: Array<VNode | string> | undefined,
sel: string | undefined, sel: string | undefined
): void { ): void {
data.ns = "http://www.w3.org/2000/svg"; data.ns = "http://www.w3.org/2000/svg";
if (sel !== "foreignObject" && children !== undefined) { if (sel !== "foreignObject" && children !== undefined) {
@ -37,7 +37,7 @@ export function h(sel: string, children: VNodeChildren): VNode;
export function h( export function h(
sel: string, sel: string,
data: VNodeData | null, data: VNodeData | null,
children: VNodeChildren, children: VNodeChildren
): VNode; ): VNode;
export function h(sel: any, b?: any, c?: any): VNode { export function h(sel: any, b?: any, c?: any): VNode {
let data: VNodeData = {}; let data: VNodeData = {};
@ -74,7 +74,7 @@ export function h(sel: any, b?: any, c?: any): VNode {
undefined, undefined,
undefined, undefined,
children[i], children[i],
undefined, undefined
); );
} }
} }

@ -184,5 +184,5 @@ export const htmlDomApi: DOMAPI = {
isElement, isElement,
isText, isText,
isComment, isComment,
isDocumentFragment, isDocumentFragment
}; };

@ -20,7 +20,7 @@ export type {
VNodes, VNodes,
VNodeChildElement, VNodeChildElement,
ArrayOrElement, ArrayOrElement,
VNodeChildren, VNodeChildren
} from "./h"; } from "./h";
// types // types

@ -37,14 +37,14 @@ function documentFragmentIsNotSupported(): never {
function isElement( function isElement(
api: DOMAPI, api: DOMAPI,
vnode: Element | DocumentFragment | VNode, vnode: Element | DocumentFragment | VNode
): vnode is Element { ): vnode is Element {
return api.isElement(vnode as any); return api.isElement(vnode as any);
} }
function isDocumentFragment( function isDocumentFragment(
api: DOMAPI, api: DOMAPI,
vnode: DocumentFragment | VNode, vnode: DocumentFragment | VNode
): vnode is DocumentFragment { ): vnode is DocumentFragment {
return api.isDocumentFragment!(vnode as any); return api.isDocumentFragment!(vnode as any);
} }
@ -60,7 +60,7 @@ type ModuleHooks = ArraysOf<Required<Module>>;
function createKeyToOldIdx( function createKeyToOldIdx(
children: VNode[], children: VNode[],
beginIdx: number, beginIdx: number,
endIdx: number, endIdx: number
): KeyToIndexMap { ): KeyToIndexMap {
const map: KeyToIndexMap = {}; const map: KeyToIndexMap = {};
for (let i = beginIdx; i <= endIdx; ++i) { for (let i = beginIdx; i <= endIdx; ++i) {
@ -78,7 +78,7 @@ const hooks: Array<keyof Module> = [
"remove", "remove",
"destroy", "destroy",
"pre", "pre",
"post", "post"
]; ];
// TODO Should `domApi` be put into this in the next major version bump? // TODO Should `domApi` be put into this in the next major version bump?
@ -91,7 +91,7 @@ export type Options = {
export function init( export function init(
modules: Array<Partial<Module>>, modules: Array<Partial<Module>>,
domApi?: DOMAPI, domApi?: DOMAPI,
options?: Options, options?: Options
) { ) {
const cbs: ModuleHooks = { const cbs: ModuleHooks = {
create: [], create: [],
@ -99,7 +99,7 @@ export function init(
remove: [], remove: [],
destroy: [], destroy: [],
pre: [], pre: [],
post: [], post: []
}; };
const api: DOMAPI = domApi !== undefined ? domApi : htmlDomApi; const api: DOMAPI = domApi !== undefined ? domApi : htmlDomApi;
@ -126,7 +126,7 @@ export function init(
{}, {},
[], [],
undefined, undefined,
elm, elm
); );
} }
@ -205,7 +205,7 @@ export function init(
if (ch != null) { if (ch != null) {
api.appendChild( api.appendChild(
vnode.elm, vnode.elm,
createElm(ch as VNode, insertedVnodeQueue), createElm(ch as VNode, insertedVnodeQueue)
); );
} }
} }
@ -221,7 +221,7 @@ export function init(
vnodes: VNode[], vnodes: VNode[],
startIdx: number, startIdx: number,
endIdx: number, endIdx: number,
insertedVnodeQueue: VNodeQueue, insertedVnodeQueue: VNodeQueue
) { ) {
for (; startIdx <= endIdx; ++startIdx) { for (; startIdx <= endIdx; ++startIdx) {
const ch = vnodes[startIdx]; const ch = vnodes[startIdx];
@ -251,7 +251,7 @@ export function init(
parentElm: Node, parentElm: Node,
vnodes: VNode[], vnodes: VNode[],
startIdx: number, startIdx: number,
endIdx: number, endIdx: number
): void { ): void {
for (; startIdx <= endIdx; ++startIdx) { for (; startIdx <= endIdx; ++startIdx) {
let listeners: number; let listeners: number;
@ -276,7 +276,7 @@ export function init(
parentElm, parentElm,
ch.children as VNode[], ch.children as VNode[],
0, 0,
ch.children.length - 1, ch.children.length - 1
); );
} else { } else {
// Text node // Text node
@ -290,7 +290,7 @@ export function init(
parentElm: Node, parentElm: Node,
oldCh: VNode[], oldCh: VNode[],
newCh: VNode[], newCh: VNode[],
insertedVnodeQueue: VNodeQueue, insertedVnodeQueue: VNodeQueue
) { ) {
let oldStartIdx = 0; let oldStartIdx = 0;
let newStartIdx = 0; let newStartIdx = 0;
@ -328,7 +328,7 @@ export function init(
api.insertBefore( api.insertBefore(
parentElm, parentElm,
oldStartVnode.elm!, oldStartVnode.elm!,
api.nextSibling(oldEndVnode.elm!), api.nextSibling(oldEndVnode.elm!)
); );
oldStartVnode = oldCh[++oldStartIdx]; oldStartVnode = oldCh[++oldStartIdx];
newEndVnode = newCh[--newEndIdx]; newEndVnode = newCh[--newEndIdx];
@ -348,7 +348,7 @@ export function init(
api.insertBefore( api.insertBefore(
parentElm, parentElm,
createElm(newStartVnode, insertedVnodeQueue), createElm(newStartVnode, insertedVnodeQueue),
oldStartVnode.elm!, oldStartVnode.elm!
); );
} else { } else {
elmToMove = oldCh[idxInOld]; elmToMove = oldCh[idxInOld];
@ -356,7 +356,7 @@ export function init(
api.insertBefore( api.insertBefore(
parentElm, parentElm,
createElm(newStartVnode, insertedVnodeQueue), createElm(newStartVnode, insertedVnodeQueue),
oldStartVnode.elm!, oldStartVnode.elm!
); );
} else { } else {
patchVnode(elmToMove, newStartVnode, insertedVnodeQueue); patchVnode(elmToMove, newStartVnode, insertedVnodeQueue);
@ -376,7 +376,7 @@ export function init(
newCh, newCh,
newStartIdx, newStartIdx,
newEndIdx, newEndIdx,
insertedVnodeQueue, insertedVnodeQueue
); );
} }
if (oldStartIdx <= oldEndIdx) { if (oldStartIdx <= oldEndIdx) {
@ -387,7 +387,7 @@ export function init(
function patchVnode( function patchVnode(
oldVnode: VNode, oldVnode: VNode,
vnode: VNode, vnode: VNode,
insertedVnodeQueue: VNodeQueue, insertedVnodeQueue: VNodeQueue
) { ) {
const hook = vnode.data?.hook; const hook = vnode.data?.hook;
hook?.prepatch?.(oldVnode, vnode); hook?.prepatch?.(oldVnode, vnode);
@ -427,7 +427,7 @@ export function init(
return function patch( return function patch(
oldVnode: VNode | Element | DocumentFragment, oldVnode: VNode | Element | DocumentFragment,
vnode: VNode, vnode: VNode
): VNode { ): VNode {
let i: number, elm: Node, parent: Node; let i: number, elm: Node, parent: Node;
const insertedVnodeQueue: VNodeQueue = []; const insertedVnodeQueue: VNodeQueue = [];

@ -14,7 +14,7 @@ export type JsxVNodeChildren = ArrayOrElement<JsxVNodeChild>;
export type FunctionComponent = ( export type FunctionComponent = (
props: { [prop: string]: any } | null, props: { [prop: string]: any } | null,
children?: VNode[], children?: VNode[]
) => VNode; ) => VNode;
export function Fragment( export function Fragment(
@ -34,7 +34,7 @@ export function Fragment(
undefined, undefined,
undefined, undefined,
flatChildren[0].text, flatChildren[0].text,
undefined, undefined
); );
} else { } else {
return vnode(undefined, data ?? {}, flatChildren, undefined, undefined); return vnode(undefined, data ?? {}, flatChildren, undefined, undefined);
@ -43,7 +43,7 @@ export function Fragment(
function flattenAndFilter( function flattenAndFilter(
children: JsxVNodeChildren[], children: JsxVNodeChildren[],
flattened: VNode[], flattened: VNode[]
): VNode[] { ): VNode[] {
for (const child of children) { for (const child of children) {
// filter out falsey children, except 0 since zero can be a valid value e.g inside a chart // filter out falsey children, except 0 since zero can be a valid value e.g inside a chart
@ -61,7 +61,7 @@ function flattenAndFilter(
typeof child === "boolean" typeof child === "boolean"
) { ) {
flattened.push( flattened.push(
vnode(undefined, undefined, undefined, String(child), undefined), vnode(undefined, undefined, undefined, String(child), undefined)
); );
} else { } else {
flattened.push(child); flattened.push(child);

@ -59,5 +59,5 @@ function updateAttrs(oldVnode: VNode, vnode: VNode): void {
export const attributesModule: Module = { export const attributesModule: Module = {
create: updateAttrs, create: updateAttrs,
update: updateAttrs, update: updateAttrs
}; };

@ -46,5 +46,5 @@ function updateDataset(oldVnode: VNode, vnode: VNode): void {
export const datasetModule: Module = { export const datasetModule: Module = {
create: updateDataset, create: updateDataset,
update: updateDataset, update: updateDataset
}; };

@ -106,5 +106,5 @@ function updateEventListeners(oldVnode: VNode, vnode?: VNode): void {
export const eventListenersModule: Module = { export const eventListenersModule: Module = {
create: updateEventListeners, create: updateEventListeners,
update: updateEventListeners, update: updateEventListeners,
destroy: updateEventListeners, destroy: updateEventListeners
}; };

@ -4,7 +4,7 @@ import {
UpdateHook, UpdateHook,
DestroyHook, DestroyHook,
RemoveHook, RemoveHook,
PostHook, PostHook
} from "../hooks"; } from "../hooks";
export type Module = Partial<{ export type Module = Partial<{

@ -120,5 +120,5 @@ export const styleModule: Module = {
create: updateStyle, create: updateStyle,
update: updateStyle, update: updateStyle,
destroy: applyDestroyStyle, destroy: applyDestroyStyle,
remove: applyRemoveStyle, remove: applyRemoveStyle
}; };

@ -66,6 +66,6 @@ export const thunk = function thunk(
key: key, key: key,
hook: { init, prepatch }, hook: { init, prepatch },
fn: fn, fn: fn,
args: args, args: args
}); });
} as ThunkFn; } as ThunkFn;

@ -14,8 +14,8 @@ describe("attachTo", function () {
const vnode1 = h("div", [ const vnode1 = h("div", [
h("div#wrapper", [ h("div#wrapper", [
h("div", "Some element"), h("div", "Some element"),
attachTo(elm, h("div#attached", "Test")), attachTo(elm, h("div#attached", "Test"))
]), ])
]); ]);
elm = patch(vnode0, vnode1).elm; elm = patch(vnode0, vnode1).elm;
assert.strictEqual(elm.children.length, 2); assert.strictEqual(elm.children.length, 2);
@ -24,14 +24,14 @@ describe("attachTo", function () {
const vnode1 = h("div", [ const vnode1 = h("div", [
h("div#wrapper", [ h("div#wrapper", [
h("div", "Some element"), h("div", "Some element"),
attachTo(elm, h("div#attached", "First text")), attachTo(elm, h("div#attached", "First text"))
]), ])
]); ]);
const vnode2 = h("div", [ const vnode2 = h("div", [
h("div#wrapper", [ h("div#wrapper", [
h("div", "Some element"), h("div", "Some element"),
attachTo(elm, h("div#attached", "New text")), attachTo(elm, h("div#attached", "New text"))
]), ])
]); ]);
elm = patch(vnode0, vnode1).elm; elm = patch(vnode0, vnode1).elm;
assert.strictEqual(elm.children[0].innerHTML, "First text"); assert.strictEqual(elm.children[0].innerHTML, "First text");
@ -42,15 +42,15 @@ describe("attachTo", function () {
const vnode1 = h("div", [ const vnode1 = h("div", [
h("div#wrapper", [ h("div#wrapper", [
h("div", "Some element"), h("div", "Some element"),
attachTo(elm, h("div#attached", "Text")), attachTo(elm, h("div#attached", "Text"))
]), ])
]); ]);
const vnode2 = h("div", [ const vnode2 = h("div", [
h("div#wrapper", [ h("div#wrapper", [
h("div", "Some element"), h("div", "Some element"),
h("div", "A new element"), h("div", "A new element"),
attachTo(elm, h("div#attached", "Text")), attachTo(elm, h("div#attached", "Text"))
]), ])
]); ]);
elm = patch(vnode0, vnode1).elm; elm = patch(vnode0, vnode1).elm;
assert.strictEqual(elm.children[0].innerHTML, "Text"); assert.strictEqual(elm.children[0].innerHTML, "Text");
@ -61,8 +61,8 @@ describe("attachTo", function () {
const vnode1 = h("div", [ const vnode1 = h("div", [
h("div#wrapper", [ h("div#wrapper", [
h("div", "Some element"), h("div", "Some element"),
attachTo(elm, h("div#attached", "First text")), attachTo(elm, h("div#attached", "First text"))
]), ])
]); ]);
const vnode2 = h("div", [h("div#wrapper", [h("div", "Some element")])]); const vnode2 = h("div", [h("div#wrapper", [h("div", "Some element")])]);
elm = patch(vnode0, vnode1).elm; elm = patch(vnode0, vnode1).elm;
@ -80,11 +80,8 @@ describe("attachTo", function () {
const vnode1 = h("div", [ const vnode1 = h("div", [
h("div#wrapper", [ h("div#wrapper", [
h("div", "Some element"), h("div", "Some element"),
attachTo( attachTo(elm, h("div#attached", { hook: { remove: rm } }, "First text"))
elm, ])
h("div#attached", { hook: { remove: rm } }, "First text"),
),
]),
]); ]);
const vnode2 = h("div", [h("div#wrapper", [h("div", "Some element")])]); const vnode2 = h("div", [h("div#wrapper", [h("div", "Some element")])]);
elm = patch(vnode0, vnode1).elm; elm = patch(vnode0, vnode1).elm;

@ -12,7 +12,7 @@ describe("attributes", function () {
}); });
it("have their provided values", function () { it("have their provided values", function () {
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 }
}); });
elm = patch(vnode0, vnode1).elm; elm = patch(vnode0, vnode1).elm;
assert.strictEqual(elm.getAttribute("href"), "/foo"); assert.strictEqual(elm.getAttribute("href"), "/foo");
@ -36,7 +36,7 @@ describe("attributes", function () {
}); });
it("are not omitted when falsy values are provided", function () { it("are not omitted when falsy values are provided", function () {
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" }
}); });
elm = patch(vnode0, vnode1).elm; elm = patch(vnode0, vnode1).elm;
assert.ok(elm.hasAttribute("href")); assert.ok(elm.hasAttribute("href"));
@ -49,7 +49,7 @@ describe("attributes", function () {
elm = patch(vnode0, vnode1).elm; elm = patch(vnode0, vnode1).elm;
assert.strictEqual( assert.strictEqual(
elm.getAttributeNS("http://www.w3.org/1999/xlink", "href"), elm.getAttributeNS("http://www.w3.org/1999/xlink", "href"),
"#foo", "#foo"
); );
}); });
it("should not touch class nor id fields", function () { it("should not touch class nor id fields", function () {
@ -69,7 +69,7 @@ describe("attributes", function () {
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");
const vnodeSVG = h("svg", { const vnodeSVG = h("svg", {
attrs: { [elmNamespaceQualifiedName]: elmNamespaceValue }, attrs: { [elmNamespaceQualifiedName]: elmNamespaceValue }
}); });
elm = patch(svg, vnodeSVG).elm; elm = patch(svg, vnodeSVG).elm;
@ -81,13 +81,13 @@ describe("attributes", function () {
// and namespaces are a legacy feature, no longer supported // and namespaces are a legacy feature, no longer supported
assert.strictEqual( assert.strictEqual(
elm.getAttribute(elmNamespaceQualifiedName), elm.getAttribute(elmNamespaceQualifiedName),
elmNamespaceValue, elmNamespaceValue
); );
}); });
describe("boolean attribute", function () { describe("boolean attribute", function () {
it("is present and empty string if the value is truthy", function () { it("is present and empty string if the value is truthy", function () {
const vnode1 = h("div", { const vnode1 = h("div", {
attrs: { required: true, readonly: 1, noresize: "truthy" }, attrs: { required: true, readonly: 1, noresize: "truthy" }
}); });
elm = patch(vnode0, vnode1).elm; elm = patch(vnode0, vnode1).elm;
assert.strictEqual(elm.hasAttribute("required"), true); assert.strictEqual(elm.hasAttribute("required"), true);
@ -105,7 +105,7 @@ describe("attributes", function () {
}); });
it("is not omitted if the value is falsy", function () { it("is not omitted if the value is falsy", function () {
const vnode1 = h("div", { const vnode1 = h("div", {
attrs: { readonly: 0, noresize: null as any }, attrs: { readonly: 0, noresize: null as any }
}); });
elm = patch(vnode0, vnode1).elm; elm = patch(vnode0, vnode1).elm;
assert.ok(elm.hasAttribute("readonly")); assert.ok(elm.hasAttribute("readonly"));

@ -19,7 +19,7 @@ import {
DestroyHook, DestroyHook,
UpdateHook, UpdateHook,
Key, Key,
fragment, fragment
} from "../../src/index"; } from "../../src/index";
const hasSvgClassList = "classList" in SVGElement.prototype; const hasSvgClassList = "classList" in SVGElement.prototype;
@ -27,7 +27,7 @@ const hasSvgClassList = "classList" in SVGElement.prototype;
const patch = init( const patch = init(
[classModule, propsModule, eventListenersModule], [classModule, propsModule, eventListenersModule],
undefined, undefined,
{ experimental: { fragments: true } }, { experimental: { fragments: true } }
); );
/** Shuffle an array using Durstenfeld's version of the FisherYates shuffle. */ /** Shuffle an array using Durstenfeld's version of the FisherYates shuffle. */
@ -155,14 +155,14 @@ describe("snabbdom", function () {
elm = patch( elm = patch(
vnode0, vnode0,
h("svg", [ h("svg", [
h("foreignObject", [h("div", ["I am HTML embedded in SVG"])]), h("foreignObject", [h("div", ["I am HTML embedded in SVG"])])
]), ])
).elm; ).elm;
assert.strictEqual(elm.namespaceURI, SVGNamespace); assert.strictEqual(elm.namespaceURI, SVGNamespace);
assert.strictEqual(elm.firstChild.namespaceURI, SVGNamespace); assert.strictEqual(elm.firstChild.namespaceURI, SVGNamespace);
assert.strictEqual( assert.strictEqual(
elm.firstChild.firstChild.namespaceURI, elm.firstChild.firstChild.namespaceURI,
XHTMLNamespace, XHTMLNamespace
); );
// verify that svg tag with extra selectors gets svg namespace // verify that svg tag with extra selectors gets svg namespace
@ -182,7 +182,7 @@ describe("snabbdom", function () {
it("receives classes in class property", function () { it("receives classes in class property", function () {
elm = patch( elm = patch(
vnode0, vnode0,
h("i", { class: { am: true, a: true, class: true, not: false } }), h("i", { class: { am: true, a: true, class: true, not: false } })
).elm; ).elm;
assert(elm.classList.contains("am")); assert(elm.classList.contains("am"));
assert(elm.classList.contains("a")); assert(elm.classList.contains("a"));
@ -207,9 +207,9 @@ describe("snabbdom", function () {
vnode0, vnode0,
h("svg", [ h("svg", [
h("g", { h("g", {
class: { am: true, a: true, class: true, not: false, too: true }, class: { am: true, a: true, class: true, not: false, too: true }
}), })
]), ])
).elm; ).elm;
assert(elm.firstChild.classList.contains("am")); assert(elm.firstChild.classList.contains("am"));
assert(elm.firstChild.classList.contains("a")); assert(elm.firstChild.classList.contains("a"));
@ -220,12 +220,12 @@ describe("snabbdom", function () {
it("handles classes from both selector and property", function () { it("handles classes from both selector and property", function () {
elm = patch( elm = patch(
vnode0, vnode0,
h("div", [h("i.has", { class: { classes: true } })]), h("div", [h("i.has", { class: { classes: true } })])
).elm; ).elm;
assert(elm.firstChild.classList.contains("has"), "has `has` class"); assert(elm.firstChild.classList.contains("has"), "has `has` class");
assert( assert(
elm.firstChild.classList.contains("classes"), elm.firstChild.classList.contains("classes"),
"has `classes` class", "has `classes` class"
); );
}); });
it("can create elements with text content", function () { it("can create elements with text content", function () {
@ -252,11 +252,11 @@ describe("snabbdom", function () {
frame.srcdoc = "<div>Thing 1</div>"; frame.srcdoc = "<div>Thing 1</div>";
frame.onload = function () { frame.onload = function () {
const div0 = frame.contentDocument!.body.querySelector( const div0 = frame.contentDocument!.body.querySelector(
"div", "div"
) as HTMLDivElement; ) as HTMLDivElement;
patch(div0, h("div", "Thing 2")); patch(div0, h("div", "Thing 2"));
const div1 = frame.contentDocument!.body.querySelector( const div1 = frame.contentDocument!.body.querySelector(
"div", "div"
) as HTMLDivElement; ) as HTMLDivElement;
assert.strictEqual(div1.textContent, "Thing 2"); assert.strictEqual(div1.textContent, "Thing 2");
frame.remove(); frame.remove();
@ -348,13 +348,13 @@ describe("snabbdom", function () {
"div", "div",
{ {
style: { height: "100px", overflowY: "scroll" }, style: { height: "100px", overflowY: "scroll" },
props: { scrollTop }, props: { scrollTop }
}, },
[h("div", { style: { height: "200px" } })], [h("div", { style: { height: "200px" } })]
); );
const vnode1 = view(0); const vnode1 = view(0);
const mountPoint = document.body.appendChild( const mountPoint = document.body.appendChild(
document.createElement("div"), document.createElement("div")
); );
const { elm } = patch(mountPoint, vnode1); const { elm } = patch(mountPoint, vnode1);
if (!(elm instanceof HTMLDivElement)) throw new Error(); if (!(elm instanceof HTMLDivElement)) throw new Error();
@ -416,7 +416,7 @@ describe("snabbdom", function () {
if ("customElements" in window) { if ("customElements" in window) {
describe("customized built-in element", function () { describe("customized built-in element", function () {
const isSafari = /^((?!chrome|android).)*safari/i.test( const isSafari = /^((?!chrome|android).)*safari/i.test(
navigator.userAgent, navigator.userAgent
); );
if (!isSafari) { if (!isSafari) {
@ -484,7 +484,7 @@ describe("snabbdom", function () {
{}, {},
[h("div#id.class", [h("span", "Hi")])], [h("div#id.class", [h("span", "Hi")])],
undefined, undefined,
prevElm as any, prevElm as any
); );
elm = patch(toVNode(prevElm), nextVNode).elm; elm = patch(toVNode(prevElm), nextVNode).elm;
assert.strictEqual(elm, prevElm); assert.strictEqual(elm, prevElm);
@ -543,7 +543,7 @@ describe("snabbdom", function () {
...htmlDomApi, ...htmlDomApi,
tagName: function (elm: Element) { tagName: function (elm: Element) {
return "x-" + elm.tagName.toUpperCase(); return "x-" + elm.tagName.toUpperCase();
}, }
}; };
const h2 = document.createElement("h2"); const h2 = document.createElement("h2");
h2.id = "hx"; h2.id = "hx";
@ -571,12 +571,12 @@ describe("snabbdom", function () {
const onlyDataset = document.createElement("div"); const onlyDataset = document.createElement("div");
onlyDataset.setAttribute("data-foo", "bar"); onlyDataset.setAttribute("data-foo", "bar");
assert.deepEqual(toVNode(onlyDataset).data, { assert.deepEqual(toVNode(onlyDataset).data, {
dataset: { foo: "bar" }, dataset: { foo: "bar" }
}); });
const onlyDatasets2 = document.createElement("div"); const onlyDatasets2 = document.createElement("div");
onlyDatasets2.dataset.foo = "bar"; onlyDatasets2.dataset.foo = "bar";
assert.deepEqual(toVNode(onlyDatasets2).data, { assert.deepEqual(toVNode(onlyDatasets2).data, {
dataset: { foo: "bar" }, dataset: { foo: "bar" }
}); });
const bothAttrsAndDatasets = document.createElement("div"); const bothAttrsAndDatasets = document.createElement("div");
bothAttrsAndDatasets.setAttribute("foo", "bar"); bothAttrsAndDatasets.setAttribute("foo", "bar");
@ -584,7 +584,7 @@ describe("snabbdom", function () {
bothAttrsAndDatasets.dataset.again = "again"; bothAttrsAndDatasets.dataset.again = "again";
assert.deepEqual(toVNode(bothAttrsAndDatasets).data, { assert.deepEqual(toVNode(bothAttrsAndDatasets).data, {
attrs: { foo: "bar" }, attrs: { foo: "bar" },
dataset: { foo: "bar", again: "again" }, dataset: { foo: "bar", again: "again" }
}); });
}); });
}); });
@ -657,7 +657,7 @@ describe("snabbdom", function () {
const vnode2 = h("span", { key: "span" }, [ const vnode2 = h("span", { key: "span" }, [
spanNum(1), spanNum(1),
h("i", { key: 2 }, "2"), h("i", { key: 2 }, "2"),
spanNum(3), spanNum(3)
]); ]);
elm = patch(vnode0, vnode1).elm; elm = patch(vnode0, vnode1).elm;
assert.deepEqual(map(inner, elm.children), ["1", "2", "3"]); assert.deepEqual(map(inner, elm.children), ["1", "2", "3"]);
@ -797,7 +797,7 @@ describe("snabbdom", function () {
const vnode1 = h("span", [Symbol()].map(spanNum)); const vnode1 = h("span", [Symbol()].map(spanNum));
const vnode2 = h( const vnode2 = h(
"span", "span",
[Symbol("1"), Symbol("2"), Symbol("3")].map(spanNum), [Symbol("1"), Symbol("2"), Symbol("3")].map(spanNum)
); );
elm = patch(vnode0, vnode1).elm; elm = patch(vnode0, vnode1).elm;
assert.equal(elm.children.length, 1); assert.equal(elm.children.length, 1);
@ -821,7 +821,7 @@ describe("snabbdom", function () {
"4", "4",
"3", "3",
"2", "2",
"1", "1"
]); ]);
}); });
it("something", function () { it("something", function () {
@ -836,7 +836,7 @@ describe("snabbdom", function () {
"2", "2",
"1", "1",
"5", "5",
"0", "0"
]); ]);
}); });
it("handles random shuffles", function () { it("handles random shuffles", function () {
@ -857,7 +857,7 @@ describe("snabbdom", function () {
"span", "span",
arr.map(function (n) { arr.map(function (n) {
return spanNumWithOpacity(n, "1"); return spanNumWithOpacity(n, "1");
}), })
); );
const shufArr = shuffle(arr); const shufArr = shuffle(arr);
let elm: HTMLDivElement | HTMLSpanElement = let elm: HTMLDivElement | HTMLSpanElement =
@ -871,13 +871,13 @@ describe("snabbdom", function () {
"span", "span",
arr.map(function (n) { arr.map(function (n) {
return spanNumWithOpacity(shufArr[n], opacities[n]); return spanNumWithOpacity(shufArr[n], opacities[n]);
}), })
); );
elm = patch(vnode1, vnode2).elm as HTMLSpanElement; elm = patch(vnode1, vnode2).elm as HTMLSpanElement;
for (i = 0; i < elms; ++i) { for (i = 0; i < elms; ++i) {
assert.strictEqual( assert.strictEqual(
elm.children[i].innerHTML, elm.children[i].innerHTML,
shufArr[i].toString(), shufArr[i].toString()
); );
const opacity = (elm.children[i] as HTMLSpanElement).style.opacity; const opacity = (elm.children[i] as HTMLSpanElement).style.opacity;
assert.strictEqual(opacities[i].indexOf(opacity), 0); assert.strictEqual(opacities[i].indexOf(opacity), 0);
@ -889,8 +889,8 @@ describe("snabbdom", function () {
const vnode2 = h( const vnode2 = h(
"i", "i",
[null, 2, undefined, null, 1, 0, null, 5, 4, null, 3, undefined].map( [null, 2, undefined, null, 1, 0, null, 5, 4, null, 3, undefined].map(
spanNum, spanNum
), )
); );
elm = patch(vnode0, vnode1).elm; elm = patch(vnode0, vnode1).elm;
assert.strictEqual(elm.children.length, 6); assert.strictEqual(elm.children.length, 6);
@ -901,7 +901,7 @@ describe("snabbdom", function () {
"0", "0",
"5", "5",
"4", "4",
"3", "3"
]); ]);
}); });
it("supports all null/undefined children", function () { it("supports all null/undefined children", function () {
@ -918,7 +918,7 @@ describe("snabbdom", function () {
"3", "3",
"2", "2",
"1", "1",
"0", "0"
]); ]);
}); });
it("handles random shuffles with null/undefined children", function () { it("handles random shuffles with null/undefined children", function () {
@ -946,7 +946,7 @@ describe("snabbdom", function () {
map(inner, elm.children), map(inner, elm.children),
arr.filter(function (x) { arr.filter(function (x) {
return x != null; return x != null;
}), })
); );
} }
}); });
@ -1021,7 +1021,7 @@ describe("snabbdom", function () {
const vnode1 = h("div", [ const vnode1 = h("div", [
h("span", "One"), h("span", "One"),
h("span", "Two"), h("span", "Two"),
h("span", "Three"), h("span", "Three")
]); ]);
const vnode2 = h("div", [h("span", "One"), h("span", "Three")]); const vnode2 = h("div", [h("span", "One"), h("span", "Three")]);
elm = patch(vnode0, vnode1).elm; elm = patch(vnode0, vnode1).elm;
@ -1045,7 +1045,7 @@ describe("snabbdom", function () {
patch(vnode1, vnode2); patch(vnode1, vnode2);
assert.deepEqual(map(prop("textContent"), elm.childNodes), [ assert.deepEqual(map(prop("textContent"), elm.childNodes), [
"Two", "Two",
"Three", "Three"
]); ]);
}); });
it("removes a text node among other elements", function () { it("removes a text node among other elements", function () {
@ -1054,7 +1054,7 @@ describe("snabbdom", function () {
patch(vnode0, vnode1); patch(vnode0, vnode1);
assert.deepEqual(map(prop("textContent"), elm.childNodes), [ assert.deepEqual(map(prop("textContent"), elm.childNodes), [
"One", "One",
"Two", "Two"
]); ]);
patch(vnode1, vnode2); patch(vnode1, vnode2);
assert.strictEqual(elm.childNodes.length, 1); assert.strictEqual(elm.childNodes.length, 1);
@ -1065,12 +1065,12 @@ describe("snabbdom", function () {
const vnode1 = h("div", [ const vnode1 = h("div", [
h("span", "One"), h("span", "One"),
h("div", "Two"), h("div", "Two"),
h("b", "Three"), h("b", "Three")
]); ]);
const vnode2 = h("div", [ const vnode2 = h("div", [
h("b", "Three"), h("b", "Three"),
h("span", "One"), h("span", "One"),
h("div", "Two"), h("div", "Two")
]); ]);
elm = patch(vnode0, vnode1).elm; elm = patch(vnode0, vnode1).elm;
assert.deepEqual(map(inner, elm.children), ["One", "Two", "Three"]); assert.deepEqual(map(inner, elm.children), ["One", "Two", "Three"]);
@ -1078,7 +1078,7 @@ describe("snabbdom", function () {
assert.deepEqual(map(prop("tagName"), elm.children), [ assert.deepEqual(map(prop("tagName"), elm.children), [
"B", "B",
"SPAN", "SPAN",
"DIV", "DIV"
]); ]);
assert.deepEqual(map(inner, elm.children), ["Three", "One", "Two"]); assert.deepEqual(map(inner, elm.children), ["Three", "One", "Two"]);
}); });
@ -1089,7 +1089,7 @@ describe("snabbdom", function () {
undefined, undefined,
undefined, undefined,
h("i", "1"), h("i", "1"),
undefined, undefined
]); ]);
const vnode3 = h("i", [ const vnode3 = h("i", [
null, null,
@ -1098,7 +1098,7 @@ describe("snabbdom", function () {
null, null,
h("i", "2"), h("i", "2"),
undefined, undefined,
null, null
]); ]);
elm = patch(vnode0, vnode1).elm; elm = patch(vnode0, vnode1).elm;
assert.deepEqual(map(inner, elm.children), ["1", "2"]); assert.deepEqual(map(inner, elm.children), ["1", "2"]);
@ -1177,9 +1177,9 @@ describe("snabbdom", function () {
h("span", "First sibling"), h("span", "First sibling"),
h("div", { hook: { create: cb } }, [ h("div", { hook: { create: cb } }, [
h("span", "Child 1"), h("span", "Child 1"),
h("span", "Child 2"), h("span", "Child 2")
]), ]),
h("span", "Can't touch me"), h("span", "Can't touch me")
]); ]);
patch(vnode0, vnode1); patch(vnode0, vnode1);
assert.strictEqual(1, result.length); assert.strictEqual(1, result.length);
@ -1196,9 +1196,9 @@ describe("snabbdom", function () {
h("span", "First sibling"), h("span", "First sibling"),
h("div", { hook: { insert: cb } }, [ h("div", { hook: { insert: cb } }, [
h("span", "Child 1"), h("span", "Child 1"),
h("span", "Child 2"), h("span", "Child 2")
]), ]),
h("span", "Can touch me"), h("span", "Can touch me")
]); ]);
patch(vnode0, vnode1); patch(vnode0, vnode1);
assert.strictEqual(1, result.length); assert.strictEqual(1, result.length);
@ -1214,15 +1214,15 @@ describe("snabbdom", function () {
h("span", "First sibling"), h("span", "First sibling"),
h("div", { hook: { prepatch: cb } }, [ h("div", { hook: { prepatch: cb } }, [
h("span", "Child 1"), h("span", "Child 1"),
h("span", "Child 2"), h("span", "Child 2")
]), ])
]); ]);
const vnode2 = h("div", [ const vnode2 = h("div", [
h("span", "First sibling"), h("span", "First sibling"),
h("div", { hook: { prepatch: cb } }, [ h("div", { hook: { prepatch: cb } }, [
h("span", "Child 1"), h("span", "Child 1"),
h("span", "Child 2"), h("span", "Child 2")
]), ])
]); ]);
patch(vnode0, vnode1); patch(vnode0, vnode1);
patch(vnode1, vnode2); patch(vnode1, vnode2);
@ -1242,15 +1242,15 @@ describe("snabbdom", function () {
h("span", "First sibling"), h("span", "First sibling"),
h("div", { hook: { prepatch: preCb, postpatch: postCb } }, [ h("div", { hook: { prepatch: preCb, postpatch: postCb } }, [
h("span", "Child 1"), h("span", "Child 1"),
h("span", "Child 2"), h("span", "Child 2")
]), ])
]); ]);
const vnode2 = h("div", [ const vnode2 = h("div", [
h("span", "First sibling"), h("span", "First sibling"),
h("div", { hook: { prepatch: preCb, postpatch: postCb } }, [ h("div", { hook: { prepatch: preCb, postpatch: postCb } }, [
h("span", "Child 1"), h("span", "Child 1"),
h("span", "Child 2"), h("span", "Child 2")
]), ])
]); ]);
patch(vnode0, vnode1); patch(vnode0, vnode1);
patch(vnode1, vnode2); patch(vnode1, vnode2);
@ -1272,15 +1272,15 @@ describe("snabbdom", function () {
h("span", "First sibling"), h("span", "First sibling"),
h("div", { hook: { update: cb.bind(null, result1) } }, [ h("div", { hook: { update: cb.bind(null, result1) } }, [
h("span", "Child 1"), h("span", "Child 1"),
h("span", { hook: { update: cb.bind(null, result2) } }, "Child 2"), h("span", { hook: { update: cb.bind(null, result2) } }, "Child 2")
]), ])
]); ]);
const vnode2 = h("div", [ const vnode2 = h("div", [
h("span", "First sibling"), h("span", "First sibling"),
h("div", { hook: { update: cb.bind(null, result1) } }, [ h("div", { hook: { update: cb.bind(null, result1) } }, [
h("span", "Child 1"), h("span", "Child 1"),
h("span", { hook: { update: cb.bind(null, result2) } }, "Child 2"), h("span", { hook: { update: cb.bind(null, result2) } }, "Child 2")
]), ])
]); ]);
patch(vnode0, vnode1); patch(vnode0, vnode1);
patch(vnode1, vnode2); patch(vnode1, vnode2);
@ -1302,8 +1302,8 @@ describe("snabbdom", function () {
h("span", "First sibling"), h("span", "First sibling"),
h("div", { hook: { remove: cb } }, [ h("div", { hook: { remove: cb } }, [
h("span", "Child 1"), h("span", "Child 1"),
h("span", "Child 2"), h("span", "Child 2")
]), ])
]); ]);
const vnode2 = h("div", [h("span", "First sibling")]); const vnode2 = h("div", [h("span", "First sibling")]);
patch(vnode0, vnode1); patch(vnode0, vnode1);
@ -1316,7 +1316,7 @@ describe("snabbdom", function () {
calls++; calls++;
} }
const vnode1 = h("div", [ const vnode1 = h("div", [
h("div", { hook: { destroy: cb } }, [h("span", "Child 1")]), h("div", { hook: { destroy: cb } }, [h("span", "Child 1")])
]); ]);
const vnode2 = h("div", "Text node"); const vnode2 = h("div", "Text node");
patch(vnode0, vnode1); patch(vnode0, vnode1);
@ -1346,22 +1346,22 @@ describe("snabbdom", function () {
{ {
remove: function (_, rm) { remove: function (_, rm) {
rm1 = rm; rm1 = rm;
}, }
}, },
{ {
remove: function (_, rm) { remove: function (_, rm) {
rm2 = rm; rm2 = rm;
}, }
}, }
]); ]);
const vnode1 = h("div", [ const vnode1 = h("div", [
h("a", { h("a", {
hook: { hook: {
remove: function (_, rm) { remove: function (_, rm) {
rm3 = rm; rm3 = rm;
}, }
}, }
}), })
]); ]);
const vnode2 = h("div", []); const vnode2 = h("div", []);
elm = patch(vnode0, vnode1).elm; elm = patch(vnode0, vnode1).elm;
@ -1386,7 +1386,7 @@ describe("snabbdom", function () {
}; };
const vnode1 = h("div", { hook: { remove: cb } }, [ const vnode1 = h("div", { hook: { remove: cb } }, [
h("b", "Child 1"), h("b", "Child 1"),
h("i", "Child 2"), h("i", "Child 2")
]); ]);
const vnode2 = h("span", [h("b", "Child 1"), h("i", "Child 2")]); const vnode2 = h("span", [h("b", "Child 1"), h("i", "Child 2")]);
patch(vnode0, vnode1); patch(vnode0, vnode1);
@ -1401,13 +1401,13 @@ describe("snabbdom", function () {
{ {
pre: function () { pre: function () {
result.push("pre"); result.push("pre");
}, }
}, },
{ {
post: function () { post: function () {
result.push("post"); result.push("post");
}, }
}, }
]); ]);
const vnode1 = h("div"); const vnode1 = h("div");
patch(vnode0, vnode1); patch(vnode0, vnode1);
@ -1422,8 +1422,8 @@ describe("snabbdom", function () {
h("span", "First sibling"), h("span", "First sibling"),
h("div", [ h("div", [
h("span", { hook: { destroy: cb } }, "Child 1"), h("span", { hook: { destroy: cb } }, "Child 1"),
h("span", "Child 2"), h("span", "Child 2")
]), ])
]); ]);
const vnode2 = h("div"); const vnode2 = h("div");
patch(vnode0, vnode1); patch(vnode0, vnode1);
@ -1443,17 +1443,17 @@ describe("snabbdom", function () {
{ {
create: function () { create: function () {
created++; created++;
}, }
}, },
{ {
destroy: function () { destroy: function () {
destroyed++; destroyed++;
}, }
}, }
]); ]);
const vnode1 = h("div", [ const vnode1 = h("div", [
h("span", "First sibling"), h("span", "First sibling"),
h("div", [h("span", "Child 1"), h("span", "Child 2")]), h("div", [h("span", "Child 1"), h("span", "Child 2")])
]); ]);
const vnode2 = h("div"); const vnode2 = h("div");
patch(vnode0, vnode1); patch(vnode0, vnode1);
@ -1468,18 +1468,18 @@ describe("snabbdom", function () {
{ {
create: function () { create: function () {
created++; created++;
}, }
}, },
{ {
remove: function () { remove: function () {
removed++; removed++;
}, }
}, }
]); ]);
const vnode1 = h("div", [ const vnode1 = h("div", [
h("span", "First child"), h("span", "First child"),
"", "",
h("span", "Third child"), h("span", "Third child")
]); ]);
const vnode2 = h("div"); const vnode2 = h("div");
patch(vnode0, vnode1); patch(vnode0, vnode1);
@ -1494,17 +1494,17 @@ describe("snabbdom", function () {
{ {
create: function () { create: function () {
created++; created++;
}, }
}, },
{ {
destroy: function () { destroy: function () {
destroyed++; destroyed++;
}, }
}, }
]); ]);
const vnode1 = h("div", [ const vnode1 = h("div", [
h("span", "First sibling"), h("span", "First sibling"),
h("div", [h("span", "Child 1"), h("span", ["Text 1", "Text 2"])]), h("div", [h("span", "Child 1"), h("span", ["Text 1", "Text 2"])])
]); ]);
const vnode2 = h("div"); const vnode2 = h("div");
patch(vnode0, vnode1); patch(vnode0, vnode1);
@ -1522,7 +1522,7 @@ describe("snabbdom", function () {
}; };
const vnode1 = h("div", [ const vnode1 = h("div", [
h("span", { hook: { update: cb } }, "Hello"), h("span", { hook: { update: cb } }, "Hello"),
h("span", "there"), h("span", "there")
]); ]);
patch(vnode0, vnode1); patch(vnode0, vnode1);
patch(vnode1, vnode1); patch(vnode1, vnode1);
@ -1535,7 +1535,7 @@ describe("snabbdom", function () {
} }
const vnode1 = h("div", [ const vnode1 = h("div", [
h("span", { hook: { patch: cb } as any }, "Hello"), h("span", { hook: { patch: cb } as any }, "Hello"),
h("span", "there"), h("span", "there")
]); ]);
const vnode2 = h("div"); const vnode2 = h("div");
vnode2.children = vnode1.children; vnode2.children = vnode1.children;

@ -59,8 +59,8 @@ describe("dataset", function () {
dashed: "foo-bar", dashed: "foo-bar",
camel: "fooBar", camel: "fooBar",
integer: 0 as any, integer: 0 as any,
float: 0.1 as any, float: 0.1 as any
}, }
}); });
elm = patch(vnode0, vnode1).elm; elm = patch(vnode0, vnode1).elm;

@ -16,7 +16,7 @@ describe("event listeners", function () {
result.push(ev); result.push(ev);
} }
const vnode = h("div", { on: { click: clicked } }, [ const vnode = h("div", { on: { click: clicked } }, [
h("a", "Click my parent"), h("a", "Click my parent")
]); ]);
elm = patch(vnode0, vnode).elm; elm = patch(vnode0, vnode).elm;
elm.click(); elm.click();
@ -31,10 +31,10 @@ describe("event listeners", function () {
on: { on: {
click: function () { click: function () {
result.push(1); result.push(1);
}, }
}, }
}, },
[h("a", "Click my parent")], [h("a", "Click my parent")]
); );
const vnode2 = h( const vnode2 = h(
"div", "div",
@ -42,10 +42,10 @@ describe("event listeners", function () {
on: { on: {
click: function () { click: function () {
result.push(2); result.push(2);
}, }
}, }
}, },
[h("a", "Click my parent")], [h("a", "Click my parent")]
); );
elm = patch(vnode0, vnode1).elm; elm = patch(vnode0, vnode1).elm;
elm.click(); elm.click();
@ -59,7 +59,7 @@ describe("event listeners", function () {
result.push(ev); result.push(ev);
} }
const vnode1 = h("div", { on: { click: clicked } }, [ const vnode1 = h("div", { on: { click: clicked } }, [
h("a", "Click my parent"), h("a", "Click my parent")
]); ]);
elm = patch(vnode0, vnode1).elm; elm = patch(vnode0, vnode1).elm;
elm.click(); elm.click();
@ -79,13 +79,13 @@ describe("event listeners", function () {
assert.strictEqual(vnode.sel, "div"); assert.strictEqual(vnode.sel, "div");
} }
const vnode1 = h("div", { on: { click: [clicked, clicked, clicked] } }, [ const vnode1 = h("div", { on: { click: [clicked, clicked, clicked] } }, [
h("a", "Click my parent"), h("a", "Click my parent")
]); ]);
elm = patch(vnode0, vnode1).elm; elm = patch(vnode0, vnode1).elm;
elm.click(); elm.click();
assert.strictEqual(3, called); assert.strictEqual(3, called);
const vnode2 = h("div", { on: { click: [clicked, clicked] } }, [ const vnode2 = h("div", { on: { click: [clicked, clicked] } }, [
h("a", "Click my parent"), h("a", "Click my parent")
]); ]);
elm = patch(vnode1, vnode2).elm; elm = patch(vnode1, vnode2).elm;
elm.click(); elm.click();
@ -98,7 +98,7 @@ describe("event listeners", function () {
result.push(vnode); result.push(vnode);
} }
const vnode1 = h("div", { on: { click: clicked } }, [ const vnode1 = h("div", { on: { click: clicked } }, [
h("a", "Click my parent"), h("a", "Click my parent")
]); ]);
elm = patch(vnode0, vnode1).elm; elm = patch(vnode0, vnode1).elm;
elm.click(); elm.click();
@ -111,10 +111,10 @@ describe("event listeners", function () {
const sharedHandlers = { const sharedHandlers = {
click: function (ev: Event) { click: function (ev: Event) {
result.push(ev); result.push(ev);
}, }
}; };
const vnode1 = h("div", { on: sharedHandlers }, [ const vnode1 = h("div", { on: sharedHandlers }, [
h("a", { on: sharedHandlers }, "Click my parent"), h("a", { on: sharedHandlers }, "Click my parent")
]); ]);
elm = patch(vnode0, vnode1).elm; elm = patch(vnode0, vnode1).elm;
elm.click(); elm.click();

@ -25,10 +25,10 @@ describe("svg", function () {
h( h(
"use", "use",
{ {
attrs: { "xlink:href": testUrl }, attrs: { "xlink:href": testUrl }
}, },
[], []
), )
]); ]);
const result = patch(vnode0, a).elm as SVGElement; const result = patch(vnode0, a).elm as SVGElement;

@ -12,7 +12,7 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "Hello World", text: "Hello World",
key: undefined, key: undefined
}); });
}); });
@ -25,7 +25,7 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "foo bar", text: "foo bar",
key: undefined, key: undefined
}); });
}); });
@ -47,7 +47,7 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "foo", text: "foo",
key: undefined, key: undefined
}, },
{ {
sel: undefined, sel: undefined,
@ -55,12 +55,12 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "bar", text: "bar",
key: undefined, key: undefined
}, }
], ],
elm: undefined, elm: undefined,
text: undefined, text: undefined,
key: undefined, key: undefined
}); });
}); });
@ -85,7 +85,7 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "A Heading", text: "A Heading",
key: undefined, key: undefined
}, },
{ {
sel: undefined, sel: undefined,
@ -93,7 +93,7 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "some description", text: "some description",
key: undefined, key: undefined
}, },
{ {
sel: "span", sel: "span",
@ -101,7 +101,7 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "part1", text: "part1",
key: undefined, key: undefined
}, },
{ {
sel: "span", sel: "span",
@ -109,12 +109,12 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "part2", text: "part2",
key: undefined, key: undefined
}, }
], ],
elm: undefined, elm: undefined,
text: undefined, text: undefined,
key: undefined, key: undefined
}); });
}); });
@ -147,7 +147,7 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "Login Form", text: "Login Form",
key: undefined, key: undefined
}, },
{ {
sel: undefined, sel: undefined,
@ -155,7 +155,7 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "Login Attempts: ", text: "Login Attempts: ",
key: undefined, key: undefined
}, },
{ {
sel: undefined, sel: undefined,
@ -163,7 +163,7 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "0", text: "0",
key: undefined, key: undefined
}, },
{ {
sel: undefined, sel: undefined,
@ -171,7 +171,7 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "Logged In: ", text: "Logged In: ",
key: undefined, key: undefined
}, },
{ {
sel: undefined, sel: undefined,
@ -179,12 +179,12 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "true", text: "true",
key: undefined, key: undefined
}, }
], ],
elm: undefined, elm: undefined,
text: undefined, text: undefined,
key: undefined, key: undefined
}); });
}); });
@ -215,7 +215,7 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "Snabbdom", text: "Snabbdom",
key: undefined, key: undefined
}, },
{ {
sel: undefined, sel: undefined,
@ -223,7 +223,7 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "and tsx", text: "and tsx",
key: undefined, key: undefined
}, },
{ {
sel: "span", sel: "span",
@ -231,7 +231,7 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "work", text: "work",
key: undefined, key: undefined
}, },
{ {
sel: "span", sel: "span",
@ -239,7 +239,7 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "like", text: "like",
key: undefined, key: undefined
}, },
{ {
sel: "span", sel: "span",
@ -247,7 +247,7 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "a", text: "a",
key: undefined, key: undefined
}, },
{ {
sel: "span", sel: "span",
@ -255,7 +255,7 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "charm!", text: "charm!",
key: undefined, key: undefined
}, },
{ {
sel: undefined, sel: undefined,
@ -263,12 +263,12 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "💃🕺🎉", text: "💃🕺🎉",
key: undefined, key: undefined
}, }
], ],
elm: undefined, elm: undefined,
text: undefined, text: undefined,
key: undefined, key: undefined
}); });
}); });
}); });
@ -283,7 +283,7 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "Hello World", text: "Hello World",
key: undefined, key: undefined
}); });
}); });
@ -296,7 +296,7 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "foo bar", text: "foo bar",
key: undefined, key: undefined
}); });
}); });
@ -318,7 +318,7 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "foo", text: "foo",
key: undefined, key: undefined
}, },
{ {
sel: undefined, sel: undefined,
@ -326,12 +326,12 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "bar", text: "bar",
key: undefined, key: undefined
}, }
], ],
elm: undefined, elm: undefined,
text: undefined, text: undefined,
key: undefined, key: undefined
}); });
}); });
@ -356,7 +356,7 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "A Heading", text: "A Heading",
key: undefined, key: undefined
}, },
{ {
sel: undefined, sel: undefined,
@ -364,7 +364,7 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "some description", text: "some description",
key: undefined, key: undefined
}, },
{ {
sel: "span", sel: "span",
@ -372,7 +372,7 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "part1", text: "part1",
key: undefined, key: undefined
}, },
{ {
sel: "span", sel: "span",
@ -380,12 +380,12 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "part2", text: "part2",
key: undefined, key: undefined
}, }
], ],
elm: undefined, elm: undefined,
text: undefined, text: undefined,
key: undefined, key: undefined
}); });
}); });
@ -418,7 +418,7 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "Login Form", text: "Login Form",
key: undefined, key: undefined
}, },
{ {
sel: undefined, sel: undefined,
@ -426,7 +426,7 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "Login Attempts: ", text: "Login Attempts: ",
key: undefined, key: undefined
}, },
{ {
sel: undefined, sel: undefined,
@ -434,7 +434,7 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "0", text: "0",
key: undefined, key: undefined
}, },
{ {
sel: undefined, sel: undefined,
@ -442,7 +442,7 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "Logged In: ", text: "Logged In: ",
key: undefined, key: undefined
}, },
{ {
sel: undefined, sel: undefined,
@ -450,12 +450,12 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "true", text: "true",
key: undefined, key: undefined
}, }
], ],
elm: undefined, elm: undefined,
text: undefined, text: undefined,
key: undefined, key: undefined
}); });
}); });
@ -486,7 +486,7 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "Snabbdom", text: "Snabbdom",
key: undefined, key: undefined
}, },
{ {
sel: undefined, sel: undefined,
@ -494,7 +494,7 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "and tsx", text: "and tsx",
key: undefined, key: undefined
}, },
{ {
sel: undefined, sel: undefined,
@ -502,7 +502,7 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "work", text: "work",
key: undefined, key: undefined
}, },
{ {
sel: undefined, sel: undefined,
@ -510,7 +510,7 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "like", text: "like",
key: undefined, key: undefined
}, },
{ {
sel: undefined, sel: undefined,
@ -518,7 +518,7 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "a", text: "a",
key: undefined, key: undefined
}, },
{ {
sel: undefined, sel: undefined,
@ -526,7 +526,7 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "charm!", text: "charm!",
key: undefined, key: undefined
}, },
{ {
sel: undefined, sel: undefined,
@ -534,20 +534,20 @@ describe("snabbdom", function () {
children: undefined, children: undefined,
elm: undefined, elm: undefined,
text: "💃🕺🎉", text: "💃🕺🎉",
key: undefined, key: undefined
}, }
], ],
elm: undefined, elm: undefined,
text: undefined, text: undefined,
key: undefined, key: undefined
}); });
}); });
it("can correctly be patched", function () { it("can correctly be patched", function () {
const patch = init([], undefined, { const patch = init([], undefined, {
experimental: { experimental: {
fragments: true, fragments: true
}, }
}); });
const container = document.createElement("div"); const container = document.createElement("div");
@ -565,7 +565,7 @@ describe("snabbdom", function () {
assert.strictEqual(vnode0.elm?.nodeType, document.DOCUMENT_FRAGMENT_NODE); assert.strictEqual(vnode0.elm?.nodeType, document.DOCUMENT_FRAGMENT_NODE);
assert.strictEqual( assert.strictEqual(
vnode0.elm?.textContent, vnode0.elm?.textContent,
"Nested children will be flattened", "Nested children will be flattened"
); );
const vnode1 = ( const vnode1 = (
@ -582,7 +582,7 @@ describe("snabbdom", function () {
assert.strictEqual((vnode1.elm as HTMLElement).tagName, "DIV"); assert.strictEqual((vnode1.elm as HTMLElement).tagName, "DIV");
assert.strictEqual( assert.strictEqual(
vnode1.elm?.textContent, vnode1.elm?.textContent,
"Nested child nodes will be patched", "Nested child nodes will be patched"
); );
const vnode2 = ( const vnode2 = (

@ -113,10 +113,10 @@ describe("style", function () {
}); });
it("updates delayed styles in next frame", function (done) { it("updates delayed styles in next frame", function (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 }
}); });
const vnode2 = h("i", { const vnode2 = h("i", {
style: { fontSize: "18px", delayed: { fontSize: "20px" } as any }, style: { fontSize: "18px", delayed: { fontSize: "20px" } as any }
}); });
elm = patch(vnode0, vnode1).elm; elm = patch(vnode0, vnode1).elm;
assert.strictEqual(elm.style.fontSize, "14px"); assert.strictEqual(elm.style.fontSize, "14px");
@ -140,10 +140,10 @@ describe("style", function () {
{ {
style: { style: {
transition: "transform 0.1s", transition: "transform 0.1s",
remove: { transform: "translateY(100%)" } as any, remove: { transform: "translateY(100%)" } as any
}, }
}, },
["A button"], ["A button"]
); );
const vnode1 = h("div.parent", {}, [btn]); const vnode1 = h("div.parent", {}, [btn]);
const vnode2 = h("div.parent", {}, [null]); const vnode2 = h("div.parent", {}, [null]);

@ -172,13 +172,13 @@ describe("thunk", function () {
return h( return h(
"span", "span",
{ key: "num", hook: { destroy: destroyHook } }, { key: "num", hook: { destroy: destroyHook } },
`Number is ${n}`, `Number is ${n}`
); );
} }
const vnode1 = h("div", [ const vnode1 = h("div", [
h("div", "Foo"), h("div", "Foo"),
thunk("span", "num", numberInSpan, [1]), thunk("span", "num", numberInSpan, [1]),
h("div", "Foo"), h("div", "Foo")
]); ]);
const vnode2 = h("div", [h("div", "Foo"), h("div", "Foo")]); const vnode2 = h("div", [h("div", "Foo"), h("div", "Foo")]);
patch(vnode0, vnode1); patch(vnode0, vnode1);
@ -194,13 +194,13 @@ describe("thunk", function () {
return h( return h(
"span", "span",
{ key: "num", hook: { remove: hook } }, { key: "num", hook: { remove: hook } },
`Number is ${n}`, `Number is ${n}`
); );
} }
const vnode1 = h("div", [ const vnode1 = h("div", [
h("div", "Foo"), h("div", "Foo"),
thunk("span", "num", numberInSpan, [1]), thunk("span", "num", numberInSpan, [1]),
h("div", "Foo"), h("div", "Foo")
]); ]);
const vnode2 = h("div", [h("div", "Foo"), h("div", "Foo")]); const vnode2 = h("div", [h("div", "Foo"), h("div", "Foo")]);
patch(vnode0, vnode1); patch(vnode0, vnode1);

@ -9,7 +9,7 @@ const sharedCapabilities = {
"browserstack.key": process.env.BROWSER_STACK_ACCESS_KEY, "browserstack.key": process.env.BROWSER_STACK_ACCESS_KEY,
project: "snabbdom", project: "snabbdom",
name: "CI", name: "CI",
build: `build ${process.env.GITHUB_RUN_NUMBER || "unknown"}`, build: `build ${process.env.GITHUB_RUN_NUMBER || "unknown"}`
}; };
export default { export default {
@ -21,12 +21,12 @@ export default {
browserstackLauncher({ browserstackLauncher({
capabilities: { capabilities: {
...sharedCapabilities, ...sharedCapabilities,
...cap, ...cap
}, }
}), })
), ),
files: ["src/**/*.ts", "test/unit/*.ts", "test/unit/*.tsx"], files: ["src/**/*.ts", "test/unit/*.ts", "test/unit/*.tsx"],
plugins: [ plugins: [
esbuildPlugin({ ts: true, tsx: true, tsconfig: "./test/tsconfig.json" }), esbuildPlugin({ ts: true, tsx: true, tsconfig: "./test/tsconfig.json" })
], ]
}; };

Loading…
Cancel
Save