Improve typescript typings and config (#44)

Author: michaeltintiuc

.gitignore

@@ -6,6 +6,7 @@ node_modules/
 coverage/
 reports/
 src/**/*.js
+types/**/*.map
 
 # ignore log files
 *.log

build/rollup.config.js

@@ -52,7 +52,7 @@ function baseConfig() {
       '@ionic/core/dist/ionic/svg',
       'ionicons/dist/collection/icon/icon.css',
     ],
-    plugins: [vue(), typescript()],
+    plugins: [vue(), typescript({ useTsconfigDeclarationDir: true })],
   }
 }
 

package.json

@@ -8,12 +8,13 @@
   "license": "MIT",
   "repository": "github:ModusCreateOrg/ionic-vue",
   "main": "dist/ionic-vue.common.js",
-  "typings": "dist/index.d.ts",
+  "typings": "types/index.d.ts",
   "module": "dist/ionic-vue.esm.js",
   "unpkg": "dist/ionic-vue.js",
   "jsdelivr": "dist/ionic-vue.js",
   "files": [
     "src/",
+    "types/",
     "dist/*.js",
     "dist/*.ts"
   ],

src/api-utils.ts

@@ -1,4 +1,4 @@
-import { HTMLStencilElement } from './types/interfaces';
+import { HTMLStencilElement } from './interfaces';
 
 // A proxy method that initializes the controller and calls requested method
 export function proxyMethod(tag: string, method: string, ...opts: any[]): Promise<any> {

src/api.ts

@@ -1,5 +1,5 @@
 import Vue, { PluginFunction } from 'vue';
-import { ApiCache, FrameworkDelegate } from './types/interfaces';
+import { ApiCache, FrameworkDelegate } from './interfaces';
 import Delegate from './framework-delegate';
 import ProxyController from './proxy-controller';
 import ProxyMenuController from './proxy-menu-controller';
@@ -13,37 +13,37 @@ export default class Api {
   static install: PluginFunction<never>;
 
   // Create or return a ActionSheetController instance
-  get actionSheetController(): typeof ProxyController {
+  get actionSheetController(): ProxyController {
     return getOrCreateController('ion-action-sheet-controller');
   }
 
   // Create or return an AlertController instance
-  get alertController(): typeof ProxyController {
+  get alertController(): ProxyController {
     return getOrCreateController('ion-alert-controller');
   }
 
   // Create or return a LoadingController instance
-  get loadingController(): typeof ProxyController {
+  get loadingController(): ProxyController {
     return getOrCreateController('ion-loading-controller');
   }
 
   // Create or return a MenuController instance
-  get menuController(): typeof ProxyMenuController {
+  get menuController(): ProxyMenuController {
     return getOrCreateMenuController('ion-menu-controller');
   }
 
   // Create or return a ModalController instance
-  get modalController(): typeof ProxyDelegateController {
+  get modalController(): ProxyDelegateController {
     return getOrCreateDelegatedController('ion-modal-controller');
   }
 
   // Create or return a PopoverController instance
-  get popoverController(): typeof ProxyDelegateController {
+  get popoverController(): ProxyDelegateController {
     return getOrCreateDelegatedController('ion-popover-controller');
   }
 
   // Create or return a ToastController instance
-  get toastController(): typeof ProxyController {
+  get toastController(): ProxyController {
     return getOrCreateController('ion-toast-controller');
   }
 }
@@ -82,7 +82,7 @@ Api.install = (Vue): void => {
 };
 
 // Get existing Base controller instance or initialize a new one
-function getOrCreateController(tag: string): typeof ProxyController {
+function getOrCreateController(tag: string): ProxyController {
   if (!Api.cache[tag]) {
     Api.cache[tag] = new ProxyController(tag);
   }
@@ -91,7 +91,7 @@ function getOrCreateController(tag: string): typeof ProxyController {
 }
 
 // Get existing Menu controller instance or initialize a new one
-function getOrCreateMenuController(tag: string): typeof ProxyMenuController {
+function getOrCreateMenuController(tag: string): ProxyMenuController {
   if (!Api.cache[tag]) {
     Api.cache[tag] = new ProxyMenuController(tag);
   }
@@ -100,7 +100,7 @@ function getOrCreateMenuController(tag: string): typeof ProxyMenuController {
 }
 
 // Get existing Delegated controller instance or initialize a new one
-function getOrCreateDelegatedController(tag: string): typeof ProxyDelegateController {
+function getOrCreateDelegatedController(tag: string): ProxyDelegateController {
   if (!Api.cache[tag]) {
     Api.cache[tag] = new ProxyDelegateController(tag, _Delegate);
   }

src/components/ion-vue-router-transitionless.vue

@@ -7,7 +7,7 @@
 <script lang="ts">
 import { Prop } from 'vue-property-decorator';
 import Component, { mixins } from 'vue-class-component';
-import CatchIonicGoBack from '../mixins/catch-ionic-go-back.js';
+import CatchIonicGoBack from '../mixins/catch-ionic-go-back';
 
 @Component
 export default class IonVueRouter extends mixins(CatchIonicGoBack) {

src/components/ion-vue-router.vue

@@ -26,9 +26,8 @@
 <script lang="ts">
 import { Prop } from 'vue-property-decorator';
 import Component, { mixins } from 'vue-class-component';
-import CatchIonicGoBack from '../mixins/catch-ionic-go-back.js';
-import { IonRouterOutlet } from '../types/interfaces.js';
-import Router from '../router.js';
+import CatchIonicGoBack from '../mixins/catch-ionic-go-back';
+import { IonRouterOutlet } from '../interfaces';
 
 @Component
 export default class IonVueRouter extends mixins(CatchIonicGoBack) {
@@ -78,7 +77,7 @@ export default class IonVueRouter extends mixins(CatchIonicGoBack) {
         deepWait: true,
         duration: this.getDuration(),
         direction: this.getDirection(),
-        showGoBack: (this.$router as Router).canGoBack(),
+        showGoBack: this.$router.canGoBack(),
       });
     });
   }
@@ -90,7 +89,7 @@ export default class IonVueRouter extends mixins(CatchIonicGoBack) {
 
   // Get the navigation direction from the router
   getDirection() {
-    return (this.$router as Router).direction === 1 ? 'forward' : 'back';
+    return this.$router.direction === 1 ? 'forward' : 'back';
   }
 
   // Set the component to be rendered before we render the new route

src/framework-delegate.ts

@@ -1,5 +1,5 @@
 import { VueConstructor } from 'vue';
-import { FrameworkDelegate, HTMLVueElement, WebpackFunction, EsModule } from './types/interfaces';
+import { EsModule, FrameworkDelegate, HTMLVueElement, WebpackFunction } from './interfaces';
 
 export default class Delegate implements FrameworkDelegate {
   constructor(public vue: VueConstructor) {}

src/types/interfaces.d.ts renamed to src/interfaces.ts

@@ -1,5 +1,5 @@
-import Vue, { VueConstructor } from 'vue';
-import IonicApi from '../api';
+import Vue from 'vue';
+import IonicApi from './api';
 import VueRouter from 'vue-router';
 import { RouterOptions } from 'vue-router/types/router';
 
@@ -9,6 +9,14 @@ declare module 'vue/types/vue' {
   }
 }
 
+declare module 'vue-router/types/router' {
+  interface VueRouter {
+    direction: number;
+    directionOverride: number | null;
+    canGoBack(): boolean;
+  }
+}
+
 export interface HTMLVueElement extends HTMLElement {
   __vue__: Vue;
 }
@@ -64,7 +72,7 @@ export interface ProxyControllerInterface {
 
 export interface ProxyDelegateOptions extends Object {
   [key: string]: any;
-  delegate: FrameworkDelegate;
+  delegate?: FrameworkDelegate;
 }
 
 export interface ProxyMenuControllerInterface {

src/mixins/catch-ionic-go-back.ts

@@ -1,7 +1,7 @@
 import Vue from 'vue';
-import Router from '../router'
+import Router from '../router';
 import Component from 'vue-class-component';
-import { IonBackButton } from '../types/interfaces';
+import { IonBackButton } from '../interfaces';
 
 @Component
 export default class CatchIonicGoBack extends Vue {
@@ -33,4 +33,4 @@ export default class CatchIonicGoBack extends Vue {
       $router.push(defaultHref);
     }
   }
-};
+}

src/proxy-controller.ts

@@ -1,5 +1,5 @@
 import * as apiUtils from './api-utils';
-import { ProxyControllerInterface } from './types/interfaces';
+import { ProxyControllerInterface } from './interfaces';
 
 // A proxy class that allows early access to controller methods
 export default class ProxyController implements ProxyControllerInterface {

src/proxy-delegate-controller.ts

@@ -1,5 +1,5 @@
 import ProxyController from './proxy-controller';
-import { FrameworkDelegate, ProxyDelegateOptions } from './types/interfaces';
+import { FrameworkDelegate, ProxyDelegateOptions } from './interfaces';
 
 // A proxy class that allows early access to controller methods
 export default class ProxyDelegateController extends ProxyController {

src/proxy-menu-controller.ts

@@ -1,5 +1,5 @@
 import * as apiUtils from './api-utils';
-import { ProxyMenuControllerInterface } from './types/interfaces';
+import { ProxyMenuControllerInterface } from './interfaces';
 
 // A proxy class that allows early access to controller methods
 export default class ProxyMenuController implements ProxyMenuControllerInterface {

src/router.ts

@@ -1,6 +1,6 @@
 import VueRouter, { Route } from 'vue-router';
 import { PluginFunction } from 'vue';
-import { RouterArgs, VueWindow } from './types/interfaces';
+import { RouterArgs, VueWindow } from './interfaces';
 import IonVueRouter from './components/ion-vue-router.vue';
 import IonVueRouterTransitionless from './components/ion-vue-router-transitionless.vue';
 

tsconfig.json

@@ -5,6 +5,8 @@
     "allowSyntheticDefaultImports": true,
     "allowUnreachableCode": false,
     "declaration": true,
+    "declarationMap": true,
+    "declarationDir": "types",
     "experimentalDecorators": true,
     "forceConsistentCasingInFileNames": true,
     "jsx": "react",
@@ -26,8 +28,10 @@
     "strictPropertyInitialization": false,
     "target": "es5"
   },
-  "files": [
-    "src/index.ts",
-    "src/sfc.d.ts"
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
   ]
 }

types/api-utils.d.ts

@@ -0,0 +1,4 @@
+import { HTMLStencilElement } from './interfaces';
+export declare function proxyMethod(tag: string, method: string, ...opts: any[]): Promise<any>;
+export declare function initController(tag: string): Promise<HTMLStencilElement>;
+//# sourceMappingURL=api-utils.d.ts.map

types/api.d.ts

@@ -0,0 +1,18 @@
+import { PluginFunction } from 'vue';
+import { ApiCache } from './interfaces';
+import ProxyController from './proxy-controller';
+import ProxyMenuController from './proxy-menu-controller';
+import ProxyDelegateController from './proxy-delegate-controller';
+export default class Api {
+    static cache: ApiCache;
+    static installed: boolean;
+    static install: PluginFunction<never>;
+    readonly actionSheetController: ProxyController;
+    readonly alertController: ProxyController;
+    readonly loadingController: ProxyController;
+    readonly menuController: ProxyMenuController;
+    readonly modalController: ProxyDelegateController;
+    readonly popoverController: ProxyDelegateController;
+    readonly toastController: ProxyController;
+}
+//# sourceMappingURL=api.d.ts.map

types/components/ion-vue-router-transitionless.vue.d.ts

@@ -0,0 +1,7 @@
+import CatchIonicGoBack from '../mixins/catch-ionic-go-back';
+declare const IonVueRouter_base: import("vue-class-component/lib/declarations").VueClass<CatchIonicGoBack>;
+export default class IonVueRouter extends IonVueRouter_base {
+    name: string;
+}
+export {};
+//# sourceMappingURL=ion-vue-router-transitionless.vue?rollup-plugin-vue=script.d.ts.map

types/components/ion-vue-router.vue.d.ts

@@ -0,0 +1,25 @@
+import CatchIonicGoBack from '../mixins/catch-ionic-go-back';
+declare const IonVueRouter_base: import("vue-class-component/lib/declarations").VueClass<CatchIonicGoBack>;
+export default class IonVueRouter extends IonVueRouter_base {
+    name: string;
+    bindCSS: boolean;
+    animated: boolean;
+    leavingEl: HTMLElement;
+    enteringEl: HTMLElement;
+    inTransition: boolean;
+    customTransition: boolean;
+    created(): void;
+    transition(enteringEl: HTMLElement, leavingEl: HTMLElement): Promise<boolean> | undefined;
+    getDuration(): 0 | undefined;
+    getDirection(): "forward" | "back";
+    beforeEnter(el: HTMLElement): void;
+    beforeLeave(el: HTMLElement): void;
+    leave(el: HTMLElement, done: (opts?: boolean) => void): void;
+    enter(_el: HTMLElement, done: () => void): void;
+    afterEnter(): void;
+    enterCancelled(): void;
+    afterLeave(): void;
+    leaveCancelled(): void;
+}
+export {};
+//# sourceMappingURL=ion-vue-router.vue?rollup-plugin-vue=script.d.ts.map

types/framework-delegate.d.ts

@@ -0,0 +1,11 @@
+import { VueConstructor } from 'vue';
+import { FrameworkDelegate, HTMLVueElement, WebpackFunction } from './interfaces';
+export default class Delegate implements FrameworkDelegate {
+    vue: VueConstructor;
+    constructor(vue: VueConstructor);
+    attachViewToDom(parentElement: HTMLElement, component: HTMLElement | WebpackFunction | object | VueConstructor, opts?: object, classes?: string[]): Promise<HTMLElement>;
+    removeViewFromDom(_parentElement: HTMLElement, childElement: HTMLVueElement): Promise<void>;
+    vueController(component: WebpackFunction | object | VueConstructor): Promise<VueConstructor>;
+    vueComponent(controller: VueConstructor, opts?: object): import("vue/types/vue").CombinedVueInstance<import("vue/types/vue").Vue, object, object, object, Record<never, any>>;
+}
+//# sourceMappingURL=framework-delegate.d.ts.map

types/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Ionic } from './ionic';
+export { default as IonicAPI } from './api';
+export { default as IonicVueRouter } from './router';
+//# sourceMappingURL=index.d.ts.map