feat(assets): new assets loading system (currently only for images)

app/composables/useAssets.ts.in

@@ -0,0 +1,34 @@
+const imageCache = new Map<string, HTMLImageElement>();
+
+const loaded = ref(0);
+const total = ref({{TOTAL}});
+const isReady = computed(() => loaded.value === total.value);
+
+const createImage = (path: string) => {
+  if (imageCache.has(path)) {
+    return imageCache.get(path)!;
+  }
+
+  const img = document.createElement('img');
+  img.src = path;
+  imageCache.set(path, img);
+
+  if (img.complete) {
+    loaded.value += 1;
+  } else {
+    img.onload = () => { loaded.value += 1 };
+  }
+
+  return img;
+};
+
+const assets = {{ASSETS}};
+
+export const useAssets = () => {
+  return {
+    assets,
+    loaded,
+    total,
+    isReady,
+  };
+};

app/composables/useImages.ts

@@ -1,17 +0,0 @@
-const imageCache = new Map<string, HTMLImageElement>();
-
-export const useImages = (...paths: string[]) => {
-  const images = paths.map((path) => {
-    if (imageCache.has(path)) {
-      return imageCache.get(path)!;
-    }
-
-    const img = document.createElement("img");
-    img.src = path;
-    imageCache.set(path, img);
-
-    return img;
-  });
-
-  return images;
-};