From 8c0bfbb2f4299ef9cc1daffc7ec2a63a2bb8071c Mon Sep 17 00:00:00 2001
From: Sanskar Soni <sonisanskar223@gmail.com>
Date: Tue, 19 Sep 2023 14:51:46 +0530
Subject: [PATCH] Improved: ShopifyImg component now created with Vue
 composition API style (#170)

---
 src/components/ShopifyImg.ts  | 52 -----------------------------------
 src/components/ShopifyImg.vue | 47 +++++++++++++++++++++++++++++++
 src/components/index.ts       |  5 +++-
 src/index.ts                  |  3 +-
 4 files changed, 52 insertions(+), 55 deletions(-)
 delete mode 100644 src/components/ShopifyImg.ts
 create mode 100644 src/components/ShopifyImg.vue

diff --git a/src/components/ShopifyImg.ts b/src/components/ShopifyImg.ts
deleted file mode 100644
index 4323be3..0000000
--- a/src/components/ShopifyImg.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { defineComponent } from "vue"
-import { shopifyImgContext as context } from "../index";
-
-export default defineComponent({
-  template: `
-            <img :src="imageUrl"/>
-            `,
-  data() {
-    return {
-      imageUrl: context.defaultImgUrl
-    }
-  },
-  props: ['src', 'size'],
-  mounted() {
-    this.setImageUrl();
-  },
-  updated() {
-    this.setImageUrl();
-  },
-  methods: {
-    prepareImgUrl(src: string, size?: string) {
-      // return original size if no size is given
-      if (!size) return src
-      // remove any current image size then add the new image size
-      return src
-      .replace(/_(pico|icon|thumb|small|compact|medium|large|grande|original|1024x1024|2048x2048|master)+\./g, '.')
-      .replace(/\.jpg|\.png|\.gif|\.jpeg/g, function (match) {
-        return '_' + size + match;
-      })
-    },
-    checkIfImageExists(src: string) {
-      return new Promise((resolve, reject) => {
-        const img = new Image();
-        img.onload = function () {
-          resolve(true);
-        }
-        img.onerror = function () {
-          reject(false);
-        }
-        img.src = src;
-      })
-    },
-    setImageUrl() {
-      if (this.src) {
-        const src: string = this.prepareImgUrl(this.src, this.size)
-        this.checkIfImageExists(src).then(() => {
-          this.imageUrl = src;
-        })
-      }
-    }
-  }
-})
\ No newline at end of file
diff --git a/src/components/ShopifyImg.vue b/src/components/ShopifyImg.vue
new file mode 100644
index 0000000..c7d1b4d
--- /dev/null
+++ b/src/components/ShopifyImg.vue
@@ -0,0 +1,47 @@
+<template>
+  <img :src="imageUrl" />
+</template>
+  
+<script setup lang="ts">
+import { onMounted, onUpdated, ref } from "vue";
+import { shopifyImgContext as context } from "../index";
+
+const props = defineProps(['src', 'size']);
+const imageUrl = ref(context.defaultImgUrl);
+
+const checkIfImageExists = (src: string) => {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve(true);
+    img.onerror = () => reject(false);
+    img.src = src;
+  })
+};
+
+const prepareImgUrl = (src: string, size?: string) => {
+  // return original size if no size is given
+  if (!size) return src
+
+  // remove any current image size then add the new image size
+  return src
+    .replace(/_(pico|icon|thumb|small|compact|medium|large|grande|original|1024x1024|2048x2048|master)+\./g, '.')
+    .replace(/\.jpg|\.png|\.gif|\.jpeg/g, function (match) {
+      return '_' + size + match;
+    })
+};
+
+const setImageUrl = () => {
+  if (props.src) {
+    const src: string = prepareImgUrl(props.src, props.size)
+    checkIfImageExists(src).then(() => imageUrl.value = src)
+  }
+};
+
+onMounted(() => {
+  setImageUrl();
+});
+
+onUpdated(() => {
+  setImageUrl();
+});
+</script>
\ No newline at end of file
diff --git a/src/components/index.ts b/src/components/index.ts
index a0faf49..f38b094 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -14,5 +14,8 @@ import '@ionic/vue/css/text-transformation.css';
 import '@ionic/vue/css/flex-utils.css';
 import '@ionic/vue/css/display.css';
 
-export { default as ProductIdentifier } from "./ProductIdentifier.vue";
+import ProductIdentifier from './ProductIdentifier.vue';
+import ShopifyImg from './ShopifyImg.vue';
+
+export { ProductIdentifier, ShopifyImg };
 
diff --git a/src/index.ts b/src/index.ts
index ddace5c..24dca7a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -3,12 +3,11 @@ import { useProductIdentificationStore } from "./store/productIdentification";
 import { useAuthStore } from "./store/auth";
 
 import Login from "./components/Login";
-import ShopifyImg from "./components/ShopifyImg";
 import { goToOms } from "./utils";
 import { initialiseFirebaseApp } from "./utils/firebase"
 
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
-import { ProductIdentifier } from "./components";
+import { ProductIdentifier, ShopifyImg } from "./components";
 
 // TODO: handle cases when the store from app or pinia store are not available
 // creating a pinia store for the plugin