feat(ui): Add cli ui support

Author: nklayman

index.js

@@ -48,6 +48,11 @@ module.exports = (api, options) => {
         ],
         extends: null
       }
+      const vueArgs = {
+        _: [],
+        dashboard: args.dashboard,
+        dest: outputDir + '/bundled'
+      }
       const userBuildConfig = pluginOptions.builderOptions || {}
       const mainConfig = new Config()
       mainConfig
@@ -80,12 +85,7 @@ module.exports = (api, options) => {
       console.log('Bundling render process:')
       rendererConfig.target('electron-renderer').output.publicPath('./')
       rendererConfig.node.set('__dirname', false).set('__filename', false)
-      await buildRenderer(
-        { _: [], dest: outputDir + '/bundled' },
-        api,
-        options,
-        rendererConfig
-      )
+      await buildRenderer(vueArgs, api, options, rendererConfig)
       if (fs.existsSync(api.resolve(outputDir + '/bundled/fonts'))) {
         fs.mkdirSync(api.resolve(outputDir + '/bundled/css/fonts'))
         fs.copySync(
@@ -150,7 +150,7 @@ module.exports = (api, options) => {
       usage: 'vue-cli-service serve:electron',
       details: `See https://github.com/nklayman/vue-cli-plugin-electron-builder for more details about this plugin.`
     },
-    () => {
+    args => {
       const execa = require('execa')
       const serve = require('@vue/cli-service/lib/commands/serve').serve
       const rendererConfig = api.resolveChainableWebpackConfig()
@@ -216,7 +216,12 @@ module.exports = (api, options) => {
 
         console.log('\nStarting development server:\n')
 
-        serve({ _: [] }, api, options, rendererConfig).then(server => {
+        serve(
+          { _: [], dashboard: args.dashboard },
+          api,
+          options,
+          rendererConfig
+        ).then(server => {
           console.log('\nLaunching Electron...\n')
           const child = execa(
             `./node_modules/.bin/electron ${outputDir}/background.js`,

logo.png

@@ -0,0 +1,173 @@
+const path = require('path')
+const fs = require('fs-extra')
+const prompts = require('./uiOptions')
+
+module.exports = api => {
+  const { setSharedData, removeSharedData } = api.namespace(
+    'webpack-dashboard-'
+  )
+
+  let firstRun = true
+  let hadFailed = false
+  let modernMode = false
+
+  function resetSharedData (key) {
+    setSharedData(`${key}-status`, null)
+    setSharedData(`${key}-progress`, 0)
+    setSharedData(`${key}-operations`, null)
+    setSharedData(`${key}-stats`, null)
+    setSharedData(`${key}-sizes`, null)
+    setSharedData(`${key}-problems`, null)
+  }
+
+  async function onWebpackMessage ({ data: message }) {
+    if (message.webpackDashboardData) {
+      const type = message.webpackDashboardData.type
+      for (const data of message.webpackDashboardData.value) {
+        if (data.type === 'stats') {
+          // Stats are read from a file
+          const statsFile = path.resolve(
+            process.cwd(),
+            `./node_modules/.stats-${type}.json`
+          )
+          const value = await fs.readJson(statsFile)
+          setSharedData(`${type}-${data.type}`, value)
+          await fs.remove(statsFile)
+        } else if (
+          type.indexOf('build') !== -1 &&
+          modernMode &&
+          data.type === 'progress'
+        ) {
+          // Progress is shared between 'build' and 'build-modern'
+          // 'build' first and then 'build-modern'
+          const value = type === 'build' ? data.value / 2 : (data.value + 1) / 2
+          // We display the same progress bar for both
+          for (const t of ['build', 'build-modern']) {
+            setSharedData(`${t}-${data.type}`, value)
+          }
+        } else {
+          setSharedData(`${type}-${data.type}`, data.value)
+
+          // Notifications
+          if (type === 'serve' && data.type === 'status') {
+            if (data.value === 'Failed') {
+              api.notify({
+                title: 'Build failed',
+                message: 'The build has errors.',
+                icon: 'error'
+              })
+              hadFailed = true
+            } else if (data.value === 'Success') {
+              if (hadFailed) {
+                api.notify({
+                  title: 'Build fixed',
+                  message: 'The build succeeded.',
+                  icon: 'done'
+                })
+                hadFailed = false
+              } else if (firstRun) {
+                api.notify({
+                  title: 'App ready',
+                  message: 'The build succeeded.',
+                  icon: 'done'
+                })
+                firstRun = false
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  api.describeTask({
+    match: /vue-cli-service build:electron/,
+    description: 'Build your app for production with electron-builder',
+    link:
+      'https://github.com/nklayman/vue-cli-plugin-electron-builder/tree/v1-dev#build-command',
+    prompts,
+    onBeforeRun: ({ answers, args }) => {
+      // Args
+      if (answers.dir) args.push('--dir')
+      if (answers.windows) {
+        args.push('--windows')
+        answers.windowsTargets.forEach(t => {
+          args.push(t)
+        })
+      }
+      if (answers.linux) {
+        args.push('--linux')
+        answers.linuxTargets.forEach(t => {
+          args.push(t)
+        })
+      }
+      if (answers.macos) {
+        args.push('--macos')
+        answers.macosTargets.forEach(t => {
+          args.push(t)
+        })
+      }
+      answers.archs.forEach(a => {
+        args.push(`--${a}`)
+      })
+      setSharedData('modern-mode', (modernMode = !!answers.modern))
+      args.push('--dashboard')
+      // Data
+      resetSharedData('build')
+      resetSharedData('build-modern')
+    },
+    onRun: () => {
+      api.ipcOn(onWebpackMessage)
+    },
+    onExit: () => {
+      api.ipcOff(onWebpackMessage)
+    },
+    views: [
+      {
+        id: 'vue-webpack-dashboard',
+        label: 'vue-webpack.dashboard.title',
+        icon: 'dashboard',
+        component: 'vue-webpack-dashboard'
+      },
+      {
+        id: 'vue-webpack-analyzer',
+        label: 'vue-webpack.analyzer.title',
+        icon: 'donut_large',
+        component: 'vue-webpack-analyzer'
+      }
+    ],
+    defaultView: 'vue-webpack-dashboard'
+  })
+  api.describeTask({
+    match: /vue-cli-service serve:electron/,
+    description: 'Serve your app, launch electron',
+    link:
+      'https://github.com/nklayman/vue-cli-plugin-electron-builder/tree/v1-dev#serve-command',
+    onBeforeRun: ({ answers, args }) => {
+      // Args
+      args.push('--dashboard')
+
+      // Data
+      resetSharedData('serve')
+      removeSharedData('serve-url')
+      firstRun = true
+      hadFailed = false
+    },
+    onRun: () => {
+      api.ipcOn(onWebpackMessage)
+    },
+    onExit: () => {
+      api.ipcOff(onWebpackMessage)
+      removeSharedData('serve-url')
+    },
+    views: [
+      {
+        id: 'vue-webpack-dashboard',
+        label: 'vue-webpack.dashboard.title',
+        icon: 'dashboard',
+        component: 'vue-webpack-dashboard'
+      }
+    ],
+    defaultView: 'vue-webpack-dashboard'
+  })
+}