@symbo.ls/cli 2.11.159 → 2.11.162

package/bin/convert.js

@@ -1,10 +1,11 @@
 'use strict'
 
+import fs from 'fs'
+import chalk from 'chalk'
+import path from 'path'
 import { program } from './program.js'
 import { convert } from 'kalduna'
 import { parse } from 'globusa'
-import fs from 'fs'
-import path from 'path'
 
 import * as esbuild from 'esbuild'
 
@@ -38,7 +39,7 @@ const INTERNAL_UIKIT_CONF = {
     'DatePickerGridContainer',
 
     // Not a domql object (headless-datepicker)
-    'calendar',
+    'calendar'
   ],
 
   // Can be strings or regex patterns
@@ -46,8 +47,8 @@ const INTERNAL_UIKIT_CONF = {
     // TODO: Review these ignores with @nikoloza
     /Threejs$/,
     /Editorjs$/,
-    /User$/,
-  ],
+    /User$/
+  ]
 }
 const TMP_DIR_NAME = '.smbls_convert_tmp'
 const TMP_DIR_PACKAGE_JSON_STR = JSON.stringify({
@@ -57,7 +58,7 @@ const TMP_DIR_PACKAGE_JSON_STR = JSON.stringify({
   license: 'ISC'
 })
 
-function generatePackageJsonFile(
+function generatePackageJsonFile (
   sourcePackageJsonPath,
   destPath,
   globusaStruct,
@@ -71,7 +72,7 @@ function generatePackageJsonFile(
     packageStruct = JSON.parse(str)
   } catch (error) {
     console.error(`Error when parsing ${sourcePackageJsonPath}`)
-    return;
+    return
   }
   const split = packageStruct.name.split('/')
   const packageName = split[split.length - 1]
@@ -82,12 +83,12 @@ function generatePackageJsonFile(
     [`@emotion/${desiredFormat}`]: '^11.11.0',
     '@emotion/css': '^11.11.0',
     '@symbo.ls/create': 'latest',
-    '@symbo.ls/react': 'latest',
+    '@symbo.ls/react': 'latest'
   }
   globusaStruct.imports
     .filter(imp => imp.path.match(/^@symbo\.ls\//))
     .filter(imp => imp.path !== packageName)
-    .forEach(imp => deps[imp.path] = 'latest')
+    .forEach(imp => { deps[imp.path] = 'latest' })
 
   // Generate final package.json string
   const genStr = JSON.stringify({
@@ -96,7 +97,7 @@ function generatePackageJsonFile(
     license: packageStruct.license ?? 'UNLICENSED',
     dependencies: deps,
     peerDependencies: {
-      'react': '^18.2.0',
+      react: '^18.2.0',
       'react-dom': '^18.2.0'
     },
     main: 'index.js',
@@ -114,9 +115,9 @@ function isDirectory (dir) {
 }
 
 // Essentially does 'mkdir -P'
-async function mkdirp (dir) {
+function mkdirp (dir) {
   try {
-    return await fs.promises.mkdir(dir)
+    return fs.mkdirSync(dir, { recursive: true })
   } catch (err) {
     if (err.code !== 'EEXIST') {
       throw err
@@ -126,30 +127,29 @@ async function mkdirp (dir) {
 }
 
 // Returns a string
-function convertDomqlModule(domqlModule, globusaStruct, desiredFormat, options) {
+export function convertDomqlModule (domqlModule, globusaStruct, desiredFormat, options = {}) {
   let convertedStr = ''
   const whitelist = (options.only ? options.only.split(',') : null)
 
   console.group()
   const exports = Object.keys(domqlModule)
-        .filter(exportName => {
-          if (!whitelist) return true
-          if (whitelist.includes(exportName)) {
-            console.log(`Skipping ${exportName} component due to whitelist exclusion`)
-            return false
-          }
-          return true
-        })
-        .filter(exportName => {
-          if (!options.internalUikit) return true
-          if (INTERNAL_UIKIT_CONF.excludedComponents.includes(exportName)) {
-            console.log(`Skipping ${exportName} component due to internal uikit exclusion`)
-            return false
-          }
-          return true
-        })
-
-  const isSingleComponent = (exports.length === 1)
+    .filter(exportName => {
+      if (!whitelist) return true
+      if (!whitelist.includes(exportName)) {
+        console.log(`Skipping ${exportName} component due to whitelist exclusion`)
+        return false
+      }
+      return true
+    })
+    .filter(exportName => {
+      if (!options.internalUikit) return true
+      if (INTERNAL_UIKIT_CONF.excludedComponents.includes(exportName)) {
+        console.log(`Skipping ${exportName} component due to internal uikit exclusion`)
+        return false
+      }
+      return true
+    })
+
   const uniqueImports = []
   let globalSymbolTable = {}
   for (const idx in exports) {
@@ -163,16 +163,17 @@ function convertDomqlModule(domqlModule, globusaStruct, desiredFormat, options)
     }
 
     console.group()
-    console.log(dobj.__name) // NOTE(Nikaoto): @nikoloza, don't remove this
+    console.log(dobj.__name) // NOTE: Don't remove this
 
-    const isFirst = (idx == 0)
-    const isLast = (idx == (exports.length - 1)) // NOTE: Don't use '===' here!
+    // NOTE: Don't use '===' here!
+    const isFirst = (idx == 0) // eslint-disable-line
+    const isLast = (idx == (exports.length - 1)) // eslint-disable-line
 
     const kaldunaOpts = {
       verbose: false,
       returnMitosisIR: true,
       globalSymbolTable,
-      exportDefault: isSingleComponent,
+      exportDefault: false,
       importsToRemove: uniqueImports,
 
       /* NOTE: The option below prevents a name collision bug. For example:
@@ -184,14 +185,14 @@ function convertDomqlModule(domqlModule, globusaStruct, desiredFormat, options)
          But, in this case, because A is in local scope as one of the exports,
          the component import will be ignored, preventing the collision.
       */
-      componentImportsToIgnore: exports,
+      componentImportsToIgnore: exports
     }
 
     let out = null
     if (isFirst) {
       out = convert(dobj, desiredFormat, {
         ...kaldunaOpts,
-        removeReactImport: false,
+        removeReactImport: false
         // NOTE(nikaoto): Commented these out because we're using deps now, so
         // all the imports and decls are going to be redundant
         // importsToInclude: globusaStruct.imports,
@@ -200,7 +201,7 @@ function convertDomqlModule(domqlModule, globusaStruct, desiredFormat, options)
     } else {
       out = convert(dobj, desiredFormat, {
         ...kaldunaOpts,
-        removeReactImport: true,
+        removeReactImport: true
       })
     }
 
@@ -221,8 +222,8 @@ function convertDomqlModule(domqlModule, globusaStruct, desiredFormat, options)
 // result to the destination. The tmpDirPath is used as a working directory for
 // temporary files.
 // Returns globusaStruct for later usage.
-async function convertFile(srcPath, tmpDirPath, destPath,
-                           desiredFormat, options) {
+async function convertFile (srcPath, tmpDirPath, destPath,
+  desiredFormat, options) {
   // Parse with globusa
   console.log(`Parsing components in ${srcPath}`)
   const fileContent = await fs.promises.readFile(srcPath, 'utf8')
@@ -236,6 +237,7 @@ async function convertFile(srcPath, tmpDirPath, destPath,
     entryPoints: [srcPath],
     bundle: true,
     sourcemap: true,
+    keepNames: false,
     target: 'node12',
     format: 'cjs',
     outdir: tmpDirPath
@@ -256,7 +258,7 @@ async function convertFile(srcPath, tmpDirPath, destPath,
   )
 
   // Create dest dir
-  await mkdirp(path.dirname(destPath))
+  mkdirp(path.dirname(destPath))
 
   // Write file
   if (convertedModuleStr && convertedModuleStr.length > 0) {
@@ -268,25 +270,147 @@ async function convertFile(srcPath, tmpDirPath, destPath,
   return globusaStruct
 }
 
+// Aborts copying if destination exists
+function recursiveCopy (src, dst, exclude) {
+  if (exclude && exclude.includes(src))
+    return
+
+  if (!fs.existsSync(src)) {
+    console.error(`Error (recursiveCopy): Source file '${src}' does not exist.`)
+    return
+  }
+
+  if (fs.existsSync(dst)) {
+    console.error(`Error (recursiveCopy): Destination file '${dst}' exists.`)
+    return
+  }
+
+  if (!isDirectory(src)) {
+    fs.copyFileSync(src, dst)
+    return
+  }
+
+  mkdirp(dst)
+  const files = fs.readdirSync(src)
+  for (const f of files) {
+    if (exclude && exclude.includes(f))
+      continue
+
+    recursiveCopy(path.join(src, f), path.join(dst, f), exclude)
+  }
+}
+
+function mergeDirectories (mrg, dst, { globusaMerge, exclude }) {
+  // Source doesn't exist, skip
+  if (!fs.existsSync(mrg)) {
+    console.error(`Error: Source merge directory '${mrg}' does not exist.`)
+    return
+  }
+
+  // Direct copy, no merging needed
+  if (!fs.existsSync(dst)) {
+    recursiveCopy(mrg, dst, exclude)
+    return
+  }
+
+  const isMrgDir = isDirectory(mrg)
+  const isDstDir = isDirectory(dst)
+
+  if (!isMrgDir && !isDstDir) {
+    return
+  }
+
+  if (!isMrgDir && isDstDir) {
+    console.error(`mergeDirectories('${mrg}', '${dst}') skipped. ` +
+                  'Merge source (mrg) is a regular file and the ' +
+                  'destination (dst) is a directory.')
+    return
+  }
+
+  if (isMrgDir && !isDstDir) {
+    console.error(`mergeDirectories('${mrg}', '${dst}') skipped. ` +
+                  'Merge source (mrg) is a directory and the ' +
+                  'destination (dst) is a regular file.')
+    return
+  }
+
+  const mrgFiles = fs.readdirSync(mrg).filter(f => !exclude.includes(f))
+  const dstFiles = fs.readdirSync(dst)
+
+  // Make a map of dstFiles for quick access
+  const dstFilesMap = {}
+  for (const f of dstFiles) {
+    dstFilesMap[f] = true
+  }
+
+  // Do a direct directory merge (without globusa)
+  const directMrgFiles = mrgFiles.filter(f => !globusaMerge.includes(f))
+  for (const f of directMrgFiles) {
+    if (!dstFilesMap[f]) {
+      recursiveCopy(path.resolve(mrg, f), path.resolve(dst, f), exclude)
+    } else {
+      mergeDirectories(path.resolve(mrg, f), path.resolve(dst, f), {
+        globusaMerge, exclude
+      })
+    }
+  }
+
+  // Do a smart file merge (with globusa)
+  const globusaMrgFiles = mrgFiles.filter(f => globusaMerge.includes(f))
+  for (const f of globusaMrgFiles) {
+    if (!dstFilesMap[f]) {
+      // Nothing to merge. Do a direct copy
+      const p = path.resolve(mrg, f)
+      if (isDirectory(p)) {
+        console.error('Error: Globusa merge can only be done on files, ' +
+                      `but '${p}' is a directory`)
+      } else {
+        fs.copyFileSync(p, path.resolve(dst, f))
+      }
+    } else {
+      // Concatenate the files
+      const mrgTxt = fs.readFileSync(path.resolve(mrg, f), { encoding: 'utf8' })
+      const dstTxt = fs.readFileSync(path.resolve(dst, f), { encoding: 'utf8' })
+      const outTxt = mrgTxt + '\n' + dstTxt
+
+      // TODO: Dedup the imports with globusa here
+
+      fs.writeFileSync(path.resolve(dst, f), outTxt, { encoding: 'utf8' })
+    }
+  }
+}
+
+export function convertFromCli (data, opts) {
+  const { framework, verbose, verboseCode } = opts
+  console.log(chalk.dim('\n----------------\n'))
+  console.log('Converting components to', chalk.bold(framework))
+  const convertedStrings = convertDomqlModule(data, null, framework)
+  if (verboseCode) console.log(convertedStrings)
+  console.log(chalk.bold.green('\nSuccessfully converted'))
+  return verbose
+}
+
 program
   .command('convert')
   .description('Convert and copy all DomQL components under a directory')
   .argument('[src]', 'Source directory/file. By default, it is "src/"')
   .argument('[dest]',
-            'Destination directory/file. Will be overwritten. By ' +
+    'Destination directory/file. Will be overwritten. By ' +
             'default, it becomes the name of the desired format')
   .option('--react', 'Convert all DomQL components to React')
   .option('--angular', 'Convert all DomQL components to Angular')
   .option('--vue2', 'Convert all DomQL components to Vue2')
   .option('--vue3', 'Convert all DomQL components to Vue3')
   .option('-t, --tmp-dir <path>',
-          'Use this directory for storing intermediate & build files instead of ' +
+    'Use this directory for storing intermediate & build files instead of ' +
           `the default (dest/${TMP_DIR_NAME})`)
   .option('-o, --only <components>',
-          'Only convert these components; comma separated ' +
+    'Only convert these components; comma separated ' +
           '(for example: --only=Flex,Img)')
+  .option('-m, --merge <dir>',
+    'After converting an entire directory, perform a recursive merge that takes files from this directory and puts them in the dest directory. It also concatenates index.js files')
   .option('--internal-uikit',
-          '(For internal use only). ' +
+    '(For internal use only). ' +
           'Excludes particular components from the conversion')
   .action(async (src, dest, options) => {
     if (!convert) {
@@ -314,14 +438,14 @@ program
     // Resolve source file/dir
     const srcPath = path.resolve(src || './src')
     if (!fs.existsSync(srcPath)) {
-      console.erorr(`Source directory/file ('${srcPath}') does not exist`)
-      return 1
+      console.error(`Source directory/file ('${srcPath}') does not exist`)
+      process.exit(1)
     }
 
     // Resolve & create tmp dir
     const tmpDirPath = options.tmpDir ??
           path.resolve(path.dirname(srcPath), TMP_DIR_NAME)
-    await mkdirp(tmpDirPath)
+    mkdirp(tmpDirPath)
 
     // Put a package.json file so that when we import() the modules from the
     // directory, node doesn't recognize them as ES modules (in case the parent
@@ -350,7 +474,7 @@ program
       } else {
         // dest not given. Use default (desiredFormat as directory).
         const destDir = path.resolve(desiredFormat)
-        await mkdirp(destDir)
+        mkdirp(destDir)
         destFilePath = path.join(destDir, path.basename(srcPath))
       }
 
@@ -362,7 +486,7 @@ program
         options
       )
 
-      return 0
+      process.exit(0)
     }
 
     // We're converting multiple files (in a directory).
@@ -372,7 +496,7 @@ program
     if (!fs.existsSync(dest)) {
       // dest doesn't exist. Create it.
       destDirPath = path.resolve(dest)
-      await mkdirp(destDirPath)
+      mkdirp(destDirPath)
     } else if (isDirectory(dest)) {
       // dest exists and is a directory.
       destDirPath = path.resolve(dest)
@@ -381,21 +505,31 @@ program
       console.error(
         `The destination ('${path.resolve(dest)}') must be a directory when ` +
           `the source ('${srcPath}') is a directory`)
-      return 1
+      process.exit(1)
+    }
+
+    // Resolve merge dir
+    let mergeDirPath = null
+    if (options.merge && options.internalUikit) {
+      mergeDirPath = path.resolve(options.merge)
+      if (!fs.existsSync(mergeDirPath)) {
+        console.error(`Merge directory '${mergeDirPath}' does not exist`)
+        process.exit(1)
+      }
     }
 
-    const ignoredFiles = ['index.js', 'package.json', 'node_modules', 'dist']
+    const dontConvert = ['index.js', 'package.json', 'node_modules', 'dist']
     const sourceDirNames = (await fs.promises.readdir(srcPath))
-          .filter(dir => !ignoredFiles.includes(dir))
+      .filter(dir => !dontConvert.includes(dir))
 
     const dirs = []
 
+    // Core convert loop
     for (const dir of sourceDirNames) {
       // Ignored directories
       if (options.internalUikit) {
         let skip = false
-        for (const pat of INTERNAL_UIKIT_CONF.excludedDirectories)
-          if (dir.match(pat)) { skip = true; break; }
+        for (const pat of INTERNAL_UIKIT_CONF.excludedDirectories) { if (dir.match(pat)) { skip = true; break } }
         if (skip) continue
       }
 
@@ -408,16 +542,16 @@ program
       const pjFilePath = path.join(dirPath, 'package.json')
 
       const globusaStruct = await convertFile(
-        indexFilePath,                           // src
-        path.join(tmpDirPath, dir),              // tmp
+        indexFilePath, // src
+        path.join(tmpDirPath, dir), // tmp
         path.join(destDirPath, dir, 'index.js'), // dst
         desiredFormat,
         options
       )
 
-      if (fs.existsSync(pjFilePath)) {
+      if (options.internalUikit && fs.existsSync(pjFilePath)) {
         generatePackageJsonFile(
-          pjFilePath,                                  // src
+          pjFilePath, // src
           path.join(destDirPath, dir, 'package.json'), // dst
           globusaStruct,
           desiredFormat,
@@ -430,13 +564,19 @@ program
 
     // Generate top index.js file
     if (dirs.length > 0) {
-      //const importLines = dirs.map(d => `import ${d} from './${d}'`).join('\n') + '\n'
-      //const exportLines = 'export {\n' + dirs.map(d => `  ${d}`).join(',\n') + '\n}\n'
-      //const fileContent = importLines + '\n' + exportLines
       const fileContent = dirs.map(d => `export * from './${d}'`).join('\n')
-
       const fh = await fs.promises.open(path.join(destDirPath, 'index.js'), 'w')
       await fh.writeFile(fileContent, 'utf8')
       await fh.close()
     }
+
+    if (mergeDirPath) {
+      console.log(`Merging '${mergeDirPath}' and ${destDirPath}...`)
+      mergeDirectories(mergeDirPath, destDirPath, {
+        globusaMerge: ['index.js', 'index.jsx'],
+        exclude: ['dist', 'node_modules']
+      })
+    }
+
+    process.exit(0)
   })

package/bin/fetch.js

@@ -3,112 +3,115 @@
 import fs from 'fs'
 import chalk from 'chalk'
 import { loadModule } from './require.js'
-import { exec } from 'child_process'
 import { program } from './program.js'
+import * as fetch from '@symbo.ls/fetch'
 
-import fetch from '@symbo.ls/fetch'
-const { fetchRemote } = fetch
+import * as utils from '@domql/utils'
+import { convertFromCli } from './convert.js'
+const { isObjectLike } = utils.default
+
+const { fetchRemote } = fetch.default
 
-const PACKAGE_PATH = process.cwd() + '/package.json'
 const RC_PATH = process.cwd() + '/symbols.json'
 const LOCAL_CONFIG_PATH = process.cwd() + '/node_modules/@symbo.ls/init/dynamic.json'
 const DEFAULT_REMOTE_REPOSITORY = 'https://github.com/symbo-ls/default-config/'
-const DEFAULT_REMOTE_CONFIG_PATH = 'https://api.symbols.dev/' // eslint-disable-line
+const DEFAULT_REMOTE_CONFIG_PATH = 'https://api.symbols.app/' // eslint-disable-line
 
-const API_URL = 'https://api.symbols.dev/' // eslint-disable-line
+const API_URL_LOCAL = 'http://localhost:13335/'
+const API_URL = 'https://api.symbols.app/'
 
-const pkg = loadModule(PACKAGE_PATH)
 const rcFile = loadModule(RC_PATH) // eslint-disable-line
 const localConfig = loadModule(LOCAL_CONFIG_PATH) // eslint-disable-line
 
+const debugMsg = chalk.dim('Use --verbose to debug the error or open the issue at https://github.com/symbo-ls/smbls')
+
 let rc = {}
 try {
   rc = loadModule(RC_PATH) // eslint-disable-line
 } catch (e) { console.error('Please include symbols.json to your root of respository') }
 
-program
-  .version(pkg.version ?? 'unknown')
+export const fetchFromCli = async (opts) => {
+  const { dev, verbose, prettify } = opts
 
-program
-  .command('install')
-  .description('Install Symbols')
-  .option('--framework', 'Which Symbols to install (domql, react)')
-  .action(async (framework) => {
-    if (!rcFile || !localConfig) {
-      console.error('symbols.json not found in the root of the repository')
-      return
-    }
+  await rc.then(async data => {
+    const { key, framework } = data
 
-    // const packageName = `@symbo.ls/${mode || 'uikit'}`
-    const packageName = 'smbls'
-    console.log('Adding', chalk.green.bold(packageName))
+    const endpoint = dev ? API_URL_LOCAL : API_URL
 
-    if (framework === 'domql' || rcFile.framework === 'domql') {
-      exec('yarn add domql@^1.15.26 --force', (error, stdout, stderr) => {
-        if (error) {
-          console.log(`error: ${error.message}`)
-          return
-        }
-        if (stderr) {
-          console.log(`stderr: ${stderr}`)
-          // return;
-        }
-      })
-    }
+    console.log('\nFetching from:', chalk.bold(endpoint), '\n')
 
-    exec(`yarn add ${packageName}@^0.15.22 --force`, (error, stdout, stderr) => {
-      if (error) {
-        console.log(`error: ${error.message}`)
-        return
+    const body = await fetchRemote(key, {
+      endpoint,
+      onError: (e) => {
+        console.log(chalk.red('Failed to fetch:'), key)
+        if (verbose) console.error(e)
+        else console.log(debugMsg)
       }
-      if (stderr) {
-        console.log(`stderr: ${stderr}`)
-        // return;
-      }
-      console.log('')
-      console.log(`stdout: ${stdout}`)
-      console.log('\n')
-      console.log(chalk.green.bold(packageName), 'successfuly added!')
-      console.log('')
-      console.log(chalk.dim('Now you can import components like:'), 'import { Button } from \'smbls')
     })
-  })
-
-program
-  .command('fetch [destination]')
-  .description('Fetch symbols')
-  .action(async (options) => {
-    rc.then(async data => {
-      const opts = { ...data, ...options } // eslint-disable-line
-      const key = data.key || (options && options.key)
-
-      const body = await fetchRemote(key, { endpoint: 'api.symbols.dev' })
-      const { version, ...config } = body
-
-      console.log(chalk.bold('Symbols'), 'config fetched:')
-      if (key) console.log(chalk.green(key))
-      else console.log(chalk.dim('- Default config from:'), chalk.dim.underline(DEFAULT_REMOTE_REPOSITORY))
-      console.log('')
-
-      console.log(chalk.dim('- dynamic.json updated:'), chalk.dim.underline(LOCAL_CONFIG_PATH))
-      console.log('')
-
-      for (const t in config) {
-        const type = config[t]
-        console.log(chalk.bold(t))
-        const arr = []
-        for (const v in type) arr.push(v)
-        console.log('  ', chalk.dim(arr.join(', ')))
+    if (!body) return
+
+    const { version, ...config } = body
+
+    if (verbose) {
+      if (key) {
+        console.log(chalk.bold('Symbols'), 'data fetched for', chalk.green(body.name))
+      } else {
+        console.log(
+          chalk.bold('Symbols'),
+          'config fetched from',
+          chalk.bold('default-config from:'),
+          chalk.dim.underline(DEFAULT_REMOTE_REPOSITORY)
+        )
       }
+      console.log()
+    }
 
-      const bodyString = JSON.stringify(body)
-      fs.writeFile(LOCAL_CONFIG_PATH, bodyString, err => {
-        console.log('')
-        if (err) {
-          console.log('Error writing file', err)
+    for (const t in config) {
+      const type = config[t]
+      const arr = []
+      if (isObjectLike(type)) {
+        for (const v in type) arr.push(v)
+        if (arr.length) {
+          console.log(chalk.dim(t + ':'))
+          console.log(chalk.bold(arr.join(', ')))
         } else {
-          console.log('Successfully wrote file')
+          console.log(chalk.dim(t + ':'), chalk.dim('- empty -'))
         }
-      })
-    })
+      } else console.log(chalk.dim(t + ':'), chalk.bold(type))
+    }
+
+    if (body.designsystem) {
+      body.designSystem = body.designsystem
+      delete body.designsystem
+    }
+
+    const bodyString = JSON.stringify(body, null, prettify ?? 2)
+
+    try {
+      await fs.writeFileSync(LOCAL_CONFIG_PATH, bodyString)
+
+      if (verbose) {
+        console.log(chalk.dim('\ndynamic.json has been updated:'))
+        console.log(chalk.dim.underline(LOCAL_CONFIG_PATH))
+      }
+
+      console.log(chalk.bold.green('\nSuccessfully wrote file'))
+    } catch (e) {
+      console.log(chalk.bold.red('\nError writing file'))
+      if (verbose) console.error(e)
+      else console.log(debugMsg)
+    }
+
+    if (body.components && framework) {
+      convertFromCli(body.components, { ...opts, framework })
+    }
   })
+}
+
+program
+  .command('fetch')
+  .description('Fetch symbols')
+  .option('-d, --dev', 'Running from local server')
+  .option('-v, --verbose', 'Verbose errors and warnings')
+  .option('--verbose-code', 'Verbose errors and warnings')
+  .action(fetchFromCli)

package/bin/index.js

@@ -3,6 +3,7 @@
 import 'v8-compile-cache'
 
 import { program } from './program.js'
+import './install.js'
 import './init.js'
 import './fetch.js'
 import './sync.js'

package/bin/install.js

@@ -0,0 +1,75 @@
+#!/usr/bin/env node
+
+import chalk from 'chalk'
+import { loadModule } from './require.js'
+import { exec } from 'child_process'
+import { program } from './program.js'
+
+const PACKAGE_PATH = process.cwd() + '/package.json'
+const RC_PATH = process.cwd() + '/symbols.json'
+const LOCAL_CONFIG_PATH = process.cwd() + '/node_modules/@symbo.ls/init/dynamic.json'
+const DEFAULT_REMOTE_CONFIG_PATH = 'https://api.symbols.app/' // eslint-disable-line
+
+const pkg = loadModule(PACKAGE_PATH)
+const rcFile = loadModule(RC_PATH) // eslint-disable-line
+const localConfig = loadModule(LOCAL_CONFIG_PATH) // eslint-disable-line
+
+let rc = {}
+try {
+  rc = loadModule(RC_PATH) // eslint-disable-line
+} catch (e) { console.error('Please include symbols.json to your root of respository') }
+
+const makeCommand = (packageManager, packageName) => {
+  return packageManager === 'yarn'
+    ? `yarn add ${packageName}`
+    : packageManager === 'pnpm'
+      ? `pnpm add ${packageName}`
+      : `npm i ${packageName} --save`
+}
+
+export const installFromCli = async (options) => {
+  if (!rcFile || !localConfig) {
+    console.error('symbols.json not found in the root of the repository')
+    return
+  }
+
+  const framework = rcFile.framework || options.framework
+  const packageManager = rcFile.packageManager || options.packageManager
+
+  // const packageName = `@symbo.ls/${mode || 'uikit'}`
+  const packageName = framework === 'react' ? '@symbo.ls/react' : 'smbls'
+  console.log('Adding', chalk.green.bold(packageName))
+
+  const command = makeCommand(packageManager, packageName)
+  exec(command, (error, stdout, stderr) => {
+    if (error) {
+      console.log(`error: ${error.message}`)
+      return
+    }
+    if (stderr) {
+      console.log(`stderr: ${stderr}`)
+      // return;
+    }
+    console.log('')
+    console.log(`stdout: ${stdout}`)
+    console.log('\n')
+    console.log(chalk.green.bold(packageName), 'successfuly added!')
+    console.log('')
+    console.log(
+      chalk.dim('Now you can import components like:'),
+      `import { Button } from '${packageName}'`
+    )
+  })
+}
+
+program
+  .version(pkg.version ?? 'unknown')
+
+program
+  .command('install')
+  .description('Install Symbols')
+  .option('-d, --dev', 'Running from local server')
+  .option('-v, --verbose', 'Verbose errors and warnings')
+  .option('-f, --fetch', 'Verbose errors and warnings', true)
+  .option('--framework', 'Which Symbols to install (domql, react)')
+  .action(installFromCli)

package/bin/require.js

@@ -1,7 +1,7 @@
 'use strict'
 
-import { createRequire } from 'module'
 import fs from 'fs'
+import { createRequire } from 'module'
 
 class ImportError extends Error {} /* Bring in the ability to create the 'require' method */ // eslint-disable-line
 const require = createRequire(import.meta.url) // construct the require method

package/bin/sync.js

@@ -1,9 +1,18 @@
 #!/usr/bin/env node
 
-import { updateDynamycFile } from '@symbo.ls/socket'
-import * as socketClient from '@symbo.ls/socket/client.js'
+import chalk from 'chalk'
 import { program } from './program.js'
 import { loadModule } from './require.js'
+import { updateDynamycFile } from '@symbo.ls/socket'
+
+import * as socketClient from '@symbo.ls/socket/client.js'
+import { fetchFromCli } from './fetch.js'
+import { convertFromCli } from './convert.js'
+
+const SOCKET_API_URL_LOCAL = 'http://localhost:13336/'
+const SOCKET_API_URL = 'https://socket.symbols.app/'
+
+const debugMsg = chalk.dim('Use --verbose to debug the error or open the issue at https://github.com/symbo-ls/smbls')
 
 const RC_PATH = process.cwd() + '/symbols.json'
 let rc = {}
@@ -14,21 +23,52 @@ try {
 program
   .command('sync')
   .description('Sync with Symbols')
-  .option('-l, --live', 'Bypass the local build')
-  .option('--key', 'Bypass the local build')
-  .action(async (options) => {
+  .option('-d, --dev', 'Running from local server')
+  .option('-v, --verbose', 'Verbose errors and warnings')
+  .option('-k, --key', 'Bypass the symbols.json key, overriding the key manually')
+  .option('-f, --fetch', 'Verbose errors and warnings', true)
+  .option('--verbose-code', 'Verbose errors and warnings')
+  .action(async (opts) => {
+    const { dev, verbose, fetch: fetchAlso } = opts
+
+    if (fetchAlso) {
+      await fetchFromCli(opts)
+      console.log(chalk.dim('\n----------------\n'))
+    }
+
     if (!rc) {
       console.error('symbols.json not found in the root of the repository')
       return
     }
-    rc.then(data => {
-      const opts = { ...data, ...options }
-      const key = data.key || options.key
+
+    // if (rc) return false /// /////////////////////
+
+    await rc.then(symbolsrc => {
+      const options = { ...symbolsrc, ...opts }
+      const { framework } = symbolsrc
+      const key = symbolsrc.key || opts.key
+      const socketUrl = dev ? SOCKET_API_URL_LOCAL : SOCKET_API_URL
+
+      console.log('Connecting to:', chalk.bold(socketUrl))
+      console.log()
+
       socketClient.connect(key, {
+        source: 'cli',
+        socketUrl,
         onConnect: (id, socket) => {
-          console.log(id)
+          console.log('Connected to', chalk.green(key), 'from', chalk.bold('Symbols'), 'socket server')
+          console.log('Socket id:', id)
+          console.log(chalk.dim('\nListening to updates...\n'))
         },
         onChange: (event, data) => {
+          if (event === 'clients') {
+            console.log(
+              'Active clients:',
+              chalk.green.bold(Object.keys(data).join(', '))
+            )
+            return
+          }
+
           data = JSON.parse(data)
           const d = {}
           const {
@@ -36,19 +76,32 @@ program
             PROJECT_STATE,
             PROJECT_COMPONENTS,
             PROJECT_SNIPPETS,
-            PROJECT_PAGES
+            PROJECT_PAGES,
+            DATA
           } = data
           if (PROJECT_DESIGN_SYSTEM) d.designSystem = PROJECT_DESIGN_SYSTEM
-          if (PROJECT_STATE) d.designSystem = PROJECT_STATE
-          if (PROJECT_COMPONENTS) d.designSystem = PROJECT_COMPONENTS
-          if (PROJECT_SNIPPETS) d.designSystem = PROJECT_SNIPPETS
-          if (PROJECT_PAGES) d.designSystem = PROJECT_PAGES
-          if (Object.keys(d).length) updateDynamycFile(d)
+          if (PROJECT_STATE) d.state = PROJECT_STATE
+          if (PROJECT_COMPONENTS) d.components = PROJECT_COMPONENTS
+          if (DATA && DATA.components) d.components = DATA.components
+          if (PROJECT_SNIPPETS) d.snippets = PROJECT_SNIPPETS
+          if (PROJECT_PAGES) d.pages = PROJECT_PAGES
+
+          if (Object.keys(d).length) {
+            updateDynamycFile(d, { framework, ...options })
+          }
+
+          if (d.components && framework) {
+            convertFromCli(d.components, {
+              ...options, framework
+            })
+          }
         },
         onError: (err, socket) => {
-          console.log(err)
+          console.log(chalk.bold.green('Error during connection'))
+          if (verbose) console.error(err)
+          else console.log(debugMsg)
         },
-        ...opts
+        ...options
       })
     })
   })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbo.ls/cli",
-  "version": "2.11.159",
+  "version": "2.11.162",
   "description": "Fetch your Symbols configuration",
   "main": "bin/fetch.js",
   "author": "Symbols",
@@ -25,5 +25,5 @@
     "node-fetch": "^3.1.0",
     "v8-compile-cache": "^2.3.0"
   },
-  "gitHead": "4dbce17a65f09e9c7e9451f5d9042ddbe351280b"
+  "gitHead": "fe3359a1d6c14d38f45f5e5db10ef2056947a228"
 }