Merge pull request #60 from kimuraz/52-v1-prototype

52 v1 prototype

Author: kimuraz

.eslintrc.js

@@ -5,27 +5,15 @@ module.exports = {
   env: {
     browser: true,
   },
-  extends: ['airbnb-base', 'plugin:vue/recommended'],
+  extends: [ 
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
   // required to lint *.vue files
-  plugins: ['html'],
+  plugins: ['@typescript-eslint'],
   // add your custom rules here
   rules: {
-    // don't require .vue extension when importing
-    'import/extensions': [
-      'error',
-      'always',
-      {
-        js: 'never',
-        vue: 'never',
-      },
-    ],
-    // allow optionalDependencies
-    'import/no-extraneous-dependencies': [
-      'error',
-      {
-        optionalDependencies: ['test/unit/index.js'],
-      },
-    ],
     // allow debugger during development
     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
     'arrow-parens': 'off',

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,22 +5,27 @@
   "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",
+    "lint": "eslint --ext .ts 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",
+    "@typescript-eslint/eslint-plugin": "^5.40.1",
+    "@typescript-eslint/parser": "^5.40.1",
     "esbuild": "^0.15.11",
     "eslint": "^8.25.0",
     "eslint-config-airbnb-base": "^15.0.0",
@@ -30,7 +35,7 @@
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-vue": "^9.6.0",
     "typescript": "^4.8.4",
-    "vuepress": "^1.5.0"
+    "vuepress": "^1.9.7"
   },
   "engines": {
     "node": ">= 14.0.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';
 
@@ -8,17 +10,16 @@ export { DraggingMixin };
 export { ResizingMixin };
 
 const VueInteract = {
-  DraggingMixin,
-  ResizingMixin,
-  install: (Vue) => {
+  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);
   },
 };