fix(templates): ensure consistency in using and recommending function/htm templates

[Haroenv]

Summary

This fixes several places where we were either still having the "use html templates instead" warning by default, or wrongly documented.

Result

Each commit can be reviewed separately, they don't touch any overlapping files.

• use Template in Pagination
• improve warning when string template is used by giving the template key used
• deprecate highlight/snippet helpers exposed from instantsearch (they return a html string)
• use function templates in Panel (I checked all others, they were already migrated)
• use function templates everywhere in storybook

⚠️ this PR should be rebased so each item shows up in the changelog separately

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 456f7b8:

Sandbox	Source
InstantSearch.js	Configuration
react-instantsearch-app	Configuration
example-react-instantsearch-hooks-default-theme	Configuration
example-vue-instantsearch-default-theme	Configuration

[aymeric-giraudet]

Shouldn't we rather do this :

const hitsItemTemplate = (hit, { components: { Highlight } }) => html`
  <strong><${Highlight} hit=${hit} attribute="name" /></strong>
`;

If we call the component as a function Preact won't be aware it's actually a component and won't show up in devtools.

[Haroenv]

Yes, it could be interesting, but in our documentation we only document the "function call" as it's much simpler to read and doesn't require people to know about preact.

Why doesn't it show up in the devtools though? it's still a preact component right?

[aymeric-giraudet]

Making a function call would be okay if these were just render functions but as they start with a capitalized letter and take a single prop argument, it's implied they are components which should be instantiated with Preact's h as they could use hooks.

They won't show up in Devtools in the VDOM as Highlight or Snippet components because they won't ever get instantiated by Preact's h function.

Now I know it's not a big deal yet as these components are in fact just render functions, but in the future if we provide any component using hooks this could be a problem :/

[Haroenv]

We could also do something like this developit/htm#167 (comment) (allowing the components to be a string), but I think both of those points are a separate discussion from this PR (as the PR just makes consistent what we already document), what do you think @aymeric-giraudet?

[aymeric-giraudet]

Ah yes this could be even more user-friendly !
Indeed it's a different discussion, but it's good we're already aware of the eventual shortcomings we may face in the future :D
I'll review the rest !

[Haroenv]

#5584 it is possible, but I'm not convinced it's the way to go yet. We can do it easily if we want it.