fix: Because the "allTargets()..."-code is defined outside of the use…

…httpClients() 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 scalar#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.

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,