Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-02-17 22:44:24 -05:00
Code Issues Activity

feat(overlay): Add click to go to editor for audits (#9016)

Browse source 
* feat(overlay): Add click to go to editor for audits

* chore: changeset

* chore: update compiler dep

* fix: tests

* Update packages/astro/src/core/compile/compile.ts

Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>

* Update packages/astro/src/core/compile/compile.ts

---------

Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>
This commit is contained in:
Erika 2023-11-08 15:29:12 +01:00 • committed by GitHub
parent 38e21d1275
commit 1ecc9aa324
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 47 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/calm-shirts-battle.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Add ability to "Click to go editor" on auditted elements in the dev overlay

2
packages/astro/package.json
View file

@ -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:*",

1
packages/astro/src/core/compile/compile.ts
View file

@ -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,

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

@ -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;
}

4
packages/astro/test/fixtures/middleware space/src/middleware.js vendored
View file

@ -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();

8
packages/astro/test/middleware.test.js
View file

@ -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 () => {

2
packages/astro/test/partials.test.js
View file

@ -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);
});
});

9
packages/astro/test/units/dev/dev.test.js
View file

@ -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);
}
}

8
pnpm-lock.yaml generated
View file

@ -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):