diff --git a/.gitignore b/.gitignore
index 8d36bf3d..980b6688 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,6 +3,7 @@ node_modules/
.vscode/
build/
.idea/
+dist/
# Files
package-lock.json
diff --git a/babel.config.js b/babel.config.js
deleted file mode 100644
index 95baeec5..00000000
--- a/babel.config.js
+++ /dev/null
@@ -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',
- ],
-};
diff --git a/public/index.html b/index.html
similarity index 94%
rename from public/index.html
rename to index.html
index 777aaf91..fc076809 100644
--- a/public/index.html
+++ b/index.html
@@ -1,39 +1,40 @@
-
-
-
-
-
-
-
- New Tab
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+ New Tab
+
+
+
+
+
+
+
+
diff --git a/package.json b/package.json
index 05120cf6..c964beb7 100644
--- a/package.json
+++ b/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": [
diff --git a/src/components/modals/main/settings/sections/About.jsx b/src/components/modals/main/settings/sections/About.jsx
index 09036e54..3c6035d4 100644
--- a/src/components/modals/main/settings/sections/About.jsx
+++ b/src/components/modals/main/settings/sections/About.jsx
@@ -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);
diff --git a/src/components/modals/main/settings/sections/Advanced.jsx b/src/components/modals/main/settings/sections/Advanced.jsx
index db7f6768..82892577 100644
--- a/src/components/modals/main/settings/sections/Advanced.jsx
+++ b/src/components/modals/main/settings/sections/Advanced.jsx
@@ -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() {
diff --git a/src/components/modals/main/settings/sections/Language.jsx b/src/components/modals/main/settings/sections/Language.jsx
index a1ce4034..9d1e7ded 100644
--- a/src/components/modals/main/settings/sections/Language.jsx
+++ b/src/components/modals/main/settings/sections/Language.jsx
@@ -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);
diff --git a/src/components/modals/main/settings/sections/Search.jsx b/src/components/modals/main/settings/sections/Search.jsx
index b68aa156..86b09a13 100644
--- a/src/components/modals/main/settings/sections/Search.jsx
+++ b/src/components/modals/main/settings/sections/Search.jsx
@@ -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);
diff --git a/src/components/modals/welcome/WelcomeSections.jsx b/src/components/modals/welcome/WelcomeSections.jsx
index 94420c37..32ebd51c 100644
--- a/src/components/modals/welcome/WelcomeSections.jsx
+++ b/src/components/modals/welcome/WelcomeSections.jsx
@@ -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);
diff --git a/src/components/widgets/search/Search.jsx b/src/components/widgets/search/Search.jsx
index 43e3673e..ea014e44 100644
--- a/src/components/widgets/search/Search.jsx
+++ b/src/components/widgets/search/Search.jsx
@@ -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() {
diff --git a/src/index.js b/src/index.jsx
similarity index 64%
rename from src/index.js
rename to src/index.jsx
index 6ed9ceaf..e7802854 100644
--- a/src/index.js
+++ b/src/index.jsx
@@ -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(
- ,
- document.getElementById('root')
-);
\ No newline at end of file
+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(, document.getElementById('root'));
diff --git a/src/modules/helpers/settings/index.js b/src/modules/helpers/settings/index.js
index 90e32296..0d69066a 100644
--- a/src/modules/helpers/settings/index.js
+++ b/src/modules/helpers/settings/index.js
@@ -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);
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 00000000..5221c633
--- /dev/null
+++ b/vite.config.js
@@ -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')
+ }
+ }
+});
diff --git a/webpack.config.js b/webpack.config.js
deleted file mode 100644
index c40527e3..00000000
--- a/webpack.config.js
+++ /dev/null
@@ -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',
- }),
- ],
-};