cadence/Carbon
3
9
Fork 1
Code Issues 14 Pull requests 1 Releases Wiki Activity

Bundle with browserify #19

Merged
cadence merged 2 commits from browserify into princess 2020-10-26 09:33:52 +00:00
Conversation 0 Commits 2 Files changed 22 +1848 -169
22 changed files with 1848 additions and 169 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
build.js
View file

@ -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})
static.set(sourcePath, `${targetPath}?static=${hash(contents)}`)
fs.writeFile(pj(buildDir, targetPath), contents)
const contents = await fs.promises.readFile(pj(".", sourcePath), {encoding: null});
staticFiles.set(sourcePath, `${targetPath}?static=${hash(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
static.set(sourcePath, `${targetPath}?static=${hash(renderedCSS)}`)
}).css;
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.writeFile(pj(buildDir, minFilename), compiled.code),
fs.writeFile(pj(buildDir, mapFilename), JSON.stringify(compiled.map))
fs.promises.writeFile(pj(buildDir, targetPath), originalCode),
fs.promises.writeFile(pj(buildDir, minFilename), compiled.code),
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)
}

1735
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

1
package.json
View file

@ -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",

87
spec.js
View file

@ -10,90 +10,15 @@ module.exports = [
target: "/static/whitney-400.woff",
},
{
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/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",
type: "bundle",
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",

4
src/js/Anchor.js → src/js/anchor.js
View file

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

2
src/js/basic.js
View file

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

8
src/js/chat-input.js
View file

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

6
src/js/chat.js
View file

@ -1,5 +1,5 @@
import {ElemJS, q, ejs} from $to_relative "/js/basic.js"
import {store} from $to_relative "/js/store/store.js"
const {ElemJS, q, ejs} = require("./basic.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}

4
src/js/functions.js
View file

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

2
src/js/groups.js
View file

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

2
src/js/login.js
View file

@ -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")

2
src/js/lsm.js
View file

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

10
src/js/main.js
View file

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

14
src/js/room-picker.js
View file

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

10
src/js/store/store.js
View file

@ -1,7 +1,7 @@
import {Subscribable} from $to_relative "/js/store/Subscribable.js"
import {SubscribeMapList} from $to_relative "/js/store/SubscribeMapList.js"
import {SubscribeSet} from $to_relative "/js/store/SubscribeSet.js"
import {SubscribeValue} from $to_relative "/js/store/SubscribeValue.js"
const {Subscribable} = require("./subscribable.js")
const {SubscribeMapList} = require("./subscribe_map_list.js")
const {SubscribeSet} = require("./subscribe_set.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}

2
src/js/store/Subscribable.js → src/js/store/subscribable.js
View file

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

6
src/js/store/SubscribeMap.js → src/js/store/subscribe_map.js
View file

@ -1,5 +1,5 @@
import {Subscribable} from $to_relative "/js/store/Subscribable.js"
import {SubscribeValue} from $to_relative "/js/store/SubscribeValue.js"
const {Subscribable} = require("./subscribable.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}

6
src/js/store/SubscribeMapList.js → src/js/store/subscribe_map_list.js
View file

@ -1,5 +1,5 @@
import {Subscribable} from $to_relative "/js/store/Subscribable.js"
import {SubscribeValue} from $to_relative "/js/store/SubscribeValue.js"
const {Subscribable} = require("./subscribable.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}

4
src/js/store/SubscribeSet.js → src/js/store/subscribe_set.js
View file

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

4
src/js/store/SubscribeValue.js → src/js/store/subscribe_value.js
View file

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

6
src/js/sync/sync.js
View file

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

14
src/js/Timeline.js → src/js/timeline.js
View file

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