[email protected]

Minor Changes

• #11729 1c54e63 Thanks @ematipico! - Adds a new variant sync for the astro:config:setup hook's command property. This value is set when calling the command astro 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 property timeout for the client: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 option fallbackType to i18n.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 when src/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 object swapFunctions to expose the necessary utility functions on astro: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! - Exposes z from the new astro: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 from astro:actions. To use z in your actions, import it from astro: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 of Astro.rewrite() which led to the value for base, 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 has base 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 of AstroSettings 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 the config 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! - Uses magicast to update the config for astro add

• #11845 440a4be Thanks @bluwy! - Replaces execa with tinyexec internally

• #11858 8bab233 Thanks @ascorbic! - Correctly resolves content layer images when filePath is not set