-
-
Notifications
You must be signed in to change notification settings - Fork 33.7k
Add types for vue-server-renderer (fix #5772) #5775
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 2 commits
a2b27ce
2254188
cf0b5a9
5ad3456
0b8a453
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||
---|---|---|---|---|
@@ -0,0 +1,44 @@ | ||||
import Vue = require('vue'); | ||||
import { Readable } from 'stream'; | ||||
|
||||
export declare function createRenderer(options?: RendererOptions): Renderer; | ||||
|
||||
export declare function createBundleRenderer(bundle: any, options?: BundleRendererOptions): BundleRenderer; | ||||
|
||||
type RenderCallback = (err: Error, html: string) => void; | ||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
vue/src/server/create-renderer.js Line 74 in d333a49
While There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
I agree. |
||||
|
||||
interface Renderer { | ||||
renderToString(vm: Vue, callback: RenderCallback): void; | ||||
renderToString(vm: Vue, context: object, callback: RenderCallback): void; | ||||
|
||||
renderToStream(vm: Vue, context?: object): Readable; | ||||
} | ||||
|
||||
interface BundleRenderer { | ||||
renderToString(callback: RenderCallback): void; | ||||
renderToString(context: object, callback: RenderCallback): void; | ||||
|
||||
renderToStream(context?: object): Readable; | ||||
} | ||||
|
||||
interface RendererOptions { | ||||
template?: string; | ||||
inject?: boolean; | ||||
shouldPreload?: (file: string, type: string) => boolean; | ||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We can even refine Might be an overkill. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I thought about that but not sure how benefit we can acquire by declaring it as string literal types. If the benefit is trivial, we can leave it as There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Indeed, spec change and implementation oddity will be more problematic. |
||||
cache?: RenderCache; | ||||
directives?: { | ||||
[key: string]: Vue.DirectiveOptions | Vue.DirectiveFunction | ||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Note server side directive will have different implementation. http://ssr.vuejs.org/en/api.html#directives Line 308 in d333a49
IMHO direcitives will be [key: string]: (vnode: VNode, dir: VNodeDirective) => void There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Oops, I totally didn't know about that, thanks 😅 |
||||
}; | ||||
} | ||||
|
||||
interface BundleRendererOptions extends RendererOptions { | ||||
clientManifest?: any; | ||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'll update this option to |
||||
runInNewContext?: boolean | 'once'; | ||||
basedir?: string; | ||||
} | ||||
|
||||
interface RenderCache { | ||||
get: (key: string, cb?: (res: string) => void) => string | void; | ||||
set: (key: string, val: string) => void; | ||||
has?: (key: string, cb?: (hit: boolean) => void) => boolean | void; | ||||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,84 @@ | ||
import Vue = require('vue'); | ||
import { readFileSync } from 'fs'; | ||
import { createRenderer, createBundleRenderer } from '../'; | ||
|
||
function createApp (context: any) { | ||
return new Vue({ | ||
data: { | ||
url: context.url | ||
}, | ||
template: `<div>The visited URL is: {{ url }}</div>` | ||
}); | ||
} | ||
|
||
// Renderer test | ||
const app = createApp({ url: 'http://localhost:8000/' }); | ||
|
||
const renderer = createRenderer({ | ||
template: readFileSync('./index.template.html', 'utf-8') | ||
}); | ||
|
||
const context = { | ||
title: 'Hello', | ||
meta: ` | ||
<meta name="description" content="Vue.js SSR Example"> | ||
` | ||
}; | ||
|
||
renderer.renderToString(app, context, (err, html) => { | ||
if (err) throw err; | ||
const res: string = html; | ||
}); | ||
|
||
renderer.renderToStream(app, context).on('data', chunk => { | ||
const html = chunk.toString(); | ||
}); | ||
|
||
// Bundle renderer test | ||
declare const cacheClient: { [key: string]: string }; | ||
|
||
const bundleRenderer = createBundleRenderer('/path/to/vue-ssr-server-bundle.json', { | ||
inject: false, | ||
runInNewContext: 'once', | ||
basedir: '/path/to/base', | ||
|
||
shouldPreload: (file, type) => { | ||
if (type === 'script' || type === 'style') { | ||
return true; | ||
} | ||
if (type === 'font') { | ||
return /\.woff2$/.test(file); | ||
} | ||
if (type === 'image') { | ||
return file === 'hero.jpg'; | ||
} | ||
return false; | ||
}, | ||
|
||
cache: { | ||
get: key => { | ||
return cacheClient[key]; | ||
}, | ||
set: (key, val) => { | ||
cacheClient[key] = val; | ||
}, | ||
has: key => { | ||
return !!cacheClient[key]; | ||
} | ||
}, | ||
|
||
directives: { | ||
example (vnode, directiveMeta) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
// transform vnode based on directive binding metadata | ||
} | ||
} | ||
}); | ||
|
||
bundleRenderer.renderToString(context, (err, html) => { | ||
if (err) throw err; | ||
const res: string = html; | ||
}); | ||
|
||
bundleRenderer.renderToStream(context).on('data', chunk => { | ||
const html = chunk.toString(); | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
{ | ||
"compilerOptions": { | ||
"target": "es5", | ||
"module": "commonjs", | ||
"moduleResolution": "node", | ||
"strict": true, | ||
"noEmit": true | ||
}, | ||
"compileOnSave": false, | ||
"include": [ | ||
"**/*.ts" | ||
] | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
http://ssr.vuejs.org/en/api.html#createbundlerendererbundle-options
IMHO a
bundle
is either astring
or anobject
.