build: replace webpack with vite (WIP)

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);

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() {

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);

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);

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);

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() {

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(
-  <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'));

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);