packaton 0.0.14 → 0.0.16

package/README.md

@@ -1,10 +1,10 @@
 # Packaton WIP
 
-Static Pages Bundler.
+Static Site Generator (SSG). Inlines CSS and JS and 
+creates a header file with their corresponding CSP hashes.
 
 ## Limitations
 - `src` and `href` URLs must be absolute
-- 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 config.assetsDir are not automatically copied over,

package/package.json

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

package/src/plugins-prod/HtmlCompiler.js

@@ -69,14 +69,24 @@ export class HtmlCompiler {
 			.map(([, body]) => body)
 			.join('\n'))
 
+		this.scriptsModuleJs = await Promise.all(scripts
+			.filter(([type]) => type === 'module')
+			.map(([, body]) => this.#minifyJS(body)))
+		
+		this.scriptsNonJs = scripts.filter(([type]) => type !== 'application/javascript' && type !== 'module')
+
 		this.scriptsNonJs = scripts
-			.filter(([type]) => type !== 'application/javascript')
+			.filter(([type]) => type !== 'application/javascript' && type !== 'module')
 
 		if (this.scriptsJs)
-			this.html = this.html.replace('</body>', `<script>${this.scriptsJs}</script></body>`)
-		
+			this.html = this.html.replace('</body>', `\n<script>${this.scriptsJs}</script></body>`)
+
+		for (const body of this.scriptsModuleJs)
+			this.html = this.html.replace('</body>', `\n<script type="module">${body}</script></body>`)
+
 		for (const [type, body] of this.scriptsNonJs)
 			this.html = this.html.replace('</body>', `\n<script type="${type}">${body}</script></body>`)
+
 	}
 
 	csp() {
@@ -86,14 +96,19 @@ export class HtmlCompiler {
 		const jsScriptHash = this.scriptsJs
 			? `'${this.hash256(this.scriptsJs)}'`
 			: '' // TODO maybe self?
-		const nonJsScriptHashes = this.scriptsNonJs
-			.map(([, body]) => `'${this.hash256(body)}'`).join(' ')
+		
+		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(' ')
 		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 ${nonJsScriptHashes} ${jsScriptHash} ${externalScriptHashes}`,
+			`script-src-elem ${nonJsScriptHashes} ${jsScriptHash} ${jsModulesHashes} ${externalScriptHashes} ${inlineScriptsHashes} 'self'`,
 			`frame-ancestors 'none'`
 		].join('; ')
 	}
@@ -133,4 +148,15 @@ export class HtmlCompiler {
 			]
 		})
 	}
+	
+	extractInlineScripts() {
+		const reExtractInlineScripts = /<script\b([^>]*?)>([\s\S]*?)<\/script>/g
+		return Array.from(this.html.matchAll(reExtractInlineScripts), m => {
+			const attrs = m[1]
+			const body = m[2]
+			return attrs.includes('src=') 
+				? null 
+				: body
+		}).filter(Boolean)
+	}
 }