mirror of https://github.com/mue/mue.git
build: replace webpack with vite (WIP)
This commit is contained in:
parent
a699163b46
commit
8e0511667a
|
@ -3,6 +3,7 @@ node_modules/
|
||||||
.vscode/
|
.vscode/
|
||||||
build/
|
build/
|
||||||
.idea/
|
.idea/
|
||||||
|
dist/
|
||||||
|
|
||||||
# Files
|
# Files
|
||||||
package-lock.json
|
package-lock.json
|
||||||
|
|
|
@ -1,16 +0,0 @@
|
||||||
module.exports = {
|
|
||||||
presets: [
|
|
||||||
'@babel/preset-env',
|
|
||||||
[
|
|
||||||
'@babel/preset-react',
|
|
||||||
{
|
|
||||||
runtime: 'automatic',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
],
|
|
||||||
plugins: [
|
|
||||||
'@babel/transform-runtime',
|
|
||||||
'@babel/plugin-transform-react-inline-elements',
|
|
||||||
'@babel/plugin-transform-react-constant-elements',
|
|
||||||
],
|
|
||||||
};
|
|
|
@ -1,39 +1,40 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<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="icon" type="image/png" sizes="32x32" href="./icons/32x32.png" />
|
<link rel="icon" type="image/png" sizes="32x32" href="./icons/32x32.png" />
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="./icons/16x16.png" />
|
<link rel="icon" type="image/png" sizes="16x16" href="./icons/16x16.png" />
|
||||||
<title>New Tab</title>
|
<title>New Tab</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<noscript>
|
<noscript>
|
||||||
<style>
|
<style>
|
||||||
*,
|
*,
|
||||||
a {
|
a {
|
||||||
font-family: 'Lexend Deca', sans-serif;
|
font-family: 'Lexend Deca', sans-serif;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: black;
|
color: black;
|
||||||
background: white !important;
|
background: white !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
*,
|
*,
|
||||||
a {
|
a {
|
||||||
color: white;
|
color: white;
|
||||||
background: #2f3640 !important;
|
background: #2f3640 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<h1>Error</h1>
|
<h1>Error</h1>
|
||||||
<h2>You need to enable JavaScript to use Mue</h2>
|
<h2>You need to enable JavaScript to use Mue</h2>
|
||||||
<p>
|
<p>
|
||||||
Having trouble? Contact us:
|
Having trouble? Contact us:
|
||||||
<a href="https://muetab.com/contact">https://muetab.com/contact</a>
|
<a href="https://muetab.com/contact">https://muetab.com/contact</a>
|
||||||
</p>
|
</p>
|
||||||
</noscript>
|
</noscript>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
</body>
|
<script type="module" src="/src/index.jsx"></script>
|
||||||
</html>
|
</body>
|
||||||
|
</html>
|
31
package.json
31
package.json
|
@ -18,10 +18,10 @@
|
||||||
"@fontsource/lexend-deca": "4.4.5",
|
"@fontsource/lexend-deca": "4.4.5",
|
||||||
"@fontsource/montserrat": "4.4.5",
|
"@fontsource/montserrat": "4.4.5",
|
||||||
"@mui/material": "5.6.0",
|
"@mui/material": "5.6.0",
|
||||||
"react": "18.0.0",
|
"react": "^18.0.0",
|
||||||
"react-clock": "3.1.0",
|
"react-clock": "3.1.0",
|
||||||
"react-color-gradient-picker": "0.1.2",
|
"react-color-gradient-picker": "0.1.2",
|
||||||
"react-dom": "18.0.0",
|
"react-dom": "^18.0.0",
|
||||||
"react-hot-keys": "2.7.1",
|
"react-hot-keys": "2.7.1",
|
||||||
"react-icons": "^4.3.1",
|
"react-icons": "^4.3.1",
|
||||||
"react-modal": "3.14.4",
|
"react-modal": "3.14.4",
|
||||||
|
@ -29,34 +29,19 @@
|
||||||
"react-toastify": "8.2.0"
|
"react-toastify": "8.2.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.17.9",
|
|
||||||
"@babel/eslint-parser": "^7.17.0",
|
|
||||||
"@babel/plugin-transform-react-constant-elements": "^7.17.6",
|
|
||||||
"@babel/plugin-transform-react-inline-elements": "^7.16.7",
|
|
||||||
"@babel/plugin-transform-runtime": "^7.17.0",
|
|
||||||
"@babel/preset-env": "^7.16.11",
|
|
||||||
"@babel/preset-react": "^7.16.7",
|
|
||||||
"@eartharoid/deep-merge": "^0.0.2",
|
"@eartharoid/deep-merge": "^0.0.2",
|
||||||
"babel-loader": "^8.2.4",
|
"@vitejs/plugin-react": "^1.3.0",
|
||||||
"copy-webpack-plugin": "9.1.0",
|
|
||||||
"css-loader": "^6.7.1",
|
|
||||||
"eslint": "^8.12.0",
|
"eslint": "^8.12.0",
|
||||||
"eslint-config-react-app": "^7.0.0",
|
"eslint-config-react-app": "^7.0.0",
|
||||||
"html-webpack-plugin": "^5.5.0",
|
|
||||||
"mini-css-extract-plugin": "^2.6.0",
|
|
||||||
"sass": "^1.50.0",
|
"sass": "^1.50.0",
|
||||||
"sass-loader": "^12.6.0",
|
"vite": "^2.9.1"
|
||||||
"source-map-loader": "^3.0.1",
|
|
||||||
"webpack": "^5.71.0",
|
|
||||||
"webpack-cli": "^4.9.2",
|
|
||||||
"webpack-dev-server": "^4.8.1"
|
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "webpack serve",
|
"start": "vite",
|
||||||
"updatetranslations": "cd scripts && node updatetranslations.js",
|
"updatetranslations": "cd scripts && node updatetranslations.js",
|
||||||
"build": "webpack --mode=production",
|
"build": "vite build",
|
||||||
"chrome": "cp manifest/chrome.json build/manifest.json && cp -r manifest/_locales build/_locales && cp manifest/background-chrome.js build/background-chrome.js",
|
"chrome": "cp manifest/chrome.json dist/manifest.json && cp -r manifest/_locales dist/_locales && cp manifest/background-chrome.js dist/background-chrome.js",
|
||||||
"firefox": "rm -rf build/_locales && cp manifest/firefox.json build/manifest.json"
|
"firefox": "rm -rf dist/_locales && cp manifest/firefox.json dist/manifest.json"
|
||||||
},
|
},
|
||||||
"browserslist": {
|
"browserslist": {
|
||||||
"production": [
|
"production": [
|
||||||
|
|
|
@ -9,7 +9,7 @@ import Tooltip from 'components/helpers/tooltip/Tooltip';
|
||||||
|
|
||||||
import SettingsItem from '../SettingsItem';
|
import SettingsItem from '../SettingsItem';
|
||||||
|
|
||||||
const other_contributors = require('modules/other_contributors.json');
|
import other_contributors from 'modules/other_contributors.json';
|
||||||
|
|
||||||
export default class About extends PureComponent {
|
export default class About extends PureComponent {
|
||||||
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||||
|
|
|
@ -18,7 +18,7 @@ import ResetModal from '../ResetModal';
|
||||||
import Dropdown from '../Dropdown';
|
import Dropdown from '../Dropdown';
|
||||||
import SettingsItem from '../SettingsItem';
|
import SettingsItem from '../SettingsItem';
|
||||||
|
|
||||||
const time_zones = require('components/widgets/time/timezones.json');
|
import time_zones from 'components/widgets/time/timezones.json';
|
||||||
|
|
||||||
export default class AdvancedSettings extends PureComponent {
|
export default class AdvancedSettings extends PureComponent {
|
||||||
constructor() {
|
constructor() {
|
||||||
|
|
|
@ -3,7 +3,7 @@ import { PureComponent } from 'react';
|
||||||
|
|
||||||
import Radio from '../Radio';
|
import Radio from '../Radio';
|
||||||
|
|
||||||
const languages = require('modules/languages.json');
|
import languages from 'modules/languages.json';
|
||||||
|
|
||||||
export default class LanguageSettings extends PureComponent {
|
export default class LanguageSettings extends PureComponent {
|
||||||
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||||
|
|
|
@ -11,8 +11,8 @@ import SettingsItem from '../SettingsItem';
|
||||||
|
|
||||||
import EventBus from 'modules/helpers/eventbus';
|
import EventBus from 'modules/helpers/eventbus';
|
||||||
|
|
||||||
const searchEngines = require('components/widgets/search/search_engines.json');
|
import * as searchEngines from 'components/widgets/search/search_engines.json';
|
||||||
const autocompleteProviders = require('components/widgets/search/autocomplete_providers.json');
|
import * as autocompleteProviders from 'components/widgets/search/autocomplete_providers.json';
|
||||||
|
|
||||||
export default class SearchSettings extends PureComponent {
|
export default class SearchSettings extends PureComponent {
|
||||||
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||||
|
|
|
@ -9,8 +9,8 @@ import FileUpload from '../main/settings/FileUpload';
|
||||||
import { loadSettings } from 'modules/helpers/settings';
|
import { loadSettings } from 'modules/helpers/settings';
|
||||||
import { importSettings } from 'modules/helpers/settings/modals';
|
import { importSettings } from 'modules/helpers/settings/modals';
|
||||||
|
|
||||||
const languages = require('modules/languages.json');
|
import * as default_settings from 'modules/default_settings.json';
|
||||||
const default_settings = require('modules/default_settings.json');
|
import * as languages from 'modules/languages.json';
|
||||||
|
|
||||||
export default class WelcomeSections extends PureComponent {
|
export default class WelcomeSections extends PureComponent {
|
||||||
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||||
|
|
|
@ -10,8 +10,8 @@ import EventBus from 'modules/helpers/eventbus';
|
||||||
|
|
||||||
import './search.scss';
|
import './search.scss';
|
||||||
|
|
||||||
const searchEngines = require('./search_engines.json');
|
import searchEngines from 'components/widgets/search/search_engines.json';
|
||||||
const autocompleteProviders = require('./autocomplete_providers.json');
|
import * as autocompleteProviders from 'components/widgets/search/autocomplete_providers.json';
|
||||||
|
|
||||||
export default class Search extends PureComponent {
|
export default class Search extends PureComponent {
|
||||||
constructor() {
|
constructor() {
|
||||||
|
|
|
@ -1,53 +1,62 @@
|
||||||
import { render } from 'react-dom';
|
import { render } from 'react-dom';
|
||||||
|
|
||||||
import App from './App';
|
import App from './App';
|
||||||
import variables from 'modules/variables';
|
import variables from 'modules/variables';
|
||||||
|
|
||||||
import './scss/index.scss';
|
import './scss/index.scss';
|
||||||
// the toast css is based on default so we need to import it
|
// the toast css is based on default so we need to import it
|
||||||
import 'react-toastify/dist/ReactToastify.min.css';
|
import 'react-toastify/dist/ReactToastify.min.css';
|
||||||
|
|
||||||
// local stats
|
// local stats
|
||||||
import Stats from 'modules/helpers/stats';
|
import Stats from 'modules/helpers/stats';
|
||||||
|
|
||||||
// language
|
// language
|
||||||
import I18n from '@eartharoid/i18n';
|
import I18n from '@eartharoid/i18n';
|
||||||
const languagecode = localStorage.getItem('language') || 'en_GB';
|
|
||||||
|
import * as de_DE from './translations/de_DE.json';
|
||||||
// we set things to window. so we avoid passing the translation strings as props to each component
|
import * as en_GB from './translations/en_GB.json';
|
||||||
variables.languagecode = languagecode.replace('-', '_');
|
import * as en_US from './translations/en_US.json';
|
||||||
|
import * as es from './translations/es.json';
|
||||||
if (languagecode === 'en') {
|
import * as fr from './translations/fr.json';
|
||||||
variables.languagecode = 'en_GB';
|
import * as nl from './translations/nl.json';
|
||||||
}
|
import * as no from './translations/no.json';
|
||||||
|
import * as ru from './translations/ru.json';
|
||||||
variables.language = new I18n(variables.languagecode, {
|
import * as zh_CN from './translations/zh_CN.json';
|
||||||
de_DE: require('./translations/de_DE.json'),
|
import * as id_ID from './translations/id_ID.json';
|
||||||
en_GB: require('./translations/en_GB.json'),
|
|
||||||
en_US: require('./translations/en_US.json'),
|
const languagecode = localStorage.getItem('language') || 'en_GB';
|
||||||
es: require('./translations/es.json'),
|
|
||||||
fr: require('./translations/fr.json'),
|
// we set things to window. so we avoid passing the translation strings as props to each component
|
||||||
nl: require('./translations/nl.json'),
|
variables.languagecode = languagecode.replace('-', '_');
|
||||||
no: require('./translations/no.json'),
|
|
||||||
ru: require('./translations/ru.json'),
|
if (languagecode === 'en') {
|
||||||
zh_CN: require('./translations/zh_CN.json'),
|
variables.languagecode = 'en_GB';
|
||||||
id_ID: require('./translations/id_ID.json')
|
}
|
||||||
});
|
|
||||||
|
variables.language = new I18n(variables.languagecode, {
|
||||||
// set html language tag
|
de_DE,
|
||||||
if (variables.languagecode !== 'en_GB' || variables.languagecode !== 'en_US') {
|
en_GB,
|
||||||
document.documentElement.lang = variables.languagecode.split('_')[0];
|
en_US,
|
||||||
}
|
es,
|
||||||
|
fr,
|
||||||
if (localStorage.getItem('stats') === 'true') {
|
nl,
|
||||||
variables.stats = Stats;
|
no,
|
||||||
}
|
ru,
|
||||||
|
zh_CN,
|
||||||
/*if (localStorage.getItem('keybindsEnabled') === 'true') {
|
id_ID,
|
||||||
variables.keybinds = JSON.parse(localStorage.getItem('keybinds') || '{}');
|
});
|
||||||
}*/
|
|
||||||
|
// set html language tag
|
||||||
render(
|
if (variables.languagecode !== 'en_GB' || variables.languagecode !== 'en_US') {
|
||||||
<App/>,
|
document.documentElement.lang = variables.languagecode.split('_')[0];
|
||||||
document.getElementById('root')
|
}
|
||||||
);
|
|
||||||
|
if (localStorage.getItem('stats') === 'true') {
|
||||||
|
variables.stats = Stats;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*if (localStorage.getItem('keybindsEnabled') === 'true') {
|
||||||
|
variables.keybinds = JSON.parse(localStorage.getItem('keybinds') || '{}');
|
||||||
|
}*/
|
||||||
|
|
||||||
|
render(<App />, document.getElementById('root'));
|
|
@ -1,8 +1,8 @@
|
||||||
import variables from 'modules/variables';
|
import variables from 'modules/variables';
|
||||||
import experimentalInit from '../experimental';
|
import experimentalInit from '../experimental';
|
||||||
|
|
||||||
const defaultSettings = require('modules/default_settings.json');
|
import * as defaultSettings from 'modules/default_settings.json';
|
||||||
const languages = require('modules/languages.json');
|
import * as languages from 'modules/languages.json';
|
||||||
|
|
||||||
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,16 @@
|
||||||
|
import { defineConfig } from 'vite';
|
||||||
|
import react from '@vitejs/plugin-react';
|
||||||
|
import path from 'path';
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
resolve: {
|
||||||
|
extensions: ['.js', '.jsx'],
|
||||||
|
alias: {
|
||||||
|
components: path.resolve(__dirname, './src/components'),
|
||||||
|
modules: path.resolve(__dirname, './src/modules'),
|
||||||
|
translations: path.resolve(__dirname, './src/translations'),
|
||||||
|
scss: path.resolve(__dirname, './src/scss')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
|
@ -1,88 +0,0 @@
|
||||||
const path = require('path');
|
|
||||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
|
||||||
const CopyPlugin = require('copy-webpack-plugin');
|
|
||||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
entry: path.resolve(__dirname, './src/index.js'),
|
|
||||||
mode: 'development',
|
|
||||||
performance: {
|
|
||||||
hints: false,
|
|
||||||
},
|
|
||||||
module: {
|
|
||||||
rules: [
|
|
||||||
{
|
|
||||||
test: /\.(js|jsx)$/,
|
|
||||||
exclude: /node_modules/,
|
|
||||||
use: ['babel-loader'],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.(|sc|c)ss$/,
|
|
||||||
use: [
|
|
||||||
{
|
|
||||||
loader: MiniCssExtractPlugin.loader,
|
|
||||||
options: {
|
|
||||||
publicPath: '',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
'css-loader',
|
|
||||||
'sass-loader',
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.(woff|woff2|svg)$/,
|
|
||||||
type: 'asset/resource',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.js$/,
|
|
||||||
enforce: 'pre',
|
|
||||||
use: ['source-map-loader'],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
resolve: {
|
|
||||||
extensions: ['.js', '.jsx'],
|
|
||||||
alias: {
|
|
||||||
components: path.resolve(__dirname, './src/components'),
|
|
||||||
modules: path.resolve(__dirname, './src/modules'),
|
|
||||||
translations: path.resolve(__dirname, './src/translations'),
|
|
||||||
scss: path.resolve(__dirname, './src/scss'),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
output: {
|
|
||||||
path: path.resolve(__dirname, './build'),
|
|
||||||
filename: '[name].[chunkhash].js',
|
|
||||||
chunkFilename: '[id].[chunkhash].chunk.js',
|
|
||||||
clean: true,
|
|
||||||
},
|
|
||||||
devServer: {
|
|
||||||
static: path.resolve(__dirname, './build'),
|
|
||||||
open: true,
|
|
||||||
port: 3000,
|
|
||||||
},
|
|
||||||
plugins: [
|
|
||||||
new HtmlWebpackPlugin({
|
|
||||||
template: path.resolve(__dirname, './public/index.html'),
|
|
||||||
}),
|
|
||||||
new CopyPlugin({
|
|
||||||
patterns: [
|
|
||||||
{
|
|
||||||
from: 'public/icons',
|
|
||||||
to: 'icons',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
from: 'public/offline-images',
|
|
||||||
to: 'offline-images',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
from: 'public/welcome-images',
|
|
||||||
to: 'welcome-images',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}),
|
|
||||||
new MiniCssExtractPlugin({
|
|
||||||
filename: '[name].[chunkhash].css',
|
|
||||||
chunkFilename: '[id].[chunkhash].chunk.css',
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
};
|
|
Loading…
Reference in New Issue