From 06dda627489d0b68d78c073cda3ad6e54acac1de Mon Sep 17 00:00:00 2001 From: Jesse Rohland Date: Tue, 15 Nov 2022 15:39:20 -0500 Subject: [PATCH] fix: upgrade to vue 2.7 and remove @vue/composition-api --- build/rollup.config.min.ts | 3 +- build/rollup.config.ts | 3 +- docs/README.md | 1 - package-lock.json | 191 +++++++++++++----- package.json | 8 +- shims/vue.d.ts | 3 +- .../map/mixins/withPrivateMethods.ts | 15 +- src/components/map/options.ts | 2 +- src/install.ts | 2 - 9 files changed, 156 insertions(+), 72 deletions(-) diff --git a/build/rollup.config.min.ts b/build/rollup.config.min.ts index 296352c7..784f7160 100644 --- a/build/rollup.config.min.ts +++ b/build/rollup.config.min.ts @@ -69,10 +69,9 @@ export default { vue: 'vue', 'mapbox-gl': 'mapboxGl', 'map-promisified': 'mapPromisified', - '@vue/composition-api': 'vueCompositionApi', }, }, ], plugins, - external: ['vue', 'mapbox-gl', 'map-promisified', '@vue/composition-api'], + external: ['vue', 'mapbox-gl', 'map-promisified'], }; diff --git a/build/rollup.config.ts b/build/rollup.config.ts index d78c1e7c..1da4aa2d 100644 --- a/build/rollup.config.ts +++ b/build/rollup.config.ts @@ -77,10 +77,9 @@ export default { vue: 'vue', 'mapbox-gl': 'mapboxGl', 'map-promisified': 'mapPromisified', - '@vue/composition-api': 'vueCompositionApi', }, }, ], plugins, - external: ['vue', 'mapbox-gl', 'map-promisified', '@vue/composition-api'], + external: ['vue', 'mapbox-gl', 'map-promisified'], }; diff --git a/docs/README.md b/docs/README.md index 86d43f9d..5cb14b31 100644 --- a/docs/README.md +++ b/docs/README.md @@ -25,7 +25,6 @@ If you like a long story, check out [blog post](https://soal.red/reasoning-behin ::: tip Dependencies [Vue.js 2.6+](https://github.com/vuejs/vue) [Mapbox GL JS >=1 && < 2](https://github.com/mapbox/mapbox-gl-js) -[@vue/composition-api](https://www.npmjs.com/package/@vue/composition-api) [map-promisified](https://github.com/soal/map-promisified) ::: diff --git a/package-lock.json b/package-lock.json index 61b2e855..1ff1134b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,7 +27,6 @@ "@typescript-eslint/parser": "^5.6.0", "@vinayakkulkarni/prettier-config-vue": "^1.0.0", "@vue/component-compiler-utils": "^3.3.0", - "@vue/composition-api": "^1.4.1", "@vue/runtime-dom": "^3.2.24", "eslint": "^8.4.0", "eslint-config-prettier": "^8.3.0", @@ -51,8 +50,8 @@ "stylelint-config-standard": "^25.0.0", "stylelint-config-standard-scss": "^3.0.0", "typescript": "^4.5.2", - "vue": "^2.6.14", - "vue-template-compiler": "^2.6.14", + "vue": "^2.7.14", + "vue-template-compiler": "^2.7.14", "vuepress": "^1.8.2" }, "engines": { @@ -60,9 +59,8 @@ "npm": ">=7.20.0" }, "peerDependencies": { - "@vue/composition-api": "^1.4.1", "mapbox-gl": "1.13.2", - "vue": "^2.6.14" + "vue": "^2.7.14" } }, "node_modules/@babel/code-frame": { @@ -483,9 +481,9 @@ } }, "node_modules/@babel/parser": { - "version": "7.16.8", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.8.tgz", - "integrity": "sha512-i7jDUfrVBWc+7OKcBzEe5n7fbv3i2fWtxKzzCvOjnzSxMfWMigAhtfJ7qzZNGFNMsCCd67+uz553dYKWXPvCKw==", + "version": "7.20.3", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.3.tgz", + "integrity": "sha512-OP/s5a94frIPXwjzEcv5S/tpQfc6XhxYUnmWpgdqMWGgYCuErA3SzozaRAMQgSZWKeTJxht9aWAkUY+0UzvOFg==", "dev": true, "bin": { "parser": "bin/babel-parser.js" @@ -3608,6 +3606,59 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@vue/compiler-sfc": { + "version": "2.7.14", + "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.14.tgz", + "integrity": "sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==", + "dev": true, + "dependencies": { + "@babel/parser": "^7.18.4", + "postcss": "^8.4.14", + "source-map": "^0.6.1" + } + }, + "node_modules/@vue/compiler-sfc/node_modules/postcss": { + "version": "8.4.19", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz", + "integrity": "sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + } + ], + "dependencies": { + "nanoid": "^3.3.4", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/@vue/compiler-sfc/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/@vue/compiler-sfc/node_modules/source-map-js": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", + "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/@vue/component-compiler": { "version": "4.2.4", "resolved": "https://registry.npmjs.org/@vue/component-compiler/-/component-compiler-4.2.4.tgz", @@ -3684,15 +3735,6 @@ "node": ">=0.10.0" } }, - "node_modules/@vue/composition-api": { - "version": "1.4.9", - "resolved": "https://registry.npmjs.org/@vue/composition-api/-/composition-api-1.4.9.tgz", - "integrity": "sha512-l6YOeg5LEXmfPqyxAnBaCv1FMRw0OGKJ4m6nOWRm6ngt5TuHcj5ZoBRN+LXh3J0u6Ur3C4VA+RiKT+M0eItr/g==", - "dev": true, - "peerDependencies": { - "vue": ">= 2.5 < 3" - } - }, "node_modules/@vue/reactivity": { "version": "3.2.31", "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.31.tgz", @@ -14892,9 +14934,9 @@ "optional": true }, "node_modules/nanoid": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz", - "integrity": "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==", + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", + "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==", "dev": true, "bin": { "nanoid": "bin/nanoid.cjs" @@ -21879,10 +21921,14 @@ } }, "node_modules/vue": { - "version": "2.6.14", - "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz", - "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==", - "dev": true + "version": "2.7.14", + "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.14.tgz", + "integrity": "sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ==", + "dev": true, + "dependencies": { + "@vue/compiler-sfc": "2.7.14", + "csstype": "^3.1.0" + } }, "node_modules/vue-eslint-parser": { "version": "8.0.1", @@ -22088,13 +22134,13 @@ } }, "node_modules/vue-template-compiler": { - "version": "2.6.14", - "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.14.tgz", - "integrity": "sha512-ODQS1SyMbjKoO1JBJZojSw6FE4qnh9rIpUZn2EUT86FKizx9uH5z6uXiIrm4/Nb/gwxTi/o17ZDEGWAXHvtC7g==", + "version": "2.7.14", + "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz", + "integrity": "sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==", "dev": true, "dependencies": { "de-indent": "^1.0.2", - "he": "^1.1.0" + "he": "^1.2.0" } }, "node_modules/vue-template-es2015-compiler": { @@ -22103,6 +22149,12 @@ "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "dev": true }, + "node_modules/vue/node_modules/csstype": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz", + "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==", + "dev": true + }, "node_modules/vuepress": { "version": "1.9.7", "resolved": "https://registry.npmjs.org/vuepress/-/vuepress-1.9.7.tgz", @@ -24602,9 +24654,9 @@ } }, "@babel/parser": { - "version": "7.16.8", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.8.tgz", - "integrity": "sha512-i7jDUfrVBWc+7OKcBzEe5n7fbv3i2fWtxKzzCvOjnzSxMfWMigAhtfJ7qzZNGFNMsCCd67+uz553dYKWXPvCKw==", + "version": "7.20.3", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.3.tgz", + "integrity": "sha512-OP/s5a94frIPXwjzEcv5S/tpQfc6XhxYUnmWpgdqMWGgYCuErA3SzozaRAMQgSZWKeTJxht9aWAkUY+0UzvOFg==", "dev": true }, "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": { @@ -26925,6 +26977,42 @@ "camelcase": "^5.0.0" } }, + "@vue/compiler-sfc": { + "version": "2.7.14", + "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.14.tgz", + "integrity": "sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==", + "dev": true, + "requires": { + "@babel/parser": "^7.18.4", + "postcss": "^8.4.14", + "source-map": "^0.6.1" + }, + "dependencies": { + "postcss": { + "version": "8.4.19", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz", + "integrity": "sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==", + "dev": true, + "requires": { + "nanoid": "^3.3.4", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + }, + "source-map-js": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", + "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "dev": true + } + } + }, "@vue/component-compiler": { "version": "4.2.4", "resolved": "https://registry.npmjs.org/@vue/component-compiler/-/component-compiler-4.2.4.tgz", @@ -26991,13 +27079,6 @@ } } }, - "@vue/composition-api": { - "version": "1.4.9", - "resolved": "https://registry.npmjs.org/@vue/composition-api/-/composition-api-1.4.9.tgz", - "integrity": "sha512-l6YOeg5LEXmfPqyxAnBaCv1FMRw0OGKJ4m6nOWRm6ngt5TuHcj5ZoBRN+LXh3J0u6Ur3C4VA+RiKT+M0eItr/g==", - "dev": true, - "requires": {} - }, "@vue/reactivity": { "version": "3.2.31", "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.31.tgz", @@ -36053,9 +36134,9 @@ "optional": true }, "nanoid": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz", - "integrity": "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==", + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", + "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==", "dev": true }, "nanomatch": { @@ -41716,10 +41797,22 @@ } }, "vue": { - "version": "2.6.14", - "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz", - "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==", - "dev": true + "version": "2.7.14", + "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.14.tgz", + "integrity": "sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ==", + "dev": true, + "requires": { + "@vue/compiler-sfc": "2.7.14", + "csstype": "^3.1.0" + }, + "dependencies": { + "csstype": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz", + "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==", + "dev": true + } + } }, "vue-eslint-parser": { "version": "8.0.1", @@ -41878,13 +41971,13 @@ } }, "vue-template-compiler": { - "version": "2.6.14", - "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.14.tgz", - "integrity": "sha512-ODQS1SyMbjKoO1JBJZojSw6FE4qnh9rIpUZn2EUT86FKizx9uH5z6uXiIrm4/Nb/gwxTi/o17ZDEGWAXHvtC7g==", + "version": "2.7.14", + "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz", + "integrity": "sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==", "dev": true, "requires": { "de-indent": "^1.0.2", - "he": "^1.1.0" + "he": "^1.2.0" } }, "vue-template-es2015-compiler": { diff --git a/package.json b/package.json index 4238b180..6c5df1fa 100644 --- a/package.json +++ b/package.json @@ -37,9 +37,8 @@ "map-promisified": "^0.4.0" }, "peerDependencies": { - "@vue/composition-api": "^1.4.1", "mapbox-gl": "1.13.2", - "vue": "^2.6.14" + "vue": "^2.7.14" }, "devDependencies": { "@babel/preset-env": "^7.16.4", @@ -57,7 +56,6 @@ "@typescript-eslint/parser": "^5.6.0", "@vinayakkulkarni/prettier-config-vue": "^1.0.0", "@vue/component-compiler-utils": "^3.3.0", - "@vue/composition-api": "^1.4.1", "@vue/runtime-dom": "^3.2.24", "eslint": "^8.4.0", "eslint-config-prettier": "^8.3.0", @@ -81,8 +79,8 @@ "stylelint-config-standard": "^25.0.0", "stylelint-config-standard-scss": "^3.0.0", "typescript": "^4.5.2", - "vue": "^2.6.14", - "vue-template-compiler": "^2.6.14", + "vue": "^2.7.14", + "vue-template-compiler": "^2.7.14", "vuepress": "^1.8.2" }, "keywords": [ diff --git a/shims/vue.d.ts b/shims/vue.d.ts index 0ce0146d..2ccbb150 100644 --- a/shims/vue.d.ts +++ b/shims/vue.d.ts @@ -1,6 +1,5 @@ declare module '*.vue' { - import { defineComponent } from '@vue/composition-api'; - import Vue, { VueConstructor } from 'vue'; + import Vue, { VueConstructor, defineComponent } from 'vue'; const component: ReturnType & { install(app: VueConstructor): void; }; diff --git a/src/components/map/mixins/withPrivateMethods.ts b/src/components/map/mixins/withPrivateMethods.ts index 1b95da23..3c42c582 100644 --- a/src/components/map/mixins/withPrivateMethods.ts +++ b/src/components/map/mixins/withPrivateMethods.ts @@ -1,13 +1,12 @@ -import type { Ref } from '@vue/composition-api'; -import { ref } from '@vue/composition-api'; -import Vue from 'vue'; +import type { Ref } from 'vue'; +import Vue, { ref } from 'vue'; export default Vue.extend({ - setup(_, context) { - const templateRefs: Ref<{ + setup() { + const container: Ref<{ [key: string]: Vue | Element | Vue[] | Element[]; - }> = ref(context.refs); - return { templateRefs }; + }> = ref(); + return { container }; }, methods: { $_updateSyncedPropsFabric(prop, data) { @@ -68,7 +67,7 @@ export default Vue.extend({ if (this.accessToken) this.mapbox.accessToken = this.accessToken; const map = new this.mapbox.Map({ ...this._props, - container: this.templateRefs.container, + container: this.container, style: this.mapStyle, }); map.on('load', () => resolve(map)); diff --git a/src/components/map/options.ts b/src/components/map/options.ts index f5b799c1..c195bd3d 100755 --- a/src/components/map/options.ts +++ b/src/components/map/options.ts @@ -1,4 +1,4 @@ -import type { PropType } from '@vue/composition-api'; +import type { PropType } from 'vue'; import type { FitBoundsOptions, Light, diff --git a/src/install.ts b/src/install.ts index 3d2d7ddb..96c0a2af 100644 --- a/src/install.ts +++ b/src/install.ts @@ -1,4 +1,3 @@ -import VueCompositionApi from '@vue/composition-api'; import { PluginFunction, VueConstructor as Application } from 'vue'; import CanvasLayer from './components/layer/CanvasLayer'; import GeojsonLayer from './components/layer/GeojsonLayer'; @@ -31,7 +30,6 @@ const install: PluginFunction = (app: Application) => { asControl: controlMixin, asLayer: layerMixin, }; - app.use(VueCompositionApi); app.component('MglMap', GlMap); app.component('MglNavigationControl', NavigationControl); app.component('MglGeolocateControl', GeolocateControl);