Skip to content

Commit a42ce7e

Browse files
sarah11918azat-ioArmandPhilippotflorian-lefebvreyanthomasdev
authored
5.16.0 minor release docs (#12739)
Co-authored-by: Azat S. <[email protected]> Co-authored-by: Armand Philippot <[email protected]> Co-authored-by: florian-lefebvre <[email protected]> Co-authored-by: yanthomasdev <[email protected]> Co-authored-by: Jacob Lamb <[email protected]> Co-authored-by: bjohansebas <[email protected]> Co-authored-by: Maurici Abad Gutierrez <[email protected]> Co-authored-by: Florian Lefebvre <[email protected]> Co-authored-by: delucis <[email protected]>
1 parent 6e2fe0d commit a42ce7e

File tree

6 files changed

+232
-2
lines changed

6 files changed

+232
-2
lines changed

astro.sidebar.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,7 @@ export const sidebar = [
152152
'reference/experimental-flags/static-import-meta-env',
153153
'reference/experimental-flags/chrome-devtools-workspace',
154154
'reference/experimental-flags/fail-on-prerender-conflict',
155+
'reference/experimental-flags/svg-optimization',
155156
],
156157
}),
157158
'reference/legacy-flags',

src/content/docs/en/reference/cli-reference.mdx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -206,9 +206,11 @@ Starts a local server to serve the contents of your static directory (`dist/` by
206206

207207
This command allows you to preview your site locally [after building](#astro-build) to catch any errors in your build output before deploying it. It is not designed to be run in production. For help with production hosting, check out our guide on [Deploying an Astro Website](/en/guides/deploy/).
208208

209-
Since Astro 1.5.0, the [Node adapter](/en/guides/integrations-guide/node/) supports `astro preview` for builds generated with on-demand rendering.
209+
The following hotkeys can be used in the terminal where the Astro preview server is running:
210+
- `o` + `enter` to open your Astro site in the browser.
211+
- `q` + `enter` to quit the preview server.
210212

211-
Can be combined with the [common flags](#common-flags) documented below.
213+
The `astro preview` command can be combined with the [common flags](#common-flags) documented below to further control the preview experience.
212214

213215
## `astro check`
214216

src/content/docs/en/reference/error-reference.mdx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,3 +154,4 @@ The following reference is a complete list of the errors you may encounter while
154154
- [**SessionWithoutSupportedAdapterOutputError**](/en/reference/errors/session-without-supported-adapter-output-error/)<br/>Sessions cannot be used with an adapter that doesn't support server output.
155155
- [**SessionConfigMissingError**](/en/reference/errors/session-config-missing-error/)<br/>Session storage was enabled but not configured.
156156
- [**SessionConfigWithoutFlagError**](/en/reference/errors/session-config-without-flag-error/)<br/>Session flag not set
157+
- [**CannotOptimizeSvg**](/en/reference/errors/cannot-optimize-svg/)<br/>Cannot optimize SVG
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
# NOTE: This file is auto-generated from 'scripts/error-docgen.mjs'
3+
# Do not make edits to it directly, they will be overwritten.
4+
# Instead, change this file: https://github.com/withastro/astro/blob/main/packages/astro/src/core/errors/errors-data.ts
5+
# Translators, please remove this note and the <DontEditWarning/> component.
6+
7+
title: Cannot optimize SVG
8+
i18nReady: true
9+
githubURL: https://github.com/withastro/astro/blob/main/packages/astro/src/core/errors/errors-data.ts
10+
---
11+
import DontEditWarning from '~/components/DontEditWarning.astro'
12+
13+
<DontEditWarning />
14+
15+
16+
> An error occurred while optimizing the SVG file with SVGO.
17+
18+
19+
20+
Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
---
2+
title: Experimental SVG optimization
3+
sidebar:
4+
label: SVG optimization
5+
i18nReady: true
6+
---
7+
8+
import Since from '~/components/Since.astro'
9+
10+
<p>
11+
12+
**Type:** `boolean | object`<br />
13+
**Default:** `false`<br />
14+
<Since v="5.16.0" />
15+
</p>
16+
17+
This experimental feature enables automatic optimization of your [SVG components](/en/guides/images/#svg-components) using [SVGO](https://svgo.dev/) during build time.
18+
19+
When enabled, your imported SVG files used as components will be optimized for smaller file sizes and better performance while maintaining visual quality. This can significantly reduce the size of your SVG assets by removing unnecessary metadata, comments, and redundant code.
20+
21+
To enable this feature with default settings, set it to `true` in your Astro config:
22+
23+
```js title="astro.config.mjs" ins={5}
24+
import { defineConfig } from "astro/config"
25+
26+
export default defineConfig({
27+
experimental: {
28+
svgo: true
29+
}
30+
})
31+
```
32+
33+
## Usage
34+
35+
No change to using SVG components is required to take advantage of this feature. With experimental `svgo` enabled, all your SVG component import files will be automatically optimized:
36+
37+
```astro title="src/pages/index.astro"
38+
---
39+
import Logo from '../assets/logo.svg';
40+
---
41+
42+
<Logo />
43+
```
44+
45+
The SVG will be optimized during the build process, resulting in smaller file sizes in your production build.
46+
47+
Note that this optimization applies to every SVG component import in your project. It is not possible to opt out on a per-component basis.
48+
49+
## Configuration
50+
51+
You can pass a [SVGO configuration object](https://github.com/svg/svgo/blob/66d503a48c6c95661726262a3068053c429b06a9/lib/types.ts#L335) to customize optimization behavior:
52+
53+
```js title="astro.config.mjs"
54+
export default defineConfig({
55+
experimental: {
56+
svgo: {
57+
plugins: [
58+
'preset-default',
59+
{
60+
name: 'removeViewBox',
61+
active: false
62+
}
63+
]
64+
}
65+
}
66+
})
67+
```
68+
69+
### `plugins`
70+
71+
**Type:** `Array<string | PluginConfig>`<br />
72+
**Default:** `[]`
73+
74+
An array of [SVGO plugins](https://svgo.dev/docs/plugins/) that will be used to optimize your SVG component imports.
75+
76+
This can include any plugins by ID name, including SVGO's `preset-default` collection of plugins. A plugin can optionally be passed as an object including both its `name` and `active` status, to enable or disable as necessary.
77+
78+
```js title="astro.config.mjs"
79+
export default defineConfig({
80+
experimental: {
81+
svgo: {
82+
plugins: [
83+
'preset-default',
84+
{
85+
name: 'removeViewBox',
86+
active: false
87+
}
88+
]
89+
}
90+
}
91+
})
92+
```
93+
94+
### Other configuration options
95+
96+
You can also pass [other SVGO configuration options](https://github.com/svg/svgo/blob/66d503a48c6c95661726262a3068053c429b06a9/lib/types.ts#L335), such as `floatPrecision` and `multipass`, directly to your config object:
97+
98+
```js title="astro.config.mjs"
99+
export default defineConfig({
100+
experimental: {
101+
svgo: {
102+
floatPrecision: 2,
103+
multipass: true
104+
}
105+
}
106+
})
107+
```
108+
109+
## Common use cases
110+
111+
SVGO provides an extensive [default plugin list](https://svgo.dev/docs/preset-default/) with opinionated optimizations that is more convenient than adding each plugin individually. However, you may need to customize it further for your needs. For example, it may remove items or clean up too aggressively for your situation.
112+
113+
### Preserve specific attributes
114+
115+
You may want to preserve certain SVG attributes, such as the `viewBox`, that SVGO removes by default:
116+
117+
```js title="astro.config.mjs"
118+
export default defineConfig({
119+
experimental: {
120+
svgo: {
121+
plugins: [
122+
'preset-default',
123+
{
124+
name: 'removeViewBox',
125+
active: false // Preserve viewBox attribute
126+
}
127+
]
128+
}
129+
}
130+
})
131+
```
132+
133+
### Remove specific elements
134+
135+
You can configure plugins to remove specific unwanted elements like metadata or hidden layers. Note that many plugins are already included in `preset-default`, so you typically only need to configure their behavior:
136+
137+
```js title="astro.config.mjs"
138+
export default defineConfig({
139+
experimental: {
140+
svgo: {
141+
plugins: [
142+
'preset-default',
143+
{
144+
name: 'removeMetadata',
145+
active: true
146+
}
147+
]
148+
}
149+
}
150+
})
151+
```
152+
153+
### Custom precision
154+
155+
Control the precision of numeric values in path data:
156+
157+
```js title="astro.config.mjs"
158+
export default defineConfig({
159+
experimental: {
160+
svgo: {
161+
floatPrecision: 2
162+
}
163+
}
164+
})
165+
```
166+
167+
## How it works
168+
169+
SVG optimization happens during the build process, not at runtime:
170+
171+
- In **development mode**, SVG files are not optimized to ensure faster rebuild times and a smoother development experience.
172+
- In **production builds**, all imported SVG files are optimized once during the build process, resulting in smaller file sizes.
173+
- There is **no runtime overhead** - optimized SVGs are served as pre-processed static assets.
174+
175+
While the optimization process may slightly increase your build times, the result is smaller file sizes and faster page loads for your users.
176+
177+
## Further reading
178+
179+
- [SVGO documentation](https://svgo.dev/)

src/content/docs/en/reference/modules/astro-actions.mdx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -443,6 +443,7 @@ import type {
443443
ActionAPIContext,
444444
ActionClient,
445445
ActionErrorCode,
446+
ActionInputSchema,
446447
ActionReturnType,
447448
SafeResult,
448449
} from 'astro:actions';
@@ -546,6 +547,32 @@ button?.addEventListener('click', async () => {
546547

547548
A union type of standard HTTP status codes [defined by IANA](https://www.iana.org/assignments/http-status-codes/http-status-codes.xhtml) using the human-readable versions as uppercase strings separated by an underscore (e.g. `BAD_REQUEST` or `PAYLOAD_TOO_LARGE`).
548549

550+
### `ActionInputSchema`
551+
552+
<p>
553+
554+
**Type:** `ZodType`
555+
<Since v="5.16.0" />
556+
</p>
557+
558+
A utility type that automatically infers the TypeScript type of an action's input based on its Zod schema. This can be useful to reference an action's [`input` validator type](#input-validator) as an object in your own type definitions.
559+
560+
Returns `never` when [`input` validator](#input-validator) is omitted.
561+
562+
The following example uses `ActionInputSchema` on an action named `contact` to:
563+
* Retrieve the Zod schema type for the input of the action.
564+
* Retrieve the expected input type of the action's validator.
565+
566+
```astro title="src/components/Form.astro" {5}
567+
---
568+
import { actions, ActionInputSchema } from 'astro:actions';
569+
import { z } from 'astro/zod';
570+
571+
type ContactSchema = ActionInputSchema<typeof actions.contact>;
572+
type ContactInput = z.input<ContactSchema>;
573+
---
574+
```
575+
549576
### `ActionReturnType`
550577

551578
<p>

0 commit comments

Comments
 (0)