@litejs/dom 23.12.1 → 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
@@ -63,7 +61,7 @@ Follow [Coding Style Guide](https://github.com/litejs/litejs/wiki/Style-Guide),
 run tests `npm install; npm test`.
 
 
-> Copyright (c) 2014-2023 Lauri Rooden &lt;lauri@rooden.ee&gt;  
+> Copyright (c) 2014-2024 Lauri Rooden &lt;lauri@rooden.ee&gt;  
 [MIT License](https://litejs.com/MIT-LICENSE.txt) |
 [GitHub repo](https://github.com/litejs/dom) |
 [npm package](https://npmjs.org/package/@litejs/dom) |

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,
@@ -83,6 +84,7 @@ var boolAttrs = {
 				if ((re = rawTextElements[child.tagName])) {
 					for (text = ""; (m = tagRe.exec(html)) && !re.test(m[0]); text += m[3] || m[0]);
 					child.textContent = text.replace(unescRe, unescFn)
+					if (!m) break
 				} else if (!voidElements[child.tagName] && !m[8]) tree = child
 			} else {
 				tree.appendChild(
@@ -110,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
@@ -182,9 +184,9 @@ var boolAttrs = {
 		return selector.find(this, sel)
 	},
 	toString: function(minify) {
-		return rawTextElements[this.tagName] ? this.textContent : this.hasChildNodes() ? this.childNodes.reduce(function(memo, node) {
+		return rawTextElements[this.tagName] ? this.textContent : this.childNodes.reduce(function(memo, node) {
 			return memo + node.toString(minify)
-		}, "") : ""
+		}, "")
 	}
 }
 , Element = {
@@ -209,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)
@@ -286,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
 	},
@@ -298,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
@@ -315,6 +316,7 @@ NamedNodeMap.prototype = {
 			if (!isXml) {
 				if (hasOwn.call(boolAttrs, loName)) return name
 				if (minify) {
+					value = loName.slice(0, 2) === "on" ? value.replace(/^[\s\uFEFF\xA0;]+|[\s\uFEFF\xA0;]+$/g, "") : value.replace(/\s+/g, " ").trim()
 					if (hasOwn.call(defaultAttrs, (tagName + " " + name + " " + value).toLowerCase())) return
 					if (!quotedAttrRe.test(value)) return name + "=" + value
 					if (value.split("\"").length > value.split("'").length) return name + "='" + value.replace(/'/g, "&#39;") + "'"
@@ -325,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 = []
 }
@@ -430,6 +420,14 @@ function Document() {
 }
 
 extendNode(Document, Element, {
+	get title() {
+		var el = selector.find(this, "title", 1)
+		return el && el.textContent || ""
+	},
+	set title(text) {
+		var el = selector.find(this, "title", 1) || this.appendChild(this.createElement("title"))
+		el.textContent = text
+	},
 	nodeType: 9,
 	nodeName: "#document",
 	contentType: "text/html",
@@ -492,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,12 +1,13 @@
 {
   "name": "@litejs/dom",
-  "version": "23.12.1",
+  "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>",
   "keywords": [
     "document",
     "dom",
+    "html",
     "DOMParser",
     "XMLHttpRequest",
     "XMLSerializer",
@@ -17,12 +18,11 @@
     "*.js"
   ],
   "scripts": {
-    "test": "lj test --coverage --brief test/index.js && node --import=@litejs/cli/test.js test/run.mjs && jshint --config .github/jshint.json *.js",
-    "test-fast": "lj test --brief 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"
   }
 }