Fable clean up
This commit is contained in:
parent
3441a7e4af
commit
4ce8a4f41d
46 changed files with 642 additions and 911 deletions
|
|
@ -1,59 +1,17 @@
|
|||
import { readdir, readFile, stat } from 'node:fs/promises';
|
||||
import { readFile } from 'node:fs/promises';
|
||||
import path from 'node:path';
|
||||
import { dist, requireDist, resolveFile } from './lib/dist.mjs';
|
||||
import { walk } from './lib/walk.mjs';
|
||||
|
||||
const dist = path.resolve('dist');
|
||||
const allowedPreservedRoutes = new Set(['/fleeting/', '/reconcile/']);
|
||||
const failures = [];
|
||||
|
||||
async function walk(dir) {
|
||||
const entries = await readdir(dir, { withFileTypes: true });
|
||||
const files = [];
|
||||
|
||||
for (const entry of entries) {
|
||||
const fullPath = path.join(dir, entry.name);
|
||||
if (entry.isDirectory()) {
|
||||
files.push(...(await walk(fullPath)));
|
||||
} else {
|
||||
files.push(fullPath);
|
||||
}
|
||||
}
|
||||
|
||||
return files;
|
||||
}
|
||||
|
||||
async function exists(file) {
|
||||
try {
|
||||
return (await stat(file)).isFile();
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
async function targetExists(pathname) {
|
||||
if (allowedPreservedRoutes.has(pathname)) return true;
|
||||
|
||||
const safePath = path
|
||||
.normalize(decodeURIComponent(pathname))
|
||||
.replace(/^\/+/, '')
|
||||
.replace(/^(\.\.(\/|\\|$))+/, '');
|
||||
const candidate = path.join(dist, safePath);
|
||||
const candidates = [
|
||||
candidate,
|
||||
path.join(candidate, 'index.html'),
|
||||
path.join(dist, `${safePath}.html`),
|
||||
];
|
||||
|
||||
for (const file of candidates) {
|
||||
if (await exists(file)) return true;
|
||||
}
|
||||
return false;
|
||||
return (await resolveFile(pathname)) !== null;
|
||||
}
|
||||
|
||||
try {
|
||||
await stat(dist);
|
||||
} catch {
|
||||
throw new Error('dist/ does not exist. Run npm run build first.');
|
||||
}
|
||||
await requireDist();
|
||||
|
||||
const files = await walk(dist);
|
||||
const checkedFiles = files.filter((file) => /\.(html|xml|css|webmanifest)$/.test(file));
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { readdir, readFile, stat } from 'node:fs/promises';
|
||||
import { readFile, stat } from 'node:fs/promises';
|
||||
import path from 'node:path';
|
||||
import { walk } from './lib/walk.mjs';
|
||||
|
||||
const forbidden = String.fromCodePoint(0x2014);
|
||||
const root = process.cwd();
|
||||
|
|
@ -37,25 +38,6 @@ async function exists(filePath) {
|
|||
}
|
||||
}
|
||||
|
||||
async function walk(entryPath) {
|
||||
const entryStat = await stat(entryPath);
|
||||
if (entryStat.isFile()) return [entryPath];
|
||||
|
||||
const entries = await readdir(entryPath, { withFileTypes: true });
|
||||
const files = [];
|
||||
|
||||
for (const entry of entries) {
|
||||
const fullPath = path.join(entryPath, entry.name);
|
||||
if (entry.isDirectory()) {
|
||||
files.push(...(await walk(fullPath)));
|
||||
} else if (entry.isFile()) {
|
||||
files.push(fullPath);
|
||||
}
|
||||
}
|
||||
|
||||
return files;
|
||||
}
|
||||
|
||||
function lineAndColumn(text, index) {
|
||||
const before = text.slice(0, index);
|
||||
const lines = before.split('\n');
|
||||
|
|
|
|||
|
|
@ -1,30 +1,10 @@
|
|||
import { readdir, readFile, stat } from 'node:fs/promises';
|
||||
import path from 'node:path';
|
||||
import { readFile } from 'node:fs/promises';
|
||||
import { dist, requireDist } from './lib/dist.mjs';
|
||||
import { walk } from './lib/walk.mjs';
|
||||
|
||||
const dist = path.resolve('dist');
|
||||
const failures = [];
|
||||
|
||||
async function walk(dir) {
|
||||
const entries = await readdir(dir, { withFileTypes: true });
|
||||
const files = [];
|
||||
|
||||
for (const entry of entries) {
|
||||
const fullPath = path.join(dir, entry.name);
|
||||
if (entry.isDirectory()) {
|
||||
files.push(...(await walk(fullPath)));
|
||||
} else {
|
||||
files.push(fullPath);
|
||||
}
|
||||
}
|
||||
|
||||
return files;
|
||||
}
|
||||
|
||||
try {
|
||||
await stat(dist);
|
||||
} catch {
|
||||
throw new Error('dist/ does not exist. Run npm run build first.');
|
||||
}
|
||||
await requireDist();
|
||||
|
||||
const files = await walk(dist);
|
||||
const ALLOWED_JS_ASSET_PATTERNS = [
|
||||
|
|
|
|||
|
|
@ -1,200 +1,32 @@
|
|||
import { createServer } from 'node:http';
|
||||
import { mkdir, readdir, readFile, rm, stat } from 'node:fs/promises';
|
||||
import path from 'node:path';
|
||||
import { chromium } from 'playwright';
|
||||
import {
|
||||
CONTEXT_TIMEOUT_MS,
|
||||
PAGE_TIMEOUT_MS,
|
||||
cleanupBrowserTmp,
|
||||
openBrowser,
|
||||
safeCloseBrowser,
|
||||
safeCloseContext,
|
||||
safeClosePage,
|
||||
setupBrowserTmp,
|
||||
shouldRetryNavigation,
|
||||
withTimeout,
|
||||
} from './lib/browser.mjs';
|
||||
import { discoverRoutes, requireDist, startDistServer } from './lib/dist.mjs';
|
||||
|
||||
const dist = path.resolve('dist');
|
||||
const browserTmp = path.resolve('.astro', 'playwright-overflow-tmp');
|
||||
const INDEX_FILE = 'index.html';
|
||||
const MAX_NAV_RETRIES = 4;
|
||||
// Common device widths: iPhone SE / Galaxy S / iPhone 14 / iPad portrait /
|
||||
// iPad landscape / common laptop / full HD desktop.
|
||||
const VIEWPORT_WIDTHS = [320, 390, 430, 768, 1024, 1440, 1920];
|
||||
const CLOSE_TIMEOUT_MS = 3000;
|
||||
const LAUNCH_TIMEOUT_MS = 10000;
|
||||
const CONTEXT_TIMEOUT_MS = 8000;
|
||||
const PAGE_TIMEOUT_MS = 15000;
|
||||
const MEASURE_TIMEOUT_MS = 25000;
|
||||
|
||||
const MIME = {
|
||||
'.html': 'text/html; charset=utf-8',
|
||||
'.css': 'text/css; charset=utf-8',
|
||||
'.js': 'text/javascript; charset=utf-8',
|
||||
'.svg': 'image/svg+xml',
|
||||
'.png': 'image/png',
|
||||
'.jpg': 'image/jpeg',
|
||||
'.jpeg': 'image/jpeg',
|
||||
'.webp': 'image/webp',
|
||||
'.avif': 'image/avif',
|
||||
'.ico': 'image/x-icon',
|
||||
'.woff': 'font/woff',
|
||||
'.woff2': 'font/woff2',
|
||||
'.mp4': 'video/mp4',
|
||||
'.webm': 'video/webm',
|
||||
'.vtt': 'text/vtt; charset=utf-8',
|
||||
'.pdf': 'application/pdf',
|
||||
};
|
||||
|
||||
function contentType(file) {
|
||||
const ext = path.extname(file).toLowerCase();
|
||||
return MIME[ext] ?? 'application/octet-stream';
|
||||
}
|
||||
|
||||
async function walk(dir) {
|
||||
const entries = await readdir(dir, { withFileTypes: true });
|
||||
const files = [];
|
||||
for (const entry of entries) {
|
||||
const fullPath = path.join(dir, entry.name);
|
||||
if (entry.isDirectory()) {
|
||||
files.push(...(await walk(fullPath)));
|
||||
} else {
|
||||
files.push(fullPath);
|
||||
}
|
||||
}
|
||||
return files;
|
||||
}
|
||||
|
||||
async function discoverRoutes() {
|
||||
const files = await walk(dist);
|
||||
const routes = new Set();
|
||||
for (const file of files) {
|
||||
if (!file.endsWith('.html')) continue;
|
||||
const rel = path.relative(dist, file).replaceAll(path.sep, '/');
|
||||
if (rel === '404.html') continue;
|
||||
if (rel === INDEX_FILE) {
|
||||
routes.add('/');
|
||||
} else if (rel.endsWith(`/${INDEX_FILE}`)) {
|
||||
routes.add('/' + rel.slice(0, -INDEX_FILE.length));
|
||||
} else {
|
||||
routes.add('/' + rel.replace(/\.html$/, '/'));
|
||||
}
|
||||
}
|
||||
return [...routes].sort();
|
||||
}
|
||||
|
||||
async function resolveFile(url) {
|
||||
const parsed = new URL(url, 'http://localhost');
|
||||
const safePath = path
|
||||
.normalize(decodeURIComponent(parsed.pathname))
|
||||
.replace(/^\/+/, '')
|
||||
.replace(/^(\.\.(\/|\\|$))+/, '');
|
||||
const candidate = path.join(dist, safePath);
|
||||
const candidates = [
|
||||
candidate,
|
||||
path.join(candidate, 'index.html'),
|
||||
path.join(dist, `${safePath}.html`),
|
||||
];
|
||||
|
||||
for (const file of candidates) {
|
||||
try {
|
||||
const fileStat = await stat(file);
|
||||
if (fileStat.isFile()) return file;
|
||||
} catch {
|
||||
// Try the next candidate.
|
||||
}
|
||||
}
|
||||
|
||||
return path.join(dist, '404.html');
|
||||
}
|
||||
|
||||
try {
|
||||
await stat(dist);
|
||||
} catch {
|
||||
throw new Error('dist/ does not exist. Run npm run build first.');
|
||||
}
|
||||
|
||||
// Some CI/dev containers mount /tmp as a very small tmpfs. Chromium uses the
|
||||
// process temp directory for profiles and internal files; putting it under the
|
||||
// already-ignored .astro/ directory keeps the overflow check reproducible even
|
||||
// when the system temp mount is full.
|
||||
await rm(browserTmp, { recursive: true, force: true });
|
||||
await mkdir(browserTmp, { recursive: true });
|
||||
process.env.TMPDIR = browserTmp;
|
||||
process.env.TMP = browserTmp;
|
||||
process.env.TEMP = browserTmp;
|
||||
await requireDist();
|
||||
await setupBrowserTmp(browserTmp);
|
||||
|
||||
const routes = await discoverRoutes();
|
||||
|
||||
const server = createServer(async (req, res) => {
|
||||
try {
|
||||
const file = await resolveFile(req.url ?? '/');
|
||||
const body = await readFile(file);
|
||||
res.writeHead(200, { 'content-type': contentType(file) });
|
||||
res.end(body);
|
||||
} catch (error) {
|
||||
res.writeHead(500, { 'content-type': 'text/plain; charset=utf-8' });
|
||||
res.end(String(error));
|
||||
}
|
||||
});
|
||||
|
||||
await new Promise((resolve) => server.listen(0, '127.0.0.1', resolve));
|
||||
const { port } = server.address();
|
||||
const { server, port } = await startDistServer();
|
||||
const failures = [];
|
||||
|
||||
function launchBrowser() {
|
||||
return chromium.launch({
|
||||
headless: true,
|
||||
env: {
|
||||
...process.env,
|
||||
TMPDIR: browserTmp,
|
||||
TMP: browserTmp,
|
||||
TEMP: browserTmp,
|
||||
},
|
||||
args: ['--disable-dev-shm-usage', '--disable-gpu', '--no-sandbox'],
|
||||
});
|
||||
}
|
||||
|
||||
async function withTimeout(promise, timeoutMs, label) {
|
||||
let timeout;
|
||||
try {
|
||||
return await Promise.race([
|
||||
promise,
|
||||
new Promise((_, reject) => {
|
||||
timeout = setTimeout(() => reject(new Error(label)), timeoutMs);
|
||||
}),
|
||||
]);
|
||||
} finally {
|
||||
clearTimeout(timeout);
|
||||
}
|
||||
}
|
||||
|
||||
async function safeClosePage(page) {
|
||||
await withTimeout(
|
||||
page.close(),
|
||||
CLOSE_TIMEOUT_MS,
|
||||
'Timed out while closing Playwright page'
|
||||
).catch(() => {});
|
||||
}
|
||||
|
||||
async function safeCloseContext(context) {
|
||||
await withTimeout(
|
||||
context.close(),
|
||||
CLOSE_TIMEOUT_MS,
|
||||
'Timed out while closing Playwright context'
|
||||
).catch(() => {});
|
||||
}
|
||||
|
||||
async function safeCloseBrowser(browser) {
|
||||
const childProcess = browser.process?.();
|
||||
try {
|
||||
await withTimeout(
|
||||
browser.close(),
|
||||
CLOSE_TIMEOUT_MS,
|
||||
'Timed out while closing Chromium'
|
||||
);
|
||||
} catch {
|
||||
childProcess?.kill('SIGKILL');
|
||||
}
|
||||
}
|
||||
|
||||
async function openBrowser() {
|
||||
return withTimeout(
|
||||
launchBrowser(),
|
||||
LAUNCH_TIMEOUT_MS,
|
||||
'Timed out while launching Chromium'
|
||||
);
|
||||
}
|
||||
|
||||
async function newMeasurementContext(browser, width) {
|
||||
const context = await browser.newContext({
|
||||
viewport: { width, height: 900 },
|
||||
|
|
@ -227,13 +59,6 @@ async function measureViewport(page) {
|
|||
}));
|
||||
}
|
||||
|
||||
function shouldRetryNavigation(error) {
|
||||
const message = error instanceof Error ? error.message : String(error);
|
||||
return /ERR_INSUFFICIENT_RESOURCES|Execution context was destroyed|Target.*closed|has been closed|Timed out while|navigation/i.test(
|
||||
message
|
||||
);
|
||||
}
|
||||
|
||||
async function measureRoute(context, route) {
|
||||
let page;
|
||||
try {
|
||||
|
|
@ -263,7 +88,7 @@ try {
|
|||
let browser;
|
||||
let context;
|
||||
try {
|
||||
browser = await openBrowser();
|
||||
browser = await openBrowser(browserTmp);
|
||||
context = await openMeasurementContext(browser, width);
|
||||
for (const route of routes) {
|
||||
let result;
|
||||
|
|
@ -278,7 +103,7 @@ try {
|
|||
}
|
||||
await safeCloseContext(context);
|
||||
await safeCloseBrowser(browser);
|
||||
browser = await openBrowser();
|
||||
browser = await openBrowser(browserTmp);
|
||||
context = await openMeasurementContext(browser, width);
|
||||
}
|
||||
}
|
||||
|
|
@ -296,7 +121,7 @@ try {
|
|||
}
|
||||
} finally {
|
||||
server.close();
|
||||
await rm(browserTmp, { recursive: true, force: true }).catch(() => {});
|
||||
await cleanupBrowserTmp(browserTmp);
|
||||
}
|
||||
|
||||
if (failures.length > 0) {
|
||||
|
|
|
|||
|
|
@ -1,115 +1,31 @@
|
|||
import { createServer } from 'node:http';
|
||||
import { mkdir, readdir, readFile, rm, stat } from 'node:fs/promises';
|
||||
import { readFile } from 'node:fs/promises';
|
||||
import path from 'node:path';
|
||||
import { chromium } from 'playwright';
|
||||
import {
|
||||
CONTEXT_TIMEOUT_MS,
|
||||
PAGE_TIMEOUT_MS,
|
||||
cleanupBrowserTmp,
|
||||
openBrowser,
|
||||
safeCloseBrowser,
|
||||
safeCloseContext,
|
||||
safeClosePage,
|
||||
setupBrowserTmp,
|
||||
shouldRetryNavigation,
|
||||
withTimeout,
|
||||
} from './lib/browser.mjs';
|
||||
import { discoverRoutes, requireDist, startDistServer } from './lib/dist.mjs';
|
||||
|
||||
const dist = path.resolve('dist');
|
||||
const previewCss = path.resolve('src/styles/global.css');
|
||||
const browserTmp = path.resolve('.astro', 'playwright-preview-cropping-tmp');
|
||||
const INDEX_FILE = 'index.html';
|
||||
const PREVIEW_SELECTOR = '[data-uncropped-preview]';
|
||||
// Common device widths: iPhone SE / Galaxy S / iPhone 14 / iPad portrait /
|
||||
// iPad landscape / common laptop / full HD desktop.
|
||||
const VIEWPORT_WIDTHS = [320, 390, 430, 768, 1024, 1440, 1920];
|
||||
const MAX_NAV_RETRIES = 4;
|
||||
const CLOSE_TIMEOUT_MS = 3000;
|
||||
const LAUNCH_TIMEOUT_MS = 10000;
|
||||
const CONTEXT_TIMEOUT_MS = 8000;
|
||||
const PAGE_TIMEOUT_MS = 15000;
|
||||
const MEASURE_TIMEOUT_MS = 30000;
|
||||
const CLIP_TOLERANCE_PX = 0.75;
|
||||
const RATIO_TOLERANCE = 0.01;
|
||||
|
||||
const MIME = {
|
||||
'.html': 'text/html; charset=utf-8',
|
||||
'.css': 'text/css; charset=utf-8',
|
||||
'.js': 'text/javascript; charset=utf-8',
|
||||
'.svg': 'image/svg+xml',
|
||||
'.png': 'image/png',
|
||||
'.jpg': 'image/jpeg',
|
||||
'.jpeg': 'image/jpeg',
|
||||
'.webp': 'image/webp',
|
||||
'.avif': 'image/avif',
|
||||
'.ico': 'image/x-icon',
|
||||
'.woff': 'font/woff',
|
||||
'.woff2': 'font/woff2',
|
||||
'.mp4': 'video/mp4',
|
||||
'.webm': 'video/webm',
|
||||
'.vtt': 'text/vtt; charset=utf-8',
|
||||
'.pdf': 'application/pdf',
|
||||
};
|
||||
|
||||
function contentType(file) {
|
||||
const ext = path.extname(file).toLowerCase();
|
||||
return MIME[ext] ?? 'application/octet-stream';
|
||||
}
|
||||
|
||||
async function walk(dir) {
|
||||
const entries = await readdir(dir, { withFileTypes: true });
|
||||
const files = [];
|
||||
|
||||
for (const entry of entries) {
|
||||
const fullPath = path.join(dir, entry.name);
|
||||
if (entry.isDirectory()) {
|
||||
files.push(...(await walk(fullPath)));
|
||||
} else {
|
||||
files.push(fullPath);
|
||||
}
|
||||
}
|
||||
|
||||
return files;
|
||||
}
|
||||
|
||||
async function discoverRoutes() {
|
||||
const files = await walk(dist);
|
||||
const routes = new Set();
|
||||
|
||||
for (const file of files) {
|
||||
if (!file.endsWith('.html')) continue;
|
||||
const rel = path.relative(dist, file).replaceAll(path.sep, '/');
|
||||
if (rel === '404.html') continue;
|
||||
if (rel === INDEX_FILE) {
|
||||
routes.add('/');
|
||||
} else if (rel.endsWith(`/${INDEX_FILE}`)) {
|
||||
routes.add('/' + rel.slice(0, -INDEX_FILE.length));
|
||||
} else {
|
||||
routes.add('/' + rel.replace(/\.html$/, '/'));
|
||||
}
|
||||
}
|
||||
|
||||
return [...routes].sort();
|
||||
}
|
||||
|
||||
async function resolveFile(url) {
|
||||
const parsed = new URL(url, 'http://localhost');
|
||||
const safePath = path
|
||||
.normalize(decodeURIComponent(parsed.pathname))
|
||||
.replace(/^\/+/, '')
|
||||
.replace(/^(\.\.(\/|\\|$))+/, '');
|
||||
const candidate = path.join(dist, safePath);
|
||||
const candidates = [
|
||||
candidate,
|
||||
path.join(candidate, 'index.html'),
|
||||
path.join(dist, `${safePath}.html`),
|
||||
];
|
||||
|
||||
for (const file of candidates) {
|
||||
try {
|
||||
const fileStat = await stat(file);
|
||||
if (fileStat.isFile()) return file;
|
||||
} catch {
|
||||
// Try the next candidate.
|
||||
}
|
||||
}
|
||||
|
||||
return path.join(dist, '404.html');
|
||||
}
|
||||
|
||||
try {
|
||||
await stat(dist);
|
||||
} catch {
|
||||
throw new Error('dist/ does not exist. Run npm run build first.');
|
||||
}
|
||||
await requireDist();
|
||||
|
||||
function lineAndColumn(text, index) {
|
||||
const before = text.slice(0, index);
|
||||
|
|
@ -197,95 +113,11 @@ async function checkPreviewCroppingStyles() {
|
|||
return styleFailures;
|
||||
}
|
||||
|
||||
// Keep Chromium temp files inside the repo so the check is reproducible in CI
|
||||
// containers with very small /tmp mounts.
|
||||
await rm(browserTmp, { recursive: true, force: true });
|
||||
await mkdir(browserTmp, { recursive: true });
|
||||
process.env.TMPDIR = browserTmp;
|
||||
process.env.TMP = browserTmp;
|
||||
process.env.TEMP = browserTmp;
|
||||
await setupBrowserTmp(browserTmp);
|
||||
|
||||
const routes = await discoverRoutes();
|
||||
const failures = await checkPreviewCroppingStyles();
|
||||
|
||||
const server = createServer(async (req, res) => {
|
||||
try {
|
||||
const file = await resolveFile(req.url ?? '/');
|
||||
const body = await readFile(file);
|
||||
res.writeHead(200, { 'content-type': contentType(file) });
|
||||
res.end(body);
|
||||
} catch (error) {
|
||||
res.writeHead(500, { 'content-type': 'text/plain; charset=utf-8' });
|
||||
res.end(String(error));
|
||||
}
|
||||
});
|
||||
|
||||
await new Promise((resolve) => server.listen(0, '127.0.0.1', resolve));
|
||||
const { port } = server.address();
|
||||
|
||||
function launchBrowser() {
|
||||
return chromium.launch({
|
||||
headless: true,
|
||||
env: {
|
||||
...process.env,
|
||||
TMPDIR: browserTmp,
|
||||
TMP: browserTmp,
|
||||
TEMP: browserTmp,
|
||||
},
|
||||
args: ['--disable-dev-shm-usage', '--disable-gpu', '--no-sandbox'],
|
||||
});
|
||||
}
|
||||
|
||||
async function withTimeout(promise, timeoutMs, label) {
|
||||
let timeout;
|
||||
try {
|
||||
return await Promise.race([
|
||||
promise,
|
||||
new Promise((_, reject) => {
|
||||
timeout = setTimeout(() => reject(new Error(label)), timeoutMs);
|
||||
}),
|
||||
]);
|
||||
} finally {
|
||||
clearTimeout(timeout);
|
||||
}
|
||||
}
|
||||
|
||||
async function safeClosePage(page) {
|
||||
await withTimeout(
|
||||
page.close(),
|
||||
CLOSE_TIMEOUT_MS,
|
||||
'Timed out while closing Playwright page'
|
||||
).catch(() => {});
|
||||
}
|
||||
|
||||
async function safeCloseContext(context) {
|
||||
await withTimeout(
|
||||
context.close(),
|
||||
CLOSE_TIMEOUT_MS,
|
||||
'Timed out while closing Playwright context'
|
||||
).catch(() => {});
|
||||
}
|
||||
|
||||
async function safeCloseBrowser(browser) {
|
||||
const childProcess = browser.process?.();
|
||||
try {
|
||||
await withTimeout(
|
||||
browser.close(),
|
||||
CLOSE_TIMEOUT_MS,
|
||||
'Timed out while closing Chromium'
|
||||
);
|
||||
} catch {
|
||||
childProcess?.kill('SIGKILL');
|
||||
}
|
||||
}
|
||||
|
||||
async function openBrowser() {
|
||||
return withTimeout(
|
||||
launchBrowser(),
|
||||
LAUNCH_TIMEOUT_MS,
|
||||
'Timed out while launching Chromium'
|
||||
);
|
||||
}
|
||||
const { server, port } = await startDistServer();
|
||||
|
||||
async function newMeasurementContext(browser, width) {
|
||||
const context = await browser.newContext({
|
||||
|
|
@ -451,13 +283,6 @@ async function inspectPreviews(page, route, width, phase, index = null) {
|
|||
);
|
||||
}
|
||||
|
||||
function shouldRetryNavigation(error) {
|
||||
const message = error instanceof Error ? error.message : String(error);
|
||||
return /ERR_INSUFFICIENT_RESOURCES|Execution context was destroyed|Target.*closed|has been closed|Timed out while|navigation/i.test(
|
||||
message
|
||||
);
|
||||
}
|
||||
|
||||
async function measureRoute(context, route, width) {
|
||||
let page;
|
||||
|
||||
|
|
@ -492,7 +317,7 @@ try {
|
|||
let context;
|
||||
|
||||
try {
|
||||
browser = await openBrowser();
|
||||
browser = await openBrowser(browserTmp);
|
||||
context = await openMeasurementContext(browser, width);
|
||||
|
||||
for (const route of routes) {
|
||||
|
|
@ -509,7 +334,7 @@ try {
|
|||
|
||||
await safeCloseContext(context);
|
||||
await safeCloseBrowser(browser);
|
||||
browser = await openBrowser();
|
||||
browser = await openBrowser(browserTmp);
|
||||
context = await openMeasurementContext(browser, width);
|
||||
}
|
||||
}
|
||||
|
|
@ -523,7 +348,7 @@ try {
|
|||
}
|
||||
} finally {
|
||||
server.close();
|
||||
await rm(browserTmp, { recursive: true, force: true }).catch(() => {});
|
||||
await cleanupBrowserTmp(browserTmp);
|
||||
}
|
||||
|
||||
if (failures.length > 0) {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,16 @@
|
|||
import { spawn } from 'node:child_process';
|
||||
import { once } from 'node:events';
|
||||
import { mkdir, readdir, rm, stat, writeFile } from 'node:fs/promises';
|
||||
import { mkdir, writeFile } from 'node:fs/promises';
|
||||
import { createServer as createNetServer } from 'node:net';
|
||||
import path from 'node:path';
|
||||
import { chromium } from 'playwright';
|
||||
import {
|
||||
cleanupBrowserTmp,
|
||||
openBrowser,
|
||||
safeCloseBrowser,
|
||||
setupBrowserTmp,
|
||||
} from './lib/browser.mjs';
|
||||
import { discoverRoutes, requireDist } from './lib/dist.mjs';
|
||||
|
||||
const dist = path.resolve('dist');
|
||||
const browserTmp = path.resolve('.astro', 'playwright-astro-audit-tmp');
|
||||
const outputJson = path.resolve(
|
||||
process.env.ASTRO_AUDIT_OUTPUT_JSON ?? '.astro/astro-audit-results.json'
|
||||
|
|
@ -19,7 +24,6 @@ const astroBin = path.resolve(
|
|||
process.platform === 'win32' ? 'astro.cmd' : 'astro'
|
||||
);
|
||||
const HOST = '127.0.0.1';
|
||||
const INDEX_FILE = 'index.html';
|
||||
const SERVER_START_TIMEOUT_MS = 60000;
|
||||
const CLOSE_TIMEOUT_MS = 3000;
|
||||
const NAV_TIMEOUT_MS = 20000;
|
||||
|
|
@ -51,21 +55,7 @@ function parseViewports(raw = process.env.ASTRO_AUDIT_VIEWPORTS ?? DEFAULT_VIEWP
|
|||
});
|
||||
}
|
||||
|
||||
async function walk(dir) {
|
||||
const entries = await readdir(dir, { withFileTypes: true });
|
||||
const files = [];
|
||||
for (const entry of entries) {
|
||||
const fullPath = path.join(dir, entry.name);
|
||||
if (entry.isDirectory()) {
|
||||
files.push(...(await walk(fullPath)));
|
||||
} else {
|
||||
files.push(fullPath);
|
||||
}
|
||||
}
|
||||
return files;
|
||||
}
|
||||
|
||||
async function discoverRoutes() {
|
||||
async function discoverAuditRoutes() {
|
||||
if (process.env.ASTRO_AUDIT_ROUTES) {
|
||||
return process.env.ASTRO_AUDIT_ROUTES.split(',')
|
||||
.map((route) => route.trim())
|
||||
|
|
@ -73,29 +63,8 @@ async function discoverRoutes() {
|
|||
.map((route) => (route.startsWith('/') ? route : `/${route}`));
|
||||
}
|
||||
|
||||
try {
|
||||
await stat(dist);
|
||||
} catch {
|
||||
throw new Error('dist/ does not exist. Run npm run build first.');
|
||||
}
|
||||
|
||||
const files = await walk(dist);
|
||||
const routes = new Set();
|
||||
for (const file of files) {
|
||||
if (!file.endsWith('.html')) continue;
|
||||
const rel = path.relative(dist, file).replaceAll(path.sep, '/');
|
||||
if (rel === '404.html') continue;
|
||||
|
||||
if (rel === INDEX_FILE) {
|
||||
routes.add('/');
|
||||
} else if (rel.endsWith(`/${INDEX_FILE}`)) {
|
||||
routes.add('/' + rel.slice(0, -INDEX_FILE.length));
|
||||
} else {
|
||||
routes.add('/' + rel.replace(/\.html$/, '/'));
|
||||
}
|
||||
}
|
||||
|
||||
return [...routes].sort();
|
||||
await requireDist();
|
||||
return discoverRoutes();
|
||||
}
|
||||
|
||||
async function getFreePort() {
|
||||
|
|
@ -169,20 +138,6 @@ async function stopProcess(child) {
|
|||
}
|
||||
}
|
||||
|
||||
async function safeCloseBrowser(browser) {
|
||||
const childProcess = browser?.process?.();
|
||||
try {
|
||||
await Promise.race([
|
||||
browser.close(),
|
||||
sleep(CLOSE_TIMEOUT_MS).then(() => {
|
||||
throw new Error('Timed out while closing Chromium');
|
||||
}),
|
||||
]);
|
||||
} catch {
|
||||
childProcess?.kill('SIGKILL');
|
||||
}
|
||||
}
|
||||
|
||||
function viewportLabel(viewport) {
|
||||
return `${viewport.width}x${viewport.height}`;
|
||||
}
|
||||
|
|
@ -385,19 +340,15 @@ function renderMarkdown(report) {
|
|||
}
|
||||
|
||||
const viewports = parseViewports();
|
||||
const routes = await discoverRoutes();
|
||||
const routes = await discoverAuditRoutes();
|
||||
|
||||
if (routes.length === 0) {
|
||||
throw new Error('No HTML routes found to audit.');
|
||||
}
|
||||
|
||||
await rm(browserTmp, { recursive: true, force: true });
|
||||
await mkdir(browserTmp, { recursive: true });
|
||||
await setupBrowserTmp(browserTmp);
|
||||
await mkdir(path.dirname(outputJson), { recursive: true });
|
||||
await mkdir(path.dirname(outputMarkdown), { recursive: true });
|
||||
process.env.TMPDIR = browserTmp;
|
||||
process.env.TMP = browserTmp;
|
||||
process.env.TEMP = browserTmp;
|
||||
|
||||
const port = await getFreePort();
|
||||
const baseUrl = `http://${HOST}:${port}/`;
|
||||
|
|
@ -409,16 +360,7 @@ try {
|
|||
devServer = startAstroDev(port);
|
||||
await waitForDevServer(baseUrl, devServer);
|
||||
|
||||
browser = await chromium.launch({
|
||||
headless: true,
|
||||
env: {
|
||||
...process.env,
|
||||
TMPDIR: browserTmp,
|
||||
TMP: browserTmp,
|
||||
TEMP: browserTmp,
|
||||
},
|
||||
args: ['--disable-dev-shm-usage', '--disable-gpu', '--no-sandbox'],
|
||||
});
|
||||
browser = await openBrowser(browserTmp);
|
||||
|
||||
for (const viewport of viewports) {
|
||||
const context = await browser.newContext({
|
||||
|
|
@ -480,5 +422,5 @@ try {
|
|||
} finally {
|
||||
if (browser) await safeCloseBrowser(browser);
|
||||
if (devServer) await stopProcess(devServer);
|
||||
await rm(browserTmp, { recursive: true, force: true }).catch(() => {});
|
||||
await cleanupBrowserTmp(browserTmp);
|
||||
}
|
||||
|
|
|
|||
89
scripts/lib/browser.mjs
Normal file
89
scripts/lib/browser.mjs
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
import { mkdir, rm } from 'node:fs/promises';
|
||||
import { chromium } from 'playwright';
|
||||
|
||||
export const CLOSE_TIMEOUT_MS = 3000;
|
||||
export const LAUNCH_TIMEOUT_MS = 10000;
|
||||
export const CONTEXT_TIMEOUT_MS = 8000;
|
||||
export const PAGE_TIMEOUT_MS = 15000;
|
||||
|
||||
// Chromium puts profiles and internal files in the process temp directory.
|
||||
// Some CI/dev containers mount /tmp as a very small tmpfs, so the checks point
|
||||
// it at an already-ignored directory under .astro/ instead.
|
||||
export async function setupBrowserTmp(browserTmp) {
|
||||
await rm(browserTmp, { recursive: true, force: true });
|
||||
await mkdir(browserTmp, { recursive: true });
|
||||
process.env.TMPDIR = browserTmp;
|
||||
process.env.TMP = browserTmp;
|
||||
process.env.TEMP = browserTmp;
|
||||
}
|
||||
|
||||
export async function cleanupBrowserTmp(browserTmp) {
|
||||
await rm(browserTmp, { recursive: true, force: true }).catch(() => {});
|
||||
}
|
||||
|
||||
export async function withTimeout(promise, timeoutMs, label) {
|
||||
let timeout;
|
||||
try {
|
||||
return await Promise.race([
|
||||
promise,
|
||||
new Promise((_, reject) => {
|
||||
timeout = setTimeout(() => reject(new Error(label)), timeoutMs);
|
||||
}),
|
||||
]);
|
||||
} finally {
|
||||
clearTimeout(timeout);
|
||||
}
|
||||
}
|
||||
|
||||
export async function safeClosePage(page) {
|
||||
await withTimeout(
|
||||
page.close(),
|
||||
CLOSE_TIMEOUT_MS,
|
||||
'Timed out while closing Playwright page'
|
||||
).catch(() => {});
|
||||
}
|
||||
|
||||
export async function safeCloseContext(context) {
|
||||
await withTimeout(
|
||||
context.close(),
|
||||
CLOSE_TIMEOUT_MS,
|
||||
'Timed out while closing Playwright context'
|
||||
).catch(() => {});
|
||||
}
|
||||
|
||||
export async function safeCloseBrowser(browser) {
|
||||
const childProcess = browser.process?.();
|
||||
try {
|
||||
await withTimeout(
|
||||
browser.close(),
|
||||
CLOSE_TIMEOUT_MS,
|
||||
'Timed out while closing Chromium'
|
||||
);
|
||||
} catch {
|
||||
childProcess?.kill('SIGKILL');
|
||||
}
|
||||
}
|
||||
|
||||
export function openBrowser(browserTmp) {
|
||||
return withTimeout(
|
||||
chromium.launch({
|
||||
headless: true,
|
||||
env: {
|
||||
...process.env,
|
||||
TMPDIR: browserTmp,
|
||||
TMP: browserTmp,
|
||||
TEMP: browserTmp,
|
||||
},
|
||||
args: ['--disable-dev-shm-usage', '--disable-gpu', '--no-sandbox'],
|
||||
}),
|
||||
LAUNCH_TIMEOUT_MS,
|
||||
'Timed out while launching Chromium'
|
||||
);
|
||||
}
|
||||
|
||||
export function shouldRetryNavigation(error) {
|
||||
const message = error instanceof Error ? error.message : String(error);
|
||||
return /ERR_INSUFFICIENT_RESOURCES|Execution context was destroyed|Target.*closed|has been closed|Timed out while|navigation/i.test(
|
||||
message
|
||||
);
|
||||
}
|
||||
108
scripts/lib/dist.mjs
Normal file
108
scripts/lib/dist.mjs
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
import { createServer } from 'node:http';
|
||||
import { readFile, stat } from 'node:fs/promises';
|
||||
import path from 'node:path';
|
||||
import { walk } from './walk.mjs';
|
||||
|
||||
export const dist = path.resolve('dist');
|
||||
|
||||
const INDEX_FILE = 'index.html';
|
||||
|
||||
export async function requireDist() {
|
||||
try {
|
||||
await stat(dist);
|
||||
} catch {
|
||||
throw new Error('dist/ does not exist. Run npm run build first.');
|
||||
}
|
||||
}
|
||||
|
||||
// Derives the site's route list from the HTML files in dist/.
|
||||
export async function discoverRoutes() {
|
||||
const files = await walk(dist);
|
||||
const routes = new Set();
|
||||
|
||||
for (const file of files) {
|
||||
if (!file.endsWith('.html')) continue;
|
||||
const rel = path.relative(dist, file).replaceAll(path.sep, '/');
|
||||
if (rel === '404.html') continue;
|
||||
if (rel === INDEX_FILE) {
|
||||
routes.add('/');
|
||||
} else if (rel.endsWith(`/${INDEX_FILE}`)) {
|
||||
routes.add('/' + rel.slice(0, -INDEX_FILE.length));
|
||||
} else {
|
||||
routes.add('/' + rel.replace(/\.html$/, '/'));
|
||||
}
|
||||
}
|
||||
|
||||
return [...routes].sort();
|
||||
}
|
||||
|
||||
// Maps a request URL (or pathname) to a file in dist/, mirroring static-host
|
||||
// semantics: the path itself, its directory index.html, or the extensionless
|
||||
// .html variant. Returns null when nothing matches.
|
||||
export async function resolveFile(url) {
|
||||
const parsed = new URL(url, 'http://localhost');
|
||||
const safePath = path
|
||||
.normalize(decodeURIComponent(parsed.pathname))
|
||||
.replace(/^\/+/, '')
|
||||
.replace(/^(\.\.(\/|\\|$))+/, '');
|
||||
const candidate = path.join(dist, safePath);
|
||||
const candidates = [
|
||||
candidate,
|
||||
path.join(candidate, 'index.html'),
|
||||
path.join(dist, `${safePath}.html`),
|
||||
];
|
||||
|
||||
for (const file of candidates) {
|
||||
try {
|
||||
const fileStat = await stat(file);
|
||||
if (fileStat.isFile()) return file;
|
||||
} catch {
|
||||
// Try the next candidate.
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
const MIME = {
|
||||
'.html': 'text/html; charset=utf-8',
|
||||
'.css': 'text/css; charset=utf-8',
|
||||
'.js': 'text/javascript; charset=utf-8',
|
||||
'.svg': 'image/svg+xml',
|
||||
'.png': 'image/png',
|
||||
'.jpg': 'image/jpeg',
|
||||
'.jpeg': 'image/jpeg',
|
||||
'.webp': 'image/webp',
|
||||
'.avif': 'image/avif',
|
||||
'.ico': 'image/x-icon',
|
||||
'.woff': 'font/woff',
|
||||
'.woff2': 'font/woff2',
|
||||
'.mp4': 'video/mp4',
|
||||
'.webm': 'video/webm',
|
||||
'.vtt': 'text/vtt; charset=utf-8',
|
||||
'.pdf': 'application/pdf',
|
||||
};
|
||||
|
||||
export function contentType(file) {
|
||||
const ext = path.extname(file).toLowerCase();
|
||||
return MIME[ext] ?? 'application/octet-stream';
|
||||
}
|
||||
|
||||
// Serves dist/ on an ephemeral localhost port, falling back to 404.html.
|
||||
// Returns the server (callers own closing it) and the assigned port.
|
||||
export async function startDistServer() {
|
||||
const server = createServer(async (req, res) => {
|
||||
try {
|
||||
const file = (await resolveFile(req.url ?? '/')) ?? path.join(dist, '404.html');
|
||||
const body = await readFile(file);
|
||||
res.writeHead(200, { 'content-type': contentType(file) });
|
||||
res.end(body);
|
||||
} catch (error) {
|
||||
res.writeHead(500, { 'content-type': 'text/plain; charset=utf-8' });
|
||||
res.end(String(error));
|
||||
}
|
||||
});
|
||||
|
||||
await new Promise((resolve) => server.listen(0, '127.0.0.1', resolve));
|
||||
return { server, port: server.address().port };
|
||||
}
|
||||
23
scripts/lib/walk.mjs
Normal file
23
scripts/lib/walk.mjs
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import { readdir, stat } from 'node:fs/promises';
|
||||
import path from 'node:path';
|
||||
|
||||
// Recursively lists every file under entryPath. A path that is itself a file
|
||||
// resolves to a single-element list, so callers can mix files and directories.
|
||||
export async function walk(entryPath) {
|
||||
const entryStat = await stat(entryPath);
|
||||
if (entryStat.isFile()) return [entryPath];
|
||||
|
||||
const entries = await readdir(entryPath, { withFileTypes: true });
|
||||
const files = [];
|
||||
|
||||
for (const entry of entries) {
|
||||
const fullPath = path.join(entryPath, entry.name);
|
||||
if (entry.isDirectory()) {
|
||||
files.push(...(await walk(fullPath)));
|
||||
} else {
|
||||
files.push(fullPath);
|
||||
}
|
||||
}
|
||||
|
||||
return files;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue