@litejs/dom 24.6.0 → 24.8.0

package/README.md

@@ -1,7 +1,7 @@
 
 [1]: https://badgen.net/coveralls/c/github/litejs/dom
 [2]: https://coveralls.io/r/litejs/dom
-[3]: https://badgen.net/packagephobia/install/@litejs/dom
+[3]: https://packagephobia.now.sh/badge?p=@litejs/dom
 [4]: https://packagephobia.now.sh/result?p=@litejs/dom
 [5]: https://badgen.net/badge/icon/Buy%20Me%20A%20Tea/orange?icon=kofi&label
 [6]: https://www.buymeacoffee.com/lauriro
@@ -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

@@ -12,6 +12,7 @@ exports.XMLHttpRequest = XMLHttpRequest
 exports.defaultHeaders = {
 	accept: ["Accept", "*/*"]
 }
+exports.protocolHandler = {}
 
 function XMLHttpRequest() {
 	this._reqHeaders = Object.assign({}, exports.defaultHeaders)
@@ -64,9 +65,9 @@ XMLHttpRequest.prototype = {
 	abort: function() {
 		throw Error("XMLHttpRequest abort/reuse not implemented")
 	},
-	open: function (method, url, async) {
+	open: function (method, url, isAsync) {
 		var xhr = this
-		if (async === false) throw Error("XMLHttpRequest sync not implemented")
+		xhr._sync = isAsync === false
 
 		if (xhr.readyState > xhr.UNSENT) {
 			xhr.abort()
@@ -79,33 +80,36 @@ XMLHttpRequest.prototype = {
 	send: function (data) {
 		var xhr = this
 		, url = new URL(xhr.responseURL, XMLHttpRequest.base)
+		, proto = url.protocol.slice(0, -1)
 
-		if (url.protocol === "http:" || url.protocol === "https:") {
+		if (proto === "http" || proto === "https") {
+			if (xhr._sync) throw Error("XMLHttpRequest sync not implemented")
 			url.method = xhr.method
 			url.headers = Object.keys(xhr._reqHeaders).reduce(function(result, key) {
 				var entrie = xhr._reqHeaders[key]
 				result[entrie[0]] = entrie[1]
 				return result
 			}, {})
-			require(url.protocol.slice(0, -1)).request(url, function(res) {
+			var req = require(proto).request(url, function(res) {
 				head(res.statusCode, res.statusMessage, res.headers)
 				res.on("data", fillBody)
 				res.on("end", done)
-			}).end(data)
+			})
+			req.on("error", done)
+			req.end(data)
 			return
 		}
-		if (url.protocol === "data:") {
+		if (proto === "data") {
 			var match = dataUrlRe.exec(url.pathname)
-			if (!match) throw Error("Invalid URL: " + url)
-			process.nextTick(function() {
+			if (match) {
 				head(200, "OK", { "content-type": match[1] || "text/plain" })
 				fillBody(match[2] ? Buffer.from(match[3], "base64") : unescape(match[3]))
 				done()
-			})
+			} else done(Error("Invalid URL: " + url))
 			return
 		}
 
-		if (url.protocol === "file:") {
+		if (proto === "file") {
 			require("fs").readFile(url, function(err, chunk) {
 				if (err) {
 					head(404, "Not Found", {})
@@ -118,6 +122,11 @@ XMLHttpRequest.prototype = {
 			return
 		}
 
+		if (exports.protocolHandler[proto]) {
+			exports.protocolHandler[proto](url, head, fillBody, done)
+			return
+		}
+
 		throw Error("Unsuported protocol in: " + url)
 
 		function head(code, text, headers) {
@@ -130,8 +139,13 @@ XMLHttpRequest.prototype = {
 			xhr.responseText += chunk.toString("utf8")
 			setState(xhr, xhr.LOADING)
 		}
-		function done() {
-			setState(xhr, xhr.DONE)
+		function done(err) {
+			if (err) {
+				if (xhr.onerror) xhr.onerror(err)
+				else throw err
+			}
+			else if (xhr._sync) setState(xhr, xhr.DONE)
+			else process.nextTick(setState, xhr, xhr.DONE)
 		}
 	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@litejs/dom",
-  "version": "24.6.0",
+  "version": "24.8.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"
   }
 }