astro

Minor Changes

• #8502 c4270e476 Thanks @bluwy! - Updates the internal shiki syntax highlighter to shikiji, an ESM-focused alternative that simplifies bundling and maintenance.

  There are no new options and no changes to how you author code blocks and syntax highlighting.

  Potentially breaking change: While this refactor should be transparent for most projects, the transition to shikiji now produces a smaller HTML markup by attaching a fallback color style to the pre or code element, instead of to the line span directly. For example:

  Before:

  <code class="astro-code" style="background-color: #24292e">
    <pre>
      <span class="line" style="color: #e1e4e8">my code</span>
    </pre>
  </code>
  

  After:

  <code class="astro-code" style="background-color: #24292e; color: #e1e4e8">
    <pre>
      <span class="line">my code<span>
    </pre>
  </code>
  

  This does not affect the colors as the span will inherit the color from the parent, but if you're relying on a specific HTML markup, please check your site carefully after upgrading to verify the styles.

Patch Changes

• Updated dependencies [2993055be, c4270e476, bd5aa1cd3, f369fa250, 391729686, f999365b8, b2ae9ee0c, 0abff97fe, 3bef32f81]:
  • [email protected]

Patch Changes

• #8782 75781643a Thanks @helloimalastair! - fixes AdvancedRuntime & DirectoryRuntime types to work woth Cloudflare caches

• Updated dependencies [2993055be, c4270e476, bd5aa1cd3, f369fa250, 391729686, f999365b8, b2ae9ee0c, 0abff97fe, 3bef32f81]:

  • [email protected]
  • @astrojs/[email protected]

Minor Changes

• #8808 2993055be Thanks @delucis! - Adds support for an --outDir CLI flag to astro build

• #8502 c4270e476 Thanks @bluwy! - Updates the internal shiki syntax highlighter to shikiji, an ESM-focused alternative that simplifies bundling and maintenance.

  There are no new options and no changes to how you author code blocks and syntax highlighting.

  Potentially breaking change: While this refactor should be transparent for most projects, the transition to shikiji now produces a smaller HTML markup by attaching a fallback color style to the pre or code element, instead of to the line span directly. For example:

  Before:

  <code class="astro-code" style="background-color: #24292e">
    <pre>
      <span class="line" style="color: #e1e4e8">my code</span>
    </pre>
  </code>
  

  After:

  <code class="astro-code" style="background-color: #24292e; color: #e1e4e8">
    <pre>
      <span class="line">my code<span>
    </pre>
  </code>
  

  This does not affect the colors as the span will inherit the color from the parent, but if you're relying on a specific HTML markup, please check your site carefully after upgrading to verify the styles.

• #8798 f369fa250 Thanks @Princesseuh! - Fixed tsconfig.json's new array format for extends not working. This was done by migrating Astro to use tsconfck instead of tsconfig-resolver to find and parse tsconfig.json files.

• #8620 b2ae9ee0c Thanks @Princesseuh! - Adds experimental support for generating srcset attributes and a new <Picture /> component.

  srcset support

  Two new properties have been added to Image and getImage(): densities and widths.

  These properties can be used to generate a srcset attribute, either based on absolute widths in pixels (e.g. [300, 600, 900]) or pixel density descriptors (e.g. ["2x"] or [1.5, 2]).

  ---
  import { Image } from 'astro';
  import myImage from './my-image.jpg';
  ---
  
  <Image src={myImage} width={myImage.width / 2} densities={[1.5, 2]} alt="My cool image" />
  

  <img
    src="/_astro/my_image.hash.webp"
    srcset="/_astro/my_image.hash.webp 1.5x, /_astro/my_image.hash.webp 2x"
    alt="My cool image"
  />
  

  Picture component

  The experimental <Picture /> component can be used to generate a <picture> element with multiple <source> elements.

  The example below uses the format property to generate a <source> in each of the specified image formats:

  ---
  import { Picture } from 'astro:assets';
  import myImage from './my-image.jpg';
  ---
  
  <Picture src={myImage} formats={['avif', 'webp']} alt="My super image in multiple formats!" />
  

  The above code will generate the following HTML, and allow the browser to determine the best image to display:

  <picture>
    <source srcset="..." type="image/avif" />
    <source srcset="..." type="image/webp" />
    <img src="..." alt="My super image in multiple formats!" />
  </picture>
  

  The Picture component takes all the same props as the Image component, including the new densities and widths properties.

Patch Changes

• #8771 bd5aa1cd3 Thanks @lilnasy! - Fixed an issue where the transitions router did not work within framework components.

• #8800 391729686 Thanks @lilnasy! - Fixed an issue where attempting to assign a variable onto locals threw an error.

• #8795 f999365b8 Thanks @bluwy! - Fix markdown page charset to be utf-8 by default (same as Astro 2)

• #8810 0abff97fe Thanks @jacobthesheep! - Remove network-information-types package since TypeScript supports Network Information API natively.

• #8813 3bef32f81 Thanks @martrapp! - Save and restore focus for persisted input elements during view transitions

• Updated dependencies [c4270e476]:

  • @astrojs/[email protected]

Patch Changes

• #8638 160d1cd75 Thanks @florian-lefebvre! - The @astrojs/tailwind integration now creates a tailwind.config.mjs file by default

• #8767 30de32436 Thanks @martrapp! - Revert fix #8472

  #8472 caused some style files from previous pages to not be cleanly deleted on view transitions. For a discussion of a future fix for the original issue #8144 see #8745.

• #8741 c4a7ec425 Thanks @lilnasy! - Fixed an issue on Windows where lowercase drive letters in current working directory led to missing scripts and styles.

• #8772 c24f70d91 Thanks @martrapp! - Fix flickering during view transitions

• #8754 93b092266 Thanks @bluwy! - Make CSS chunk names less confusing

• #8776 29cdfa024 Thanks @martrapp! - Fix transition attributes on islands

• #8773 eaed844ea Thanks @sumimakito! - Fix an issue where HTML attributes do not render if getHTMLAttributes in an image service returns a Promise

Patch Changes

• #8766 054c5c644 Thanks @jadbox! - Adds cloudflare:sockets compile support

• #8788 0ab6bad7d Thanks @alexanderniebuhr! - Adds support for node:crypto

• Updated dependencies [160d1cd75, 30de32436, c4a7ec425, c24f70d91, 93b092266, 29cdfa024, eaed844ea]:

  • [email protected]
  • @astrojs/[email protected]

Patch Changes

• #8638 160d1cd75 Thanks @florian-lefebvre! - The @astrojs/tailwind integration now creates a tailwind.config.mjs file by default

• Updated dependencies [160d1cd75, 30de32436, c4a7ec425, c24f70d91, 93b092266, 29cdfa024, eaed844ea]:

  • [email protected]

Patch Changes

• #8710 4c2bec681 Thanks @matthewp! - Fixes View transition styles being missing when component used multiple times

• Updated dependencies [455af3235, 4c2bec681]:

  • [email protected]

Minor Changes

• #8655 3dd65bf88 Thanks @alexanderniebuhr! - Introduces support for local KV bindings. Enhances development experience by allowing direct integration with astro dev.

• #8655 3dd65bf88 Thanks @alexanderniebuhr! - Introduces support for local Durable Objects bindings. Enhances development experience by allowing direct integration with astro dev.

• #8655 3dd65bf88 Thanks @alexanderniebuhr! - Introduces support for local D1 bindings. Enhances development experience by allowing direct integration with astro dev.

• #8655 3dd65bf88 Thanks @alexanderniebuhr! - Introduces support for local R2 bindings. Enhances development experience by allowing direct integration with astro dev.

• #8655 3dd65bf88 Thanks @alexanderniebuhr! - Introduces support for local Caches bindings. Enhances development experience by allowing direct integration with astro dev.

Patch Changes

• Updated dependencies [455af3235, 4c2bec681]:
  • [email protected]
  • @astrojs/[email protected]

Patch Changes

• #8724 455af3235 Thanks @bluwy! - Fix CSS styles on Windows

• #8710 4c2bec681 Thanks @matthewp! - Fixes View transition styles being missing when component used multiple times

Patch Changes

• #8698 47ea310f0 Thanks @Princesseuh! - Use a Node-specific image endpoint to resolve images in dev and Node SSR. This should fix many issues related to getting 404 from the _image endpoint under certain configurations

• Updated dependencies [31c59ad8b, 47ea310f0, 345808170]:

  • [email protected]

Minor Changes

• #8682 c3572fd5e Thanks @dario-piotrowicz! - Change build target from es2020 to es2022, for better support

Patch Changes

• Updated dependencies [31c59ad8b, 47ea310f0, 345808170]:
  • [email protected]
  • @astrojs/[email protected]

Patch Changes

• #8680 31c59ad8b Thanks @bluwy! - Fix hydration on slow connection

• #8698 47ea310f0 Thanks @Princesseuh! - Use a Node-specific image endpoint to resolve images in dev and Node SSR. This should fix many issues related to getting 404 from the _image endpoint under certain configurations

• #8706 345808170 Thanks @bluwy! - Fix duplicated Astro and Vite injected styles

Patch Changes

• #7776 f5c617e3a Thanks @aditsachde! - Include generated files starting with a dot in _routes.json

• #8654 f6ba533df Thanks @alexanderniebuhr! - Refactor codebase to enhance code readability and structure, to prioritize maintainability for long-term.

• Updated dependencies [2167ffd72, 408b50c5e, 2167ffd72, 2167ffd72, 2167ffd72, e797b6816, 824dd4670, 2167ffd72, cfd895d87]:

  • [email protected]
  • @astrojs/[email protected]

Minor Changes

• #8696 2167ffd72 Thanks @matthewp! - Support adding integrations dynamically

  Astro integrations can now themselves dynamically add and configure additional integrations during set-up. This makes it possible for integration authors to bundle integrations more intelligently for their users.

  In the following example, a custom integration checks whether @astrojs/sitemap is already configured. If not, the integration adds Astro’s sitemap integration, passing any desired configuration options:

  import sitemap from '@astrojs/sitemap';
  import type { AstroIntegration } from 'astro';
  
  const MyIntegration = (): AstroIntegration => {
    return {
      name: 'my-integration',
  
      'astro:config:setup': ({ config, updateConfig }) => {
        // Look for sitemap in user-configured integrations.
        const userSitemap = config.integrations.find(
          ({ name }) => name === '@astrojs/sitemap'
        );
  
        if (!userSitemap) {
          // If sitemap wasn’t found, add it.
          updateConfig({
            integrations: [sitemap({ /* opts */ }],
          });
        }
      },
    };
  };
  

• #8696 2167ffd72 Thanks @matthewp! - View transitions can now be triggered from JavaScript!

  Import the client-side router from "astro:transitions/client" and enjoy your new remote control for navigation:

  import { navigate } from 'astro:transitions/client';
  
  // Navigate to the selected option automatically.
  document.querySelector('select').onchange = (ev) => {
    let href = ev.target.value;
    navigate(href);
  };
  

• #8696 2167ffd72 Thanks @matthewp! - Route Announcer in <ViewTransitions />

  The View Transitions router now does route announcement. When transitioning between pages with a traditional MPA approach, assistive technologies will announce the page title when the page finishes loading. This does not automatically happen during client-side routing, so visitors relying on these technologies to announce routes are not aware when a page has changed.

  The view transitions route announcer runs after the astro:page-load event, looking for the page <title> to announce. If one cannot be found, the announcer falls back to the first <h1> it finds, or otherwise announces the pathname. We recommend you always include a <title> in each page for accessibility.

  See the View Transitions docs for more on how accessibility is handled.

Patch Changes

• #8647 408b50c5e Thanks @lilnasy! - Fixed an issue where configured redirects with dynamic routes did not work in dev mode.

• #8696 2167ffd72 Thanks @matthewp! - Fix logLevel passed to Vite build

• #8696 2167ffd72 Thanks @matthewp! - Fix NoImageMetadata image path error message

• #8670 e797b6816 Thanks @MichailiK! - Fix asset optimization failing when outDir is outside the project directory

• #8684 824dd4670 Thanks @matthewp! - Support content collections with % in filename

• #8648 cfd895d87 Thanks @lilnasy! - Fixed an issue where a response with status code 404 led to an endless loop of implicit rerouting in dev mode.

Patch Changes

• #8661 008f7647c Thanks @Skn0tt! - fix build failures because of CJS builds and top-level await

• Updated dependencies [69fbf95b2]:

  • [email protected]
  • @astrojs/[email protected]

Patch Changes

• #8652 954cadc1e Thanks @lilnasy! - Fixed an issue where deno integration broke some frameworks.

• Updated dependencies [69fbf95b2]:

  • [email protected]

Patch Changes

• #8646 69fbf95b2 Thanks @matthewp! - Fix cases of head propagation not occuring in dev server

Minor Changes

• #8459 2365c1246 Thanks @schummar! - Adds three new config options for _routes.json generation: routes.strategy, routes.include, and routes.exclude.

• #8542 faeead423 Thanks @adrianlyjak! - Add support for loading wasm modules in the cloudflare adapter

Patch Changes

• Updated dependencies [863f5171e, 63141f3f3, 974d5117a, cb838b84b, f36c4295b, 4c4ad9d16]:
  • [email protected]
  • @astrojs/[email protected]

Patch Changes

• #8634 b64dd45c0 Thanks @TheOtterlord! - Fix --yes behaviour to prevent it overriding --template

Patch Changes

• #8591 863f5171e Thanks @rishi-raj-jain! - add site url to the location of redirect

• #8633 63141f3f3 Thanks @Princesseuh! - Fix build not working when having multiple images in the same Markdown file

• #8636 974d5117a Thanks @martrapp! - fix: no deletion of scripts during view transition

• #8645 cb838b84b Thanks @matthewp! - Fix getDataEntryById to lookup by basename

• #8640 f36c4295b Thanks @matthewp! - Warn on empty content collections

• #8615 4c4ad9d16 Thanks @alexanderniebuhr! - Improve the logging of assets for adapters that do not support image optimization