forgejo/web_src/js/index.js
oliverpool 83ea43cf49 frontend: generic lazy loader for webcomponents (#8510)
After seeing #8111 use a webcomponent, I think that they are a neat usecase for Forgejo where most of the frontend is backend-generated, with some "island of enhancements".

I am considering using a webcomponent for the CITATION management (last occurrence of [`Blob.GetBlobContent`](https://codeberg.org/forgejo/forgejo/issues/8222)), however I noticed that the developer experience wasn't ideal.

With this PR it would be very easy to declare a webcomponent, which will be loaded only if needed (I converted `model-viewer` and `pdf-object` to this technique).

Some cleanup in the neighbor webcomponents.

## Testing

1) Create a new repository or use an existing one.
2) Upload a `.pdf` or `.glb`  file (such as https://codeberg.org/forgejo/forgejo/src/branch/forgejo/tests/testdata/data/viewer/Unicode%E2%9D%A4%E2%99%BBTest.glb)
3) Open the Network inspector and view the file in the repository.
    - After a short loading spinner, the PDF or 3D model should be rendered in a viewer
    - the related JS should have been loaded (e.g. http://localhost:3000/assets/js/model-viewer.494bf0cd.js)
    - visiting another page and check that this JS file isn't loaded

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/8510
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Reviewed-by: Beowulf <beowulf@beocode.eu>
Co-authored-by: oliverpool <git@olivier.pfad.fr>
Co-committed-by: oliverpool <git@olivier.pfad.fr>
2025-07-23 04:10:50 +02:00

195 lines
7 KiB
JavaScript

// bootstrap module must be the first one to be imported, it handles webpack lazy-loading and global errors
import './bootstrap.js';
import {initRepoActivityTopAuthorsChart} from './components/RepoActivityTopAuthors.vue';
import {initScopedAccessTokenCategories} from './components/ScopedAccessTokenSelector.vue';
import {initDashboardRepoList} from './components/DashboardRepoList.vue';
import {initGlobalCopyToClipboardListener} from './features/clipboard.js';
import {initContextPopups} from './features/contextpopup.js';
import {initRepoGraphGit} from './features/repo-graph.js';
import {initHeatmap} from './features/heatmap.js';
import {initImageDiff} from './features/imagediff.js';
import {initRepoMigration} from './features/repo-migration.js';
import {initRepoProject} from './features/repo-projects.js';
import {initTableSort} from './features/tablesort.js';
import {initAutoFocusEnd} from './features/autofocus-end.js';
import {initAdminUserListSearchForm} from './features/admin/users.js';
import {initAdminConfigs} from './features/admin/config.js';
import {initMarkupAnchors} from './markup/anchors.js';
import {initNotificationCount, initNotificationsTable} from './features/notification.js';
import {initRepoIssueContentHistory} from './features/repo-issue-content.js';
import {initStopwatch} from './features/stopwatch.js';
import {initFindFileInRepo} from './features/repo-findfile.js';
import {initCommentContent, initMarkupContent} from './markup/content.js';
import {initUserAuthOauth2, initUserAuth} from './features/user-auth.js';
import {
initRepoIssueDue,
initRepoIssueReferenceRepositorySearch,
initRepoIssueTimeTracking,
initRepoIssueWipTitle,
initRepoPullRequestAllowMaintainerEdit,
initRepoPullRequestReview, initRepoIssueSidebarList, initArchivedLabelHandler,
} from './features/repo-issue.js';
import {initRepoEllipsisButton, initCommitStatuses, initCommitNotes} from './features/repo-commit.js';
import {
initFootLanguageMenu,
initGlobalButtonClickOnEnter,
initGlobalButtons,
initGlobalCommon,
initGlobalDropzone,
initGlobalEnterQuickSubmit,
initGlobalFormDirtyLeaveConfirm,
initGlobalLinkActions,
initHeadNavbarContentToggle,
} from './features/common-global.js';
import {initRepoTopicBar} from './features/repo-home.js';
import {initAdminEmails} from './features/admin/emails.js';
import {initAdminCommon} from './features/admin/common.js';
import {initRepoTemplateSearch} from './features/repo-template.js';
import {initRepoCodeView} from './features/repo-code.js';
import {initSshKeyFormParser} from './features/sshkey-helper.js';
import {initRepoArchiveLinks} from './features/repo-common.js';
import {initRepoMigrationStatusChecker} from './features/repo-migrate.js';
import {
initRepoSettingGitHook,
initRepoSettingsCollaboration,
initRepoSettingSearchTeamBox,
} from './features/repo-settings.js';
import {initRepoDiffView} from './features/repo-diff.js';
import {initOrgTeamSearchRepoBox} from './features/org-team.js';
import {initUserAuthWebAuthn, initUserAuthWebAuthnRegister} from './features/user-auth-webauthn.js';
import {initRepoRelease, initRepoReleaseNew} from './features/repo-release.js';
import {initRepoEditor} from './features/repo-editor.js';
import {initCompSearchUserBox} from './features/comp/SearchUserBox.js';
import {initInstall} from './features/install.js';
import {initCompWebHookEditor} from './features/comp/WebHookEditor.js';
import {initRepoBranchButton} from './features/repo-branch.js';
import {initCommonOrganization} from './features/common-organization.js';
import {initRepoWikiForm} from './features/repo-wiki.js';
import {initRepoCommentForm, initRepository} from './features/repo-legacy.js';
import {initCopyContent} from './features/copycontent.js';
import {initCaptcha} from './features/captcha.js';
import {initRepositoryActionView} from './components/RepoActionView.vue';
import {initGlobalTooltips} from './modules/tippy.js';
import {initDropdowns} from './modules/dropdown.ts';
import {initGiteaFomantic} from './modules/fomantic.js';
import {onDomReady} from './utils/dom.js';
import {initRepoIssueList} from './features/repo-issue-list.js';
import {initCommonIssueListQuickGoto} from './features/common-issue-list.js';
import {initRepoContributors} from './features/contributors.js';
import {initRepoCodeFrequency} from './features/code-frequency.js';
import {initRepoRecentCommits} from './features/recent-commits.js';
import {initRepoDiffCommitBranchesAndTags} from './features/repo-diff-commit.js';
import {initDirAuto} from './modules/dirauto.js';
import {initRepositorySearch} from './features/repo-search.js';
import {initColorPickers} from './features/colorpicker.js';
import {initRepoMilestoneEditor} from './features/repo-milestone.js';
// Init Gitea's Fomantic settings
initGiteaFomantic();
initDirAuto();
onDomReady(() => {
initGlobalCommon();
initGlobalTooltips();
initGlobalButtonClickOnEnter();
initGlobalButtons();
initGlobalCopyToClipboardListener();
initGlobalDropzone();
initGlobalEnterQuickSubmit();
initGlobalFormDirtyLeaveConfirm();
initGlobalLinkActions();
initDropdowns();
initCommonOrganization();
initCommonIssueListQuickGoto();
initCompSearchUserBox();
initCompWebHookEditor();
initInstall();
initHeadNavbarContentToggle();
initFootLanguageMenu();
initCommentContent();
initContextPopups();
initHeatmap();
initImageDiff();
initMarkupAnchors();
initMarkupContent();
initSshKeyFormParser();
initStopwatch();
initTableSort();
initAutoFocusEnd();
initFindFileInRepo();
initCopyContent();
initAdminCommon();
initAdminEmails();
initAdminUserListSearchForm();
initAdminConfigs();
initDashboardRepoList();
initNotificationCount();
initNotificationsTable();
initOrgTeamSearchRepoBox();
initRepoActivityTopAuthorsChart();
initRepoArchiveLinks();
initRepoBranchButton();
initRepoCodeView();
initRepoCommentForm();
initRepoEllipsisButton();
initRepoDiffCommitBranchesAndTags();
initRepoEditor();
initRepoGraphGit();
initRepoIssueContentHistory();
initRepoIssueDue();
initRepoIssueList();
initRepoIssueSidebarList();
initArchivedLabelHandler();
initRepoIssueReferenceRepositorySearch();
initRepoIssueTimeTracking();
initRepoIssueWipTitle();
initRepoMigration();
initRepoMigrationStatusChecker();
initRepoProject();
initRepoPullRequestAllowMaintainerEdit();
initRepoPullRequestReview();
initRepoRelease();
initRepoReleaseNew();
initRepoSettingGitHook();
initRepoSettingSearchTeamBox();
initRepoSettingsCollaboration();
initRepoTemplateSearch();
initRepoTopicBar();
initRepoWikiForm();
initRepository();
initRepositoryActionView();
initRepositorySearch();
initRepoContributors();
initRepoCodeFrequency();
initRepoRecentCommits();
initRepoMilestoneEditor();
initCommitStatuses();
initCommitNotes();
initCaptcha();
initUserAuthOauth2();
initUserAuthWebAuthn();
initUserAuthWebAuthnRegister();
initUserAuth();
initRepoDiffView();
initScopedAccessTokenCategories();
initColorPickers();
// Deactivate CSS-only noJS usability supplements
document.body.classList.remove('no-js');
});