withastro/astro astro@3.3.0

on GitHub

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/markdown-remark@3.3.0