Add basic Typescript support

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-screen",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Reactive window size and media query states for Vue components. Integrates with most UI frameworks.",
   "keywords": [
     "vuejs",
@@ -15,10 +15,12 @@
   ],
   "main": "dist/vue-screen.cjs.js",
   "module": "dist/vue-screen.esm.js",
+  "types": "types/index.d.ts",
   "scripts": {
-    "test": "npm run lint && npm run test:unit && npm run test:e2e",
+    "test": "npm run lint && npm run test:unit && npm run test:e2e && npm run test:types",
     "test:unit": "mocha --require @babel/register --timeout 5000 --exit 'tests/units/*.spec.js'",
     "test:e2e": "node tests/e2e/runner.js",
+    "test:types": "tsc -p types/test",
     "build:browser": "rollup -c rollup.config.browser.js",
     "build:cjs": "rollup -c rollup.config.cjs.js",
     "build:esm": "rollup -c rollup.config.esm.js",
@@ -30,6 +32,11 @@
     "type": "git",
     "url": "git+https://github.com/matteo-rigon/vue-screen.git"
   },
+  "files": [
+    "src",
+    "dist/*.js",
+    "types/*.d.ts"
+  ],
   "author": "Matteo Rigon",
   "license": "MIT",
   "bugs": {
@@ -42,6 +49,9 @@
     "@babel/polyfill": "^7.4.3",
     "@babel/preset-env": "^7.4.3",
     "@babel/register": "^7.4.0",
+    "@types/babel__core": "^7.1.5",
+    "@types/babel__template": "^7.0.2",
+    "@types/terser-webpack-plugin": "^2.2.0",
     "babel-loader": "^8.0.5",
     "chai": "^4.2.0",
     "cross-spawn": "^6.0.5",
@@ -60,6 +70,7 @@
     "rollup": "^1.11.3",
     "rollup-plugin-babel": "^4.3.2",
     "rollup-plugin-uglify": "^6.0.2",
+    "typescript": "^3.8.2",
     "vue": "^2.6.10",
     "webpack": "^4.30.0",
     "webpack-cli": "^3.3.1",

types/index.d.ts

@@ -0,0 +1,8 @@
+import './vue'
+import { VueScreen } from './screen'
+
+export default VueScreen
+
+export {
+  VueScreenObject
+} from './screen'

types/options.d.ts

@@ -0,0 +1,30 @@
+import { VueScreenObject } from './screen'
+
+export type VueScreenOptionsFrameworkLiteral = 
+  'tailwind' 
+  | 'bootstrap' 
+  | 'bulma' 
+  | 'foundation' 
+  | 'materialize' 
+  | 'semantic-ui'
+
+export interface VueScreenOptionsBreakpoints {
+  [key: string]: number | string;
+}
+
+export interface VueScreenOptionsCallbacks {
+  [key: string]: (screen: VueScreenObject) => any;
+}
+
+export interface VueScreenOptionsProperties {
+  extend?: VueScreenOptionsFrameworkLiteral;
+  breakpointsOrder?: string[];
+}
+
+export type VueScreenOptions = 
+  VueScreenOptionsFrameworkLiteral 
+  | ( 
+      VueScreenOptionsProperties 
+      & VueScreenOptionsCallbacks 
+      & VueScreenOptionsBreakpoints 
+    )

types/screen.d.ts

@@ -0,0 +1,20 @@
+import { PluginFunction } from 'vue'
+import { VueScreenOptions } from './options'
+
+export declare class VueScreen {
+  static install: PluginFunction<VueScreenOptions>
+}
+
+export interface DefaultProperties {
+  width: number;
+  height: number;
+  landscape: boolean;
+  portrait: boolean;
+  touch: boolean;
+  breakpoint?: string;
+}
+export interface CustomProperties {
+  [key: string]: any;
+}
+
+export declare type VueScreenObject = DefaultProperties & CustomProperties;

types/test/index.ts

@@ -0,0 +1,28 @@
+import Vue from 'vue'
+
+import VueScreen from '../index'
+import { VueScreenObject } from '../screen'
+
+Vue.use(VueScreen)
+Vue.use(VueScreen, 'tailwind')
+Vue.use(VueScreen, {
+  xs: 0,
+  sm: 1024,
+  md: 1200,
+})
+Vue.use(VueScreen, {
+  extend: 'tailwind',
+  tablet: (screen: VueScreenObject) => screen.md && !screen.ld && screen.touch,
+})
+
+const vm = new Vue()
+
+vm.$screen.width
+vm.$screen.height
+vm.$screen.breakpoint
+vm.$screen.breakpointsOrder
+vm.$screen.landscape
+vm.$screen.portrait
+vm.$screen.touch
+vm.$screen.xl
+vm.$screen.tablet

types/test/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "es2015",
+    "moduleResolution": "node",
+    "strict": true,
+    "noEmit": true,
+    "lib": ["es5", "dom", "es2015.promise", "es2015.iterable", "es2015.core"]
+  },
+  "include": ["*.ts", "../*.d.ts"]
+}

types/vue.d.ts

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import { VueScreenObject } from './index'
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    readonly $screen: VueScreenObject
+  }
+}