fix unclear js name mapping

Author: wxiaoguang

modules/markup/render.go

@@ -240,7 +240,7 @@ func RenderWithRenderer(ctx *RenderContext, renderer Renderer, input io.Reader,
 			return RenderIFrame(ctx, extOpts.ContentSandbox, output)
 		}
 		// else: this is a standalone page, fallthrough to the real rendering, and add extra JS/CSS
-		extraScriptSrc := public.AssetURI("js/standalone-external-render.js")
+		extraScriptSrc := public.AssetURI("js/external-render-helper.js")
 		// "<script>" must go before "<link>", to make Golang's http.DetectContentType() can still recognize the content as "text/html"
 		// DO NOT use "type=module", the script must run as early as possible, to set up the environment in the iframe
 		extraHeadHTML = htmlutil.HTMLFormat(`<script crossorigin src="%s"></script>`, extraScriptSrc)

modules/public/manifest.go

@@ -125,27 +125,33 @@ func getManifestData() *manifestDataStruct {
 	return data
 }
 
-// getHashedPath resolves an unhashed asset path (origin path) to its content-hashed path from the frontend manifest.
-// Example: getHashedPath("js/index.js") returns "js/index.C6Z2MRVQ.js"
-// Falls back to returning the input path unchanged if the manifest is unavailable.
-func getHashedPath(originPath string) string {
-	data := getManifestData()
-	if p, ok := data.paths[originPath]; ok {
-		return p
-	}
-	return originPath
-}
-
 // AssetURI returns the URI for a frontend asset.
 // It may return a relative path or a full URL depending on the StaticURLPrefix setting.
 // In Vite dev mode, known entry points are mapped to their source paths
 // so the reverse proxy serves them from the Vite dev server.
 // In production, it resolves the content-hashed path from the manifest.
 func AssetURI(originPath string) string {
-	if src := viteDevSourceURL(originPath); src != "" {
-		return src
+	if IsViteDevMode() {
+		if src := viteDevSourceURL(originPath); src != "" {
+			return src
+		}
+		// it should be caused by incorrect vite config
+		setting.PanicInDevOrTesting("Failed to locate local path for managed asset URI: %s", originPath)
 	}
-	return setting.StaticURLPrefix + "/assets/" + getHashedPath(originPath)
+
+	// Try to resolve an unhashed asset path (origin path) to its content-hashed path from the frontend manifest.
+	// Example: "js/index.js" -> "js/index.C6Z2MRVQ.js"
+	data := getManifestData()
+	assetPath := data.paths[originPath]
+	if assetPath == "" {
+		// it should be caused by either: "incorrect vite config" or "user's custom theme"
+		assetPath = originPath
+		if !setting.IsProd {
+			log.Warn("Failed to find managed asset URI for origin path: %s", originPath)
+		}
+	}
+
+	return setting.StaticURLPrefix + "/assets/" + assetPath
 }
 
 // AssetNameFromHashedPath returns the asset entry name for a given hashed asset path.

modules/public/vitedev.go

@@ -149,9 +149,6 @@ func detectWebSrcPath(webSrcPath string) string {
 }
 
 func viteDevSourceURL(name string) string {
-	if !IsViteDevMode() {
-		return ""
-	}
 	if strings.HasPrefix(name, "css/theme-") {
 		// Only redirect built-in themes to Vite source; custom themes are served from custom/public/assets/css/
 		themeFilePath := "css/themes/" + strings.TrimPrefix(name, "css/")

tests/integration/markup_external_test.go

@@ -108,7 +108,7 @@ func TestExternalMarkupRenderer(t *testing.T) {
 				// default sandbox in sub page response
 				assert.Equal(t, "frame-src 'self'; sandbox allow-scripts allow-popups", respSub.Header().Get("Content-Security-Policy"))
 				// FIXME: actually here is a bug (legacy design problem), the "PostProcess" will escape "<script>" tag, but it indeed is the sanitizer's job
-				assert.Equal(t, `<script crossorigin src="`+public.AssetURI("js/standalone-external-render.js")+`"></script><div><any attr="val">&lt;script&gt;&lt;/script&gt;</any></div>`, respSub.Body.String())
+				assert.Equal(t, `<script crossorigin src="`+public.AssetURI("js/external-render-helper.js")+`"></script><div><any attr="val">&lt;script&gt;&lt;/script&gt;</any></div>`, respSub.Body.String())
 			})
 		})
 
@@ -131,7 +131,7 @@ func TestExternalMarkupRenderer(t *testing.T) {
 			t.Run("HTMLContentWithExternalRenderIframeHelper", func(t *testing.T) {
 				req := NewRequest(t, "GET", "/user2/repo1/render/branch/master/html.no-sanitizer")
 				respSub := MakeRequest(t, req, http.StatusOK)
-				assert.Equal(t, `<script crossorigin src="`+public.AssetURI("js/standalone-external-render.js")+`"></script><script>foo("raw")</script>`, respSub.Body.String())
+				assert.Equal(t, `<script crossorigin src="`+public.AssetURI("js/external-render-helper.js")+`"></script><script>foo("raw")</script>`, respSub.Body.String())
 				assert.Equal(t, "frame-src 'self'", respSub.Header().Get("Content-Security-Policy"))
 			})
 		})

vite.config.ts

@@ -77,11 +77,13 @@ function commonViteOpts({build, ...other}: InlineConfig): InlineConfig {
   };
 }
 
-function iifeBuildOpts({sourceFileName, entryFileName, write}: {sourceFileName: string, entryFileName: string, write?: boolean}) {
+function iifeBuildOpts({sourceFileName, write}: {sourceFileName: string, write?: boolean}) {
   const sourceBaseName = basename(sourceFileName, '.ts');
+  // HINT: VITE-OUTPUT-DIR: all outputted JS files are in "js" directory
+  const entryFileName = `js/${sourceBaseName}.[hash:8].js`;
   return commonViteOpts({
     build: {
-      lib: {entry: join(import.meta.dirname, 'web_src', sourceFileName), name: camelize(sourceBaseName), formats: ['iife']},
+      lib: {entry: join(import.meta.dirname, 'web_src/js', sourceFileName), name: camelize(sourceBaseName), formats: ['iife']},
       rolldownOptions: {output: {entryFileNames: entryFileName}},
       ...(write === false && {write: false}),
     },
@@ -96,17 +98,12 @@ function iifePlugin(sourceFileName: string): Plugin {
   const iifeModules = new Set<string>();
   let isBuilding = false;
 
-  const sourceDir = path.dirname(sourceFileName), sourceBaseName = path.basename(sourceFileName, '.ts');
-  const sourcePathPrefix = `${sourceDir}/${sourceBaseName}`;
+  const sourceBaseName = path.basename(sourceFileName, '.ts');
   return {
-    name: `iife:${sourcePathPrefix}`, // plugin name
+    name: `iife:${sourceFileName}`, // plugin name
     async configureServer(server) {
       const buildAndCache = async () => {
-        const result = await build(iifeBuildOpts({
-          sourceFileName: `${sourcePathPrefix}.ts`,
-          entryFileName: `${sourceDir}/${sourceBaseName}.js`,
-          write: false,
-        }));
+        const result = await build(iifeBuildOpts({sourceFileName, write: false}));
         const output = (Array.isArray(result) ? result[0] : result) as Rolldown.RolldownOutput;
         const chunk = output.output[0];
         iifeCode = chunk.code.replace(/\/\/# sourceMappingURL=.*/, `//# sourceMappingURL=${sourceBaseName}.js.map`);
@@ -139,11 +136,11 @@ function iifePlugin(sourceFileName: string): Plugin {
         const pathname = req.url!.split('?')[0];
         if (pathname === '/web_src/js/__vite_dev_server_check') {
           res.end('ok');
-        } else if (pathname === `/web_src/${sourcePathPrefix}.ts`) {
+        } else if (pathname === `/web_src/js/${sourceFileName}`) {
           res.setHeader('Content-Type', 'application/javascript');
           res.setHeader('Cache-Control', 'no-store');
           res.end(iifeCode);
-        } else if (pathname === `/web_src/js/${sourcePathPrefix}.js.map`) {
+        } else if (pathname === `/web_src/js/${sourceBaseName}.js.map`) {
           res.setHeader('Content-Type', 'application/json');
           res.setHeader('Cache-Control', 'no-store');
           res.end(iifeMap);
@@ -153,32 +150,38 @@ function iifePlugin(sourceFileName: string): Plugin {
       });
     },
     async closeBundle() {
-      for (const file of globSync(`${sourcePathPrefix}.*.js*`, {cwd: outDir})) unlinkSync(join(outDir, file));
-      const result = await build(iifeBuildOpts({
-        sourceFileName: `${sourcePathPrefix}.ts`,
-        entryFileName: `${sourcePathPrefix}.[hash:8].js`,
-      }));
+      for (const file of globSync(`js/${sourceBaseName}.*.js*`, {cwd: outDir})) unlinkSync(join(outDir, file));
+
+      const result = await build(iifeBuildOpts({sourceFileName}));
       const buildOutput = (Array.isArray(result) ? result[0] : result) as Rolldown.RolldownOutput;
-      const entry = buildOutput.output.find((o) => o.fileName.startsWith(`${sourcePathPrefix}.`));
+      const entry = buildOutput.output.find((o) => o.fileName.startsWith(`js/${sourceBaseName}.`));
       if (!entry) throw new Error('IIFE build produced no output');
 
       const manifestPath = join(outDir, '.vite', 'manifest.json');
       const manifestData = JSON.parse(readFileSync(manifestPath, 'utf8'));
-      manifestData[`web_src/${sourcePathPrefix}.js`] = {file: entry.fileName, name: sourceBaseName, isEntry: true};
+      manifestData[`web_src/js/${sourceFileName}`] = {file: entry.fileName, name: sourceBaseName, isEntry: true};
       writeFileSync(manifestPath, JSON.stringify(manifestData, null, 2));
     },
   };
 }
 
 // In reduced sourcemap mode, only keep sourcemaps for main files
 function reducedSourcemapPlugin(): Plugin {
+  const standalonePrefixes = [
+    'js/index.',
+    'js/iife.',
+    'js/swagger.',
+    'js/external-render-helper.',
+    'js/eventsource.sharedworker.',
+  ];
   return {
     name: 'reduced-sourcemap',
     apply: 'build',
     closeBundle() {
       if (enableSourcemap !== 'reduced') return;
       for (const file of globSync('{js,css}/*.map', {cwd: outDir})) {
-        if (!file.startsWith('js/index.') && !file.startsWith('js/iife.') && !file.startsWith('js/standalone-')) unlinkSync(join(outDir, file));
+        if (standalonePrefixes.some((prefix) => file.startsWith(prefix))) continue;
+        unlinkSync(join(outDir, file));
       }
     },
   };
@@ -255,15 +258,15 @@ export default defineConfig(commonViteOpts({
     rolldownOptions: {
       input: {
         index: join(import.meta.dirname, 'web_src/js/index.ts'),
-        swagger: join(import.meta.dirname, 'web_src/js/standalone-swagger.ts'),
-        'external-render-iframe': join(import.meta.dirname, 'web_src/js/standalone-external-render.ts'),
-        'eventsource.sharedworker': join(import.meta.dirname, 'web_src/js/features/eventsource.sharedworker.ts'),
+        swagger: join(import.meta.dirname, 'web_src/js/swagger.ts'),
+        'eventsource.sharedworker': join(import.meta.dirname, 'web_src/js/eventsource.sharedworker.ts'),
         devtest: join(import.meta.dirname, 'web_src/css/devtest.css'),
         ...themes,
       },
       output: {
-        // all outputted JS files are in "/js" directory, so standalone source files should also be in "js" directory
-        // to keep consistent between production and dev server and avoid unexpected behaviors.
+        // HINT: VITE-OUTPUT-DIR: all outputted JS files are in "js" directory
+        // So standalone/iife source files should also be in "js" directory,
+        // to keep consistent between production and dev server, avoid unexpected behaviors.
         entryFileNames: 'js/[name].[hash:8].js',
         chunkFileNames: 'js/[name].[hash:8].js',
         assetFileNames: ({names}) => {
@@ -297,8 +300,8 @@ export default defineConfig(commonViteOpts({
     __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false,
   },
   plugins: [
-    iifePlugin('js/iife.ts'),
-    iifePlugin('js/standalone-external-render.ts'),
+    iifePlugin('iife.ts'),
+    iifePlugin('external-render-helper.ts'),
     viteDevServerPortPlugin(),
     reducedSourcemapPlugin(),
     filterCssUrlPlugin(),