fix(menu-toggle): use ESM menuController (#19225)

core/src/components/menu-button/menu-button.tsx

@@ -4,8 +4,9 @@ import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
 import { Color } from '../../interface';
 import { ButtonInterface } from '../../utils/element-interface';
+import { menuController } from '../../utils/menu-controller';
 import { createColorClasses } from '../../utils/theme';
-import { toggleMenu, updateVisibility } from '../menu-toggle/menu-toggle-util';
+import { updateVisibility } from '../menu-toggle/menu-toggle-util';
 
 @Component({
   tag: 'ion-menu-button',
@@ -46,22 +47,18 @@ export class MenuButton implements ComponentInterface, ButtonInterface {
    */
   @Prop() type: 'submit' | 'reset' | 'button' = 'button';
 
-  async componentDidLoad() {
+  componentDidLoad() {
-    await this.setVisibility();
+    this.visibilityChanged();
   }
 
   @Listen('ionMenuChange', { target: 'body' })
   @Listen('ionSplitPaneVisible', { target: 'body' })
   async visibilityChanged() {
-    await this.setVisibility();
-  }
-
-  private setVisibility = async () => {
     this.visible = await updateVisibility(this.menu);
   }
 
   private onClick = async () => {
-    await toggleMenu(this.menu);
+    return menuController.toggle(this.menu);
   }
 
   render() {
@@ -93,7 +90,7 @@ export class MenuButton implements ComponentInterface, ButtonInterface {
       >
         <button
           {...attrs}
-          disabled={this.disabled}
+          disabled={disabled}
           class="button-native"
         >
           <slot>

core/src/components/menu-toggle/menu-toggle-util.ts

@@ -1,32 +1,7 @@
-
+import { menuController } from '../../utils/menu-controller';
-// Get the menu controller element
-export const getMenuController = (doc: Document): Promise<HTMLIonMenuControllerElement | undefined> => {
-  const menuControllerElement = doc.querySelector('ion-menu-controller');
-  if (!menuControllerElement) {
-    return Promise.resolve(undefined);
-  }
-  return menuControllerElement.componentOnReady();
-};
-
-// Given a menu, toggle it
-export const toggleMenu = async (menu: string | undefined) => {
-  const menuCtrl = await getMenuController(document);
-  if (menuCtrl) {
-    const menuEl = await menuCtrl.get(menu);
-    if (menuEl) {
-      menuCtrl.toggle(menu);
-    }
-  }
-};
 
 // Given a menu, return whether or not the menu toggle should be visible
 export const updateVisibility = async (menu: string | undefined) => {
-  const menuCtrl = await getMenuController(document);
+  const menuEl = await menuController.get(menu);
-  if (menuCtrl) {
+  return !!(menuEl && await menuEl.isActive());
-    const menuEl = await menuCtrl.get(menu);
-    if (menuEl && await menuEl.isActive()) {
-      return true;
-    }
-  }
-  return false;
 };

core/src/components/menu-toggle/menu-toggle.tsx

@@ -1,8 +1,9 @@
 import { Component, ComponentInterface, Host, Listen, Prop, State, h } from '@stencil/core';
 
 import { getIonMode } from '../../global/ionic-global';
+import { menuController } from '../../utils/menu-controller';
 
-import { toggleMenu, updateVisibility } from './menu-toggle-util';
+import { updateVisibility } from './menu-toggle-util';
 
 @Component({
   tag: 'ion-menu-toggle',
@@ -31,22 +32,18 @@ export class MenuToggle implements ComponentInterface {
    */
   @Prop() autoHide = true;
 
-  async componentDidLoad() {
+  connectedCallback() {
-    await this.setVisibility();
+    this.visibilityChanged();
   }
 
   @Listen('ionMenuChange', { target: 'body' })
   @Listen('ionSplitPaneVisible', { target: 'body' })
   async visibilityChanged() {
-    await this.setVisibility();
-  }
-
-  private setVisibility = async () => {
     this.visible = await updateVisibility(this.menu);
   }
 
-  private onClick = async () => {
+  private onClick = () => {
-    await toggleMenu(this.menu);
+    return menuController.toggle(this.menu);
   }
 
   render() {

core/src/components/menu-toggle/test/basic/index.html

@@ -91,21 +91,18 @@
 
   <script>
 
-    async function openDefault() {
+    function openDefault() {
       const menuButton = document.querySelector('ion-menu-toggle');
-      await menuButton.componentOnReady();
       menuButton.menu = null;
     }
 
-    async function openStart() {
+    function openStart() {
       const menuButton = document.querySelector('ion-menu-toggle');
-      await menuButton.componentOnReady();
       menuButton.menu = 'start';
     }
 
-    async function openEnd() {
+    function openEnd() {
       const menuButton = document.querySelector('ion-menu-toggle');
-      await menuButton.componentOnReady();
       menuButton.menu = 'end';
     }
   </script>

core/src/components/menu/test/basic/index.html

@@ -93,21 +93,21 @@
     }
   </style>
 
-  <script type="module">
+  <script>
     const menuCtrl = document.querySelector('ion-menu-controller');
 
-    function openFirst() {
+    async function openFirst() {
-      menuCtrl.enable(true, 'first');
+      await menuCtrl.enable(true, 'first');
-      menuCtrl.open('first');
+      await menuCtrl.open('first');
     }
 
-    function openEnd() {
+    async  function openEnd() {
-      menuCtrl.open('end');
+      awaitmenuCtrl.open('end');
     }
 
-    function openCustom() {
+    async function openCustom() {
-      menuCtrl.enable(true, 'custom');
+      await menuCtrl.enable(true, 'custom');
-      menuCtrl.open('custom');
+      await menuCtrl.open('custom');
     }
   </script>
 </body>