Fable clean up
This commit is contained in:
parent
3441a7e4af
commit
4ce8a4f41d
46 changed files with 642 additions and 911 deletions
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue