algolia/docsearch 1533
:blue_book: The easiest way to add search to your documentation.
algolia/unified-instantsearch-ecommerce 13
The fastest way to implement Algolia, for e-commerce customers.
francoischalifour/autocomplete.js 12
:crystal_ball: WIP monorepo for the future Autocomplete Suite and DocSearch v3
francoischalifour/cpp-sublime-snippet 5
C++ Sublime Text Snippets following Google Style Guide
francoischalifour/incognito-link 3
👻 🔗 Google Chrome extension to open a link in Incognito mode with ⇧-Alt or ⇧-⌥
francoischalifour/algolia-opensearch-suggestions 2
Service to convert Algolia Query Suggestions to OpenSearch Suggestions.
Created with CodeSandbox
francoischalifour/algolia-site-search-next 1
Algolia site search demo with Next.js
francoischalifour/fosdem-search 1
A quickly handcrafted search for 834 FOSDEM'20 talks • built in Brussels
francoischalifour/instantsearch-devtools 1
Tools for visualizing the InstantSearch state on any production app
pull request commentalgolia/doc-code-samples
feat(autocomplete): update Query Suggestions to Autocomplete v1
@Shipow I believe what you're suggesting is to use a virtual hierarchical menu instead of the provided hierarchicalMenu widget. The hierarchical menu shouldn't show up but its refinement should still apply.
Do you think that a tradeoff would be to have an actual hierarchicalMenu in the guide, and to add a recommendation section at the end? This section would state that this widget doesn't need to be rendered if you display the main current search category at an obvious spot in your header.
comment created time in 5 hours
Pull request review commentalgolia/instantsearch.js
feat(panel): provide widgetRenderState to panel
export type PanelTemplates = { collapseButtonText?: Template<{ collapsed: boolean }>; }; -export type PanelWidgetOptions = {+export type PanelWidgetOptions<TWidget extends WidgetFactory<any, any, any>> = { /** * A function that is called on each render to determine if the * panel should be hidden based on the render options. */- hidden?(options: RenderOptions): boolean;+ hidden?(+ options: RenderOptions & {+ widgetRenderState: ReturnType<+ Exclude<ReturnType<TWidget>['getWidgetRenderState'], undefined>
Hmm I'm not sure what line 87 does then, it looks really complicated.
comment created time in 5 hours
pull request commentalgolia/instantsearch.js
fix(configure): pass the latest state to onStateChange
Nice fix!
comment created time in 7 hours
pull request commentalgolia/instantsearch.js
Perhaps the Babel upgrades changed a few transpilation outputs?
comment created time in 7 hours
Pull request review commentalgolia/autocomplete.js
describe('autocomplete-js', () => { </div> </form> <div- class="aa-Dropdown"+ class="aa-ListContainer"
It's important to note that this term will also replace the main getDropdownProps API:
https://github.com/algolia/autocomplete.js/blob/a916aea48743eaa3e97e1e421aa1ac6986fa0e83/packages/autocomplete-core/src/createAutocomplete.ts#L81
Perhaps "Panel" makes sense?
comment created time in 8 hours
Pull request review commentalgolia/instantsearch.js
feat(panel): provide widgetRenderState to panel
const panel: PanelWidget = widgetParams => { return undefined; }, render(...args) {- const [options] = args;+ const [renderOptions] = args;++ let widgetRenderState;
We can simplify this branching logic:
const widgetRenderState = widget.getWidgetRenderState?.(renderOptions) || {};
comment created time in 8 hours
Pull request review commentalgolia/instantsearch.js
feat(panel): provide widgetRenderState to panel
export type PanelTemplates = { collapseButtonText?: Template<{ collapsed: boolean }>; }; -export type PanelWidgetOptions = {+export type PanelWidgetOptions<TWidget extends WidgetFactory<any, any, any>> = { /** * A function that is called on each render to determine if the * panel should be hidden based on the render options. */- hidden?(options: RenderOptions): boolean;+ hidden?(+ options: RenderOptions & {
We can extract this type as PanelRenderOptions (and keep it in this file) and use it in both hidden and collapsed.
comment created time in 8 hours
Pull request review commentalgolia/instantsearch.js
feat(panel): provide widgetRenderState to panel
export type PanelTemplates = { collapseButtonText?: Template<{ collapsed: boolean }>; }; -export type PanelWidgetOptions = {+export type PanelWidgetOptions<TWidget extends WidgetFactory<any, any, any>> = { /** * A function that is called on each render to determine if the * panel should be hidden based on the render options. */- hidden?(options: RenderOptions): boolean;+ hidden?(+ options: RenderOptions & {+ widgetRenderState: ReturnType<+ Exclude<ReturnType<TWidget>['getWidgetRenderState'], undefined>
Instead of excluding undefined, the Required<...> type could perhaps work here?
comment created time in 8 hours
pull request commentalgolia/doc-code-samples
feat(autocomplete): update Query Suggestions to Autocomplete v1
I refactored the code to make it simpler. I believe we're good to move forward.
comment created time in 9 hours
Pull request review commentalgolia/doc-code-samples
feat(autocomplete): update Query Suggestions to Autocomplete v1
search.addWidgets([ }), // We need to add a refinement list with the same attribute as the parent index
v.
comment created time in 9 hours
push eventalgolia/doc-code-samples
commit sha 822148bf8fe7c1ef30a3292e7fa5f60dfb58fe74
refactor: check for main category
push time in 9 hours
push eventalgolia/doc-code-samples
commit sha 859520374dc88459417385b56aa4de563cf95735
docs: update comment about hierarchical menu
push time in 9 hours
push eventalgolia/doc-code-samples
commit sha c2de0ef5cdd0cc909ecfa739e4c95bc42de57000
refactor: simplify code
push time in 9 hours
Pull request review commentalgolia/autocomplete.js
describe('autocomplete-js', () => { </div> </form> <div- class="aa-Dropdown"+ class="aa-ListContainer"
@Haroenv "dropdown" loses it sense in the context of modal searches like DocSearch v3, so I'm unsure.
comment created time in a day
pull request commentalgolia/search-insights.js
fix: do not store anonymous token in cookie when user has opted out
@eunjae-lee Makes sense to me.
comment created time in a day
Pull request review commentalgolia/autocomplete.js
describe('autocomplete-js', () => { </div> </form> <div- class="aa-Dropdown"+ class="aa-ListContainer"
Any better alternative to this?
comment created time in a day
delete branch algolia/autocomplete.js
delete branch : feat/remove-statusContext
delete time in a day
push eventalgolia/autocomplete.js
commit sha a916aea48743eaa3e97e1e421aa1ac6986fa0e83
feat(core): remove `statusContext` API (#350)
push time in a day
PR merged algolia/autocomplete.js
This removes the undocumented statusContext API.
This state property was originally added to my POC to track which error happened last in the lifecycle. Since we don't leverage this for now, let's remove it. If users express the need for such a feature, we can add the feature back.
pr closed time in a day
Pull request review commentalgolia/autocomplete.js
type ClassNames = { input?: string; completion?: string;
I think we'll go with "prediction", but I'll remove this feature before going stable because I've got a way better and flexible API in mind. I'll take a bit more time to polish the feature.
comment created time in a day
push eventalgolia/autocomplete.js
commit sha 6c03d8d148877c914e43ad75952156ac1f014803
fix(js): fix highlight `hit` param
push time in a day
push eventalgolia/autocomplete.js
commit sha 73285f501cecafcc2d2088c7b3e979d54f71da9d
feat(examples): update class names
push time in a day
PR opened algolia/autocomplete.js
This renames the class names to better reflect the structure of the DOM.
Feel free to suggest any changes.
pr created time in a day
PR opened algolia/autocomplete.js
This removes the undocumented statusContext API.
This state property was originally added to my POC to track which error happened last in the lifecycle. Since we don't leverage this for now, let's remove it. If users express the need for such a feature, we can add the feature back.
pr created time in a day
create barnchalgolia/autocomplete.js
branch : feat/remove-statusContext
created branch time in a day
push eventalgolia/autocomplete.js
commit sha cb967a49fa07a6d67b792f24b015289ab4c44afb
fix: fix `setCollections` type
push time in a day
issue commentalgolia/instantsearch.js
uiState is not updated properly after calling setUiState
Hey @jonadeline! You can see in that sandbox that setUiState works with HierarchicalMenu.
Steps
- Click on the input
- Select the "in Computers & Tablets" item
- Notice that the category is refined
I didn't dig into your code but here are a few things that you can look for:
- Is the correct attribute refined?
- Is the UI state updated with the right value? (It should be of the format
{ hierarchicalMenu: { attribute: ['lvl0', 'lvl1'] } } - Is your Svelte app re-rendering on this UI state change?
So I don't think this is related to ##4421.
comment created time in a day
pull request commentalgolia/doc-code-samples
feat(autocomplete): update Query Suggestions to Autocomplete v1
Here's the new experience in 190399b5efc4dd3047a670b33a4600483201c64c:
A few notes:
- Ignore the messy markup and styles, Kevin and I are currently working on an Autocomplete theme that we'll use in the guides.
- The code might seem a little complex, let me know if you want to simplify it. Eventually, I see this QS experience as an Autocomplete Plugin, so very low code.
comment created time in a day
push eventalgolia/doc-code-samples
commit sha 190399b5efc4dd3047a670b33a4600483201c64c
feat: update QS category experience
push time in a day
push eventalgolia/doc-code-samples
commit sha 134c283a606501b8d9e31f1344b8294e406df653
feat: use a hierarchical menu
push time in a day
push eventalgolia/autocomplete.js
commit sha aeebe6de5b71c72fa4ac52b0cc5bd2b71965b973
feat(core): rename private and public methods and properties (#349) BREAKING CHANGE
push time in a day
PR merged algolia/autocomplete.js
The Autocomplete naming were temporary and getting confusing because multiple concepts were mixed up. We spent some time rethinking the naming used in Autocomplete with @Shipow and came up with alternatives that make more sense to us.
This PR introduces multiple breaking changes that we'll need to document in the changelog—but that's fine since we're still in alpha.
Summary
- Internal suggestions are now called Collections
type Collection = { source, items }
- Items in lifecycle were sometimes named "suggestion", sometimes "item". They're now always called "item".
- Item variables were prefixed with "suggestion", they're now prefixed with "item". E.g,
itemUrl. - Source method
getInputValue→getItemInputValuefor clarity - Source method
getSuggestions→getItems - Source method
getSuggestionUrl→getItemUrl - Setter method
setHighlightedIndexis renamedsetSelectedItemIdfor clarity. "highlight" is a word that we use for highlighting and snippetting. This renaming removes this confusion. defaultHighlightedIndex→defaultSelectedItemId- Highlighting utils manipulate "hits", not "items" because they Algolia-transformed items called hits.
Next
shouldDropdownShowwill also get renamed
pr closed time in a day
push eventalgolia/autocomplete.js
commit sha 753c8ca1358d1bd26c818ddb704caa0265d5aeae
fix(getSuggestions): allow nested arrays to be returned (#331) * fix(getSuggestions): allow nested arrays to be returned this is useful, since it allows getAlgoliaHits to be used top-level, but also within a single source, without having to take the first element of the array manually * Update packages/autocomplete-core/src/getAutocompleteSetters.ts Co-authored-by: François Chalifour <[email protected]> * inline logic in test * better wording for test * refactor test * revert public api change * idk * fix import in test * change type in test * remove comment * fix tests based on rebase * fix type * remove multi * remove more Co-authored-by: François Chalifour <[email protected]>
commit sha 992224398bb53de8d198d329ecb4bf759978c46a
Merge branch 'next' into refactor/naming
push time in a day
pull request commentalgolia/doc-code-samples
feat(autocomplete): update Query Suggestions to Autocomplete v1
@eunjae-lee When I developed the sandbox I used an actual RefinementList: see initial demo—but I believe this is for debugging purposes only with this display. A real-case example of that will be displaying a hierarchical menu instead of a refinement list. This allows the user to "skip" the initial "lvl0" refinement and to end up directly in the item's category. That sounds great and I'll update that!
@Meschreiber The experience you describe is the one I created for the Code Plays, and I'm fine using this one here as well: see demo.
comment created time in a day
Pull request review commentalgolia/autocomplete.js
feat(core): rename private and public methods and properties
export function getNextHighlightedIndex<TItem>( // We don't have access to the autocomplete source when we call `onKeyDown` // or `onClick` because those are native browser events. // However, we can get the source from the suggestion index.-function getSuggestionFromHighlightedIndex<TItem>({+function getCollectionFromSelectedItemId<TItem>({ state, }: { state: AutocompleteState<TItem>;-}): AutocompleteSuggestion<TItem> | undefined {+}): AutocompleteCollection<TItem> | undefined { // Given 3 sources with respectively 1, 2 and 3 suggestions: [1, 2, 3] // We want to get the accumulated counts: // [1, 1 + 2, 1 + 2 + 3] = [1, 3, 3 + 3] = [1, 3, 6]- const accumulatedSuggestionsCount = state.suggestions- .map((suggestion) => suggestion.items.length)- .reduce<number[]>((acc, suggestionCount, index) => {+ const accumulatedCollectionssCount = state.collections
Good catch—perhaps that announces a new broken key on my keyboard 🤪
See e162b5158c67a2915c2b972ad28a2f356df735d6.
comment created time in a day
push eventalgolia/autocomplete.js
commit sha e162b5158c67a2915c2b972ad28a2f356df735d6
fix: rename `accumulatedCollectionsCount`
push time in a day
Pull request review commentalgolia/autocomplete.js
fix(getSuggestions): allow nested arrays to be returned
describe('createAutocomplete', () => { ); }); - test('setSuggestions', () => {- const onStateChange = jest.fn();- const { setSuggestions } = createAutocomplete({- getSources: () => [],- onStateChange,+ describe('setSuggestions', () => {+ test('default', () => {+ const onStateChange = jest.fn();+ const { setSuggestions } = createAutocomplete({+ getSources: () => [],+ onStateChange,+ });++ setSuggestions([createSuggestion([{ label: 'hi' }])]);++ expect(onStateChange).toHaveBeenCalledTimes(1);+ expect(onStateChange).toHaveBeenCalledWith({+ state: expect.objectContaining({+ suggestions: [+ {+ items: [+ {+ label: 'hi',+ __autocomplete_id: 0,+ },+ ],+ source: expect.any(Object),+ },+ ],+ }),+ }); });- const suggestions = [createSuggestion()]; - setSuggestions(suggestions);+ test('flattens suggestions', () => {+ const onStateChange = jest.fn();+ const { setSuggestions } = createAutocomplete({+ openOnFocus: true,+ getSources: () => [],+ onStateChange,+ }); - expect(onStateChange).toHaveBeenCalledTimes(1);- expect(onStateChange).toHaveBeenCalledWith(- expect.objectContaining({- state: expect.objectContaining({ suggestions }),- })- );+ // while it also accepts a nested array.+ // There's only one type for both input and output however,+ setSuggestions([createMultiSuggestion([[{ label: 'hi' }]])]);
Here's a solution that would work:
function createSuggestion<TItem extends { label: string }>(
items: TItem[] | TItem[][] = []
): AutocompleteSuggestion<TItem | TItem[]> | AutocompleteSuggestion<TItem[]> {
return {
source: {
getInputValue: ({ suggestion }) => suggestion.label,
getSuggestionUrl: () => undefined,
onHighlight: () => {},
onSelect: () => {},
getSuggestions: () => items,
},
items,
};
}
comment created time in 2 days
pull request commentalgolia/algoliasearch-netlify
feat: use algoliasearch-lite to avoid preflight requests
For reference, algoliasearch contains both the indexing and searching capabilities while algoliasearch/lite contains only the searching capabilities. You likely always want to use the lite version on your search frontend.
comment created time in 2 days
Pull request review commentalgolia/doc-code-samples
feat(autocomplete): update Query Suggestions to Autocomplete v1
-/* global $ instantsearch algoliasearch */+import { autocomplete } from '@algolia/autocomplete-js';+import algoliasearch from 'algoliasearch/lite';+import instantsearch from 'instantsearch.js';+import { highlight } from 'instantsearch.js/es/helpers';+import {+ connectAutocomplete,+ connectSearchBox,+ connectRefinementList,+} from 'instantsearch.js/es/connectors';+import {+ configure,+ index,+ hits,+ refinementList,
Indeed—addressed in 55acdf4c5b045d3fde0ca35d908272de0909177d.
comment created time in 2 days
push eventalgolia/doc-code-samples
commit sha 55acdf4c5b045d3fde0ca35d908272de0909177d
fix: remove unused `refinementList`
push time in 2 days
Pull request review commentalgolia/autocomplete.js
fix(getSuggestions): allow nested arrays to be returned
describe('createAutocomplete', () => { ); }); - test('setSuggestions', () => {- const onStateChange = jest.fn();- const { setSuggestions } = createAutocomplete({- getSources: () => [],- onStateChange,+ describe('setSuggestions', () => {+ test('default', () => {+ const onStateChange = jest.fn();+ const { setSuggestions } = createAutocomplete({+ getSources: () => [],+ onStateChange,+ });++ setSuggestions([createSuggestion([{ label: 'hi' }])]);++ expect(onStateChange).toHaveBeenCalledTimes(1);+ expect(onStateChange).toHaveBeenCalledWith({+ state: expect.objectContaining({+ suggestions: [+ {+ items: [+ {+ label: 'hi',+ __autocomplete_id: 0,+ },+ ],+ source: expect.any(Object),+ },+ ],+ }),+ }); });- const suggestions = [createSuggestion()]; - setSuggestions(suggestions);+ test('flattens suggestions', () => {+ const onStateChange = jest.fn();+ const { setSuggestions } = createAutocomplete({+ openOnFocus: true,+ getSources: () => [],+ onStateChange,+ }); - expect(onStateChange).toHaveBeenCalledTimes(1);- expect(onStateChange).toHaveBeenCalledWith(- expect.objectContaining({- state: expect.objectContaining({ suggestions }),- })- );+ // while it also accepts a nested array.+ // There's only one type for both input and output however,+ setSuggestions([createMultiSuggestion([[{ label: 'hi' }]])]);
Can't we accept TItem[] | Array<TItem[]> in createSuggestion? (That would better reflect how you use getSuggestions.)
comment created time in 2 days
PR opened algolia/doc-code-samples
This updates the Query Suggestions guide to Autocomplete v1.
Implementation
I use a child index that takes care of the Query Suggestions index. This index is "detached" in the sense that it doesn't refine the main index query on every key stroke, but only on select and on submit via the setUiState API. In addition to refining the search, it applies the categories from the selected item. On submit, we reset all categories.
Preview
| Before | After |
|---|---|
| Demo → | Demo → |
Notes
The Query Suggestions are not reverse-highlighted, but just highlighted with the highlight helper. Instead of implementing this feature on the sandbox itself (and all the other ones), I believe we should support this in InstantSearch.js.
pr created time in 4 days
push eventalgolia/doc-code-samples
commit sha b94930cd5d2684a82d72ba93dc0fbe833039a03d
feat(autocomplete): update Query Suggestions to Autocomplete v1
push time in 4 days
create barnchalgolia/doc-code-samples
branch : feat/autocomplete-query-suggestions
created branch time in 4 days
issue commentfrancoischalifour/medium-zoom
Gotcha, my bad. The zoomed image is appended to the body and there's no option for that.
Why do you need to append the image to another DOM element?
comment created time in 4 days
Pull request review commentalgolia/autocomplete.js
feat(core): rename private and public methods and properties
export interface GetSourcesParams<TItem> extends AutocompleteSetters<TItem> { } interface ItemParams<TItem> {- suggestion: TItem;- suggestionValue: ReturnType<- InternalAutocompleteSource<TItem>['getInputValue']- >;- suggestionUrl: ReturnType<- InternalAutocompleteSource<TItem>['getSuggestionUrl']+ item: TItem;+ itemInputValue: ReturnType<+ InternalAutocompleteSource<TItem>['getItemInputValue'] >;+ itemUrl: ReturnType<InternalAutocompleteSource<TItem>['getItemUrl']>;
They're coming from getItemInputValue and getItemUrl so it's easier to map the naming to these.
comment created time in 4 days
Pull request review commentalgolia/autocomplete.js
feat(core): rename private and public methods and properties
export function autocomplete<TItem>({ dropdown.classList.remove('aa-Dropdown--stalled'); } - const sections = state.suggestions.map((suggestion) => {- const items = suggestion.items;- const source = suggestion.source as InternalAutocompleteSource<TItem>;+ const sections = state.collections.map((collection) => {
They're not the same, as explained in https://github.com/algolia/autocomplete.js/pull/349#discussion_r511940785.
comment created time in 4 days
Pull request review commentalgolia/autocomplete.js
feat(core): rename private and public methods and properties
export function getAutocompleteSetters<TItem>({ }; return {- setHighlightedIndex,+ setSelectedItemId, setQuery,- setSuggestions,+ setCollections,
Nope, collections remain internal, except if you use the setters. getSuggestions is renamed to getItems, and the result of getItems is the items objet in a collection.
type Collection = { source, items };
comment created time in 4 days
Pull request review commentalgolia/autocomplete.js
feat(core): rename private and public methods and properties
autocomplete<Hit<QuerySuggestionHit>>({ }).then(([hits]) => { return [ {- getInputValue: ({ suggestion }) => suggestion.query,- getSuggestions() {+ getItemInputValue({ item }) {+ return item.query;+ },+ getItems() { return hits; }, templates: { item({ item }) { return ` <div class="item-icon">${searchIcon}</div> <div>- ${reverseHighlightItem({- item,+ ${reverseHighlightHit({
An item is a generic object manipulated by Autocomplete. A hit is an item transformed by Algolia which contains _highlightResult, etc. A hit is a search term and it reflects the Algolia brand.
comment created time in 4 days
PR opened algolia/autocomplete.js
The Autocomplete naming were temporary and getting confusing because multiple concepts were mixed up. We spent some time rethinking the naming used in Autocomplete with @Shipow and came up with alternatives that make more sense to us.
This PR introduces multiple breaking changes that we'll need to document in the changelog—but that's fine since we're still in alpha.
Summary
- Internal suggestions are now called Collections
type Collection = { source, items }
- Items in lifecycle were sometimes named "suggestion", sometimes "item". They're now always called "item".
- Item variables were prefixed with "suggestion", they're now prefixed with "item". E.g,
itemUrl. - Source method
getInputValue→getItemInputValuefor clarity - Source method
getSuggestions→getItems - Source method
getSuggestionUrl→getItemUrl - Setter method
setHighlightedIndexis renamedsetSelectedItemIdfor clarity. "highlight" is a word that we use for highlighting and snippetting. This renaming removes this confusion. defaultHighlightedIndex→defaultSelectedItemId- Highlighting utils manipulate "hits", not "items" because they Algolia-transformed items called hits.
Next
shouldDropdownShowwill also get renamed
pr created time in 4 days
push eventalgolia/autocomplete.js
commit sha ab67a96fc0aa8351a78ad702882bef095602ba59
feat: rename `item` to `hit` in highlight utils
push time in 4 days
pull request commentalgolia/doc-code-samples
feat(autocomplete): update Single Index Search code sample for Autocomplete v1
For reference, a discussion is going on on the Doc repo about the UX problems on this demo.
comment created time in 4 days
Pull request review commentalgolia/doc-code-samples
feat(autocomplete): add autocomplete example with predefined items and recent searches
+export const predefinedItems = {+ getSources({ query }) {+ if (query) {+ return [];+ }++ return [+ {+ getSuggestions() {+ return [+ {
If we want to truly make this a reusable plugin, should this array be passed as an option of the plugin?
comment created time in 4 days
Pull request review commentalgolia/doc-code-samples
feat(autocomplete): add autocomplete example with predefined items and recent searches
+export const predefinedItems = {+ getSources({ query }) {+ if (query) {+ return [];+ }++ return [+ {+ getSuggestions() {+ return [+ {+ title: 'GitHub repository',+ url: 'https://github.com/algolia/autocomplete.js/tree/next',+ },+ {+ title: 'Documentation website',+ url: 'https://algolia-autocomplete.netlify.app',+ },+ {+ title: 'Algolia',+ url: 'https://www.algolia.com',+ },+ ];+ },+ getSuggestionUrl(suggestion) {+ return suggestion.url;+ },+ templates: {+ header() {+ return `+ <div class="aa-PredefinedHeader">+ <p>Useful Links</p>+ </div>+ `;+ },+ item({ item, root }) {+ return `+ <div class="aa-PredefinedItem">
Otherwise if you click anywhere after the "GitHub repository" text, the dropdown closes without redirecting to the link.
comment created time in 4 days
issue commentalgolia/autocomplete.js
Let's take the example of the Recent Searches plugin.
There are multiple case for this experience (that we still need to accurately define). The two that I have in mind right now:
- Same-page experience. The recent search item triggers a function in
onSelect(e.g.,refine()for InstantSearch). - Redirect-page experience. The recent search redirects to the results page with
getSuggestionUrland a template modification that's wrapped inatags.
If we go with the solution where plugin authors need to implement an options API to support these case, we open the ecosystem to (1) inconsistencies and potentially more (2) bugs.
If we go with the [plugin, pluginOptions] syntax, we create a spec that reduces (1) and (2).
import {
createRecentSearchesPlugin,
getSourcesSamePageExperience,
getSourcesRedirectPageExperience,
} from '@algolia/autocomplete-plugin-recent-searches';
const recentSearches = createRecentSearchesPlugin({
/* ... */
});
autocomplete({
// ...
plugins: [[recentSearches, { getSources: getSourcesSamePageExperience }]],
});
This is the dilemna with "APIs vs. Specs", a.k.a., "give a man a fish and you feed him for a day; teach a man to fish and you feed him for a lifetime".
Perhaps there are points that I miss—let me know if that's the case.
comment created time in 4 days
Pull request review commentalgolia/autocomplete.js
fix(getSuggestions): allow nested arrays to be returned
describe('createAutocomplete', () => { ); }); - test('setSuggestions', () => {- const onStateChange = jest.fn();- const { setSuggestions } = createAutocomplete({- getSources: () => [],- onStateChange,+ describe('setSuggestions', () => {+ test('default', () => {+ const onStateChange = jest.fn();+ const { setSuggestions } = createAutocomplete({+ getSources: () => [],+ onStateChange,+ });++ setSuggestions([createSuggestion([{ label: 'hi' }])]);++ expect(onStateChange).toHaveBeenCalledTimes(1);+ expect(onStateChange).toHaveBeenCalledWith({+ state: expect.objectContaining({+ suggestions: [+ {+ items: [+ {+ label: 'hi',+ __autocomplete_id: 0,+ },+ ],+ source: expect.any(Object),+ },+ ],+ }),+ }); });- const suggestions = [createSuggestion()]; - setSuggestions(suggestions);+ test('flattens suggestions', () => {+ const onStateChange = jest.fn();+ const { setSuggestions } = createAutocomplete({+ openOnFocus: true,+ getSources: () => [],+ onStateChange,+ }); - expect(onStateChange).toHaveBeenCalledTimes(1);- expect(onStateChange).toHaveBeenCalledWith(- expect.objectContaining({- state: expect.objectContaining({ suggestions }),- })- );+ // while it also accepts a nested array.+ // There's only one type for both input and output however,+ setSuggestions([createMultiSuggestion([[{ label: 'hi' }]])]);
Why can't we use createSuggestion here?
comment created time in 4 days
Pull request review commentalgolia/autocomplete.js
fix(getSuggestions): allow nested arrays to be returned
describe('createAutocomplete', () => { ); }); - test('setSuggestions', () => {- const onStateChange = jest.fn();- const { setSuggestions } = createAutocomplete({- getSources: () => [],- onStateChange,+ describe('setSuggestions', () => {+ test('default', () => {+ const onStateChange = jest.fn();+ const { setSuggestions } = createAutocomplete({+ getSources: () => [],+ onStateChange,+ });++ setSuggestions([createSuggestion([{ label: 'hi' }])]);++ expect(onStateChange).toHaveBeenCalledTimes(1);+ expect(onStateChange).toHaveBeenCalledWith({+ state: expect.objectContaining({+ suggestions: [+ {+ items: [+ {+ label: 'hi',+ __autocomplete_id: 0,+ },+ ],+ source: expect.any(Object),+ },+ ],+ }),+ }); });- const suggestions = [createSuggestion()]; - setSuggestions(suggestions);+ test('flattens suggestions', () => {+ const onStateChange = jest.fn();+ const { setSuggestions } = createAutocomplete({+ openOnFocus: true,+ getSources: () => [],+ onStateChange,+ }); - expect(onStateChange).toHaveBeenCalledTimes(1);- expect(onStateChange).toHaveBeenCalledWith(- expect.objectContaining({- state: expect.objectContaining({ suggestions }),- })- );+ // while it also accepts a nested array.
This comment isn't relevant anymore, is it?
comment created time in 4 days
issue closedfrancoischalifour/medium-zoom
Can I change the position where the node is added? I want to add it to a node
closed time in 4 days
awnawnawn
issue commentfrancoischalifour/medium-zoom
Hey! You can use the container option for this.
comment created time in 4 days
issue commentalgolia/docsearch
That's great @kamranayub! Make sure to upgrade to @docsearch/react's latest alpha tag (as of today, 1.0.0-alpha.28) to get the latest fixes and features.
The docs look really well detailed and exhaustive, that's impressive.
comment created time in 7 days
startedtoastdriven/microsearch
started time in 7 days
issue commentalgolia/autocomplete.js
I think that we should remove this concern as a whole by moving this responsibility to plugin authors. If they need to support options, they would export a factory:
const plugin = createPlugin({ ...options, source: {} });
Perhaps the problem you had in mind was rather how to leverage the Autocomplete lifecycle in plugins? That's a harder one because we need to spec that.
Example of spec with a getSources option
// Notice `sources` here which are the original sources from the plugin.
function pluginGetSources({ query, sources }) {
if (!query) {
return [];
}
return sources.map(transformOriginalSource);
}
const plugin = createPlugin({ ...options, getSources: pluginGetSources });
comment created time in 8 days
push eventalgolia/autocomplete.js
commit sha d39f4cf193b586c8b6bf50f0380889729e28f17d
test(core): update `onStateChange` test to support `prevState`
commit sha becd01dd871689f2cdc1ff97c9ad95d140f5e503
feat: rename `setHighlightedIndex` to `setSelectedItemId`
commit sha 4f394544d7e732052135503c35667082227a92a5
feat: rename `setSuggestions` to `setCollections`
commit sha 7ae75b36f43122717f5c62ba4077b067034dd02b
feat: rename state `suggestions` to `collections`
commit sha 1fee3725549be7c00e48a61a717dabe42e39751d
feat: rename type `AutocompleteSuggestion` to `AutocompleteCollection`
commit sha d4bba2aa3061458908a27b467a703a7d994172af
feat: rename collection internals
commit sha 70fcebdaf3bf51e093c8f60a2be74bee54c57088
feat: rename `getInputValue` to `getItemInputValue`
commit sha d23e7bc8371de8f82050c76125a5095089e5fab5
fix: fix build
commit sha ddfbf18be30daaa458ece70c8c5d495d92bbf329
feat: rename `getSuggestionUrl` to `getItemUrl`
commit sha f59f74bd462991ae73a5ebc2b8360e54d33b0514
feat: rename suggestions to items
commit sha 83a0e8472b040900d95a409ea33143aad43c078a
fix: remove any cast
push time in 8 days
push eventalgolia/autocomplete.js
commit sha d39f4cf193b586c8b6bf50f0380889729e28f17d
test(core): update `onStateChange` test to support `prevState`
push time in 8 days
PR opened algolia/autocomplete.js
Description
This fixes an issue where promises coming from getSources or getSuggestions resolve out of call order.
+----------------------------------+
| 100ms |
| run(1) +---> R1 |
| 300ms |
| run(2) +-------------> R2 (SKIP) |
| 200ms |
| run(3) +--------> R3 |
+----------------------------------+
In the scenario above, although R2 is the result resolving last, we shouldn't update the results because R3 is more fresh (although it resolved earlier).
Related
- Internal feedback on the Documentation Search v2
- https://twitter.com/MisterAwesan/status/1318138123977674753
cc @redox @Shipow
pr created time in 9 days
create barnchalgolia/autocomplete.js
branch : fix/core-concurrent-safe-promise
created branch time in 9 days
Pull request review commentalgolia/doc-code-samples
feat(autocomplete): add autocomplete example with predefined items and recent searches
+import { createRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches';+const orgRecentSearches = createRecentSearchesPlugin({+ key: 'RECENT_SEARCH',+ limit: 5,+});++export const recentSearches = {
Yes—we need to find a proper solution for this.
comment created time in 9 days
Pull request review commentalgolia/doc-code-samples
feat(autocomplete): add autocomplete example with predefined items and recent searches
+export const predefinedItems = {
That's interesting to treat this as a plugin 🙂
comment created time in 9 days
Pull request review commentalgolia/doc-code-samples
feat(autocomplete): add autocomplete example with predefined items and recent searches
+import { createRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches';+const orgRecentSearches = createRecentSearchesPlugin({
org confused me at first—could stand for "organization". original would be more explicit.
comment created time in 9 days
Pull request review commentalgolia/doc-code-samples
feat(autocomplete): add autocomplete example with predefined items and recent searches
+import algoliasearch from 'algoliasearch/lite';+import {+ autocomplete,+ getAlgoliaHits,+ reverseHighlightItem,+} from '@algolia/autocomplete-js';+import { predefinedItems } from './predefined-items';+import { recentSearches } from './recent-searches';++const searchClient = algoliasearch(+ 'latency',+ '6be0576ff61c053d5f9a3225e2a90f76'+);++autocomplete({+ container: '#autocomplete',+ plugins: [predefinedItems, recentSearches],+ openOnFocus: true,+ onStateChange({ state, prevState }) {
Is that supposed to be here?
comment created time in 9 days
Pull request review commentalgolia/doc-code-samples
feat(autocomplete): add autocomplete example with predefined items and recent searches
+export const predefinedItems = {+ getSources({ query }) {+ if (query) {+ return [];+ }++ return [+ {+ getSuggestions() {+ return [+ {+ title: 'GitHub repository',+ url: 'https://github.com/algolia/autocomplete.js/tree/next',+ },+ {+ title: 'Documentation website',+ url: 'https://algolia-autocomplete.netlify.app',+ },+ {+ title: 'Algolia',+ url: 'https://www.algolia.com',+ },+ ];+ },+ getSuggestionUrl(suggestion) {+ return suggestion.url;+ },+ templates: {+ header() {+ return `+ <div class="aa-PredefinedHeader">+ <p>Useful Links</p>+ </div>+ `;+ },+ item({ item, root }) {+ return `+ <div class="aa-PredefinedItem">
We should make the whole container a link (wrapping the div with a).
comment created time in 9 days