docs: new repo refs and build tweaks

This commit is contained in:
Pat Cavit 2017-05-02 13:12:00 -07:00 committed by GitHub
parent 3f70e183ef
commit 5660637e30
22 changed files with 424 additions and 57 deletions

View file

@ -16,10 +16,12 @@ install:
- npm install @alrra/travis-scripts@^3.0.1 gh-pages@^0.12.0
# Bundle before running tests so the bundle is always up-to-date
before_script: npm run build
before_script: npm run build --silent
# This is the default, but leaving so it is obvious
# script: npm test
# Run tests, lint, and then check for perf regressions
script:
- npm test --silent
- npm run perf --silent
# After a successful build commit changes back to repo
after_success:
@ -42,7 +44,7 @@ after_success:
# this doesn't have the built-in branch protection like commit-changes
if [ "$TRAVIS_EVENT_TYPE" == "push" ] && \
[ "$TRAVIS_BRANCH" == "master" ] && \
[ "$TRAVIS_REPO_SLUG" == "lhorie/mithril.js" ]
[ "$TRAVIS_REPO_SLUG" == "MithrilJS/mithril.js" ]
then
# Generate docs
npm run gendocs
@ -57,7 +59,7 @@ after_success:
$(npm bin)/gh-pages \
--dist ./dist \
--add \
--repo "git@github.com:lhorie/mithril.js.git" \
--repo "git@github.com:MithrilJS/mithril.js.git" \
--message "Generated docs for commit $TRAVIS_COMMIT [skip ci]"
else
echo "Not submitting documentation updates"
@ -81,7 +83,7 @@ deploy:
skip_cleanup: true
on:
tags: true
repo: lhorie/mithril.js
repo: MithrilJS/mithril.js
branch: master
- provider: npm
@ -91,5 +93,5 @@ deploy:
secure: ADElvD1oxn9GfEG7dDOggX96b36A/cGEybovAc0221CCKzv5kWCavMrtxneiJYI6N/n24abSlbM90vMfU84FEzH0Ev28dGVokRP4ad6VRkISszKlYVEP8Lds4QxfKh78jZlUxmxM0B3vmQ1kYJbTBqp3ICtaJ5ptEQHWhrLtxnc=
on:
tags: true
repo: lhorie/mithril.js
repo: MithrilJS/mithril.js
branch: master

View file

@ -12,8 +12,8 @@
#### Bug fixes
- hyperscript: Allow `0` as the second argument to `m()` - [#1752](https://github.com/lhorie/mithril.js/issues/1752) / [#1753](https://github.com/lhorie/mithril.js/pull/1753) ([@StephanHoyer](https://github.com/StephanHoyer))
- hyperscript: restore `attrs.class` handling to what it was in v1.0.1 - [#1764](https://github.com/lhorie/mithril.js/issues/1764) / [#1769](https://github.com/lhorie/mithril.js/pull/1769)
- hyperscript: Allow `0` as the second argument to `m()` - [#1752](https://github.com/MithrilJS/mithril.js/issues/1752) / [#1753](https://github.com/MithrilJS/mithril.js/pull/1753) ([@StephanHoyer](https://github.com/StephanHoyer))
- hyperscript: restore `attrs.class` handling to what it was in v1.0.1 - [#1764](https://github.com/MithrilJS/mithril.js/issues/1764) / [#1769](https://github.com/MithrilJS/mithril.js/pull/1769)
- documentation improvements ([@JAForbes](https://github.com/JAForbes), [@smuemd](https://github.com/smuemd), [@hankeypancake](https://github.com/hankeypancake))
### v1.1.0
@ -26,10 +26,10 @@
#### Bug fixes
- fix IE11 input[type] error - [#1610](https://github.com/lhorie/mithril.js/issues/1610)
- apply [#1609](https://github.com/lhorie/mithril.js/issues/1609) to unkeyed children case
- fix abort detection [#1612](https://github.com/lhorie/mithril.js/issues/1612)
- fix input value focus issue when value is loosely equal to old value [#1593](https://github.com/lhorie/mithril.js/issues/1593)
- fix IE11 input[type] error - [#1610](https://github.com/MithrilJS/mithril.js/issues/1610)
- apply [#1609](https://github.com/MithrilJS/mithril.js/issues/1609) to unkeyed children case
- fix abort detection [#1612](https://github.com/MithrilJS/mithril.js/issues/1612)
- fix input value focus issue when value is loosely equal to old value [#1593](https://github.com/MithrilJS/mithril.js/issues/1593)
---
@ -37,12 +37,12 @@
#### News
- performance improvements in IE [#1598](https://github.com/lhorie/mithril.js/pull/1598)
- performance improvements in IE [#1598](https://github.com/MithrilJS/mithril.js/pull/1598)
#### Bug fixes
- prevent infinite loop in non-existent default route - [#1579](https://github.com/lhorie/mithril.js/issues/1579)
- call correct lifecycle methods on children of recycled keyed vnodes - [#1609](https://github.com/lhorie/mithril.js/issues/1609)
- prevent infinite loop in non-existent default route - [#1579](https://github.com/MithrilJS/mithril.js/issues/1579)
- call correct lifecycle methods on children of recycled keyed vnodes - [#1609](https://github.com/MithrilJS/mithril.js/issues/1609)
---

View file

@ -4,7 +4,7 @@
## How do I go about contributing ideas or new features?
Create an [issue thread on Github](https://github.com/lhorie/mithril.js/issues/new) to suggest your idea so the community can discuss it.
Create an [issue thread on Github](https://github.com/MithrilJS/mithril.js/issues/new) to suggest your idea so the community can discuss it.
If the consensus is that it's a good idea, the fastest way to get it into a release is to send a pull request. Without a PR, the time to implement the feature will depend on the bandwidth of the development team and its list of priorities.

View file

@ -2,10 +2,10 @@
Here are some examples of Mithril in action
- [Animation](http://cdn.rawgit.com/lhorie/mithril.js/rewrite/examples/animation/mosaic.html)
- [DBMonster](http://cdn.rawgit.com/lhorie/mithril.js/rewrite/examples/dbmonster/mithril/index.html)
- [Markdown Editor](http://cdn.rawgit.com/lhorie/mithril.js/rewrite/examples/editor/index.html)
- SVG: [Clock](http://cdn.rawgit.com/lhorie/mithril.js/rewrite/examples/svg/clock.html), [Ring](http://cdn.rawgit.com/lhorie/mithril.js/rewrite/examples/svg/ring.html), [Tiger](http://cdn.rawgit.com/lhorie/mithril.js/rewrite/examples/svg/tiger.html)
- [ThreadItJS](http://cdn.rawgit.com/lhorie/mithril.js/rewrite/examples/threaditjs/index.html)
- [TodoMVC](http://cdn.rawgit.com/lhorie/mithril.js/rewrite/examples/todomvc/index.html)
- [Animation](http://cdn.rawgit.com/MithrilJS/mithril.js/master/examples/animation/mosaic.html)
- [DBMonster](http://cdn.rawgit.com/MithrilJS/mithril.js/master/examples/dbmonster/mithril/index.html)
- [Markdown Editor](http://cdn.rawgit.com/MithrilJS/mithril.js/master/examples/editor/index.html)
- SVG: [Clock](http://cdn.rawgit.com/MithrilJS/mithril.js/master/examples/svg/clock.html), [Ring](http://cdn.rawgit.com/MithrilJS/mithril.js/master/examples/svg/ring.html), [Tiger](http://cdn.rawgit.com/MithrilJS/mithril.js/master/examples/svg/tiger.html)
- [ThreadItJS](http://cdn.rawgit.com/MithrilJS/mithril.js/master/examples/threaditjs/index.html)
- [TodoMVC](http://cdn.rawgit.com/MithrilJS/mithril.js/master/examples/todomvc/index.html)

BIN
docs/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

BIN
docs/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

View file

@ -74,7 +74,7 @@ What these numbers show is that not only does Mithril initializes significantly
Update performance can be even more important than first-render performance, since updates can happen many times while a Single Page Application is running.
A useful tool to benchmark update performance is a tool developed by the Ember team called DbMonster. It updates a table as fast as it can and measures frames per second (FPS) and Javascript times (min, max and mean). The FPS count can be difficult to evaluate since it also includes browser repaint times and `setTimeout` clamping delay, so the most meaningful number to look at is the mean render time. You can compare a [React implementation](http://cdn.rawgit.com/lhorie/mithril.js/rewrite/examples/dbmonster/react/index.html) and a [Mithril implementation](http://cdn.rawgit.com/lhorie/mithril.js/rewrite/examples/dbmonster/mithril/index.html). Sample results are shown below:
A useful tool to benchmark update performance is a tool developed by the Ember team called DbMonster. It updates a table as fast as it can and measures frames per second (FPS) and Javascript times (min, max and mean). The FPS count can be difficult to evaluate since it also includes browser repaint times and `setTimeout` clamping delay, so the most meaningful number to look at is the mean render time. You can compare a [React implementation](http://cdn.rawgit.com/MithrilJS/mithril.js/master/examples/dbmonster/react/index.html) and a [Mithril implementation](http://cdn.rawgit.com/MithrilJS/mithril.js/master/examples/dbmonster/mithril/index.html). Sample results are shown below:
React | Mithril
------- | -------
@ -139,7 +139,7 @@ Also, remember that frameworks like Angular and Mithril are designed for non-tri
##### Update performance
A useful tool to benchmark update performance is a tool developed by the Ember team called DbMonster. It updates a table as fast as it can and measures frames per second (FPS) and Javascript times (min, max and mean). The FPS count can be difficult to evaluate since it also includes browser repaint times and `setTimeout` clamping delay, so the most meaningful number to look at is the mean render time. You can compare an [Angular implementation](http://cdn.rawgit.com/lhorie/mithril.js/rewrite/examples/dbmonster/angular/index.html) and a [Mithril implementation](http://cdn.rawgit.com/lhorie/mithril.js/rewrite/examples/dbmonster/mithril/index.html). Both implementations are naive (i.e. no optimizations). Sample results are shown below:
A useful tool to benchmark update performance is a tool developed by the Ember team called DbMonster. It updates a table as fast as it can and measures frames per second (FPS) and Javascript times (min, max and mean). The FPS count can be difficult to evaluate since it also includes browser repaint times and `setTimeout` clamping delay, so the most meaningful number to look at is the mean render time. You can compare an [Angular implementation](http://cdn.rawgit.com/MithrilJS/mithril.js/master/examples/dbmonster/angular/index.html) and a [Mithril implementation](http://cdn.rawgit.com/MithrilJS/mithril.js/master/examples/dbmonster/mithril/index.html). Both implementations are naive (i.e. no optimizations). Sample results are shown below:
Angular | Mithril
------- | -------
@ -193,7 +193,7 @@ Library load times matter in applications that don't stay open for long periods
##### Update performance
A useful tool to benchmark update performance is a tool developed by the Ember team called DbMonster. It updates a table as fast as it can and measures frames per second (FPS) and Javascript times (min, max and mean). The FPS count can be difficult to evaluate since it also includes browser repaint times and `setTimeout` clamping delay, so the most meaningful number to look at is the mean render time. You can compare a [Vue implementation](http://cdn.rawgit.com/lhorie/mithril.js/rewrite/examples/dbmonster/vue/index.html) and a [Mithril implementation](http://cdn.rawgit.com/lhorie/mithril.js/rewrite/examples/dbmonster/mithril/index.html). Both implementations are naive (i.e. no optimizations). Sample results are shown below:
A useful tool to benchmark update performance is a tool developed by the Ember team called DbMonster. It updates a table as fast as it can and measures frames per second (FPS) and Javascript times (min, max and mean). The FPS count can be difficult to evaluate since it also includes browser repaint times and `setTimeout` clamping delay, so the most meaningful number to look at is the mean render time. You can compare a [Vue implementation](http://cdn.rawgit.com/MithrilJS/mithril.js/master/examples/dbmonster/vue/index.html) and a [Mithril implementation](http://cdn.rawgit.com/MithrilJS/mithril.js/master/examples/dbmonster/mithril/index.html). Both implementations are naive (i.e. no optimizations). Sample results are shown below:
Vue | Mithril
------ | -------

View file

@ -66,8 +66,9 @@ function generate(pathname) {
fs.writeFileSync("./dist/" + outputFilename.replace(/^docs\//, ""), html, "utf-8")
}
else if (!pathname.match(/lint|generate/)) {
fs.writeFileSync("./dist/archive/v" + version + "/" + pathname.replace(/^docs\//, ""), fs.readFileSync(pathname, "utf-8"), "utf-8")
fs.writeFileSync("./dist/" + pathname.replace(/^docs\//, ""), fs.readFileSync(pathname, "utf-8"), "utf-8")
var encoding = (/\.(ico|png)$/i).test(path.extname(pathname)) ? "binary" : "utf-8";
fs.writeFileSync("./dist/archive/v" + version + "/" + pathname.replace(/^docs\//, ""), fs.readFileSync(pathname, encoding), encoding)
fs.writeFileSync("./dist/" + pathname.replace(/^docs\//, ""), fs.readFileSync(pathname, encoding), encoding)
}
}
}

View file

@ -219,7 +219,7 @@ If you don't have the ability to run a bundler script due to company security po
<title>Hello world</title>
</head>
<body>
<script src="https://cdn.rawgit.com/lhorie/mithril.js/rewrite/mithril.js"></script>
<script src="https://cdn.rawgit.com/MithrilJS/mithril.js/master/mithril.js"></script>
<script src="index.js"></script>
</body>
</html>

View file

@ -4,6 +4,7 @@
<title>Mithril.js</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
<link rel="icon" type="image/png" sizes="32x32" href="favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
@ -14,8 +15,8 @@
<nav>
<a href="index.html">Guide</a>
<a href="api.html">API</a>
<a href="https://gitter.im/lhorie/mithril.js">Chat</a>
<a href="https://github.com/lhorie/mithril.js">Github</a>
<a href="https://gitter.im/MithrilJS/mithril.js">Chat</a>
<a href="https://github.com/MithrilJS/mithril.js">Github</a>
</nav>
</section>
</header>

View file

@ -16,7 +16,7 @@
- [Keys](keys.md)
- [Autoredraw system](autoredraw.md)
- Social
- [Mithril Jobs](https://github.com/lhorie/mithril.js/wiki/JOBS)
- [Mithril Jobs](https://github.com/MithrilJS/mithril.js/wiki/JOBS)
- [How to contribute](contributing.md)
- [Credits](credits.md)
- [Code of Conduct](code-of-conduct.md)

View file

@ -16,4 +16,4 @@
- Optional
- [Stream](stream.md)
- Tooling
- [Ospec](https://github.com/lhorie/mithril.js/blob/rewrite/ospec)
- [Ospec](https://github.com/MithrilJS/mithril.js/blob/master/ospec)

View file

@ -1,5 +1,7 @@
# Mithril Release Processes
**Note** These steps all assume that `MithrilJS/mithril.js` is a git remote named `mithriljs`, adjust accordingly if that doesn't match your setup.
## Releasing a new Mithril version
### Prepare the release
@ -8,7 +10,7 @@
```bash
$ git co next
$ git pull --rebase lhorie next
$ git pull --rebase mithriljs next
```
2. Determine patch level of the change
@ -22,8 +24,8 @@ $ git commit -m "Preparing for release"
# Push to your branch
$ git push
# Push to lhorie/mithril.js
$ git push lhorie next
# Push to MithrilJS/mithril.js
$ git push mithriljs next
```
### Merge from `next` to `master`
@ -32,7 +34,7 @@ $ git push lhorie next
```bash
$ git co master
$ git pull --rebase lhorie master
$ git pull --rebase mithriljs master
```
6. merge `next` on top of it
@ -53,10 +55,10 @@ $ npm test
8. `npm run release <major|minor|patch|semver>`, see the docs for [`npm version`](https://docs.npmjs.com/cli/version)
9. The changes will be automatically pushed to your fork
10. Push the changes to `lhorie/mithril.js`
10. Push the changes to `MithrilJS/mithril.js`
```bash
$ git push lhorie master
$ git push mithriljs master
```
11. Travis will push the new release to npm & create a GitHub release
@ -69,7 +71,7 @@ This helps to ensure that the `version` field of `package.json` doesn't get out
```bash
$ git co next
$ git pull --rebase lhorie next
$ git pull --rebase mithriljs next
```
13. Merge `master` back onto `next`
@ -78,11 +80,11 @@ $ git pull --rebase lhorie next
$ git merge master
```
14. Push the changes to your fork & `lhorie/mithril.js`
14. Push the changes to your fork & `MithrilJS/mithril.js`
```bash
$ git push
$ git push lhorie next
$ git push mithriljs next
```
### Update the GitHub release
@ -94,11 +96,11 @@ $ git push lhorie next
Fixes to documentation can land whenever, updates to the site are published via Travis.
```bash
# These steps assume that lhorie/mithril.js is a git remote named "lhorie"
# These steps assume that MithrilJS/mithril.js is a git remote named "mithriljs"
# Ensure your next branch is up to date
$ git co next
$ git pull lhorie next
$ git pull mithriljs next
# Splat the docs folder from next onto master
$ git co master
@ -106,7 +108,7 @@ $ git co next -- ./docs
# Manually ensure that no new feature docs were added
$ git push lhorie
$ git push mithriljs
```
After the Travis build completes the updated docs should appear on https://mithril.js.org in a few minutes.

View file

@ -287,7 +287,7 @@ function upload(e) {
var data = new FormData()
for (var i = 0; i < files.length; i++) {
data.append("file" + i, file)
data.append("file" + i, files[i])
}
m.request({

View file

@ -616,4 +616,4 @@ This concludes the tutorial.
In this tutorial, we went through the process of creating a very simple application where we can list users from a server and edit them individually. As an extra exercise, try to implement user creation and deletion on your own.
If you want to see more examples of Mithril code, check the [examples](examples.md) page. If you have questions, feel free to drop by the [Mithril chat room](https://gitter.im/lhorie/mithril.js).
If you want to see more examples of Mithril code, check the [examples](examples.md) page. If you have questions, feel free to drop by the [Mithril chat room](https://gitter.im/MithrilJS/mithril.js).

View file

@ -1,6 +1,6 @@
# Testing
Mithril comes with a testing framework called [ospec](https://github.com/lhorie/mithril.js/tree/rewrite/ospec). What makes it different from most test frameworks is that it avoids all configurability for the sake of avoiding [yak shaving](http://catb.org/jargon/html/Y/yak-shaving.html) and [analysis paralysis](https://en.wikipedia.org/wiki/Analysis_paralysis).
Mithril comes with a testing framework called [ospec](https://github.com/MithrilJS/mithril.js/tree/master/ospec). What makes it different from most test frameworks is that it avoids all configurability for the sake of avoiding [yak shaving](http://catb.org/jargon/html/Y/yak-shaving.html) and [analysis paralysis](https://en.wikipedia.org/wiki/Analysis_paralysis).
The easist way to setup the test runner is to create an NPM script for it. Open your project's `package.json` file and edit the `test` line under the `scripts` section:

View file

@ -12,5 +12,5 @@
"bin": {
"ospec": "./bin/ospec"
},
"repository": "lhorie/mithril.js#rewrite"
"repository": "MithrilJS/mithril.js"
}

View file

@ -5,7 +5,7 @@
"author": "Leo Horie",
"license": "MIT",
"main": "mithril.js",
"repository": "lhorie/mithril.js",
"repository": "MithrilJS/mithril.js",
"scripts": {
"dev": "node bundler/cli browser.js -o mithril.js -w",
"build": "npm run build-browser & npm run build-min",
@ -13,19 +13,21 @@
"build-min": "node bundler/cli browser.js -o mithril.min.js -m",
"lintdocs": "node docs/lint",
"gendocs": "node docs/generate",
"lint": "eslint .",
"lint": "eslint . || true",
"lint:fix": "eslint . --fix",
"perf": "node performance/test-perf.js",
"test": "node ospec/bin/ospec",
"posttest": "npm run lint || true",
"posttest": "npm run lint",
"cover": "istanbul cover --print both ospec/bin/ospec",
"release": "npm version -m \"v%s\"",
"release": "npm version -m 'v%s'",
"preversion": "npm run test",
"version": "npm run build && git add mithril.js mithril.min.js",
"postversion": "git push --follow-tags"
},
"devDependencies": {
"eslint": "^3.16.1",
"istanbul": "^0.4.3",
"benchmark": "^2.1.4",
"eslint": "^3.19.0",
"istanbul": "^0.4.5",
"marked": "^0.3.6"
},
"bin": {

23
performance/index.html Normal file
View file

@ -0,0 +1,23 @@
<!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/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="../node_modules/lodash/lodash.js"></script>
<script src="../node_modules/benchmark/benchmark.js"></script>
<script src="test-perf.js"></script>
<!-- test-perf runs itself for CLI usage -->
</body>
</html>

336
performance/test-perf.js Normal file
View file

@ -0,0 +1,336 @@
/* global Benchmark */
"use strict"
/* Based off of preact's perf tests, so including their MIT license */
/*
The MIT License (MIT)
Copyright (c) 2017 Jason Miller
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/
var browserMock = require("../test-utils/browserMock")
// Do this silly dance so browser testing works
var B = typeof Benchmark === "undefined" ? require("benchmark") : Benchmark
var m, scratch;
// set up browser env on before running tests
var doc = typeof document !== "undefined" ? document : null
if(!doc) {
var mock = browserMock()
if (typeof global !== "undefined") { global.window = mock }
doc = mock.document
}
// Have to include mithril AFTER browser polyfill is set up
m = require("../mithril") // eslint-disable-line global-require
scratch = doc.createElement("div");
(doc.body || doc.documentElement).appendChild(scratch)
// Initialize benchmark suite
var suite = new B.Suite("mithril perf")
suite.on("start", function() {
this.start = Date.now();
})
suite.on("cycle", function(e) {
console.log(e.target.toString())
scratch.innerHTML = ""
})
suite.on("complete", function() {
console.log("Completed perf tests in " + (Date.now() - this.start) + "ms")
})
suite.on("error", console.error.bind(console))
suite.add({
name : "rerender without changes",
onStart : function() {
this.vdom = m("div", {class: "foo bar", "data-foo": "bar", p: 2},
m("header",
m("h1", {class: "asdf"}, "a ", "b", " c ", 0, " d"),
m("nav",
m("a", {href: "/foo"}, "Foo"),
m("a", {href: "/bar"}, "Bar")
)
),
m("main",
m("form", {onSubmit: function onSubmit() {}},
m("input", {type: "checkbox", checked: true}),
m("input", {type: "checkbox", checked: false}),
m("fieldset",
m("label",
m("input", {type: "radio", checked: true})
),
m("label",
m("input", {type: "radio"})
)
),
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"
)
)
)
)
)
},
fn : function() {
m.render(scratch, this.vdom)
}
})
suite.add({
name : "construct large VDOM tree",
onStart : function() {
var fields = []
for(var i=100; i--;) {
fields.push((i * 999).toString(36))
}
this.fields = fields;
},
fn : function () {
m("div", {class: "foo bar", "data-foo": "bar", p: 2},
m("header",
m("h1", {class: "asdf"}, "a ", "b", " c ", 0, " d"),
m("nav",
m("a", {href: "/foo"}, "Foo"),
m("a", {href: "/bar"}, "Bar")
)
),
m("main",
m("form",
{onSubmit: function onSubmit() {}},
m("input", {type: "checkbox", checked: true}),
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.add({
name : "mutate styles/properties",
onStart : function () {
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"]
var styles = []
var multivalue = ["0 1px", "0 0 1px 0", "0", "1px", "20px 10px", "7em 5px", "1px 0 5em 2px"]
var stylekeys = [
["left", keyLooper(3)],
["top", keyLooper(2)],
["margin", function (c) { return get(multivalue, c).replace("1px", c+"px") }],
["padding", function (c) { return get(multivalue, c) }],
["position", function (c) { return c%5 ? c%2 ? "absolute" : "relative" : null }],
["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) + ")") }],
["border", function (c) { return c%5 ? ((c%10) + "px " + (c%2?"solid":"dotted") + " " + (stylekeys[6][1](c))) : "" }]
]
var i, j, style, conf
for (i=0; i<1000; i++) {
style = {}
for (j=0; j<i%10; j++) {
conf = get(stylekeys, ++counter)
style[conf[0]] = conf[1](counter)
}
styles[i] = style
}
this.count = 0
this.app = function (index) {
return m("div",
{
class: get(classes, index),
"data-index": index,
title: index.toString(36)
},
m("input", {type: "checkbox", checked: index % 3 == 0}),
m("input", {value: "test " + (Math.floor(index / 4)), disabled: index % 10 ? null : true}),
m("div", {class: get(classes, index * 11)},
m("p", {style: get(styles, index)}, "p1"),
m("p", {style: get(styles, index + 1)}, "p2"),
m("p", {style: get(styles, index * 2)}, "p3"),
m("p", {style: get(styles, index * 3 + 1)}, "p4")
)
)
}
},
fn : function () {
m.render(scratch, this.app(++this.count))
}
})
// Shared components for node recyling benchmarks
var Header = {
view : function () {
return m("header",
m("h1", {class: "asdf"}, "a ", "b", " c ", 0, " d"),
m("nav",
m("a", {href: "/foo"}, "Foo"),
m("a", {href: "/bar"}, "Bar")
)
)
}
}
var Form = {
view : function () {
return m("form", {onSubmit: function onSubmit() {}},
m("input", {type: "checkbox", checked: true}),
m("input", {type: "checkbox", checked: false}),
m("fieldset",
m("label",
m("input", {type: "radio", checked: true})
),
m("label",
m("input", {type: "radio"})
)
),
m(ButtonBar, null)
)
}
}
var ButtonBar = {
view : function () {
return 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"
)
)
}
}
var Button = {
view : function (vnode) {
return m("button", vnode.attrs, vnode.children)
}
}
var Main = {
view : function () {
return m(Form)
}
}
var Root = {
view : function () {
return m("div",
{class: "foo bar", "data-foo": "bar", p: 2},
m(Header, null),
m(Main, null)
)
}
}
suite.add({
name : "repeated trees (recycling)",
fn : function () {
m.render(scratch, [m(Root)])
m.render(scratch, [])
}
})
suite.add({
name : "repeated trees (no recycling)",
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, [])
}
})
suite.run({
async : true
})

View file

@ -9,5 +9,5 @@
"keywords": [ "stream", "reactive", "data" ],
"author": "Leo Horie <lhorie@hotmail.com>",
"license": "MIT",
"repository": "lhorie/mithril.js"
"repository": "MithrilJS/mithril.js"
}

View file

@ -1,7 +1,7 @@
"use strict"
var parseURL = require("../test-utils/parseURL")
var callAsync = require("../test-utils/callAsync.js")
var callAsync = require("../test-utils/callAsync")
function debouncedAsync(f) {
var ref