unframer 2.6.6 → 2.7.0

package/esm/utils.d.ts

@@ -1,3 +1,4 @@
+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":"AAOA,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,4BAEhD;AAGD,eAAO,MAAM,MAAM;;;;CAUlB,CAAA"}

package/esm/utils.js

@@ -1,4 +1,10 @@
 import pico from 'picocolors';
+import { marked } from 'marked';
+import { markedTerminal } from 'marked-terminal';
+marked.use(markedTerminal());
+export function terminalMarkdown(markdown) {
+    return marked(markdown);
+}
 const prefix = '[unframer]';
 export const logger = {
     log(...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;AAEhD,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,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unframer",
-  "version": "2.6.6",
+  "version": "2.7.0",
   "description": "Import Framer components directly in your React app, type safe and customizable",
   "sideEffects": false,
   "repository": "https://github.com/remorses/unframer",
@@ -44,12 +44,14 @@
     "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",
     "native-fetch": "^4.0.2",
     "picocolors": "^1.0.1",
     "real-framer-motion": "npm:framer-motion@11.2.10",
@@ -69,12 +71,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/exporter.ts

@@ -27,7 +27,7 @@ import {
     logFontsUsage,
 } from './css.js'
 import dedent from 'dedent'
-import { logger } from './utils.js'
+import { logger, terminalMarkdown } from './utils.js'
 import {
     esbuildPluginBundleDependencies,
     resolveRedirect,
@@ -42,10 +42,18 @@ function validateUrl(url: string) {
     }
 }
 
+export type StyleToken = {
+    id: string
+    name?: string
+    lightColor: string
+    darkColor: string
+}
+
 export async function bundle({
     cwd: out = '',
     watch = false,
     components = {} as Record<string, string>,
+    tokens = [] as StyleToken[],
     breakpoints = {} as BreakpointSizes,
     signal = undefined as AbortSignal | undefined,
 }) {
@@ -88,7 +96,7 @@ export async function bundle({
             esbuildPluginBundleDependencies({
                 signal,
             }),
-            polyfillNode({}),
+            polyfillNode({}) as any,
             {
                 name: 'virtual loader',
                 setup(build) {
@@ -143,6 +151,7 @@ export async function bundle({
             let codeNew =
                 `// @ts-nocheck\n` +
                 `/* eslint-disable */\n` +
+                '/* This file was generated by Unframer, do not edit manually */\n' +
                 dprint.format(resultPathAbs, file.text, {
                     lineWidth: 140,
                     quoteStyle: 'alwaysSingle',
@@ -176,9 +185,12 @@ export async function bundle({
             JSON.stringify({ type: 'module' }),
             'utf-8',
         )
+        if (!result?.outputFiles) {
+            throw new Error('Failed to generate result')
+        }
 
         const propControlsData = await Promise.all(
-            result.outputFiles.map(async (file) => {
+            result?.outputFiles.map(async (file) => {
                 try {
                     await sema.acquire()
                     const name = path.basename(file.path).replace(/\.js$/, '')
@@ -217,14 +229,16 @@ export async function bundle({
         ).finally(() => fs.rmSync(packageJson))
 
         const cssString =
+            '/* This file was generated by Unframer, do not edit manually */\n' +
             '/* This css file has all the necessary styles to run all your components */\n' +
+            '\n' +
+            getStyleTokensCss(tokens) +
             breakpointsStyles(breakpoints) +
             '\n\n' +
             combinedCSSRules
                 .map((x) => (x?.startsWith('  ') ? dedent(x) : x))
                 .join('\n') +
             getFontsStyles(allFonts)
-
         fs.writeFileSync(path.resolve(out, 'styles.css'), cssString, 'utf-8')
 
         logFontsUsage(allFonts)
@@ -263,12 +277,17 @@ export async function bundle({
         if (watch) {
             logger.log('waiting for components or config changes')
         }
-
-        const tokensCss =
-            "/* This css file contains your color variables, sometimes these get desynced when updated in Framer so it's good that you copy and paste this snippet into your app css */\n" +
-            '/* Bug: https://www.framer.community/c/bugs/color-style-unlinks-when-copying-component-between-projects-resulting-in-potential-value-discrepancy */\n' +
-            getTokensCss({ out, result })
-        fs.writeFileSync(path.resolve(out, 'tokens.css'), tokensCss, 'utf-8')
+        if (!tokens?.length) {
+            const tokensCss =
+                "/* This css file contains your color variables, sometimes these get desynced when updated in Framer so it's good that you copy and paste this snippet into your app css */\n" +
+                '/* Bug: https://www.framer.community/c/bugs/color-style-unlinks-when-copying-component-between-projects-resulting-in-potential-value-discrepancy */\n' +
+                getTokensCss({ out, result })
+            fs.writeFileSync(
+                path.resolve(out, 'tokens.css'),
+                tokensCss,
+                'utf-8',
+            )
+        }
         const res = {
             components: Object.entries(components).map(([name, v]) => {
                 const propControls = propControlsData.find(
@@ -290,54 +309,158 @@ export async function bundle({
     if (!watch) {
         const result = await rebuild()
         await buildContext.dispose()
+        console.log(
+            terminalMarkdown(dedent`
+        # How to use the Framer components
+
+        The components are exported to the \`framer\` directory (or the directory you specified in the config).
+        Each component has a \`.Responsive\` variant that allows you to specify different variants for different breakpoints.
+        The breakpoints are:
+        - base: 0-319px
+        - sm: 320-767px  
+        - md: 768-959px
+        - lg: 960-1199px
+        - xl: 1200-1535px
+        - 2xl: 1536px+
+
+        You can import the components like this:
+
+        \`\`\`tsx
+        import './framer/styles.css'
+        import Logos from './framer/logos'
+        
+        export default function App() {
+            return (
+                <div>
+                    <Logos.Responsive
+                        variants={{
+                            lg: 'Desktop',
+                            md: 'Tablet',
+                            base: 'Mobile',
+                        }}
+                    />
+                </div>
+            );
+        };
+        \`\`\`
+
+        It's very important to import the \`styles.css\` file to include the necessary styles for the components.
+
+        You can also use the components without the responsive wrapper:
+
+        \`\`\`tsx
+        import './framer/styles.css'
+        import Logos from './framer/logos'
+        
+        export default function App() {
+            return (
+                <div>
+                    <Logos variant="Desktop" />
+                </div>
+            );
+        };
+        \`\`\`
+        `),
+        )
         return result
     }
 
-    // when user press ctrl+c dispose
-    process.on('SIGINT', async () => {
-        await buildContext.cancel()
-        buildContext.dispose()
-    })
-    process.on('SIGABRT', async () => {
-        await buildContext.cancel()
-        buildContext.dispose()
-    })
-    signal?.addEventListener('abort', async () => {
-        await buildContext.cancel()
-        buildContext.dispose()
-    })
+    // // when user press ctrl+c dispose
+    // process.on('SIGINT', async () => {
+    //     await buildContext.cancel()
+    //     buildContext.dispose()
+    // })
+    // process.on('SIGABRT', async () => {
+    //     await buildContext.cancel()
+    //     buildContext.dispose()
+    // })
+    // signal?.addEventListener('abort', async () => {
+    //     await buildContext.cancel()
+    //     buildContext.dispose()
+    // })
+
+    // const res = await rebuild()
+
+    // /**
+    //  * Get resolved URLs for all components and also wait for 1 second if it took less time than that
+    //  */
+    // const getResolvedUrls = () =>
+    //     Promise.all([
+    //         ...Object.values(components).map((u) => {
+    //             const url = new URL(u)
+    //             url.searchParams.set('ts', Date.now().toString())
+    //             return resolveRedirect({ url: url.toString(), signal })
+    //         }),
+    //         new Promise((res) => setTimeout(res, 5000)),
+    //     ])
+    // let prevUrls = await getResolvedUrls()
+    // while (!signal?.aborted) {
+    //     const urls = await getResolvedUrls()
+    //     const changed = urls
+    //         .map((x, i) => (x !== prevUrls[i] ? i : null))
+    //         .filter(Boolean)
+    //     if (!changed?.length) {
+    //         continue
+    //     }
+    //     const changedNames = Object.keys(components).filter((_, i) =>
+    //         changed.includes(i),
+    //     )
+    //     logger.log(`found new component URLs for ${changedNames.join(', ')}`)
+    //     prevUrls = urls
+    //     await rebuild()
+    // }
+    // return res
+}
 
-    const res = await rebuild()
-
-    /**
-     * Get resolved URLs for all components and also wait for 1 second if it took less time than that
-     */
-    const getResolvedUrls = () =>
-        Promise.all([
-            ...Object.values(components).map((u) => {
-                const url = new URL(u)
-                url.searchParams.set('ts', Date.now().toString())
-                return resolveRedirect({ url: url.toString(), signal })
-            }),
-            new Promise((res) => setTimeout(res, 5000)),
-        ])
-    let prevUrls = await getResolvedUrls()
-    while (!signal?.aborted) {
-        const urls = await getResolvedUrls()
-        const changed = urls
-            .map((x, i) => (x !== prevUrls[i] ? i : null))
-            .filter(Boolean)
-        if (!changed?.length) {
-            continue
-        }
-        const changedNames = Object.keys(components).filter((_, i) =>
-            changed.includes(i),
+export function getDarkModeSelector(opts: {
+    darkModeType?: 'class' | 'media'
+    content: string
+}) {
+    const { darkModeType = 'class', content } = opts
+    if (darkModeType === 'media') {
+        return (
+            '@media (prefers-color-scheme: dark) {\n' +
+            '    :root {\n' +
+            content +
+            '\n' +
+            '    }\n' +
+            '}'
         )
-        logger.log(`found new component URLs for ${changedNames.join(', ')}`)
-        prevUrls = urls
-        await rebuild()
     }
-    return res
+    return '.dark:root {\n' + content + '\n' + '}'
+}
+
+export function getStyleTokensCss(
+    tokens: StyleToken[],
+    darkModeType: 'class' | 'media' = 'class',
+) {
+    if (!tokens?.length) {
+        return ''
+    }
+
+    const lightTokens = tokens
+        .map(
+            (token) =>
+                '    --token-' + token.id + ': ' + token.lightColor + ';',
+        )
+        .join('\n')
+
+    const darkTokens = tokens
+        .map(
+            (token) => '    --token-' + token.id + ': ' + token.darkColor + ';',
+        )
+        .join('\n')
+
+    return (
+        ':root {\n' +
+        lightTokens +
+        '\n' +
+        '}\n\n' +
+        getDarkModeSelector({
+            darkModeType,
+            content: darkTokens,
+        })
+    )
 }
 
 function decapitalize(str: string) {
@@ -615,6 +738,7 @@ export function propControlsToType(controls: PropertyControls, fileName) {
                 .map((line) => `    ${line}`)
                 .join('\n') + '\n'
         let t = ''
+        t += '/* This file was generated by Unframer, do not edit manually */\n'
         t += 'import * as React from "react"\n\n'
         t += 'import { UnframerBreakpoint } from "unframer"\n\n'
         t += `export interface Props {\n${defaultPropsTypes}${types}\n}\n\n`
@@ -669,17 +793,17 @@ export function parsePropertyControls(code: string) {
     return propControls.slice(realStart + 1, -1)
 }
 
-type TokenInfo = {
+type ExtractedTokenInfo = {
     tokenName: string
     metadata?: Record<string, any>
 
     defaultValue: string
 }
 
-export function extractTokenInfo(code: string): TokenInfo[] {
+export function extractTokenInfo(code: string): ExtractedTokenInfo[] {
     const lines = code.split('\n')
     const tokenLines = lines.filter((line) => line.includes('var(--token'))
-    const tokens: TokenInfo[] = []
+    const tokens: ExtractedTokenInfo[] = []
 
     for (const line of tokenLines) {
         let startIndex = 0