unframer 2.25.4 → 2.26.0

package/src/exporter.ts

@@ -1,4 +1,5 @@
 import { BuildResult, build, context, type BuildOptions } from 'esbuild'
+
 import packageJson from '../package.json'
 
 import url from 'url'
@@ -8,10 +9,17 @@ import { Sema } from 'async-sema'
 
 import { nodeModulesPolyfillPlugin } from 'esbuild-plugins-node-modules-polyfill'
 
+import { transform } from '@babel/core'
 import { exec } from 'child_process'
+import { error } from 'console'
 import fs from 'fs'
 import path from 'path'
-import dedent from 'string-dedent'
+import { dedent } from './utils.js'
+import {
+    babelPluginJsxTransform,
+    removeJsxExpressionContainer,
+} from './babel-jsx.js'
+import { propCamelCaseJustLikeFramer } from './compat.js'
 import {
     ComponentFontBundle,
     breakpointsStyles,
@@ -32,16 +40,18 @@ import {
     PropertyControls,
     combinedCSSRules,
 } from './framer.js'
+import { notifyError } from './sentry'
 import {
-    stackblitzDemoExample,
     kebabCase,
     logger,
     spinner,
+    stackblitzDemoExample,
     terminalMarkdown,
 } from './utils.js'
-import { error } from 'console'
-import { notifyError } from './sentry'
-import { propCamelCaseJustLikeFramer } from './compat'
+
+import { Biome, Distribution } from '@biomejs/js-api'
+
+let biome: Biome
 
 export type StyleToken = {
     id: string
@@ -68,7 +78,7 @@ export async function bundle({
         await fs.promises.mkdir(out, { recursive: true })
     } catch (e) {}
 
-    spinner.start()
+    spinner.start('exporting components...')
 
     const otherRoutes = Object.fromEntries(
         (config.framerWebPages || []).map((page) => [
@@ -103,6 +113,7 @@ export async function bundle({
                 }
             }),
         jsx: 'automatic',
+        // jsxFactory: '_jsx',
         bundle: true,
         platform: 'browser',
         metafile: true,
@@ -265,28 +276,57 @@ export async function bundle({
         spinner.update('Finished build')
 
         for (let file of buildResult.outputFiles!) {
-            const resultPathAbs = path.resolve(out, file.path)
+            const resultPathAbsJs = path.resolve(out, file.path)
+            const resultPathAbsJsx = resultPathAbsJs.replace(/\.js$/, '.jsx')
+
             const existing = await fs.promises
-                .readFile(file.path, 'utf-8')
+                .readFile(resultPathAbsJsx, 'utf-8')
                 .catch(() => null)
-            // let res = transform(file.text || '', {
-            //     babelrc: false,
-            //     sourceType: 'module',
-            //     plugins: [
-            //         babelPluginDeduplicateImports,
-
-            //         babelPluginJsxTransform(),
-            //     ],
-            //     filename: 'x.js',
-            //     compact: true,
-            //     sourceMaps: false,
-            // })
-            // let inputCode = res!.code!
-
-            const tooBigSize = 1 * 1024 * 1024
+            const tooBigSize = 0.7 * 1024 * 1024
 
             let formatted = file.text
-            // let tooBig = file.text.length >= tooBigSize
+
+            let tooBig = file.text.length >= tooBigSize
+            let didFormat = false
+            if (
+                config.jsx &&
+                !tooBig &&
+                !resultPathAbsJs.includes('/chunks/') &&
+                !resultPathAbsJs.includes('\\chunks\\')
+            ) {
+                try {
+                    let res = transform(file.text || '', {
+                        babelrc: false,
+                        sourceType: 'module',
+                        plugins: [
+                            // babelPluginDeduplicateImports,
+                            babelPluginJsxTransform,
+                            removeJsxExpressionContainer,
+                        ],
+                        // ast: true,
+                        // code: false,
+                        filename: 'x.jsx',
+                        compact: false,
+                        sourceMaps: false,
+                    })
+                    if (res?.code) {
+                        if (!biome) {
+                            biome = await Biome.create({
+                                distribution: Distribution.NODE,
+                            })
+                        }
+                        let result = biome.formatContent(res.code, {
+                            filePath: 'example.jsx',
+                        })
+                        didFormat = true
+                        formatted = result.content
+                    }
+                } catch (e) {
+                    notifyError(e, 'babel transform and format')
+                }
+            }
+
+            // let inputCode = res!.code!
             // let shouldFormat = !tooBig && !file.path.includes('chunks')
             // if (shouldFormat) {
             //     spinner.update(`Formatting ${path.relative(out, file.path)}`)
@@ -306,11 +346,6 @@ export async function bundle({
             //     )
             // }
 
-            let codeNew =
-                `// @ts-nocheck\n` +
-                `/* eslint-disable */\n` +
-                doNotEditComment +
-                formatted
             // if (framerWebPages?.length) {
             //     codeNew = replaceWebPageIds({
             //         code: codeNew,
@@ -327,14 +362,23 @@ export async function bundle({
             //     })
             // }
 
-            if (existing === codeNew) {
-                continue
-            }
+            const prefix =
+                `// @ts-nocheck\n` + `/* eslint-disable */\n` + doNotEditComment
+            const codeJsx = prefix + formatted
+            const codeJs = prefix + file.text
+            // if (existing === codeJsx) {
+            //     continue
+            // }
             logger.log(`writing`, path.relative(out, file.path))
-            await fs.promises.mkdir(path.dirname(resultPathAbs), {
+            await fs.promises.mkdir(path.dirname(resultPathAbsJsx), {
                 recursive: true,
             })
-            await fs.promises.writeFile(resultPathAbs, codeNew, 'utf-8')
+            if (codeJs !== codeJsx || !didFormat) {
+                await fs.promises.writeFile(resultPathAbsJs, codeJs, 'utf-8')
+            }
+            if (didFormat) {
+                await fs.promises.writeFile(resultPathAbsJsx, codeJsx, 'utf-8')
+            }
         }
         spinner.stop()
         await fs.promises.writeFile(
@@ -353,7 +397,7 @@ export async function bundle({
             'utf-8',
         )
 
-        const sema = new Sema(stackblitzDemoExample ? 5 : 10)
+        const sema = new Sema(stackblitzDemoExample ? 5 : 6)
         spinner.update('Extracting types')
         logger.log(`using node path`, nodePath)
         let allFonts = [] as ComponentFontBundle[]
@@ -363,11 +407,17 @@ export async function bundle({
                     await sema.acquire()
                     const name = path
                         .relative(out, file.path)
-                        .replace(/\.js$/, '')
+                        .replace(/\.jsx?$/, '')
                     const resultPathAbs = path.resolve(out, file.path)
                     if (!components[name]) {
                         return
                     }
+                    if (!fs.existsSync(resultPathAbs)) {
+                        spinner.error(
+                            `cannot extract types for ${name}, missing output file`,
+                        )
+                        return
+                    }
                     logger.log(`extracting types for ${name}`)
                     spinner.update(`Extracting types for ${name}`)
                     const { propertyControls, fonts } =
@@ -392,6 +442,7 @@ export async function bundle({
                         path.resolve(out, `${name}.d.ts`),
                         types,
                     )
+
                     return {
                         propertyControls,
                         fonts,
@@ -430,9 +481,16 @@ export async function bundle({
         )
 
         logFontsUsage(allFonts)
-            .split('\n')
+            ?.split('\n')
             .forEach((x) => logger.log(x))
 
+        const jsxFiles = buildResult.outputFiles
+            .filter(
+                (x) =>
+                    x.path.endsWith('.js') &&
+                    fs.existsSync(x.path.replace(/\.js$/, '.jsx')),
+            )
+            .map((x) => x.path.replace(/\.js$/, '.jsx'))
         const outFiles = buildResult.outputFiles
             .map((x) => path.resolve(out, x.path))
             .concat([
@@ -441,12 +499,25 @@ export async function bundle({
                 path.resolve(out, '.cursorignore'),
                 path.resolve(out, 'styles.css'),
             ])
+            .concat(jsxFiles)
             .concat(
                 buildResult.outputFiles.map((x) =>
-                    path.resolve(out, x.path.replace('.js', '.d.ts')),
+                    path.resolve(out, x.path.replace(/\.jsx?$/, '.d.ts')),
                 ),
             )
-        const filesToDelete = prevFiles.filter((x) => !outFiles.includes(x))
+
+        const filesToDelete = prevFiles
+            .filter((x) => !outFiles.includes(x))
+            .concat(
+                buildResult.outputFiles
+                    .map((x) => x.path)
+                    .filter(
+                        (js) =>
+                            js.endsWith('.js') &&
+                            jsxFiles.some((x) => x.startsWith(js)),
+                    ),
+            )
+
         for (let file of filesToDelete) {
             logger.log('deleting', path.relative(out, file))
             try {
@@ -596,7 +667,7 @@ export function resolvePackage({ cwd, pkg }) {
                 if (error) {
                     logger.log(stderr)
                     reject(
-                        new Error('Unframer is not installed in your project'),
+                        new Error(`${pkg} is not installed in your project`),
                     )
                     return
                 }
@@ -1162,7 +1233,7 @@ function splitOnce(str: string, separator: string) {
 }
 
 export function componentCamelCase(str: string) {
-    str = str?.replace(/\.js$/, '')
+    str = str?.replace(/\.jsx?$/, '')
     if (!str) {
         return 'FramerComponent'
     }
@@ -1253,6 +1324,7 @@ async function recursiveReaddir(dir: string): Promise<string[]> {
 }
 
 function indentWithTabs(str: string, tabs: string) {
+    if (!str) return ''
     return str
         .split('\n')
         .map((line, i) => (!i ? line : tabs + line))
@@ -1269,18 +1341,18 @@ export async function createExampleComponentCode({
     const outDirForExample = path.posix
         .relative(process.cwd(), outDir)
         .replace(/^src\//, '') // remove src so file works inside src
-    const instances = config?.componentInstancesInIndexPage.sort((a, b) => {
+    const instances = config?.componentInstancesInIndexPage?.sort((a, b) => {
         // Order first by nodeDepth (lower is better)
         return a.nodeDepth - b.nodeDepth || a.pageOrdering - b.pageOrdering
     })
 
-    const imports = instances.map((exampleComponent) => {
+    const imports = instances?.map((exampleComponent) => {
         return `import ${componentCamelCase(exampleComponent?.componentPathSlug)} from './${outDirForExample}/${
             exampleComponent?.componentPathSlug
         }'`
     })
 
-    const jsx = instances.map((exampleComponent) => {
+    const jsx = instances?.map((exampleComponent) => {
         let propStr = ''
         for (let [key, value] of Object.entries(
             exampleComponent.controls || {},
@@ -1293,12 +1365,10 @@ export async function createExampleComponentCode({
             }
             // TODO get property controls to render enums much better? maybe do this in plugin instead
             propStr += '\n'
-            propStr += `    ${key}={${JSON.stringify(value)}}`
+            propStr += `  ${key}={${JSON.stringify(value)}}`
         }
         if (propStr) propStr += '\n'
-        const responsiveComponent = dedent`
-        <${componentCamelCase(exampleComponent?.componentPathSlug)}.Responsive${propStr}/>
-        `
+        const responsiveComponent = `<${componentCamelCase(exampleComponent?.componentPathSlug)}.Responsive${propStr}/>`
         return responsiveComponent
     })
 
@@ -1311,14 +1381,14 @@ export async function createExampleComponentCode({
     const exampleCode = dedent`
       import './${outDirForExample}/styles.css'
 
-      ${indentWithTabs(imports.join('\n'), '')}
+      ${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 (
+          <div className='flex flex-col items-center gap-3 ${containerClasses}'>
+            ${indentWithTabs(jsx?.join('\n'), '      ')}
+          </div>
+        );
       };
       `
     return {

package/src/flat-cache-interceptor.ts

@@ -0,0 +1,114 @@
+// FlatCacheStore.ts
+import { Writable } from 'node:stream'
+import { promises as fs } from 'node:fs'
+import { join } from 'node:path'
+import { tmpdir } from 'node:os'
+import { createHash } from 'node:crypto'
+
+import type CacheHandler from 'undici/types/cache-interceptor.js'
+import { logger } from './utils'
+
+/* Narrow the names we need from the .d.ts so we stay 1-to-1 with the built-ins */
+type CacheKey = CacheHandler.CacheKey
+type CacheValue = CacheHandler.CacheValue
+type GetResult = CacheHandler.GetResult
+type CacheStore = CacheHandler.CacheStore
+
+/**
+ * A CacheStore that persists each entry as separate files in os.tmpdir()/.unframer.
+ * Each cache entry creates a .json file for metadata and a .bin file for the body.
+ * It satisfies the exact same interface that `MemoryCacheStore` and
+ * `SqliteCacheStore` implement inside Undici (see cache-interceptor.d.ts).
+ */
+export class FlatCacheStore implements CacheStore {
+    private readonly cacheDir: string
+
+    constructor() {
+        this.cacheDir = join(tmpdir(), '.unframer')
+        logger.log(`using cache dir`, this.cacheDir)
+        this.ensureCacheDir()
+    }
+
+    private async ensureCacheDir(): Promise<void> {
+        try {
+            await fs.mkdir(this.cacheDir, { recursive: true })
+        } catch (error) {
+            // Directory might already exist, ignore error
+        }
+    }
+
+    private getFileHash(key: CacheKey): string {
+        return createHash('sha256').update(JSON.stringify(key)).digest('hex')
+    }
+
+    private getFilePaths(key: CacheKey): {
+        metaPath: string
+        bodyPath: string
+    } {
+        const hash = this.getFileHash(key)
+        return {
+            metaPath: join(this.cacheDir, `${hash}.json`),
+            bodyPath: join(this.cacheDir, `${hash}.bin`),
+        }
+    }
+
+    /** Read a cached response (metadata + body) */
+    async get(key: CacheKey): Promise<GetResult | undefined> {
+        try {
+            const { metaPath, bodyPath } = this.getFilePaths(key)
+
+            const [metaData, bodyData] = await Promise.all([
+                fs.readFile(metaPath, 'utf-8'),
+                fs.readFile(bodyPath),
+            ])
+
+            const meta = JSON.parse(metaData)
+            return {
+                ...meta,
+                body: bodyData,
+            }
+        } catch (error) {
+            return undefined
+        }
+    }
+
+    /** Return a writable stream so the interceptor can pipe the body into us */
+    createWriteStream(key: CacheKey, meta: CacheValue): Writable {
+        const chunks: Buffer[] = []
+
+        return new Writable({
+            write(chunk, _enc, cb) {
+                chunks.push(chunk as Buffer)
+                cb()
+            },
+            final: async (cb) => {
+                try {
+                    await this.ensureCacheDir()
+                    const { metaPath, bodyPath } = this.getFilePaths(key)
+
+                    await Promise.all([
+                        fs.writeFile(metaPath, JSON.stringify(meta, null, 2)),
+                        fs.writeFile(bodyPath, Buffer.concat(chunks)),
+                    ])
+
+                    cb()
+                } catch (error) {
+                    cb(error as Error)
+                }
+            },
+        })
+    }
+
+    /** Delete one entry */
+    async delete(key: CacheKey): Promise<void> {
+        try {
+            const { metaPath, bodyPath } = this.getFilePaths(key)
+            await Promise.all([
+                fs.unlink(metaPath).catch(() => {}),
+                fs.unlink(bodyPath).catch(() => {}),
+            ])
+        } catch (error) {
+            // Ignore errors when deleting non-existent files
+        }
+    }
+}