|
| 1 | +--- |
| 2 | +title: "Astro 4.3" |
| 3 | +description: "Astro 4.3 is out now! This release includes support for domain routing in i18n, better support for relative images in Markdown, a new `ComponentProps` type export, and more." |
| 4 | +publishDate: "February 2, 2024" |
| 5 | +authors: |
| 6 | + - erika |
| 7 | + - ema |
| 8 | + - matthew |
| 9 | + - nate |
| 10 | + - bjorn |
| 11 | +coverImage: "/src/content/blog/_images/astro-430/post-header-4.3.webp" |
| 12 | +socialImage: "/src/content/blog/_images/astro-430/og-image-4.3.webp" |
| 13 | +lang: "en" |
| 14 | +--- |
| 15 | + |
| 16 | +Astro 4.3 is now available! This release includes a new experimental i18n feature to try out, and improvements to working with your build output, component prop types, Markdown images, and more. |
| 17 | + |
| 18 | +Highlights include: |
| 19 | + |
| 20 | +- **[Experimental: Add domain support for i18n](#experimental-add-domain-support-for-i18n)** |
| 21 | +- **[More control over your HTML file output](#more-control-over-your-html-file-output)** |
| 22 | +- **[Add `ComponentProps` type utility](#add-componentprops-type-utility)** |
| 23 | +- **[Better support for relative images in Markdown](#fix-using-images-in-markdown-without-a-relative-specifier)** |
| 24 | + |
| 25 | +## How to upgrade |
| 26 | + |
| 27 | +To take advantage of the latest features, make sure you're running the latest version of Astro. You can upgrade to Astro 4.3 by running the `@astrojs/upgrade` command: |
| 28 | + |
| 29 | +```sh |
| 30 | +npx @astrojs/upgrade |
| 31 | +``` |
| 32 | + |
| 33 | +or by running the upgrade command for your package manager: |
| 34 | + |
| 35 | +```sh |
| 36 | +npm install astro@latest |
| 37 | +pnpm upgrade astro --latest |
| 38 | +yarn upgrade astro --latest |
| 39 | +``` |
| 40 | + |
| 41 | +## Experimental: Add domain support for i18n |
| 42 | + |
| 43 | +Astro 4.3 adds an experimental `domains` i18n configuration. This allows you to specify different domains or subdomains for different supported locales. |
| 44 | + |
| 45 | +For example, you could now use `example.com` for your English site, `fr.example.com` for your French site, and `example.es` for your Spanish site. |
| 46 | +Enable the experimental flag `i18nDomains` and map any or all of your locales to domains using `i18n.domains` in your `astro.config.mjs` file: |
| 47 | + |
| 48 | +```diff lang="js" |
| 49 | +// astro.config.mjs |
| 50 | +import {defineConfig} from "astro/config" |
| 51 | + |
| 52 | +export default defineConfig({ |
| 53 | + site: "https://example.com", |
| 54 | + output: "server", // required, with no prerendered pages |
| 55 | + adapter: node({ |
| 56 | + mode: 'standalone', |
| 57 | + }), |
| 58 | + i18n: { |
| 59 | + defaultLocaLe: 'en', |
| 60 | + locales: ['en', 'es', 'pt_BR', 'pt', 'fr'], |
| 61 | ++ domains: { |
| 62 | ++ fr: "https://fr.example.com", |
| 63 | ++ es: "https://example.es" |
| 64 | ++ }, |
| 65 | + routing: { |
| 66 | + prefixDefaultLocale: true, |
| 67 | + } |
| 68 | + }, |
| 69 | ++ experimental: { |
| 70 | ++ i18nDomains: true |
| 71 | ++ }, |
| 72 | +}) |
| 73 | +``` |
| 74 | + |
| 75 | +Note that this feature requires an entirely server-rendered site with no prerendered pages. Currently, the `@astrojs/node` and `@astrojs/vercel` adapters are supported with more adapter compatibility to come! |
| 76 | + |
| 77 | +See more in our [internationalization documentation](https://docs.astro.build/en/guides/internationalization/#domains-experimental) for more details and limitations on this experimental routing feature. |
| 78 | + |
| 79 | +## More control over your HTML file output |
| 80 | + |
| 81 | +This release adds a new `build.format` option called `preserve` to give you more control over the resulting HTML files in your production build. |
| 82 | + |
| 83 | +The current configuration options (`file` and `directory`) either build all of your HTML pages as files matching the route name (e.g. `/about.html`) or build all of your files as `index.html` within a nested directory structure (e.g. `/about/index.html`), respectively. It is not possible to create individual index pages (e.g. `/about/index.html`) when using the `file` configuration option. |
| 84 | + |
| 85 | +Rather than introduce a breaking change to `file`, we added the new `preserve` format which will preserve how the filesystem is structured and make sure that is mirrored over to production: |
| 86 | + |
| 87 | +- `about.astro` becomes `about.html` |
| 88 | +- `about/index.astro` becomes `about/index.html` |
| 89 | + |
| 90 | +What you see is what you get! This feature unlocks better compatibility with certain web servers who have strict requirements on how files are structured. |
| 91 | + |
| 92 | +See the [`build.format` configuration options reference](https://docs.astro.build/en/reference/configuration-reference/#buildformat) for more details. |
| 93 | + |
| 94 | +## Add `ComponentProps` type utility |
| 95 | + |
| 96 | +Astro now includes a new `ComponentProps` type export from `astro/types` to get the props type of an Astro component. This is similar to `React.ComponentProps` or Svelte's `ComponentProps`. |
| 97 | + |
| 98 | +This type export allows you to reference the `Props` accepted by another component, even if that component doesn't export that `Props` type directly. |
| 99 | + |
| 100 | +```astro |
| 101 | +--- |
| 102 | +import type { ComponentProps } from 'astro/types'; |
| 103 | +import { Button } from "./Button.astro"; |
| 104 | +
|
| 105 | +type MyButtonProps = ComponentProps<typeof Button>; |
| 106 | +--- |
| 107 | +``` |
| 108 | + |
| 109 | +## Fix using images in Markdown without a relative specifier |
| 110 | + |
| 111 | +Previously, using images in Markdown without using a relative specifier (such as `./` or `../`) would cause Astro to throw an error. |
| 112 | + |
| 113 | +Now, you can use the standard `` syntax in Markdown files for images colocated in the same folder: no relative specifier required! |
| 114 | + |
| 115 | +There is no need to update your project; your existing images will still continue to work. However, you can safely remove any relative specifiers from these Markdown images as they are no longer necessary... as the Markdown spec intended! |
| 116 | + |
| 117 | +```diff |
| 118 | +-  |
| 119 | ++  |
| 120 | +<!-- This dog lives in the same folder as my article! --> |
| 121 | +``` |
| 122 | + |
| 123 | +Thanks to [Oliver Speir](https://github.com/OliverSpeir) for contributing this fix! |
| 124 | + |
| 125 | +## Bug Fixes |
| 126 | + |
| 127 | +As always, additional bug fixes are included in this release. Check out the [release notes](https://github.com/withastro/astro/blob/refs/heads/main/packages/astro/CHANGELOG.md#430) to learn more. |
0 commit comments