Skip to content

Commit 3816c28

Browse files
christianalfonichristianalfoni
committed
docs(website): finish SSR docs
1 parent dd1143e commit 3816c28

File tree

2 files changed

+123
-56
lines changed

2 files changed

+123
-56
lines changed

‎packages/overmind-website/examples/guide/serversiderendering/renderonserver.ts‎

Lines changed: 120 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { config } from '../client/overmind'
1212
import App from '../client/components/App'
1313
import db from './db'
1414
15-
export default async (req, res) => {
15+
module.exports = async (req, res) => {
1616
const overmind = createOvermindSSR(overmind)
1717
1818
overmind.currentPage = 'posts'
@@ -43,47 +43,17 @@ export default async (req, res) => {
4343
{
4444
fileName: 'server/routePosts.js',
4545
code: `
46-
import Vue from 'vue'
47-
import { createRenderer } from 'vue-server-renderer'
48-
import { createOvermindSSR } from 'overmind'
49-
import { createPlugin } from 'overmind-vue'
50-
import { config } from '../client/overmind'
51-
import App from '../client/components/App'
52-
import db from './db'
53-
54-
const renderer = createRenderer()
55-
56-
export default async (req, res) => {
57-
const overmind = createOvermindSSR(overmind)
58-
const OvermindPlugin = createPlugin(overmind)
59-
const app = new Vue({
60-
render(h) {
61-
return h(App)
62-
}
63-
})
64-
65-
Vue.use(OvermindPlugin)
66-
67-
const app =
68-
overmind.currentPage = 'posts'
69-
overmind.posts = await db.getPosts()
70-
71-
OvermindPlugin.set(overmind)
72-
73-
const html = await renderer.renderToString(app)
74-
75-
res.send(\`
76-
<html>
77-
<body>
78-
<div id="app">\${html}</div>
79-
<script>
80-
window.__OVERMIND_MUTATIONS = \${JSON.stringify(overmind.hydrate())}
81-
</script>
82-
<script src="/scripts/app.js"></script>
83-
</body>
84-
</html>
85-
\`)
86-
}
46+
/*
47+
VUE will not be able to support server side rendering until version 3.0
48+
49+
"
50+
Top level APIs will likely receive an overhaul to avoid globally mutating the
51+
Vue runtime when installing plugins. Instead, plugins will be applied and scoped
52+
to a component tree. This will make it easier to test components that rely on
53+
specific plugins, and also make it possible to mount multiple Vue applications
54+
on the same page with different plugins, but using the same Vue runtime
55+
"
56+
*/
8757
`,
8858
},
8959
],
@@ -132,16 +102,117 @@ export default async (req, res) => {
132102
angular: [
133103
{
134104
fileName: 'overmind/index.ts',
135-
code: tsAppIndex(
136-
'angular',
137-
`
105+
code: `
106+
import { IConfig } from 'overmind'
107+
import { OvermindService } from 'overmind-angular'
108+
import { Injectable } from '@angular/core'
138109
import { state } from './state'
139110
140-
const config = {
141-
state,
111+
export const config = {
112+
state
113+
}
114+
115+
declare module 'overmind' {
116+
interface Config extends IConfig<typeof config> {}
142117
}
143-
`
144-
),
118+
119+
@Injectable()
120+
export class Store extends OvermindService<typeof config> {}
121+
`,
122+
},
123+
{
124+
fileName: 'common.module.ts',
125+
code: `
126+
import { NgModule } from '@angular/core'
127+
import { BrowserModule } from '@angular/platform-browser'
128+
import { OvermindService, OvermindModule } from 'overmind-angular'
129+
import { AppComponent } from './components/app.component.ts'
130+
import { Store } from './overmind'
131+
132+
// We create a shared module between the client and the server
133+
@NgModule({
134+
bootstrap: [AppComponent],
135+
imports: [
136+
BrowserModule.withServerTransition({appId: 'my-app'}),
137+
OvermindModule
138+
],
139+
providers: [{ provide: Store, useExisting: OvermindService }]
140+
})
141+
export class CommonModule {}
142+
`,
143+
},
144+
{
145+
fileName: 'app.module.ts',
146+
code: `
147+
import { Overmind } from 'overmind'
148+
import { OVERMIND_INSTANCE } from 'overmind-angular'
149+
import { CommonModule } from './common.module.ts'
150+
import { config } from './overmind'
151+
152+
// The client specific module provides the Overmind instance
153+
@NgModule({
154+
imports: [CommonModule],
155+
providers: [{
156+
provide: OVERMIND_INSTANCE,
157+
useValue: new Overmind(config)
158+
}]
159+
})
160+
export class AppModule {}
161+
`,
162+
},
163+
{
164+
fileName: 'app.server.module.ts',
165+
code: `
166+
import { ServerModule } from '@angular/platform-server';
167+
import { CommonModule } from './common.module.ts'
168+
import { config } from './overmind'
169+
170+
// The server module does not provide an instance, it is
171+
// provider per request to the server
172+
@NgModule({
173+
imports: [CommonModule, ServerModule],
174+
})
175+
export class AppServerModule {}
176+
`,
177+
},
178+
{
179+
fileName: 'server/routePosts.js',
180+
code: `
181+
import { renderModuleFactory } from '@angular/platform-server'
182+
import { createOvermindSSR } from 'overmind'
183+
import { config } from '../overmind'
184+
import db from './db'
185+
186+
const { AppServerModuleNgFactory } = require('./server/main')
187+
188+
export default async (req, res) => {
189+
const overmind = createOvermindSSR(config)
190+
191+
overmind.currentPage = 'posts'
192+
overmind.posts = await db.getPosts()
193+
194+
const html = await renderModuleFactory(AppServerModuleNgFactory, {
195+
extraProviders: [{
196+
provide: OVERMIND_INSTANCE,
197+
useValue: overmind
198+
}]
199+
})
200+
201+
res.send(\`
202+
<!DOCTYPE html>
203+
<html>
204+
<head></head>
205+
<body>
206+
\${html}
207+
<script>
208+
window.__OVERMIND_MUTATIONS = \${JSON.stringify(overmind.hydrate())}
209+
</script>
210+
<script src="/scripts/app.js"></script>
211+
</body>
212+
</html>
213+
\`)
214+
});
215+
`,
145216
},
146217
],
147218
}

‎packages/overmind-website/examples/templates.ts‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ export const overmind = new Overmind(config)
1616
export const useOvermind = createHook(overmind)
1717
`,
1818
angular: (config) => `
19-
import { Overmind, IConfig } from 'overmind'
20-
import { createService } from 'overmind-angular'
19+
import { IConfig } from 'overmind'
20+
import { OvermindService } from 'overmind-angular'
2121
import { Injectable } from '@angular/core'
2222
${config.trim()}
2323
@@ -26,12 +26,8 @@ declare module 'overmind' {
2626
interface Config extends IConfig<typeof config> {}
2727
}
2828
29-
export interface Connect extends IConnect<typeof config> {}
30-
31-
export const overmind = new Overmind(config)
32-
3329
@Injectable()
34-
export class OvermindService extends createService(overmind) {}
30+
export class Store extends OvermindService<typeof config> {}
3531
`,
3632
vue: (config) => ``,
3733
}

0 commit comments

Comments
 (0)