Skip to content

Перехід панелі на vite, react з 16 оновлено до 18 та багфікси. - #7306

Closed
brocker96 wants to merge 13 commits into
pterodactyl:1.0-developfrom
brocker96:modernize/vite-react18
Closed

brocker96 wants to merge 13 commits into
pterodactyl:1.0-developfrom
brocker96:modernize/vite-react18

Conversation

@brocker96

Copy link
Copy Markdown

⚡ Продуктивність

  • Замінено Webpack на Vite 8.
  • Скорочено час повної збірки з 31 до 10 секунд (−67,7%).
  • Реалізовано ліниве завантаження сторінок через React.lazy().
  • Зменшено обсяг JavaScript, необхідного для завантаження дашборду, з 1721 до 768 КіБ (−55,4%).
  • Впроваджено швидке оновлення компонентів під час розробки (HMR).
  • Оптимізовано завантаження редактора та підсвічування синтаксису.

🔧 Оновлення технологій

  • React 16 → React 18.
  • React Router 5 → React Router 7.
  • Перехід на Vite 8.
  • Оновлено SWR, easy-peasy та xterm.
  • Замінено старий редактор на CodeMirror 6.
  • Видалено застарілі залежності та механізми, зокрема react-hot-loader і preact-signals.

📝 Редактор файлів

  • Повністю оновлено редактор на базі CodeMirror 6.
  • Додано адаптивний повноекранний режим для мобільних пристроїв.
  • Реалізовано попередження про незбережені зміни.
  • Додано підтримку Ctrl/Cmd + S.
  • Реалізовано режим лише для читання за відсутності прав на редагування.
  • Покращено підсвічування .properties, .cfg, .yml та .mcmeta.
  • Додано ліниве завантаження мовних розширень.

📱 Мобільна адаптація

  • Покращено відображення навігації та вкладок серверів.
  • Реалізовано автоматичне прокручування до активної вкладки.
  • Оновлено файловий менеджер та контекстне меню.
  • Покращено мобільну консоль: пошук у логах, історія команд і кнопка надсилання.
  • Оптимізовано розташування елементів керування редактором.

🐛 Виправлення помилок

  • Виправлено некоректне закриття випадаючих меню після оновлення React.
  • Усунено витік обробників подій у useEventListener.
  • Виправлено поведінку модальних вікон із dismissable={false}.
  • Виправлено зміну розміру консолі.
  • Усунено проблему неповного відображення каталогів із понад 250 файлами.

brocker96 and others added 13 commits October 26, 2026 14:29
Build & tooling
- Replace webpack/Babel/Jest with Vite 8 (Rolldown), laravel-vite-plugin and Vitest.
  twin.macro and styled-components keep working through @rolldown/plugin-babel.
- Load assets with Laravel's @Vite directive, drop the webpack manifest service.
- Upgrade TypeScript to 5.9 and ESLint to 9 (flat config), run tests in CI.
- Long-lived vendor chunks and lazy loaded route screens: the dashboard no longer
  downloads the console, charts and editor (1.7 MiB -> 0.77 MiB of JS).

Libraries
- React 16 -> 18 (createRoot), react-router 5 -> 7, SWR 0.2 -> 2, easy-peasy 4 -> 6,
  xterm 4 -> @xterm/xterm 5, boring-avatars 2, qrcode.react 4.
- Remove react-hot-loader, @preact/signals-react, redux-devtools-extension and
  styled-components-breakpoint.

File editor
- Rewrite on CodeMirror 6 with on-demand language loading, find & replace, line
  wrapping toggle, read-only mode without write permission and better detection
  of game server config files.
- Track unsaved changes and confirm before leaving the page or closing the tab.
- Mobile first layout with a touch friendly toolbar.

Mobile
- Responsive navigation and auto-scrolling sub-navigation.
- File manager rows show size/date on small screens, file actions open as a
  bottom sheet, mass action bar respects safe areas.
- Console: search bar replacing xterm-addon-search-bar, history and send buttons
  for touch keyboards, resize via ResizeObserver.

Fixes
- Dropdown menus closed immediately after opening under React 18.
- Console resize never worked because addons were re-created on every render.
- useEventListener leaked capture listeners.
- Modal ignored dismissable={false}.
- Large directories were truncated before sorting.
- Persisted state crashed when storage is unavailable.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014k7FLBnF777ZnQhMmMVUS1
@SkyMulley

Copy link
Copy Markdown
Member

Most of this has already been completed in the active 2.0-develop branch
https://github.com/pterodactyl/panel/tree/2.0-develop

@SkyMulley SkyMulley closed this Oct 26, 2026
@brocker96
brocker96 deleted the modernize/vite-react18 branch October 27, 2026 11:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants