Skip to content

Commit

Permalink
Frontend refactor: move Vue related code from index.js to `componen…
Browse files Browse the repository at this point in the history
…ts` dir, and remove unused codes. (#17301)

* frontend refactor

* Apply suggestions from code review

Co-authored-by: delvh <dev.lh@web.de>

* Update templates/base/head.tmpl

Co-authored-by: delvh <dev.lh@web.de>

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

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>

* fix typo

* fix typo

* refactor PageData to pageData

* Apply suggestions from code review

Co-authored-by: delvh <dev.lh@web.de>

* Simply for the visual difference.

Co-authored-by: delvh <dev.lh@web.de>

* Revert "Apply suggestions from code review"

This reverts commit 4d78ad9.

Co-authored-by: delvh <dev.lh@web.de>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: 6543 <6543@obermui.de>
  • Loading branch information
4 people authored Oct 15, 2021
1 parent 96ff3e3 commit 5636204
Show file tree
Hide file tree
Showing 20 changed files with 718 additions and 634 deletions.
2 changes: 0 additions & 2 deletions .eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ reportUnusedDisableDirectives: true

ignorePatterns:
- /web_src/js/vendor
- /templates/repo/activity.tmpl
- /templates/repo/view_file.tmpl

parserOptions:
sourceType: module
Expand Down
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ _test

# IntelliJ
.idea
# Goland's output filename can not be set manually
/go_build_*

# MS VSCode
.vscode
Expand Down
51 changes: 51 additions & 0 deletions docs/content/doc/developers/guidelines-frontend.md
Original file line number Diff line number Diff line change
@@ -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.
11 changes: 10 additions & 1 deletion docs/content/doc/developers/hacking-on-gitea.en-us.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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
Expand Down
5 changes: 3 additions & 2 deletions modules/context/context.go
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion routers/web/repo/activity.go
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Expand Down
5 changes: 4 additions & 1 deletion routers/web/user/home.go
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
14 changes: 3 additions & 11 deletions templates/base/head.tmpl
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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}}">
Expand All @@ -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}},
Expand Down
19 changes: 8 additions & 11 deletions templates/repo/activity.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion templates/repo/issue/view_content.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -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}}"/>
Expand Down
10 changes: 0 additions & 10 deletions templates/repo/view_file.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -131,13 +131,3 @@
</div>
</div>
</div>

<script>
function submitDeleteForm() {
var message = prompt("{{.i18n.Tr "repo.delete_confirm_message"}}\n\n{{.i18n.Tr "repo.delete_commit_summary"}}", "Delete '{{.TreeName}}'");
if (message != null) {
$("#delete-message").val(message);
$("#delete-file-form").submit()
}
}
</script>
13 changes: 6 additions & 7 deletions templates/user/dashboard/repolist.tmpl
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
<div id="app" class="six wide column">
<div id="dashboard-repo-list" class="six wide column">
<repo-search
:search-limit="searchLimit"
:suburl="suburl"
:uid="uid"
:sub-url="subUrl"
{{if .Team}}
:team-id="{{.Team.ID}}"
{{end}}
Expand Down Expand Up @@ -31,7 +30,7 @@
{{.i18n.Tr "home.my_repos"}}
<span class="ui grey label ml-3">${reposTotalCount}</span>
</div>
<a class="poping up" :href="suburl + '/repo/create'" data-content="{{.i18n.Tr "new_repo"}}" data-variation="tiny inverted" data-position="left center">
<a class="poping up" :href="subUrl + '/repo/create'" data-content="{{.i18n.Tr "new_repo"}}" data-variation="tiny inverted" data-position="left center">
{{svg "octicon-plus"}}
<span class="sr-only">{{.i18n.Tr "new_repo"}}</span>
</a>
Expand Down Expand Up @@ -122,7 +121,7 @@
<div v-if="repos.length" class="ui attached table segment rounded-bottom">
<ul class="repo-owner-name-list">
<li v-for="repo in repos" :class="{'private': repo.private || repo.internal}">
<a class="repo-list-link df ac sb" :href="suburl + '/' + repo.full_name">
<a class="repo-list-link df ac sb" :href="subUrl + '/' + repo.full_name">
<div class="text truncate item-name f1">
<component v-bind:is="repoIcon(repo)" size="16"></component>
<strong>${repo.full_name}</strong>
Expand Down Expand Up @@ -168,15 +167,15 @@
{{.i18n.Tr "home.my_orgs"}}
<span class="ui grey label ml-3">${organizationsTotalCount}</span>
</div>
<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">
<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">
{{svg "octicon-plus"}}
<span class="sr-only">{{.i18n.Tr "new_org"}}</span>
</a>
</h4>
<div v-if="organizations.length" class="ui attached table segment rounded-bottom">
<ul class="repo-owner-name-list">
<li v-for="org in organizations">
<a class="repo-list-link df ac sb" :href="suburl + '/' + org.name">
<a class="repo-list-link df ac sb" :href="subUrl + '/' + org.name">
<div class="text truncate item-name f1">
{{svg "octicon-organization" 16 "mr-2"}}
<strong>${org.name}</strong>
Expand Down
1 change: 0 additions & 1 deletion web_src/js/components/ActivityHeatmap.vue
Original file line number Diff line number Diff line change
Expand Up @@ -70,4 +70,3 @@ export default {
},
};
</script>
<style scoped/>
Loading

0 comments on commit 5636204

Please sign in to comment.