Merge pull request 'Bundle with browserify' (#19) from browserify into princess

Reviewed-on: #19

build.js

@@ -1,6 +1,6 @@
 const pug = require("pug")
 const sass = require("sass")
-const fs = require("fs").promises
+const fs = require("fs")
 const os = require("os")
 const crypto = require("crypto")
 const path = require("path")
@@ -9,6 +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 {Transform} = require("stream")
 
 process.chdir(pj(__dirname, "src"))
 
@@ -16,10 +18,10 @@ const buildDir = "../build"
 
 const validationQueue = []
 const validationHost = os.hostname() === "future" ? "http://localhost:8888/" : "http://validator.w3.org/nu/"
-const static = new Map()
+const staticFiles = new Map()
 const links = new Map()
 const sources = new Map()
-const pugLocals = {static, links}
+const pugLocals = {static: staticFiles, links}
 
 const spec = require("./spec.js")
 
@@ -94,6 +96,7 @@ function runHint(filename, source) {
 		globals: ["console", "URLSearchParams", "staticFiles"],
 		browser: true,
 		asi: true,
+		node: true
 	})
 	const result = hint.data()
 	let problems = 0
@@ -125,26 +128,53 @@ function runHint(filename, source) {
 }
 
 async function addFile(sourcePath, targetPath) {
-	const contents = await fs.readFile(pj(".", sourcePath), {encoding: null})
+	const contents = await fs.promises.readFile(pj(".", sourcePath), {encoding: null});
-	static.set(sourcePath, `${targetPath}?static=${hash(contents)}`)
+	staticFiles.set(sourcePath, `${targetPath}?static=${hash(contents)}`)
-	fs.writeFile(pj(buildDir, targetPath), contents)
+	await fs.promises.writeFile(pj(buildDir, targetPath), contents)
 }
 
 async function loadJS(sourcePath, targetPath) {
-	let content = await fs.readFile(pj(".", sourcePath), {encoding: "utf8"})
+	let content = await fs.promises.readFile(pj(".", sourcePath), {encoding: "utf8"})
 	sources.set(sourcePath, content)
-	static.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.get(file)) throw new Error(`Tried to relative import ${file} from ${sourcePath}, but import not found`)
-		return '"' + getRelative(targetPath, static.get(file)) + '"'
-	})
 	runHint(sourcePath, content)
-	fs.writeFile(pj(buildDir, targetPath), content)
+	await fs.promises.writeFile(pj(buildDir, targetPath), content)
+}
+
+async function addBundle(sourcePath, targetPath) {
+	const content = await new Promise(resolve => {
+		browserify()
+			.add(pj(".", sourcePath))
+			.transform(file => {
+				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) {
@@ -158,7 +188,7 @@ async function addSass(sourcePath, targetPath) {
 				if (!(name instanceof sass.types.String)) {
 					throw "$name: expected a string"
 				}
-				const result = getRelative(targetPath, static.get(name.getValue()))
+				const result = getRelative(targetPath, staticFiles.get(name.getValue()))
 				if (typeof result === "string") {
 					return new sass.types.String(result)
 				} else {
@@ -166,10 +196,10 @@ async function addSass(sourcePath, targetPath) {
 				}
 			}
 		}
-	}).css
+	}).css;
-	static.set(sourcePath, `${targetPath}?static=${hash(renderedCSS)}`)
+	staticFiles.set(sourcePath, `${targetPath}?static=${hash(renderedCSS)}`)
 	validate(sourcePath, renderedCSS, "css")
-	await fs.writeFile(pj(buildDir, targetPath), renderedCSS)
+	await fs.promises.writeFile(pj(buildDir, targetPath), renderedCSS)
 }
 
 async function addPug(sourcePath, targetPath) {
@@ -177,10 +207,10 @@ async function addPug(sourcePath, targetPath) {
 		return getRelative(targetPath, staticTarget)
 	}
 	function getStatic(target) {
-		return getRelativeHere(static.get(target))
+		return getRelativeHere(staticFiles.get(target))
 	}
 	function getStaticName(target) {
-		return getRelativeHere(static.get(target)).replace(/\?.*$/, "")
+		return getRelativeHere(staticFiles.get(target)).replace(/\?.*$/, "")
 	}
 	function getLink(target) {
 		return getRelativeHere(links.get(target))
@@ -188,11 +218,11 @@ async function addPug(sourcePath, targetPath) {
 	const renderedHTML = pug.compileFile(pj(".", sourcePath), {pretty: true})({getStatic, getStaticName, getLink, ...pugLocals})
 	let renderedWithoutPHP = renderedHTML.replace(/<\?(?:php|=).*?\?>/gsm, "")
 	validate(sourcePath, renderedWithoutPHP, "html")
-	await fs.writeFile(pj(buildDir, targetPath), renderedHTML)
+	await fs.promises.writeFile(pj(buildDir, targetPath), renderedHTML)
 }
 
 async function addBabel(sourcePath, targetPath) {
-	const originalCode = await fs.readFile(pj(".", sourcePath), "utf8")
+	const originalCode = await fs.promises.readFile(pj(".", sourcePath), "utf8")
 
 	const compiled = babel.transformSync(originalCode, {
 		sourceMaps: false,
@@ -213,14 +243,14 @@ async function addBabel(sourcePath, targetPath) {
 		}
 	})
 
-	const filenameWithQuery = `${targetPath}?static=${hash(compiled.code)}`
+	const filenameWithQuery = `${targetPath}?static=${hash(compiled.code)}`;
 
-	static.set(sourcePath, filenameWithQuery)
+	staticFiles.set(sourcePath, filenameWithQuery)
 
 	await Promise.all([
-		fs.writeFile(pj(buildDir, targetPath), originalCode),
+		fs.promises.writeFile(pj(buildDir, targetPath), originalCode),
-		fs.writeFile(pj(buildDir, minFilename), compiled.code),
+		fs.promises.writeFile(pj(buildDir, minFilename), compiled.code),
-		fs.writeFile(pj(buildDir, mapFilename), JSON.stringify(compiled.map))
+		fs.promises.writeFile(pj(buildDir, mapFilename), JSON.stringify(compiled.map))
 	])
 }
 
@@ -241,7 +271,7 @@ async function addBabel(sourcePath, targetPath) {
 
 	// Stage 3: Create dirs
 	const dirs = [...new Set(spec.map(item => path.dirname(item.target))).values()]
-	await Promise.all(dirs.map(d => fs.mkdir(pj(buildDir, d), {recursive: true})))
+	await Promise.all(dirs.map(d => fs.promises.mkdir(pj(buildDir, d), {recursive: true})))
 
 	// Stage 4: Build
 	for (const item of spec) {
@@ -255,6 +285,8 @@ async function addBabel(sourcePath, targetPath) {
 			await addBabel(item.source, item.target)
 		} else if (item.type === "pug") {
 			await addPug(item.source, item.target)
+		} else if (item.type === "bundle") {
+			await addBundle(item.source, item.target)
 		} else {
 			throw new Error("Unknown item type: "+item.type)
 		}

package.json

@@ -15,6 +15,7 @@
   "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

@@ -10,90 +10,15 @@ module.exports = [
 		target: "/static/whitney-400.woff",
 	},
 	{
-		type: "js",
+		type: "bundle",
-		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/SubscribeValue.js",
-		target: "/static/store/SubscribeValue.js",
-	},
-	{
-		type: "js",
-		source: "/js/store/SubscribeMapList.js",
-		target: "/static/store/SubscribeMapList.js",
-	},
-	{
-		type: "js",
-		source: "/js/store/SubscribeSet.js",
-		target: "/static/store/SubscribeSet.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: "js",
 		source: "/js/login.js",
 		target: "/static/login.js",
 	},
+	{
+		type: "bundle",
+		source: "/js/main.js",
+		target: "/static/bundle.js"
+	},
 	{
 		type: "file",
 		source: "/assets/fonts/whitney-500.woff",

src/js/anchor.js

@@ -1,4 +1,4 @@
-import {ElemJS} from $to_relative "/js/basic.js"
+const {ElemJS} = require("./basic.js")
 
 class Anchor extends ElemJS {
 	constructor() {
@@ -12,4 +12,4 @@ class Anchor extends ElemJS {
 	}
 }
 
-export {Anchor}
+module.exports = {Anchor}

src/js/basic.js

@@ -157,4 +157,4 @@ function ejs(tag) {
 	return new ElemJS(tag);
 }
 
-export {q, qa, ElemJS, ejs}
+module.exports = {q, qa, ElemJS, ejs}

src/js/chat-input.js

@@ -1,7 +1,7 @@
-import {q} from $to_relative "/js/basic.js"
+const {q} = require("./basic.js")
-import {store} from $to_relative "/js/store/store.js"
+const {store} = require("./store/store.js")
-import * as lsm from $to_relative "/js/lsm.js"
+const lsm = require("./lsm.js")
-import {chat} from $to_relative "/js/chat.js"
+const {chat} = require("./chat.js")
 
 const input = q("#c-chat-textarea")
 

src/js/chat.js

@@ -1,5 +1,5 @@
-import {ElemJS, q, ejs} from $to_relative "/js/basic.js"
+const {ElemJS, q, ejs} = require("./basic.js")
-import {store} from $to_relative "/js/store/store.js"
+const {store} = require("./store/store.js")
 
 const chatMessages = q("#c-chat-messages")
 
@@ -62,4 +62,4 @@ class Chat extends ElemJS {
 
 const chat = new Chat()
 
-export {chat}
+module.exports = {chat}

src/js/functions.js

@@ -1,4 +1,4 @@
-import * as lsm from $to_relative "/js/lsm.js"
+const lsm = require("./lsm.js")
 
 function resolveMxc(url, size, method) {
 	const [server, id] = url.match(/^mxc:\/\/([^/]+)\/(.*)/).slice(1)
@@ -9,4 +9,4 @@ function resolveMxc(url, size, method) {
 	}
 }
 
-export {resolveMxc}
+module.exports = {resolveMxc}

src/js/groups.js

@@ -1,4 +1,4 @@
-import {q} from $to_relative "/js/basic.js"
+const {q} = require("./basic.js")
 
 let state = "CLOSED"
 

src/js/login.js

@@ -1,4 +1,4 @@
-import {q, ElemJS, ejs} from $to_relative "/js/basic.js"
+const {q, ElemJS, ejs} = require("./basic.js")
 
 const password = q("#password")
 const homeserver = q("#homeserver")

src/js/lsm.js

@@ -8,4 +8,4 @@ function set(name, value) {
 
 window.lsm = {get, set}
 
-export {get, set}
+module.exports = {get, set}

src/js/main.js

@@ -1,8 +1,8 @@
-import $to_relative "/js/groups.js"
+const groups = require("./groups.js")
-import $to_relative "/js/chat-input.js"
+const chat_input = require("./chat-input.js")
-import $to_relative "/js/room-picker.js"
+const room_picker = require("./room-picker.js")
-import $to_relative "/js/sync/sync.js"
+const sync = require("./sync/sync.js")
-import $to_relative "/js/chat.js"
+const chat  = require("./chat.js")
 
 if (!localStorage.getItem("access_token")) {
 	location.assign("./login/")

src/js/room-picker.js

@@ -1,10 +1,10 @@
-import {q, ElemJS, ejs} from $to_relative "/js/basic.js"
+const {q, ElemJS, ejs} = require("./basic.js")
-import {store} from $to_relative "/js/store/store.js"
+const {store} = require("./store/store.js")
-import {SubscribeMapList} from $to_relative "/js/store/SubscribeMapList.js"
+const {SubscribeMapList} = require("./store/subscribe_map_list.js")
-import {SubscribeValue} from $to_relative "/js/store/SubscribeValue.js"
+const {SubscribeValue} = require("./store/subscribe_value.js")
-import {Timeline} from $to_relative "/js/Timeline.js"
+const {Timeline} = require("./timeline.js")
-import * as lsm from $to_relative "/js/lsm.js"
+const lsm = require("./lsm.js")
-import {resolveMxc} from $to_relative "/js/functions.js"
+const {resolveMxc} = require("./functions.js")
 
 class ActiveGroupMarker extends ElemJS {
 	constructor() {

src/js/store/store.js

@@ -1,7 +1,7 @@
-import {Subscribable} from $to_relative "/js/store/Subscribable.js"
+const {Subscribable} = require("./subscribable.js")
-import {SubscribeMapList} from $to_relative "/js/store/SubscribeMapList.js"
+const {SubscribeMapList} = require("./subscribe_map_list.js")
-import {SubscribeSet} from $to_relative "/js/store/SubscribeSet.js"
+const {SubscribeSet} = require("./subscribe_set.js")
-import {SubscribeValue} from $to_relative "/js/store/SubscribeValue.js"
+const {SubscribeValue} = require("./subscribe_value.js")
 
 const store = {
 	groups: new SubscribeMapList(SubscribeValue),
@@ -14,4 +14,4 @@ const store = {
 
 window.store = store
 
-export {store}
+module.exports = {store}

src/js/store/subscribable.js

@@ -35,4 +35,4 @@ class Subscribable {
 	}
 }
 
-export {Subscribable}
+module.exports = {Subscribable}

src/js/store/subscribe_map.js

@@ -1,5 +1,5 @@
-import {Subscribable} from $to_relative "/js/store/Subscribable.js"
+const {Subscribable} = require("./subscribable.js")
-import {SubscribeValue} from $to_relative "/js/store/SubscribeValue.js"
+const {SubscribeValue} = require("./subscribe_value.js")
 
 class SubscribeMap extends Subscribable {
 	constructor() {
@@ -38,4 +38,4 @@ class SubscribeMap extends Subscribable {
 	}
 }
 
-export {SubscribeMap}
+module.exports = {SubscribeMap}

src/js/store/subscribe_map_list.js

@@ -1,5 +1,5 @@
-import {Subscribable} from $to_relative "/js/store/Subscribable.js"
+const {Subscribable} = require("./subscribable.js")
-import {SubscribeValue} from $to_relative "/js/store/SubscribeValue.js"
+const {SubscribeValue} = require("./subscribe_value.js")
 
 class SubscribeMapList extends Subscribable {
 	constructor(inner) {
@@ -83,4 +83,4 @@ class SubscribeMapList extends Subscribable {
 	}
 }
 
-export {SubscribeMapList}
+module.exports = {SubscribeMapList}

src/js/store/subscribe_set.js

@@ -1,4 +1,4 @@
-import {Subscribable} from $to_relative "/js/store/Subscribable.js"
+const {Subscribable} = require("./subscribable.js")
 
 class SubscribeSet extends Subscribable {
 	constructor() {
@@ -47,4 +47,4 @@ class SubscribeSet extends Subscribable {
 	}
 }
 
-export {SubscribeSet}
+module.exports = {SubscribeSet}

src/js/store/subscribe_value.js

@@ -1,4 +1,4 @@
-import {Subscribable} from $to_relative "/js/store/Subscribable.js"
+const {Subscribable} = require("./subscribable.js")
 
 class SubscribeValue extends Subscribable {
 	constructor() {
@@ -44,4 +44,4 @@ class SubscribeValue extends Subscribable {
 	}
 }
 
-export {SubscribeValue}
+module.exports = {SubscribeValue}

src/js/sync/sync.js

@@ -1,6 +1,6 @@
-import {store} from $to_relative "/js/store/store.js"
+const {store} = require("../store/store.js")
-import * as lsm from $to_relative "/js/lsm.js"
+const lsm = require("../lsm.js")
-import {resolveMxc} from $to_relative "/js/functions.js"
+const {resolveMxc} = require("../functions.js")
 
 let lastBatch = null
 

src/js/timeline.js

@@ -1,9 +1,9 @@
-import {ElemJS, ejs} from $to_relative "/js/basic.js"
+const {ElemJS, ejs} = require("./basic.js")
-import {Subscribable} from $to_relative "/js/store/Subscribable.js"
+const {Subscribable} = require("./store/subscribable.js")
-import {store} from $to_relative "/js/store/store.js"
+const {store} = require("./store/store.js")
-import {Anchor} from $to_relative "/js/Anchor.js"
+const {Anchor} = require("./anchor.js")
-import * as lsm from $to_relative "/js/lsm.js"
+const lsm = require("./lsm.js")
-import {resolveMxc} from $to_relative "/js/functions.js"
+const {resolveMxc} = require("./functions.js")
 
 let debug = false
 
@@ -413,4 +413,4 @@ class Timeline extends Subscribable {
 	*/
 }
 
-export {Timeline}
+module.exports = {Timeline}