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-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..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": [ @@ -96,6 +98,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..8c7920d --- /dev/null +++ b/types/index.d.ts @@ -0,0 +1,49 @@ +import './vue'; +import { PluginFunction } from 'vue/types/plugin'; + +/** + * 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?: string, + [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/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 new file mode 100644 index 0000000..fb449e7 --- /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) + } +}