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

Fix dynamic content loading init problem #33748

Merged
merged 2 commits into from
Mar 1, 2025

Conversation

wxiaoguang
Copy link
Contributor

@wxiaoguang wxiaoguang commented Feb 28, 2025

  1. Rewrite dirauto.ts to observer.ts.
    • We have been using MutationObserver for long time, it's proven that it is quite performant.
    • Now we extend its ability to handle more "init" works.
  2. Use observeAddedElement to init all non-custom "dropdown".
  3. Use data-global-click to handle click events from dynamically loaded elements.
    • By this new approach, the old fragile selector-based (.comment-reaction-button) mechanism is removed.
  4. By the way, remove unused .diff-box selector, it was abused and never really used.

A lot of FIXMEs in "repo-diff.ts" are completely fixed, newly loaded contents could work as expected.

data-global-init code is almost ready, if further readers, when need to use it, add a "registerGlobalInitFunc" then it should work.

@GiteaBot GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Feb 28, 2025
@pull-request-size pull-request-size bot added the size/L Denotes a PR that changes 100-499 lines, ignoring generated files. label Feb 28, 2025
@github-actions github-actions bot added modifies/templates This PR modifies the template files modifies/frontend labels Feb 28, 2025
@wxiaoguang wxiaoguang force-pushed the fix-js-init branch 3 times, most recently from 3f1a0ea to 3644e2a Compare February 28, 2025 13:05
@wxiaoguang
Copy link
Contributor Author

Not too many changes by ignoring spaces: https://github.com/go-gitea/gitea/pull/33748/files?diff=unified&w=1

@@ -0,0 +1,89 @@
import {isDocumentFragmentOrElementNode} from '../utils/dom.ts';

type DirElement = HTMLInputElement | HTMLTextAreaElement;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, that's supposed to be direction, not directory.
I was confused for a second.

Copy link
Contributor Author

@wxiaoguang wxiaoguang Feb 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's from old "dirauto.js"

This file is a rewritten of "dirauto.js", more than about a half of code is from old code.

image

@GiteaBot GiteaBot added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels Feb 28, 2025
@GiteaBot GiteaBot added lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. and removed lgtm/need 1 This PR needs approval from one additional maintainer to be merged. labels Feb 28, 2025
@wxiaoguang wxiaoguang enabled auto-merge (squash) March 1, 2025 01:38
@wxiaoguang wxiaoguang merged commit 698ae7a into go-gitea:main Mar 1, 2025
26 checks passed
@GiteaBot GiteaBot added this to the 1.24.0 milestone Mar 1, 2025
@wxiaoguang wxiaoguang deleted the fix-js-init branch March 1, 2025 02:03
@wxiaoguang
Copy link
Contributor Author

Next: Refactor global init code and add more comments #33755

zjjhot added a commit to zjjhot/gitea that referenced this pull request Mar 3, 2025
* giteaofficial/main:
  Use pullrequestlist instead of []*pullrequest (go-gitea#33765)
  Upgrade act to 0.261.4 and actions-proto-go to v0.4.1 (go-gitea#33760)
  Webhook add X-Gitea-Hook-Installation-Target-Type Header (go-gitea#33752)
  Fix dynamic content loading init problem (go-gitea#33748)
  [skip ci] Updated translations via Crowdin
  Add composor source field (go-gitea#33502)
  upgrade go-crypto from 1.1.5 to 1.1.6 (go-gitea#33745)
  Disable go license generation as part of `make tidy` (go-gitea#33747)
  Refactor repo-diff.ts (go-gitea#33746)
  Use `git diff-tree` for `DiffFileTree` on diff pages (go-gitea#33514)
  [skip ci] Updated translations via Crowdin
  Improve "generate new access token" form (go-gitea#33730)
  Remove superflous tw-content-center (go-gitea#33741)
  Clone repository with Tea CLI (go-gitea#33725)
  allow filtering /repos/{owner}/{repo}/pulls by target base branch queryparam (go-gitea#33684)
  Show info about maintainers are allowed to edit a PR (go-gitea#33738)
  Improve admin user view page (go-gitea#33735)
  [skip ci] Updated translations via Crowdin
  Align sidebar gears to the right (go-gitea#33721)
GiteaBot pushed a commit to lunny/gitea that referenced this pull request Mar 3, 2025
Follow up go-gitea#33748

Now there are 3 "global" functions:

* registerGlobalSelectorFunc: for all elements matching the selector, eg: `.ui.dropdown`
* registerGlobalInitFunc: for `data-global-init="initInputAutoFocusEnd"`
* registerGlobalEventFunc: for `data-global-click="onCommentReactionButtonClick"`


And introduce `initGlobalInput` to replace old `initAutoFocusEnd` and
`attachDirAuto`, use `data-global-init` to replace fragile
`.js-autofocus-end` selector.

Another benefit is that by the new approach, no matter how many times
`registerGlobalInitFunc` is called, we only need to do one
"querySelectorAll" in the last step, it could slightly improve the
performance.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. modifies/frontend modifies/templates This PR modifies the template files size/L Denotes a PR that changes 100-499 lines, ignoring generated files.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants