Merge branch 'next'
This commit is contained in:
Isiah Meadows
commit
2635070734
79 changed files with 7993 additions and 3507 deletions
|
|
@ -17,7 +17,7 @@ Mithril does not provide any animation APIs per se, since these other options ar
|
|||
|
||||
### Animation on element creation
|
||||
|
||||
Animating an element via CSS when the element created couldn't be simpler. Just add an animation to a CSS class normally:
|
||||
Animating an element via CSS when the element is created couldn't be simpler. Just add an animation to a CSS class normally:
|
||||
|
||||
```css
|
||||
.fancy {animation:fade-in 0.5s;}
|
||||
|
|
@ -41,7 +41,7 @@ m.mount(document.body, FancyComponent)
|
|||
|
||||
### Animation on element removal
|
||||
|
||||
The problem with animating before removing an element is that we must wait until the animation is complete before we can actually remove the element. Fortunately, Mithril offers a [`onbeforeremove`](lifecycle-methods.md#onbeforeremove) hook that allows us to defer the removal of an element.
|
||||
The problem with animating before removing an element is that we must wait until the animation is complete before we can actually remove the element. Fortunately, Mithril offers the [`onbeforeremove`](lifecycle-methods.md#onbeforeremove) hook that allows us to defer the removal of an element.
|
||||
|
||||
Let's create an `exit` animation that fades `opacity` from 1 to 0.
|
||||
|
||||
|
|
@ -75,7 +75,7 @@ var FancyComponent = {
|
|||
onbeforeremove: function(vnode) {
|
||||
vnode.dom.classList.add("exit")
|
||||
return new Promise(function(resolve) {
|
||||
setTimeout(resolve, 500)
|
||||
vnode.dom.addEventListener("animationend", resolve)
|
||||
})
|
||||
},
|
||||
view: function() {
|
||||
|
|
@ -86,7 +86,7 @@ var FancyComponent = {
|
|||
|
||||
`vnode.dom` points to the root DOM element of the component (`<div class="fancy">`). We use the classList API here to add an `exit` class to `<div class="fancy">`.
|
||||
|
||||
Then we return a [Promise](promise.md) that resolves after half a second. When we return a promise from `onbeforeremove`, Mithril waits until the promise is resolved and only then it removes the element. In this case, it waits half a second, giving the exit animation the exact time it needs to complete.
|
||||
Then we return a [Promise](promise.md) that resolves when the `animationend` event fires. When we return a promise from `onbeforeremove`, Mithril waits until the promise is resolved and only then it removes the element. In this case, it waits for the exit animation to finish.
|
||||
|
||||
We can verify that both the enter and exit animations work by mounting the `Toggler` component:
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
# Change log
|
||||
|
||||
- [v2.0.0-rc](#v200rc)
|
||||
- [v1.1.6](#v116)
|
||||
- [v1.1.5](#v115)
|
||||
- [v1.1.4](#v114)
|
||||
|
|
@ -10,6 +11,86 @@
|
|||
- [v1.0.1](#v101)
|
||||
- [Migrating from v0.2.x](#migrating-from-v02x)
|
||||
- [Older docs](http://mithril.js.org/archive/v0.2.5/index.html)
|
||||
- [ospec change-log](../ospec/change-log.md)
|
||||
|
||||
---
|
||||
|
||||
### v2.0.0-rc
|
||||
|
||||
#### Breaking changes
|
||||
|
||||
- API: Component vnode `children` are not normalized into vnodes on ingestion; normalization only happens if and when they are ingested by the view ([#2155](https://github.com/MithrilJS/mithril.js/pull/2155/) (thanks to [@magikstm](https://github.com/magikstm) for related optimization [#2064](https://github.com/MithrilJS/mithril.js/pull/2064)))
|
||||
- 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.
|
||||
- hyperscript: when attributes have a `null` or `undefined` value, they are treated as if they were absent. [#1773](https://github.com/MithrilJS/mithril.js/issues/1773) ([#2174](https://github.com/MithrilJS/mithril.js/pull/2174))
|
||||
- hyperscript: when an attribute is defined on both the first and second argument (as a CSS selector and an `attrs` field, respectively), the latter takes precedence, except for `class` attributes that are still added together. [#2172](https://github.com/MithrilJS/mithril.js/issues/2172) ([#2174](https://github.com/MithrilJS/mithril.js/pull/2174))
|
||||
- stream: when a stream conditionally returns HALT, dependant stream will also end ([#2200](https://github.com/MithrilJS/mithril.js/pull/2200))
|
||||
- render: remove some redundancy within the component initialization code ([#2213](https://github.com/MithrilJS/mithril.js/pull/2213))
|
||||
- render: Align custom elements to work like normal elements, minus all the HTML-specific magic. ([#2221](https://github.com/MithrilJS/mithril.js/pull/2221))
|
||||
- render: simplify component removal ([#2214](https://github.com/MithrilJS/mithril.js/pull/2214))
|
||||
|
||||
#### 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 ([#1949](https://github.com/MithrilJS/mithril.js/pull/1949), [#2222](https://github.com/MithrilJS/mithril.js/pull/2222)).
|
||||
- API: `m.route.link` accepts an optional `options` object ([#1930](https://github.com/MithrilJS/mithril.js/pull/1930))
|
||||
- API: `m.request` better error message on JSON parse error - ([#2195](https://github.com/MithrilJS/mithril.js/pull/2195), [@codeclown](https://github.com/codeclown))
|
||||
- API: `m.request` supports `timeout` as attr - ([#1966](https://github.com/MithrilJS/mithril.js/pull/1966))
|
||||
- API: `m.request` supports `responseType` as attr - ([#2193](https://github.com/MithrilJS/mithril.js/pull/2193))
|
||||
- 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))
|
||||
- render/core: remove the DOM nodes recycling pool ([#2122](https://github.com/MithrilJS/mithril.js/pull/2122))
|
||||
- render/core: revamp the core diff engine, and introduce a longest-increasing-subsequence-based logic to minimize DOM operations when re-ordering keyed nodes.
|
||||
|
||||
#### 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 All vnodes attributes are properly removed when absent or set to `null` or `undefined` [#1804](https://github.com/MithrilJS/mithril.js/issues/1804) [#2082](https://github.com/MithrilJS/mithril.js/issues/2082) ([#1865](https://github.com/MithrilJS/mithril.js/pull/1865), [#2130](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: tweaks: ([#2104](https://github.com/MithrilJS/mithril.js/pull/2104) [@mikeyb](https://github.com/mikeyb), [#2205](https://github.com/MithrilJS/mithril.js/pull/2205), [@cavemansspa](https://github.com/cavemansspa))
|
||||
- render/core: avoid touching `Object.prototype.__proto__` setter with `key: "__proto__"` in certain situations ([#2251](https://github.com/MithrilJS/mithril.js/pull/2251))
|
||||
|
||||
---
|
||||
|
||||
### v1.1.7
|
||||
|
||||
- Stream references no longer magically coerce to their underlying values ([#2150](https://github.com/MithrilJS/mithril.js/pull/2150), breaking change: `mithril-stream@2.0.0`)
|
||||
- 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))
|
||||
|
||||
|
||||
---
|
||||
|
||||
### 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))
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -75,10 +156,7 @@
|
|||
- 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
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
Here are some examples of Mithril in action
|
||||
|
||||
- [Animation](http://cdn.rawgit.com/MithrilJS/mithril.js/master/examples/animation/mosaic.html)
|
||||
- [Community Added Examples](https://how-to-mithril.js.org)
|
||||
- [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)
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
- [How it works](#how-it-works)
|
||||
- [Flexibility](#flexibility)
|
||||
- [CSS selectors](#css-selectors)
|
||||
- [Attributes passed as the second argument](attributes-passed-as-the-second-argument)
|
||||
- [DOM attributes](#dom-attributes)
|
||||
- [Style attribute](#style-attribute)
|
||||
- [Events](#events)
|
||||
|
|
@ -144,7 +145,23 @@ m("a.link[href=/]", {
|
|||
// <a href="/" class="link selected">Home</a>
|
||||
```
|
||||
|
||||
If there are class names in both first and second arguments of `m()`, they are merged together as you would expect.
|
||||
### Attributes passed as the second argument
|
||||
|
||||
You can pass attributes, properties, events and lifecycle hooks in the second, optional argument (see the next sections for details).
|
||||
|
||||
```JS
|
||||
m("button", {
|
||||
class: "my-button",
|
||||
onclick: function() {/* ... */},
|
||||
oncreate: function() {/* ... */}
|
||||
})
|
||||
```
|
||||
|
||||
If the value of such an attribute is `null` or `undefined`, it is treated as if the attribute was absent.
|
||||
|
||||
If there are class names in both first and second arguments of `m()`, they are merged together as you would expect. If the value of the class in the second argument is `null`or `undefined`, it is ignored.
|
||||
|
||||
If another attribute is present in both the first and the second argument, the second one takes precedence even if it is is `null` or `undefined`.
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -161,6 +178,76 @@ m("input[readonly]")
|
|||
m("input[readOnly]")
|
||||
```
|
||||
|
||||
This even includes custom elements. For example, you can use [A-Frame](https://aframe.io/docs/0.8.0/introduction/) within Mithril, no problem!
|
||||
|
||||
```javascript
|
||||
m("a-scene", [
|
||||
m("a-box", {
|
||||
position: "-1 0.5 -3",
|
||||
rotation: "0 45 0",
|
||||
color: "#4CC3D9",
|
||||
}),
|
||||
|
||||
m("a-sphere", {
|
||||
position: "0 1.25 -5",
|
||||
radius: "1.25",
|
||||
color: "#EF2D5E",
|
||||
}),
|
||||
|
||||
m("a-cylinder", {
|
||||
position: "1 0.75 -3",
|
||||
radius: "0.5",
|
||||
height: "1.5",
|
||||
color: "#FFC65D",
|
||||
}),
|
||||
|
||||
m("a-plane", {
|
||||
position: "0 0 -4",
|
||||
rotation: "-90 0 0",
|
||||
width: "4",
|
||||
height: "4",
|
||||
color: "#7BC8A4",
|
||||
}),
|
||||
|
||||
m("a-sky", {
|
||||
color: "#ECECEC",
|
||||
}),
|
||||
])
|
||||
```
|
||||
|
||||
And yes, this translates to both attributes and properties, and it works just like they would in the DOM. Using [Brick's `brick-deck`](http://brick.mozilla.io/docs/brick-deck) as an example, they have a `selected-index` attribute with a corresponding `selectedIndex` getter/setter property.
|
||||
|
||||
```javascript
|
||||
m("brick-deck[selected-index=0]", [/* ... */]) // lowercase
|
||||
m("brick-deck[selectedIndex=0]", [/* ... */]) // uppercase
|
||||
// I know these look odd, but `brick-deck`'s `selectedIndex` property is a
|
||||
// string, not a number.
|
||||
m("brick-deck", {"selected-index": "0"}, [/* ... */])
|
||||
m("brick-deck", {"selectedIndex": "0"}, [/* ... */])
|
||||
```
|
||||
|
||||
For custom elements, it doesn't auto-stringify properties, in case they are objects, numbers, or some other non-string value. So assuming you had some custom element `my-special-element` that has an `elem.whitelist` array getter/setter property, you could do this, and it'd work as you'd expect:
|
||||
|
||||
```javascript
|
||||
m("my-special-element", {
|
||||
whitelist: [
|
||||
"https://example.com",
|
||||
"http://neverssl.com",
|
||||
"https://google.com",
|
||||
],
|
||||
})
|
||||
```
|
||||
|
||||
If you have classes or IDs for those elements, the shorthands still work as you would expect. To pull another A-Frame example:
|
||||
|
||||
```javascript
|
||||
// These two are equivalent
|
||||
m("a-entity#player")
|
||||
m("a-entity", {id: "player"})
|
||||
```
|
||||
|
||||
Do note that all the properties with magic semantics, like lifecycle attributes, `onevent` handlers, `key`s, `class`, and `style`, those are still treated the same way they are for normal HTML elements.
|
||||
|
||||
---
|
||||
|
||||
### Style attribute
|
||||
|
|
@ -175,7 +262,7 @@ m("div[style=background:red]")
|
|||
|
||||
Using a string as a `style` would overwrite all inline styles in the element if it is redrawn, and not only CSS rules whose values have changed.
|
||||
|
||||
Mithril does not attempt to add units to number values.
|
||||
Mithril does not attempt to add units to number values. It simply stringifies them.
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ Let's create an HTML file to follow along:
|
|||
|
||||
```markup
|
||||
<body>
|
||||
<script src="//unpkg.com/mithril/mithril.js"></script>
|
||||
<script src="https://unpkg.com/mithril/mithril.js"></script>
|
||||
<script>
|
||||
var root = document.body
|
||||
|
||||
|
|
|
|||
10
docs/lint.js
10
docs/lint.js
|
|
@ -101,12 +101,14 @@ function ensureLinkIsValid(file, data) {
|
|||
}
|
||||
|
||||
function initMocks() {
|
||||
global.window = require("../test-utils/browserMock")() // eslint-disable-line global-require
|
||||
/* eslint-disable global-require */
|
||||
global.window = require("../test-utils/browserMock")()
|
||||
global.document = window.document
|
||||
global.m = require("../index") // eslint-disable-line global-require
|
||||
global.o = require("../ospec/ospec") // eslint-disable-line global-require
|
||||
global.stream = require("../stream") // eslint-disable-line global-require
|
||||
global.m = require("../index")
|
||||
global.o = require("../ospec/ospec")
|
||||
global.stream = require("../stream")
|
||||
global.alert = function() {}
|
||||
/* eslint-enable global-require */
|
||||
|
||||
//routes consumed by request.md
|
||||
global.window.$defineRoutes({
|
||||
|
|
|
|||
|
|
@ -26,6 +26,8 @@ A [ES6 Promise](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/G
|
|||
|
||||
A Promise is a mechanism for working with asynchronous computations.
|
||||
|
||||
Mithril provides a polyfill when the environment does not support Promises. The polyfill can also be referenced specifically via `m.PromisePolyfill`.
|
||||
|
||||
---
|
||||
|
||||
### Signature
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@
|
|||
|
||||
- [Description](#description)
|
||||
- [Signature](#signature)
|
||||
- [Static members](#static-members)
|
||||
-[m.redraw.sync()](#mredrawsync)
|
||||
- [How it works](#how-it-works)
|
||||
|
||||
---
|
||||
|
|
@ -14,8 +16,6 @@ You DON'T need to call it if data is modified within the execution context of an
|
|||
|
||||
You DO need to call it in `setTimeout`/`setInterval`/`requestAnimationFrame` callbacks, or callbacks from 3rd party libraries.
|
||||
|
||||
Typically, `m.redraw` triggers an asynchronous redraws, but it may trigger synchronously if Mithril detects it's possible to improve performance by doing so (i.e. if no redraw was requested within the last animation frame). You should write code assuming that it always redraws asynchronously.
|
||||
|
||||
---
|
||||
|
||||
### Signature
|
||||
|
|
@ -26,6 +26,16 @@ Argument | Type | Required | Description
|
|||
----------- | -------------------- | -------- | ---
|
||||
**returns** | | | Returns nothing
|
||||
|
||||
#### Static members
|
||||
|
||||
##### m.redraw.sync
|
||||
|
||||
`m.redraw.sync()`
|
||||
|
||||
Argument | Type | Required | Description
|
||||
----------- | -------------------- | -------- | ---
|
||||
**returns** | | | Returns nothing
|
||||
|
||||
---
|
||||
|
||||
### How it works
|
||||
|
|
@ -34,4 +44,12 @@ When callbacks outside of Mithril run, you need to notify Mithril's rendering en
|
|||
|
||||
To trigger a redraw, call `m.redraw()`. Note that `m.redraw` only works if you used `m.mount` or `m.route`. If you rendered via `m.render`, you should use `m.render` to redraw.
|
||||
|
||||
You should not call m.redraw from a [lifecycle method](lifecycle-methods.md). Doing so will result in undefined behavior.
|
||||
`m.redraw()` always triggers an asynchronous redraws, whereas `m.redraw.sync()` triggers a synchronous one. `m.redraw()` is tied to `window.requestAnimationFrame()` (we provide a fallback for IE9). It will thus typically fire at most 60 times per second. It may fire faster if your monitor has a higher refresh rate.
|
||||
|
||||
`m.redraw.sync()` is mostly intended to make videos play work in iOS. That only works in response to user-triggered events. It comes with several caveat:
|
||||
|
||||
- You should not call `m.redraw.sync()` from a [lifecycle method](lifecycle-methods.md) or the `view()` method of a component. Doing so will result in undefined behavior (it throws an error when possible).
|
||||
- `m.redraw.sync()` called from an event handler can cause the DOM to be modified while an event is bubbling. Depending on the structure of the old and new DOM trees, the event can finish the bubbling phase in the new tree and trigger unwanted handlers.
|
||||
- It is not throttled. One call to `m.redraw.sync()` causes immediately one `m.render()` call per root registered with [`m.mount()`](mount.md) or [`m.route()`](route.md).
|
||||
|
||||
`m.redraw()` doesn't have any of those issues, you can call it from wherever you like.
|
||||
|
|
@ -50,6 +50,7 @@ Argument | Type | Required | Descr
|
|||
`options.password` | `String` | No | A password for HTTP authorization. Defaults to `undefined`. This option is provided for `XMLHttpRequest` compatibility, but you should avoid using it because it sends the password in plain text over the network.
|
||||
`options.withCredentials` | `Boolean` | No | Whether to send cookies to 3rd party domains. Defaults to `false`
|
||||
`options.timeout` | `Number` | No | The amount of milliseconds a request can take before automatically being [terminated](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/timeout). Defaults to `undefined`.
|
||||
`options.responseType` | `String` | No | The expected [type](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseType) of the response. Defaults to `undefined`.
|
||||
`options.config` | `xhr = Function(xhr)` | No | Exposes the underlying XMLHttpRequest object for low-level configuration. Defaults to the [identity function](https://en.wikipedia.org/wiki/Identity_function).
|
||||
`options.headers` | `Object` | No | Headers to append to the request before sending it (applied right before `options.config`).
|
||||
`options.type` | `any = Function(any)` | No | A constructor to be applied to each object in the response. Defaults to the [identity function](https://en.wikipedia.org/wiki/Identity_function).
|
||||
|
|
|
|||
|
|
@ -240,7 +240,7 @@ Now we can style the `UserList` component:
|
|||
|
||||
The CSS above is written using a convention of keeping all styles for a rule in a single line, in alphabetical order. This convention is designed to take maximum advantage of screen real estate, and makes it easier to scan the CSS selectors (since they are always on the left side) and their logical grouping, and it enforces predictable and uniform placement of CSS rules for each selector.
|
||||
|
||||
Obviously you can use whatever spacing/indentation convention you prefer. The example above is just an illustration of a not-so-widespread convention that has strong rationales behind it, but deviate from the more widespread cosmetic-oriented spacing conventions.
|
||||
Obviously you can use whatever spacing/indentation convention you prefer. The example above is just an illustration of a not-so-widespread convention that has strong rationales behind it, but deviates from the more widespread cosmetic-oriented spacing conventions.
|
||||
|
||||
Reloading the browser window now should display some styled elements.
|
||||
|
||||
|
|
|
|||
|
|
@ -120,11 +120,13 @@ Argument | Type | Required | Description
|
|||
|
||||
Creates a new stream with the results of calling the function on every value in the stream with an accumulator and the incoming value.
|
||||
|
||||
Note that you can prevent dependent streams from being updated by returning the special value `stream.HALT` inside the accumulator function.
|
||||
|
||||
`stream = Stream.scan(fn, accumulator, stream)`
|
||||
|
||||
Argument | Type | Required | Description
|
||||
------------- | -------------------------------- | -------- | ---
|
||||
`fn` | `(accumulator, value) -> result` | Yes | A function that takes an accumulator and value parameter and returns a new accumulator value
|
||||
`fn` | `(accumulator, value) -> result \| HALT` | Yes | A function that takes an accumulator and value parameter and returns a new accumulator value
|
||||
`accumulator` | `any` | Yes | The starting value for the accumulator
|
||||
`stream` | `Stream` | Yes | Stream containing the values
|
||||
**returns** | `Stream` | | Returns a new stream containing the result
|
||||
|
|
@ -502,13 +504,6 @@ var serialized = JSON.stringify(value)
|
|||
console.log(serialized) // logs 123
|
||||
```
|
||||
|
||||
Streams also implement a `valueOf` method that returns the value of the stream.
|
||||
|
||||
```javascript
|
||||
var value = stream(123)
|
||||
console.log("test " + value) // logs "test 123"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Streams do not trigger rendering
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue