Bundle with browserify #19
4 changed files with 331 additions and 190 deletions
65
build.js
65
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);
|
||||
static_files.set(sourcePath, `${targetPath}?static=${hash(content)}`)
|
||||
sources.set(sourcePath, 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 => {
|
||||
browserify()
|
||||
.add(pj(".", sourcePath))
|
||||
.bundle()
|
||||
.pipe(fs.createWriteStream(pj(buildDir, targetPath)));
|
||||
static_files.set(sourcePath, targetPath)
|
||||
.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) {
|
||||
|
|
@ -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)}`)
|
||||
await validate(sourcePath, renderedCSS, "css")
|
||||
staticFiles.set(sourcePath, `${targetPath}?static=${hash(renderedCSS)}`)
|
||||
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),
|
||||
|
|
|
|||
369
package-lock.json
generated
369
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -11,12 +11,11 @@
|
|||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "AGPL-3.0-only",
|
||||
"dependencies": {
|
||||
"browserify": "^17.0.0"
|
||||
},
|
||||
"dependencies": {},
|
||||
"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",
|
||||
|
|
|
|||
80
spec.js
80
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",
|
||||
|
|
|
|||
Loading…
Reference in a new issue