packaton 0.0.24 → 0.0.26

package/README.md

@@ -1,6 +1,6 @@
 # Packaton WIP
 
-Static Site Generator (SSG). Inlines CSS and JS and 
+Static Site Generator (SSG). Inlines CSS and JS and
 creates a header file with their corresponding CSP hashes.
 
 ## Usage Example
@@ -32,11 +32,10 @@ If you want to use media files in CSS, create a similar function to
 
 ## Production Build
 It crawls the dev server, and saves each route as static html page.
-It saves the pages without the `.html` extension for pretty URLs. 
+It saves the pages without the `.html` extension for pretty URLs.
 See [Pretty routes for static HTML](https://blog.uxtly.com/pretty-routes-for-static-html)
 
 
-
 ## Minifiers
 
 ```js

package/index.d.ts

@@ -3,15 +3,14 @@ export interface Config {
 	srcPath?: string
 	assetsDir?: string
 	ignore?: RegExp
-	
 
 	// Dev
-  host?: string,
-  port?: number
-  onReady?: (address: string) => void
-  hotReload?: boolean // For UI dev purposes only
-	watchIgnore?: Array<string|RegExp>
-	
+	host?: string
+	port?: number
+	onReady?: (address: string) => void
+	hotReload?: boolean // For UI dev purposes only
+	watchIgnore?: Array<string | RegExp>
+
 	// Production
 	outputDir?: string
 	outputExtension?: string
@@ -20,5 +19,5 @@ export interface Config {
 	minifyHTML?: (html: string) => Promise<string>
 	sitemapDomain?: string
 	cspMapEnabled?: boolean
+	routeHeaders?: [name: string, value: string][]
 }
-  

package/package.json

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

package/src/app-prod.js

@@ -1,6 +1,6 @@
-import { cpSync } from 'node:fs'
 import { createServer } from 'node:http'
 import { basename, join } from 'node:path'
+import { cpSync, existsSync } from 'node:fs'
 
 import { docs } from './app.js'
 import { router } from './router.js'
@@ -41,9 +41,25 @@ export async function buildStaticPages(config) {
 					}
 				})
 
+
+				const wellKnownDir = join(pSource, '.well-known')
+				if (existsSync(wellKnownDir))
+					cpSync(wellKnownDir, join(pDist, '.well-known'), {
+						recursive: true,
+						dereference: true,
+						filter(src) {
+							return basename(src) !== '.DS_Store'
+						}
+					})
+
 				const pages = await crawlRoutes(server.address(), docs.routes)
 				const mediaHashes = await renameMediaWithHashes(pDist, MEDIA_REL_URL)
-				
+
+				const headers = {
+					['/' + MEDIA_REL_URL + '/*']: [
+						['Cache-Control', 'public,max-age=31536000,immutable']
+					]
+				}
 				const cspByRoute = []
 				for (const [route, rawHtml] of pages) {
 					const doc = new HtmlCompiler(rawHtml, pSource, {
@@ -52,7 +68,7 @@ export async function buildStaticPages(config) {
 						minifyHTML: config.minifyHTML,
 						mediaRelUrl: MEDIA_REL_URL,
 						mediaHashes
-						
+
 					})
 					await doc.minifyHTML()
 					doc.remapMedia()
@@ -60,13 +76,18 @@ export async function buildStaticPages(config) {
 					await doc.inlineMinifiedCSS()
 					await doc.inlineMinifiedJS()
 					write(join(pDist, route + config.outputExtension), doc.html)
-					cspByRoute.push([route, doc.csp()])
+
+					const r = route === '/index' ? '/' : route
+					headers[r] ??= []
+					headers[r].push(['Content-Security-Policy', doc.csp()])
+					for (const h of config.routeHeaders)
+						headers[r].push(h)
 				}
 
 				sitemapPlugin(config, docs.routes)
 				reportSizesPlugin(config, docs.routes)
 				cspNginxMapPlugin(config, cspByRoute)
-				netiflyAndCloudflareHeadersPlugin(config, cspByRoute, MEDIA_REL_URL)
+				write(join(config.outputDir, '_headers'), netiflyAndCloudflareHeadersPlugin(headers))
 			}
 			catch (error) {
 				reject(error)

package/src/config.js

@@ -35,6 +35,7 @@ const schema = {
 	minifyHTML: [minifyHTML, optional(Function)],
 	sitemapDomain: ['', optional(String)],
 	cspMapEnabled: [true, optional(Boolean)],
+	routeHeaders: [[], Array.isArray]
 }
 // TODO watch New Routes?
 

package/src/plugins-dev/cache-bust-resolver.js

@@ -1,6 +1,6 @@
 // We register this hook at runtime so it doesn’t interfere with non-dynamic imports. 
 export async function resolve(specifier, context, nextResolve) {
-	const result = await nextResolve(specifier, context);
+	const result = await nextResolve(specifier, context)
 	if (result.url?.startsWith('file:')) {
 		const url = new URL(result.url)
 		url.searchParams.set('t', performance.now())

package/src/plugins-dev/watcherDev.js

@@ -1,17 +1,18 @@
 const WATCH_API = '/packaton/watch-dev'
 
-let es = null
+let conn = null
 let timer = null
 
 window.addEventListener('beforeunload', teardown)
 connect()
 function connect() {
-	if (es) return
+	if (conn)
+		return
 
 	clearTimeout(timer)
-	es = new EventSource(WATCH_API)
+	conn = new EventSource(WATCH_API)
 
-	es.onmessage = function (event) {
+	conn.onmessage = function (event) {
 		const file = event.data
 		if (file.endsWith('.css'))
 			hotReloadCSS(file)
@@ -19,7 +20,7 @@ function connect() {
 			location.reload()
 	}
 
-	es.onerror = function () {
+	conn.onerror = function () {
 		console.error('hot reload')
 		teardown()
 		timer = setTimeout(connect, 3000)
@@ -28,8 +29,8 @@ function connect() {
 
 function teardown() {
 	clearTimeout(timer)
-	es?.close()
-	es = null
+	conn?.close()
+	conn = null
 }
 
 async function hotReloadCSS(file) {

package/src/plugins-prod/HtmlCompiler.js

@@ -72,7 +72,7 @@ export class HtmlCompiler {
 		this.scriptsModuleJs = await Promise.all(scripts
 			.filter(([type]) => type === 'module')
 			.map(([, body]) => this.#minifyJS(body, Boolean('isModule'))))
-		
+
 		this.scriptsNonJs = scripts
 			.filter(([type]) => type !== 'application/javascript' && type !== 'module')
 
@@ -89,13 +89,13 @@ export class HtmlCompiler {
 
 	csp() {
 		const cssHash = this.css ? `'${this.hash256(this.css)}'` : '' // TODO maybe self?
-		
+
 		const jsScriptHash = this.scriptsJs ? `'${this.hash256(this.scriptsJs)}'` : '' // TODO maybe self?
 		const jsModulesHashes = this.scriptsModuleJs.map(body => `'${this.hash256(body)}'`).join(' ')
 		const nonJsScriptHashes = this.scriptsNonJs.map(([, body]) => `'${this.hash256(body)}'`).join(' ')
 		const inlineScriptsHashes = this.extractInlineScripts().map(body => `'${this.hash256(body)}'`).join(' ')
 		const externalScriptDomains = this.externalScripts.map(url => `${new URL(url).origin}`).join(' ')
-		
+
 		return [
 			`default-src 'self'`,
 			`img-src 'self' data:`, // data: is for Safari's video player icons and for CSS bg images
@@ -121,7 +121,7 @@ export class HtmlCompiler {
 		this.html = this.html.replace(new RegExp('^.*' + str + '.*\n', 'm'), '')
 	}
 
-	
+
 	extractStyleSheetHrefs() {
 		const reExtractStyleSheets = /(?<=<link\s.*href=")[^"]+\.css/g
 		return Array.from(this.html.matchAll(reExtractStyleSheets), m => m[0])
@@ -147,14 +147,14 @@ export class HtmlCompiler {
 			]
 		})
 	}
-	
+
 	extractInlineScripts() {
 		const reExtractInlineScripts = /<script\b([^>]*?)>([\s\S]*?)<\/script>/g
 		return Array.from(this.html.matchAll(reExtractInlineScripts), m => {
 			const attrs = m[1]
 			const body = m[2]
-			return attrs.includes('src=') 
-				? null 
+			return attrs.includes('src=')
+				? null
 				: body
 		}).filter(Boolean)
 	}

package/src/plugins-prod/minifyCSS.js

@@ -1,11 +1,11 @@
 /**
  * You can override this minifier in `config.minifyCSS`
- * 
+ *
  * This program is an oversimplified CSS minifier. It doesn’t
  * try to minify everything, but only what’s safe and easy to minify.
- * 
+ *
  * Why?
- * When I wrote this program, ~2018, some CSS minifiers reordered rules 
+ * When I wrote this program, ~2018, some CSS minifiers reordered rules
  * but that messed up browser-specific prefixes that were used as workarounds.
  */
 

package/src/plugins-prod/minifyHTML.js

@@ -6,15 +6,15 @@
  * It's based on https://gist.github.com/espretto/1b3cb7e8b01fa7daaaac
  *
  * Why?
- * When I wrote this program, ~2018, I tried a few libraries but some 
+ * When I wrote this program, ~2018, I tried a few libraries but some
  * of them messed up relevant spaces in `<pre>` tags and between tags.
  *
  * We don’t remove newlines because for example `<kbd>` and `<a>`
  * would need special rules to have a space in-place of that newline.
  *
- * 
+ *
  * This algorithm basically collects parts that should not be minified and
- * replaces them with a known magic string "<preserved>". Then, at the end, 
+ * replaces them with a known magic string "<preserved>". Then, at the end,
  * replaces, in order, those magic strings with the original tag and its content.
  */
 

package/src/plugins-prod/netiflyAndCloudflareHeadersPlugin.js

@@ -1,28 +1,10 @@
-import { join } from 'node:path'
-import { write } from '../utils/fs-utils.js'
-
-
-/**
- * @param {Config} config
- * @param {string} cspByRoute
- * @param {string} relMediaURL
- */
-export function netiflyAndCloudflareHeadersPlugin(config, cspByRoute, relMediaURL) {
-	const out = join(join(config.outputDir, config.assetsDir), '_headers')
-
-	const cspHeaders = cspByRoute.map(([route, csp]) => {
-		const r = route === '/index'
-			? '/'
-			: route
-		return [
-			r,
-			`  Content-Security-Policy: ${csp}`,
-			`  Cache-Control: public,max-age=60`
-		].join('\n')
-	})
-	cspHeaders.push(`/${relMediaURL}/*`)
-	cspHeaders.push('  Cache-Control: public,max-age=31536000,immutable')
-
-	write(out, cspHeaders.join('\n'))
+export function netiflyAndCloudflareHeadersPlugin(opts) {
+	let result = []
+	for (const [route, headers] of Object.entries(opts)) {
+		result.push(route)
+		for (const [h, v] of headers)
+			result.push(`  ${h}: ${v}`)
+	}
+	return result.join('\n')
 }
 

package/src/plugins-prod/sitemapPlugin.js

@@ -3,18 +3,20 @@ import { write, isFile } from '../utils/fs-utils.js'
 
 
 export function sitemapPlugin(config, routes) {
-	if (!config.sitemapDomain) 
+	if (!config.sitemapDomain)
 		return
-	
+
 	const outMap = join(config.outputDir, 'sitemap.txt')
 	const outRobots = join(config.outputDir, 'robots.txt')
-	
+
 	write(outMap, routes
 		.filter(r => r !== '/index')
 		.map(r => `https://${config.sitemapDomain + r}`)
 		.join('\n'))
 
 	if (!isFile(outRobots))
-		write(outRobots,
-			`Sitemap: https://${config.sitemapDomain}/sitemap.txt`)
+		write(outRobots, `
+User-agent: *
+Sitemap: https://${config.sitemapDomain}/sitemap.txt
+`.trim())
 }

package/src/utils/fs-utils.js

@@ -1,7 +1,7 @@
 import { readdir } from 'node:fs/promises'
 import { createHash } from 'node:crypto'
 import { join, dirname } from 'node:path'
-import { rmSync, lstatSync, mkdirSync, readFileSync, writeFileSync, renameSync } from 'node:fs'
+import { rmSync, lstatSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs'
 
 
 export const read = f => readFileSync(f, 'utf8')
@@ -16,11 +16,11 @@ export function write(fname, data) {
 	writeFileSync(fname, data, 'utf8')
 }
 
-export function removeDir(dir) { 
-	rmSync(dir, { 
-		recursive: true, 
+export function removeDir(dir) {
+	rmSync(dir, {
+		recursive: true,
 		force: true // allows for removing non-existing directories
-	}) 
+	})
 }
 
 export const sizeOf = f => lstatSync(f).size

package/src/utils/fs-utils.test.js

@@ -4,18 +4,18 @@ import { replaceExt } from './fs-utils.js'
 
 
 describe('replaceExt', () => {
-	test('replaces a simple extension', () => 
+	test('replaces a simple extension', () =>
 		equal(replaceExt('file.txt', 'md'), 'file.md'))
 
-	test('replaces a multi-part extension', () => 
+	test('replaces a multi-part extension', () =>
 		equal(replaceExt('archive.tar.gz', 'zip'), 'archive.tar.zip'))
 
-	test('adds extension when none exists', () => 
+	test('adds extension when none exists', () =>
 		equal(replaceExt('README', 'md'), 'README.md'))
 
 	test('handles empty filename', () =>
 		equal(replaceExt('', 'ext'), '.ext'))
-	
+
 	test('handles dot-files', () =>
 		equal(replaceExt('.env', 'txt'), '.env.txt'))
 })