summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--.changeset/calm-shirts-battle.md5
-rw-r--r--packages/astro/package.json2
-rw-r--r--packages/astro/src/core/compile/compile.ts1
-rw-r--r--packages/astro/src/runtime/client/dev-overlay/plugins/audit.ts34
-rw-r--r--packages/astro/test/fixtures/middleware space/src/middleware.js4
-rw-r--r--packages/astro/test/middleware.test.js8
-rw-r--r--packages/astro/test/partials.test.js2
-rw-r--r--packages/astro/test/units/dev/dev.test.js9
-rw-r--r--pnpm-lock.yaml8
9 files changed, 47 insertions, 26 deletions
diff --git a/.changeset/calm-shirts-battle.md b/.changeset/calm-shirts-battle.md
new file mode 100644
index 000000000..023e17f3b
--- /dev/null
+++ b/.changeset/calm-shirts-battle.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Add ability to "Click to go editor" on auditted elements in the dev overlay
diff --git a/packages/astro/package.json b/packages/astro/package.json
index 47e1ae572..d1b87a79b 100644
--- a/packages/astro/package.json
+++ b/packages/astro/package.json
@@ -121,7 +121,7 @@
"test:e2e:match": "playwright test -g"
},
"dependencies": {
- "@astrojs/compiler": "^2.1.0",
+ "@astrojs/compiler": "^2.3.0",
"@astrojs/internal-helpers": "workspace:*",
"@astrojs/markdown-remark": "workspace:*",
"@astrojs/telemetry": "workspace:*",
diff --git a/packages/astro/src/core/compile/compile.ts b/packages/astro/src/core/compile/compile.ts
index 5e1cad1be..f270e123e 100644
--- a/packages/astro/src/core/compile/compile.ts
+++ b/packages/astro/src/core/compile/compile.ts
@@ -46,6 +46,7 @@ export async function compile({
scopedStyleStrategy: astroConfig.scopedStyleStrategy,
resultScopedSlot: true,
transitionsAnimationURL: 'astro/components/viewtransitions.css',
+ annotateSourceFile: !viteConfig.isProduction && astroConfig.experimental.devOverlay,
preprocessStyle: createStylePreprocessor({
filename,
viteConfig,
diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/audit.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/audit.ts
index 6d5779fac..6961e1227 100644
--- a/packages/astro/src/runtime/client/dev-overlay/plugins/audit.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/plugins/audit.ts
@@ -1,4 +1,4 @@
-import type { DevOverlayPlugin } from '../../../../@types/astro.js';
+import type { DevOverlayMetadata, DevOverlayPlugin } from '../../../../@types/astro.js';
import type { DevOverlayHighlight } from '../ui-library/highlight.js';
import { getIconElement } from '../ui-library/icons.js';
import { attachTooltipToHighlight, createHighlight, positionHighlight } from './utils/highlight.js';
@@ -121,15 +121,16 @@ export default {
const rect = originalElement.getBoundingClientRect();
const highlight = createHighlight(rect, 'warning');
- const tooltip = buildAuditTooltip(rule);
+ const tooltip = buildAuditTooltip(rule, originalElement);
attachTooltipToHighlight(highlight, tooltip, originalElement);
canvas.append(highlight);
audits.push({ highlightElement: highlight, auditedElement: originalElement as HTMLElement });
}
- function buildAuditTooltip(rule: AuditRule) {
+ function buildAuditTooltip(rule: AuditRule, element: Element) {
const tooltip = document.createElement('astro-dev-overlay-tooltip');
+
tooltip.sections = [
{
icon: 'warning',
@@ -138,15 +139,28 @@ export default {
{
content: rule.message,
},
- // TODO: Add a link to the file
- // Needs https://github.com/withastro/compiler/pull/375
- // {
- // content: '/src/somewhere/component.astro',
- // clickDescription: 'Click to go to file',
- // clickAction() {},
- // },
];
+ const elementFile = element.getAttribute('data-astro-source-file');
+ const elementPosition = element.getAttribute('data-astro-source-loc');
+
+ if (elementFile) {
+ const elementFileWithPosition =
+ elementFile + (elementPosition ? ':' + elementPosition : '');
+
+ tooltip.sections.push({
+ content: elementFileWithPosition.slice(
+ (window as DevOverlayMetadata).__astro_dev_overlay__.root.length - 1 // We want to keep the final slash, so minus one.
+ ),
+ clickDescription: 'Click to go to file',
+ async clickAction() {
+ // NOTE: The path here has to be absolute and without any errors (no double slashes etc)
+ // or Vite will silently fail to open the file. Quite annoying.
+ await fetch('/__open-in-editor?file=' + encodeURIComponent(elementFileWithPosition));
+ },
+ });
+ }
+
return tooltip;
}
diff --git a/packages/astro/test/fixtures/middleware space/src/middleware.js b/packages/astro/test/fixtures/middleware space/src/middleware.js
index a889569c4..779bc5c93 100644
--- a/packages/astro/test/fixtures/middleware space/src/middleware.js
+++ b/packages/astro/test/fixtures/middleware space/src/middleware.js
@@ -1,4 +1,4 @@
-import { sequence, defineMiddleware } from 'astro:middleware';
+import { defineMiddleware, sequence } from 'astro:middleware';
const first = defineMiddleware(async (context, next) => {
if (context.request.url.includes('/lorem')) {
@@ -24,7 +24,7 @@ const first = defineMiddleware(async (context, next) => {
const response = await next();
const newResponse = response.clone();
const /** @type {string} */ html = await newResponse.text();
- const newhtml = html.replace('<h1>testing</h1>', '<h1>it works</h1>');
+ const newhtml = html.replace('testing', 'it works');
return new Response(newhtml, { status: 200, headers: response.headers });
} else if(context.url.pathname === '/return-response-cookies') {
const response = await next();
diff --git a/packages/astro/test/middleware.test.js b/packages/astro/test/middleware.test.js
index 66abce3b8..ac3054620 100644
--- a/packages/astro/test/middleware.test.js
+++ b/packages/astro/test/middleware.test.js
@@ -1,9 +1,9 @@
-import { loadFixture } from './test-utils.js';
import { expect } from 'chai';
import * as cheerio from 'cheerio';
-import testAdapter from './test-adapter.js';
+import { existsSync, readFileSync } from 'node:fs';
import { fileURLToPath } from 'node:url';
-import { readFileSync, existsSync } from 'node:fs';
+import testAdapter from './test-adapter.js';
+import { loadFixture } from './test-utils.js';
describe('Middleware in DEV mode', () => {
/** @type {import('./test-utils').Fixture} */
@@ -77,7 +77,7 @@ describe('Middleware in DEV mode', () => {
it('should be able to clone the response', async () => {
let res = await fixture.fetch('/clone');
let html = await res.text();
- expect(html).to.contain('<h1>it works</h1>');
+ expect(html).to.contain('it works');
});
it('should forward cookies set in a component when the middleware returns a new response', async () => {
diff --git a/packages/astro/test/partials.test.js b/packages/astro/test/partials.test.js
index 6f1b50938..447458778 100644
--- a/packages/astro/test/partials.test.js
+++ b/packages/astro/test/partials.test.js
@@ -25,7 +25,7 @@ describe('Partials', () => {
it('is only the written HTML', async () => {
const html = await fixture.fetch('/partials/item/').then((res) => res.text());
- expect(html.startsWith('<li>')).to.equal(true);
+ expect(html.startsWith('<li')).to.equal(true);
});
});
diff --git a/packages/astro/test/units/dev/dev.test.js b/packages/astro/test/units/dev/dev.test.js
index 9762be7eb..810d8d1c3 100644
--- a/packages/astro/test/units/dev/dev.test.js
+++ b/packages/astro/test/units/dev/dev.test.js
@@ -4,8 +4,8 @@ import { fileURLToPath } from 'node:url';
import {
createFs,
createRequestAndResponse,
- triggerFSEvent,
runInContainer,
+ triggerFSEvent,
} from '../test-utils.js';
const root = new URL('../../fixtures/alias/', import.meta.url);
@@ -199,7 +199,8 @@ describe('dev container', () => {
container.handle(r.req, r.res);
await r.done;
const doc = await r.text();
- expect(doc).to.match(/<h1>Regular page<\/h1>/);
+ console.log(doc);
+ expect(doc).to.match(/Regular page/);
expect(r.res.statusCode).to.equal(200);
}
{
@@ -208,7 +209,7 @@ describe('dev container', () => {
container.handle(r.req, r.res);
await r.done;
const doc = await r.text();
- expect(doc).to.match(/<h1>Custom 404<\/h1>/);
+ expect(doc).to.match(/Custom 404/);
expect(r.res.statusCode).to.equal(404);
}
{
@@ -217,7 +218,7 @@ describe('dev container', () => {
container.handle(r.req, r.res);
await r.done;
const doc = await r.text();
- expect(doc).to.match(/<h1>Custom 404<\/h1>/);
+ expect(doc).to.match(/Custom 404/);
expect(r.res.statusCode).to.equal(404);
}
}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 96db1779e..65d076fa0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -485,8 +485,8 @@ importers:
packages/astro:
dependencies:
'@astrojs/compiler':
- specifier: ^2.1.0
- version: 2.2.1
+ specifier: ^2.3.0
+ version: 2.3.0
'@astrojs/internal-helpers':
specifier: workspace:*
version: link:../internal-helpers
@@ -5147,8 +5147,8 @@ packages:
resolution: {integrity: sha512-o/ObKgtMzl8SlpIdzaxFnt7SATKPxu4oIP/1NL+HDJRzxfJcAkOTAb/ZKMRyULbz4q+1t2/DAebs2Z1QairkZw==}
dev: true
- /@astrojs/compiler@2.2.1:
- resolution: {integrity: sha512-NJ1lWKzMkyEjE3W5NpPNAVot4/PLF5om/P6ekxNu3iLS05CaYFTcp7WpYMjdCC252b7wkNVAs45FNkVQ+RHW/g==}
+ /@astrojs/compiler@2.3.0:
+ resolution: {integrity: sha512-pxYRAaRdMS6XUll8lbFM+Lr0DI1HKIDT+VpiC+S+9di5H/nmm3znZOgdMlLiMxADot+56eps+M1BvtKfQremXA==}
dev: false
/@astrojs/language-server@2.4.0(prettier-plugin-astro@0.12.0)(prettier@3.0.3)(typescript@5.1.6):
generated by cgit v1.2.3 (git 2.46.0) at 2025-08-10 21:27:50 +0000