Add custom index.ejs, fix issue with staticPath without app.asar, use better preload with only one window

7 years ago · 149ce6176d
9 changed files with 143 additions and 160 deletions
--- a/src/components/DevTools.js
+++ b/src/components/DevTools.js
@ -18,17 +18,17 @@ import color from 'color'
 import fs from 'fs'
 import path from 'path'

-import staticPath from 'helpers/staticPath'
-
 import Box from 'components/base/Box'
 import Bar from 'components/base/Bar'
 import CopyToClipboard from 'components/base/CopyToClipboard'
 import { ChartWrapper } from 'components/base/Chart'

+import staticPath from 'helpers/staticPath'
+
 import theme from 'styles/theme'

 const getLanguages = p => fs.readdirSync(p).filter(f => fs.statSync(path.join(p, f)).isDirectory())
-const languages = getLanguages(path.join(staticPath, './i18n'))
+const languages = getLanguages(path.join(staticPath, '/i18n'))

 const mainWindow = remote.BrowserWindow.getAllWindows().find(w => w.name === 'MainWindow')

--- a/src/components/layout/Default.js
+++ b/src/components/layout/Default.js
@ -2,7 +2,6 @@

 import React, { Fragment, Component } from 'react'
 import styled from 'styled-components'
-import { ipcRenderer } from 'electron'
 import { Route } from 'react-router'
 import { translate } from 'react-i18next'

@ -28,9 +27,7 @@ const Container = styled(GrowScroll).attrs({

 class Default extends Component<{}> {
  componentDidMount() {
-    window.requestAnimationFrame(
-      () => (this._timeout = setTimeout(() => ipcRenderer.send('app-finish-rendering'), 300)),
-    )
+    window.requestAnimationFrame(() => (this._timeout = setTimeout(() => window.onAppReady(), 300)))
  }

  componentWillUnmount() {
--- a/src/helpers/staticPath.js
+++ b/src/helpers/staticPath.js
@ -1 +1,5 @@
-export default (__DEV__ ? __static : __dirname.replace(/app\.asar$/, 'static'))
+const isRunningInAsar = process.mainModule.filename.indexOf('app.asar') !== -1
+
+export default (__DEV__
+  ? __static
+  : isRunningInAsar ? __dirname.replace(/app\.asar$/, 'static') : `${__dirname}/../static`)
--- a/src/index.ejs
+++ b/src/index.ejs
@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <style>
+      * {
+        -webkit-font-smoothing: antialiased;
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+        font: inherit;
+        color: inherit;
+        user-select: none;
+        min-width: 0;
+
+        /* it will surely make problem in the future... to be inspected. */
+        flex-shrink: 0;
+      }
+
+      body {
+        cursor: default;
+        font-family: "Museo Sans", "Open Sans", Arial, Helvetica, sans-serif;
+        font-size: 16px;
+        font-weight: 300;
+        line-height: 1.5;
+      }
+
+      #app {
+        display: none;
+        flex-direction: column;
+        min-height: 100vh;
+      }
+
+      #preload {
+        -webkit-app-region: drag;
+        align-items: center;
+        background: white;
+        bottom: 0;
+        display: none;
+        flex-direction: column;
+        justify-content: center;
+        left: 0;
+        opacity: 1;
+        position: fixed;
+        right: 0;
+        top: 0;
+        transition: opacity 0.6s ease-in-out;
+        z-index: 100;
+      }
+      #preload video {
+        height: 144px;
+        width: 256px;
+      }
+
+      b {
+        font-weight: bold;
+      }
+
+      em {
+        font-style: italic;
+      }
+    </style>
+    <script>
+    <% if (htmlWebpackPlugin.options.nodeModules) { %>
+      require('module').globalPaths.push(
+        '<%= htmlWebpackPlugin.options.nodeModules %>'.replace(/\\/g, '\\\\'),
+      )
+    <% } %>
+    require('source-map-support/source-map-support.js').install()
+    </script>
+  </head>
+  <body>
+    <div id="preload">
+      <video autoplay loop muted src="<%= __DEV__ ? '.' : '../static' %>/videos/loader.mp4" />
+    </div>
+    <div id="app"></div>
+    <script>
+      const { name } = require('electron').remote.getCurrentWindow()
+
+      const preloadEl = document.getElementById('preload')
+      const appEl = document.getElementById('app')
+
+      const initApp = () => {
+        appEl.style.display = 'flex'
+        preloadEl.style.opacity = 0
+
+        preloadEl.addEventListener('transitionend', () => preloadEl.remove())
+      }
+
+      if (name === 'MainWindow') {
+        preloadEl.style.display = 'flex'
+
+        let waitTime = 0
+
+        const PRELOAD_WAIT_TIME_MIN = 2e3
+        const interval = setInterval(() => waitTime += 250, 250)
+
+        window.onAppReady = () => {
+          const delay = PRELOAD_WAIT_TIME_MIN - waitTime
+
+          clearInterval(interval)
+          setTimeout(initApp, delay > 0 ? delay : 1)
+        }
+      } else {
+        initApp()
+      }
+    </script>
+  </body>
+</html>
--- a/src/internals/index.js
+++ b/src/internals/index.js
@ -8,7 +8,7 @@ import cpuUsage from 'helpers/cpuUsage'
 require('../env')
 require('../init-sentry')

-const { FORK_TYPE } = process.env
+const { DEV_TOOLS, FORK_TYPE } = process.env

 process.title = `${require('../../package.json').productName} ${capitalize(FORK_TYPE)}`

@ -35,7 +35,7 @@ const onMessage = payload => {

 process.on('message', onMessage)

-if (__DEV__) {
+if (__DEV__ || DEV_TOOLS) {
  cpuUsage(cpuPercent =>
    sendEvent(
      'usage.cpu',
--- a/src/main/app.js
+++ b/src/main/app.js
@ -1,6 +1,6 @@
 // @flow

-import { app, BrowserWindow, Menu, ipcMain, screen } from 'electron'
+import { app, BrowserWindow, Menu, screen } from 'electron'
 import debounce from 'lodash/debounce'

 import menu from 'main/menu'
@ -8,12 +8,10 @@ import db from 'helpers/db'

 // necessary to prevent win from being garbage collected
 let mainWindow = null
-let devWindow = null
-let preloadWindow = null

 let forceClose = false

-const { ELECTRON_WEBPACK_WDS_PORT, DEV_TOOLS, DEV_TOOLS_MODE } = process.env
+const { UPGRADE_EXTENSIONS, ELECTRON_WEBPACK_WDS_PORT, DEV_TOOLS, DEV_TOOLS_MODE } = process.env

 const devTools = __DEV__ || DEV_TOOLS

@ -111,6 +109,13 @@ function createMainWindow() {

  window.on('close', handleCloseWindow(window))

+  window.on('ready-to-show', () => {
+    window.show()
+    setImmediate(() => {
+      window.focus()
+    })
+  })
+
  window.webContents.on('devtools-opened', () => {
    window.focus()
    setImmediate(() => {
@ -118,10 +123,7 @@ function createMainWindow() {
    })
  })

-  return {
-    w: window,
-    options: windowOptions,
-  }
+  return window
 }

 function createDevWindow() {
@ -155,7 +157,7 @@ function createDevWindow() {

  saveWindowSettings(window)

-  window.loadURL(`${url}/#/dev`)
+  window.loadURL(`${url}#/dev`)

  window.setMenu(null)

@ -171,53 +173,6 @@ function createDevWindow() {
  return window
 }

-function createPreloadWindow() {
-  // Preload renderer of main windows
-  const { w, options } = createMainWindow()
-
-  mainWindow = w
-
-  if (__DEV__) {
-    devWindow = createDevWindow()
-  }
-
-  const windowOptions = {
-    ...options,
-    alwaysOnTop: true,
-    closable: false,
-    fullscreenable: false,
-    resizable: false,
-  }
-
-  const window = new BrowserWindow(windowOptions)
-
-  window.name = 'PreloadWindow'
-
-  window.loadURL(`file://${__static}/preload-window.html`)
-  window.setMenu(null)
-
-  window.on('resize', () => {
-    const [width, height] = window.getSize()
-    if (mainWindow) {
-      mainWindow.setSize(width, height)
-    }
-  })
-
-  window.on('move', () => {
-    const [x, y] = window.getPosition()
-    if (mainWindow) {
-      mainWindow.setPosition(x, y)
-    }
-  })
-
-  window.on('ready-to-show', () => {
-    window.show()
-    setImmediate(() => window && window.focus())
-  })
-
-  return window
-}
-
 app.on('before-quit', () => {
  forceClose = true
 })
@ -233,16 +188,16 @@ app.on('window-all-closed', () => {
 app.on('activate', () => {
  // On macOS it is common to re-create a window
  // even after all windows have been closed
-  if (mainWindow === null && preloadWindow === null) {
-    preloadWindow = createPreloadWindow()
-  } else if (mainWindow !== null) {
+  if (mainWindow === null) {
+    mainWindow = createMainWindow()
+  } else {
    mainWindow.show()
  }
 })

 const installExtensions = async () => {
-  const installer = require('electron-devtools-installer') // eslint-disable-line
-  const forceDownload = !!process.env.UPGRADE_EXTENSIONS
+  const installer = require('electron-devtools-installer')
+  const forceDownload = !!UPGRADE_EXTENSIONS
  const extensions = ['REACT_DEVELOPER_TOOLS', 'REDUX_DEVTOOLS']
  return Promise.all(
    extensions.map(name => installer.default(installer[name], forceDownload)),
@ -256,23 +211,11 @@ app.on('ready', async () => {
    await installExtensions()
  }

-  Menu.setApplicationMenu(menu)
-
-  preloadWindow = createPreloadWindow()
-})
-
-ipcMain.once('app-finish-rendering', () => {
-  if (preloadWindow !== null) {
-    preloadWindow.destroy()
-    preloadWindow = null
+  if (devTools) {
+    createDevWindow()
  }

-  if (mainWindow !== null) {
-    mainWindow.show()
-    setImmediate(() => mainWindow !== null && mainWindow.focus())
-  }
+  Menu.setApplicationMenu(menu)

-  if (__DEV__ && devWindow !== null) {
-    devWindow.show()
-  }
+  mainWindow = createMainWindow()
 })
--- a/src/main/bridge.js
+++ b/src/main/bridge.js
@ -9,6 +9,8 @@ import cpuUsage from 'helpers/cpuUsage'

 import setupAutoUpdater, { quitAndInstall } from './autoUpdate'

+const { DEV_TOOLS } = process.env
+
 const processes = []

 function cleanProcesses() {
@ -89,7 +91,7 @@ ipcMain.on('msg', (event: any, payload) => {
  handler(send, data, type)
 })

-if (__DEV__) {
+if (__DEV__ || DEV_TOOLS) {
  cpuUsage(cpuPercent =>
    sendEventToWindow('DevWindow', {
      type: 'usage.cpu',
--- a/src/styles/global.js
+++ b/src/styles/global.js
@ -86,42 +86,6 @@ function transformFonts(allFonts) {
 injectGlobal`
  ${transformFonts(fonts)};

-  * {
-    -webkit-font-smoothing: antialiased;
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    font: inherit;
-    color: inherit;
-    user-select: none;
-    min-width: 0;
-
-    // it will surely make problem in the future... to be inspected.
-    flex-shrink: 0;
-  }
-
-  body {
-    cursor: default;
-    font-family: "Museo Sans", "Open Sans", Arial, Helvetica, sans-serif;
-    font-size: 16px;
-    font-weight: 300;
-    line-height: 1.5;
-  }
-
-  #app {
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-  }
-
-  b {
-    font-weight: bold;
-  }
-
-  em {
-    font-style: italic;
-  }
-
  .scroll-content {
    height: 100%;

--- a/static/preload-window.html
+++ b/static/preload-window.html
@ -1,36 +0,0 @@
-<html>
-  <head>
-    <style>
-      * {
-        box-sizing: border-box;
-        cursor: default;
-        margin: 0;
-        padding: 0;
-        user-select: none;
-      }
-
-      body {
-        background: white;
-      }
-
-      #app {
-        -webkit-app-region: drag;
-        align-items: center;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        min-height: 100vh;
-      }
-
-      #app video {
-        height: 144px;
-        width: 256px;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="app">
-      <video autoplay loop muted src="./videos/loader.mp4" />
-    </div>
-  </body>
-</html>