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', - }), - ], -};