Merge branch 'main' into alexanderniebuhr-#8520

.changeset/eighty-trainers-accept.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+add hide to style & script generated for island

.changeset/fair-teachers-protect.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix small types issues related to `astro:assets`'s AVIF support and `getImage`

.changeset/thin-pigs-mate.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/cloudflare': patch
+---
+
+add the option to type environment variables using a generic

packages/astro/client.d.ts

@@ -48,9 +48,7 @@ declare module 'astro:assets' {
 		 * This is functionally equivalent to using the `<Image />` component, as the component calls this function internally.
 		 */
 		getImage: (
-			options:
-				| import('./dist/assets/types.js').ImageTransform
-				| import('./dist/assets/types.js').UnresolvedImageTransform
+			options: import('./dist/assets/types.js').UnresolvedImageTransform
 		) => Promise<import('./dist/assets/types.js').GetImageResult>;
 		imageConfig: import('./dist/@types/astro.js').AstroConfig['image'];
 		getConfiguredImageService: typeof import('./dist/assets/index.js').getConfiguredImageService;

packages/astro/content-types.template.d.ts

@@ -33,6 +33,7 @@ declare module 'astro:content' {
 				import('astro/zod').ZodLiteral<'webp'>,
 				import('astro/zod').ZodLiteral<'gif'>,
 				import('astro/zod').ZodLiteral<'svg'>,
+				import('astro/zod').ZodLiteral<'avif'>,
 			]
 		>;
 	}>;

packages/astro/src/@types/astro.ts

@@ -48,6 +48,7 @@ export type {
 	ImageQuality,
 	ImageQualityPreset,
 	ImageTransform,
+	UnresolvedImageTransform,
 } from '../assets/types.js';
 export type { RemotePattern } from '../assets/utils/remotePattern.js';
 export type { SSRManifest } from '../core/app/types.js';

packages/astro/src/assets/internal.ts

@@ -67,7 +67,7 @@ export async function getConfiguredImageService(): Promise<ImageService> {
 }
 
 export async function getImage(
-	options: ImageTransform | UnresolvedImageTransform,
+	options: UnresolvedImageTransform,
 	imageConfig: AstroConfig['image']
 ): Promise<GetImageResult> {
 	if (!options || typeof options !== 'object') {

packages/astro/src/assets/types.ts

@@ -28,8 +28,11 @@ export interface ImageMetadata {
 	orientation?: number;
 }
 
+/**
+ * A yet to be resolved image transform. Used by `getImage`
+ */
 export type UnresolvedImageTransform = Omit<ImageTransform, 'src'> & {
-	src: Promise<{ default: ImageMetadata }>;
+	src: ImageMetadata | string | Promise<{ default: ImageMetadata }>;
 };
 
 /**

packages/astro/src/runtime/server/scripts.ts

@@ -1,7 +1,7 @@
 import type { SSRResult } from '../../@types/astro.js';
 import islandScript from './astro-island.prebuilt.js';
 
-const ISLAND_STYLES = `<style>astro-island,astro-slot,astro-static-slot{display:contents}</style>`;
+const ISLAND_STYLES = `<style style="display:none">astro-island,astro-slot,astro-static-slot{display:contents}</style>`;
 
 export function determineIfNeedsHydrationScript(result: SSRResult): boolean {
 	if (result._metadata.hasHydrationScript) {
@@ -36,12 +36,12 @@ export function getPrescripts(result: SSRResult, type: PrescriptType, directive:
 	// deps to be loaded immediately.
 	switch (type) {
 		case 'both':
-			return `${ISLAND_STYLES}<script>${getDirectiveScriptText(
+			return `${ISLAND_STYLES}<script style="display:none">${getDirectiveScriptText(
 				result,
 				directive
 			)};${islandScript}</script>`;
 		case 'directive':
-			return `<script>${getDirectiveScriptText(result, directive)}</script>`;
+			return `<script style="display:none">${getDirectiveScriptText(result, directive)}</script>`;
 	}
 	return '';
 }

packages/integrations/cloudflare/README.md

@@ -115,8 +115,12 @@ If you're using the `advanced` runtime, you can type the `runtime` object as fol
 /// <reference types="astro/client" />
 import type { AdvancedRuntime } from '@astrojs/cloudflare';
 
+type ENV = {
+  SERVER_URL: string;
+};
+
 declare namespace App {
-  interface Locals extends AdvancedRuntime {
+  interface Locals extends AdvancedRuntime<ENV> {
     user: {
       name: string;
       surname: string;
@@ -132,8 +136,12 @@ If you're using the `directory` runtime, you can type the `runtime` object as fo
 /// <reference types="astro/client" />
 import type { DirectoryRuntime } from '@astrojs/cloudflare';
 
+type ENV = {
+  SERVER_URL: string;
+};
+
 declare namespace App {
-  interface Locals extends DirectoryRuntime {
+  interface Locals extends DirectoryRuntime<ENV> {
     user: {
       name: string;
       surname: string;

packages/integrations/cloudflare/src/server.advanced.ts

@@ -9,13 +9,12 @@ if (!isNode) {
 
 type Env = {
 	ASSETS: { fetch: (req: Request) => Promise<Response> };
-	name: string;
 };
 
-export interface AdvancedRuntime {
+export interface AdvancedRuntime<T extends object = object> {
 	runtime: {
 		waitUntil: (promise: Promise<any>) => void;
-		env: Env;
+		env: Env & T;
 		cf: CFRequest['cf'];
 		caches: typeof caches;
 	};

packages/integrations/cloudflare/src/server.directory.ts

@@ -7,10 +7,10 @@ if (!isNode) {
 	process.env = getProcessEnvProxy();
 }
 
-export interface DirectoryRuntime {
+export interface DirectoryRuntime<T extends object = object> {
 	runtime: {
 		waitUntil: (promise: Promise<any>) => void;
-		env: EventContext<unknown, string, unknown>['env'];
+		env: EventContext<unknown, string, unknown>['env'] & T;
 		cf: CFRequest['cf'];
 		caches: typeof caches;
 	};

packages/integrations/tailwind/README.md

@@ -140,7 +140,7 @@ You can now [import your own `base.css` as a local stylesheet](https://docs.astr
 ## Examples
 
 - The [Astro Tailwind Starter](https://github.com/withastro/astro/tree/latest/examples/with-tailwindcss?on=github) gets you up and running with a base for your project that uses Tailwind for styling
-- Astro's homepage uses Tailwind. Check out its [Tailwind configuration file](https://github.com/withastro/astro.build/blob/main/tailwind.config.cjs) or an [example component](https://github.com/withastro/astro.build/blob/main/src/components/Checkbox.astro)
+- Astro's homepage uses Tailwind. Check out its [Tailwind configuration file](https://github.com/withastro/astro.build/blob/main/tailwind.config.ts) or an [example component](https://github.com/withastro/astro.build/blob/main/src/components/Checkbox.astro)
 - The [Astro Ink](https://github.com/one-aalam/astro-ink), [Sarissa Blog](https://github.com/iozcelik/SarissaBlogAstroStarter), and [Creek](https://github.com/robertguss/Astro-Theme-Creek) themes use Tailwind for styling
 - [Browse Astro Tailwind projects on GitHub](https://github.com/search?q=%22%40astrojs%2Ftailwind%22%3A+path%3A%2Fpackage.json&type=code) for more examples!