unframer 2.6.6 → 2.7.1

package/esm/utils.d.ts

@@ -1,3 +1,5 @@
+export declare const spinner: any;
+export declare function terminalMarkdown(markdown: string): string | Promise<string>;
 export declare const logger: {
     log(...args: any[]): void;
     green(...args: any[]): void;

package/esm/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM;;;;CAUlB,CAAA"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,OAAO,EAAqD,GAAG,CAAA;AAI5E,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,4BAEhD;AAKD,eAAO,MAAM,MAAM;;;;CAalB,CAAA"}

package/esm/utils.js

@@ -1,7 +1,19 @@
 import pico from 'picocolors';
+import { marked } from 'marked';
+import { markedTerminal } from 'marked-terminal';
+import { createSpinner } from 'nanospinner';
+export const spinner = createSpinner('Downloading Framer Components');
+marked.use(markedTerminal());
+export function terminalMarkdown(markdown) {
+    return marked(markdown);
+}
+const shouldDebugUnframer = !!process.env.DEBUG_UNFRAMER;
 const prefix = '[unframer]';
 export const logger = {
     log(...args) {
+        if (!shouldDebugUnframer) {
+            return;
+        }
         console.log(prefix, ...args);
     },
     green(...args) {

package/esm/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,YAAY,CAAA;AAE7B,MAAM,MAAM,GAAG,YAAY,CAAA;AAC3B,MAAM,CAAC,MAAM,MAAM,GAAG;IAClB,GAAG,CAAC,GAAG,IAAI;QACP,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAA;IAChC,CAAC;IACD,KAAK,CAAC,GAAG,IAAI;QACT,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAA;IACtE,CAAC;IACD,KAAK,CAAC,GAAG,IAAI;QACT,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAA;IACtE,CAAC;CACJ,CAAA"}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,YAAY,CAAA;AAE7B,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAE3C,MAAM,CAAC,MAAM,OAAO,GAAG,aAAa,CAAC,+BAA+B,CAAQ,CAAA;AAE5E,MAAM,CAAC,GAAG,CAAC,cAAc,EAAE,CAAC,CAAA;AAE5B,MAAM,UAAU,gBAAgB,CAAC,QAAgB;IAC7C,OAAO,MAAM,CAAC,QAAQ,CAAC,CAAA;AAC3B,CAAC;AAED,MAAM,mBAAmB,GAAG,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,cAAc,CAAA;AAExD,MAAM,MAAM,GAAG,YAAY,CAAA;AAC3B,MAAM,CAAC,MAAM,MAAM,GAAG;IAClB,GAAG,CAAC,GAAG,IAAI;QACP,IAAI,CAAC,mBAAmB,EAAE,CAAC;YACvB,OAAM;QACV,CAAC;QACD,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAA;IAChC,CAAC;IACD,KAAK,CAAC,GAAG,IAAI;QACT,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAA;IACtE,CAAC;IACD,KAAK,CAAC,GAAG,IAAI;QACT,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAA;IACtE,CAAC;CACJ,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unframer",
-  "version": "2.6.6",
+  "version": "2.7.1",
   "description": "Import Framer components directly in your React app, type safe and customizable",
   "sideEffects": false,
   "repository": "https://github.com/remorses/unframer",
@@ -44,12 +44,15 @@
     "chokidar": "^3.6.0",
     "dedent": "^1.5.3",
     "dprint-node": "^1.0.8",
-    "esbuild": "^0.21.5",
+    "esbuild": "^0.24.0",
     "esbuild-plugin-polyfill-node": "^0.3.0",
     "eventemitter3": "^3.1.2",
     "find-up": "^5.0.0",
     "fs-extra": "^11.2.0",
     "json5": "^2.2.3",
+    "marked": "^15.0.3",
+    "marked-terminal": "^7.2.1",
+    "nanospinner": "^1.2.0",
     "native-fetch": "^4.0.2",
     "picocolors": "^1.0.1",
     "real-framer-motion": "npm:framer-motion@11.2.10",
@@ -69,12 +72,12 @@
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^22.7.4",
     "@types/react": "^18.3.12",
-    "@xmorse/deployment-utils": "^0.2.17",
+    "@xmorse/deployment-utils": "^0.2.18",
     "concurrently": "^8.2.2",
     "openai": "^4.52.7",
     "posthtml": "^0.16.6",
-    "react": "19.0.0-rc-e4953922-20240919",
-    "react-dom": "19.0.0-rc-e4953922-20240919",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "tiktoken": "^1.0.15",
     "typescript": "^5.6.2"
   },

package/src/cli.tsx

@@ -1,85 +1,90 @@
-import { bundle } from './exporter.js'
+import { setMaxListeners } from 'events'
 import JSON from 'json5'
-import events, { EventEmitter, setMaxListeners } from 'events'
+import { bundle, StyleToken } from './exporter.js'
 
-import chokidar from 'chokidar'
-import fs from 'fs-extra'
+import { cac } from 'cac'
 import findUp from 'find-up'
-import tmp from 'tmp'
+import fs from 'fs-extra'
 import path, { basename } from 'path'
-const configNames = ['unframer.config.json', 'unframer.json']
-import { cac } from 'cac'
-import { logger } from './utils.js'
 import { BreakpointSizes } from './css.js'
+import { logger } from './utils.js'
+const configNames = ['unframer.config.json', 'unframer.json']
 
 export const cli = cac('unframer')
 
-cli.command('', 'Run unframer')
-    .option('--watch', 'Watch for Framer and unframer.config.json changes')
-    .action(async function main(options) {
+let defaultOutDir = 'framer'
+
+function nameToFolder(name: string) {
+    return name
+        .replace(/[^a-zA-Z0-9]/g, '-') // Replace non-alphanumeric with dash
+        .replace(/-+/g, '-') // Replace multiple dashes with single dash
+        .replace(/^-|-$/g, '') // Remove leading/trailing dashes
+        .toLowerCase()
+}
+
+cli.command('[projectId]', 'Run unframer with optional project ID')
+    .option('--outDir <dir>', 'Output directory', { default: defaultOutDir })
+    .action(async function main(projectId, options) {
+        const outDir = options.outDir
+        if (projectId) {
+            logger.log(`Fetching config for project ${projectId}`)
+            const response = await fetch(
+                new URL(
+                    `/api/plugins/reactExportPlugin/project/${projectId}`,
+                    process.env.UNFRAMER_SERVER_URL || 'https://unframer.co',
+                ).toString(),
+            )
+            if (!response.ok) {
+                console.error(`Failed to fetch Framer config`)
+                logger.error('Response: ' + (await response.text()))
+                return
+            }
+            const data = await response.json()
+            return processConfig({
+                config: {
+                    outDir,
+                    components: Object.fromEntries(
+                        data.components.map((c) => [
+                            nameToFolder(c.name),
+                            c.url,
+                        ]),
+                    ),
+                    tokens: data.colorStyles,
+                },
+                watch: false,
+
+                configBasename: 'remote config',
+                signal: new AbortController().signal,
+            })
+        }
+
         fixOldUnframerPath()
         const cwd = process.cwd()
-        const watch = process.argv.includes('--watch')
         logger.log(`Looking for ${configNames.join(', ')} in ${cwd}`)
         const configPath = await findUp(configNames, { cwd })
         if (!configPath) {
             logger.log(`No ${configNames.join(', ')} found`)
             return
         }
-        let configBasename = basename(configPath!)
+        const configBasename = basename(configPath!)
         const configContent = fs.readFileSync(configPath, 'utf8')
         if (!configContent) {
             logger.log(`No ${configBasename} contents found`)
             return
         }
-        let config = JSON.parse(configContent)
+        const config = JSON.parse(configContent)
+        if (outDir !== defaultOutDir) {
+            config.outDir = outDir
+        }
 
         let controller = new AbortController()
         setMaxListeners(0, controller.signal)
         processConfig({
             config,
-            watch,
+            watch: false,
             signal: controller.signal,
             configBasename,
         })
-        if (!watch) {
-            return
-        }
-
-        const watcher = chokidar.watch(configPath!, {
-            persistent: true,
-        })
-
-        watcher.on('change', async (path) => {
-            logger.log(`${configBasename} changed`)
-            console.log()
-            controller.abort()
-
-            controller = new AbortController()
-            setMaxListeners(0, controller.signal)
-
-            const newConfig = safeJsonParse(
-                fs.readFileSync(configPath!, 'utf8'),
-            )
-            if (!newConfig) {
-                logger.log(`Invalid ${configBasename} file`)
-                return
-            }
-            const newNames = getNewNames(config, newConfig)
-            if (newNames.length) {
-                logger.log(`New components found: ${newNames.join(', ')}`)
-                await processConfig({
-                    config: {
-                        ...newConfig,
-                        components: pluck(newConfig.components, newNames),
-                    },
-                    watch,
-                    configBasename,
-                    // signal: controller.signal,
-                })
-            }
-            config = newConfig
-        })
     })
 
 const defaultConfig = `{
@@ -105,6 +110,9 @@ function fixOldUnframerPath() {
     }
     return false
 }
+const version = require('../package.json').version
+
+cli.version(version).help()
 
 cli.command('init', 'Init the unframer.config.json config').action(
     async (options) => {
@@ -118,10 +126,6 @@ cli.command('init', 'Init the unframer.config.json config').action(
     },
 )
 
-const version = require('../package.json').version
-
-cli.version(version).help()
-
 function safeJsonParse(json: string) {
     try {
         return JSON.parse(json)
@@ -155,6 +159,7 @@ type Config = {
         [name: string]: string
     }
     breakpoints?: BreakpointSizes
+    tokens?: StyleToken[]
     outDir?: string
 }
 async function processConfig({
@@ -181,6 +186,7 @@ async function processConfig({
             breakpoints,
             cwd: installDir,
             watch,
+            tokens: config.tokens,
             signal,
         })
     } catch (e: any) {

package/src/css.ts

@@ -92,7 +92,7 @@ export function getFontsStyles(_fontsDefs: ComponentFontBundle[]) {
                     str += dedent`
                     @font-face {
                         font-family: '${x.family}'; 
-                        src: url(${x.url});\n`
+                        src: url('${x.url}');\n`
                     if (x.style) {
                         str += `    font-style: ${x.style};\n`
                     }

package/src/esbuild.ts

@@ -1,4 +1,6 @@
 import { logger } from './utils'
+import { createSpinner } from 'nanospinner'
+
 import { Plugin, transform } from 'esbuild'
 
 export const externalPackages = [
@@ -15,7 +17,8 @@ export function esbuildPluginBundleDependencies({
     externalizeNpm = false,
 }) {
     const codeCache = new Map()
-
+    const spinner = createSpinner('Fetching Framer Components Modules')
+    spinner.start()
     const plugin: Plugin = {
         name: 'esbuild-plugin',
         setup(build) {
@@ -90,6 +93,10 @@ export function esbuildPluginBundleDependencies({
             }
             // build.onResolve({ filter: /^\w/ }, resolveDep)
             build.onResolve({ filter: /.*/, namespace }, resolveDep)
+            build.onEnd(() => {
+                spinner.stop()
+            })
+            
             build.onLoad({ filter: /.*/, namespace }, async (args) => {
                 if (signal?.aborted) {
                     throw new Error('aborted')
@@ -111,6 +118,8 @@ export function esbuildPluginBundleDependencies({
                 let loader = 'jsx' as any
                 const promise = Promise.resolve().then(async () => {
                     logger.log('fetching', url.replace(/https?:\/\//, ''))
+                    spinner.update(`Fetching ${url.replace(/https?:\/\//, '')}`)
+                    
                     const res = await fetchWithRetry(resolved, { signal })
                     if (!res.ok) {
                         throw new Error(