);
let $elements = $(elements).render();
// accessible by document.querySelectorAll
$elements = $(elements).render(true);
// mount the component to the
$elements = $(elements).render(document.createElement('span'));
```
##### `$.fn.shallowRender([props, context]) -> ElementCollection`
Use the React shallow renderer utilities to _shallowly_ render the first element of the collection.
```js
let MyComponent ()=>
Hi there!
$(
)
.find('div')
.length // 0
$(
)
.shallowRender()
.find('div')
.length // 1
```
##### `$.element.fn.update()`
Since shallow collections are not "live" in the same way a real rendered component tree is, you may
need to manually update the root collection to flush changes (such as those triggered by a child component).
In general you may not have to ever use `update()` since teaspoon tries to take care of all that for
you by spying on the `componentDidUpdate` life-cycle hook of root component instance.
##### `$.instance.fn.unmount()`
Unmount the current tree and remove it from the DOM. `unmount()` returns an
ElementCollection of the _root_ component element.
```js
let $inst = $(
);
let rendered = $inst.render();
//do some stuff...then:
rendered.unmount()
```
### Utility methods and properties
The methods are shared by both Element and Instance Collections.
##### `$.selector` => selector _(alias: $.s)_
Selector creation function.
##### `$.dom(instance) => HTMLElement`
Returns the DOM nodes for a component instance, if it exists.
##### `$.compileSelector(selector) => (node) => bool`
Compiles a selector into a function that matches a node
##### `$.defaultContext(context: ?object) => (node) => bool`
You can globally set a context object to be used for each and all renders,
shallow or otherwise. This is helpful for context that is available to all
levels of the application, like the `router`, i18n context, or a Redux Store.
##### `$.fn.length`
The length of the collection.
##### `$.fn.unwrap() => Element|Instance|HTMLElement`
Unwraps a collection of a single item returning the item. Equivalent to `$el[0]`; throws when there
is more than one item in the collection.
```js
$(
hi!
)
.find('strong')
.unwrap() // ->
hi!
```
##### `$.fn.get() => Array` (alias: toArray())
Returns a real JavaScript array of the collection items.
##### `$.fn.tap() => function(Collection)`
Run an arbitrary function against the collection, helpful for making assertions while chaining.
```js
$(
).render()
.prop({ name: 'John '})
.tap(collection =>
expect(collection.children().length).to.equal(2))
.find('.foo')
```
##### `$.fn.end() => Collection`
Exits a chain, by returning the previous collection
```js
$(
).render()
.find('ul')
.single()
.end()
.find('div')
```
##### `$.fn.each(Function iteratorFn)`
An analog to `Array.prototype.forEach`; iterates over the collection calling the `iteratorFn`
with each item, index, and collection.
```js
$(
).render()
.find('div')
.each((node, index, collection)=>{
//do something
})
```
##### `$.fn.map(Function iteratorFn)`
An analog to `Array.prototype..map`; maps over the collection calling the `iteratorFn`
with each item, index, and collection.
```js
$(
).render()
.find('div')
.map((node, index, collection) => {
//do something
})
```
##### `$.fn.reduce(Function iteratorFn, [initialValue]) -> Collection`
An analog to `Array.prototype..reduce`, returns a new _reduced_ teaspoon Collection
```js
$(
).render()
.find('div')
.reduce((current, node, index, collection)=>{
return current + ', ' + node.textContent
}, '')
```
##### `$.fn.reduceRight(Function iteratorFn) -> Collection`
An analog to `Array.prototype.reduceRight`.
##### `$.fn.some(Function iteratorFn) -> bool`
An analog to `Array.prototype.some`.
##### `$.fn.every(Function iteratorFn) -> bool`
An analog to `Array.prototype.every`.
##### `$.instance.fn.dom -> HTMLElement`
Returns the DOM nodes for each item in the Collection, if the exist
### Accessors
##### `$.fn.props`
Set or get props from a component or element.
Setting props can only be done on __root__ collections given the
reactive nature of data flow in react trees (or on any element of a tree that isn't rendered).
- `.props()`: retrieve all props
- `.props(propName)`: retrieve a single prop
- `.props(propName, propValue)`: update a single prop value
- `.props(newProps)`: merge `newProps` into the current set of props.
##### `$.fn.state`
Set or get state from a component or element. In shallowly rendered trees only the __root__ component
can be stateful.
- `.state()`: retrieve state
- `.state(stateName)`: retrieve a single state value
- `.state(stateName, stateValue, [callback])`: update a single state value
- `.state(newState, [callback])`: merge `newState` into the current state.
##### `$.fn.context`
Set or get state from a component or element. In shallowly rendered trees only the __root__ component
can have context.
- `.context()`: retrieve context
- `.context(String contextName)`: retrieve a single context value
- `.context(String contextName, Any contextValue, [Function callback])`: update a single context value
- `.context(Object newContext, [Function callback])`: replace current context.
### Traversal methods
##### `$.fn.find(selector)`
Search all descendants of the current collection, matching against
the provided selector.
```js
$(
).find('ul > li')
```
##### `$.fn.filter(selector)`
Filter the current collection matching against the provided
selector.
```js
let $list = $([
1,
2,
3,
]);
$list.filter('.foo').length // 1
```
##### `$.fn.is(selector) -> Bool`
Test if each item in the collection matches the provided
selector.
##### `$.fn.children([selector])`
Return the children of the current selection, optionally filtered by those matching a provided selector.
__note:__ rendered "Composite" components will only ever have one child since Components can only return a single node.
```js
let $list = $(
);
$list.children().length // 3
$list.children('.foo').length // 1
```
##### `$.fn.parent([selector])`
Get the parent of each node in the current collection, optionally filtered by a selector.
##### `$.fn.parents([selector])`
Get the ancestors of each node in the current collection, optionally filtered by a selector.
##### `$.fn.closest([selector])`
For each node in the set, get the first element that matches the selector by testing the element
and traversing up through its ancestors.
##### `$.fn.first([selector])`
return the first item in a collection, alternatively search all
collection descendants matching the provided selector and return
the first match.
##### `$.fn.last([selector])`
return the last item in a collection, alternatively search all
collection descendants matching the provided selector and return
the last match.
##### `$.fn.only()`
Assert that the current collection as only one item.
```js
let $list = $(
);
$list.find('li').only() // Error! Matched more than one
$list.find('li.foo').only().length // 1
```
##### `$.fn.single(selector)`
Find assert that only item matches the provided selector.
```js
let $list = $(
);
$list.single('li') // Error! Matched more than one
$list.single('.foo').length // 1
```
##### `$.fn.any([selector])`
Assert that the collection contains one or more nodes.
Optionally search by a provided selector.
```js
let $list = $(
);
$list.any('p') // Error!
$list.any('li').length // 3
```
##### `$.fn.none([selector])`
Assert that the collection contains no nodes. Optionally search by a provided selector.
```js
let $list = $(
);
$list.none('li') // Error!
$list.none('p').length // 0
```
##### `$.fn.text()`
Return the text content of the matched Collection.
```js
let $els = $(
Hello John).render()
.trigger('click', { target: { value: 'hello ' } }).
```
##### `$.element.fn.trigger(String eventName, [Object data])`
Simulates (poorly) event triggering for shallow collections. The method looks for a prop
following the convention 'on[EventName]': `trigger('click')` calls `props.onClick()`, and re-renders the root collection
Events don't bubble and don't have a proper event object.
```js
$().shallowRender()
.find('button')
.trigger('click', { target: { value: 'hello ' } }).
```