Merge pull request SortableJS#81 from SortableJS/Improve-TS-support

improve ts support

package.json

@@ -4,7 +4,7 @@
   "description": "draggable component for vue",
   "license": "MIT",
   "main": "dist/vuedraggable.umd.min.js",
-  "types": "src/vuedraggable.d.ts",
+  "types": "types/vuedraggable.d.ts",
   "repository": {
     "type": "git",
     "url": "https://github.com/SortableJS/Vue.Draggable.git"
@@ -15,9 +15,10 @@
     "build:doc": "vue-cli-service build ./example/main.js --dest docs --mode development",
     "build": "vue-cli-service build --name vuedraggable --entry ./src/vuedraggable.js --target lib",
     "lint": "vue-cli-service lint src example",
-    "prepublishOnly": "npm run lint && npm run test:unit && npm run build:doc && npm run build",
+    "prepublishOnly": "npm run lint && npm run test:unit && npm run build:doc && npm run build:type && npm run build",
     "test:unit": "vue-cli-service test:unit --coverage",
-    "test:coverage": "vue-cli-service test:unit --coverage --verbose && codecov"
+    "test:coverage": "vue-cli-service test:unit --coverage --verbose && codecov",
+    "build:type": "tsc"
   },
   "keywords": [
     "vue",
@@ -37,6 +38,7 @@
     "vue": "^3.0.1"
   },
   "devDependencies": {
+    "@types/sortablejs": "^1.10.7",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-plugin-unit-jest": "^4.5.4",
@@ -57,7 +59,7 @@
     "font-awesome": "^4.7.0",
     "jquery": "^3.5.1",
     "popper.js": "^1.16.1",
-    "typescript": "^4.0.3",
+    "typescript": "^4.3.5",
     "vue": "^3.0.1",
     "vue-jest": "^5.0.0-alpha.5",
     "vue-router": "^4.0.0-beta.13",
@@ -91,6 +93,7 @@
     "dist/*.css",
     "dist/*.map",
     "dist/*.js",
+    "types/*",
     "src/*"
   ],
   "module": "dist/vuedraggable.umd.js"

src/vuedraggable.js

@@ -199,6 +199,7 @@ const draggableComponent = defineComponent({
     },
 
     spliceList() {
+      // @ts-ignore
       const spliceList = list => list.splice(...arguments);
       this.alterList(spliceList);
     },
@@ -243,6 +244,7 @@ const draggableComponent = defineComponent({
       }
       removeNode(evt.item);
       const newIndex = this.getVmIndexFromDomIndex(evt.newIndex);
+      // @ts-ignore
       this.spliceList(newIndex, 0, element);
       const added = { element, newIndex };
       this.emitChanges({ added });
@@ -255,6 +257,7 @@ const draggableComponent = defineComponent({
         return;
       }
       const { index: oldIndex, element } = this.context;
+      // @ts-ignore
       this.spliceList(oldIndex, 1);
       const removed = { element, oldIndex };
       this.emitChanges({ removed });

tsconfig.json

@@ -0,0 +1,17 @@
+{
+    "compilerOptions": {
+        "target": "es2016",
+        "lib":["esnext", "DOM"],
+        "moduleResolution": "node",
+        "allowJs": true,
+        "checkJs": true,
+        "emitDeclarationOnly": true,
+        "downlevelIteration": true,
+        "esModuleInterop": true, 
+        "outDir": "./types",
+        "declaration": true
+    },
+    "files": [
+        "./src/vuedraggable.js"
+    ]
+}

types/core/componentBuilderHelper.d.ts

@@ -0,0 +1,9 @@
+export function getComponentAttributes({ $attrs, componentData }: {
+    $attrs: any;
+    componentData?: {};
+}): any;
+export function createSortableOption({ $attrs, callBackBuilder }: {
+    $attrs: any;
+    callBackBuilder: any;
+}): any;
+export function getValidSortableEntries(value: any): any[][];

types/core/componentStructure.d.ts

@@ -0,0 +1,22 @@
+export class ComponentStructure {
+    constructor({ nodes: { header, default: defaultNodes, footer }, root, realList }: {
+        nodes: {
+            header: any;
+            default: any;
+            footer: any;
+        };
+        root: any;
+        realList: any;
+    });
+    defaultNodes: any;
+    children: any[];
+    externalComponent: any;
+    rootTransition: any;
+    tag: any;
+    realList: any;
+    get _isRootComponent(): any;
+    render(h: any, attributes: any): any;
+    updated(): void;
+    getUnderlyingVm(domElement: any): any;
+    getVmIndexFromDomIndex(domIndex: any, element: any): any;
+}

types/core/renderHelper.d.ts

@@ -0,0 +1,7 @@
+export function computeComponentStructure({ $slots, tag, realList, getKey }: {
+    $slots: any;
+    tag: any;
+    realList: any;
+    getKey: any;
+}): ComponentStructure;
+import { ComponentStructure } from "./componentStructure";

types/core/sortableEvents.d.ts

@@ -0,0 +1,10 @@
+export namespace events {
+    export { manage };
+    export { manageAndEmit };
+    export { emit };
+}
+export function isReadOnly(eventName: any): boolean;
+declare const manage: string[];
+declare const manageAndEmit: string[];
+declare const emit: string[];
+export {};

types/util/console.d.ts

@@ -0,0 +1 @@
+export const console: Console;

types/util/htmlHelper.d.ts

@@ -0,0 +1,2 @@
+export function insertNodeAt(fatherNode: any, node: any, position: any): void;
+export function removeNode(node: any): void;

types/util/string.d.ts

@@ -0,0 +1 @@
+export function camelize(str: any): any;

types/util/tags.d.ts

@@ -0,0 +1,3 @@
+export function isHtmlTag(name: any): boolean;
+export function isHtmlAttribute(value: any): any;
+export function isTransition(name: any): boolean;

src/vuedraggable.d.ts → types/vuedraggable.d.ts

@@ -1,3 +1,4 @@
+export default draggableComponent;
 declare const draggableComponent: import("vue").DefineComponent<{
     list: {
         type: ArrayConstructor;
@@ -30,7 +31,7 @@ declare const draggableComponent: import("vue").DefineComponent<{
         required: boolean;
         default: any;
     };
-}, unknown, {
+}, any, {
     error: boolean;
 }, {
     realList(): any;
@@ -54,21 +55,20 @@ declare const draggableComponent: import("vue").DefineComponent<{
     computeFutureIndex(relatedContext: any, evt: any): any;
     onDragMove(evt: any, originalEvent: any): any;
     onDragEnd(): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any[], any, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     move: Function;
-    tag: string;
     clone: Function;
+    componentData: Record<string, any>;
+    tag: string;
     list: unknown[];
     modelValue: unknown[];
-    componentData: Record<string, any>;
 } & {
     itemKey?: string | Function;
 }>, {
     move: Function;
-    tag: string;
     clone: Function;
+    componentData: Record<string, any>;
+    tag: string;
     list: unknown[];
     modelValue: unknown[];
-    componentData: Record<string, any>;
 }>;
-export default draggableComponent;