Merge some standalone Vite entries into index.js (#37085)

Keep `swagger` and `external-render-helper` as a standalone entries for
external render.

- Move `devtest.ts` to `modules/` as init functions
- Make external renders correctly load its helper JS and Gitea's current theme
- Make external render iframe inherit Gitea's iframe's background color to avoid flicker
- Add e2e tests for external render and OpenAPI iframe

---------

Co-authored-by: Claude (Opus 4.6) <noreply@anthropic.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

web_src/js/external-render-helper.ts

@@ -1,3 +1,7 @@
+// External render JS must be a IIFE module to run as early as possible to set up the environment for the content page.
+// Avoid unnecessary dependency.
+// Do NOT introduce global pollution, because the content page should be fully controlled by the external render.
+
 /* To manually test:
 
 [markup.in-iframe]
@@ -11,22 +15,39 @@ RENDER_COMMAND = `echo '<div style="width: 100%; height: 2000px; border: 10px so
 
 */
 
-import '../../css/standalone/external-render-iframe.css';
+const url = new URL(window.location.href);
 
-function mainExternalRenderIframe() {
-  const u = new URL(window.location.href);
-  const iframeId = u.searchParams.get('gitea-iframe-id');
+const isDarkTheme = url.searchParams.get('gitea-is-dark-theme') === 'true';
+if (isDarkTheme) {
+  document.documentElement.setAttribute('data-gitea-theme-dark', String(isDarkTheme));
+}
 
+const backgroundColor = url.searchParams.get('gitea-iframe-bgcolor');
+if (backgroundColor) {
+  // create a style element to set background color, then it can be overridden by the content page's own style if needed
+  const style = document.createElement('style');
+  style.textContent = `
+:root {
+  --gitea-iframe-bgcolor: ${backgroundColor};
+}
+body { background: ${backgroundColor}; }
+`;
+  document.head.append(style);
+}
+
+const iframeId = url.searchParams.get('gitea-iframe-id');
+if (iframeId) {
   // iframe is in different origin, so we need to use postMessage to communicate
   const postIframeMsg = (cmd: string, data: Record<string, any> = {}) => {
     window.parent.postMessage({giteaIframeCmd: cmd, giteaIframeId: iframeId, ...data}, '*');
   };
 
   const updateIframeHeight = () => {
-    // Don't use integer heights from the DOM node.
-    // Use getBoundingClientRect(), then ceil the height to avoid fractional pixels which causes incorrect scrollbars.
-    const rect = document.documentElement.getBoundingClientRect();
-    postIframeMsg('resize', {iframeHeight: Math.ceil(rect.height)});
+    if (!document.body) return; // the body might not be available when this function is called
+    // Use scrollHeight to get the full content height, even when CSS sets html/body to height:100%
+    // (which would make getBoundingClientRect return the viewport height instead of content height).
+    const height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
+    postIframeMsg('resize', {iframeHeight: height});
     // As long as the parent page is responsible for the iframe height, the iframe itself doesn't need scrollbars.
     // This style should only be dynamically set here when our code can run.
     document.documentElement.style.overflowY = 'hidden';
@@ -54,5 +75,3 @@ function mainExternalRenderIframe() {
     }
   });
 }
-
-mainExternalRenderIframe();

web_src/js/index.ts

@@ -67,6 +67,7 @@ import {callInitFunctions} from './modules/init.ts';
 import {initRepoViewFileTree} from './features/repo-view-file-tree.ts';
 import {initActionsPermissionsForm} from './features/common-actions-permissions.ts';
 import {initGlobalShortcut} from './modules/shortcut.ts';
+import {initDevtest} from './modules/devtest.ts';
 
 const initStartTime = performance.now();
 const initPerformanceTracer = callInitFunctions([
@@ -160,6 +161,8 @@ const initPerformanceTracer = callInitFunctions([
 
   initRepoFileView,
   initActionsPermissionsForm,
+
+  initDevtest,
 ]);
 
 // it must be the last one, then the "querySelectorAll" only needs to be executed once for global init functions.

web_src/js/markup/render-iframe.ts

@@ -29,6 +29,18 @@ export function navigateToIframeLink(unsafeLink: any, target: any) {
   window.location.assign(linkHref);
 }
 
+function getRealBackgroundColor(el: HTMLElement) {
+  for (let n = el; n; n = n.parentElement!) {
+    const style = window.getComputedStyle(n);
+    const bgColor = style.backgroundColor;
+    // 'rgba(0, 0, 0, 0)' is how most browsers represent transparent
+    if (bgColor !== 'rgba(0, 0, 0, 0)' && bgColor !== 'transparent') {
+      return bgColor;
+    }
+  }
+  return '';
+}
+
 async function loadRenderIframeContent(iframe: HTMLIFrameElement) {
   const iframeSrcUrl = iframe.getAttribute('data-src')!;
   if (!iframe.id) iframe.id = generateElemId('gitea-iframe-');
@@ -49,6 +61,7 @@ async function loadRenderIframeContent(iframe: HTMLIFrameElement) {
   const u = new URL(iframeSrcUrl, window.location.origin);
   u.searchParams.set('gitea-is-dark-theme', String(isDarkTheme()));
   u.searchParams.set('gitea-iframe-id', iframe.id);
+  u.searchParams.set('gitea-iframe-bgcolor', getRealBackgroundColor(iframe));
   iframe.src = u.href;
 }
 

web_src/js/modules/devtest.ts

@@ -0,0 +1,20 @@
+import {showInfoToast, showWarningToast, showErrorToast} from './toast.ts';
+import type {Toast} from './toast.ts';
+import {registerGlobalInitFunc} from './observer.ts';
+
+type LevelMap = Record<string, (message: string) => Toast | null>;
+
+export function initDevtest() {
+  registerGlobalInitFunc('initDevtestPage', () => {
+    const els = document.querySelectorAll('.toast-test-button');
+    if (!els.length) return;
+    const levelMap: LevelMap = {info: showInfoToast, warning: showWarningToast, error: showErrorToast};
+    for (const el of els) {
+      el.addEventListener('click', () => {
+        const level = el.getAttribute('data-toast-level')!;
+        const message = el.getAttribute('data-toast-message')!;
+        levelMap[level](message);
+      });
+    }
+  });
+}

web_src/js/standalone/devtest.ts

@@ -1,18 +0,0 @@
-import '../../css/standalone/devtest.css';
-import {showInfoToast, showWarningToast, showErrorToast, type Toast} from '../modules/toast.ts';
-
-type LevelMap = Record<string, (message: string) => Toast | null>;
-
-function initDevtestToast() {
-  const levelMap: LevelMap = {info: showInfoToast, warning: showWarningToast, error: showErrorToast};
-  for (const el of document.querySelectorAll('.toast-test-button')) {
-    el.addEventListener('click', () => {
-      const level = el.getAttribute('data-toast-level')!;
-      const message = el.getAttribute('data-toast-message')!;
-      levelMap[level](message);
-    });
-  }
-}
-
-// NOTICE: keep in mind that this file is not in "index.js", they do not share the same module system.
-initDevtestToast();

web_src/js/standalone/swagger.ts

@@ -1,48 +0,0 @@
-import '../../css/standalone/swagger.css';
-import SwaggerUI from 'swagger-ui-dist/swagger-ui-es-bundle.js';
-import 'swagger-ui-dist/swagger-ui.css';
-import {load as loadYaml} from 'js-yaml';
-
-const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
-const apply = () => document.documentElement.classList.toggle('dark-mode', prefersDark.matches);
-apply();
-prefersDark.addEventListener('change', apply);
-
-window.addEventListener('load', async () => {
-  const elSwaggerUi = document.querySelector('#swagger-ui')!;
-  const url = elSwaggerUi.getAttribute('data-source')!;
-  let spec: any;
-  if (url) {
-    const res = await fetch(url); // eslint-disable-line no-restricted-globals
-    spec = await res.json();
-  } else {
-    const elSpecContent = elSwaggerUi.querySelector<HTMLTextAreaElement>('.swagger-spec-content')!;
-    const filename = elSpecContent.getAttribute('data-spec-filename');
-    const isJson = filename?.toLowerCase().endsWith('.json');
-    spec = isJson ? JSON.parse(elSpecContent.value) : loadYaml(elSpecContent.value);
-  }
-
-  // Make the page's protocol be at the top of the schemes list
-  const proto = window.location.protocol.slice(0, -1);
-  if (spec?.schemes) {
-    spec.schemes.sort((a: string, b: string) => {
-      if (a === proto) return -1;
-      if (b === proto) return 1;
-      return 0;
-    });
-  }
-
-  SwaggerUI({
-    spec,
-    dom_id: '#swagger-ui',
-    deepLinking: true,
-    docExpansion: 'none',
-    defaultModelRendering: 'model', // don't show examples by default, because they may be incomplete
-    presets: [
-      SwaggerUI.presets.apis,
-    ],
-    plugins: [
-      SwaggerUI.plugins.DownloadUrl,
-    ],
-  });
-});

web_src/js/swagger.ts

@@ -0,0 +1,70 @@
+// AVOID importing other unneeded main site JS modules to prevent unnecessary code and dependencies and chunks.
+//
+// Swagger JS is standalone because it is also used by external render like "File View -> OpenAPI render",
+// and it doesn't need any code from main site's modules (at the moment).
+//
+// In the future, if there are common utilities needed by both main site and standalone Swagger,
+// we can merge this standalone module into "index.ts", do pay attention to the following problems:
+// * HINT: SWAGGER-OPENAPI-VIEWER: there are different places rendering the swagger UI.
+// * Handle CSS styles carefully for different cases (standalone page, embedded in iframe)
+// * Take care of the JS code introduced by "index.ts" and "iife.ts", there might be global variable dependency and event listeners.
+
+import '../css/swagger.css';
+import SwaggerUI from 'swagger-ui-dist/swagger-ui-es-bundle.js';
+import 'swagger-ui-dist/swagger-ui.css';
+import {load as loadYaml} from 'js-yaml';
+
+function syncDarkModeClass(): void {
+  // if the viewer is embedded in an iframe (external render), use the parent's theme (passed via query param)
+  // otherwise, if it is for Gitea's API, it is a standalone page, use the site's theme (detected from theme CSS variable)
+  const url = new URL(window.location.href);
+  const giteaIsDarkTheme = url.searchParams.get('gitea-is-dark-theme') ??
+    window.getComputedStyle(document.documentElement).getPropertyValue('--is-dark-theme').trim();
+  const isDark = giteaIsDarkTheme ? giteaIsDarkTheme === 'true' : window.matchMedia('(prefers-color-scheme: dark)').matches;
+  document.documentElement.classList.toggle('dark-mode', isDark);
+}
+
+async function initSwaggerUI() {
+  // swagger-ui has built-in dark mode triggered by html.dark-mode class
+  syncDarkModeClass();
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', syncDarkModeClass);
+
+  const elSwaggerUi = document.querySelector('#swagger-ui')!;
+  const url = elSwaggerUi.getAttribute('data-source')!;
+  let spec: any;
+  if (url) {
+    const res = await fetch(url); // eslint-disable-line no-restricted-globals
+    spec = await res.json();
+  } else {
+    const elSpecContent = elSwaggerUi.querySelector<HTMLTextAreaElement>('.swagger-spec-content')!;
+    const filename = elSpecContent.getAttribute('data-spec-filename');
+    const isJson = filename?.toLowerCase().endsWith('.json');
+    spec = isJson ? JSON.parse(elSpecContent.value) : loadYaml(elSpecContent.value);
+  }
+
+  // Make the page's protocol be at the top of the schemes list
+  const proto = window.location.protocol.slice(0, -1);
+  if (spec?.schemes) {
+    spec.schemes.sort((a: string, b: string) => {
+      if (a === proto) return -1;
+      if (b === proto) return 1;
+      return 0;
+    });
+  }
+
+  SwaggerUI({
+    spec,
+    dom_id: '#swagger-ui',
+    deepLinking: true,
+    docExpansion: 'none',
+    defaultModelRendering: 'model', // don't show examples by default, because they may be incomplete
+    presets: [
+      SwaggerUI.presets.apis,
+    ],
+    plugins: [
+      SwaggerUI.plugins.DownloadUrl,
+    ],
+  });
+}
+
+initSwaggerUI();