packaton 0.0.3 → 0.0.6

package/README.md

@@ -45,6 +45,6 @@ To avoid minifying, you can pass `a=>a`
 - can't write inline scripts or css (all must be in an external file, packaton inlines them)
 - must have an index
 - Ignored Documents start with `_`, so you can't have routes that begin with _
-- Non-Documents and Files outside .media are not automatically copied over,
+- Non-Documents and Files outside /static are not automatically copied over,
   you need to specify them. 
-- src/media only files at the top level get hashed-named. But files within subdirs are not (by design).
+- static/media only files at the top level get hashed-named. But files within subdirs are not (by design).

package/index.d.ts

@@ -1,6 +1,7 @@
 export interface Config {
 	mode?: 'development' | 'production';
 	srcPath?: string
+	staticDir?: string
 	ignore?: RegExp
 	
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "packaton",
-	"version": "0.0.3",
+	"version": "0.0.6",
 	"type": "module",
 	"author": "Eric Fortis",
 	"license": "MIT",

package/src/HtmlCompiler.js

@@ -10,6 +10,7 @@ export class HtmlCompiler {
 	pSource = ''
 	css = ''
 	scriptsJs = ''
+	mediaRelUrl = ''
 	scriptsNonJs = ''
 	externalScripts = []
 	externalCSS = []
@@ -17,12 +18,13 @@ export class HtmlCompiler {
 	#minifyCSS = a => a
 	#minifyHTML = a => a
 
-	constructor(html, pSource = '', { minifyJS, minifyCSS, minifyHTML }) {
+	constructor(html, pSource = '', { minifyJS, minifyCSS, minifyHTML, mediaRelUrl }) {
 		this.html = html
 		this.pSource = pSource
 		this.#minifyJS = minifyJS
 		this.#minifyCSS = minifyCSS
 		this.#minifyHTML = minifyHTML
+		this.mediaRelUrl = mediaRelUrl
 	}
 
 	// Removes comments and format multi-line tags (needed for `removeLineContaining`)
@@ -31,7 +33,7 @@ export class HtmlCompiler {
 	}
 
 	remapMedia(mediaHashes) {
-		this.html = remapMediaInHTML(mediaHashes, this.html)
+		this.html = remapMediaInHTML(mediaHashes, this.html, this.mediaRelUrl)
 	}
 
 	async inlineMinifiedCSS() {

package/src/app-prod.js

@@ -6,7 +6,7 @@ import { docs } from './app.js'
 import { router } from './app-router.js'
 import { reportSizes } from './reportSizes.js'
 import { HtmlCompiler } from './HtmlCompiler.js'
-import { write, removeDir } from './fs-utils.js'
+import { write, removeDir, isFile } from './fs-utils.js'
 import { renameMediaWithHashes } from './media-remaper.js'
 
 
@@ -16,13 +16,19 @@ import { renameMediaWithHashes } from './media-remaper.js'
  */
 export async function buildStaticPages(config) {
 	return new Promise((resolve, reject) => {
+		const MEDIA_REL_URL = join(config.staticDir, 'media')
+
 		const pSource = config.srcPath
 		const pDist = config.outputPath
-		const pDistMedia = join(config.outputPath, 'media')
+		const pDistStatic = join(config.outputPath, config.staticDir)
+		const pDistMedia = join(pDist, MEDIA_REL_URL)
 		const pDistSitemap = join(pDist, 'sitemap.txt')
-		const pDistCspNginxMap = join(pDist, '.csp-map.nginx')
+		const pDistRobots = join(pDist, 'robots.txt')
 		const pSizesReport = 'packed-sizes.json'
 
+		const pDistCspNginxMap = join(pDist, '.csp-map.nginx')
+		const CLOUDFLARE_HEADERS_FILE = join(pDistStatic, '_headers')
+
 		const server = http.createServer(router(config))
 		server.listen(0, '127.0.0.1', async error => {
 			docs.init(config.srcPath, config.ignore)
@@ -33,7 +39,7 @@ export async function buildStaticPages(config) {
 				}
 
 				removeDir(pDist)
-				cpSync(join(pSource, 'media'), pDistMedia, {
+				cpSync(join(pSource, config.staticDir), pDistStatic, {
 					recursive: true,
 					dereference: true,
 					filter(src) {
@@ -48,7 +54,12 @@ export async function buildStaticPages(config) {
 
 				const cspByRoute = []
 				for (const [route, rawHtml] of pages) {
-					const doc = new HtmlCompiler(rawHtml, join(pSource, dirname(route)), config)
+					const doc = new HtmlCompiler(rawHtml, join(pSource, dirname(route)), {
+						minifyJS: config.minifyJS,
+						minifyCSS: config.minifyCSS,
+						minifyHTML: config.minifyHTML,
+						mediaRelUrl: MEDIA_REL_URL
+					})
 					await doc.minifyHTML()
 					doc.remapMedia(mediaHashes)
 					// TODO remap media in css and js
@@ -58,24 +69,27 @@ export async function buildStaticPages(config) {
 					cspByRoute.push([route, doc.csp()])
 				}
 
-				if (config.sitemapDomain)
+				if (config.sitemapDomain) {
 					write(pDistSitemap, docs.routes
 						.filter(r => r !== '/index')
 						.map(r => `https://${config.sitemapDomain + r}`)
 						.join('\n'))
 
+					if (!isFile(pDistRobots))
+						write(pDistRobots,
+							`Sitemap: https://${config.sitemapDomain}/sitemap.txt`)
+				}
+
 				if (config.cspMapEnabled) {
 					write(pDistCspNginxMap, cspByRoute.map(([route, csp]) =>
 						`${route} "${csp}";`).join('\n'))
-					
-					// cloudflare 
-					write(pDistMedia + '/_headers', cspByRoute.map(([route, csp]) => {
-						const r = route === '/index' ? '/' : route
-						return `${r}\n  Content-Security-Policy: ${csp}`
-					}).join('\n'))
+
+					write(CLOUDFLARE_HEADERS_FILE,
+						makeHeadersFile(cspByRoute, MEDIA_REL_URL))
 				}
 
-				reportSizes(pSizesReport, pDist, docs.routes.map(f => f + config.outputExtension))
+				reportSizes(pSizesReport, pDist, 
+					docs.routes.map(f => f + config.outputExtension))
 			}
 			catch (error) {
 				reject(error)
@@ -90,6 +104,19 @@ export async function buildStaticPages(config) {
 	})
 }
 
+// TODO @ThinkAbout in Nginx we need to use `/index` but in CF `/`
+function makeHeadersFile(cspByRoute, MEDIA_URL) {
+	const cspHeaders = cspByRoute.map(([route, csp]) => {
+		const r = route === '/index'
+			? '/'
+			: route
+		return `${r}\n  Content-Security-Policy: ${csp}`
+	})
+	cspHeaders.push(`${MEDIA_URL}/*`)
+	cspHeaders.push('  Cache-Control: public,max-age=31536000,immutable')
+	return cspHeaders.join('\n')
+}
+
 
 async function crawlRoutes({ address, port }, routes) {
 	const pages = []

package/src/config.js

@@ -17,6 +17,7 @@ import { minifyHTML } from './minifyHTML.js'
 const schema = {
 	mode: ['development', val => ['development', 'production'].includes(val)],
 	srcPath: [resolve('src'), isDirectory],
+	staticDir: ['static', optional(String)],
 	ignore: [/^_/, optional(RegExp)],
 
 	// Development

package/src/media-remaper.js

@@ -21,7 +21,6 @@ export async function renameMediaWithHashes(dir) {
 	return mediaHashes
 }
 
-// TODO if media is made configurable, we'd need to espace the regex for example .media -> \.media
 // Having one dir is kinda nice for nginx headers, but that's not an excuse nor solves nested dirs with same filename
 
 // TODO for (b of base) find and replace base with new hash
@@ -35,17 +34,22 @@ export async function renameMediaWithHashes(dir) {
  * If you want to handle CSS files, edit the regex so
  * instead of checking `="` (e.g. src="img.png") also checks for `url(`
  **/
-export function remapMediaInHTML(mediaHashes, html) {
-	const reFindMedia = new RegExp('(="media/.*?)"', 'g')
-	const reFindMediaKey = new RegExp('="media/')
+export function remapMediaInHTML(mediaHashes, html, mediaRelUrl) {
+	const mURL = escapeForRegex(mediaRelUrl)
+	const reFindMedia = new RegExp(`(="${mURL}/.*?)"`, 'g')
+	const reFindMediaKey = new RegExp(`="${mURL}/`)
 
 	for (const [, url] of html.matchAll(reFindMedia)) {
 		const hashedName = mediaHashes.get(url.replace(reFindMediaKey, ''))
 		if (!hashedName)
 			throw `ERROR: Missing ${url}\n`
-		html = html.replace(url, `="media/${hashedName}`)
+		html = html.replace(url, `="${mediaRelUrl}/${hashedName}`)
 	}
 	return html
 }
 
 
+function escapeForRegex(literal) {
+	return literal.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+