From 50f6aebb033a0609f521184b409994a0da48b981 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Thu, 14 Oct 2021 01:40:37 +0800 Subject: [PATCH 01/10] frontend refactor --- .eslintrc | 2 - .gitignore | 2 + .../doc/developers/guidelines-frontend.md | 53 ++ .../doc/developers/hacking-on-gitea.en-us.md | 11 +- modules/context/context.go | 1 + routers/web/repo/activity.go | 2 +- routers/web/user/home.go | 5 +- templates/base/head.tmpl | 11 +- templates/repo/activity.tmpl | 19 +- templates/repo/view_file.tmpl | 10 - templates/user/dashboard/repolist.tmpl | 13 +- web_src/js/components/ActivityHeatmap.vue | 1 - web_src/js/components/DashboardRepoList.js | 370 ++++++++++++ ...Authors.vue => RepoActivityTopAuthors.vue} | 59 +- .../js/components/RepoBranchTagDropdown.js | 161 +++++ web_src/js/components/VueComponentLoader.js | 52 ++ web_src/js/index.js | 567 +----------------- web_src/less/_repository.less | 4 - 18 files changed, 714 insertions(+), 629 deletions(-) create mode 100644 docs/content/doc/developers/guidelines-frontend.md create mode 100644 web_src/js/components/DashboardRepoList.js rename web_src/js/components/{ActivityTopAuthors.vue => RepoActivityTopAuthors.vue} (56%) create mode 100644 web_src/js/components/RepoBranchTagDropdown.js create mode 100644 web_src/js/components/VueComponentLoader.js diff --git a/.eslintrc b/.eslintrc index bab34478cf46..4419e16a35b3 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,8 +3,6 @@ reportUnusedDisableDirectives: true ignorePatterns: - /web_src/js/vendor - - /templates/repo/activity.tmpl - - /templates/repo/view_file.tmpl parserOptions: sourceType: module diff --git a/.gitignore b/.gitignore index 5bf71be65d56..10d9574f33d9 100644 --- a/.gitignore +++ b/.gitignore @@ -9,6 +9,8 @@ _test # IntelliJ .idea +# Goland's output filename can not be set manually +/go_build_* # MS VSCode .vscode diff --git a/docs/content/doc/developers/guidelines-frontend.md b/docs/content/doc/developers/guidelines-frontend.md new file mode 100644 index 000000000000..6bb8d12b99e7 --- /dev/null +++ b/docs/content/doc/developers/guidelines-frontend.md @@ -0,0 +1,53 @@ +--- +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 Text Template](https://pkg.go.dev/text/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) + +Guidelines specialized for Gitea: + +1. Every feature (Fomantic-UI/jQuery module) should be put in separated files/directories. +2. HTML id/css-class-name should use kebab-case. +3. HTML id/css-class-name used by JavaScript top-level selector should be unique in whole project, + and should contain 2-3 feature related keywords. Recommend to use `js-` prefix for CSS names for JavaScript usage only. +4. jQuery events across different features should use their own namespaces. +5. CSS styles provided by frameworks should not be overwritten by framework's selectors globally. + Always use new defined CSS names to overwrite framework styles. Recommend to use `us-` prefix for user defined styles. +6. Backend can pass data to frontend (JavaScript) by `ctx.PageData["myModuleData"] = map{}` +7. Simple pages and SEO-related pages use Go Text Template render to generate static Fomantic-UI HTML output. Complex pages can use Vue2 (or Vue3 in future). + +## Legacy Problems and Solutions + +### Too many codes in `web_src/index.js` + +In history, many JavaScript codes are written into `web_src/index.js` directly, which becomes too big to maintain. +We should split this file into small modules, the separated files can be put in `web_src/js/features` for the first step. + +### Vue2/Vue3 and JSX + +Gitea is using Vue2 now, we have plan to upgrade to Vue3. We decide not to introduce JSX now to make sure the HTML and JavaScript codes are not mixed together. diff --git a/docs/content/doc/developers/hacking-on-gitea.en-us.md b/docs/content/doc/developers/hacking-on-gitea.en-us.md index 23e3b3768091..d91d80e626c6 100644 --- a/docs/content/doc/developers/hacking-on-gitea.en-us.md +++ b/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 diff --git a/modules/context/context.go b/modules/context/context.go index 2076ef82ab8e..b733eadad0e2 100644 --- a/modules/context/context.go +++ b/modules/context/context.go @@ -645,6 +645,7 @@ 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 diff --git a/routers/web/repo/activity.go b/routers/web/repo/activity.go index dcb7bf57cd45..f9d248b06ea8 100644 --- a/routers/web/repo/activity.go +++ b/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 } diff --git a/routers/web/user/home.go b/routers/web/user/home.go index 2f1fca452711..d2b67e6e5921 100644 --- a/routers/web/user/home.go +++ b/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) diff --git a/templates/base/head.tmpl b/templates/base/head.tmpl index 817bdae288c0..f11952fb12e1 100644 --- a/templates/base/head.tmpl +++ b/templates/base/head.tmpl @@ -1,6 +1,5 @@ - {{if .Title}}{{.Title | RenderEmojiPlain}} - {{end}} {{if .Repository.Name}}{{.Repository.Name}} - {{end}}{{AppName}} @@ -12,15 +11,6 @@ - {{if .IsSigned}} - - {{end}} - {{if .ContextUser}} - - {{end}} - {{if .SearchLimit}} - - {{end}} {{if .GoGetImport}} @@ -31,6 +21,7 @@ AppVer: '{{AppVer}}', AppSubUrl: '{{AppSubUrl}}', AssetUrlPrefix: '{{AssetUrlPrefix}}', + IsProd: {{.IsProd}}, CustomEmojis: {{CustomEmojis}}, UseServiceWorker: {{UseServiceWorker}}, csrf: '{{.CsrfToken}}', diff --git a/templates/repo/activity.tmpl b/templates/repo/activity.tmpl index 08e2a31115a3..d4cff880e582 100644 --- a/templates/repo/activity.tmpl +++ b/templates/repo/activity.tmpl @@ -108,11 +108,8 @@ {{.i18n.Tr "repo.activity.git_stats_and_deletions" }} {{.i18n.Tr (TrN .i18n.Lang .Activity.Code.Deletions "repo.activity.git_stats_deletion_1" "repo.activity.git_stats_deletion_n") .Activity.Code.Deletions }}. -
- - +
+
{{end}} @@ -126,7 +123,7 @@
{{range .Activity.PublishedReleases}}

-

{{$.i18n.Tr "repo.activity.published_release_label"}}
+ {{$.i18n.Tr "repo.activity.published_release_label"}} {{.TagName}} {{if not .IsTag}} {{.Title | RenderEmoji}} @@ -145,7 +142,7 @@
{{range .Activity.MergedPRs}}

-

{{$.i18n.Tr "repo.activity.merged_prs_label"}}
+ {{$.i18n.Tr "repo.activity.merged_prs_label"}} #{{.Index}} {{.Issue.Title | RenderEmoji}} {{TimeSinceUnix .MergedUnix $.Lang}}

@@ -161,7 +158,7 @@
{{range .Activity.OpenedPRs}}

-

{{$.i18n.Tr "repo.activity.opened_prs_label"}}
+ {{$.i18n.Tr "repo.activity.opened_prs_label"}} #{{.Index}} {{.Issue.Title | RenderEmoji}} {{TimeSinceUnix .Issue.CreatedUnix $.Lang}}

@@ -177,7 +174,7 @@
{{range .Activity.ClosedIssues}}

-

{{$.i18n.Tr "repo.activity.closed_issue_label"}}
+ {{$.i18n.Tr "repo.activity.closed_issue_label"}} #{{.Index}} {{.Title | RenderEmoji}} {{TimeSinceUnix .ClosedUnix $.Lang}}

@@ -193,7 +190,7 @@
{{range .Activity.OpenedIssues}}

-

{{$.i18n.Tr "repo.activity.new_issue_label"}}
+ {{$.i18n.Tr "repo.activity.new_issue_label"}} #{{.Index}} {{.Title | RenderEmoji}} {{TimeSinceUnix .CreatedUnix $.Lang}}

@@ -212,7 +209,7 @@
{{range .Activity.UnresolvedIssues}}

-

{{$.i18n.Tr "repo.activity.unresolved_conv_label"}}
+ {{$.i18n.Tr "repo.activity.unresolved_conv_label"}} #{{.Index}} {{if .IsPull}} {{.Title | RenderEmoji}} diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl index 8e75bcb4ca49..0c8990a4f5c8 100644 --- a/templates/repo/view_file.tmpl +++ b/templates/repo/view_file.tmpl @@ -131,13 +131,3 @@
- - diff --git a/templates/user/dashboard/repolist.tmpl b/templates/user/dashboard/repolist.tmpl index f39d3711d473..e2cfa76e8832 100644 --- a/templates/user/dashboard/repolist.tmpl +++ b/templates/user/dashboard/repolist.tmpl @@ -1,8 +1,7 @@ -
+
${reposTotalCount}
- + {{svg "octicon-plus"}} {{.i18n.Tr "new_repo"}} @@ -122,7 +121,7 @@