fix(vue): update Stencil Vue output target (#30159)

This patch includes some necessary updates for
`@stencil/[email protected]`:

- we started to export Stencils helpers as runtime via
`@stencil/vue-output-target/runtime` similar to what we did in React
- this version requires some updates to Vue and TypeScript as well
- adjustments related to that update

Author: christian-bromann

packages/angular/src/directives/proxies.ts

@@ -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.4",
     "@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/angular/standalone/src/directives/proxies.ts

@@ -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/package-lock.json

@@ -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/package.json

@@ -3,20 +3,24 @@ import type { VNode } from "vue";
 import { h, defineComponent, shallowRef } from "vue";
 
 const userComponents = shallowRef([]);
-export const IonApp = /*@__PURE__*/ defineComponent((_, { attrs, slots }) => {
-  defineCustomElement();
-  return () => {
-    return h(
-      "ion-app",
-      {
-        ...attrs,
-      },
-      [slots.default && slots.default(), ...userComponents.value]
-    );
-  };
-});
-
-IonApp.name = "IonApp";
+export const IonApp = /*@__PURE__*/ defineComponent(
+  (_, { attrs, slots }) => {
+    defineCustomElement();
+    return () => {
+      return h(
+        "ion-app",
+        {
+          name: "IonApp",
+          ...attrs,
+        },
+        [slots.default && slots.default(), ...userComponents.value]
+      );
+    };
+  },
+  {
+    name: "IonApp",
+  }
+);
 
 /**
  * When rendering user components inside of

packages/vue/rollup.config.mjs

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

packages/vue/scripts/copy-overlays.js

@@ -4,54 +4,56 @@ import { defineComponent, h, shallowRef } from "vue";
 
 import { VueDelegate } from "../framework-delegate";
 
-export const IonNav = /*@__PURE__*/ defineComponent((props) => {
-  defineCustomElement();
-  const views = shallowRef([]);
+export const IonNav = /*@__PURE__*/ defineComponent(
+  (props) => {
+    defineCustomElement();
+    const views = shallowRef([]);
 
-  /**
-   * Allows us to create the component
-   * within the Vue application context.
-   */
-  const addView = (component: VNode) =>
-    (views.value = [...views.value, component]);
-  const removeView = (component: VNode) =>
-    (views.value = views.value.filter((cmp) => cmp !== component));
+    /**
+     * Allows us to create the component
+     * within the Vue application context.
+     */
+    const addView = (component: VNode) =>
+      (views.value = [...views.value, component]);
+    const removeView = (component: VNode) =>
+      (views.value = views.value.filter((cmp) => cmp !== component));
 
-  const delegate = VueDelegate(addView, removeView);
-  return () => {
-    return h("ion-nav", { ...props, delegate }, views.value);
-  };
-});
-
-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,
+    const delegate = VueDelegate(addView, removeView);
+    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,
+      },
+    },
+  }
+);

packages/vue/src/components/IonApp.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();