Adding web support to dev-runner (#2729)

* Adding ytpl and ytsr as externals in web.config

This should get rid of those two warnings that were
showing up on web builds

* Reducing discrepancies between dev and prod in web builds

* Removing  a line which would prevent hot reloading

`this.locales` is retained between hot reloads, so it shouldn't
be set to `null`.

* Adding a new flag to the dev runner

Adding a new command: `run dev:web`

* Running `loadLocale` in development web builds

* Adding a line back which was removed

* Removing a line which was added

_scripts/ProcessLocalesPlugin.js

@@ -60,8 +60,6 @@ class ProcessLocalesPlugin {
           }
 
           await Promise.all(promises)
-
-          this.locales = null
         })
     })
   }

_scripts/dev-runner.js

@@ -1,5 +1,6 @@
 process.env.NODE_ENV = 'development'
 
+const open = require('open')
 const electron = require('electron')
 const webpack = require('webpack')
 const WebpackDevServer = require('webpack-dev-server')
@@ -10,13 +11,14 @@ const { spawn } = require('child_process')
 
 const mainConfig = require('./webpack.main.config')
 const rendererConfig = require('./webpack.renderer.config')
+const webConfig = require('./webpack.web.config')
 const workersConfig = require('./webpack.workers.config')
 
 let electronProcess = null
 let manualRestart = null
-const remoteDebugging = !!(
-  process.argv[2] && process.argv[2] === '--remote-debug'
-)
+
+const remoteDebugging = process.argv.indexOf('--remote-debug') !== -1
+const web = process.argv.indexOf('--web') !== -1
 
 if (remoteDebugging) {
   // disable dvtools open in electron
@@ -87,7 +89,6 @@ function startMain() {
 
           manualRestart = true
           await restartElectron()
-
           setTimeout(() => {
             manualRestart = false
           }, 2500)
@@ -135,4 +136,38 @@ function startRenderer(callback) {
   })
 }
 
+function startWeb (callback) {
+  const compiler = webpack(webConfig)
+  const { name } = compiler
+
+  compiler.hooks.afterEmit.tap('afterEmit', () => {
+    console.log(`\nCompiled ${name} script!`)
+    console.log(`\nWatching file changes for ${name} script...`)
+  })
+
+  const server = new WebpackDevServer({
+    static: {
+      directory: path.join(process.cwd(), 'dist/web/static'),
+      watch: {
+        ignored: [
+          /(dashFiles|storyboards)\/*/,
+          '/**/.DS_Store',
+        ]
+      }
+    },
+    port
+  }, compiler)
+
+  server.startCallback(err => {
+    if (err) console.error(err)
+
+    callback({ port: server.options.port })
+  })
+}
+if (!web) {
   startRenderer(startMain)
+} else {
+  startWeb(({ port }) => {
+    open(`http://localhost:${port}`)
+  })
+}

_scripts/webpack.web.config.js

@@ -24,7 +24,9 @@ const config = {
     filename: '[name].js',
   },
   externals: {
-    electron: '{}'
+    electron: '{}',
+    ytpl: '{}',
+    ytsr: '{}'
   },
   module: {
     rules: [
@@ -168,7 +170,8 @@ if (isDevMode) {
       __static: `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"`,
     })
   )
-} else {
+}
+
 const processLocalesPlugin = new ProcessLocalesPlugin({
   compress: false,
   inputDir: path.join(__dirname, '../static/locales'),
@@ -203,6 +206,6 @@ if (isDevMode) {
     contextRegExp: /i18n$/
   })
 )
-}
+
 
 module.exports = config

package.json

@@ -29,6 +29,7 @@
     "debug": "run-s rebuild:electron debug-runner",
     "debug-runner": "node _scripts/dev-runner.js --remote-debug",
     "dev": "run-s rebuild:electron dev-runner",
+    "dev:web": "node _scripts/dev-runner.js --web",
     "dev-runner": "node _scripts/dev-runner.js",
     "lint-fix": "eslint --fix --ext .js,.vue ./",
     "lint": "eslint --ext .js,.vue ./",

src/renderer/components/general-settings/general-settings.js

@@ -117,7 +117,7 @@ export default Vue.extend({
         this.$t('Settings.General Settings.System Default')
       ]
 
-      if (process.env.NODE_ENV === 'development') {
+      if (process.env.NODE_ENV === 'development' && process.env.IS_ELECTRON) {
         Object.entries(this.$i18n.messages).forEach(([locale, localeData]) => {
           const localeName = localeData['Locale Name']
           if (typeof localeName !== 'undefined') {

src/renderer/i18n/index.js

@@ -9,8 +9,9 @@ const isDev = process.env.NODE_ENV === 'development'
 
 const messages = {}
 
-if (isDev) {
+if (isDev && process.env.IS_ELECTRON) {
   const { load } = require('js-yaml')
+
   // Take active locales and load respective YAML file
   activeLocales.forEach((locale) => {
     try {
@@ -30,8 +31,8 @@ class CustomVueI18n extends VueI18n {
   }
 
   async loadLocale(locale) {
-    // we only lazy load locales for producation builds
-    if (!isDev) {
+    // we don't lazy load locales in development in electron
+    if (isDev && process.env.IS_ELECTRON) { return }
     // don't need to load it if it's already loaded
     if (this.availableLocales.includes(locale)) {
       return
@@ -71,7 +72,6 @@ class CustomVueI18n extends VueI18n {
     }
   }
 }
-}
 
 Vue.use(CustomVueI18n)
 
@@ -81,7 +81,7 @@ const i18n = new CustomVueI18n({
   messages
 })
 
-if (!isDev) {
+if (!isDev || !process.env.IS_ELECTRON) {
   i18n.loadLocale('en-US')
 }
 

src/renderer/store/modules/settings.js

@@ -318,7 +318,7 @@ const stateWithSideEffects = {
         }
       }
 
-      if (process.env.NODE_ENV !== 'development') {
+      if (process.env.NODE_ENV !== 'development' || !process.env.IS_ELECTRON) {
         await i18n.loadLocale(targetLocale)
       }