Migrate from webpack to vite (#37002)

Replace webpack with Vite 8 as the frontend bundler. Frontend build is around 3-4 times faster than before. Will work on all platforms including riscv64 (via wasm). `iife.js` is a classic render-blocking script in `<head>` (handles web components/early DOM setup). `index.js` is loaded as a `type="module"` script in the footer. All other JS chunks are also module scripts (supported in all browsers since 2018). Entry filenames are content-hashed (e.g. `index.C6Z2MRVQ.js`) and resolved at runtime via the Vite manifest, eliminating the `?v=` cache busting (which was unreliable in some scenarios like vscode dev build). Replaces: https://github.com/go-gitea/gitea/pull/36896 Fixes: https://github.com/go-gitea/gitea/issues/17793 Signed-off-by: silverwind <me@silverwind.io> Signed-off-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: Claude (Opus 4.6) <noreply@anthropic.com> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2026-03-29 12:24:30 +02:00
parent 6288c87181
commit 0ec66b5380
88 changed files with 1706 additions and 1727 deletions
@@ -0,0 +1,156 @@
+// Copyright 2026 The Gitea Authors. All rights reserved.
+// SPDX-License-Identifier: MIT
+
+package public
+
+import (
+	"io"
+	"path"
+	"sync"
+	"sync/atomic"
+	"time"
+
+	"code.gitea.io/gitea/modules/json"
+	"code.gitea.io/gitea/modules/log"
+	"code.gitea.io/gitea/modules/setting"
+)
+
+type manifestEntry struct {
+	File    string   `json:"file"`
+	Name    string   `json:"name"`
+	IsEntry bool     `json:"isEntry"`
+	CSS     []string `json:"css"`
+}
+
+type manifestDataStruct struct {
+	paths     map[string]string // unhashed path -> hashed path
+	names     map[string]string // hashed path -> entry name
+	modTime   int64
+	checkTime time.Time
+}
+
+var (
+	manifestData atomic.Pointer[manifestDataStruct]
+	manifestFS   = sync.OnceValue(AssetFS)
+)
+
+const manifestPath = "assets/.vite/manifest.json"
+
+func parseManifest(data []byte) (map[string]string, map[string]string) {
+	var manifest map[string]manifestEntry
+	if err := json.Unmarshal(data, &manifest); err != nil {
+		log.Error("Failed to parse frontend manifest: %v", err)
+		return nil, nil
+	}
+
+	paths := make(map[string]string)
+	names := make(map[string]string)
+	for _, entry := range manifest {
+		if !entry.IsEntry || entry.Name == "" {
+			continue
+		}
+		// Build unhashed key from file path: "js/index.js", "css/theme-gitea-dark.css"
+		dir := path.Dir(entry.File)
+		ext := path.Ext(entry.File)
+		key := dir + "/" + entry.Name + ext
+		paths[key] = entry.File
+		names[entry.File] = entry.Name
+		// Map associated CSS files, e.g. "css/index.css" -> "css/index.B3zrQPqD.css"
+		for _, css := range entry.CSS {
+			cssKey := path.Dir(css) + "/" + entry.Name + path.Ext(css)
+			paths[cssKey] = css
+			names[css] = entry.Name
+		}
+	}
+	return paths, names
+}
+
+func reloadManifest(existingData *manifestDataStruct) *manifestDataStruct {
+	now := time.Now()
+	data := existingData
+	if data != nil && now.Sub(data.checkTime) < time.Second {
+		// a single request triggers multiple calls to getHashedPath
+		// do not check the manifest file too frequently
+		return data
+	}
+
+	f, err := manifestFS().Open(manifestPath)
+	if err != nil {
+		log.Error("Failed to open frontend manifest: %v", err)
+		return data
+	}
+	defer f.Close()
+
+	fi, err := f.Stat()
+	if err != nil {
+		log.Error("Failed to stat frontend manifest: %v", err)
+		return data
+	}
+
+	needReload := data == nil || fi.ModTime().UnixNano() != data.modTime
+	if !needReload {
+		return data
+	}
+	manifestContent, err := io.ReadAll(f)
+	if err != nil {
+		log.Error("Failed to read frontend manifest: %v", err)
+		return data
+	}
+	return storeManifestFromBytes(manifestContent, fi.ModTime().UnixNano(), now)
+}
+
+func storeManifestFromBytes(manifestContent []byte, modTime int64, checkTime time.Time) *manifestDataStruct {
+	paths, names := parseManifest(manifestContent)
+	data := &manifestDataStruct{
+		paths:     paths,
+		names:     names,
+		modTime:   modTime,
+		checkTime: checkTime,
+	}
+	manifestData.Store(data)
+	return data
+}
+
+func getManifestData() *manifestDataStruct {
+	data := manifestData.Load()
+
+	// In production the manifest is immutable (embedded in the binary).
+	// In dev mode, check if it changed on disk (for watch-frontend).
+	if data == nil || !setting.IsProd {
+		data = reloadManifest(data)
+	}
+	if data == nil {
+		data = &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
+	}
+	return setting.StaticURLPrefix + "/assets/" + getHashedPath(originPath)
+}
+
+// AssetNameFromHashedPath returns the asset entry name for a given hashed asset path.
+// Example: returns "theme-gitea-dark" for "css/theme-gitea-dark.CyAaQnn5.css".
+// Returns empty string if the path is not found in the manifest.
+func AssetNameFromHashedPath(hashedPath string) string {
+	return getManifestData().names[hashedPath]
+}
@@ -0,0 +1,91 @@
+// Copyright 2026 The Gitea Authors. All rights reserved.
+// SPDX-License-Identifier: MIT
+
+package public
+
+import (
+	"testing"
+	"time"
+
+	"code.gitea.io/gitea/modules/setting"
+	"code.gitea.io/gitea/modules/test"
+
+	"github.com/stretchr/testify/assert"
+)
+
+func TestViteManifest(t *testing.T) {
+	defer test.MockVariableValue(&setting.IsProd, true)()
+
+	const testManifest = `{
+	"web_src/js/index.ts": {
+		"file": "js/index.C6Z2MRVQ.js",
+		"name": "index",
+		"src": "web_src/js/index.ts",
+		"isEntry": true,
+		"css": ["css/index.B3zrQPqD.css"]
+	},
+	"web_src/js/standalone/swagger.ts": {
+		"file": "js/swagger.SujiEmYM.js",
+		"name": "swagger",
+		"src": "web_src/js/standalone/swagger.ts",
+		"isEntry": true,
+		"css": ["css/swagger._-APWT_3.css"]
+	},
+	"web_src/css/themes/theme-gitea-dark.css": {
+		"file": "css/theme-gitea-dark.CyAaQnn5.css",
+		"name": "theme-gitea-dark",
+		"src": "web_src/css/themes/theme-gitea-dark.css",
+		"isEntry": true
+	},
+	"web_src/js/features/eventsource.sharedworker.ts": {
+		"file": "js/eventsource.sharedworker.Dug1twio.js",
+		"name": "eventsource.sharedworker",
+		"src": "web_src/js/features/eventsource.sharedworker.ts",
+		"isEntry": true
+	},
+	"_chunk.js": {
+		"file": "js/chunk.abc123.js",
+		"name": "chunk"
+	}
+}`
+
+	t.Run("EmptyManifest", func(t *testing.T) {
+		storeManifestFromBytes([]byte(``), 0, time.Now())
+		assert.Equal(t, "/assets/js/index.js", AssetURI("js/index.js"))
+		assert.Equal(t, "/assets/css/theme-gitea-dark.css", AssetURI("css/theme-gitea-dark.css"))
+		assert.Equal(t, "", AssetNameFromHashedPath("css/no-such-file.css"))
+	})
+
+	t.Run("ParseManifest", func(t *testing.T) {
+		storeManifestFromBytes([]byte(testManifest), 0, time.Now())
+		paths, names := manifestData.Load().paths, manifestData.Load().names
+
+		// JS entries
+		assert.Equal(t, "js/index.C6Z2MRVQ.js", paths["js/index.js"])
+		assert.Equal(t, "js/swagger.SujiEmYM.js", paths["js/swagger.js"])
+		assert.Equal(t, "js/eventsource.sharedworker.Dug1twio.js", paths["js/eventsource.sharedworker.js"])
+
+		// Associated CSS from JS entries
+		assert.Equal(t, "css/index.B3zrQPqD.css", paths["css/index.css"])
+		assert.Equal(t, "css/swagger._-APWT_3.css", paths["css/swagger.css"])
+
+		// CSS-only entries
+		assert.Equal(t, "css/theme-gitea-dark.CyAaQnn5.css", paths["css/theme-gitea-dark.css"])
+
+		// Non-entry chunks should not be included
+		assert.Empty(t, paths["js/chunk.js"])
+
+		// Names: hashed path -> entry name
+		assert.Equal(t, "index", names["js/index.C6Z2MRVQ.js"])
+		assert.Equal(t, "index", names["css/index.B3zrQPqD.css"])
+		assert.Equal(t, "swagger", names["js/swagger.SujiEmYM.js"])
+		assert.Equal(t, "swagger", names["css/swagger._-APWT_3.css"])
+		assert.Equal(t, "theme-gitea-dark", names["css/theme-gitea-dark.CyAaQnn5.css"])
+		assert.Equal(t, "eventsource.sharedworker", names["js/eventsource.sharedworker.Dug1twio.js"])
+
+		// Test Asset related functions
+		assert.Equal(t, "/assets/js/index.C6Z2MRVQ.js", AssetURI("js/index.js"))
+		assert.Equal(t, "/assets/css/theme-gitea-dark.CyAaQnn5.css", AssetURI("css/theme-gitea-dark.css"))
+		assert.Equal(t, "theme-gitea-dark", AssetNameFromHashedPath("css/theme-gitea-dark.CyAaQnn5.css"))
+	})
+}
@@ -0,0 +1,168 @@
+// Copyright 2026 The Gitea Authors. All rights reserved.
+// SPDX-License-Identifier: MIT
+
+package public
+
+import (
+	"net/http"
+	"net/http/httputil"
+	"net/url"
+	"os"
+	"path/filepath"
+	"strings"
+	"sync/atomic"
+	"time"
+
+	"code.gitea.io/gitea/modules/log"
+	"code.gitea.io/gitea/modules/setting"
+	"code.gitea.io/gitea/modules/web/routing"
+)
+
+const viteDevPortFile = "public/assets/.vite/dev-port"
+
+var viteDevProxy atomic.Pointer[httputil.ReverseProxy]
+
+func getViteDevProxy() *httputil.ReverseProxy {
+	if proxy := viteDevProxy.Load(); proxy != nil {
+		return proxy
+	}
+
+	portFile := filepath.Join(setting.StaticRootPath, viteDevPortFile)
+	data, err := os.ReadFile(portFile)
+	if err != nil {
+		return nil
+	}
+	port := strings.TrimSpace(string(data))
+	if port == "" {
+		return nil
+	}
+
+	target, err := url.Parse("http://localhost:" + port)
+	if err != nil {
+		log.Error("Failed to parse Vite dev server URL: %v", err)
+		return nil
+	}
+
+	// there is a strange error log (from Golang's HTTP package)
+	// 2026/03/28 19:50:13 modules/log/misc.go:72:(*loggerToWriter).Write() [I] Unsolicited response received on idle HTTP channel starting with "HTTP/1.1 400 Bad Request\r\n\r\n"; err=<nil>
+	// maybe it is caused by that the Vite dev server doesn't support keep-alive connections? or different keep-alive timeouts?
+	transport := &http.Transport{
+		IdleConnTimeout:       5 * time.Second,
+		ResponseHeaderTimeout: 5 * time.Second,
+	}
+	log.Info("Proxying Vite dev server requests to %s", target)
+	proxy := &httputil.ReverseProxy{
+		Transport: transport,
+		Rewrite: func(r *httputil.ProxyRequest) {
+			r.SetURL(target)
+			r.Out.Host = target.Host
+		},
+		ModifyResponse: func(resp *http.Response) error {
+			// add a header to indicate the Vite dev server port,
+			// make developers know that this request is proxied to Vite dev server and which port it is
+			resp.Header.Add("X-Gitea-Vite-Port", port)
+			return nil
+		},
+		ErrorHandler: func(w http.ResponseWriter, r *http.Request, err error) {
+			log.Error("Error proxying to Vite dev server: %v", err)
+			http.Error(w, "Error proxying to Vite dev server: "+err.Error(), http.StatusBadGateway)
+		},
+	}
+	viteDevProxy.Store(proxy)
+	return proxy
+}
+
+// ViteDevMiddleware proxies matching requests to the Vite dev server.
+// It is registered as middleware in non-production mode and lazily discovers
+// the Vite dev server port from the port file written by the viteDevServerPortPlugin.
+// It is needed because there are container-based development, only Gitea web server's port is exposed.
+func ViteDevMiddleware(next http.Handler) http.Handler {
+	return http.HandlerFunc(func(resp http.ResponseWriter, req *http.Request) {
+		if !isViteDevRequest(req) {
+			next.ServeHTTP(resp, req)
+			return
+		}
+		proxy := getViteDevProxy()
+		if proxy == nil {
+			next.ServeHTTP(resp, req)
+			return
+		}
+		routing.MarkLongPolling(resp, req)
+		proxy.ServeHTTP(resp, req)
+	})
+}
+
+// isViteDevMode returns true if the Vite dev server port file exists.
+// In production mode, the result is cached after the first check.
+func isViteDevMode() bool {
+	if setting.IsProd {
+		return false
+	}
+	portFile := filepath.Join(setting.StaticRootPath, viteDevPortFile)
+	_, err := os.Stat(portFile)
+	return err == nil
+}
+
+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/
+		themeFile := strings.TrimPrefix(name, "css/")
+		srcPath := filepath.Join(setting.StaticRootPath, "web_src/css/themes", themeFile)
+		if _, err := os.Stat(srcPath); err == nil {
+			return setting.AppSubURL + "/web_src/css/themes/" + themeFile
+		}
+		return ""
+	}
+	if strings.HasPrefix(name, "css/") {
+		return setting.AppSubURL + "/web_src/" + name
+	}
+	if name == "js/eventsource.sharedworker.js" {
+		return setting.AppSubURL + "/web_src/js/features/eventsource.sharedworker.ts"
+	}
+	if name == "js/iife.js" {
+		return setting.AppSubURL + "/web_src/js/__vite_iife.js"
+	}
+	if name == "js/index.js" {
+		return setting.AppSubURL + "/web_src/js/index.ts"
+	}
+	return ""
+}
+
+// isViteDevRequest returns true if the request should be proxied to the Vite dev server.
+// Ref: Vite source packages/vite/src/node/constants.ts and packages/vite/src/shared/constants.ts
+func isViteDevRequest(req *http.Request) bool {
+	if req.Header.Get("Upgrade") == "websocket" {
+		wsProtocol := req.Header.Get("Sec-WebSocket-Protocol")
+		return wsProtocol == "vite-hmr" || wsProtocol == "vite-ping"
+	}
+	path := req.URL.Path
+
+	// vite internal requests
+	if strings.HasPrefix(path, "/@vite/") /* HMR client */ ||
+		strings.HasPrefix(path, "/@fs/") /* out-of-root file access, see vite.config.ts: fs.allow */ ||
+		strings.HasPrefix(path, "/@id/") /* virtual modules */ {
+		return true
+	}
+
+	// local source requests (VITE-DEV-SERVER-SECURITY: don't serve sensitive files outside the allowed paths)
+	if strings.HasPrefix(path, "/node_modules/") ||
+		strings.HasPrefix(path, "/public/assets/") ||
+		strings.HasPrefix(path, "/web_src/") {
+		return true
+	}
+
+	// Vite uses a path relative to project root and adds "?import" to non-JS/CSS asset imports:
+	// - {WebSite}/public/assets/... (e.g. SVG icons from "{RepoRoot}/public/assets/img/svg/")
+	// - {WebSite}/assets/emoji.json: it is an exception for the frontend assets, it is imported by JS code, but:
+	//   - KEEP IN MIND: all static frontend assets are served from "{AssetFS}/assets" to "{WebSite}/assets" by Gitea Web Server
+	//   - "{AssetFS}" is a layered filesystem from "{RepoRoot}/public" or embedded assets, and user's custom files in "{CustomPath}/public"
+	//   - "{RepoRoot}/assets/emoji.json" just happens to have the dir name "assets", it is not related to frontend assets
+	//   - BAD DESIGN: indeed it is a "conflicted and polluted name" sample
+	if path == "/assets/emoji.json" {
+		return true
+	}
+	return false
+}