Svelte

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  plugins: [svelte()],
  build: {
    rollupOptions: {
      external: ['os']
    }
  }
})

import App from './App.svelte'

const app = new App({
  target: document.getElementById('app') as HTMLElement
})

export default app

export interface Pokemon {
  id: string
  image_url: string
  caption: string
  name: string
  hp: number
  set_name: string
}

<script lang="ts">
  import Boox, { type SearchResult } from 'boox'
  import { onMount } from 'svelte'
  import debounce from 'debounce'
  import { metaphone } from 'metaphone'
  import { stemmer } from 'stemmer'
  import { removeStopwords } from 'stopword'
  import type { Pokemon } from '../types'
  import SearchInfo from './SearchInfo.svelte'
  import SearchResults from './SearchResults.svelte'

  let pokemons: Pokemon[] = []
  let totalDocuments: number = 0
  let results: SearchResult<Pokemon>[] = []
  let query = ''

  const boox = new Boox<Pokemon>({
    features: ['name', 'caption', 'set_name'],
    attributes: ['hp', 'image_url'],
    modelOptions: {
      tokenizer(input) {
        return removeStopwords(Array.from(input.match(/\b\w+\b/g) || []))
      },
      stemmer: stemmer,
      phonetic: metaphone
    }
  })

  onMount(async () => {
    pokemons = await fetchData()
    await boox.addDocuments(pokemons)

    totalDocuments = Object.keys(boox.currentState.documents).length
  })

  const performSearch = debounce(async () => {
    results = await boox.search(query)
  }, 300)

  async function fetchData(): Promise<Pokemon[]> {
    try {
      const response = await fetch(
        'https://stilearning.com/boox/demo/datasets/pokemon-100r.json',
        { cache: 'default' }
      )
      return await response.json()
    } catch (error) {
      throw error
    }
  }
</script>

<form id="search-form" class="p-3" role="search">
  <div class="form-group">
    <input
      name="search"
      type="search"
      class="form-control form-control-lg"
      bind:value={query}
      on:input={performSearch}
      placeholder="Search (e.g. pikachu, water pwer)"
      aria-label="Search pokemons"
    />

    <div class="form-text">
      <strong>Note:</strong>
      the
      <code class="bg-body-secondary">pwer</code>
      demonstrates a typing error for
      <code class="bg-body-secondary">power</code>.
    </div>
  </div>
</form>

<SearchInfo bind:results bind:totalDocuments />

<SearchResults bind:results />

<script lang="ts">
  import type { SearchResult } from 'boox'
  import type { Pokemon } from '../types'

  export let results: SearchResult<Pokemon>[] = []
  export let totalDocuments: number = 0
</script>

{#if results.length}
  <p id="results-length" class="px-3 text-muted">
    Found {results.length} of {totalDocuments} pokemons
  </p>
{/if}

<script lang="ts">
  import type { SearchResult } from 'boox'
  import type { Pokemon } from '../types'

  export let result: SearchResult<Pokemon>
</script>

<a
  class="list-group-item list-group-item-action d-flex gap-3 py-3"
  href={result.attributes.image_url}
  target="_blank"
>
  <img
        loading='lazy'
    src={result.attributes.image_url}
    alt={result.attributes.name}
    width="32"
    height="32"
    class="rounded-circle flex-shrink-0"
  />
  <div class="d-flex gap-2 w-100 justify-content-between">
    <div>
      <h6 class="mb-1">
        {@html result.context('name').text} – {@html result.context('set_name')
          .text}
      </h6>
      <p class="mb-0 opacity-75">
        {@html result.context('caption', 80).text}...
      </p>
    </div>
    <small class="opacity-50 text-nowrap">HP {result.attributes.hp}</small>
  </div>
</a>

<script lang="ts">
  import type { SearchResult } from 'boox'
  import type { Pokemon } from '../types'
  import SearchResultComponents from './SearchResult.svelte'

  export let results: SearchResult<Pokemon>[] = []
</script>

{#if results.length}
  <div id="results" class="list-group list-group-flush overflow-auto rounded-3">
    {#each results as result}
      <SearchResultComponents {result} />
    {/each}
  </div>
{/if}