mirror of https://github.com/mue/mue.git
build: replace webpack with vite (WIP)
This commit is contained in:
David Ralph
parent
a699163b46
commit
8e0511667a
|
|
@ -3,6 +3,7 @@ node_modules/
|
|||
.vscode/
|
||||
build/
|
||||
.idea/
|
||||
dist/
|
||||
|
||||
# Files
|
||||
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>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<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="16x16" href="./icons/16x16.png" />
|
||||
<title>New Tab</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>
|
||||
<style>
|
||||
*,
|
||||
a {
|
||||
font-family: 'Lexend Deca', sans-serif;
|
||||
text-align: center;
|
||||
color: black;
|
||||
background: white !important;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
*,
|
||||
a {
|
||||
color: white;
|
||||
background: #2f3640 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<h1>Error</h1>
|
||||
<h2>You need to enable JavaScript to use Mue</h2>
|
||||
<p>
|
||||
Having trouble? Contact us:
|
||||
<a href="https://muetab.com/contact">https://muetab.com/contact</a>
|
||||
</p>
|
||||
</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<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="16x16" href="./icons/16x16.png" />
|
||||
<title>New Tab</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>
|
||||
<style>
|
||||
*,
|
||||
a {
|
||||
font-family: 'Lexend Deca', sans-serif;
|
||||
text-align: center;
|
||||
color: black;
|
||||
background: white !important;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
*,
|
||||
a {
|
||||
color: white;
|
||||
background: #2f3640 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<h1>Error</h1>
|
||||
<h2>You need to enable JavaScript to use Mue</h2>
|
||||
<p>
|
||||
Having trouble? Contact us:
|
||||
<a href="https://muetab.com/contact">https://muetab.com/contact</a>
|
||||
</p>
|
||||
</noscript>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/index.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
31
package.json
31
package.json
|
|
@ -18,10 +18,10 @@
|
|||
"@fontsource/lexend-deca": "4.4.5",
|
||||
"@fontsource/montserrat": "4.4.5",
|
||||
"@mui/material": "5.6.0",
|
||||
"react": "18.0.0",
|
||||
"react": "^18.0.0",
|
||||
"react-clock": "3.1.0",
|
||||
"react-color-gradient-picker": "0.1.2",
|
||||
"react-dom": "18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"react-hot-keys": "2.7.1",
|
||||
"react-icons": "^4.3.1",
|
||||
"react-modal": "3.14.4",
|
||||
|
|
@ -29,34 +29,19 @@
|
|||
"react-toastify": "8.2.0"
|
||||
},
|
||||
"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",
|
||||
"babel-loader": "^8.2.4",
|
||||
"copy-webpack-plugin": "9.1.0",
|
||||
"css-loader": "^6.7.1",
|
||||
"@vitejs/plugin-react": "^1.3.0",
|
||||
"eslint": "^8.12.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-loader": "^12.6.0",
|
||||
"source-map-loader": "^3.0.1",
|
||||
"webpack": "^5.71.0",
|
||||
"webpack-cli": "^4.9.2",
|
||||
"webpack-dev-server": "^4.8.1"
|
||||
"vite": "^2.9.1"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "webpack serve",
|
||||
"start": "vite",
|
||||
"updatetranslations": "cd scripts && node updatetranslations.js",
|
||||
"build": "webpack --mode=production",
|
||||
"chrome": "cp manifest/chrome.json build/manifest.json && cp -r manifest/_locales build/_locales && cp manifest/background-chrome.js build/background-chrome.js",
|
||||
"firefox": "rm -rf build/_locales && cp manifest/firefox.json build/manifest.json"
|
||||
"build": "vite build",
|
||||
"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 dist/_locales && cp manifest/firefox.json dist/manifest.json"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import Tooltip from 'components/helpers/tooltip/Tooltip';
|
|||
|
||||
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 {
|
||||
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ import ResetModal from '../ResetModal';
|
|||
import Dropdown from '../Dropdown';
|
||||
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 {
|
||||
constructor() {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { PureComponent } from 'react';
|
|||
|
||||
import Radio from '../Radio';
|
||||
|
||||
const languages = require('modules/languages.json');
|
||||
import languages from 'modules/languages.json';
|
||||
|
||||
export default class LanguageSettings extends PureComponent {
|
||||
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@ import SettingsItem from '../SettingsItem';
|
|||
|
||||
import EventBus from 'modules/helpers/eventbus';
|
||||
|
||||
const searchEngines = require('components/widgets/search/search_engines.json');
|
||||
const autocompleteProviders = require('components/widgets/search/autocomplete_providers.json');
|
||||
import * as searchEngines from 'components/widgets/search/search_engines.json';
|
||||
import * as autocompleteProviders from 'components/widgets/search/autocomplete_providers.json';
|
||||
|
||||
export default class SearchSettings extends PureComponent {
|
||||
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 { importSettings } from 'modules/helpers/settings/modals';
|
||||
|
||||
const languages = require('modules/languages.json');
|
||||
const default_settings = require('modules/default_settings.json');
|
||||
import * as default_settings from 'modules/default_settings.json';
|
||||
import * as languages from 'modules/languages.json';
|
||||
|
||||
export default class WelcomeSections extends PureComponent {
|
||||
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@ import EventBus from 'modules/helpers/eventbus';
|
|||
|
||||
import './search.scss';
|
||||
|
||||
const searchEngines = require('./search_engines.json');
|
||||
const autocompleteProviders = require('./autocomplete_providers.json');
|
||||
import searchEngines from 'components/widgets/search/search_engines.json';
|
||||
import * as autocompleteProviders from 'components/widgets/search/autocomplete_providers.json';
|
||||
|
||||
export default class Search extends PureComponent {
|
||||
constructor() {
|
||||
|
|
|
|||
|
|
@ -1,53 +1,62 @@
|
|||
import { render } from 'react-dom';
|
||||
|
||||
import App from './App';
|
||||
import variables from 'modules/variables';
|
||||
|
||||
import './scss/index.scss';
|
||||
// the toast css is based on default so we need to import it
|
||||
import 'react-toastify/dist/ReactToastify.min.css';
|
||||
|
||||
// local stats
|
||||
import Stats from 'modules/helpers/stats';
|
||||
|
||||
// language
|
||||
import I18n from '@eartharoid/i18n';
|
||||
const languagecode = localStorage.getItem('language') || 'en_GB';
|
||||
|
||||
// we set things to window. so we avoid passing the translation strings as props to each component
|
||||
variables.languagecode = languagecode.replace('-', '_');
|
||||
|
||||
if (languagecode === 'en') {
|
||||
variables.languagecode = 'en_GB';
|
||||
}
|
||||
|
||||
variables.language = new I18n(variables.languagecode, {
|
||||
de_DE: require('./translations/de_DE.json'),
|
||||
en_GB: require('./translations/en_GB.json'),
|
||||
en_US: require('./translations/en_US.json'),
|
||||
es: require('./translations/es.json'),
|
||||
fr: require('./translations/fr.json'),
|
||||
nl: require('./translations/nl.json'),
|
||||
no: require('./translations/no.json'),
|
||||
ru: require('./translations/ru.json'),
|
||||
zh_CN: require('./translations/zh_CN.json'),
|
||||
id_ID: require('./translations/id_ID.json')
|
||||
});
|
||||
|
||||
// set html language tag
|
||||
if (variables.languagecode !== 'en_GB' || variables.languagecode !== 'en_US') {
|
||||
document.documentElement.lang = variables.languagecode.split('_')[0];
|
||||
}
|
||||
|
||||
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')
|
||||
);
|
||||
import { render } from 'react-dom';
|
||||
|
||||
import App from './App';
|
||||
import variables from 'modules/variables';
|
||||
|
||||
import './scss/index.scss';
|
||||
// the toast css is based on default so we need to import it
|
||||
import 'react-toastify/dist/ReactToastify.min.css';
|
||||
|
||||
// local stats
|
||||
import Stats from 'modules/helpers/stats';
|
||||
|
||||
// language
|
||||
import I18n from '@eartharoid/i18n';
|
||||
|
||||
import * as de_DE from './translations/de_DE.json';
|
||||
import * as en_GB from './translations/en_GB.json';
|
||||
import * as en_US from './translations/en_US.json';
|
||||
import * as es from './translations/es.json';
|
||||
import * as fr from './translations/fr.json';
|
||||
import * as nl from './translations/nl.json';
|
||||
import * as no from './translations/no.json';
|
||||
import * as ru from './translations/ru.json';
|
||||
import * as zh_CN from './translations/zh_CN.json';
|
||||
import * as id_ID from './translations/id_ID.json';
|
||||
|
||||
const languagecode = localStorage.getItem('language') || 'en_GB';
|
||||
|
||||
// we set things to window. so we avoid passing the translation strings as props to each component
|
||||
variables.languagecode = languagecode.replace('-', '_');
|
||||
|
||||
if (languagecode === 'en') {
|
||||
variables.languagecode = 'en_GB';
|
||||
}
|
||||
|
||||
variables.language = new I18n(variables.languagecode, {
|
||||
de_DE,
|
||||
en_GB,
|
||||
en_US,
|
||||
es,
|
||||
fr,
|
||||
nl,
|
||||
no,
|
||||
ru,
|
||||
zh_CN,
|
||||
id_ID,
|
||||
});
|
||||
|
||||
// set html language tag
|
||||
if (variables.languagecode !== 'en_GB' || variables.languagecode !== 'en_US') {
|
||||
document.documentElement.lang = variables.languagecode.split('_')[0];
|
||||
}
|
||||
|
||||
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 experimentalInit from '../experimental';
|
||||
|
||||
const defaultSettings = require('modules/default_settings.json');
|
||||
const languages = require('modules/languages.json');
|
||||
import * as defaultSettings from 'modules/default_settings.json';
|
||||
import * as languages from 'modules/languages.json';
|
||||
|
||||
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