refactor(): deprecate web component controllers (#19109)

Author: manucorporat

angular/src/providers/menu-controller.ts

@@ -1,24 +1,18 @@
-import { DOCUMENT } from '@angular/common';
-import { Inject, Injectable } from '@angular/core';
+import { Injectable } from '@angular/core';
+import { menuController } from '@ionic/core';
 
-import { proxyMethod } from '../util/util';
-
-const CTRL = 'ion-menu-controller';
 @Injectable({
   providedIn: 'root',
 })
 export class MenuController {
 
-  constructor(@Inject(DOCUMENT) private doc: any) {
-  }
-
   /**
    * Programmatically open the Menu.
    * @param [menuId]  Optionally get the menu by its id, or side.
    * @return returns a promise when the menu is fully opened
    */
-  open(menuId?: string): Promise<boolean> {
-    return proxyMethod(CTRL, this.doc, 'open', menuId);
+  open(menuId?: string) {
+    return menuController.open(menuId);
   }
 
   /**
@@ -28,8 +22,8 @@ export class MenuController {
    * @param [menuId]  Optionally get the menu by its id, or side.
    * @return returns a promise when the menu is fully closed
    */
-  close(menuId?: string): Promise<boolean> {
-    return proxyMethod(CTRL, this.doc, 'close', menuId);
+  close(menuId?: string) {
+    return menuController.close(menuId);
   }
 
   /**
@@ -38,8 +32,8 @@ export class MenuController {
    * @param [menuId]  Optionally get the menu by its id, or side.
    * @return returns a promise when the menu has been toggled
    */
-  toggle(menuId?: string): Promise<boolean> {
-    return proxyMethod(CTRL, this.doc, 'toggle', menuId);
+  toggle(menuId?: string) {
+    return menuController.toggle(menuId);
   }
 
   /**
@@ -50,8 +44,8 @@ export class MenuController {
    * @param [menuId]  Optionally get the menu by its id, or side.
    * @return Returns the instance of the menu, which is useful for chaining.
    */
-  enable(shouldEnable: boolean, menuId?: string): Promise<HTMLIonMenuElement> {
-    return proxyMethod(CTRL, this.doc, 'enable', shouldEnable, menuId);
+  enable(shouldEnable: boolean, menuId?: string) {
+    return menuController.enable(shouldEnable, menuId);
   }
 
   /**
@@ -61,7 +55,7 @@ export class MenuController {
    * @return Returns the instance of the menu, which is useful for chaining.
    * @deprecated Use swipeGesture() instead
    */
-  swipeEnable(shouldEnable: boolean, menuId?: string): Promise<HTMLIonMenuElement> {
+  swipeEnable(shouldEnable: boolean, menuId?: string) {
     console.warn('MenuController.swipeEnable is deprecated. Use MenuController.swipeGesture() instead');
     return this.swipeGesture(shouldEnable, menuId);
   }
@@ -72,25 +66,25 @@ export class MenuController {
    * @param [menuId]  Optionally get the menu by its id, or side.
    * @return Returns the instance of the menu, which is useful for chaining.
    */
-  swipeGesture(shouldEnable: boolean, menuId?: string): Promise<HTMLIonMenuElement> {
-    return proxyMethod(CTRL, this.doc, 'swipeGesture', shouldEnable, menuId);
+  swipeGesture(shouldEnable: boolean, menuId?: string) {
+    return menuController.swipeGesture(shouldEnable, menuId);
   }
 
   /**
    * @param [menuId] Optionally get the menu by its id, or side.
    * @return Returns true if the specified menu is currently open, otherwise false.
    * If the menuId is not specified, it returns true if ANY menu is currenly open.
    */
-  isOpen(menuId?: string): Promise<boolean> {
-    return proxyMethod(CTRL, this.doc, 'isOpen', menuId);
+  isOpen(menuId?: string) {
+    return menuController.isOpen(menuId);
   }
 
   /**
    * @param [menuId]  Optionally get the menu by its id, or side.
    * @return Returns true if the menu is currently enabled, otherwise false.
    */
-  isEnabled(menuId?: string): Promise<boolean> {
-    return proxyMethod(CTRL, this.doc, 'isEnabled', menuId);
+  isEnabled(menuId?: string) {
+    return menuController.isEnabled(menuId);
   }
 
   /**
@@ -102,21 +96,21 @@ export class MenuController {
    * @param [menuId]  Optionally get the menu by its id, or side.
    * @return Returns the instance of the menu if found, otherwise `null`.
    */
-  get(menuId?: string): Promise<HTMLIonMenuElement> {
-    return proxyMethod(CTRL, this.doc, 'get', menuId);
+  get(menuId?: string) {
+    return menuController.get(menuId);
   }
 
   /**
    * @return Returns the instance of the menu already opened, otherwise `null`.
    */
-  getOpen(): Promise<HTMLIonMenuElement> {
-    return proxyMethod(CTRL, this.doc, 'getOpen');
+  getOpen() {
+    return menuController.getOpen();
   }
 
   /**
    * @return Returns an array of all menu instances.
    */
-  getMenus(): Promise<HTMLIonMenuElement[]> {
-    return proxyMethod(CTRL, this.doc, 'getMenus');
+  getMenus() {
+    return menuController.getMenus();
   }
 }

angular/src/util/util.ts

@@ -1,4 +1,3 @@
-import { HTMLStencilElement } from '../types/interfaces';
 
 declare const __zone_symbol__requestAnimationFrame: any;
 declare const requestAnimationFrame: any;
@@ -12,18 +11,3 @@ export const raf = (h: any) => {
   }
   return setTimeout(h);
 };
-
-export const proxyMethod = (ctrlName: string, doc: Document, methodName: string, ...args: any[]) => {
-  const controller = ensureElementInBody(ctrlName, doc);
-  return controller.componentOnReady()
-    .then(() => (controller as any)[methodName].apply(controller, args));
-};
-
-export const ensureElementInBody = (elementName: string, doc: Document) => {
-  let element = doc.querySelector(elementName);
-  if (!element) {
-    element = doc.createElement(elementName);
-    doc.body.appendChild(element);
-  }
-  return element as HTMLStencilElement;
-};

core/package.json

@@ -34,7 +34,7 @@
     "tslib": "^1.10.0"
   },
   "devDependencies": {
-    "@stencil/core": "1.3.1",
+    "@stencil/core": "1.3.2",
     "@stencil/sass": "1.0.1",
     "@types/jest": "24.0.17",
     "@types/node": "12.7.1",

core/src/components.d.ts

@@ -31,7 +31,6 @@ import {
   ItemReorderEventDetail,
   LoadingOptions,
   MenuChangeEventDetail,
-  MenuControllerI,
   MenuI,
   ModalOptions,
   NavComponent,
@@ -1378,7 +1377,6 @@ export namespace Components {
     'type': 'submit' | 'reset' | 'button';
   }
   interface IonMenuController {
-    '_getInstance': () => Promise<MenuControllerI>;
     /**
     * Close the menu. If a menu is specified, it will close that menu. If no menu is specified, then it will close any menu that is open. If it does not find any open menus, it will return `false`.
     * @param menu The menuId or side of the menu to close.

core/src/components/action-sheet-controller/action-sheet-controller.tsx

@@ -1,4 +1,4 @@
-import { Component, ComponentInterface, Method } from '@stencil/core';
+import { Build, Component, ComponentInterface, Method } from '@stencil/core';
 
 import { ActionSheetOptions, OverlayController } from '../../interface';
 import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays';
@@ -8,6 +8,14 @@ import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays'
 })
 export class ActionSheetController implements ComponentInterface, OverlayController {
 
+  constructor() {
+    if (Build.isDev) {
+      console.warn(`[DEPRECATED][ion-action-sheet-controller] Use the actionSheetController export from @ionic/core:
+  import { actionSheetController } from '@ionic/core';
+  const actionSheet = await actionSheetController.create({...});`);
+    }
+  }
+
   /**
    * Create an action sheet overlay with action sheet options.
    *

core/src/components/action-sheet/action-sheet.tsx

@@ -2,7 +2,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Meth
 
 import { getIonMode } from '../../global/ionic-global';
 import { ActionSheetButton, AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface';
-import { BACKDROP, dismiss, eventMethod, isCancel, present, safeCall } from '../../utils/overlays';
+import { BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall } from '../../utils/overlays';
 import { getClassMap } from '../../utils/theme';
 
 import { iosEnterAnimation } from './animations/ios.enter';
@@ -27,7 +27,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
   animation?: any;
   mode = getIonMode(this);
 
-  @Element() el!: HTMLElement;
+  @Element() el!: HTMLIonActionSheetElement;
 
   /** @internal */
   @Prop() overlayIndex!: number;
@@ -113,6 +113,10 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
     return present(this, 'actionSheetEnter', iosEnterAnimation, mdEnterAnimation);
   }
 
+  constructor() {
+    prepareOverlay(this.el);
+  }
+
   /**
    * Dismiss the action sheet overlay after it has been presented.
    *

core/src/components/action-sheet/readme.md

@@ -79,45 +79,45 @@ export class ActionSheetExample {
 
 ```javascript
 async function presentActionSheet() {
-  const actionSheetController = document.querySelector('ion-action-sheet-controller');
-
-  const actionSheet = await actionSheetController.create({
-    header: "Albums",
-    buttons: [{
-      text: 'Delete',
-      role: 'destructive',
-      icon: 'trash',
-      handler: () => {
-        console.log('Delete clicked');
-      }
-    }, {
-      text: 'Share',
-      icon: 'share',
-      handler: () => {
-        console.log('Share clicked');
-      }
-    }, {
-      text: 'Play (open modal)',
-      icon: 'arrow-dropright-circle',
-      handler: () => {
-        console.log('Play clicked');
-      }
-    }, {
-      text: 'Favorite',
-      icon: 'heart',
-      handler: () => {
-        console.log('Favorite clicked');
-      }
-    }, {
-      text: 'Cancel',
-      icon: 'close',
-      role: 'cancel',
-      handler: () => {
-        console.log('Cancel clicked');
-      }
-    }]
-  });
-  await actionSheet.present();
+
+  const actionSheet = document.createElement('ion-action-sheet');
+
+  actionSheet.header = "Albums";
+  actionSheet.buttons = [{
+    text: 'Delete',
+    role: 'destructive',
+    icon: 'trash',
+    handler: () => {
+      console.log('Delete clicked');
+    }
+  }, {
+    text: 'Share',
+    icon: 'share',
+    handler: () => {
+      console.log('Share clicked');
+    }
+  }, {
+    text: 'Play (open modal)',
+    icon: 'arrow-dropright-circle',
+    handler: () => {
+      console.log('Play clicked');
+    }
+  }, {
+    text: 'Favorite',
+    icon: 'heart',
+    handler: () => {
+      console.log('Favorite clicked');
+    }
+  }, {
+    text: 'Cancel',
+    icon: 'close',
+    role: 'cancel',
+    handler: () => {
+      console.log('Cancel clicked');
+    }
+  }];
+  document.body.appendChild(actionSheet);
+  return actionSheet.present();
 }
 ```