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 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:
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 try out your changes in a dev server running locally, 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
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.
Last updated on 24 Oct 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.
LDAPjs, an LDAP Client and Server API for Node.js, was decommissioned after its maintainer received an abusive email from a user, raising concerns about this form of abuse as a potential attack vector.
CISA launched a new project called Vulnrichment to enrich CVEs with details that help prioritize patching and mitigation efforts, as the NVD backlog of unenriched CVEs awaiting analysis surpasses 10,000.
Socket is joining forces with CISA and other industry leaders at the RSA Conference to sign the Secure by Design pledge, committing to uphold the highest security standards in our products.