Merge pull request #61 from withastro/main

Updates!!

.changeset/forty-eggs-raise.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/partytown': patch
+---
+
+Adds the ability to override the `lib` option in `astro.config.mjs`

.changeset/new-candles-beam.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixed window component appearing over the dev overlay on small windows. Added a maximum length to sections of the tooltip component

.changeset/seven-files-punch.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/markdoc': patch
+---
+
+Fix build process on markdoc integration when root folder contains spaces

.changeset/swift-suits-drum.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/vue': patch
+---
+
+Fixes an issue where Astro slot names were being rendered as attributes in components. Astro slot names will no longer be sent as props to framework components.

.changeset/violet-ants-bow.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Renames dev overlay UI Toolkit component names for consistency.

packages/astro-rss/README.md

@@ -17,7 +17,7 @@ pnpm i @astrojs/rss
 
 ## Example usage
 
-The `@astrojs/rss` package provides helpers for generating RSS feeds within [Astro endpoints][astro-endpoints]. This unlocks both static builds _and_ on-demand generation when using an [SSR adapter](https://docs.astro.build/en/guides/server-side-rendering/#enabling-ssr-in-your-project).
+The `@astrojs/rss` package provides helpers for generating RSS feeds within [Astro endpoints][astro-endpoints]. This unlocks both static builds _and_ on-demand generation when using an [SSR adapter](https://docs.astro.build/en/guides/server-side-rendering/).
 
 For instance, say you need to generate an RSS feed for all posts under `src/content/blog/` using content collections.
 

packages/astro/e2e/dev-overlay.test.js

@@ -0,0 +1,90 @@
+import { expect } from '@playwright/test';
+import { testFactory } from './test-utils.js';
+
+const test = testFactory({
+	root: './fixtures/dev-overlay/',
+});
+
+let devServer;
+
+test.beforeAll(async ({ astro }) => {
+	devServer = await astro.startDevServer();
+});
+
+test.afterAll(async () => {
+	await devServer.stop();
+});
+
+test.describe('Dev Overlay zzz', () => {
+	test('dev overlay exists in the page', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+
+		const devOVerlay = page.locator('astro-dev-overlay');
+		await expect(devOVerlay).toHaveCount(1);
+	});
+
+	test('can open Astro plugin', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+
+		const overlay = page.locator('astro-dev-overlay');
+		const pluginButton = overlay.locator('button[data-plugin-id="astro"]');
+		await pluginButton.click();
+
+		const astroPluginCanvas = overlay.locator(
+			'astro-dev-overlay-plugin-canvas[data-plugin-id="astro"]'
+		);
+		const astroWindow = astroPluginCanvas.locator('astro-dev-overlay-window');
+		await expect(astroWindow).toHaveCount(1);
+		await expect(astroWindow).toBeVisible();
+
+		// Toggle plugin off
+		await pluginButton.click();
+		await expect(astroWindow).not.toBeVisible();
+	});
+
+	test('xray shows highlights and tooltips', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+
+		const overlay = page.locator('astro-dev-overlay');
+		const pluginButton = overlay.locator('button[data-plugin-id="astro:xray"]');
+		await pluginButton.click();
+
+		const xrayCanvas = overlay.locator(
+			'astro-dev-overlay-plugin-canvas[data-plugin-id="astro:xray"]'
+		);
+		const xrayHighlight = xrayCanvas.locator('astro-dev-overlay-highlight');
+		await expect(xrayHighlight).toBeVisible();
+
+		await xrayHighlight.hover();
+		const xrayHighlightTooltip = xrayHighlight.locator('astro-dev-overlay-tooltip');
+		await expect(xrayHighlightTooltip).toBeVisible();
+
+		// Toggle plugin off
+		await pluginButton.click();
+		await expect(xrayHighlight).not.toBeVisible();
+		await expect(xrayHighlightTooltip).not.toBeVisible();
+	});
+
+	test('audit shows higlights and tooltips', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+
+		const overlay = page.locator('astro-dev-overlay');
+		const pluginButton = overlay.locator('button[data-plugin-id="astro:audit"]');
+		await pluginButton.click();
+
+		const auditCanvas = overlay.locator(
+			'astro-dev-overlay-plugin-canvas[data-plugin-id="astro:audit"]'
+		);
+		const auditHighlight = auditCanvas.locator('astro-dev-overlay-highlight');
+		await expect(auditHighlight).toBeVisible();
+
+		await auditHighlight.hover();
+		const auditHighlightTooltip = auditHighlight.locator('astro-dev-overlay-tooltip');
+		await expect(auditHighlightTooltip).toBeVisible();
+
+		// Toggle plugin off
+		await pluginButton.click();
+		await expect(auditHighlight).not.toBeVisible();
+		await expect(auditHighlightTooltip).not.toBeVisible();
+	});
+});

packages/astro/e2e/fixtures/dev-overlay/astro.config.mjs

@@ -0,0 +1,8 @@
+import preact from '@astrojs/preact';
+
+export default {
+	integrations: [preact()],
+	experimental: {
+		devOverlay: true
+	}
+};

packages/astro/e2e/fixtures/dev-overlay/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@e2e/dev-overlay",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/preact": "workspace:*",
+    "astro": "workspace:*",
+    "preact": "^10.17.1"
+  }
+}

packages/astro/e2e/fixtures/dev-overlay/src/components/HelloWorld.tsx

@@ -0,0 +1,3 @@
+export function HelloWorld({ name }) {
+	return <div>Hello {name}! I'm a component!</div>;
+}

packages/astro/e2e/fixtures/dev-overlay/src/pages/index.astro

@@ -0,0 +1,7 @@
+---
+import { HelloWorld } from "../components/HelloWorld";
+---
+
+<HelloWorld name={"Dev Overlay"} client:load />
+
+<img src="https://astro.build/assets/press/astro-logo-dark.svg" />

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

@@ -220,7 +220,7 @@ export interface AstroGlobal<
 	 * }
 	 * ```
 	 *
-	 * [Astro reference](https://docs.astro.build/en/guides/server-side-rendering/#astroredirect)
+	 * [Astro reference](https://docs.astro.build/en/guides/server-side-rendering/)
 	 */
 	redirect: AstroSharedContext['redirect'];
 	/**

packages/astro/src/core/errors/errors-data.ts

@@ -36,7 +36,7 @@ export const UnknownCompilerError = {
 /**
  * @docs
  * @see
- * - [Enabling SSR in Your Project](https://docs.astro.build/en/guides/server-side-rendering/#enabling-ssr-in-your-project)
+ * - [Enabling SSR in Your Project](https://docs.astro.build/en/guides/server-side-rendering/)
  * - [Astro.redirect](https://docs.astro.build/en/reference/api-reference/#astroredirect)
  * @description
  * The `Astro.redirect` function is only available when [Server-side rendering](/en/guides/server-side-rendering/) is enabled.
@@ -49,7 +49,7 @@ export const StaticRedirectNotAvailable = {
 	title: '`Astro.redirect` is not available in static mode.',
 	message:
 		"Redirects are only available when using `output: 'server'` or `output: 'hybrid'`. Update your Astro config if you need SSR features.",
-	hint: 'See https://docs.astro.build/en/guides/server-side-rendering/#enabling-ssr-in-your-project for more information on how to enable SSR.',
+	hint: 'See https://docs.astro.build/en/guides/server-side-rendering/ for more information on how to enable SSR.',
 } satisfies ErrorData;
 /**
  * @docs
@@ -68,7 +68,7 @@ export const ClientAddressNotAvailable = {
 /**
  * @docs
  * @see
- * - [Enabling SSR in Your Project](https://docs.astro.build/en/guides/server-side-rendering/#enabling-ssr-in-your-project)
+ * - [Enabling SSR in Your Project](https://docs.astro.build/en/guides/server-side-rendering/)
  * - [Astro.clientAddress](https://docs.astro.build/en/reference/api-reference/#astroclientaddress)
  * @description
  * The `Astro.clientAddress` property is only available when [Server-side rendering](https://docs.astro.build/en/guides/server-side-rendering/) is enabled.
@@ -80,7 +80,7 @@ export const StaticClientAddressNotAvailable = {
 	title: '`Astro.clientAddress` is not available in static mode.',
 	message:
 		"`Astro.clientAddress` is only available when using `output: 'server'` or `output: 'hybrid'`. Update your Astro config if you need SSR features.",
-	hint: 'See https://docs.astro.build/en/guides/server-side-rendering/#enabling-ssr-in-your-project for more information on how to enable SSR.',
+	hint: 'See https://docs.astro.build/en/guides/server-side-rendering/ for more information on how to enable SSR.',
 } satisfies ErrorData;
 /**
  * @docs
@@ -407,7 +407,6 @@ export const ReservedSlotName = {
  * @docs
  * @see
  * - [Server-side Rendering](https://docs.astro.build/en/guides/server-side-rendering/)
- * - [Adding an Adapter](https://docs.astro.build/en/guides/server-side-rendering/#adding-an-adapter)
  * @description
  * To use server-side rendering, an adapter needs to be installed so Astro knows how to generate the proper output for your targeted deployment platform.
  */

packages/astro/src/runtime/client/dev-overlay/overlay.ts

@@ -67,7 +67,7 @@ document.addEventListener('DOMContentLoaded', async () => {
 
 		constructor() {
 			super();
-			this.shadowRoot = this.attachShadow({ mode: 'closed' });
+			this.shadowRoot = this.attachShadow({ mode: 'open' });
 		}
 
 		// connect component
@@ -79,7 +79,7 @@ document.addEventListener('DOMContentLoaded', async () => {
 				bottom: 7.5%;
 				left: calc(50% + 32px);
 				transform: translate(-50%, 0%);
-				z-index: 999999;
+				z-index: 9999999999;
 				display: flex;
 				gap: 8px;
 				align-items: center;
@@ -192,13 +192,13 @@ document.addEventListener('DOMContentLoaded', async () => {
 				width: 1px;
 			}
 
-			astro-overlay-plugin-canvas {
+			astro-dev-overlay-plugin-canvas {
 				position: absolute;
 				top: 0;
 				left: 0;
 			}
 
-			astro-overlay-plugin-canvas:not([data-active]) {
+			astro-dev-overlay-plugin-canvas:not([data-active]) {
 				display: none;
 			}
 
@@ -403,7 +403,9 @@ document.addEventListener('DOMContentLoaded', async () => {
 		}
 
 		getPluginCanvasById(id: string) {
-			return this.shadowRoot.querySelector(`astro-overlay-plugin-canvas[data-plugin-id="${id}"]`);
+			return this.shadowRoot.querySelector(
+				`astro-dev-overlay-plugin-canvas[data-plugin-id="${id}"]`
+			);
 		}
 
 		togglePluginStatus(plugin: DevOverlayPlugin, status?: boolean) {
@@ -476,7 +478,7 @@ document.addEventListener('DOMContentLoaded', async () => {
 
 		constructor() {
 			super();
-			this.shadowRoot = this.attachShadow({ mode: 'closed' });
+			this.shadowRoot = this.attachShadow({ mode: 'open' });
 		}
 
 		// connect component
@@ -486,19 +488,19 @@ document.addEventListener('DOMContentLoaded', async () => {
 	}
 
 	customElements.define('astro-dev-overlay', AstroDevOverlay);
-	customElements.define('astro-overlay-window', DevOverlayWindow);
-	customElements.define('astro-overlay-plugin-canvas', DevOverlayCanvas);
-	customElements.define('astro-overlay-tooltip', DevOverlayTooltip);
-	customElements.define('astro-overlay-highlight', DevOverlayHighlight);
-	customElements.define('astro-overlay-card', DevOverlayCard);
+	customElements.define('astro-dev-overlay-window', DevOverlayWindow);
+	customElements.define('astro-dev-overlay-plugin-canvas', DevOverlayCanvas);
+	customElements.define('astro-dev-overlay-tooltip', DevOverlayTooltip);
+	customElements.define('astro-dev-overlay-highlight', DevOverlayHighlight);
+	customElements.define('astro-dev-overlay-card', DevOverlayCard);
 
 	const overlay = document.createElement('astro-dev-overlay');
 	overlay.style.zIndex = '999999';
 	document.body.append(overlay);
 
 	// Create plugin canvases
 	plugins.forEach((plugin) => {
-		const pluginCanvas = document.createElement('astro-overlay-plugin-canvas');
+		const pluginCanvas = document.createElement('astro-dev-overlay-plugin-canvas');
 		pluginCanvas.dataset.pluginId = plugin.id;
 		overlay.shadowRoot?.append(pluginCanvas);
 	});

packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts

@@ -6,7 +6,7 @@ export default {
 	name: 'Astro',
 	icon: 'astro:logo',
 	init(canvas) {
-		const astroWindow = document.createElement('astro-overlay-window') as DevOverlayWindow;
+		const astroWindow = document.createElement('astro-dev-overlay-window') as DevOverlayWindow;
 
 		astroWindow.windowTitle = 'Astro';
 		astroWindow.windowIcon = 'astro:logo';
@@ -19,7 +19,7 @@ export default {
 					justify-content: center;
 				}
 
-				#buttons-container astro-overlay-card {
+				#buttons-container astro-dev-overlay-card {
 					flex: 1;
 				}
 
@@ -53,8 +53,8 @@ export default {
 				<div>
 					<p>Welcome to Astro!</p>
 					<div id="buttons-container">
-						<astro-overlay-card icon="astro:logo" link="https://github.com/withastro/astro/issues/new/choose">Report an issue</astro-overlay-card>
-						<astro-overlay-card icon="astro:logo" link="https://docs.astro.build/en/getting-started/">View Astro Docs</astro-overlay-card>
+						<astro-dev-overlay-card icon="astro:logo" link="https://github.com/withastro/astro/issues/new/choose">Report an issue</astro-dev-overlay-card>
+						<astro-dev-overlay-card icon="astro:logo" link="https://docs.astro.build/en/getting-started/">View Astro Docs</astro-dev-overlay-card>
 					</div>
 				</div>
 				<footer>

packages/astro/src/runtime/client/dev-overlay/plugins/audit.ts

@@ -70,7 +70,7 @@ export default {
 		}
 
 		function buildAuditTooltip(rule: AuditRule) {
-			const tooltip = document.createElement('astro-overlay-tooltip') as DevOverlayTooltip;
+			const tooltip = document.createElement('astro-dev-overlay-tooltip') as DevOverlayTooltip;
 			tooltip.sections = [
 				{
 					icon: 'warning',

packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts

@@ -2,7 +2,7 @@ import type { DevOverlayHighlight } from '../../ui-library/highlight.js';
 import type { Icon } from '../../ui-library/icons.js';
 
 export function createHighlight(rect: DOMRect, icon?: Icon) {
-	const highlight = document.createElement('astro-overlay-highlight') as DevOverlayHighlight;
+	const highlight = document.createElement('astro-dev-overlay-highlight') as DevOverlayHighlight;
 	if (icon) highlight.icon = icon;
 
 	highlight.tabIndex = 0;

packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts

@@ -46,7 +46,7 @@ export default {
 		}
 
 		function buildIslandTooltip(island: HTMLElement) {
-			const tooltip = document.createElement('astro-overlay-tooltip') as DevOverlayTooltip;
+			const tooltip = document.createElement('astro-dev-overlay-tooltip') as DevOverlayTooltip;
 			tooltip.sections = [];
 
 			const islandProps = island.getAttribute('props')

packages/astro/src/runtime/client/dev-overlay/ui-library/tooltip.ts

@@ -57,6 +57,11 @@ export class DevOverlayTooltip extends HTMLElement {
 				padding: 8px;
 			}
 
+			.section-content {
+				max-height: 250px;
+    		overflow-y: scroll;
+			}
+
 			.modal-title {
 				display: flex;
 				justify-content: space-between;
@@ -126,7 +131,7 @@ export class DevOverlayTooltip extends HTMLElement {
 						}</div>`
 						: ''
 				}
-				${section.content ? `<div>${section.content}</div>` : ''}
+				${section.content ? `<div class="section-content">${section.content}</div>` : ''}
 				${section.clickDescription ? `<span class="modal-cta">${section.clickDescription}</span>` : ''}
 			`;
 			fragment.append(sectionElement);

packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts

@@ -30,7 +30,7 @@ export class DevOverlayWindow extends HTMLElement {
 					font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 					color: rgba(204, 206, 216, 1);
 					position: fixed;
-					z-index: 9999999999;
+					z-index: 999999999;
 					top: 55%;
 					left: 50%;
 					transform: translate(-50%, -50%);

packages/integrations/markdoc/src/content-entry-type.ts

@@ -106,7 +106,7 @@ export async function getContentEntryType({
 import { createGetHeadings, createContentComponent } from '@astrojs/markdoc/runtime';
 ${
 	markdocConfigUrl
-		? `import markdocConfig from ${JSON.stringify(markdocConfigUrl.pathname)};`
+		? `import markdocConfig from ${JSON.stringify(fileURLToPath(markdocConfigUrl))};`
 		: 'const markdocConfig = {};'
 }
 
@@ -230,7 +230,7 @@ function getStringifiedImports(
 			? `{ ${config.namedExport} as ${componentNamePrefix + toImportName(key)} }`
 			: componentNamePrefix + toImportName(key);
 		const resolvedPath =
-			config.type === 'local' ? new URL(config.path, root).pathname : config.path;
+			config.type === 'local' ? fileURLToPath(new URL(config.path, root)) : config.path;
 
 		stringifiedComponentImports += `import ${importName} from ${JSON.stringify(resolvedPath)};\n`;
 	}