attodom - npm Package Compare versions

Comparing version 0.9.0 to 0.10.0

el.js

@@ -1,2 +0,3 @@
-var mount = require('./mount')
+var mount = require('./mount'),
+		EVENTS = require('./src/events')
 
@@ -29,2 +30,13 @@ var htmlProps = {
 				else node.setAttribute(key, val)
+
+				//set synthetic events for onUpperCaseName
+				if (key[0] === 'o' && key[1] === 'n' && key.charCodeAt(2) < 91 && key.charCodeAt(2) > 64 && !EVENTS[key]) {
+					document.addEventListener(key.slice(2).toLowerCase(), function(e) { //eslint-disable-line
+						var tgt = e.target
+						do if (tgt[key]) return tgt[key](e)
+						//@ts-ignore
+						while((tgt = tgt.parentNode))
+					})
+					EVENTS[key] = true
+				}
 			}
@@ -31,0 +43,0 @@ else mount(node, arg)

package.json

 {
   "name": "attodom",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "main": "./index.js",
@@ -35,6 +35,3 @@ "description": "yet another small DOM component library",
   "private": false,
-  "license": "MIT",
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  }
+  "license": "MIT"
 }

readme.md

@@ -20,2 +20,3 @@ # attodom
 * no virtual DOM, all operations are done on actual nodes
+* synthetic events available
 * < 1kb gzip, no dependencies
@@ -52,2 +53,9 @@ * Designed for phones and/or older browsers:
 
+### Synthetic Events
+
+Synthetic events are used when the first letter of the event name is capitalised
+* regular event: `el('h1', {onclick: handler}, 'click me')`
+* synthetic event: `el('h1', {onClick: handler}, 'click me')`
+
+
 ### Lists
@@ -54,0 +62,0 @@

svg.js

@@ -1,2 +0,3 @@
-var mount = require('./mount')
+var mount = require('./mount'),
+		EVENTS = require('./src/events')
 
@@ -18,2 +19,13 @@ /**
 				else node.setAttribute(key, val)
+
+				//set synthetic events for onUpperCaseName
+				if (key[0] === 'o' && key[1] === 'n' && key.charCodeAt(2) < 91 && key.charCodeAt(2) > 64 && !EVENTS[key]) {
+					document.addEventListener(key.slice(2).toLowerCase(), function(e) { //eslint-disable-line
+						var tgt = e.target
+						do if (tgt[key]) return tgt[key](e)
+						//@ts-ignore
+						while((tgt = tgt.parentNode))
+					})
+					EVENTS[key] = true
+				}
 			}
@@ -20,0 +32,0 @@ else mount(node, arg)

text.js

@@ -1,5 +0,5 @@
-var setter = require('./setter')
+function setData(value) {
+	if (this.data !== value) this.data = value
+}
 
-var setData = setter('data')
-
 /**
@@ -6,0 +6,0 @@ * @param {string} text

tst/el.js

@@ -40,7 +40,17 @@ /* global document */
 ct('el - event', function() {
-	var kin = el('h0', {onclick: function(e) { e.target.textContent += 'a' }})
-	kin.dispatchEvent(new window.Event('click'))
-	ct('===', kin.textContent, 'a')
+	var kin = el('h1', {onclick: function(e) { this.textContent += e.target.tagName }})
+	kin.dispatchEvent(new window.Event('click', {bubbles:true}))
+	ct('===', kin.textContent, 'H1')
 })
 
+ct('el - synthetic event', function() {
+	var h2 = el('h2'),
+			h1 = el('h1', {onClick: function(e) { this.textContent = e.target.tagName }}, h2)
+	document.body.appendChild(h1)
+	h2.dispatchEvent(new window.Event('click', {bubbles:true}))
+	ct('===', h1.textContent, 'H2')
+	h1.dispatchEvent(new window.Event('click', {bubbles:true}))
+	ct('===', h1.textContent, 'H1')
+})
+
 ct('element - update', function() {
@@ -56,3 +66,3 @@ var kin = el('span', 'b', {update: function(v) { this.textContent = v.toUpperCase() }})
 	var kid = el('span', 'b', {update: function(v) { this.textContent = v.toUpperCase() }}),
-			kin = el('h0', ['a', kid, el('span', 'c')], {update: updateChildren})
+			kin = el('h1', ['a', kid, el('span', 'c')], {update: updateChildren})
 	ct('===', kin.textContent, 'abc')
@@ -66,3 +76,3 @@ //@ts-ignore
 	var kid = el('span', 'b'),
-			kin = el('h0', el('h1', el('h2', el('h3', kid))), {
+			kin = el('h1', el('h2', el('h3', el('h4', kid))), {
 				__kid: kid,
@@ -69,0 +79,0 @@ update: function(v) { this.__kid.textContent = v }

tst/svg.js

 /* global document */
 var JSDOM = require('jsdom').JSDOM
+
+var window = (new JSDOM).window
 //@ts-ignore
-global.document = (new JSDOM).window.document
+global.document = window.document
 
+
 var ct = require('cotest'),
@@ -20,1 +23,18 @@ svg = require('../svg')
 })
+
+ct('svg - event', function() {
+	var kin = svg('path', {onclick: function(e) { this.textContent += e.target.tagName }})
+	kin.dispatchEvent(new window.Event('click', {bubbles:true}))
+	ct('===', kin.textContent, 'path')
+})
+
+ct('svg - synthetic event', function() {
+	var h2 = svg('path'),
+			h1 = svg('svg', {onClick: function(e) { this.textContent = e.target.tagName }}, h2)
+	document.body.appendChild(h1)
+	h2.dispatchEvent(new window.Event('click', {bubbles:true}))
+	ct('===', h1.textContent, 'path')
+	h1.dispatchEvent(new window.Event('click', {bubbles:true}))
+	ct('===', h1.textContent, 'svg')
+})
+

No alert changes

Improved metrics

Total package byte prevSize

19898

increased by11.99%

Number of package files

21

increased by5%

Lines of code

485

increased by10.98%

Number of lines in readme file

86

increased by10.26%

No dependency changes