feat(): linking and building components

packages/cli/src/cli-component.js

@@ -0,0 +1,44 @@
+#!/usr/bin/env node
+import program from './program'
+import commands from './commands'
+import session from './utils/session'
+import context from './utils/context'
+import validateCommands from './utils/validate-commands'
+import { echo } from './utils/print-tools'
+
+const setup = async () => {
+  await context.session.load()
+
+  program
+    .command('link <path>')
+    .group('Components')
+    .description('Link all components to your project')
+    .action(async (...options) => {
+      session.isAuthenticated()
+      session.hasProject()
+      echo()
+      new commands.ComponentLink(context).run(options)
+    })
+
+  program
+    .command('list')
+    .group('Components')
+    .description('List all components')
+    .action(async (...options) => {
+      session.isAuthenticated()
+      session.hasProject()
+      echo()
+      new commands.ComponentList(context).run(options)
+    })
+
+  program
+    .on('*', (commandsArr) => validateCommands(commandsArr))
+
+  if (!process.argv.slice(2).length) {
+    program.outputHelp()
+  }
+
+  program.parse(process.argv)
+}
+
+setup()

packages/cli/src/cli.js

@@ -272,6 +272,10 @@ const setup = async () => {
     .command('hosting', 'Manage your web assets and host them on Syncano')
     .on('*', (commandsArr) => validateCommands(commandsArr))
 
+  program
+    .command('component', 'Manage your Socket components')
+    .on('*', (commandsArr) => validateCommands(commandsArr))
+
   context.session.loadPlugins(program, context)
   program.parse(process.argv)
 

packages/cli/src/commands/component-link.js

@@ -0,0 +1,25 @@
+import path from 'path'
+import format from 'chalk'
+import { echo, echon } from '../utils/print-tools'
+
+export default class ComponentLink {
+  constructor (context) {
+    this.session = context.session
+    this.Socket = context.Socket
+    this.Component = context.Component
+  }
+
+  async run ([projectPath, cmd]) {
+    const sockets = await this.Socket.listLocal()
+    const prints = sockets.map(async socket => {
+      const components = await this.Socket.getLocal(socket).getComponents()
+      return components.forEach(async component => {
+        echon(4)(`Linking component ${format.cyan.bold(component.packageName)}...`)
+        component.linkWithProject(path.join(process.cwd(), projectPath))
+        echo(format.green(' Done'))
+      })
+    })
+    await Promise.all(prints)
+    echo()
+  }
+}

packages/cli/src/commands/component-list.js

@@ -0,0 +1,45 @@
+import format from 'chalk'
+import logger from '../utils/debug'
+import { echo } from '../utils/print-tools'
+
+const { info, debug } = logger('cmd-component-list')
+
+export default class ComponentList {
+  constructor (context) {
+    this.session = context.session
+    this.Socket = context.Socket
+    this.Component = context.Component
+  }
+
+  async run ([projetPath, cmd]) {
+    info('ComponentLink.run')
+
+    const sockets = await this.Socket.listLocal()
+    sockets.forEach(async socket => {
+      const components = await this.Socket.getLocal(socket).getComponents()
+      components.forEach(component => {
+        this.printComponent(component)
+      })
+    })
+  }
+
+  async printComponent (component) {
+    debug('printComponent')
+    const metadata = component.metadata
+
+    echo(4)(`${format.cyan.bold('name')}: ${format.cyan.bold(component.packageName)}`)
+    echo(4)(`${format.dim('socket')}: ${component.socketName}`)
+
+    if (metadata.parameters) {
+      echo()
+      Object.keys(metadata.parameters).forEach(paramName => {
+        const paramObj = metadata.parameters[paramName]
+        echo(8)(`${format.dim('name')}: ${format.cyan(paramName) || ''}`)
+        echo(8)(`${format.dim('description')}: ${paramObj.description}`)
+        echo(8)(`${format.dim('example')}: ${paramObj.example}`)
+        echo()
+      })
+    }
+    echo()
+  }
+}

packages/cli/src/commands/index.js

@@ -22,6 +22,8 @@ import SocketTrace from './socket-trace'
 import SocketInstall from './socket-install'
 import SocketCreate from './socket-create'
 import SocketUninstall from './socket-uninstall'
+import ComponentList from './component-list'
+import ComponentLink from './component-link'
 
 export default {
   Attach,
@@ -47,5 +49,7 @@ export default {
   SocketTrace,
   SocketInstall,
   SocketCreate,
-  SocketUninstall
+  SocketUninstall,
+  ComponentList,
+  ComponentLink
 }

packages/cli/src/commands/socket-deploy-hot.js

@@ -145,25 +145,98 @@ export default class SocketDeployCmd {
       }
       updateEnds()
       spinner.stop()
+    }
+  }
+
+  async deployComponent (component) {
+    const componentName = component.packageName
+    debug(`deployComponent: ${componentName}`)
+    const deployTimer = new Timer()
+    const msg = p(`${format.magenta('component build:')} ${currentTime()} ${format.cyan(componentName)}`)
+    this.mainSpinner.stop()
+    const spinner = new SimpleSpinner(msg).start()
+
+    // We have to count here number of updates
+    if (!pendingUpdates[componentName]) { pendingUpdates[componentName] = 0 }
+
+    pendingUpdates[componentName] += 1
+    if (pendingUpdates[componentName] > 1) {
+      spinner.stop()
+      this.mainSpinner.start()
+      debug(`not updating, update pending: ${pendingUpdates[componentName]}`)
+      return
+    }
+
+    const updateEnds = async () => {
+      this.mainSpinner.start()
+      // After update we have to understand if we should fire new one
+      pendingUpdates[componentName] -= 1
+      if (pendingUpdates[componentName] > 0) {
+        pendingUpdates[componentName] = 0
+        await this.deployComponent(component)
+      }
+    }
 
+    try {
+      await component.build()
+
+      spinner.stop()
+      SocketDeployCmd.printUpdateSuccessful(componentName, {status: 'ok'}, deployTimer)
+      await updateEnds()
+    } catch (err) {
+      spinner.stop()
+      if (err instanceof CompileError) {
+        const status = format.red('    build error:')
+        echo(2)(`${status} ${currentTime()} ${format.cyan(componentName)}\n\n${err.traceback.split('\n').map(line => p(8)(line)).join('\n')}`)
+      } else {
+        const status = format.red('build error:')
+        echo(2)(`${status} ${currentTime()} ${format.cyan(componentName)} ${format.red(err.message)}`)
+      }
+
+      if (this.cmd.bail) {
+        SocketDeployCmd.bail()
+      }
+      updateEnds()
+      spinner.stop()
     }
   }
 
   getSocketToUpdate (fileName) {
-    if (fileName.match(/\/test\//)) {
+    if (fileName.match(/\/test\//) || fileName.match(/\/components\//)) {
       return false
     }
     return this.localSockets.find((socket) => socket.isSocketFile(fileName))
   }
 
+  async getComponentToUpdate (fileName) {
+    const sockets = await this.Socket.listLocal()
+    const componentsList = []
+    await Promise.all(sockets.map(async socket => {
+      const components = await this.Socket.getLocal(socket).getComponents()
+      components.forEach(component => {
+        componentsList.push(component)
+      })
+    }))
+    let componentFound = null
+    componentsList.some(component => {
+      if (component.isComponentFile(fileName)) {
+        componentFound = component
+      }
+    })
+    return componentFound
+  }
+
   runStalker () {
     // Stalking files
     debug('watching:', this.session.projectPath)
     this.stalker = watchr.create(this.session.projectPath)
-    this.stalker.on('change', (changeType, fileName) => {
+    this.stalker.on('change', async (changeType, fileName) => {
       timer.reset()
       const socketToUpdate = this.getSocketToUpdate(fileName)
-      if (socketToUpdate) {
+      const componentToUpdate = await this.getComponentToUpdate(fileName)
+      if (componentToUpdate) {
+        this.deployComponent(componentToUpdate)
+      } else if (socketToUpdate) {
         this.deploySocket(socketToUpdate)
       }
     })

packages/cli/src/utils/component/component.js

@@ -0,0 +1,18 @@
+import session from '../session'
+import Socket from '../sockets'
+
+class Component {
+  constructor () {
+    this.session = session
+  }
+
+  static async list () {
+    const sockets = await Socket.list()
+    sockets.forEach(async socket => {
+      const components = await socket.getComponents()
+      console.log(socket.name, components)
+    })
+  }
+}
+
+export default Component

packages/cli/src/utils/component/index.js

@@ -0,0 +1,3 @@
+import Component from './component'
+
+export default Component

packages/cli/src/utils/context.js

@@ -1,13 +1,15 @@
 import Init from './init'
 import Hosting from './hosting'
 import Socket from './sockets'
+import Component from './component'
 import Registry from './registry'
 import session from './session'
 
 export default {
   Init,
   Hosting,
   Socket,
+  Component,
   Registry,
   session
 }

packages/cli/src/utils/errors.js

@@ -0,0 +1,9 @@
+class CompileError {
+  constructor (traceback) {
+    this.traceback = traceback
+  }
+}
+
+export {
+  CompileError
+}