Custom Integration

import { createSignal, onMount, onCleanup } from 'solid-js'
import { DocSearch as DocSearchReact } from '@docsearch/react'
import '@docsearch/css'

export function DocSearch(props) {
  return (
    <DocSearchReact
      appId={props.appId}
      apiKey={props.apiKey}
      indexName={props.indexName}
    />
  )
}

import { useDocSearch, DocSearchProvider } from '@docsearch/core'
import type { DocSearchProps } from '@docsearch/core'

// Create your own UI using the core hooks
export function createDocSearch(props: DocSearchProps) {
  // Use core logic
  const {
    query,
    collections,
    isOpen,
    recentSearches,
    favoriteSearches,
    openModal,
    closeModal,
    // ... other state and methods
  } = useDocSearch()

  // Build your custom UI with this data
  return {
    query,
    collections,
    isOpen,
    open: openModal,
    close: closeModal,
    // Expose what you need
  }
}

import docsearch from '@docsearch/js'
import { liteClient as algoliasearch } from 'algoliasearch/lite'

const instance = docsearch({
  container: '#docsearch',
  appId: 'YOUR_APP_ID',
  apiKey: 'YOUR_SEARCH_API_KEY',
  indexName: 'YOUR_INDEX_NAME',
  transformSearchClient: (searchClient) => {
    // Add custom Algolia agent
    searchClient.addAlgoliaAgent('my-integration', '1.0.0')

    // Intercept search requests
    const originalSearch = searchClient.search
    searchClient.search = async (requests) => {
      console.log('Searching:', requests)
      const results = await originalSearch(requests)
      console.log('Results:', results)
      return results
    }

    return searchClient
  },
})

import docsearch from '@docsearch/js'
import type { DocSearchProps, DocSearchInstance } from '@docsearch/js'
import '@docsearch/css'

export interface CustomDocSearchProps extends Omit<DocSearchProps, 'container'> {
  // Add custom props
  onSearch?: (query: string) => void
  onSelect?: (item: any) => void
  analytics?: {
    trackSearch: (query: string) => void
    trackClick: (item: any) => void
  }
}

export function createDocSearch(
  container: string | HTMLElement,
  props: CustomDocSearchProps
): DocSearchInstance {
  const { onSearch, onSelect, analytics, ...docSearchProps } = props

  // Create custom transformSearchClient
  const originalTransform = props.transformSearchClient
  const transformSearchClient = (searchClient: any) => {
    let client = searchClient
    
    // Apply original transform first
    if (originalTransform) {
      client = originalTransform(client)
    }

    // Add analytics
    if (analytics) {
      const originalSearch = client.search
      client.search = async (requests: any[]) => {
        const query = requests[0]?.params?.query
        if (query) {
          analytics.trackSearch(query)
        }
        return originalSearch(requests)
      }
    }

    return client
  }

  // Create instance with enhanced props
  const instance = docsearch({
    container,
    ...docSearchProps,
    transformSearchClient,
    transformItems: (items) => {
      // Call original transform if provided
      const transformed = props.transformItems?.(items) ?? items
      
      // Add click tracking
      if (analytics) {
        return transformed.map((item) => ({
          ...item,
          onClick: () => {
            analytics.trackClick(item)
            onSelect?.(item)
          },
        }))
      }
      
      return transformed
    },
  })

  return instance
}

import { useEffect, useRef } from 'react'
import type { DocSearchProps } from '@docsearch/js'

export function DocSearchSSR(props: Omit<DocSearchProps, 'container'>) {
  const containerRef = useRef<HTMLDivElement>(null)
  const instanceRef = useRef<any>(null)

  useEffect(() => {
    // Only run on client
    if (typeof window === 'undefined') return

    // Dynamically import to avoid SSR issues
    import('@docsearch/js').then(({ default: docsearch }) => {
      if (containerRef.current && !instanceRef.current) {
        instanceRef.current = docsearch({
          container: containerRef.current,
          ...props,
        })
      }
    })

    // Cleanup
    return () => {
      instanceRef.current?.destroy()
      instanceRef.current = null
    }
  }, [props])

  return <div ref={containerRef} />
}

import { describe, it, expect, vi } from 'vitest'
import { createDocSearch } from './docsearch-wrapper'

describe('DocSearch Custom Integration', () => {
  it('should initialize with correct props', () => {
    const container = document.createElement('div')
    container.id = 'docsearch'
    document.body.appendChild(container)

    const instance = createDocSearch('#docsearch', {
      appId: 'test-app-id',
      apiKey: 'test-api-key',
      indexName: 'test-index',
    })

    expect(instance).toBeDefined()
    expect(instance.isReady).toBe(true)
  })

  it('should call analytics on search', async () => {
    const trackSearch = vi.fn()
    
    const instance = createDocSearch('#docsearch', {
      appId: 'test-app-id',
      apiKey: 'test-api-key',
      indexName: 'test-index',
      analytics: {
        trackSearch,
        trackClick: vi.fn(),
      },
    })

    // Simulate search
    instance.open()
    // ... trigger search

    expect(trackSearch).toHaveBeenCalled()
  })
})