add support for HTMLElement on choo.mount (#597)
* add support for HTMLElement on choo.mount - removed explicit "string" test and for selector variable, replaced by "is available and filled" test - add "if" to separate by incoming "string" or "HTMLElement" * remove semicolons and white spaces * add "is in Browser" check for HTMLElement * add window to HTMLElement * optimizing "mount" commit * remove window.HTMLElement check * change .mount documentation - add info that selector can be also a DOM element - remove "nanomount" infos * add missing line
This commit is contained in:
@@ -453,10 +453,11 @@ hood.
|
|||||||
See [#routing](#routing) for an overview of how to use routing efficiently.
|
See [#routing](#routing) for an overview of how to use routing efficiently.
|
||||||
|
|
||||||
### `app.mount(selector)`
|
### `app.mount(selector)`
|
||||||
Start the application and mount it on the given `querySelector`. Uses
|
Start the application and mount it on the given `querySelector`,
|
||||||
[nanomount][nanomount] under the hood. This will _replace_ the selector provided
|
the given selector can be a String or a DOM element.
|
||||||
with the tree returned from `app.start()`. If you want to add the app as a child
|
|
||||||
to an element, use `app.start()` to obtain the tree and manually append it.
|
This will _replace_ the selector provided with the tree returned from `app.start()`.
|
||||||
|
If you want to add the app as a child to an element, use `app.start()` to obtain the tree and manually append it.
|
||||||
|
|
||||||
### `tree = app.start()`
|
### `tree = app.start()`
|
||||||
Start the application. Returns a tree of DOM nodes that can be mounted using
|
Start the application. Returns a tree of DOM nodes that can be mounted using
|
||||||
@@ -581,7 +582,6 @@ Become a backer, and buy us a coffee (or perhaps lunch?) every month or so.
|
|||||||
[morphdom-bench]: https://github.com/patrick-steele-idem/morphdom#benchmarks
|
[morphdom-bench]: https://github.com/patrick-steele-idem/morphdom#benchmarks
|
||||||
[nanomorph]: https://github.com/choojs/nanomorph
|
[nanomorph]: https://github.com/choojs/nanomorph
|
||||||
[nanorouter]: https://github.com/choojs/nanorouter
|
[nanorouter]: https://github.com/choojs/nanorouter
|
||||||
[nanomount]: https://github.com/yoshuawuyts/nanomount
|
|
||||||
[yo-yo]: https://github.com/maxogden/yo-yo
|
[yo-yo]: https://github.com/maxogden/yo-yo
|
||||||
[yo-yoify]: https://github.com/shama/yo-yoify
|
[yo-yoify]: https://github.com/shama/yo-yoify
|
||||||
[unassertify]: https://github.com/unassert-js/unassertify
|
[unassertify]: https://github.com/unassert-js/unassertify
|
||||||
|
|||||||
@@ -169,15 +169,19 @@ Choo.prototype.start = function () {
|
|||||||
|
|
||||||
Choo.prototype.mount = function mount (selector) {
|
Choo.prototype.mount = function mount (selector) {
|
||||||
assert.equal(typeof window, 'object', 'choo.mount: window was not found. .mount() must be called in a browser, use .toString() if running in Node')
|
assert.equal(typeof window, 'object', 'choo.mount: window was not found. .mount() must be called in a browser, use .toString() if running in Node')
|
||||||
assert.equal(typeof selector, 'string', 'choo.mount: selector should be type string')
|
assert.ok(typeof selector === 'string' || typeof selector === 'object', 'choo.mount: selector should be type String or HTMLElement')
|
||||||
|
|
||||||
var self = this
|
var self = this
|
||||||
|
|
||||||
documentReady(function () {
|
documentReady(function () {
|
||||||
var renderTiming = nanotiming('choo.render')
|
var renderTiming = nanotiming('choo.render')
|
||||||
var newTree = self.start()
|
var newTree = self.start()
|
||||||
|
if (typeof selector === 'string') {
|
||||||
|
self._tree = document.querySelector(selector)
|
||||||
|
} else {
|
||||||
|
self._tree = selector
|
||||||
|
}
|
||||||
|
|
||||||
self._tree = document.querySelector(selector)
|
|
||||||
assert.ok(self._tree, 'choo.mount: could not query selector: ' + selector)
|
assert.ok(self._tree, 'choo.mount: could not query selector: ' + selector)
|
||||||
assert.equal(self._tree.nodeName, newTree.nodeName, 'choo.mount: The target node <' +
|
assert.equal(self._tree.nodeName, newTree.nodeName, 'choo.mount: The target node <' +
|
||||||
self._tree.nodeName.toLowerCase() + '> is not the same type as the new node <' +
|
self._tree.nodeName.toLowerCase() + '> is not the same type as the new node <' +
|
||||||
|
|||||||
Reference in New Issue
Block a user