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) {
   })
 }
 
-startRenderer(startMain)
+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,41 +170,42 @@ if (isDevMode) {
       __static: `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"`,
     })
   )
-} else {
-  const processLocalesPlugin = new ProcessLocalesPlugin({
-    compress: false,
-    inputDir: path.join(__dirname, '../static/locales'),
-    outputDir: 'static/locales',
-  })
-
-  config.plugins.push(
-    processLocalesPlugin,
-    new webpack.DefinePlugin({
-      'process.env.LOCALE_NAMES': JSON.stringify(processLocalesPlugin.localeNames)
-    }),
-    new CopyWebpackPlugin({
-        patterns: [
-          {
-            from: path.join(__dirname, '../static/pwabuilder-sw.js'),
-            to: path.join(__dirname, '../dist/web/pwabuilder-sw.js'),
-          },
-          {
-            from: path.join(__dirname, '../static'),
-            to: path.join(__dirname, '../dist/web/static'),
-            globOptions: {
-              dot: true,
-              ignore: ['**/.*', '**/locales/**', '**/pwabuilder-sw.js', '**/dashFiles/**', '**/storyboards/**'],
-            },
-          },
-      ]
-    }),
-    // webpack doesn't get rid of js-yaml even though it isn't used in the production builds
-    // so we need to manually tell it to ignore any imports for `js-yaml`
-    new webpack.IgnorePlugin({
-      resourceRegExp: /^js-yaml$/,
-      contextRegExp: /i18n$/
-    })
-  )
 }
 
+const processLocalesPlugin = new ProcessLocalesPlugin({
+  compress: false,
+  inputDir: path.join(__dirname, '../static/locales'),
+  outputDir: 'static/locales',
+})
+
+config.plugins.push(
+  processLocalesPlugin,
+  new webpack.DefinePlugin({
+    'process.env.LOCALE_NAMES': JSON.stringify(processLocalesPlugin.localeNames)
+  }),
+  new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: path.join(__dirname, '../static/pwabuilder-sw.js'),
+          to: path.join(__dirname, '../dist/web/pwabuilder-sw.js'),
+        },
+        {
+          from: path.join(__dirname, '../static'),
+          to: path.join(__dirname, '../dist/web/static'),
+          globOptions: {
+            dot: true,
+            ignore: ['**/.*', '**/locales/**', '**/pwabuilder-sw.js', '**/dashFiles/**', '**/storyboards/**'],
+          },
+        },
+    ]
+  }),
+  // webpack doesn't get rid of js-yaml even though it isn't used in the production builds
+  // so we need to manually tell it to ignore any imports for `js-yaml`
+  new webpack.IgnorePlugin({
+    resourceRegExp: /^js-yaml$/,
+    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,45 +31,44 @@ class CustomVueI18n extends VueI18n {
   }
 
   async loadLocale(locale) {
-    // we only lazy load locales for producation builds
+    // we don't lazy load locales in development in electron
-    if (!isDev) {
+    if (isDev && process.env.IS_ELECTRON) { return }
-      // don't need to load it if it's already loaded
+    // don't need to load it if it's already loaded
-      if (this.availableLocales.includes(locale)) {
+    if (this.availableLocales.includes(locale)) {
-        return
+      return
-      }
+    }
-      if (!this.allLocales.includes(locale)) {
+    if (!this.allLocales.includes(locale)) {
-        console.error(`Unable to load unknown locale: "${locale}"`)
+      console.error(`Unable to load unknown locale: "${locale}"`)
-      }
+    }
 
-      if (process.env.IS_ELECTRON) {
+    if (process.env.IS_ELECTRON) {
-        const { brotliDecompressSync } = require('zlib')
+      const { brotliDecompressSync } = require('zlib')
-        // locales are only compressed in our production Electron builds
+      // locales are only compressed in our production Electron builds
-        try {
+      try {
-          // decompress brotli compressed json file and then load it
+        // decompress brotli compressed json file and then load it
-          // eslint-disable-next-line node/no-path-concat
+        // eslint-disable-next-line node/no-path-concat
-          const compressed = fs.readFileSync(`${__dirname}/static/locales/${locale}.json.br`)
+        const compressed = fs.readFileSync(`${__dirname}/static/locales/${locale}.json.br`)
-          const data = JSON.parse(brotliDecompressSync(compressed).toString())
+        const data = JSON.parse(brotliDecompressSync(compressed).toString())
-          this.setLocaleMessage(locale, data)
-        } catch (err) {
-          console.error(locale, err)
-        }
-      } else {
-        const url = new URL(window.location.href)
-        url.hash = ''
-        if (url.pathname.endsWith('index.html')) {
-          url.pathname = url.pathname.replace(/index\.html$/, '')
-        }
-
-        if (url.pathname) {
-          url.pathname += `${!url.pathname.endsWith('/') ? '/' : ''}static/locales/${locale}.json`
-        } else {
-          url.pathname = `/static/locales/${locale}.json`
-        }
-
-        const response = await fetch(url)
-        const data = await response.json()
         this.setLocaleMessage(locale, data)
+      } catch (err) {
+        console.error(locale, err)
       }
+    } else {
+      const url = new URL(window.location.href)
+      url.hash = ''
+      if (url.pathname.endsWith('index.html')) {
+        url.pathname = url.pathname.replace(/index\.html$/, '')
+      }
+
+      if (url.pathname) {
+        url.pathname += `${!url.pathname.endsWith('/') ? '/' : ''}static/locales/${locale}.json`
+      } else {
+        url.pathname = `/static/locales/${locale}.json`
+      }
+
+      const response = await fetch(url)
+      const data = await response.json()
+      this.setLocaleMessage(locale, data)
     }
   }
 }
@@ -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)
       }