packaton 0.0.6 → 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

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

@@ -12,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.6",
+	"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, isFile } 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'
 
 
 /**
@@ -19,25 +22,15 @@ export async function buildStaticPages(config) {
 		const MEDIA_REL_URL = join(config.staticDir, 'media')
 
 		const pSource = config.srcPath
-		const pDist = config.outputPath
-		const pDistStatic = join(config.outputPath, config.staticDir)
+		const pDist = config.outputDir
+		const pDistStatic = join(config.outputDir, config.staticDir)
 		const pDistMedia = join(pDist, MEDIA_REL_URL)
-		const pDistSitemap = join(pDist, 'sitemap.txt')
-		const pDistRobots = join(pDist, 'robots.txt')
-		const pSizesReport = 'packed-sizes.json'
 
-		const pDistCspNginxMap = join(pDist, '.csp-map.nginx')
-		const CLOUDFLARE_HEADERS_FILE = join(pDistStatic, '_headers')
-
-		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, config.staticDir), pDistStatic, {
 					recursive: true,
@@ -69,27 +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 (!isFile(pDistRobots))
-						write(pDistRobots,
-							`Sitemap: https://${config.sitemapDomain}/sitemap.txt`)
-				}
-
-				if (config.cspMapEnabled) {
-					write(pDistCspNginxMap, cspByRoute.map(([route, csp]) =>
-						`${route} "${csp}";`).join('\n'))
-
-					write(CLOUDFLARE_HEADERS_FILE,
-						makeHeadersFile(cspByRoute, MEDIA_REL_URL))
-				}
-
-				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)
@@ -104,19 +80,6 @@ export async function buildStaticPages(config) {
 	})
 }
 
-// TODO @ThinkAbout in Nginx we need to use `/index` but in CF `/`
-function makeHeadersFile(cspByRoute, MEDIA_URL) {
-	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')
-	return cspHeaders.join('\n')
-}
-
 
 async function crawlRoutes({ address, port }, routes) {
 	const pages = []

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 {{
@@ -28,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'
 
 

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'
 
 
 /**

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