From ebe0a5e62f84065a7aa834307cbdc9f6a37ee543 Mon Sep 17 00:00:00 2001 From: Luis Ball Date: Mon, 19 Apr 2021 13:38:21 -0400 Subject: [PATCH] chore: attemtp to remove Vue global calls vue-class-component dependency needed to be updated to 8.0 rc1. This version introduced new decorators, a global Vue instance, and a `prop` method which I tried to use with varying success. --- package.json | 2 +- src/plugins/vue-imgix/ix-img.tsx | 61 ++++++++++++++++------------ src/plugins/vue-imgix/ix-picture.tsx | 12 ++---- src/plugins/vue-imgix/ix-source.tsx | 10 ++--- tsconfig.json | 1 + yarn.lock | 8 ++-- 6 files changed, 48 insertions(+), 46 deletions(-) diff --git a/package.json b/package.json index a0baa392..b82ab475 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,7 @@ "rollup-plugin-vue": "5.1.9", "typescript": "4.2.3", "vue": "^3.0.0", - "vue-class-component": "7.2.6", + "vue-class-component": "8.0.0-rc.1", "vue-property-decorator": "9.1.2", "vue-router": "^4.0.0-beta.11", "vue-template-compiler": "2.6.12", diff --git a/src/plugins/vue-imgix/ix-img.tsx b/src/plugins/vue-imgix/ix-img.tsx index fb359293..261bd679 100644 --- a/src/plugins/vue-imgix/ix-img.tsx +++ b/src/plugins/vue-imgix/ix-img.tsx @@ -1,29 +1,37 @@ import { ensureVueImgixClientSingleton, IVueImgixClient } from './vue-imgix'; -import Vue, { CreateElement } from 'vue'; -import Component from 'vue-class-component'; +import { Vue, prop } from 'vue-class-component'; -const IxImgProps = Vue.extend({ - props: { - src: { - type: String, - required: true, - }, - fixed: Boolean, - imgixParams: Object, - width: [String, Number], - height: [String, Number], - attributeConfig: Object, - disableVariableQuality: Boolean, - }, -}); +const Props = { + src: prop({ type: String, required: true }), + fixed: prop({type: Boolean}), + imgixParams: prop({type: Object}), + width: prop({ [String, Number]}), + height: prop({ [String, Number]}), + attributeConfig: prop({type: Object}), + disableVariableQuality: prop({type: Boolean}), +}; + +// const IxImgProps = defineComponent({ +// props: { +// src: { +// type: String, +// required: true, +// }, +// fixed: Boolean, +// imgixParams: Object, +// width: [String, Number], +// height: [String, Number], +// attributeConfig: Object, +// disableVariableQuality: Boolean, +// }, +// }); const defaultAttributeMap = { src: 'src', srcset: 'srcset', }; -@Component -export class IxImg extends IxImgProps { +export class IxImg extends Vue.with(Props) { // Using !: here because we ensure it is set in created() private vueImgixSingleton!: IVueImgixClient; @@ -31,7 +39,7 @@ export class IxImg extends IxImgProps { this.vueImgixSingleton = ensureVueImgixClientSingleton(); } - render(createElement: CreateElement) { + render() { const imgixParamsFromImgAttributes = { ...(this.fixed && { ...(this.width != null ? { w: this.width } : {}), @@ -55,13 +63,12 @@ export class IxImg extends IxImgProps { ...this.attributeConfig, }; - return createElement('img', { - attrs: { - [attributeConfig.src]: src, - [attributeConfig.srcset]: srcset, - width: this.width, - height: this.height, - }, + return h('img', { + [attributeConfig.src]: src, + [attributeConfig.srcset]: srcset, + width: this.width, + height: this.height, }); } -} + +}; diff --git a/src/plugins/vue-imgix/ix-picture.tsx b/src/plugins/vue-imgix/ix-picture.tsx index 3afb4b11..b726cd82 100644 --- a/src/plugins/vue-imgix/ix-picture.tsx +++ b/src/plugins/vue-imgix/ix-picture.tsx @@ -1,12 +1,8 @@ import { ensureVueImgixClientSingleton, IVueImgixClient } from './vue-imgix'; -import Vue, { CreateElement } from 'vue'; -import Component from 'vue-class-component'; +import { defineComponent, h } from 'vue'; -const IxPictureProps = Vue.extend({ - props: {}, -}); +const IxPictureProps = defineComponent({}); -@Component export class IxPicture extends IxPictureProps { // Using !: here because we ensure it is set in created() private vueImgixSingleton!: IVueImgixClient; @@ -15,7 +11,7 @@ export class IxPicture extends IxPictureProps { this.vueImgixSingleton = ensureVueImgixClientSingleton(); } - render(createElement: CreateElement) { - return createElement('picture', this.$slots.default); + render() { + return h('picture', {slots: this.$slots.defaults}); } } diff --git a/src/plugins/vue-imgix/ix-source.tsx b/src/plugins/vue-imgix/ix-source.tsx index 1a238868..5c05e720 100644 --- a/src/plugins/vue-imgix/ix-source.tsx +++ b/src/plugins/vue-imgix/ix-source.tsx @@ -1,8 +1,7 @@ import { ensureVueImgixClientSingleton, IVueImgixClient } from './vue-imgix'; -import Vue, { CreateElement } from 'vue'; -import Component from 'vue-class-component'; +import {defineComponent, h } from 'vue'; -const IxSourceProps = Vue.extend({ +const IxSourceProps = defineComponent({ props: { src: { type: String, @@ -18,7 +17,6 @@ const defaultAttributeMap = { srcset: 'srcset', }; -@Component export class IxSource extends IxSourceProps { // Using !: here because we ensure it is set in created() private vueImgixSingleton!: IVueImgixClient; @@ -27,7 +25,7 @@ export class IxSource extends IxSourceProps { this.vueImgixSingleton = ensureVueImgixClientSingleton(); } - render(createElement: CreateElement) { + render() { const imgixParamsFromAttributes = {}; const { srcset } = this.vueImgixSingleton.buildUrlObject(this.src, { @@ -44,6 +42,6 @@ export class IxSource extends IxSourceProps { [attributeConfig.srcset]: srcset, }; - return createElement('source', { attrs: childAttrs }); + return h('source', { attrs: childAttrs }); } } diff --git a/tsconfig.json b/tsconfig.json index d2470250..6f1a5061 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,5 +1,6 @@ { "compilerOptions": { + "useDefineForClassFields": true, "target": "esnext", "module": "esnext", "strict": true, diff --git a/yarn.lock b/yarn.lock index 97888d83..86e75f01 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12676,10 +12676,10 @@ void-elements@^2.0.1: resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec" integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w= -vue-class-component@7.2.6: - version "7.2.6" - resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-7.2.6.tgz#8471e037b8e4762f5a464686e19e5afc708502e4" - integrity sha512-+eaQXVrAm/LldalI272PpDe3+i4mPis0ORiMYxF6Ae4hyuCh15W8Idet7wPUEs4N4YptgFHGys4UrgNQOMyO6w== +vue-class-component@8.0.0-rc.1: + version "8.0.0-rc.1" + resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-8.0.0-rc.1.tgz#db692cd97656eb9a08206c03d0b7398cdb1d9420" + integrity sha512-w1nMzsT/UdbDAXKqhwTmSoyuJzUXKrxLE77PCFVuC6syr8acdFDAq116xgvZh9UCuV0h+rlCtxXolr3Hi3HyPQ== vue-eslint-parser@^7.0.0: version "7.0.0"