Migrate to Vite
- Migrated the codebase from create-react-app to Vite
This commit is contained in:
izawartka
parent
c4524c5f07
commit
c688e67281
2
.env.example
Normal file
2
.env.example
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
# please create .env.dev and .env.prod based on this file
|
||||||
|
VITE_BASE=/
|
||||||
9
.gitignore
vendored
9
.gitignore
vendored
@ -9,14 +9,13 @@
|
|||||||
/coverage
|
/coverage
|
||||||
|
|
||||||
# production
|
# production
|
||||||
/build
|
/dist
|
||||||
|
|
||||||
# misc
|
# misc
|
||||||
.DS_Store
|
.DS_Store
|
||||||
.env.local
|
.env
|
||||||
.env.development.local
|
.env.dev
|
||||||
.env.test.local
|
.env.prod
|
||||||
.env.production.local
|
|
||||||
|
|
||||||
npm-debug.log*
|
npm-debug.log*
|
||||||
yarn-debug.log*
|
yarn-debug.log*
|
||||||
|
|||||||
@ -2,13 +2,15 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<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="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<meta name="theme-color" content="#000000" />
|
<meta name="theme-color" content="#000000" />
|
||||||
|
<meta name="description" content="TD2 Visualizer" />
|
||||||
<title>TD2 Visualizer</title>
|
<title>TD2 Visualizer</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
<script type="module" src="src/index.jsx"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
14882
package-lock.json
generated
14882
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
18
package.json
18
package.json
@ -1,18 +1,18 @@
|
|||||||
{
|
{
|
||||||
"name": "visualizer2",
|
"name": "visualizer2",
|
||||||
"version": "1.7.2",
|
"version": "1.7.2",
|
||||||
|
"homepage": "/soft/td2-visualizer-2/",
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"-": "^0.0.1",
|
"react": "^19.2.8",
|
||||||
"react": "^19.1.0",
|
"react-dom": "^19.2.8",
|
||||||
"react-dom": "^19.1.0",
|
|
||||||
"react-scripts": "^5.0.1",
|
|
||||||
"react-svg": "^16.3.0",
|
"react-svg": "^16.3.0",
|
||||||
"rxjs": "^7.8.2"
|
"rxjs": "^7.8.2"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "react-scripts start",
|
"dev": "vite --mode dev",
|
||||||
"build": "react-scripts build"
|
"build": "vite build --mode prod",
|
||||||
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"eslintConfig": {
|
"eslintConfig": {
|
||||||
"extends": [
|
"extends": [
|
||||||
@ -31,7 +31,9 @@
|
|||||||
"last 1 safari version"
|
"last 1 safari version"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"overrides": {
|
"devDependencies": {
|
||||||
"nth-check": "$nth-check"
|
"@vitejs/plugin-react": "^6.0.5",
|
||||||
|
"vite": "^8.2.1",
|
||||||
|
"vite-plugin-svgr": "^5.2.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -14,7 +14,7 @@ export default function DerailerRenderer(props) {
|
|||||||
<g transform={`translate(${x}, ${y}) rotate(${object.rot.y})`}>
|
<g transform={`translate(${x}, ${y}) rotate(${object.rot.y})`}>
|
||||||
<g className="map-icon" transform={icon_transform}>
|
<g className="map-icon" transform={icon_transform}>
|
||||||
<ReactSVG
|
<ReactSVG
|
||||||
src={`${process.env.PUBLIC_URL}/assets/derailer.svg`}
|
src={`${import.meta.env.PUBLIC_URL}/assets/derailer.svg`}
|
||||||
wrapper='svg'
|
wrapper='svg'
|
||||||
|
|
||||||
beforeInjection={(svg) => {
|
beforeInjection={(svg) => {
|
||||||
@ -7,7 +7,7 @@ export default function NEVPRenderer(props) {
|
|||||||
return (
|
return (
|
||||||
<g className="map-icon" transform={`translate(${x}, ${y}) rotate(${object.rot.y}) translate(-1.89, -1.89)`}>
|
<g className="map-icon" transform={`translate(${x}, ${y}) rotate(${object.rot.y}) translate(-1.89, -1.89)`}>
|
||||||
<ReactSVG
|
<ReactSVG
|
||||||
src={`${process.env.PUBLIC_URL}/assets/nevp.svg`}
|
src={`${import.meta.env.PUBLIC_URL}/assets/nevp.svg`}
|
||||||
wrapper='svg'
|
wrapper='svg'
|
||||||
|
|
||||||
beforeInjection={(svg) => {
|
beforeInjection={(svg) => {
|
||||||
@ -17,7 +17,7 @@ export default function RouteRenderer(props) {
|
|||||||
return (<>
|
return (<>
|
||||||
<g className="map-icon" transform={`translate(${endX}, ${endY}) rotate(${endAngle + 90}) translate(-80, ${arrowOffset})`}>
|
<g className="map-icon" transform={`translate(${endX}, ${endY}) rotate(${endAngle + 90}) translate(-80, ${arrowOffset})`}>
|
||||||
<ReactSVG
|
<ReactSVG
|
||||||
src={`${process.env.PUBLIC_URL}/assets/route.svg`}
|
src={`${import.meta.env.PUBLIC_URL}/assets/route.svg`}
|
||||||
wrapper='svg'
|
wrapper='svg'
|
||||||
beforeInjection={(svg) => {
|
beforeInjection={(svg) => {
|
||||||
svg.setAttribute('width', '20mm');
|
svg.setAttribute('width', '20mm');
|
||||||
@ -17,7 +17,7 @@ export default function SignRenderer(props) {
|
|||||||
<g transform={`translate(${x}, ${y}) rotate(${rot}) translate(${offX}, ${offY})`}>
|
<g transform={`translate(${x}, ${y}) rotate(${rot}) translate(${offX}, ${offY})`}>
|
||||||
<g className='map-icon'>
|
<g className='map-icon'>
|
||||||
<ReactSVG
|
<ReactSVG
|
||||||
src={`${process.env.PUBLIC_URL}/assets/signs/${object.def.icon}`}
|
src={`${import.meta.env.PUBLIC_URL}/assets/signs/${object.def.icon}`}
|
||||||
wrapper='svg'
|
wrapper='svg'
|
||||||
|
|
||||||
beforeInjection={(svg) => {
|
beforeInjection={(svg) => {
|
||||||
@ -11,7 +11,7 @@ export default function SignalBoxRenderer(props) {
|
|||||||
<g transform={`translate(${x}, ${y})`}>
|
<g transform={`translate(${x}, ${y})`}>
|
||||||
<g className="map-icon" transform={`rotate(${rot}) translate(-4.725, -4.725)`}>
|
<g className="map-icon" transform={`rotate(${rot}) translate(-4.725, -4.725)`}>
|
||||||
<ReactSVG
|
<ReactSVG
|
||||||
src={`${process.env.PUBLIC_URL}/assets/signalboxes/${object.def.icon}`}
|
src={`${import.meta.env.PUBLIC_URL}/assets/signalboxes/${object.def.icon}`}
|
||||||
wrapper='svg'
|
wrapper='svg'
|
||||||
|
|
||||||
beforeInjection={(svg) => {
|
beforeInjection={(svg) => {
|
||||||
@ -172,7 +172,7 @@ function SignalHeadTOP(object, {headOffsetY}) {
|
|||||||
function SignalHomeMechArm(y, rot) {
|
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'>
|
return <g transform={`translate(0 ${y}) rotate(${rot}) translate(${C.MECH_ARM_X_OFF - 1.89}, -1.89)`} className='map-icon'>
|
||||||
<ReactSVG
|
<ReactSVG
|
||||||
src={`${process.env.PUBLIC_URL}/assets/mech_signals/arm.svg`}
|
src={`${import.meta.env.PUBLIC_URL}/assets/mech_signals/arm.svg`}
|
||||||
wrapper='svg'
|
wrapper='svg'
|
||||||
beforeInjection={(svg) => {
|
beforeInjection={(svg) => {
|
||||||
svg.setAttribute('width', '1mm');
|
svg.setAttribute('width', '1mm');
|
||||||
@ -185,7 +185,7 @@ function SignalHomeMechArm(y, rot) {
|
|||||||
function SignalCustomMechHead(y, fileName) {
|
function SignalCustomMechHead(y, fileName) {
|
||||||
return <g transform={`translate(-1.89, ${y - 1.89})`} className='map-icon'>
|
return <g transform={`translate(-1.89, ${y - 1.89})`} className='map-icon'>
|
||||||
<ReactSVG
|
<ReactSVG
|
||||||
src={`${process.env.PUBLIC_URL}/assets/mech_signals/${fileName}`}
|
src={`${import.meta.env.PUBLIC_URL}/assets/mech_signals/${fileName}`}
|
||||||
wrapper='svg'
|
wrapper='svg'
|
||||||
beforeInjection={(svg) => {
|
beforeInjection={(svg) => {
|
||||||
svg.setAttribute('width', '1mm');
|
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})`}>
|
return <g key={id} className="map-icon" transform={`translate(-1.89, ${y - 1.89})`}>
|
||||||
<ReactSVG
|
<ReactSVG
|
||||||
src={`${process.env.PUBLIC_URL}/assets/signal_signs/${def.icon}`}
|
src={`${import.meta.env.PUBLIC_URL}/assets/signal_signs/${def.icon}`}
|
||||||
wrapper='svg'
|
wrapper='svg'
|
||||||
beforeInjection={(svg) => {
|
beforeInjection={(svg) => {
|
||||||
svg.setAttribute('width', '1mm');
|
svg.setAttribute('width', '1mm');
|
||||||
@ -10,7 +10,7 @@ export default function SignalStandardRenderer(props) {
|
|||||||
<g transform={`translate(${x}, ${y}) rotate(${object.rot.y})`}>
|
<g transform={`translate(${x}, ${y}) rotate(${object.rot.y})`}>
|
||||||
<g className="map-icon-stroked" transform={`translate(-1.89, -1.89)`}>
|
<g className="map-icon-stroked" transform={`translate(-1.89, -1.89)`}>
|
||||||
<ReactSVG
|
<ReactSVG
|
||||||
src={`${process.env.PUBLIC_URL}/assets/signal.svg`}
|
src={`${import.meta.env.PUBLIC_URL}/assets/signal.svg`}
|
||||||
wrapper='svg'
|
wrapper='svg'
|
||||||
|
|
||||||
beforeInjection={(svg) => {
|
beforeInjection={(svg) => {
|
||||||
@ -9,7 +9,7 @@ export default function SpawnPointRenderer(props) {
|
|||||||
<g transform={`translate(${x}, ${y}) rotate(${object.rot.y})`}>
|
<g transform={`translate(${x}, ${y}) rotate(${object.rot.y})`}>
|
||||||
<g className="map-icon" transform={`rotate(180) translate(-2.835, -2.835)`}>
|
<g className="map-icon" transform={`rotate(180) translate(-2.835, -2.835)`}>
|
||||||
<ReactSVG
|
<ReactSVG
|
||||||
src={`${process.env.PUBLIC_URL}/assets/spawn.svg`}
|
src={`${import.meta.env.PUBLIC_URL}/assets/spawn.svg`}
|
||||||
wrapper='svg'
|
wrapper='svg'
|
||||||
|
|
||||||
beforeInjection={(svg) => {
|
beforeInjection={(svg) => {
|
||||||
@ -1,6 +1,6 @@
|
|||||||
import { forwardRef, useImperativeHandle } from 'react';
|
import { forwardRef, useImperativeHandle } from 'react';
|
||||||
import SceneryParserLog from '../../model/parsing/scenery-parser-log';
|
import SceneryParserLog from '../../model/parsing/scenery-parser-log';
|
||||||
import SceneryParserLogView from '../scenery-loaded-dialog/SceneryParserLogView';
|
import SceneryParserLogView from './SceneryParserLogView';
|
||||||
import '../dialog/Dialog.css';
|
import '../dialog/Dialog.css';
|
||||||
import './SceneryLoadedDialog.css'
|
import './SceneryLoadedDialog.css'
|
||||||
import Constants from '../../helpers/constants';
|
import Constants from '../../helpers/constants';
|
||||||
@ -74,8 +74,8 @@ const Constants = {
|
|||||||
},
|
},
|
||||||
sceneryFiles: {
|
sceneryFiles: {
|
||||||
fetchDisable: true,
|
fetchDisable: true,
|
||||||
fetchBaseUrl: `${process.env.PUBLIC_URL}/sceneries/`,
|
fetchBaseUrl: `${import.meta.env.BASE_URL}sceneries/`,
|
||||||
fetchListUrl: `${process.env.PUBLIC_URL}/sceneries/sceneries.json`,
|
fetchListUrl: `${import.meta.env.BASE_URL}sceneries/sceneries.json`,
|
||||||
},
|
},
|
||||||
layers: [
|
layers: [
|
||||||
{
|
{
|
||||||
|
|||||||
16
vite.config.mjs
Normal file
16
vite.config.mjs
Normal 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',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue
Block a user