diff --git a/.changeset/breezy-pianos-slide.md b/.changeset/breezy-pianos-slide.md deleted file mode 100644 index 5ad26cb61346..000000000000 --- a/.changeset/breezy-pianos-slide.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -'@astrojs/cloudflare': minor ---- - -Adds new configuration options to allow you to set a custom `workerEntryPoint` for Cloudflare Workers. This is useful if you want to use features that require handlers (e.g. Durable Objects, Cloudflare Queues, Scheduled Invocations) not supported by the basic generic entry file. - -This feature is not supported when running the Astro dev server. However, you can run `astro build` followed by either `wrangler deploy` (to deploy it) or `wrangler dev` to preview it. - -The following example configures a custom entry file that registers a Durable Object and a queue handler: - -```ts -// astro.config.ts -import cloudflare from '@astrojs/cloudflare'; -import { defineConfig } from 'astro/config'; - -export default defineConfig({ - adapter: cloudflare({ - workerEntryPoint: { - path: 'src/worker.ts', - namedExports: ['MyDurableObject'] - } - }), -}); -``` - -```ts -// src/worker.ts -import type { SSRManifest } from 'astro'; - -import { App } from 'astro/app'; -import { handle } from '@astrojs/cloudflare/handler' -import { DurableObject } from 'cloudflare:workers'; - -class MyDurableObject extends DurableObject { - constructor(ctx: DurableObjectState, env: Env) { - super(ctx, env) - } -} - -export function createExports(manifest: SSRManifest) { - const app = new App(manifest); - return { - default: { - async fetch(request, env, ctx) { - await env.MY_QUEUE.send("log"); - return handle(manifest, app, request, env, ctx); - }, - async queue(batch, _env) { - let messages = JSON.stringify(batch.messages); - console.log(`consumed from our queue: ${messages}`); - } - } satisfies ExportedHandler, - MyDurableObject, - } -} -``` diff --git a/.changeset/curly-masks-retire.md b/.changeset/curly-masks-retire.md deleted file mode 100644 index b5275828c38d..000000000000 --- a/.changeset/curly-masks-retire.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -'@astrojs/vercel': minor ---- - -Adds support for the [experimental static headers Astro feature](https://docs.astro.build/en/reference/adapter-reference/#experimentalstaticheaders). - -When the feature is enabled via option `experimentalStaticHeaders`, and [experimental Content Security Policy](https://docs.astro.build/en/reference/experimental-flags/csp/) is enabled, the adapter will generate `Response` headers for static pages, which allows support for CSP directives that are not supported inside a `` tag (e.g. `frame-ancestors`). - -```js -import { defineConfig } from "astro/config"; -import vercel from "@astrojs/vercel"; - -export default defineConfig({ - adapter: vercel({ - experimentalStaticHeaders: true - }), - experimental: { - cps: true - } -}) -``` diff --git a/.changeset/early-bees-write.md b/.changeset/early-bees-write.md deleted file mode 100644 index 2a8175948b60..000000000000 --- a/.changeset/early-bees-write.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'astro': patch ---- - -Fixes an issue where `report-uri` wasn't available in `experimental.csp.directives`, causing a typing error and a runtime validation error. diff --git a/.changeset/khaki-cloths-repair.md b/.changeset/khaki-cloths-repair.md deleted file mode 100644 index fd74a17eb9e4..000000000000 --- a/.changeset/khaki-cloths-repair.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -'astro': minor ---- - -Adds a new `priority` attribute for Astro's image components. - -This change introduces a new `priority` option for the `` and `` components, which automatically sets the `loading`, `decoding`, and `fetchpriority` attributes to their optimal values for above-the-fold images which should be loaded immediately. - -It is a boolean prop, and you can use the shorthand syntax by simply adding `priority` as a prop to the `` or `` component. When set, it will apply the following attributes: - -- `loading="eager"` -- `decoding="sync"` -- `fetchpriority="high"` - -The individual attributes can still be set manually if you need to customize your images further. - -By default, the Astro [`` component](https://docs.astro.build/en/guides/images/#display-optimized-images-with-the-image--component) generates `` tags that lazy-load their content by setting `loading="lazy"` and `decoding="async"`. This improves performance by deferring the loading of images that are not immediately visible in the viewport, and gives the best scores in performance audits like Lighthouse. - -The new `priority` attribute will override those defaults and automatically add the best settings for your high-priority assets. - -This option was previously available for experimental responsive images, but now it is a standard feature for all images. - -## Usage - -```astro -An example image -``` - -> [!Note] -> You should only use the `priority` option for images that are critical to the initial rendering of the page, and ideally only one image per page. This is often an image identified as the [LCP element](https://web.dev/articles/lcp) when running Lighthouse tests. Using it for too many images will lead to performance issues, as it forces the browser to load those images immediately, potentially blocking the rendering of other content. diff --git a/.changeset/mean-gifts-know.md b/.changeset/mean-gifts-know.md deleted file mode 100644 index 1ff213fbe251..000000000000 --- a/.changeset/mean-gifts-know.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -'astro': minor -'@astrojs/vercel': patch ---- - -The responsive images feature introduced behind a flag in [v5.0.0](https://github.com/withastro/astro/blob/main/packages/astro/CHANGELOG.md#500) is no longer experimental and is available for general use. - -The new responsive images feature in Astro automatically generates optimized images for different screen sizes and resolutions, and applies the correct attributes to ensure that images are displayed correctly on all devices. - -Enable the `image.responsiveStyles` option in your Astro config. Then, set a `layout` attribute on any or component, or configure a default `image.layout`, for instantly responsive images with automatically generated `srcset` and `sizes` attributes based on the image's dimensions and the layout type. - -Displaying images correctly on the web can be challenging, and is one of the most common performance issues seen in sites. This new feature simplifies the most challenging part of the process: serving your site visitor an image optimized for their viewing experience, and for your website's performance. - -For full details, see the updated [Image guide](https://docs.astro.build/en/guides/images/#responsive-image-behavior). - -## Migration from Experimental Responsive Images - -The `experimental.responsiveImages` flag has been removed, and all experimental image configuration options have been renamed to their final names. - -If you were using the experimental responsive images feature, you'll need to update your configuration: - -### Remove the experimental flag - -```diff -export default defineConfig({ - experimental: { -- responsiveImages: true, - }, -}); -``` - -### Update image configuration options - -During the experimental phase, default styles were applied automatically to responsive images. Now, you need to explicitly set the `responsiveStyles` option to `true` if you want these styles applied. - -```diff -export default defineConfig({ - image: { -+ responsiveStyles: true, - }, -}); -``` - -The experimental image configuration options have been renamed: - -**Before:** -```js -export default defineConfig({ - image: { - experimentalLayout: 'constrained', - experimentalObjectFit: 'cover', - experimentalObjectPosition: 'center', - experimentalBreakpoints: [640, 750, 828, 1080, 1280], - experimentalDefaultStyles: true, - }, - experimental: { - responsiveImages: true, - }, -}); -``` - -**After:** -```js -export default defineConfig({ - image: { - layout: 'constrained', - objectFit: 'cover', - objectPosition: 'center', - breakpoints: [640, 750, 828, 1080, 1280], - responsiveStyles: true, // This is now *false* by default - }, -}); -``` - -### Component usage remains the same - -The `layout`, `fit`, and `position` props on `` and `` components work exactly the same as before: - -```astro -A responsive image -``` - -If you weren't using the experimental responsive images feature, no changes are required. - -Please see the [Image guide](https://docs.astro.build/en/guides/images/#responsive-image-behavior) for more information on using responsive images in Astro. diff --git a/.changeset/pretty-doodles-wash.md b/.changeset/pretty-doodles-wash.md deleted file mode 100644 index 05139e3d46fc..000000000000 --- a/.changeset/pretty-doodles-wash.md +++ /dev/null @@ -1,80 +0,0 @@ ---- -'astro': minor ---- - -Adds experimental support for live content collections - -Live content collections are a new type of [content collection](https://docs.astro.build/en/guides/content-collections/) that fetch their data at runtime rather than build time. This allows you to access frequently-updated data from CMSs, APIs, databases, or other sources using a unified API, without needing to rebuild your site when the data changes. - -## Live collections vs build-time collections - -In Astro 5.0, the content layer API added support for adding diverse content sources to content collections. You can create loaders that fetch data from any source at build time, and then access it inside a page via `getEntry()` and `getCollection()`. The data is cached between builds, giving fast access and updates. - -However there is no method for updating the data store between builds, meaning any updates to the data need a full site deploy, even if the pages are rendered on-demand. This means that content collections are not suitable for pages that update frequently. Instead, today these pages tend to access the APIs directly in the frontmatter. This works, but leads to a lot of boilerplate, and means users don't benefit from the simple, unified API that content loaders offer. In most cases users tend to individually create loader libraries that they share between pages. - -Live content collections solve this problem by allowing you to create loaders that fetch data at runtime, rather than build time. This means that the data is always up-to-date, without needing to rebuild the site. - -## How to use - -To enable live collections add the `experimental.liveContentCollections` flag to your `astro.config.mjs` file: - -```js title="astro.config.mjs" -{ - experimental: { - liveContentCollections: true, - }, -} -``` - -Then create a new `src/live.config.ts` file (alongside your `src/content.config.ts` if you have one) to define your live collections with a [live loader](https://docs.astro.build/en/reference/experimental-flags/live-content-collections/#creating-a-live-loader) and optionally a [schema](https://docs.astro.build/en/reference/experimental-flags/live-content-collections/#using-zod-schemas) using the new `defineLiveCollection()` function from the `astro:content` module. - -```ts title="src/live.config.ts" -import { defineLiveCollection } from 'astro:content'; -import { storeLoader } from '@mystore/astro-loader'; - -const products = defineLiveCollection({ - type: 'live', - loader: storeLoader({ - apiKey: process.env.STORE_API_KEY, - endpoint: 'https://api.mystore.com/v1', - }), -}); - -export const collections = { products }; -``` - -You can then use the dedicated `getLiveCollection()` and `getLiveEntry()` functions to access your live data: - -```astro ---- -import { getLiveCollection, getLiveEntry, render } from 'astro:content'; - -// Get all products -const { entries: allProducts, error } = await getLiveCollection('products'); -if (error) { - // Handle error appropriately - console.error(error.message); -} - -// Get products with a filter (if supported by your loader) -const { entries: electronics } = await getLiveCollection('products', { category: 'electronics' }); - -// Get a single product by ID (string syntax) -const { entry: product, error: productError } = await getLiveEntry('products', Astro.params.id); -if (productError) { - return Astro.redirect('/404'); -} - -// Get a single product with a custom query (if supported by your loader) using a filter object -const { entry: productBySlug } = await getLiveEntry('products', { slug: Astro.params.slug }); - -const { Content } = await render(product); - ---- - -

{product.title}

- - -``` - -See [the docs for the experimental live content collections feature](https://docs.astro.build/en/reference/experimental-flags/live-content-collections/) for more details on how to use this feature, including how to create a live loader. Please give feedback on [the RFC PR](https://github.com/withastro/roadmap/pull/1164) if you have any suggestions or issues. diff --git a/.changeset/shaggy-singers-argue.md b/.changeset/shaggy-singers-argue.md deleted file mode 100644 index b61fac02693e..000000000000 --- a/.changeset/shaggy-singers-argue.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'astro': patch ---- - -Fixes a type error for the CSP directives `upgrade-insecure-requests`, `sandbox`, and `trusted-type`. diff --git a/.changeset/sixty-nights-drive.md b/.changeset/sixty-nights-drive.md deleted file mode 100644 index d3e132daa5b3..000000000000 --- a/.changeset/sixty-nights-drive.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'astro': patch ---- - -Fixes a case where the dev toolbar would crash if it could not retrieve some essential data diff --git a/.changeset/stale-donkeys-bake.md b/.changeset/stale-donkeys-bake.md deleted file mode 100644 index 80197249d0aa..000000000000 --- a/.changeset/stale-donkeys-bake.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'astro': patch ---- - -Fixes a case where Astro Actions types would be broken when using a `tsconfig.json` with `"moduleResolution": "nodenext"` diff --git a/.changeset/tall-buses-rest.md b/.changeset/tall-buses-rest.md deleted file mode 100644 index 0b7cff30e7d5..000000000000 --- a/.changeset/tall-buses-rest.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@astrojs/cloudflare': patch ---- - -Fixes a case where the platform proxy would not be disposed when the dev process ended diff --git a/examples/basics/package.json b/examples/basics/package.json index 87f02244ae72..b7f799c5cb51 100644 --- a/examples/basics/package.json +++ b/examples/basics/package.json @@ -10,6 +10,6 @@ "astro": "astro" }, "dependencies": { - "astro": "^5.9.4" + "astro": "^5.10.0" } } diff --git a/examples/blog/package.json b/examples/blog/package.json index 13da06747698..58682ba79d51 100644 --- a/examples/blog/package.json +++ b/examples/blog/package.json @@ -13,7 +13,7 @@ "@astrojs/mdx": "^4.3.0", "@astrojs/rss": "^4.0.12", "@astrojs/sitemap": "^3.4.1", - "astro": "^5.9.4", + "astro": "^5.10.0", "sharp": "^0.34.2" } } diff --git a/examples/component/package.json b/examples/component/package.json index a9dd4bf58054..f8af92a3788a 100644 --- a/examples/component/package.json +++ b/examples/component/package.json @@ -15,7 +15,7 @@ ], "scripts": {}, "devDependencies": { - "astro": "^5.9.4" + "astro": "^5.10.0" }, "peerDependencies": { "astro": "^4.0.0 || ^5.0.0" diff --git a/examples/container-with-vitest/package.json b/examples/container-with-vitest/package.json index f51ddca64d92..a2b8ff1ff514 100644 --- a/examples/container-with-vitest/package.json +++ b/examples/container-with-vitest/package.json @@ -12,7 +12,7 @@ }, "dependencies": { "@astrojs/react": "^4.3.0", - "astro": "^5.9.4", + "astro": "^5.10.0", "react": "^18.3.1", "react-dom": "^18.3.1", "vitest": "^3.1.1" diff --git a/examples/framework-alpine/package.json b/examples/framework-alpine/package.json index f6fe68cbfb28..94c4d800f24e 100644 --- a/examples/framework-alpine/package.json +++ b/examples/framework-alpine/package.json @@ -13,6 +13,6 @@ "@astrojs/alpinejs": "^0.4.8", "@types/alpinejs": "^3.13.11", "alpinejs": "^3.14.9", - "astro": "^5.9.4" + "astro": "^5.10.0" } } diff --git a/examples/framework-multiple/package.json b/examples/framework-multiple/package.json index b86bd58efc70..c8680fe2fbc1 100644 --- a/examples/framework-multiple/package.json +++ b/examples/framework-multiple/package.json @@ -17,7 +17,7 @@ "@astrojs/vue": "^5.1.0", "@types/react": "^18.3.20", "@types/react-dom": "^18.3.6", - "astro": "^5.9.4", + "astro": "^5.10.0", "preact": "^10.26.5", "react": "^18.3.1", "react-dom": "^18.3.1", diff --git a/examples/framework-preact/package.json b/examples/framework-preact/package.json index 28fa401ae6bf..1d9b94729b3a 100644 --- a/examples/framework-preact/package.json +++ b/examples/framework-preact/package.json @@ -12,7 +12,7 @@ "dependencies": { "@astrojs/preact": "^4.1.0", "@preact/signals": "^2.0.3", - "astro": "^5.9.4", + "astro": "^5.10.0", "preact": "^10.26.5" } } diff --git a/examples/framework-react/package.json b/examples/framework-react/package.json index 149d94ca0069..4a1692da5211 100644 --- a/examples/framework-react/package.json +++ b/examples/framework-react/package.json @@ -13,7 +13,7 @@ "@astrojs/react": "^4.3.0", "@types/react": "^18.3.20", "@types/react-dom": "^18.3.6", - "astro": "^5.9.4", + "astro": "^5.10.0", "react": "^18.3.1", "react-dom": "^18.3.1" } diff --git a/examples/framework-solid/package.json b/examples/framework-solid/package.json index d5e5f33af968..0bd36f6cf02c 100644 --- a/examples/framework-solid/package.json +++ b/examples/framework-solid/package.json @@ -11,7 +11,7 @@ }, "dependencies": { "@astrojs/solid-js": "^5.1.0", - "astro": "^5.9.4", + "astro": "^5.10.0", "solid-js": "^1.9.5" } } diff --git a/examples/framework-svelte/package.json b/examples/framework-svelte/package.json index 552b46ea510a..6f14466f2a20 100644 --- a/examples/framework-svelte/package.json +++ b/examples/framework-svelte/package.json @@ -11,7 +11,7 @@ }, "dependencies": { "@astrojs/svelte": "^7.1.0", - "astro": "^5.9.4", + "astro": "^5.10.0", "svelte": "^5.25.7" } } diff --git a/examples/framework-vue/package.json b/examples/framework-vue/package.json index 1cd7adcaa987..99fb8bd1163e 100644 --- a/examples/framework-vue/package.json +++ b/examples/framework-vue/package.json @@ -11,7 +11,7 @@ }, "dependencies": { "@astrojs/vue": "^5.1.0", - "astro": "^5.9.4", + "astro": "^5.10.0", "vue": "^3.5.13" } } diff --git a/examples/hackernews/package.json b/examples/hackernews/package.json index 2fdb8878733f..718a379ccda1 100644 --- a/examples/hackernews/package.json +++ b/examples/hackernews/package.json @@ -11,6 +11,6 @@ }, "dependencies": { "@astrojs/node": "^9.2.2", - "astro": "^5.9.4" + "astro": "^5.10.0" } } diff --git a/examples/integration/package.json b/examples/integration/package.json index ad342f3e00f9..642b00558a1c 100644 --- a/examples/integration/package.json +++ b/examples/integration/package.json @@ -15,7 +15,7 @@ ], "scripts": {}, "devDependencies": { - "astro": "^5.9.4" + "astro": "^5.10.0" }, "peerDependencies": { "astro": "^4.0.0" diff --git a/examples/minimal/package.json b/examples/minimal/package.json index 647bcfb286ac..885e306e07c1 100644 --- a/examples/minimal/package.json +++ b/examples/minimal/package.json @@ -10,6 +10,6 @@ "astro": "astro" }, "dependencies": { - "astro": "^5.9.4" + "astro": "^5.10.0" } } diff --git a/examples/portfolio/package.json b/examples/portfolio/package.json index 0a740b37af13..6f74d62290fa 100644 --- a/examples/portfolio/package.json +++ b/examples/portfolio/package.json @@ -10,6 +10,6 @@ "astro": "astro" }, "dependencies": { - "astro": "^5.9.4" + "astro": "^5.10.0" } } diff --git a/examples/ssr/package.json b/examples/ssr/package.json index f580e9dc6411..b901a0cc03f0 100644 --- a/examples/ssr/package.json +++ b/examples/ssr/package.json @@ -13,7 +13,7 @@ "dependencies": { "@astrojs/node": "^9.2.2", "@astrojs/svelte": "^7.1.0", - "astro": "^5.9.4", + "astro": "^5.10.0", "svelte": "^5.25.7" } } diff --git a/examples/starlog/package.json b/examples/starlog/package.json index 71aef21ace37..381a476ce7e1 100644 --- a/examples/starlog/package.json +++ b/examples/starlog/package.json @@ -9,7 +9,7 @@ "astro": "astro" }, "dependencies": { - "astro": "^5.9.4", + "astro": "^5.10.0", "sass": "^1.86.3", "sharp": "^0.33.3" } diff --git a/examples/toolbar-app/package.json b/examples/toolbar-app/package.json index 3ca00fb725ab..9f0f6ea8d0c8 100644 --- a/examples/toolbar-app/package.json +++ b/examples/toolbar-app/package.json @@ -16,6 +16,6 @@ }, "devDependencies": { "@types/node": "^18.17.8", - "astro": "^5.9.4" + "astro": "^5.10.0" } } diff --git a/examples/with-markdoc/package.json b/examples/with-markdoc/package.json index 25e77a98aa7f..efde96af4bc2 100644 --- a/examples/with-markdoc/package.json +++ b/examples/with-markdoc/package.json @@ -11,6 +11,6 @@ }, "dependencies": { "@astrojs/markdoc": "^0.15.0", - "astro": "^5.9.4" + "astro": "^5.10.0" } } diff --git a/examples/with-mdx/package.json b/examples/with-mdx/package.json index deef9f7985b9..53ce07f4dd65 100644 --- a/examples/with-mdx/package.json +++ b/examples/with-mdx/package.json @@ -12,7 +12,7 @@ "dependencies": { "@astrojs/mdx": "^4.3.0", "@astrojs/preact": "^4.1.0", - "astro": "^5.9.4", + "astro": "^5.10.0", "preact": "^10.26.5" } } diff --git a/examples/with-nanostores/package.json b/examples/with-nanostores/package.json index 186fe0459300..c857829db5fa 100644 --- a/examples/with-nanostores/package.json +++ b/examples/with-nanostores/package.json @@ -12,7 +12,7 @@ "dependencies": { "@astrojs/preact": "^4.1.0", "@nanostores/preact": "^0.5.2", - "astro": "^5.9.4", + "astro": "^5.10.0", "nanostores": "^0.11.4", "preact": "^10.26.5" } diff --git a/examples/with-tailwindcss/package.json b/examples/with-tailwindcss/package.json index c31be204b4e2..6df5c6c79c11 100644 --- a/examples/with-tailwindcss/package.json +++ b/examples/with-tailwindcss/package.json @@ -13,7 +13,7 @@ "@astrojs/mdx": "^4.3.0", "@tailwindcss/vite": "^4.1.3", "@types/canvas-confetti": "^1.9.0", - "astro": "^5.9.4", + "astro": "^5.10.0", "canvas-confetti": "^1.9.3", "tailwindcss": "^4.1.3" } diff --git a/examples/with-vitest/package.json b/examples/with-vitest/package.json index b0defd9d0fc6..5df7b89a1abf 100644 --- a/examples/with-vitest/package.json +++ b/examples/with-vitest/package.json @@ -11,7 +11,7 @@ "test": "vitest" }, "dependencies": { - "astro": "^5.9.4", + "astro": "^5.10.0", "vitest": "^3.1.1" } } diff --git a/packages/astro/CHANGELOG.md b/packages/astro/CHANGELOG.md index c7214613255d..147be2114760 100644 --- a/packages/astro/CHANGELOG.md +++ b/packages/astro/CHANGELOG.md @@ -1,5 +1,210 @@ # astro +## 5.10.0 + +### Minor Changes + +- [#13917](https://github.com/withastro/astro/pull/13917) [`e615216`](https://github.com/withastro/astro/commit/e615216c55bca5d61b8c5c1b49d62671f0238509) Thanks [@ascorbic](https://github.com/ascorbic)! - Adds a new `priority` attribute for Astro's image components. + + This change introduces a new `priority` option for the `` and `` components, which automatically sets the `loading`, `decoding`, and `fetchpriority` attributes to their optimal values for above-the-fold images which should be loaded immediately. + + It is a boolean prop, and you can use the shorthand syntax by simply adding `priority` as a prop to the `` or `` component. When set, it will apply the following attributes: + + - `loading="eager"` + - `decoding="sync"` + - `fetchpriority="high"` + + The individual attributes can still be set manually if you need to customize your images further. + + By default, the Astro [`` component](https://docs.astro.build/en/guides/images/#display-optimized-images-with-the-image--component) generates `` tags that lazy-load their content by setting `loading="lazy"` and `decoding="async"`. This improves performance by deferring the loading of images that are not immediately visible in the viewport, and gives the best scores in performance audits like Lighthouse. + + The new `priority` attribute will override those defaults and automatically add the best settings for your high-priority assets. + + This option was previously available for experimental responsive images, but now it is a standard feature for all images. + + ## Usage + + ```astro + An example image + ``` + + > [!Note] + > You should only use the `priority` option for images that are critical to the initial rendering of the page, and ideally only one image per page. This is often an image identified as the [LCP element](https://web.dev/articles/lcp) when running Lighthouse tests. Using it for too many images will lead to performance issues, as it forces the browser to load those images immediately, potentially blocking the rendering of other content. + +- [#13917](https://github.com/withastro/astro/pull/13917) [`e615216`](https://github.com/withastro/astro/commit/e615216c55bca5d61b8c5c1b49d62671f0238509) Thanks [@ascorbic](https://github.com/ascorbic)! - The responsive images feature introduced behind a flag in [v5.0.0](https://github.com/withastro/astro/blob/main/packages/astro/CHANGELOG.md#500) is no longer experimental and is available for general use. + + The new responsive images feature in Astro automatically generates optimized images for different screen sizes and resolutions, and applies the correct attributes to ensure that images are displayed correctly on all devices. + + Enable the `image.responsiveStyles` option in your Astro config. Then, set a `layout` attribute on any or component, or configure a default `image.layout`, for instantly responsive images with automatically generated `srcset` and `sizes` attributes based on the image's dimensions and the layout type. + + Displaying images correctly on the web can be challenging, and is one of the most common performance issues seen in sites. This new feature simplifies the most challenging part of the process: serving your site visitor an image optimized for their viewing experience, and for your website's performance. + + For full details, see the updated [Image guide](https://docs.astro.build/en/guides/images/#responsive-image-behavior). + + ## Migration from Experimental Responsive Images + + The `experimental.responsiveImages` flag has been removed, and all experimental image configuration options have been renamed to their final names. + + If you were using the experimental responsive images feature, you'll need to update your configuration: + + ### Remove the experimental flag + + ```diff + export default defineConfig({ + experimental: { + - responsiveImages: true, + }, + }); + ``` + + ### Update image configuration options + + During the experimental phase, default styles were applied automatically to responsive images. Now, you need to explicitly set the `responsiveStyles` option to `true` if you want these styles applied. + + ```diff + export default defineConfig({ + image: { + + responsiveStyles: true, + }, + }); + ``` + + The experimental image configuration options have been renamed: + + **Before:** + + ```js + export default defineConfig({ + image: { + experimentalLayout: 'constrained', + experimentalObjectFit: 'cover', + experimentalObjectPosition: 'center', + experimentalBreakpoints: [640, 750, 828, 1080, 1280], + experimentalDefaultStyles: true, + }, + experimental: { + responsiveImages: true, + }, + }); + ``` + + **After:** + + ```js + export default defineConfig({ + image: { + layout: 'constrained', + objectFit: 'cover', + objectPosition: 'center', + breakpoints: [640, 750, 828, 1080, 1280], + responsiveStyles: true, // This is now *false* by default + }, + }); + ``` + + ### Component usage remains the same + + The `layout`, `fit`, and `position` props on `` and `` components work exactly the same as before: + + ```astro + A responsive image + ``` + + If you weren't using the experimental responsive images feature, no changes are required. + + Please see the [Image guide](https://docs.astro.build/en/guides/images/#responsive-image-behavior) for more information on using responsive images in Astro. + +- [#13685](https://github.com/withastro/astro/pull/13685) [`3c04c1f`](https://github.com/withastro/astro/commit/3c04c1f43027e2f9be0854f65c549fa1832f622a) Thanks [@ascorbic](https://github.com/ascorbic)! - Adds experimental support for live content collections + + Live content collections are a new type of [content collection](https://docs.astro.build/en/guides/content-collections/) that fetch their data at runtime rather than build time. This allows you to access frequently-updated data from CMSs, APIs, databases, or other sources using a unified API, without needing to rebuild your site when the data changes. + + ## Live collections vs build-time collections + + In Astro 5.0, the content layer API added support for adding diverse content sources to content collections. You can create loaders that fetch data from any source at build time, and then access it inside a page via `getEntry()` and `getCollection()`. The data is cached between builds, giving fast access and updates. + + However there is no method for updating the data store between builds, meaning any updates to the data need a full site deploy, even if the pages are rendered on-demand. This means that content collections are not suitable for pages that update frequently. Instead, today these pages tend to access the APIs directly in the frontmatter. This works, but leads to a lot of boilerplate, and means users don't benefit from the simple, unified API that content loaders offer. In most cases users tend to individually create loader libraries that they share between pages. + + Live content collections solve this problem by allowing you to create loaders that fetch data at runtime, rather than build time. This means that the data is always up-to-date, without needing to rebuild the site. + + ## How to use + + To enable live collections add the `experimental.liveContentCollections` flag to your `astro.config.mjs` file: + + ```js title="astro.config.mjs" + { + experimental: { + liveContentCollections: true, + }, + } + ``` + + Then create a new `src/live.config.ts` file (alongside your `src/content.config.ts` if you have one) to define your live collections with a [live loader](https://docs.astro.build/en/reference/experimental-flags/live-content-collections/#creating-a-live-loader) and optionally a [schema](https://docs.astro.build/en/reference/experimental-flags/live-content-collections/#using-zod-schemas) using the new `defineLiveCollection()` function from the `astro:content` module. + + ```ts title="src/live.config.ts" + import { defineLiveCollection } from 'astro:content'; + import { storeLoader } from '@mystore/astro-loader'; + + const products = defineLiveCollection({ + type: 'live', + loader: storeLoader({ + apiKey: process.env.STORE_API_KEY, + endpoint: 'https://api.mystore.com/v1', + }), + }); + + export const collections = { products }; + ``` + + You can then use the dedicated `getLiveCollection()` and `getLiveEntry()` functions to access your live data: + + ```astro + --- + import { getLiveCollection, getLiveEntry, render } from 'astro:content'; + + // Get all products + const { entries: allProducts, error } = await getLiveCollection('products'); + if (error) { + // Handle error appropriately + console.error(error.message); + } + + // Get products with a filter (if supported by your loader) + const { entries: electronics } = await getLiveCollection('products', { category: 'electronics' }); + + // Get a single product by ID (string syntax) + const { entry: product, error: productError } = await getLiveEntry('products', Astro.params.id); + if (productError) { + return Astro.redirect('/404'); + } + + // Get a single product with a custom query (if supported by your loader) using a filter object + const { entry: productBySlug } = await getLiveEntry('products', { slug: Astro.params.slug }); + + const { Content } = await render(product); + --- + +

{product.title}

+ + ``` + + See [the docs for the experimental live content collections feature](https://docs.astro.build/en/reference/experimental-flags/live-content-collections/) for more details on how to use this feature, including how to create a live loader. Please give feedback on [the RFC PR](https://github.com/withastro/roadmap/pull/1164) if you have any suggestions or issues. + +### Patch Changes + +- [#13957](https://github.com/withastro/astro/pull/13957) [`304df34`](https://github.com/withastro/astro/commit/304df34b7c4ef69f3f6d93835b7a1e415666ddc9) Thanks [@ematipico](https://github.com/ematipico)! - Fixes an issue where `report-uri` wasn't available in `experimental.csp.directives`, causing a typing error and a runtime validation error. + +- [#13957](https://github.com/withastro/astro/pull/13957) [`304df34`](https://github.com/withastro/astro/commit/304df34b7c4ef69f3f6d93835b7a1e415666ddc9) Thanks [@ematipico](https://github.com/ematipico)! - Fixes a type error for the CSP directives `upgrade-insecure-requests`, `sandbox`, and `trusted-type`. + +- [#13862](https://github.com/withastro/astro/pull/13862) [`fe8f61a`](https://github.com/withastro/astro/commit/fe8f61ab6dafe2c4da6d55db7316cd614927dd07) Thanks [@florian-lefebvre](https://github.com/florian-lefebvre)! - Fixes a case where the dev toolbar would crash if it could not retrieve some essential data + +- [#13976](https://github.com/withastro/astro/pull/13976) [`0a31d99`](https://github.com/withastro/astro/commit/0a31d9912de6b94f4e8fba3c820a00b6861dff19) Thanks [@florian-lefebvre](https://github.com/florian-lefebvre)! - Fixes a case where Astro Actions types would be broken when using a `tsconfig.json` with `"moduleResolution": "nodenext"` + ## 5.9.4 ### Patch Changes diff --git a/packages/astro/package.json b/packages/astro/package.json index 479565d7aa9c..570b106f6914 100644 --- a/packages/astro/package.json +++ b/packages/astro/package.json @@ -1,6 +1,6 @@ { "name": "astro", - "version": "5.9.4", + "version": "5.10.0", "description": "Astro is a modern site builder with web best practices, performance, and DX front-of-mind.", "type": "module", "author": "withastro", diff --git a/packages/integrations/cloudflare/CHANGELOG.md b/packages/integrations/cloudflare/CHANGELOG.md index e7db31490341..cd9707b5e808 100644 --- a/packages/integrations/cloudflare/CHANGELOG.md +++ b/packages/integrations/cloudflare/CHANGELOG.md @@ -1,5 +1,69 @@ # @astrojs/cloudflare +## 12.6.0 + +### Minor Changes + +- [#13837](https://github.com/withastro/astro/pull/13837) [`7cef86f`](https://github.com/withastro/astro/commit/7cef86f9e31c9207620df74a72bfe96db8fa457a) Thanks [@alexanderniebuhr](https://github.com/alexanderniebuhr)! - Adds new configuration options to allow you to set a custom `workerEntryPoint` for Cloudflare Workers. This is useful if you want to use features that require handlers (e.g. Durable Objects, Cloudflare Queues, Scheduled Invocations) not supported by the basic generic entry file. + + This feature is not supported when running the Astro dev server. However, you can run `astro build` followed by either `wrangler deploy` (to deploy it) or `wrangler dev` to preview it. + + The following example configures a custom entry file that registers a Durable Object and a queue handler: + + ```ts + // astro.config.ts + import cloudflare from '@astrojs/cloudflare'; + import { defineConfig } from 'astro/config'; + + export default defineConfig({ + adapter: cloudflare({ + workerEntryPoint: { + path: 'src/worker.ts', + namedExports: ['MyDurableObject'], + }, + }), + }); + ``` + + ```ts + // src/worker.ts + import type { SSRManifest } from 'astro'; + + import { App } from 'astro/app'; + import { handle } from '@astrojs/cloudflare/handler'; + import { DurableObject } from 'cloudflare:workers'; + + class MyDurableObject extends DurableObject { + constructor(ctx: DurableObjectState, env: Env) { + super(ctx, env); + } + } + + export function createExports(manifest: SSRManifest) { + const app = new App(manifest); + return { + default: { + async fetch(request, env, ctx) { + await env.MY_QUEUE.send('log'); + return handle(manifest, app, request, env, ctx); + }, + async queue(batch, _env) { + let messages = JSON.stringify(batch.messages); + console.log(`consumed from our queue: ${messages}`); + }, + } satisfies ExportedHandler, + MyDurableObject, + }; + } + ``` + +### Patch Changes + +- [#13963](https://github.com/withastro/astro/pull/13963) [`c667c55`](https://github.com/withastro/astro/commit/c667c554726102620e0115612a6347ddc0183d08) Thanks [@florian-lefebvre](https://github.com/florian-lefebvre)! - Fixes a case where the platform proxy would not be disposed when the dev process ended + +- Updated dependencies []: + - @astrojs/underscore-redirects@1.0.0 + ## 12.5.5 ### Patch Changes diff --git a/packages/integrations/cloudflare/package.json b/packages/integrations/cloudflare/package.json index 9aaa7f4db8a2..2b4c3e560e14 100644 --- a/packages/integrations/cloudflare/package.json +++ b/packages/integrations/cloudflare/package.json @@ -1,7 +1,7 @@ { "name": "@astrojs/cloudflare", "description": "Deploy your site to Cloudflare Workers/Pages", - "version": "12.5.5", + "version": "12.6.0", "type": "module", "types": "./dist/index.d.ts", "author": "withastro", diff --git a/packages/integrations/vercel/CHANGELOG.md b/packages/integrations/vercel/CHANGELOG.md index 0c7eca2ee670..73a6d44dc295 100644 --- a/packages/integrations/vercel/CHANGELOG.md +++ b/packages/integrations/vercel/CHANGELOG.md @@ -1,5 +1,121 @@ # @astrojs/vercel +## 8.2.0 + +### Minor Changes + +- [#13965](https://github.com/withastro/astro/pull/13965) [`95ece06`](https://github.com/withastro/astro/commit/95ece0663ed160687ef21101f84b2adec0bffd01) Thanks [@ematipico](https://github.com/ematipico)! - Adds support for the [experimental static headers Astro feature](https://docs.astro.build/en/reference/adapter-reference/#experimentalstaticheaders). + + When the feature is enabled via option `experimentalStaticHeaders`, and [experimental Content Security Policy](https://docs.astro.build/en/reference/experimental-flags/csp/) is enabled, the adapter will generate `Response` headers for static pages, which allows support for CSP directives that are not supported inside a `` tag (e.g. `frame-ancestors`). + + ```js + import { defineConfig } from 'astro/config'; + import vercel from '@astrojs/vercel'; + + export default defineConfig({ + adapter: vercel({ + experimentalStaticHeaders: true, + }), + experimental: { + cps: true, + }, + }); + ``` + +### Patch Changes + +- [#13917](https://github.com/withastro/astro/pull/13917) [`e615216`](https://github.com/withastro/astro/commit/e615216c55bca5d61b8c5c1b49d62671f0238509) Thanks [@ascorbic](https://github.com/ascorbic)! - The responsive images feature introduced behind a flag in [v5.0.0](https://github.com/withastro/astro/blob/main/packages/astro/CHANGELOG.md#500) is no longer experimental and is available for general use. + + The new responsive images feature in Astro automatically generates optimized images for different screen sizes and resolutions, and applies the correct attributes to ensure that images are displayed correctly on all devices. + + Enable the `image.responsiveStyles` option in your Astro config. Then, set a `layout` attribute on any or component, or configure a default `image.layout`, for instantly responsive images with automatically generated `srcset` and `sizes` attributes based on the image's dimensions and the layout type. + + Displaying images correctly on the web can be challenging, and is one of the most common performance issues seen in sites. This new feature simplifies the most challenging part of the process: serving your site visitor an image optimized for their viewing experience, and for your website's performance. + + For full details, see the updated [Image guide](https://docs.astro.build/en/guides/images/#responsive-image-behavior). + + ## Migration from Experimental Responsive Images + + The `experimental.responsiveImages` flag has been removed, and all experimental image configuration options have been renamed to their final names. + + If you were using the experimental responsive images feature, you'll need to update your configuration: + + ### Remove the experimental flag + + ```diff + export default defineConfig({ + experimental: { + - responsiveImages: true, + }, + }); + ``` + + ### Update image configuration options + + During the experimental phase, default styles were applied automatically to responsive images. Now, you need to explicitly set the `responsiveStyles` option to `true` if you want these styles applied. + + ```diff + export default defineConfig({ + image: { + + responsiveStyles: true, + }, + }); + ``` + + The experimental image configuration options have been renamed: + + **Before:** + + ```js + export default defineConfig({ + image: { + experimentalLayout: 'constrained', + experimentalObjectFit: 'cover', + experimentalObjectPosition: 'center', + experimentalBreakpoints: [640, 750, 828, 1080, 1280], + experimentalDefaultStyles: true, + }, + experimental: { + responsiveImages: true, + }, + }); + ``` + + **After:** + + ```js + export default defineConfig({ + image: { + layout: 'constrained', + objectFit: 'cover', + objectPosition: 'center', + breakpoints: [640, 750, 828, 1080, 1280], + responsiveStyles: true, // This is now *false* by default + }, + }); + ``` + + ### Component usage remains the same + + The `layout`, `fit`, and `position` props on `` and `` components work exactly the same as before: + + ```astro + A responsive image + ``` + + If you weren't using the experimental responsive images feature, no changes are required. + + Please see the [Image guide](https://docs.astro.build/en/guides/images/#responsive-image-behavior) for more information on using responsive images in Astro. + +- Updated dependencies []: + - @astrojs/underscore-redirects@1.0.0 + ## 8.1.5 ### Patch Changes diff --git a/packages/integrations/vercel/package.json b/packages/integrations/vercel/package.json index 7ad14a20dbea..59dd196a6f12 100644 --- a/packages/integrations/vercel/package.json +++ b/packages/integrations/vercel/package.json @@ -1,7 +1,7 @@ { "name": "@astrojs/vercel", "description": "Deploy your site to Vercel", - "version": "8.1.5", + "version": "8.2.0", "type": "module", "author": "withastro", "license": "MIT", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 47ceb82c4ab9..8444d54e4ecf 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -145,7 +145,7 @@ importers: examples/basics: dependencies: astro: - specifier: ^5.9.4 + specifier: ^5.10.0 version: link:../../packages/astro examples/blog: @@ -160,7 +160,7 @@ importers: specifier: ^3.4.1 version: link:../../packages/integrations/sitemap astro: - specifier: ^5.9.4 + specifier: ^5.10.0 version: link:../../packages/astro sharp: specifier: ^0.34.2 @@ -169,7 +169,7 @@ importers: examples/component: devDependencies: astro: - specifier: ^5.9.4 + specifier: ^5.10.0 version: link:../../packages/astro examples/container-with-vitest: @@ -178,7 +178,7 @@ importers: specifier: ^4.3.0 version: link:../../packages/integrations/react astro: - specifier: ^5.9.4 + specifier: ^5.10.0 version: link:../../packages/astro react: specifier: ^18.3.1 @@ -209,7 +209,7 @@ importers: specifier: ^3.14.9 version: 3.14.9 astro: - specifier: ^5.9.4 + specifier: ^5.10.0 version: link:../../packages/astro examples/framework-multiple: @@ -236,7 +236,7 @@ importers: specifier: ^18.3.6 version: 18.3.7(@types/react@18.3.23) astro: - specifier: ^5.9.4 + specifier: ^5.10.0 version: link:../../packages/astro preact: specifier: ^10.26.5 @@ -266,7 +266,7 @@ importers: specifier: ^2.0.3 version: 2.2.0(preact@10.26.8) astro: - specifier: ^5.9.4 + specifier: ^5.10.0 version: link:../../packages/astro preact: specifier: ^10.26.5 @@ -284,7 +284,7 @@ importers: specifier: ^18.3.6 version: 18.3.7(@types/react@18.3.23) astro: - specifier: ^5.9.4 + specifier: ^5.10.0 version: link:../../packages/astro react: specifier: ^18.3.1 @@ -299,7 +299,7 @@ importers: specifier: ^5.1.0 version: link:../../packages/integrations/solid astro: - specifier: ^5.9.4 + specifier: ^5.10.0 version: link:../../packages/astro solid-js: specifier: ^1.9.5 @@ -311,7 +311,7 @@ importers: specifier: ^7.1.0 version: link:../../packages/integrations/svelte astro: - specifier: ^5.9.4 + specifier: ^5.10.0 version: link:../../packages/astro svelte: specifier: ^5.25.7 @@ -323,7 +323,7 @@ importers: specifier: ^5.1.0 version: link:../../packages/integrations/vue astro: - specifier: ^5.9.4 + specifier: ^5.10.0 version: link:../../packages/astro vue: specifier: ^3.5.13 @@ -335,25 +335,25 @@ importers: specifier: ^9.2.2 version: link:../../packages/integrations/node astro: - specifier: ^5.9.4 + specifier: ^5.10.0 version: link:../../packages/astro examples/integration: devDependencies: astro: - specifier: ^5.9.4 + specifier: ^5.10.0 version: link:../../packages/astro examples/minimal: dependencies: astro: - specifier: ^5.9.4 + specifier: ^5.10.0 version: link:../../packages/astro examples/portfolio: dependencies: astro: - specifier: ^5.9.4 + specifier: ^5.10.0 version: link:../../packages/astro examples/ssr: @@ -365,7 +365,7 @@ importers: specifier: ^7.1.0 version: link:../../packages/integrations/svelte astro: - specifier: ^5.9.4 + specifier: ^5.10.0 version: link:../../packages/astro svelte: specifier: ^5.25.7 @@ -374,7 +374,7 @@ importers: examples/starlog: dependencies: astro: - specifier: ^5.9.4 + specifier: ^5.10.0 version: link:../../packages/astro sass: specifier: ^1.86.3 @@ -389,7 +389,7 @@ importers: specifier: ^18.17.8 version: 18.19.50 astro: - specifier: ^5.9.4 + specifier: ^5.10.0 version: link:../../packages/astro examples/with-markdoc: @@ -398,7 +398,7 @@ importers: specifier: ^0.15.0 version: link:../../packages/integrations/markdoc astro: - specifier: ^5.9.4 + specifier: ^5.10.0 version: link:../../packages/astro examples/with-mdx: @@ -410,7 +410,7 @@ importers: specifier: ^4.1.0 version: link:../../packages/integrations/preact astro: - specifier: ^5.9.4 + specifier: ^5.10.0 version: link:../../packages/astro preact: specifier: ^10.26.5 @@ -425,7 +425,7 @@ importers: specifier: ^0.5.2 version: 0.5.2(nanostores@0.11.4)(preact@10.26.8) astro: - specifier: ^5.9.4 + specifier: ^5.10.0 version: link:../../packages/astro nanostores: specifier: ^0.11.4 @@ -446,7 +446,7 @@ importers: specifier: ^1.9.0 version: 1.9.0 astro: - specifier: ^5.9.4 + specifier: ^5.10.0 version: link:../../packages/astro canvas-confetti: specifier: ^1.9.3 @@ -458,7 +458,7 @@ importers: examples/with-vitest: dependencies: astro: - specifier: ^5.9.4 + specifier: ^5.10.0 version: link:../../packages/astro vitest: specifier: ^3.1.1 @@ -10754,7 +10754,6 @@ packages: libsql@0.5.4: resolution: {integrity: sha512-GEFeWca4SDAQFxjHWJBE6GK52LEtSskiujbG3rqmmeTO9t4sfSBKIURNLLpKDDF7fb7jmTuuRkDAn9BZGITQNw==} - cpu: [x64, arm64, wasm32] os: [darwin, linux, win32] lightningcss-darwin-arm64@1.29.2: