Avoid top-level await

web_src/css/swagger.css → web_src/css/swagger-render.css

@@ -1,9 +1,5 @@
 @import "../../node_modules/swagger-ui-dist/swagger-ui.css";
 
-body {
-  margin: 0;
-}
-
 html,
 html body,
 html .swagger-ui,
@@ -15,27 +11,3 @@ html .swagger-ui .scheme-container {
 html.dark-mode .swagger-ui table.headers td {
   color: var(--color-text) !important;
 }
-
-.swagger-back-link {
-  color: var(--color-primary);
-  text-decoration: none;
-  position: absolute;
-  top: 1rem;
-  right: 1.5rem;
-  display: flex;
-  align-items: center;
-}
-
-.swagger-back-link:hover {
-  text-decoration: underline;
-}
-
-.swagger-back-link svg {
-  color: inherit;
-  fill: currentcolor;
-  margin-right: 0.5rem;
-}
-
-.swagger-spec-content {
-  display: none;
-}

web_src/css/swagger-standalone.css

@@ -0,0 +1,29 @@
+@import "swagger-render.css";
+
+body {
+  margin: 0;
+}
+
+.swagger-back-link {
+  color: var(--color-primary);
+  text-decoration: none;
+  position: absolute;
+  top: 1rem;
+  right: 1.5rem;
+  display: flex;
+  align-items: center;
+}
+
+.swagger-back-link:hover {
+  text-decoration: underline;
+}
+
+.swagger-back-link svg {
+  color: inherit;
+  fill: currentcolor;
+  margin-right: 0.5rem;
+}
+
+.swagger-spec-content {
+  display: none;
+}

web_src/js/render/plugins/frontend-openapi-swagger.ts

@@ -2,12 +2,14 @@ import type {FrontendRenderFunc} from '../plugin.ts';
 import {initSwaggerUI} from '../swagger.ts';
 
 // HINT: SWAGGER-CSS-IMPORT: this import is also necessary when swagger is used as a frontend external render
-// It must be on top-level, doesn't work in a function
-// Static import doesn't work (it needs to use manifest.json to manually add the CSS file)
-await import('../../../css/swagger.css');
+// But it can't share the same CSS file with the standalone page: it triggers our Vite manifest parser's bug
+// Although single top-level "await import(css)" can work, it requires es2022.
+// Otherwise, single function-level "await import(css)" can't work due to Vite's dependency analysis and bundling.
+import '../../../css/swagger-render.css';
 
 export const frontendRender: FrontendRenderFunc = async (opts): Promise<boolean> => {
   try {
+    await import('../../../css/swagger-render.css');
     await initSwaggerUI(opts.container, {specText: opts.contentString()});
     return true;
   } catch (error) {

web_src/js/swagger.ts

@@ -1,6 +1,6 @@
 // FIXME: INCORRECT-VITE-MANIFEST-PARSER: it just happens to work for current dependencies
 // If this module depends on another one and that one imports "swagger.css", then {{AssetURI "css/swagger.css"}} won't work
-import '../css/swagger.css';
+import '../css/swagger-standalone.css';
 import {initSwaggerUI} from './render/swagger.ts';
 
 async function initGiteaAPIViewer() {