finn/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source 
* 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 4d78ad9b0e96ca180e0823de17659a2e0814c099.

Co-authored-by: delvh <dev.lh@web.de>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: 6543 <6543@obermui.de>
This commit is contained in:
wxiaoguang 2021-10-15 10:35:26 +08:00 • committed by GitHub
parent 96ff3e310f
commit 56362043d3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 718 additions and 634 deletions
Download patch file Download diff file Expand all files Collapse all files

51
docs/content/doc/developers/guidelines-frontend.md Normal file
View file

@ -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
docs/content/doc/developers/hacking-on-gitea.en-us.md
View file

@ -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