From 3f70d20bb1a1a94f197c44c418ee157249723d54 Mon Sep 17 00:00:00 2001 From: Scott Simpson Date: Tue, 20 Sep 2016 09:53:25 -0700 Subject: [PATCH 1/4] fix component name --- docs/components.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/components.md b/docs/components.md index 0b12f57a..aea46481 100644 --- a/docs/components.md +++ b/docs/components.md @@ -228,7 +228,7 @@ m(BetterHeader, { }) // clearer consumption use case -m(Header, { +m(BetterHeader, { title: [ m("h1", "My title"), m("small", "A small note"), @@ -266,4 +266,4 @@ var Component = { m.render(document.body, m(Component, {greeting: "hello"})) // caling a second time does not modify DOM m.render(document.body, m(Component, {greeting: "hello"})) -``` \ No newline at end of file +``` From 6252a00bed463bc5202adab56a86ae8352ee54c6 Mon Sep 17 00:00:00 2001 From: Scott Simpson Date: Tue, 20 Sep 2016 10:24:08 -0700 Subject: [PATCH 2/4] small fixes in hyperscript.md (#1330) Moved SVG/MathML section down to reflect the order of the TOC Renamed "Avoid Anti-patterns" to enable TOC link --- docs/hyperscript.md | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/docs/hyperscript.md b/docs/hyperscript.md index e8c392a4..f6097e9e 100644 --- a/docs/hyperscript.md +++ b/docs/hyperscript.md @@ -186,20 +186,6 @@ m("select", {selectedIndex: 0}, [ --- -### SVG and MathML - -Mithril fully supports SVG. Xlink is also supported, but unlike in pre-v1.0 versions of Mithril, must have the namespace explicitly defined: - -```javascript -m("svg", [ - m("image[xlink:href='image.gif']") -]) -``` - -MathML is also fully supported. - ---- - ### Components [Components](components.md) allow you to encapsulate logic into a unit and use it as if it was an element. They are the base for making large, scalable applications. @@ -279,6 +265,20 @@ To learn more about keys, [see the keys page](keys.md) --- +### SVG and MathML + +Mithril fully supports SVG. Xlink is also supported, but unlike in pre-v1.0 versions of Mithril, must have the namespace explicitly defined: + +```javascript +m("svg", [ + m("image[xlink:href='image.gif']") +]) +``` + +MathML is also fully supported. + +--- + ### Making templates dynamic Since nested vnodes are just plain Javascript expressions, you can simply use Javascript facilities to manipulate them @@ -326,7 +326,7 @@ You cannot use Javascript statements such as `if` or `for` within Javascript exp --- -### Anti-patterns +### Avoid Anti-patterns Although Mithril is flexible, some code patterns are discouraged: From 5132c50ec08d66f21f8b29c4085fa8d246016eaf Mon Sep 17 00:00:00 2001 From: Pat Cavit Date: Tue, 20 Sep 2016 10:58:16 -0700 Subject: [PATCH 3/4] view() params and xlink namespace --- docs/v1.x-migration.md | 55 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) diff --git a/docs/v1.x-migration.md b/docs/v1.x-migration.md index eaa17615..3bbe31a7 100644 --- a/docs/v1.x-migration.md +++ b/docs/v1.x-migration.md @@ -7,6 +7,7 @@ - [Cancelling redraw from event handlers](#cancelling-redraw-from-event-handlers) - [Component `controller` function](#component-controller-function) - [Component arguments](#component-arguments) +- [`view()` parameters](#view-parameters) - [Passing components to `m()`](#passing-components-to-m) - [Passing vnodes to `m.mount()` and `m.route()`](#passing-vnodes-to-mmount-and-mroute) - [`m.route.mode`](#mroutemode) @@ -14,6 +15,7 @@ - [Reading/writing the current route](#readingwriting-the-current-route) - [Accessing route params](#accessing-route-params) - [`m.request`](#mrequest) +- [`xlink` namespace required](#xlink-namespace-required) ## `m.component` removed @@ -181,6 +183,37 @@ var component = { m("div", m(component, { fooga : 1 })); ``` +## `view()` parameters + +In `v0.2.x` view functions are passed a reference to the `controller` instance and (optionally) any options passed to the component. In `v1.x` they are passed **only** the `vnode`, exactly like the `controller` function. + +### `v0.2.x` + +```javascript +m.mount(document.body, { + controller : function() {}, + + view : function(ctrl, options) { + // ... + } +}); +``` + +### `v1.x` + +```javascript +m.mount(document.body, { + oninit : function(vnode) { + // ... + }, + + view : function(vnode) { + // Use vnode.state instead of ctrl + // Use vnode.attrs instead of options + } +}); +``` + ## Passing components to `m()` In `v0.2.x` you could pass components as the second argument of `m()` w/o any wrapping required. To help with consistency in `v1.x` they must always be wrapped with a `m()` invocation. @@ -377,3 +410,25 @@ m.prop.merge([ ``` Additionally, if the `extract` option is passed to `m.request` the return value of the provided function will be passed to the [m.prop stream](prop.md) directly, and any `deserialize` callback is ignored. + +## `xlink` namespace required + +In `v0.2.x` when generating SVGs using `m()` the `xlink` namespace would automatically be added on certain attributes. For consistency in `v1.x` if you want to namespace an attribute you must do it yourself. + +### `v0.2.x` + +```js +m("svg", + // the `href` attribute is namespaced automatically + m("image[href='image.gif']") +) +``` + +### `v1.x` + +```js +m("svg", + // User-specified namespace on the `href` attribute + m("image[xlink:href='image.gif']") +) +``` From 17ee04c00a9adb39c215565674a1df85ac48d321 Mon Sep 17 00:00:00 2001 From: Scott Simpson Date: Tue, 20 Sep 2016 11:09:41 -0700 Subject: [PATCH 4/4] fix missing return in BetterLabeledComponent view (#1332) --- docs/hyperscript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/hyperscript.md b/docs/hyperscript.md index f6097e9e..af1067e9 100644 --- a/docs/hyperscript.md +++ b/docs/hyperscript.md @@ -370,7 +370,7 @@ var BetterSelect = { // PREFER refactor variability out var BetterLabeledComponent = { view: function(vnode) { - m("div", [ + return m("div", [ m("label", vnode.attrs.title), vnode.children, ])