keep a locally cached Page instance (projectwallace#18)

* keep a locally cached Page instance

* use puppeteer 1.19.0

Author: bartveneman

.nowignore

@@ -0,0 +1,89 @@
+const puppeteer = require('puppeteer-core')
+const chrome = require('chrome-aws-lambda')
+const exePath = process.platform === 'win32' ?
+	'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe' :
+	'/Applications/Google Chrome.app/Contents/MacOS/Google Chrome'
+
+const isDev = process.env.NOW_REGION === 'dev1'
+
+async function getOptions() {
+	if (isDev) {
+		return {
+			args: [],
+			executablePath: exePath,
+			headless: true
+		}
+	}
+
+	return {
+		args: chrome.args,
+		executablePath: await chrome.executablePath,
+		headless: chrome.headless
+	}
+}
+
+// Keep a locally cached 'page' object so that we
+// don't have to request the browser instance to
+// create a new one for each request.
+let _page
+
+async function getPage() {
+	if (_page) {
+		return _page
+	}
+
+	const options = await getOptions()
+	const browser = await puppeteer.launch(options)
+	_page = await browser.newPage() // eslint-disable-line
+	return _page
+}
+
+exports.extractCss = async url => {
+	const page = await getPage()
+
+	// Start CSS coverage. This is the meat and bones of this module
+	await page.coverage.startCSSCoverage()
+
+	const response = await page.goto(url, {waitUntil: 'networkidle2'})
+
+	// Make sure that we only try to extract CSS from valid pages.
+	// Bail out if the response is an invalid request (400, 500)
+	if (response.status() >= 400) {
+		return Promise.reject(
+			new Error(
+				`There was an error retrieving CSS from ${url}.\n\tHTTP status code: ${response.statusCode} (${response.statusText})`
+			)
+		)
+	}
+
+	// Coverage contains a lot of <style> and <link> CSS,
+	// but not all...
+	const coverage = await page.coverage.stopCSSCoverage()
+
+	// Get all CSS generated with the CSSStyleSheet API
+	// See: https://developer.mozilla.org/en-US/docs/Web/API/CSSRule/cssText
+	const styleSheetsApiCss = await page.evaluate(() => {
+		/* global document */
+		return [...document.styleSheets]
+			.filter(stylesheet => stylesheet.href === null)
+			.map(stylesheet =>
+				[...stylesheet.cssRules]
+					.map(cssStyleRule => cssStyleRule.cssText)
+					.join('')
+			)
+			.join('')
+	})
+
+	// Turn the coverage Array into a single string of CSS
+	const coverageCss = coverage
+		// Filter out the <style> tags that were found in the coverage
+		// report since we've conducted our own search for them.
+		// A coverage CSS item with the same url as the url of the page
+		// we requested is an indication that this was a <style> tag
+		.filter(styles => styles.url !== url)
+		// The `text` property contains the actual CSS
+		.map(({text}) => text)
+		.join('')
+
+	return Promise.resolve(styleSheetsApiCss + coverageCss)
+}

_chromium.js

@@ -1,105 +1,43 @@
-const got = require('got')
-const chromium = require('chrome-aws-lambda')
 const normalizeUrl = require('normalize-url')
 const isUrl = require('is-url')
 const LRU = require('lru-cache')
+const {extractCss} = require('./_chromium')
 
 const cssCache = new LRU({
 	max: 500,
-	maxAge: 60 * 1000
+	maxAge: 60 * 1000 // 1 minute
 })
 
-const extractCss = async url => {
-	const browser = await chromium.puppeteer.launch({
-		executablePath: await chromium.executablePath,
-		args: chromium.args,
-		headless: true
-	})
-
-	const page = await browser.newPage()
-
-	// Start CSS coverage. This is the meat and bones of this module
-	await page.coverage.startCSSCoverage()
-
-	const response = await page.goto(url, {waitUntil: 'networkidle2'})
-
-	// Make sure that we only try to extract CSS from valid pages.
-	// Bail out if the response is an invalid request (400, 500)
-	if (response.status() >= 400) {
-		await browser.close() // Don't leave any resources behind
-
-		return Promise.reject(
-			new Error(
-				`There was an error retrieving CSS from ${url}.\n\tHTTP status code: ${response.statusCode} (${response.statusText})`
-			)
-		)
-	}
-
-	// Coverage contains a lot of <style> and <link> CSS,
-	// but not all...
-	const coverage = await page.coverage.stopCSSCoverage()
-
-	// Get all CSS generated with the CSSStyleSheet API
-	// See: https://developer.mozilla.org/en-US/docs/Web/API/CSSRule/cssText
-	const styleSheetsApiCss = await page.evaluate(() => {
-		/* global document */
-		return [...document.styleSheets]
-			.filter(stylesheet => stylesheet.href === null)
-			.map(stylesheet =>
-				[...stylesheet.cssRules]
-					.map(cssStyleRule => cssStyleRule.cssText)
-					.join('')
-			)
-			.join('')
-	})
-
-	await browser.close()
-
-	// Turn the coverage Array into a single string of CSS
-	const coverageCss = coverage
-		// Filter out the <style> tags that were found in the coverage
-		// report since we've conducted our own search for them.
-		// A coverage CSS item with the same url as the url of the page
-		// we requested is an indication that this was a <style> tag
-		.filter(styles => styles.url !== url)
-		// The `text` property contains the actual CSS
-		.map(({text}) => text)
-		.join('')
-
-	return Promise.resolve(styleSheetsApiCss + coverageCss)
-}
-
 module.exports = async (req, res) => {
 	const url = normalizeUrl(req.url.slice(1), {stripWWW: false})
 
 	if (!isUrl(url)) {
 		res.statusCode = 406
 		res.setHeader('Content-Type', 'application/json')
+
 		return res.end(
 			JSON.stringify({
 				message: 'The provided URL is not valid'
 			})
 		)
 	}
 
+	res.setHeader('Content-Type', 'text/css')
+	res.statusCode = 200
+
 	if (cssCache.has(url)) {
-		res.setHeader('Content-Type', 'text/css')
-		res.statusCode = 200
 		return res.end(cssCache.get(url))
 	}
 
 	try {
-		const css = url.endsWith('.css') ?
-			(await got(url)).body :
-			await extractCss(url)
-
-		res.setHeader('Content-Type', 'text/css')
-		res.statusCode = 200
+		const css = await extractCss(url)
 		cssCache.set(url, css)
+
 		return res.end(css)
 	} catch (error) {
 		res.statusCode = 500
 		res.setHeader('Content-Type', 'application/json')
+
 		return res.end(JSON.stringify(error))
 	}
 }