Export getHighlightedParts getPropertyByPath in the API

[kopax-polyconseil]

We found some limitation using the current API when we needed to turn into bold what users didn't type in the input value when displaying suggestions.

The final result look as follow:

Those two utilities are not documented nor supported in your API, but necessary to develop this feature:

import getHighlightedParts from 'instantsearch.js/es/lib/utils/getHighlightedParts'
import getPropertyByPath from 'instantsearch.js/es/lib/utils/getPropertyByPath'

// later

export const Highlight: FunctionComponent<HighlightProps> = ({ hit, attribute }) => {
  const { value } = getPropertyByPath(hit._highlightResult, attribute) || {}
  const attributeValue = value.toString()
  const parts = getHighlightedParts(
    // it is necessary to have a good display when a search was executed and autocomplete redisplayed in iOS and Android
    attributeValue.replaceAll('&lt;em&gt;', '<mark>').replaceAll('&lt;/em&gt;', '</mark>')
  )

  return (
    <React.Fragment>
      {parts.map((part, partIndex) => {
        return (
          <HighlightPart key={partIndex} isHighlighted={part.isHighlighted}>
            {part.value}
          </HighlightPart>
        )
      })}
    </React.Fragment>
  )
}

Those are not exported in the main entrypoint.

In order to support such customization without weird import, could you please support this and exports those?

If you move those files we will not be notified.

Thanks!

[Haroenv]

If you import from instantsearch.js/es/lib/utils it will not have a breaking change outside of a major version, as React InstantSearch Hooks is using the same import: https://github.com/algolia/react-instantsearch/blob/1c2f46da2d1cf705cfd3946c52aef4ca9ec943d7/packages/react-instantsearch-hooks-web/src/widgets/Highlight.tsx

Is the reason that you can't use the default highlight components because you want to preprocess the parts? We were debating wether useHighlight (in React InstantSearch Hooks, maybe official util functions from instantsearch.js) would have any use, but couldn't find any that required the use.

Would useHighlight(hit._highlightResult, attribute) also fit your use case (or not because you want to process after the value has been found?)

[kopax-polyconseil]

Regarding importing instantsearch.js/es/lib/utils we did a try, but this drastically increased our bundle size, we use webpack 4 and it seems tree shaking doesn't work well, or well with your module. Also, I am not a fan of importing unsupported feature, this should be fixed in the documentation and deprecation of it should come with the changelog.

Regarding your last question, I'll ask more details with the developer that implemented the feature, but it seems this will not work with react-native.

[Haroenv]

In that case you can either keep the import you already have and make sure you test every release in case the implementation details change, or directly introduce the code of getHighlightedParts in your code base (as it's not so large, and you want to customise it).

This is a data point for us deciding how to package highlighting as a connector/utility, but as it's documented (and used in libraries) as an import from /utils already, we will not change the names further than the recent refactor to named export from the individual file.

[kopax-polyconseil]

@Haroenv I had this idéa to copy getHighlightedPart, but we need the two utils for this component and it is not as straighforward for the 2nd.

Should I understand that there is no chance nor debat at all that you will support this use case?

[Haroenv]

depending on your use case, getPropertyByPath can be replaced by ?. or something like lodash.get

It's not that there's no chance, I was more looking at a short/medium term solution for you. If we'd add utilities for highlighting, we'd likely do more research than done before, and make sure that items like reverseHighlight work as expected with it too, so that would take a while and need to be prioritised based on number of people it would help.

[cedricls1]

Hello,

We didn't use react-instantsearch-hooks-web but react-instantsearch-hooks because our app is developed in React native and useHighlight doesn't seem integrated.
I followed this part of your documentation to implement our Highlight.
The difference with the default highlight is that we only want the bold text like this :