Skip to content

Commit

Permalink
docs: upgrade Docusaurus and other dependencies (#2038)
Browse files Browse the repository at this point in the history
  • Loading branch information
andrii-bodnar authored Sep 25, 2024
1 parent 6b77971 commit acbad00
Show file tree
Hide file tree
Showing 7 changed files with 2,889 additions and 1,989 deletions.
5 changes: 4 additions & 1 deletion website/blog/authors.yml
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
andrii-bodnar:
name: Andrii Bodnar
title: Engineering Manager
url: https://github.com/andrii-bodnar
page: true
image_url: https://github.com/andrii-bodnar.png
socials:
x: AndriiBodnar1
github: andrii-bodnar
49 changes: 26 additions & 23 deletions website/docs/ref/macro.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -13,37 +13,40 @@ import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";

<Tabs groupId="babel-swc">
<TabItem value="babel" label="Babel" default>
Babel macros require [babel-plugin-macros](https://github.com/kentcdodds/babel-plugin-macros) to work. If you use a framework (for example GatsbyJS, Create React App > 2.0) you might already have macros enabled. Otherwise, install it as any other Babel plugin:
- Install `babel-plugin-macros` as a dev dependency and `@lingui/macro` as dependency:
<TabItem value="babel" label="Babel" default>

```bash npm2yarn
npm install --save-dev babel-plugin-macros
npm install --save @lingui/macro
```
Babel macros require [babel-plugin-macros](https://github.com/kentcdodds/babel-plugin-macros) to work. If you use a framework (for example GatsbyJS, Create React App > 2.0) you might already have macros enabled. Otherwise, install it as any other Babel plugin:

- Add `macros` to the top of plugins section in your Babel config:
- Install `babel-plugin-macros` as a dev dependency and `@lingui/macro` as dependency:

```json
{
"plugins": ["macros"]
}
```
```bash npm2yarn
npm install --save-dev babel-plugin-macros
npm install --save @lingui/macro
```

When using any preset, first check if it includes the `macros` plugin. These presets already includes the `macros` plugin: `react-scripts`.
- Add `macros` to the top of plugins section in your Babel config:

</TabItem>
<TabItem value="swc" label="SWC">
- Install `@lingui/swc-plugin` as a dev dependency and `@lingui/macro` as dependency:
```json
{
"plugins": ["macros"]
}
```

When using any preset, first check if it includes the `macros` plugin. These presets already includes the `macros` plugin: `react-scripts`.

</TabItem>
<TabItem value="swc" label="SWC">

- Install `@lingui/swc-plugin` as a dev dependency and `@lingui/macro` as dependency:

```bash npm2yarn
npm install --save-dev @lingui/swc-plugin
npm install --save @lingui/macro
```
```bash npm2yarn
npm install --save-dev @lingui/swc-plugin
npm install --save @lingui/macro
```

- [Add necessary configurations](/docs/ref/swc-plugin.md#usage).
- [Add necessary configurations](/docs/ref/swc-plugin.md#usage).

</TabItem>
</TabItem>
</Tabs>

:::note
Expand Down
74 changes: 37 additions & 37 deletions website/docs/releases/migration-3.md
Original file line number Diff line number Diff line change
Expand Up @@ -137,39 +137,39 @@ i18n.load({

Whitespace handling in plugins had few bugs. By fixing them, there might be few backward incompatible changes. It's advised to run [`extract`](/docs/ref/cli.md#extract) and inspect changes in catalogs (if any).

1. Spaces before `{variables}` in JSX aren't preserved. This is how React handles whitespaces in JSX. Leading whitespace is always removed:
1. Spaces before `{variables}` in JSX aren't preserved. This is how React handles whitespaces in JSX. Leading whitespace is always removed:

```jsx
<Trans>
&quot;
{variable}
&quot;
</Trans>
```jsx
<Trans>
&quot;
{variable}
&quot;
</Trans>

// Becomes: &quot;{variable}&quot;
```
// Becomes: &quot;{variable}&quot;
```

2. Forced newlines are preserved. Sometimes it's useful to keep newlines in JSX. If that's your case, you need to force it in the same was as spaces are forced before variables or elements:
2. Forced newlines are preserved. Sometimes it's useful to keep newlines in JSX. If that's your case, you need to force it in the same was as spaces are forced before variables or elements:

```jsx
<Trans>
1. Item{"\n"}
2. Item
</Trans>
```jsx
<Trans>
1. Item{"\n"}
2. Item
</Trans>

// Becomes: 1. Item\n2. Item
```
// Becomes: 1. Item\n2. Item
```

### Plugins/Presets

Plugins are replaced with macros. Presets are removed completely because they aren't needed anymore.

1. Uninstall plugins/presets, remove them from Babel config and replace them with `macros`:
1. Uninstall plugins/presets, remove them from Babel config and replace them with `macros`:

```bash npm2yarn
npm uninstall @lingui/babel-preset-react
npm install --dev @lingui/macro babel-plugin-macros
```
```bash npm2yarn
npm uninstall @lingui/babel-preset-react
npm install --dev @lingui/macro babel-plugin-macros
```

```diff
{
Expand All @@ -182,28 +182,28 @@ npm install --dev @lingui/macro babel-plugin-macros
}
```

2. Import [`Trans`](/docs/ref/macro.mdx#trans), [`Plural`](/docs/ref/macro.mdx#plural-1), [`Select`](/docs/ref/macro.mdx#select-1) and [`SelectOrdinal`](/docs/ref/macro.mdx#selectordinal-1) from `@lingui/macro`:
2. Import [`Trans`](/docs/ref/macro.mdx#trans), [`Plural`](/docs/ref/macro.mdx#plural-1), [`Select`](/docs/ref/macro.mdx#select-1) and [`SelectOrdinal`](/docs/ref/macro.mdx#selectordinal-1) from `@lingui/macro`:

```diff
- import { Trans } from "@lingui/react"
+ import { Trans } from "@lingui/macro"
```
```diff
- import { Trans } from "@lingui/react"
+ import { Trans } from "@lingui/macro"
```

:::caution Note
If you used [`Trans`](/docs/ref/macro.mdx#trans) component without children, then keep the import from `@lingui/react`:
:::caution Note
If you used [`Trans`](/docs/ref/macro.mdx#trans) component without children, then keep the import from `@lingui/react`:

```jsx
import { Trans } from "@lingui/react";
```jsx
import { Trans } from "@lingui/react";

const CustomID = () => <Trans id="msg.id" />;
const DynamicID = () => <Trans id={msgId} />;
```
const CustomID = () => <Trans id="msg.id" />;
const DynamicID = () => <Trans id={msgId} />;
```

:::
:::

3. `i18n.t`, `i18n.plural`, `i18n.select` and `i18n.selectOrdinal` methods are removed and replaced with macros.
3. `i18n.t`, `i18n.plural`, `i18n.select` and `i18n.selectOrdinal` methods are removed and replaced with macros.

These macros automatically binds message to default `i18n` object:
These macros automatically binds message to default `i18n` object:

```diff
import { i18n } from "@lingui/core"
Expand Down
58 changes: 30 additions & 28 deletions website/docs/tutorials/setup-react.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -13,44 +13,46 @@ import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";

<Tabs groupId="babel-swc" queryString="babel-or-swc">
<TabItem value="babel" label="Babel" default>
- Install `@lingui/cli`, `@lingui/macro`, `babel-plugin-macros` and Babel core packages as a development dependencies, and `@lingui/react` as a runtime dependency:
<TabItem value="babel" label="Babel" default>

```bash npm2yarn
npm install --save-dev @lingui/cli @babel/core
npm install --save-dev @lingui/macro babel-plugin-macros
npm install --save @lingui/react
```
- Install `@lingui/cli`, `@lingui/macro`, `babel-plugin-macros` and Babel core packages as a development dependencies, and `@lingui/react` as a runtime dependency:

- Add `macros` plugin to Babel config (e.g: `.babelrc`):
```bash npm2yarn
npm install --save-dev @lingui/cli @babel/core
npm install --save-dev @lingui/macro babel-plugin-macros
npm install --save @lingui/react
```

```json
{
"plugins": ["macros"]
}
```
- Add `macros` plugin to Babel config (e.g: `.babelrc`):

When using any preset, first check if it includes the `macros` plugin. These presets already includes the `macros` plugin: `react-scripts`.
```json
{
"plugins": ["macros"]
}
```

</TabItem>
<TabItem value="swc" label="SWC">
- Install `@lingui/cli`, `@lingui/macro`, and `@lingui/react` as a runtime dependency:
When using any preset, first check if it includes the `macros` plugin. These presets already includes the `macros` plugin: `react-scripts`.

```bash npm2yarn
npm install --save-dev @lingui/cli
npm install --save @lingui/react
npm install --save @lingui/macro
```
</TabItem>
<TabItem value="swc" label="SWC">

- Install the `@lingui/swc-plugin` package as a development dependency:
- Install `@lingui/cli`, `@lingui/macro`, and `@lingui/react` as a runtime dependency:

```bash npm2yarn
npm install --save-dev @lingui/swc-plugin
```
```bash npm2yarn
npm install --save-dev @lingui/cli
npm install --save @lingui/react
npm install --save @lingui/macro
```

- [Add necessary configurations](/docs/ref/swc-plugin.md#usage).
- Install the `@lingui/swc-plugin` package as a development dependency:

</TabItem>
```bash npm2yarn
npm install --save-dev @lingui/swc-plugin
```

- [Add necessary configurations](/docs/ref/swc-plugin.md#usage).

</TabItem>
</Tabs>

:::note
Expand Down
5 changes: 5 additions & 0 deletions website/docusaurus.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,11 @@ const config: Config = {
apiKey: "50e12ed6fd44188e9abd4e0e9d2cb935",
indexName: "lingui",
},
blog: {
sidebar: {
groupByYear: false,
},
},
prism: {
theme: themes.github,
darkTheme: themes.dracula,
Expand Down
48 changes: 24 additions & 24 deletions website/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,47 +15,47 @@
"fixFormat": "prettier --write ."
},
"dependencies": {
"@docusaurus/core": "3.2.1",
"@docusaurus/preset-classic": "3.2.1",
"@docusaurus/remark-plugin-npm2yarn": "3.2.1",
"@docusaurus/core": "3.5.2",
"@docusaurus/preset-classic": "3.5.2",
"@docusaurus/remark-plugin-npm2yarn": "3.5.2",
"@mdx-js/react": "3.0.1",
"clsx": "2.1.0",
"clsx": "2.1.1",
"docusaurus-plugin-sass": "^0.2.5",
"react": "18.2.0",
"react-dom": "18.2.0",
"sass": "^1.71.1"
"react": "18.3.1",
"react-dom": "18.3.1",
"sass": "^1.79.3"
},
"browserslist": [
">0.2%",
"not dead",
"not op_mini all"
],
"devDependencies": {
"@docusaurus/eslint-plugin": "3.2.1",
"@docusaurus/module-type-aliases": "3.2.1",
"@docusaurus/utils": "3.2.1",
"@docusaurus/eslint-plugin": "3.5.2",
"@docusaurus/module-type-aliases": "3.5.2",
"@docusaurus/utils": "3.5.2",
"@tsconfig/docusaurus": "2.0.3",
"@types/react": "18.2.58",
"@types/react": "18.3.8",
"@types/react-helmet": "6.1.11",
"@types/react-router-dom": "5.3.3",
"@typescript-eslint/eslint-plugin": "7.0.2",
"@typescript-eslint/parser": "7.0.2",
"editorconfig-checker": "5.1.4",
"editorconfig-checker": "5.1.8",
"eslint": "8.57.0",
"eslint-plugin-react": "7.33.2",
"eslint-plugin-react-hooks": "4.6.0",
"prettier": "3.2.5",
"remark-cli": "12.0.0",
"eslint-plugin-react": "7.36.1",
"eslint-plugin-react-hooks": "4.6.2",
"prettier": "3.3.3",
"remark-cli": "12.0.1",
"remark-heading-id": "^1.0.1",
"remark-lint-match-punctuation": "0.2.1",
"remark-lint-no-duplicate-headings-in-section": "3.1.2",
"remark-lint-no-tabs": "3.1.2",
"remark-lint-no-trailing-spaces": "2.0.1",
"remark-preset-lint-consistent": "5.1.2",
"remark-preset-lint-markdown-style-guide": "5.1.3",
"remark-preset-lint-recommended": "6.1.3",
"remark-lint-no-duplicate-headings-in-section": "4.0.0",
"remark-lint-no-tabs": "4.0.0",
"remark-lint-no-trailing-spaces": "3.0.2",
"remark-preset-lint-consistent": "6.0.0",
"remark-preset-lint-markdown-style-guide": "6.0.0",
"remark-preset-lint-recommended": "7.0.0",
"remark-retext": "6.0.0",
"remark-validate-links": "13.0.0",
"remark-validate-links": "13.0.1",
"retext-diacritics": "5.0.0",
"retext-english": "5.0.0",
"retext-indefinite-article": "5.0.0",
Expand All @@ -66,6 +66,6 @@
"retext-syntax-urls": "4.0.0",
"typescript": "5.3.3",
"typescript-plugin-css-modules": "^5.1.0",
"unified": "11.0.4"
"unified": "11.0.5"
}
}
Loading

0 comments on commit acbad00

Please sign in to comment.