The getData function is expected to return an array of objects containing the data you wish to index (a product catalog, blog posts, documentation pages, pokémons or whatever). Each object in the data array should have a key named id, _id or objectID for Algolia to recognize it and overwrite existing data where appropriate.
The settings object applies to all indices. You can also pass a settings object to each index individually which overrides the general one.
You can call this function wherever you'd like to update your indices, e.g. in svelte.config.js or in src/hooks.ts (as this demo site does). Typically, you would include this in every production build of your app.
Config Options
const defaultConfig = {
verbosity: 1, // 0, 1 or 2 for no/some/lots of loggingpartialUpdates: false, // if true, figures out diffs between existing// items and new ones and only uploads changes, otherwise, completely// overwrites each index on every call to indexAlgolia()matchFields: [], // (only used when partialUpdates is true) keys of fields to check// for whether an item has changed; could e.g. be a timestamp, hash or an ID that's// updated every time the item has changed; if not provided, items are checked for// deep-equality to discover changes which can become slow for thousands of itemssettings: {}, // an object of Algolia index settings that applies to all indices// see https://algolia.com/doc/api-reference/settings-api-parameters for available options// can be overridden for individual indices by passing a settings object as part of the indices array:// indices = [{ name: `pokedex`, ..., settings: { foo: `bar` }}],
}
Auto-update Indices during Builds
To use this package as part of a build process (e.g. in a SvelteKit app), simply call indexAlgolia in your build config:
// svelte.config.js// only update Algolia indices on production builds (saves Algolia API quota)if (process.env.NODE_ENV === `production`) {
const { indexAlgolia } = awaitimport(`svelte-algolia/server-side`)
const algoliaConfig = {
// see above
}
indexAlgolia(algoliaConfig)
}
3. Client Side UI
<Search /> needs your Algolia app's ID and search key to access its search indices as well as a mapping from index names to corresponding Svelte-component that should render search hits coming from that index. Each hit component receives a hit object as prop with all attributes stored in the Algolia index.
<script>
import Search from 'svelte-algolia'
import PokemonHit from '../components/PokemonHit.svelte'
const appId = '0OJ5UL9OJX'
const searchKey = '63f563566cdd6de606e2bb0fdc291994'
// in a real app you'd get your credentials like this:
const appId = import.meta.env.VITE_ALGOLIA_APP_ID
const searchKey = import.meta.env.VITE_ALGOLIA_SEARCH_KEY
</script>
<header>
<nav>{...}</nav>
<Search
{appId}
{searchKey}
indices={{ Pokedex: PokemonHit }}
placeholder="Search Pokedex" />
</header>
For example, the PokemonHit.svelte component on the demo site looks like this:
Substrings in attributes matching the current search string will be wrapped in <em> which need the {@html ...} tag to be rendered correctly but can then be styled to highlight why a particular hit matches the current search string. The original value (i.e. without <em> tags) of every highlighted attribute is available as hit.[attr]Orig. See hit.nameOrig above.
Props
Full list of props/bindable variables for this component:
Tells assistive technology how to announce the input element to the user.
hasFocus: boolean = false
Bindable boolean indicating whether the text input or results pane currently has focus.
indices: | Record<string, typeofSvelteComponent> | [string, typeofSvelteComponent][] // [indexName, component to render search results from that index]
Object mapping the name of each index the Search component should tap into for finding Search results to the Svelte component that should render those hits.
input: HTMLInputElement | null = null
Handle to the DOM node.
loadingMsg: string = `Searching...`
String to display in the results pane while Search results are being fetched.
noResultMsg = (query: string): string =>`No results for '${query}'`
Function that returns the string to display when search returned no results.
placeholder: string = `Search`
Placeholder shown in the text input before user starts typing.
Function that returns a string which will be displayed next to the name of each index to show how many results were found in that index. Return empty string to show nothing.
Search.svelte listens for on:close events on every hit component it renders and will set hasFocus to false to close itself when received. You can use this e.g. to close the search interface when the user clicks on a link in one of the search results and navigates to a different page on your site:
<script>
import { createEventDispatcher } from 'svelte'
export let hit
const dispatch = createEventDispatcher()
</script>
<h3>
<a href={hit.slug} on:click={() => dispatch(`close`)}>{@html hit.title}</a>
</h3>
<p>{@html hit.body}</p>
It also emits a focus event every the user clicks the search icon and focus enters the text input.
The top level element is an aside with class svelte-algolia. So you can also style the entire DOM tree below it by defining global styles like
:global(aside.svelte-algolia input button svg) {
/* this would target the search icon */
}
:global(aside.svelte-algolia div.results section h2) {
/* this would target the heading shown above the list of results for each index */
}
Using svelte-algolia yourself? Submit a PR to add your site here!
Want to contribute?
PRs are welcome but best open an issue first to discuss changes.
The app ID and search key .env were intentionally committed so you can clone this repo and work on it without having to create your own index first. To get a dev server running locally so you can try out changes in src/lib as you make them, use
git clone https://github.com/janosh/svelte-algolia
cd svelte-algolia
sed -i.bak 's/name: `Pokedex`/name: `Pokedex Clone`/' svelte.config.js
npm install
npm run dev
Note the sed command that changes the index name in site/svelte.config.js from 'Pokedex' to 'Pokedex Clone' so you don't accidentally mess up the search index for this demo site while developing.
Algolia server-side index updater and client-side search component for Svelte projects
The npm package svelte-algolia receives a total of 14 weekly downloads. As such, svelte-algolia popularity was classified as not popular.
We found that svelte-algolia demonstrated a not healthy version release cadence and project activity because the last version was released a year ago.It has 1 open source maintainer collaborating on the project.
Package last updated on 19 Sep 2022
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.
NIST's new password guidelines remove periodic changes and special character requirements, focusing on longer, more secure passwords for better authentication practices.