packaton 0.0.3 → 0.0.7

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/media-remaper.js) appends a SHA-1 hash
+For long-term caching, [media-remaper.js](src/plugins-prod/media-remaper.js) appends a 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 .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/TODO.md

@@ -6,3 +6,4 @@
 - remap media in css and js
 - watch newly added routes
 - todo test on linux (open in browser too)
+- refactor to plugins/prod and plugins/dev

package/index.d.ts

@@ -1,6 +1,7 @@
 export interface Config {
 	mode?: 'development' | 'production';
 	srcPath?: string
+	staticDir?: string
 	ignore?: RegExp
 	
 
@@ -11,7 +12,7 @@ export interface Config {
   hotReload?: boolean // For UI dev purposes only
 	
 	// Production
-	outputPath?: string
+	outputDir?: string
 	outputExtension?: string
 	minifyJS?: (js: string) => Promise<string>
 	minifyCSS?: (css: string) => Promise<string>

package/index.js

@@ -1,6 +1,6 @@
 export { Packaton } from './src/app.js'
-export { HtmlCompiler } from './src/HtmlCompiler.js'
-export { minifyHTML } from './src/minifyHTML.js'
-export { minifyCSS } from './src/minifyCSS.js'
-export { minifyJS } from './src/minifyJS.js'
-export { reportSizes } from './src/reportSizes.js'
+export { HtmlCompiler } from './src/plugins-prod/HtmlCompiler.js'
+export { minifyHTML } from './src/plugins-prod/minifyHTML.js'
+export { minifyCSS } from './src/plugins-prod/minifyCSS.js'
+export { minifyJS } from './src/plugins-prod/minifyJS.js'
+export { reportSizesPlugin } from './src/plugins-prod/reportSizesPlugin.js'

package/package.json

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

package/src/app-dev.js

@@ -1,7 +1,7 @@
 import http from 'node:http'
 
-import { router } from './app-router.js'
-import { watchDev } from './WatcherDevClient.js'
+import { router } from './router.js'
+import { watchDev } from './plugins-dev/WatcherDevClient.js'
 
 
 /**

package/src/app-prod.js

@@ -1,13 +1,16 @@
-import http from 'node:http'
 import { cpSync } from 'node:fs'
+import { createServer } from 'node:http'
 import { basename, join, dirname } from 'node:path'
 
 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 { renameMediaWithHashes } from './media-remaper.js'
+import { router } from './router.js'
+import { HtmlCompiler } from './plugins-prod/HtmlCompiler.js'
+import { sitemapPlugin } from './plugins-prod/sitemapPlugin.js'
+import { reportSizesPlugin } from './plugins-prod/reportSizesPlugin.js'
+import { write, removeDir, } from './utils/fs-utils.js'
+import { cspNginxMapPlugin } from './plugins-prod/cspNginxMapPlugin.js'
+import { renameMediaWithHashes } from './plugins-prod/media-remaper.js'
+import { netiflyAndCloudflareHeadersPlugin } from './plugins-prod/netiflyAndCloudflareHeadersPlugin.js'
 
 
 /**
@@ -16,24 +19,20 @@ 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 pDistSitemap = join(pDist, 'sitemap.txt')
-		const pDistCspNginxMap = join(pDist, '.csp-map.nginx')
-		const pSizesReport = 'packed-sizes.json'
+		const pDist = config.outputDir
+		const pDistStatic = join(config.outputDir, config.staticDir)
+		const pDistMedia = join(pDist, MEDIA_REL_URL)
 
-		const server = http.createServer(router(config))
-		server.listen(0, '127.0.0.1', async error => {
+		const server = createServer(router(config))
+		server.on('error', reject)
+		server.listen(0, '127.0.0.1', async () => {
 			docs.init(config.srcPath, config.ignore)
 			try {
-				if (error) {
-					reject(error)
-					return
-				}
-
 				removeDir(pDist)
-				cpSync(join(pSource, 'media'), pDistMedia, {
+				cpSync(join(pSource, config.staticDir), pDistStatic, {
 					recursive: true,
 					dereference: true,
 					filter(src) {
@@ -48,7 +47,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 +62,10 @@ export async function buildStaticPages(config) {
 					cspByRoute.push([route, doc.csp()])
 				}
 
-				if (config.sitemapDomain)
-					write(pDistSitemap, docs.routes
-						.filter(r => r !== '/index')
-						.map(r => `https://${config.sitemapDomain + r}`)
-						.join('\n'))
-
-				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'))
-				}
-
-				reportSizes(pSizesReport, pDist, docs.routes.map(f => f + config.outputExtension))
+				sitemapPlugin(config, docs.routes)
+				reportSizesPlugin(config, docs.routes)
+				cspNginxMapPlugin(config, cspByRoute)
+				netiflyAndCloudflareHeadersPlugin(config, cspByRoute, MEDIA_REL_URL)
 			}
 			catch (error) {
 				reject(error)

package/src/app.js

@@ -2,7 +2,7 @@ import { readdirSync } from 'node:fs'
 import { basename, join, dirname } from 'node:path'
 
 import { setup } from './config.js'
-import { isFile } from './fs-utils.js'
+import { isFile } from './utils/fs-utils.js'
 import { devStaticPages } from './app-dev.js'
 import { buildStaticPages } from './app-prod.js'
 

package/src/config.js

@@ -1,11 +1,11 @@
 import { resolve } from 'node:path'
 
-import { isDirectory } from './fs-utils.js'
-import { openInBrowser } from './openInBrowser.js'
+import { isDirectory } from './utils/fs-utils.js'
+import { openInBrowser } from './plugins-dev/openInBrowser.js'
 
-import { minifyJS } from './minifyJS.js'
-import { minifyCSS } from './minifyCSS.js'
-import { minifyHTML } from './minifyHTML.js'
+import { minifyJS } from './plugins-prod/minifyJS.js'
+import { minifyCSS } from './plugins-prod/minifyCSS.js'
+import { minifyHTML } from './plugins-prod/minifyHTML.js'
 
 
 /** @type {{
@@ -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
@@ -27,7 +28,7 @@ const schema = {
 
 	// Production
 	outputExtension: ['.html', optional(String)],
-	outputPath: ['dist', optional(String)], // TODO resolve
+	outputDir: ['dist', optional(String)], // TODO resolve
 	minifyJS: [minifyJS, optional(Function)],
 	minifyCSS: [minifyCSS, optional(Function)],
 	minifyHTML: [minifyHTML, optional(Function)],

package/src/{WatcherDevClient.js → plugins-dev/WatcherDevClient.js}

@@ -1,7 +1,7 @@
 import { join } from 'node:path'
 import { watch } from 'node:fs'
 import { EventEmitter } from 'node:events'
-import { docs } from './app.js'
+import { docs } from '../app.js'
 
 
 export const devClientWatcher = new class extends EventEmitter {

package/src/{HtmlCompiler.js → plugins-prod/HtmlCompiler.js}

@@ -1,7 +1,7 @@
 import { join } from 'node:path'
 import { createHash } from 'node:crypto'
 
-import { read } from './fs-utils.js'
+import { read } from '../utils/fs-utils.js'
 import { remapMediaInHTML } from './media-remaper.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/plugins-prod/cspNginxMapPlugin.js

@@ -0,0 +1,9 @@
+import { write } from '../utils/fs-utils.js'
+import { join } from 'node:path'
+
+
+export function cspNginxMapPlugin(config, cspByRoute) {
+	const out = join(config.outputDir, '.csp-map.nginx')
+	write(out, cspByRoute.map(([route, csp]) =>
+		`${route} "${csp}";`).join('\n'))
+}

package/src/{media-remaper.js → plugins-prod/media-remaper.js}

@@ -1,6 +1,6 @@
 import { join, parse } from 'node:path'
 import { renameSync } from 'node:fs'
-import { sha1, listFiles } from './fs-utils.js'
+import { sha1, listFiles } from '../utils/fs-utils.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, '\\$&')
+}
+

package/src/plugins-prod/netiflyAndCloudflareHeadersPlugin.js

@@ -0,0 +1,19 @@
+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')
+
+	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')
+
+	write(out, cspHeaders.join('\n'))
+}
+

package/src/{reportSizes.js → plugins-prod/reportSizesPlugin.js}

@@ -1,8 +1,11 @@
 import { join } from 'node:path'
-import { read, sizeOf, sha1, saveAsJSON, isFile } from './fs-utils.js'
+import { read, sizeOf, sha1, saveAsJSON, isFile } from '../utils/fs-utils.js'
 
 
-export function reportSizes(reportFilename, baseDir, files) {
+export function reportSizesPlugin(config, routes) {
+	const files = routes.map(f => f + config.outputExtension)
+	const baseDir = config.outputDir
+	const reportFilename = 'packed-sizes.json'
 	const oldReport = isFile(reportFilename)
 		? JSON.parse(read(reportFilename))
 		: {}

package/src/plugins-prod/sitemapPlugin.js

@@ -0,0 +1,20 @@
+import { join } from 'node:path'
+import { write, isFile } from '../utils/fs-utils.js'
+
+
+export function sitemapPlugin(config, routes) {
+	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`)
+}

package/src/{app-router.js → router.js}

@@ -2,43 +2,43 @@ import { join } from 'node:path'
 import { readFile } from 'node:fs/promises'
 
 import { docs } from './app.js'
-import { mimeFor } from './mimes.js'
-import { devClientWatcher } from './WatcherDevClient.js'
-import { sendError, sendJSON, servePartialContent, serveStaticAsset } from './http-response.js'
+import { mimeFor } from './utils/mimes.js'
+import { devClientWatcher } from './plugins-dev/WatcherDevClient.js'
+import { sendError, sendJSON, servePartialContent, serveStaticAsset } from './utils/http-response.js'
 
 
+const WATCHER_DEV = '/plugins-dev/watcherDev.js'
+
 const API = {
 	watchDev: '/packaton/watch-dev'
 }
 
-const WATCHER_DEV = '/watcherDev.js'
 
 
 /** @param {Config} config */
 export function router({ srcPath, ignore, mode }) {
 	docs.init(srcPath, ignore)
+	const isDev = mode === 'development'
 	return async function (req, response) {
 		let url = new URL(req.url, 'http://_').pathname
 		try {
-			if (url === API.watchDev) {
+			if (url === API.watchDev)
 				longPollDevHotReload(req, response)
-				return
-			}
-			if (url === WATCHER_DEV) {
+				
+			else if (url === WATCHER_DEV)
 				serveStaticAsset(response, join(import.meta.dirname, url))
-				return
-			}
-
-			if (url === '/')
-				url = '/index'
-
-			const file = join(srcPath, url)
-			if (docs.hasRoute(url))
-				await serveDocument(response, docs.fileFor(url), mode === 'development')
+				
+			else if (docs.hasRoute(url))
+				await serveDocument(response, docs.fileFor(url), isDev)
+				
+			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, file)
+				await servePartialContent(response, req.headers, join(srcPath, url))
+				
 			else
-				serveStaticAsset(response, file)
+				serveStaticAsset(response, join(srcPath, url))
 		}
 		catch (error) {
 			sendError(response, error)
@@ -51,7 +51,7 @@ async function serveDocument(response, file, isDev) {
 		? await readFile(file, 'utf8')
 		: (await import(file + '?' + Date.now())).default()
 	if (isDev)
-		html += `<script type="module" src="${WATCHER_DEV}"></script>` 
+		html += `<script type="module" src="${WATCHER_DEV}"></script>`
 	response.setHeader('Content-Type', mimeFor('html'))
 	response.end(html)
 }