ruffle icon indicating copy to clipboard operation
ruffle copied to clipboard

web: Allow the use of tsx, and refactor panic screen to use tsx

Open Dinnerbone opened this issue 1 year ago • 0 comments

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>,
);

Dinnerbone avatar Jun 30 '24 22:06 Dinnerbone