Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Jan 29, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fc40152
fix(vue): make update work
christian-bromann Jan 24, 2025
5404394
fix(vue): resolve remaining issues
christian-bromann Jan 25, 2025
793a6fa
move vue output target back into dev dependencies
christian-bromann Jan 25, 2025
e3d28dc
prettier
christian-bromann Jan 25, 2025
746b338
update vue output target
christian-bromann Jan 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
170 changes: 85 additions & 85 deletions packages/angular/src/directives/proxies.ts
View file
Open in desktop

Large diffs are not rendered by default.

148 changes: 74 additions & 74 deletions packages/angular/standalone/src/directives/proxies.ts
View file
Open in desktop

Large diffs are not rendered by default.

657 changes: 390 additions & 267 deletions packages/vue/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 4 additions & 2 deletions packages/vue/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this need to be here when we have it here:

ionic-framework/core/package.json

Line 53 in 0030be8

"@stencil/vue-output-target": "^0.9.0",

We don't do this for any of the other frameworks:

ionic-framework/packages/angular/package.json

Line 62 in 0030be8

"devDependencies": {

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this need to be here when we have it here:

Yes, starting with v0.9.0 we are shipping the Vue runtime as part of the package (see import { defineContainer } from '@stencil/vue-output-target/runtime'; in here). Since this code will be bundled with Rollup, we are ok keeping it as dev dependencies so for the Ionic user, nothing changes.

We don't do this for any of the other frameworks:

We will have to do the same once we update React. Angular doesn't ship a runtime export.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the info! Sounds good.

"@typescript-eslint/eslint-plugin": "^5.48.2",
"@typescript-eslint/parser": "^5.48.2",
"change-case": "^4.1.1",
Expand All @@ -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": {
Expand Down
13 changes: 11 additions & 2 deletions packages/vue/rollup.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import resolve from '@rollup/plugin-node-resolve';
import typescript from '@rollup/plugin-typescript';

const external = ['vue', 'vue-router'];

export default {
Expand All @@ -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')
)
};
7 changes: 3 additions & 4 deletions packages/vue/scripts/copy-overlays.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -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('')}
`;

Expand Down
32 changes: 18 additions & 14 deletions packages/vue/src/components/IonApp.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
5 changes: 3 additions & 2 deletions packages/vue/src/components/IonBackButton.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@ export const IonBackButton = /*@__PURE__*/ defineComponent(
slots.default && slots.default()
);
};
},
{
name: "IonBackButton",
}
);

IonBackButton.name = "IonBackButton";
98 changes: 50 additions & 48 deletions packages/vue/src/components/IonNav.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
},
}
);
2 changes: 1 addition & 1 deletion packages/vue/src/components/IonRouterOutlet.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
4 changes: 2 additions & 2 deletions packages/vue/src/components/IonTabBar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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: () => {} },
Expand Down
17 changes: 8 additions & 9 deletions packages/vue/src/components/Overlays.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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']);

Loading
Loading