ibnezzoubayr/Atay-Makhzan
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Migrate from webpack to vite (#37002)

Browse Source 
Replace webpack with Vite 8 as the frontend bundler. Frontend build is
around 3-4 times faster than before. Will work on all platforms
including riscv64 (via wasm).

`iife.js` is a classic render-blocking script in `<head>` (handles web
components/early DOM setup). `index.js` is loaded as a `type="module"`
script in the footer. All other JS chunks are also module scripts
(supported in all browsers since 2018).

Entry filenames are content-hashed (e.g. `index.C6Z2MRVQ.js`) and
resolved at runtime via the Vite manifest, eliminating the `?v=` cache
busting (which was unreliable in some scenarios like vscode dev build).

Replaces: https://github.com/go-gitea/gitea/pull/36896
Fixes: https://github.com/go-gitea/gitea/issues/17793
Signed-off-by: silverwind <me@silverwind.io>
Signed-off-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Claude (Opus 4.6) <noreply@anthropic.com>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
silverwind
2026-03-29 12:24:30 +02:00
committed by GitHub
parent 6288c87181
commit 0ec66b5380
88 changed files with 1706 additions and 1727 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web_src/js/webcomponents/README.md
+1 -1
View File
@@ -8,4 +8,4 @@ https://developer.mozilla.org/en-US/docs/Web/Web_Components
* These components are loaded in `<head>` (before DOM body) in a separate entry point, they need to be lightweight to not affect the page loading time too much.
* Do not import `svg.js` into a web component because that file is currently not tree-shakeable, import svg files individually insteat.
* All our components must be added to `webpack.config.js` so they work correctly in Vue.
* All our components must be added to `vite.config.ts` so they work correctly in Vue.
web_src/js/webcomponents/overflow-menu.ts
+73 -50
View File
@@ -1,11 +1,10 @@
import {throttle} from 'throttle-debounce';
import {createTippy} from '../modules/tippy.ts';
import {addDelegatedEventListener, isDocumentFragmentOrElementNode} from '../utils/dom.ts';
import {addDelegatedEventListener, generateElemId, isDocumentFragmentOrElementNode} from '../utils/dom.ts';
import octiconKebabHorizontal from '../../../public/assets/img/svg/octicon-kebab-horizontal.svg';
window.customElements.define('overflow-menu', class extends HTMLElement {
tippyContent: HTMLDivElement;
tippyItems: Array<HTMLElement>;
popup: HTMLDivElement;
overflowItems: Array<HTMLElement>;
button: HTMLButtonElement | null;
menuItemsEl: HTMLElement;
resizeObserver: ResizeObserver;
@@ -13,18 +12,42 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
lastWidth: number;
updateButtonActivationState() {
if (!this.button || !this.tippyContent) return;
this.button.classList.toggle('active', Boolean(this.tippyContent.querySelector('.item.active')));
if (!this.button || !this.popup) return;
this.button.classList.toggle('active', Boolean(this.popup.querySelector('.item.active')));
}
showPopup() {
if (!this.popup || this.popup.style.display !== 'none') return;
this.popup.style.display = '';
this.button!.setAttribute('aria-expanded', 'true');
setTimeout(() => this.popup.focus(), 0);
document.addEventListener('click', this.onClickOutside, true);
}
hidePopup() {
if (!this.popup || this.popup.style.display === 'none') return;
this.popup.style.display = 'none';
this.button?.setAttribute('aria-expanded', 'false');
document.removeEventListener('click', this.onClickOutside, true);
}
onClickOutside = (e: Event) => {
if (!this.popup?.contains(e.target as Node) && !this.button?.contains(e.target as Node)) {
this.hidePopup();
}
};
updateItems = throttle(100, () => {
if (!this.tippyContent) {
if (!this.popup) {
const div = document.createElement('div');
div.classList.add('overflow-menu-popup');
div.setAttribute('role', 'menu');
div.tabIndex = -1; // for initial focus, programmatic focus only
div.style.display = 'none';
div.addEventListener('keydown', (e) => {
if (e.isComposing) return;
if (e.key === 'Tab') {
const items = this.tippyContent.querySelectorAll<HTMLElement>('[role="menuitem"]');
const items = this.popup.querySelectorAll<HTMLElement>('[role="menuitem"]');
if (e.shiftKey) {
if (document.activeElement === items[0]) {
e.preventDefault();
@@ -39,7 +62,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
} else if (e.key === 'Escape') {
e.preventDefault();
e.stopPropagation();
this.button?._tippy.hide();
this.hidePopup();
this.button?.focus();
} else if (e.key === ' ' || e.code === 'Enter') {
if (document.activeElement?.matches('[role="menuitem"]')) {
@@ -48,20 +71,20 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
(document.activeElement as HTMLElement).click();
}
} else if (e.key === 'ArrowDown') {
if (document.activeElement?.matches('.tippy-target')) {
if (document.activeElement === this.popup) {
e.preventDefault();
e.stopPropagation();
document.activeElement.querySelector<HTMLElement>('[role="menuitem"]:first-of-type')?.focus();
this.popup.querySelector<HTMLElement>('[role="menuitem"]:first-of-type')?.focus();
} else if (document.activeElement?.matches('[role="menuitem"]')) {
e.preventDefault();
e.stopPropagation();
(document.activeElement.nextElementSibling as HTMLElement)?.focus();
}
} else if (e.key === 'ArrowUp') {
if (document.activeElement?.matches('.tippy-target')) {
if (document.activeElement === this.popup) {
e.preventDefault();
e.stopPropagation();
document.activeElement.querySelector<HTMLElement>('[role="menuitem"]:last-of-type')?.focus();
this.popup.querySelector<HTMLElement>('[role="menuitem"]:last-of-type')?.focus();
} else if (document.activeElement?.matches('[role="menuitem"]')) {
e.preventDefault();
e.stopPropagation();
@@ -69,16 +92,15 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
}
}
});
div.classList.add('tippy-target');
this.handleItemClick(div, '.tippy-target > .item');
this.tippyContent = div;
} // end if: no tippyContent and create a new one
this.handleItemClick(div, '.overflow-menu-popup > .item');
this.popup = div;
} // end if: no popup and create a new one
const itemFlexSpace = this.menuItemsEl.querySelector<HTMLSpanElement>('.item-flex-space');
const itemOverFlowMenuButton = this.querySelector<HTMLButtonElement>('.overflow-menu-button');
// move items in tippy back into the menu items for subsequent measurement
for (const item of this.tippyItems || []) {
// move items in popup back into the menu items for subsequent measurement
for (const item of this.overflowItems || []) {
if (!itemFlexSpace || item.getAttribute('data-after-flex-space')) {
this.menuItemsEl.append(item);
} else {
@@ -90,7 +112,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
// flex space and overflow menu are excluded from measurement
itemFlexSpace?.style.setProperty('display', 'none', 'important');
itemOverFlowMenuButton?.style.setProperty('display', 'none', 'important');
this.tippyItems = [];
this.overflowItems = [];
const menuRight = this.offsetLeft + this.offsetWidth;
const menuItems = this.menuItemsEl.querySelectorAll<HTMLElement>('.item, .item-flex-space');
let afterFlexSpace = false;
@@ -102,64 +124,64 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
if (afterFlexSpace) item.setAttribute('data-after-flex-space', 'true');
const itemRight = item.offsetLeft + item.offsetWidth;
if (menuRight - itemRight < 38) { // roughly the width of .overflow-menu-button with some extra space
const onlyLastItem = idx === menuItems.length - 1 && this.tippyItems.length === 0;
const onlyLastItem = idx === menuItems.length - 1 && this.overflowItems.length === 0;
const lastItemFit = onlyLastItem && menuRight - itemRight > 0;
const moveToPopup = !onlyLastItem || !lastItemFit;
if (moveToPopup) this.tippyItems.push(item);
if (moveToPopup) this.overflowItems.push(item);
}
}
itemFlexSpace?.style.removeProperty('display');
itemOverFlowMenuButton?.style.removeProperty('display');
// if there are no overflown items, remove any previously created button
if (!this.tippyItems?.length) {
const btn = this.querySelector('.overflow-menu-button');
btn?._tippy?.destroy();
btn?.remove();
if (!this.overflowItems?.length) {
this.hidePopup();
this.button?.remove();
this.popup?.remove();
this.button = null;
return;
}
// remove aria role from items that moved from tippy to menu
// remove aria role from items that moved from popup to menu
for (const item of menuItems) {
if (!this.tippyItems.includes(item)) {
if (!this.overflowItems.includes(item)) {
item.removeAttribute('role');
}
}
// move all items that overflow into tippy
for (const item of this.tippyItems) {
// move all items that overflow into popup
for (const item of this.overflowItems) {
item.setAttribute('role', 'menuitem');
this.tippyContent.append(item);
this.popup.append(item);
}
// update existing tippy
if (this.button?._tippy) {
this.button._tippy.setContent(this.tippyContent);
// update existing popup
if (this.button) {
this.updateButtonActivationState();
return;
}
// create button initially
// create button and attach popup
const popupId = generateElemId('overflow-popup-');
this.popup.id = popupId;
this.button = document.createElement('button');
this.button.classList.add('overflow-menu-button');
this.button.setAttribute('aria-label', window.config.i18n.more_items);
this.button.setAttribute('aria-haspopup', 'true');
this.button.setAttribute('aria-expanded', 'false');
this.button.setAttribute('aria-controls', popupId);
this.button.innerHTML = octiconKebabHorizontal;
this.append(this.button);
createTippy(this.button, {
trigger: 'click',
hideOnClick: true,
interactive: true,
placement: 'bottom-end',
role: 'menu',
theme: 'menu',
content: this.tippyContent,
onShow: () => { // FIXME: onShown doesn't work (never be called)
setTimeout(() => {
this.tippyContent.focus();
}, 0);
},
this.button.addEventListener('click', (e) => {
e.stopPropagation();
if (this.popup.style.display === 'none') {
this.showPopup();
} else {
this.hidePopup();
}
});
this.append(this.button);
this.append(this.popup);
this.updateButtonActivationState();
});
@@ -202,7 +224,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
handleItemClick(el: Element, selector: string) {
addDelegatedEventListener(el, 'click', selector, () => {
this.button?._tippy?.hide();
this.hidePopup();
this.updateButtonActivationState();
});
}
@@ -239,5 +261,6 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
disconnectedCallback() {
this.mutationObserver?.disconnect();
this.resizeObserver?.disconnect();
document.removeEventListener('click', this.onClickOutside, true);
}
});