@symbo.ls/cli 2.11.160 → 2.11.164

package/bin/convert.js

@@ -1,10 +1,11 @@
 'use strict'
-// TODO: --only flag doesn't work!!!
+
+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'
 
@@ -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,7 +127,7 @@ 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)
 
@@ -134,7 +135,7 @@ function convertDomqlModule (domqlModule, globusaStruct, desiredFormat, options)
   const exports = Object.keys(domqlModule)
     .filter(exportName => {
       if (!whitelist) return true
-      if (whitelist.includes(exportName)) {
+      if (!whitelist.includes(exportName)) {
         console.log(`Skipping ${exportName} component due to whitelist exclusion`)
         return false
       }
@@ -257,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) {
@@ -269,6 +270,124 @@ 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')
@@ -286,6 +405,8 @@ program
   .option('-o, --only <components>',
     '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). ' +
           'Excludes particular components from the conversion')
@@ -315,14 +436,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
@@ -351,7 +472,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))
       }
 
@@ -363,7 +484,7 @@ program
         options
       )
 
-      return 0
+      process.exit(0)
     }
 
     // We're converting multiple files (in a directory).
@@ -373,7 +494,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)
@@ -382,15 +503,26 @@ program
       console.error(
         `The destination ('${path.resolve(dest)}') must be a directory when ` +
           `the source ('${srcPath}') is a directory`)
-      return 1
+      process.exit(1)
     }
 
-    const ignoredFiles = ['index.js', 'package.json', 'node_modules', 'dist']
+    // 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 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) {
@@ -415,7 +547,7 @@ program
         options
       )
 
-      if (fs.existsSync(pjFilePath)) {
+      if (options.internalUikit && fs.existsSync(pjFilePath)) {
         generatePackageJsonFile(
           pjFilePath, // src
           path.join(destDirPath, dir, 'package.json'), // dst
@@ -430,13 +562,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,117 @@
 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, convert: convertOpt } = 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)
+    }
+
+    console.log(convertOpt)
+    if (body.components && convertOpt && 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('--convert', 'Verbose errors and warnings', true)
+  .option('--verbose-code', 'Verbose errors and warnings')
+  .action(fetchFromCli)

package/bin/index.js

@@ -3,12 +3,14 @@
 import 'v8-compile-cache'
 
 import { program } from './program.js'
+import './install.js'
 import './init.js'
 import './fetch.js'
 import './sync.js'
 import './clean.js'
 import './convert.js'
 import './create.js'
+import './link-packages.js'
 
 const args = process.argv
 program.parse(args)

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/link-packages.js

@@ -0,0 +1,91 @@
+#!/usr/bin/env node
+
+import { execSync } from 'child_process'
+import { program } from './program.js'
+
+const packagesToLink = [
+  'attrs-in-props',
+  '@symbo.ls/cli',
+  '@symbo.ls/convert',
+  '@symbo.ls/create',
+  'css-in-props',
+  '@symbo.ls/default-config',
+  '@symbo.ls/fetch',
+  '@symbo.ls/emotion',
+  '@symbo.ls/init',
+  '@symbo.ls/scratch',
+  'smbls',
+  '@symbo.ls/socket-ui',
+  '@symbo.ls/utils',
+  '@symbo.ls/socket',
+  '@symbo.ls/uikit',
+  '@symbo.ls/react',
+  '@symbo.ls/atoms',
+  '@symbo.ls/board',
+  '@symbo.ls/avatar',
+  '@symbo.ls/box',
+  '@symbo.ls/button',
+  '@symbo.ls/card',
+  '@symbo.ls/chat',
+  '@symbo.ls/datepicker',
+  '@symbo.ls/checkbox',
+  '@symbo.ls/dialog',
+  '@symbo.ls/dropdown',
+  '@symbo.ls/editorjs',
+  '@symbo.ls/form',
+  '@symbo.ls/field',
+  '@symbo.ls/google-maps',
+  '@symbo.ls/helmet',
+  '@symbo.ls/icon',
+  '@symbo.ls/indicator',
+  '@symbo.ls/input',
+  '@symbo.ls/link',
+  '@symbo.ls/list',
+  '@symbo.ls/label',
+  '@symbo.ls/markdown',
+  '@symbo.ls/modal',
+  '@symbo.ls/notification',
+  '@symbo.ls/progress',
+  '@symbo.ls/pills',
+  '@symbo.ls/range',
+  '@symbo.ls/select',
+  '@symbo.ls/sidebar',
+  '@symbo.ls/slider',
+  '@symbo.ls/steps',
+  '@symbo.ls/tab',
+  '@symbo.ls/table',
+  '@symbo.ls/threejs',
+  '@symbo.ls/timepicker',
+  '@symbo.ls/titleparagraph',
+  '@symbo.ls/tooltip',
+  '@symbo.ls/upload',
+  '@symbo.ls/unitvalue',
+  '@symbo.ls/video',
+  '@symbo.ls/default-icons',
+  '@symbo.ls/feather-icons',
+  '@symbo.ls/material-icons',
+  '@symbo.ls/fluent-icons',
+  '@symbo.ls/react-atoms',
+  '@symbo.ls/react-box',
+  '@symbo.ls/react-button',
+  '@symbo.ls/react-icon',
+  '@symbo.ls/react-provider',
+  '@symbo.ls/react-tooltip'
+  // Add all your package names here,
+]
+
+program
+  .command('link-packages')
+  .description('Run "yarn link" on specified packages')
+  .action(() => {
+    try {
+      for (const packageName of packagesToLink) {
+        console.log(`Linking ${packageName}...`)
+        execSync(`yarn link ${packageName}`, { stdio: 'inherit' })
+      }
+      console.log('All packages linked successfully.')
+    } catch (error) {
+      console.error('Error linking packages:', error.message)
+      process.exit(1)
+    }
+  })

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,53 @@ 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('--convert', 'Verbose errors and warnings', true)
+  .option('--verbose-code', 'Verbose errors and warnings')
+  .action(async (opts) => {
+    const { dev, verbose, fetch: fetchOpt, convert: convertOpt } = opts
+
+    if (fetchOpt) {
+      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 +77,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 && convertOpt && 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.160",
+  "version": "2.11.164",
   "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": "f36bc99a2d0c1b771e3d8e104d1b1005b2b0a33a"
+  "gitHead": "943a48800e5959b8c1f15d5d8d49224565038c23"
 }

package/bin/link-all.js

@@ -1,10 +0,0 @@
-#!/usr/bin/env node
-
-import { program } from './program.js'
-
-program
-  .command('link-all')
-  .description('Symlink all smbls dependencies')
-  .action(async (options) => {
-    //
-  })