unframer 4.1.8 → 4.2.0

package/src/cli.ts

@@ -8,7 +8,6 @@ import './sentry.js'
 import { input, select, password } from '@inquirer/prompts'
 
 import { bundle, StyleToken, createExampleComponentCode } from './exporter.js'
-import { createClient } from './generated/api-client.js'
 import { generateStackblitzFiles } from './stackblitz.js'
 
 import { goke, wrapJsonSchema } from 'goke'
@@ -17,11 +16,12 @@ import { promisify } from 'util'
 
 import fs from 'fs'
 import path, { basename } from 'path'
-import { BreakpointSizes, defaultBreakpointSizes } from './css.js'
+import { BreakpointSizes, defaultBreakpointSizes } from './css-core.js'
 import {
     componentNameToPath,
     dedent,
     isTruthy,
+    kebabCase,
     logger,
     sleep,
     spinner,
@@ -43,7 +43,7 @@ export const cli = goke('unframer')
 
 let defaultOutDir = 'framer'
 
-cli.command('[projectId]', 'Run unframer with optional project ID')
+cli.command('[...projectIds]', 'Run unframer with one or more project IDs')
     .option('--outDir <dir>', 'Output directory')
     .option(
         '--external [package]',
@@ -53,7 +53,7 @@ cli.command('[projectId]', 'Run unframer with optional project ID')
     .option('--jsx', 'Output jsx code instead of minified .js code')
     .option('--debug', 'Enable debug logging')
     .option('--metafile', 'Generate meta.json file with build metadata')
-    .action(async function main(projectId, options) {
+    .action(async function main(projectIds, options) {
         const outDir = options.outDir || defaultOutDir
         const jsx = options.jsx ?? true
         const external_ = options.external
@@ -69,17 +69,35 @@ cli.command('[projectId]', 'Run unframer with optional project ID')
             const controller = new AbortController()
             const signal = controller.signal
             const watch = options.watch
-            if (projectId) {
-                const { config, cwd, websiteUrl } = await configFromFetch({
-                    allExternal,
-                    externalPackages,
-                    outDir,
-                    projectId,
-                })
+            if (projectIds.length > 0) {
+                if (watch && projectIds.length > 1) {
+                    console.error('--watch is only supported with a single project ID')
+                    process.exit(1)
+                }
+
+                // Fetch configs for all project IDs
+                const fetchResults = await Promise.all(
+                    projectIds.map((projectId) => {
+                        return configFromFetch({
+                            allExternal,
+                            externalPackages,
+                            outDir,
+                            projectId,
+                        })
+                    }),
+                )
+
+                // Merge configs when multiple projects are provided, otherwise use single config directly
+                const mergedConfig = fetchResults.length === 1
+                    ? fetchResults[0].config
+                    : mergeConfigs(fetchResults.map((r) => r.config))
+                const cwd = fetchResults[0].cwd
+                const websiteUrl = fetchResults[0].websiteUrl
+
                 const { rebuild, buildContext } = await bundle({
                     config: {
                         jsx,
-                        ...config,
+                        ...mergedConfig,
                     },
                     watch,
                     cwd,
@@ -420,14 +438,15 @@ const hasMcpCommand = cliArgs.includes('mcp')
 const hasProjectOption = cliArgs.some((arg) => {
     return arg === '--project' || arg.startsWith('--project=')
 })
-const shouldUseServerApiForProjectOption = hasMcpCommand && hasProjectOption
-const mcpMode = shouldUseServerApiForProjectOption
+const hasMcpEvalCommand = hasMcpCommand && cliArgs.includes('eval')
+const hasServerApiEnv = Boolean(process.env.FRAMER_PROJECT_URL || process.env.FRAMER_API_KEY)
+const shouldUseServerApi = hasMcpCommand && (hasProjectOption || hasMcpEvalCommand || hasServerApiEnv)
+const mcpMode = shouldUseServerApi
     ? 'server-api'
     : config.mode || (config.mcpUrl ? 'plugin' : undefined)
 
 if (mcpMode === 'server-api') {
     // Server API mode - use framer-api directly
-    // Commands are registered via registerServerApiCommands below
     await registerServerApiCommands()
 } else {
     // Plugin mode - use MCP transport
@@ -468,9 +487,112 @@ async function registerServerApiCommands() {
     // Dynamic import to avoid loading framer-api in plugin mode
     const { connect } = await import('framer-api')
 
+    // `mcp eval` — run arbitrary framer-api code against a project.
+    // Useful for testing API calls before implementing them in MCP tools.
+    // The `framer` client is available as a local variable inside the evaluated code.
+    cli.command('mcp eval [code]', 'Evaluate arbitrary framer-api code against a project')
+        .option(
+            '--project <url>',
+            'Framer project URL. Also reads FRAMER_PROJECT_URL env var.',
+        )
+        .action(async (code: string | undefined, options: { project?: string }) => {
+            // Read code from argument or stdin
+            let evalCode = code
+            if (!evalCode && !process.stdin.isTTY) {
+                const chunks: Buffer[] = []
+                for await (const chunk of process.stdin) {
+                    chunks.push(chunk)
+                }
+                evalCode = Buffer.concat(chunks).toString('utf-8').trim()
+            }
+            if (!evalCode) {
+                console.error('No code provided. Pass as argument or pipe via stdin.')
+                process.exit(1)
+            }
+
+            const projectUrl =
+                options.project ||
+                process.env.FRAMER_PROJECT_URL ||
+                loadConfig().framerProjectUrl
+            const apiKey =
+                process.env.FRAMER_API_KEY || loadConfig().framerApiKey
+
+            if (!projectUrl) {
+                console.error('Project URL required. Use --project option, FRAMER_PROJECT_URL env var, or set during login.')
+                process.exit(1)
+            }
+            if (!apiKey) {
+                console.error('API key required. Set FRAMER_API_KEY env var or run `unframer mcp login` first.')
+                process.exit(1)
+            }
+
+            let framerClient: Awaited<ReturnType<typeof connect>> | undefined
+            let actionError: unknown
+
+            try {
+                spinner.start('Connecting to Framer...')
+                framerClient = await connect(projectUrl, apiKey)
+                spinner.stop('Connected')
+
+                // Build an async function body. If the code is a single expression
+                // (no semicolons and no newlines), wrap it as a return so the result is captured.
+                const isExpression = !evalCode.includes(';') && !evalCode.includes('\n')
+                const functionBody = isExpression
+                    ? `return (${evalCode})`
+                    : evalCode
+
+                const AsyncFunction = Object.getPrototypeOf(async function () {}).constructor as
+                    new (arg: string, body: string) => (framer: unknown) => Promise<unknown>
+                const fn = new AsyncFunction('framer', functionBody)
+                const result = await fn(framerClient)
+
+                if (result !== undefined) {
+                    const output = (() => {
+                        try {
+                            return JSON.stringify(result, null, 2)
+                        } catch {
+                            return String(result)
+                        }
+                    })()
+                    console.log(output)
+                }
+            } catch (error) {
+                actionError = error
+            } finally {
+                if (framerClient) {
+                    try {
+                        await framerClient.disconnect()
+                    } catch (disconnectError) {
+                        logger.error('Failed disconnecting from Framer:', disconnectError)
+                    }
+                }
+            }
+
+            if (actionError) {
+                console.error('Eval failed:', actionError instanceof Error ? actionError.message : actionError)
+                if (actionError instanceof Error && actionError.stack) {
+                    console.error(actionError.stack)
+                }
+                process.exit(1)
+            }
+        })
+
     // Import tool definitions and handler from plugin-mcp
     // Note: Run `pnpm --filter plugin-mcp build && pnpm --filter plugin-mcp gen-unframer` first
-    const { mcpTools, mcpToolHandler } = await import('./plugin-mcp-dist/lib/mcp-handlers.js')
+    let mcpTools: Awaited<typeof import('./plugin-mcp-dist/lib/mcp-handlers.js')>['mcpTools'] | undefined
+    let mcpToolHandler: Awaited<typeof import('./plugin-mcp-dist/lib/mcp-handlers.js')>['mcpToolHandler'] | undefined
+    try {
+        const imported = await import('./plugin-mcp-dist/lib/mcp-handlers.js')
+        mcpTools = imported.mcpTools
+        mcpToolHandler = imported.mcpToolHandler
+    } catch (error) {
+        if (hasMcpEvalCommand) {
+            // eval command only needs framer-api, not plugin-mcp handlers
+            logger.log('Could not load plugin-mcp handlers:', error instanceof Error ? error.message : error)
+        } else {
+            throw new Error('Failed to load plugin-mcp handlers. Run: pnpm --filter plugin-mcp tsc --incremental && pnpm --filter plugin-mcp gen-unframer', { cause: error })
+        }
+    }
     if (!mcpTools || !mcpToolHandler) {
         return
     }
@@ -614,6 +736,7 @@ async function registerServerApiCommands() {
             }
         })
     }
+
 }
 
 export type Config = {
@@ -663,6 +786,133 @@ type ComponentInstanceInPage = {
     webPageId: string
 }
 
+/**
+ * Merge multiple project configs into a single Config so esbuild bundles all
+ * components together and deduplicates shared chunks automatically.
+ *
+ * - Components maps are merged; on name collision the second project's component
+ *   is prefixed with the project name to disambiguate.
+ * - First project's projectId/projectName/fullFramerProjectId are used as the
+ *   primary identifiers (framerSiteId in ContextProviders).
+ * - Arrays (componentBreakpoints, tokens, locales, framerWebPages, etc.) are concatenated.
+ */
+function mergeConfigs(configs: Config[]): Config {
+    if (configs.length === 0) {
+        throw new Error('mergeConfigs called with empty array')
+    }
+    if (configs.length === 1) {
+        return configs[0]
+    }
+
+    const first = configs[0]
+
+    // Merge components maps, disambiguating name collisions.
+    // Track rename maps per config so we can update breakpoints and instances.
+    const mergedComponents: Record<string, string> = {}
+    const renameMaps: Map<string, string>[] = []
+
+    for (const config of configs) {
+        const projectSlug = kebabCase(config.projectName || config.projectId || '')
+        const renameMap = new Map<string, string>()
+        renameMaps.push(renameMap)
+
+        for (const [name, url] of Object.entries(config.components)) {
+            if (mergedComponents[name]) {
+                // Name collision: prefix with project slug, ensure uniqueness with numeric suffix
+                const base = projectSlug ? `${projectSlug}/${name}` : `${config.projectId}/${name}`
+                const disambiguated = uniqueComponentName(base, mergedComponents)
+                logger.log(`Component name collision for "${name}", renaming to "${disambiguated}"`)
+                renameMap.set(name, disambiguated)
+                mergedComponents[disambiguated] = url
+            } else {
+                mergedComponents[name] = url
+            }
+        }
+    }
+
+    // Merge componentBreakpoints, updating componentName for any renamed components
+    const mergedBreakpoints = configs.flatMap((config, i) => {
+        const renameMap = renameMaps[i]
+        return (config.componentBreakpoints || []).map((bp) => {
+            const renamed = renameMap.get(bp.componentName)
+            if (renamed) {
+                return { ...bp, componentName: renamed }
+            }
+            return bp
+        })
+    })
+
+    // Merge tokens, deduplicate by id (keep first occurrence)
+    const seenTokenIds = new Set<string>()
+    const mergedTokens = configs.flatMap((config) => {
+        return (config.tokens || []).filter((token) => {
+            if (seenTokenIds.has(token.id)) {
+                return false
+            }
+            seenTokenIds.add(token.id)
+            return true
+        })
+    })
+
+    // Merge locales, deduplicate by code
+    const seenLocaleCodes = new Set<string>()
+    const mergedLocales = configs.flatMap((config) => {
+        return (config.locales || []).filter((locale) => {
+            if (seenLocaleCodes.has(locale.code)) {
+                return false
+            }
+            seenLocaleCodes.add(locale.code)
+            return true
+        })
+    })
+
+    // Merge framerWebPages
+    const mergedWebPages = configs.flatMap((config) => {
+        return config.framerWebPages || []
+    })
+
+    // Merge componentInstancesInIndexPage, updating componentPathSlug for renamed components
+    const mergedInstances = configs.flatMap((config, i) => {
+        const renameMap = renameMaps[i]
+        return (config.componentInstancesInIndexPage || []).map((instance) => {
+            const renamed = renameMap.get(instance.componentPathSlug)
+            if (renamed) {
+                return { ...instance, componentPathSlug: renamed }
+            }
+            return instance
+        })
+    }).sort((a, b) => {
+        return a.pageOrdering - b.pageOrdering
+    })
+
+    const projectNames = configs
+        .map((c) => c.projectName)
+        .filter(isTruthy)
+    spinner.info(`Merging ${configs.length} projects: ${projectNames.join(', ')}`)
+
+    return {
+        ...first,
+        components: mergedComponents,
+        componentBreakpoints: mergedBreakpoints,
+        tokens: mergedTokens,
+        locales: mergedLocales,
+        framerWebPages: mergedWebPages,
+        componentInstancesInIndexPage: mergedInstances,
+    }
+}
+
+/** Generate a unique component name by appending a numeric suffix if the base already exists */
+function uniqueComponentName(base: string, existing: Record<string, string>): string {
+    if (!existing[base]) {
+        return base
+    }
+    let index = 2
+    while (existing[`${base}-${index}`]) {
+        index++
+    }
+    return `${base}-${index}`
+}
+
 export async function configFromFetch({
     projectId,
     externalPackages = [] as string[],
@@ -672,38 +922,41 @@ export async function configFromFetch({
 }) {
     logger.log(`Fetching config for project ${projectId}`)
 
-    const url = process.env.UNFRAMER_SERVER_URL
-    if (url) {
-        console.log(`using server url ${url}`)
+    const baseUrl = (
+        process.env.UNFRAMER_SERVER_URL || 'https://unframer.co'
+    ).replace(/\/$/, '')
+    if (process.env.UNFRAMER_SERVER_URL) {
+        console.log(`using server url ${baseUrl}`)
     }
-    const client = await createClient({
-        url: url || 'https://unframer.co',
-        headers: {
-            'X-Agent':
-                agent ||
-                (process.env.GITHUB_ACTIONS === 'true'
-                    ? 'github-actions'
-                    : 'cli'),
-        },
-    })
 
     spinner.start(`Fetching config for project ${projectId}`)
-    const { data, error } = await client.api.plugins.reactExportPlugin
-        .project({ projectId })
-        .get()
-    if (error) {
-        if (error.status === 402) {
-            const rawValue = error.value
-            const buyUrl = rawValue?.buyUrl
+    const agentHeader =
+        agent ||
+        (process.env.GITHUB_ACTIONS === 'true' ? 'github-actions' : 'cli')
+    const response = await fetch(
+        `${baseUrl}/api/plugins/reactExportPlugin/project/${encodeURIComponent(projectId)}`,
+        { headers: { 'X-Agent': agentHeader } },
+    )
+    const text = await response.text()
+    const parsed = (() => {
+        try {
+            return JSON.parse(text)
+        } catch {
+            return text
+        }
+    })()
+
+    if (!response.ok) {
+        if (response.status === 402) {
+            const buyUrl = parsed?.buyUrl
 
             const message = (() => {
-                if (typeof rawValue === 'object' && rawValue?.message) {
-                    return String(rawValue.message)
+                if (typeof parsed === 'object' && parsed?.message) {
+                    return String(parsed.message)
                 }
                 return 'A React Export subscription is required to download components.'
             })()
 
-            // spinner.error(details)
             spinner.error(message)
             console.info('')
             console.info(
@@ -712,12 +965,12 @@ export async function configFromFetch({
             console.info(green(buyUrl))
             console.info()
             process.exit(1)
-            // throw new Error(details, { cause: error })
         }
         spinner.error('Error fetching project data:')
-        console.error(error)
-        throw error
+        console.error(parsed)
+        throw new Error(`HTTP ${response.status}`, { cause: parsed })
     }
+    const data = parsed
     spinner.info(`Got Framer project data`)
     const websiteUrl = data?.project?.websiteUrl