From 6203b88b9fd5dba456b944f3d0a90456adf26929 Mon Sep 17 00:00:00 2001 From: Brandy Smith Date: Thu, 31 Jul 2025 11:35:43 -0400 Subject: [PATCH] chore(deps): update @stencil/core to v4.36.2 (#30587) Issue number: resolves #30565 --------- ## What is the current behavior? Stencil is on v4.33.1 ## What is the new behavior? - Updates Stencil to v4.36.2 - Updates `children` references to `__children` in `reorder-group` ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information I searched through the repository for other components that may be affected but did not find any. Dev build: `8.7.1-dev.11753971948.1b297d94` Reorder Example using dev build: [StackBlitz](https://stackblitz.com/edit/5nrzhbja) Router Example using dev build: [StackBlitz](https://stackblitz.com/edit/rvpcflzx) --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> --- core/package-lock.json | 54 +++---------------- core/package.json | 2 +- .../reorder-group/reorder-group.tsx | 9 ++-- core/src/components/router/utils/interface.ts | 6 +-- core/src/interface.d.ts | 3 +- core/src/utils/element-interface.ts | 15 +++++- 6 files changed, 30 insertions(+), 59 deletions(-) diff --git a/core/package-lock.json b/core/package-lock.json index 0c43e8f832..9b5c526f3f 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -9,7 +9,7 @@ "version": "8.7.0", "license": "MIT", "dependencies": { - "@stencil/core": "4.33.1", + "@stencil/core": "4.36.2", "ionicons": "^8.0.13", "tslib": "^2.1.0" }, @@ -1914,9 +1914,9 @@ } }, "node_modules/@stencil/core": { - "version": "4.33.1", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.33.1.tgz", - "integrity": "sha512-12k9xhAJBkpg598it+NRmaYIdEe6TSnsL/v6/KRXDcUyTK11VYwZQej2eHnMWtqot+znJ+GNTqb5YbiXi+5Low==", + "version": "4.36.2", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.36.2.tgz", + "integrity": "sha512-PRFSpxNzX9Oi0Wfh02asztN9Sgev/MacfZwmd+VVyE6ZxW+a/kEpAYZhzGAmE+/aKVOGYuug7R9SulanYGxiDQ==", "license": "MIT", "bin": { "stencil": "bin/stencil" @@ -5719,29 +5719,6 @@ "@stencil/core": "^4.35.3" } }, - "node_modules/ionicons/node_modules/@stencil/core": { - "version": "4.35.3", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.35.3.tgz", - "integrity": "sha512-RH5/I+amV31QI8TMXhXkAkjzs2eod6Y07jkUYTl9kMB+X7c5wUpv95Y/2LtcAx0Rqdhh4SHbJiwpr0ApBZmv0g==", - "license": "MIT", - "bin": { - "stencil": "bin/stencil" - }, - "engines": { - "node": ">=16.0.0", - "npm": ">=7.10.0" - }, - "optionalDependencies": { - "@rollup/rollup-darwin-arm64": "4.34.9", - "@rollup/rollup-darwin-x64": "4.34.9", - "@rollup/rollup-linux-arm64-gnu": "4.34.9", - "@rollup/rollup-linux-arm64-musl": "4.34.9", - "@rollup/rollup-linux-x64-gnu": "4.34.9", - "@rollup/rollup-linux-x64-musl": "4.34.9", - "@rollup/rollup-win32-arm64-msvc": "4.34.9", - "@rollup/rollup-win32-x64-msvc": "4.34.9" - } - }, "node_modules/is-alphabetical": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz", @@ -12007,9 +11984,9 @@ "requires": {} }, "@stencil/core": { - "version": "4.33.1", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.33.1.tgz", - "integrity": "sha512-12k9xhAJBkpg598it+NRmaYIdEe6TSnsL/v6/KRXDcUyTK11VYwZQej2eHnMWtqot+znJ+GNTqb5YbiXi+5Low==", + "version": "4.36.2", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.36.2.tgz", + "integrity": "sha512-PRFSpxNzX9Oi0Wfh02asztN9Sgev/MacfZwmd+VVyE6ZxW+a/kEpAYZhzGAmE+/aKVOGYuug7R9SulanYGxiDQ==", "requires": { "@rollup/rollup-darwin-arm64": "4.34.9", "@rollup/rollup-darwin-x64": "4.34.9", @@ -14773,23 +14750,6 @@ "integrity": "sha512-2QQVyG2P4wszne79jemMjWYLp0DBbDhr4/yFroPCxvPP1wtMxgdIV3l5n+XZ5E9mgoXU79w7yTWpm2XzJsISxQ==", "requires": { "@stencil/core": "^4.35.3" - }, - "dependencies": { - "@stencil/core": { - "version": "4.35.3", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.35.3.tgz", - "integrity": "sha512-RH5/I+amV31QI8TMXhXkAkjzs2eod6Y07jkUYTl9kMB+X7c5wUpv95Y/2LtcAx0Rqdhh4SHbJiwpr0ApBZmv0g==", - "requires": { - "@rollup/rollup-darwin-arm64": "4.34.9", - "@rollup/rollup-darwin-x64": "4.34.9", - "@rollup/rollup-linux-arm64-gnu": "4.34.9", - "@rollup/rollup-linux-arm64-musl": "4.34.9", - "@rollup/rollup-linux-x64-gnu": "4.34.9", - "@rollup/rollup-linux-x64-musl": "4.34.9", - "@rollup/rollup-win32-arm64-msvc": "4.34.9", - "@rollup/rollup-win32-x64-msvc": "4.34.9" - } - } } }, "is-alphabetical": { diff --git a/core/package.json b/core/package.json index 0ce07b8635..964f262455 100644 --- a/core/package.json +++ b/core/package.json @@ -31,7 +31,7 @@ "loader/" ], "dependencies": { - "@stencil/core": "4.33.1", + "@stencil/core": "4.36.2", "ionicons": "^8.0.13", "tslib": "^2.1.0" }, diff --git a/core/src/components/reorder-group/reorder-group.tsx b/core/src/components/reorder-group/reorder-group.tsx index b13c12cc93..c9deba6f20 100644 --- a/core/src/components/reorder-group/reorder-group.tsx +++ b/core/src/components/reorder-group/reorder-group.tsx @@ -6,6 +6,7 @@ import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from import { getIonMode } from '../../global/ionic-global'; import type { Gesture, GestureDetail } from '../../interface'; +import type { HTMLStencilElement } from '../../utils/element-interface'; import type { ItemReorderEventDetail, ReorderMoveEventDetail, ReorderEndEventDetail } from './reorder-group-interface'; @@ -38,7 +39,7 @@ export class ReorderGroup implements ComponentInterface { @State() state = ReorderGroupState.Idle; - @Element() el!: HTMLElement; + @Element() el!: HTMLStencilElement; /** * If `true`, the reorder will be hidden. @@ -152,7 +153,7 @@ export class ReorderGroup implements ComponentInterface { const heights = this.cachedHeights; heights.length = 0; const el = this.el; - const children: any = el.children; + const children: any = el.__children; if (!children || children.length === 0) { return; } @@ -258,7 +259,7 @@ export class ReorderGroup implements ComponentInterface { private completeReorder(listOrReorder?: boolean | any[]): any { const selectedItemEl = this.selectedItemEl; if (selectedItemEl && this.state === ReorderGroupState.Complete) { - const children = this.el.children as any; + const children: any = this.el.__children; const len = children.length; const toIndex = this.lastToIndex; const fromIndex = indexForItem(selectedItemEl); @@ -308,7 +309,7 @@ export class ReorderGroup implements ComponentInterface { /********* DOM WRITE ********* */ private reorderMove(fromIndex: number, toIndex: number) { const itemHeight = this.selectedItemHeight; - const children = this.el.children; + const children: any = this.el.__children; for (let i = 0; i < children.length; i++) { const style = (children[i] as any).style; let value = ''; diff --git a/core/src/components/router/utils/interface.ts b/core/src/components/router/utils/interface.ts index 69fc0fd284..caeb6e57c0 100644 --- a/core/src/components/router/utils/interface.ts +++ b/core/src/components/router/utils/interface.ts @@ -1,10 +1,6 @@ -import type { AnimationBuilder, ComponentProps } from '../../../interface'; +import type { AnimationBuilder, ComponentProps, HTMLStencilElement } from '../../../interface'; import type { NavigationHookCallback } from '../../route/route-interface'; -export interface HTMLStencilElement extends HTMLElement { - componentOnReady(): Promise; -} - export interface NavOutlet { setRouteId( id: string, diff --git a/core/src/interface.d.ts b/core/src/interface.d.ts index 878d6c0846..70be4af143 100644 --- a/core/src/interface.d.ts +++ b/core/src/interface.d.ts @@ -23,7 +23,7 @@ export { PickerOptions, PickerColumnOption } from './components/picker-legacy/pi export { PopoverOptions } from './components/popover/popover-interface'; export { RadioGroupCustomEvent } from './components/radio-group/radio-group-interface'; export { RangeCustomEvent, PinFormatter } from './components/range/range-interface'; -export { HTMLStencilElement, RouterCustomEvent } from './components/router/utils/interface'; +export { RouterCustomEvent } from './components/router/utils/interface'; export { RefresherCustomEvent } from './components/refresher/refresher-interface'; export { ItemReorderCustomEvent, @@ -49,6 +49,7 @@ export { AnimationKeyFrames, AnimationLifecycle, } from './utils/animation/animation-interface'; +export { HTMLStencilElement } from './utils/element-interface'; export { TransitionOptions } from './utils/transition'; export { HTMLIonOverlayElement, OverlayController, OverlayInterface } from './utils/overlays-interface'; export { Config, config } from './global/config'; diff --git a/core/src/utils/element-interface.ts b/core/src/utils/element-interface.ts index 99b6e7d8d2..1e0c8b5081 100644 --- a/core/src/utils/element-interface.ts +++ b/core/src/utils/element-interface.ts @@ -1,6 +1,19 @@ // The interfaces in this file are used to make sure our components // have the correct properties defined that are needed to pass to -// the native HTML elements they render +// the native HTML elements they render. The HTMLStencilElement interface +// extends HTMLElement to provide Stencil-specific functionality like +// componentOnReady() and proper children handling. + +export interface HTMLStencilElement extends HTMLElement { + componentOnReady(): Promise; + /** + * Stencil patches `el.children` to behave like calling `el.children` on an + * element with shadow DOM even though the component is not a shadow DOM element. + * To allow components to work properly we need to access the original accessor + * for this property which is `__children`. + */ + __children?: HTMLCollection; +} export interface AnchorInterface { href: string | undefined;