build.js

@@ -9,7 +9,8 @@ const babel = require("@babel/core")
 const fetch = require("node-fetch")
 const chalk = require("chalk")
 const hint = require("jshint").JSHINT
-const browserify = require('browserify')
+const browserify = require("browserify")
+const {Transform} = require("stream")
 
 process.chdir(pj(__dirname, "src"))
 
@@ -17,10 +18,10 @@ const buildDir = "../build"
 
 const validationQueue = []
 const validationHost = os.hostname() === "future" ? "http://localhost:8888/" : "http://validator.w3.org/nu/"
-const static_files = new Map()
+const staticFiles = new Map()
 const links = new Map()
 const sources = new Map()
-const pugLocals = {static: static_files, links}
+const pugLocals = {static: staticFiles, links}
 
 const spec = require("./spec.js")
 
@@ -95,6 +96,7 @@ function runHint(filename, source) {
 		globals: ["console", "URLSearchParams", "staticFiles"],
 		browser: true,
 		asi: true,
+		node: true
 	})
 	const result = hint.data()
 	let problems = 0
@@ -127,33 +129,52 @@ function runHint(filename, source) {
 
 async function addFile(sourcePath, targetPath) {
 	const contents = await fs.promises.readFile(pj(".", sourcePath), {encoding: null});
-	static_files.set(sourcePath, `${targetPath}?static=${hash(contents)}`)
+	staticFiles.set(sourcePath, `${targetPath}?static=${hash(contents)}`)
 	await fs.promises.writeFile(pj(buildDir, targetPath), contents)
 }
 
 async function loadJS(sourcePath, targetPath) {
 	let content = await fs.promises.readFile(pj(".", sourcePath), {encoding: "utf8"})
-	sources.set(sourcePath, content);
+	sources.set(sourcePath, content)
-	static_files.set(sourcePath, `${targetPath}?static=${hash(content)}`)
+	staticFiles.set(sourcePath, `${targetPath}?static=${hash(content)}`)
 }
 
 async function addJS(sourcePath, targetPath) {
 	let content = sources.get(sourcePath)
-	// resolve imports to hashed paths
-	content = content.replace(/\$to_relative "([^"]+)"/g, function(_, file) {
-		if (!static_files.get(file)) throw new Error(`Tried to relative import ${file} from ${sourcePath}, but import not found`)
-		return '"' + getRelative(targetPath, static_files.get(file)) + '"'
-	})
 	runHint(sourcePath, content)
 	await fs.promises.writeFile(pj(buildDir, targetPath), content)
 }
 
 async function addBundle(sourcePath, targetPath) {
-	await browserify()
+	const content = await new Promise(resolve => {
-		.add(pj(".", sourcePath))
+		browserify()
-		.bundle()
+			.add(pj(".", sourcePath))
-		.pipe(fs.createWriteStream(pj(buildDir, targetPath)));
+			.transform(file => {
-	static_files.set(sourcePath, targetPath)
+				let content = ""
+				const transform = new Transform({
+					transform(chunk, encoding, callback) {
+						content += chunk.toString()
+						callback(null, chunk)
+					}
+				})
+				transform.on("finish", () => {
+					const relativePath = path.relative(process.cwd(), file).replace(/^\/*/, "/")
+					runHint(relativePath, content)
+				})
+				return transform
+			})
+			.bundle((err, res) => {
+				if (err) {
+					delete err.stream
+					throw err // Quit; problem parsing file to bundle
+				}
+				resolve(res)
+			})
+	})
+	const writer = fs.promises.writeFile(pj(buildDir, targetPath), content)
+	staticFiles.set(sourcePath, `${targetPath}?static=${hash(content)}`)
+	runHint(sourcePath, content)
+	await writer
 }
 
 async function addSass(sourcePath, targetPath) {
@@ -167,7 +188,7 @@ async function addSass(sourcePath, targetPath) {
 				if (!(name instanceof sass.types.String)) {
 					throw "$name: expected a string"
 				}
-				const result = getRelative(targetPath, static_files.get(name.getValue()))
+				const result = getRelative(targetPath, staticFiles.get(name.getValue()))
 				if (typeof result === "string") {
 					return new sass.types.String(result)
 				} else {
@@ -176,8 +197,8 @@ async function addSass(sourcePath, targetPath) {
 			}
 		}
 	}).css;
-	static_files.set(sourcePath, `${targetPath}?static=${hash(renderedCSS)}`)
+	staticFiles.set(sourcePath, `${targetPath}?static=${hash(renderedCSS)}`)
-	await validate(sourcePath, renderedCSS, "css")
+	validate(sourcePath, renderedCSS, "css")
 	await fs.promises.writeFile(pj(buildDir, targetPath), renderedCSS)
 }
 
@@ -186,17 +207,17 @@ async function addPug(sourcePath, targetPath) {
 		return getRelative(targetPath, staticTarget)
 	}
 	function getStatic(target) {
-		return getRelativeHere(static_files.get(target))
+		return getRelativeHere(staticFiles.get(target))
 	}
 	function getStaticName(target) {
-		return getRelativeHere(static_files.get(target)).replace(/\?.*$/, "")
+		return getRelativeHere(staticFiles.get(target)).replace(/\?.*$/, "")
 	}
 	function getLink(target) {
 		return getRelativeHere(links.get(target))
 	}
 	const renderedHTML = pug.compileFile(pj(".", sourcePath), {pretty: true})({getStatic, getStaticName, getLink, ...pugLocals})
 	let renderedWithoutPHP = renderedHTML.replace(/<\?(?:php|=).*?\?>/gsm, "")
-	await validate(sourcePath, renderedWithoutPHP, "html")
+	validate(sourcePath, renderedWithoutPHP, "html")
 	await fs.promises.writeFile(pj(buildDir, targetPath), renderedHTML)
 }
 
@@ -224,7 +245,7 @@ async function addBabel(sourcePath, targetPath) {
 
 	const filenameWithQuery = `${targetPath}?static=${hash(compiled.code)}`;
 
-	static_files.set(sourcePath, filenameWithQuery)
+	staticFiles.set(sourcePath, filenameWithQuery)
 
 	await Promise.all([
 		fs.promises.writeFile(pj(buildDir, targetPath), originalCode),

package.json

@@ -11,12 +11,11 @@
   "keywords": [],
   "author": "",
   "license": "AGPL-3.0-only",
-  "dependencies": {
+  "dependencies": {},
-    "browserify": "^17.0.0"
-  },
   "devDependencies": {
     "@babel/core": "^7.11.1",
     "@babel/preset-env": "^7.11.0",
+    "browserify": "^17.0.0",
     "chalk": "^4.1.0",
     "http-server": "^0.12.3",
     "jshint": "^2.12.0",

spec.js

@@ -19,86 +19,6 @@ module.exports = [
 		source: "/js/main.js",
 		target: "/static/bundle.js"
 	},
-	// {
-	// 	type: "js",
-	// 	source: "/js/main.js",
-	// 	target: "/static/main.js",
-	// },
-	// {
-	// 	type: "js",
-	// 	source: "/js/basic.js",
-	// 	target: "/static/basic.js",
-	// },
-	// {
-	// 	type: "js",
-	// 	source: "/js/groups.js",
-	// 	target: "/static/groups.js",
-	// },
-	// {
-	// 	type: "js",
-	// 	source: "/js/chat-input.js",
-	// 	target: "/static/chat-input.js",
-	// },
-	// {
-	// 	type: "js",
-	// 	source: "/js/room-picker.js",
-	// 	target: "/static/room-picker.js",
-	// },
-	// {
-	// 	type: "js",
-	// 	source: "/js/store/store.js",
-	// 	target: "/static/store/store.js",
-	// },
-	// {
-	// 	type: "js",
-	// 	source: "/js/store/subscribable.js",
-	// 	target: "/static/store/subscribable.js",
-	// },
-	// {
-	// 	type: "js",
-	// 	source: "/js/store/subscribe_value.js",
-	// 	target: "/static/store/subscribe_value.js",
-	// },
-	// {
-	// 	type: "js",
-	// 	source: "/js/store/subscribe_map_list.js",
-	// 	target: "/static/store/subscribe_map_list.js",
-	// },
-	// {
-	// 	type: "js",
-	// 	source: "/js/store/subscribe_set.js",
-	// 	target: "/static/store/subscribe_set.js",
-	// },
-	// {
-	// 	type: "js",
-	// 	source: "/js/sync/sync.js",
-	// 	target: "/static/sync/sync.js",
-	// },
-	// {
-	// 	type: "js",
-	// 	source: "/js/lsm.js",
-	// 	target: "/static/lsm.js",
-	// },
-	// {
-	// 	type: "js",
-	// 	source: "/js/timeline.js",
-	// 	target: "/static/timeline.js",
-	// },
-	// {
-	// 	type: "js",
-	// 	source: "/js/anchor.js",
-	// 	target: "/static/anchor.js",
-	// },
-	// {
-	// 	type: "js",
-	// 	source: "/js/chat.js",
-	// 	target: "/static/chat.js",
-	// },
-	// {
-	// 	type: "js",
-	// 	source: "/js/functions.js",
-	// 	target: "/static/functions.js",
-	// },
 	{
 		type: "file",
 		source: "/assets/fonts/whitney-500.woff",