fix(vue): make update work

Author: christian-bromann

packages/vue/package-lock.json

@@ -61,12 +61,13 @@
     "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": {
     "@ionic/core": "^8.4.2",
+    "@stencil/vue-output-target": "0.9.2",
     "ionicons": "^7.0.0"
   },
   "vetur": {

packages/vue/package.json

@@ -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/IonApp.ts

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

packages/vue/src/components/IonBackButton.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/IonNav.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/IonRouterOutlet.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/IonTabBar.ts

@@ -1,4 +1,6 @@
-import { defineComponent, h, ref, VNode, onMounted } from 'vue';
+/* eslint-disable no-prototype-builtins */
+import type { VNode, ComponentOptions } from 'vue';
+import { defineComponent, h, ref, onMounted } from 'vue';
 
 // TODO(FW-2969): types
 
@@ -10,6 +12,20 @@ const EMPTY_PROP = Symbol();
 const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP };
 
 export const defineOverlayContainer = <Props extends object>(name: string, defineCustomElement: () => void, componentProps: string[] = [], hasDelegateHost?: boolean, controller?: any) => {
+  const options: ComponentOptions = {
+    name,
+    props: {
+      'isOpen': DEFAULT_EMPTY_PROP
+    }
+  }
+
+  componentProps.forEach(componentProp => {
+    options.props[componentProp] = DEFAULT_EMPTY_PROP;
+  });
+
+  if (controller !== undefined) {
+    options.emits = ['willPresent', 'didPresent', 'willDismiss', 'didDismiss'];
+  }
 
   const createControllerComponent = () => {
     return defineComponent<Props & OverlayProps>((props, { slots, emit }) => {
@@ -77,7 +93,7 @@ export const defineOverlayContainer = <Props extends object>(name: string, defin
           return;
         }
 
-        let restOfProps: any = {};
+        const restOfProps: Record<string, any> = {};
 
         /**
          * We can use Object.entries here
@@ -130,7 +146,7 @@ export const defineOverlayContainer = <Props extends object>(name: string, defin
           }
         );
       }
-    });
+    }, options);
   };
   const createInlineComponent = () => {
     return defineComponent((props, { slots }) => {
@@ -147,7 +163,7 @@ export const defineOverlayContainer = <Props extends object>(name: string, defin
       });
 
       return () => {
-        let restOfProps: any = {};
+        const restOfProps: Record<string, any> = {};
 
         /**
          * We can use Object.entries here
@@ -187,24 +203,10 @@ export const defineOverlayContainer = <Props extends object>(name: string, defin
           (isOpen.value || restOfProps.keepContentsMounted || restOfProps.keepContentsMounted === '') ? renderChildren() : undefined
         )
       }
-    });
+    }, options);
   }
 
   const Container = (controller !== undefined) ? createControllerComponent() : createInlineComponent();
 
-  Container.name = name;
-
-  Container.props = {
-    'isOpen': DEFAULT_EMPTY_PROP
-  };
-
-  componentProps.forEach(componentProp => {
-    Container.props[componentProp] = DEFAULT_EMPTY_PROP;
-  });
-
-  if (controller !== undefined) {
-    Container.emits = ['willPresent', 'didPresent', 'willDismiss', 'didDismiss'];
-  }
-
   return Container;
 }

packages/vue/src/vue-component-lib/overlays.ts

@@ -7,8 +7,8 @@
     "experimentalDecorators": true,
     "esModuleInterop": true,
     "lib": ["dom", "es2020"],
-    "module": "es2015",
-    "moduleResolution": "node",
+    "module": "ES2020",
+    "moduleResolution": "bundler",
     "noImplicitAny": true,
     "noImplicitReturns": false,
     "noUnusedLocals": true,