rune-sdk/vite/plugins/transformHtml.js

Build a multiplayer game played by millions! Your game runs inside the Rune app with 10 million installs across [iOS](https://apps.apple.com/app/rune-games-and-voice-chat/id1450358364) and [Android](https://play.google.com/store/apps/details?id=ai.rune.ti

import { readFileSync } from "node:fs";
import { extractJsonTags } from "../lib/extractJsonTags.js";
export function getTransformHtmlForBuildPlugins(runePkgPath) {
    const runeVersion = JSON.parse(readFileSync(runePkgPath, "utf-8")).version;
    return [
        {
            name: "vite:rune-plugin:inject-runtime",
            apply: "build",
            enforce: "post",
            transformIndexHtml(html) {
                // Detect and extract application/json script tags from the head
                const { modifiedHtml, jsonScripts: scripts } = extractJsonTags(html);
                return {
                    //Remove the inlined logic file in case of build.
                    //Vite puts the chunks as link preload tags in html, and we want them to be simple script tags.
                    //Also remove client, so that logic & client scripts are next to each other
                    html: modifiedHtml
                        .replace(/<link.* href="(\.)*\/logic\.js">/, "")
                        .replace(/<script.* src="(\.)*\/client\.js"><\/script>/, ""),
                    tags: [
                        ...scripts,
                        {
                            tag: "script",
                            attrs: {
                                src: `https://cdn.jsdelivr.net/npm/rune-sdk@${runeVersion}/multiplayer.js`,
                            },
                            injectTo: "head-prepend",
                        },
                        //Actually insert the logic.js & client.js script tag.
                        {
                            tag: "script",
                            attrs: {
                                type: "module",
                                crossorigin: true,
                                src: "./logic.js",
                            },
                            injectTo: "head-prepend",
                        },
                        {
                            tag: "script",
                            attrs: {
                                type: "module",
                                crossorigin: true,
                                src: "./client.js",
                            },
                            injectTo: "head-prepend",
                        },
                    ],
                };
            },
        },
    ];
}