From d8a67d0e8fe4d265cfce0b207fd7c7dda631bbd7 Mon Sep 17 00:00:00 2001
From: Helge Sverre <helge.sverre@gmail.com>
Date: Fri, 5 Apr 2024 23:21:28 +0200
Subject: [PATCH] fix: Because the "allTargets()..."-code is defined outside of
 the usehttpClients() hook, it will only run once (which was probably done due
 to performance benefits), however this breaks this feature as only the
 DEFAULT_EXCLUDED_CLIENTS will be applied the first time this runs, and the
 next time this is meant to run to filter the targets and clients based on the
 provided user configuration, it is not updated, aka, doesnt work, this is
 references in #1250.

This commit fixes the bug, and retains the performance benefit by caching the target list using watchEffect to only update/recompute the target list when the configuration changes.
Next i will implement the inverse of this, and add the ability to specify clients in specific targets to ignore/include, as currently, if you hide "curl", you hide both the curl CLI tool and the php "curl" client, which is probably not intentional.
---
 .../api-reference/src/hooks/useHttpClients.ts | 40 ++++++++-----------
 1 file changed, 17 insertions(+), 23 deletions(-)

diff --git a/packages/api-reference/src/hooks/useHttpClients.ts b/packages/api-reference/src/hooks/useHttpClients.ts
index dad6ccdaed0..63c6de9859f 100644
--- a/packages/api-reference/src/hooks/useHttpClients.ts
+++ b/packages/api-reference/src/hooks/useHttpClients.ts
@@ -1,36 +1,30 @@
 import { availableTargets as allTargets } from 'httpsnippet-lite'
-import { computed, readonly, ref } from 'vue'
+import { computed, readonly, ref, watchEffect } from 'vue'
 
 const DEFAULT_EXCLUDED_CLIENTS = ['unirest'] as const
 
 const excludedClients = ref<string[]>([...DEFAULT_EXCLUDED_CLIENTS])
 
-// Move this out so it only gets run once
-const targets = allTargets()
-  .map((target) => {
-    // Node.js
-    if (target.key === 'node') {
-      target.default = 'undici'
+// Use a reactive reference for caching the computed targets
+const cachedTargets = ref([])
 
-      target.clients.unshift({
-        description: 'An HTTP/1.1 client, written from scratch for Node.js.',
-        key: 'undici',
-        link: 'https://github.com/nodejs/undici',
-        title: 'undici',
-      })
-    }
+// Watch for changes in excludedClients and update the cachedTargets accordingly
+watchEffect(() => {
+  cachedTargets.value = allTargets()
+    .map((target) => {
+      // Filter out excluded clients
+      target.clients = target.clients.filter(
+        (client) => !excludedClients.value.includes(client.key),
+      )
 
-    // Filter out excluded clients
-    target.clients = target.clients.filter(
-      (client) => !excludedClients.value.includes(client.key),
-    )
-
-    return target
-  })
-  .filter((target) => target.clients.length)
+      return target
+    })
+    .filter((target) => target.clients.length)
+})
 
 export function useHttpClients() {
-  const availableTargets = computed(() => targets)
+  // Use computed to provide a reactive interface to the cached targets
+  const availableTargets = computed(() => cachedTargets.value)
 
   return {
     availableTargets,