feat: support all deps list

src/components/Box.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import type { CrateIntro } from '~/contentScripts/interface';
 
+  export let loading = false;
+  export let title = 'Dependencies';
   export let style = '';
   export let dependencies: CrateIntro[] = [];
 </script>
@@ -10,12 +12,12 @@
     class="d-flex js-position-sticky border-top-0 border-bottom p-2 flex-justify-between color-bg-default rounded-top-2"
     style="position: sticky; {style}"
   >
-    <h3 class="Box-title p-2">Dependencies</h3>
+    <h3 class="Box-title p-2">{title}</h3>
     <div class="cratehub-header BtnGroup">
       <slot />
     </div>
   </div>
-  <ol class="cratehub-deps markdown-body">
+  <ol class="cratehub-deps markdown-body" class:cratehub-loading={loading}>
     {#if dependencies}
       {#if dependencies.length === 0}
         <li class="cratehub-empty">
@@ -29,13 +31,13 @@
           </g-emoji>
         </li>
       {:else}
-        {#each dependencies as { name, repository, description }}
+        {#each dependencies as dep}
           <li>
-            <a href={repository}>
-              {name}
+            <a href={dep?.repository}>
+              {dep?.name}
             </a>
-            {#if description}
-              {description}
+            {#if dep?.description}
+              {dep?.description}
             {:else}
               <em>No description.</em>
             {/if}

src/contentScripts/views/Deps.svelte

@@ -7,28 +7,69 @@
   import HeaderLink from '~/components/HeaderLink.svelte';
   import { getCratesIntro, isPublicCrate } from '../fetch';
   import type { CrateIntro } from '../interface';
+  import { chunkIntoN } from '~/util';
 
   export let cargoTomlURL: string;
   export let isCargoToml: boolean;
 
-  let dependencies: CrateIntro[] = [];
   let cargoData: any;
+  let depMap: Record<string, string[]> = {};
+  let crateMap: Record<string, CrateIntro> = {};
+  let loading = true
 
   $: crateName = cargoData?.package?.name;
+  $: depMapCrates = Object.keys(depMap).reduce((acc, key) => {
+    acc[key] = depMap[key].map((create) => crateMap[create]).filter(Boolean);
+    return acc;
+  }, {} as Record<string, CrateIntro[]>);
+
+  $: console.log(depMapCrates);
 
   const getDependencies = async () => {
+    loading = true
     try {
       cargoData = await getCargoJson(isCargoToml, cargoTomlURL);
-      if (cargoData && cargoData?.dependencies) {
-        let depsName = Object.keys(cargoData.dependencies);
-        let depsIntro = await getCratesIntro(depsName);
-        if (depsIntro && depsIntro?.crates) {
-          dependencies = depsIntro.crates;
+      console.log(cargoData);
+      if (cargoData) {
+        const deps: string[] = [];
+        depMap = Object.keys(cargoData)
+          .filter((key) => key.includes('dependencies'))
+          .reduce((acc, key) => {
+            if (key.startsWith('dependencies')) {
+              acc.dependencies = [
+                ...(acc.dependencies ?? []),
+                ...Object.keys(cargoData[key]),
+              ];
+              deps.push(...acc.dependencies);
+            } else {
+              acc[key] = Object.keys(cargoData[key]);
+              deps.push(...acc[key]);
+            }
+            return acc;
+          }, {} as Record<string, string[]>);
+        console.log(depMap);
+        const depsName: string[] = Array(...new Set(deps));
+        const preRequestChunk = chunkIntoN(depsName, 10).map((item) =>
+          getCratesIntro(item),
+        );
+        const requestChunk = await Promise.all(preRequestChunk);
+        if (requestChunk) {
+          requestChunk
+            .map((item) => item?.crates)
+            .forEach((item) => {
+              item?.forEach((crate) => {
+                if (crate.name) {
+                  crateMap[crate.name] = crate;
+                }
+              });
+            });
         }
       }
     } catch (e) {
       console.log(e);
       // do something
+    } finally {
+      loading = false
     }
   };
 
@@ -37,7 +78,7 @@
 
 <div class="clearfix container-xl px-3 px-md-4 px-lg-5 mt-4">
   <!-- `z-index` due to https://github.com/npmhub/npmhub/issues/147 -->
-  <Box {dependencies} style="z-index: 1">
+  <Box {loading} dependencies={depMapCrates?.dependencies} style="z-index: 1">
     {#if !isCargoToml}
       <HeaderLink href={cargoTomlURL} label={CARGO_TOML_FILE} />
     {/if}
@@ -79,4 +120,9 @@
       {/await}
     {/if}
   </Box>
+  {#each Object.entries(depMapCrates) as [title, crates]}
+    {#if title !== 'dependencies'}
+      <Box {loading} {title} dependencies={crates} />
+    {/if}
+  {/each}
 </div>

src/styles/main.css

@@ -23,7 +23,8 @@ li.cratehub-empty {
   position: relative;
   margin: 3px 0;
 }
-.cratehub-deps:empty:before {
+.cratehub-deps:empty:before,
+.cratehub-loading:before {
   display: block;
   content: 'loading';
   padding: 10px;

src/util/index.ts

@@ -0,0 +1,6 @@
+export const chunkIntoN = <T>(arr: T[], size: number) => {
+  const n = Math.ceil(arr.length / size);
+  return Array.from({ length: n }, (_, i) =>
+    arr.slice(i * size, i * size + size)
+  );
+}