packaton 0.0.9 → 0.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "packaton",
-	"version": "0.0.9",
+	"version": "0.0.12",
 	"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-dev/watcherDev.js

@@ -24,9 +24,21 @@ async function longPollDevChanges() {
 }
 
 function hotReloadCSS(file) {
-	const link = document.querySelector(`link[href*="${file}"]`)
+	let link = document.querySelector(`link[href^="${file}"]`)
+
+	// Fallback: construct relative path based on current pathname
+	if (!link) {
+		const parts = window.location.pathname.split('/').filter(Boolean)
+		if (parts.length > 1)
+			parts.pop()
+		const urlDir = parts.join('/') + '/'
+		const r = file.split(urlDir).pop()
+		link = document.querySelector(`link[href^="${r}"]`)
+	}
+
 	if (link) {
-		const [url] = link.href.split('?')
+		const [url] = link.getAttribute('href').split('?')
 		link.href = url + '?' + Date.now()
 	}
 }
+

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/router.js

@@ -3,6 +3,7 @@ import { readFile } from 'node:fs/promises'
 
 import { docs } from './app.js'
 import { mimeFor } from './utils/mimes.js'
+import { isDirectory } from './utils/fs-utils.js'
 import { devClientWatcher } from './plugins-dev/WatcherDevClient.js'
 import { sendError, sendJSON, servePartialContent, serveAsset } from './utils/http-response.js'
 
@@ -14,7 +15,6 @@ const API = {
 }
 
 
-
 /** @param {Config} config */
 export function router({ srcPath, ignore, mode }) {
 	docs.init(srcPath, ignore)
@@ -24,21 +24,21 @@ export function router({ srcPath, ignore, mode }) {
 		try {
 			if (url === API.watchDev)
 				longPollDevHotReload(req, response)
-				
+
 			else if (url === WATCHER_DEV)
 				serveAsset(response, join(import.meta.dirname, url))
-				
+
 			else if (docs.hasRoute(url))
 				await serveDocument(response, docs.fileFor(url), isDev)
-				
-			else if (docs.hasRoute(join(url, 'index'))) 
+
+			else if (docs.hasRoute(join(url, 'index')))
 				await serveDocument(response, docs.fileFor(join(url, 'index')), isDev)
-				
+
 			else if (req.headers.range)
-				await servePartialContent(response, req.headers, join(srcPath, url))
-				
+				await servePartialContent(response, req.headers, resolveUrl(req, srcPath, url))
+
 			else
-				serveAsset(response, join(srcPath, url))
+				serveAsset(response, resolveUrl(req, srcPath, url))
 		}
 		catch (error) {
 			sendError(response, error)
@@ -57,6 +57,20 @@ async function serveDocument(response, file, isDev) {
 }
 
 
+function resolveUrl(req, srcPath, url) {
+	return join(srcPath, dirFor(req.headers.referer, srcPath), url)
+}
+
+function dirFor(referer = '/', srcPath) {
+	if (referer.endsWith('/'))
+		return ''
+	const p = new URL(referer).pathname
+	return isDirectory(join(srcPath, p))
+		? p
+		: ''
+}
+
+
 const LONG_POLL_SERVER_TIMEOUT = 8000
 
 function longPollDevHotReload(req, response) {

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))