Adds JSDOM mode

Author: zachleat

README.md

@@ -55,6 +55,9 @@ glyphhanger ./test.html --json
 # show results only for one or more font-family names
 glyphhanger ./test.html --family='Open Sans, Roboto'
 
+# use much faster jsdom mode instead of headless Chrome
+glyphhanger ./test.html --jsdom
+
 # Show version
 glyphhanger --version
 
@@ -209,6 +212,13 @@ Limit results to text inside of elements that match a CSS selector
 glyphhanger ./test.html --cssSelector="pre, #header, .popUp". If paired with `--onlyVisible`, it will only return elements that are both visible and match the selector
 ```
 
+### Advanced: use `jsdom` Mode ⚠️
+
+JSDOM mode can be useful running against static pages that don’t use a lot of JavaScript generated content. While JSDOM mode can handle some JavaScript generated content, Puppeteer mode should be the safest method for most use cases.
+
+JSDOM mode will also be much faster when running against files on a local filesystem rather than URL targets.
+
+Read more about [the difference between JSDOM and a full headless browser](https://github.com/jsdom/jsdom/wiki/jsdom-vs.-PhantomJS) (like the default mode that glyphhanger uses: Puppeteer/headless Chrome).
 
 ## Troubleshooting
 

cmd.js

@@ -1,7 +1,6 @@
 #!/usr/bin/env node
 var argv = require( "minimist" )( process.argv.slice(2) );
 var GlyphHanger = require( "./src/GlyphHanger" );
-var GlyphHangerFormat = require( "./src/GlyphHangerFormat" );
 var GlyphHangerWhitelist = require( "./src/GlyphHangerWhitelist" );
 var GlyphHangerSubset = require( "./src/GlyphHangerSubset" );
 var GlyphHangerFontFace = require( "./src/GlyphHangerFontFace" );
@@ -23,6 +22,9 @@ gh.setFamilies( argv.family );
 gh.setTimeout( argv.timeout );
 gh.setVisibilityCheck( argv.onlyVisible );
 gh.setCSSSelector( argv.cssSelector );
+if( argv.jsdom ) {
+	gh.setEnvironmentJSDOM();
+}
 
 var subset = new GlyphHangerSubset();
 subset.setOutputDirectory(argv.output);
@@ -89,12 +91,12 @@ if( argv.version ) {
 		}
 
 		gh.output();
-
 		try {
 			fontface.setUnicodeRange( gh.getUnicodeRange() );
 			fontface.writeCSSFiles();
 		} catch(e) {
 			console.log("GlyphHangerFontFace Error: ", e);
+			process.exit(1);
 		}
 
 		try {
@@ -103,13 +105,17 @@ if( argv.version ) {
 			}
 		} catch(e) {
 			console.log("GlyphHangerSubset Error: ", e);
+			process.exit(1);
 		}
 
 		try {
 			fontface.output();
 		} catch(e) {
 			console.log("GlyphHangerFontFace Error: ", e);
+			process.exit(1);
 		}
+
+		process.exit();
 	})();
 } else { // not using URLs
 	if( argv.subset ) {
@@ -119,6 +125,7 @@ if( argv.version ) {
 			// --subset with or without --whitelist
 			subset.subsetAll( !whitelist.isEmpty() ? whitelist.getWhitelistAsUnicodes() : whitelist.getUniversalRangeAsUnicodes() );
 		} catch(e) {
+			process.exitCode = 1;
 			console.log("GlyphHangerSubset Error: ", e);
 		}
 
@@ -129,6 +136,7 @@ if( argv.version ) {
 			fontface.writeCSSFiles();
 			fontface.output();
 		} catch(e) {
+			process.exitCode = 1;
 			console.log("GlyphHangerFontFace Error: ", e);
 		}
 	} else if( !whitelist.isEmpty() ) {
@@ -140,6 +148,7 @@ if( argv.version ) {
 			fontface.writeCSSFiles();
 			fontface.output();
 		} catch(e) {
+			process.exitCode = 1;
 			console.log("GlyphHangerFontFace Error: ", e);
 		}
 	} else {

package.json

@@ -39,7 +39,7 @@
     "shelljs": "^0.7.8"
   },
   "devDependencies": {
-    "jsdom": "^11.5.1",
+    "jsdom": "^13.0.0",
     "mocha": "^4.0.1"
   }
 }

src/GlyphHanger.js

@@ -1,11 +1,9 @@
 const chalk = require( "chalk" );
-const path = require( "path" );
-const puppeteer = require('puppeteer');
 const CharacterSet = require( "characterset" );
 const WebServer = require( "./WebServer" );
 const GlyphHangerWhitelist = require( "./GlyphHangerWhitelist" );
+const GlyphHangerEnvironment = require( "./GlyphHangerEnvironment" );
 const debug = require("debug")("glyphhanger");
-const debugNodes = require("debug")("glyphhanger:nodes");
 
 class GlyphHanger {
 	constructor() {
@@ -16,14 +14,11 @@ class GlyphHanger {
 		this.timeout = 30000;
 		this.onlyVisible = false;
 		this.whitelist = new GlyphHangerWhitelist();
+		this.env = new GlyphHangerEnvironment();
 	}
 
-	async getBrowser() {
-		if( !this.browser ) {
-			this.browser = await puppeteer.launch();
-		}
-
-		return this.browser;
+	setEnvironmentJSDOM() {
+		this.env.setEnvironment("jsdom");
 	}
 
 	setSubset( subset ) {
@@ -112,74 +107,24 @@ class GlyphHanger {
 		return set;
 	}
 
-	async _getPage(url) {
-		let browser = await this.getBrowser();
-		let page = await browser.newPage();
-		page.setBypassCSP(true);
-
-		try {
-			let response = await page.goto(url, {
-				waitUntil: ["load", "networkidle0"],
-				timeout: this.timeout
-			});
-
-			let statusCode = response.status();
-
-			if ( statusCode !== 200 ) {
-				console.log(chalk.yellow(`Warning: ${url} had a non 200 HTTP status code: (${statusCode})`));
-			}
-
-			return page;
-		} catch(e) {
-			console.log(chalk.red(`Error with ${url}:`), e);
-		}
+	getOptions() {
+		return {
+			className: this.className,
+			onlyVisible: this.onlyVisible,
+			cssSelector: this.cssSelector
+		};
 	}
 
 	async _fetchUrl( url ) {
 		debug( "requesting: %o", url );
 
-		let page = await this._getPage(url);
+		let page = await this.env.getPage(url);
 
 		if(!page) {
 			return false;
 		}
-
-		page.on("console", function(msg) {
-			debugNodes("(headless browser console): %o", msg.text());
-		});
-
-		await page.addScriptTag({
-			path: require.resolve("characterset")
-		});
-
-		await page.addScriptTag({
-			path: path.resolve(__dirname, "../src/glyphhanger-script.js")
-		});
-
-		// debugNodes("Full document.body.innerHTML:");
-		// debugNodes(await page.evaluate( function() {
-		// 	return document.body.innerHTML;
-		// }));
-
-		let json = await page.evaluate( function(docClassName, opts) {
-			if(docClassName && docClassName !== "undefined") {
-				// add to both the documentElement and document.body because why not
-				document.documentElement.className += " " + docClassName;
-
-				if( "body" in document ) {
-					document.body.className += " " + docClassName;
-				}
-			}
-
-			var hanger = new GlyphHanger();
-			hanger.init( document.body, opts );
-
-			return hanger.toJSON();
-    }, this.className, {
-      onlyVisible: this.onlyVisible,
-      cssSelector: this.cssSelector
-    }
-    );
+		let options = this.getOptions();
+		let json = await this.env.getResults(page, options);
 
 		debug("Adding to set for %o: %o", url, json);
 		this.addToSets(json);
@@ -190,14 +135,18 @@ class GlyphHanger {
 		for( let url of urls ) {
 			debug("WebServer.isValidUrl(%o)", url);
 
-			if(!WebServer.isValidUrl(url) || url.indexOf('http://localhost:') === 0 ) {
-				if( !this.staticServer ) {
-					debug("Creating static server");
-					this.staticServer = await WebServer.getStaticServer();
+			let urlStr = url;
+			if(this.env.requiresWebServer()) {
+				if(!WebServer.isValidUrl(url) || url.indexOf('http://localhost:') === 0 ) {
+					if( !this.staticServer ) {
+						debug("Creating static server");
+						this.staticServer = await WebServer.getStaticServer();
+					}
 				}
+
+				urlStr = WebServer.getUrl(url);
 			}
 
-			let urlStr = WebServer.getUrl(url);
 			if( (await this._fetchUrl(urlStr)) === false ) {
 				failCount++;
 			}
@@ -207,11 +156,12 @@ class GlyphHanger {
 			console.log( chalk.red( `${failCount} of ${urls.length} urls failed.` ) );
 		}
 
-		let browser = await this.getBrowser();
-		await browser.close();
+		await this.env.close();
 
-		debug("Closing static server");
-		WebServer.close(this.staticServer);
+		if(this.env.requiresWebServer()) {
+			debug("Closing static server");
+			WebServer.close(this.staticServer);
+		}
 	}
 
 	getOutputForSet(set) {