[email protected]

Patch Changes

• #7826 31c4031ba Thanks @Princesseuh! - Fix astro:assets not working on Windows in build when using Squoosh

• #7823 5161cf919 Thanks @matthewp! - Adds an astro:beforeload event for the dark mode use-case

• #7836 59b556232 Thanks @matthewp! - Upgrade compiler to bring in Image view transition support

• #7824 267487e63 Thanks @matthewp! - Prevent navigation on hash change

• #7829 b063a2d8a Thanks @Princesseuh! - Fix astro:assets endpoint not working in dev and SSR if experimental.assets was enabled by an integration (such as Starlight)

• #7734 d5f526b33 Thanks @Princesseuh! - Fix some global state related to astro:assets not getting cleaned out properly in SSR with no pre-rendered pages

• #7843 7dbcbc86b Thanks @matthewp! - Fixes head propagation regression

@astrojs/[email protected]

Patch Changes

• #7805 42a21b5da Thanks @matthewp! - Prevent building .html file redirects in hybrid mode

• Updated dependencies [31c4031ba, 5161cf919, 59b556232, 267487e63, b063a2d8a, d5f526b33, 7dbcbc86b]:

  • [email protected]

[email protected]

Patch Changes

• #7782 0f677c009 Thanks @bluwy! - Refactor Astro rendering to write results directly. This improves the rendering performance for all Astro files.

• #7786 188eeddd4 Thanks @matthewp! - Execute scripts when navigating to a new page.

  When navigating to an new page with client-side navigation, scripts are executed (and re-executed) so that any new scripts on the incoming page are run and the DOM can be updated.

  However, type=module scripts never re-execute in Astro, and will not do so in client-side routing. To support cases where you want to modify the DOM, a new astro:load event listener been added:

  document.addEventListener('astro:load', () => {
    updateTheDOMSomehow();
  });

@astrojs/[email protected]

Patch Changes

• #7597 7461e82c8 Thanks @alex-sherwin! - Adds an "allowHTML" Markdoc integration option.

  When enabled, all HTML in Markdoc files will be processed, including HTML elements within Markdoc tags and nodes.

  Enable this feature in the markdoc integration configuration:

  // astro.config.mjs
  export default defineConfig({
    integrations: [markdoc({ allowHTML: true })],
  });

• Updated dependencies [0f677c009, 188eeddd4]:

  • [email protected]

@astrojs/[email protected]

Minor Changes

• #7687 0a1b33349 Thanks @kwhinnery! - Update build target for Deno to esnext to allow supported language features on the runtime.

Patch Changes

• Updated dependencies [0f677c009, 188eeddd4]:
  • [email protected]

[email protected]

Patch Changes

• #7777 3567afac4 Thanks @bluwy! - Fix rendering TextEncoder encoding error regression

• #7759 1792737da Thanks @Princesseuh! - Fix SharedImageService's types not properly reflecting that image services hooks can be async

• #7766 da7f1128b Thanks @Princesseuh! - Fix missing referrerpolicy on ScriptHTMLAttributes

• #7746 0c9959704 Thanks @birkskyum! - Update Vite to 4.4

[email protected]

Patch Changes

• #7756 274e67532 Thanks @matthewp! - Fixes case where there is FOUC caused by stylesheets not loaded

• #7742 e52852628 Thanks @andersk! - Fix parsing image assets from a Markdown line along with other markup.

• #7757 c2d6cfd0c Thanks @matthewp! - Prevent animations when prefers-reduced-motion

• #7750 201d32dcf Thanks @matthewp! - Trigger full page refresh on back nav from page without VT enabled

@astrojs/[email protected]

Patch Changes

• #7718 35a0b6c8a Thanks @lilnasy! - The vercel adapter now Warns when using a deprecated version of Node, and switches to 18 when using an unsupported version.

• Updated dependencies [274e67532, e52852628, c2d6cfd0c, 201d32dcf]:

  • [email protected]

[email protected]

Minor Changes

• #7686 ec745d689 Thanks @matthewp! - Redirects configuration

  This change moves the redirects configuration out of experimental. If you were previously using experimental redirects, remove the following experimental flag:

  experimental: {
    redirects: true,
  }

  If you have been waiting for stabilization before using redirects, now you can do so. Check out the docs on redirects to learn how to use this built-in feature.

• #7707 3a6e42e19 Thanks @ottomated! - Improved hoisted script bundling

  Astro's static analysis to determine which <script> tags to bundle together just got a little smarter!

  Astro create bundles that optimize script usage between pages and place them in the head of the document so that they are downloaded as early as possible. One limitation to Astro's existing approach has been that you could not dynamically use hoisted scripts. Each page received the same, all-inclusive bundle whether or not every script was needed on that page.

  Now, Astro has improved the static analysis to take into account the actual imports used.

  For example, Astro would previously bundle the <script>s from both the <Tab> and <Accordian> component for the following library that re-exports multiple components:

  @matthewp/my-astro-lib

  export { default as Tabs } from './Tabs.astro';
  export { default as Accordion } from './Accordion.astro';

  Now, when an Astro page only uses a single component, Astro will send only the necessary script to the page. A page that only imports the <Accordian> component will not receive any <Tab> component's scripts:

  ---
  import { Accordion } from '@matthewp/my-astro-lib';
  ---

  You should now see more efficient performance with Astro now supporting this common library re-export pattern.

• #7511 6a12fcecb Thanks @matthewp! - Built-in View Transitions Support (experimental)

  Astro now supports view transitions through the new <ViewTransitions /> component and the transition:animate (and associated) directives. View transitions are a great fit for content-oriented sites, and we see it as the best path to get the benefits of client-side routing (smoother transitions) without sacrificing the more simple mental model of MPAs.

  Enable support for view transitions in Astro 2.9 by adding the experimental flag to your config:

  import { defineConfig } from 'astro/config';
  
  export default defineConfig({
    experimental: {
      viewTransitions: true,
    },
  });

  This enables you to use the new APIs added.

  This is a component which acts as the router for transitions between pages. Add it to the <head> section of each individual page where transitions should occur in the client as you navigate away to another page, instead of causing a full page browser refresh. To enable support throughout your entire app, add the component in some common layout or component that targets the <head> of every page.

  CommonHead.astro

  ---
  import { ViewTransitions } from 'astro:transitions';
  ---
  
  <meta charset="utf-8" />
  <title>{Astro.props.title}</title>
  <ViewTransitions />

  With only this change, your app will now route completely in-client. You can then add transitions to individual elements using the transition:animate directive.

  Animations

  Add transition:animate to any element to use Astro's built-in animations.

  <header transition:animate="slide"></header>

  In the above, Astro's slide animation will cause the <header> element to slide out to the left, and then slide in from the right when you navigate away from the page.

  You can also customize these animations using any CSS animation properties, for example, by specifying a duration:

  ---
  import { slide } from 'astro:transition';
  ---
  
  <header transition:animate={slide({ duration: 200 })}></header>

  Continue learning

  Check out the client-side routing docs to learn more.

Patch Changes

• #7701 019b797bf Thanks @bluwy! - Fix redirects map object-form value validation

• #7704 d78db48ac Thanks @bluwy! - Fix absolute path handling when passing root, srcDir, publicDir, outDir, cacheDir, build.client, and build.server configs in Windows

• #7713 d088351f5 Thanks @natemoo-re! - Update warning when getStaticPaths is detected but a route is not prerendered.

@astrojs/[email protected]

Patch Changes

• #7722 77ffcc8f8 Thanks @natemoo-re! - Ensure nested 404 and 500 pages are always excluded