Add interact as globally on vue

Improve build process

Author: kimuraz

build.js

@@ -2,7 +2,8 @@ require('esbuild').build({
     entryPoints: ['src/index.ts'],
     bundle: true,
     minify: true,
-    target: 'es2016',
+    target: 'esNext',
     outfile: 'dist/vue-interact.min.js',
     external: ['interactjs', 'vue'],
+    tsconfig: 'tsconfig.json', 
 });

dist/vue-interact.min.js

@@ -0,0 +1,16 @@
+module.exports = {
+  verbose: true,
+  clearMocks: true,
+  moduleDirectories: ['node_modules', 'src'],
+  globals: {
+    'ts-jest': {
+        tsconfig: 'tsconfig.json',
+    },
+  },
+  transform: {
+    "^.+\\.(ts|tsx)$": "ts-jest"
+  },
+  transformIgnorePatterns: [
+    "<rootDir>/node_modules/(?!@foo)"
+  ]
+};

jest.config.ts

@@ -5,21 +5,24 @@
   "author": "Kimura <[email protected]>",
   "private": false,
   "main": "dist/vue-interact.min.js",
+  "types": "vue-interact.d.ts",
   "license": "MIT",
   "scripts": {
     "build": "node build.js",
     "lint": "eslint --ext .js,.vue src",
     "docs:dev": "vuepress dev docs",
-    "docs:build": "vuepress build docs"
+    "docs:build": "vuepress build docs",
+    "test": "jest"
   },
   "dependencies": {
     "interactjs": "^1.10.17"
   },
   "peerDependencies": {
-    "vue": "^2.6",
-    "interactjs": "^1.10.17"
+    "interactjs": "^1.10.17",
+    "vue": "^2.6"
   },
   "devDependencies": {
+    "@interactjs/types": "^1.10.17",
     "@tsconfig/recommended": "^1.0.1",
     "esbuild": "^0.15.11",
     "eslint": "^8.25.0",

package.json

@@ -1,3 +1,5 @@
+import { Directive } from 'vue';
+import interact from 'interactjs';
 import DraggingMixin from './mixins/DraggingMixin';
 import ResizingMixin from './mixins/ResizingMixin';
 
@@ -7,18 +9,17 @@ import resizable from './directives/resizable';
 export { DraggingMixin };
 export { ResizingMixin };
 
-const VueInteract = {
-  DraggingMixin,
-  ResizingMixin,
-  install: (Vue) => {
+const VueInteract: any = {
+  install: (Vue: Vue) => {
     if (Vue.vueInteractInstalled) {
       return;
     }
 
     Vue.vueInteractInstalled = true;
+    Vue.$interact = interact;
 
-    Vue.directive('draggable', draggable);
-    Vue.directive('resizable', resizable);
+    Vue.directive('draggable', draggable as Directive);
+    Vue.directive('resizable', resizable as Directive);
   },
 };