fix: non-working hiddenClients configuration option

packages/api-reference/src/components/Content/ClientLibraries/ClientSelector.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { ScalarIcon } from '@scalar/components'
 import type { TargetId } from 'httpsnippet-lite'
+import type { AvailableTarget } from 'httpsnippet-lite/dist/types/helpers/utils'
+import type { ClientInfo } from 'httpsnippet-lite/dist/types/targets/targets'
 import { ref } from 'vue'
 
 import { useHttpClients } from '../../../hooks'
-import { type HttpClientState, useHttpClientStore } from '../../../stores/'
+import { type HttpClientState, useHttpClientStore } from '../../../stores'
 
 // Use the template store to keep it accessible globally
 const { httpClient, setHttpClient, getClientTitle, getTargetTitle } =
@@ -14,32 +16,43 @@ const { availableTargets } = useHttpClients()
 const containerRef = ref<HTMLElement>()
 
 // Show popular clients with an icon, not just in a select.
-const featuredClients = [
- {
- targetKey: 'shell',
- clientKey: 'curl',
- },
- {
- targetKey: 'ruby',
- clientKey: 'native',
- },
- {
- targetKey: 'node',
- clientKey: 'undici',
- },
- {
- targetKey: 'php',
- clientKey: 'guzzle',
- },
- {
- targetKey: 'python',
- clientKey: 'python3',
- },
- {
- targetKey: 'c',
- clientKey: 'libcurl',
- },
-] as const
+const featuredClients = (
+ [
+ {
+ targetKey: 'shell',
+ clientKey: 'curl',
+ },
+ {
+ targetKey: 'ruby',
+ clientKey: 'native',
+ },
+ {
+ targetKey: 'node',
+ clientKey: 'undici',
+ },
+ {
+ targetKey: 'php',
+ clientKey: 'guzzle',
+ },
+ {
+ targetKey: 'python',
+ clientKey: 'python3',
+ },
+ {
+ targetKey: 'c',
+ clientKey: 'libcurl',
+ },
+ ] as const
+).filter((featuredClient) =>
+ availableTargets.value.find((target: AvailableTarget) => {
+ return (
+ target.key === featuredClient.targetKey &&
+ target.clients.find(
+ (client: ClientInfo) => client.key === featuredClient.clientKey,
+ )
+ )
+ }),
+)
 
 /**
  * Icons have longer names to appear in icon searches, e.g. "javascript-js" instead of just "javascript". This function

packages/api-reference/src/hooks/useHttpClients.test.ts

@@ -0,0 +1,213 @@
+import { describe, expect, it } from 'vitest'
+import { ref } from 'vue'
+
+import { filterHiddenClients } from './useHttpClients'
+
+describe('useHttpClients', () => {
+ it('filters hidden targets', () => {
+ expect(
+ filterHiddenClients(
+ [
+ {
+ title: 'Node.js',
+ key: 'node',
+ extname: '.js',
+ default: 'foobar',
+ clients: [
+ {
+ title: 'Axios',
+ key: 'axios',
+ description:
+ 'Promise based HTTP client for the browser and node.js',
+ link: 'https://example.com',
+ },
+ {
+ title: 'Fetch',
+ key: 'fetch',
+ description:
+ 'The Fetch API provides an interface for fetching resources',
+ link: 'https://example.com',
+ },
+ ],
+ },
+ ],
+ // No Node.js
+ ref({ node: true }),
+ ),
+ ).toMatchObject([])
+ })
+
+ it('filters hidden clients from object', () => {
+ expect(
+ filterHiddenClients(
+ [
+ {
+ title: 'Node.js',
+ key: 'node',
+ extname: '.js',
+ default: 'foobar',
+ clients: [
+ {
+ title: 'Axios',
+ key: 'axios',
+ description:
+ 'Promise based HTTP client for the browser and node.js',
+ link: 'https://example.com',
+ },
+ {
+ title: 'Fetch',
+ key: 'fetch',
+ description:
+ 'The Fetch API provides an interface for fetching resources',
+ link: 'https://example.com',
+ },
+ ],
+ },
+ ],
+ ref({
+ // No fetch
+ node: ['fetch'],
+ }),
+ ),
+ ).toMatchObject([
+ {
+ title: 'Node.js',
+ key: 'node',
+ extname: '.js',
+ default: 'foobar',
+ clients: [
+ {
+ title: 'Axios',
+ key: 'axios',
+ description:
+ 'Promise based HTTP client for the browser and node.js',
+ link: 'https://example.com',
+ },
+ ],
+ },
+ ])
+ })
+
+ it('filters hidden clients from arrays', () => {
+ expect(
+ filterHiddenClients(
+ [
+ {
+ title: 'Node.js',
+ key: 'node',
+ extname: '.js',
+ default: 'foobar',
+ clients: [
+ {
+ title: 'Axios',
+ key: 'axios',
+ description:
+ 'Promise based HTTP client for the browser and node.js',
+ link: 'https://example.com',
+ },
+ {
+ title: 'Fetch',
+ key: 'fetch',
+ description:
+ 'The Fetch API provides an interface for fetching resources',
+ link: 'https://example.com',
+ },
+ ],
+ },
+ ],
+ // No fetch
+ ref(['fetch']),
+ ),
+ ).toMatchObject([
+ {
+ title: 'Node.js',
+ key: 'node',
+ extname: '.js',
+ default: 'foobar',
+ clients: [
+ {
+ title: 'Axios',
+ key: 'axios',
+ description:
+ 'Promise based HTTP client for the browser and node.js',
+ link: 'https://example.com',
+ },
+ ],
+ },
+ ])
+ })
+
+ it('doesn’t filter anything', () => {
+ expect(
+ filterHiddenClients(
+ [
+ {
+ title: 'Node.js',
+ key: 'node',
+ extname: '.js',
+ default: 'foobar',
+ clients: [
+ {
+ title: 'Axios',
+ key: 'axios',
+ description:
+ 'Promise based HTTP client for the browser and node.js',
+ link: 'https://example.com',
+ },
+ {
+ title: 'Fetch',
+ key: 'fetch',
+ description:
+ 'The Fetch API provides an interface for fetching resources',
+ link: 'https://example.com',
+ },
+ ],
+ },
+ ],
+ // No fetch
+ ref([]),
+ ),
+ ).toMatchObject([
+ {
+ title: 'Node.js',
+ key: 'node',
+ extname: '.js',
+ default: 'foobar',
+ clients: [
+ {
+ title: 'Axios',
+ key: 'axios',
+ description:
+ 'Promise based HTTP client for the browser and node.js',
+ link: 'https://example.com',
+ },
+ {
+ title: 'Fetch',
+ key: 'fetch',
+ description:
+ 'The Fetch API provides an interface for fetching resources',
+ link: 'https://example.com',
+ },
+ ],
+ },
+ ])
+ })
+
+ it('filters targets without clients', () => {
+ expect(
+ filterHiddenClients(
+ [
+ {
+ title: 'Node.js',
+ key: 'node',
+ extname: '.js',
+ default: 'foobar',
+ clients: [],
+ },
+ ],
+ // No Node.js
+ ref({}),
+ ),
+ ).toMatchObject([])
+ })
+})