packaton 0.0.1

package/src/config.js

@@ -0,0 +1,72 @@
+import { resolve } from 'node:path'
+
+import { isDirectory } from './fs-utils.js'
+import { openInBrowser } from './openInBrowser.js'
+
+import { minifyJS } from './minifyJS.js'
+import { minifyCSS } from './minifyCSS.js'
+import { minifyHTML } from './minifyHTML.js'
+
+
+/** @type {{
+ * 	[K in keyof Config]-?: [
+ * 		defaultVal: Config[K],
+ * 		validator: (val: unknown) => boolean
+ * 	]
+ * }} */
+const schema = {
+	mode: ['development', val => ['development', 'production'].includes(val)],
+	srcPath: [resolve('src'), isDirectory],
+	ignore: [/^_/, optional(RegExp)],
+
+	// Development
+	host: ['127.0.0.1', is(String)],
+	port: [0, port => Number.isInteger(port) && port >= 0 && port < 2 ** 16], // 0 means auto-assigned
+	onReady: [await openInBrowser, is(Function)],
+	hotReload: [true, is(Boolean)],
+
+	// Production
+	outputPath: ['dist', optional(String)], // TODO resolve
+	minifyJS: [minifyJS, optional(Function)],
+	minifyCSS: [minifyCSS, optional(Function)],
+	minifyHTML: [minifyHTML, optional(Function)],
+	sitemapDomain: ['', optional(String)],
+	cspMapEnabled: [true, optional(Boolean)],
+}
+// TODO watch New Routes?
+
+
+const defaults = {}
+const validators = {}
+for (const [k, [defaultVal, validator]] of Object.entries(schema)) {
+	defaults[k] = defaultVal
+	validators[k] = validator
+}
+
+/** @type Config */
+const config = Object.seal(defaults)
+
+
+/** @param {Partial<Config>} opts */
+export function setup(opts) {
+	Object.assign(config, opts)
+	validate(config, validators)
+
+	if (config.mode === 'production')
+		config.hotReload = false
+
+	return config
+}
+
+
+function validate(obj, shape) {
+	for (const [field, value] of Object.entries(obj))
+		if (!shape[field](value))
+			throw new TypeError(`${field}=${JSON.stringify(value)} is invalid`)
+}
+function is(ctor) {
+	return val => val.constructor === ctor
+}
+function optional(tester) {
+	return val => !val || tester(val)
+}

package/src/fs-utils.js

@@ -0,0 +1,49 @@
+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'
+
+
+export const read = f => readFileSync(f, 'utf8')
+
+export const lstat = f => lstatSync(f, { throwIfNoEntry: false })
+export const isFile = path => lstat(path)?.isFile()
+export const isDirectory = path => lstat(path)?.isDirectory()
+
+
+export function write(fname, data) {
+	mkdirSync(dirname(fname), { recursive: true })
+	writeFileSync(fname, data, 'utf8')
+}
+
+export function removeDir(dir) { 
+	rmSync(dir, { 
+		recursive: true, 
+		force: true // allows for removing non-existing directories
+	}) 
+}
+
+export const sizeOf = f => lstatSync(f).size
+export const sha1 = f => createHash('sha1').update(readFileSync(f)).digest('base64url')
+
+export async function listFiles(dir) {
+	return (await readdir(dir, {
+		withFileTypes: true,
+		recursive: false
+	}))
+		.filter(e => e.isFile())
+		.map(e => join(e.parentPath, e.name))
+}
+
+
+export const saveAsJSON = (name, data) => {
+	writeFileSync(name, JSON.stringify(data, null, '\t'), 'utf8')
+}
+
+export const replaceExt = (f, ext) => {
+	const parts = f.split('.')
+	if (parts.length > 1 && parts[0])
+		parts.pop()
+	parts.push(ext)
+	return parts.join('.')
+}

package/src/fs-utils.test.js

@@ -0,0 +1,21 @@
+import test, { describe } from 'node:test'
+import { equal } from 'node:assert/strict'
+import { replaceExt } from './fs-utils.js'
+
+
+describe('replaceExt', () => {
+	test('replaces a simple extension', () => 
+		equal(replaceExt('file.txt', 'md'), 'file.md'))
+
+	test('replaces a multi-part extension', () => 
+		equal(replaceExt('archive.tar.gz', 'zip'), 'archive.tar.zip'))
+
+	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'))
+})

package/src/http-response.js

@@ -0,0 +1,46 @@
+import fs from 'node:fs'
+import { mimeFor } from './mimes.js'
+
+
+export function sendError(response, error) {
+	response.statusCode = error?.code === 'ENOENT'
+		? 404
+		: 500
+	console.error(error.message)
+	response.end()
+}
+
+export function sendJSON(response, payload) {
+	response.setHeader('Content-Type', 'application/json')
+	response.end(JSON.stringify(payload))
+}
+
+export function serveStaticAsset(response, file) {
+	response.setHeader('Content-Type', mimeFor(file))
+	const reader = fs.createReadStream(file)
+	reader.on('open', function () { this.pipe(response) })
+	reader.on('error', function (error) { sendError(response, error) })
+}
+
+
+export async function servePartialContent(response, headers, file) {
+	const { size } = await fs.promises.lstat(file)
+	let [start, end] = headers.range.replace(/bytes=/, '').split('-').map(n => parseInt(n, 10))
+	if (isNaN(end)) end = size - 1
+	if (isNaN(start)) start = size - end
+
+	if (start < 0 || start > end || start >= size || end >= size) {
+		response.statusCode = 416 // Range Not Satisfiable
+		response.setHeader('Content-Range', `bytes */${size}`)
+		response.end()
+	}
+	else {
+		response.statusCode = 206 // Partial Content
+		response.setHeader('Accept-Ranges', 'bytes')
+		response.setHeader('Content-Range', `bytes ${start}-${end}/${size}`)
+		response.setHeader('Content-Type', mimeFor(file))
+		const reader = fs.createReadStream(file, { start, end })
+		reader.on('open', function () { this.pipe(response) })
+		reader.on('error', function (error) { sendError(response, error) })
+	}
+}

package/src/media-remaper.js

@@ -0,0 +1,51 @@
+import { join, parse } from 'node:path'
+import { renameSync } from 'node:fs'
+import { sha1, listFiles } from './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)
+		renameSync(file, newFile)
+	}
+
+	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
+//   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) {
+	const reFindMedia = new RegExp('(="media/.*?)"', 'g')
+	const reFindMediaKey = new RegExp('="media/')
+
+	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}`)
+	}
+	return html
+}
+
+

package/src/media-remaper.test.js

@@ -0,0 +1,29 @@
+import { describe, test } from 'node:test'
+import { equal, throws } from 'node:assert/strict'
+import { remapMediaInHTML } from './media-remaper.js'
+
+
+describe('Media Remapper', () => {
+	const mHashes = new Map([
+		['alpha.png', '0xFA.png'],
+		['beta.png', '0xFB.png'],
+		['chi.png', '0xFC.png']
+	])
+
+	test('Throws when the file does not exist', () =>
+		throws(() => remapMediaInHTML(mHashes, `<video src="media/missing.mp4">`)))
+
+	test('Acceptance', () =>
+		equal(remapMediaInHTML(mHashes, `
+<img src="media/alpha.png">
+<img src="media/alpha.png">
+<img src="media/beta.png">
+<video poster="media/chi.png">`),
+			`
+<img src="media/0xFA.png">
+<img src="media/0xFA.png">
+<img src="media/0xFB.png">
+<video poster="media/0xFC.png">`))
+
+
+})

package/src/mimes.js

@@ -0,0 +1,99 @@
+// Generated with:
+// https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
+// m = {}
+// for (const row of tbody.children)
+//  m[row.children[0].querySelector('code').innerText] = row.children[2].querySelector('code').innerText
+
+const mimes = {
+	css: 'text/css; charset=utf8',
+	html: 'text/html; charset=utf8',
+	js: 'application/javascript; charset=utf8',
+	json: 'application/json; charset=utf8',
+	svg: 'image/svg+xml; charset=utf8',
+	txt: 'text/plain; charset=utf8', // e.g., robots.txt when running lighthouse
+
+	'3g2': 'video/3gpp2',
+	'3gp': 'video/3gpp',
+	'7z': 'application/x-7z-compressed',
+	aac: 'audio/aac',
+	abw: 'application/x-abiword',
+	apng: 'image/apng',
+	arc: 'application/x-freearc',
+	avi: 'video/x-msvideo',
+	avif: 'image/avif',
+	azw: 'application/vnd.amazon.ebook',
+	bin: 'application/octet-stream',
+	bmp: 'image/bmp',
+	bz2: 'application/x-bzip2',
+	bz: 'application/x-bzip',
+	cda: 'application/x-cdf',
+	cjs: 'text/javascript',
+	csh: 'application/x-csh',
+	csv: 'text/csv',
+	doc: 'application/msword',
+	docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+	eot: 'application/vnd.ms-fontobject',
+	epub: 'application/epub+zip',
+	gif: 'image/gif',
+	gz: 'application/gzip',
+	htm: 'text/html',
+	ico: 'image/vnd.microsoft.icon',
+	ics: 'text/calendar',
+	jar: 'application/java-archive',
+	jpeg: 'image/jpeg',
+	jpg: 'image/jpeg',
+	jsonld: 'application/ld+json',
+	mid: 'audio/midi',
+	midi: 'audio/midi',
+	mjs: 'text/javascript',
+	mp3: 'audio/mpeg',
+	mp4: 'video/mp4',
+	mpeg: 'video/mpeg',
+	mpkg: 'application/vnd.apple.installer+xml',
+	odp: 'application/vnd.oasis.opendocument.presentation',
+	ods: 'application/vnd.oasis.opendocument.spreadsheet',
+	odt: 'application/vnd.oasis.opendocument.text',
+	oga: 'audio/ogg',
+	ogv: 'video/ogg',
+	ogx: 'application/ogg',
+	opus: 'audio/ogg',
+	otf: 'font/otf',
+	pdf: 'application/pdf',
+	php: 'application/x-httpd-php',
+	png: 'image/png',
+	ppt: 'application/vnd.ms-powerpoint',
+	pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+	rar: 'application/vnd.rar',
+	rtf: 'application/rtf',
+	sh: 'application/x-sh',
+	tar: 'application/x-tar',
+	tif: 'image/tiff',
+	ts: 'video/mp2t',
+	ttf: 'font/ttf',
+	vsd: 'application/vnd.visio',
+	wav: 'audio/wav',
+	weba: 'audio/webm',
+	webm: 'video/webm',
+	webp: 'image/webp',
+	woff2: 'font/woff2',
+	woff: 'font/woff',
+	xhtml: 'application/xhtml+xml',
+	xls: 'application/vnd.ms-excel',
+	xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+	xml: 'application/xml',
+	xul: 'application/vnd.mozilla.xul+xml',
+	yaml: 'application/yaml',
+	yml: 'application/yaml',
+	zip: 'application/zip'
+}
+
+export function mimeFor(filename) {
+	return mimes[extname(filename)] || ''
+}
+
+function extname(filename) {
+	const ext = filename
+		.split('.').at(-1)
+		.split('?').at(0)
+	return ext
+}

package/src/minifyCSS.js

@@ -0,0 +1,50 @@
+/**
+ * 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 
+ * but that messed up browser-specific prefixes that were used as workarounds.
+ */
+
+// TODO
+// - Handle nested comments like /*/* foo */*/
+// - Preserve anything within data-uri, and content strings.
+//   We could do like in minifyHTML. i.e., stacking all the things to
+//   be preserved and replace them with a magic string then pop the stack to re-replace.
+
+const BlockComments = /\/\*(\*(?!\/)|[^*])*\*\//g
+const LeadingAndTrailingWhitespace = /^\s*|\s*$/gm
+const PropValueWhitespaceSeparator = /(?<=:)\s*/gm
+const Newlines = /\n/gm
+const WhitespaceBeforeBraces = /\s*(?=[{}])/gm
+const WhitespaceAfterBraces = /(?<=[{}])\s*/gm
+const LastSemicolonInSet = /;(?=})/gm
+const SpacesAfterComma = /(?<=,)\s+/g
+
+
+export function minifyCSS(css) {
+	return css
+		.replace(BlockComments, '')
+		.replace(LeadingAndTrailingWhitespace, '')
+		.replace(PropValueWhitespaceSeparator, '')
+		.replace(Newlines, '')
+		.replace(WhitespaceBeforeBraces, '')
+		.replace(WhitespaceAfterBraces, '')
+		.replace(LastSemicolonInSet, '')
+		.replace(SpacesAfterComma, '')
+}
+
+export const Testable = {
+	BlockComments,
+	LeadingAndTrailingWhitespace,
+	PropValueWhitespaceSeparator,
+	Newlines,
+	WhitespaceBeforeBraces,
+	WhitespaceAfterBraces,
+	LastSemicolonInSet,
+	SpacesAfterComma,
+}
+

package/src/minifyCSS.test.js

@@ -0,0 +1,124 @@
+import { equal } from 'node:assert/strict'
+import { describe, test } from 'node:test'
+import { minifyCSS, Testable } from './minifyCSS.js'
+
+
+describe('minifyCSS', () => {
+	test('Acceptance', () => {
+		equal(minifyCSS(`
+.a { 
+	color: green; 
+	&:active {
+		color: red; 
+	}
+}
+.b { color: orange; }
+.c { color: #f00; }
+.d { color: rgb(255, 255,  0); }
+.e { color: #111222; }
+`),
+			`.a{color:green;&:active{color:red}}.b{color:orange}.c{color:#f00}.d{color:rgb(255,255,0)}.e{color:#111222}`)
+	})
+
+	test('Comments', () => {
+		testRegexMatchesGetDeleted(Testable.BlockComments, `
+/* Foo */
+/* Multiline line 1 
+Line 2 */
+.a { color: red; } /* Bar */
+/*/*/
+`,
+			`
+
+
+.a { color: red; } 
+
+`)
+	})
+
+
+	test('Trimming', () => {
+		testRegexMatchesGetDeleted(Testable.LeadingAndTrailingWhitespace, `
+ .b .c {
+	color: orange;
+  width: 20px;
+}
+.d {
+		height: 30px;
+		}
+`,
+			`.b .c {
+color: orange;
+width: 20px;
+}
+.d {
+height: 30px;
+}`)
+	})
+
+
+	test('Inner Prop Value space', () => {
+		testRegexMatchesGetDeleted(Testable.PropValueWhitespaceSeparator, `
+.e {
+	color: #f00;
+	height:   100px;
+	width:	100px;
+	content:  'a';
+}
+`,
+			`
+.e {
+	color:#f00;
+	height:100px;
+	width:100px;
+	content:'a';
+}
+`)
+	})
+
+
+	test('Newlines', () => {
+		testRegexMatchesGetDeleted(Testable.Newlines, `
+.f {
+	color: blue;
+	height: 300px;
+	width: 300px;
+}
+`,
+			`.f {	color: blue;	height: 300px;	width: 300px;}`)
+	})
+
+
+	test('White spaces before braces', () => {
+		testRegexMatchesGetDeleted(Testable.WhitespaceBeforeBraces, `
+.g { color: pink; width: 400px; } `,
+			`
+.g{ color: pink; width: 400px;} `)
+	})
+
+
+	test('White spaces after braces', () => {
+		testRegexMatchesGetDeleted(Testable.WhitespaceAfterBraces, `
+.G { color: green; width: 410px; } `,
+			`
+.G {color: green; width: 410px; }`)
+	})
+
+	test('Final semicolon', () => {
+		testRegexMatchesGetDeleted(Testable.LastSemicolonInSet,
+			'.h {color: cyan; width: 500px;}',
+			'.h {color: cyan; width: 500px}'
+		)
+	})
+
+	test('Comma + Space', () => {
+		testRegexMatchesGetDeleted(Testable.SpacesAfterComma,
+			'.H { color: rgb(255, 255, 0); }',
+			'.H { color: rgb(255,255,0); }'
+		)
+	})
+
+	function testRegexMatchesGetDeleted(regex, input, expected) {
+		equal(input.replace(regex, ''), expected)
+	}
+})

package/src/minifyHTML.js

@@ -0,0 +1,50 @@
+/**
+ * You can override this minifier in `config.minifyHTML`
+ *
+ * This program is an oversimplified HTML minifier. It doesn’t
+ * try to minify everything, but only what’s safe and easy to minify.
+ * It's based on https://gist.github.com/espretto/1b3cb7e8b01fa7daaaac
+ *
+ * Why?
+ * 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, in order, those magic strings with the original tag and its content.
+ */
+
+
+const Comments = /<!--(?!\s*?\[\s*?if)[\s\S]*?-->/gi
+
+const PreserveTags = /<(pre|style|script(?![^>]*?src))[^>]*>[\s\S]*?<\/\1>/gi
+const InsertTags = /<preserved>/g
+
+const ReduceAttributeDelimiters = /\s{2,}(?=[^<]*>)/g
+const LeadingWhitespace = /^\s*/gm
+
+
+export function minifyHTML(html) {
+	const preservedTags = []
+
+	function onPreserveTag(tag) {
+		preservedTags.push(tag)
+		return '<preserved>' // temp placeholder
+	}
+
+	function onInsertTag() {
+		return preservedTags.shift() // pops left, rewrites the placeholder back to the original tag
+	}
+
+	return html
+		.replace(Comments, '')
+		.replace(PreserveTags, onPreserveTag)
+		.replace(ReduceAttributeDelimiters, ' ')
+		.replace(LeadingWhitespace, '')
+		.replace(InsertTags, onInsertTag)
+		.trim()
+}

package/src/minifyHTML.test.js

@@ -0,0 +1,72 @@
+import { describe, test } from 'node:test'
+import { equal } from 'node:assert/strict'
+import { minifyHTML } from './minifyHTML.js'
+
+
+describe('minifyHTML', () => {
+	test('Acceptance', () => {
+		equal(minifyHTML(`
+<!DOCTYPE html>
+<html   
+  lang="en">
+  <!-- Comment -->
+<head>
+  <!-- Mulitline 
+            Comment -->
+	<!--		&lt;!&ndash;	deleteme '  '	.&ndash;&gt;-->
+	<title>Foo Bar</title>
+</head>
+<body>
+	<div>
+		<h1>Title</h1>
+  </div>
+  <p>Single Quotes? Keep'em a'll</p>
+  <pre data-custom-attr="keeps   everything here <h1>   <h1>">
+   aaa   bbbb
+   ccc   dddd
+  
+  </pre>
+  <dd>
+  <kbd>A</kbd>
+  <kbd class="foo">B</kbd>
+  <kbd>Ctrl</kbd>Click
+  </dd>
+  <a>LinkA</a>
+  <a>LinkB</a>
+  <p>
+		Removes leading tabs.
+  </p>
+</body>
+</html>
+`),
+
+			`<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Foo Bar</title>
+</head>
+<body>
+<div>
+<h1>Title</h1>
+</div>
+<p>Single Quotes? Keep'em a'll</p>
+<pre data-custom-attr="keeps   everything here <h1>   <h1>">
+   aaa   bbbb
+   ccc   dddd
+  
+  </pre>
+<dd>
+<kbd>A</kbd>
+<kbd class="foo">B</kbd>
+<kbd>Ctrl</kbd>Click
+</dd>
+<a>LinkA</a>
+<a>LinkB</a>
+<p>
+Removes leading tabs.
+</p>
+</body>
+</html>`
+		)
+	})
+})

package/src/minifyJS.js

@@ -0,0 +1,6 @@
+import { minify } from 'terser'
+
+
+export async function minifyJS(code, options) {
+	return (await minify(code, options)).code
+}