forgejo/web_src/js/features/scoped-access-token-selector.ts
Gusted c8ec9bc2cc feat(ui): lazy-load all Vue components (#9444)
Some Vue components were already lazy-loaded, but not all.

There are three main changes:
1. Move init scripts outside Vue code.
2. Make the init scripts lazy-load the Vue components.
3. Deal with vue linters, because apparently if you do `export default` then some Vue linters will notice that's vue sfc.

The rationale for this pull requests is that this reduces the size of the `index.js` file.
- Uncompressed: 1.24 MB -> 954.40 kB
- Compressed (gzip, via `reverse_proxy` of Caddy): 400.45 kB -> 298.95 kB
- Compressed (zstd, via `bindata` tag): 363.75 kB -> 274.22 kB

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/9444
Reviewed-by: Otto <otto@codeberg.org>
Co-authored-by: Gusted <postmaster@gusted.xyz>
Co-committed-by: Gusted <postmaster@gusted.xyz>
2025-09-28 05:40:40 +02:00

14 lines
693 B
TypeScript

import {createApp} from 'vue';
export async function initScopedAccessTokenCategories() {
for (const el of document.getElementsByClassName('scoped-access-token')) {
const {default: ScopedAccessTokenSelector} = await import(/* webpackChunkName: "scoped-access-token-selector" */'../components/ScopedAccessTokenSelector.vue');
const scopedAccessTokenSelector = createApp(ScopedAccessTokenSelector, {
isAdmin: el.getAttribute('data-is-admin') === 'true',
noAccessLabel: el.getAttribute('data-no-access-label'),
readLabel: el.getAttribute('data-read-label'),
writeLabel: el.getAttribute('data-write-label'),
});
scopedAccessTokenSelector.mount(el);
}
}