ruffle
ruffle copied to clipboard
web: Allow the use of tsx, and refactor panic screen to use tsx
It's so much nicer
At compile time, it's converted into regular javascript.
For example - though slightly modified as I've done other refactors to make things just generally cleaner around there. New code is actually cleaner than shown here.
const errorFooter = document.createElement("ul");
for (const linkInfo of footerInfo) {
const footerItem = document.createElement("li");
const footerLink = document.createElement("a");
footerLink.href = linkInfo.url;
footerLink.textContent = linkInfo.label;
if (linkInfo.url === "#") {
footerLink.id = "panic-view-details";
} else {
footerLink.target = "_top";
}
footerItem.appendChild(footerLink);
errorFooter.appendChild(footerItem);
}
// ...
const panicDiv = document.createElement("div");
panicDiv.id = "panic";
const panicTitle = document.createElement("div");
panicTitle.id = "panic-title";
panicTitle.textContent = text("panic-title");
panicDiv.appendChild(panicTitle);
const panicBody = document.createElement("div");
panicBody.id = "panic-body";
panicBody.appendChild(errorBody);
panicDiv.appendChild(panicBody);
const panicFooter = document.createElement("div");
panicFooter.id = "panic-footer";
panicFooter.appendChild(errorFooter);
panicDiv.appendChild(panicFooter);
this.container.textContent = "";
this.container.appendChild(panicDiv);
New code:
container.textContent = "";
container.appendChild(
<div id="panic">
<div id="panic-title">{text("panic-title")}</div>
<div id="panic-body">{errorBody}</div>
<div id="panic-footer">
<ul>
{actions.map((action) => (
<li>
<a
href={action.url}
target="_top"
id={
action.url === "#"
? "panic-view-details"
: undefined
}
>
{action.label}
</a>
</li>
))}
</ul>
</div>
</div>,
);