From 07941a59ba68a46d1345fecec6df82fb4655a0b5 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 12 Apr 2023 12:50:21 -0400 Subject: [PATCH] fix(vue): components have correct name in Vue Dev Tools (#27180) ## What is the current behavior? Issue URL: resolves #25199 Vue components show up as "Anonymous Component" in Vue Dev Tools. This is caused by our use of `displayName` instead of `name`. This required a fix in the Vue Output Target package. See https://github.com/ionic-team/stencil-ds-output-targets/pull/257 for more info. ## What is the new behavior? - Updates the Vue Output Target dependency - Functional components created manually in Ionic Vue now set `name` instead of `displayName`. Note: Non-functional components were never impacted by this bug. ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information Dev build: `7.0.2-dev.11681308435.141a05de` --- core/package-lock.json | 14 +++++++------- core/package.json | 2 +- packages/vue/src/components/IonApp.ts | 2 ++ packages/vue/src/components/IonBackButton.ts | 2 ++ packages/vue/src/components/IonNav.ts | 2 ++ packages/vue/src/vue-component-lib/overlays.ts | 2 +- packages/vue/src/vue-component-lib/utils.ts | 2 +- 7 files changed, 16 insertions(+), 10 deletions(-) diff --git a/core/package-lock.json b/core/package-lock.json index 06bd5ef2c8..7d06a72c6e 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -24,7 +24,7 @@ "@stencil/angular-output-target": "^0.6.0", "@stencil/react-output-target": "^0.5.0", "@stencil/sass": "^3.0.0", - "@stencil/vue-output-target": "^0.8.1", + "@stencil/vue-output-target": "^0.8.2", "@types/jest": "^27.5.2", "@types/node": "^14.6.0", "@typescript-eslint/eslint-plugin": "^5.17.0", @@ -1624,9 +1624,9 @@ } }, "node_modules/@stencil/vue-output-target": { - "version": "0.8.1", - "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.1.tgz", - "integrity": "sha512-nSpwTvDa+i1Du8wxzX8OWp0QTS5DQmiwVNjdzQWBzeI77fCvS5mTMBsXwXbtURkR7emkm/ktMU05wXX8mnbWiQ==", + "version": "0.8.2", + "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.2.tgz", + "integrity": "sha512-Z+igq/pz7z9bSRH0tVxHvD/m13B6MPM+i2DZRboGt3uyTKeD1vLZQz3BLCfPeBtEXp2Xlz4d18Z8d7c4abFKbg==", "dev": true, "peerDependencies": { "@stencil/core": "^2.9.0 || ^3.0.0" @@ -11486,9 +11486,9 @@ "requires": {} }, "@stencil/vue-output-target": { - "version": "0.8.1", - "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.1.tgz", - "integrity": "sha512-nSpwTvDa+i1Du8wxzX8OWp0QTS5DQmiwVNjdzQWBzeI77fCvS5mTMBsXwXbtURkR7emkm/ktMU05wXX8mnbWiQ==", + "version": "0.8.2", + "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.2.tgz", + "integrity": "sha512-Z+igq/pz7z9bSRH0tVxHvD/m13B6MPM+i2DZRboGt3uyTKeD1vLZQz3BLCfPeBtEXp2Xlz4d18Z8d7c4abFKbg==", "dev": true, "requires": {} }, diff --git a/core/package.json b/core/package.json index b187469f27..0dcbfcc97c 100644 --- a/core/package.json +++ b/core/package.json @@ -46,7 +46,7 @@ "@stencil/angular-output-target": "^0.6.0", "@stencil/react-output-target": "^0.5.0", "@stencil/sass": "^3.0.0", - "@stencil/vue-output-target": "^0.8.1", + "@stencil/vue-output-target": "^0.8.2", "@types/jest": "^27.5.2", "@types/node": "^14.6.0", "@typescript-eslint/eslint-plugin": "^5.17.0", diff --git a/packages/vue/src/components/IonApp.ts b/packages/vue/src/components/IonApp.ts index 7a3e184c7b..4b3b4fe149 100644 --- a/packages/vue/src/components/IonApp.ts +++ b/packages/vue/src/components/IonApp.ts @@ -16,6 +16,8 @@ export const IonApp = /*@__PURE__*/ defineComponent((_, { attrs, slots }) => { }; }); +IonApp.name = "IonApp"; + /** * When rendering user components inside of * ion-modal, or ion-popover the component diff --git a/packages/vue/src/components/IonBackButton.ts b/packages/vue/src/components/IonBackButton.ts index 8b0182822f..e6dba3a71b 100644 --- a/packages/vue/src/components/IonBackButton.ts +++ b/packages/vue/src/components/IonBackButton.ts @@ -36,3 +36,5 @@ export const IonBackButton = /*@__PURE__*/ defineComponent( }; } ); + +IonBackButton.name = "IonBackButton"; diff --git a/packages/vue/src/components/IonNav.ts b/packages/vue/src/components/IonNav.ts index 4c294d098b..437734d159 100644 --- a/packages/vue/src/components/IonNav.ts +++ b/packages/vue/src/components/IonNav.ts @@ -22,3 +22,5 @@ export const IonNav = /*@__PURE__*/ defineComponent(() => { return h("ion-nav", { delegate }, views.value); }; }); + +IonNav.name = "IonNav"; diff --git a/packages/vue/src/vue-component-lib/overlays.ts b/packages/vue/src/vue-component-lib/overlays.ts index e962daf693..d47cceefa1 100644 --- a/packages/vue/src/vue-component-lib/overlays.ts +++ b/packages/vue/src/vue-component-lib/overlays.ts @@ -173,7 +173,7 @@ export const defineOverlayContainer = (name: string, defin const Container = (controller !== undefined) ? createControllerComponent() : createInlineComponent(); - Container.displayName = name; + Container.name = name; Container.props = { 'isOpen': DEFAULT_EMPTY_PROP diff --git a/packages/vue/src/vue-component-lib/utils.ts b/packages/vue/src/vue-component-lib/utils.ts index 9381dc917b..e9d8c22dd2 100644 --- a/packages/vue/src/vue-component-lib/utils.ts +++ b/packages/vue/src/vue-component-lib/utils.ts @@ -184,7 +184,7 @@ export const defineContainer = ( }; }); - Container.displayName = name; + Container.name = name; Container.props = { [ROUTER_LINK_VALUE]: DEFAULT_EMPTY_PROP,