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* yarn-error.log*
package-lock.json 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> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> <link rel="shortcut icon" href="/src/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`.
-->
<title>AES67 Daemon WebUI</title> <title>AES67 Daemon WebUI</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
<!-- <!--
This HTML file is a template. This HTML file is a template.
If you open it directly in the browser, you will see an empty page. If you open it directly in the browser, you will see an empty page.

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,5 +1,5 @@
// //
// Tab.js // Tab.jsx
// //
// Copyright (c) 2019 2020 Andrea Bondavalli. All rights reserved. // 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. // 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()]
})