Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(algolia): upgrade to the new major #10672

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Conversation

millotp
Copy link

@millotp millotp commented Nov 12, 2024

Pre-flight checklist

  • I have read the Contributing Guidelines on pull requests.
  • If this is a code change: I have written unit tests and/or added dogfooding pages to fully verify the new behavior.
  • If this is a new API or substantial change: the PR has an accompanying issue (closes #0000) and the maintainers have approved on my working plan.

Motivation

Algolia has released a new major version of the javascript search client.
Since DocSearch is now using the new version, we can also upgrade the docusaurus-theme-search-algolia package to use the latest version of the js client and of DocSearch.
There are a few changes to do in the code to accommodate the new version but nothing breaking, it's mostly around types and imports.

Test Plan

The existing tests are enough to test that every works, I also tried the local website and the search is working, with the user agent containing the latest version.

Test links

Deploy preview: https://deploy-preview-10672--docusaurus-2.netlify.app/

@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Nov 12, 2024
Copy link

github-actions bot commented Nov 12, 2024

⚡️ Lighthouse report for the deploy preview of this PR

URL Performance Accessibility Best Practices SEO Report
/ 🔴 47 🟢 98 🟢 96 🟢 100 Report
/docs/installation 🟠 54 🟢 97 🟢 100 🟢 100 Report
/docs/category/getting-started 🟠 74 🟢 100 🟢 100 🟠 86 Report
/blog 🟠 64 🟢 96 🟢 100 🟠 86 Report
/blog/preparing-your-site-for-docusaurus-v3 🟠 55 🟢 92 🟢 100 🟢 100 Report
/blog/tags/release 🟠 64 🟢 96 🟢 100 🟠 86 Report
/blog/tags 🟠 76 🟢 100 🟢 100 🟠 86 Report

@slorber slorber added the Argos Add this label to run UI visual regression tests. See argos.yml GH action. label Nov 14, 2024
Copy link

netlify bot commented Nov 14, 2024

[V2]

Name Link
🔨 Latest commit 367f60a
🔍 Latest deploy log https://app.netlify.com/sites/docusaurus-2/deploys/6735eaf478e0010008ff2622
😎 Deploy Preview https://deploy-preview-10672--docusaurus-2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package New capabilities Transitives Size Publisher
npm/@algolia/[email protected] None 0 133 kB instantsearch-bot
npm/@algolia/[email protected] None +1 199 kB abodelot, agdavid, alg-admin, ...82 more
npm/@algolia/[email protected] None 0 57.5 kB instantsearch-bot
npm/@algolia/[email protected] None 0 8.15 kB shortcuts
npm/@algolia/[email protected] None 0 5.58 kB shortcuts
npm/@algolia/[email protected] None 0 3.63 kB shortcuts
npm/@algolia/[email protected] None 0 408 kB shortcuts
npm/@algolia/[email protected] None 0 6.78 kB shortcuts
npm/@algolia/[email protected] None 0 12.3 kB shortcuts
npm/@algolia/[email protected] None 0 10.6 kB shortcuts
npm/@algolia/[email protected] None 0 379 kB shortcuts
npm/@algolia/[email protected] None 0 6.51 kB shortcuts
npm/@algolia/[email protected] None 0 386 kB shortcuts
npm/@algolia/[email protected] None 0 190 kB shortcuts
npm/@algolia/[email protected] None 0 13 kB haroenv
npm/@algolia/[email protected] None 0 1.78 MB shortcuts
npm/@algolia/[email protected] None 0 2.16 kB shortcuts
npm/@algolia/[email protected] None 0 2.37 kB shortcuts
npm/@algolia/[email protected] None 0 405 kB shortcuts
npm/@algolia/[email protected] None 0 85.4 kB shortcuts
npm/@algolia/[email protected] None 0 6.25 kB shortcuts
npm/@algolia/[email protected] None 0 2.76 kB shortcuts
npm/@algolia/[email protected] network 0 17.8 kB shortcuts
npm/@algolia/[email protected] network 0 9.21 kB shortcuts
npm/@algolia/[email protected] None 0 50.1 kB shortcuts
npm/@docsearch/[email protected] None 0 42.7 kB shortcuts
npm/@docsearch/[email protected] Transitive: network +8 7 MB shortcuts
npm/@docusaurus/[email protected] None +1 12.5 kB slorber
npm/@docusaurus/[email protected] None 0 232 kB docusaurus-bot, fb, lex111, ...1 more
npm/@docusaurus/[email protected] None 0 414 kB docusaurus-bot, fb, lex111, ...1 more
npm/@docusaurus/[email protected] None 0 39.1 kB docusaurus-bot, fb, lex111, ...1 more
npm/@docusaurus/[email protected] None 0 37.7 kB docusaurus-bot, fb, lex111, ...1 more
npm/@docusaurus/[email protected] None 0 11.5 kB docusaurus-bot, fb, lex111, ...1 more
npm/@docusaurus/[email protected] None 0 15.5 kB docusaurus-bot, fb, lex111, ...1 more
npm/@docusaurus/[email protected] None 0 8.36 kB docusaurus-bot, fb, lex111, ...1 more
npm/@docusaurus/[email protected] None 0 35.7 kB docusaurus-bot, fb, lex111, ...1 more
npm/@docusaurus/[email protected] None 0 14.1 kB docusaurus-bot, fb, lex111, ...1 more
npm/@docusaurus/[email protected] None 0 761 kB docusaurus-bot, fb, lex111, ...1 more
npm/@docusaurus/[email protected] environment +1 468 kB docusaurus-bot, fb, lex111, ...1 more
npm/@docusaurus/[email protected] None 0 114 kB docusaurus-bot, fb, lex111, ...1 more
npm/@docusaurus/[email protected] filesystem 0 335 kB slorber
npm/@mdx-js/[email protected] None 0 14.4 kB wooorm
npm/@types/[email protected] None 0 7.97 kB types
npm/@types/[email protected] None 0 19.4 kB types
npm/@types/[email protected] None 0 7.64 kB types
npm/@types/[email protected] None 0 6.97 kB types
npm/[email protected] None 0 1.11 MB instantsearch-bot
npm/[email protected] None 0 210 kB shortcuts
npm/[email protected] None 0 13.7 kB leerobinson
npm/[email protected] None +1 287 kB feedic
npm/[email protected] Transitive: network +4 1.09 MB feedic
npm/[email protected] None 0 8.55 kB lukeed
npm/[email protected] None 0 5.14 kB sindresorhus
npm/[email protected] None 0 22.6 kB wooorm
npm/[email protected] None 0 105 kB jpmonette
npm/[email protected] None 0 620 kB slorber
npm/[email protected] None 0 5.4 kB dominictarr
npm/[email protected] None 0 31.8 kB rstacruz
npm/[email protected] None 0 4.37 kB sindresorhus
npm/[email protected] None 0 5.44 kB euank
npm/[email protected] None 0 18.7 kB 43081j
npm/[email protected] None 0 738 kB formidablelabs
npm/[email protected] None 0 2.05 MB rundevelopment
npm/[email protected] None 0 4.86 kB isaacs
npm/[email protected] environment 0 4.51 MB react-bot
npm/[email protected] None 0 87.9 kB anyroad
npm/[email protected] environment 0 318 kB react-bot
npm/[email protected] None 0 10.2 kB ngryman

🚮 Removed packages: npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected]

View full report↗︎

@slorber
Copy link
Collaborator

slorber commented Nov 14, 2024

Thanks @millotp

Since this is a new version, where can I check the breaking changes that potentially affect us?

This seems a bit risky to release this as a minor/patch release.

There are a few changes to do in the code to accommodate the new version but nothing breaking, it's mostly around types and imports.

That's how it affects our internal code. But we also expose some things as part of a public API through themeConfig options:

https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-theme-search-algolia/src/validateThemeConfig.ts

https://docusaurus.io/docs/search#connecting-algolia

I'm particularly worried of possible breaking changes to this type that we expose through themeConfig.algolia.searchParameters

import type { SearchOptions } from '@algolia/client-search';

Are there any to be aware of?

Apart from TS APIs, are there behavior changes to be aware of? For example, different defaults?

Copy link

argos-ci bot commented Nov 14, 2024

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build Status Details Updated (UTC)
default (Inspect) ✅ Auto-approved build - Nov 14, 2024, 12:32 PM

@slorber
Copy link
Collaborator

slorber commented Nov 15, 2024

@millotp I've seen your Algolia compatibility PR.

We could merge this for the next minor, but we could also delay it to the next major. I plan to do a major with a few technical breaking changes (deps/runtime upgrades like Node and TS) so maybe it's a better time to upgrade Algolia as well.

Is there a good reason for this to land in v3 and not v4? Does anything regarding the UI or behavior change? If that's the case we may prefer keeping it for v4 and strict compatibility is not a problem. Also, from my perspective I don't really have a reasonable way to verify that the upgrade is retro-compatible 😅

@millotp
Copy link
Author

millotp commented Nov 15, 2024

Since this is a new version, where can I check the breaking changes that potentially affect us?

Hey @slorber, thanks for the review, here is a brief page about all the breaking changes in v5: https://www.algolia.com/doc/libraries/javascript/v5/upgrade/

Most breaking changes have been handled in DocSearch directly, which exposes a common interface, and autocomplete was already compatible with the client v5.

Are there any to be aware of?

Indeed this type is not fully compatible with the previous one, it's partly fixed by algolia/api-clients-automation#4108 but it's not 100% compatible.

Is there a good reason for this to land in v3 and not v4?

No it's perfectly fine to stay on the client on this version and wait for a next major, my first goal was to upgrade algoliasearch in the yarn cli as a test to make sure that v5 works well in the real world, but it depends on this theme.
Trying to upgrade in this PR already resolved some issues so it was still worth it !

Does anything regarding the UI or behavior change

The only change is a bug fix in docsearch to close the modal with Cmd+K

I can try to make the constraint algoliasearch >= 4.18.0 < 6 to be compatible with all versions also

@slorber
Copy link
Collaborator

slorber commented Nov 18, 2024

Thanks @millotp

Most breaking changes have been handled in DocSearch directly, which exposes a common interface, and autocomplete was already compatible with the client v5.

Great. As far as I understand you decided for DocSearch it was not worth it to release a new major version and released the Algolia v5 upgrade in DocSearch v3.6.3 patch release right?

So, does this mean that you consider it compatible enough to do this safely? (or maybe you explicitly not respect semver?)

Are there any to be aware of?

Indeed this type is not fully compatible with the previous one, it's partly fixed by algolia/api-clients-automation#4108 but it's not 100% compatible.

If it's not 100% compatible, why did you decide to upgrade Algolia from v4 to v5 in a patch release? That seems risky to me, this means DocSearch users will upgrade to Algolia v5 by just regenerating their lockfile.

Is this intended, or do you consider that the differences are so subtle that they shouldn't break any site using DocSearch v3? What are those differences exactly?

Note that on our theme, we depend on DocSearch ^3 and Algolia ^4.

In practice this means that since you didn't release this upgrade in a new major version, newly initialized Docusaurus sites, and sites upgrading their lockfile, are already using Algolia v5 for the DocSearch modal, but they still use Algolia v4 for the /search page.

The Algolia dependency is now duplicated, which wasn't the case before.

CleanShot 2024-11-18 at 11 38 06@2x

What I mean is, Docusaurus users already use Algolia v5. At best, we could prevent this upgrade by pinning the DocSearch dependency to v3.6.2 (before the upgrade).

I assume it's fine to merge this PR because nobody complained about any compatibility issues so far. Just wanted to let you know that it feels a bit risky to do such an upgrade in a patch release 😅 and it also inadvertently increased our site bundle size by duplicating the Algolia dependency in 2 distinct versions.

I can try to make the constraint algoliasearch >= 4.18.0 < 6 to be compatible with all versions also

I'm not sure I understand 🤔

Copy link
Collaborator

@slorber slorber left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me, didn't see any regression.

Still curious to have your feedback on a few things

@@ -152,6 +147,7 @@ function DocSearch({
const closeModal = useCallback(() => {
setIsOpen(false);
searchButtonRef.current?.focus();
setInitialQuery(undefined);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this what fixes cmd+K?

const transformSearchClient = useCallback<
NonNullable<DocSearchModalProps['transformSearchClient']>
>(
(searchClient) => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
(searchClient) => {
(searchClient: DocSearchTransformClient) => {

Couldn't we use the DocSearchTransformClient type here?

...props.searchParameters,
facetFilters,
indexName: props.indexName,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Doesn't look dangerous but wondering what's the impact of adding this indexName here considering we already pass the indexName prop (spread) to the docsearch modal component?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Argos Add this label to run UI visual regression tests. See argos.yml GH action. CLA Signed Signed Facebook CLA
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants