chore: editorconfig + checker

.editorconfig

@@ -0,0 +1,11 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+charset = utf-8
+indent_style = space
+indent_size = 2
+
+[*.min.js.map]
+insert_final_newline = false

.eslintignore

@@ -31,4 +31,4 @@ vnode.js
 vnode.js.map
 modules
 helpers
-es
+es

.npmignore

@@ -30,4 +30,4 @@ build/Release
 node_modules
 
 # Vim
-*.swp
+*.swp

README.md

@@ -601,12 +601,12 @@ significant computational time to generate.
 
 ## Virtual Node
 **Properties**
- - [sel](#sel--string)
- - [data](#data--object)
- - [children](#children--array)
- - [text](#text--string)
- - [elm](#elm--element)
- - [key](#key--string--number)
+- [sel](#sel--string)
+- [data](#data--object)
+- [children](#children--array)
+- [text](#text--string)
+- [elm](#elm--element)
+- [key](#key--string--number)
 
 #### sel : String
 
@@ -646,14 +646,14 @@ create a virtual node with
 
 ```js
 [
- {
-   sel: 'h1',
-   data: {},
-   children: undefined,
-   text: 'Hello, World',
-   elm: Element,
-   key: undefined,
- }
+  {
+    sel: 'h1',
+    data: {},
+    children: undefined,
+    text: 'Hello, World',
+    elm: Element,
+    key: undefined,
+  }
 ]
 ```
 

examples/carousel-svg/build.js

@@ -513,54 +513,54 @@ var h = require('../../h.js');
 var vnode;
 
 var data = {
-	degRotation: 0
+  degRotation: 0
 };
 
 function gRotation() {
-	//console.log("gRotation: %s", data.degRotation);
-	return "rotate(" + data.degRotation + "deg)";
+  //console.log("gRotation: %s", data.degRotation);
+  return "rotate(" + data.degRotation + "deg)";
 }
 
 function triangleClick(id) {
-	console.log("triangleClick: %s", id);
-	render();
+  console.log("triangleClick: %s", id);
+  render();
 }
 
 function handleRotate(degs) {
-	data.degRotation += degs;
-	console.log("handleRotate: %s, %s", degs, data.degRotation);
-	render();
+  data.degRotation += degs;
+  console.log("handleRotate: %s, %s", degs, data.degRotation);
+  render();
 }
 
 function handleReset(degs) {
-	data.degRotation = degs;
-	console.log("handleReset: %s", degs);
-	render();
+  data.degRotation = degs;
+  console.log("handleReset: %s", degs);
+  render();
 }
 
 function render() {
-	vnode = patch(vnode, view(data));
+  vnode = patch(vnode, view(data));
 }
 
 var hTriangle = function hTriangle(id, degRotation) {
-	return h("polygon#" + id, {
-		attrs: {
-			points: "-50,-88 0,-175 50,-88",
-			transform: "rotate(" + degRotation + ")",
-			"stroke-width": 3
-		},
-		on: { click: [triangleClick, id] }
-	});
+  return h("polygon#" + id, {
+    attrs: {
+      points: "-50,-88 0,-175 50,-88",
+      transform: "rotate(" + degRotation + ")",
+      "stroke-width": 3
+    },
+    on: { click: [triangleClick, id] }
+  });
 };
 
 var view = function view(data) {
-	return h("div.view", [h("h1", "Snabbdom SVG Carousel"), h("svg", { attrs: { width: 380, height: 380, viewBox: [-190, -190, 380, 380] } }, [h("g#carousel", { style: { "-webkit-transform": gRotation(), transform: gRotation() } }, [hTriangle("yellow", 0), hTriangle("green", 60), hTriangle("magenta", 120), hTriangle("red", 180), hTriangle("cyan", 240), hTriangle("blue", 300)])]), h("button", { on: { click: [handleRotate, 60] } }, "Rotate Clockwise"), h("button", { on: { click: [handleRotate, -60] } }, "Rotate Anticlockwise"), h("button", { on: { click: [handleReset, 0] } }, "Reset")]);
+  return h("div.view", [h("h1", "Snabbdom SVG Carousel"), h("svg", { attrs: { width: 380, height: 380, viewBox: [-190, -190, 380, 380] } }, [h("g#carousel", { style: { "-webkit-transform": gRotation(), transform: gRotation() } }, [hTriangle("yellow", 0), hTriangle("green", 60), hTriangle("magenta", 120), hTriangle("red", 180), hTriangle("cyan", 240), hTriangle("blue", 300)])]), h("button", { on: { click: [handleRotate, 60] } }, "Rotate Clockwise"), h("button", { on: { click: [handleRotate, -60] } }, "Rotate Anticlockwise"), h("button", { on: { click: [handleReset, 0] } }, "Reset")]);
 };
 
 window.addEventListener("DOMContentLoaded", function () {
-	var container = document.getElementById("container");
-	vnode = patch(container, view(data));
-	render();
+  var container = document.getElementById("container");
+  vnode = patch(container, view(data));
+  render();
 });
 
 },{"../../h.js":1,"../../modules/attributes":3,"../../modules/eventlisteners":4,"../../modules/style":5,"../../snabbdom.js":6}]},{},[8]);

examples/carousel-svg/index.html

@@ -1,74 +1,74 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-	<meta charset="utf-8">
-	<title>Carousel</title>
-	<script type="text/javascript" src="build.js"></script>
-	<style type="text/css">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta charset="utf-8">
+  <title>Carousel</title>
+  <script type="text/javascript" src="build.js"></script>
+  <style type="text/css">
 div.view {
-	margin: 10px;
+  margin: 10px;
 }
 h1 {
-	font-size: 24px;
-	color: #505000;
+  font-size: 24px;
+  color: #505000;
 }
 svg {
-	display: block;
-	margin-bottom: 10px;
-	border: 1px solid gray;
+  display: block;
+  margin-bottom: 10px;
+  border: 1px solid gray;
 }
 g#carousel {
-	-webkit-transition: -webkit-transform 1s ease;
-	transition: transform 1s ease;
+  -webkit-transition: -webkit-transform 1s ease;
+  transition: transform 1s ease;
 }
 polygon {
-	stroke: #808000;
-	transition: fill 0.5s linear;
+  stroke: #808000;
+  transition: fill 0.5s linear;
 }
 polygon#yellow {
-	fill: rgba(255,255,0,0.4);
+  fill: rgba(255,255,0,0.4);
 }
 polygon#yellow:hover, polygon#yellow:active {
-	fill: yellow;
+  fill: yellow;
 }
 polygon#green {
-	fill: rgba(0,128,0,0.4);
+  fill: rgba(0,128,0,0.4);
 }
 polygon#green:hover, polygon#green:active {
-	fill: green;
+  fill: green;
 }
 polygon#magenta {
-	fill: rgba(255,0,255,0.4);
+  fill: rgba(255,0,255,0.4);
 }
 polygon#magenta:hover, polygon#magenta:active {
-	fill: magenta;
+  fill: magenta;
 }
 polygon#red {
-	fill: rgba(255,0,0,0.4);
+  fill: rgba(255,0,0,0.4);
 }
 polygon#red:hover, polygon#red:active {
-	fill: red;
+  fill: red;
 }
 polygon#cyan {
-	fill: rgba(0,255,255,0.4);
+  fill: rgba(0,255,255,0.4);
 }
 polygon#cyan:hover, polygon#cyan:active {
-	fill: cyan;
+  fill: cyan;
 }
 polygon#blue {
-	fill: rgba(0,0,255,0.4);
+  fill: rgba(0,0,255,0.4);
 }
 polygon#blue:hover, polygon#blue:active {
-	fill: blue;
+  fill: blue;
 }
 button {
-	font-size: 15px;
-	margin: 0 0.7em 0.7em 0;
+  font-size: 15px;
+  margin: 0 0.7em 0.7em 0;
 }
-	</style>
+  </style>
 </head>
 <body>
-	<div id="container"></div>
+  <div id="container"></div>
 </body>
 </html>

examples/hero/script.js

@@ -67,8 +67,13 @@ const detailView = (movie) =>
       h('div.desc', {
         style: {opacity: '0', transform: 'translateX(3em)',
                 delayed: {opacity: '1', transform: 'translate(0)'},
-                remove: {opacity: '0', position: 'absolute', top: '0', left: '0',
-                         transform: 'translateX(3em)'}
+                remove: {
+                  opacity: '0',
+                  position: 'absolute',
+                  top: '0',
+                  left: '0',
+                  transform: 'translateX(3em)'
+                }
         }
       }, [
         h('h2', 'Description:'),