profile
viewpoint
François Chalifour francoischalifour @algolia Paris, France https://francoischalifour.com

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.

algolia/fosdem-search 1

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.

francoischalifour

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.

eunjae-lee

comment created time in 5 hours

PullRequestReviewEvent
PullRequestReviewEvent

pull request commentalgolia/instantsearch.js

fix(configure): pass the latest state to onStateChange

Nice fix!

eunjae-lee

comment created time in 7 hours

pull request commentalgolia/instantsearch.js

chore(yarn): clean lockfile

Perhaps the Babel upgrades changed a few transpilation outputs?

Haroenv

comment created time in 7 hours

Pull request review commentalgolia/autocomplete.js

feat(js): rename class names

 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?

francoischalifour

comment created time in 8 hours

PullRequestReviewEvent

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) || {};
eunjae-lee

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.

eunjae-lee

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?

eunjae-lee

comment created time in 8 hours

PullRequestReviewEvent
PullRequestReviewEvent

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.

francoischalifour

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.

francoischalifour

comment created time in 9 hours

PullRequestReviewEvent

push eventalgolia/doc-code-samples

François Chalifour

commit sha 822148bf8fe7c1ef30a3292e7fa5f60dfb58fe74

refactor: check for main category

view details

push time in 9 hours

push eventalgolia/doc-code-samples

François Chalifour

commit sha 859520374dc88459417385b56aa4de563cf95735

docs: update comment about hierarchical menu

view details

push time in 9 hours

push eventalgolia/doc-code-samples

François Chalifour

commit sha c2de0ef5cdd0cc909ecfa739e4c95bc42de57000

refactor: simplify code

view details

push time in 9 hours

Pull request review commentalgolia/autocomplete.js

feat(js): rename class names

 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.

francoischalifour

comment created time in a day

PullRequestReviewEvent

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.

eunjae-lee

comment created time in a day

PullRequestReviewEvent

Pull request review commentalgolia/autocomplete.js

feat(js): rename class names

 describe('autocomplete-js', () => {             </div>           </form>           <div-            class="aa-Dropdown"+            class="aa-ListContainer"

Any better alternative to this?

francoischalifour

comment created time in a day

PullRequestReviewEvent

delete branch algolia/autocomplete.js

delete branch : feat/remove-statusContext

delete time in a day

push eventalgolia/autocomplete.js

François Chalifour

commit sha a916aea48743eaa3e97e1e421aa1ac6986fa0e83

feat(core): remove `statusContext` API (#350)

view details

push time in a day

PR merged algolia/autocomplete.js

Reviewers
feat(core): remove `statusContext` API

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.

+0 -7

1 comment

3 changed files

francoischalifour

pr closed time in a day

Pull request review commentalgolia/autocomplete.js

feat(js): rename class names

 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.

francoischalifour

comment created time in a day

PullRequestReviewEvent

push eventalgolia/autocomplete.js

François Chalifour

commit sha 6c03d8d148877c914e43ad75952156ac1f014803

fix(js): fix highlight `hit` param

view details

push time in a day

push eventalgolia/autocomplete.js

François Chalifour

commit sha 73285f501cecafcc2d2088c7b3e979d54f71da9d

feat(examples): update class names

view details

push time in a day

PR opened algolia/autocomplete.js

Reviewers
feat(js): rename class names

This renames the class names to better reflect the structure of the DOM.

Feel free to suggest any changes.

+21 -27

0 comment

4 changed files

pr created time in a day

create barnchalgolia/autocomplete.js

branch : feat/js-class-names-1

created branch time in a day

PR opened algolia/autocomplete.js

Reviewers
feat(core): remove `statusContext` API

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.

+0 -7

0 comment

3 changed files

pr created time in a day

create barnchalgolia/autocomplete.js

branch : feat/remove-statusContext

created branch time in a day

push eventalgolia/autocomplete.js

François Chalifour

commit sha cb967a49fa07a6d67b792f24b015289ab4c44afb

fix: fix `setCollections` type

view details

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

  1. Click on the input
  2. Select the "in Computers & Tablets" item
  3. Notice that the category is refined

image

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.

jonadeline

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:

image

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.
francoischalifour

comment created time in a day

push eventalgolia/doc-code-samples

François Chalifour

commit sha 190399b5efc4dd3047a670b33a4600483201c64c

feat: update QS category experience

view details

push time in a day

push eventalgolia/doc-code-samples

François Chalifour

commit sha 134c283a606501b8d9e31f1344b8294e406df653

feat: use a hierarchical menu

view details

push time in a day

push eventalgolia/autocomplete.js

François Chalifour

commit sha aeebe6de5b71c72fa4ac52b0cc5bd2b71965b973

feat(core): rename private and public methods and properties (#349) BREAKING CHANGE

view details

push time in a day

delete branch algolia/autocomplete.js

delete branch : refactor/naming

delete time in a day

PR merged algolia/autocomplete.js

feat(core): rename private and public methods and properties

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 getInputValuegetItemInputValue for clarity
  • Source method getSuggestionsgetItems
  • Source method getSuggestionUrlgetItemUrl
  • Setter method setHighlightedIndex is renamed setSelectedItemId for clarity. "highlight" is a word that we use for highlighting and snippetting. This renaming removes this confusion.
  • defaultHighlightedIndexdefaultSelectedItemId
  • Highlighting utils manipulate "hits", not "items" because they Algolia-transformed items called hits.

Next

  • shouldDropdownShow will also get renamed
+356 -362

1 comment

28 changed files

francoischalifour

pr closed time in a day

PullRequestReviewEvent

push eventalgolia/autocomplete.js

Haroen Viaene

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 <francoischalifour@users.noreply.github.com> * 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 <francoischalifour@users.noreply.github.com>

view details

François Chalifour

commit sha 992224398bb53de8d198d329ecb4bf759978c46a

Merge branch 'next' into refactor/naming

view details

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.

francoischalifour

comment created time in a day

PullRequestReviewEvent

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.

francoischalifour

comment created time in a day

PullRequestReviewEvent

push eventalgolia/autocomplete.js

François Chalifour

commit sha e162b5158c67a2915c2b972ad28a2f356df735d6

fix: rename `accumulatedCollectionsCount`

view details

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,
  };
}
Haroenv

comment created time in 2 days

PullRequestReviewEvent

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.

sbellone

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.

francoischalifour

comment created time in 2 days

PullRequestReviewEvent

push eventalgolia/doc-code-samples

François Chalifour

commit sha 55acdf4c5b045d3fde0ca35d908272de0909177d

fix: remove unused `refinementList`

view details

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.)

Haroenv

comment created time in 2 days

PullRequestReviewEvent

PR opened algolia/doc-code-samples

Reviewers
feat(autocomplete): update Query Suggestions to Autocomplete v1

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.

+563 -149

0 comment

6 changed files

pr created time in 4 days

push eventalgolia/doc-code-samples

François Chalifour

commit sha b94930cd5d2684a82d72ba93dc0fbe833039a03d

feat(autocomplete): update Query Suggestions to Autocomplete v1

view details

push time in 4 days

create barnchalgolia/doc-code-samples

branch : feat/autocomplete-query-suggestions

created branch time in 4 days

IssuesEvent

issue commentfrancoischalifour/medium-zoom

Img view node add location

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?

awnawnawn

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.

francoischalifour

comment created time in 4 days

PullRequestReviewEvent

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.

francoischalifour

comment created time in 4 days

PullRequestReviewEvent

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 };
francoischalifour

comment created time in 4 days

PullRequestReviewEvent

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.

francoischalifour

comment created time in 4 days

PullRequestReviewEvent

PR opened algolia/autocomplete.js

Reviewers
feat(core): rename private and public methods and properties

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 getInputValuegetItemInputValue for clarity
  • Source method getSuggestionsgetItems
  • Source method getSuggestionUrlgetItemUrl
  • Setter method setHighlightedIndex is renamed setSelectedItemId for clarity. "highlight" is a word that we use for highlighting and snippetting. This renaming removes this confusion.
  • defaultHighlightedIndexdefaultSelectedItemId
  • Highlighting utils manipulate "hits", not "items" because they Algolia-transformed items called hits.

Next

  • shouldDropdownShow will also get renamed
+356 -357

0 comment

28 changed files

pr created time in 4 days

push eventalgolia/autocomplete.js

François Chalifour

commit sha ab67a96fc0aa8351a78ad702882bef095602ba59

feat: rename `item` to `hit` in highlight utils

view details

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.

eunjae-lee

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?

eunjae-lee

comment created time in 4 days

PullRequestReviewEvent

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.

image

eunjae-lee

comment created time in 4 days

PullRequestReviewEvent

issue commentalgolia/autocomplete.js

[v1] options for plugins

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:

  1. Same-page experience. The recent search item triggers a function in onSelect (e.g., refine() for InstantSearch).
  2. Redirect-page experience. The recent search redirects to the results page with getSuggestionUrl and a template modification that's wrapped in a tags.

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.

eunjae-lee

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?

Haroenv

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?

Haroenv

comment created time in 4 days

PullRequestReviewEvent
PullRequestReviewEvent

issue closedfrancoischalifour/medium-zoom

Img view node add location

Can I change the position where the node is added? I want to add it to a node Snipaste_2020-10-26_13-12-55

closed time in 4 days

awnawnawn

issue commentfrancoischalifour/medium-zoom

Img view node add location

Hey! You can use the container option for this.

awnawnawn

comment created time in 4 days

issue commentalgolia/docsearch

Cmd + K keyboard shortcut

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.

sw-yx

comment created time in 7 days

startedtoastdriven/microsearch

started time in 7 days

issue commentalgolia/autocomplete.js

[v1] options for plugins

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 });
eunjae-lee

comment created time in 8 days

push eventalgolia/autocomplete.js

François Chalifour

commit sha d39f4cf193b586c8b6bf50f0380889729e28f17d

test(core): update `onStateChange` test to support `prevState`

view details

François Chalifour

commit sha becd01dd871689f2cdc1ff97c9ad95d140f5e503

feat: rename `setHighlightedIndex` to `setSelectedItemId`

view details

François Chalifour

commit sha 4f394544d7e732052135503c35667082227a92a5

feat: rename `setSuggestions` to `setCollections`

view details

François Chalifour

commit sha 7ae75b36f43122717f5c62ba4077b067034dd02b

feat: rename state `suggestions` to `collections`

view details

François Chalifour

commit sha 1fee3725549be7c00e48a61a717dabe42e39751d

feat: rename type `AutocompleteSuggestion` to `AutocompleteCollection`

view details

François Chalifour

commit sha d4bba2aa3061458908a27b467a703a7d994172af

feat: rename collection internals

view details

François Chalifour

commit sha 70fcebdaf3bf51e093c8f60a2be74bee54c57088

feat: rename `getInputValue` to `getItemInputValue`

view details

François Chalifour

commit sha d23e7bc8371de8f82050c76125a5095089e5fab5

fix: fix build

view details

François Chalifour

commit sha ddfbf18be30daaa458ece70c8c5d495d92bbf329

feat: rename `getSuggestionUrl` to `getItemUrl`

view details

François Chalifour

commit sha f59f74bd462991ae73a5ebc2b8360e54d33b0514

feat: rename suggestions to items

view details

François Chalifour

commit sha 83a0e8472b040900d95a409ea33143aad43c078a

fix: remove any cast

view details

push time in 8 days

push eventalgolia/autocomplete.js

François Chalifour

commit sha d39f4cf193b586c8b6bf50f0380889729e28f17d

test(core): update `onStateChange` test to support `prevState`

view details

push time in 8 days

create barnchalgolia/autocomplete.js

branch : refactor/naming

created branch time in 8 days

PR opened algolia/autocomplete.js

Reviewers
fix(core): run promises in a concurrent-safe way

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

+95 -6

0 comment

4 changed files

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.

eunjae-lee

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 🙂

eunjae-lee

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.

eunjae-lee

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?

eunjae-lee

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).

eunjae-lee

comment created time in 9 days

PullRequestReviewEvent
more