#9118 000e8f465 Thanks @Princesseuh! - Redesign Dev Overlay main screen to show more information, such as the coolest integrations, your current Astro version and more.
#9118 000e8f465 Thanks @Princesseuh! - Fixes an issue where links with the same pathname as the current page, but different search params, were not prefetched.
#9138 abf601233 Thanks @bluwy! - Updates the unified, remark, and rehype dependencies to latest. Make sure to update your custom remark and rehype plugins as well to be compatible with the latest versions.
Potentially breaking change: The default value of markdown.remarkRehype.footnoteBackLabel is changed from "Back to content" to "Back to reference 1". See the mdast-util-to-hast commit for more information.
#9181 cdabf6ef0 Thanks @bluwy! - Removes support for returning simple objects from endpoints (deprecated since Astro 3.0). You should return a Response instead.
ResponseWithEncoding is also removed. You can refactor the code to return a response with an array buffer instead, which is encoding agnostic.
The types for middlewares have also been revised. To type a middleware function, you should now use MiddlewareHandler instead of MiddlewareResponseHandler. If you used defineMiddleware() to type the function, no changes are needed.
#9122 1c48ed286 Thanks @bluwy! - Adds Vite 5 support. There are no breaking changes from Astro. Check the Vite migration guide for details of the breaking changes from Vite instead.
#9196 37697a2c5 Thanks @bluwy! - Removes support for Shiki custom language’s path property. The language JSON file should be imported and passed to the option instead.
import customLang from './custom.tmLanguage.json'
export default defineConfig({ markdown: { shikiConfig: { langs: [ { path: './custom.tmLanguage.json' }, customLang, ], }, },})#9168 153a5abb9 Thanks @bluwy! - Removes deprecated features from Astro 3.0
supportedAstroFeatures to specify a list of features they support.build.split and build.excludeMiddleware options are removed. Use functionPerRoute and edgeMiddleware from adapters instead.markdown.drafts option and draft feature is removed. Use content collections instead.getHeaders() exported from markdown files is removed. Use getHeadings() instead.#9105 6201bbe96 Thanks @FredKSchott! - Update CLI logging experience
#9161 bd0c2e9ae Thanks @bluwy! - Renames the entryPoint property of the injectRoute integrations API to entrypoint for consistency. A warning will be shown prompting you to update your code when using the old name.
#9149 0fe3a7ed5 Thanks @bluwy! - Removes vendored Vite’s importMeta.d.ts file in favour of Vite 5’s new vite/types/import-meta.d.ts export
#9150 710be505c Thanks @bluwy! - Refactors virtual modules exports. This should not break your project unless you import Astro’s internal modules, including:
astro/middleware/namespaceastro/transitionsastro/transitions/routerastro/transitions/eventsastro/transitions/typesastro/prefetchastro/i18nUpdated dependencies [abf601233, addb57c8e, c7953645e]:
#9090 c87223c21 Thanks @martrapp! - Take full control over the behavior of view transitions!
Three new events now complement the existing astro:after-swap and astro:page-load events:
astro: before - preparation; // Control how the DOM and other resources of the target page are loadedastro: after - preparation; // Last changes before taking off? Remove that loading indicator? Here you go!astro: before - swap; // Control how the DOM is updated to match the new pageThe astro:before-* events allow you to change properties and strategies of the view transition implementation.
The astro:after-* events are notifications that a phase is complete.
Head over to docs to see the full view transitions lifecycle including these new events!
#9092 0ea4bd47e Thanks @smitbarmase! - Changes the fallback prefetch behavior on slow connections and when data saver mode is enabled. Instead of disabling prefetch entirely, the tap strategy will be used.
#9166 cba6cf32d Thanks @matthewp! - The Picture component is no longer experimental
The <Picture /> component, part of astro:assets, has exited experimental status and is now recommended for use. There are no code changes to the component, and no upgrade to your project is necessary.
This is only a change in documentation/recommendation. If you were waiting to use the <Picture /> component until it had exited the experimental stage, wait no more!
#9092 0ea4bd47e Thanks @smitbarmase! - Adds a ignoreSlowConnection option to the prefetch() API to prefetch even on data saver mode or slow connection.
7ff8d62bf Thanks @ematipico! - Revert fix around fallback system, which broken injected styles#9121 f4efd1c80 Thanks @peng! - Adds a warning if astro add fetches a package but returns a non-404 status
#9142 7d55cf68d Thanks @ematipico! - Consistely emit fallback routes in the correct folders.
#9119 306781795 Thanks @ematipico! - Fix a flaw in the i18n fallback logic, where the routes didn’t preserve their metadata, such as hoisted scripts
#9140 7742fd7dc Thanks @martrapp! - View Transitions: handle clicks on SVGAElements and image maps”
#9101 e3dce215a Thanks @ematipico! - Add a new property Astro.currentLocale, available when i18n is enabled.
#9091 536c6c9fd Thanks @ematipico! - The routingStrategy prefix-always should not force its logic to endpoints. This fixes some regression with astro:assets and @astrojs/rss.
#9102 60e8210b0 Thanks @Princesseuh! - In the dev overlay, when there’s too many plugins enabled at once, some of the plugins will now be hidden in a separate sub menu to avoid the bar becoming too long
#9085 fc66ecff1 Thanks @ematipico! - When redirecting to the default root locale, Astro middleare should take into consideration the value of trailingSlash
#9067 c6e449c5b Thanks @danielhajduk! - Fixes display of debug messages when using the --verbose flag
#9075 c5dc8f2ec Thanks @Princesseuh! - Fix Passthrough image service generating multiple images with the same content in certain cases
#9083 4537ecf0d Thanks @bluwy! - Uses new createShikiHighlighter API from @astrojs/markdown-remark to avoid code duplication
#9084 045e5ec97 Thanks @matthewp! - Supports formmethod and formaction for form overrides
#9087 b895113a0 Thanks @alexanderniebuhr! - Fixes the regression which broke bundling of image service for pre-rendered pages, which was introduced by #8854
#9058 5ef89ef33 Thanks @Princesseuh! - Add a new settings panel to the dev overlay
#9045 84312f24f Thanks @rishi-raj-jain! - Fixes preview server trailingSlash handling for request URLs with query strings
Updated dependencies [4537ecf0d]:
50164f5e3 Thanks @natemoo-re! - Fix a regression introduced in 3.5.0 related to content collection styles1bc331968 Thanks @ematipico! - Correctly infer the presence of an user middleware#9037 ea71975ec Thanks @sarah11918! - Updates i18n configuration reference
#9051 15b84ccb9 Thanks @ematipico! - Fix a regression where endpoints were incorrectly processed during SSG build when trailingSlash: "always"
#9042 7dedd17fc Thanks @rishi-raj-jain! - Safely bail when the xclip command does not exist on Linux when trying to copy to clipboard with astro info
#9050 bf0286e50 Thanks @Princesseuh! - Fix –verbose flag not working
#9049 49b82edb2 Thanks @Princesseuh! - Fix image errors when images were used on the client
#8869 f5bdfa272 Thanks @matthewp! - ## Integration Hooks to add Middleware
It’s now possible in Astro for an integration to add middleware on behalf of the user. Previously when a third party wanted to provide middleware, the user would need to create a src/middleware.ts file themselves. Now, adding third-party middleware is as easy as adding a new integration.
For integration authors, there is a new addMiddleware function in the astro:config:setup hook. This function allows you to specify a middleware module and the order in which it should be applied:
import { defineMiddleware } from 'astro:middleware';
export const onRequest = defineMiddleware(async (context, next) => { const response = await next();
if (response.headers.get('content-type') === 'text/html') { let html = await response.text(); html = minify(html); return new Response(html, { status: response.status, headers: response.headers, }); }
return response;});You can now add your integration’s middleware and specify that it runs either before or after the application’s own defined middleware (defined in src/middleware.{js,ts})
export function myIntegration() { return { name: 'my-integration', hooks: { 'astro:config:setup': ({ addMiddleware }) => { addMiddleware({ entrypoint: 'my-package/middleware', order: 'pre', }); }, }, };}#8854 3e1239e42 Thanks @natemoo-re! - Provides a new, experimental build cache for Content Collections as part of the Incremental Build RFC. This includes multiple refactors to Astro’s build process to optimize how Content Collections are handled, which should provide significant performance improvements for users with many collections.
Users building a static site can opt-in to preview the new build cache by adding the following flag to your Astro config:
export default { experimental: { contentCollectionCache: true, },};When this experimental feature is enabled, the files generated from your content collections will be stored in the cacheDir (by default, node_modules/.astro) and reused between builds. Most CI environments automatically restore files in node_modules/ by default.
In our internal testing on the real world Astro Docs project, this feature reduces the bundling step of astro build from 133.20s to 10.46s, about 92% faster. The end-to-end astro build process used to take 4min 58s and now takes just over 1min for a total reduction of 80%.
If you run into any issues with this experimental feature, please let us know!
You can always bypass the cache for a single build by passing the --force flag to astro build.
astro build --force#8963 fda3a0213 Thanks @matthewp! - Form support in View Transitions router
The <ViewTransitions /> router can now handle form submissions, allowing the same animated transitions and stateful UI retention on form posts that are already available on <a> links. With this addition, your Astro project can have animations in all of these scenarios:
navigate() API.This feature is opt-in for semver reasons and can be enabled by adding the handleForms prop to the `
---import { ViewTransitions } from 'astro:transitions';---
<html> <head> <!-- ... --> <ViewTransitions handleForms /> </head> <body> <!-- ... --> </body></html>Just as with links, if you don’t want the routing handling a form submission, you can opt out on a per-form basis with the data-astro-reload property:
<form class="contact-form" action="/request" method="post" data-astro-reload> <!-- ...--></form>Form support works on post method="get" and method="post" forms.
#8954 f0031b0a3 Thanks @Princesseuh! - Updates the Image Services API to now delete original images from the final build that are not used outside of the optimization pipeline. For users with a large number of these images (e.g. thumbnails), this should reduce storage consumption and deployment times.
#8984 26b1484e8 Thanks @Princesseuh! - Adds a new property propertiesToHash to the Image Services API to allow specifying which properties of getImage() / <Image /> / <Picture /> should be used for hashing the result files when doing local transformations. For most services, this will include properties such as src, width or quality that directly changes the content of the generated image.
#9010 100b61ab5 Thanks @jasikpark! - The <Picture /> component will now use jpg and jpeg respectively as fallback formats when the original image is in those formats.
#8974 143bacf39 Thanks @ematipico! - Experimental support for i18n routing.
Astro’s experimental i18n routing API allows you to add your multilingual content with support for configuring a default language, computing relative page URLs, and accepting preferred languages provided by your visitor’s browser. You can also specify fallback languages on a per-language basis so that your visitors can always be directed to existing content on your site.
Enable the experimental routing option by adding an i18n object to your Astro configuration with a default location and a list of all languages to support:
import { defineConfig } from 'astro/config';
export default defineConfig({ experimental: { i18n: { defaultLocale: 'en', locales: ['en', 'es', 'pt-br'], }, },});Organize your content folders by locale depending on your i18n.routingStrategy, and Astro will handle generating your routes and showing your preferred URLs to your visitors.
├── src│ ├── pages│ │ ├── about.astro│ │ ├── index.astro│ │ ├── es│ │ │ ├── about.astro│ │ │ ├── index.astro│ │ ├── pt-br│ │ │ ├── about.astro│ │ │ ├── index.astroCompute relative URLs for your links with getRelativeLocaleUrl from the new astro:i18n module:
---import { getRelativeLocaleUrl } from 'astro:i18n';const aboutUrl = getRelativeLocaleUrl('pt-br', 'about');---
<p>Learn more <a href={aboutURL}>About</a> this site!</p>Enabling i18n routing also provides two new properties for browser language detection: Astro.preferredLocale and Astro.preferredLocaleList. These combine the browser’s Accept-Langauge header, and your site’s list of supported languages and can be used to automatically respect your visitor’s preferred languages.
Read more about Astro’s experimental i18n routing in our documentation.
#8951 38e21d127 Thanks @bluwy! - Prefetching is now supported in core
You can enable prefetching for your site with the prefetch: true config. It is enabled by default when using View Transitions and can also be used to configure the prefetch behaviour used by View Transitions.
You can enable prefetching by setting prefetch:true in your Astro config:
import { defineConfig } from 'astro/config';
export default defineConfig({ prefetch: true,});This replaces the @astrojs/prefetch integration, which is now deprecated and will eventually be removed.
Visit the Prefetch guide for more information.
#8903 c5010aad3 Thanks @horo-fox! - Adds experimental support for multiple shiki themes with the new markdown.shikiConfig.experimentalThemes option.
#9016 1ecc9aa32 Thanks @Princesseuh! - Add ability to “Click to go editor” on auditted elements in the dev overlay
#9029 29b83e9e4 Thanks @Princesseuh! - Use UInt8Array instead of Buffer for both the input and return values of the transform() hook of the Image Service API to ensure compatibility with non-Node runtimes.
This change is unlikely to affect you, but if you were previously relying on the return value being a Buffer, you may convert an UInt8Array to a Buffer using Buffer.from(your_array).
Updated dependencies [c5010aad3]:
#9000 35739d01e Thanks @martrapp! - Fixes an error in dev mode on Safari where view transitions prevented navigating to pages with client:only components
#9014 d979b8f0a Thanks @Princesseuh! - Add animations, shadows and general styling tweaks to the Dev Overlay to better match the intended design.
#8996 3988bbcc9 Thanks @bluwy! - Adds compatibility for shiki languages with the path property
#8986 910eb00fe Thanks @Princesseuh! - Fix sizes attribute not being present on source elements when using it on the Picture component
#8977 40a061679 Thanks @matthewp! - Prevent route announcer from being visible
#8929 2da33b7a1 Thanks @lilnasy! - Fixes an issue where rendering the same slot multiple times invoked it only once.
#8978 cc3278bb6 Thanks @Princesseuh! - In the dev overlay, add a tooltip showing the currently hovered / focused plugin’s name
#8966 262cef248 Thanks @Princesseuh! - Fix Dev Overlay not working properly when view transitions are enabled
#8932 5fed432b0 Thanks @Princesseuh! - Fixed window component appearing over the dev overlay on small windows. Added a maximum length to sections of the tooltip component
#8965 430c470ac Thanks @matthewp! - Move VT route announcer styles to a class
Doing so allows stricter CSP policies.
#8762 35cd810f0 Thanks @evadecker! - Upgrades Zod to 3.22.4
#8928 ca90b47cf Thanks @HiDeoo! - Renames dev overlay UI Toolkit component names for consistency.
#8755 fe4079f05 Thanks @matthewp! - Page Partials
A page component can now be identified as a partial page, which will render its HTML content without including a <! DOCTYPE html> declaration nor any <head> content.
A rendering library, like htmx or Stimulus or even just jQuery can access partial content on the client to dynamically update only parts of a page.
Pages marked as partials do not have a doctype or any head content included in the rendered result. You can mark any page as a partial by setting this option:
---export const partial = true;---
<li>This is a single list item.</li>Other valid page files that can export a value (e.g. .mdx) can also be marked as partials.
Read more about Astro page partials in our documentation.
#8821 4740d761a Thanks @Princesseuh! - Improved image optimization performance
Astro will now generate optimized images concurrently at build time, which can significantly speed up build times for sites with many images. Additionally, Astro will now reuse the same buffer for all variants of an image. This should improve performance for websites with many variants of the same image, especially when using remote images.
No code changes are required to take advantage of these improvements.
#8757 e99586787 Thanks @Princesseuh! - Dev Overlay (experimental)
Provides a new dev overlay for your browser preview that allows you to inspect your page islands, see helpful audits on performance and accessibility, and more. A Dev Overlay Plugin API is also included to allow you to add new features and third-party integrations to it.
You can enable access to the dev overlay and its API by adding the following flag to your Astro config:
export default { experimental: { devOverlay: true, },};Read the Dev Overlay Plugin API documentation for information about building your own plugins to integrate with Astro’s dev overlay.
#8880 8c3d4a859 Thanks @alexanderniebuhr! - Moves the logic for overriding the image service out of core and into adapters. Also fixes a regression where a valid astro:assets image service configuration could be overridden.
#8870 5ea6ee0ed Thanks @xstevenyung! - prevent production install on astro add cmd
#8840 5c888c10b Thanks @martrapp! - Fixes styles of client:only components not persisting during view transitions in dev mode
#8814 ad2bb9155 Thanks @lilnasy! - Fix an issue where 500.astro did not render when the middleware threw an error.
#8863 326e17893 Thanks @florian-lefebvre! - Fixes an issue where the dev server logged the full file path on updates.
#8852 2c18e2d12 Thanks @rayriffy! - Only use Vite config from astro.config.mjs as source of truth
#8828 11f45b9a3 Thanks @rishi-raj-jain! - fix file system path references
#8779 2b8a459a6 Thanks @ematipico! - Enriches the explanation of the base configuration with examples.