Migrate to Vite

- Migrated the codebase from create-react-app to Vite
This commit is contained in:
izawartka 2026-08-12 17:18:20 +02:00
parent c4524c5f07
commit c688e67281
85 changed files with 1136 additions and 13845 deletions

2
.env.example Normal file
View File

@ -0,0 +1,2 @@
# please create .env.dev and .env.prod based on this file
VITE_BASE=/

9
.gitignore vendored
View File

@ -9,14 +9,13 @@
/coverage
# production
/build
/dist
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
.env
.env.dev
.env.prod
npm-debug.log*
yarn-debug.log*

View File

@ -2,13 +2,15 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.png" />
<link rel="icon" href="favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="TD2 Visualizer" />
<title>TD2 Visualizer</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="module" src="src/index.jsx"></script>
</body>
</html>

14906
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,18 +1,18 @@
{
"name": "visualizer2",
"version": "1.7.2",
"homepage": "/soft/td2-visualizer-2/",
"private": true,
"dependencies": {
"-": "^0.0.1",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"react-scripts": "^5.0.1",
"react": "^19.2.8",
"react-dom": "^19.2.8",
"react-svg": "^16.3.0",
"rxjs": "^7.8.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build"
"dev": "vite --mode dev",
"build": "vite build --mode prod",
"preview": "vite preview"
},
"eslintConfig": {
"extends": [
@ -31,7 +31,9 @@
"last 1 safari version"
]
},
"overrides": {
"nth-check": "$nth-check"
"devDependencies": {
"@vitejs/plugin-react": "^6.0.5",
"vite": "^8.2.1",
"vite-plugin-svgr": "^5.2.0"
}
}

View File

@ -14,7 +14,7 @@ export default function DerailerRenderer(props) {
<g transform={`translate(${x}, ${y}) rotate(${object.rot.y})`}>
<g className="map-icon" transform={icon_transform}>
<ReactSVG
src={`${process.env.PUBLIC_URL}/assets/derailer.svg`}
src={`${import.meta.env.PUBLIC_URL}/assets/derailer.svg`}
wrapper='svg'
beforeInjection={(svg) => {

View File

@ -7,7 +7,7 @@ export default function NEVPRenderer(props) {
return (
<g className="map-icon" transform={`translate(${x}, ${y}) rotate(${object.rot.y}) translate(-1.89, -1.89)`}>
<ReactSVG
src={`${process.env.PUBLIC_URL}/assets/nevp.svg`}
src={`${import.meta.env.PUBLIC_URL}/assets/nevp.svg`}
wrapper='svg'
beforeInjection={(svg) => {

View File

@ -17,7 +17,7 @@ export default function RouteRenderer(props) {
return (<>
<g className="map-icon" transform={`translate(${endX}, ${endY}) rotate(${endAngle + 90}) translate(-80, ${arrowOffset})`}>
<ReactSVG
src={`${process.env.PUBLIC_URL}/assets/route.svg`}
src={`${import.meta.env.PUBLIC_URL}/assets/route.svg`}
wrapper='svg'
beforeInjection={(svg) => {
svg.setAttribute('width', '20mm');

View File

@ -17,7 +17,7 @@ export default function SignRenderer(props) {
<g transform={`translate(${x}, ${y}) rotate(${rot}) translate(${offX}, ${offY})`}>
<g className='map-icon'>
<ReactSVG
src={`${process.env.PUBLIC_URL}/assets/signs/${object.def.icon}`}
src={`${import.meta.env.PUBLIC_URL}/assets/signs/${object.def.icon}`}
wrapper='svg'
beforeInjection={(svg) => {

View File

@ -11,7 +11,7 @@ export default function SignalBoxRenderer(props) {
<g transform={`translate(${x}, ${y})`}>
<g className="map-icon" transform={`rotate(${rot}) translate(-4.725, -4.725)`}>
<ReactSVG
src={`${process.env.PUBLIC_URL}/assets/signalboxes/${object.def.icon}`}
src={`${import.meta.env.PUBLIC_URL}/assets/signalboxes/${object.def.icon}`}
wrapper='svg'
beforeInjection={(svg) => {

View File

@ -172,7 +172,7 @@ function SignalHeadTOP(object, {headOffsetY}) {
function SignalHomeMechArm(y, rot) {
return <g transform={`translate(0 ${y}) rotate(${rot}) translate(${C.MECH_ARM_X_OFF - 1.89}, -1.89)`} className='map-icon'>
<ReactSVG
src={`${process.env.PUBLIC_URL}/assets/mech_signals/arm.svg`}
src={`${import.meta.env.PUBLIC_URL}/assets/mech_signals/arm.svg`}
wrapper='svg'
beforeInjection={(svg) => {
svg.setAttribute('width', '1mm');
@ -185,7 +185,7 @@ function SignalHomeMechArm(y, rot) {
function SignalCustomMechHead(y, fileName) {
return <g transform={`translate(-1.89, ${y - 1.89})`} className='map-icon'>
<ReactSVG
src={`${process.env.PUBLIC_URL}/assets/mech_signals/${fileName}`}
src={`${import.meta.env.PUBLIC_URL}/assets/mech_signals/${fileName}`}
wrapper='svg'
beforeInjection={(svg) => {
svg.setAttribute('width', '1mm');
@ -276,7 +276,7 @@ function SignalSign(id, y) {
return <g key={id} className="map-icon" transform={`translate(-1.89, ${y - 1.89})`}>
<ReactSVG
src={`${process.env.PUBLIC_URL}/assets/signal_signs/${def.icon}`}
src={`${import.meta.env.PUBLIC_URL}/assets/signal_signs/${def.icon}`}
wrapper='svg'
beforeInjection={(svg) => {
svg.setAttribute('width', '1mm');

View File

@ -10,7 +10,7 @@ export default function SignalStandardRenderer(props) {
<g transform={`translate(${x}, ${y}) rotate(${object.rot.y})`}>
<g className="map-icon-stroked" transform={`translate(-1.89, -1.89)`}>
<ReactSVG
src={`${process.env.PUBLIC_URL}/assets/signal.svg`}
src={`${import.meta.env.PUBLIC_URL}/assets/signal.svg`}
wrapper='svg'
beforeInjection={(svg) => {

View File

@ -9,7 +9,7 @@ export default function SpawnPointRenderer(props) {
<g transform={`translate(${x}, ${y}) rotate(${object.rot.y})`}>
<g className="map-icon" transform={`rotate(180) translate(-2.835, -2.835)`}>
<ReactSVG
src={`${process.env.PUBLIC_URL}/assets/spawn.svg`}
src={`${import.meta.env.PUBLIC_URL}/assets/spawn.svg`}
wrapper='svg'
beforeInjection={(svg) => {

View File

@ -1,6 +1,6 @@
import { forwardRef, useImperativeHandle } from 'react';
import SceneryParserLog from '../../model/parsing/scenery-parser-log';
import SceneryParserLogView from '../scenery-loaded-dialog/SceneryParserLogView';
import SceneryParserLogView from './SceneryParserLogView';
import '../dialog/Dialog.css';
import './SceneryLoadedDialog.css'
import Constants from '../../helpers/constants';

View File

@ -74,8 +74,8 @@ const Constants = {
},
sceneryFiles: {
fetchDisable: true,
fetchBaseUrl: `${process.env.PUBLIC_URL}/sceneries/`,
fetchListUrl: `${process.env.PUBLIC_URL}/sceneries/sceneries.json`,
fetchBaseUrl: `${import.meta.env.BASE_URL}sceneries/`,
fetchListUrl: `${import.meta.env.BASE_URL}sceneries/sceneries.json`,
},
layers: [
{

16
vite.config.mjs Normal file
View File

@ -0,0 +1,16 @@
import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd(), '');
return {
base: env.VITE_BASE || '/',
plugins: [
react(),
],
build: {
target: 'es2015',
},
};
});