astro 3.3.0

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

astro 3.3.0

Minor Changes

srcset support

Picture component

Patch Changes

`srcset` support