Use local http server (#64)

* Initialise & use local http server

* Strip local url in reporter

* Update snapshots

* Use constants to configure server

* Clean up server file

* Re-enable CSP

* Contain server functionality to server.js file

* Add explainer comments

* Fix reporter output

* Update snapshots

* Rewrite server module

* publicDir --> publishDir

* Minor cleanup

* Add in-prigress message before runPa11y

* Prepend server address in map callback

* Update snapshots

* Remove extraneous server method

* Import mime types from json file

* Allow ts to process json files

* Update lockfike

Author: mxmason

package-lock.json

@@ -23,15 +23,8 @@ const getConfiguration = ({
 }
 
 const getPa11yOpts = async (wcagLevel) => {
-	const browser = await puppeteer.launch({
-		// NB: Allows iframes to load when HTML page is visited from filesystem.
-		// Without this, a page with an iframe will crash pa11y
-		args: ['--disable-web-security'],
-		ignoreHTTPSErrors: true,
-	})
-
 	return {
-		browser,
+		browser: await puppeteer.launch({ ignoreHTTPSErrors: true }),
 		runners: PA11Y_RUNNERS,
 		userAgent: PA11Y_USER_AGENT,
 		standard: wcagLevel || PA11Y_DEFAULT_WCAG_LEVEL,

src/config.js

@@ -17,9 +17,12 @@ module.exports = {
 				fileAndDirPaths: checkPaths,
 			})
 
+			console.log('Checking your pages. This may take a while...')
+
 			const { report, issueCount } = await runPa11y({
 				build,
 				htmlFilePaths,
+				publishDir,
 				wcagLevel,
 			})
 			const reportSummary =

src/index.js

@@ -0,0 +1,25 @@
+{
+  ".html":"text/html",
+  ".js":"text/javascript",
+  ".mjs":"text/javascript",
+  ".json":"application/json",
+  ".css":"text/css",
+  ".ico":"image/x-icon",
+  ".gif":"image/gif",
+  ".png":"image/png",
+  ".jpg":"image/jpeg",
+  ".jpeg":"image/jpeg",
+  ".webp":"image/webp",
+  ".bmp":"image/bmp",
+  ".svg":"image/svg+xml",
+  ".wav":"audio/wav",
+  ".mp3":"audio/mpeg",
+  ".mp4":"video/mpeg",
+  ".weba":"audio/wav",
+  ".webm":"video/wav",
+  ".pdf":"application/pdf",
+  ".otf":"font/otf",
+  ".woff":"font/woff",
+  ".ttf":"font/ttf",
+  ".woff2":"font/woff2"
+}

src/mimeTypes.json

@@ -6,20 +6,23 @@ const { isDirectory, isFile } = require('path-type')
 const { results: cliReporter } = require('./reporter')
 const readdirp = require('readdirp')
 const { getPa11yOpts } = require('./config')
+const { StaticServer, SERVER_ADDRESS } = require('./server')
 
 const EMPTY_ARRAY = []
 const ASTERISK = '*'
 const HTML_EXT = '.html'
 const GLOB_HTML = '*.html'
 
-exports.runPa11y = async function ({ build, htmlFilePaths, wcagLevel }) {
+exports.runPa11y = async function ({ build, htmlFilePaths, publishDir, wcagLevel }) {
 	const pa11yOpts = await getPa11yOpts(wcagLevel)
 	let issueCount = 0
 
+	const staticServer = new StaticServer(publishDir).listen()
+
 	const results = await Promise.all(
-		htmlFilePaths.map(async (path) => {
+		htmlFilePaths.map(async (/** @type {string} */ filePath) => {
 			try {
-				const res = await pa11y(path, pa11yOpts)
+				const res = await pa11y(join(SERVER_ADDRESS, filePath), pa11yOpts)
 				if (res.issues.length) {
 					issueCount += res.issues.length
 					return cliReporter(res)
@@ -30,6 +33,8 @@ exports.runPa11y = async function ({ build, htmlFilePaths, wcagLevel }) {
 		}),
 	)
 
+	staticServer.close()
+
 	await pa11yOpts.browser.close()
 
 	return {

src/pluginCore.js

@@ -8,7 +8,7 @@
 
 'use strict'
 
-const { cyan, green, gray, red, underline, yellow } = require('picocolors')
+const { bold, cyan, green, gray, red, underline, yellow } = require('picocolors')
 
 // Pa11y version support
 const PA11Y_SUPPORTS = '^6.0.0 || ^6.0.0-alpha || ^6.0.0-beta'
@@ -17,7 +17,7 @@ const DUPLICATE_WHITESPACE_EXP = /\s+/g
 const EMPTY_SPACE = ' '
 const NEWLINE_LITERAL = '\n'
 
-const rootFilePath = 'file://' + process.cwd()
+const LOCAL_FILE_PATH_EXP = new RegExp(`^http://localhost:\\d{4}/|${'file://' + process.cwd()}/`);
 
 // Helper strings for use in reporter methods
 const start = cyan(' >')
@@ -44,8 +44,8 @@ function renderIssue(issue) {
 
 // Output formatted results
 function renderResults(results) {
-	const relativeFilePath = results.pageUrl.replace(rootFilePath, '.')
 	if (results.issues.length) {
+		const publicFilePath = results.pageUrl.replace(LOCAL_FILE_PATH_EXP, '')
 		const totals = {
 			error: 0,
 			notice: 0,
@@ -71,7 +71,7 @@ function renderResults(results) {
 
 		return cleanWhitespace(`
 
-			${underline(`Results for file: ${relativeFilePath}`)}
+			${bold(`Results for file ${underline(publicFilePath)}:`)}
 			${issues.join(NEWLINE_LITERAL)}
 
 			${summary.join(NEWLINE_LITERAL)}

src/reporter.js

@@ -0,0 +1,55 @@
+// @ts-check
+const http = require('http')
+const fs = require('fs')
+const path = require('path')
+const MIME_TYPES = require('./mimeTypes.json')
+
+const HTML_EXT = '.html'
+
+const SERVER_HOST = 'localhost'
+const SERVER_PORT = '9000'
+const SERVER_ADDRESS = 'localhost:' + SERVER_PORT
+
+const SERVER_OPTS = {
+	host: SERVER_HOST,
+	port: SERVER_PORT,
+}
+
+const basePath = process.cwd()
+
+class StaticServer {
+	/**
+	 * @param {string} publishDir
+	 */
+	constructor(publishDir) {
+		this.instance = http.createServer(async function (req, res) {
+			const ext = path.extname(req.url)
+			const filepath = ext === HTML_EXT ? path.join(basePath, req.url) : path.join(basePath, publishDir, req.url)
+
+			res.writeHead(200, { 'Content-type': MIME_TYPES[ext] || 'text/plain' })
+			const stream = fs.createReadStream(filepath, { encoding: 'utf-8' })
+
+			stream.on('open', function () {
+				stream.pipe(res)
+			})
+
+			stream.on('error', function (err) {
+				res.statusCode = 500
+				res.end(`Error getting the file: ${err}.`)
+			})
+
+			res.on('close', function () {
+				stream.destroy()
+			})
+		})
+	}
+
+	listen() {
+		return this.instance.listen(SERVER_OPTS)
+	}
+}
+
+module.exports = {
+	StaticServer,
+	SERVER_ADDRESS,
+}

src/server.js

@@ -4,7 +4,7 @@ exports[`runPa11y works 1`] = `
 Object {
   "issueCount": 1,
   "report": "
-[4mResults for file: ./tests/runPa11y/publishDir/index.html[24m
+[1mResults for file [4mtests/runPa11y/publishDir/index.html[24m:[22m
 
  • Error: Images must have alternate text (https://dequeuniversity.com/rules/axe/4.3/image-alt?application=axeAPI)
  ├── image-alt

tests/runPa11y/__snapshots__/this.test.js.snap

@@ -8,8 +8,9 @@
     "types": ["jest"],
     "esModuleInterop": true,
     "removeComments": true,
+		"resolveJsonModule": true,
     "skipLibCheck": true /* Skip type checking of declaration files. */,
     "forceConsistentCasingInFileNames": true
   },
   "include": ["src/**/*.ts", "src/**/*.js"]
-}
+}