Merge pull request #185 from Raiondesu/master

Typings for typescript & usage readme

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)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
@@ -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)
+  }
+}
+```

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",

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"

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?: <T extends object>(newInfo: T, addedTags: HTMLElement[], removedTags: HTMLElement[]) => void
+}

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"
+  ]
+}

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<V extends Vue> {
+    metaInfo?: MetaInfo | (() => MetaInfo)
+  }
+}
+
+declare module "vue/types/vue" {
+  interface Vue {
+    metaInfo?: MetaInfo | (() => MetaInfo)
+  }
+}