@symbo.ls/cli 2.33.11 → 2.33.13

package/bin/sync.js

@@ -1,128 +1,329 @@
 #!/usr/bin/env node
 
+import fs from 'fs'
+import path from 'path'
 import chalk from 'chalk'
-import { program } from './program.js'
+import inquirer from 'inquirer'
 import { loadModule } from './require.js'
-import { updateDynamycFile } from '@symbo.ls/socket'
-import * as utils from '@domql/utils'
+import { program } from './program.js'
+import { CredentialManager } from '../helpers/credentialManager.js'
+import { buildDirectory } from '../helpers/fileUtils.js'
+import { generateDiffDisplay, showDiffPager } from '../helpers/diffUtils.js'
+import { normalizeKeys } from '../helpers/compareUtils.js'
+import { getCurrentProjectData, postProjectChanges } from '../helpers/apiUtils.js'
+import { computeCoarseChanges, threeWayRebase, computeOrdersForTuples, preprocessChanges } from '../helpers/changesUtils.js'
+import { createFs } from './fs.js'
+import { showAuthRequiredMessages, showBuildErrorMessages } from '../helpers/buildMessages.js'
+import { loadSymbolsConfig } from '../helpers/symbolsConfig.js'
+import { loadCliConfig, readLock, writeLock, getConfigPaths, updateLegacySymbolsJson } from '../helpers/config.js'
+const RC_PATH = process.cwd() + '/symbols.json'
+const distDir = path.join(process.cwd(), 'smbls')
+
+async function buildLocalProject() {
+  try {
+    const outputDirectory = path.join(distDir, 'dist')
+    await buildDirectory(distDir, outputDirectory)
+    const outputFile = path.join(outputDirectory, 'index.js')
+    return normalizeKeys(await loadModule(outputFile, { silent: false }))
+  } catch (error) {
+    // Enhance error with build context
+    error.buildContext = {
+      command: 'sync',
+      workspace: process.cwd()
+    }
+    throw error
+  }
+}
+
+async function resolveTopLevelConflicts(conflictsKeys, ours, theirs) {
+  const choices = conflictsKeys.map((key) => {
+    const ourChange = ours.find((c) => c[1][0] === key)
+    const theirChange = theirs.find((c) => c[1][0] === key)
+    return {
+      name: `${chalk.cyan(key)}  ${chalk.green('Local')} vs ${chalk.red('Remote')}`,
+      value: key,
+      short: key,
+      description: `${chalk.green('+ Local:')} ${JSON.stringify(ourChange?.[2])}
+${chalk.red('- Remote:')} ${JSON.stringify(theirChange?.[2])}`
+    }
+  })
 
-import * as socketClient from '@symbo.ls/socket/client.js'
-import { fetchFromCli } from './fetch.js'
-import { convertFromCli } from './convert.js'
+  const { selected } = await inquirer.prompt([{
+    type: 'checkbox',
+    name: 'selected',
+    message: 'Conflicts detected. Select the keys to keep from Local (unchecked will keep Remote):',
+    choices,
+    pageSize: 10
+  }])
 
-const { debounce } = utils.default || utils
+  const final = conflictsKeys.map((key) => {
+    if (selected.includes(key)) {
+      return ours.find((c) => c[1][0] === key)
+    }
+    return theirs.find((c) => c[1][0] === key)
+  }).filter(Boolean)
 
-const SOCKET_API_URL_LOCAL = 'http://localhost:8080/'
-const SOCKET_API_URL = 'https://api.symbols.app/'
+  return final
+}
 
-const debugMsg = chalk.dim(
-  'Use --verbose to debug the error or open the issue at https://github.com/symbo-ls/smbls'
-)
+function getAt(obj, pathArr = []) {
+  try {
+    return pathArr.reduce((acc, k) => (acc == null ? undefined : acc[k]), obj)
+  } catch (_) {
+    return undefined
+  }
+}
 
-const RC_PATH = process.cwd() + '/symbols.json'
-let rc = {}
-try {
-  rc = loadModule(RC_PATH) // eslint-disable-line
-} catch (e) {
-  console.error('Please include symbols.json to your root of respository')
+function buildDiffsFromChanges(changes, base, target) {
+  const diffs = []
+  for (const [op, path, value] of changes) {
+    const oldVal = getAt(base, path)
+    if (op === 'delete') {
+      diffs.push(generateDiffDisplay('delete', path, oldVal))
+    } else {
+      const newVal = value !== undefined ? value : getAt(target, path)
+      diffs.push(generateDiffDisplay('update', path, oldVal, newVal))
+    }
+  }
+  return diffs
 }
 
-program
-  .command('sync')
-  .description('Realtime sync with Symbols')
-  .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('--update', 'overriding changes from platform', 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')
+async function confirmChanges(localChanges, remoteChanges, base, local, remote) {
+  if (localChanges.length === 0 && remoteChanges.length === 0) {
+    console.log(chalk.bold.yellow('No changes detected'))
+    return false
+  }
+
+  console.log(chalk.bold.white('\nDetected changes:'))
+
+  if (localChanges.length) {
+    const localChangesByType = localChanges.reduce((acc, [type]) => {
+      acc[type] = (acc[type] || 0) + 1
+      return acc
+    }, {})
+    console.log(chalk.cyan('\nLocal changes:'))
+    Object.entries(localChangesByType).forEach(([type, count]) => {
+      console.log(chalk.gray(`- ${type}: ${chalk.cyan(count)} changes`))
+    })
+  }
+
+  if (remoteChanges.length) {
+    const remoteChangesByType = remoteChanges.reduce((acc, [type]) => {
+      acc[type] = (acc[type] || 0) + 1
+      return acc
+    }, {})
+    console.log(chalk.cyan('\nRemote changes:'))
+    Object.entries(remoteChangesByType).forEach(([type, count]) => {
+      console.log(chalk.gray(`- ${type}: ${chalk.cyan(count)} changes`))
+    })
+  }
+
+  const { view } = await inquirer.prompt([{
+    type: 'confirm',
+    name: 'view',
+    message: 'View full list of changes?',
+    default: false
+  }])
+  if (view) {
+    const diffs = []
+    if (localChanges.length) {
+      diffs.push(chalk.bold('\nLocal changes:\n'))
+      diffs.push(...buildDiffsFromChanges(localChanges, base, local))
+    }
+    if (remoteChanges.length) {
+      diffs.push(chalk.bold('\nRemote changes:\n'))
+      diffs.push(...buildDiffsFromChanges(remoteChanges, base, remote))
+    }
+    await showDiffPager(diffs)
+  }
+
+  const { proceed } = await inquirer.prompt([{
+    type: 'confirm',
+    name: 'proceed',
+    message: 'Proceed with sync?',
+    default: false
+  }])
+
+  return proceed
+}
+
+export async function syncProjectChanges(options) {
+  const credManager = new CredentialManager()
+  const authToken = credManager.ensureAuthToken()
+
+  if (!authToken) {
+    showAuthRequiredMessages()
+    process.exit(1)
+  }
+
+  try {
+    // Load configuration
+    const symbolsConfig = await loadSymbolsConfig()
+    const cliConfig = loadCliConfig()
+    const lock = readLock()
+    const { projectPath } = getConfigPaths()
+    const { key: legacyKey } = symbolsConfig
+    const appKey = cliConfig.projectKey || legacyKey
+    const localBranch = cliConfig.branch || symbolsConfig.branch || 'main'
+
+    if (options.verbose) {
+      console.log(chalk.dim('\nSync configuration:'))
+      console.log(chalk.gray(`App Key: ${chalk.cyan(appKey)}`))
+      console.log(chalk.gray(`Current version: ${chalk.cyan(lock.version || 'unknown')}`))
+      console.log(chalk.gray(`Branch: ${chalk.cyan(localBranch)}`))
+      console.log(chalk.gray(`Environment: ${chalk.cyan(options.dev ? 'Development' : 'Production')}\n`))
+    } else {
+      console.log(chalk.dim('\nSyncing project...'))
+    }
+
+    // Build and load local project
+    console.log(chalk.dim('Building local project...'))
+    let localProject
+    try {
+      localProject = await buildLocalProject()
+      console.log(chalk.gray('Local project built successfully'))
+    } catch (buildError) {
+      showBuildErrorMessages(buildError)
+      process.exit(1)
+    }
+
+    // Load base snapshot (last pulled)
+    const baseSnapshot = (() => {
+      try {
+        const raw = fs.readFileSync(projectPath, 'utf8')
+        return JSON.parse(raw)
+      } catch (_) {
+        return {}
+      }
+    })()
+
+    // Get latest server data (ignore ETag to ensure latest)
+    console.log(chalk.dim('Fetching server data...'))
+    const serverResp = await getCurrentProjectData(
+      { projectKey: appKey, projectId: lock.projectId },
+      authToken,
+      { branch: localBranch, includePending: true }
+    )
+    const serverProject = serverResp.data || {}
+    console.log(chalk.gray('Server data fetched successfully'))
+
+    // Generate coarse local and remote changes via simple three-way rebase
+    const base = normalizeKeys(baseSnapshot || {})
+    const local = normalizeKeys(localProject || {})
+    const remote = normalizeKeys(serverProject || {})
+    const { ours, theirs, conflicts, finalChanges } = threeWayRebase(base, local, remote)
+
+    const localChanges = ours
+    const remoteChanges = theirs
+
+    if (!localChanges.length && !remoteChanges.length) {
+      console.log(chalk.bold.green('\nProject is already in sync'))
       return
     }
 
-    // if (rc) return false /// /////////////////////
-
-    await rc.then(symbolsrc => {
-      const options = { ...symbolsrc, ...opts }
-      const { framework, distDir, prettify, verboseCode } = options
-      const key = options.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(
-            '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: debounce(async (event, data) => {
-          if (event === 'clients') {
-            console.log(
-              'Active clients:',
-              chalk.green.bold(Object.keys(data).join(', '))
-            )
-            return
-          }
-
-          const parseData = JSON.parse(data)
-          const d = parseData && parseData.DATA
-
-          if (!d) return
-
-          if (Object.keys(d).length) {
-            console.log(chalk.dim('\n----------------\n'))
-            console.log(chalk.dim('Received update:'))
-            console.log(Object.keys(d).join(', '))
-            if (verboseCode)
-              console.log(chalk.dim(JSON.stringify(d, null, prettify ?? 2)))
-
-            if (distDir) {
-              if (fetchOpt) {
-                await fetchFromCli(options)
-                console.log(chalk.dim('\n----------------\n'))
-                return
-              }
-            } else {
-              updateDynamycFile(d, { framework, ...options })
-            }
-          }
-
-          if (d.components && convertOpt && framework) {
-            convertFromCli(d.components, {
-              ...options,
-              framework
-            })
-          }
-        }, 1500),
-        onError: (err, socket) => {
-          console.log(chalk.bold.green('Error during connection'))
-          if (verbose) console.error(err)
-          else console.log(debugMsg)
-        },
-        ...options
+    // Show change summaries
+    if (localChanges.length) {
+      const byType = localChanges.reduce((acc, [t]) => ((acc[t] = (acc[t] || 0) + 1), acc), {})
+      console.log(chalk.cyan('\nLocal changes:'))
+      Object.entries(byType).forEach(([type, count]) => {
+        console.log(chalk.gray(`- ${type}: ${chalk.cyan(count)} changes`))
+      })
+    }
+    if (remoteChanges.length) {
+      const byType = remoteChanges.reduce((acc, [t]) => ((acc[t] = (acc[t] || 0) + 1), acc), {})
+      console.log(chalk.cyan('\nRemote changes:'))
+      Object.entries(byType).forEach(([type, count]) => {
+        console.log(chalk.gray(`- ${type}: ${chalk.cyan(count)} changes`))
       })
+    }
+
+    // Handle conflicts if any
+    let toApply = finalChanges && finalChanges.length ? finalChanges : [...localChanges]
+    if (conflicts.length) {
+      console.log(chalk.yellow(`\nFound ${conflicts.length} conflicts`))
+      const chosen = await resolveTopLevelConflicts(conflicts, ours, theirs)
+      // Combine non-conflicting ours with chosen resolutions
+      const nonConflictOurs = ours.filter(([_, [k]]) => !conflicts.includes(k))
+      toApply = [...nonConflictOurs, ...chosen]
+    }
+
+    // Confirm sync
+    const shouldProceed = await confirmChanges(localChanges, remoteChanges, base, local, remote)
+    if (!shouldProceed) {
+      console.log(chalk.yellow('Sync cancelled'))
+      return
+    }
+
+    // Update server
+    console.log(chalk.dim('\nUpdating server...'))
+    const projectId = lock.projectId || serverProject?.projectInfo?.id
+    if (!projectId) {
+      console.log(chalk.red('Unable to resolve projectId. Please fetch first to initialize lock.'))
+      process.exit(1)
+    }
+    const operationId = `cli-${Date.now()}`
+    // Expand into granular changes against remote/server state, compute orders from local
+    const { granularChanges } = preprocessChanges(remote, toApply)
+    const orders = computeOrdersForTuples(local, granularChanges)
+    const result = await postProjectChanges(projectId, authToken, {
+      branch: localBranch,
+      type: options.type || 'patch',
+      operationId,
+      changes: toApply,
+      granularChanges,
+      orders
     })
-  })
+    const { id: versionId, value: version } = result.noOp ? {} : (result.data || {})
+
+    // Update symbols.json with new version
+    if (version) {
+      updateLegacySymbolsJson({ ...(symbolsConfig || {}), version, branch: localBranch, versionId })
+    }
+
+    // Get latest project data after sync
+    console.log(chalk.dim('Fetching latest project data...'))
+    const updated = await getCurrentProjectData(
+      { projectKey: appKey, projectId },
+      authToken,
+      { branch: localBranch, includePending: true }
+    )
+    const updatedServerData = updated?.data || {}
+
+    // Apply changes to local files
+    console.log(chalk.dim('Updating local files...'))
+    await createFs(updatedServerData, distDir, { update: true, metadata: false })
+    console.log(chalk.gray('Local files updated successfully'))
+
+    console.log(chalk.bold.green('\nProject synced successfully!'))
+    console.log(chalk.gray(`New version: ${chalk.cyan(version)}`))
+
+    // Update lock and base snapshot
+    writeLock({
+      etag: updated.etag || null,
+      version: version || (lock.version || null),
+      branch: localBranch,
+      projectId,
+      pulledAt: new Date().toISOString()
+    })
+    try {
+      const { projectPath } = getConfigPaths()
+      await fs.promises.writeFile(projectPath, JSON.stringify(updatedServerData, null, 2))
+    } catch (_) {}
+
+  } catch (error) {
+    console.error(chalk.bold.red('\nSync failed:'), chalk.white(error.message))
+    if (options.verbose && error.stack) {
+      console.error(chalk.dim('\nStack trace:'))
+      console.error(chalk.gray(error.stack))
+    }
+    process.exit(1)
+  }
+}
+
+program
+  .command('sync')
+  .description('Sync local changes with remote server')
+  .option('-m, --message <message>', 'Specify a commit message')
+  .option('-d, --dev', 'Run against local server')
+  .option('-v, --verbose', 'Show verbose output')
+  .action(syncProjectChanges)

package/helpers/apiUtils.js

@@ -1,73 +1,75 @@
 import { getApiUrl } from './config.js'
-import { ALLOWED_FIELDS } from './compareUtils.js'
 
-export async function getServerProjectData (appKey, authToken) {
-  try {
-    const response = await fetch(`${getApiUrl()}/get/`, {
-      method: 'GET',
-      headers: {
-        'X-AppKey': appKey,
-        Authorization: `Bearer ${authToken}`
-      }
-    })
-
-    const data = await response.json()
-
-    if (!response.ok) {
-      const error = new Error(`Failed to fetch server data: ${response.statusText}`)
-      error.response = {
-        status: response.status,
-        data
-      }
-      throw error
-    }
-
-    // Check if response is empty object
-    if (data && Object.keys(data).length === 0) {
-      const error = new Error('Project not found')
-      error.response = {
-        status: 404,
-        data
-      }
-      throw error
-    }
-
-    return data
-  } catch (error) {
-    if (!error.response) {
-      error.response = {
-        status: 500,
-        data: {}
-      }
-    }
-    throw error
+// New API (adds ETag and new endpoints)
+function buildProjectDataUrl({ projectKey, projectId, branch, includePending = true, version }) {
+  const base = getApiUrl()
+  let url
+  if (projectId) {
+    url = new URL(`${base}/core/projects/${encodeURIComponent(projectId)}/data`)
+  } else if (projectKey) {
+    url = new URL(`${base}/core/projects/key/${encodeURIComponent(projectKey)}/data`)
+  } else {
+    throw new Error('Missing project identifier (projectId or projectKey)')
   }
+  if (branch) url.searchParams.set('branch', branch)
+  if (includePending !== undefined) url.searchParams.set('includePending', includePending ? 'true' : 'false')
+  if (version) url.searchParams.set('version', version)
+  return url.toString()
 }
 
-export async function updateProjectOnServer (appKey, authToken, changes, projectData) {
-  // Validate changes before sending
-  const validChanges = changes.filter(([type, path]) => {
-    const normalizedPath = path[0].toLowerCase()
-    return ALLOWED_FIELDS.includes(normalizedPath)
-  })
+export async function getCurrentProjectData(project, authToken, opts = {}) {
+  const { branch, includePending = true, etag, version } = opts
+  const url = buildProjectDataUrl({ projectKey: project.projectKey, projectId: project.projectId, branch, includePending, version })
+  const headers = {
+    'Authorization': `Bearer ${authToken}`
+  }
+  if (etag) headers['If-None-Match'] = etag
+  const response = await fetch(url, { method: 'GET', headers })
+  if (response.status === 304) {
+    return { notModified: true, etag: etag }
+  }
+  if (!response.ok) {
+    const data = await safeJson(response)
+    const err = new Error(data?.message || `Failed to fetch project data (${response.status})`)
+    err.response = { status: response.status, data }
+    throw err
+  }
+  const json = await response.json()
+  return {
+    notModified: false,
+    etag: response.headers.get('ETag') || response.headers.get('Etag') || null,
+    data: json?.data || json
+  }
+}
 
-  const response = await fetch(`${getApiUrl()}/auth/project/update`, {
+export async function postProjectChanges(projectId, authToken, body) {
+  const base = getApiUrl()
+  const url = `${base}/core/projects/${encodeURIComponent(projectId)}/changes`
+  const response = await fetch(url, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
-      Authorization: `Bearer ${authToken}`
+      'Authorization': `Bearer ${authToken}`
     },
-    body: JSON.stringify({
-      appKey,
-      changes: validChanges,
-      projectUpdates: projectData
-    })
+    body: JSON.stringify(body)
   })
-
+  if (response.status === 204) {
+    return { noOp: true }
+  }
   if (!response.ok) {
-    const error = await response.json()
-    throw new Error(error.error || 'Failed to update project')
+    const data = await safeJson(response)
+    const err = new Error(data?.message || `Failed to post changes (${response.status})`)
+    err.response = { status: response.status, data }
+    throw err
   }
+  const json = await response.json()
+  return { noOp: false, data: json?.data || json }
+}
 
-  return response
+async function safeJson(res) {
+  try {
+    return await res.json()
+  } catch (_) {
+    return null
+  }
 }

package/helpers/buildMessages.js

@@ -0,0 +1,76 @@
+import chalk from 'chalk'
+
+const CREATE_PROJECT_URL = 'https://symbols.app/create'
+
+export const showAuthRequiredMessages = () => {
+  console.log('\n' + chalk.yellow('⚠️  Authentication Required'))
+  console.log(chalk.white('\nTo access Symbols resources, please log in first:'))
+  console.log(chalk.cyan('\n  smbls login'))
+
+  console.log('\nNeed help?')
+  console.log(chalk.dim('• Make sure you have a Symbols account'))
+  console.log(chalk.dim('• Visit https://symbols.app/docs/cli for more information'))
+  console.log(chalk.dim('• Contact support@symbols.app if you continue having issues\n'))
+}
+
+export const showProjectNotFoundMessages = (appKey) => {
+  console.error(chalk.bold.red('\nProject not found or access denied.'))
+  console.error(chalk.bold.yellow('\nPossible reasons:'))
+  console.error(chalk.gray('1. The project does not exist'))
+  console.error(chalk.gray("2. You don't have access to this project"))
+  console.error(chalk.gray('3. The app key in symbols.json might be incorrect'))
+
+  console.error(chalk.bold.yellow('\nTo resolve this:'))
+  console.error(chalk.white(
+    `1. Visit ${chalk.cyan.underline(
+      CREATE_PROJECT_URL
+      )} to create a new project`
+  ))
+  console.error(chalk.white(
+    '2. After creating the project, update your symbols.json with the correct information:'
+  ))
+  console.error(chalk.gray(`   - Verify the app key: ${chalk.cyan(appKey)}`))
+  console.error(chalk.gray('   - Make sure you have the correct permissions'))
+
+  console.error(chalk.bold.yellow('\nThen try again:'))
+  console.error(chalk.cyan('$ smbls push'))
+}
+
+export function showBuildErrorMessages(error) {
+  console.log(chalk.bold.red('\nBuild Failed ❌'))
+  console.log(chalk.white('\nError details:'))
+  console.log(chalk.yellow(error.message))
+
+  // Extract useful information from the error
+  const errorLocation = error.errors?.[0]?.location || {}
+  if (errorLocation.file) {
+    console.log(chalk.white('\nError location:'))
+    console.log(chalk.gray(`File: ${chalk.cyan(errorLocation.file)}`))
+    if (errorLocation.line) {
+      console.log(chalk.gray(`Line: ${chalk.cyan(errorLocation.line)}`))
+    }
+  }
+
+  console.log(chalk.white('\nPossible solutions:'))
+
+  // Common build issues and their solutions
+  if (error.message.includes('instanceof')) {
+    console.log(chalk.gray('• Check if you are using browser-specific APIs in Node.js environment'))
+    console.log(chalk.gray('  Consider using conditional checks: typeof window !== "undefined"'))
+  }
+  if (error.message.includes('Could not resolve')) {
+    console.log(chalk.gray('• Verify all dependencies are installed: npm install'))
+    console.log(chalk.gray('• Check import/require paths are correct'))
+  }
+  if (error.message.includes('Unexpected token')) {
+    console.log(chalk.gray('• Ensure the code syntax is compatible with the target environment'))
+    console.log(chalk.gray('• Check for syntax errors in the indicated file'))
+  }
+
+  console.log(chalk.white('\nNext steps:'))
+  console.log(chalk.gray('1. Fix the build errors in your local project'))
+  console.log(chalk.gray('2. Ensure all dependencies are properly installed'))
+  console.log(chalk.gray('3. Run the command again'))
+
+  console.log(chalk.gray('\nFor more help, please check the documentation or report this issue on GitHub'))
+}