Skip to content

Commit

Permalink
server: Store mount selector and return this (#625)
Browse files Browse the repository at this point in the history
* Store mount selector and return `this`

This allows `.mount('body')` to be used on the server like so:

```js
module.exports = app.mount('body')
```

Then, when server rendering you can do:

```js
var app = require('./app')
fillServerTemplate(html, app.selector, app.toString('/'))
```

Where `fillServerTemplate` is a function that replaces the HTML at a
CSS selector with some string.

This way you do not need to check for `typeof window` in your
application entry point to do server rendering, and it allows tools like
bankai to automatically inline server rendered html in the correct place.

* docs

* better words
  • Loading branch information
goto-bus-stop authored Feb 13, 2018
1 parent 658a399 commit a23dc51
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 2 deletions.
11 changes: 10 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -459,9 +459,18 @@ See [#routing](#routing) for an overview of how to use routing efficiently.
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()`.
In the browser, 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.

On the server, this will save the `selector` on the app instance.
When doing server side rendering, you can then check the `app.selector` property to see where the render result should be inserted.

Returns `this`, so you can easily export the application for server side rendering:

```js
module.exports = app.mount('body')
```

### `tree = app.start()`
Start the application. Returns a tree of DOM nodes that can be mounted using
`document.body.appendChild()`.
Expand Down
7 changes: 6 additions & 1 deletion index.js
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,12 @@ 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')
if (typeof window !== 'object') {
assert.ok(typeof selector === 'string', 'choo.mount: selector should be type String')
this.selector = selector
return this
}

assert.ok(typeof selector === 'string' || typeof selector === 'object', 'choo.mount: selector should be type String or HTMLElement')

var self = this
Expand Down

0 comments on commit a23dc51

Please sign in to comment.