Fixup WelcomeWIn

Author: hovancik

app/contributor-preferences.js

@@ -9,7 +9,7 @@ let eventsAttached = false
 
 window.onload = (event) => {
   import('./platform')
-  ipcRenderer.send('send-settings')
+  ipcRenderer.send('current-settings')
   htmlTranslate.translate()
   setTimeout(() => { eventsAttached = true }, 500)
 

app/main.js

@@ -330,12 +330,12 @@ function startI18next () {
     })
 }
 
-i18next.on('languageChanged', async function (lng) {
+i18next.on('languageChanged', () => {
   if (welcomeWin) {
-    welcomeWin.send('translate', await settingsToSend())
+    welcomeWin.webContents.send('translate')
   }
   if (preferencesWin) {
-    preferencesWin.send('translate', await settingsToSend())
+    preferencesWin.webContents.send('translate')
   }
   updateTray()
   loadIdeas()
@@ -570,8 +570,7 @@ function createWelcomeWindow (isAppStart = true) {
       icon: windowIconPath(),
       backgroundColor: 'EDEDED',
       webPreferences: {
-        preload: join(__dirname, './welcome.js'),
-        enableRemoteModule: true,
+        preload: join(__dirname, './welcome-preload.mjs'),
         sandbox: false
       }
     })
@@ -1495,14 +1494,6 @@ ipcMain.on('restore-defaults', (event) => {
   })
 })
 
-ipcMain.on('send-settings', async function (event) {
-  event.sender.send('renderSettings', await settingsToSend())
-})
-
-async function settingsToSend () {
-  return Object.assign({}, settings.store, { openAtLogin: await autostartManager.autoLaunchStatus() })
-}
-
 ipcMain.on('play-sound', function (event, sound) {
   processWin.webContents.send('play-sound', sound, settings.get('volume'))
 })
@@ -1582,10 +1573,14 @@ ipcMain.on('open-sync-preferences', (event) => {
   createSyncPreferencesWindow()
 })
 
-ipcMain.handle('current-settings', (event) => {
-  return settings.store
+ipcMain.handle('current-settings', async (event) => {
+  return await settingsToSend()
 })
 
+async function settingsToSend () {
+  return Object.assign({}, settings.store, { openAtLogin: await autostartManager.autoLaunchStatus() })
+}
+
 ipcMain.handle('restore-remote-settings', (event, remoteSettings) => {
   log.info('Stretchly: restoring remote settings')
   settings.store = remoteSettings
@@ -1603,3 +1598,9 @@ ipcMain.handle('i18next-dir', (event) => {
 ipcMain.handle('settings-get', (event, key) => {
   return settings.get(key)
 })
+
+ipcMain.on('close-welcome-window', () => {
+  if (welcomeWin) {
+    welcomeWin.close()
+  }
+})

app/preferences.js

@@ -12,7 +12,7 @@ let eventsAttached = false
 
 window.onload = (e) => {
   import('./platform.js')
-  ipcRenderer.send('send-settings')
+  ipcRenderer.send('current-settings')
   htmlTranslate.translate()
   setWindowHeight()
   setTimeout(() => { eventsAttached = true }, 500)

app/welcome-preload.mjs

@@ -0,0 +1,24 @@
+import { ipcRenderer, shell, contextBridge } from 'electron'
+import './expose-process.js'
+
+contextBridge.exposeInMainWorld('settings', {
+  currentSettings: async () => {
+    return await ipcRenderer.invoke('current-settings')
+  },
+  saveSettings: async (key, value) => {
+    ipcRenderer.send('save-setting', key, value)
+  }
+})
+
+contextBridge.exposeInMainWorld('i18next', {
+  t: (key, options) => ipcRenderer.invoke('i18next-translate', key, options),
+  dir: () => ipcRenderer.invoke('i18next-dir')
+})
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  onTranslate: (callback) => ipcRenderer.on('translate',
+    (_event) => callback()),
+  openExternal: (path) => shell.openExternal(path),
+  openPreferences: () => ipcRenderer.send('open-preferences'),
+  closeWindow: () => ipcRenderer.send('close-welcome-window')
+})

app/welcome.js app/welcome-renderer.jsapp/welcome.js renamed to app/welcome-renderer.js

@@ -1,14 +1,17 @@
-import { ipcRenderer, shell } from 'electron'
-import remote from '@electron/remote'
 import HtmlTranslate from './utils/htmlTranslate.js'
 import { setSameWidths } from './utils/sameWidths.js'
-const htmlTranslate = new HtmlTranslate(document)
+import './platform.js'
+
+window.onload = async (event) => {
+  new HtmlTranslate(document).translate()
+  const settings = await window.settings.currentSettings()
+
+  document.ondragover = event =>
+    event.preventDefault()
+
+  document.ondrop = event =>
+    event.preventDefault()
 
-window.onload = (e) => {
-  import('./platform')
-  htmlTranslate.translate()
-  ipcRenderer.send('send-settings')
-  setSameWidths()
   setTimeout(() => { eventsAttached = true }, 500)
   let eventsAttached = false
 
@@ -36,64 +39,56 @@ window.onload = (e) => {
     }
   })
 
-  document.ondragover = event =>
-    event.preventDefault()
-
-  document.ondrop = event =>
-    event.preventDefault()
-
-  ipcRenderer.on('translate', (event) => {
-    htmlTranslate.translate()
+  window.electronAPI.onTranslate(() => {
+    new HtmlTranslate(document).translate()
     setSameWidths()
   })
 
-  ipcRenderer.on('renderSettings', (event, settings) => {
-    document.querySelectorAll('input[type="radio"]').forEach(radio => {
-      let value
-      switch (radio.value) {
-        case 'true':
-          value = true
-          break
-        case 'false':
-          value = false
-          break
-        default:
-          value = radio.value
-      }
-      radio.checked = settings[radio.name] === value
-      if (!eventsAttached) {
-        radio.onchange = (event) => {
-          ipcRenderer.send('save-setting', radio.name, value)
-          setSameWidths()
-        }
-      }
-    })
-
-    document.querySelector('#language').value = settings.language
-    document.querySelector('#language').focus()
+  document.querySelectorAll('input[type="radio"]').forEach(radio => {
+    let value
+    switch (radio.value) {
+      case 'true':
+        value = true
+        break
+      case 'false':
+        value = false
+        break
+      default:
+        value = radio.value
+    }
+    radio.checked = settings[radio.name] === value
     if (!eventsAttached) {
-      document.querySelector('#language').onchange = (event) => {
-        ipcRenderer.send('save-setting', 'language', event.target.value)
+      radio.onchange = (event) => {
+        window.settings.saveSettings(radio.name, value)
+        setSameWidths()
       }
     }
-    setSameWidths()
   })
 
+  document.querySelector('#language').value = settings.language
+  document.querySelector('#language').focus()
+  if (!eventsAttached) {
+    document.querySelector('#language').onchange = (event) => {
+      window.settings.saveSettings('language', event.target.value)
+    }
+  }
+  setSameWidths()
+
   document.querySelectorAll('button').forEach(button => {
     if (!eventsAttached) {
       button.onclick = () => {
-        ipcRenderer.send('save-setting', 'isFirstRun', false)
+        window.settings.saveSettings('isFirstRun', false)
         switch (button.getAttribute('data-location')) {
           case 'tutorial':
-            shell.openExternal('https://hovancik.net/stretchly/about')
+            window.electronAPI.openExternal('https://hovancik.net/stretchly/about')
             break
           case 'preferences':
-            ipcRenderer.send('open-preferences')
+            window.electronAPI.openPreferences()
             break
           default:
             break
         }
-        remote.getCurrentWindow().close()
+        window.electronAPI.closeWindow()
       }
     }
   })

app/welcome.html

@@ -86,4 +86,5 @@
       </div>
     </div>
   </body>
+  <script type="module" src="./welcome-renderer.js"></script>
 </html>