feat: use vite as bundler

This commit is contained in:
Anton Bracke 2021-05-27 09:23:01 +02:00
parent 35f7772cbb
commit b64ae40dcf
21 changed files with 171 additions and 1799 deletions

5
webui/.gitignore vendored
View File

@ -17,3 +17,8 @@ yarn-debug.log*
yarn-error.log*
package-lock.json
node_modules
.DS_Store
dist
dist-ssr
*.local

File diff suppressed because it is too large Load Diff

View File

@ -3,20 +3,12 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tag above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<link rel="shortcut icon" href="/src/favicon.ico">
<title>AES67 Daemon WebUI</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.

View File

@ -2,19 +2,21 @@
"name": "aes67-daemon-webui",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "vite",
"build": "vite build",
"serve": "vite preview"
},
"dependencies": {
"react": "^16.11.0",
"react-dom": "^16.11.0",
"react": "^17.0.0",
"react-dom": "^17.0.0",
"react-modal": "^3.11.1",
"react-router-dom": "^5.1.2",
"react-scripts": "0.9.5",
"react-toastify": "^5.5.0"
},
"devDependencies": {},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
"devDependencies": {
"@vitejs/plugin-react-refresh": "^1.3.1",
"vite": "^2.3.4"
}
}

View File

@ -1,5 +1,5 @@
//
// index.js
// App.jsx
//
// Copyright (c) 2019 2020 Andrea Bondavalli. All rights reserved.
//
@ -26,6 +26,8 @@ import 'react-toastify/dist/ReactToastify.css';
import ConfigTabs from './ConfigTabs';
import './styles.css';
toast.configure()
function App() {
@ -45,6 +47,4 @@ function App() {
);
}
const container = document.createElement('div');
document.body.appendChild(container);
render( <App/>, container);
export default App

View File

@ -1,5 +1,5 @@
//
// Config.js
// Config.jsx
//
// Copyright (c) 2019 2020 Andrea Bondavalli. All rights reserved.
//
@ -24,8 +24,6 @@ import { toast } from 'react-toastify';
import RestAPI from './Services';
import Loader from './Loader';
require('./styles.css');
class Config extends Component {
constructor(props) {
super(props);

View File

@ -1,5 +1,5 @@
//
// ConfigTabs.js
// ConfigTabs.jsx
//
// Copyright (c) 2019 2020 Andrea Bondavalli. All rights reserved.
//
@ -28,8 +28,6 @@ import Sources from './Sources';
import Sinks from './Sinks';
import RemoteSources from './RemoteSources';
require('./styles.css');
class ConfigTabs extends Component {
static propTypes = {
currentTab: PropTypes.string.isRequired

View File

@ -1,5 +1,5 @@
//
// Loader.js
// Loader.jsx
//
// Copyright (c) 2019 2020 Andrea Bondavalli. All rights reserved.
//

View File

@ -1,5 +1,5 @@
//
// PTP.js
// PTP.jsx
//
// Copyright (c) 2019 2020 Andrea Bondavalli. All rights reserved.
//
@ -25,8 +25,6 @@ import {toast} from 'react-toastify';
import RestAPI from './Services';
import Loader from './Loader';
require('./styles.css');
class PTPConfig extends Component {
static propTypes = {

View File

@ -1,5 +1,5 @@
//
// RemoteSource.js
// RemoteSource.jsx
//
// Copyright (c) 2019 2020 Andrea Bondavalli. All rights reserved.
//
@ -25,8 +25,6 @@ import RestAPI from './Services';
import Loader from './Loader';
import SourceInfo from './SourceInfo';
require('./styles.css');
class RemoteSourceEntry extends Component {
static propTypes = {
source: PropTypes.string.isRequired,

View File

@ -1,5 +1,5 @@
//
// SinkEdit.js
// SinkEdit.jsx
//
// Copyright (c) 2019 2020 Andrea Bondavalli. All rights reserved.
//
@ -25,8 +25,6 @@ import Modal from 'react-modal';
import RestAPI from './Services';
require('./styles.css');
const editCustomStyles = {
content : {
top: '50%',

View File

@ -1,5 +1,5 @@
//
// SinkRemove.js
// SinkRemove.jsx
//
// Copyright (c) 2019 2020 Andrea Bondavalli. All rights reserved.
//
@ -25,8 +25,6 @@ import Modal from 'react-modal';
import RestAPI from './Services';
require('./styles.css');
const removeCustomStyles = {
content : {
top: '50%',

View File

@ -1,5 +1,5 @@
//
// Sinks.js
// Sinks.jsx
//
// Copyright (c) 2019 2020 Andrea Bondavalli. All rights reserved.
//
@ -26,8 +26,6 @@ import Loader from './Loader';
import SinkEdit from './SinkEdit';
import SinkRemove from './SinkRemove';
require('./styles.css');
class SinkEntry extends Component {
static propTypes = {
id: PropTypes.number.isRequired,

View File

@ -1,5 +1,5 @@
//
// SourceEdit.js
// SourceEdit.jsx
//
// Copyright (c) 2019 2020 Andrea Bondavalli. All rights reserved.
//
@ -25,8 +25,6 @@ import Modal from 'react-modal';
import RestAPI from './Services';
require('./styles.css');
const editCustomStyles = {
content : {
top: '50%',

View File

@ -1,5 +1,5 @@
//
// SourceInfo.js
// SourceInfo.jsx
//
// Copyright (c) 2019 2020 Andrea Bondavalli. All rights reserved.
//
@ -22,8 +22,6 @@ import React, {Component} from 'react';
import PropTypes from 'prop-types';
import Modal from 'react-modal';
require('./styles.css');
const infoCustomStyles = {
content : {
top: '50%',

View File

@ -1,5 +1,5 @@
//
// SourceRemove.js
// SourceRemove.jsx
//
// Copyright (c) 2019 2020 Andrea Bondavalli. All rights reserved.
//
@ -25,8 +25,6 @@ import Modal from 'react-modal';
import RestAPI from './Services';
require('./styles.css');
const removeCustomStyles = {
content : {
top: '50%',

View File

@ -1,5 +1,5 @@
//
// Sources.js
// Sources.jsx
//
// Copyright (c) 2019 2020 Andrea Bondavalli. All rights reserved.
//
@ -27,8 +27,6 @@ import SourceEdit from './SourceEdit';
import SourceRemove from './SourceRemove';
import SourceInfo from './SourceInfo';
require('./styles.css');
class SourceEntry extends Component {
static propTypes = {
id: PropTypes.number.isRequired,

View File

@ -1,5 +1,5 @@
//
// Tab.js
// Tab.jsx
//
// Copyright (c) 2019 2020 Andrea Bondavalli. All rights reserved.
//

View File

@ -1,5 +1,5 @@
//
// Tabs.js
// Tabs.jsx
//
// Copyright (c) 2019 2020 Andrea Bondavalli. All rights reserved.
//

11
webui/src/main.jsx Normal file
View File

@ -0,0 +1,11 @@
import React from 'react'
import ReactDOM from 'react-dom'
import './styles.css'
import App from './app'
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
)

7
webui/vite.config.js Normal file
View File

@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [reactRefresh()]
})