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:
Moszeed
2017-11-15 12:44:45 +01:00
committed by Yoshua Wuyts
parent ec38a5ce58
commit 242128bb8c
2 changed files with 11 additions and 7 deletions
+5 -5
View File
@@ -453,10 +453,11 @@ hood.
See [#routing](#routing) for an overview of how to use routing efficiently.
### `app.mount(selector)`
Start the application and mount it on the given `querySelector`. Uses
[nanomount][nanomount] under the hood. 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.
Start the application and mount it on the given `querySelector`,
the given selector can be a String or a DOM element.
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()`
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
[nanomorph]: https://github.com/choojs/nanomorph
[nanorouter]: https://github.com/choojs/nanorouter
[nanomount]: https://github.com/yoshuawuyts/nanomount
[yo-yo]: https://github.com/maxogden/yo-yo
[yo-yoify]: https://github.com/shama/yo-yoify
[unassertify]: https://github.com/unassert-js/unassertify
+6 -2
View File
@@ -169,15 +169,19 @@ Choo.prototype.start = function () {
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 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
documentReady(function () {
var renderTiming = nanotiming('choo.render')
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.equal(self._tree.nodeName, newTree.nodeName, 'choo.mount: The target node <' +
self._tree.nodeName.toLowerCase() + '> is not the same type as the new node <' +