[Vue] Tree-shakeable controllers from @ionic/core

vue/package.json

@@ -58,7 +58,7 @@
     "vue-router": "^3.0.1"
   },
   "dependencies": {
-    "@ionic/core": "^4.6.0"
+    "@ionic/core": "^4.10.0"
   },
   "peerDependencies": {
     "vue": "^2.5.17",

vue/src/controllers/index.ts

@@ -1,7 +1,13 @@
-export { ActionSheetController } from './action-sheet-controller';
-export { AlertController } from './alert-controller';
-export { LoadingController } from './loading-controller';
-export { MenuController } from './menu-controller';
-export { ModalController } from './modal-controller';
-export { PopoverController } from './popover-controller';
-export { ToastController } from './toast-controller';
+export {
+  actionSheetController,
+  alertController,
+  loadingController,
+  menuController,
+  toastController,
+  pickerController,
+} from '@ionic/core';
+import { modalController as _modalController } from './modal-controller';
+import { popoverController as _popoverController } from './popover-controller';
+
+export const modalController = _modalController();
+export const popoverController = _popoverController();

vue/src/controllers/modal-controller.ts

@@ -1,20 +1,16 @@
-import { ModalOptions } from '@ionic/core';
-import { OverlayBaseController } from '../util';
+import Vue from 'vue';
+import { ModalOptions, modalController as _modalController } from '@ionic/core';
 import { VueDelegate } from './vue-delegate';
 
-export const CTRL = 'ion-modal-controller';
-export class ModalController extends OverlayBaseController<ModalOptions, HTMLIonModalElement> {
-
-  constructor(
-    private delegate: VueDelegate
-  ) {
-    super(CTRL);
-  }
-
-  create(opts: ModalOptions): Promise<HTMLIonModalElement> {
-    return super.create({
-      ...opts,
-      delegate: this.delegate
-    });
-  }
-}
+export const modalController = (delegate?: VueDelegate) => {
+  delegate = delegate || new VueDelegate(Vue);
+  return {
+    ..._modalController,
+    create(options: ModalOptions) {
+      return _modalController.create({
+        ...options,
+        delegate,
+      });
+    }
+  };
+};

vue/src/controllers/popover-controller.ts

@@ -1,20 +1,16 @@
-import { PopoverOptions } from '@ionic/core';
-import { OverlayBaseController } from '../util';
+import Vue from 'vue';
+import { PopoverOptions, popoverController as _popoverController } from '@ionic/core';
 import { VueDelegate } from './vue-delegate';
 
-export const CTRL = 'ion-popover-controller';
-export class PopoverController extends OverlayBaseController<PopoverOptions, HTMLIonPopoverElement> {
-
-  constructor(
-    private delegate: VueDelegate
-  ) {
-    super(CTRL);
-  }
-
-  create(opts: PopoverOptions): Promise<HTMLIonPopoverElement> {
-    return super.create({
-      ...opts,
-      delegate: this.delegate
-    });
-  }
-}
+export const popoverController = (delegate?: VueDelegate) => {
+  delegate = delegate || new VueDelegate(Vue);
+  return {
+    ..._popoverController,
+    create(options: PopoverOptions) {
+      return _popoverController.create({
+        ...options,
+        delegate,
+      });
+    }
+  };
+};

vue/src/index.ts

@@ -5,7 +5,9 @@ export default {
   version: '__VERSION__'
 };
 
+// To be removed once Vue.$ionic is fully deprecated
 export { Controllers } from './ionic';
-export { default as IonicVueRouter } from './router';
 
+export { default as IonicVueRouter } from './router';
+export* from './controllers';
 export * from './components/inputs';

vue/src/ionic.ts

@@ -1,28 +1,33 @@
 import { PluginFunction, VueConstructor, default as VueImport } from 'vue';
 import {
-  ActionSheetController,
-  AlertController,
-  LoadingController,
-  MenuController,
-  ModalController,
-  PopoverController,
-  ToastController
+  IonicConfig,
+  OverlayController
+} from '@ionic/core';
+import {
+  actionSheetController,
+  alertController,
+  loadingController,
+  menuController,
+  pickerController,
+  toastController,
 } from './controllers';
-import { IonicConfig } from '@ionic/core';
+import { modalController } from './controllers/modal-controller';
+import { popoverController } from './controllers/popover-controller';
 import { appInitialize } from './app-initialize';
 import { VueDelegate } from './controllers/vue-delegate';
 import IonTabs from './components/navigation/ion-tabs';
 import IonPage from './components/navigation/ion-page';
 import { createInputComponent } from './components/inputs';
 
 export interface Controllers {
-  actionSheetController: ActionSheetController;
-  alertController: AlertController;
-  loadingController: LoadingController;
-  menuController: MenuController;
-  modalController: ModalController;
-  popoverController: PopoverController;
-  toastController: ToastController;
+  actionSheetController: OverlayController;
+  alertController: OverlayController;
+  loadingController: OverlayController;
+  menuController: typeof menuController;
+  modalController: OverlayController;
+  popoverController: OverlayController;
+  toastController: OverlayController;
+  pickerController: OverlayController;
 }
 
 declare module 'vue/types/vue' {
@@ -31,53 +36,58 @@ declare module 'vue/types/vue' {
   }
 }
 
-
 function createApi(vueInstance: VueConstructor) {
   const cache: Partial<Controllers> = {};
   const vueDelegate = new VueDelegate(vueInstance);
 
   return {
     get actionSheetController() {
       if (!cache.actionSheetController) {
-        cache.actionSheetController = new ActionSheetController();
+        cache.actionSheetController = actionSheetController;
       }
       return cache.actionSheetController;
     },
     get alertController() {
       if (!cache.alertController) {
-        cache.alertController = new AlertController();
+        cache.alertController = alertController;
       }
       return cache.alertController;
     },
     get loadingController() {
       if (!cache.loadingController) {
-        cache.loadingController = new LoadingController();
+        cache.loadingController = loadingController;
       }
       return cache.loadingController;
     },
     get menuController() {
       if (!cache.menuController) {
-        cache.menuController = new MenuController();
+        cache.menuController = menuController;
       }
       return cache.menuController;
     },
     get modalController() {
       if (!cache.modalController) {
-        cache.modalController = new ModalController(vueDelegate);
+        cache.modalController = modalController(vueDelegate);
       }
       return cache.modalController;
     },
     get popoverController() {
       if (!cache.popoverController) {
-        cache.popoverController = new PopoverController(vueDelegate);
+        cache.popoverController = popoverController(vueDelegate);
       }
       return cache.popoverController;
     },
     get toastController() {
       if (!cache.toastController) {
-        cache.toastController = new ToastController();
+        cache.toastController = toastController;
       }
       return cache.toastController;
+    },
+    get pickerController() {
+      if (!cache.pickerController) {
+        cache.pickerController = pickerController;
+      }
+      return cache.pickerController;
     }
   };
 }
@@ -113,6 +123,9 @@ export const install: PluginFunction<IonicConfig> = (_Vue, config) => {
   const api = createApi(Vue);
 
   Object.defineProperty(Vue.prototype, '$ionic', {
-    get() { return api; }
+    get() {
+      console.warn('[Ionic] The usage of the global $ionic Vue property is deprecated and will be removed in the future versions.\nInstead import controllers directly with "import { alertController } from \'@ionic/vue\'"');
+      return api;
+    }
   });
 };