mirror of https://github.com/vuejs/vue.git
* add types for vue-server-renderer * add a new line to the end of files * make RenderCallback's err to be nullable * fix the server side directive types * make stricter the types of the server bundle and the client manifest
This commit is contained in:
parent
d333a498e9
commit
e6de9a5de2
|
@ -3,6 +3,7 @@
|
|||
"version": "2.3.3",
|
||||
"description": "server renderer for Vue 2.0",
|
||||
"main": "index.js",
|
||||
"types": "types/index.d.ts",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/vuejs/vue.git"
|
||||
|
@ -17,6 +18,9 @@
|
|||
"bugs": {
|
||||
"url": "https://github.com/vuejs/vue/issues"
|
||||
},
|
||||
"scripts": {
|
||||
"test:types": "tsc -p types"
|
||||
},
|
||||
"dependencies": {
|
||||
"chalk": "^1.1.3",
|
||||
"hash-sum": "^1.0.2",
|
||||
|
@ -27,5 +31,10 @@
|
|||
"source-map": "0.5.6",
|
||||
"serialize-javascript": "^1.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^7.0.22",
|
||||
"typescript": "^2.3.3",
|
||||
"vue": "file:../.."
|
||||
},
|
||||
"homepage": "https://github.com/vuejs/vue/tree/dev/packages/vue-server-renderer#readme"
|
||||
}
|
||||
|
|
|
@ -0,0 +1,44 @@
|
|||
import Vue = require('vue');
|
||||
import { Readable } from 'stream';
|
||||
|
||||
export declare function createRenderer(options?: RendererOptions): Renderer;
|
||||
|
||||
export declare function createBundleRenderer(bundle: string | object, options?: BundleRendererOptions): BundleRenderer;
|
||||
|
||||
type RenderCallback = (err: Error | null, html: string) => void;
|
||||
|
||||
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;
|
||||
cache?: RenderCache;
|
||||
directives?: {
|
||||
[key: string]: (vnode: Vue.VNode, dir: Vue.VNodeDirective) => void
|
||||
};
|
||||
}
|
||||
|
||||
interface BundleRendererOptions extends RendererOptions {
|
||||
clientManifest?: object;
|
||||
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;
|
||||
}
|
|
@ -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: Vue.VNode, directiveMeta: Vue.VNodeDirective) {
|
||||
// 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();
|
||||
});
|
|
@ -0,0 +1,13 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"module": "commonjs",
|
||||
"moduleResolution": "node",
|
||||
"strict": true,
|
||||
"noEmit": true
|
||||
},
|
||||
"compileOnSave": false,
|
||||
"include": [
|
||||
"**/*.ts"
|
||||
]
|
||||
}
|
Loading…
Reference in New Issue