Pass transformItems to SearchBar

[mturoci]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

One of Algolia config options should be transformItems function which can filter/reorder the incoming search results prior to displaying to the user.

However, it seems like this function is not being picked up when defined in Docusaurus config at all.

Reproducible demo

https://stackblitz.com/edit/github-mfcf4x?file=docusaurus.config.js

Steps to reproduce

1. Add algolia config to docusaurus.config.js:

themeConfig: {
  algolia: {
    appId: 'X1Z85QJPUV',
    apiKey: 'bf7211c161e8205da2f933a02534105a',
    indexName: 'docusaurus-2',
    contextualSearch: true,
    transformItems: (items) => {
      console.log(items); // This should log search hits, but does not.
      return items;
    }
  },
}

2. Try to search for something that returns results.
3. Observe the console if the search hits are logged.

Expected behavior

Search hits should be logged to the console.

Actual behavior

Search hits are not logged to the console.

Your environment

• Public source code:https://github.com/h2oai/wave/tree/master/website
• Public site URL: https://wave.h2o.ai/
• Docusaurus version used: 2.1.0, but reproducible on latest as well
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome Version 108.0.5359.124 (Official Build) (x86_64)
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): MacOS 10.15.7

Self-service

• I'd be willing to fix this bug myself.

[mturoci]

cc @shortcuts

[Josh-Cena]

Hi, you can't use non-serializable items in themeConfig as they can't reach the client code. See https://docusaurus.io/docs/advanced/architecture

In order to pass callbacks to theme components, please swizzle the component instead, and pass the callback directly as a prop. This is why you need to swizzle MDXComponents.

[mturoci]

Thanks @Josh-Cena! I was able to get it working by ejecting @docusaurus/theme-search-algolia SearchBar.

However, I was thinking that a better solution would be to wrap the ejected component and pass my transformItems function instead. This would allow for fewer breaking changes in the future compared to full eject. It shouldn't even be that hard to implement since the component already accepts transformItems prop, it's just ignored.

Wdyt @Josh-Cena? If you think this makes sense, I am fine with making a PR.

[Josh-Cena]

Sounds good to me :)