packaton 0.0.17 → 0.0.22

package/index.d.ts

@@ -10,11 +10,12 @@ export interface Config {
   port?: number
   onReady?: (address: string) => void
   hotReload?: boolean // For UI dev purposes only
+	watchIgnore?: Array<string|RegExp>
 	
 	// Production
 	outputDir?: string
 	outputExtension?: string
-	minifyJS?: (js: string) => Promise<string>
+	minifyJS?: (js: string, isModule: boolean) => Promise<string>
 	minifyCSS?: (css: string) => Promise<string>
 	minifyHTML?: (html: string) => Promise<string>
 	sitemapDomain?: string

package/package.json

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

package/src/app-dev.js

@@ -1,4 +1,5 @@
-import http from 'node:http'
+import { register } from 'node:module'
+import { createServer } from 'node:http'
 
 import { router } from './router.js'
 import { watchDev } from './plugins-dev/WatcherDevClient.js'
@@ -10,10 +11,12 @@ import { watchDev } from './plugins-dev/WatcherDevClient.js'
  */
 export function devStaticPages(config) {
 	return new Promise((resolve, reject) => {
+		register('./plugins-dev/cache-bust-resolver.js', import.meta.url)
+
 		if (config.hotReload)
-			watchDev(config.srcPath)
+			watchDev(config.srcPath, config.watchIgnore)
 
-		const server = http.createServer(router(config))
+		const server = createServer(router(config))
 		server.on('error', reject)
 		server.listen(config.port, config.host, () => {
 			const addr = `http://${server.address().address}:${server.address().port}`

package/src/config.js

@@ -25,6 +25,7 @@ const schema = {
 	port: [0, port => Number.isInteger(port) && port >= 0 && port < 2 ** 16], // 0 means auto-assigned
 	onReady: [await openInBrowser, is(Function)],
 	hotReload: [true, is(Boolean)],
+	watchIgnore: [[], Array.isArray], // TODO Array<string|RegExp> 
 
 	// Production
 	outputExtension: ['.html', optional(String)],

package/src/plugins-dev/WatcherDevClient.js

@@ -10,8 +10,10 @@ export const devClientWatcher = new class extends EventEmitter {
 	unsubscribe(listener) { this.removeListener('RELOAD', listener) }
 }
 
-export function watchDev(rootPath) {
+export function watchDev(rootPath, watchIgnore) {
 	watch(rootPath, { recursive: true }, (_, file) => {
+		if (watchIgnore.some(f => f === file)) // TODO handle regexes
+			return
 		docs.onWatch(join(rootPath, file))
 		devClientWatcher.emit(file)
 	})

package/src/plugins-dev/cache-bust-resolver.js

@@ -0,0 +1,14 @@
+// We register this hook at runtime so it doesn’t interfere with non-dynamic imports. 
+export async function resolve(specifier, context, nextResolve) {
+	const result = await nextResolve(specifier, context);
+	if (result.url?.startsWith('file:')) {
+		const url = new URL(result.url)
+		url.searchParams.set('t', performance.now())
+		return {
+			...result,
+			url: url.href,
+			shortCircuit: true
+		}
+	}
+	return result
+}

package/src/plugins-dev/watcherDev.js

@@ -9,7 +9,7 @@ async function longPollDevChanges() {
 
 		const file = await response.json() || ''
 		if (file.endsWith('.css')) {
-			hotReloadCSS(file)
+			await hotReloadCSS(file)
 			longPollDevChanges()
 		}
 		else if (file)
@@ -23,11 +23,15 @@ async function longPollDevChanges() {
 	}
 }
 
-function hotReloadCSS(file) {
+async function hotReloadCSS(file) {
 	let link = document.querySelector(`link[href^="/${file}"]`)
 	if (link) {
 		const [url] = link.getAttribute('href').split('?')
 		link.href = url + '?' + Date.now()
 	}
+	else {
+		const mod = await import(`/${file}?${Date.now()}`, { with: { type: 'css' } })
+		document.adoptedStyleSheets = [mod.default]
+	}
 }
 

package/src/plugins-prod/HtmlCompiler.js

@@ -49,7 +49,7 @@ export class HtmlCompiler {
 		}
 		if (this.css) {
 			this.css = await this.#minifyCSS(this.css)
-			this.html = this.html.replace('</head>', `</head><style>${this.css}</style>`)
+			this.#appendToHead(`<style>${this.css}</style>`)
 		}
 	}
 
@@ -71,44 +71,36 @@ export class HtmlCompiler {
 
 		this.scriptsModuleJs = await Promise.all(scripts
 			.filter(([type]) => type === 'module')
-			.map(([, body]) => this.#minifyJS(body)))
+			.map(([, body]) => this.#minifyJS(body, Boolean('isModule'))))
 		
-		this.scriptsNonJs = scripts.filter(([type]) => type !== 'application/javascript' && type !== 'module')
-
 		this.scriptsNonJs = scripts
 			.filter(([type]) => type !== 'application/javascript' && type !== 'module')
 
 		if (this.scriptsJs)
-			this.html = this.html.replace('</body>', `\n<script>${this.scriptsJs}</script></body>`)
+			this.#appendToBody(`<script>${this.scriptsJs}</script>`)
 
 		for (const body of this.scriptsModuleJs)
-			this.html = this.html.replace('</body>', `\n<script type="module">${body}</script></body>`)
+			this.#appendToBody(`<script type="module">${body}</script>`)
 
 		for (const [type, body] of this.scriptsNonJs)
-			this.html = this.html.replace('</body>', `\n<script type="${type}">${body}</script></body>`)
-
+			this.#appendToBody(`<script type="${type}">${body}</script>`)
 	}
 
+
 	csp() {
-		const cssHash = this.css
-			? `'${this.hash256(this.css)}'`
-			: '' // TODO maybe self?
-		const jsScriptHash = this.scriptsJs
-			? `'${this.hash256(this.scriptsJs)}'`
-			: '' // TODO maybe self?
+		const cssHash = this.css ? `'${this.hash256(this.css)}'` : '' // TODO maybe self?
 		
+		const jsScriptHash = this.scriptsJs ? `'${this.hash256(this.scriptsJs)}'` : '' // TODO maybe self?
 		const jsModulesHashes = this.scriptsModuleJs.map(body => `'${this.hash256(body)}'`).join(' ')
-		
 		const nonJsScriptHashes = this.scriptsNonJs.map(([, body]) => `'${this.hash256(body)}'`).join(' ')
-		
-		const externalScriptHashes = this.externalScripts.map(url => `${new URL(url).origin}`).join(' ')
-		
 		const inlineScriptsHashes = this.extractInlineScripts().map(body => `'${this.hash256(body)}'`).join(' ')
+		const externalScriptDomains = this.externalScripts.map(url => `${new URL(url).origin}`).join(' ')
+		
 		return [
 			`default-src 'self'`,
 			`img-src 'self' data:`, // data: is for Safari's video player icons and for CSS bg images
 			`style-src ${cssHash}`,
-			`script-src-elem ${nonJsScriptHashes} ${jsScriptHash} ${jsModulesHashes} ${externalScriptHashes} ${inlineScriptsHashes} 'self'`,
+			`script-src-elem ${nonJsScriptHashes} ${jsScriptHash} ${jsModulesHashes} ${externalScriptDomains} ${inlineScriptsHashes} 'self'`,
 			`frame-ancestors 'none'`
 		].join('; ')
 	}
@@ -119,10 +111,17 @@ export class HtmlCompiler {
 			: ''
 	}
 
+	#appendToHead(tag) {
+		this.html = this.html.replace('</head>', `\n${tag}</head>`)
+	}
+	#appendToBody(tag) {
+		this.html = this.html.replace('</body>', `\n${tag}</body>`)
+	}
 	removeLineContaining(str) {
 		this.html = this.html.replace(new RegExp('^.*' + str + '.*\n', 'm'), '')
 	}
 
+	
 	extractStyleSheetHrefs() {
 		const reExtractStyleSheets = /(?<=<link\s.*href=")[^"]+\.css/g
 		return Array.from(this.html.matchAll(reExtractStyleSheets), m => m[0])

package/src/plugins-prod/minifyJS.js

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