Skip to content

Commit 5636204

Browse files
wxiaoguangdelvhlunny6543
authored
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]>
1 parent 96ff3e3 commit 5636204

20 files changed

+718
-634
lines changed

‎.eslintrc

-2
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@ reportUnusedDisableDirectives: true
33

44
ignorePatterns:
55
- /web_src/js/vendor
6-
- /templates/repo/activity.tmpl
7-
- /templates/repo/view_file.tmpl
86

97
parserOptions:
108
sourceType: module

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ _test
99

1010
# IntelliJ
1111
.idea
12+
# Goland's output filename can not be set manually
13+
/go_build_*
1214

1315
# MS VSCode
1416
.vscode

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

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
---
2+
date: "2021-10-13T16:00:00+02:00"
3+
title: "Guidelines for Frontend Development"
4+
slug: "guidelines-frontend"
5+
weight: 20
6+
toc: false
7+
draft: false
8+
menu:
9+
sidebar:
10+
parent: "developers"
11+
name: "Guidelines for Frontend"
12+
weight: 20
13+
identifier: "guidelines-frontend"
14+
---
15+
16+
# Guidelines for Frontend Development
17+
18+
**Table of Contents**
19+
20+
{{< toc >}}
21+
22+
## Background
23+
24+
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.
25+
26+
The HTML pages are rendered by [Go HTML Template](https://pkg.go.dev/html/template)
27+
28+
## General Guidelines
29+
30+
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)
31+
32+
### Gitea specific guidelines:
33+
34+
1. Every feature (Fomantic-UI/jQuery module) should be put in separate files/directories.
35+
2. HTML ids and classes should use kebab-case.
36+
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.
37+
4. jQuery events across different features should use their own namespaces.
38+
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.
39+
6. The backend can pass complex data to the frontend by using `ctx.PageData["myModuleData"] = map[]{}`
40+
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).
41+
42+
## Legacy Problems and Solutions
43+
44+
### Too much code in `web_src/index.js`
45+
46+
Previously, most JavaScript code was written into `web_src/index.js` directly, making the file unmaintainable.
47+
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.
48+
49+
### Vue2/Vue3 and JSX
50+
51+
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

+10-1
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,14 @@ See `make help` for all available `make` targets. Also see [`.drone.yml`](https:
132132
To run and continuously rebuild when source files change:
133133

134134
```bash
135+
# for both frontend and backend
135136
make watch
137+
138+
# or: watch frontend files (html/js/css) only
139+
make watch-frontend
140+
141+
# or: watch backend files (go) only
142+
make watch-backend
136143
```
137144

138145
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
167174

168175
### Working on JS and CSS
169176

170-
Either use the `watch-frontend` target mentioned above or just build once:
177+
Frontend development should follow [Guidelines for Frontend Development](./guidelines-frontend.md)
178+
179+
To build with frontend resources, either use the `watch-frontend` target mentioned above or just build once:
171180

172181
```bash
173182
make build && ./gitea

‎modules/context/context.go

+3-2
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ type Context struct {
5151
Resp ResponseWriter
5252
Req *http.Request
5353
Data map[string]interface{} // data used by MVC templates
54-
PageData map[string]interface{} // data used by JavaScript modules in one page
54+
PageData map[string]interface{} // data used by JavaScript modules in one page, it's `window.config.pageData`
5555
Render Render
5656
translation.Locale
5757
Cache cache.Cache
@@ -645,9 +645,10 @@ func Contexter() func(next http.Handler) http.Handler {
645645
"CurrentURL": setting.AppSubURL + req.URL.RequestURI(),
646646
"PageStartTime": startTime,
647647
"Link": link,
648+
"IsProd": setting.IsProd(),
648649
},
649650
}
650-
// PageData is passed by reference, and it will be rendered to `window.config.PageData` in `head.tmpl` for JavaScript modules
651+
// PageData is passed by reference, and it will be rendered to `window.config.pageData` in `head.tmpl` for JavaScript modules
651652
ctx.PageData = map[string]interface{}{}
652653
ctx.Data["PageData"] = ctx.PageData
653654

‎routers/web/repo/activity.go

+1-1
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ func Activity(ctx *context.Context) {
6060
return
6161
}
6262

63-
if ctx.Data["ActivityTopAuthors"], err = models.GetActivityStatsTopAuthors(ctx.Repo.Repository, timeFrom, 10); err != nil {
63+
if ctx.PageData["repoActivityTopAuthors"], err = models.GetActivityStatsTopAuthors(ctx.Repo.Repository, timeFrom, 10); err != nil {
6464
ctx.ServerError("GetActivityStatsTopAuthors", err)
6565
return
6666
}

‎routers/web/user/home.go

+4-1
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,10 @@ func Dashboard(ctx *context.Context) {
106106
ctx.Data["Title"] = ctxUser.DisplayName() + " - " + ctx.Tr("dashboard")
107107
ctx.Data["PageIsDashboard"] = true
108108
ctx.Data["PageIsNews"] = true
109-
ctx.Data["SearchLimit"] = setting.UI.User.RepoPagingNum
109+
110+
ctx.PageData["dashboardRepoList"] = map[string]interface{}{
111+
"searchLimit": setting.UI.User.RepoPagingNum,
112+
}
110113

111114
if setting.Service.EnableUserHeatmap {
112115
data, err := models.GetUserHeatmapDataByUserTeam(ctxUser, ctx.Org.Team, ctx.User)

‎templates/base/head.tmpl

+3-11
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!DOCTYPE html>
22
<html lang="{{.Lang}}" class="theme-{{.SignedUser.Theme}}">
3-
<head data-suburl="{{AppSubUrl}}">
3+
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<title>{{if .Title}}{{.Title | RenderEmojiPlain}} - {{end}} {{if .Repository.Name}}{{.Repository.Name}} - {{end}}{{AppName}} </title>
@@ -12,15 +12,6 @@
1212
<meta name="keywords" content="{{MetaKeywords}}">
1313
<meta name="referrer" content="no-referrer" />
1414
<meta name="_csrf" content="{{.CsrfToken}}" />
15-
{{if .IsSigned}}
16-
<meta name="_uid" content="{{.SignedUser.ID}}" />
17-
{{end}}
18-
{{if .ContextUser}}
19-
<meta name="_context_uid" content="{{.ContextUser.ID}}" />
20-
{{end}}
21-
{{if .SearchLimit}}
22-
<meta name="_search_limit" content="{{.SearchLimit}}" />
23-
{{end}}
2415
{{if .GoGetImport}}
2516
<meta name="go-import" content="{{.GoGetImport}} git {{.CloneLink.HTTPS}}">
2617
<meta name="go-source" content="{{.GoGetImport}} _ {{.GoDocDirectory}} {{.GoDocFile}}">
@@ -31,10 +22,11 @@
3122
AppVer: '{{AppVer}}',
3223
AppSubUrl: '{{AppSubUrl}}',
3324
AssetUrlPrefix: '{{AssetUrlPrefix}}',
25+
IsProd: {{.IsProd}},
3426
CustomEmojis: {{CustomEmojis}},
3527
UseServiceWorker: {{UseServiceWorker}},
3628
csrf: '{{.CsrfToken}}',
37-
PageData: {{ .PageData }},
29+
pageData: {{ .PageData }},
3830
HighlightJS: {{if .RequireHighlightJS}}true{{else}}false{{end}},
3931
SimpleMDE: {{if .RequireSimpleMDE}}true{{else}}false{{end}},
4032
Tribute: {{if .RequireTribute}}true{{else}}false{{end}},

‎templates/repo/activity.tmpl

+8-11
Original file line numberDiff line numberDiff line change
@@ -108,11 +108,8 @@
108108
{{.i18n.Tr "repo.activity.git_stats_and_deletions" }}
109109
<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>.
110110
</div>
111-
<div class="ui attached segment" id="app">
112-
<script type="text/javascript">
113-
var ActivityTopAuthors = {{Json .ActivityTopAuthors | SafeJS}};
114-
</script>
115-
<activity-top-authors :data="activityTopAuthors" />
111+
<div class="ui attached segment">
112+
<div id="repo-activity-top-authors-chart"></div>
116113
</div>
117114
</div>
118115
{{end}}
@@ -126,7 +123,7 @@
126123
<div class="list">
127124
{{range .Activity.PublishedReleases}}
128125
<p class="desc">
129-
<div class="ui green label">{{$.i18n.Tr "repo.activity.published_release_label"}}</div>
126+
<span class="ui green label">{{$.i18n.Tr "repo.activity.published_release_label"}}</span>
130127
{{.TagName}}
131128
{{if not .IsTag}}
132129
<a class="title" href="{{$.RepoLink}}/src/{{.TagName | EscapePound}}">{{.Title | RenderEmoji}}</a>
@@ -145,7 +142,7 @@
145142
<div class="list">
146143
{{range .Activity.MergedPRs}}
147144
<p class="desc">
148-
<div class="ui purple label">{{$.i18n.Tr "repo.activity.merged_prs_label"}}</div>
145+
<span class="ui purple label">{{$.i18n.Tr "repo.activity.merged_prs_label"}}</span>
149146
#{{.Index}} <a class="title" href="{{$.RepoLink}}/pulls/{{.Index}}">{{.Issue.Title | RenderEmoji}}</a>
150147
{{TimeSinceUnix .MergedUnix $.Lang}}
151148
</p>
@@ -161,7 +158,7 @@
161158
<div class="list">
162159
{{range .Activity.OpenedPRs}}
163160
<p class="desc">
164-
<div class="ui green label">{{$.i18n.Tr "repo.activity.opened_prs_label"}}</div>
161+
<span class="ui green label">{{$.i18n.Tr "repo.activity.opened_prs_label"}}</span>
165162
#{{.Index}} <a class="title" href="{{$.RepoLink}}/pulls/{{.Index}}">{{.Issue.Title | RenderEmoji}}</a>
166163
{{TimeSinceUnix .Issue.CreatedUnix $.Lang}}
167164
</p>
@@ -177,7 +174,7 @@
177174
<div class="list">
178175
{{range .Activity.ClosedIssues}}
179176
<p class="desc">
180-
<div class="ui red label">{{$.i18n.Tr "repo.activity.closed_issue_label"}}</div>
177+
<span class="ui red label">{{$.i18n.Tr "repo.activity.closed_issue_label"}}</span>
181178
#{{.Index}} <a class="title" href="{{$.RepoLink}}/issues/{{.Index}}">{{.Title | RenderEmoji}}</a>
182179
{{TimeSinceUnix .ClosedUnix $.Lang}}
183180
</p>
@@ -193,7 +190,7 @@
193190
<div class="list">
194191
{{range .Activity.OpenedIssues}}
195192
<p class="desc">
196-
<div class="ui green label">{{$.i18n.Tr "repo.activity.new_issue_label"}}</div>
193+
<span class="ui green label">{{$.i18n.Tr "repo.activity.new_issue_label"}}</span>
197194
#{{.Index}} <a class="title" href="{{$.RepoLink}}/issues/{{.Index}}">{{.Title | RenderEmoji}}</a>
198195
{{TimeSinceUnix .CreatedUnix $.Lang}}
199196
</p>
@@ -212,7 +209,7 @@
212209
<div class="list">
213210
{{range .Activity.UnresolvedIssues}}
214211
<p class="desc">
215-
<div class="ui green label">{{$.i18n.Tr "repo.activity.unresolved_conv_label"}}</div>
212+
<span class="ui green label">{{$.i18n.Tr "repo.activity.unresolved_conv_label"}}</span>
216213
#{{.Index}}
217214
{{if .IsPull}}
218215
<a class="title" href="{{$.RepoLink}}/pulls/{{.Index}}">{{.Title | RenderEmoji}}</a>

‎templates/repo/issue/view_content.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
{{end}}
1010

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

‎templates/repo/view_file.tmpl

-10
Original file line numberDiff line numberDiff line change
@@ -131,13 +131,3 @@
131131
</div>
132132
</div>
133133
</div>
134-
135-
<script>
136-
function submitDeleteForm() {
137-
var message = prompt("{{.i18n.Tr "repo.delete_confirm_message"}}\n\n{{.i18n.Tr "repo.delete_commit_summary"}}", "Delete '{{.TreeName}}'");
138-
if (message != null) {
139-
$("#delete-message").val(message);
140-
$("#delete-file-form").submit()
141-
}
142-
}
143-
</script>

‎templates/user/dashboard/repolist.tmpl

+6-7
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
<div id="app" class="six wide column">
1+
<div id="dashboard-repo-list" class="six wide column">
22
<repo-search
33
:search-limit="searchLimit"
4-
:suburl="suburl"
5-
:uid="uid"
4+
:sub-url="subUrl"
65
{{if .Team}}
76
:team-id="{{.Team.ID}}"
87
{{end}}
@@ -31,7 +30,7 @@
3130
{{.i18n.Tr "home.my_repos"}}
3231
<span class="ui grey label ml-3">${reposTotalCount}</span>
3332
</div>
34-
<a class="poping up" :href="suburl + '/repo/create'" data-content="{{.i18n.Tr "new_repo"}}" data-variation="tiny inverted" data-position="left center">
33+
<a class="poping up" :href="subUrl + '/repo/create'" data-content="{{.i18n.Tr "new_repo"}}" data-variation="tiny inverted" data-position="left center">
3534
{{svg "octicon-plus"}}
3635
<span class="sr-only">{{.i18n.Tr "new_repo"}}</span>
3736
</a>
@@ -122,7 +121,7 @@
122121
<div v-if="repos.length" class="ui attached table segment rounded-bottom">
123122
<ul class="repo-owner-name-list">
124123
<li v-for="repo in repos" :class="{'private': repo.private || repo.internal}">
125-
<a class="repo-list-link df ac sb" :href="suburl + '/' + repo.full_name">
124+
<a class="repo-list-link df ac sb" :href="subUrl + '/' + repo.full_name">
126125
<div class="text truncate item-name f1">
127126
<component v-bind:is="repoIcon(repo)" size="16"></component>
128127
<strong>${repo.full_name}</strong>
@@ -168,15 +167,15 @@
168167
{{.i18n.Tr "home.my_orgs"}}
169168
<span class="ui grey label ml-3">${organizationsTotalCount}</span>
170169
</div>
171-
<a v-if="canCreateOrganization" class="poping up" :href="suburl + '/org/create'" data-content="{{.i18n.Tr "new_org"}}" data-variation="tiny inverted" data-position="left center">
170+
<a v-if="canCreateOrganization" class="poping up" :href="subUrl + '/org/create'" data-content="{{.i18n.Tr "new_org"}}" data-variation="tiny inverted" data-position="left center">
172171
{{svg "octicon-plus"}}
173172
<span class="sr-only">{{.i18n.Tr "new_org"}}</span>
174173
</a>
175174
</h4>
176175
<div v-if="organizations.length" class="ui attached table segment rounded-bottom">
177176
<ul class="repo-owner-name-list">
178177
<li v-for="org in organizations">
179-
<a class="repo-list-link df ac sb" :href="suburl + '/' + org.name">
178+
<a class="repo-list-link df ac sb" :href="subUrl + '/' + org.name">
180179
<div class="text truncate item-name f1">
181180
{{svg "octicon-organization" 16 "mr-2"}}
182181
<strong>${org.name}</strong>

‎web_src/js/components/ActivityHeatmap.vue

-1
Original file line numberDiff line numberDiff line change
@@ -70,4 +70,3 @@ export default {
7070
},
7171
};
7272
</script>
73-
<style scoped/>

0 commit comments

Comments
 (0)