vndb/mithril-vndb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add streams to releases again, include minified bundle, drop in… (#2539)

Browse source 
* Minify stream, add stream stuff to releases again

* Kill off a lot of tech debt, drop internal utilities from npm

1. Kill `module/`, internalize `bundler/`, privatize `test-utils/`

We've been telling people to move elsewhere from these for a while, and
it's about time we just pull the plug here and finally remove them.

- We officially removed the bundler from the public API in v2.0, and
  that was the only one of these that was ever publicly documented.
  Usage should be low enough by now it shouldn't break anyone- I'm not
  seeing bundler bugs being reported anymore, either.
- The `module/` utility was so narrow and caveat-filled that I'm not
  sure anyone really used it (even us core Mithril devs never really
  used it), and we only had it documented in the repo folder it lived
  in. I think only one bug was ever filed, and it's because it somehow
  ended up completely non-functional without any of us realizing it.
- The test utilities were meant to be internal from day 1, but people
  started using it despite us core developers constantly telling people
  to look elsewhere and even the docs recommending specific alternatives
  without mention of our internal mocks. (Now if people would RTFM,
  that'd be nice...)

2. Add dedicated HTML test files to verify ospec and the promise
   polyfill, and ensure the promise tests are in pure ES5.

These are made specially for those and should be much easier to just run
now.

3. Fix the benchmark script to use the real DOM in browsers and to not
   require as many dependencies to create. Also, tweak them to be much
   more effective and precise on what's being tested.

Previously, it was rendering to the HTML file itself, while now it's
rendering to the `body`. This means in browsers, it's triggering layout
and everything, benchmarking how well Mithril optimizes for style and
layout recalcs, too. It also puts some pressure on the hyperscript
parser attribute application, so that can be noticed as well.

* Update dependencies
This commit is contained in:
Isiah Meadows 2019-10-03 04:58:14 -04:00 • committed by GitHub
parent 34f4363357
commit d4551f49f5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
41 changed files with 1893 additions and 3795 deletions
Download patch file Download diff file Expand all files Collapse all files

30
.npmignore
View file

@ -1,10 +1,22 @@
# Development-specific files # Development-specific files
.deploy.env /.deploy.env
.editorconfig /.editorconfig
.eslintrc.js /.eslintrc.js
.gitattributes /.eslintcache
.gitignore /.eslintignore
.travis.yml /.gitattributes
CONTRIBUTING.md /.gitignore
yarn.lock /.travis.yml
scripts /yarn.lock
/scripts/
# Exclude all directories named "tests" as it's used only for tests. This is
# intentionally not prefixed with a `/` because it applies to both the root and
# subdirectories.
tests/
# Mithril's mocks are for internal use only, and it's wholly undocumented for a
# reason. I've already gotten way too many complaints over users' tests breaking
# from changes to it in patch releases. Let's force people to finally stop using
# them.
/test-utils/

2
.travis.yml
View file

@ -78,6 +78,8 @@ deploy:
file: file:
- "mithril.js" - "mithril.js"
- "mithril.min.js" - "mithril.min.js"
- "stream/stream.js"
- "stream/stream.min.js"
skip_cleanup: true skip_cleanup: true
draft: true draft: true
on: on:

35
api/tests/index.html
View file

@ -1,35 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="../../module/module.js"></script>
<script src="../../ospec/ospec.js"></script>
<script src="../../querystring/parse.js"></script>
<script src="../../test-utils/callAsync.js"></script>
<script src="../../test-utils/parseURL.js"></script>
<script src="../../test-utils/domMock.js"></script>
<script src="../../test-utils/pushStateMock.js"></script>
<script src="../../test-utils/xhrMock.js"></script>
<script src="../../test-utils/browserMock.js"></script>
<script src="../../test-utils/components.js"></script>
<script src="../../test-utils/throttleMock.js"></script>
<script src="../../promise/promise.js"></script>
<script src="../../render/vnode.js"></script>
<script src="../../render/trust.js"></script>
<script src="../../render/fragment.js"></script>
<script src="../../render/hyperscript.js"></script>
<script src="../../render/render.js"></script>
<script src="../../querystring/build.js"></script>
<script src="../../querystring/parse.js"></script>
<script src="../../request/request.js"></script>
<script src="../../api/mount-redraw.js"></script>
<script src="../../api/router.js"></script>
<script src="./test-mountRedraw.js"></script>
<script src="./test-router.js"></script>
<script src="./test-routerGetSet.js"></script>
<script>require("../../ospec/ospec").run()</script>
</body>
</html>

4
bundler/bin/bundle
View file

@ -1,4 +0,0 @@
#!/usr/bin/env node
"use strict"
require("../cli")

1
bundler/bin/bundle.cmd
View file

@ -1 +0,0 @@
node bundle

118
bundler/bundle.js
View file

@ -1,118 +0,0 @@
"use strict"
var fs = require("fs")
var path = require("path")
var proc = require("child_process")
function read(filepath) {
try {return fs.readFileSync(filepath, "utf8")} catch (e) {throw new Error("File does not exist: " + filepath)}
}
function isFile(filepath) {
try {return fs.statSync(filepath).isFile()} catch (e) {return false}
}
function parse(file) {
var json = read(file)
try {return JSON.parse(json)} catch (e) {throw new Error("invalid JSON: " + json)}
}
var error
module.exports = function (input) {
var modules = {}
var bindings = {}
var declaration = /^\s*(?:var|let|const|function)[\t ]+([\w_$]+)/gm
var include = /(?:((?:var|let|const|,|)[\t ]*)([\w_$\.\[\]"'`]+)(\s*=\s*))?require\(([^\)]+)\)(\s*[`\.\(\[])?/gm
var uuid = 0
var process = function(filepath, data) {
data.replace(declaration, function(match, binding) {bindings[binding] = 0})
return data.replace(include, function(match, def, variable, eq, dep, rest) {
var filename = new Function("return " + dep).call(), pre = ""
def = def || "", variable = variable || "", eq = eq || "", rest = rest || ""
if (def[0] === ",") def = "\nvar ", pre = "\n"
var dependency = resolve(filepath, filename)
var localUUID = uuid // global uuid can update from nested `process` call, ensure same id is used on declaration and consumption
var code = process(dependency, pre + (modules[dependency] == null ? exportCode(filename, dependency, def, variable, eq, rest, localUUID) : def + variable + eq + modules[dependency]))
modules[dependency] = rest ? "_" + localUUID : variable
uuid++
return code + rest
})
}
var resolve = function(filepath, filename) {
if (filename[0] !== ".") {
// resolve as npm dependency
var packagePath = "./node_modules/" + filename + "/package.json"
var meta = isFile(packagePath) ? parse(packagePath) : {}
var main = "./node_modules/" + filename + "/" + (meta.main || filename + ".js")
return path.resolve(isFile(main) ? main : "./node_modules/" + filename + "/index.js")
}
else {
// resolve as local dependency
return path.resolve(path.dirname(filepath), filename + ".js")
}
}
var exportCode = function(filename, filepath, def, variable, eq, rest, uuid) {
var code = read(filepath)
// if there's a syntax error, report w/ proper stack trace
try {new Function(code)} catch (e) {
proc.exec("node " + filepath, function(e) {
if (e !== null && e.message !== error) {
error = e.message
console.log("\x1b[31m" + e.message + "\x1b[0m")
}
})
}
// disambiguate collisions
var ignored = {}
code.replace(include, function(match, def, variable, eq, dep) {
var filename = new Function("return " + dep).call()
var binding = modules[resolve(filepath, filename)]
if (binding != null) ignored[binding] = true
})
if (code.match(new RegExp("module\\.exports\\s*=\\s*" + variable + "\s*$", "m"))) ignored[variable] = true
for (var binding in bindings) {
if (!ignored[binding]) {
var before = code
code = code.replace(new RegExp("(\\b)" + binding + "\\b", "g"), binding + bindings[binding])
if (before !== code) bindings[binding]++
}
}
// fix strings that got mangled by collision disambiguation
var string = /(["'])((?:\\\1|.)*?)(\1)/g
var candidates = Object.keys(bindings).map(function(binding) {return binding + (bindings[binding] - 1)}).join("|")
code = code.replace(string, function(match, open, data, close) {
var variables = new RegExp(Object.keys(bindings).map(function(binding) {return binding + (bindings[binding] - 1)}).join("|"), "g")
var fixed = data.replace(variables, function(match) {
return match.replace(/\d+$/, "")
})
return open + fixed + close
})
//fix props
var props = new RegExp("((?:[^:]\\/\\/.*)?\\.\\s*)(" + candidates + ")|([\\{,]\\s*)(" + candidates + ")(\\s*:)", "gm")
code = code.replace(props, function(match, dot, a, pre, b, post) {
if (dot && dot.indexOf("//") === 1) return match // Don't do anything because dot was matched in a comment
else if (dot) return dot + a.replace(/\d+$/, "")
else return pre + b.replace(/\d+$/, "") + post
})
return code
.replace(/("|')use strict\1;?/gm, "") // remove extraneous "use strict"
.replace(/module\.exports\s*=\s*/gm, rest ? "var _" + uuid + eq : def + (rest ? "_" : "") + variable + eq) // export
+ (rest ? "\n" + def + variable + eq + "_" + uuid : "") // if `rest` is truthy, it means the expression is fluent or higher-order (e.g. require(path).foo or require(path)(foo)
}
var code = process(path.resolve(input), read(input))
.replace(/^\s*((?:var|let|const|)[\t ]*)([\w_$\.]+)(\s*=\s*)(\2)(?=[\s]+(\w)|;|$)/gm, "") // remove assignments to self
.replace(/;+(\r|\n|$)/g, ";$1") // remove redundant semicolons
.replace(/(\r|\n)+/g, "\n").replace(/(\r|\n)$/, "") // remove multiline breaks
code = ";(function() {\n" + code + "\n}());"
//try {new Function(code); console.log("build completed at " + new Date())} catch (e) {}
error = null
return code
}

65
bundler/cli.js
View file

@ -1,65 +0,0 @@
"use strict"
var fs = require("fs")
var zlib = require("zlib")
var chokidar = require("chokidar")
var Terser = require("terser")
var bundle = require("./bundle")
var aliases = {o: "output", m: "minify", w: "watch", s: "save"}
var params = {}
var args = process.argv.slice(2), command = null
for (var i = 0; i < args.length; i++) {
if (args[i][0] === '"') args[i] = JSON.parse(args[i])
if (args[i][0] === "-") {
if (command != null) add(true)
command = args[i].replace(/\-+/g, "")
}
else if (command != null) add(args[i])
else params.input = args[i]
}
if (command != null) add(true)
function add(value) {
params[aliases[command] || command] = value
command = null
}
function format(n) {
return n.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")
}
function build() {
var original = bundle(params.input)
if (!params.minify) {
fs.writeFileSync(params.output, original, "utf-8")
return
}
console.log("minifying...")
var minified = Terser.minify(original)
if (minified.error) throw new Error(minified.error)
fs.writeFileSync(params.output, minified.code, "utf-8")
var originalSize = original.length
var compressedSize = minified.code.length
var originalGzipSize = zlib.gzipSync(original).byteLength
var compressedGzipSize = zlib.gzipSync(minified.code).byteLength
console.log("Original size: " + format(originalGzipSize) + " bytes gzipped (" + format(originalSize) + " bytes uncompressed)")
console.log("Compiled size: " + format(compressedGzipSize) + " bytes gzipped (" + format(compressedSize) + " bytes uncompressed)")
if (params.save) {
var readme = fs.readFileSync("./README.md", "utf8")
var kb = compressedGzipSize / 1000
fs.writeFileSync("./README.md",
readme.replace(
/(<!-- size -->)(.+?)(<!-- \/size -->)/,
"$1" + (kb % 1 ? kb.toFixed(2) : kb) + " KB$3"
)
)
}
}
build()
if (params.watch) chokidar.watch(".", {ignored: params.output}).on("all", build)

322
bundler/tests/test-bundler.js
View file

@ -1,322 +0,0 @@
"use strict"
var o = require("../../ospec/ospec")
var bundle = require("../bundle")
var fs = require("fs")
var ns = "./"
function write(filepath, data) {
try {var exists = fs.statSync(ns + filepath).isFile()} catch (e) {/* ignore */}
if (exists) throw new Error("Don't call `write('" + filepath + "')`. Cannot overwrite file")
fs.writeFileSync(ns + filepath, data, "utf8")
}
function remove(filepath) {
fs.unlinkSync(ns + filepath)
}
o.spec("bundler", function() {
o("relative imports works", function() {
write("a.js", 'var b = require("./b")')
write("b.js", "module.exports = 1")
o(bundle(ns + "a.js")).equals(";(function() {\nvar b = 1\n}());")
remove("a.js")
remove("b.js")
})
o("relative imports works with semicolons", function() {
write("a.js", 'var b = require("./b");')
write("b.js", "module.exports = 1;")
o(bundle(ns + "a.js")).equals(";(function() {\nvar b = 1;\n}());")
remove("a.js")
remove("b.js")
})
o("relative imports works with let", function() {
write("a.js", 'let b = require("./b")')
write("b.js", "module.exports = 1")
o(bundle(ns + "a.js")).equals(";(function() {\nlet b = 1\n}());")
remove("a.js")
remove("b.js")
})
o("relative imports works with const", function() {
write("a.js", 'const b = require("./b")')
write("b.js", "module.exports = 1")
o(bundle(ns + "a.js")).equals(";(function() {\nconst b = 1\n}());")
remove("a.js")
remove("b.js")
})
o("relative imports works with assignment", function() {
write("a.js", 'var a = {}\na.b = require("./b")')
write("b.js", "module.exports = 1")
o(bundle(ns + "a.js")).equals(";(function() {\nvar a = {}\na.b = 1\n}());")
remove("a.js")
remove("b.js")
})
o("relative imports works with reassignment", function() {
write("a.js", 'var b = {}\nb = require("./b")')
write("b.js", "module.exports = 1")
o(bundle(ns + "a.js")).equals(";(function() {\nvar b = {}\nb = 1\n}());")
remove("a.js")
remove("b.js")
})
o("relative imports removes extra use strict", function() {
write("a.js", '"use strict"\nvar b = require("./b")')
write("b.js", '"use strict"\nmodule.exports = 1')
o(bundle(ns + "a.js")).equals(';(function() {\n"use strict"\nvar b = 1\n}());')
remove("a.js")
remove("b.js")
})
o("relative imports removes extra use strict using single quotes", function() {
write("a.js", "'use strict'\nvar b = require(\"./b\")")
write("b.js", "'use strict'\nmodule.exports = 1")
o(bundle(ns + "a.js")).equals(";(function() {\n'use strict'\nvar b = 1\n}());")
remove("a.js")
remove("b.js")
})
o("relative imports removes extra use strict using mixed quotes", function() {
write("a.js", '"use strict"\nvar b = require("./b")')
write("b.js", "'use strict'\nmodule.exports = 1")
o(bundle(ns + "a.js")).equals(';(function() {\n"use strict"\nvar b = 1\n}());')
remove("a.js")
remove("b.js")
})
o("works w/ window", function() {
write("a.js", 'window.a = 1\nvar b = require("./b")')
write("b.js", "module.exports = function() {return a}")
o(bundle(ns + "a.js")).equals(";(function() {\nwindow.a = 1\nvar b = function() {return a}\n}());")
remove("a.js")
remove("b.js")
})
o("works without assignment", function() {
write("a.js", 'require("./b")')
write("b.js", "1 + 1")
o(bundle(ns + "a.js")).equals(";(function() {\n1 + 1\n}());")
remove("a.js")
remove("b.js")
})
o("works if used fluently", function() {
write("a.js", 'var b = require("./b").toString()')
write("b.js", "module.exports = []")
o(bundle(ns + "a.js")).equals(";(function() {\nvar _0 = []\nvar b = _0.toString()\n}());")
remove("a.js")
remove("b.js")
})
o("works if used fluently w/ multiline", function() {
write("a.js", 'var b = require("./b")\n\t.toString()')
write("b.js", "module.exports = []")
o(bundle(ns + "a.js")).equals(";(function() {\nvar _0 = []\nvar b = _0\n\t.toString()\n}());")
remove("a.js")
remove("b.js")
})
o("works if used w/ curry", function() {
write("a.js", 'var b = require("./b")()')
write("b.js", "module.exports = function() {}")
o(bundle(ns + "a.js")).equals(";(function() {\nvar _0 = function() {}\nvar b = _0()\n}());")
remove("a.js")
remove("b.js")
})
o("works if used w/ curry w/ multiline", function() {
write("a.js", 'var b = require("./b")\n()')
write("b.js", "module.exports = function() {}")
o(bundle(ns + "a.js")).equals(";(function() {\nvar _0 = function() {}\nvar b = _0\n()\n}());")
remove("a.js")
remove("b.js")
})
o("works if used fluently in one place and not in another", function() {
write("a.js", 'var b = require("./b").toString()\nvar c = require("./c")')
write("b.js", "module.exports = []")
write("c.js", 'var b = require("./b")\nmodule.exports = function() {return b}')
o(bundle(ns + "a.js")).equals(";(function() {\nvar _0 = []\nvar b = _0.toString()\nvar b0 = _0\nvar c = function() {return b0}\n}());")
remove("a.js")
remove("b.js")
remove("c.js")
})
o("works if used in sequence", function() {
write("a.js", 'var b = require("./b"), c = require("./c")')
write("b.js", "module.exports = 1")
write("c.js", "var x\nmodule.exports = 2")
o(bundle(ns + "a.js")).equals(";(function() {\nvar b = 1\nvar x\nvar c = 2\n}());")
remove("a.js")
remove("b.js")
remove("c.js")
})
o("works if assigned to property", function() {
write("a.js", 'var x = {}\nx.b = require("./b")\nx.c = require("./c")')
write("b.js", "var bb = 1\nmodule.exports = bb")
write("c.js", "var cc = 2\nmodule.exports = cc")
o(bundle(ns + "a.js")).equals(";(function() {\nvar x = {}\nvar bb = 1\nx.b = bb\nvar cc = 2\nx.c = cc\n}());")
remove("a.js")
remove("b.js")
remove("c.js")
})
o("works if assigned to property using bracket notation", function() {
write("a.js", 'var x = {}\nx["b"] = require("./b")\nx["c"] = require("./c")')
write("b.js", "var bb = 1\nmodule.exports = bb")
write("c.js", "var cc = 2\nmodule.exports = cc")
o(bundle(ns + "a.js")).equals(';(function() {\nvar x = {}\nvar bb = 1\nx["b"] = bb\nvar cc = 2\nx["c"] = cc\n}());')
remove("a.js")
remove("b.js")
remove("c.js")
})
o("works if collision", function() {
write("a.js", 'var b = require("./b")')
write("b.js", "var b = 1\nmodule.exports = 2")
o(bundle(ns + "a.js")).equals(";(function() {\nvar b0 = 1\nvar b = 2\n}());")
remove("a.js")
remove("b.js")
})
o("works if multiple aliases", function() {
write("a.js", 'var b = require("./b")\n')
write("b.js", 'var b = require("./c")\nb.x = 1\nmodule.exports = b')
write("c.js", "var b = {}\nmodule.exports = b")
o(bundle(ns + "a.js")).equals(";(function() {\nvar b = {}\nb.x = 1\n}());")
remove("a.js")
remove("b.js")
remove("c.js")
})
o("works if multiple collision", function() {
write("a.js", 'var b = require("./b")\nvar c = require("./c")\nvar d = require("./d")')
write("b.js", "var a = 1\nmodule.exports = a")
write("c.js", "var a = 2\nmodule.exports = a")
write("d.js", "var a = 3\nmodule.exports = a")
o(bundle(ns + "a.js")).equals(";(function() {\nvar a = 1\nvar b = a\nvar a0 = 2\nvar c = a0\nvar a1 = 3\nvar d = a1\n}());")
remove("a.js")
remove("b.js")
remove("c.js")
remove("d.js")
})
o("works if included multiple times", function() {
write("a.js", "module.exports = 123")
write("b.js", 'var a = require("./a").toString()\nmodule.exports = a')
write("c.js", 'var a = require("./a").toString()\nvar b = require("./b")')
o(bundle(ns + "c.js")).equals(";(function() {\nvar _0 = 123\nvar a = _0.toString()\nvar a0 = _0.toString()\nvar b = a0\n}());")
remove("a.js")
remove("b.js")
remove("c.js")
})
o("works if included multiple times reverse", function() {
write("a.js", "module.exports = 123")
write("b.js", 'var a = require("./a").toString()\nmodule.exports = a')
write("c.js", 'var b = require("./b")\nvar a = require("./a").toString()')
o(bundle(ns + "c.js")).equals(";(function() {\nvar _0 = 123\nvar a0 = _0.toString()\nvar b = a0\nvar a = _0.toString()\n}());")
remove("a.js")
remove("b.js")
remove("c.js")
})
o("reuses binding if possible", function() {
write("a.js", 'var b = require("./b")\nvar c = require("./c")')
write("b.js", 'var d = require("./d")\nmodule.exports = function() {return d + 1}')
write("c.js", 'var d = require("./d")\nmodule.exports = function() {return d + 2}')
write("d.js", "module.exports = 1")
o(bundle(ns + "a.js")).equals(";(function() {\nvar d = 1\nvar b = function() {return d + 1}\nvar c = function() {return d + 2}\n}());")
remove("a.js")
remove("b.js")
remove("c.js")
remove("d.js")
})
o("disambiguates conflicts if imported collides with itself", function() {
write("a.js", 'var b = require("./b")')
write("b.js", "var b = 1\nmodule.exports = function() {return b}")
o(bundle(ns + "a.js")).equals(";(function() {\nvar b0 = 1\nvar b = function() {return b0}\n}());")
remove("a.js")
remove("b.js")
})
o("disambiguates conflicts if imported collides with something else", function() {
write("a.js", 'var a = 1\nvar b = require("./b")')
write("b.js", "var a = 2\nmodule.exports = function() {return a}")
o(bundle(ns + "a.js")).equals(";(function() {\nvar a = 1\nvar a0 = 2\nvar b = function() {return a0}\n}());")
remove("a.js")
remove("b.js")
})
o("disambiguates conflicts if imported collides with function declaration", function() {
write("a.js", 'function a() {}\nvar b = require("./b")')
write("b.js", "var a = 2\nmodule.exports = function() {return a}")
o(bundle(ns + "a.js")).equals(";(function() {\nfunction a() {}\nvar a0 = 2\nvar b = function() {return a0}\n}());")
remove("a.js")
remove("b.js")
})
o("disambiguates conflicts if imported collides with another module's private", function() {
write("a.js", 'var b = require("./b")\nvar c = require("./c")')
write("b.js", "var a = 1\nmodule.exports = function() {return a}")
write("c.js", "var a = 2\nmodule.exports = function() {return a}")
o(bundle(ns + "a.js")).equals(";(function() {\nvar a = 1\nvar b = function() {return a}\nvar a0 = 2\nvar c = function() {return a0}\n}());")
remove("a.js")
remove("b.js")
remove("c.js")
})
o("does not mess up strings", function() {
write("a.js", 'var b = require("./b")')
write("b.js", 'var b = "b b b \\" b"\nmodule.exports = function() {return b}')
o(bundle(ns + "a.js")).equals(';(function() {\nvar b0 = "b b b \\\" b"\nvar b = function() {return b0}\n}());')
remove("a.js")
remove("b.js")
})
o("does not mess up properties", function() {
write("a.js", 'var b = require("./b")')
write("b.js", "var b = {b: 1}\nmodule.exports = function() {return b.b}")
o(bundle(ns + "a.js")).equals(";(function() {\nvar b0 = {b: 1}\nvar b = function() {return b0.b}\n}());")
remove("a.js")
remove("b.js")
})
})

13
docs/change-log.md
View file

@ -1,5 +1,6 @@
# Change log # Change log
- [v2.0.4](#v204)
- [v2.0.3](#v203) - [v2.0.3](#v203)
- [v2.0.1](#v201) - [v2.0.1](#v201)
- [v2.0.0](#v200) - [v2.0.0](#v200)
@ -26,6 +27,18 @@
- Bug fix with `m.redraw` where if you removed a root that was previously visited in the current redraw pass, it would lose its place and skip the next root. - Bug fix with `m.redraw` where if you removed a root that was previously visited in the current redraw pass, it would lose its place and skip the next root.
- Add `params:` attribute to `m.route.Link`. ([#2537](https://github.com/MithrilJS/mithril.js/pull/2537) [@isiahmeadows](https://github.com/isiahmeadows)) - Add `params:` attribute to `m.route.Link`. ([#2537](https://github.com/MithrilJS/mithril.js/pull/2537) [@isiahmeadows](https://github.com/isiahmeadows))
- Add `m.censor`. ([#2538](https://github.com/MithrilJS/mithril.js/pull/2538) [@isiahmeadows](https://github.com/isiahmeadows)) - Add `m.censor`. ([#2538](https://github.com/MithrilJS/mithril.js/pull/2538) [@isiahmeadows](https://github.com/isiahmeadows))
- Re-add stream bundles. ([#2539](https://github.com/MithrilJS/mithril.js/pull/2539) [@isiahmeadows](https://github.com/isiahmeadows))
Important note: if you were using any of these undocumented tools, they are no longer available as of this release. This is not considered a breaking change as they were written for internal usage and as of v2 are all 100% unsupported in userland.
- Mithril's internal bundler, previously available at `mithril/bundler`
- Prefer using a dedicated bundler like Webpack or Rollup instead.
- Mithril's CommonJS sham polyfill, previously available at `mithril/module`
- Prefer using native `import`/`export` and/or Budo instead.
- Mithril's internal test mocks, previously available at `mithril/test-utils`
- Prefer using JSDOM or similar instead.
I'd like to apologize for missing these deprecations in the initial 2.0.0 change log. This was a major policy change we had been communicating the entire time and we should've let you all know this there in the change log as well.
--> -->

9
docs/contributing.md
View file

@ -8,7 +8,6 @@
- [Is there a style guide?](#is-there-a-style-guide?) - [Is there a style guide?](#is-there-a-style-guide?)
- [Why do tests mock the browser APIs?](#why-do-tests-mock-the-browser-apis?) - [Why do tests mock the browser APIs?](#why-do-tests-mock-the-browser-apis?)
- [Why does Mithril use its own testing framework and not Mocha/Jasmine/Tape?](#why-does-mithril-use-its-own-testing-framework-and-not-mochajasminetape?) - [Why does Mithril use its own testing framework and not Mocha/Jasmine/Tape?](#why-does-mithril-use-its-own-testing-framework-and-not-mochajasminetape?)
- [Why do tests use `module/module.js`? Why not use Browserify, Webpack or Rollup?](#why-do-tests-use-modulemodule.js?-why-not-use-browserify,-webpack-or-rollup?)
- [Why doesn't the Mithril codebase use ES6 via Babel or Bublé? Would a PR to upgrade be welcome?](#why-doesn't-the-mithril-codebase-use-es6-via-babel-or-bublé?-would-a-pr-to-upgrade-be-welcome?) - [Why doesn't the Mithril codebase use ES6 via Babel or Bublé? Would a PR to upgrade be welcome?](#why-doesn't-the-mithril-codebase-use-es6-via-babel-or-bublé?-would-a-pr-to-upgrade-be-welcome?)
- [Why doesn't the Mithril codebase use trailing semi-colons? Would a PR to add them be welcome?](#why-doesn't-the-mithril-codebase-use-trailing-semi-colons?-would-a-pr-to-add-them-be-welcome?) - [Why doesn't the Mithril codebase use trailing semi-colons? Would a PR to add them be welcome?](#why-doesn't-the-mithril-codebase-use-trailing-semi-colons?-would-a-pr-to-add-them-be-welcome?)
- [Why does the Mithril codebase use a mix of `instanceof` and `typeof` checks instead of `Object.prototype.toString.call`, `Array.isArray`, etc? Would a PR to refactor those checks be welcome?](#why-does-the-mithril-codebase-use-a-mix-of-instanceof-and-typeof-checks-instead-of-objectprototypetostringcall,-arrayisarray,-etc?-would-a-pr-to-refactor-those-checks-be-welcome?) - [Why does the Mithril codebase use a mix of `instanceof` and `typeof` checks instead of `Object.prototype.toString.call`, `Array.isArray`, etc? Would a PR to refactor those checks be welcome?](#why-does-the-mithril-codebase-use-a-mix-of-instanceof-and-typeof-checks-instead-of-objectprototypetostringcall,-arrayisarray,-etc?-would-a-pr-to-refactor-those-checks-be-welcome?)
@ -84,14 +83,6 @@ Mainly to avoid requiring dependencies. `ospec` is customized to provide only es
## Why do tests use `module/module.js`? Why not use Browserify, Webpack or Rollup?
Again, to avoid requiring dependencies. The Mithril codebase is written using a statically analyzable subset of CommonJS module definitions (as opposed to ES6 modules) because its syntax is backwards compatible with ES5, therefore making it possible to run source code unmodified in browsers without the need for a build tool or a file watcher.
This simplifies the workflow for bug fixes, which means they can be fixed faster.
## Why doesn't the Mithril codebase use ES6 via Babel or Bublé? Would a PR to upgrade be welcome? ## Why doesn't the Mithril codebase use ES6 via Babel or Bublé? Would a PR to upgrade be welcome?
Being able to run Mithril's raw source code in all supported browsers is a requirement for all browser-related modules in this repo. In addition, transpiled code is generally much bulkier. Being able to run Mithril's raw source code in all supported browsers is a requirement for all browser-related modules in this repo. In addition, transpiled code is generally much bulkier.

2
examples/threaditjs/app.js
View file

@ -1,7 +1,5 @@
T.time("Setup"); T.time("Setup");
var m = require("../../mithril")
//API calls //API calls
var api = { var api = {
home: function() { home: function() {

1
examples/threaditjs/index.html
View file

@ -10,7 +10,6 @@
<body> <body>
<div id="app"></div> <div id="app"></div>
<script src="//threaditjs.com/shared.js"></script> <script src="//threaditjs.com/shared.js"></script>
<script src="../../module/module.js"></script>
<script src="../../mithril.js"></script> <script src="../../mithril.js"></script>
<script src="app.js"></script> <script src="app.js"></script>
</body> </body>

64
module/README.md
View file

@ -1,64 +0,0 @@
# module.js
[About](#about) | [Usage](#usage) | [API](#api) | [Goals](#goals)
CommonJS module API polyfill for browsers
Version: 1.0
License: MIT
## About
- ~30 LOC
- allows running CommonJS modules in browsers without the need for a compile-time bundler like browserify or webpack
- doesn't separate module code into separate environment contexts, so it makes it possible to test private APIs
### Caveats
- pollutes global scope, thus making name collisions possible
- doesn't support out-of-order execution, so script tags for dependencies must appear before the modules that use them
- doesn't support circular dependencies
- runs code for all declared modules, regardless of whether they were `require`d
- only supports relative paths in `require` calls (i.e. won't resolve anything from `node_modules`)
- only supports files with `.js` extension
## Usage
```html
<script src="module.js"></script>
<script src="foo.js"></script>
<script src="bar.js"></script>
```
```javascript
//file: bar.js
var foo = require("./foo")
module.exports = {bar: "baz"}
```
---
## API
### `any require(String module)`
Imports a module. `module` should be the relative path of the module's javascript file, minus the '.js' extension
---
### `any module.exports`
A getter-setter. Assign to this to register a module for exporting
---
## Goals
The best code is no code at all.
This micro-library exists to support a coding style that aims to achieve systematic terseness (in other words, a "less-is-more" philosophy).
Browsers run javascript in a global environment that spans multiple files. Node.js runs each javascript file in a self-contained environment, which can communicate with other files via its CommonJS module API. Node.js' modular quality is desirable for writing scalable codebases, and we want to be able to use its module API both in the browser and in the server, with the ultimate goal of writing code that can run unmodified in both. Ideally this should also be possible without requiring a lot of extra machinery.
Webpack and Browserify are commonly used solutions to solve this issue, but both require a large number of dependencies and a compilation/file watching tool. This micro-library provides an incomplete but usable subset of features of the CommonJS module API in order to aid in development tasks. The plan is to use Node.js' full CommonJS support for production-related tasks, and use this micro-library to run the same source code in-browser for development/testing tasks.

30
module/module.js
View file

@ -1,30 +0,0 @@
"use strict"
require.$$modules = {}
require.$$current = function() {
var href = window.location.href
var searchIndex = href.indexOf("?")
var hashIndex = href.indexOf("#")
var pathnameEnd = searchIndex > -1 ? searchIndex : hashIndex > -1 ? hashIndex : href.length
try {throw new Error} catch (e) {var error = e}
var src = error.stack.match(/^(?:(?!^Error|\/module\/module\.js).)*$/m).toString().match(/((?:file|https|http):\/\/.+)(?::\d+){2}/)[1] || href.slice(0, pathnameEnd)
return src.replace(/\.js$/, "")
}
window.module = {
get exports() {return require.$$modules[require.$$current()]},
set exports(value) {require.$$modules[require.$$current()] = value},
}
window.global = window
function require(name) {
var relative = require.$$current()
var slashIndex = relative.lastIndexOf("/")
var path = slashIndex > -1 ? relative.slice(0, slashIndex + 1) : "./"
var absolute = (path + name).replace(/\/\.\//g, "/")
var dotdot = /\/[^\/]+?\/\.{2}/
while (dotdot.test(absolute)) absolute = absolute.replace(dotdot, "")
if (absolute in require.$$modules) return require.$$modules[absolute]
else throw new Error("Module does not exist: " + absolute)
}

12
ospec/tests/index.html
View file

@ -1,12 +0,0 @@
<!doctype html>
<html>
<head></head>
<body>
<script src="../../module/module.js"></script>
<script src="../../test-utils/callAsync.js"></script>
<script src="../../ospec/ospec.js"></script>
<script src="test-ospec.js"></script>
<script>require("../../ospec/ospec").run()</script>
</body>
</html>

19
ospec/tests/test-ospec.js
View file

@ -1,8 +1,17 @@
"use strict" "use strict"
var callAsync = require("../../test-utils/callAsync") // So it can load correctly in browsers using a global instance.
var o = require("../ospec") var o, callAsync
if (typeof require !== "undefined") {
/* eslint-disable global-require */
callAsync = require("../../test-utils/callAsync")
o = require("../ospec")
/* eslint-enable global-require */
} else {
callAsync = typeof setImmediate === "function" ? setImmediate : setTimeout
o = window.o
}
// this throws an async error that can't be caught in browsers // this throws an async error that can't be caught in browsers
if (typeof process !== "undefined") { if (typeof process !== "undefined") {
@ -617,8 +626,8 @@ o.spec("ospec", function() {
var a = 0, b = 0 var a = 0, b = 0
function wrapPromise(fn) { function wrapPromise(fn) {
return new Promise((resolve, reject) => { return new Promise(function (resolve, reject) {
callAsync(() => { callAsync(function () {
try { try {
fn() fn()
resolve() resolve()
@ -630,7 +639,7 @@ o.spec("ospec", function() {
} }
o.before(function() { o.before(function() {
return wrapPromise(() => { return wrapPromise(function () {
a = 1 a = 1
}) })
}) })

10
ospec/tests/test.html Normal file
View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../ospec.js"></script>
<script src="./test-ospec.js"></script>
<script>o.run()</script>
</head>
<body></body>
</html>

3497
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

26
package.json
View file

@ -9,12 +9,13 @@
"scripts": { "scripts": {
"precommit": "lint-staged", "precommit": "lint-staged",
"watch": "run-p watch:**", "watch": "run-p watch:**",
"watch:js": "node bundler/cli browser.js -output mithril.js -watch", "watch:js": "node scripts/bundler browser.js -output mithril.js -watch",
"watch:docs": "node scripts/generate-docs --watch", "watch:docs": "node scripts/generate-docs --watch",
"build": "run-p build:browser build:min", "build": "run-p build:browser build:min build:stream-min",
"build:browser": "node bundler/cli browser.js -output mithril.js", "build:browser": "node scripts/bundler browser.js -output mithril.js",
"build:docs": "node scripts/generate-docs", "build:docs": "node scripts/generate-docs",
"build:min": "node bundler/cli browser.js -output mithril.min.js -minify -save", "build:min": "node scripts/bundler browser.js -output mithril.min.js -minify -save",
"build:stream-min": "node scripts/minify-stream",
"lint": "run-s -cn lint:**", "lint": "run-s -cn lint:**",
"lint:js": "eslint . --cache", "lint:js": "eslint . --cache",
"lint:docs": "node scripts/lint-docs", "lint:docs": "node scripts/lint-docs",
@ -24,21 +25,20 @@
"posttest": "npm run lint", "posttest": "npm run lint",
"cover": "istanbul cover --print both ospec/bin/ospec", "cover": "istanbul cover --print both ospec/bin/ospec",
"release": "npm version -m 'v%s'", "release": "npm version -m 'v%s'",
"version": "npm run build && git add mithril.js mithril.min.js README.md" "version": "npm run build && git add mithril.js mithril.min.js stream.js stream.min.js README.md"
}, },
"devDependencies": { "devDependencies": {
"@alrra/travis-scripts": "^3.0.1", "@alrra/travis-scripts": "^3.0.1",
"@babel/parser": "^7.5.5", "@babel/parser": "^7.6.2",
"benchmark": "^2.1.4", "benchmark": "^2.1.4",
"chokidar": "^2.0.4", "chokidar": "^3.2.1",
"dedent": "^0.7.0",
"escape-string-regexp": "^2.0.0", "escape-string-regexp": "^2.0.0",
"eslint": "^5.13.0", "eslint": "^6.5.1",
"gh-pages": "^2.0.1", "gh-pages": "^2.1.1",
"glob": "^7.1.4", "glob": "^7.1.4",
"html-minifier": "^4.0.0", "html-minifier": "^4.0.0",
"istanbul": "^0.4.5", "istanbul": "^0.4.5",
"lint-staged": "^8.1.3", "lint-staged": "^9.4.1",
"locater": "^1.3.0", "locater": "^1.3.0",
"marked": "^0.7.0", "marked": "^0.7.0",
"minimist": "^1.2.0", "minimist": "^1.2.0",
@ -46,9 +46,9 @@
"pinpoint": "^1.1.0", "pinpoint": "^1.1.0",
"request": "^2.88.0", "request": "^2.88.0",
"request-promise-native": "^1.0.7", "request-promise-native": "^1.0.7",
"rimraf": "^2.6.3", "rimraf": "^3.0.0",
"semver": "^6.3.0", "semver": "^6.3.0",
"terser": "^3.16.1" "terser": "^4.3.4"
}, },
"bin": { "bin": {
"ospec": "./ospec/bin/ospec" "ospec": "./ospec/bin/ospec"

20
pathname/tests/index.html
View file

@ -1,20 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="../../module/module.js"></script>
<script src="../../ospec/ospec.js"></script>
<script src="../../pathname/build.js"></script>
<script src="../../pathname/parse.js"></script>
<script src="../../pathname/parseTemplate.js"></script>
<script src="test-buildPathname.js"></script>
<script src="test-parsePathname.js"></script>
<script src="test-parseTemplate.js"></script>
<script src="test-assign.js"></script>
<script>require("../../ospec/ospec").run()</script>
</body>
</html>

19
performance/index.html
View file

@ -2,24 +2,11 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
</head>
<body>
<script src="../module/module.js"></script>
<script src="../ospec/ospec.js"></script>
<script src="../querystring/parse.js"></script>
<script src="../test-utils/parseURL.js"></script>
<script src="../test-utils/callAsync.js"></script>
<script src="../test-utils/domMock.js"></script>
<script src="../test-utils/pushStateMock.js"></script>
<script src="../test-utils/xhrMock.js"></script>
<script src="../test-utils/browserMock.js"></script>
<script src="../render/vnode.js"></script>
<script src="../render/render.js"></script>
<script src="../render/hyperscript.js"></script>
<script src="../node_modules/lodash/lodash.js"></script> <script src="../node_modules/lodash/lodash.js"></script>
<script src="../node_modules/benchmark/benchmark.js"></script> <script src="../node_modules/benchmark/benchmark.js"></script>
<script src="../mithril.js"></script>
<script src="test-perf.js"></script> <script src="test-perf.js"></script>
</head>
<!-- test-perf runs itself for CLI usage --> <body>
</body> </body>
</html> </html>

387
performance/test-perf.js
View file

@ -1,4 +1,3 @@
/* global Benchmark */
"use strict" "use strict"
/* Based off of preact's perf tests, so including their MIT license */ /* Based off of preact's perf tests, so including their MIT license */
@ -26,67 +25,141 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE. SOFTWARE.
*/ */
var browserMock = require("../test-utils/browserMock") // Note: this tests against the generated bundle in browsers, but it tests
// against `index.js` in Node. Please do keep that in mind while testing.
//
// Mithril and Benchmark.js are loaded globally via bundle in the browser, so
// this doesn't require a CommonJS sham polyfill.
// Do this silly dance so browser testing works // I add it globally just so it's visible in the tests.
var B = typeof Benchmark === "undefined" ? require("benchmark") : Benchmark /* global m, rootElem: true */
var scratch;
// set up browser env on before running tests // set up browser env on before running tests
var doc = typeof document !== "undefined" ? document : null var isDOM = typeof window !== "undefined"
var Benchmark
if(!doc) { if (isDOM) {
var mock = browserMock() Benchmark = window.Benchmark
if (typeof global !== "undefined") { global.window = mock } window.rootElem = null
} else {
doc = mock.document /* eslint-disable global-require */
global.window = require("../test-utils/browserMock")()
global.document = window.document
// We're benchmarking renders, not our throttling.
global.requestAnimationFrame = function () {
throw new Error("This should never be called.")
}
global.m = require("../index.js")
global.rootElem = null
Benchmark = require("benchmark")
/* eslint-enable global-require */
} }
var m = require("../render/hyperscript") function cycleRoot() {
m.render = require("../render/render")(window) if (rootElem) document.body.removeChild(rootElem)
document.body.appendChild(rootElem = document.createElement("div"))
function resetScratch() {
doc.documentElement.innerHTML = "<div></div>"
scratch = doc.documentElement.firstChild
} }
resetScratch()
// Initialize benchmark suite // Initialize benchmark suite
var suite = new B.Suite("mithril perf") Benchmark.options.async = true
var xuite = {add: function(options) {console.log("skipping " + options.name)}} // eslint-disable-line no-unused-vars Benchmark.options.initCount = 10
Benchmark.options.minSamples = 40
suite.on("start", function() { if (isDOM) {
this.start = Date.now(); // Wait long enough for the browser to actually commit the DOM changes to
}) // the screen before moving on to the next cycle, so things are at least
// reasonably fresh each cycle.
Benchmark.options.delay = 1 / 30 /* frames per second */
}
suite.on("cycle", function(e) { var suite = new Benchmark.Suite("mithril perf", {
onStart: function () {
this.start = Date.now()
},
onCycle: function (e) {
console.log(e.target.toString()) console.log(e.target.toString())
cycleRoot()
},
resetScratch() onComplete: function () {
})
suite.on("complete", function() {
console.log("Completed perf tests in " + (Date.now() - this.start) + "ms") console.log("Completed perf tests in " + (Date.now() - this.start) + "ms")
},
onError: function (e) {
console.error(e)
},
})
// eslint-disable-next-line no-unused-vars
var xsuite = {add: function(name) { console.log("skipping " + name) }}
suite.add("construct large vnode tree", {
setup: function () {
this.fields = []
for(var i=100; i--;) {
this.fields.push((i * 999).toString(36))
}
},
fn: function () {
m(".foo.bar[data-foo=bar]", {p: 2},
m("header",
m("h1.asdf", "a ", "b", " c ", 0, " d"),
m("nav",
m("a[href=/foo]", "Foo"),
m("a[href=/bar]", "Bar")
)
),
m("main",
m("form",
{onSubmit: function () {}},
m("input[type=checkbox][checked]"),
m("input[type=checkbox]"),
m("fieldset",
this.fields.map(function (field) {
return m("label",
field,
":",
m("input", {placeholder: field})
)
})
),
m("button-bar",
m("button",
{style: "width:10px; height:10px; border:1px solid #FFF;"},
"Normal CSS"
),
m("button",
{style: "top:0 ; right: 20"},
"Poor CSS"
),
m("button",
{style: "invalid-prop:1;padding:1px;font:12px/1.1 arial,sans-serif;", icon: true},
"Poorer CSS"
),
m("button",
{style: {margin: 0, padding: "10px", overflow: "visible"}},
"Object CSS"
)
)
)
)
)
},
}) })
suite.on("error", console.error.bind(console)) suite.add("rerender identical vnode", {
setup: function () {
suite.add({ this.cached = m(".foo.bar[data-foo=bar]", {p: 2},
name : "rerender identical vnode",
onStart : function() {
this.vdom = m("div", {class: "foo bar", "data-foo": "bar", p: 2},
m("header", m("header",
m("h1", {class: "asdf"}, "a ", "b", " c ", 0, " d"), m("h1.asdf", "a ", "b", " c ", 0, " d"),
m("nav", m("nav",
m("a", {href: "/foo"}, "Foo"), m("a", {href: "/foo"}, "Foo"),
m("a", {href: "/bar"}, "Bar") m("a", {href: "/bar"}, "Bar")
) )
), ),
m("main", m("main",
m("form", {onSubmit: function onSubmit() {}}, m("form", {onSubmit: function () {}},
m("input", {type: "checkbox", checked: true}), m("input", {type: "checkbox", checked: true}),
m("input", {type: "checkbox", checked: false}), m("input", {type: "checkbox", checked: false}),
m("fieldset", m("fieldset",
@ -119,24 +192,23 @@ suite.add({
) )
) )
}, },
fn : function() { fn: function () {
m.render(scratch, this.vdom) m.render(rootElem, this.cached)
} },
}) })
suite.add({ suite.add("rerender same tree", {
name : "rerender same tree", fn: function () {
fn : function() { m.render(rootElem, m(".foo.bar[data-foo=bar]", {p: 2},
m.render(scratch, m("div", {class: "foo bar", "data-foo": "bar", p: 2},
m("header", m("header",
m("h1", {class: "asdf"}, "a ", "b", " c ", 0, " d"), m("h1.asdf", "a ", "b", " c ", 0, " d"),
m("nav", m("nav",
m("a", {href: "/foo"}, "Foo"), m("a", {href: "/foo"}, "Foo"),
m("a", {href: "/bar"}, "Bar") m("a", {href: "/bar"}, "Bar")
) )
), ),
m("main", m("main",
m("form", {onSubmit: function onSubmit() {}}, m("form", {onSubmit: function () {}},
m("input", {type: "checkbox", checked: true}), m("input", {type: "checkbox", checked: true}),
m("input", {type: "checkbox", checked: false}), m("input", {type: "checkbox", checked: false}),
m("fieldset", m("fieldset",
@ -168,38 +240,44 @@ suite.add({
) )
) )
)) ))
} },
}) })
suite.add({ suite.add("add large nested tree", {
name : "construct large VDOM tree", setup: function () {
onStart : function() {
var fields = [] var fields = []
for(var i=100; i--;) { for(var i=100; i--;) {
fields.push((i * 999).toString(36)) fields.push((i * 999).toString(36))
} }
this.fields = fields; var NestedHeader = {
}, view: function () {
return m("header",
fn : function () { m("h1.asdf", "a ", "b", " c ", 0, " d"),
m("div", {class: "foo bar", "data-foo": "bar", p: 2},
m("header",
m("h1", {class: "asdf"}, "a ", "b", " c ", 0, " d"),
m("nav", m("nav",
m("a", {href: "/foo"}, "Foo"), m("a", {href: "/foo"}, "Foo"),
m("a", {href: "/bar"}, "Bar") m("a", {href: "/bar"}, "Bar")
) )
), )
m("main", }
m("form", }
{onSubmit: function onSubmit() {}},
m("input", {type: "checkbox", checked: true}), var NestedForm = {
m("input", {type: "checkbox"}), view: function () {
return m("form", {onSubmit: function () {}},
m("input[type=checkbox][checked]"),
m("input[type=checkbox]", {checked: false}),
m("fieldset", m("fieldset",
this.fields.map(function (field) { m("label",
m("input[type=radio][checked]")
),
m("label",
m("input[type=radio]")
)
),
m("fieldset",
fields.map(function (field) {
return m("label", return m("label",
field, field,
":", ":",
@ -207,49 +285,77 @@ suite.add({
) )
}) })
), ),
m("button-bar", m(NestedButtonBar, null)
m("button", )
}
}
var NestedButtonBar = {
view: function () {
return m(".button-bar",
m(NestedButton,
{style: "width:10px; height:10px; border:1px solid #FFF;"}, {style: "width:10px; height:10px; border:1px solid #FFF;"},
"Normal CSS" "Normal CSS"
), ),
m("button", m(NestedButton,
{style: "top:0 ; right: 20"}, {style: "top:0 ; right: 20"},
"Poor CSS" "Poor CSS"
), ),
m("button", m(NestedButton,
{style: "invalid-prop:1;padding:1px;font:12px/1.1 arial,sans-serif;", icon: true}, {style: "invalid-prop:1;padding:1px;font:12px/1.1 arial,sans-serif;", icon: true},
"Poorer CSS" "Poorer CSS"
), ),
m("button", m(NestedButton,
{style: {margin: 0, padding: "10px", overflow: "visible"}}, {style: {margin: 0, padding: "10px", overflow: "visible"}},
"Object CSS" "Object CSS"
) )
) )
) }
) }
var NestedButton = {
view: function (vnode) {
return m("button", m.censor(vnode.attrs), vnode.children)
}
}
var NestedMain = {
view: function () {
return m(NestedForm)
}
}
this.NestedRoot = {
view: function () {
return m("div.foo.bar[data-foo=bar]",
{p: 2},
m(NestedHeader),
m(NestedMain)
) )
} }
}
},
fn: function () {
m.render(rootElem, m(this.NestedRoot))
},
}) })
suite.add({ suite.add("mutate styles/properties", {
name : "mutate styles/properties", setup: function () {
// minSamples: 100, function get(obj, i) { return obj[i % obj.length] }
onStart : function () {
var counter = 0 var counter = 0
var keyLooper = function (n) { return function (c) { return c % n ? (c + "px") : c } }
var get = function (obj, i) { return obj[i%obj.length] }
var classes = ["foo", "foo bar", "", "baz-bat", null, "fooga", null, null, undefined] var classes = ["foo", "foo bar", "", "baz-bat", null, "fooga", null, null, undefined]
var styles = [] var styles = []
var multivalue = ["0 1px", "0 0 1px 0", "0", "1px", "20px 10px", "7em 5px", "1px 0 5em 2px"] var multivalue = ["0 1px", "0 0 1px 0", "0", "1px", "20px 10px", "7em 5px", "1px 0 5em 2px"]
var stylekeys = [ var stylekeys = [
["left", keyLooper(3)], ["left", function (c) { return c % 3 ? c + "px" : c }],
["top", keyLooper(2)], ["top", function (c) { return c % 2 ? c + "px" : c }],
["margin", function (c) { return get(multivalue, c).replace("1px", c+"px") }], ["margin", function (c) { return get(multivalue, c).replace("1px", c+"px") }],
["padding", function (c) { return get(multivalue, c) }], ["padding", function (c) { return get(multivalue, c) }],
["position", function (c) { return c%5 ? c%2 ? "absolute" : "relative" : null }], ["position", function (c) { return c%5 ? c%2 ? "absolute" : "relative" : null }],
["display", function (c) { return c%10 ? c%2 ? "block" : "inline" : "none" }], ["display", function (c) { return c%10 ? c%2 ? "block" : "inline" : "none" }],
["color", function (c) { return ("rgba(" + (c%255) + ", " + (255 - c%255) + ", " + (50+c%150) + ", " + (c%50/50) + ")") }], ["color", function (c) { return ("rgba(" + (c%255) + ", " + (255 - c%255) + ", " + (50+c%150) + ", " + (c%50/50) + ")") }],
["border", function (c) { return c%5 ? ((c%10) + "px " + (c%2?"solid":"dotted") + " " + (stylekeys[6][1](c))) : "" }] ["border", function (c) { return c%5 ? (c%10) + "px " + (c%2?"solid":"dotted") + " " + stylekeys[6][1](c) : "" }]
] ]
var i, j, style, conf var i, j, style, conf
@ -262,19 +368,20 @@ suite.add({
styles[i] = style styles[i] = style
} }
this.count = 0 var count = 0
this.app = function (index) {
var last = index + 300 this.app = function () {
var vnodes = [] var vnodes = []
for (; index < last; index++) vnodes.push( for (var index = ++count, last = index + 300; index < last; index++) {
vnodes.push(
m("div.booga", m("div.booga",
{ {
class: get(classes, index), class: get(classes, index),
"data-index": index, "data-index": index,
title: index.toString(36) title: index.toString(36)
}, },
m("input.dooga", {type: "checkbox", checked: index % 3 == 0}), m("input.dooga", {type: "checkbox", checked: index % 3 === 0}),
m("input", {value: "test " + (Math.floor(index / 4)), disabled: index % 10 ? null : true}), m("input", {value: "test " + Math.floor(index / 4), disabled: index % 10 ? null : true}),
m("div", {class: get(classes, index * 11)}, m("div", {class: get(classes, index * 11)},
m("p", {style: get(styles, index)}, "p1"), m("p", {style: get(styles, index)}, "p1"),
m("p", {style: get(styles, index + 1)}, "p2"), m("p", {style: get(styles, index + 1)}, "p2"),
@ -283,31 +390,32 @@ suite.add({
) )
) )
) )
}
return vnodes return vnodes
} }
}, },
fn: function () {
fn : function () { m.render(rootElem, this.app())
m.render(scratch, this.app(++this.count)) },
}
}) })
// Shared components for node recyling benchmarks suite.add("repeated add/removal", {
var Header = { setup: function () {
view : function () { var RepeatedHeader = {
view: function () {
return m("header", return m("header",
m("h1", {class: "asdf"}, "a ", "b", " c ", 0, " d"), m("h1.asdf", "a ", "b", " c ", 0, " d"),
m("nav", m("nav",
m("a", {href: "/foo"}, "Foo"), m("a", {href: "/foo"}, "Foo"),
m("a", {href: "/bar"}, "Bar") m("a", {href: "/bar"}, "Bar")
) )
) )
} }
} }
var Form = { var RepeatedForm = {
view : function () { view: function () {
return m("form", {onSubmit: function onSubmit() {}}, return m("form", {onSubmit: function () {}},
m("input", {type: "checkbox", checked: true}), m("input", {type: "checkbox", checked: true}),
m("input", {type: "checkbox", checked: false}), m("input", {type: "checkbox", checked: false}),
m("fieldset", m("fieldset",
@ -318,69 +426,68 @@ var Form = {
m("input", {type: "radio"}) m("input", {type: "radio"})
) )
), ),
m(ButtonBar, null) m(RepeatedButtonBar, null)
) )
} }
} }
var ButtonBar = { var RepeatedButtonBar = {
view : function () { view: function () {
return m("button-bar", return m(".button-bar",
m(Button, m(RepeatedButton,
{style: "width:10px; height:10px; border:1px solid #FFF;"}, {style: "width:10px; height:10px; border:1px solid #FFF;"},
"Normal CSS" "Normal CSS"
), ),
m(Button, m(RepeatedButton,
{style: "top:0 ; right: 20"}, {style: "top:0 ; right: 20"},
"Poor CSS" "Poor CSS"
), ),
m(Button, m(RepeatedButton,
{style: "invalid-prop:1;padding:1px;font:12px/1.1 arial,sans-serif;", icon: true}, {style: "invalid-prop:1;padding:1px;font:12px/1.1 arial,sans-serif;", icon: true},
"Poorer CSS" "Poorer CSS"
), ),
m(Button, m(RepeatedButton,
{style: {margin: 0, padding: "10px", overflow: "visible"}}, {style: {margin: 0, padding: "10px", overflow: "visible"}},
"Object CSS" "Object CSS"
) )
) )
} }
} }
var Button = { var RepeatedButton = {
view : function (vnode) { view: function (vnode) {
return m("button", vnode.attrs, vnode.children) return m("button", vnode.attrs, vnode.children)
} }
}
var Main = {
view : function () {
return m(Form)
} }
}
var Root = { var RepeatedMain = {
view : function () { view: function () {
return m("div", return m(RepeatedForm)
{class: "foo bar", "data-foo": "bar", p: 2}, }
m(Header, null), }
m(Main, null)
this.RepeatedRoot = {
view: function () {
return m("div.foo.bar[data-foo=bar]",
{p: 2},
m(RepeatedHeader, null),
m(RepeatedMain, null)
) )
} }
}
suite.add({
name : "repeated trees",
fn : function () {
m.render(scratch, [m(Root)])
m.render(scratch, [])
// Second empty render is to clear out the pool of nodes
// so that there's nothing that can be recycled
m.render(scratch, [])
} }
},
fn: function () {
m.render(rootElem, [m(this.RepeatedRoot)])
m.render(rootElem, [])
},
}) })
suite.run({ if (isDOM) {
async : true window.onload = function () {
}) cycleRoot()
suite.run()
}
} else {
cycleRoot()
suite.run()
}

13
promise/.eslintrc.js Normal file
View file

@ -0,0 +1,13 @@
module.exports = {
"extends": "../.eslintrc.js",
"env": {
"browser": null,
"es6": null,
},
"parserOptions": {
"ecmaVersion": 5,
},
"rules": {
"no-process-env": "off",
},
};

1
promise/promise.js
View file

@ -1,3 +1,4 @@
/* global window */
"use strict" "use strict"
var PromisePolyfill = require("./polyfill") var PromisePolyfill = require("./polyfill")

16
promise/tests/index.html
View file

@ -1,16 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="../../module/module.js"></script>
<script src="../../ospec/ospec.js"></script>
<script src="../../test-utils/callAsync.js"></script>
<script src="../../promise/promise.js"></script>
<script src="test-promise.js"></script>
<script>require("../../ospec/ospec").run()</script>
</body>
</html>

17
promise/tests/test-promise.js
View file

@ -1,8 +1,19 @@
/* global window */
"use strict" "use strict"
var o = require("../../ospec/ospec") var o, callAsync, Promise
var callAsync = require("../../test-utils/callAsync")
var Promise = require("../../promise/polyfill") if (typeof require !== "undefined") {
/* eslint-disable global-require */
callAsync = require("../../test-utils/callAsync")
o = require("../../ospec/ospec")
Promise = require("../../promise/polyfill")
/* eslint-enable global-require */
} else {
callAsync = typeof setImmediate === "function" ? setImmediate : setTimeout
o = window.o
Promise = window.PromisePolyfill
}
o.spec("promise", function() { o.spec("promise", function() {
o.spec("constructor", function() { o.spec("constructor", function() {

28
promise/tests/test.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../../ospec/ospec.js"></script>
<!--
Pretend a CommonJS environment exists just enough for the polyfill to
load, but keep it narrow.
-->
<script>
window.module = {exports:null}
</script>
<script src="../polyfill.js"></script>
<script>
PromisePolyfill = module.exports
delete module.exports
delete window.module
</script>
<script src="./test-promise.js"></script>
<script>
o.run()
</script>
</head>
<body>
</body>
</html>

17
querystring/tests/index.html
View file

@ -1,17 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="../../module/module.js"></script>
<script src="../../ospec/ospec.js"></script>
<script src="../../querystring/parse.js"></script>
<script src="../../querystring/build.js"></script>
<script src="test-parseQueryString.js"></script>
<script src="test-buildQueryString.js"></script>
<script>require("../../ospec/ospec").run()</script>
</body>
</html>

50
render/tests/index.html
View file

@ -1,50 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="../../module/module.js"></script>
<script src="../../ospec/ospec.js"></script>
<script src="../../test-utils/callAsync.js"></script>
<script src="../../test-utils/domMock.js"></script>
<script src="../../test-utils/components.js"></script>
<script src="../../render/vnode.js"></script>
<script src="../../render/trust.js"></script>
<script src="../../render/fragment.js"></script>
<script src="../../render/hyperscript.js"></script>
<script src="../../render/render.js"></script>
<script src="../../promise/promise.js"></script>
<script src="test-hyperscript.js"></script>
<script src="test-trust.js"></script>
<script src="test-fragment.js"></script>
<script src="test-normalize.js"></script>
<script src="test-normalizeChildren.js"></script>
<script src="test-normalizeComponentChildren.js"></script>
<script src="test-createText.js"></script>
<script src="test-createHTML.js"></script>
<script src="test-createFragment.js"></script>
<script src="test-createElement.js"></script>
<script src="test-createNodes.js"></script>
<script src="test-updateText.js"></script>
<script src="test-updateHTML.js"></script>
<script src="test-updateFragment.js"></script>
<script src="test-updateElement.js"></script>
<script src="test-updateNodes.js"></script>
<script src="test-oninit.js"></script>
<script src="test-oncreate.js"></script>
<script src="test-onupdate.js"></script>
<script src="test-onremove.js"></script>
<script src="test-onbeforeremove.js"></script>
<script src="test-onbeforeupdate.js"></script>
<script src="test-attributes.js"></script>
<script src="test-event.js"></script>
<script src="test-input.js"></script>
<script src="test-textContent.js"></script>
<script src="test-component.js"></script>
<script src="test-render.js"></script>
<script>require("../../ospec/ospec").run()</script>
</body>
</html>

23
request/tests/index.html
View file

@ -1,23 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="../../module/module.js"></script>
<script src="../../ospec/ospec.js"></script>
<script src="../../test-utils/callAsync.js"></script>
<script src="../../querystring/parse.js"></script>
<script src="../../test-utils/parseURL.js"></script>
<script src="../../test-utils/callAsync.js"></script>
<script src="../../test-utils/xhrMock.js"></script>
<script src="../../querystring/build.js"></script>
<script src="../../promise/promise.js"></script>
<script src="../../request/request.js"></script>
<script src="test-request.js"></script>
<script src="test-jsonp.js"></script>
<script>require("../../ospec/ospec").run()</script>
</body>
</html>

183
scripts/_bundler-impl.js Normal file
View file

@ -0,0 +1,183 @@
"use strict"
const fs = require("fs")
const path = require("path")
const execFileSync = require("child_process").execFileSync
const util = require("util")
const readFile = util.promisify(fs.readFile)
const access = util.promisify(fs.access)
function isFile(filepath) {
return access(filepath).then(() => true, () => false)
}
function escapeRegExp(string) {
return string.replace(/[|\\{}()[\]^$+*?.-]/g, "\\$&")
}
function escapeReplace(string) {
return string.replace(/\$/g, "\\$&")
}
async function resolve(filepath, filename) {
if (filename[0] !== ".") {
// resolve as npm dependency
const packagePath = `./node_modules/${filename}/package.json`
let json, meta
try {
json = await readFile(packagePath, "utf8")
} catch (e) {
meta = {}
}
if (json) {
try {
meta = JSON.parse(json)
}
catch (e) {
throw new Error(`invalid JSON for ${packagePath}: ${json}`)
}
}
const main = `./node_modules/${filename}/${meta.main || `${filename}.js`}`
return path.resolve(await isFile(main) ? main : `./node_modules/${filename}/index.js`)
}
else {
// resolve as local dependency
return path.resolve(path.dirname(filepath), filename + ".js")
}
}
function matchAll(str, regexp) {
regexp.lastIndex = 0
const result = []
let exec
while ((exec = regexp.exec(str)) != null) result.push(exec)
return result
}
let error
module.exports = async (input) => {
const modules = new Map()
const bindings = new Map()
const declaration = /^\s*(?:var|let|const|function)[\t ]+([\w_$]+)/gm
const include = /(?:((?:var|let|const|,|)[\t ]*)([\w_$\.\[\]"'`]+)(\s*=\s*))?require\(([^\)]+)\)(\s*[`\.\(\[])?/gm
let uuid = 0
async function process(filepath, data) {
for (const [, binding] of matchAll(data, declaration)) bindings.set(binding, 0)
const tasks = []
for (const [, def = "", variable = "", eq = "", dep, rest = ""] of matchAll(data, include)) {
tasks.push({filename: JSON.parse(dep), def, variable, eq, rest})
}
const imports = await Promise.all(
tasks.map((t) => resolve(filepath, t.filename))
)
const results = []
for (const [i, task] of tasks.entries()) {
const dependency = imports[i]
let pre = "", def = task.def
if (def[0] === ",") def = "\nvar ", pre = "\n"
const localUUID = uuid // global uuid can update from nested `process` call, ensure same id is used on declaration and consumption
const existingModule = modules.get(dependency)
modules.set(dependency, task.rest ? `_${localUUID}` : task.variable)
const code = await process(
dependency,
pre + (
existingModule == null
? await exportCode(task.filename, dependency, def, task.variable, task.eq, task.rest, localUUID)
: def + task.variable + task.eq + existingModule
)
)
uuid++
results.push(code + task.rest)
}
let i = 0
return data.replace(include, () => results[i++])
}
async function exportCode(filename, filepath, def, variable, eq, rest, uuid) {
let code = await readFile(filepath, "utf-8")
// if there's a syntax error, report w/ proper stack trace
try {
new Function(code)
}
catch (e) {
try {
execFileSync("node", ["--check", filepath], {
stdio: "pipe",
})
}
catch (e) {
if (e.message !== error) {
error = e.message
console.log(`\x1b[31m${e.message}\x1b[0m`)
}
}
}
// disambiguate collisions
const targetPromises = []
code.replace(include, (match, def, variable, eq, dep) => {
targetPromises.push(resolve(filepath, JSON.parse(dep)))
})
const ignoredTargets = await Promise.all(targetPromises)
const ignored = new Set()
for (const target of ignoredTargets) {
const binding = modules.get(target)
if (binding != null) ignored.add(binding)
}
if (new RegExp(`module\\.exports\\s*=\\s*${variable}\s*$`, "m").test(code)) ignored.add(variable)
for (const [binding, count] of bindings) {
if (!ignored.has(binding)) {
const before = code
code = code.replace(
new RegExp(`(\\b)${escapeRegExp(binding)}\\b`, "g"),
escapeReplace(binding) + count
)
if (before !== code) bindings.set(binding, count + 1)
}
}
// fix strings that got mangled by collision disambiguation
const string = /(["'])((?:\\\1|.)*?)(\1)/g
const candidates = Array.from(bindings, ([binding, count]) => escapeRegExp(binding) + (count - 1)).join("|")
const variables = new RegExp(candidates, "g")
code = code.replace(string, (match, open, data, close) => {
const fixed = data.replace(variables, (match) => match.replace(/\d+$/, ""))
return open + fixed + close
})
//fix props
const props = new RegExp(`((?:[^:]\\/\\/.*)?\\.\\s*)(${candidates})|([\\{,]\\s*)(${candidates})(\\s*:)`, "gm")
code = code.replace(props, (match, dot, a, pre, b, post) => {
// Don't do anything because dot was matched in a comment
if (dot && dot.indexOf("//") === 1) return match
if (dot) return dot + a.replace(/\d+$/, "")
return pre + b.replace(/\d+$/, "") + post
})
return code
.replace(/("|')use strict\1;?/gm, "") // remove extraneous "use strict"
.replace(/module\.exports\s*=\s*/gm, escapeReplace(rest ? `var _${uuid}` + eq : def + (rest ? "_" : "") + variable + eq)) // export
+ (rest ? `\n${def}${variable}${eq}_${uuid}` : "") // if `rest` is truthy, it means the expression is fluent or higher-order (e.g. require(path).foo or require(path)(foo)
}
const code = ";(function() {\n" +
(await process(path.resolve(input), await readFile(input, "utf-8")))
.replace(/^\s*((?:var|let|const|)[\t ]*)([\w_$\.]+)(\s*=\s*)(\2)(?=[\s]+(\w)|;|$)/gm, "") // remove assignments to self
.replace(/;+(\r|\n|$)/g, ";$1") // remove redundant semicolons
.replace(/(\r|\n)+/g, "\n").replace(/(\r|\n)$/, "") + // remove multiline breaks
"\n}());"
//try {new Function(code); console.log(`build completed at ${new Date()}`)} catch (e) {}
error = null
return code
}

4
bundler/README.md → scripts/bundler-readme.md
View file

@ -9,14 +9,14 @@ License: MIT
This bundler attempts to aggressively bundle CommonJS modules by assuming the dependency tree is static, similar to what Rollup does for ES6 modules. This bundler attempts to aggressively bundle CommonJS modules by assuming the dependency tree is static, similar to what Rollup does for ES6 modules.
Most browsers don't support ES6 `import/export` syntax, but we can achieve modularity by using CommonJS module syntax and employing [`module.js`](../module/README.md) in browser environments. Most browsers don't support ES6 `import/export` syntax, but we can achieve modularity by using CommonJS module syntax and transpiling it.
Webpack is conservative and treats CommonJS modules as non-statically-analyzable since `require` and `module.exports` are legally allowed everywhere. Therefore, it must generate extra code to resolve dependencies at runtime (i.e. `__webpack_require()`). Rollup only works with ES6 modules. ES6 modules can be bundled more efficiently because they are statically analyzable, but some use cases are difficult to handle due to ES6's support for cyclic dependencies and hosting rules. This bundler assumes code is written in CommonJS style but follows a strict set of rules that emulate statically analyzable code and favors the usage of the factory pattern instead of relying on obscure corners of the Javascript language (hoisting rules and binding semantics). Webpack is conservative and treats CommonJS modules as non-statically-analyzable since `require` and `module.exports` are legally allowed everywhere. Therefore, it must generate extra code to resolve dependencies at runtime (i.e. `__webpack_require()`). Rollup only works with ES6 modules. ES6 modules can be bundled more efficiently because they are statically analyzable, but some use cases are difficult to handle due to ES6's support for cyclic dependencies and hosting rules. This bundler assumes code is written in CommonJS style but follows a strict set of rules that emulate statically analyzable code and favors the usage of the factory pattern instead of relying on obscure corners of the Javascript language (hoisting rules and binding semantics).
### Caveats ### Caveats
- Only supports modules that have the `require` and `module.exports` statement declared at the top-level scope before all other code, i.e. it does not support CommonJS modules that rely on dynamic importing/exporting. This means modules should only export a pure function or export a factory function if there are multiple statements and/or internal module state. The factory function pattern allows easier dependency injection in stateful modules, thus making modules testable. - Only supports modules that have the `require` and `module.exports` statement declared at the top-level scope before all other code, i.e. it does not support CommonJS modules that rely on dynamic importing/exporting. This means modules should only export a pure function or export a factory function if there are multiple statements and/or internal module state. The factory function pattern allows easier dependency injection in stateful modules, thus making modules testable.
- Changes the semantics of value/binding exporting between unbundled and bundled code, and therefore relying on those semantics is discouraged. Instead, it is recommended that module consumers inject dependencies via the factory function pattern - Changes the semantics of value/binding exporting between unbundled and bundled code, and therefore relying on those semantics is discouraged.
- Top level strictness is infectious (i.e. if entry file is in `"use strict"` mode, all modules inherit strict mode, and conversely, if the entry file is not in strict mode, all modules are pulled out of strict mode) - Top level strictness is infectious (i.e. if entry file is in `"use strict"` mode, all modules inherit strict mode, and conversely, if the entry file is not in strict mode, all modules are pulled out of strict mode)
- Currently only supports assignments to `module.exports` (i.e. `module.exports.foo = bar` will not work) - Currently only supports assignments to `module.exports` (i.e. `module.exports.foo = bar` will not work)
- It is tiny and dependency-free because it uses regular expressions, and it only supports the narrow range of import/export declaration patterns outlined above. - It is tiny and dependency-free because it uses regular expressions, and it only supports the narrow range of import/export declaration patterns outlined above.

70
scripts/bundler.js Normal file
View file

@ -0,0 +1,70 @@
"use strict"
const fs = require("fs")
const zlib = require("zlib")
const chokidar = require("chokidar")
const Terser = require("terser")
const util = require("util")
const readFile = util.promisify(fs.readFile)
const writeFile = util.promisify(fs.writeFile)
const gzip = util.promisify(zlib.gzip)
const bundle = require("./_bundler-impl")
const aliases = {o: "output", m: "minify", w: "watch", s: "save"}
const params = Object.create(null)
let command
for (let arg of process.argv.slice(2)) {
if (arg[0] === '"') arg = JSON.parse(arg)
if (arg[0] === "-") {
if (command != null) add(true)
command = arg.replace(/\-+/g, "")
}
else if (command != null) add(arg)
else params.input = arg
}
if (command != null) add(true)
function add(value) {
params[aliases[command] || command] = value
command = null
}
function format(n) {
return n.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")
}
async function build() {
const original = await bundle(params.input)
if (!params.minify) {
await writeFile(params.output, original, "utf-8")
return
}
console.log("minifying...")
const minified = Terser.minify(original)
if (minified.error) throw new Error(minified.error)
await writeFile(params.output, minified.code, "utf-8")
const originalSize = Buffer.byteLength(original, "utf-8")
const compressedSize = Buffer.byteLength(minified.code, "utf-8")
const originalGzipSize = (await gzip(original)).byteLength
const compressedGzipSize = (await gzip(minified.code)).byteLength
console.log("Original size: " + format(originalGzipSize) + " bytes gzipped (" + format(originalSize) + " bytes uncompressed)")
console.log("Compiled size: " + format(compressedGzipSize) + " bytes gzipped (" + format(compressedSize) + " bytes uncompressed)")
if (params.save) {
const readme = await readFile("./README.md", "utf8")
const kb = compressedGzipSize / 1000
await writeFile("./README.md",
readme.replace(
/(<!-- size -->)(.+?)(<!-- \/size -->)/,
"$1" + (kb % 1 ? kb.toFixed(2) : kb) + " KB$3"
)
)
}
}
build()
if (params.watch) chokidar.watch(".", {ignored: params.output}).on("all", build)

39
scripts/minify-stream.js Normal file
View file

@ -0,0 +1,39 @@
#!/usr/bin/env node
/* eslint-disable no-process-exit */
"use strict"
// This is my temporary hack to simplify deployment until I fix the underlying
// problems in these bugs:
// - https://github.com/MithrilJS/mithril.js/issues/2417
// - https://github.com/MithrilJS/mithril.js/pull/2422
const {promises: fs} = require("fs")
const path = require("path")
const zlib = require("zlib")
const Terser = require("terser")
function format(n) {
return n.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")
}
module.exports = minify
async function minify() {
const input = path.resolve(__dirname, "../stream/stream.js")
const output = path.resolve(__dirname, "../stream/stream.min.js")
const original = await fs.readFile(input, "utf-8")
const minified = Terser.minify(original)
if (minified.error) throw new Error(minified.error)
await fs.writeFile(output, minified.code, "utf-8")
const originalSize = Buffer.byteLength(original, "utf-8")
const compressedSize = Buffer.byteLength(minified.code, "utf-8")
const originalGzipSize = zlib.gzipSync(original).byteLength
const compressedGzipSize = zlib.gzipSync(minified.code).byteLength
console.log("Original size: " + format(originalGzipSize) + " bytes gzipped (" + format(originalSize) + " bytes uncompressed)")
console.log("Compiled size: " + format(compressedGzipSize) + " bytes gzipped (" + format(compressedSize) + " bytes uncompressed)")
}
/* eslint-disable global-require */
if (require.main === module) {
require("./_command")({exec: minify})
}

294
scripts/tests/test-bundler.js Normal file
View file

@ -0,0 +1,294 @@
"use strict"
const fs = require("fs")
const util = require("util")
const access = util.promisify(fs.access)
const writeFile = util.promisify(fs.writeFile)
const unlink = util.promisify(fs.unlink)
const o = require("../../ospec/ospec")
const bundle = require("../_bundler-impl")
o.spec("bundler", async () => {
let filesCreated
const ns = "./"
async function write(filepath, data) {
try {
await access(ns + filepath)
} catch (e) {
return writeFile(ns + filepath, data, "utf8")
}
throw new Error(`Don't call \`write('${filepath}')\`. Cannot overwrite file.`)
}
function setup(files) {
filesCreated = Object.keys(files)
return Promise.all(filesCreated.map((f) => write(f, files[f])))
}
o.afterEach(() => Promise.all(
filesCreated.map((filepath) => unlink(ns + filepath))
))
o("relative imports works", async () => {
await setup({
"a.js": 'var b = require("./b")',
"b.js": "module.exports = 1",
})
o(await bundle(ns + "a.js")).equals(";(function() {\nvar b = 1\n}());")
})
o("relative imports works with semicolons", async () => {
await setup({
"a.js": 'var b = require("./b");',
"b.js": "module.exports = 1;",
})
o(await bundle(ns + "a.js")).equals(";(function() {\nvar b = 1;\n}());")
})
o("relative imports works with let", async () => {
await setup({
"a.js": 'let b = require("./b")',
"b.js": "module.exports = 1",
})
o(await bundle(ns + "a.js")).equals(";(function() {\nlet b = 1\n}());")
})
o("relative imports works with const", async () => {
await setup({
"a.js": 'const b = require("./b")',
"b.js": "module.exports = 1",
})
o(await bundle(ns + "a.js")).equals(";(function() {\nconst b = 1\n}());")
})
o("relative imports works with assignment", async () => {
await setup({
"a.js": 'var a = {}\na.b = require("./b")',
"b.js": "module.exports = 1",
})
o(await bundle(ns + "a.js")).equals(";(function() {\nvar a = {}\na.b = 1\n}());")
})
o("relative imports works with reassignment", async () => {
await setup({
"a.js": 'var b = {}\nb = require("./b")',
"b.js": "module.exports = 1",
})
o(await bundle(ns + "a.js")).equals(";(function() {\nvar b = {}\nb = 1\n}());")
})
o("relative imports removes extra use strict", async () => {
await setup({
"a.js": '"use strict"\nvar b = require("./b")',
"b.js": '"use strict"\nmodule.exports = 1',
})
o(await bundle(ns + "a.js")).equals(';(function() {\n"use strict"\nvar b = 1\n}());')
})
o("relative imports removes extra use strict using single quotes", async () => {
await setup({
"a.js": "'use strict'\nvar b = require(\"./b\")",
"b.js": "'use strict'\nmodule.exports = 1",
})
o(await bundle(ns + "a.js")).equals(";(function() {\n'use strict'\nvar b = 1\n}());")
})
o("relative imports removes extra use strict using mixed quotes", async () => {
await setup({
"a.js": '"use strict"\nvar b = require("./b")',
"b.js": "'use strict'\nmodule.exports = 1",
})
o(await bundle(ns + "a.js")).equals(';(function() {\n"use strict"\nvar b = 1\n}());')
})
o("works w/ window", async () => {
await setup({
"a.js": 'window.a = 1\nvar b = require("./b")',
"b.js": "module.exports = function() {return a}",
})
o(await bundle(ns + "a.js")).equals(";(function() {\nwindow.a = 1\nvar b = function() {return a}\n}());")
})
o("works without assignment", async () => {
await setup({
"a.js": 'require("./b")',
"b.js": "1 + 1",
})
o(await bundle(ns + "a.js")).equals(";(function() {\n1 + 1\n}());")
})
o("works if used fluently", async () => {
await setup({
"a.js": 'var b = require("./b").toString()',
"b.js": "module.exports = []",
})
o(await bundle(ns + "a.js")).equals(";(function() {\nvar _0 = []\nvar b = _0.toString()\n}());")
})
o("works if used fluently w/ multiline", async () => {
await setup({
"a.js": 'var b = require("./b")\n\t.toString()',
"b.js": "module.exports = []",
})
o(await bundle(ns + "a.js")).equals(";(function() {\nvar _0 = []\nvar b = _0\n\t.toString()\n}());")
})
o("works if used w/ curry", async () => {
await setup({
"a.js": 'var b = require("./b")()',
"b.js": "module.exports = function() {}",
})
o(await bundle(ns + "a.js")).equals(";(function() {\nvar _0 = function() {}\nvar b = _0()\n}());")
})
o("works if used w/ curry w/ multiline", async () => {
await setup({
"a.js": 'var b = require("./b")\n()',
"b.js": "module.exports = function() {}",
})
o(await bundle(ns + "a.js")).equals(";(function() {\nvar _0 = function() {}\nvar b = _0\n()\n}());")
})
o("works if used fluently in one place and not in another", async () => {
await setup({
"a.js": 'var b = require("./b").toString()\nvar c = require("./c")',
"b.js": "module.exports = []",
"c.js": 'var b = require("./b")\nmodule.exports = function() {return b}',
})
o(await bundle(ns + "a.js")).equals(";(function() {\nvar _0 = []\nvar b = _0.toString()\nvar b0 = _0\nvar c = function() {return b0}\n}());")
})
o("works if used in sequence", async () => {
await setup({
"a.js": 'var b = require("./b"), c = require("./c")',
"b.js": "module.exports = 1",
"c.js": "var x\nmodule.exports = 2",
})
o(await bundle(ns + "a.js")).equals(";(function() {\nvar b = 1\nvar x\nvar c = 2\n}());")
})
o("works if assigned to property", async () => {
await setup({
"a.js": 'var x = {}\nx.b = require("./b")\nx.c = require("./c")',
"b.js": "var bb = 1\nmodule.exports = bb",
"c.js": "var cc = 2\nmodule.exports = cc",
})
o(await bundle(ns + "a.js")).equals(";(function() {\nvar x = {}\nvar bb = 1\nx.b = bb\nvar cc = 2\nx.c = cc\n}());")
})
o("works if assigned to property using bracket notation", async () => {
await setup({
"a.js": 'var x = {}\nx["b"] = require("./b")\nx["c"] = require("./c")',
"b.js": "var bb = 1\nmodule.exports = bb",
"c.js": "var cc = 2\nmodule.exports = cc",
})
o(await bundle(ns + "a.js")).equals(';(function() {\nvar x = {}\nvar bb = 1\nx["b"] = bb\nvar cc = 2\nx["c"] = cc\n}());')
})
o("works if collision", async () => {
await setup({
"a.js": 'var b = require("./b")',
"b.js": "var b = 1\nmodule.exports = 2",
})
o(await bundle(ns + "a.js")).equals(";(function() {\nvar b0 = 1\nvar b = 2\n}());")
})
o("works if multiple aliases", async () => {
await setup({
"a.js": 'var b = require("./b")\n',
"b.js": 'var b = require("./c")\nb.x = 1\nmodule.exports = b',
"c.js": "var b = {}\nmodule.exports = b",
})
o(await bundle(ns + "a.js")).equals(";(function() {\nvar b = {}\nb.x = 1\n}());")
})
o("works if multiple collision", async () => {
await setup({
"a.js": 'var b = require("./b")\nvar c = require("./c")\nvar d = require("./d")',
"b.js": "var a = 1\nmodule.exports = a",
"c.js": "var a = 2\nmodule.exports = a",
"d.js": "var a = 3\nmodule.exports = a",
})
o(await bundle(ns + "a.js")).equals(";(function() {\nvar a = 1\nvar b = a\nvar a0 = 2\nvar c = a0\nvar a1 = 3\nvar d = a1\n}());")
})
o("works if included multiple times", async () => {
await setup({
"a.js": "module.exports = 123",
"b.js": 'var a = require("./a").toString()\nmodule.exports = a',
"c.js": 'var a = require("./a").toString()\nvar b = require("./b")',
})
o(await bundle(ns + "c.js")).equals(";(function() {\nvar _0 = 123\nvar a = _0.toString()\nvar a0 = _0.toString()\nvar b = a0\n}());")
})
o("works if included multiple times reverse", async () => {
await setup({
"a.js": "module.exports = 123",
"b.js": 'var a = require("./a").toString()\nmodule.exports = a',
"c.js": 'var b = require("./b")\nvar a = require("./a").toString()',
})
o(await bundle(ns + "c.js")).equals(";(function() {\nvar _0 = 123\nvar a0 = _0.toString()\nvar b = a0\nvar a = _0.toString()\n}());")
})
o("reuses binding if possible", async () => {
await setup({
"a.js": 'var b = require("./b")\nvar c = require("./c")',
"b.js": 'var d = require("./d")\nmodule.exports = function() {return d + 1}',
"c.js": 'var d = require("./d")\nmodule.exports = function() {return d + 2}',
"d.js": "module.exports = 1",
})
o(await bundle(ns + "a.js")).equals(";(function() {\nvar d = 1\nvar b = function() {return d + 1}\nvar c = function() {return d + 2}\n}());")
})
o("disambiguates conflicts if imported collides with itself", async () => {
await setup({
"a.js": 'var b = require("./b")',
"b.js": "var b = 1\nmodule.exports = function() {return b}",
})
o(await bundle(ns + "a.js")).equals(";(function() {\nvar b0 = 1\nvar b = function() {return b0}\n}());")
})
o("disambiguates conflicts if imported collides with something else", async () => {
await setup({
"a.js": 'var a = 1\nvar b = require("./b")',
"b.js": "var a = 2\nmodule.exports = function() {return a}",
})
o(await bundle(ns + "a.js")).equals(";(function() {\nvar a = 1\nvar a0 = 2\nvar b = function() {return a0}\n}());")
})
o("disambiguates conflicts if imported collides with function declaration", async () => {
await setup({
"a.js": 'function a() {}\nvar b = require("./b")',
"b.js": "var a = 2\nmodule.exports = function() {return a}",
})
o(await bundle(ns + "a.js")).equals(";(function() {\nfunction a() {}\nvar a0 = 2\nvar b = function() {return a0}\n}());")
})
o("disambiguates conflicts if imported collides with another module's private", async () => {
await setup({
"a.js": 'var b = require("./b")\nvar c = require("./c")',
"b.js": "var a = 1\nmodule.exports = function() {return a}",
"c.js": "var a = 2\nmodule.exports = function() {return a}",
})
o(await bundle(ns + "a.js")).equals(";(function() {\nvar a = 1\nvar b = function() {return a}\nvar a0 = 2\nvar c = function() {return a0}\n}());")
})
o("does not mess up strings", async () => {
await setup({
"a.js": 'var b = require("./b")',
"b.js": 'var b = "b b b \\" b"\nmodule.exports = function() {return b}',
})
o(await bundle(ns + "a.js")).equals(';(function() {\nvar b0 = "b b b \\\" b"\nvar b = function() {return b0}\n}());')
})
o("does not mess up properties", async () => {
await setup({
"a.js": 'var b = require("./b")',
"b.js": "var b = {b: 1}\nmodule.exports = function() {return b.b}",
})
o(await bundle(ns + "a.js")).equals(";(function() {\nvar b0 = {b: 1}\nvar b = function() {return b0.b}\n}());")
})
})

1
scripts/update-docs.js
View file

@ -13,6 +13,7 @@ const ghPages = require("gh-pages")
const upstream = require("./_upstream") const upstream = require("./_upstream")
const generate = require("./generate-docs") const generate = require("./generate-docs")
module.exports = update
async function update() { async function update() {
await generate() await generate()
const commit = execFileSync("git", ["rev-parse", "--verify", "HEAD"], { const commit = execFileSync("git", ["rev-parse", "--verify", "HEAD"], {

16
stream/tests/index.html
View file

@ -1,16 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="../../module/module.js"></script>
<script src="../../ospec/ospec.js"></script>
<script src="../../test-utils/callAsync.js"></script>
<script src="../stream.js"></script>
<script src="test-stream.js"></script>
<script src="test-scanMerge.js"></script>
<script>require("../../ospec/ospec").run()</script>
</body>
</html>

4
test-utils/domMock.js
View file

@ -320,10 +320,12 @@ module.exports = function(options) {
if (index < 0) throw new TypeError("Parent's childNodes is out of sync") if (index < 0) throw new TypeError("Parent's childNodes is out of sync")
return this.parentNode.childNodes[index + 1] || null return this.parentNode.childNodes[index + 1] || null
}, },
// eslint-disable-next-line accessor-pairs
set textContent(value) { set textContent(value) {
this.childNodes = [] this.childNodes = []
if (value !== "") appendChild.call(this, $window.document.createTextNode(value)) if (value !== "") appendChild.call(this, $window.document.createTextNode(value))
}, },
// eslint-disable-next-line accessor-pairs
set innerHTML(value) { set innerHTML(value) {
var voidElements = ["area", "base", "br", "col", "command", "embed", "hr", "img", "input", "keygen", "link", "meta", "param", "source", "track", "wbr"] var voidElements = ["area", "base", "br", "col", "command", "embed", "hr", "img", "input", "keygen", "link", "meta", "param", "source", "track", "wbr"]
while (this.firstChild) removeChild.call(this, this.firstChild) while (this.firstChild) removeChild.call(this, this.firstChild)
@ -436,8 +438,6 @@ module.exports = function(options) {
return return
} }
} }
} catch(e) {
throw e
} finally { } finally {
e.eventPhase = 0 e.eventPhase = 0
if (!prevented) { if (!prevented) {

27
test-utils/tests/index.html
View file

@ -1,27 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="../../module/module.js"></script>
<script src="../../ospec/ospec.js"></script>
<script src="../../querystring/parse.js"></script>
<script src="../../test-utils/callAsync.js"></script>
<script src="../../test-utils/parseURL.js"></script>
<script src="../../test-utils/pushStateMock.js"></script>
<script src="../../test-utils/xhrMock.js"></script>
<script src="../../test-utils/domMock.js"></script>
<script src="../../test-utils/browserMock.js"></script>
<script src="../../test-utils/components.js"></script>
<script src="test-callAsync.js"></script>
<script src="test-parseURL.js"></script>
<script src="test-pushStateMock.js"></script>
<script src="test-xhrMock.js"></script>
<script src="test-domMock.js"></script>
<script src="test-browserMock.js"></script>
<script src="test-components.js"></script>
<script>require("../../ospec/ospec").run()</script>
</body>
</html>

22
tests/index.html
View file

@ -1,22 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="../module/module.js"></script>
<script src="../ospec/ospec.js"></script>
<script src="../querystring/parse.js"></script>
<script src="../test-utils/parseURL.js"></script>
<script src="../test-utils/callAsync.js"></script>
<script src="../test-utils/components.js"></script>
<script src="../test-utils/domMock.js"></script>
<script src="../test-utils/pushStateMock.js"></script>
<script src="../test-utils/xhrMock.js"></script>
<script src="../test-utils/browserMock.js"></script>
<script src="../mithril.js"></script>
<script src="test-api.js"></script>
<script>require("../ospec/ospec").run()</script>
</body>
</html>

17
util/tests/index.html
View file

@ -1,17 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="../../module/module.js"></script>
<script src="../../ospec/ospec.js"></script>
<script src="../../util/hasOwn.js"></script>
<script src="../../util/assign.js"></script>
<script src="../../util/censor.js"></script>
<script src="test-censor.js"></script>
<script>require("../../ospec/ospec").run()</script>
</body>
</html>