refactor: webpack alias imports

package.json

@@ -21,7 +21,7 @@
     "react-clock": "3.0.0",
     "react-color-gradient-picker": "0.1.2",
     "react-dom": "17.0.2",
-    "react-hot-keys": "^2.6.2",
+    "react-hot-keys": "2.6.2",
     "react-modal": "3.14.3",
     "react-sortable-hoc": "2.0.0",
     "react-toastify": "8.0.0",
@@ -54,6 +54,7 @@
   },
   "scripts": {
     "start": "webpack serve",
+    "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"

scripts/updatetranslations.js

@@ -1,3 +1,4 @@
+// tl;dr this function merges the translation file with the english file in order to add untranslated strings
 const fs = require('fs');
 const merge = require('@eartharoid/deep-merge');
 
@@ -8,5 +9,6 @@ fs.readdirSync('../src/translations').forEach((file) => {
 
   const newdata = merge(require('../src/translations/en_GB.json'), require('../src/translations/' + file));
   fs.writeFileSync('../src/translations/' + file, JSON.stringify(newdata, null, 2));
+  // add new line
   fs.appendFileSync('../src/translations/' + file, '\n');
 });

src/App.jsx

@@ -1,13 +1,13 @@
 import { PureComponent } from 'react';
 import { ToastContainer } from 'react-toastify';
 
-import Background from './components/widgets/background/Background';
-import Widgets from './components/widgets/Widgets';
-import Modals from './components/modals/Modals';
+import Background from 'components/widgets/background/Background';
+import Widgets from 'components/widgets/Widgets';
+import Modals from 'components/modals/Modals';
 
-import { loadSettings, moveSettings } from './modules/helpers/settings';
+import { loadSettings, moveSettings } from 'modules/helpers/settings';
 
-import EventBus from './modules/helpers/eventbus';
+import EventBus from 'modules/helpers/eventbus';
 
 export default class App extends PureComponent {
   componentDidMount() {

src/components/helpers/autocomplete/Autocomplete.jsx

@@ -1,6 +1,6 @@
 import { PureComponent } from 'react';
 
-import EventBus from '../../../modules/helpers/eventbus';
+import EventBus from 'modules/helpers/eventbus';
 
 import './autocomplete.scss';
 

src/components/modals/Modals.jsx

@@ -6,7 +6,7 @@ import Main from './main/Main';
 import Feedback from './feedback/Feedback';
 import Navbar from '../widgets/navbar/Navbar';
 
-import EventBus from '../../modules/helpers/eventbus';
+import EventBus from 'modules/helpers/eventbus';
 
 // Welcome modal is lazy loaded as the user won't use it every time they open a tab
 // We used to lazy load the main and feedback modals, but doing so broke the modal open animation on first click

src/components/modals/main/marketplace/sections/Added.jsx

@@ -6,7 +6,7 @@ import Item from '../Item';
 import Items from '../Items';
 import Dropdown from '../../settings/Dropdown';
 
-import { uninstall, urlParser } from '../../../../../modules/helpers/marketplace';
+import { uninstall, urlParser } from 'modules/helpers/marketplace';
 
 export default class Added extends PureComponent {
   constructor() {

src/components/modals/main/marketplace/sections/Create.jsx

@@ -7,7 +7,7 @@ import {
 } from '@material-ui/icons';
 import { toast } from 'react-toastify';
 
-import { saveFile } from '../../../../../modules/helpers/settings/modals';
+import { saveFile } from 'modules/helpers/settings/modals';
 
 import FileUpload from '../../settings/FileUpload';
 

src/components/modals/main/marketplace/sections/Marketplace.jsx

@@ -6,7 +6,7 @@ import Item from '../Item';
 import Items from '../Items';
 import Dropdown from '../../settings/Dropdown';
 
-import { install, urlParser, uninstall } from '../../../../../modules/helpers/marketplace';
+import { install, urlParser, uninstall } from 'modules/helpers/marketplace';
 
 export default class Marketplace extends PureComponent {
   constructor() {

src/components/modals/main/marketplace/sections/Sideload.jsx

@@ -3,7 +3,7 @@ import { toast } from 'react-toastify';
 
 import FileUpload from '../../settings/FileUpload';
 
-import { install } from '../../../../../modules/helpers/marketplace';
+import { install } from 'modules/helpers/marketplace';
 
 export default function Sideload() {
   const installAddon = (input) => {

src/components/modals/main/settings/Checkbox.jsx

@@ -1,7 +1,7 @@
 import { PureComponent } from 'react';
 import { Checkbox as CheckboxUI, FormControlLabel } from '@material-ui/core';
 
-import EventBus from '../../../../modules/helpers/eventbus';
+import EventBus from 'modules/helpers/eventbus';
 
 export default class Checkbox extends PureComponent {
   constructor(props) {

src/components/modals/main/settings/Dropdown.jsx

@@ -1,6 +1,6 @@
 import { PureComponent, createRef } from 'react';
 
-import EventBus from '../../../../modules/helpers/eventbus';
+import EventBus from 'modules/helpers/eventbus';
 
 export default class Dropdown extends PureComponent {
   constructor(props) {

src/components/modals/main/settings/Radio.jsx

@@ -1,7 +1,7 @@
 import { PureComponent } from 'react';
 import { Radio as RadioUI, RadioGroup, FormControlLabel, FormControl, FormLabel } from '@material-ui/core';
 
-import EventBus from '../../../../modules/helpers/eventbus';
+import EventBus from 'modules/helpers/eventbus';
 
 export default class Radio extends PureComponent {
   constructor(props) {

src/components/modals/main/settings/ResetModal.jsx

@@ -1,5 +1,5 @@
 import { Close, Delete } from '@material-ui/icons';
-import { setDefaultSettings } from '../../../../modules/helpers/settings';
+import { setDefaultSettings } from 'modules/helpers/settings';
 
 export default function ResetModal(props) {
   const language = window.language.modals.main.settings.sections.advanced.reset_modal;

src/components/modals/main/settings/Slider.jsx

@@ -2,7 +2,7 @@
 import { PureComponent } from 'react';
 import { toast } from 'react-toastify';
 
-import EventBus from '../../../../modules/helpers/eventbus';
+import EventBus from 'modules/helpers/eventbus';
 
 export default class Slider extends PureComponent {
   constructor(props) {

src/components/modals/main/settings/Switch.jsx

@@ -1,7 +1,7 @@
 import { PureComponent } from 'react';
 import { Switch as SwitchUI, FormControlLabel } from '@material-ui/core';
 
-import EventBus from '../../../../modules/helpers/eventbus';
+import EventBus from 'modules/helpers/eventbus';
 
 export default class Switch extends PureComponent {
   constructor(props) {

src/components/modals/main/settings/Text.jsx

@@ -1,7 +1,7 @@
 import { PureComponent } from 'react';
 import { toast } from 'react-toastify';
 
-import EventBus from '../../../../modules/helpers/eventbus';
+import EventBus from 'modules/helpers/eventbus';
 
 export default class Text extends PureComponent {
   constructor(props) {

src/components/modals/main/settings/sections/About.jsx

@@ -1,9 +1,9 @@
 import { PureComponent } from 'react';
 import { Email, Twitter, Chat, Instagram, Facebook } from '@material-ui/icons';
 
-import Tooltip from '../../../../helpers/tooltip/Tooltip';
+import Tooltip from 'components/helpers/tooltip/Tooltip';
 
-const other_contributors = require('../../../../../modules/other_contributors.json');
+const other_contributors = require('modules/other_contributors.json');
 
 export default class About extends PureComponent {
   constructor() {

src/components/modals/main/settings/sections/Advanced.jsx

@@ -1,7 +1,7 @@
 import { PureComponent } from 'react';
 import Modal from 'react-modal';
 
-import { exportSettings, importSettings } from '../../../../../modules/helpers/settings/modals';
+import { exportSettings, importSettings } from 'modules/helpers/settings/modals';
 
 import Checkbox from '../Checkbox';
 import FileUpload from '../FileUpload';
@@ -10,7 +10,7 @@ import Switch from '../Switch';
 import ResetModal from '../ResetModal';
 import Dropdown from '../Dropdown';
 
-const time_zones = require('../../../../widgets/time/timezones.json');
+const time_zones = require('components/widgets/time/timezones.json');
 
 export default class AdvancedSettings extends PureComponent {
   constructor() {

src/components/modals/main/settings/sections/Experimental.jsx

@@ -1,7 +1,7 @@
 import Checkbox from '../Checkbox';
 import Slider from '../Slider';
 
-import EventBus from '../../../../../modules/helpers/eventbus';
+import EventBus from 'modules/helpers/eventbus';
 
 export default function ExperimentalSettings() {
   const { experimental } = window.language.modals.main.settings.sections;

src/components/modals/main/settings/sections/Language.jsx

@@ -2,7 +2,7 @@ import { PureComponent } from 'react';
 
 import Radio from '../Radio';
 
-const languages = require('../../../../../modules/languages.json');
+const languages = require('modules/languages.json');
 
 export default class BackgroundSettings extends PureComponent {
   constructor() {

src/components/modals/main/settings/sections/Order.jsx

@@ -3,7 +3,7 @@ import { DragIndicator } from '@material-ui/icons';
 import { sortableContainer, sortableElement } from 'react-sortable-hoc';
 import { toast } from 'react-toastify';
 
-import EventBus from '../../../../../modules/helpers/eventbus';
+import EventBus from 'modules/helpers/eventbus';
 
 const settings = window.language.modals.main.settings.sections;
 const widget_name = {

src/components/modals/main/settings/sections/Search.jsx

@@ -6,10 +6,10 @@ import Checkbox from '../Checkbox';
 import Switch from '../Switch';
 import Radio from '../Radio';
 
-import EventBus from '../../../../../modules/helpers/eventbus';
+import EventBus from 'modules/helpers/eventbus';
 
-const searchEngines = require('../../../../widgets/search/search_engines.json');
-const autocompleteProviders = require('../../../../widgets/search/autocomplete_providers.json');
+const searchEngines = require('components/widgets/search/search_engines.json');
+const autocompleteProviders = require('components/widgets/search/autocomplete_providers.json');
 
 export default class SearchSettings extends PureComponent {
   constructor() {

src/components/modals/main/settings/sections/Stats.jsx

@@ -2,7 +2,7 @@ import { PureComponent } from 'react';
 
 import Switch from '../Switch';
 
-import EventBus from '../../../../../modules/helpers/eventbus';
+import EventBus from 'modules/helpers/eventbus';
 
 export default class Stats extends PureComponent {
   constructor() {

src/components/modals/main/settings/sections/background/Background.jsx

@@ -10,7 +10,7 @@ import Radio from '../../Radio';
 
 import ColourSettings from './Colour';
 
-import EventBus from '../../../../../../modules/helpers/eventbus';
+import EventBus from 'modules/helpers/eventbus';
 
 export default class BackgroundSettings extends PureComponent {
   constructor() {

src/components/modals/main/settings/sections/background/Colour.jsx

@@ -2,8 +2,8 @@ import { PureComponent, Fragment } from 'react';
 import { ColorPicker } from 'react-color-gradient-picker';
 import { toast } from 'react-toastify';
 
-import hexToRgb from '../../../../../../modules/helpers/background/hexToRgb';
-import rgbToHex from '../../../../../../modules/helpers/background/rgbToHex';
+import hexToRgb from 'modules/helpers/background/hexToRgb';
+import rgbToHex from 'modules/helpers/background/rgbToHex';
 
 import 'react-color-gradient-picker/dist/index.css';
 import '../../../scss/settings/react-color-picker-gradient-picker-custom-styles.scss';

src/components/modals/welcome/Welcome.jsx

@@ -1,6 +1,6 @@
 import { PureComponent } from 'react';
 
-import EventBus from '../../../modules/helpers/eventbus';
+import EventBus from 'modules/helpers/eventbus';
 
 import WelcomeSections from './WelcomeSections';
 import ProgressBar from './ProgressBar';

src/components/modals/welcome/WelcomeSections.jsx

@@ -5,11 +5,11 @@ import Radio from '../main/settings/Radio';
 import Checkbox from '../main/settings/Checkbox';
 import FileUpload from '../main/settings/FileUpload';
 
-import { loadSettings } from '../../../modules/helpers/settings';
-import { importSettings } from '../../../modules/helpers/settings/modals';
+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');
+const languages = require('modules/languages.json');
+const default_settings = require('modules/default_settings.json');
 
 export default class WelcomeSections extends PureComponent {
   constructor() {

src/components/widgets/Widgets.jsx

@@ -7,7 +7,7 @@ import Search from './search/Search';
 import QuickLinks from './quicklinks/QuickLinks';
 import Date from './time/Date';
 
-import EventBus from '../../modules/helpers/eventbus';
+import EventBus from 'modules/helpers/eventbus';
 
 const Weather = lazy(() => import('./weather/Weather'));
 const renderLoader = () => <></>;

src/components/widgets/background/Background.jsx

@@ -3,9 +3,9 @@ import { PureComponent } from 'react';
 
 import PhotoInformation from './PhotoInformation';
 
-import EventBus from '../../../modules/helpers/eventbus';
-import Interval from '../../../modules/helpers/interval';
-import { videoCheck, offlineBackground, gradientStyleBuilder } from '../../../modules/helpers/background/widget';
+import EventBus from 'modules/helpers/eventbus';
+import Interval from 'modules/helpers/interval';
+import { videoCheck, offlineBackground, gradientStyleBuilder } from 'modules/helpers/background/widget';
 
 import './scss/index.scss';
 

src/components/widgets/background/Favourite.jsx

@@ -2,7 +2,7 @@ import { PureComponent } from 'react';
 import { Star, StarBorder } from '@material-ui/icons';
 import Hotkeys from 'react-hot-keys';
 
-import Tooltip from '../../helpers/tooltip/Tooltip';
+import Tooltip from 'components/helpers/tooltip/Tooltip';
 
 export default class Favourite extends PureComponent {
   buttons = {

src/components/widgets/background/Maximise.jsx

@@ -2,7 +2,7 @@ import { PureComponent } from 'react';
 import { Fullscreen } from '@material-ui/icons';
 import Hotkeys from 'react-hot-keys';
 
-import Tooltip from '../../helpers/tooltip/Tooltip';
+import Tooltip from 'components/helpers/tooltip/Tooltip';
 
 export default class Maximise extends PureComponent {
   constructor() {

src/components/widgets/greeting/Greeting.jsx

@@ -1,7 +1,7 @@
 import { PureComponent, createRef } from 'react';
 
-import { nth, convertTimezone } from '../../../modules/helpers/date';
-import EventBus from '../../../modules/helpers/eventbus';
+import { nth, convertTimezone } from 'modules/helpers/date';
+import EventBus from 'modules/helpers/eventbus';
 
 import './greeting.scss';
 

src/components/widgets/navbar/Navbar.jsx

@@ -4,9 +4,9 @@ import { RefreshRounded, SettingsRounded, AssignmentRounded as NotesRounded, Sms
 import Notes from './Notes';
 import Maximise from '../background/Maximise';
 import Favourite from '../background/Favourite';
-import Tooltip from '../../helpers/tooltip/Tooltip';
+import Tooltip from 'components/helpers/tooltip/Tooltip';
 
-import EventBus from '../../../modules/helpers/eventbus';
+import EventBus from 'modules/helpers/eventbus';
 
 import './scss/index.scss';
 

src/components/widgets/quicklinks/QuickLinks.jsx

@@ -2,9 +2,9 @@ import { PureComponent, createRef } from 'react';
 import { TextareaAutosize } from '@material-ui/core';
 import Hotkeys from 'react-hot-keys';
 
-import Tooltip from '../../helpers/tooltip/Tooltip';
+import Tooltip from 'components/helpers/tooltip/Tooltip';
 
-import EventBus from '../../../modules/helpers/eventbus';
+import EventBus from 'modules/helpers/eventbus';
 
 import './quicklinks.scss';
 

src/components/widgets/quote/Quote.jsx

@@ -3,8 +3,8 @@ import { FilterNone as FileCopy, Twitter, Star, StarBorder } from '@material-ui/
 import { toast } from 'react-toastify';
 import Hotkeys from 'react-hot-keys';
 
-import Interval from '../../../modules/helpers/interval';
-import EventBus from '../../../modules/helpers/eventbus';
+import Interval from 'modules/helpers/interval';
+import EventBus from 'modules/helpers/eventbus';
 
 import './quote.scss';
 

src/components/widgets/search/Search.jsx

@@ -2,9 +2,9 @@ import { PureComponent, Fragment } from 'react';
 import { Search as SearchIcon, Mic } from '@material-ui/icons';
 import Hotkeys from 'react-hot-keys';
 
-import AutocompleteInput from '../../helpers/autocomplete/Autocomplete';
+import AutocompleteInput from 'components/helpers/autocomplete/Autocomplete';
 
-import EventBus from '../../../modules/helpers/eventbus';
+import EventBus from 'modules/helpers/eventbus';
 
 import './search.scss';
 

src/components/widgets/time/Clock.jsx

@@ -1,7 +1,7 @@
 import { PureComponent, Suspense, lazy } from 'react';
 
-import { convertTimezone } from '../../../modules/helpers/date';
-import EventBus from '../../../modules/helpers/eventbus';
+import { convertTimezone } from 'modules/helpers/date';
+import EventBus from 'modules/helpers/eventbus';
 
 import './clock.scss';
 

src/components/widgets/time/Date.jsx

@@ -1,7 +1,7 @@
 import { PureComponent, createRef } from 'react';
 
-import { nth, convertTimezone } from '../../../modules/helpers/date';
-import EventBus from '../../../modules/helpers/eventbus';
+import { nth, convertTimezone } from 'modules/helpers/date';
+import EventBus from 'modules/helpers/eventbus';
 
 import './date.scss';
 

src/components/widgets/weather/Weather.jsx

@@ -4,7 +4,7 @@ import { WiHumidity, WiWindy, WiBarometer, WiCloud } from 'weather-icons-react';
 import WeatherIcon from './WeatherIcon';
 import WindDirectionIcon from './WindDirectionIcon';
 
-import EventBus from '../../../modules/helpers/eventbus';
+import EventBus from 'modules/helpers/eventbus';
 
 import './weather.scss';
 

src/index.js

@@ -1,14 +1,14 @@
 import { render } from 'react-dom';
 
 import App from './App';
-import * as Constants from './modules/constants';
+import * as Constants from 'modules/constants';
 
 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';
+import Stats from 'modules/helpers/stats';
 
 // language
 const languagecode = localStorage.getItem('language') || 'en_GB';

src/modules/helpers/settings/index.js

@@ -1,7 +1,7 @@
 import experimentalInit from '../experimental';
 
-const defaultSettings = require('../../default_settings.json');
-const languages = require('../../languages.json');
+const defaultSettings = require('modules/default_settings.json');
+const languages = require('modules/languages.json');
 
 export function setDefaultSettings(reset) {
   localStorage.clear();

webpack.config.js

@@ -39,7 +39,11 @@ module.exports = {
     }]
   },
   resolve: {
-    extensions: ['.js', '.jsx']
+    extensions: ['.js', '.jsx'],
+    alias: {
+      components: path.resolve(__dirname, 'src/components'),
+      modules: path.resolve(__dirname, 'src/modules')
+    }
   },
   output: {
     path: path.resolve(__dirname, './build'),