docs(instantsearch): keep autocomplete in sync with query during navigation

[dhayab]

FX-1942

This PR updates autocomplete query to stay in sync with the one in InstantSearch (with routing enabled).

I also changed the templates from strings to html tagged templates, which allowed me to remove preact as a dependency.

We can push the change to the other flavours after we agree on the code for this one.

Preview →

[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 ae3b490:

Sandbox	Source
@algolia/autocomplete-example-github-repositories-custom-plugin	Configuration
@algolia/autocomplete-example-instantsearch	Configuration
@algolia/autocomplete-example-playground	Configuration
@algolia/autocomplete-example-preview-panel-in-modal	Configuration
@algolia/autocomplete-example-react-renderer	Configuration
@algolia/autocomplete-example-starter-algolia	Configuration
@algolia/autocomplete-example-starter	Configuration
@algolia/autocomplete-example-reshape	Configuration
@algolia/autocomplete-example-vue	Configuration
@algolia/autocomplete-example-instantsearch	PR

[FabienMotte]

The query is not synced with this behavior:

• Open https://r7j67q.csb.app/?instant_search%5Bquery%5D=tested
• Refine on a category
• Go back, the query is cleared from the Autocomplete input

Screen.Recording.2022-11-02.at.12.55.11.mov

[dhayab]

Good find @FabienMotte, this happens because there is no initial pushState (as the state is already set in the URL), so the state isn't available from the popstate event at this time. I've changed the code to retrieve the query directly from instantsearch's helper.

[FabienMotte]

Thanks @dhayab! 👏

Is the sandbox working on your side? Not sure why CodeSandbox is giving a syntax error: https://codesandbox.io/s/github/algolia/autocomplete/tree/docs/instantsearch-example-query-sync/examples/instantsearch