packaton 0.0.8 → 0.0.10

package/README.md

@@ -12,7 +12,7 @@ computes their corresponding CSP nonce and injects it as well.
 
 
 ## Images and Videos (immutable naming)
-For long-term caching, [media-remaper.js](src/plugins-prod/media-remaper.js) appends a SHA-1 hash
+For long-term caching, [media-remaper.js](src/plugins-prod/media-remaper.js) appends an SHA-1 hash
 to the filenames and takes care of rewriting their `src` in HTML (**only in HTML**).
 
 If you want to use media files in CSS, create a similar function to
@@ -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 /static are not automatically copied over,
+- Non-Documents and Files outside config.assetsDir are not automatically copied over,
   you need to specify them. 
-- static/media only files at the top level get hashed-named. But files within subdirs are not (by design).
+- assets/media only files at the top level get hashed-named. But files within subdirs are not (by design).

package/index.d.ts

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

package/package.json

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

package/src/app-prod.js

@@ -19,12 +19,11 @@ import { netiflyAndCloudflareHeadersPlugin } from './plugins-prod/netiflyAndClou
  */
 export async function buildStaticPages(config) {
 	return new Promise((resolve, reject) => {
-		const MEDIA_REL_URL = join(config.staticDir, 'media')
+		const MEDIA_REL_URL = join(config.assetsDir, 'media')
 
 		const pSource = config.srcPath
 		const pDist = config.outputDir
-		const pDistStatic = join(config.outputDir, config.staticDir)
-		const pDistMedia = join(pDist, MEDIA_REL_URL)
+		const pDistAssets = join(pDist, config.assetsDir)
 
 		const server = createServer(router(config))
 		server.on('error', reject)
@@ -32,7 +31,7 @@ export async function buildStaticPages(config) {
 			docs.init(config.srcPath, config.ignore)
 			try {
 				removeDir(pDist)
-				cpSync(join(pSource, config.staticDir), pDistStatic, {
+				cpSync(join(pSource, config.assetsDir), pDistAssets, {
 					recursive: true,
 					dereference: true,
 					filter(src) {
@@ -42,19 +41,21 @@ export async function buildStaticPages(config) {
 					}
 				})
 
-				const mediaHashes = await renameMediaWithHashes(pDistMedia) // only on top dir
 				const pages = await crawlRoutes(server.address(), docs.routes)
-
+				const mediaHashes = await renameMediaWithHashes(pDist, MEDIA_REL_URL)
+				
 				const cspByRoute = []
 				for (const [route, rawHtml] of pages) {
 					const doc = new HtmlCompiler(rawHtml, join(pSource, dirname(route)), {
 						minifyJS: config.minifyJS,
 						minifyCSS: config.minifyCSS,
 						minifyHTML: config.minifyHTML,
-						mediaRelUrl: MEDIA_REL_URL
+						mediaRelUrl: MEDIA_REL_URL,
+						mediaHashes
+						
 					})
 					await doc.minifyHTML()
-					doc.remapMedia(mediaHashes)
+					doc.remapMedia()
 					// TODO remap media in css and js
 					await doc.inlineMinifiedCSS()
 					await doc.inlineMinifiedJS()

package/src/config.js

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

package/src/plugins-prod/HtmlCompiler.js

@@ -11,6 +11,7 @@ export class HtmlCompiler {
 	css = ''
 	scriptsJs = ''
 	mediaRelUrl = ''
+	mediaHashes = new Map()
 	scriptsNonJs = ''
 	externalScripts = []
 	externalCSS = []
@@ -18,13 +19,14 @@ export class HtmlCompiler {
 	#minifyCSS = a => a
 	#minifyHTML = a => a
 
-	constructor(html, pSource = '', { minifyJS, minifyCSS, minifyHTML, mediaRelUrl }) {
+	constructor(html, pSource = '', { minifyJS, minifyCSS, minifyHTML, mediaRelUrl, mediaHashes }) {
 		this.html = html
 		this.pSource = pSource
 		this.#minifyJS = minifyJS
 		this.#minifyCSS = minifyCSS
 		this.#minifyHTML = minifyHTML
 		this.mediaRelUrl = mediaRelUrl
+		this.mediaHashes = mediaHashes
 	}
 
 	// Removes comments and format multi-line tags (needed for `removeLineContaining`)
@@ -32,8 +34,8 @@ export class HtmlCompiler {
 		this.html = await this.#minifyHTML(this.html)
 	}
 
-	remapMedia(mediaHashes) {
-		this.html = remapMediaInHTML(mediaHashes, this.html, this.mediaRelUrl)
+	remapMedia() {
+		this.html = remapMediaInHTML(this.mediaHashes, this.html, this.mediaRelUrl)
 	}
 
 	async inlineMinifiedCSS() {

package/src/plugins-prod/media-remaper.js

@@ -1,5 +1,5 @@
-import { join, parse } from 'node:path'
 import { renameSync } from 'node:fs'
+import { join, parse, relative } from 'node:path'
 import { sha1, listFiles } from '../utils/fs-utils.js'
 
 
@@ -7,49 +7,33 @@ import { sha1, listFiles } from '../utils/fs-utils.js'
  * Subdirectories are ignored
  *   foo.avif      -> foo-<sha1>.avif
  */
-export async function renameMediaWithHashes(dir) {
-	const mediaHashes = new Map()
-
-	for (const file of await listFiles(dir)) {
-		const { name, base, ext } = parse(file)
-		const newFileName = name + '-' + sha1(file) + ext
-		const newFile = join(dir, newFileName)
-		mediaHashes.set(base, newFileName)
+export async function renameMediaWithHashes(distDir, mediaDir) {
+	const mDir = join(distDir, mediaDir)
+	const map = new Map()
+
+	for (const file of await listFiles(mDir)) {
+		const { dir, name, ext } = parse(file)
+		const newFile = join(dir, name + '-' + sha1(file) + ext)
 		renameSync(file, newFile)
+		map.set(relative(distDir, file), relative(distDir, newFile))
 	}
 
-	return mediaHashes
+	return map
 }
 
-// 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
-//   so it works in dirs outside media/
-//  mm currently a limitation is that the dictionary doesn't have the path, just the name, so
-// filenames need to be unique, regardless of being in a subfolder
-/**
- * Edit the media source links in the HTML, so they have the new SHA-1 hashed
- * filenames. Assumes that all the files are in "media/" (not ../media, ./media)
- *
- * 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, 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, ''))
+	const mURL = escapeRegex(mediaRelUrl)
+	const reFindMedia = new RegExp(`="(/?)(${mURL}/[^"]*)"`, 'g')
+	return html.replace(reFindMedia, (_, optLeadingSlash, url) => {
+		const hashedName = mediaHashes.get(url)
 		if (!hashedName)
-			throw `ERROR: Missing ${url}\n`
-		html = html.replace(url, `="${mediaRelUrl}/${hashedName}`)
-	}
-	return html
+			throw new Error(`ERROR: Missing ${url}`)
+		return `="${optLeadingSlash}${hashedName}"`
+	})
 }
 
 
-function escapeForRegex(literal) {
+function escapeRegex(literal) {
 	return literal.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
 }
 

package/src/plugins-prod/netiflyAndCloudflareHeadersPlugin.js

@@ -2,8 +2,13 @@ import { join } from 'node:path'
 import { write } from '../utils/fs-utils.js'
 
 
-export function netiflyAndCloudflareHeadersPlugin(config, cspByRoute, MEDIA_URL) {
-	const out = join(join(config.outputDir, config.staticDir), '_headers')
+/**
+ * @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'
@@ -15,7 +20,7 @@ export function netiflyAndCloudflareHeadersPlugin(config, cspByRoute, MEDIA_URL)
 			`  Cache-Control: public,max-age=60`
 		].join('\n')
 	})
-	cspHeaders.push(`${MEDIA_URL}/*`)
+	cspHeaders.push(`/${relMediaURL}/*`)
 	cspHeaders.push('  Cache-Control: public,max-age=31536000,immutable')
 
 	write(out, cspHeaders.join('\n'))

package/src/router.js

@@ -4,7 +4,7 @@ import { readFile } from 'node:fs/promises'
 import { docs } from './app.js'
 import { mimeFor } from './utils/mimes.js'
 import { devClientWatcher } from './plugins-dev/WatcherDevClient.js'
-import { sendError, sendJSON, servePartialContent, serveStaticAsset } from './utils/http-response.js'
+import { sendError, sendJSON, servePartialContent, serveAsset } from './utils/http-response.js'
 
 
 const WATCHER_DEV = '/plugins-dev/watcherDev.js'
@@ -26,7 +26,7 @@ export function router({ srcPath, ignore, mode }) {
 				longPollDevHotReload(req, response)
 				
 			else if (url === WATCHER_DEV)
-				serveStaticAsset(response, join(import.meta.dirname, url))
+				serveAsset(response, join(import.meta.dirname, url))
 				
 			else if (docs.hasRoute(url))
 				await serveDocument(response, docs.fileFor(url), isDev)
@@ -38,7 +38,7 @@ export function router({ srcPath, ignore, mode }) {
 				await servePartialContent(response, req.headers, join(srcPath, url))
 				
 			else
-				serveStaticAsset(response, join(srcPath, url))
+				serveAsset(response, join(srcPath, url))
 		}
 		catch (error) {
 			sendError(response, error)

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 } from 'node:fs'
+import { rmSync, lstatSync, mkdirSync, readFileSync, writeFileSync, renameSync } from 'node:fs'
 
 
 export const read = f => readFileSync(f, 'utf8')
@@ -29,7 +29,7 @@ export const sha1 = f => createHash('sha1').update(readFileSync(f)).digest('base
 export async function listFiles(dir) {
 	return (await readdir(dir, {
 		withFileTypes: true,
-		recursive: false
+		recursive: true
 	}))
 		.filter(e => e.isFile())
 		.map(e => join(e.parentPath, e.name))

package/src/utils/http-response.js

@@ -15,7 +15,7 @@ export function sendJSON(response, payload) {
 	response.end(JSON.stringify(payload))
 }
 
-export function serveStaticAsset(response, file) {
+export function serveAsset(response, file) {
 	response.setHeader('Content-Type', mimeFor(file))
 	const reader = fs.createReadStream(file)
 	reader.on('open', function () { this.pipe(response) })