➖ remove cryptojs dependency in favor of browser native crypto

package.json

@@ -7,7 +7,6 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "crypto-js": "^4.1.1",
     "element-plus": "^2.7.2",
     "reconnecting-eventsource": "^1.6.2",
     "vue": "^3.4.0"
@@ -16,7 +15,6 @@
     "@vitejs/plugin-vue": "^5.0.4",
     "typescript": "^5.4.5",
     "vite": "^5.2.11",
-    "vue-tsc": "^2.0.16",
-    "@types/crypto-js": "^4.1.1"
+    "vue-tsc": "^2.0.16"
   }
 }

src/components/UserCard.vue

@@ -1,27 +1,38 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { User } from "../types/mete";
+
+const emit = defineEmits<{
+  click: [user: User];
+}>();
+const props = defineProps<{ user: User }>();
+
+const gravatar = ref<string>();
+
+// copy paste: https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest#converting_a_digest_to_a_hex_string
+async function sha256(message: string) {
+  const msgUint8 = new TextEncoder().encode(message); // encode as (utf-8) Uint8Array
+  const hashBuffer = await crypto.subtle.digest("SHA-256", msgUint8); // hash the message
+  const hashArray = Array.from(new Uint8Array(hashBuffer)); // convert buffer to byte array
+  const hashHex = hashArray
+    .map((b) => b.toString(16).padStart(2, "0"))
+    .join(""); // convert bytes to hex string
+  return hashHex;
+}
+
+onMounted(async () => {
+  gravatar.value = `https://www.gravatar.com/avatar/${await sha256(
+    props.user.email
+  )}`;
+});
+</script>
 <template>
-  <el-card class="card" @click="$emit('click', user)">
+  <el-card class="card" @click="emit('click', user)">
     <el-row>
-      <el-col><img :src="gravatar(user.email)" class="image" /></el-col>
+      <el-col><img v-if="gravatar" :src="gravatar" class="image" /></el-col>
     </el-row>
     <el-row>
       <el-col>{{ user.name }}</el-col>
     </el-row>
   </el-card>
 </template>
-
-<script lang="ts">
-import { PropType, defineComponent } from "vue";
-import { User } from "../types/mete";
-import MD5 from "crypto-js/md5";
-
-export default defineComponent({
-  name: "UserCard",
-  props: { user: { type: Object as PropType<User>, required: true } },
-  emits: ["click"],
-  methods: {
-    gravatar(email: string) {
-      return `https://www.gravatar.com/avatar/${MD5(email)}`;
-    },
-  },
-});
-</script>