unframer 3.2.0 → 3.2.4

package/esm/index.d.ts

@@ -2,4 +2,7 @@ export * from './framer.js';
 import { AdaptedLink as Link, ResolveLinksAdapted as ResolveLinks } from './react.js';
 export { FramerStyles, type UnframerBreakpoint, WithFramerBreakpoints, ContextProviders, AdaptedLink, UnframerProvider, } from './react.js';
 export { Link, ResolveLinks };
+import { withCSS as withCSSOriginal } from './framer.js';
+import { withCSS } from './css.js';
+export { withCSSOriginal, withCSS };
 //# sourceMappingURL=index.d.ts.map

package/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,OAAO,EACH,WAAW,IAAI,IAAI,EACnB,mBAAmB,IAAI,YAAY,EACtC,MAAM,YAAY,CAAA;AACnB,OAAO,EACH,YAAY,EACZ,KAAK,kBAAkB,EACvB,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,gBAAgB,GAEnB,MAAM,YAAY,CAAA;AAEnB,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,OAAO,EACH,WAAW,IAAI,IAAI,EACnB,mBAAmB,IAAI,YAAY,EACtC,MAAM,YAAY,CAAA;AACnB,OAAO,EACH,YAAY,EACZ,KAAK,kBAAkB,EACvB,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,gBAAgB,GAEnB,MAAM,YAAY,CAAA;AAEnB,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,CAAA;AAG7B,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,aAAa,CAAA;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAElC,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,CAAA"}

package/esm/index.js

@@ -4,4 +4,8 @@ export { FramerStyles, WithFramerBreakpoints, ContextProviders, AdaptedLink, Unf
 // withCSS,
  } from './react.js';
 export { Link, ResolveLinks };
+// Override withCSS with our custom implementation that restores style tags
+import { withCSS as withCSSOriginal } from './framer.js';
+import { withCSS } from './css.js';
+export { withCSSOriginal, withCSS };
 //# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,OAAO,EACH,WAAW,IAAI,IAAI,EACnB,mBAAmB,IAAI,YAAY,GACtC,MAAM,YAAY,CAAA;AACnB,OAAO,EACH,YAAY,EAEZ,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,gBAAgB;AAChB,WAAW;EACd,MAAM,YAAY,CAAA;AAEnB,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,OAAO,EACH,WAAW,IAAI,IAAI,EACnB,mBAAmB,IAAI,YAAY,GACtC,MAAM,YAAY,CAAA;AACnB,OAAO,EACH,YAAY,EAEZ,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,gBAAgB;AAChB,WAAW;EACd,MAAM,YAAY,CAAA;AAEnB,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,CAAA;AAE7B,2EAA2E;AAC3E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,aAAa,CAAA;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAElC,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,CAAA"}

package/esm/package-manager.d.ts

@@ -1,4 +1,4 @@
-export declare function getPackageManager(targetDir: string): Promise<"" | "npm" | "yarn" | "pnpm" | "bun" | "deno">;
+export declare function getPackageManager(targetDir?: string): Promise<"" | "npm" | "yarn" | "pnpm" | "bun" | "deno">;
 export declare function installPackagesBatch({ packageNames, cwd, isDev, }: {
     packageNames: string[];
     cwd: string;

package/esm/package-manager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"package-manager.d.ts","sourceRoot":"","sources":["../src/package-manager.ts"],"names":[],"mappings":"AAMA,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,MAAM,0DA+BxD;AAED,wBAAsB,oBAAoB,CAAC,EACvC,YAAY,EACZ,GAAG,EACH,KAAa,GAChB,EAAE;IACC,YAAY,EAAE,MAAM,EAAE,CAAA;IACtB,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,OAAO,CAAA;CAClB,GAAG,OAAO,CAAC;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAoHhD"}
+{"version":3,"file":"package-manager.d.ts","sourceRoot":"","sources":["../src/package-manager.ts"],"names":[],"mappings":"AAMA,wBAAsB,iBAAiB,CAAC,SAAS,CAAC,EAAE,MAAM,0DA+BzD;AAED,wBAAsB,oBAAoB,CAAC,EACvC,YAAY,EACZ,GAAG,EACH,KAAa,GAChB,EAAE;IACC,YAAY,EAAE,MAAM,EAAE,CAAA;IACtB,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,OAAO,CAAA;CAClB,GAAG,OAAO,CAAC;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAkHhD"}

package/esm/package-manager.js.map

@@ -1 +1 @@
-{"version":3,"file":"package-manager.js","sourceRoot":"","sources":["../src/package-manager.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"package-manager.js","sourceRoot":"","sources":["../src/package-manager.ts"],"names":[],"mappings":"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"}

package/esm/stackblitz.d.ts

@@ -0,0 +1,9 @@
+export declare function generateStackblitzFiles({ projectId, appComponentCode, title, }: {
+    projectId: any;
+    appComponentCode?: string | undefined;
+    title?: string | undefined;
+}): {
+    relativePath: string;
+    contents: string;
+}[];
+//# sourceMappingURL=stackblitz.d.ts.map

package/esm/stackblitz.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stackblitz.d.ts","sourceRoot":"","sources":["../src/stackblitz.ts"],"names":[],"mappings":"AAEA,wBAAgB,uBAAuB,CAAC,EACpC,SAAS,EACT,gBAAqB,EACrB,KAAU,GACb;;;;CAAA,GAAG;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,EAAE,CA0L/C"}

package/esm/stackblitz.js

@@ -0,0 +1,179 @@
+import { dedent } from './utils';
+export function generateStackblitzFiles({ projectId, appComponentCode = '', title = '', }) {
+    const packageJson = {
+        name: 'unframer-vite-react-typescript-starter',
+        private: true,
+        version: '0.0.0',
+        type: 'module',
+        stackblitz: {
+            startCommand: `STACKBLITZ_DEMO_EXAMPLE=src/App.tsx npm run framer && npm run dev`,
+        },
+        scripts: {
+            dev: 'vite',
+            build: 'vite build',
+            framer: `unframer ${projectId} --outDir src/framer`,
+        },
+        dependencies: {
+            react: 'latest',
+            unframer: 'latest',
+            'react-dom': 'latest',
+        },
+        devDependencies: {
+            '@types/react': 'latest',
+            '@types/react-dom': 'latest',
+            '@vitejs/plugin-react': 'latest',
+            tailwindcss: '^3.4.0',
+            postcss: '^8.4.0',
+            autoprefixer: '^10.4.0',
+            typescript: 'latest',
+            vite: 'latest',
+        },
+    };
+    const tsconfig = {
+        compilerOptions: {
+            target: 'ES2020',
+            useDefineForClassFields: true,
+            lib: ['ES2020', 'DOM', 'DOM.Iterable'],
+            module: 'ESNext',
+            skipLibCheck: true,
+            moduleResolution: 'bundler',
+            allowImportingTsExtensions: true,
+            resolveJsonModule: true,
+            isolatedModules: true,
+            noEmit: true,
+            jsx: 'react-jsx',
+            noUnusedLocals: true,
+            noUnusedParameters: true,
+            noFallthroughCasesInSwitch: true,
+        },
+        include: ['src'],
+    };
+    const viteConfig = dedent `
+
+        import { defineConfig } from 'vite'
+        import react from '@vitejs/plugin-react'
+
+        // https://vitejs.dev/config/
+        export default defineConfig({
+            plugins: [react()],
+        })
+
+    `;
+    const postcssConfig = dedent `
+
+        export default {
+            plugins: {
+                tailwindcss: {},
+                autoprefixer: {},
+            }
+        }
+
+    `;
+    const tailwindConfig = dedent `
+
+        /** @type {import('tailwindcss').Config} */
+        export default {
+            content: [
+                "./index.html",
+                "./src/**/*.{js,ts,jsx,tsx}",
+            ],
+            theme: {
+                extend: {},
+            },
+            plugins: [],
+        }
+
+    `;
+    const indexHtml = dedent `
+
+        <!doctype html>
+        <html lang="en">
+            <head>
+                <meta charset="UTF-8" />
+                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+                <title>Unframer + Vite + React + TS</title>
+            </head>
+            <body>
+                <div id="root"></div>
+                <script type="module" src="/src/main.tsx"></script>
+            </body>
+        </html>
+
+    `;
+    const app = appComponentCode ||
+        dedent `
+        const docs = \`
+        # Unframer Demo Project
+
+        This is a demo project showing how to use Unframer to export Framer components to React.
+
+        ## What's happening now:
+        If you're seeing this file, the unframer CLI is currently running in the terminal below.
+        Just wait until it finishes downloading and bundling your Framer components.
+        Once complete, you'll see your components rendered in the browser preview on the right and this file will be replaced with an example.
+
+        Try making changes to your components in Framer, then run the \`npm run framer\` command again
+        to see the updates reflected here.
+
+        ## How it works:
+        1. The Framer React Export plugin saves your components to the Unframer database
+        2. The unframer CLI downloads and bundles those components into regular React components inside the \`src/framer\` folder
+        3. You can then import and use them in your React app just like any other component
+
+        \`
+
+        `;
+    const main = dedent `
+
+        import './index.css'
+        import React from 'react'
+        import ReactDOM from 'react-dom/client'
+        import App from './App'
+
+        ReactDOM.createRoot(document.getElementById('root')!).render(
+            <App />
+        )
+
+    `;
+    const css = dedent `
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+    `;
+    return [
+        {
+            relativePath: 'tsconfig.json',
+            contents: JSON.stringify(tsconfig, null, 2),
+        },
+        {
+            relativePath: 'package.json',
+            contents: JSON.stringify(packageJson, null, 2),
+        },
+        {
+            relativePath: '.gitignore',
+            contents: dedent `
+            
+                node_modules
+                dist
+                .DS_Store
+                .env
+                .env.*
+                .stackblitzrc
+                npm-debug.log*
+                yarn-debug.log*
+                yarn-error.log*
+                *.log
+            
+            `,
+        },
+        { relativePath: 'vite.config.ts', contents: viteConfig },
+        { relativePath: 'postcss.config.js', contents: postcssConfig },
+        { relativePath: 'tailwind.config.js', contents: tailwindConfig },
+        { relativePath: 'index.html', contents: indexHtml },
+        { relativePath: 'src/App.tsx', contents: app },
+        { relativePath: 'src/index.css', contents: css },
+        // { relativePath: 'pnpm-lock.yaml', contents: '\n' },
+        { relativePath: 'src/main.tsx', contents: main },
+    ];
+}
+//# sourceMappingURL=stackblitz.js.map

package/esm/stackblitz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stackblitz.js","sourceRoot":"","sources":["../src/stackblitz.ts"],"names":[],"mappings":"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"}

package/esm/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "3.2.0";
+export declare const version = "3.2.4";
 //# sourceMappingURL=version.d.ts.map

package/esm/version.js

@@ -1,2 +1,2 @@
-export const version = '3.2.0';
+export const version = '3.2.4';
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unframer",
-  "version": "3.2.0",
+  "version": "3.2.4",
   "description": "Import Framer components directly in your React app, type safe and customizable",
   "sideEffects": false,
   "repository": "https://github.com/remorses/unframer",
@@ -59,7 +59,7 @@
     "nanospinner": "^1.2.2",
     "picocolors": "^1.1.1",
     "real-framer-motion": "npm:framer-motion@^12.23.12",
-    "spiceflow": "^1.13.2",
+    "spiceflow": "^1.17.10",
     "string-dedent": "^3.0.1",
     "undici": "^7.10.0"
   },
@@ -76,7 +76,7 @@
     "@types/node": "^22.15.21",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.5",
-    "@xmorse/deployment-utils": "^0.4.3",
+    "@xmorse/deployment-utils": "^0.7.0",
     "concurrently": "^9.1.2",
     "dprint-node": "^1.0.8",
     "openai": "^4.80.1",

package/src/cli.ts

@@ -2,21 +2,26 @@ import { setMaxListeners } from 'events'
 import { fetch } from 'undici'
 import './sentry.js'
 
-import { bundle, StyleToken } from './exporter.js'
+import { bundle, StyleToken, createExampleComponentCode } from './exporter.js'
 import { createClient } from './generated/api-client.js'
+import { generateStackblitzFiles } from './stackblitz.js'
 
 import { cac } from 'cac'
+import { exec } from 'child_process'
+import { promisify } from 'util'
 
 import fs from 'fs'
 import path, { basename } from 'path'
 import { BreakpointSizes, defaultBreakpointSizes } from './css.js'
 import {
     componentNameToPath,
+    dedent,
     isTruthy,
     logger,
     sleep,
     spinner,
 } from './utils.js'
+import { getPackageManager } from './package-manager.js'
 import { notifyError } from './sentry.js'
 import { dispatcher } from './undici-dispatcher.js'
 const configNames = ['unframer.config.json', 'unframer.json']
@@ -180,17 +185,123 @@ const version = pkg.version
 
 cli.version(version).help()
 
-cli.command('init', 'Init the unframer.config.json config').action(
-    async (options) => {
-        let fixed = fixOldUnframerPath()
-        if (fixed) {
-            return
+
+
+cli.command('example-app <projectId>', 'Create an example app with Framer components')
+    .option('--outDir <dir>', 'Output directory', { default: 'example-unframer-app' })
+    .action(async (projectId, options) => {
+        try {
+            const outDir = options.outDir
+            console.log(`Creating example app in ${outDir}`)
+
+            // Create the output directory
+            const absoluteOutDir = path.resolve(process.cwd(), outDir)
+            if (!fs.existsSync(absoluteOutDir)) {
+                fs.mkdirSync(absoluteOutDir, { recursive: true })
+            }
+
+            // Fetch the project configuration
+            spinner.start('Fetching project configuration...')
+            const { config, websiteUrl } = await configFromFetch({
+                projectId,
+                allExternal: true,
+                externalPackages: [],
+                outDir: 'src/framer',
+            })
+            spinner.stop('Project configuration fetched')
+
+            // Generate example component code
+            spinner.start('Generating example component code...')
+            const { exampleCode } = await createExampleComponentCode({
+                outDir: './framer',
+                config,
+            })
+
+            // Generate all the files needed for the example app
+            const files = generateStackblitzFiles({
+                projectId,
+                appComponentCode: exampleCode,
+                title: config.projectName || 'Unframer Example App',
+            })
+
+            // Write all files to the output directory
+            for (const file of files) {
+                const filePath = path.join(absoluteOutDir, file.relativePath)
+                const fileDir = path.dirname(filePath)
+
+                // Ensure directory exists
+                if (!fs.existsSync(fileDir)) {
+                    fs.mkdirSync(fileDir, { recursive: true })
+                }
+
+                fs.writeFileSync(filePath, file.contents)
+                console.log(`Created ${file.relativePath}`)
+            }
+            spinner.stop('Example files created')
+
+            // Bundle the Framer components
+            spinner.start('Downloading Framer components...')
+            const componentsOutDir = path.join(absoluteOutDir, 'src/framer')
+            const { buildContext } = await bundle({
+                config: {
+                    ...config,
+                    jsx: true,
+                    outDir: componentsOutDir,
+                    allExternal: true,
+                    externalPackages: [],
+                },
+                watch: false,
+                cwd: componentsOutDir,
+                signal: new AbortController().signal,
+                metafile: false,
+            })
+            await buildContext?.dispose?.()
+            spinner.stop('Framer components downloaded')
+
+            // Install dependencies using detected package manager
+            spinner.stop('Framer components downloaded')
+            
+            const packageManager = await getPackageManager()
+            const installCommand = packageManager === 'yarn' ? 'yarn' : `${packageManager} install`
+            
+            console.log(`Installing dependencies with ${packageManager}...`)
+            spinner.start(`Running ${installCommand}...`)
+
+            const execAsync = promisify(exec)
+            try {
+                await execAsync(installCommand, {
+                    cwd: absoluteOutDir,
+                    // Can't use 'inherit' with async exec, so we'll capture output
+                    encoding: 'utf8',
+                })
+                spinner.stop('Dependencies installed successfully')
+            } catch (error) {
+                spinner.stop('Failed to install dependencies')
+                console.error(`${packageManager} install failed:`, error?.message || error)
+                console.log(`You can manually run "${installCommand}" in the created directory`)
+            }
+
+            logger.green(dedent`
+            
+            Example app created successfully in ${outDir}!
+
+            Next steps:
+              cd ${outDir}
+              ${packageManager} run dev
+
+            Quick guide:
+            ▪︎ Edit src/App.tsx to add or customize your Framer components
+            ▪︎ Your components are in src/framer/ directory
+            ▪︎ The app uses Vite + React + TypeScript + Tailwind CSS
+            ▪︎ Your app will be running at http://localhost:5173
+            
+            `)
+        } catch (error) {
+            notifyError(error)
+            spinner.error('Failed to create example app')
+            throw error
         }
-        fs.writeFileSync(`unframer.config.json`, defaultConfig)
-        const p = path.resolve(process.cwd(), 'unframer.config.json')
-        console.log(`${p} file created`)
-    },
-)
+    })
 
 export type Config = {
     jsx?: boolean

package/src/{css.ts → css.tsx}

@@ -1,4 +1,5 @@
 import dedent from 'string-dedent'
+import React from 'react'
 import { ComponentFont } from './framer.js'
 
 function deduplicateByKey<T>(arr: T[], key: (k: T) => string): T[] {
@@ -248,3 +249,40 @@ export function groupBy<T>(arr: T[], key: (x: T) => string) {
 function sortByKey<T>(arr: T[], key: (x: T) => string) {
     return arr.slice().sort((a, b) => key(a).localeCompare(key(b)))
 }
+
+/**
+ * Custom withCSS function that restores the previous behavior
+ * of rendering inline style tags instead of using cssCollector
+ */
+export function withCSS(Component: any, escapedCSS: any, componentSerializationId?: string) {
+    const framerCSSMarker = 'data-framer-css-ssr'
+    
+    return (props: any) => {
+        // Check if we're in SSR mode
+        const isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined'
+        
+        if (!isBrowser) {
+            // Server-side: render style tags like the old behavior
+            const id = componentSerializationId
+            const cssContent = typeof escapedCSS === 'function' 
+                ? escapedCSS('EXPORT')
+                : Array.isArray(escapedCSS) 
+                    ? escapedCSS.join('\n') 
+                    : escapedCSS
+            
+            return (
+                <>
+                    <style
+                        {...{[framerCSSMarker]: true}}
+                        data-framer-component={id}
+                        dangerouslySetInnerHTML={{__html: cssContent}}
+                    />
+                    <Component {...props} />
+                </>
+            )
+        }
+        
+        // Client-side: just render the component
+        return <Component {...props} />
+    }
+}

package/src/exporter.ts

@@ -1202,7 +1202,7 @@ export async function extractPropControlsUnsafe(
                         UNFRAMER_MAP_PACKAGES,
                     ),
                 },
-            },
+            } as any,
             (err, stdout, stderr) => {
                 clearTimeout(timer)
                 if (err) {
@@ -1211,7 +1211,7 @@ export async function extractPropControlsUnsafe(
                     return rej(err)
                 }
 
-                res(stdout)
+                res(stdout.toString())
             },
         )
 
@@ -1434,7 +1434,48 @@ export async function createExampleComponentCode({
         // Order first by nodeDepth (lower is better)
         return a.nodeDepth - b.nodeDepth || a.pageOrdering - b.pageOrdering
     })
-    if (!instances?.length) return { outDirForExample, exampleCode: '' }
+
+    // If no instances, use components directly
+    if (!instances?.length) {
+        const componentNames = Object.keys(config.components || {})
+        if (!componentNames.length) {
+            return { outDirForExample, exampleCode: '' }
+        }
+
+        // Generate simple example with all available components
+        const imports = componentNames.map((name) => {
+            return `import ${componentCamelCase(name)} from './${outDirForExample}/${name}'`
+        })
+
+        const jsx = componentNames.map((name) => {
+            return `<${componentCamelCase(name)}.Responsive />`
+        })
+
+        let containerClasses = ''
+        if (config.pageBackgroundColor) {
+            let bg = config.pageBackgroundColor?.replace(/ /g, '_')
+            containerClasses += `bg-[${bg}]`
+        }
+
+        const exampleCode = dedent`
+          import './${outDirForExample}/styles.css'
+
+          ${indentWithTabs(imports?.join('\n'), '')}
+
+          export default function App() {
+            return (
+              <div className='flex flex-col items-center gap-3 ${containerClasses}'>
+                ${indentWithTabs(jsx?.join('\n'), '          ')}
+              </div>
+            );
+          };
+          `
+
+        return {
+            outDirForExample,
+            exampleCode,
+        }
+    }
 
     const imports = instances?.map((exampleComponent) => {
         return `import ${componentCamelCase(exampleComponent?.componentPathSlug)} from './${outDirForExample}/${
@@ -1465,7 +1506,7 @@ export async function createExampleComponentCode({
 
     let containerClasses = ''
     if (config.pageBackgroundColor) {
-        let bg = config.pageBackgroundColor?.replace(' ', '_')
+        let bg = config.pageBackgroundColor?.replace(/ /g, '_')
         containerClasses += `bg-[${bg}]`
     }