Frontend refactor: move Vue related code from index.js to components dir, and remove unused codes. (#17301)

* frontend refactor

* Apply suggestions from code review

Co-authored-by: delvh <[email protected]>

* Update templates/base/head.tmpl

Co-authored-by: delvh <[email protected]>

* Update docs/content/doc/developers/guidelines-frontend.md

Co-authored-by: Lunny Xiao <[email protected]>

* fix typo

* fix typo

* refactor PageData to pageData

* Apply suggestions from code review

Co-authored-by: delvh <[email protected]>

* Simply for the visual difference.

Co-authored-by: delvh <[email protected]>

* Revert "Apply suggestions from code review"

This reverts commit 4d78ad9.

Co-authored-by: delvh <[email protected]>
Co-authored-by: Lunny Xiao <[email protected]>
Co-authored-by: 6543 <[email protected]>

Author: 4 people

.eslintrc

@@ -3,8 +3,6 @@ reportUnusedDisableDirectives: true
 
 ignorePatterns:
   - /web_src/js/vendor
-  - /templates/repo/activity.tmpl
-  - /templates/repo/view_file.tmpl
 
 parserOptions:
   sourceType: module

.gitignore

@@ -9,6 +9,8 @@ _test
 
 # IntelliJ
 .idea
+# Goland's output filename can not be set manually
+/go_build_*
 
 # MS VSCode
 .vscode

docs/content/doc/developers/guidelines-frontend.md

@@ -0,0 +1,51 @@
+---
+date: "2021-10-13T16:00:00+02:00"
+title: "Guidelines for Frontend Development"
+slug: "guidelines-frontend"
+weight: 20
+toc: false
+draft: false
+menu:
+  sidebar:
+    parent: "developers"
+    name: "Guidelines for Frontend"
+    weight: 20
+    identifier: "guidelines-frontend"
+---
+
+# Guidelines for Frontend Development
+
+**Table of Contents**
+
+{{< toc >}}
+
+## Background
+
+Gitea uses [Less CSS](https://lesscss.org), [Fomantic-UI](https://fomantic-ui.com/introduction/getting-started.html) (based on [jQuery](https://api.jquery.com)) and [Vue2](https://vuejs.org/v2/guide/) for its frontend.
+
+The HTML pages are rendered by [Go HTML Template](https://pkg.go.dev/html/template)
+
+## General Guidelines
+
+We recommend [Google HTML/CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.html) and [Google JavaScript Style Guide](https://google.github.io/styleguide/jsguide.html)
+
+### Gitea specific guidelines:
+
+1. Every feature (Fomantic-UI/jQuery module) should be put in separate files/directories.
+2. HTML ids and classes should use kebab-case.
+3. HTML ids and classes used in JavaScript should be unique for the whole project, and should contain 2-3 feature related keywords. We recommend to use the `js-` prefix for classes that are only used in JavaScript.
+4. jQuery events across different features should use their own namespaces.
+5. CSS styling for classes provided by frameworks should not be overwritten. Always use new class-names to overwrite framework styles. We recommend to use the `us-` prefix for user defined styles.  
+6. The backend can pass complex data to the frontend by using `ctx.PageData["myModuleData"] = map[]{}`
+7. Simple pages and SEO-related pages use Go HTML Template render to generate static Fomantic-UI HTML output. Complex pages can use Vue2 (or Vue3 in future).
+
+## Legacy Problems and Solutions
+
+### Too much code in `web_src/index.js`
+
+Previously, most JavaScript code was written into `web_src/index.js` directly, making the file unmaintainable.
+Try to keep this file small by creating new modules instead. These modules can be put in the `web_src/js/features` directory for now.
+
+### Vue2/Vue3 and JSX
+
+Gitea is using Vue2 now, we plan to upgrade to Vue3. We decided not to introduce JSX to keep the HTML and the JavaScript code separated.

docs/content/doc/developers/hacking-on-gitea.en-us.md

@@ -132,7 +132,14 @@ See `make help` for all available `make` targets. Also see [`.drone.yml`](https:
 To run and continuously rebuild when source files change:
 
 ```bash
+# for both frontend and backend
 make watch
+
+# or: watch frontend files (html/js/css) only
+make watch-frontend
+
+# or: watch backend files (go) only
+make watch-backend
 ```
 
 On macOS, watching all backend source files may hit the default open files limit which can be increased via `ulimit -n 12288` for the current shell or in your shell startup file for all future shells.
@@ -167,7 +174,9 @@ make revive vet misspell-check
 
 ### Working on JS and CSS
 
-Either use the `watch-frontend` target mentioned above or just build once:
+Frontend development should follow [Guidelines for Frontend Development](./guidelines-frontend.md)
+
+To build with frontend resources, either use the `watch-frontend` target mentioned above or just build once:
 
 ```bash
 make build && ./gitea

modules/context/context.go

@@ -51,7 +51,7 @@ type Context struct {
 	Resp     ResponseWriter
 	Req      *http.Request
 	Data     map[string]interface{} // data used by MVC templates
-	PageData map[string]interface{} // data used by JavaScript modules in one page
+	PageData map[string]interface{} // data used by JavaScript modules in one page, it's `window.config.pageData`
 	Render   Render
 	translation.Locale
 	Cache   cache.Cache
@@ -645,9 +645,10 @@ func Contexter() func(next http.Handler) http.Handler {
 					"CurrentURL":    setting.AppSubURL + req.URL.RequestURI(),
 					"PageStartTime": startTime,
 					"Link":          link,
+					"IsProd":        setting.IsProd(),
 				},
 			}
-			// PageData is passed by reference, and it will be rendered to `window.config.PageData` in `head.tmpl` for JavaScript modules
+			// PageData is passed by reference, and it will be rendered to `window.config.pageData` in `head.tmpl` for JavaScript modules
 			ctx.PageData = map[string]interface{}{}
 			ctx.Data["PageData"] = ctx.PageData
 

routers/web/repo/activity.go

@@ -60,7 +60,7 @@ func Activity(ctx *context.Context) {
 		return
 	}
 
-	if ctx.Data["ActivityTopAuthors"], err = models.GetActivityStatsTopAuthors(ctx.Repo.Repository, timeFrom, 10); err != nil {
+	if ctx.PageData["repoActivityTopAuthors"], err = models.GetActivityStatsTopAuthors(ctx.Repo.Repository, timeFrom, 10); err != nil {
 		ctx.ServerError("GetActivityStatsTopAuthors", err)
 		return
 	}

routers/web/user/home.go

@@ -106,7 +106,10 @@ func Dashboard(ctx *context.Context) {
 	ctx.Data["Title"] = ctxUser.DisplayName() + " - " + ctx.Tr("dashboard")
 	ctx.Data["PageIsDashboard"] = true
 	ctx.Data["PageIsNews"] = true
-	ctx.Data["SearchLimit"] = setting.UI.User.RepoPagingNum
+
+	ctx.PageData["dashboardRepoList"] = map[string]interface{}{
+		"searchLimit": setting.UI.User.RepoPagingNum,
+	}
 
 	if setting.Service.EnableUserHeatmap {
 		data, err := models.GetUserHeatmapDataByUserTeam(ctxUser, ctx.Org.Team, ctx.User)

templates/base/head.tmpl

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html lang="{{.Lang}}" class="theme-{{.SignedUser.Theme}}">
-<head data-suburl="{{AppSubUrl}}">
+<head>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>{{if .Title}}{{.Title | RenderEmojiPlain}} - {{end}} {{if .Repository.Name}}{{.Repository.Name}} - {{end}}{{AppName}} </title>
@@ -12,15 +12,6 @@
 	<meta name="keywords" content="{{MetaKeywords}}">
 	<meta name="referrer" content="no-referrer" />
 	<meta name="_csrf" content="{{.CsrfToken}}" />
-	{{if .IsSigned}}
-		<meta name="_uid" content="{{.SignedUser.ID}}" />
-	{{end}}
-	{{if .ContextUser}}
-		<meta name="_context_uid" content="{{.ContextUser.ID}}" />
-	{{end}}
-	{{if .SearchLimit}}
-		<meta name="_search_limit" content="{{.SearchLimit}}" />
-	{{end}}
 {{if .GoGetImport}}
 	<meta name="go-import" content="{{.GoGetImport}} git {{.CloneLink.HTTPS}}">
 	<meta name="go-source" content="{{.GoGetImport}} _ {{.GoDocDirectory}} {{.GoDocFile}}">
@@ -31,10 +22,11 @@
 			AppVer: '{{AppVer}}',
 			AppSubUrl: '{{AppSubUrl}}',
 			AssetUrlPrefix: '{{AssetUrlPrefix}}',
+			IsProd: {{.IsProd}},
 			CustomEmojis: {{CustomEmojis}},
 			UseServiceWorker: {{UseServiceWorker}},
 			csrf: '{{.CsrfToken}}',
-			PageData: {{ .PageData }},
+			pageData: {{ .PageData }},
 			HighlightJS: {{if .RequireHighlightJS}}true{{else}}false{{end}},
 			SimpleMDE: {{if .RequireSimpleMDE}}true{{else}}false{{end}},
 			Tribute: {{if .RequireTribute}}true{{else}}false{{end}},

templates/repo/activity.tmpl

@@ -108,11 +108,8 @@
 						{{.i18n.Tr "repo.activity.git_stats_and_deletions" }}
 						<strong class="text red">{{.i18n.Tr (TrN .i18n.Lang .Activity.Code.Deletions "repo.activity.git_stats_deletion_1" "repo.activity.git_stats_deletion_n") .Activity.Code.Deletions }}</strong>.
 					</div>
-					<div class="ui attached segment" id="app">
-						<script type="text/javascript">
-						var ActivityTopAuthors = {{Json .ActivityTopAuthors | SafeJS}};
-						</script>
-						<activity-top-authors :data="activityTopAuthors" />
+					<div class="ui attached segment">
+						<div id="repo-activity-top-authors-chart"></div>
 					</div>
 				</div>
 			{{end}}
@@ -126,7 +123,7 @@
 			<div class="list">
 				{{range .Activity.PublishedReleases}}
 					<p class="desc">
-						<div class="ui green label">{{$.i18n.Tr "repo.activity.published_release_label"}}</div>
+						<span class="ui green label">{{$.i18n.Tr "repo.activity.published_release_label"}}</span>
 						{{.TagName}}
 						{{if not .IsTag}}
 							<a class="title" href="{{$.RepoLink}}/src/{{.TagName | EscapePound}}">{{.Title | RenderEmoji}}</a>
@@ -145,7 +142,7 @@
 			<div class="list">
 				{{range .Activity.MergedPRs}}
 					<p class="desc">
-						<div class="ui purple label">{{$.i18n.Tr "repo.activity.merged_prs_label"}}</div>
+						<span class="ui purple label">{{$.i18n.Tr "repo.activity.merged_prs_label"}}</span>
 						#{{.Index}} <a class="title" href="{{$.RepoLink}}/pulls/{{.Index}}">{{.Issue.Title | RenderEmoji}}</a>
 						{{TimeSinceUnix .MergedUnix $.Lang}}
 					</p>
@@ -161,7 +158,7 @@
 			<div class="list">
 				{{range .Activity.OpenedPRs}}
 					<p class="desc">
-						<div class="ui green label">{{$.i18n.Tr "repo.activity.opened_prs_label"}}</div>
+						<span class="ui green label">{{$.i18n.Tr "repo.activity.opened_prs_label"}}</span>
 						#{{.Index}} <a class="title" href="{{$.RepoLink}}/pulls/{{.Index}}">{{.Issue.Title | RenderEmoji}}</a>
 						{{TimeSinceUnix .Issue.CreatedUnix $.Lang}}
 					</p>
@@ -177,7 +174,7 @@
 			<div class="list">
 				{{range .Activity.ClosedIssues}}
 					<p class="desc">
-						<div class="ui red label">{{$.i18n.Tr "repo.activity.closed_issue_label"}}</div>
+						<span class="ui red label">{{$.i18n.Tr "repo.activity.closed_issue_label"}}</span>
 						#{{.Index}} <a class="title" href="{{$.RepoLink}}/issues/{{.Index}}">{{.Title | RenderEmoji}}</a>
 						{{TimeSinceUnix .ClosedUnix $.Lang}}
 					</p>
@@ -193,7 +190,7 @@
 			<div class="list">
 				{{range .Activity.OpenedIssues}}
 					<p class="desc">
-						<div class="ui green label">{{$.i18n.Tr "repo.activity.new_issue_label"}}</div>
+						<span class="ui green label">{{$.i18n.Tr "repo.activity.new_issue_label"}}</span>
 						#{{.Index}} <a class="title" href="{{$.RepoLink}}/issues/{{.Index}}">{{.Title | RenderEmoji}}</a>
 						{{TimeSinceUnix .CreatedUnix $.Lang}}
 					</p>
@@ -212,7 +209,7 @@
 			<div class="list">
 				{{range .Activity.UnresolvedIssues}}
 					<p class="desc">
-						<div class="ui green label">{{$.i18n.Tr "repo.activity.unresolved_conv_label"}}</div>
+						<span class="ui green label">{{$.i18n.Tr "repo.activity.unresolved_conv_label"}}</span>
 						#{{.Index}}
 						{{if .IsPull}}
 						<a class="title" href="{{$.RepoLink}}/pulls/{{.Index}}">{{.Title | RenderEmoji}}</a>

templates/repo/issue/view_content.tmpl

@@ -9,7 +9,7 @@
 	{{end}}
 
 	<!-- I know, there is probably a better way to do this (moved from sidebar.tmpl, original author: 6543 @ 2021-02-28) -->
-	<!-- Agree, there should be a better way, eg: introduce window.config.PageData (original author: wxiaoguang @ 2021-09-05) -->
+	<!-- Agree, there should be a better way, eg: introduce window.config.pageData (original author: wxiaoguang @ 2021-09-05) -->
 	<input type="hidden" id="repolink" value="{{$.RepoRelPath}}">
 	<input type="hidden" id="repoId" value="{{.Repository.ID}}">
 	<input type="hidden" id="issueIndex" value="{{.Issue.Index}}"/>