fix(vue): update Stencil Vue output target

packages/vue/package.json

@@ -52,7 +52,9 @@
     "@babel/types": "^7.18.4",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-typescript": "^11.1.5",
+    "@stencil/vue-output-target": "0.9.2",
     "@typescript-eslint/eslint-plugin": "^5.48.2",
     "@typescript-eslint/parser": "^5.48.2",
     "change-case": "^4.1.1",
@@ -61,8 +63,8 @@
     "prettier": "^2.8.3",
     "rimraf": "^3.0.2",
     "rollup": "^4.2.0",
-    "typescript": "^4.7.3",
-    "vue": "3.2.47",
+    "typescript": "^5.7.3",
+    "vue": "3.4.38",
     "vue-router": "^4.0.16"
   },
   "dependencies": {

packages/vue/rollup.config.mjs

@@ -1,4 +1,6 @@
+import resolve from '@rollup/plugin-node-resolve';
 import typescript from '@rollup/plugin-typescript';
+
 const external = ['vue', 'vue-router'];
 
 export default {
@@ -12,6 +14,13 @@ export default {
       sourcemap: true
     },
   ],
-  plugins: [typescript()],
-  external: id => external.includes(id) || id.startsWith('@ionic/core') || id.startsWith('ionicons')
+  plugins: [
+    typescript(),
+    resolve()
+  ],
+  external: (
+    id => external.includes(id) ||
+    id.startsWith('@ionic/core') ||
+    id.startsWith('ionicons')
+  )
 };

packages/vue/scripts/copy-overlays.js

@@ -37,7 +37,7 @@ function generateOverlays() {
   let componentImports = [];
   let componentDefinitions = [];
 
-  components.forEach(component => {
+  components.sort((a, b) => a.tag.localeCompare(b.tag)).forEach(component => {
     const docsBlock = getDocsBlock(component.tag);
     const props = getPropsFromDocsBlock(docsBlock);
 
@@ -57,13 +57,12 @@ export const ${component.name} = /*@__PURE__*/ defineOverlayContainer<JSX.${comp
  * Changes made to this file will be overwritten on build.
  */
 
-import {
+import type {
   JSX,
 } from '@ionic/core/components';
-
 ${componentImports.join('\n')}
 
-import { defineOverlayContainer } from '../vue-component-lib/overlays';
+import { defineOverlayContainer } from '../utils/overlays';
 ${componentDefinitions.join('')}
 `;
 

packages/vue/src/components/IonApp.ts

@@ -9,15 +9,16 @@ export const IonApp = /*@__PURE__*/ defineComponent((_, { attrs, slots }) => {
     return h(
       "ion-app",
       {
+        name: "IonApp",
         ...attrs,
       },
       [slots.default && slots.default(), ...userComponents.value]
     );
   };
+}, {
+  name: "IonApp",
 });
 
-IonApp.name = "IonApp";
-
 /**
  * When rendering user components inside of
  * ion-modal, or ion-popover the component

packages/vue/src/components/IonBackButton.ts

@@ -34,7 +34,7 @@ export const IonBackButton = /*@__PURE__*/ defineComponent(
         slots.default && slots.default()
       );
     };
+  }, {
+    name: "IonBackButton",
   }
 );
-
-IonBackButton.name = "IonBackButton";

packages/vue/src/components/IonNav.ts

@@ -21,37 +21,36 @@ export const IonNav = /*@__PURE__*/ defineComponent((props) => {
   return () => {
     return h("ion-nav", { ...props, delegate }, views.value);
   };
+}, {
+  name: "IonNav",
+  /**
+   * The default values follow what is defined at
+   * https://ionicframework.com/docs/api/nav#properties
+   * otherwise the default values on the Web Component
+   * may be overridden. For example, if the default animated value
+   * is not `true` below, then Vue would default the prop to `false`
+   * which would override the Web Component default of `true`.
+   */
+  props: {
+    animated: {
+      type: Boolean,
+      default: true,
+    },
+    animation: {
+      type: Function,
+      default: undefined,
+    },
+    root: {
+      type: [Function, Object, String],
+      default: undefined,
+    },
+    rootParams: {
+      type: Object,
+      default: undefined,
+    },
+    swipeGesture: {
+      type: Boolean,
+      default: undefined,
+    },
+  }
 });
-
-IonNav.name = "IonNav";
-
-/**
- * The default values follow what is defined at
- * https://ionicframework.com/docs/api/nav#properties
- * otherwise the default values on the Web Component
- * may be overridden. For example, if the default animated value
- * is not `true` below, then Vue would default the prop to `false`
- * which would override the Web Component default of `true`.
- */
-IonNav.props = {
-  animated: {
-    type: Boolean,
-    default: true,
-  },
-  animation: {
-    type: Function,
-    default: undefined,
-  },
-  root: {
-    type: [Function, Object, String],
-    default: undefined,
-  },
-  rootParams: {
-    type: Object,
-    default: undefined,
-  },
-  swipeGesture: {
-    type: Boolean,
-    default: undefined,
-  },
-};

packages/vue/src/components/IonRouterOutlet.ts

@@ -44,7 +44,7 @@ export const IonRouterOutlet = /*@__PURE__*/ defineComponent({
     let previousMatchedRouteRef: Ref | undefined;
     let previousMatchedPath: string | undefined;
 
-    provide(viewDepthKey, depth + 1);
+    provide(viewDepthKey, depth + 1 as 0);
     provide(matchedRouteKey, matchedRouteRef);
 
     const ionRouterOutlet = ref();

packages/vue/src/components/IonTabBar.ts

@@ -43,7 +43,7 @@ export const IonTabBar = defineComponent({
   data() {
     return {
       tabState: {
-        activeTab: undefined,
+        activeTab: undefined as string | undefined,
         tabs: {},
         /**
          * Passing this prop to each tab button
@@ -52,7 +52,7 @@ export const IonTabBar = defineComponent({
          */
         hasRouterOutlet: false,
       },
-      tabVnodes: [],
+      tabVnodes: [] as VNode[],
       /* eslint-disable @typescript-eslint/no-empty-function */
       _tabsWillChange: { type: Function, default: () => {} },
       _tabsDidChange: { type: Function, default: () => {} },

packages/vue/src/components/Overlays.ts

@@ -3,31 +3,30 @@
  * Changes made to this file will be overwritten on build.
  */
 
-import {
+import type {
   JSX,
 } from '@ionic/core/components';
-
 import { defineCustomElement as defineIonActionSheetCustomElement } from '@ionic/core/components/ion-action-sheet.js'
 import { defineCustomElement as defineIonAlertCustomElement } from '@ionic/core/components/ion-alert.js'
 import { defineCustomElement as defineIonLoadingCustomElement } from '@ionic/core/components/ion-loading.js'
-import { defineCustomElement as defineIonPickerLegacyCustomElement } from '@ionic/core/components/ion-picker-legacy.js'
-import { defineCustomElement as defineIonToastCustomElement } from '@ionic/core/components/ion-toast.js'
 import { defineCustomElement as defineIonModalCustomElement } from '@ionic/core/components/ion-modal.js'
+import { defineCustomElement as defineIonPickerLegacyCustomElement } from '@ionic/core/components/ion-picker-legacy.js'
 import { defineCustomElement as defineIonPopoverCustomElement } from '@ionic/core/components/ion-popover.js'
+import { defineCustomElement as defineIonToastCustomElement } from '@ionic/core/components/ion-toast.js'
 
-import { defineOverlayContainer } from '../vue-component-lib/overlays';
+import { defineOverlayContainer } from '../utils/overlays';
 
 export const IonActionSheet = /*@__PURE__*/ defineOverlayContainer<JSX.IonActionSheet>('ion-action-sheet', defineIonActionSheetCustomElement, ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'subHeader', 'translucent', 'trigger']);
 
 export const IonAlert = /*@__PURE__*/ defineOverlayContainer<JSX.IonAlert>('ion-alert', defineIonAlertCustomElement, ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'inputs', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'subHeader', 'translucent', 'trigger']);
 
 export const IonLoading = /*@__PURE__*/ defineOverlayContainer<JSX.IonLoading>('ion-loading', defineIonLoadingCustomElement, ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'translucent', 'trigger']);
 
-export const IonPickerLegacy = /*@__PURE__*/ defineOverlayContainer<JSX.IonPickerLegacy>('ion-picker-legacy', defineIonPickerLegacyCustomElement, ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'trigger']);
-
-export const IonToast = /*@__PURE__*/ defineOverlayContainer<JSX.IonToast>('ion-toast', defineIonToastCustomElement, ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'swipeGesture', 'translucent', 'trigger']);
-
 export const IonModal = /*@__PURE__*/ defineOverlayContainer<JSX.IonModal>('ion-modal', defineIonModalCustomElement, ['animated', 'backdropBreakpoint', 'backdropDismiss', 'breakpoints', 'canDismiss', 'enterAnimation', 'focusTrap', 'handle', 'handleBehavior', 'htmlAttributes', 'initialBreakpoint', 'isOpen', 'keepContentsMounted', 'keyboardClose', 'leaveAnimation', 'mode', 'presentingElement', 'showBackdrop', 'trigger'], true);
 
+export const IonPickerLegacy = /*@__PURE__*/ defineOverlayContainer<JSX.IonPickerLegacy>('ion-picker-legacy', defineIonPickerLegacyCustomElement, ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'trigger']);
+
 export const IonPopover = /*@__PURE__*/ defineOverlayContainer<JSX.IonPopover>('ion-popover', defineIonPopoverCustomElement, ['alignment', 'animated', 'arrow', 'backdropDismiss', 'component', 'componentProps', 'dismissOnSelect', 'enterAnimation', 'event', 'focusTrap', 'htmlAttributes', 'isOpen', 'keepContentsMounted', 'keyboardClose', 'leaveAnimation', 'mode', 'reference', 'showBackdrop', 'side', 'size', 'translucent', 'trigger', 'triggerAction']);
 
+export const IonToast = /*@__PURE__*/ defineOverlayContainer<JSX.IonToast>('ion-toast', defineIonToastCustomElement, ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'swipeGesture', 'translucent', 'trigger']);
+