fix(react, vue): remove sideeffects to improve treeshaking (#24313)

angular/src/directives/angular-component-lib/utils.ts

@@ -32,13 +32,30 @@ export const proxyOutputs = (instance: any, el: any, events: string[]) => {
   events.forEach(eventName => instance[eventName] = fromEvent(el, eventName));
 }
 
-export function ProxyCmp(opts: { inputs?: any; methods?: any }) {
-  const decorator = function(cls: any) {
-    if (opts.inputs) {
-      proxyInputs(cls, opts.inputs);
+export const defineCustomElement = (tagName: string, customElement: any) => {
+  if (
+    customElement !== undefined &&
+    typeof customElements !== 'undefined' &&
+    !customElements.get(tagName)
+  ) {
+    customElements.define(tagName, customElement);
+  }
+}
+
+// tslint:disable-next-line: only-arrow-functions
+export function ProxyCmp(opts: { defineCustomElementFn?: () => void, inputs?: any; methods?: any }) {
+  const decorator = function (cls: any) {
+    const { defineCustomElementFn, inputs, methods } = opts;
+
+    if (defineCustomElementFn !== undefined) {
+      defineCustomElementFn();
     }
-    if (opts.methods) {
-      proxyMethods(cls, opts.methods);
+
+    if (inputs) {
+      proxyInputs(cls, inputs);
+    }
+    if (methods) {
+      proxyMethods(cls, methods);
     }
     return cls;
   };

angular/src/directives/proxies.ts

@@ -6,9 +6,12 @@ import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';
 import { Components } from '@ionic/core';
 
 
+
+
 export declare interface IonAccordion extends Components.IonAccordion {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['disabled', 'mode', 'readonly', 'toggleIcon', 'toggleIconSlot', 'value']
 })
 @Component({
@@ -25,7 +28,7 @@ export class IonAccordion {
   }
 }
 
-import { AccordionGroupChangeEventDetail as IAccordionGroupAccordionGroupChangeEventDetail } from '@ionic/core';
+import type { AccordionGroupChangeEventDetail as IAccordionGroupAccordionGroupChangeEventDetail } from '@ionic/core';
 export declare interface IonAccordionGroup extends Components.IonAccordionGroup {
   /**
    * Emitted when the value property has changed. 
@@ -35,6 +38,7 @@ export declare interface IonAccordionGroup extends Components.IonAccordionGroup
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['animated', 'disabled', 'expand', 'mode', 'multiple', 'readonly', 'value']
 })
 @Component({
@@ -55,7 +59,9 @@ export class IonAccordionGroup {
 
 export declare interface IonApp extends Components.IonApp {}
 
-
+@ProxyCmp({
+  defineCustomElementFn: undefined
+})
 @Component({
   selector: 'ion-app',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -72,7 +78,9 @@ export class IonApp {
 
 export declare interface IonAvatar extends Components.IonAvatar {}
 
-
+@ProxyCmp({
+  defineCustomElementFn: undefined
+})
 @Component({
   selector: 'ion-avatar',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -90,6 +98,7 @@ export class IonAvatar {
 export declare interface IonBackButton extends Components.IonBackButton {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'defaultHref', 'disabled', 'icon', 'mode', 'routerAnimation', 'text', 'type']
 })
 @Component({
@@ -116,6 +125,7 @@ export declare interface IonBackdrop extends Components.IonBackdrop {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['stopPropagation', 'tappable', 'visible']
 })
 @Component({
@@ -137,6 +147,7 @@ export class IonBackdrop {
 export declare interface IonBadge extends Components.IonBadge {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'mode']
 })
 @Component({
@@ -167,6 +178,7 @@ export declare interface IonBreadcrumb extends Components.IonBreadcrumb {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['active', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'separator', 'target']
 })
 @Component({
@@ -184,7 +196,7 @@ export class IonBreadcrumb {
   }
 }
 
-import { BreadcrumbCollapsedClickEventDetail as IBreadcrumbsBreadcrumbCollapsedClickEventDetail } from '@ionic/core';
+import type { BreadcrumbCollapsedClickEventDetail as IBreadcrumbsBreadcrumbCollapsedClickEventDetail } from '@ionic/core';
 export declare interface IonBreadcrumbs extends Components.IonBreadcrumbs {
   /**
    * Emitted when the collapsed indicator is clicked on. 
@@ -194,6 +206,7 @@ export declare interface IonBreadcrumbs extends Components.IonBreadcrumbs {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'itemsAfterCollapse', 'itemsBeforeCollapse', 'maxItems', 'mode']
 })
 @Component({
@@ -225,6 +238,7 @@ export declare interface IonButton extends Components.IonButton {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['buttonType', 'color', 'disabled', 'download', 'expand', 'fill', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'size', 'strong', 'target', 'type']
 })
 @Component({
@@ -246,6 +260,7 @@ export class IonButton {
 export declare interface IonButtons extends Components.IonButtons {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['collapse']
 })
 @Component({
@@ -266,6 +281,7 @@ export class IonButtons {
 export declare interface IonCard extends Components.IonCard {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['button', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'target', 'type']
 })
 @Component({
@@ -286,6 +302,7 @@ export class IonCard {
 export declare interface IonCardContent extends Components.IonCardContent {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['mode']
 })
 @Component({
@@ -306,6 +323,7 @@ export class IonCardContent {
 export declare interface IonCardHeader extends Components.IonCardHeader {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'mode', 'translucent']
 })
 @Component({
@@ -326,6 +344,7 @@ export class IonCardHeader {
 export declare interface IonCardSubtitle extends Components.IonCardSubtitle {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'mode']
 })
 @Component({
@@ -346,6 +365,7 @@ export class IonCardSubtitle {
 export declare interface IonCardTitle extends Components.IonCardTitle {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'mode']
 })
 @Component({
@@ -362,7 +382,7 @@ export class IonCardTitle {
   }
 }
 
-import { CheckboxChangeEventDetail as ICheckboxCheckboxChangeEventDetail } from '@ionic/core';
+import type { CheckboxChangeEventDetail as ICheckboxCheckboxChangeEventDetail } from '@ionic/core';
 export declare interface IonCheckbox extends Components.IonCheckbox {
   /**
    * Emitted when the checked property has changed. 
@@ -380,6 +400,7 @@ export declare interface IonCheckbox extends Components.IonCheckbox {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['checked', 'color', 'disabled', 'indeterminate', 'mode', 'name', 'value']
 })
 @Component({
@@ -401,6 +422,7 @@ export class IonCheckbox {
 export declare interface IonChip extends Components.IonChip {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'disabled', 'mode', 'outline']
 })
 @Component({
@@ -421,6 +443,7 @@ export class IonChip {
 export declare interface IonCol extends Components.IonCol {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['offset', 'offsetLg', 'offsetMd', 'offsetSm', 'offsetXl', 'offsetXs', 'pull', 'pullLg', 'pullMd', 'pullSm', 'pullXl', 'pullXs', 'push', 'pushLg', 'pushMd', 'pushSm', 'pushXl', 'pushXs', 'size', 'sizeLg', 'sizeMd', 'sizeSm', 'sizeXl', 'sizeXs']
 })
 @Component({
@@ -437,8 +460,8 @@ export class IonCol {
   }
 }
 
-import { ScrollBaseDetail as IContentScrollBaseDetail } from '@ionic/core';
-import { ScrollDetail as IContentScrollDetail } from '@ionic/core';
+import type { ScrollBaseDetail as IContentScrollBaseDetail } from '@ionic/core';
+import type { ScrollDetail as IContentScrollDetail } from '@ionic/core';
 export declare interface IonContent extends Components.IonContent {
   /**
    * Emitted when the scroll has started. 
@@ -457,6 +480,7 @@ Look at the property: `scrollEvents`
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'forceOverscroll', 'fullscreen', 'scrollEvents', 'scrollX', 'scrollY'],
   methods: ['getScrollElement', 'scrollToTop', 'scrollToBottom', 'scrollByPoint', 'scrollToPoint']
 })
@@ -475,7 +499,7 @@ export class IonContent {
   }
 }
 
-import { DatetimeChangeEventDetail as IDatetimeDatetimeChangeEventDetail } from '@ionic/core';
+import type { DatetimeChangeEventDetail as IDatetimeDatetimeChangeEventDetail } from '@ionic/core';
 export declare interface IonDatetime extends Components.IonDatetime {
   /**
    * Emitted when the datetime selection was cancelled. 
@@ -497,6 +521,7 @@ export declare interface IonDatetime extends Components.IonDatetime {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'hourCycle', 'hourValues', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'name', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'value', 'yearValues'],
   methods: ['confirm', 'reset', 'cancel']
 })
@@ -519,6 +544,7 @@ export class IonDatetime {
 export declare interface IonFab extends Components.IonFab {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['activated', 'edge', 'horizontal', 'vertical'],
   methods: ['close']
 })
@@ -550,6 +576,7 @@ export declare interface IonFabButton extends Components.IonFabButton {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['activated', 'closeIcon', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'show', 'size', 'target', 'translucent', 'type']
 })
 @Component({
@@ -571,6 +598,7 @@ export class IonFabButton {
 export declare interface IonFabList extends Components.IonFabList {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['activated', 'side']
 })
 @Component({
@@ -591,6 +619,7 @@ export class IonFabList {
 export declare interface IonFooter extends Components.IonFooter {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['collapse', 'mode', 'translucent']
 })
 @Component({
@@ -611,6 +640,7 @@ export class IonFooter {
 export declare interface IonGrid extends Components.IonGrid {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['fixed']
 })
 @Component({
@@ -631,6 +661,7 @@ export class IonGrid {
 export declare interface IonHeader extends Components.IonHeader {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['collapse', 'mode', 'translucent']
 })
 @Component({
@@ -651,6 +682,7 @@ export class IonHeader {
 export declare interface IonIcon extends Components.IonIcon {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'flipRtl', 'icon', 'ios', 'lazy', 'md', 'mode', 'name', 'sanitize', 'size', 'src']
 })
 @Component({
@@ -685,6 +717,7 @@ export declare interface IonImg extends Components.IonImg {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['alt', 'src']
 })
 @Component({
@@ -715,6 +748,7 @@ your async operation has completed.
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['disabled', 'position', 'threshold'],
   methods: ['complete']
 })
@@ -737,6 +771,7 @@ export class IonInfiniteScroll {
 export declare interface IonInfiniteScrollContent extends Components.IonInfiniteScrollContent {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['loadingSpinner', 'loadingText']
 })
 @Component({
@@ -753,7 +788,7 @@ export class IonInfiniteScrollContent {
   }
 }
 
-import { InputChangeEventDetail as IInputInputChangeEventDetail } from '@ionic/core';
+import type { InputChangeEventDetail as IInputInputChangeEventDetail } from '@ionic/core';
 export declare interface IonInput extends Components.IonInput {
   /**
    * Emitted when a keyboard input occurred. 
@@ -775,6 +810,7 @@ export declare interface IonInput extends Components.IonInput {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'size', 'spellcheck', 'step', 'type', 'value'],
   methods: ['setFocus', 'getInputElement']
 })
@@ -797,6 +833,7 @@ export class IonInput {
 export declare interface IonItem extends Components.IonItem {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['button', 'color', 'counter', 'detail', 'detailIcon', 'disabled', 'download', 'fill', 'href', 'lines', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'target', 'type']
 })
 @Component({
@@ -817,6 +854,7 @@ export class IonItem {
 export declare interface IonItemDivider extends Components.IonItemDivider {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'mode', 'sticky']
 })
 @Component({
@@ -836,7 +874,9 @@ export class IonItemDivider {
 
 export declare interface IonItemGroup extends Components.IonItemGroup {}
 
-
+@ProxyCmp({
+  defineCustomElementFn: undefined
+})
 @Component({
   selector: 'ion-item-group',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -854,6 +894,7 @@ export class IonItemGroup {
 export declare interface IonItemOption extends Components.IonItemOption {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'mode', 'rel', 'target', 'type']
 })
 @Component({
@@ -880,6 +921,7 @@ export declare interface IonItemOptions extends Components.IonItemOptions {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['side']
 })
 @Component({
@@ -907,6 +949,7 @@ export declare interface IonItemSliding extends Components.IonItemSliding {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['disabled'],
   methods: ['getOpenAmount', 'getSlidingRatio', 'open', 'close', 'closeOpened']
 })
@@ -929,6 +972,7 @@ export class IonItemSliding {
 export declare interface IonLabel extends Components.IonLabel {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'mode', 'position']
 })
 @Component({
@@ -949,6 +993,7 @@ export class IonLabel {
 export declare interface IonList extends Components.IonList {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['inset', 'lines', 'mode'],
   methods: ['closeSlidingItems']
 })
@@ -970,6 +1015,7 @@ export class IonList {
 export declare interface IonListHeader extends Components.IonListHeader {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'lines', 'mode']
 })
 @Component({
@@ -1008,6 +1054,7 @@ export declare interface IonMenu extends Components.IonMenu {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['contentId', 'disabled', 'maxEdgeStart', 'menuId', 'side', 'swipeGesture', 'type'],
   methods: ['isOpen', 'isActive', 'open', 'close', 'toggle', 'setOpen']
 })
@@ -1030,6 +1077,7 @@ export class IonMenu {
 export declare interface IonMenuButton extends Components.IonMenuButton {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['autoHide', 'color', 'disabled', 'menu', 'mode', 'type']
 })
 @Component({
@@ -1050,6 +1098,7 @@ export class IonMenuButton {
 export declare interface IonMenuToggle extends Components.IonMenuToggle {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['autoHide', 'menu']
 })
 @Component({
@@ -1080,6 +1129,7 @@ export declare interface IonNav extends Components.IonNav {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['animated', 'animation', 'root', 'rootParams', 'swipeGesture'],
   methods: ['push', 'insert', 'insertPages', 'pop', 'popTo', 'popToRoot', 'removeIndex', 'setRoot', 'setPages', 'getActive', 'getByIndex', 'canGoBack', 'getPrevious']
 })
@@ -1102,6 +1152,7 @@ export class IonNav {
 export declare interface IonNavLink extends Components.IonNavLink {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['component', 'componentProps', 'routerAnimation', 'routerDirection']
 })
 @Component({
@@ -1122,6 +1173,7 @@ export class IonNavLink {
 export declare interface IonNote extends Components.IonNote {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'mode']
 })
 @Component({
@@ -1142,6 +1194,7 @@ export class IonNote {
 export declare interface IonProgressBar extends Components.IonProgressBar {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['buffer', 'color', 'mode', 'reversed', 'type', 'value']
 })
 @Component({
@@ -1172,6 +1225,7 @@ export declare interface IonRadio extends Components.IonRadio {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'disabled', 'mode', 'name', 'value']
 })
 @Component({
@@ -1189,7 +1243,7 @@ export class IonRadio {
   }
 }
 
-import { RadioGroupChangeEventDetail as IRadioGroupRadioGroupChangeEventDetail } from '@ionic/core';
+import type { RadioGroupChangeEventDetail as IRadioGroupRadioGroupChangeEventDetail } from '@ionic/core';
 export declare interface IonRadioGroup extends Components.IonRadioGroup {
   /**
    * Emitted when the value has changed. 
@@ -1199,6 +1253,7 @@ export declare interface IonRadioGroup extends Components.IonRadioGroup {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['allowEmptySelection', 'name', 'value']
 })
 @Component({
@@ -1216,7 +1271,7 @@ export class IonRadioGroup {
   }
 }
 
-import { RangeChangeEventDetail as IRangeRangeChangeEventDetail } from '@ionic/core';
+import type { RangeChangeEventDetail as IRangeRangeChangeEventDetail } from '@ionic/core';
 export declare interface IonRange extends Components.IonRange {
   /**
    * Emitted when the value property has changed. 
@@ -1234,6 +1289,7 @@ export declare interface IonRange extends Components.IonRange {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'debounce', 'disabled', 'dualKnobs', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value']
 })
 @Component({
@@ -1251,7 +1307,7 @@ export class IonRange {
   }
 }
 
-import { RefresherEventDetail as IRefresherRefresherEventDetail } from '@ionic/core';
+import type { RefresherEventDetail as IRefresherRefresherEventDetail } from '@ionic/core';
 export declare interface IonRefresher extends Components.IonRefresher {
   /**
    * Emitted when the user lets go of the content and has pulled down
@@ -1272,6 +1328,7 @@ called when the async operation has completed.
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['closeDuration', 'disabled', 'pullFactor', 'pullMax', 'pullMin', 'snapbackDuration'],
   methods: ['complete', 'cancel', 'getProgress']
 })
@@ -1294,6 +1351,7 @@ export class IonRefresher {
 export declare interface IonRefresherContent extends Components.IonRefresherContent {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['pullingIcon', 'pullingText', 'refreshingSpinner', 'refreshingText']
 })
 @Component({
@@ -1313,7 +1371,9 @@ export class IonRefresherContent {
 
 export declare interface IonReorder extends Components.IonReorder {}
 
-
+@ProxyCmp({
+  defineCustomElementFn: undefined
+})
 @Component({
   selector: 'ion-reorder',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1327,7 +1387,7 @@ export class IonReorder {
   }
 }
 
-import { ItemReorderEventDetail as IReorderGroupItemReorderEventDetail } from '@ionic/core';
+import type { ItemReorderEventDetail as IReorderGroupItemReorderEventDetail } from '@ionic/core';
 export declare interface IonReorderGroup extends Components.IonReorderGroup {
   /**
    * Event that needs to be listened to in order to complete the reorder action.
@@ -1339,6 +1399,7 @@ to be called in order to finalize the reorder action.
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['disabled'],
   methods: ['complete']
 })
@@ -1361,6 +1422,7 @@ export class IonReorderGroup {
 export declare interface IonRippleEffect extends Components.IonRippleEffect {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['type'],
   methods: ['addRipple']
 })
@@ -1381,7 +1443,9 @@ export class IonRippleEffect {
 
 export declare interface IonRow extends Components.IonRow {}
 
-
+@ProxyCmp({
+  defineCustomElementFn: undefined
+})
 @Component({
   selector: 'ion-row',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1395,7 +1459,7 @@ export class IonRow {
   }
 }
 
-import { SearchbarChangeEventDetail as ISearchbarSearchbarChangeEventDetail } from '@ionic/core';
+import type { SearchbarChangeEventDetail as ISearchbarSearchbarChangeEventDetail } from '@ionic/core';
 export declare interface IonSearchbar extends Components.IonSearchbar {
   /**
    * Emitted when a keyboard input occurred. 
@@ -1425,6 +1489,7 @@ export declare interface IonSearchbar extends Components.IonSearchbar {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'mode', 'placeholder', 'searchIcon', 'showCancelButton', 'showClearButton', 'spellcheck', 'type', 'value'],
   methods: ['setFocus', 'getInputElement']
 })
@@ -1443,7 +1508,7 @@ export class IonSearchbar {
   }
 }
 
-import { SegmentChangeEventDetail as ISegmentSegmentChangeEventDetail } from '@ionic/core';
+import type { SegmentChangeEventDetail as ISegmentSegmentChangeEventDetail } from '@ionic/core';
 export declare interface IonSegment extends Components.IonSegment {
   /**
    * Emitted when the value property has changed and any
@@ -1454,6 +1519,7 @@ dragging pointer has been released from `ion-segment`.
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'disabled', 'mode', 'scrollable', 'selectOnFocus', 'swipeGesture', 'value']
 })
 @Component({
@@ -1475,6 +1541,7 @@ export class IonSegment {
 export declare interface IonSegmentButton extends Components.IonSegmentButton {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['disabled', 'layout', 'mode', 'type', 'value']
 })
 @Component({
@@ -1491,7 +1558,7 @@ export class IonSegmentButton {
   }
 }
 
-import { SelectChangeEventDetail as ISelectSelectChangeEventDetail } from '@ionic/core';
+import type { SelectChangeEventDetail as ISelectSelectChangeEventDetail } from '@ionic/core';
 export declare interface IonSelect extends Components.IonSelect {
   /**
    * Emitted when the value has changed. 
@@ -1513,6 +1580,7 @@ export declare interface IonSelect extends Components.IonSelect {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['cancelText', 'compareWith', 'disabled', 'interface', 'interfaceOptions', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'selectedText', 'value'],
   methods: ['open']
 })
@@ -1535,6 +1603,7 @@ export class IonSelect {
 export declare interface IonSelectOption extends Components.IonSelectOption {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['disabled', 'value']
 })
 @Component({
@@ -1555,6 +1624,7 @@ export class IonSelectOption {
 export declare interface IonSkeletonText extends Components.IonSkeletonText {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['animated']
 })
 @Component({
@@ -1574,7 +1644,9 @@ export class IonSkeletonText {
 
 export declare interface IonSlide extends Components.IonSlide {}
 
-
+@ProxyCmp({
+  defineCustomElementFn: undefined
+})
 @Component({
   selector: 'ion-slide',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1658,6 +1730,7 @@ export declare interface IonSlides extends Components.IonSlides {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['mode', 'options', 'pager', 'scrollbar'],
   methods: ['update', 'updateAutoHeight', 'slideTo', 'slideNext', 'slidePrev', 'getActiveIndex', 'getPreviousIndex', 'length', 'isEnd', 'isBeginning', 'startAutoplay', 'stopAutoplay', 'lockSwipeToNext', 'lockSwipeToPrev', 'lockSwipes', 'getSwiper']
 })
@@ -1680,6 +1753,7 @@ export class IonSlides {
 export declare interface IonSpinner extends Components.IonSpinner {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'duration', 'name', 'paused']
 })
 @Component({
@@ -1706,6 +1780,7 @@ export declare interface IonSplitPane extends Components.IonSplitPane {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['contentId', 'disabled', 'when']
 })
 @Component({
@@ -1727,6 +1802,7 @@ export class IonSplitPane {
 export declare interface IonTabBar extends Components.IonTabBar {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'mode', 'selectedTab', 'translucent']
 })
 @Component({
@@ -1747,6 +1823,7 @@ export class IonTabBar {
 export declare interface IonTabButton extends Components.IonTabButton {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['disabled', 'download', 'href', 'layout', 'mode', 'rel', 'selected', 'tab', 'target']
 })
 @Component({
@@ -1767,6 +1844,7 @@ export class IonTabButton {
 export declare interface IonText extends Components.IonText {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'mode']
 })
 @Component({
@@ -1783,7 +1861,7 @@ export class IonText {
   }
 }
 
-import { TextareaChangeEventDetail as ITextareaTextareaChangeEventDetail } from '@ionic/core';
+import type { TextareaChangeEventDetail as ITextareaTextareaChangeEventDetail } from '@ionic/core';
 export declare interface IonTextarea extends Components.IonTextarea {
   /**
    * Emitted when the input value has changed. 
@@ -1805,6 +1883,7 @@ export declare interface IonTextarea extends Components.IonTextarea {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['autoGrow', 'autocapitalize', 'autofocus', 'clearOnEdit', 'color', 'cols', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'maxlength', 'minlength', 'mode', 'name', 'placeholder', 'readonly', 'required', 'rows', 'spellcheck', 'value', 'wrap'],
   methods: ['setFocus', 'getInputElement']
 })
@@ -1826,7 +1905,9 @@ export class IonTextarea {
 
 export declare interface IonThumbnail extends Components.IonThumbnail {}
 
-
+@ProxyCmp({
+  defineCustomElementFn: undefined
+})
 @Component({
   selector: 'ion-thumbnail',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1844,6 +1925,7 @@ export class IonThumbnail {
 export declare interface IonTitle extends Components.IonTitle {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'size']
 })
 @Component({
@@ -1860,7 +1942,7 @@ export class IonTitle {
   }
 }
 
-import { ToggleChangeEventDetail as IToggleToggleChangeEventDetail } from '@ionic/core';
+import type { ToggleChangeEventDetail as IToggleToggleChangeEventDetail } from '@ionic/core';
 export declare interface IonToggle extends Components.IonToggle {
   /**
    * Emitted when the value property has changed. 
@@ -1878,6 +1960,7 @@ export declare interface IonToggle extends Components.IonToggle {
 }
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['checked', 'color', 'disabled', 'mode', 'name', 'value']
 })
 @Component({
@@ -1899,6 +1982,7 @@ export class IonToggle {
 export declare interface IonToolbar extends Components.IonToolbar {}
 
 @ProxyCmp({
+  defineCustomElementFn: undefined,
   inputs: ['color', 'mode']
 })
 @Component({