More support for Browser Extension

Author: manifestinteractive

bin/cli.js

@@ -112,17 +112,11 @@ const argv = yargs
       default: false
     }
   })
-  .command('remote [client] [instance]', 'Remote Control Sandbox Storefront', {
-    'live-reload': {
-      describe: 'Enable Live Reload on Code Change',
-      type: 'boolean',
-      default: false
-    }
-  })
+  .command('remote [client] [instance]', 'Enable Support for Browser Extension')
   .example('sfcc delete my-client sandbox', 'Delete my-client sandbox config')
   .example('sfcc watch my-client sandbox', 'Watch for my-client sandbox changes')
   .example('sfcc log -i customerror --latest', 'Watch Latest Custom Error Logs')
-  .example('sfcc remote --live-reload', 'Live Reload Sandbox Storefront on Changes')
+  .example('sfcc remote', 'Live Reload Sandbox Storefront on Changes')
   .demand(1)
   .help()
   .version().argv

commands/log.js

@@ -6,10 +6,10 @@ const keys = require('lodash/keys')
 const pickBy = require('lodash/pickBy')
 const sortBy = require('lodash/sortBy')
 
+const config = require('../lib/config')()
 const find = require('../lib/find')
 const search = require('../lib/search')
 const tail = require('../lib/tail')
-const config = require('../lib/config')()
 
 module.exports = async options => {
   let client = argv['_'][1] || null
@@ -98,7 +98,9 @@ module.exports = async options => {
 
     try {
       // Start log output
-      options.search ? search(selected, groups, options) : tail(selected, logs, groups, options)
+      options.search
+        ? search(selected, client, instance, groups, options)
+        : tail(selected, client, instance, logs, groups, options)
     } catch (err) {
       console.log(err)
     }

commands/remote.js

@@ -4,17 +4,25 @@ const express = require('express')
 const fs = require('fs')
 const https = require('https')
 const ipc = require('node-ipc')
+const ora = require('ora')
 const path = require('path')
 
 const config = require('../lib/config')()
 
 const port = 8443
 
-module.exports = async options => {
+module.exports = async () => {
   let client = argv['_'][1] || null
   let instance = argv['_'][2] || null
   let selected = null
   let remote
+  let spinner
+
+  const output = fn => {
+    spinner.stop()
+    fn()
+    spinner.start()
+  }
 
   // Get Client & Instance, or check for Default
   if (client && instance) {
@@ -32,20 +40,32 @@ module.exports = async options => {
   if (selected) {
     const sslKey = path.resolve(__dirname, '../remote/ssl/sfcc-cli-ca.pvk')
     const sslCrt = path.resolve(__dirname, '../remote/ssl/sfcc-cli-ca.cer')
-    const jsFile = path.resolve(__dirname, '../remote/sfcc-cli-remote.js')
 
     // Start Message Bus
     ipc.config.id = 'remote'
     ipc.config.retry = 1500
     ipc.config.silent = true
     ipc.serve(() => {
-      ipc.server.on('message', message => {
-        console.log('MESSAGE', message)
-        remote.emit('message', message)
+      ipc.server.on('message', data => {
+        if (remote && typeof remote.emit !== 'undefined') {
+          remote.emit('message', data)
+        } else {
+          output(() => console.log(chalk.red.bold(`✖ Failed Remote Message`, data)))
+        }
       })
       ipc.server.on('watch', data => {
-        console.log('WATCH', data)
-        remote.emit('watch', data)
+        if (remote && typeof remote.emit !== 'undefined') {
+          remote.emit('watch', data)
+        } else {
+          output(() => console.log(chalk.red.bold(`✖ Failed Remote Watch`, data)))
+        }
+      })
+      ipc.server.on('log', data => {
+        if (remote && typeof remote.emit !== 'undefined') {
+          remote.emit('log', data)
+        } else {
+          output(() => console.log(chalk.red.bold(`✖ Failed Remote Log`, data)))
+        }
       })
     })
 
@@ -76,19 +96,9 @@ module.exports = async options => {
 
     const io = require('socket.io')(server)
 
-    // https://localhost:8443/sfcc-cli-remote.js
-    app.get('/sfcc-cli-remote.js', (req, res) => {
-      res.set('Content-Type', 'application/javascript')
-      res.send(fs.readFileSync(jsFile))
-    })
-
     // Handle connections from remote script
     io.on('connection', socket => {
       remote = socket
-      // Check if Live Reload flag was enabled
-      if (options.liveReload) {
-        remote.emit('message', 'Live Reload Enabled')
-      }
 
       socket.on('message', message => {
         console.log('MESSAGE', message)
@@ -100,12 +110,9 @@ module.exports = async options => {
     })
 
     server.listen(port, function() {
-      console.log(`\n${chalk.bold('IMPORTANT')}: Make sure your sandbox has the following script tag:`)
-      console.log('<script src="https://localhost:8443/sfcc-cli-remote.js" id="sfcc-cli-remote"></script>\n')
-
-      // ora(
-      //   `${chalk.bold('REMOTE')} ${chalk.cyan.bold(client)} ${chalk.magenta.bold(instance)} [Ctrl-C to Cancel]\n`
-      // ).start()
+      spinner = ora(
+        `${chalk.bold('REMOTE')} ${chalk.cyan.bold(client)} ${chalk.magenta.bold(instance)} [Ctrl-C to Cancel]\n`
+      ).start()
     })
   }
 }

commands/watch.js

@@ -1,14 +1,14 @@
+const {exec} = require('child_process')
 const argv = require('minimist')(process.argv.slice(2))
 const chalk = require('chalk')
 const chokidar = require('chokidar')
 const ipc = require('node-ipc')
 const ora = require('ora')
 const path = require('path')
-const {exec} = require('child_process')
 
+const config = require('../lib/config')()
 const logger = require('../lib/logger')()
 const notify = require('../lib/notify')()
-const config = require('../lib/config')()
 const upload = require('../lib/upload')
 
 module.exports = options => {

lib/search.js

@@ -6,7 +6,7 @@ const truncate = require('lodash/truncate')
 
 const read = require('./read')
 
-module.exports = async (selected, groups, options) => {
+module.exports = async (selected, client, instance, groups, options) => {
   const including = options.include && options.include.length > 0 ? ` '${options.include.join(', ')}'` : ''
   const excluding = options.exclude && options.exclude.length > 0 ? ` '${options.exclude.join(', ')}'` : ''
   const filters = options.filter && options.filter.length > 0 ? ` containing '${options.filter}'` : ''

lib/tail.js

@@ -1,12 +1,13 @@
 const chalk = require('chalk')
 const compact = require('lodash/compact')
+const ipc = require('node-ipc')
 const map = require('lodash/map')
 const ora = require('ora')
 const truncate = require('lodash/truncate')
 
 const read = require('./read')
 
-module.exports = async (selected, logs, groups, options) => {
+module.exports = async (selected, client, instance, logs, groups, options) => {
   const including = options.include && options.include.length > 0 ? ` '${options.include.join(', ')}'` : ''
   const excluding = options.exclude && options.exclude.length > 0 ? ` excluding '${options.exclude.join(', ')}'` : ''
   const filters = options.filter && options.filter.length > 0 ? ` containing '${options.filter}'` : ''
@@ -18,6 +19,30 @@ module.exports = async (selected, logs, groups, options) => {
     spinner.start()
   }
 
+  // Connect to Remote Message Bus
+  let remote = null
+
+  ipc.config.id = 'log'
+  ipc.config.retry = 1500
+  ipc.config.silent = true
+
+  ipc.connectTo('remote', () => {
+    ipc.of.remote.on('connect', () => {
+      remote = ipc.of.remote
+    })
+    ipc.of.remote.on('disconnect', () => {
+      remote = null
+    })
+  })
+
+  const sendLog = data => {
+    if (remote && typeof remote.emit !== 'undefined') {
+      remote.emit('log', data)
+    } else {
+      output(() => console.log('REMOTE NOT CONNECTED'))
+    }
+  }
+
   const tail = async () => {
     const promises = map(groups, async (files, name) => {
       const displayname = files[0].displayname
@@ -34,6 +59,13 @@ module.exports = async (selected, logs, groups, options) => {
           name
         }
       } catch (err) {
+        sendLog({
+          type: 'error',
+          client: client,
+          instance: instance,
+          message: err.toString(),
+          timestamp: new Date().toString()
+        })
         output(() => console.log(err))
       }
     })
@@ -46,9 +78,29 @@ module.exports = async (selected, logs, groups, options) => {
       for (let line of lines) {
         if (line && !logs[name].includes(line)) {
           logs[name].push(line)
+
           if (options.filter && !new RegExp(options.filter).test(line)) {
             continue
           }
+
+          let messageClass = 'log'
+
+          if (name.includes('error')) {
+            messageClass = 'error'
+          } else if (name.includes('warn')) {
+            messageClass = 'warn'
+          } else if (name.includes('info')) {
+            messageClass = 'info'
+          }
+
+          let message = `<strong class="${messageClass}">${name}</strong> ${line}`
+          let parseDate = line.match(/\[(.+)\sGMT\]/)
+          let timestamp = new Date()
+
+          if (parseDate && parseDate.length > 1) {
+            timestamp = new Date(Date.parse(parseDate[1] + 'Z'))
+          }
+
           if (options.truncate > 0) {
             line = truncate(line.trim(), {
               length: options.truncate,
@@ -67,6 +119,14 @@ module.exports = async (selected, logs, groups, options) => {
             return chalk.magenta(`[${date.toLocaleDateString()} ${date.toLocaleTimeString()}]`)
           })
 
+          sendLog({
+            type: 'log',
+            client: client,
+            instance: instance,
+            message: message,
+            timestamp: timestamp.toString()
+          })
+
           output(() => console.log(`${chalk.cyan.bold(name)} ${line}`))
         }
       }