Merge branch 'main' into feat/compare

Author: t128n

app/components/User/Avatar.vue

@@ -31,12 +31,15 @@ const textClass = computed(() => {
   }
 })
 
-const { data: gravatarUrl } = useLazyFetch(() => `/api/gravatar/${props.username}`, {
-  transform: res => (res.hash ? `/_avatar/${res.hash}?s=128&d=404` : null),
-  getCachedData(key, nuxtApp) {
-    return nuxtApp.static.data[key] ?? nuxtApp.payload.data[key]
+const { data: gravatarUrl } = useLazyFetch(
+  () => `/api/gravatar/${encodeURIComponent(props.username)}`,
+  {
+    transform: res => (res.hash ? `/_avatar/${res.hash}?s=128&d=404` : null),
+    getCachedData(key, nuxtApp) {
+      return nuxtApp.static.data[key] ?? nuxtApp.payload.data[key]
+    },
   },
-})
+)
 </script>
 
 <template>

app/composables/useCompareReplacements.ts

@@ -42,16 +42,17 @@ export function useCompareReplacements(packageNames: MaybeRefOrGetter<string[]>)
         namesToCheck.map(async name => {
           try {
             const replacement = await $fetch<ModuleReplacement | null>(`/api/replacements/${name}`)
-            return { name, replacement }
+            return { name, replacement, failed: false as const }
           } catch {
-            return { name, replacement: null }
+            return { name, failed: true as const }
           }
         }),
       )
 
       const newReplacements = new Map(replacements.value)
-      for (const { name, replacement } of results) {
-        newReplacements.set(name, replacement)
+      for (const result of results) {
+        if (result.failed) continue
+        newReplacements.set(result.name, result.replacement)
       }
       replacements.value = newReplacements
     } finally {

i18n/locales/en.json

@@ -324,7 +324,7 @@
     "edit": "Edit",
     "error": "Error",
     "view_on": {
-      "npm": "view on npm",
+      "npm": "View on npm",
       "github": "View on GitHub",
       "gitlab": "View on GitLab",
       "bitbucket": "View on Bitbucket",
@@ -334,7 +334,7 @@
       "gitea": "View on Gitea",
       "gitee": "View on Gitee",
       "radicle": "View on Radicle",
-      "socket_dev": "view on socket.dev",
+      "socket_dev": "View on socket.dev",
       "sourcehut": "View on SourceHut",
       "tangled": "View on Tangled"
     },

i18n/locales/zh-CN.json

@@ -339,7 +339,9 @@
       "tangled": "在 Tangled 上查看"
     },
     "collapse": "收起",
-    "expand": "展开"
+    "collapse_with_name": "收起 {name}",
+    "expand": "展开",
+    "expand_with_name": "展开 {name}"
   },
   "profile": {
     "display_name": "显示名称",
@@ -1234,6 +1236,17 @@
       "packages_selected": "已选择 {count}/{max} 个包。",
       "add_hint": "至少添加 2 个包以进行比较。"
     },
+    "scatter_chart": {
+      "title": "对比 {x} 与 {y}",
+      "freshness_score": "新鲜度评分",
+      "copy_alt": {
+        "analysis": "{package} : {x_name} ({x_value}) 和 {y_name} ({y_value})",
+        "description": "散点图：展示 {x_name} 和 {y_name} 对比结果。 {analysis}。 {watermark}"
+      },
+      "filename": "{x}-vs-{y}-散点图",
+      "x_axis": "X 轴 ↦",
+      "y_axis": "Y 轴 ↥"
+    },
     "no_dependency": {
       "label": "(不使用依赖)",
       "typeahead_title": "James 会怎么做？",

i18n/locales/zh-TW.json

@@ -338,7 +338,9 @@
       "tangled": "在 Tangled 上檢視"
     },
     "collapse": "收合",
-    "expand": "展開"
+    "collapse_with_name": "收合 {name}",
+    "expand": "展開",
+    "expand_with_name": "展開 {name}"
   },
   "profile": {
     "display_name": "顯示名稱",
@@ -1233,6 +1235,17 @@
       "packages_selected": "已選擇 {count}/{max} 個套件。",
       "add_hint": "至少新增 2 個套件以進行比較。"
     },
+    "scatter_chart": {
+      "title": "比較 {x} 與 {y}",
+      "freshness_score": "新鮮度分數",
+      "copy_alt": {
+        "analysis": "{package} : {x_name} ({x_value}) 與 {y_name} ({y_value})",
+        "description": "散佈圖：顯示 {x_name} 與 {y_name} 的比較結果。 {analysis}。 {watermark}"
+      },
+      "filename": "{x}-vs-{y}-散佈圖",
+      "x_axis": "X 軸 ↦",
+      "y_axis": "Y 軸 ↥"
+    },
     "no_dependency": {
       "label": "(無相依套件)",
       "typeahead_title": "如果是 James Garbutt 會怎麼做？",

test/nuxt/composables/use-compare-replacements.spec.ts

@@ -6,7 +6,9 @@ import type { ReplacementSuggestion } from '~/composables/useCompareReplacements
 /**
  * Helper to test useCompareReplacements by wrapping it in a component.
  */
-async function useCompareReplacementsInComponent(packageNames: string[]) {
+async function useCompareReplacementsInComponent(
+  packageNames: Parameters<typeof useCompareReplacements>[0],
+) {
   const capturedNoDepSuggestions = ref<ReplacementSuggestion[]>([])
   const capturedInfoSuggestions = ref<ReplacementSuggestion[]>([])
   const capturedLoading = ref(false)
@@ -212,27 +214,82 @@ describe('useCompareReplacements', () => {
     })
 
     it('handles fetch errors gracefully', async () => {
-      vi.stubGlobal(
-        '$fetch',
-        vi.fn().mockImplementation(() => {
-          return Promise.reject(new Error('Network error'))
-        }),
-      )
+      const fetchMock = vi.fn().mockImplementation(() => {
+        return Promise.reject(new Error('Network error'))
+      })
+
+      vi.stubGlobal('$fetch', fetchMock)
 
       const { noDepSuggestions, infoSuggestions, replacements } =
         await useCompareReplacementsInComponent(['some-package'])
 
       await vi.waitFor(() => {
-        expect(replacements.value.has('some-package')).toBe(true)
+        expect(fetchMock).toHaveBeenCalledTimes(1)
       })
 
-      expect(replacements.value.get('some-package')).toBeNull()
+      expect(replacements.value.has('some-package')).toBe(false)
       expect(noDepSuggestions.value).toHaveLength(0)
       expect(infoSuggestions.value).toHaveLength(0)
     })
   })
 
   describe('caching', () => {
+    it('retries a package after a transient fetch failure', async () => {
+      const packageNames = ref(['is-even'])
+      const fetchMock = vi
+        .fn()
+        .mockRejectedValueOnce(new Error('Temporary network error'))
+        .mockResolvedValueOnce({
+          type: 'simple',
+          moduleName: 'is-even',
+          replacement: 'Use (n % 2) === 0',
+          category: 'micro-utilities',
+        } satisfies ModuleReplacement)
+
+      vi.stubGlobal('$fetch', fetchMock)
+
+      const { noDepSuggestions, replacements } =
+        await useCompareReplacementsInComponent(packageNames)
+
+      await vi.waitFor(() => {
+        expect(fetchMock).toHaveBeenCalledTimes(1)
+      })
+
+      expect(replacements.value.has('is-even')).toBe(false)
+
+      packageNames.value = []
+      await nextTick()
+      packageNames.value = ['is-even']
+
+      await vi.waitFor(() => {
+        expect(fetchMock).toHaveBeenCalledTimes(2)
+        expect(noDepSuggestions.value).toHaveLength(1)
+      })
+
+      expect(replacements.value.get('is-even')?.type).toBe('simple')
+    })
+
+    it('caches successful null replacement data and does not refetch', async () => {
+      const fetchMock = vi.fn().mockResolvedValue(null)
+
+      vi.stubGlobal('$fetch', fetchMock)
+
+      const packageNames = ref(['react'])
+      const { replacements } = await useCompareReplacementsInComponent(packageNames)
+
+      await vi.waitFor(() => {
+        expect(replacements.value.has('react')).toBe(true)
+      })
+
+      packageNames.value = []
+      await nextTick()
+      packageNames.value = ['react']
+
+      await vi.waitFor(() => {
+        expect(fetchMock).toHaveBeenCalledTimes(1)
+      })
+    })
+
     it('caches replacement data and does not refetch', async () => {
       const fetchMock = vi.fn().mockImplementation((url: string) => {
         if (url.includes('/api/replacements/is-even')) {