unprint 0.10.11 → 0.11.0

package/README.md

@@ -24,14 +24,14 @@ For optimal flexibility, unprint query methods can be used with or without initi
 Both `unprint.get()` and `unprint.init()` return its `query` methods pre-initialized, removing the element argument in favor of the element retrieved or received. Initialized query methods therefore will *not* accept a custom element, usually expecting the selector as the first argument instead.
 
 ```javascript
-const result = await unprint.get('http://localhot:3101/html');
+const result = await unprint.get('http://localhost:3101/html');
 const { query } = result.context;
 
 query.element('h1#title'); // HTMLHeadingElement
 ```
 
 ```javascript
-const result = await fetch('http://localhot:3101/html');
+const result = await fetch('http://localhost:3101/html');
 const body = await res.text();
 const { query } = await unprint.init(body);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unprint",
-  "version": "0.10.11",
+  "version": "0.11.0",
   "description": "Simplify common web scraping tasks while staying in control of the data.",
   "main": "src/app.js",
   "scripts": {

package/src/app.js

@@ -184,7 +184,11 @@ function queryAttributes(context, selector, attribute, customOptions) {
 function queryDataset(context, selector, dataAttribute, customOptions) {
 	const target = queryElement(context, selector, customOptions);
 
-	return target.dataset[dataAttribute];
+	if (target) {
+		return target.dataset[dataAttribute];
+	}
+
+	return null;
 }
 
 function queryDatasets(context, selector, dataAttribute, customOptions) {
@@ -479,6 +483,43 @@ function querySourceSets(context, selector, attr = 'srcset', customOptions = {})
 	return sourceSets.map((sourceSet) => extractSourceSet(sourceSet, customOptions));
 }
 
+/*
+function removeStyleFunctionSpaces(el) {
+	// jsdom appears to have a bug where it ignores inline CSS attributes set to a function() containing spaces, e.g. url( image.png )
+	el.setAttribute('style', el.getAttribute('style').replace(/\(\s+(.*)\s+\)/g, (match, cssArgs) => `(${cssArgs})`));
+}
+*/
+
+function queryStyle(context, selector, customOptions) {
+	const options = {
+		...customOptions,
+		attribute: 'style',
+	};
+
+	const style = queryContent(context, selector, options);
+
+	if (style) {
+		return options.styleAttribute
+			? style.getPropertyValue(options.styleAttribute)
+			: style._values;
+	}
+
+	return null;
+}
+
+function queryStyles(context, selector, customOptions) {
+	const options = {
+		...customOptions,
+		attribute: 'style',
+	};
+
+	const elStyles = queryContents(context, selector, options).map((style) => (options.styleAttribute
+		? style.getPropertyValue(options.styleAttribute)
+		: style._values));
+
+	return elStyles;
+}
+
 function queryVideo(context, selector = 'source', customOptions) {
 	const options = {
 		...context.options,
@@ -677,6 +718,8 @@ const queryFns = {
 	imgs: queryImages,
 	json: queryJson,
 	jsons: queryJsons,
+	style: queryStyle,
+	styles: queryStyles,
 	number: queryNumber,
 	num: queryNumber,
 	numbers: queryNumbers,

package/tests/index.html

@@ -42,6 +42,9 @@
 		<img class="srcset" srcset="https://i.redd.it/e91oo4ueyeb71.jpg 240w, https://i.redd.it/vn9h981hlx281.png 480w, https://i.redd.it/e91oo4ueyeb71.jpg 640w">
 		<img class="srcset" srcset="https://i.redd.it/e91oo4ueyeb71.jpg 240w, https://i.redd.it/vn9h981hlx281.png 480w, https://i.redd.it/e91oo4ueyeb71.jpg 640w">
 
+		<div class="style" style="background-image: url('https://i.imgur.com/eDQmLys.jpg'); color: red;"></div>
+		<div class="style" style="margin: 1rem; color: blue;"></div>
+
 		<video id="video" poster="https://i.imgur.com/eDQmLys.jpg"><source src="https://i.imgur.com/eDQmLys.mp4"></video>
 
 		<script id="json" type="application/js">{"foo": "bar", "lorem": "ipsum", "hello": "world"}</script>

package/tests/init.js

@@ -37,6 +37,10 @@ async function initTest() {
 	console.log('images', res.context.query.imgs('.image'));
 	console.log('srcset', res.context.query.sourceSet('.srcset'));
 	console.log('srcsets', res.context.query.sourceSets('.srcset'));
+	console.log('style', res.context.query.style('.style'));
+	console.log('style background', res.context.query.style('.style', { styleAttribute: 'background-image' }));
+	console.log('styles', res.context.query.styles('.style'));
+	console.log('styles color', res.context.query.styles('.style', { styleAttribute: 'color' }));
 	console.log('path', res.context.query.url('#path'));
 	console.log('relative path', res.context.query.url('#relativePath'));
 	console.log('exists', res.context.query.exists('#title'));