@litejs/dom 24.6.0 → 24.7.0

package/README.md

@@ -10,7 +10,7 @@
 LiteJS DOM – [![Coverage][1]][2] [![Size][3]][4] [![Buy Me A Tea][5]][6]
 ==========
 
-A small DOM library for server-side testing, rendering, and handling of HTML files.  
+Dependency-free DOM library for handling HTML files on server-side.  
 [DOM spec](https://dom.spec.whatwg.org/) |
 [Selectors Level 3](http://www.w3.org/TR/selectors/)
 
@@ -20,18 +20,6 @@ Examples
 
 ```javascript
 const { document, DOMParser, XMLSerializer } = require("@litejs/dom");
-const { XMLHttpRequest } = require("@litejs/dom/net.js");
-
-// Use XMLHttpRequest in server side
-var xhr = new XMLHttpRequest()
-xhr.open("GET", "https://litejs.com")
-xhr.responseType = "document"
-xhr.onload = function() {
-	var doc = xhr.responseXML
-	// Work with DOM in familiar way
-	console.log(doc.querySelector("title").textContent)
-}
-xhr.send()
 
 // Build DOM manually
 const el = document.createElement("h1");
@@ -40,11 +28,9 @@ el.className = "large";
 
 const fragment = document.createDocumentFragment();
 fragment.appendChild(document.createTextNode("hello"));
-fragment.appendChild(document.createTextNode(" world"));
 el.appendChild(fragment);
 
-el.innerHTML;
-// hello world
+// Replace the DOM tree with parsed HTML
 el.innerHTML = "<b>hello world</b>";
 el.toString();
 // <h1 id="123" class="large"><b>hello world</b></h1>
@@ -55,6 +41,18 @@ el.toString(true);
 
 el.querySelectorAll("b");
 // [ "<b>hello world</b>" ]
+
+// Use XMLHttpRequest in server side
+const { XMLHttpRequest } = require("@litejs/dom/net.js");
+const xhr = new XMLHttpRequest();
+xhr.open("GET", "https://litejs.com");
+xhr.responseType = "document";
+xhr.onload = function() {
+	const document = xhr.responseXML;
+	// Work with DOM in familiar way
+	console.log(document.querySelector("title").textContent);
+}
+xhr.send();
 ```
 
 ## Contributing

package/css.js

@@ -0,0 +1,32 @@
+
+/*! litejs.com/MIT-LICENSE.txt */
+
+exports.CSSStyleDeclaration = CSSStyleDeclaration
+
+// CSSStyleDeclaration is a single CSS declaration block,
+// accessible via HTMLElement.style for inline styles, document.styleSheets[0].cssRules[0].style, and getComputedStyle()
+function CSSStyleDeclaration(style) {
+	this.cssText = style
+}
+
+CSSStyleDeclaration.prototype = {
+	get cssText() {
+		return Object.keys(this).map(function(key) {
+			return (key === "cssFloat" ? "float:" : hyphenCase(key) + ":") + this[key]
+		}, this).join(";")
+	},
+	set cssText(style) {
+		for (var m, re = /(?:^|;)\s*([-a-z]+)\s*:((?:("|')(?:\\.|(?!\3)[^\\])*?\3|[^"';])+)(?=;|$)/ig; (m = re.exec(style)); ) {
+			this[m[1] === "float" ? "cssFloat" : camelCase(m[1])] = m[2].trim()
+		}
+	}
+}
+
+function camelCase(str) {
+	return str.replace(/-([a-z])/g, function(_, a) { return a.toUpperCase() })
+}
+
+function hyphenCase(str) {
+	return str.replace(/[A-Z]/g, "-$&").toLowerCase()
+}
+

package/dom.js

@@ -16,6 +16,7 @@ var boolAttrs = {
 , rawTextElements = { SCRIPT: /<(?=\/script)/i, STYLE: /<(?=\/style)/i }
 , rawTextEscape = { SCRIPT: /<(?=\/script|!--)/ig, STYLE: /<(?=\/style|!--)/ig }
 , hasOwn = voidElements.hasOwnProperty
+, CSSStyleDeclaration = require("./css.js").CSSStyleDeclaration
 , selector = require("./selector.js")
 , Node = {
 	ELEMENT_NODE:                1,
@@ -111,7 +112,7 @@ var boolAttrs = {
 		return this._style || (this._style = new CSSStyleDeclaration(this.getAttribute("style") || ""))
 	},
 	set style(value) {
-		this.setAttribute("style", value)
+		this.style.cssText = value
 	},
 	contains: function (el) {
 		for (; el; el = el.parentNode) if (el === this) return true
@@ -210,7 +211,7 @@ var boolAttrs = {
 		return attr ? attr.value : null
 	},
 	setAttribute: function(name, value) {
-		this.attributes.setNamedItem(name, value)
+		this.attributes.setNamedItem(new Attr(this, name, value))
 	},
 	removeAttribute: function(name) {
 		this.attributes.removeNamedItem(name)
@@ -287,8 +288,7 @@ NamedNodeMap.prototype = {
 		, attr = this[loName] || null
 		if (loName === "style" && this.ownerElement._style) {
 			if (attr === null) attr = this[loName] = new Attr(this.ownerElement, name, "")
-			attr.value = this.ownerElement._style.valueOf()
-			delete this.ownerElement._style
+			attr.value = this.ownerElement._style.cssText
 		}
 		return attr
 	},
@@ -299,11 +299,11 @@ NamedNodeMap.prototype = {
 		if (attr !== null) delete this[loName]
 		return attr
 	},
-	setNamedItem: function(name, value) {
-		this.removeNamedItem(name)
-		var loName = name.toLowerCase()
-		if (loName === "style") value = new CSSStyleDeclaration(value).valueOf()
-		this[loName] = new Attr(this.ownerElement, name, value)
+	setNamedItem: function(attr) {
+		var oldAttr = this.getNamedItem(attr.name)
+		if (attr.name === "style") attr.value = new CSSStyleDeclaration(attr.value).cssText
+		this[attr.name] = attr
+		return oldAttr
 	},
 	toString: function(minify) {
 		var map = this
@@ -327,18 +327,6 @@ NamedNodeMap.prototype = {
 	}
 }
 
-function CSSStyleDeclaration(style) {
-	for (var m, re = /(?:^|;)\s*([-a-z]+)\s*:((?:("|')(?:\\.|(?!\3)[^\\])*?\3|[^"';])+)(?=;|$)/ig; (m = re.exec(style)); ) {
-		this[m[1] === "float" ? "cssFloat" : camelCase(m[1])] = m[2].trim()
-	}
-}
-
-CSSStyleDeclaration.prototype.valueOf = function() {
-	return Object.keys(this).map(function(key) {
-		return (key === "cssFloat" ? "float:" : hyphenCase(key) + ":") + this[key]
-	}, this).join(";")
-}
-
 function DocumentFragment() {
 	this.childNodes = []
 }
@@ -502,17 +490,8 @@ function getSibling(node, step, type) {
 	return type > 0 ? getElement(silbings, index + step, step, type) : silbings && silbings[index + step] || null
 }
 
-function camelCase(str) {
-	return str.replace(/-([a-z])/g, function(_, a) { return a.toUpperCase() })
-}
-
-function hyphenCase(str) {
-	return str.replace(/[A-Z]/g, "-$&").toLowerCase()
-}
-
 exports.document = new Document()
 exports.entities = entities
-exports.CSSStyleDeclaration = CSSStyleDeclaration
 exports.DOMParser = DOMParser
 exports.Document = Document
 exports.DocumentFragment = DocumentFragment

package/net.js

@@ -87,11 +87,13 @@ XMLHttpRequest.prototype = {
 				result[entrie[0]] = entrie[1]
 				return result
 			}, {})
-			require(url.protocol.slice(0, -1)).request(url, function(res) {
+			var req = require(url.protocol.slice(0, -1)).request(url, function(res) {
 				head(res.statusCode, res.statusMessage, res.headers)
 				res.on("data", fillBody)
 				res.on("end", done)
-			}).end(data)
+			})
+			if (xhr.onerror) req.on("error", xhr.onerror)
+			req.end(data)
 			return
 		}
 		if (url.protocol === "data:") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@litejs/dom",
-  "version": "24.6.0",
+  "version": "24.7.0",
   "description": "A small DOM library for server-side testing, rendering, and handling of HTML files",
   "license": "MIT",
   "author": "Lauri Rooden <lauri@rooden.ee>",
@@ -18,12 +18,11 @@
     "*.js"
   ],
   "scripts": {
-    "lint": "jshint --config .github/jshint.json *.js",
-    "test": "lj t test/index.js"
+    "lint": "npx jshint -c .github/jshint.json *.js",
+    "test": "lj t test/*.js"
   },
   "repository": "github:litejs/dom",
   "devDependencies": {
-    "@litejs/cli": "23.11.1",
-    "jshint": "2.13.6"
+    "@litejs/cli": "23.11.1"
   }
 }