Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

More refactoring for the Vue3 and related componments #21314

Closed
wxiaoguang opened this issue Oct 2, 2022 · 3 comments
Closed

More refactoring for the Vue3 and related componments #21314

wxiaoguang opened this issue Oct 2, 2022 · 3 comments
Labels
issue/duplicate The issue has already been reported. topic/ui Change the appearance of the Gitea UI

Comments

@wxiaoguang
Copy link
Contributor

At the moment, when viewing Gitea page, a warning will be printed in browser console:

Feature flags __VUE_OPTIONS_API__, __VUE_PROD_DEVTOOLS__ are not explicitly defined.
You are running the esm-bundler build of Vue, which expects these compile-time feature flags
to be globally injected via the bundler config in order to get better tree-shaking in the production bundle.

For more details, see https://link.vuejs.org/feature-flags.

The key problem is that Gitea uses dynamic Vue templates and needs Vue compiler for production build, for example:

IMO, something could be done:

  • In the near future, fix the warning by setting proper options, still use the dynamic compiler.
  • In the far future, rewrite the Vue components to pure SFC.
@wxiaoguang wxiaoguang changed the title More refactoring for the Vue3 and relate componments More refactoring for the Vue3 and related componments Oct 2, 2022
@silverwind
Copy link
Member

silverwind commented Oct 8, 2022

Yes, we need to eliminate the compiler and ship the runtime only. This will also increase security as it eliminates eval used in the vue compiler code. See #19851 and linked issues.

@silverwind silverwind added the topic/ui Change the appearance of the Gitea UI label Oct 8, 2022
@delvh
Copy link
Member

delvh commented Oct 8, 2022

The key problem is that Gitea uses dynamic Vue templates and needs Vue compiler for production build, for example:

We can also look at how other applications handle setting this type of data.
I can think of two approaches at the top of my mind we could use:

  1. Request the specific data dynamically - probably not the best option for performance / amount of possible errors
  2. Set the data always via pageData. However, I don't exactly know how we could interact with Vue (i.e. creating a component dynamically) from JS code…

@wxiaoguang
Copy link
Contributor Author

This issue is highly related to #19851. As long as #19851 is resolved, there will be no problem for this issue. So close this one.

@wxiaoguang wxiaoguang added the issue/duplicate The issue has already been reported. label Dec 13, 2022
lafriks pushed a commit that referenced this issue Mar 11, 2023
Follow: 
* #23345

The branch/tag selector dropdown mixes jQuery/Fomantic UI/Vue together,
it's very diffcult to maintain and causes unfixable a11y problems. It
also causes problems like #19851 #21314 #21952

This PR is the first step for the refactoring, move `data-` attributes
to JS object and use Vue data as much as possible.

The old selector `'.choose.reference .dropdown'` was also wrong, it hits
`<div class="choose reference"><svg class="dropdown icon">` and would
cause undefined behaviors.

I have done some quick tests and it works. After this PR gets merged, I
will move the code into a Vue SFC in next PR.



![image](https://user-images.githubusercontent.com/2114189/224099638-378a8a86-0865-47d1-bcba-f972506374c7.png)


![image](https://user-images.githubusercontent.com/2114189/224099690-70276cf5-b1e4-404a-b0c6-582448abf40e.png)

---------

Co-authored-by: techknowlogick <techknowlogick@gitea.io>
@go-gitea go-gitea locked and limited conversation to collaborators May 3, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
issue/duplicate The issue has already been reported. topic/ui Change the appearance of the Gitea UI
Projects
None yet
Development

No branches or pull requests

3 participants