packaton 0.0.9 → 0.0.10

package/package.json

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

package/src/app-prod.js

@@ -23,8 +23,7 @@ export async function buildStaticPages(config) {
 
 		const pSource = config.srcPath
 		const pDist = config.outputDir
-		const pDistAssets = join(config.outputDir, config.assetsDir)
-		const pDistMedia = join(pDist, MEDIA_REL_URL)
+		const pDistAssets = join(pDist, config.assetsDir)
 
 		const server = createServer(router(config))
 		server.on('error', reject)
@@ -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/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/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))