astro@3.5.0
Minor Changes
-
#8869
f5bdfa272
Thanks @matthewp! - ## Integration Hooks to add MiddlewareIt'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 theastro:config:setup
hook. This function allows you to specify a middleware module and the order in which it should be applied:// my-package/middleware.js 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}
)// my-package/integration.js 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:// astro.config.mjs 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 innode_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-endastro build
process used to take 4min 58s and now takes just over1min
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 toastro build
.astro build --force
-
#8963
fda3a0213
Thanks @matthewp! - Form support in View Transitions routerThe
<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:- Clicking links between pages.
- Making stateful changes in forms (e.g. updating site preferences).
- Manually triggering navigation via the
navigate()
API.
This feature is opt-in for semver reasons and can be enabled by adding the
handleForms
prop to the ` component:--- // src/layouts/MainLayout.astro 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:--- // src/components/Contact.astro --- <form class="contact-form" action="/request" method="post" data-astro-reload> <!-- ...--> </form>
Form support works on post
method="get"
andmethod="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 propertypropertiesToHash
to the Image Services API to allow specifying which properties ofgetImage()
/<Image />
/<Picture />
should be used for hashing the result files when doing local transformations. For most services, this will include properties such assrc
,width
orquality
that directly changes the content of the generated image. -
#9010
100b61ab5
Thanks @jasikpark! - The<Picture />
component will now usejpg
andjpeg
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:// astro.config.mjs 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.astro
Compute relative URLs for your links with
getRelativeLocaleUrl
from the newastro: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
andAstro.preferredLocaleList
. These combine the browser'sAccept-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 coreYou 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 theprefetch
behaviour used by View Transitions.You can enable prefetching by setting
prefetch:true
in your Astro config:// astro.config.js 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 newmarkdown.shikiConfig.experimentalThemes
option.
Patch Changes
-
#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 thetransform()
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 aBuffer
usingBuffer.from(your_array)
. -
Updated dependencies [
c5010aad3
]:- @astrojs/markdown-remark@3.4.0