From a2b27ce6a3dcaffd0de801538dfcf9cd5a38d6d7 Mon Sep 17 00:00:00 2001 From: ktsn Date: Sun, 28 May 2017 16:19:44 +0900 Subject: [PATCH 1/5] add types for vue-server-renderer --- packages/vue-server-renderer/package.json | 9 ++ packages/vue-server-renderer/types/index.d.ts | 44 ++++++++++ packages/vue-server-renderer/types/test.ts | 84 +++++++++++++++++++ .../vue-server-renderer/types/tsconfig.json | 13 +++ 4 files changed, 150 insertions(+) create mode 100644 packages/vue-server-renderer/types/index.d.ts create mode 100644 packages/vue-server-renderer/types/test.ts create mode 100644 packages/vue-server-renderer/types/tsconfig.json diff --git a/packages/vue-server-renderer/package.json b/packages/vue-server-renderer/package.json index ffdb4546671..64e470af322 100644 --- a/packages/vue-server-renderer/package.json +++ b/packages/vue-server-renderer/package.json @@ -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" } diff --git a/packages/vue-server-renderer/types/index.d.ts b/packages/vue-server-renderer/types/index.d.ts new file mode 100644 index 00000000000..c8d978d36e4 --- /dev/null +++ b/packages/vue-server-renderer/types/index.d.ts @@ -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; + +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]: Vue.DirectiveOptions | Vue.DirectiveFunction + }; +} + +interface BundleRendererOptions extends RendererOptions { + clientManifest?: any; + 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; +} diff --git a/packages/vue-server-renderer/types/test.ts b/packages/vue-server-renderer/types/test.ts new file mode 100644 index 00000000000..516a835a67b --- /dev/null +++ b/packages/vue-server-renderer/types/test.ts @@ -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: `
The visited URL is: {{ url }}
` + }); +} + +// Renderer test +const app = createApp({ url: 'http://localhost:8000/' }); + +const renderer = createRenderer({ + template: readFileSync('./index.template.html', 'utf-8') +}); + +const context = { + title: 'Hello', + meta: ` + + ` +}; + +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) { + // 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(); +}); \ No newline at end of file diff --git a/packages/vue-server-renderer/types/tsconfig.json b/packages/vue-server-renderer/types/tsconfig.json new file mode 100644 index 00000000000..fcb122763e2 --- /dev/null +++ b/packages/vue-server-renderer/types/tsconfig.json @@ -0,0 +1,13 @@ +{ + "compilerOptions": { + "target": "es5", + "module": "commonjs", + "moduleResolution": "node", + "strict": true, + "noEmit": true + }, + "compileOnSave": false, + "include": [ + "**/*.ts" + ] +} \ No newline at end of file From 2254188031e383aa70c6cfd72e16e358825f5987 Mon Sep 17 00:00:00 2001 From: ktsn Date: Sun, 28 May 2017 16:28:44 +0900 Subject: [PATCH 2/5] add a new line to the end of files --- packages/vue-server-renderer/types/test.ts | 2 +- packages/vue-server-renderer/types/tsconfig.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/vue-server-renderer/types/test.ts b/packages/vue-server-renderer/types/test.ts index 516a835a67b..9fd8acaed84 100644 --- a/packages/vue-server-renderer/types/test.ts +++ b/packages/vue-server-renderer/types/test.ts @@ -81,4 +81,4 @@ bundleRenderer.renderToString(context, (err, html) => { bundleRenderer.renderToStream(context).on('data', chunk => { const html = chunk.toString(); -}); \ No newline at end of file +}); diff --git a/packages/vue-server-renderer/types/tsconfig.json b/packages/vue-server-renderer/types/tsconfig.json index fcb122763e2..084dd317ea1 100644 --- a/packages/vue-server-renderer/types/tsconfig.json +++ b/packages/vue-server-renderer/types/tsconfig.json @@ -10,4 +10,4 @@ "include": [ "**/*.ts" ] -} \ No newline at end of file +} From cf0b5a9ecb9f64137278014d12479e20f4f7f5c6 Mon Sep 17 00:00:00 2001 From: ktsn Date: Sun, 28 May 2017 19:01:02 +0900 Subject: [PATCH 3/5] make RenderCallback's err to be nullable --- packages/vue-server-renderer/types/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vue-server-renderer/types/index.d.ts b/packages/vue-server-renderer/types/index.d.ts index c8d978d36e4..082b7e49e2d 100644 --- a/packages/vue-server-renderer/types/index.d.ts +++ b/packages/vue-server-renderer/types/index.d.ts @@ -5,7 +5,7 @@ export declare function createRenderer(options?: RendererOptions): Renderer; export declare function createBundleRenderer(bundle: any, options?: BundleRendererOptions): BundleRenderer; -type RenderCallback = (err: Error, html: string) => void; +type RenderCallback = (err: Error | null, html: string) => void; interface Renderer { renderToString(vm: Vue, callback: RenderCallback): void; From 5ad345692e6feba71cac0da53d09ae8de3808cab Mon Sep 17 00:00:00 2001 From: ktsn Date: Sun, 28 May 2017 19:01:41 +0900 Subject: [PATCH 4/5] fix the server side directive types --- packages/vue-server-renderer/types/index.d.ts | 2 +- packages/vue-server-renderer/types/test.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/vue-server-renderer/types/index.d.ts b/packages/vue-server-renderer/types/index.d.ts index 082b7e49e2d..d68a7dc8246 100644 --- a/packages/vue-server-renderer/types/index.d.ts +++ b/packages/vue-server-renderer/types/index.d.ts @@ -27,7 +27,7 @@ interface RendererOptions { shouldPreload?: (file: string, type: string) => boolean; cache?: RenderCache; directives?: { - [key: string]: Vue.DirectiveOptions | Vue.DirectiveFunction + [key: string]: (vnode: Vue.VNode, dir: Vue.VNodeDirective) => void }; } diff --git a/packages/vue-server-renderer/types/test.ts b/packages/vue-server-renderer/types/test.ts index 9fd8acaed84..06e2759aca0 100644 --- a/packages/vue-server-renderer/types/test.ts +++ b/packages/vue-server-renderer/types/test.ts @@ -68,7 +68,7 @@ const bundleRenderer = createBundleRenderer('/path/to/vue-ssr-server-bundle.json }, directives: { - example (vnode, directiveMeta) { + example (vnode: Vue.VNode, directiveMeta: Vue.VNodeDirective) { // transform vnode based on directive binding metadata } } From 0b8a453a75aeb914381a90fde77bf347561854c2 Mon Sep 17 00:00:00 2001 From: ktsn Date: Sun, 28 May 2017 19:01:59 +0900 Subject: [PATCH 5/5] make stricter the types of the server bundle and the client manifest --- packages/vue-server-renderer/types/index.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/vue-server-renderer/types/index.d.ts b/packages/vue-server-renderer/types/index.d.ts index d68a7dc8246..d2c8394cba4 100644 --- a/packages/vue-server-renderer/types/index.d.ts +++ b/packages/vue-server-renderer/types/index.d.ts @@ -3,7 +3,7 @@ import { Readable } from 'stream'; export declare function createRenderer(options?: RendererOptions): Renderer; -export declare function createBundleRenderer(bundle: any, options?: BundleRendererOptions): BundleRenderer; +export declare function createBundleRenderer(bundle: string | object, options?: BundleRendererOptions): BundleRenderer; type RenderCallback = (err: Error | null, html: string) => void; @@ -32,7 +32,7 @@ interface RendererOptions { } interface BundleRendererOptions extends RendererOptions { - clientManifest?: any; + clientManifest?: object; runInNewContext?: boolean | 'once'; basedir?: string; }