- [What is Mithril?](#what-is-mithril)
-- [Getting started](#getting-started)
-- [Hello world](#hello-world)
-- [DOM elements](#dom-elements)
-- [Components](#components)
-- [Routing](#routing)
-- [XHR](#xhr)
+- [Installation](#installation)
+- [Documentation](#documentation)
+- [Getting Help](#getting-help)
+- [Contributing](#contributing)
+
+## What is Mithril?
+
+A modern client-side Javascript framework for building Single Page Applications. It's small (8.30 KB gzipped), fast and provides routing and XHR utilities out of the box.
+
+Mithril is used by companies like Vimeo and Nike, and open source platforms like Lichess 👍.
+
+Browsers all the way back to IE9 are supported, no polyfills required 👌.
+
+## Installation
+
+### CDN
+
+```html
+
+```
+
+### npm
+
+```bash
+$ npm install mithril
+```
+
+The ["Getting started" guide](https://mithril.js.org/#getting-started) is a good place to start learning how to use mithril.
+
+## Documentation
+
+Documentation lives on [mithril.js.org](https://mithril.js.org).
+
+You may be interested in the [API Docs](https://mithril.js.org/api.html), a [Simple Application](https://mithril.js.org/simple-application.html), or perhaps some [Examples](https://mithril.js.org/examples.html).
+
+## Getting Help
+
+Mithril has an active & welcoming community on [Gitter](https://gitter.im/mithriljs/mithril.js), or feel free to ask questions on [Stack Overflow](https://stackoverflow.com/questions/tagged/mithril.js) using the `mithril.js` tag.
+
+## Contributing
+
+There's a [Contributing FAQ](https://mithril.js.org/contributing.html) on the mithril site that hopefully helps, but if not definitely hop into the [Gitter Room](https://gitter.im/mithriljs/mithril.js) and ask away!
---
-### What is Mithril?
+Thanks for reading!
-Mithril is a modern client-side Javascript framework for building Single Page Applications.
-It's small (< 8kb gzip), fast and provides routing and XHR utilities out of the box.
-
-
-
-Mithril is used by companies like Vimeo and Nike, and open source platforms like Lichess.
-
-If you are an experienced developer and want to know how Mithril compares to other frameworks, see the [framework comparison](http://mithril.js.org/framework-comparison.html) page.
-
-Mithril supports browsers all the way back to IE9, no polyfills required.
-
----
-
-### Getting started
-
-The easiest way to try out Mithril is to include it from a CDN, and follow this tutorial. It'll cover the majority of the API surface (including routing and XHR) but it'll only take 10 minutes.
-
-Let's create an HTML file to follow along:
-
-```markup
-
-
-
-
-```
-
----
-
-### Hello world
-
-Let's start as small as we can: render some text on screen. Copy the code below into your file (and by copy, I mean type it out - you'll learn better)
-
-```javascript
-var root = document.body
-
-m.render(root, "Hello world")
-```
-
-Now, let's change the text to something else. Add this line of code under the previous one:
-
-```javascript
-m.render(root, "My first app")
-```
-
-As you can see, you use the same code to both create and update HTML. Mithril automatically figures out the most efficient way of updating the text, rather than blindly recreating it from scratch.
-
----
-
-### DOM elements
-
-Let's wrap our text in an `
` tag.
-
-```javascript
-m.render(root, m("h1", "My first app"))
-```
-
-The `m()` function can be used to describe any HTML structure you want. So if you need to add a class to the `
`:
-
-```javascript
-m("h1", {class: "title"}, "My first app")
-```
-
-If you want to have multiple elements:
-
-```javascript
-[
- m("h1", {class: "title"}, "My first app"),
- m("button", "A button"),
-]
-```
-
-And so on:
-
-```javascript
-m("main", [
- m("h1", {class: "title"}, "My first app"),
- m("button", "A button"),
-])
-```
-
-Note: If you prefer `` syntax, [it's possible to use it via a Babel plugin](http://mithril.js.org/jsx.html).
-
-```jsx
-// HTML syntax via Babel's JSX plugin
-
-
My first app
-
-
-```
-
----
-
-### Components
-
-A Mithril component is just an object with a `view` function. Here's the code above as a component:
-
-```javascript
-var Hello = {
- view: function() {
- return m("main", [
- m("h1", {class: "title"}, "My first app"),
- m("button", "A button"),
- ])
- }
-}
-```
-
-To activate the component, we use `m.mount`.
-
-```javascript
-m.mount(root, Hello)
-```
-
-As you would expect, doing so creates this markup:
-
-```markup
-
-
My first app
-
-
-```
-
-The `m.mount` function is similar to `m.render`, but instead of rendering some HTML only once, it activates Mithril's auto-redrawing system. To understand what that means, let's add some events:
-
-```javascript
-var count = 0 // added a variable
-
-var Hello = {
- view: function() {
- return m("main", [
- m("h1", {class: "title"}, "My first app"),
- // changed the next line
- m("button", {onclick: function() {count++}}, count + " clicks"),
- ])
- }
-}
-
-m.mount(root, Hello)
-```
-
-We defined an `onclick` event on the button, which increments a variable `count` (which was declared at the top). We are now also rendering the value of that variable in the button label.
-
-You can now update the label of the button by clicking the button. Since we used `m.mount`, you don't need to manually call `m.render` to apply the changes in the `count` variable to the HTML; Mithril does it for you.
-
-If you're wondering about performance, it turns out Mithril is very fast at rendering updates, because it only touches the parts of the DOM it absolutely needs to. So in our example above, when you click the button, the text in it is the only part of the DOM Mithril actually updates.
-
----
-
-### Routing
-
-Routing just means going from one screen to another in an application with several screens.
-
-Let's add a splash page that appears before our click counter. First we create a component for it:
-
-```javascript
-var Splash = {
- view: function() {
- return m("a", {href: "#!/hello"}, "Enter!")
- }
-}
-```
-
-As you can see, this component simply renders a link to `#!/hello`. The `#!` part is known as a hashbang, and it's a common convention used in Single Page Applications to indicate that the stuff after it (the `/hello` part) is a route path.
-
-Now that we going to have more than one screen, we use `m.route` instead of `m.mount`.
-
-```javascript
-m.route(root, "/splash", {
- "/splash": Splash,
- "/hello": Hello,
-})
-```
-
-The `m.route` function still has the same auto-redrawing functionality that `m.mount` does, and it also enables URL awareness; in other words, it lets Mithril know what to do when it sees a `#!` in the URL.
-
-The `"/splash"` right after `root` means that's the default route, i.e. if the hashbang in the URL doesn't point to one of the defined routes (`/splash` and `/hello`, in our case), then Mithril redirects to the default route. So if you open the page in a browser and your URL is `http://localhost`, then you get redirected to `http://localhost/#!/splash`.
-
-Also, as you would expect, clicking on the link on the splash page takes you to the click counter screen we created earlier. Notice that now your URL will point to `http://localhost/#!/hello`. You can navigate back and forth to the splash page using the browser's back and next button.
-
----
-
-### XHR
-
-Basically, XHR is just a way to talk to a server.
-
-Let's change our click counter to make it save data on a server. For the server, we'll use [REM](http://rem-rest-api.herokuapp.com), a mock REST API designed for toy apps like this tutorial.
-
-First we create a function that calls `m.request`. The `url` specifies an endpoint that represents a resource, the `method` specifies the type of action we're taking (typically the `PUT` method [upserts](https://en.wiktionary.org/wiki/upsert)), `data` is the payload that we're sending to the endpoint and `withCredentials` means to enable cookies (a requirement for the REM API to work)
-
-```javascript
-var count = 0
-var increment = function() {
- m.request({
- method: "PUT",
- url: "//rem-rest-api.herokuapp.com/api/tutorial/1",
- data: {count: count + 1},
- withCredentials: true,
- })
- .then(function(data) {
- count = parseInt(data.count)
- })
-}
-```
-
-Calling the increment function [upserts](https://en.wiktionary.org/wiki/upsert) an object `{count: 1}` to the `/api/tutorial/1` endpoint. This endpoint returns an object with the same `count` value that was sent to it. Notice that the `count` variable is only updated after the request completes, and it's updated with the response value from the server now.
-
-Let's replace the event handler in the component to call the `increment` function instead of incrementing the `count` variable directly:
-
-```javascript
-var Hello = {
- view: function() {
- return m("main", [
- m("h1", {class: "title"}, "My first app"),
- m("button", {onclick: increment}, count + " clicks"),
- ])
- }
-}
-```
-
-Clicking the button should now update the count.
-
----
-
-We covered how to create and update HTML, how to create components, routes for a Single Page Application, and interacted with a server via XHR.
-
-This should be enough to get you started writing the frontend for a real application. Now that you are comfortable with the basics of the Mithril API, [be sure to check out the simple application tutorial](http://mithril.js.org/simple-application.html), which walks you through building a realistic application.
+🎁
diff --git a/api/mount.js b/api/mount.js
index 2178505a..7203bf7c 100644
--- a/api/mount.js
+++ b/api/mount.js
@@ -16,6 +16,6 @@ module.exports = function(redrawService) {
redrawService.render(root, Vnode(component))
}
redrawService.subscribe(root, run)
- redrawService.redraw()
+ run()
}
}
diff --git a/api/redraw.js b/api/redraw.js
index 1b22271b..a6549975 100644
--- a/api/redraw.js
+++ b/api/redraw.js
@@ -4,44 +4,48 @@ var coreRenderer = require("../render/render")
function throttle(callback) {
//60fps translates to 16.6ms, round it down since setTimeout requires int
- var time = 16
+ var delay = 16
var last = 0, pending = null
var timeout = typeof requestAnimationFrame === "function" ? requestAnimationFrame : setTimeout
return function() {
- var now = Date.now()
- if (last === 0 || now - last >= time) {
- last = now
- callback()
- }
- else if (pending === null) {
+ var elapsed = Date.now() - last
+ if (pending === null) {
pending = timeout(function() {
pending = null
callback()
last = Date.now()
- }, time - (now - last))
+ }, delay - elapsed)
}
}
}
-module.exports = function($window) {
+
+module.exports = function($window, throttleMock) {
var renderService = coreRenderer($window)
renderService.setEventCallback(function(e) {
- if (e.redraw !== false) redraw()
+ if (e.redraw === false) e.redraw = undefined
+ else redraw()
})
var callbacks = []
+ var rendering = false
+
function subscribe(key, callback) {
unsubscribe(key)
- callbacks.push(key, throttle(callback))
+ callbacks.push(key, callback)
}
function unsubscribe(key) {
var index = callbacks.indexOf(key)
if (index > -1) callbacks.splice(index, 2)
}
- function redraw() {
- for (var i = 1; i < callbacks.length; i += 2) {
- callbacks[i]()
- }
+ function sync() {
+ if (rendering) throw new Error("Nested m.redraw.sync() call")
+ rendering = true
+ for (var i = 1; i < callbacks.length; i+=2) try {callbacks[i]()} catch (e) {if (typeof console !== "undefined") console.error(e)}
+ rendering = false
}
+
+ var redraw = (throttleMock || throttle)(sync)
+ redraw.sync = sync
return {subscribe: subscribe, unsubscribe: unsubscribe, redraw: redraw, render: renderService.render}
}
diff --git a/api/router.js b/api/router.js
index c182008f..4d893acc 100644
--- a/api/router.js
+++ b/api/router.js
@@ -11,9 +11,14 @@ module.exports = function($window, redrawService) {
var render, component, attrs, currentPath, lastUpdate
var route = function(root, defaultRoute, routes) {
if (root == null) throw new Error("Ensure the DOM element that was passed to `m.route` is not undefined")
- var run = function() {
+ function run() {
if (render != null) redrawService.render(root, render(Vnode(component, attrs.key, attrs)))
}
+ var redraw = function() {
+ run()
+ redraw = redrawService.redraw
+ }
+ redrawService.subscribe(root, run)
var bail = function(path) {
if (path !== defaultRoute) routeService.setPath(defaultRoute, null, {replace: true})
else throw new Error("Could not resolve default route " + defaultRoute)
@@ -24,7 +29,7 @@ module.exports = function($window, redrawService) {
component = comp != null && (typeof comp.view === "function" || typeof comp === "function")? comp : "div"
attrs = params, currentPath = path, lastUpdate = null
render = (routeResolver.render || identity).bind(routeResolver)
- run()
+ redraw()
}
if (payload.view || typeof payload === "function") update({}, payload)
else {
@@ -36,16 +41,18 @@ module.exports = function($window, redrawService) {
else update(payload, "div")
}
}, bail)
- redrawService.subscribe(root, run)
}
route.set = function(path, data, options) {
- if (lastUpdate != null) options = {replace: true}
+ if (lastUpdate != null) {
+ options = options || {}
+ options.replace = true
+ }
lastUpdate = null
routeService.setPath(path, data, options)
}
route.get = function() {return currentPath}
route.prefix = function(prefix) {routeService.prefix = prefix}
- route.link = function(vnode) {
+ var link = function(options, vnode) {
vnode.dom.setAttribute("href", routeService.prefix + vnode.attrs.href)
vnode.dom.onclick = function(e) {
if (e.ctrlKey || e.metaKey || e.shiftKey || e.which === 2) return
@@ -53,9 +60,13 @@ module.exports = function($window, redrawService) {
e.redraw = false
var href = this.getAttribute("href")
if (href.indexOf(routeService.prefix) === 0) href = href.slice(routeService.prefix.length)
- route.set(href, undefined, undefined)
+ route.set(href, undefined, options)
}
}
+ route.link = function(args) {
+ if (args.tag == null) return link.bind(link, args)
+ return link({}, args)
+ }
route.param = function(key) {
if(typeof attrs !== "undefined" && typeof key !== "undefined") return attrs[key]
return attrs
diff --git a/api/tests/index.html b/api/tests/index.html
index 37d313f4..e85bd4b7 100644
--- a/api/tests/index.html
+++ b/api/tests/index.html
@@ -13,8 +13,8 @@
-
-
+
+
@@ -28,7 +28,6 @@
-
diff --git a/api/tests/test-mount.js b/api/tests/test-mount.js
index db2bee04..7385e43d 100644
--- a/api/tests/test-mount.js
+++ b/api/tests/test-mount.js
@@ -3,24 +3,27 @@
var o = require("../../ospec/ospec")
var components = require("../../test-utils/components")
var domMock = require("../../test-utils/domMock")
+var throttleMocker = require("../../test-utils/throttleMock")
var m = require("../../render/hyperscript")
-var coreRenderer = require("../../render/render")
var apiRedraw = require("../../api/redraw")
var apiMounter = require("../../api/mount")
o.spec("mount", function() {
- var FRAME_BUDGET = Math.floor(1000 / 60)
- var $window, root, redrawService, mount, render
+ var $window, root, redrawService, mount, render, throttleMock
o.beforeEach(function() {
$window = domMock()
+ throttleMock = throttleMocker()
root = $window.document.body
-
- redrawService = apiRedraw($window)
+ redrawService = apiRedraw($window, throttleMock.throttle)
mount = apiMounter(redrawService)
- render = coreRenderer($window).render
+ render = redrawService.render
+ })
+
+ o.afterEach(function() {
+ o(throttleMock.queueLength()).equals(0)
})
o("throws on invalid component", function() {
@@ -47,7 +50,7 @@ o.spec("mount", function() {
o(threw).equals(true)
})
- o("renders into `root`", function() {
+ o("renders into `root` synchronoulsy", function() {
mount(root, createComponent({
view : function() {
return m("div")
@@ -69,7 +72,37 @@ o.spec("mount", function() {
o(root.childNodes.length).equals(0)
})
- o("redraws on events", function(done) {
+ o("Mounting a second root doesn't cause the first one to redraw", function() {
+ var view = o.spy(function() {
+ return m("div")
+ })
+
+ render(root, [
+ m("#child0"),
+ m("#child1")
+ ])
+
+ mount(root.childNodes[0], createComponent({
+ view : view
+ }))
+
+ o(root.firstChild.nodeName).equals("DIV")
+ o(view.callCount).equals(1)
+
+ mount(root.childNodes[1], createComponent({
+ view : function() {
+ return m("div")
+ }
+ }))
+
+ o(view.callCount).equals(1)
+
+ throttleMock.fire()
+
+ o(view.callCount).equals(1)
+ })
+
+ o("redraws on events", function() {
var onupdate = o.spy()
var oninit = o.spy()
var onclick = o.spy()
@@ -97,17 +130,12 @@ o.spec("mount", function() {
o(onclick.args[0].type).equals("click")
o(onclick.args[0].target).equals(root.firstChild)
- // Wrapped to give time for the rate-limited redraw to fire
- setTimeout(function() {
- o(onupdate.callCount).equals(1)
+ throttleMock.fire()
- done()
- }, FRAME_BUDGET)
+ o(onupdate.callCount).equals(1)
})
- o("redraws several mount points on events", function(done, timeout) {
- timeout(60)
-
+ o("redraws several mount points on events", function() {
var onupdate0 = o.spy()
var oninit0 = o.spy()
var onclick0 = o.spy()
@@ -154,26 +182,26 @@ o.spec("mount", function() {
o(onclick0.callCount).equals(1)
o(onclick0.this).equals(root.childNodes[0].firstChild)
- setTimeout(function() {
- o(onupdate0.callCount).equals(1)
- o(onupdate1.callCount).equals(1)
+ throttleMock.fire()
- root.childNodes[1].firstChild.dispatchEvent(e)
- o(onclick1.callCount).equals(1)
- o(onclick1.this).equals(root.childNodes[1].firstChild)
+ o(onupdate0.callCount).equals(1)
+ o(onupdate1.callCount).equals(1)
- setTimeout(function() {
- o(onupdate0.callCount).equals(2)
- o(onupdate1.callCount).equals(2)
+ root.childNodes[1].firstChild.dispatchEvent(e)
- done()
- }, FRAME_BUDGET)
- }, FRAME_BUDGET)
+ o(onclick1.callCount).equals(1)
+ o(onclick1.this).equals(root.childNodes[1].firstChild)
+ throttleMock.fire()
+
+ o(onupdate0.callCount).equals(2)
+ o(onupdate1.callCount).equals(2)
})
- o("event handlers can skip redraw", function(done) {
- var onupdate = o.spy()
+ o("event handlers can skip redraw", function() {
+ var onupdate = o.spy(function(){
+ throw new Error("This shouldn't have been called")
+ })
var oninit = o.spy()
var e = $window.document.createEvent("MouseEvents")
@@ -195,15 +223,12 @@ o.spec("mount", function() {
o(oninit.callCount).equals(1)
- // Wrapped to ensure no redraw fired
- setTimeout(function() {
- o(onupdate.callCount).equals(0)
+ throttleMock.fire()
- done()
- }, FRAME_BUDGET)
+ o(onupdate.callCount).equals(0)
})
- o("redraws when the render function is run", function(done) {
+ o("redraws when the render function is run", function() {
var onupdate = o.spy()
var oninit = o.spy()
@@ -221,17 +246,12 @@ o.spec("mount", function() {
redrawService.redraw()
- // Wrapped to give time for the rate-limited redraw to fire
- setTimeout(function() {
- o(onupdate.callCount).equals(1)
+ throttleMock.fire()
- done()
- }, FRAME_BUDGET)
+ o(onupdate.callCount).equals(1)
})
- o("throttles", function(done, timeout) {
- timeout(200)
-
+ o("throttles", function() {
var i = 0
mount(root, createComponent({view: function() {i++}}))
var before = i
@@ -243,12 +263,11 @@ o.spec("mount", function() {
var after = i
- setTimeout(function(){
- o(before).equals(1) // mounts synchronously
- o(after).equals(1) // throttles rest
- o(i).equals(2)
- done()
- },40)
+ throttleMock.fire()
+
+ o(before).equals(1) // mounts synchronously
+ o(after).equals(1) // throttles rest
+ o(i).equals(2)
})
})
})
diff --git a/api/tests/test-redraw.js b/api/tests/test-redraw.js
index f13c2d3f..65831bb0 100644
--- a/api/tests/test-redraw.js
+++ b/api/tests/test-redraw.js
@@ -2,6 +2,7 @@
var o = require("../../ospec/ospec")
var domMock = require("../../test-utils/domMock")
+var throttleMocker = require("../../test-utils/throttleMock")
var apiRedraw = require("../../api/redraw")
o.spec("redrawService", function() {
@@ -17,25 +18,39 @@ o.spec("redrawService", function() {
redrawService.redraw()
})
+ o("honours throttleMock", function() {
+ var throttleMock = throttleMocker()
+ redrawService = apiRedraw(domMock(), throttleMock.throttle)
+ var spy = o.spy()
+
+ redrawService.subscribe(root, spy)
+
+ o(spy.callCount).equals(0)
+
+ redrawService.redraw()
+
+ o(spy.callCount).equals(0)
+
+ throttleMock.fire()
+
+ o(spy.callCount).equals(1)
+ })
+
o("should run a single renderer entry", function(done) {
var spy = o.spy()
redrawService.subscribe(root, spy)
o(spy.callCount).equals(0)
-
- redrawService.redraw()
-
- o(spy.callCount).equals(1)
redrawService.redraw()
redrawService.redraw()
redrawService.redraw()
- o(spy.callCount).equals(1)
+ o(spy.callCount).equals(0)
setTimeout(function() {
- o(spy.callCount).equals(2)
-
+ o(spy.callCount).equals(1)
+
done()
}, 20)
})
@@ -54,27 +69,29 @@ o.spec("redrawService", function() {
redrawService.redraw()
- o(spy1.callCount).equals(1)
- o(spy2.callCount).equals(1)
- o(spy3.callCount).equals(1)
+ o(spy1.callCount).equals(0)
+ o(spy2.callCount).equals(0)
+ o(spy3.callCount).equals(0)
redrawService.redraw()
- o(spy1.callCount).equals(1)
- o(spy2.callCount).equals(1)
- o(spy3.callCount).equals(1)
+ o(spy1.callCount).equals(0)
+ o(spy2.callCount).equals(0)
+ o(spy3.callCount).equals(0)
setTimeout(function() {
- o(spy1.callCount).equals(2)
- o(spy2.callCount).equals(2)
- o(spy3.callCount).equals(2)
-
+ o(spy1.callCount).equals(1)
+ o(spy2.callCount).equals(1)
+ o(spy3.callCount).equals(1)
+
done()
}, 20)
})
- o("should stop running after unsubscribe", function() {
- var spy = o.spy()
+ o("should stop running after unsubscribe", function(done) {
+ var spy = o.spy(function() {
+ throw new Error("This shouldn't have been called")
+ })
redrawService.subscribe(root, spy)
redrawService.unsubscribe(root, spy)
@@ -82,9 +99,33 @@ o.spec("redrawService", function() {
redrawService.redraw()
o(spy.callCount).equals(0)
+ setTimeout(function() {
+ o(spy.callCount).equals(0)
+
+ done()
+ }, 20)
})
- o("does nothing on invalid unsubscribe", function() {
+ o("should stop running after unsubscribe, even if it occurs after redraw is requested", function(done) {
+ var spy = o.spy(function() {
+ throw new Error("This shouldn't have been called")
+ })
+
+ redrawService.subscribe(root, spy)
+
+ redrawService.redraw()
+
+ redrawService.unsubscribe(root, spy)
+
+ o(spy.callCount).equals(0)
+ setTimeout(function() {
+ o(spy.callCount).equals(0)
+
+ done()
+ }, 20)
+ })
+
+ o("does nothing on invalid unsubscribe", function(done) {
var spy = o.spy()
redrawService.subscribe(root, spy)
@@ -92,6 +133,39 @@ o.spec("redrawService", function() {
redrawService.redraw()
- o(spy.callCount).equals(1)
+ setTimeout(function() {
+ o(spy.callCount).equals(1)
+
+ done()
+ }, 20)
+ })
+
+ o("redraw.sync() redraws all roots synchronously", function() {
+ var el1 = $document.createElement("div")
+ var el2 = $document.createElement("div")
+ var el3 = $document.createElement("div")
+ var spy1 = o.spy()
+ var spy2 = o.spy()
+ var spy3 = o.spy()
+
+ redrawService.subscribe(el1, spy1)
+ redrawService.subscribe(el2, spy2)
+ redrawService.subscribe(el3, spy3)
+
+ o(spy1.callCount).equals(0)
+ o(spy2.callCount).equals(0)
+ o(spy3.callCount).equals(0)
+
+ redrawService.redraw.sync()
+
+ o(spy1.callCount).equals(1)
+ o(spy2.callCount).equals(1)
+ o(spy3.callCount).equals(1)
+
+ redrawService.redraw.sync()
+
+ o(spy1.callCount).equals(2)
+ o(spy2.callCount).equals(2)
+ o(spy3.callCount).equals(2)
})
})
diff --git a/api/tests/test-router.js b/api/tests/test-router.js
index 9406de70..f5336625 100644
--- a/api/tests/test-router.js
+++ b/api/tests/test-router.js
@@ -3,6 +3,7 @@
var o = require("../../ospec/ospec")
var callAsync = require("../../test-utils/callAsync")
var browserMock = require("../../test-utils/browserMock")
+var throttleMocker = require("../../test-utils/throttleMock")
var m = require("../../render/hyperscript")
var callAsync = require("../../test-utils/callAsync")
@@ -14,19 +15,23 @@ o.spec("route", function() {
void [{protocol: "http:", hostname: "localhost"}, {protocol: "file:", hostname: "/"}].forEach(function(env) {
void ["#", "?", "", "#!", "?!", "/foo"].forEach(function(prefix) {
o.spec("using prefix `" + prefix + "` starting on " + env.protocol + "//" + env.hostname, function() {
- var FRAME_BUDGET = Math.floor(1000 / 60)
- var $window, root, redrawService, route
+ var $window, root, redrawService, route, throttleMock
o.beforeEach(function() {
$window = browserMock(env)
+ throttleMock = throttleMocker()
root = $window.document.body
- redrawService = apiRedraw($window)
+ redrawService = apiRedraw($window, throttleMock.throttle)
route = apiRouter($window, redrawService)
route.prefix(prefix)
})
+ o.afterEach(function() {
+ o(throttleMock.queueLength()).equals(0)
+ })
+
o("throws on invalid `root` DOM node", function() {
var threw = false
try {
@@ -50,7 +55,7 @@ o.spec("route", function() {
o(root.firstChild.nodeName).equals("DIV")
})
- o("routed mount points can redraw synchronously (POJO component)", function() {
+ o("routed mount points only redraw asynchronously (POJO component)", function() {
var view = o.spy()
$window.location.href = prefix + "/"
@@ -60,11 +65,14 @@ o.spec("route", function() {
redrawService.redraw()
- o(view.callCount).equals(2)
+ o(view.callCount).equals(1)
+ throttleMock.fire()
+
+ o(view.callCount).equals(2)
})
- o("routed mount points can redraw synchronously (constructible component)", function() {
+ o("routed mount points only redraw asynchronously (constructible component)", function() {
var view = o.spy()
var Cmp = function(){}
@@ -77,11 +85,14 @@ o.spec("route", function() {
redrawService.redraw()
- o(view.callCount).equals(2)
+ o(view.callCount).equals(1)
+ throttleMock.fire()
+
+ o(view.callCount).equals(2)
})
- o("routed mount points can redraw synchronously (closure component)", function() {
+ o("routed mount points only redraw asynchronously (closure component)", function() {
var view = o.spy()
function Cmp() {return {view: view}}
@@ -93,8 +104,11 @@ o.spec("route", function() {
redrawService.redraw()
- o(view.callCount).equals(2)
+ o(view.callCount).equals(1)
+ throttleMock.fire()
+
+ o(view.callCount).equals(2)
})
o("default route doesn't break back button", function(done) {
@@ -160,11 +174,12 @@ o.spec("route", function() {
o(oninit.callCount).equals(1)
redrawService.redraw()
+ throttleMock.fire()
o(onupdate.callCount).equals(1)
})
- o("redraws on events", function(done) {
+ o("redraws on events", function() {
var onupdate = o.spy()
var oninit = o.spy()
var onclick = o.spy()
@@ -194,12 +209,9 @@ o.spec("route", function() {
o(onclick.args[0].type).equals("click")
o(onclick.args[0].target).equals(root.firstChild)
- // Wrapped to give time for the rate-limited redraw to fire
- callAsync(function() {
- o(onupdate.callCount).equals(1)
- done()
- })
+ throttleMock.fire()
+ o(onupdate.callCount).equals(1)
})
o("event handlers can skip redraw", function(done) {
@@ -224,9 +236,11 @@ o.spec("route", function() {
}
})
+ o(oninit.callCount).equals(1)
+
root.firstChild.dispatchEvent(e)
- o(oninit.callCount).equals(1)
+ o(e.redraw).notEquals(false)
// Wrapped to ensure no redraw fired
callAsync(function() {
@@ -267,6 +281,36 @@ o.spec("route", function() {
o($window.location.href).equals(env.protocol + "//" + (env.hostname === "/" ? "" : env.hostname) + slash + (prefix ? prefix + "/" : "") + "test")
})
+ o("passes options on route.link", function() {
+ var opts = {}
+ var e = $window.document.createEvent("MouseEvents")
+
+ e.initEvent("click", true, true)
+ $window.location.href = prefix + "/"
+
+ route(root, "/", {
+ "/" : {
+ view: function() {
+ return m("a", {
+ href: "/test",
+ oncreate: route.link(opts)
+ })
+ }
+ },
+ "/test" : {
+ view : function() {
+ return m("div")
+ }
+ }
+ })
+ route.set = o.spy(route.set)
+
+ root.firstChild.dispatchEvent(e)
+
+ o(route.set.callCount).equals(1)
+ o(route.set.args[2]).equals(opts)
+ })
+
o("accepts RouteResolver with onmatch that returns Component", function(done) {
var matchCount = 0
var renderCount = 0
@@ -500,7 +544,10 @@ o.spec("route", function() {
o(oninit.callCount).equals(1)
route.set("/def")
callAsync(function() {
+ throttleMock.fire()
+
o(oninit.callCount).equals(2)
+
done()
})
})
@@ -536,23 +583,28 @@ o.spec("route", function() {
route(root, "/a", {
"/a" : {
render: function() {
- return m("div")
+ return m("div", m("p"))
},
},
"/b" : {
render: function() {
- return m("div")
+ return m("div", m("a"))
},
},
})
var dom = root.firstChild
+ var child = dom.firstChild
+
o(root.firstChild.nodeName).equals("DIV")
route.set("/b")
callAsync(function() {
+ throttleMock.fire()
+
o(root.firstChild).equals(dom)
+ o(root.firstChild.firstChild).notEquals(child)
done()
})
@@ -586,6 +638,7 @@ o.spec("route", function() {
o(renderCount).equals(1)
redrawService.redraw()
+ throttleMock.fire()
o(matchCount).equals(1)
o(renderCount).equals(2)
@@ -621,6 +674,7 @@ o.spec("route", function() {
o(renderCount).equals(1)
redrawService.redraw()
+ throttleMock.fire()
o(matchCount).equals(1)
o(renderCount).equals(2)
@@ -665,7 +719,7 @@ o.spec("route", function() {
route(root, "/a", {
"/a" : {
onmatch: function() {
- route.set("/b")
+ route.set("/b", {}, {state: {a: 5}})
},
render: render
},
@@ -684,6 +738,7 @@ o.spec("route", function() {
o(view.callCount).equals(1)
o(root.childNodes.length).equals(1)
o(root.firstChild.nodeName).equals("DIV")
+ o($window.history.state).deepEquals({a: 5})
done()
})
@@ -815,10 +870,14 @@ o.spec("route", function() {
})
callAsync(function() {
+ throttleMock.fire()
+
route.set("/b")
callAsync(function() {
callAsync(function() {
callAsync(function() {
+ throttleMock.fire()
+
o(render.callCount).equals(0)
o(component.view.callCount).equals(2)
@@ -939,6 +998,7 @@ o.spec("route", function() {
o(onmatch.callCount).equals(1)
redrawService.redraw()
+ throttleMock.fire()
o(view.callCount).equals(2)
o(onmatch.callCount).equals(1)
@@ -1017,6 +1077,8 @@ o.spec("route", function() {
})
callAsync(function() {
+ throttleMock.fire()
+
o(onmatch.callCount).equals(1)
o(render.callCount).equals(1)
@@ -1024,6 +1086,8 @@ o.spec("route", function() {
callAsync(function() {
callAsync(function() {
+ throttleMock.fire()
+
o(onmatch.callCount).equals(2)
o(render.callCount).equals(2)
@@ -1074,9 +1138,15 @@ o.spec("route", function() {
route.set("/b")
callAsync(function() {
+ throttleMock.fire()
+
+ o(root.firstChild.nodeName).equals("B")
+
route.set("/a")
callAsync(function() {
+ throttleMock.fire()
+
o(root.firstChild.nodeName).equals("A")
done()
@@ -1141,7 +1211,9 @@ o.spec("route", function() {
route.set("/b")
+ // setting the route is asynchronous
callAsync(function() {
+ throttleMock.fire()
o(spy.callCount).equals(1)
done()
@@ -1181,9 +1253,7 @@ o.spec("route", function() {
})
})
- o("throttles", function(done, timeout) {
- timeout(200)
-
+ o("throttles", function() {
var i = 0
$window.location.href = prefix + "/"
route(root, "/", {
@@ -1197,12 +1267,11 @@ o.spec("route", function() {
redrawService.redraw()
var after = i
- setTimeout(function() {
- o(before).equals(1) // routes synchronously
- o(after).equals(2) // redraws synchronously
- o(i).equals(3) // throttles rest
- done()
- }, FRAME_BUDGET * 2)
+ throttleMock.fire()
+
+ o(before).equals(1) // routes synchronously
+ o(after).equals(1) // redraws asynchronously
+ o(i).equals(2)
})
o("m.route.param is available outside of route handlers", function(done) {
diff --git a/bundler/cli.js b/bundler/cli.js
index f702ce7e..93ad0adf 100644
--- a/bundler/cli.js
+++ b/bundler/cli.js
@@ -5,7 +5,7 @@ var fs = require("fs");
var bundle = require("./bundle")
var minify = require("./minify")
-var aliases = {o: "output", m: "minify", w: "watch", a: "aggressive"}
+var aliases = {o: "output", m: "minify", w: "watch", a: "aggressive", s: "save"}
var params = {}
var args = process.argv.slice(2), command = null
for (var i = 0; i < args.length; i++) {
@@ -27,8 +27,6 @@ function add(value) {
bundle(params.input, params.output, {watch: params.watch})
if (params.minify) {
minify(params.output, params.output, {watch: params.watch, advanced: params.aggressive}, function(stats) {
- var readme, kb;
-
function format(n) {
return n.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")
}
@@ -36,14 +34,16 @@ if (params.minify) {
console.log("Original size: " + format(stats.originalGzipSize) + " bytes gzipped (" + format(stats.originalSize) + " bytes uncompressed)")
console.log("Compiled size: " + format(stats.compressedGzipSize) + " bytes gzipped (" + format(stats.compressedSize) + " bytes uncompressed)")
- readme = fs.readFileSync("./README.md", "utf8")
- kb = stats.compressedGzipSize / 1024
+ if (params.save) {
+ var readme = fs.readFileSync("./README.md", "utf8")
+ var kb = stats.compressedGzipSize / 1000
- fs.writeFileSync("./README.md",
- readme.replace(
- /()(.+?)()/,
- "$1" + (kb % 1 ? kb.toFixed(2) : kb) + " KB$3"
+ fs.writeFileSync("./README.md",
+ readme.replace(
+ /()(.+?)()/,
+ "$1" + (kb % 1 ? kb.toFixed(2) : kb) + " KB$3"
+ )
)
- )
+ }
})
}
diff --git a/bundler/minify.js b/bundler/minify.js
index 51b2b775..3b1d3cae 100644
--- a/bundler/minify.js
+++ b/bundler/minify.js
@@ -1,6 +1,6 @@
"use strict"
-var http = require("http")
+var http = require("https")
var querystring = require("querystring")
var fs = require("fs")
@@ -22,7 +22,6 @@ module.exports = function(input, output, options, done) {
var response = ""
var req = http.request({
method: "POST",
- protocol: "http:",
hostname: "closure-compiler.appspot.com",
path: "/compile",
headers: {
@@ -33,8 +32,16 @@ module.exports = function(input, output, options, done) {
res.on("data", function(chunk) {
response += chunk.toString()
})
+
res.on("end", function() {
- var results = JSON.parse(response)
+ try {
+ var results = JSON.parse(response)
+ } catch(e) {
+ console.error(response);
+
+ throw e;
+ }
+
if (results.errors) {
for (var i = 0; i < results.errors.length; i++) console.log(results.errors[i])
}
diff --git a/bundler/tests/test-bundler.js b/bundler/tests/test-bundler.js
index 15e7f932..ff8bb32e 100644
--- a/bundler/tests/test-bundler.js
+++ b/bundler/tests/test-bundler.js
@@ -5,7 +5,7 @@ var bundle = require("../bundle")
var fs = require("fs")
-var ns = "bundler/tests/"
+var ns = "./"
function read(filepath) {
try {return fs.readFileSync(ns + filepath, "utf8")} catch (e) {/* ignore */}
}
diff --git a/dangerfile.js b/dangerfile.js
new file mode 100644
index 00000000..bd9cd30b
--- /dev/null
+++ b/dangerfile.js
@@ -0,0 +1,60 @@
+/* global danger warn fail */
+"use strict";
+
+var fs = require("fs"),
+ path = require("path"),
+
+ locater = require("locater"),
+ pinpoint = require("pinpoint"),
+ dedent = require("dedent");
+
+// Various views of changed/added files
+var jsfiles = danger.git.created_files
+ .concat(danger.git.modified_files)
+ .filter((file) => path.extname(file) === ".js"),
+
+ changelog = danger.git.modified_files.find((file) =>
+ file === "docs/change-log.md"
+ ),
+
+ appfiles = jsfiles.filter((file) =>
+ file.indexOf("tests/") === -1
+ );
+
+function link(file, anchor, text) {
+ var repo = danger.github.pr.head.repo.html_url,
+ ref = danger.github.pr.head.ref;
+
+ return danger.utils.href(`${repo}/blob/${ref}/${file}${anchor || ""}`, file || text);
+}
+
+// All PRs should be targeted against `next`
+if(danger.github.pr.base.ref !== "next") {
+ warn("PRs should be based on `next`, rebase before submitting please");
+}
+
+// Any non-test JS changes should probably have a change-log entry
+if(appfiles.length && !changelog) {
+ warn(dedent(`
+ Please add an entry to ${link("docs/change-log.md")}.
+ `))
+}
+
+// Call out if `o.only(...)` was left in
+jsfiles
+ .filter((file) => file.indexOf("tests/") > -1)
+ // Have to exclude test-ospec.js because it specifically has a purposeful "o.only" in it
+ .filter((file) => file.indexOf("test-ospec") === -1)
+ .forEach((file) => {
+ var code = fs.readFileSync(file, "utf8"),
+ locs = locater.find("o.only", code);
+
+ locs.forEach((loc) =>
+ fail(dedent(`
+ Please remove the \`o.only\` from ${link(file, `#L${loc.line}`)}.
+
+ `))
+ )
+ });
diff --git a/docs/animation.md b/docs/animation.md
index de9d2bea..7e251580 100644
--- a/docs/animation.md
+++ b/docs/animation.md
@@ -102,4 +102,4 @@ Note that the `onbeforeremove` hook only fires on the element that loses its `pa
When creating animations, it's recommended that you only use the `opacity` and `transform` CSS rules, since these can be hardware-accelerated by modern browsers and yield better performance than animating `top`, `left`, `width`, and `height`.
-It's also recommended that you avoid the `box-shadow` rule and selectors like `:nth-child`, since these are also resource intensive options. If you want to animate a `box-shadow`, consider [putting the `box-shadow` rule on a pseudo element, and animate that element's opacity instead](http://tobiasahlin.com/blog/how-to-animate-box-shadow/). Other things that can be expensive include large or dynamically scaled images and overlapping elements with different `position` values (e.g. an absolute postioned element over a fixed element).
+It's also recommended that you avoid the `box-shadow` rule and selectors like `:nth-child`, since these are also resource intensive options. If you want to animate a `box-shadow`, consider [putting the `box-shadow` rule on a pseudo element, and animate that element's opacity instead](http://tobiasahlin.com/blog/how-to-animate-box-shadow/). Other things that can be expensive include large or dynamically scaled images and overlapping elements with different `position` values (e.g. an absolute positioned element over a fixed element).
diff --git a/docs/change-log.md b/docs/change-log.md
index 9c493aa4..687849e2 100644
--- a/docs/change-log.md
+++ b/docs/change-log.md
@@ -1,5 +1,11 @@
# Change log
+- [v2.0.0](#v200-wip)
+- [v1.1.6](#v116)
+- [v1.1.5](#v115)
+- [v1.1.4](#v114)
+- [v1.1.3](#v113)
+- [v1.1.2](#v112)
- [v1.1.1](#v111)
- [v1.1.0](#v110)
- [v1.0.1](#v101)
@@ -8,14 +14,137 @@
---
+### v2.0.0 (WIP)
+
+#### Breaking changes
+
+- API: `m.redraw()` is always asynchronous ([#1592](https://github.com/MithrilJS/mithril.js/pull/1592))
+- API: `m.mount()` will only render its own root when called, it will not trigger a `redraw()` ([#1592](https://github.com/MithrilJS/mithril.js/pull/1592))
+- API: Assigning to `vnode.state` (as in `vnode.state = ...`) is no longer supported. Instead, an error is thrown if `vnode.state` changes upon the invocation of a lifecycle hook.
+- API: `m.request` will no longer reject the Promise on server errors (eg. status >= 400) if the caller supplies an `extract` callback. This gives applications more control over handling server responses.
+
+#### News
+
+- API: Introduction of `m.redraw.sync()` ([#1592](https://github.com/MithrilJS/mithril.js/pull/1592))
+- API: Event handlers may also be objects with `handleEvent` methods ([#1939](https://github.com/MithrilJS/mithril.js/issues/1939)).
+- API: `m.route.link` accepts an optional `options` object ([#1930](https://github.com/MithrilJS/mithril.js/pull/1930))
+- API: `m.request` supports `timeout` as attr - ([#1966](https://github.com/MithrilJS/mithril.js/pull/1966))
+- Mocks: add limited support for the DOMParser API ([#2097](https://github.com/MithrilJS/mithril.js/pull/2097))
+- API: add support for raw SVG in `m.trust()` string ([#2097](https://github.com/MithrilJS/mithril.js/pull/2097))
+- Internals: remove the DOM nodes recycling pool ([#2122](https://github.com/MithrilJS/mithril.js/pull/2122))
+
+#### Bug fixes
+
+- API: `m.route.set()` causes all mount points to be redrawn ([#1592](https://github.com/MithrilJS/mithril.js/pull/1592))
+- render/attrs: Using style objects in hyperscript calls will now properly diff style properties from one render to another as opposed to re-writing all element style properties every render.
+- render/attrs: `xlink:href` attributes are now correctly removed
+- render/attrs: fix element value don't change if new value is undefined [#2082](https://github.com/MithrilJS/mithril.js/issues/2082)
+(https://github.com/MithrilJS/mithril.js/pull/2130)
+- render/core: Render state correctly on select change event [#1916](https://github.com/MithrilJS/mithril.js/issues/1916) ([#1918](https://github.com/MithrilJS/mithril.js/pull/1918) [@robinchew](https://github.com/robinchew), [#2052](https://github.com/MithrilJS/mithril.js/pull/2052))
+- render/core: fix various updateNodes/removeNodes issues when the pool and fragments are involved [#1990](https://github.com/MithrilJS/mithril.js/issues/1990), [#1991](https://github.com/MithrilJS/mithril.js/issues/1991), [#2003](https://github.com/MithrilJS/mithril.js/issues/2003), [#2021](https://github.com/MithrilJS/mithril.js/pull/2021)
+- render/core: fix crashes when the keyed vnodes with the same `key` had different `tag` values [#2128](https://github.com/MithrilJS/mithril.js/issues/2128) [@JacksonJN](https://github.com/JacksonJN) ([#2130](https://github.com/MithrilJS/mithril.js/pull/2130))
+- render/core: fix cached nodes behavior in some keyed diff scenarios [#2132](https://github.com/MithrilJS/mithril.js/issues/2132) ([#2130](https://github.com/MithrilJS/mithril.js/pull/2130))
+- render/events: `addEventListener` and `removeEventListener` are always used to manage event subscriptions, preventing external interference.
+- render/events: Event listeners allocate less memory, swap at low cost, and are properly diffed now when rendered via `m.mount()`/`m.redraw()`.
+- render/events: `Object.prototype` properties can no longer interfere with event listener calls.
+- render/events: Event handlers, when set to literally `undefined` (or any non-function), are now correctly removed.
+- render/hooks: fixed an ommission that caused `oninit` to be called unnecessarily in some cases [#1992](https://github.com/MithrilJS/mithril.js/issues/1992)
+- docs: fix typo ([#2104](https://github.com/MithrilJS/mithril.js/pull/2104) [@mikeyb](https://github.com/mikeyb))
+---
+
+### v1.1.7
+
+- Promise polyfill implementation separated from polyfilling logic.
+- `PromisePolyfill` is now available on the exported/global `m`.
+
+---
+
+### v1.1.6
+
+- core: render() function can no longer prevent from changing `document.activeElement` in lifecycle hooks ([#1988](https://github.com/MithrilJS/mithril.js/pull/1988), [@purplecode](https://github.com/purplecode))
+- core: don't call `onremove` on the children of components that return null from the view [#1921](https://github.com/MithrilJS/mithril.js/issues/1921) [@octavore](https://github.com/octavore) ([#1922](https://github.com/MithrilJS/mithril.js/pull/1922))
+- hypertext: correct handling of shared attributes object passed to `m()`. Will copy attributes when it's necessary [#1941](https://github.com/MithrilJS/mithril.js/issues/1941) [@s-ilya](https://github.com/s-ilya) ([#1942](https://github.com/MithrilJS/mithril.js/pull/1942))
+
+#### Ospec improvements
+
+- ospec v1.4.0
+ - Added support for async functions and promises in tests ([#1928](https://github.com/MithrilJS/mithril.js/pull/1928), [@StephanHoyer](https://github.com/StephanHoyer))
+ - Error handling for async tests with `done` callbacks supports error as first argument ([#1928](https://github.com/MithrilJS/mithril.js/pull/1928))
+ - Error messages which include newline characters do not swallow the stack trace [#1495](https://github.com/MithrilJS/mithril.js/issues/1495) ([#1984](https://github.com/MithrilJS/mithril.js/pull/1984), [@RodericDay](https://github.com/RodericDay))
+- ospec v2.0.0 (to be released)
+ - Added support for custom reporters ([#2009](https://github.com/MithrilJS/mithril.js/pull/2020))
+ - Make Ospec more [Flems](https://flems.io)-friendly ([#2034](https://github.com/MithrilJS/mithril.js/pull/2034))
+ - Works either as a global or in CommonJS environments
+ - the o.run() report is always printed asynchronously (it could be synchronous before if none of the tests were async).
+ - Properly point to the assertion location of async errors [#2036](https://github.com/MithrilJS/mithril.js/issues/2036)
+ - expose the default reporter as `o.report(results)`
+ - Don't try to access the stack traces in IE9
+
+---
+
+### v1.1.5
+
+- API: If a user sets the Content-Type header within a request's options, that value will be the entire header value rather than being appended to the default value ([#1924](https://github.com/MithrilJS/mithril.js/pull/1924))
+
+---
+
+### v1.1.4
+
+#### Bug fixes:
+
+- Fix IE bug where active element is null causing render function to throw error ([#1943](https://github.com/MithrilJS/mithril.js/pull/1943), [@JacksonJN](https://github.com/JacksonJN))
+
+#### Ospec improvements:
+
+- Log using util.inspect to show object content instead of "[object Object]" ([#1661](https://github.com/MithrilJS/mithril.js/issues/1661), [@porsager](https://github.com/porsager))
+---
+
+### v1.1.3
+
+#### Bug fixes:
+
+- move out npm dependencies added by mistake
+
+---
+
+### v1.1.2
+
+#### Bug fixes:
+
+- core: Namespace fixes [#1819](https://github.com/MithrilJS/mithril.js/issues/1819), ([#1825](https://github.com/MithrilJS/mithril.js/pull/1825) [@SamuelTilly](https://github.com/SamuelTilly)), [#1820](https://github.com/MithrilJS/mithril.js/issues/1820) ([#1864](https://github.com/MithrilJS/mithril.js/pull/1864)), [#1872](https://github.com/MithrilJS/mithril.js/issues/1872) ([#1873](https://github.com/MithrilJS/mithril.js/pull/1873))
+- core: Fix select option to allow empty string value [#1814](https://github.com/MithrilJS/mithril.js/issues/1814) ([#1828](https://github.com/MithrilJS/mithril.js/pull/1828) [@spacejack](https://github.com/spacejack))
+- core: Reset e.redraw when it was set to `false` [#1850](https://github.com/MithrilJS/mithril.js/issues/1850) ([#1890](https://github.com/MithrilJS/mithril.js/pull/1890))
+- core: differentiate between `{ value: "" }` and `{ value: 0 }` for form elements [#1595 comment](https://github.com/MithrilJS/mithril.js/pull/1595#issuecomment-304071453) ([#1862](https://github.com/MithrilJS/mithril.js/pull/1862))
+- core: Don't reset the cursor of textareas in IE10 when setting an identical `value` [#1870](https://github.com/MithrilJS/mithril.js/issues/1870) ([#1871](https://github.com/MithrilJS/mithril.js/pull/1871))
+- hypertext: Correct handling of `[value=""]` ([#1843](https://github.com/MithrilJS/mithril.js/issues/1843), [@CreaturesInUnitards](https://github.com/CreaturesInUnitards))
+- router: Don't overwrite the options object when redirecting from `onmatch with m.route.set()` [#1857](https://github.com/MithrilJS/mithril.js/issues/1857) ([#1889](https://github.com/MithrilJS/mithril.js/pull/1889))
+- stream: Move the "use strict" directive inside the IIFE [#1831](https://github.com/MithrilJS/mithril.js/issues/1831) ([#1893](https://github.com/MithrilJS/mithril.js/pull/1893))
+
+#### Ospec improvements:
+
+- Shell command: Ignore hidden directories and files ([#1855](https://github.com/MithrilJS/mithril.js/pull/1855) [@pdfernhout)](https://github.com/pdfernhout))
+- Library: Add the possibility to name new test suites ([#1529](https://github.com/MithrilJS/mithril.js/pull/1529))
+
+#### Docs / Repo maintenance:
+
+Our thanks to [@0joshuaolson1](https://github.com/0joshuaolson1), [@ACXgit](https://github.com/ACXgit), [@cavemansspa](https://github.com/cavemansspa), [@CreaturesInUnitards](https://github.com/CreaturesInUnitards), [@dlepaux](https://github.com/dlepaux), [@isaaclyman](https://github.com/isaaclyman), [@kevinkace](https://github.com/kevinkace), [@micellius](https://github.com/micellius), [@spacejack](https://github.com/spacejack) and [@yurivish](https://github.com/yurivish)
+
+#### Other:
+
+- Addition of a performance regression test suite ([#1789](https://github.com/MithrilJS/mithril.js/issues/1789))
+
+---
+
### v1.1.1
#### 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
#### News
@@ -26,10 +155,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 +166,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)
---
@@ -155,7 +284,7 @@ m("div", {
// Called after the node is updated
onupdate : function(vnode) { /*...*/ },
// Called before the node is removed, return a Promise that resolves when
- // ready for the node to be removed from the DOM
+ // ready for the node to be removed from the DOM
onbeforeremove : function(vnode) { /*...*/ },
// Called before the node is removed, but after onbeforeremove calls done()
onremove : function(vnode) { /*...*/ }
@@ -472,9 +601,9 @@ In `v0.2.x` reading route params was entirely handled through `m.route.param()`.
```javascript
m.route(document.body, "/booga", {
"/:attr" : {
- controller : function() {
- m.route.param("attr") // "booga"
- },
+ controller : function() {
+ m.route.param("attr") // "booga"
+ },
view : function() {
m.route.param("attr") // "booga"
}
@@ -489,11 +618,11 @@ m.route(document.body, "/booga", {
"/:attr" : {
oninit : function(vnode) {
vnode.attrs.attr // "booga"
- m.route.param("attr") // "booga"
+ m.route.param("attr") // "booga"
},
view : function(vnode) {
vnode.attrs.attr // "booga"
- m.route.param("attr") // "booga"
+ m.route.param("attr") // "booga"
}
}
})
@@ -531,14 +660,14 @@ It is no longer possible to prevent unmounting via `onunload`'s `e.preventDefaul
```javascript
var Component = {
- controller: function() {
- this.onunload = function(e) {
- if (condition) e.preventDefault()
- }
- },
- view: function() {
- return m("a[href=/]", {config: m.route})
- }
+ controller: function() {
+ this.onunload = function(e) {
+ if (condition) e.preventDefault()
+ }
+ },
+ view: function() {
+ return m("a[href=/]", {config: m.route})
+ }
}
```
@@ -546,9 +675,9 @@ var Component = {
```javascript
var Component = {
- view: function() {
- return m("a", {onclick: function() {if (!condition) m.route.set("/")}})
- }
+ view: function() {
+ return m("a", {onclick: function() {if (!condition) m.route.set("/")}})
+ }
}
```
@@ -562,14 +691,14 @@ Components no longer call `this.onunload` when they are being removed. They now
```javascript
var Component = {
- controller: function() {
- this.onunload = function(e) {
- // ...
- }
- },
- view: function() {
- // ...
- }
+ controller: function() {
+ this.onunload = function(e) {
+ // ...
+ }
+ },
+ view: function() {
+ // ...
+ }
}
```
@@ -577,12 +706,12 @@ var Component = {
```javascript
var Component = {
- onremove : function() {
- // ...
- }
- view: function() {
- // ...
- }
+ onremove : function() {
+ // ...
+ }
+ view: function() {
+ // ...
+ }
}
```
@@ -598,13 +727,13 @@ In addition, requests no longer have `m.startComputation`/`m.endComputation` sem
```javascript
var data = m.request({
- method: "GET",
- url: "https://api.github.com/",
- initialValue: [],
+ method: "GET",
+ url: "https://api.github.com/",
+ initialValue: [],
})
setTimeout(function() {
- console.log(data())
+ console.log(data())
}, 1000)
```
@@ -613,15 +742,15 @@ setTimeout(function() {
```javascript
var data = []
m.request({
- method: "GET",
- url: "https://api.github.com/",
+ method: "GET",
+ url: "https://api.github.com/",
})
.then(function (responseBody) {
- data = responseBody
+ data = responseBody
})
setTimeout(function() {
- console.log(data) // note: not a getter-setter
+ console.log(data) // note: not a getter-setter
}, 1000)
```
@@ -653,11 +782,11 @@ greetAsync()
```javascript
var greetAsync = function() {
- return new Promise(function(resolve){
- setTimeout(function() {
- resolve("hello")
- }, 1000)
- })
+ return new Promise(function(resolve){
+ setTimeout(function() {
+ resolve("hello")
+ }, 1000)
+ })
}
greetAsync()
@@ -679,7 +808,7 @@ m.sync([
m.request({ method: 'GET', url: 'https://api.github.com/users/isiahmeadows' }),
])
.then(function (users) {
- console.log("Contributors:", users[0].name, "and", users[1].name)
+ console.log("Contributors:", users[0].name, "and", users[1].name)
})
```
@@ -691,7 +820,7 @@ Promise.all([
m.request({ method: 'GET', url: 'https://api.github.com/users/isiahmeadows' }),
])
.then(function (users) {
- console.log("Contributors:", users[0].name, "and", users[1].name)
+ console.log("Contributors:", users[0].name, "and", users[1].name)
})
```
@@ -706,7 +835,7 @@ In `v0.2.x`, the `xlink` namespace was the only supported attribute namespace, a
```javascript
m("svg",
// the `href` attribute is namespaced automatically
- m("image[href='image.gif']")
+ m("image[href='image.gif']")
)
```
@@ -715,7 +844,7 @@ m("svg",
```javascript
m("svg",
// User-specified namespace on the `href` attribute
- m("image[xlink:href='image.gif']")
+ m("image[xlink:href='image.gif']")
)
```
diff --git a/docs/code-of-conduct.md b/docs/code-of-conduct.md
new file mode 100644
index 00000000..a8875af5
--- /dev/null
+++ b/docs/code-of-conduct.md
@@ -0,0 +1,74 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, gender identity and expression, level of experience,
+nationality, personal appearance, race, religion, or sexual identity and
+orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+ address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+ professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at [github@patcavit.com](mailto:github@patcavit.com?subject=Mithril%20Code%20of%20Conduct). All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at [http://contributor-covenant.org/version/1/4][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/4/
diff --git a/docs/components.md b/docs/components.md
index 229f1293..cbb97cc0 100644
--- a/docs/components.md
+++ b/docs/components.md
@@ -61,6 +61,9 @@ var ComponentWithHooks = {
oncreate: function(vnode) {
console.log("DOM created")
},
+ onbeforeupdate: function(vnode, old) {
+ return true
+ },
onupdate: function(vnode) {
console.log("DOM updated")
},
@@ -74,9 +77,6 @@ var ComponentWithHooks = {
onremove: function(vnode) {
console.log("removing DOM element")
},
- onbeforeupdate: function(vnode, old) {
- return true
- },
view: function(vnode) {
return "hello"
}
@@ -177,7 +177,7 @@ They can be consumed in the same way regular components can.
m.render(document.body, m(closureComponent))
// EXAMPLE: via m.mount
-m.mount(document.body, closuresComponent)
+m.mount(document.body, closureComponent)
// EXAMPLE: via m.route
m.route(document.body, "/", {
@@ -316,7 +316,7 @@ var Login = {
Normally, in the context of a larger application, a login component like the one above exists alongside components for user registration and password recovery. Imagine that we want to be able to prepopulate the email field when navigating from the login screen to the registration or password recovery screens (or vice versa), so that the user doesn't need to re-type their email if they happened to fill the wrong page (or maybe you want to bump the user to the registration form if a username is not found).
-Right away, we see that sharing the `username` and `password` fields from this component to another is difficult. This is because the fat component encapsulates its our state, which by definition makes this state difficult to access from outside.
+Right away, we see that sharing the `username` and `password` fields from this component to another is difficult. This is because the fat component encapsulates its state, which by definition makes this state difficult to access from outside.
It makes more sense to refactor this component and pull the state code out of the component and into the application's data layer. This can be as simple as creating a new module:
diff --git a/docs/contributing.md b/docs/contributing.md
index 5b4770d3..4e672470 100644
--- a/docs/contributing.md
+++ b/docs/contributing.md
@@ -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.
@@ -20,12 +20,14 @@ Ideally, the best way to report bugs is to provide a small snippet of code where
To send a pull request:
-- fork the repo (button at the top right in Github)
-- clone the forked repo to your computer (green button in Github)
+- fork the repo (button at the top right in GitHub)
+- clone the forked repo to your computer (green button in GitHub)
+- Switch to the `next` branch (run `git checkout next`)
- create a feature branch (run `git checkout -b the-feature-branch-name`)
- make your changes
-- run the tests (run `npm t`)
-- submit a pull request (go to the pull requests tab in Github, click the green button and select your feature branch)
+- run the tests (run `npm test`)
+- push your changes to your fork
+- submit a pull request (go to the pull requests tab in GitHub, click the green button and select your feature branch)
diff --git a/docs/css.md b/docs/css.md
index 7664d1ca..ab4f3e2f 100644
--- a/docs/css.md
+++ b/docs/css.md
@@ -87,7 +87,7 @@ Nowadays there are [a lot of CSS-in-JS libraries with various degrees of robustn
The main problem with many of these libraries is that even though they require a non-trivial amount of transpiler tooling and configuration, they also require sacrificing code readability in order to work, e.g. `` vs `` (or `m("a.button.danger")` if we're using hyperscript).
-Often sacrifices also need to be made at time of debugging, when mapping rendered CSS class names back to their source. Often all you get in browser developer tools is a class like `button_fvp6zc2gdj35evhsl73ffzq_0 danger_fgdl0s2a5fmle5g56rbuax71_0` with useless source maps (or worse, entirely criptic class names).
+Often sacrifices also need to be made at time of debugging, when mapping rendered CSS class names back to their source. Often all you get in browser developer tools is a class like `button_fvp6zc2gdj35evhsl73ffzq_0 danger_fgdl0s2a5fmle5g56rbuax71_0` with useless source maps (or worse, entirely cryptic class names).
Another common issue is lack of support for less basic CSS features such as `@keyframes` and `@font-face`.
diff --git a/docs/es6.md b/docs/es6.md
index 3c19613f..0192a6ca 100644
--- a/docs/es6.md
+++ b/docs/es6.md
@@ -5,7 +5,7 @@
---
-Mithril is written in ES5, and is fully compatible with ES6 as well. ES6 is a recent update to Javascript that introduces new syntax sugar for various common cases. It's not yet fully supported by all major browsers and it's not a requirement for writing application, but it may be pleasing to use depending on your team's preferences.
+Mithril is written in ES5, and is fully compatible with ES6 as well. ES6 is a recent update to Javascript that introduces new syntax sugar for various common cases. It's not yet fully supported by all major browsers and it's not a requirement for writing an application, but it may be pleasing to use depending on your team's preferences.
In some limited environments, it's possible to use a significant subset of ES6 directly without extra tooling (for example, in internal applications that do not support IE). However, for the vast majority of use cases, a compiler toolchain like [Babel](https://babeljs.io) is required to compile ES6 features down to ES5.
@@ -70,10 +70,12 @@ Create a `.babelrc` file:
Next, create a file called `webpack.config.js`
```javascript
+const path = require('path')
+
module.exports = {
entry: './src/index.js',
output: {
- path: './bin',
+ path: path.resolve(__dirname, './bin'),
filename: 'app.js',
},
module: {
diff --git a/docs/examples.md b/docs/examples.md
index 140ad3f6..749900cc 100644
--- a/docs/examples.md
+++ b/docs/examples.md
@@ -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)
diff --git a/docs/favicon.ico b/docs/favicon.ico
new file mode 100644
index 00000000..61807fae
Binary files /dev/null and b/docs/favicon.ico differ
diff --git a/docs/favicon.png b/docs/favicon.png
new file mode 100644
index 00000000..50712630
Binary files /dev/null and b/docs/favicon.png differ
diff --git a/docs/framework-comparison.md b/docs/framework-comparison.md
index cf8a3483..0969b2c9 100644
--- a/docs/framework-comparison.md
+++ b/docs/framework-comparison.md
@@ -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
------ | -------
diff --git a/docs/generate.js b/docs/generate.js
index 63628a72..5650ae9d 100644
--- a/docs/generate.js
+++ b/docs/generate.js
@@ -12,9 +12,6 @@ try {fs.mkdirSync("./dist/archive/v" + version)} catch (e) {/* ignore */}
var guides = fs.readFileSync("docs/nav-guides.md", "utf-8")
var methods = fs.readFileSync("docs/nav-methods.md", "utf-8")
-var index = fs.readFileSync("docs/index.md", "utf-8")
-fs.writeFileSync("README.md", index.replace(/(\]\()(.+?)\.md(\))/g, "$1http://mithril.js.org/$2.html$3"), "utf-8")
-
generate("docs")
function generate(pathname) {
@@ -66,8 +63,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)
}
}
}
diff --git a/docs/index.md b/docs/index.md
index 22bb9021..64018eff 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -225,7 +225,7 @@ var Splash = {
As you can see, this component simply renders a link to `#!/hello`. The `#!` part is known as a hashbang, and it's a common convention used in Single Page Applications to indicate that the stuff after it (the `/hello` part) is a route path.
-Now that we going to have more than one screen, we use `m.route` instead of `m.mount`.
+Now that we're going to have more than one screen, we use `m.route` instead of `m.mount`.
```javascript
m.route(root, "/splash", {
diff --git a/docs/installation.md b/docs/installation.md
index f0c527bc..5689bc25 100644
--- a/docs/installation.md
+++ b/docs/installation.md
@@ -2,6 +2,8 @@
- [CDN](#cdn)
- [NPM](#npm)
+- [Quick start with Webpack](#quick-start-with-webpack)
+- [TypeScript](#typescript)
### CDN
@@ -15,30 +17,56 @@ If you're new to Javascript or just want a very simple setup to get your feet we
### NPM
-#### Quick start with Webpack
-
```bash
-# 1) install
-npm install mithril --save
-
-npm install webpack --save
-
-# 2) add this line into the scripts section in package.json
-# "scripts": {
-# "start": "webpack src/index.js bin/app.js --watch"
-# }
-
-# 3) create an `src/index.js` file
-
-# 4) create an `index.html` file containing ``
-
-# 5) run bundler
-npm start
-
-# 6) open `index.html` in the (default) browser
-open index.html
+$ npm install mithril --save
```
+---
+
+### Quick start with Webpack
+
+1. Initialize the directory as an npm package
+```bash
+$ npm init --yes
+```
+
+2. install required tools
+```bash
+$ npm install mithril --save
+$ npm install webpack webpack-cli --save-dev
+```
+
+3. Add a "start" entry to the scripts section in `package.json`.
+```js
+{
+ // ...
+ "scripts": {
+ "start": "webpack src/index.js --output bin/app.js -d --watch"
+ }
+}
+```
+
+4. Create `src/index.js` file.
+```js
+import m from "mithril";
+m.render(document.body, "hello world");
+```
+
+5. create `index.html`
+```html
+
+
+
+
+```
+
+6. run bundler
+```bash
+$ npm start
+```
+
+7. open `index.html` in a browser
+
#### Step by step
For production-level projects, the recommended way of installing Mithril is to use NPM.
@@ -78,7 +106,7 @@ Most browser today do not natively support modularization systems (CommonJS or E
A popular way for creating a bundle is to setup an NPM script for [Webpack](https://webpack.js.org/). To install Webpack, run this from the command line:
```bash
-npm install webpack --save-dev
+npm install webpack webpack-cli --save-dev
```
Open the `package.json` that you created earlier, and add an entry to the `scripts` section:
@@ -87,7 +115,7 @@ Open the `package.json` that you created earlier, and add an entry to the `scrip
{
"name": "my-project",
"scripts": {
- "start": "webpack src/index.js bin/app.js -d --watch"
+ "start": "webpack src/index.js --output bin/app.js -d --watch"
}
}
```
@@ -149,8 +177,8 @@ If you open bin/app.js, you'll notice that the Webpack bundle is not minified, s
{
"name": "my-project",
"scripts": {
- "start": "webpack src/index.js bin/app.js -d --watch",
- "build": "webpack src/index.js bin/app.js -p",
+ "start": "webpack src/index.js --output bin/app.js -d --watch",
+ "build": "webpack src/index.js --output bin/app.js -p",
}
}
```
@@ -219,7 +247,7 @@ If you don't have the ability to run a bundler script due to company security po
Hello world
-
+
+
+
+ 
+
+