From 13bcb15860cc4ff98bd131d044c964ed57bc4df3 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 26 Feb 2021 10:53:03 -0500 Subject: [PATCH 1/5] add fix --- core/stencil.config.ts | 4 ++-- packages/vue/src/ionic-vue.ts | 29 +++++++++++++++++++++++------ packages/vue/src/proxies.ts | 24 ++++++++++++------------ 3 files changed, 37 insertions(+), 20 deletions(-) diff --git a/core/stencil.config.ts b/core/stencil.config.ts index d331a5d8cac..7370af076a6 100644 --- a/core/stencil.config.ts +++ b/core/stencil.config.ts @@ -91,13 +91,13 @@ export const config: Config = { { elements: ['ion-checkbox', 'ion-toggle'], targetAttr: 'checked', - event: 'v-ionChange', + event: 'v-ion-change', externalEvent: 'ionChange' }, { elements: ['ion-datetime', 'ion-input', 'ion-radio-group', 'ion-radio', 'ion-range', 'ion-searchbar', 'ion-segment', 'ion-segment-button', 'ion-select', 'ion-textarea'], targetAttr: 'value', - event: 'v-ionChange', + event: 'v-ion-change', externalEvent: 'ionChange' } ], diff --git a/packages/vue/src/ionic-vue.ts b/packages/vue/src/ionic-vue.ts index 0e166d86fe4..857fea231cf 100644 --- a/packages/vue/src/ionic-vue.ts +++ b/packages/vue/src/ionic-vue.ts @@ -2,22 +2,39 @@ import { App, Plugin } from 'vue'; import { IonicConfig, setupConfig } from '@ionic/core'; import { applyPolyfills, defineCustomElements } from '@ionic/core/loader'; +const needsKebabCase = (version: string) => { + return !['3.0.0', '3.0.1', '3.0.2', '3.0.3', '3.0.4', '3.0.5'].includes(version); +} + /** * We need to make sure that the web component fires an event * that will not conflict with the user's @ionChange binding, * otherwise the binding's callback will fire before any * v-model values have been updated. */ -const transformEventName = (eventName: string) => { +const toLowerCase = (eventName: string) => { return eventName === 'ionChange' ? 'v-ionchange' : eventName.toLowerCase(); } -const ael = (el: any, eventName: string, cb: any, opts: any) => el.addEventListener(transformEventName(eventName), cb, opts); -const rel = (el: any, eventName: string, cb: any, opts: any) => el.removeEventListener(transformEventName(eventName), cb, opts); -export const IonicVue: Plugin = { +const toKebabCase = (eventName: string) => { + return eventName === 'ionChange' ? 'v-ion-change' : eventName.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase(); +} + +const getHelperFunctions = (needsKebabCase: boolean = true) => { + const conversionFn = (needsKebabCase) ? toKebabCase : toLowerCase; - async install(_app: App, config: IonicConfig = {}) { + return { + ael: (el: any, eventName: string, cb: any, opts: any) => el.addEventListener(conversionFn(eventName), cb, opts), + rel: (el: any, eventName: string, cb: any, opts: any) => el.removeEventListener(conversionFn(eventName), cb, opts), + ce: (eventName: string, opts: any) => new CustomEvent(conversionFn(eventName), opts) + } +} + +export const IonicVue: Plugin = { + async install(app: App, config: IonicConfig = {}) { if (typeof (window as any) !== 'undefined') { + const { ael, rel, ce } = getHelperFunctions(needsKebabCase(app.version)); + setupConfig({ ...config, _ael: ael, @@ -26,7 +43,7 @@ export const IonicVue: Plugin = { await applyPolyfills(); await defineCustomElements(window, { exclude: ['ion-tabs'], - ce: (eventName: string, opts: any) => new CustomEvent(transformEventName(eventName), opts), + ce, ael, rel } as any); diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index e8bda1f50a2..bca285a4ec8 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -97,7 +97,7 @@ export const IonCheckbox = /*@__PURE__*/ defineContainer('ion-c ], { "modelProp": "checked", - "modelUpdateEvent": "v-ionChange", + "modelUpdateEvent": "v-ion-change", "externalModelUpdateEvent": "ionChange" }); @@ -181,7 +181,7 @@ export const IonDatetime = /*@__PURE__*/ defineContainer('ion-d ], { "modelProp": "value", - "modelUpdateEvent": "v-ionChange", + "modelUpdateEvent": "v-ion-change", "externalModelUpdateEvent": "ionChange" }); @@ -296,7 +296,7 @@ export const IonInput = /*@__PURE__*/ defineContainer('ion-input', ], { "modelProp": "value", - "modelUpdateEvent": "v-ionChange", + "modelUpdateEvent": "v-ion-change", "externalModelUpdateEvent": "ionChange" }); @@ -448,7 +448,7 @@ export const IonRadio = /*@__PURE__*/ defineContainer('ion-radio', ], { "modelProp": "value", - "modelUpdateEvent": "v-ionChange", + "modelUpdateEvent": "v-ion-change", "externalModelUpdateEvent": "ionChange" }); @@ -461,7 +461,7 @@ export const IonRadioGroup = /*@__PURE__*/ defineContainer('i ], { "modelProp": "value", - "modelUpdateEvent": "v-ionChange", + "modelUpdateEvent": "v-ion-change", "externalModelUpdateEvent": "ionChange" }); @@ -486,7 +486,7 @@ export const IonRange = /*@__PURE__*/ defineContainer('ion-range', ], { "modelProp": "value", - "modelUpdateEvent": "v-ionChange", + "modelUpdateEvent": "v-ion-change", "externalModelUpdateEvent": "ionChange" }); @@ -557,7 +557,7 @@ export const IonSearchbar = /*@__PURE__*/ defineContainer('ion ], { "modelProp": "value", - "modelUpdateEvent": "v-ionChange", + "modelUpdateEvent": "v-ion-change", "externalModelUpdateEvent": "ionChange" }); @@ -574,7 +574,7 @@ export const IonSegment = /*@__PURE__*/ defineContainer('ion-seg ], { "modelProp": "value", - "modelUpdateEvent": "v-ionChange", + "modelUpdateEvent": "v-ion-change", "externalModelUpdateEvent": "ionChange" }); @@ -587,7 +587,7 @@ export const IonSegmentButton = /*@__PURE__*/ defineContainer('ion-selec ], { "modelProp": "value", - "modelUpdateEvent": "v-ionChange", + "modelUpdateEvent": "v-ion-change", "externalModelUpdateEvent": "ionChange" }); @@ -705,7 +705,7 @@ export const IonTextarea = /*@__PURE__*/ defineContainer('ion-t ], { "modelProp": "value", - "modelUpdateEvent": "v-ionChange", + "modelUpdateEvent": "v-ion-change", "externalModelUpdateEvent": "ionChange" }); @@ -733,7 +733,7 @@ export const IonToggle = /*@__PURE__*/ defineContainer('ion-toggl ], { "modelProp": "checked", - "modelUpdateEvent": "v-ionChange", + "modelUpdateEvent": "v-ion-change", "externalModelUpdateEvent": "ionChange" }); From 031dde7a90eeead38ebeba016dbc578f9793ace1 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 26 Feb 2021 12:13:36 -0500 Subject: [PATCH 2/5] bump --- core/package-lock.json | 14 ++--- core/package.json | 2 +- core/stencil.config.ts | 6 ++- packages/vue/src/proxies.ts | 60 ++++++++++++++++----- packages/vue/src/vue-component-lib/utils.ts | 33 +++++++----- 5 files changed, 79 insertions(+), 36 deletions(-) diff --git a/core/package-lock.json b/core/package-lock.json index 8ce5922d470..46310aacd64 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -17,7 +17,7 @@ "@rollup/plugin-virtual": "^2.0.3", "@stencil/core": "2.1.2", "@stencil/sass": "1.3.2", - "@stencil/vue-output-target": "0.3.0", + "@stencil/vue-output-target": "^0.4.0", "@types/jest": "^26.0.10", "@types/node": "^14.6.0", "@types/puppeteer": "3.0.1", @@ -1657,9 +1657,9 @@ "dev": true }, "node_modules/@stencil/vue-output-target": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.3.0.tgz", - "integrity": "sha512-uiBe+o7M+NU0gMRgJfrlepxLPBXK0lX4TL2jIPwhBfxYw++pbtg7BLRO2HxE69GR0nxw+7Uf3uJzOGbMsl+ZUQ==", + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.4.0.tgz", + "integrity": "sha512-bKCuGZRJclA99TVMHwmVa3wQNcOqEdVNz6FqokAFAt7ED3blFJUzaep7z9b35hBgAXnRptiNKMU4PLSBmlNXSw==", "dev": true, "peerDependencies": { "@stencil/core": ">=1.8.0" @@ -16390,9 +16390,9 @@ "dev": true }, "@stencil/vue-output-target": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.3.0.tgz", - "integrity": "sha512-uiBe+o7M+NU0gMRgJfrlepxLPBXK0lX4TL2jIPwhBfxYw++pbtg7BLRO2HxE69GR0nxw+7Uf3uJzOGbMsl+ZUQ==", + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.4.0.tgz", + "integrity": "sha512-bKCuGZRJclA99TVMHwmVa3wQNcOqEdVNz6FqokAFAt7ED3blFJUzaep7z9b35hBgAXnRptiNKMU4PLSBmlNXSw==", "dev": true }, "@stylelint/postcss-css-in-js": { diff --git a/core/package.json b/core/package.json index e52f75c0bc2..428c408e729 100644 --- a/core/package.json +++ b/core/package.json @@ -38,7 +38,7 @@ "@rollup/plugin-virtual": "^2.0.3", "@stencil/core": "2.1.2", "@stencil/sass": "1.3.2", - "@stencil/vue-output-target": "0.3.0", + "@stencil/vue-output-target": "^0.4.0", "@types/jest": "^26.0.10", "@types/node": "^14.6.0", "@types/puppeteer": "3.0.1", diff --git a/core/stencil.config.ts b/core/stencil.config.ts index 7370af076a6..677e9d26f05 100644 --- a/core/stencil.config.ts +++ b/core/stencil.config.ts @@ -91,13 +91,15 @@ export const config: Config = { { elements: ['ion-checkbox', 'ion-toggle'], targetAttr: 'checked', - event: 'v-ion-change', + // TODO Ionic v6 remove in favor of v-ion-change + event: ['v-ionChange', 'v-ion-change'], externalEvent: 'ionChange' }, { elements: ['ion-datetime', 'ion-input', 'ion-radio-group', 'ion-radio', 'ion-range', 'ion-searchbar', 'ion-segment', 'ion-segment-button', 'ion-select', 'ion-textarea'], targetAttr: 'value', - event: 'v-ion-change', + // TODO Ionic v6 remove in favor of v-ion-change + event: ['v-ionChange', 'v-ion-change'], externalEvent: 'ionChange' } ], diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index bca285a4ec8..4e7fb78e34b 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -97,7 +97,10 @@ export const IonCheckbox = /*@__PURE__*/ defineContainer('ion-c ], { "modelProp": "checked", - "modelUpdateEvent": "v-ion-change", + "modelUpdateEvent": [ + "v-ionChange", + "v-ion-change" + ], "externalModelUpdateEvent": "ionChange" }); @@ -181,7 +184,10 @@ export const IonDatetime = /*@__PURE__*/ defineContainer('ion-d ], { "modelProp": "value", - "modelUpdateEvent": "v-ion-change", + "modelUpdateEvent": [ + "v-ionChange", + "v-ion-change" + ], "externalModelUpdateEvent": "ionChange" }); @@ -296,7 +302,10 @@ export const IonInput = /*@__PURE__*/ defineContainer('ion-input', ], { "modelProp": "value", - "modelUpdateEvent": "v-ion-change", + "modelUpdateEvent": [ + "v-ionChange", + "v-ion-change" + ], "externalModelUpdateEvent": "ionChange" }); @@ -448,7 +457,10 @@ export const IonRadio = /*@__PURE__*/ defineContainer('ion-radio', ], { "modelProp": "value", - "modelUpdateEvent": "v-ion-change", + "modelUpdateEvent": [ + "v-ionChange", + "v-ion-change" + ], "externalModelUpdateEvent": "ionChange" }); @@ -461,7 +473,10 @@ export const IonRadioGroup = /*@__PURE__*/ defineContainer('i ], { "modelProp": "value", - "modelUpdateEvent": "v-ion-change", + "modelUpdateEvent": [ + "v-ionChange", + "v-ion-change" + ], "externalModelUpdateEvent": "ionChange" }); @@ -486,7 +501,10 @@ export const IonRange = /*@__PURE__*/ defineContainer('ion-range', ], { "modelProp": "value", - "modelUpdateEvent": "v-ion-change", + "modelUpdateEvent": [ + "v-ionChange", + "v-ion-change" + ], "externalModelUpdateEvent": "ionChange" }); @@ -557,7 +575,10 @@ export const IonSearchbar = /*@__PURE__*/ defineContainer('ion ], { "modelProp": "value", - "modelUpdateEvent": "v-ion-change", + "modelUpdateEvent": [ + "v-ionChange", + "v-ion-change" + ], "externalModelUpdateEvent": "ionChange" }); @@ -574,7 +595,10 @@ export const IonSegment = /*@__PURE__*/ defineContainer('ion-seg ], { "modelProp": "value", - "modelUpdateEvent": "v-ion-change", + "modelUpdateEvent": [ + "v-ionChange", + "v-ion-change" + ], "externalModelUpdateEvent": "ionChange" }); @@ -587,7 +611,10 @@ export const IonSegmentButton = /*@__PURE__*/ defineContainer('ion-selec ], { "modelProp": "value", - "modelUpdateEvent": "v-ion-change", + "modelUpdateEvent": [ + "v-ionChange", + "v-ion-change" + ], "externalModelUpdateEvent": "ionChange" }); @@ -705,7 +735,10 @@ export const IonTextarea = /*@__PURE__*/ defineContainer('ion-t ], { "modelProp": "value", - "modelUpdateEvent": "v-ion-change", + "modelUpdateEvent": [ + "v-ionChange", + "v-ion-change" + ], "externalModelUpdateEvent": "ionChange" }); @@ -733,7 +766,10 @@ export const IonToggle = /*@__PURE__*/ defineContainer('ion-toggl ], { "modelProp": "checked", - "modelUpdateEvent": "v-ion-change", + "modelUpdateEvent": [ + "v-ionChange", + "v-ion-change" + ], "externalModelUpdateEvent": "ionChange" }); diff --git a/packages/vue/src/vue-component-lib/utils.ts b/packages/vue/src/vue-component-lib/utils.ts index e9a994c9a41..176fc77652a 100644 --- a/packages/vue/src/vue-component-lib/utils.ts +++ b/packages/vue/src/vue-component-lib/utils.ts @@ -16,7 +16,7 @@ interface NavManager { interface ComponentOptions { modelProp?: string; - modelUpdateEvent?: string; + modelUpdateEvent?: string | string[]; externalModelUpdateEvent?: string; } @@ -55,19 +55,22 @@ export const defineContainer = (name: string, componentProps: string[] = const onVnodeBeforeMount = (vnode: VNode) => { // Add a listener to tell Vue to update the v-model if (vnode.el) { - vnode.el.addEventListener(modelUpdateEvent.toLowerCase(), (e: Event) => { - modelPropValue = (e?.target as any)[modelProp]; - emit(UPDATE_VALUE_EVENT, modelPropValue); - - /** - * We need to emit the change event here - * rather than on the web component to ensure - * that any v-model bindings have been updated. - * Otherwise, the developer will listen on the - * native web component, but the v-model will - * not have been updated yet. - */ - emit(externalModelUpdateEvent, e); + const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent]; + eventsNames.forEach((eventName: string) => { + vnode.el.addEventListener(eventName.toLowerCase(), (e: Event) => { + modelPropValue = (e?.target as any)[modelProp]; + emit(UPDATE_VALUE_EVENT, modelPropValue); + + /** + * We need to emit the change event here + * rather than on the web component to ensure + * that any v-model bindings have been updated. + * Otherwise, the developer will listen on the + * native web component, but the v-model will + * not have been updated yet. + */ + emit(externalModelUpdateEvent, e); + }); }); } }; @@ -93,6 +96,8 @@ export const defineContainer = (name: string, componentProps: string[] = } return () => { + modelPropValue = (props as any)[modelProp]; + getComponentClasses(attrs.class).forEach(value => { classes.add(value); }); From 5c11a4e3e73697d12e975f7071f0db8ed45cb0bc Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 26 Feb 2021 12:25:30 -0500 Subject: [PATCH 3/5] fix: --- core/package-lock.json | 14 ++-- core/package.json | 2 +- packages/vue/package-lock.json | 93 +++++++++++++++++++++ packages/vue/package.json | 3 +- packages/vue/src/ionic-vue.ts | 44 +++++----- packages/vue/src/vue-component-lib/utils.ts | 2 - 6 files changed, 125 insertions(+), 33 deletions(-) diff --git a/core/package-lock.json b/core/package-lock.json index 46310aacd64..b335dabce80 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -17,7 +17,7 @@ "@rollup/plugin-virtual": "^2.0.3", "@stencil/core": "2.1.2", "@stencil/sass": "1.3.2", - "@stencil/vue-output-target": "^0.4.0", + "@stencil/vue-output-target": "^0.4.1", "@types/jest": "^26.0.10", "@types/node": "^14.6.0", "@types/puppeteer": "3.0.1", @@ -1657,9 +1657,9 @@ "dev": true }, "node_modules/@stencil/vue-output-target": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.4.0.tgz", - "integrity": "sha512-bKCuGZRJclA99TVMHwmVa3wQNcOqEdVNz6FqokAFAt7ED3blFJUzaep7z9b35hBgAXnRptiNKMU4PLSBmlNXSw==", + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.4.1.tgz", + "integrity": "sha512-B4urIlIb+I95NkKeCt3Ygpor1D0x5RMezuFyCFp6DYXshUaT1TbiJcW1FgA+gfwlquNzT1AMvEbi96YLnsOg3w==", "dev": true, "peerDependencies": { "@stencil/core": ">=1.8.0" @@ -16390,9 +16390,9 @@ "dev": true }, "@stencil/vue-output-target": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.4.0.tgz", - "integrity": "sha512-bKCuGZRJclA99TVMHwmVa3wQNcOqEdVNz6FqokAFAt7ED3blFJUzaep7z9b35hBgAXnRptiNKMU4PLSBmlNXSw==", + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.4.1.tgz", + "integrity": "sha512-B4urIlIb+I95NkKeCt3Ygpor1D0x5RMezuFyCFp6DYXshUaT1TbiJcW1FgA+gfwlquNzT1AMvEbi96YLnsOg3w==", "dev": true }, "@stylelint/postcss-css-in-js": { diff --git a/core/package.json b/core/package.json index 428c408e729..17889e18729 100644 --- a/core/package.json +++ b/core/package.json @@ -38,7 +38,7 @@ "@rollup/plugin-virtual": "^2.0.3", "@stencil/core": "2.1.2", "@stencil/sass": "1.3.2", - "@stencil/vue-output-target": "^0.4.0", + "@stencil/vue-output-target": "^0.4.1", "@types/jest": "^26.0.10", "@types/node": "^14.6.0", "@types/puppeteer": "3.0.1", diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json index 17b7ef4d4b1..6345e5d3b4b 100644 --- a/packages/vue/package-lock.json +++ b/packages/vue/package-lock.json @@ -15,6 +15,7 @@ "devDependencies": { "@stencil/core": "^1.17.0", "change-case": "^4.1.1", + "fs-extra": "^9.1.0", "rimraf": "^3.0.2", "rollup": "^2.32.1", "typescript": "^4.0.5", @@ -180,6 +181,15 @@ "integrity": "sha512-4XWL/avABGxU2E2ZF1eZq3Tj7fvksCMssDZUHOykBIMmh5d+KcAnQMC5XHMhtnA0NAvktYsA2YpdsVwVmhWzvA==", "dev": true }, + "node_modules/at-least-node": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz", + "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==", + "dev": true, + "engines": { + "node": ">= 4.0.0" + } + }, "node_modules/balanced-match": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", @@ -276,6 +286,21 @@ "integrity": "sha512-tF0hv+Yi2Ot1cwj9eYHtxC0jB9bmjacjQs6ZBTj82H8JwUywFuc+7E83NWfNMwHXZc11mjfFcVXPe9gEP4B8dg==", "dev": true }, + "node_modules/fs-extra": { + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz", + "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==", + "dev": true, + "dependencies": { + "at-least-node": "^1.0.0", + "graceful-fs": "^4.2.0", + "jsonfile": "^6.0.1", + "universalify": "^2.0.0" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -312,6 +337,12 @@ "node": "*" } }, + "node_modules/graceful-fs": { + "version": "4.2.6", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz", + "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==", + "dev": true + }, "node_modules/header-case": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.3.tgz", @@ -343,6 +374,19 @@ "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-5.1.2.tgz", "integrity": "sha512-zO7ZgbBbXhpA7cXO2rDzTNdcCqErjg1Sprq/ossTvaiV0MriOjRE7JO3EGvYjDTPzF9YALGpvLXqCgsRT0tprA==" }, + "node_modules/jsonfile": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", + "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", + "dev": true, + "dependencies": { + "graceful-fs": "^4.1.6", + "universalify": "^2.0.0" + }, + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, "node_modules/lodash": { "version": "4.17.20", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz", @@ -516,6 +560,15 @@ "node": ">=4.2.0" } }, + "node_modules/universalify": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", + "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==", + "dev": true, + "engines": { + "node": ">= 10.0.0" + } + }, "node_modules/upper-case": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.1.tgz", @@ -692,6 +745,12 @@ "integrity": "sha512-4XWL/avABGxU2E2ZF1eZq3Tj7fvksCMssDZUHOykBIMmh5d+KcAnQMC5XHMhtnA0NAvktYsA2YpdsVwVmhWzvA==", "dev": true }, + "at-least-node": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz", + "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==", + "dev": true + }, "balanced-match": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", @@ -788,6 +847,18 @@ "integrity": "sha512-tF0hv+Yi2Ot1cwj9eYHtxC0jB9bmjacjQs6ZBTj82H8JwUywFuc+7E83NWfNMwHXZc11mjfFcVXPe9gEP4B8dg==", "dev": true }, + "fs-extra": { + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz", + "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==", + "dev": true, + "requires": { + "at-least-node": "^1.0.0", + "graceful-fs": "^4.2.0", + "jsonfile": "^6.0.1", + "universalify": "^2.0.0" + } + }, "fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -815,6 +886,12 @@ "path-is-absolute": "^1.0.0" } }, + "graceful-fs": { + "version": "4.2.6", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz", + "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==", + "dev": true + }, "header-case": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.3.tgz", @@ -846,6 +923,16 @@ "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-5.1.2.tgz", "integrity": "sha512-zO7ZgbBbXhpA7cXO2rDzTNdcCqErjg1Sprq/ossTvaiV0MriOjRE7JO3EGvYjDTPzF9YALGpvLXqCgsRT0tprA==" }, + "jsonfile": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", + "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", + "dev": true, + "requires": { + "graceful-fs": "^4.1.6", + "universalify": "^2.0.0" + } + }, "lodash": { "version": "4.17.20", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz", @@ -988,6 +1075,12 @@ "integrity": "sha512-ywmr/VrTVCmNTJ6iV2LwIrfG1P+lv6luD8sUJs+2eI9NLGigaN+nUQc13iHqisq7bra9lnmUSYqbJvegraBOPQ==", "dev": true }, + "universalify": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", + "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==", + "dev": true + }, "upper-case": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.1.tgz", diff --git a/packages/vue/package.json b/packages/vue/package.json index a5e61748e5f..f5b4b169450 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -49,6 +49,7 @@ "devDependencies": { "@stencil/core": "^1.17.0", "change-case": "^4.1.1", + "fs-extra": "^9.1.0", "rimraf": "^3.0.2", "rollup": "^2.32.1", "typescript": "^4.0.5", @@ -56,7 +57,7 @@ "vue-router": "^4.0.0-rc.4" }, "dependencies": { - "@ionic/core": "5.5.4", + "@ionic/core": "file:../../core", "ionicons": "^5.1.2" }, "vetur": { diff --git a/packages/vue/src/ionic-vue.ts b/packages/vue/src/ionic-vue.ts index 857fea231cf..fd3d196d457 100644 --- a/packages/vue/src/ionic-vue.ts +++ b/packages/vue/src/ionic-vue.ts @@ -2,39 +2,39 @@ import { App, Plugin } from 'vue'; import { IonicConfig, setupConfig } from '@ionic/core'; import { applyPolyfills, defineCustomElements } from '@ionic/core/loader'; -const needsKebabCase = (version: string) => { - return !['3.0.0', '3.0.1', '3.0.2', '3.0.3', '3.0.4', '3.0.5'].includes(version); -} +const needsKebabCase = (version: string) => !['3.0.0', '3.0.1', '3.0.2', '3.0.3', '3.0.4', '3.0.5'].includes(version); /** - * We need to make sure that the web component fires an event - * that will not conflict with the user's @ionChange binding, - * otherwise the binding's callback will fire before any - * v-model values have been updated. - */ -const toLowerCase = (eventName: string) => { - return eventName === 'ionChange' ? 'v-ionchange' : eventName.toLowerCase(); -} - -const toKebabCase = (eventName: string) => { - return eventName === 'ionChange' ? 'v-ion-change' : eventName.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase(); -} +* We need to make sure that the web component fires an event +* that will not conflict with the user's @ionChange binding, +* otherwise the binding's callback will fire before any +* v-model values have been updated. +*/ +const toLowerCase = (eventName: string) => eventName === 'ionChange' ? 'v-ionchange' : eventName.toLowerCase(); +const toKebabCase = (eventName: string) => eventName === 'ionChange' ? 'v-ion-change' : eventName.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase(); +/** + * Vue 3.0.6 fixed a bug where events on custom elements + * were always converted to lower case, so "ionRefresh" + * became "ionRefresh". We need to account for the old + * issue as well as the new behavior where "ionRefresh" + * is converted to "ion-refresh". + * See https://github.com/vuejs/vue-next/pull/2847 + */ const getHelperFunctions = (needsKebabCase: boolean = true) => { const conversionFn = (needsKebabCase) ? toKebabCase : toLowerCase; - return { - ael: (el: any, eventName: string, cb: any, opts: any) => el.addEventListener(conversionFn(eventName), cb, opts), - rel: (el: any, eventName: string, cb: any, opts: any) => el.removeEventListener(conversionFn(eventName), cb, opts), - ce: (eventName: string, opts: any) => new CustomEvent(conversionFn(eventName), opts) - } -} + ael: (el: any, eventName: string, cb: any, opts: any) => el.addEventListener(conversionFn(eventName), cb, opts), + rel: (el: any, eventName: string, cb: any, opts: any) => el.removeEventListener(conversionFn(eventName), cb, opts), + ce: (eventName: string, opts: any) => new CustomEvent(conversionFn(eventName), opts) + }; +}; export const IonicVue: Plugin = { + async install(app: App, config: IonicConfig = {}) { if (typeof (window as any) !== 'undefined') { const { ael, rel, ce } = getHelperFunctions(needsKebabCase(app.version)); - setupConfig({ ...config, _ael: ael, diff --git a/packages/vue/src/vue-component-lib/utils.ts b/packages/vue/src/vue-component-lib/utils.ts index 176fc77652a..cdd75367ab8 100644 --- a/packages/vue/src/vue-component-lib/utils.ts +++ b/packages/vue/src/vue-component-lib/utils.ts @@ -96,8 +96,6 @@ export const defineContainer = (name: string, componentProps: string[] = } return () => { - modelPropValue = (props as any)[modelProp]; - getComponentClasses(attrs.class).forEach(value => { classes.add(value); }); From 0dce02f4da0a247c36b76ec0dcc59877eca72d7c Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 26 Feb 2021 12:39:37 -0500 Subject: [PATCH 4/5] update --- packages/vue/package-lock.json | 87 ++++++---------------------------- packages/vue/package.json | 2 +- 2 files changed, 15 insertions(+), 74 deletions(-) diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json index 6345e5d3b4b..dcf65638b0b 100644 --- a/packages/vue/package-lock.json +++ b/packages/vue/package-lock.json @@ -9,7 +9,7 @@ "version": "5.5.4", "license": "MIT", "dependencies": { - "@ionic/core": "file:../../core", + "@ionic/core": "5.5.4", "ionicons": "^5.1.2" }, "devDependencies": { @@ -23,43 +23,6 @@ "vue-router": "^4.0.0-rc.4" } }, - "../../core": { - "version": "5.5.3", - "license": "MIT", - "dependencies": { - "ionicons": "^5.1.2", - "tslib": "^1.10.0" - }, - "devDependencies": { - "@rollup/plugin-node-resolve": "^8.4.0", - "@rollup/plugin-virtual": "^2.0.3", - "@stencil/core": "2.1.2", - "@stencil/sass": "1.3.2", - "@stencil/vue-output-target": "0.3.0", - "@types/jest": "^26.0.10", - "@types/node": "^14.6.0", - "@types/puppeteer": "3.0.1", - "@types/swiper": "5.4.0", - "aws-sdk": "^2.738.0", - "clean-css-cli": "^4.1.11", - "domino": "^2.1.6", - "fs-extra": "^9.0.1", - "jest": "^26.4.1", - "jest-cli": "^26.4.1", - "np": "^6.4.0", - "pixelmatch": "4.0.2", - "puppeteer": "^5.2.1", - "rollup": "^2.26.4", - "sass": "^1.26.10", - "stylelint": "^13.6.1", - "stylelint-order": "^4.1.0", - "swiper": "5.4.1", - "tslint": "^6.1.3", - "tslint-ionic-rules": "0.0.21", - "tslint-react": "^5.0.0", - "typescript": "^4.0.5" - } - }, "node_modules/@babel/helper-validator-identifier": { "version": "7.10.4", "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz", @@ -90,8 +53,13 @@ } }, "node_modules/@ionic/core": { - "resolved": "../../core", - "link": true + "version": "5.5.4", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.5.4.tgz", + "integrity": "sha512-IjbGN8vh3XuJ2ulo3BMlMflcWlUhvEGEexr29JKFvb+O4bWKP5sC2fkqSrswrIstOmv7axm7CeIi2MNRkwYwVA==", + "dependencies": { + "ionicons": "^5.1.2", + "tslib": "^1.10.0" + } }, "node_modules/@stencil/core": { "version": "1.17.3", @@ -544,8 +512,7 @@ "node_modules/tslib": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", - "dev": true + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" }, "node_modules/typescript": { "version": "4.0.5", @@ -636,37 +603,12 @@ } }, "@ionic/core": { - "version": "file:../../core", + "version": "5.5.4", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.5.4.tgz", + "integrity": "sha512-IjbGN8vh3XuJ2ulo3BMlMflcWlUhvEGEexr29JKFvb+O4bWKP5sC2fkqSrswrIstOmv7axm7CeIi2MNRkwYwVA==", "requires": { - "@rollup/plugin-node-resolve": "^8.4.0", - "@rollup/plugin-virtual": "^2.0.3", - "@stencil/core": "2.1.2", - "@stencil/sass": "1.3.2", - "@stencil/vue-output-target": "0.3.0", - "@types/jest": "^26.0.10", - "@types/node": "^14.6.0", - "@types/puppeteer": "3.0.1", - "@types/swiper": "5.4.0", - "aws-sdk": "^2.738.0", - "clean-css-cli": "^4.1.11", - "domino": "^2.1.6", - "fs-extra": "^9.0.1", "ionicons": "^5.1.2", - "jest": "^26.4.1", - "jest-cli": "^26.4.1", - "np": "^6.4.0", - "pixelmatch": "4.0.2", - "puppeteer": "^5.2.1", - "rollup": "^2.26.4", - "sass": "^1.26.10", - "stylelint": "^13.6.1", - "stylelint-order": "^4.1.0", - "swiper": "5.4.1", - "tslib": "^1.10.0", - "tslint": "^6.1.3", - "tslint-ionic-rules": "0.0.21", - "tslint-react": "^5.0.0", - "typescript": "^4.0.5" + "tslib": "^1.10.0" } }, "@stencil/core": { @@ -1066,8 +1008,7 @@ "tslib": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", - "dev": true + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" }, "typescript": { "version": "4.0.5", diff --git a/packages/vue/package.json b/packages/vue/package.json index f5b4b169450..e6ed0349df2 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -57,7 +57,7 @@ "vue-router": "^4.0.0-rc.4" }, "dependencies": { - "@ionic/core": "file:../../core", + "@ionic/core": "5.5.4", "ionicons": "^5.1.2" }, "vetur": { From 8b57bfd8da20802507f6eb047689fdd7b67d8c6d Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 26 Feb 2021 12:49:37 -0500 Subject: [PATCH 5/5] build --- core/package-lock.json | 7 ------- 1 file changed, 7 deletions(-) diff --git a/core/package-lock.json b/core/package-lock.json index b335dabce80..26f277fbc9a 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -1081,7 +1081,6 @@ "jest-resolve": "^26.4.0", "jest-util": "^26.3.0", "jest-worker": "^26.3.0", - "node-notifier": "^8.0.0", "slash": "^3.0.0", "source-map": "^0.6.0", "string-length": "^4.0.1", @@ -3028,7 +3027,6 @@ "dependencies": { "anymatch": "~3.1.1", "braces": "~3.0.2", - "fsevents": "~2.1.2", "glob-parent": "~5.1.0", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", @@ -4449,7 +4447,6 @@ "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==", "dev": true, "dependencies": { - "@types/yauzl": "^2.9.1", "debug": "^4.1.1", "get-stream": "^5.1.0", "yauzl": "^2.10.0" @@ -7233,7 +7230,6 @@ "@types/node": "*", "anymatch": "^3.0.3", "fb-watchman": "^2.0.0", - "fsevents": "^2.1.2", "graceful-fs": "^4.2.4", "jest-regex-util": "^26.0.0", "jest-serializer": "^26.3.0", @@ -12059,9 +12055,6 @@ "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.26.4.tgz", "integrity": "sha512-6+qsGuP0MXGd7vlYmk72utm1MrgZj5GfXibGL+cRkKQ9+ZL/BnFThDl0D5bcl7AqlzMjAQXRAwZX1HVm22M/4Q==", "dev": true, - "dependencies": { - "fsevents": "~2.1.2" - }, "bin": { "rollup": "dist/bin/rollup" },