Releases: withastro/astro
[email protected]
Major Changes
-
#11826
7315050
Thanks @matthewp! - Deprecate Astro.globThe
Astro.glob
function has been deprecated in favor of Content Collections andimport.meta.glob
.- If you want to query for markdown and MDX in your project, use Content Collections.
- If you want to query source files in your project, use
import.meta.glob
(https://vitejs.dev/guide/features.html#glob-import).
Also consider using glob packages from npm, like fast-glob, especially if statically generating your site, as it is faster for most use-cases.
The easiest path is to migrate to
import.meta.glob
like so:- const posts = Astro.glob('./posts/*.md'); + const posts = Object.values(import.meta.glob('./posts/*.md', { eager: true }));
-
#11827
a83e362
Thanks @matthewp! - Prevent usage ofastro:content
in the clientUsage of
astro:content
in the client has always been discouraged because it leads to all of your content winding up in your client bundle, and can possibly leaks secrets.This formally makes doing so impossible, adding to the previous warning with errors.
In the future Astro might add APIs for client-usage based on needs.
-
#11253
4e5cc5a
Thanks @kevinzunigacuellar! - Changes the data returned forpage.url.current
,page.url.next
,page.url.prev
,page.url.first
andpage.url.last
to include the value set forbase
in your Astro config.Previously, you had to manually prepend your configured value for
base
to the URL path. Now, Astro automatically includes yourbase
value innext
andprev
URLs.If you are using the
paginate()
function for "previous" and "next" URLs, remove any existingbase
value as it is now added for you:--- export async function getStaticPaths({ paginate }) { const astronautPages = [{ astronaut: 'Neil Armstrong', }, { astronaut: 'Buzz Aldrin', }, { astronaut: 'Sally Ride', }, { astronaut: 'John Glenn', }]; return paginate(astronautPages, { pageSize: 1 }); } const { page } = Astro.props; // `base: /'docs'` configured in `astro.config.mjs` - const prev = "/docs" + page.url.prev; + const prev = page.url.prev; --- <a id="prev" href={prev}>Back</a>
Minor Changes
-
#11698
05139ef
Thanks @ematipico! - Adds a new property to the globalsAstro
andAPIContext
calledroutePattern
. TheroutePattern
represents the current route (component)
that is being rendered by Astro. It's usually a path pattern will look like this:blog/[slug]
:--- // src/pages/blog/[slug].astro const route = Astro.routePattern; console.log(route); // it will log "blog/[slug]" ---
// src/pages/index.js export const GET = (ctx) => { console.log(ctx.routePattern); // it will log src/pages/index.js return new Response.json({ loreum: 'ipsum' }); };
Patch Changes
-
#11791
9393243
Thanks @bluwy! - Updates Astro's default<script>
rendering strategy and removes theexperimental.directRenderScript
option as this is now the default behavior: scripts are always rendered directly. This new strategy prevents scripts from being executed in pages where they are not used.Scripts will directly render as declared in Astro files (including existing features like TypeScript, importing
node_modules
, and deduplicating scripts). You can also now conditionally render scripts in your Astro file.However, this means scripts are no longer hoisted to the
<head>
, multiple scripts on a page are no longer bundled together, and the<script>
tag may interfere with the CSS styling.As this is a potentially breaking change to your script behavior, please review your
<script>
tags and ensure that they behave as expected. -
#11767
d1bd1a1
Thanks @ascorbic! - Refactors content layer sync to use a queue
[email protected]
[email protected]
Minor Changes
-
#11729
1c54e63
Thanks @ematipico! - Adds a new variantsync
for theastro:config:setup
hook'scommand
property. This value is set when calling the commandastro sync
.If your integration previously relied on knowing how many variants existed for the
command
property, you must update your logic to account for this new option. -
#11743
cce0894
Thanks @ph1p! - Adds a new, optional propertytimeout
for theclient:idle
directive.This value allows you to specify a maximum time to wait, in milliseconds, before hydrating a UI framework component, even if the page is not yet done with its initial load. This means you can delay hydration for lower-priority UI elements with more control to ensure your element is interactive within a specified time frame.
<ShowHideButton client:idle={{ timeout: 500 }} />
-
#11677
cb356a5
Thanks @ematipico! - Adds a new optionfallbackType
toi18n.routing
configuration that allows you to control how fallback pages are handled.When
i18n.fallback
is configured, this new routing option controls whether to redirect to the fallback page, or to rewrite the fallback page's content in place.The
"redirect"
option is the default value and matches the current behavior of the existing fallback system.The option
"rewrite"
uses the new rewriting system to create fallback pages that render content on the original, requested URL without a browser refresh.For example, the following configuration will generate a page
/fr/index.html
that will contain the same HTML rendered by the page/en/index.html
whensrc/pages/fr/index.astro
does not exist.// astro.config.mjs export default defineConfig({ i18n: { locals: ['en', 'fr'], defaultLocale: 'en', routing: { prefixDefaultLocale: true, fallbackType: 'rewrite', }, fallback: { fr: 'en', }, }, });
-
#11708
62b0d20
Thanks @martrapp! - Adds a new objectswapFunctions
to expose the necessary utility functions onastro:transitions/client
that allow you to build custom swap functions to be used with view transitions.The example below uses these functions to replace Astro's built-in default
swap
function with one that only swaps the<main>
part of the page:<script> import { swapFunctions } from 'astro:transitions/client'; document.addEventListener('astro:before-swap', (e) => { e.swap = () => swapMainOnly(e.newDocument) }); function swapMainOnly(doc: Document) { swapFunctions.deselectScripts(doc); swapFunctions.swapRootAttributes(doc); swapFunctions.swapHeadElements(doc); const restoreFocusFunction = swapFunctions.saveFocus(); const newMain = doc.querySelector('main'); const oldMain = document.querySelector('main'); if (newMain && oldMain) { swapFunctions.swapBodyElement(newMain, oldMain); } else { swapFunctions.swapBodyElement(doc.body, document.body); } restoreFocusFunction(); }; </script>
See the view transitions guide for more information about hooking into the
astro:before-swap
lifecycle event and adding a custom swap implementation. -
#11843
5b4070e
Thanks @bholmesdev! - Exposesz
from the newastro:schema
module. This is the new recommended import source for all Zod utilities when using Astro Actions.Migration for Astro Actions users
z
will no longer be exposed fromastro:actions
. To usez
in your actions, import it fromastro:schema
instead:import { defineAction, - z, } from 'astro:actions'; + import { z } from 'astro:schema';
-
#11843
5b4070e
Thanks @bholmesdev! - The Astro Actions API introduced behind a flag in v4.8.0 is no longer experimental and is available for general use.Astro Actions allow you to define and call backend functions with type-safety, performing data fetching, JSON parsing, and input validation for you.
Actions can be called from client-side components and HTML forms. This gives you to flexibility to build apps using any technology: React, Svelte, HTMX, or just plain Astro components. This example calls a newsletter action and renders the result using an Astro component:
--- // src/pages/newsletter.astro import { actions } from 'astro:actions'; const result = Astro.getActionResult(actions.newsletter); --- {result && !result.error && <p>Thanks for signing up!</p>} <form method="POST" action={actions.newsletter}> <input type="email" name="email" /> <button>Sign up</button> </form>
If you were previously using this feature, please remove the experimental flag from your Astro config:
import { defineConfig } from 'astro' export default defineConfig({ - experimental: { - actions: true, - } })
If you have been waiting for stabilization before using Actions, you can now do so.
For more information and usage examples, see our brand new Actions guide.
Patch Changes
-
#11677
cb356a5
Thanks @ematipico! - Fixes a bug in the logic ofAstro.rewrite()
which led to the value forbase
, if configured, being automatically prepended to the rewrite URL passed. This was unintended behavior and has been corrected, and Astro now processes the URLs exactly as passed.If you use the
rewrite()
function on a project that hasbase
configured, you must now prepend the base to your existing rewrite URL:// astro.config.mjs export default defineConfig({ base: '/blog', });
// src/middleware.js export function onRequest(ctx, next) { - return ctx.rewrite("/about") + return ctx.rewrite("/blog/about") }
-
#11862
0e35afe
Thanks @ascorbic! - BREAKING CHANGE to experimental content layer loaders only!Passes
AstroConfig
instead ofAstroSettings
object to content layer loaders.This will not affect you unless you have created a loader that uses the
settings
object. If you have, you will need to update your loader to use theconfig
object instead.export default function myLoader() { return { name: 'my-loader' - async load({ settings }) { - const base = settings.config.base; + async load({ config }) { + const base = config.base; // ... } } }
Other properties of the settings object are private internals, and should not be accessed directly. If you think you need access to other properties, please open an issue to discuss your use case.
-
#11772
6272e6c
Thanks @bluwy! - Usesmagicast
to update the config forastro add
-
#11845
440a4be
Thanks @bluwy! - Replacesexeca
withtinyexec
internally -
#11858
8bab233
Thanks @ascorbic! - Correctly resolves content layer images when filePath is not set
@astrojs/[email protected]
Patch Changes
- Updated dependencies [
d6611e8
]:- @astrojs/[email protected]
@astrojs/[email protected]
Minor Changes
-
#11385
d6611e8
Thanks @Fryuni! - Adds support for connecting Astro DB to any remote LibSQL server. This allows Astro DB to be used with self-hosting and air-gapped deployments.To connect Astro DB to a remote LibSQL server instead of Studio, set the following environment variables:
ASTRO_DB_REMOTE_URL
: the connection URL to your LibSQL serverASTRO_DB_APP_TOKEN
: the auth token to your LibSQL server
Details of the LibSQL connection can be configured using the connection URL. For example,
memory:?syncUrl=libsql%3A%2F%2Fdb-server.example.com
would create an in-memory embedded replica for the LibSQL DB onlibsql://db-server.example.com
.For more details, please visit the Astro DB documentation
Patch Changes
- Updated dependencies []:
- @astrojs/[email protected]
[email protected]
Patch Changes
-
#11847
45b599c
Thanks @ascorbic! - Fixes a case where Vite would be imported by the SSR runtime, causing bundling errors and bloat. -
#11822
6fcaab8
Thanks @bluwy! - Marks internalvite-plugin-fileurl
plugin withenforce: 'pre'
-
#11713
497324c
Thanks @voidfill! - Prevents prefetching of the same urls with different hashes. -
#11814
2bb72c6
Thanks @eduardocereto! - Updates the documentation for experimental Content Layer API with a corrected code example -
#11842
1ffaae0
Thanks @stephan281094! - Fixes a typo in theMissingImageDimension
error message -
#11828
20d47aa
Thanks @bholmesdev! - Improves error message when invalid data is returned by an Action.