Skip to content

feat(v7): remove deprecated APIs in astro:transitions #13886

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.

Sign up for GitHub

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

Open
ArmandPhilippot wants to merge 1 commit into
base: v7
Choose a base branch
from
+47 −213
Open

feat(v7): remove deprecated APIs in astro:transitions #13886

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
47 changes: 47 additions & 0 deletions src/content/docs/en/guides/upgrade-to/v7.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,3 +99,50 @@ export default defineConfig({
```

If you encounter any issues with the Rust compiler, please report them on [GitHub](https://github.com/withastro/astro/issues).

## Removed

The following features have now been entirely removed from the code base and can no longer be used. Some of these features may have continued to work in your project even after deprecation. Others may have silently had no effect.

Projects now containing these removed features will be unable to build, and there will no longer be any supporting documentation prompting you to remove these features.

### Removed: exposed `astro:transitions` internals

<SourcePR number="16725" title="feat: remove deprecated astro:transitions internals" />

In Astro 6.x, some helpers available in `astro:transitions` and `astro:transitions/client` were deprecated.

In Astro 7.0, the following APIs can no longer be used in your project:
- `TRANSITION_BEFORE_PREPARATION`
- `TRANSITION_AFTER_PREPARATION`
- `TRANSITION_BEFORE_SWAP`
- `TRANSITION_AFTER_SWAP`
- `TRANSITION_PAGE_LOAD`
- `isTransitionBeforePreparationEvent()`
- `isTransitionBeforeSwapEvent()`
- `createAnimationScope()`

#### What should I do?

Remove any occurrence of `createAnimationScope()`:

```diff
-import { createAnimationScope } from 'astro:transitions';
```

Replace any occurrence of the other APIs using the [lifecycle event names](/en/reference/modules/astro-transitions/#lifecycle-events) directly:

```diff
-import {
- TRANSITION_AFTER_SWAP,
- isTransitionBeforePreparationEvent,
-} from 'astro:transitions/client';

-console.log(isTransitionBeforePreparationEvent(event));
+console.log(event.type === 'astro:before-preparation');

-console.log(TRANSITION_AFTER_SWAP);
+console.log('astro:after-swap');
```

<ReadMore>Learn more about all utilities available in the [View Transitions Router API Reference](/en/reference/modules/astro-transitions/).</ReadMore>
213 changes: 0 additions & 213 deletions src/content/docs/en/reference/modules/astro-transitions.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,14 +118,6 @@ import {
supportsViewTransitions,
swapFunctions,
transitionEnabledOnThisPage,
/* The following were deprecated in v6: */
isTransitionBeforePreparationEvent,
isTransitionBeforeSwapEvent,
TRANSITION_AFTER_PREPARATION,
TRANSITION_AFTER_SWAP,
TRANSITION_BEFORE_PREPARATION,
TRANSITION_BEFORE_SWAP,
TRANSITION_PAGE_LOAD,
} from 'astro:transitions/client';
```

Expand Down Expand Up @@ -304,211 +296,6 @@ Stores the element in focus on the current page and returns a function that when

Replaces the old body with the new body. Then, goes through every element in the old body that should be persisted and have a matching element in the new body and swaps the old element back in place.

### Deprecated imports

The following imports are deprecated in v6 and will be removed in v7. You can still use them in your project, but you may prefer to update your code now. [See how to upgrade](/en/guides/upgrade-to/v6/#deprecated-exposed-astrotransitions-internals).

<h4>`isTransitionBeforePreparationEvent()`</h4>

<p>

**Type:** `(value: any) => boolean`<br />
<Since v="3.6.0" />
</p>

:::caution[Deprecated]
This function is deprecated in v6 and will be removed in v7. You can still use it in your project, but you may prefer to update your code now.
:::

Determines whether the given value matches a [`TransitionBeforePreparationEvent`](#transitionbeforepreparationevent). This can be useful when you need to narrow the type of an event in an event listener.

```astro title="src/pages/index.astro" "isTransitionBeforePreparationEvent"
---
---

<script>
import {
isTransitionBeforePreparationEvent,
TRANSITION_BEFORE_PREPARATION,
} from "astro:transitions/client";

function listener(event: Event) {
const setting = isTransitionBeforePreparationEvent(event) ? 1 : 2;
/* do something with setting */
}

document.addEventListener(TRANSITION_BEFORE_PREPARATION, listener);
</script>
```

<h4>`isTransitionBeforeSwapEvent()`</h4>

<p>

**Type:** `(value: any) => boolean`<br />
<Since v="3.6.0" />
</p>

:::caution[Deprecated]
This function is deprecated in v6 and will be removed in v7. You can still use it in your project, but you may prefer to update your code now.
:::

Determines whether the given value matches a [`TransitionBeforeSwapEvent`](#transitionbeforeswapevent). This can be useful when you need to narrow the type of an event in an event listener.

```astro title="src/pages/index.astro" "isTransitionBeforeSwapEvent"
---
---

<script>
import {
isTransitionBeforeSwapEvent,
TRANSITION_BEFORE_SWAP,
} from "astro:transitions/client";

function listener(event: Event) {
const setting = isTransitionBeforeSwapEvent(event) ? 1 : 2;
/* do something with setting */
}

document.addEventListener(TRANSITION_BEFORE_SWAP, listener);
</script>
```

<h4>`TRANSITION_BEFORE_PREPARATION`</h4>

<p>

**Type:** `'astro:before-preparation'`<br />
<Since v="3.6.0" />
</p>

:::caution[Deprecated]
This constant is deprecated in v6 and will be removed in v7. You can still use it in your project, but you may prefer to update your code now.
:::

A constant to avoid writing the `astro:before-preparation` event name in plain text when you define an event.

```astro title="src/pages/index.astro" "TRANSITION_BEFORE_PREPARATION"
---
---

<script>
import { TRANSITION_BEFORE_PREPARATION } from "astro:transitions/client";

document.addEventListener(TRANSITION_BEFORE_PREPARATION, () => {
/* the listener logic */
});
</script>
```

<h4>`TRANSITION_AFTER_PREPARATION`</h4>

<p>

**Type:** `'astro:after-preparation'`<br />
<Since v="3.6.0" />
</p>

:::caution[Deprecated]
This constant is deprecated in v6 and will be removed in v7. You can still use it in your project, but you may prefer to update your code now.
:::

A constant to avoid writing the `astro:after-preparation` event name in plain text when you define an event.

```astro title="src/pages/index.astro" "TRANSITION_AFTER_PREPARATION"
---
---

<script>
import { TRANSITION_AFTER_PREPARATION } from "astro:transitions/client";

document.addEventListener(TRANSITION_AFTER_PREPARATION, () => {
/* the listener logic */
});
</script>
```

<h4>`TRANSITION_BEFORE_SWAP`</h4>

<p>

**Type:** `'astro:before-swap'`<br />
<Since v="3.6.0" />
</p>

:::caution[Deprecated]
This constant is deprecated in v6 and will be removed in v7. You can still use it in your project, but you may prefer to update your code now.
:::

A constant to avoid writing the `astro:before-swap` event name in plain text when you define an event.

```astro title="src/pages/index.astro" "TRANSITION_BEFORE_SWAP"
---
---

<script>
import { TRANSITION_BEFORE_SWAP } from "astro:transitions/client";

document.addEventListener(TRANSITION_BEFORE_SWAP, () => {
/* the listener logic */
});
</script>
```

<h4>`TRANSITION_AFTER_SWAP`</h4>

<p>

**Type:** `'astro:after-swap'`<br />
<Since v="3.6.0" />
</p>

:::caution[Deprecated]
This constant is deprecated in v6 and will be removed in v7. You can still use it in your project, but you may prefer to update your code now.
:::

A constant to avoid writing the `astro:after-swap` event name in plain text when you define an event.

```astro title="src/pages/index.astro" "TRANSITION_AFTER_SWAP"
---
---

<script>
import { TRANSITION_AFTER_SWAP } from "astro:transitions/client";

document.addEventListener(TRANSITION_AFTER_SWAP, () => {
/* the listener logic */
});
</script>
```

<h4>`TRANSITION_PAGE_LOAD`</h4>

<p>

**Type:** `'astro:page-load'`<br />
<Since v="3.6.0" />
</p>

:::caution[Deprecated]
This constant is deprecated in v6 and will be removed in v7. You can still use it in your project, but you may prefer to update your code now.
:::

A constant to avoid writing the `astro:page-load` event name in plain text when you define an event.

```astro title="src/pages/index.astro" "TRANSITION_PAGE_LOAD"
---
---

<script>
import { TRANSITION_PAGE_LOAD } from "astro:transitions/client";

document.addEventListener(TRANSITION_PAGE_LOAD, () => {
/* the listener logic */
});
</script>
```

## `astro:transitions/client` types

```ts
Expand Down
Loading