From 517f1bef5d7a7f48bb14e1ae5a79ba81df4a0b47 Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Tue, 6 Aug 2024 11:48:21 +0200
Subject: [PATCH] chore: optimize loading by using defineComponent instead of
 defineAsyncComponent

---
 services/loadCards.ts | 65 +++++++++++++++----------------------------
 1 file changed, 23 insertions(+), 42 deletions(-)

diff --git a/services/loadCards.ts b/services/loadCards.ts
index c2d7525..28343d1 100644
--- a/services/loadCards.ts
+++ b/services/loadCards.ts
@@ -7,34 +7,6 @@ export async function compileCards(app: App<any>) {
     eager: true,
   });
 
-  // const components = await Promise.all(
-  //   Object.entries(svgs).map(async ([k, v]) => {
-  //     const regex = /([\d]+)(?=\.svg)/gm;
-  //     const url = (v as any).default as string;
-  //     let template = await (await fetch(url)).text();
-  //     let arrayTemplate = template.split("\n");
-  //     arrayTemplate.splice(0, 1);
-  //     template = arrayTemplate.join("\n");
-
-  //     return [
-  //       k.match(regex)![0],
-  //       defineComponent({
-  //         props: ["used_effects_indexes", "card"],
-  //         setup(_props) {
-  //           const count = ref(0);
-  //           return { count };
-  //         },
-  //         methods: {
-  //           effectClick(effect: number) {
-  //             this.$emit("effectClick", effect);
-  //           },
-  //         },
-  //         template: template,
-  //       }),
-  //     ];
-  //   })
-  // );
-
   const components = await Promise.all(
     Object.entries(svgs).map(async ([k, v]) => {
       const regex = /([\d]+)(?=\.svg)/gm;
@@ -52,20 +24,29 @@ export async function compileCards(app: App<any>) {
         template = arrayTemplate.join("\n");
         return [
           Number(k.match(regex)![0]).toString(),
-          markRaw(
-            defineAsyncComponent({
-              loader: async () =>
-                defineComponent({
-                  props: ["used_effects_indexes", "cardId"],
-                  methods: {
-                    effectClick(effect: number) {
-                      this.$emit("effectClick", effect);
-                    },
-                  },
-                  template: template,
-                }),
-            })
-          ),
+          // markRaw(
+          //   defineAsyncComponent({
+          //     loader: async () =>
+          //       defineComponent({
+          //         props: ["used_effects_indexes", "cardId"],
+          //         methods: {
+          //           effectClick(effect: number) {
+          //             this.$emit("effectClick", effect);
+          //           },
+          //         },
+          //         template: template,
+          //       }),
+          //   })
+          // ),
+          defineComponent({
+            props: ["used_effects_indexes", "cardId"],
+            methods: {
+              effectClick(effect: number) {
+                this.$emit("effectClick", effect);
+              },
+            },
+            template: template,
+          }),
         ];
       } catch (e) {
         console.error(e, k);