-
Notifications
You must be signed in to change notification settings - Fork 0
/
README.hbs
110 lines (86 loc) · 2.34 KB
/
README.hbs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
# doz-ssr
DOZ server-side rendering
<a href="https://opensource.org/licenses/MIT" target="_blank"><img src="https://img.shields.io/badge/License-MIT-yellow.svg" title="License: MIT"/></a>
<img src="https://img.shields.io/badge/Node.js-%3E%3D10.x.x-green.svg" title="Node.js version"/>
## Installation
```
npm install doz-ssr
```
## Example with Koa
#### server.js
```js
const Koa = require('koa');
const serve = require('koa-static');
const body = require('koa-body');
const DozSSR = require('doz-ssr');
const dozSSR = new DozSSR('./dist/index.html');
new Koa()
.use(serve('./public', {index: false}))
.use(body())
.use(async ctx => {
const [content] = await dozSSR.render(ctx.url, {
baseUrl: ctx.protocol + '://' + ctx.host
});
ctx.body = content;
})
.listen(3000);
```
#### bundle.js
**IMPORTANT**, since 2.0.0 it's necessary to call `window.SSR.ready()` inside your Doz app
```js
new Doz({
root: '#app',
template(h) {
return h`
<div class="container"></div>
`
},
onMount() {
if (window.SSR)
window.SSR.ready();
}
});
```
#### index.html
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>MyApp</title>
</head>
<body>
<div id="app"></div>
<script id="bundle" src="/bundle.js"></script>
</body>
</html>
```
## API
{{>main}}
## PLUGIN
There is a plugin that adds a method and a directive:
```js
import ssrPlugin from 'doz-ssr/plugin'
Doz.use(ssrPlugin);
// If you call isSSR() method inside your app you can check if it is in server environment
Doz.component('my-component', function(h){
return h`
<div>is server? ${this.isSSR()}</div>
`
})
// If you want exclude (not visible) a component or part of html you can use the directive `d-ssr-invisible`
Doz.component('my-component', function(h){
return h`
<div>
hello my friend
<!-- on server side this will be not shown -->
<div d-ssr-invisible>wow!</div>
</div>
`
})
```
## Changelog
You can view the changelog <a target="_blank" href="https://github.com/dozjs/doz-ssr/blob/master/CHANGELOG.md">here</a>
## License
doz-ssr is open-sourced software licensed under the <a target="_blank" href="http://opensource.org/licenses/MIT">MIT license</a>
## Author
<a target="_blank" href="http://rica.li">Fabio Ricali</a>