From 9449c39e78c472d1225e6850b978f660ead9779c Mon Sep 17 00:00:00 2001 From: Raiondesu Date: Thu, 8 Feb 2018 16:44:05 +0300 Subject: [PATCH 1/3] Attempt on typings. --- package-lock.json | 6 ++--- package.json | 1 + types/index.d.ts | 62 +++++++++++++++++++++++++++++++++++++++++++++++ types/vue.d.ts | 18 ++++++++++++++ 4 files changed, 84 insertions(+), 3 deletions(-) create mode 100644 types/index.d.ts create mode 100644 types/vue.d.ts diff --git a/package-lock.json b/package-lock.json index b657589..7b12b9e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7574,9 +7574,9 @@ } }, "mocha": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/mocha/-/mocha-4.1.0.tgz", - "integrity": "sha512-0RVnjg1HJsXY2YFDoTNzcc1NKhYuXKRrBAG2gDygmJJA136Cs2QlRliZG1mA0ap7cuaT30mw16luAeln+4RiNA==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/mocha/-/mocha-5.0.0.tgz", + "integrity": "sha512-ukB2dF+u4aeJjc6IGtPNnJXfeby5d4ZqySlIBT0OEyva/DrMjVm5HkQxKnHDLKEfEQBsEnwTg9HHhtPHJdTd8w==", "dev": true, "requires": { "browser-stdout": "1.3.0", diff --git a/package.json b/package.json index 6d21fb8..41417b4 100644 --- a/package.json +++ b/package.json @@ -96,6 +96,7 @@ ], "license": "MIT", "main": "lib/vue-meta.js", + "typings": "types/index.d.ts", "nyc": { "exclude": [ "test/**/*.js" diff --git a/types/index.d.ts b/types/index.d.ts new file mode 100644 index 0000000..afc7fa0 --- /dev/null +++ b/types/index.d.ts @@ -0,0 +1,62 @@ +import Vue, { ComponentOptions } from 'vue' +import { PluginFunction } from 'vue/types/plugin'; + +import './vue'; + +/** + * Installation function + * + * @param {Vue} Vue - the Vue constructor. + * @param {{ + * keyName: string, // the component option name that vue-meta looks for meta info on. + * attribute: string, // the attribute name vue-meta adds to the tags it observes + * ssrAttribute: string, // the attribute name that lets vue-meta know that meta info has already been server-rendered + * tagIDKeyName: string // the property name that vue-meta uses to determine whether to overwrite or append a tag + * }} options + */ +declare const Meta: PluginFunction<{ + keyName: string, // the component option name that vue-meta looks for meta info on. + attribute: string, // the attribute name vue-meta adds to the tags it observes + ssrAttribute: string, // the attribute name that lets vue-meta know that meta info has already been server-rendered + tagIDKeyName: string // the property name that vue-meta uses to determine whether to overwrite or append a tag +}>; + +export default Meta; + +export interface MetaInfo { + title?: string + titleTemplate?: string | ((titleChunk: string) => string) + htmlAttrs?: { [key: string]: string } + bodyAttrs?: { [key: string]: string } + base?: { target: string, href: string } + + meta?: { + vmid?: string, + charset?: string, + content?: string, + 'http-equiv'?: 'content-security-policy' | 'refresh', + name?: 'application-name' + | 'author' + | 'description' + | 'generator' + | 'keywords' + | 'referrer' + | 'creator' + | 'googlebot' + | 'publisher' + | 'robots' + | 'slurp' + | 'viewport', + [key: string]: any + }[] + + link?: { rel: string, href: string, [key: string]: any }[] + style?: { cssText: string, type: string, [key: string]: any }[] + script?: { innerHTML: string, type: string, [key: string]: any }[] + noscript?: { innerHTML: string, [key: string]: any }[] + + __dangerouslyDisableSanitizers?: string[] + __dangerouslyDisableSanitizersByTagID?: string[] + + changed?: (newInfo: T, addedTags: HTMLElement[], removedTags: HTMLElement[]) => void +} diff --git a/types/vue.d.ts b/types/vue.d.ts new file mode 100644 index 0000000..d05cb5e --- /dev/null +++ b/types/vue.d.ts @@ -0,0 +1,18 @@ +/** + * Augment the typings of Vue.js + */ + +import Vue, { ComponentOptions } from "vue"; +import { MetaInfo } from './index'; + +declare module "vue/types/options" { + interface ComponentOptions { + metaInfo?: MetaInfo | (() => MetaInfo); + } +} + +declare module "vue/types/vue" { + interface Vue { + metaInfo?: MetaInfo | (() => MetaInfo); + } +} From 834326b0150fb47a801328f5592121192338eab6 Mon Sep 17 00:00:00 2001 From: Raiondesu Date: Thu, 8 Feb 2018 17:00:42 +0300 Subject: [PATCH 2/3] Fix? --- types/index.d.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/types/index.d.ts b/types/index.d.ts index afc7fa0..01fffcb 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -1,7 +1,5 @@ -import Vue, { ComponentOptions } from 'vue' -import { PluginFunction } from 'vue/types/plugin'; - import './vue'; +import { PluginFunction } from 'vue/types/plugin'; /** * Installation function From 92d913413b0c07c66c96f68dcdfac6c92b803ee0 Mon Sep 17 00:00:00 2001 From: Raiondesu Date: Fri, 9 Feb 2018 17:45:02 +0300 Subject: [PATCH 3/3] Finally solved the types. --- README.md | 16 ++++++++++++++++ package.json | 4 +++- types/index.d.ts | 13 +------------ types/tsconfig.json | 17 +++++++++++++++++ types/vue.d.ts | 4 ++-- 5 files changed, 39 insertions(+), 15 deletions(-) create mode 100644 types/tsconfig.json diff --git a/README.md b/README.md index a247606..f6d0113 100644 --- a/README.md +++ b/README.md @@ -79,6 +79,7 @@ - [How do I populate `metaInfo` from the result of an asynchronous action?](#how-do-i-populate-metainfo-from-the-result-of-an-asynchronous-action) - [Why doesn't `vue-meta` support `jsnext:main`?](#why-doesnt-vue-meta-support-jsnextmain) - [Examples](#examples) +- [TypeScript Support](#typescript-support) @@ -794,3 +795,18 @@ If this were not the case, you would have to instruct Babel to convert `default` # Examples To run the examples; clone this repository & run `npm install` in the root directory, and then run `npm run dev`. Head to http://localhost:8080. + +# TypeScript Support + +If you have problems with types using vue-meta, then you're most probably using vue-class-component. +In any troublesome situation, just add the following ambient declaration to your types: + +```js +import { MetaInfo } from 'vue-meta'; + +declare module "vue/types/vue" { + interface Vue { + metaInfo?: MetaInfo | (() => MetaInfo) + } +} +``` diff --git a/package.json b/package.json index 41417b4..9b4d5d6 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,9 @@ }, "files": [ "lib", - "yarn.lock" + "yarn.lock", + "types/index.d.ts", + "types/vue.d.ts" ], "homepage": "https://github.com/declandewet/vue-meta", "keywords": [ diff --git a/types/index.d.ts b/types/index.d.ts index 01fffcb..8c7920d 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -33,18 +33,7 @@ export interface MetaInfo { charset?: string, content?: string, 'http-equiv'?: 'content-security-policy' | 'refresh', - name?: 'application-name' - | 'author' - | 'description' - | 'generator' - | 'keywords' - | 'referrer' - | 'creator' - | 'googlebot' - | 'publisher' - | 'robots' - | 'slurp' - | 'viewport', + name?: string, [key: string]: any }[] diff --git a/types/tsconfig.json b/types/tsconfig.json new file mode 100644 index 0000000..b41cee0 --- /dev/null +++ b/types/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "target": "es5", + "module": "es2015", + "moduleResolution": "node", + "lib": [ + "es5", + "dom", + "es2015.promise" + ], + "strict": true, + "noEmit": true + }, + "include": [ + "*.d.ts" + ] +} diff --git a/types/vue.d.ts b/types/vue.d.ts index d05cb5e..fb449e7 100644 --- a/types/vue.d.ts +++ b/types/vue.d.ts @@ -7,12 +7,12 @@ import { MetaInfo } from './index'; declare module "vue/types/options" { interface ComponentOptions { - metaInfo?: MetaInfo | (() => MetaInfo); + metaInfo?: MetaInfo | (() => MetaInfo) } } declare module "vue/types/vue" { interface Vue { - metaInfo?: MetaInfo | (() => MetaInfo); + metaInfo?: MetaInfo | (() => MetaInfo) } }