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

docs: add migration guide page #449

Merged
merged 6 commits into from
Apr 29, 2022
Merged
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
"scripts:test": "yarn workspace scripts test",
"specs:fix": "eslint --ext=yml specs/$0 --fix",
"specs:lint": "eslint --ext=yml specs/$0",
"website": "yarn workspace website start --host 0.0.0.0",
"website": "BUNDLE_WITH_DOC=true DOCKER=true yarn cli build specs all && yarn workspace website start --host 0.0.0.0",
"website:build": "yarn workspace website build"
},
"devDependencies": {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: Getting Started
title: Installation
---

import Tabs from '@theme/Tabs';
Expand All @@ -14,18 +14,22 @@ import TabItem from '@theme/TabItem';
}>
<TabItem value="js">

## Installation

To get started, you first need to install `algoliasearch` (or any other available API client package). You can find the full list of available packages [here](https://www.npmjs.com/org/experimental-api-clients-automation).

All of our clients comes with type definition, and are available for both `browser` and `node` environments.
Copy link
Collaborator

Choose a reason for hiding this comment

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

As our docs become bigger, is there a way to split those files per languages ? It's not urgent at all

Copy link
Member Author

Choose a reason for hiding this comment

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

Yep it would make us duplicate content, however I think we could read the snippets from an external file and inject it here, since it's JS

Copy link
Member Author

@shortcuts shortcuts Apr 28, 2022

Choose a reason for hiding this comment

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

Since we know in the end that it will most likely live in the official doc I don't think we should dedicate time for that but it's definitely doable


```bash
yarn add @experimental-api-clients-automation/algoliasearch
# or
npm install @experimental-api-clients-automation/algoliasearch
```

Or use a specific package:

```bash
yarn add @experimental-api-clients-automation/client-search
# or
npm install @experimental-api-clients-automation/client-search
```

**Without a package manager**
Expand All @@ -47,7 +51,7 @@ const client = algoliasearch('<YOUR_APP_ID>', '<YOUR_API_KEY>');

// And access analytics or personalization client
const analyticsClient = client.initAnalytics('<YOUR_APP_ID>', '<YOUR_API_KEY>');
const personalizationCilent = client.initPersonalization(
const personalizationClient = client.initPersonalization(
'<YOUR_APP_ID>',
'<YOUR_API_KEY>',
'eu'
Expand Down
4 changes: 2 additions & 2 deletions website/docs/api-clients/introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: Introduction

# Introduction

This section hosts informations about the [API clients automation](https://github.com/algolia/api-clients-automation) repository. For informations regarding the clients usage, see [the clients page](/docs/api-clients/introduction).
This section hosts informations about the [usage of the API clients](https://github.com/algolia/api-clients-automation). For informations regarding the automation and how to contribute, see [the automation page](/docs/automation/introduction).

## Repositories

Expand All @@ -16,7 +16,7 @@ Generated code in production can be find on repository of the clients.

## Usage

See [the getting started](/docs/api-clients/getting-started) page.
See [the installation](/docs/api-clients/installation) page.

You can also check the [playground](/docs/automation/testing/playground) if you'd like to test clients locally.

Expand Down
142 changes: 142 additions & 0 deletions website/docs/api-clients/migration-guide.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
---
title: Migration guide
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

This document lists every known breaking change, not all of them may affect your application.

:::caution

The amount of changes in this new version is significant. If you were using a version older than v4, please also read [this migration guide](https://www.algolia.com/doc/api-client/getting-started/upgrade-guides/javascript/)

**You should thoroughly test your application once the migration is over.**
Copy link
Contributor

Choose a reason for hiding this comment

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

Not sure if we need this line. It's kind of obvious. Also, it's not that we're providing any special tool or guide to test things 🤔

Copy link
Member Author

Choose a reason for hiding this comment

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

Yep I agree it's not that mandatory, but I feel like it's still good to mention it so we don't get people saying their prod is broken after upgrade :D


:::

## Common breaking changes

The changes below are effective on all of the API clients.

| Previous | Latest | Description |
| ----------- | :---------- | :------------------------------------------------- |
| `initIndex` | **removed** | All methods are now available at the client level. |
Copy link
Contributor

Choose a reason for hiding this comment

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

Do we have any example to work around this somewhere else? If not, we should add an example here, to actually explain what it means to them, and what they need to do to migrate.

edit: I just found "Methods targetting an indexName" section below. Should we add a link here to that section? Or just a very short example to give a brief idea?

Copy link
Member Author

Choose a reason for hiding this comment

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

Ah yep indeed I'll link it!


## API Client specific breaking changes

The changes below are effective on the selected API client.

For informations regarding the installation of the package, please see [the installation page](/docs/api-clients/installation)

<Tabs
groupId="language"
defaultValue="js"
values={[
{ label: 'JavaScript', value: 'js', }
]
}>
<TabItem value="js">

| Previous | Latest | Description |
| -------------------- | :------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `@algolia` | `@experimental-api-clients-automation` | **During the beta phase**, the clients are available under the NPM `@experimental-api-clients-automation` namespace, you can find a full list [here](https://www.npmjs.com/org/experimental-api-clients-automation). |
| `algoliasearch/lite` | `algoliasearch-lite` | The lite version of the client now have [its own package](https://www.npmjs.com/package/@experimental-api-clients-automation/algoliasearch-lite). |
| `search` | `searchClient` | Exported clients are suffixed by `Client`. |

</TabItem>
</Tabs>

### Installation

<Tabs
groupId="language"
defaultValue="js"
values={[
{ label: 'JavaScript', value: 'js', }
]
}>
<TabItem value="js">

To get started, first install the `algoliasearch` client.

```bash
yarn add @experimental-api-clients-automation/algoliasearch
# or
npm install @experimental-api-clients-automation/algoliasearch
```

You can now uninstall the previously added client.

> Make sure to update all your imports.

```bash
yarn remove algoliasearch
# or
npm uninstall algoliasearch
```

You can continue this guide on [our installation page](/docs/api-clients/installation).

</TabItem>
</Tabs>

### Importing algoliasearch using ES Modules

<Tabs
groupId="language"
defaultValue="js"
values={[
{ label: 'JavaScript', value: 'js', }
]
}>
<TabItem value="js">

```diff
- import algoliasearch from 'algoliasearch/lite';
+ import { algoliasearchLiteClient } from '@experimental-api-clients-automation/algoliasearch-lite';

- import algoliasearch from 'algoliasearch';
+ import { algoliasearch } from '@experimental-api-clients-automation/algoliasearch';
Comment on lines +96 to +100
Copy link
Contributor

Choose a reason for hiding this comment

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

Very readable with diff!

Btw, it's a side note, but it's a bit inconsistent to me that we have algoliasearch and algoliasearchLiteClient. The latter could simply be algoliasearchLite. What do you think?

Copy link
Member Author

Choose a reason for hiding this comment

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

Yep definitely, the only thing is that since it's generated, it adds the Client automatically.

So either we make algoliasearch consistent, either we remove the Client suffix (for JS only?) I don't really like the latter

Copy link
Contributor

Choose a reason for hiding this comment

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

Hah, I don't like the latter either! Let's leave it as-is, and think about it later :)

```

</TabItem>
</Tabs>

### Methods targetting an `indexName`

<Tabs
groupId="language"
defaultValue="js"
values={[
{ label: 'JavaScript', value: 'js', }
]
}>
<TabItem value="js">

Prior to the `initIndex` removal stated in the [Common breaking changes](#common-breaking-changes), all methods previously available at the `initIndex` level requires the `indexName` to be sent with the query.

```js
import { algoliasearch } from '@experimental-api-clients-automation/algoliasearch';

const client = algoliasearch('<YOUR_APP_ID>', '<YOUR_API_KEY>');

// only query string
const searchResults = await client.search({
indexName: '<YOUR_INDEX_NAME>',
searchParams: { query: 'myQuery' },
});

// with params
const searchResults2 = await client.search({
indexName: '<YOUR_INDEX_NAME>',
searchParams: {
query: 'myQuery',
attributesToRetrieve: ['firstname', 'lastname'],
hitsPerPage: 50,
},
});
```

</TabItem>
</Tabs>
10 changes: 9 additions & 1 deletion website/sidebars.js
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,15 @@ const sidebars = {
},
],
// Everything related to the generated clients usage
clients: ['api-clients/introduction', 'api-clients/getting-started'],
clients: [
'api-clients/introduction',
{
type: 'category',
label: 'Getting Started',
collapsed: false,
items: ['api-clients/installation', 'api-clients/migration-guide'],
},
],
};

// eslint-disable-next-line import/no-commonjs
Expand Down
8 changes: 4 additions & 4 deletions website/src/css/custom.css
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@
--ifm-color-primary: #5468ff;
--ifm-footer-background-color: #f5f5fa;
--ifm-menu-color-background-active: var(--ifm-color-emphasis-200);
--ifm-font-family-monospace: Open Sans,system-ui,BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
--ifm-font-family-base: Open Sans,system-ui,BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
--ifm-font-family-base: Open Sans, system-ui, BlinkMacSystemFont,
-apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans,
Droid Sans, Helvetica Neue, sans-serif;
}

html[data-theme='dark'] {
Expand Down Expand Up @@ -51,8 +52,7 @@ html[data-theme='dark'] .header-github-link:before {
}

/* Font */
@import url("https://fonts.googleapis.com/css?family=Open+Sans");

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

/* Redoc fix */
.redocusaurus .menu-content label.-depth0 {
Expand Down