Remove electron remote module

config/i18next-parser.config.js

@@ -46,7 +46,7 @@ module.exports = {
     //   mjs: ['JavascriptLexer'],
     js: [{
       lexer: 'JavascriptLexer',
-      functions: ['t', 'addToVerifyList'], // Array of functions to match
+      functions: ['t', 'translate', 'addToVerifyList'], // Array of functions to match
     }],
   //   ts: ['JavascriptLexer'],
   //   jsx: ['JsxLexer'],

config/i18next.config.js

@@ -25,6 +25,23 @@ const usedNamespaces = [
   'ch01', 'ch02', 'ch03', 'ch04', 'ch05', 'ch06', 'ch07', 'ch08', 'ch09', 'ch10', 'ch11'
 ]
 
+// defaultOptions for interpolation
+const i18nDefaultOptions = {
+  cde: '<code>',
+  cde_e: '</code>',
+  em: '<em>',
+  em_e: '</em>',
+  lnk_e: '</a>',
+  str: '<strong>',
+  str_e: '</strong>',
+
+  // Simple Text, no HTML-Content
+  dqm: '"', // double quotation mark
+  gt: '>',
+  lt: '<',
+  smc: ';' // semicolon
+}
+
 const i18nextConfig = {
   // debug: true,
 
@@ -55,3 +72,4 @@ const i18nextConfig = {
 
 exports.i18nextConfig = i18nextConfig
 exports.appLanguages = appLanguages
+exports.i18nDefaultOptions = i18nDefaultOptions

lib/challenge-sidebar-handler.js

@@ -6,8 +6,8 @@ const path = require('path')
 const userData = require(path.normalize(path.join(__dirname, 'user-data.js')))
 
 // Execute after DOM loaded.
-document.addEventListener('DOMContentLoaded', () => {
-  const challengeUserData = userData.getChallengeData()
+document.addEventListener('DOMContentLoaded', async () => {
+  const challengeUserData = await userData.getChallengeData()
 
   Object.keys(challengeUserData).forEach((challengeKey) => {
     if (challengeUserData[challengeKey].challengeComplete) {
@@ -19,7 +19,7 @@ document.addEventListener('DOMContentLoaded', () => {
 /*
  * Show a challenge as complete/incomplete in sidebar
  */
-function showChallengeComplete (challengeKey, isComplete) {
+async function showChallengeComplete (challengeKey, isComplete) {
   if (isComplete) {
     document.getElementById('sidebar__list__item--' + challengeKey).classList.add('complete')
   } else {

lib/challenge-verify-handler.js

@@ -4,9 +4,9 @@
  */
 const path = require('path')
 const ipc = require('electron').ipcRenderer
-const i18n = require('electron').remote.getGlobal('i18n')
 const userData = require(path.normalize(path.join(__dirname, 'user-data.js')))
 const sidebarHandler = require(path.normalize(path.join(__dirname, 'challenge-sidebar-handler.js')))
+const { translate } = require('./renderer-helpers.js')
 
 const currentChallenge = document.head.querySelector('meta[name="currentChallenge"]').getAttribute('content')
 const verifyButton = document.getElementById('btn-verify-challenge')
@@ -25,7 +25,7 @@ const selectedDirDiv = document.getElementById('div-selected-dir')
  * Execute after DOM loaded.
  * Register Button-Handlers
  */
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('DOMContentLoaded', async () => {
   verifyButton.addEventListener('click', () => {
     handleVerifyClick()
   })
@@ -42,7 +42,7 @@ document.addEventListener('DOMContentLoaded', () => {
   // Only if button exists.
   // Before enableVerifyButtons, due to checked selectedDirPath there.
   if (selectDirButton) {
-    const savedDir = userData.getSavedDir(currentChallenge)
+    const savedDir = await userData.getSavedDir(currentChallenge)
 
     if (!savedDir) {
       showSelectedDirDiv(false)
@@ -52,7 +52,7 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   }
 
-  const challengeUserData = userData.getChallengeData(currentChallenge)
+  const challengeUserData = await userData.getChallengeData(currentChallenge)
   if (challengeUserData.challengeComplete) {
     enableVerifyButtons(false)
     enableClearStatusButton(true)
@@ -97,7 +97,7 @@ async function handleVerifyClick () {
   // In js it is possible to call with more parameters, than defined, not all challenges need the path-parameter
   const result = await verifyChallengeScript(selectedDirPath?.innerText)
 
-  clearVerifyList()
+  await clearVerifyList()
   printOutVerifyList(result.verifyList)
 
   if (result.challengeComplete) {
@@ -129,13 +129,13 @@ async function clearChallengeStatus () {
 /*
  * Write out the list to the DOM
  */
-function printOutVerifyList (list) {
+async function printOutVerifyList (list) {
   showVerifyList(true)
   list.forEach(listItem => {
     const li = document.createElement('li')
 
     li.appendChild(document.createTextNode(
-      i18n.t(listItem.message, listItem.data)
+      translate(listItem.message, listItem.data)
     ))
     if (listItem.pass) {
       li.classList.add('verify__list__elem--pass')
@@ -150,14 +150,14 @@ function printOutVerifyList (list) {
 /*
  * Small helper for readable code
  */
-function clearVerifyList () {
+async function clearVerifyList () {
   verifyList.innerHTML = ''
 }
 
 /*
  * clearStatusButton gets shown or not on enabled
  */
-function enableClearStatusButton (enabled) {
+async function enableClearStatusButton (enabled) {
   if (enabled) {
     clearStatusButton.style.display = 'block'
   } else {
@@ -169,7 +169,7 @@ function enableClearStatusButton (enabled) {
  * VerifyButtons get disabled or not.
  * This includes the verify-button, as well as the select-dir button if available.
  */
-function enableVerifyButtons (enabled) {
+async function enableVerifyButtons (enabled) {
   verifyButton.disabled = !enabled
 
   if (selectDirButton) {
@@ -185,24 +185,24 @@ function enableVerifyButtons (enabled) {
  * Either show selectedDirDiv or show PathRequiredWarning
  * If selectedDir is shown, the button should say 'Change Directory', else 'Select Directory'
  */
-function showSelectedDirDiv (show) {
+async function showSelectedDirDiv (show) {
   if (show) {
     selectedDirDiv.style.display = 'inline'
     pathRequiredWarning.style.display = 'none'
-    selectDirButton.innerText = i18n.t('verify~Change Directory')
+    selectDirButton.innerText = translate('verify~Change Directory')
     selectDirButton.setAttribute('i18n-data', 'verify~Change Directory')
   } else {
     selectedDirDiv.style.display = 'none'
     pathRequiredWarning.style.display = 'inline'
-    selectDirButton.innerText = i18n.t('verify~Select directory')
+    selectDirButton.innerText = translate('verify~Select directory')
     selectDirButton.setAttribute('i18n-data', 'verify~Select directory')
   }
 }
 
 /*
  * Show the verifySpinner or not
  */
-function showSpinner (show) {
+async function showSpinner (show) {
   if (show) {
     verifySpinner.style.display = 'inline-block'
   } else {
@@ -213,7 +213,7 @@ function showSpinner (show) {
 /*
  * Show verifyList or not
  */
-function showVerifyList (show) {
+async function showVerifyList (show) {
   if (show) {
     verifyList.style.display = 'block'
   } else {

lib/i18n-translate.js

@@ -7,25 +7,9 @@
  * - Listen for Language Dropdown Change
  */
 
-const i18n = require('electron').remote.getGlobal('i18n')
+const ipc = require('electron').ipcRenderer
 const { appLanguages } = require('../config/i18next.config')
-
-// defaultOptions for interpolation
-const defaultOptions = {
-  cde: '<code>',
-  cde_e: '</code>',
-  em: '<em>',
-  em_e: '</em>',
-  lnk_e: '</a>',
-  str: '<strong>',
-  str_e: '</strong>',
-
-  // Simple Text, no HTML-Content
-  dqm: '"', // double quotation mark
-  gt: '>',
-  lt: '<',
-  smc: ';' // semicolon
-}
+const { translate } = require('./renderer-helpers.js')
 
 /*
  * Insert translated Content after loading page.
@@ -41,22 +25,22 @@ document.addEventListener('DOMContentLoaded', () => {
  * When changeLanguage is done, the main process will reload the window therefore executing translation-insert from scratch.
  */
 const languageSelector = document.getElementById('header__lang__select')
-languageSelector.addEventListener('change', () => {
-  i18n.changeLanguage(languageSelector.value)
+languageSelector.addEventListener('change', async () => {
+  ipc.send('i18n.changeLanguage', languageSelector.value)
 })
 
 /*
  * Select current Language in Dropdown-Element
  */
-function setDropdownLanguage () {
+async function setDropdownLanguage () {
   const languageSelector = document.getElementById('header__lang__select')
-  languageSelector.value = i18n.language
+  languageSelector.value = ipc.sendSync('i18n.language')
 }
 
 /*
  * Insert Translations into HTML
  */
-function insertDataTranslations () {
+async function insertDataTranslations () {
   const i18nElements = document.querySelectorAll('[i18n-data]')
 
   i18nElements.forEach(element => {
@@ -75,9 +59,9 @@ function insertDataTranslations () {
     }
 
     if (type === 'html' || type === 'standard_html') {
-      element.innerHTML = i18n.t(data, { ...defaultOptions, ...options })
+      element.innerHTML = translate(data, options)
     } else {
-      element.innerText = i18n.t(data, { ...defaultOptions, ...options })
+      element.innerText = translate(data, options)
     }
   })
 }
@@ -87,12 +71,12 @@ function insertDataTranslations () {
  * Box Titles are done with CSS ::before, so the styles need to be inserted dynamically.
  *   Here always removing old styles and adding new ones into the specific Stylesheet (see challenges.hbs).
  */
-function insertTranslationStyles () {
+async function insertTranslationStyles () {
   const sheetTitle = 'jsTranslationStylesheet'
   const sheetIndex = [...document.styleSheets].findIndex(sheet => sheet.title === sheetTitle)
 
   // Insert Style for right-to-left languages
-  if (appLanguages[i18n.language].direction === 'rtl') {
+  if (appLanguages[ipc.sendSync('i18n.language')].direction === 'rtl') {
     document.getElementById('wrapper__content').classList.add('rtl')
   } else {
     document.getElementById('wrapper__content').classList.remove('rtl')
@@ -108,9 +92,9 @@ function insertTranslationStyles () {
   }
   // Append rules for box-titles
   if (document.styleSheets[sheetIndex].ownerNode.id === 'challenge-translation-style') {
-    document.styleSheets[sheetIndex].insertRule('.box--goal::before {content: "' + i18n.t('Goal') + '";}')
-    document.styleSheets[sheetIndex].insertRule('.box--fail::before {content: "' + i18n.t("Didn't Pass?") + '";}')
-    document.styleSheets[sheetIndex].insertRule('.box--tip::before {content: "' + i18n.t('Tip') + '";}')
-    document.styleSheets[sheetIndex].insertRule('.box--step::before {content: "' + i18n.t('Step') + '";}')
+    document.styleSheets[sheetIndex].insertRule('.box--goal::before {content: "' + translate('Goal') + '";}')
+    document.styleSheets[sheetIndex].insertRule('.box--fail::before {content: "' + translate("Didn't Pass?") + '";}')
+    document.styleSheets[sheetIndex].insertRule('.box--tip::before {content: "' + translate('Tip') + '";}')
+    document.styleSheets[sheetIndex].insertRule('.box--step::before {content: "' + translate('Step') + '";}')
   }
 }

lib/index-challenge-handler.js

@@ -18,9 +18,9 @@ const IndexSectionWip = document.getElementById('pgIndex__section--wip')
 const IndexSectionFinished = document.getElementById('pgIndex__section--finished')
 
 // Execute after DOM loaded.
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('DOMContentLoaded', async () => {
   // Get stored challengeUserData & store Key-Array as often used
-  const challengeUserData = userData.getChallengeData()
+  const challengeUserData = await userData.getChallengeData()
   const challengeUserDataKeys = Object.keys(challengeUserData)
 
   // Go through the challenges in challengeUserData to see which are complete
@@ -77,7 +77,7 @@ ipc.on('confirm-clearAll', () => {
  * Show exclusively the specified section.
  * section = 'start'|'wip'|'finished'
  */
-function showSection (section) {
+async function showSection (section) {
   // Only accept specific section-keywords
   const accept = ['start', 'wip', 'finished']