refactor(client): extract bootstrap script into separate file

apps/client/src/index.html

@@ -24,87 +24,7 @@
         <!-- This works even when the user directly changes --root-background in CSS -->
         <div id="background-color-tracker" style="position: absolute; visibility: hidden; color: var(--root-background); transition: color 1ms;"></div>
 
-        <!-- Bootstrap (request server for required information) -->
+        <script src="./index.ts" type="module"></script>
-        <script>
-            async function bootstrap() {
-                await setupGlob();
-                loadStylesheets();
-                loadIcons();
-                setBodyAttributes();
-                await loadScripts();
-            }
-
-            async function setupGlob() {
-                const response = await fetch(`/bootstrap${window.location.search}`);
-                const json = await response.json();
-                
-                global = globalThis; /* fixes https://github.com/webpack/webpack/issues/10035 */
-                window.glob = {
-                    ...json,
-                    activeDialog: null
-                };
-            }
-
-            function loadStylesheets() {
-                const { assetPath, themeCssUrl, themeUseNextAsBase } = window.glob;
-                const cssToLoad = [];
-                cssToLoad.push(`${assetPath}/stylesheets/ckeditor-theme.css`);
-                cssToLoad.push(`api/fonts`);
-                cssToLoad.push(`${assetPath}/stylesheets/theme-light.css`);
-                if (themeCssUrl) {
-                    cssToLoad.push(themeCssUrl);
-                }
-                if (themeUseNextAsBase === "next") {
-                    cssToLoad.push(`${assetPath}/stylesheets/theme-next.css`)
-                } else if (themeUseNextAsBase === "next-dark") {
-                    cssToLoad.push(`${assetPath}/stylesheets/theme-next-dark.css`)
-                } else if (themeUseNextAsBase === "next-light") {
-                    cssToLoad.push(`${assetPath}/stylesheets/theme-next-light.css`)
-                }
-                cssToLoad.push(`${assetPath}/stylesheets/style.css`);
-
-                for (const href of cssToLoad) {
-                    const linkEl = document.createElement("link");
-                    linkEl.href = href;
-                    linkEl.rel = "stylesheet";
-                    document.body.appendChild(linkEl);
-                }
-            }
-
-            function loadIcons() {
-                const styleEl = document.createElement("style");
-                styleEl.innerText = window.glob.iconPackCss;
-                document.head.appendChild(styleEl);
-            }
-
-            function setBodyAttributes() {
-                const { device, headingStyle, layoutOrientation, platform, isElectron, hasNativeTitleBar, hasBackgroundEffects, currentLocale } = window.glob;
-                const classesToSet = [
-                    device,
-                    `heading-style-${headingStyle}`,
-                    `layout-${layoutOrientation}`,
-                    `platform-${platform}`,
-                    isElectron && "isElectron",
-                    hasNativeTitleBar && "native-titlebar",
-                    hasBackgroundEffects && "background-effects"
-                ].filter(Boolean);
-
-                for (const classToSet of classesToSet) {
-                    document.body.classList.add(classToSet);
-                }
-
-                document.body.lang = currentLocale.id;
-                document.body.dir = currentLocale.rtl ? "rtl" : "ltr";
-            }
-
-            async function loadScripts() {
-                const assetPath = glob.assetPath;
-                await import(`./${assetPath}/runtime.js`);
-                await import(`./${assetPath}/${glob.device}.js`);
-            }
-            
-            bootstrap();
-        </script>
 
         <!-- Required for correct loading of scripts in Electron -->
         <script>

apps/client/src/index.ts

@@ -0,0 +1,81 @@
+async function bootstrap() {
+    await setupGlob();
+    loadStylesheets();
+    loadIcons();
+    setBodyAttributes();
+    await loadScripts();
+}
+
+async function setupGlob() {
+    const response = await fetch(`/bootstrap${window.location.search}`);
+    const json = await response.json();
+
+    window.global = globalThis; /* fixes https://github.com/webpack/webpack/issues/10035 */
+    window.glob = {
+        ...json,
+        activeDialog: null
+    };
+}
+
+function loadStylesheets() {
+    const { assetPath, themeCssUrl, themeUseNextAsBase } = window.glob;
+    const cssToLoad: string[] = [];
+    cssToLoad.push(`${assetPath}/stylesheets/ckeditor-theme.css`);
+    cssToLoad.push(`api/fonts`);
+    cssToLoad.push(`${assetPath}/stylesheets/theme-light.css`);
+    if (themeCssUrl) {
+        cssToLoad.push(themeCssUrl);
+    }
+    if (themeUseNextAsBase === "next") {
+        cssToLoad.push(`${assetPath}/stylesheets/theme-next.css`)
+    } else if (themeUseNextAsBase === "next-dark") {
+        cssToLoad.push(`${assetPath}/stylesheets/theme-next-dark.css`)
+    } else if (themeUseNextAsBase === "next-light") {
+        cssToLoad.push(`${assetPath}/stylesheets/theme-next-light.css`)
+    }
+    cssToLoad.push(`${assetPath}/stylesheets/style.css`);
+
+    for (const href of cssToLoad) {
+        const linkEl = document.createElement("link");
+        linkEl.href = href;
+        linkEl.rel = "stylesheet";
+        document.body.appendChild(linkEl);
+    }
+}
+
+function loadIcons() {
+    const styleEl = document.createElement("style");
+    styleEl.innerText = window.glob.iconPackCss;
+    document.head.appendChild(styleEl);
+}
+
+function setBodyAttributes() {
+    const { device, headingStyle, layoutOrientation, platform, isElectron, hasNativeTitleBar, hasBackgroundEffects, currentLocale } = window.glob;
+    const classesToSet = [
+        device,
+        `heading-style-${headingStyle}`,
+        `layout-${layoutOrientation}`,
+        `platform-${platform}`,
+        isElectron && "isElectron",
+        hasNativeTitleBar && "native-titlebar",
+        hasBackgroundEffects && "background-effects"
+    ].filter(Boolean);
+
+    for (const classToSet of classesToSet) {
+        document.body.classList.add(classToSet);
+    }
+
+    document.body.lang = currentLocale.id;
+    document.body.dir = currentLocale.rtl ? "rtl" : "ltr";
+}
+
+async function loadScripts() {
+    await import("./runtime.js");
+    if (glob.device === "mobile") {
+        await import("./mobile.js");
+    } else {
+        await import("./desktop.js");
+    }
+}
+
+bootstrap();

apps/client/vite.config.mts

@@ -70,8 +70,7 @@ export default defineConfig(() => ({
         sourcemap: false,
         rollupOptions: {
             input: {
-                desktop: join(__dirname, "src", "desktop.html"),
+                index: join(__dirname, "src", "index.html"),
-                mobile: join(__dirname, "src", "mobile.ts"),
                 login: join(__dirname, "src", "login.ts"),
                 setup: join(__dirname, "src", "setup.ts"),
                 set_password: join(__dirname, "src", "set_password.ts"),

apps/server/src/routes/assets.ts

@@ -41,6 +41,10 @@ async function register(app: express.Application) {
             req.url = `/${assetUrlFragment}/src/index.html`;
             vite.middlewares(req, res, next);
         });
+        app.get(`/index.ts`, (req, res, next) => {
+            req.url = `/${assetUrlFragment}/src/index.ts`;
+            vite.middlewares(req, res, next);
+        });
         app.use(`/node_modules/@excalidraw/excalidraw/dist/prod`, persistentCacheStatic(path.join(srcRoot, "../../node_modules/@excalidraw/excalidraw/dist/prod")));
     } else {
         const publicDir = path.join(resourceDir, "public");