fix(#15): fix parallelism issue with remote cache (#16)

natemoo-re · Dec 15, 2021 · 9ff5e7d · 9ff5e7d · vercel · Dec 15, 2021
1 parent 8bd5d95
commit 9ff5e7d
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 16 deletions.
diff --git a/.changeset/wet-meals-share.md b/.changeset/wet-meals-share.md
@@ -0,0 +1,5 @@
+---
+"astro-icon": patch
+---
+
+Fix parallelism issue when fetching icons from the Icon service in a map
diff --git a/demo/src/pages/map.astro b/demo/src/pages/map.astro
@@ -0,0 +1,31 @@
+---
+import { Icon } from 'astro-icon';
+---
+
+<html lang="en">
+
+<head>
+	<meta charset="utf-8" />
+	<link rel="icon" type="image/x-icon" href="/favicon.ico" />
+	<meta name="viewport" content="width=device-width" />
+	<title>Astro Icon</title>
+	<style lang="css">
+		[astro-icon] {
+			color: blue;
+		}
+		[astro-icon="annotation"] {
+			color: red;
+		}
+		[astro-icon="folder"] {
+			color: green;
+		}
+	</style>
+</head>
+
+<body>
+	<h1>Welcome to Astro Icon!</h1>
+
+    {[1,2,3].map(() => <Icon name="bi:stars" /> )}
+</body>
+
+</html>
diff --git a/packages/core/lib/resolver.ts b/packages/core/lib/resolver.ts
@@ -7,28 +7,30 @@ export default async function get(pack: string, name: string) {
   const url = new URL(`./${pack}/${name}`, baseURL).toString();
   // Handle in-flight requests
   if (requests.has(url)) {
-    await requests.get(url);
-    return fetchCache.get(url);
+    return await requests.get(url);
   }
-
   if (fetchCache.has(url)) {
     return fetchCache.get(url);
   }
-  let request = fetch(url);
-  requests.set(url, request);
-  const res = await request;
-  if (!res.ok) {
-    throw new Error(await res.text());
-  }
-  const contentType = res.headers.get("Content-Type");
-  if (!contentType.includes("svg")) {
-    throw new Error(`[astro-icon] Unable to load "${name}" because it did not resolve to an SVG!
+
+  let request = async () => {
+    const res = await fetch(url);
+    if (!res.ok) {
+      throw new Error(await res.text());
+    }
+    const contentType = res.headers.get("Content-Type");
+    if (!contentType.includes("svg")) {
+      throw new Error(`[astro-icon] Unable to load "${name}" because it did not resolve to an SVG!
 
 Recieved the following "Content-Type":
 ${contentType}`);
+    }
+    const svg = await res.text();
+    fetchCache.set(url, svg);
+    requests.delete(url);
+    return svg;
   }
-  const svg = await res.text();
-  fetchCache.set(url, svg);
-  requests.delete(url);
-  return svg;
+  let promise = request();
+  requests.set(url, promise);
+  return await promise;
 }