mercuryworkshop-mirror/scramjet
1
0
Fork 0
mirror of https://github.com/MercuryWorkshop/scramjet.git synced 2025-05-15 07:20:02 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #16 from gennaroterry/main

Browse source 
fix: Improve srcset rewriter to handle descriptors correctly.
This commit is contained in:
Percs 2024-11-17 17:17:02 -06:00 • committed by GitHub
commit f0ee17720d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 72 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/shared/rewriters/html.ts
View file

@ -52,10 +52,13 @@ export function rewriteHtml(
const script = (src) => new Element("script", { src }); const script = (src) => new Element("script", { src });
// for compatibility purpose
const base64Injected = bytesToBase64(new TextEncoder().encode(injected));
head.children.unshift( head.children.unshift(
script($scramjet.config.files.wasm), script($scramjet.config.files.wasm),
script($scramjet.config.files.shared), script($scramjet.config.files.shared),
script("data:application/javascript;base64," + btoa(injected)), script("data:application/javascript;base64," + base64Injected),
script($scramjet.config.files.client) script($scramjet.config.files.client)
); );
} }
@ -283,17 +286,20 @@ function traverseParsedHtml(
} }
export function rewriteSrcset(srcset: string, meta: URLMeta) { export function rewriteSrcset(srcset: string, meta: URLMeta) {
const urls = srcset.split(/ [0-9]+x,? ?/g); const sources = srcset.split(",").map((src) => src.trim());
if (!urls) return ""; const rewrittenSources = sources.map((source) => {
const sufixes = srcset.match(/ [0-9]+x,? ?/g); // Split into URLs and descriptors (if any)
if (!sufixes) return ""; // e.g. url0, url1 1.5x, url2 2x
const rewrittenUrls = urls.map((url, i) => { const [url, ...descriptors] = source.split(/\s+/);
if (url && sufixes[i]) {
return rewriteUrl(url, meta) + sufixes[i]; // Rewrite the URLs and keep the descriptors (if any)
} const rewrittenUrl = rewriteUrl(url.trim(), meta);
return descriptors.length > 0
? `${rewrittenUrl} ${descriptors.join(" ")}`
: rewrittenUrl;
}); });
return rewrittenUrls.join(""); return rewrittenSources.join(", ");
} }
// function base64ToBytes(base64) { // function base64ToBytes(base64) {

41
src/worker/error.ts
View file

@ -9,6 +9,14 @@ export function errorTemplate(trace: string, fetchedURL: string) {
reload.addEventListener("click", () => location.reload()); reload.addEventListener("click", () => location.reload());
version.textContent = ${JSON.stringify($scramjet.version.version)}; version.textContent = ${JSON.stringify($scramjet.version.version)};
build.textContent = ${JSON.stringify($scramjet.version.build)}; build.textContent = ${JSON.stringify($scramjet.version.build)};
document.getElementById('copy-button').addEventListener('click', async () => {
const text = document.getElementById('errorTrace').value;
await navigator.clipboard.writeText(text);
const btn = document.getElementById('copy-button');
btn.textContent = 'Copied!';
setTimeout(() => btn.textContent = 'Copy', 2000);
});
`; `;
return `<!DOCTYPE html> return `<!DOCTYPE html>
@ -94,10 +102,11 @@ export function errorTemplate(trace: string, fetchedURL: string) {
} }
#version-wrapper { #version-wrapper {
width: 100%; width: auto;
text-align: center; text-align: right;
position: absolute; position: absolute;
bottom: 0.2rem; top: 0.5rem;
right: 0.5rem;
font-size: 0.8rem; font-size: 0.8rem;
color: var(--shore)!important; color: var(--shore)!important;
i { i {
@ -107,6 +116,26 @@ export function errorTemplate(trace: string, fetchedURL: string) {
} }
z-index: 101; z-index: 101;
} }
#errorTrace-wrapper {
position: relative;
width: fit-content;
}
#copy-button {
position: absolute;
top: 0.5em;
right: 0.5em;
padding: 0.23em;
cursor: pointer;
opacity: 0;
transition: opacity 0.4s;
font-size: 0.9em;
}
#errorTrace-wrapper:hover #copy-button {
opacity: 1;
}
</style> </style>
</head> </head>
<body> <body>
@ -117,8 +146,10 @@ export function errorTemplate(trace: string, fetchedURL: string) {
<!-- <p id="errorMessage">Internal Server Error</p> --> <!-- <p id="errorMessage">Internal Server Error</p> -->
<div id="info"> <div id="info">
<textarea id="errorTrace" cols="40" rows="10" readonly> <div id="errorTrace-wrapper">
</textarea> <textarea id="errorTrace" cols="40" rows="10" readonly></textarea>
<button id="copy-button" class="primary">Copy</button>
</div>
<div id="troubleshooting"> <div id="troubleshooting">
<p>Try:</p> <p>Try:</p>
<ul> <ul>

22
src/worker/fetch.ts
View file

@ -178,11 +178,29 @@ export async function handleFetch(
this this
); );
} catch (err) { } catch (err) {
console.error("ERROR FROM SERVICE WORKER FETCH", err); const errorDetails = {
message: err.message,
url: request.url,
destination: request.destination,
timestamp: new Date().toISOString(),
};
if (err.stack) {
errorDetails["stack"] = err.stack;
}
console.error("ERROR FROM SERVICE WORKER FETCH: ", errorDetails);
if (!["document", "iframe"].includes(request.destination)) if (!["document", "iframe"].includes(request.destination))
return new Response(undefined, { status: 500 }); return new Response(undefined, { status: 500 });
return renderError(err, unrewriteUrl(request.url)); const formattedError = Object.entries(errorDetails)
.map(
([key, value]) =>
`${key.charAt(0).toUpperCase() + key.slice(1)}: ${value}`
)
.join("\n\n");
return renderError(formattedError, unrewriteUrl(request.url));
} }
} }