Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 11 commits into from
Jul 4, 2024

Conversation

Dinnerbone
Copy link
Contributor

@Dinnerbone Dinnerbone commented Jun 30, 2024

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 Dinnerbone added web Issues relating to the HTML5 frontend waiting-on-review Waiting on review from a Ruffle team member labels Jul 2, 2024
@Dinnerbone Dinnerbone enabled auto-merge (rebase) July 4, 2024 11:26
@Dinnerbone Dinnerbone merged commit d0a37b3 into ruffle-rs:master Jul 4, 2024
16 of 17 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
waiting-on-review Waiting on review from a Ruffle team member web Issues relating to the HTML5 frontend
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant