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

@@ -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",

src/plugins/vue-imgix/ix-img.tsx

@@ -1,37 +1,45 @@
 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;
 
   created() {
     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,
     });
   }
-}
+
+};

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});
   }
 }

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 });
   }
 }

tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "useDefineForClassFields": true,
     "target": "esnext",
     "module": "esnext",
     "strict": true,

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"