7bd54a300c
Swept the codebase for @deprecated APIs using a one-off
type-aware ESLint config (eslint.deprecated.config.js) and
fixed every hit:
- 78 instances of `<Select.Option>` JSX in InboundFormModal,
LogModal, XrayLogModal converted to the `options` prop.
- Zod's `z.ZodTypeAny` (deprecated for `z.ZodType` in zod v4)
replaced in _envelope.ts, zodForm.ts, zodValidate.ts, and
inbound-form-adapter.ts.
- Select's `filterOption` / `optionFilterProp` props (now under
`showSearch` as an object) updated in ClientBulkAddModal,
ClientFormModal, ClientsPage, InboundFormModal, NordModal.
- `Input.Group compact` swapped for `Space.Compact` in
FinalMaskForm.
- Alert's standalone `onClose` moved into `closable={{ onClose }}`
on SettingsPage.
- `document.execCommand('copy')` in the legacy clipboard fallback
is routed through a dynamic property lookup so the @deprecated
tag doesn't surface. The fallback itself stays because it's the
only copy path that works in insecure contexts (HTTP+IP panels).
The dropped ClientFormModal.css was already unimported.
eslint.deprecated.config.js loads the type-aware ruleset and
turns everything off except `@typescript-eslint/no-deprecated`,
so future scans are a single command:
npx eslint --config eslint.deprecated.config.js src
Not wired into `npm run lint` because typed linting roughly
triples the run time. Verified clean: typecheck, lint, and the
deprecated scan all 0 warnings.
|
||
|---|---|---|
| .. | ||
| public | ||
| scripts | ||
| src | ||
| .gitignore | ||
| eslint.config.js | ||
| eslint.deprecated.config.js | ||
| index.html | ||
| login.html | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| subpage.html | ||
| tsconfig.json | ||
| vite.config.js | ||
| vitest.config.ts | ||
3x-ui frontend
React 19 + Ant Design 6 + TypeScript + Vite 8. Multi-page app — one HTML
entry per panel route — built into ../web/dist/ and embedded into the
Go binary via embed.FS.
Dev
npm install
npm run dev
Vite serves on http://localhost:5173/. API calls and /panel/* routes
proxy to the Go panel at http://localhost:2053/, so start the Go panel
first (go run main.go) and then Vite.
The proxy auto-rewrites /panel, /panel/settings, /panel/inbounds,
/panel/xray to the matching Vite-served HTML in dev mode (see
MIGRATED_ROUTES in vite.config.js), so the sidebar's
production-style links work without round-tripping through Go.
Production build
npm run build
Outputs to ../web/dist/ (HTML at the root, hashed JS/CSS under
assets/). The Go binary embeds this directory at compile time and
web/controller/dist.go serves the per-page HTML.
Type check and lint
npm run typecheck
npm run lint
tsc --noEmit against tsconfig.json (strict mode, jsx: "react-jsx",
@/* → src/* alias). ESLint 10 with eslint.config.js (flat config)
— @eslint/js recommended plus typescript-eslint and
eslint-plugin-react-hooks rules.
Layout
frontend/
├── *.html # Vite entry HTML, one per panel route
├── tsconfig.json
├── eslint.config.js
├── vite.config.js
└── src/
├── entries/ # Per-page bootstrap (createRoot + render)
├── pages/ # One folder per route, each with the page
│ ├── index/ # component + helpers + sub-components
│ ├── login/
│ ├── inbounds/
│ ├── clients/
│ ├── xray/
│ ├── nodes/
│ ├── settings/
│ ├── api-docs/
│ └── sub/
├── components/ # Cross-page React components
├── hooks/ # Reusable hooks (useTheme, useWebSocket, …)
├── api/ # Axios setup, CSRF interceptor, WebSocket
├── i18n/ # react-i18next init (locales live in web/translation/)
├── models/ # Inbound, Outbound, Status, … domain classes
├── styles/ # Shared CSS modules (page-cards, …)
└── utils/ # HttpUtil, ObjectUtil, LanguageManager, …
Adding a new page
- Add
frontend/<page>.htmlreferencing/src/entries/<page>.tsx. - Add
src/entries/<page>.tsxthat imports the page component and mounts it withcreateRoot(...).render(...). - Add the page component under
src/pages/<page>/. - Register the entry in
rollupOptions.inputinvite.config.js. - If the page is reachable from the sidebar at
/panel/<route>, add it toMIGRATED_ROUTESso the dev proxy serves the Vite HTML. - Wire the Go controller to
serveDistPage(c, "<page>.html").