lint(eslint): migrate to eslint and prettier (#25046)

core/src/components/infinite-scroll/infinite-scroll.tsx

@@ -1,14 +1,14 @@
-import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, State, Watch, h, readTask, writeTask } from '@stencil/core';
+import type { ComponentInterface, EventEmitter } from '@stencil/core';
+import { Component, Element, Event, Host, Method, Prop, State, Watch, h, readTask, writeTask } from '@stencil/core';
 
 import { getIonMode } from '../../global/ionic-global';
 import { componentOnReady } from '../../utils/helpers';
 
 @Component({
   tag: 'ion-infinite-scroll',
-  styleUrl: 'infinite-scroll.scss'
+  styleUrl: 'infinite-scroll.scss',
 })
 export class InfiniteScroll implements ComponentInterface {
-
   private thrPx = 0;
   private thrPc = 0;
   private scrollEl?: HTMLElement;
@@ -34,8 +34,7 @@ export class InfiniteScroll implements ComponentInterface {
     const val = this.threshold;
     if (val.lastIndexOf('%') > -1) {
       this.thrPx = 0;
-      this.thrPc = (parseFloat(val) / 100);
-
+      this.thrPc = parseFloat(val) / 100;
     } else {
       this.thrPx = parseFloat(val);
       this.thrPc = 0;
@@ -83,7 +82,7 @@ export class InfiniteScroll implements ComponentInterface {
       console.error('<ion-infinite-scroll> must be used inside an <ion-content>');
       return;
     }
-    await new Promise(resolve => componentOnReady(contentEl, resolve));
+    await new Promise((resolve) => componentOnReady(contentEl, resolve));
     this.scrollEl = await contentEl.getScrollElement();
     this.thresholdChanged();
     this.disabledChanged();
@@ -115,11 +114,12 @@ export class InfiniteScroll implements ComponentInterface {
     const scrollTop = scrollEl.scrollTop;
     const scrollHeight = scrollEl.scrollHeight;
     const height = scrollEl.offsetHeight;
-    const threshold = this.thrPc !== 0 ? (height * this.thrPc) : this.thrPx;
+    const threshold = this.thrPc !== 0 ? height * this.thrPc : this.thrPx;
 
-    const distanceFromInfinite = (this.position === 'bottom')
-      ? scrollHeight - infiniteHeight - scrollTop - threshold - height
-      : scrollTop - infiniteHeight - threshold;
+    const distanceFromInfinite =
+      this.position === 'bottom'
+        ? scrollHeight - infiniteHeight - scrollTop - threshold - height
+        : scrollTop - infiniteHeight - threshold;
 
     if (distanceFromInfinite < 0) {
       if (!this.didFire) {
@@ -133,7 +133,7 @@ export class InfiniteScroll implements ComponentInterface {
     }
 
     return 4;
-  }
+  };
 
   /**
    * Call `complete()` within the `ionInfinite` output event handler when
@@ -199,12 +199,7 @@ export class InfiniteScroll implements ComponentInterface {
   }
 
   private canStart(): boolean {
-    return (
-      !this.disabled &&
-      !this.isBusy &&
-      !!this.scrollEl &&
-      !this.isLoading
-    );
+    return !this.disabled && !this.isBusy && !!this.scrollEl && !this.isLoading;
   }
 
   private enableScrollEvents(shouldListen: boolean) {
@@ -225,7 +220,7 @@ export class InfiniteScroll implements ComponentInterface {
         class={{
           [mode]: true,
           'infinite-scroll-loading': this.isLoading,
-          'infinite-scroll-enabled': !disabled
+          'infinite-scroll-enabled': !disabled,
         }}
       />
     );

core/src/components/infinite-scroll/test/basic/e2e.ts

@@ -1,4 +1,5 @@
-import { E2EPage, newE2EPage } from '@stencil/core/testing';
+import { newE2EPage } from '@stencil/core/testing';
+import type { E2EPage } from '@stencil/core/testing';
 
 /**
  * Scrolls an `ion-content` element to the bottom, triggering the `ionInfinite` event.
@@ -11,13 +12,12 @@ const scrollIonContentPage = async (page: E2EPage) => {
 
   const ev = await page.spyOnEvent('ionInfiniteComplete', 'document');
   await ev.next();
-}
+};
 
 describe('infinite-scroll: basic', () => {
-
   it('should match existing visual screenshots', async () => {
     const page = await newE2EPage({
-      url: '/src/components/infinite-scroll/test/basic?ionic:_testing=true'
+      url: '/src/components/infinite-scroll/test/basic?ionic:_testing=true',
     });
 
     const compare = await page.compareScreenshot();
@@ -25,10 +25,9 @@ describe('infinite-scroll: basic', () => {
   });
 
   describe('when enabled', () => {
-
     it('should load more items when scrolled to the bottom', async () => {
       const page = await newE2EPage({
-        url: '/src/components/infinite-scroll/test/basic?ionic:_testing=true'
+        url: '/src/components/infinite-scroll/test/basic?ionic:_testing=true',
       });
 
       const initialItems = await page.findAll('ion-item');
@@ -41,7 +40,5 @@ describe('infinite-scroll: basic', () => {
 
       expect(updatedItems.length).toBe(60);
     });
-
   });
-
 });

core/src/components/infinite-scroll/test/basic/index.html

@@ -1,79 +1,72 @@
 <!DOCTYPE html>
 <html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Infinite Scroll - Basic</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
 
-<head>
-  <meta charset="UTF-8">
-  <title>Infinite Scroll - Basic</title>
-  <meta name="viewport"
-    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
-  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
-  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
-  <script src="../../../../../scripts/testing/scripts.js"></script>
-  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-</head>
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Infinite Scroll - Basic</ion-title>
+        </ion-toolbar>
+      </ion-header>
 
-<body>
-  <ion-app>
+      <ion-content class="ion-padding" id="content">
+        <ion-button onclick="toggleInfiniteScroll()" expand="block"> Toggle InfiniteScroll </ion-button>
 
+        <ion-list id="list"></ion-list>
 
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Infinite Scroll - Basic</ion-title>
-      </ion-toolbar>
-    </ion-header>
+        <ion-infinite-scroll threshold="100px" id="infinite-scroll">
+          <ion-infinite-scroll-content loading-spinner="crescent" loading-text="Loading more data...">
+          </ion-infinite-scroll-content>
+        </ion-infinite-scroll>
+      </ion-content>
+    </ion-app>
 
-    <ion-content class="ion-padding" id="content">
+    <script>
+      const list = document.getElementById('list');
+      const infiniteScroll = document.getElementById('infinite-scroll');
 
-      <ion-button onclick="toggleInfiniteScroll()" expand="block">
-        Toggle InfiniteScroll
-      </ion-button>
-
-      <ion-list id="list"></ion-list>
-
-      <ion-infinite-scroll threshold="100px" id="infinite-scroll">
-        <ion-infinite-scroll-content loading-spinner="crescent" loading-text="Loading more data...">
-        </ion-infinite-scroll-content>
-      </ion-infinite-scroll>
-    </ion-content>
-
-  </ion-app>
-
-  <script>
-    const list = document.getElementById('list');
-    const infiniteScroll = document.getElementById('infinite-scroll');
-
-    function toggleInfiniteScroll() {
-      infiniteScroll.disabled = !infiniteScroll.disabled;
-    }
-
-    infiniteScroll.addEventListener('ionInfinite', async function () {
-      await wait(500);
-      infiniteScroll.complete();
-      appendItems();
-      // Custom event consumed in the e2e tests
-      document.dispatchEvent(new CustomEvent('ionInfiniteComplete'));
-    });
-
-    function appendItems() {
-      for (var i = 0; i < 30; i++) {
-        const el = document.createElement('ion-item');
-        el.textContent = `${1 + i}`;
-        list.appendChild(el);
+      function toggleInfiniteScroll() {
+        infiniteScroll.disabled = !infiniteScroll.disabled;
       }
-    }
 
-    function wait(time) {
-      return new Promise(resolve => {
-        setTimeout(() => {
-          resolve();
-        }, time);
+      infiniteScroll.addEventListener('ionInfinite', async function () {
+        await wait(500);
+        infiniteScroll.complete();
+        appendItems();
+        // Custom event consumed in the e2e tests
+        document.dispatchEvent(new CustomEvent('ionInfiniteComplete'));
       });
-    }
 
-    appendItems();
+      function appendItems() {
+        for (var i = 0; i < 30; i++) {
+          const el = document.createElement('ion-item');
+          el.textContent = `${1 + i}`;
+          list.appendChild(el);
+        }
+      }
 
-  </script>
-</body>
+      function wait(time) {
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            resolve();
+          }, time);
+        });
+      }
 
+      appendItems();
+    </script>
+  </body>
 </html>

core/src/components/infinite-scroll/test/standalone/e2e.ts

@@ -2,7 +2,7 @@ import { newE2EPage } from '@stencil/core/testing';
 
 test('infinite-scroll: standalone', async () => {
   const page = await newE2EPage({
-    url: '/src/components/infinite-scroll/test/standalone?ionic:_testing=true'
+    url: '/src/components/infinite-scroll/test/standalone?ionic:_testing=true',
   });
 
   const compare = await page.compareScreenshot();

core/src/components/infinite-scroll/test/standalone/index.html

@@ -1,69 +1,68 @@
 <!DOCTYPE html>
 <html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Infinite Scroll - Standalone</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/core.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
 
-<head>
-  <meta charset="UTF-8">
-  <title>Infinite Scroll - Standalone</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
-  <link href="../../../../../css/core.css" rel="stylesheet">
-  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
-  <script src="../../../../../scripts/testing/scripts.js"></script>
-  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
+  <body>
+    <ion-content id="content">
+      <ion-list id="list"> </ion-list>
 
-<body>
+      <ion-infinite-scroll threshold="100px" id="infinite-scroll">
+        <ion-infinite-scroll-content loading-spinner="bubbles" loading-text="Loading more data...">
+        </ion-infinite-scroll-content>
+      </ion-infinite-scroll>
+    </ion-content>
 
-  <ion-content id="content">
-    <ion-list id="list"> </ion-list>
-
-    <ion-infinite-scroll threshold="100px" id="infinite-scroll">
-      <ion-infinite-scroll-content
-        loading-spinner="bubbles"
-        loading-text="Loading more data...">
-      </ion-infinite-scroll-content>
-    </ion-infinite-scroll>
-  </ion-content>
-
-  <script>
-    let items = [];
-    for (var i = 0; i < 30; i++) {
-      items.push( i+1 );
-    }
-    const list = document.getElementById('list');
-    const infiniteScroll = document.getElementById('infinite-scroll');
-
-    infiniteScroll.addEventListener('ionInfinite', async function() {
-      console.log('Loading data...');
-      const data = await getAsyncData();
-      items = items.concat(data);
-      infiniteScroll.complete();
-      render();
-      console.log('Done');
-    });
-
-    function render() {
-      let html = '';
-      for(let item of items) {
-        html += `<ion-item>${item}</ion-item>`;
+    <script>
+      let items = [];
+      for (var i = 0; i < 30; i++) {
+        items.push(i + 1);
       }
-      list.innerHTML = html;
-    }
+      const list = document.getElementById('list');
+      const infiniteScroll = document.getElementById('infinite-scroll');
 
-    function getAsyncData() {
-      // async return mock data
-      return new Promise(resolve => {
-        setTimeout(() => {
-          let data = [];
-          for (var i = 0; i < 30; i++) {
-            data.push(i);
-          }
-
-          resolve(data);
-        }, 500);
+      infiniteScroll.addEventListener('ionInfinite', async function () {
+        console.log('Loading data...');
+        const data = await getAsyncData();
+        items = items.concat(data);
+        infiniteScroll.complete();
+        render();
+        console.log('Done');
       });
-    }
-    render();
 
-  </script>
-</body>
+      function render() {
+        let html = '';
+        for (let item of items) {
+          html += `<ion-item>${item}</ion-item>`;
+        }
+        list.innerHTML = html;
+      }
+
+      function getAsyncData() {
+        // async return mock data
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            let data = [];
+            for (var i = 0; i < 30; i++) {
+              data.push(i);
+            }
+
+            resolve(data);
+          }, 500);
+        });
+      }
+      render();
+    </script>
+  </body>
 </html>

core/src/components/infinite-scroll/test/top/e2e.ts

@@ -2,7 +2,7 @@ import { newE2EPage } from '@stencil/core/testing';
 
 test('infinite-scroll: basic', async () => {
   const page = await newE2EPage({
-    url: '/src/components/infinite-scroll/test/basic?ionic:_testing=true'
+    url: '/src/components/infinite-scroll/test/basic?ionic:_testing=true',
   });
 
   const compare = await page.compareScreenshot();

core/src/components/infinite-scroll/test/top/index.html

@@ -1,79 +1,73 @@
 <!DOCTYPE html>
 <html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Infinite Scroll - Basic</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
 
-<head>
-  <meta charset="UTF-8">
-  <title>Infinite Scroll - Basic</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
-  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
-  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
-  <script src="../../../../../scripts/testing/scripts.js"></script>
-  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Infinite Scroll - Basic</ion-title>
+        </ion-toolbar>
+      </ion-header>
 
-<body>
-  <ion-app>
+      <ion-content class="ion-padding" id="content">
+        <ion-infinite-scroll threshold="100px" id="infinite-scroll" position="top">
+          <ion-infinite-scroll-content loading-spinner="bubbles" loading-text="Loading more data...">
+          </ion-infinite-scroll-content>
+        </ion-infinite-scroll>
 
+        <ion-button onclick="toggleInfiniteScroll()" expand="block"> Toggle InfiniteScroll </ion-button>
 
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Infinite Scroll - Basic</ion-title>
-      </ion-toolbar>
-    </ion-header>
+        <ion-list id="list"></ion-list>
+      </ion-content>
+    </ion-app>
 
-    <ion-content class="ion-padding" id="content">
+    <script>
+      const list = document.getElementById('list');
+      const infiniteScroll = document.getElementById('infinite-scroll');
 
-      <ion-infinite-scroll threshold="100px" id="infinite-scroll" position="top">
-        <ion-infinite-scroll-content loading-spinner="bubbles" loading-text="Loading more data...">
-        </ion-infinite-scroll-content>
-      </ion-infinite-scroll>
-
-      <ion-button onclick="toggleInfiniteScroll()" expand="block">
-        Toggle InfiniteScroll
-      </ion-button>
-
-      <ion-list id="list"></ion-list>
-
-    </ion-content>
-
-  </ion-app>
-
-  <script>
-    const list = document.getElementById('list');
-    const infiniteScroll = document.getElementById('infinite-scroll');
-
-    function toggleInfiniteScroll() {
-      infiniteScroll.disabled = !infiniteScroll.disabled;
-    }
-
-    infiniteScroll.addEventListener('ionInfinite', async function () {
-      console.log('Loading data...');
-      await wait(500);
-      infiniteScroll.complete();
-      appendItems();
-
-      console.log('Done');
-    });
-
-    function appendItems() {
-      for (var i = 0; i < 30; i++) {
-        const el = document.createElement('ion-item');
-        el.textContent = `${1 + i}`;
-        list.prepend(el);
+      function toggleInfiniteScroll() {
+        infiniteScroll.disabled = !infiniteScroll.disabled;
       }
-    }
 
-    function wait(time) {
-      return new Promise(resolve => {
-        setTimeout(() => {
-          resolve();
-        }, time);
+      infiniteScroll.addEventListener('ionInfinite', async function () {
+        console.log('Loading data...');
+        await wait(500);
+        infiniteScroll.complete();
+        appendItems();
+
+        console.log('Done');
       });
-    }
 
-    appendItems();
+      function appendItems() {
+        for (var i = 0; i < 30; i++) {
+          const el = document.createElement('ion-item');
+          el.textContent = `${1 + i}`;
+          list.prepend(el);
+        }
+      }
 
-  </script>
-</body>
+      function wait(time) {
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            resolve();
+          }, time);
+        });
+      }
 
+      appendItems();
+    </script>
+  </body>
 </html>