unframer 2.25.5 → 2.26.0

package/src/css.ts

@@ -91,7 +91,7 @@ export function getFontsStyles(_fontsDefs: ComponentFontBundle[]) {
                     let str = ''
                     str += dedent`
                     @font-face {
-                        font-family: '${x.family}'; 
+                        font-family: '${x.family}';
                         src: url('${x.url}');\n
                     `
                     if (x.style) {
@@ -132,7 +132,7 @@ export const breakpointsStylesLegacy = (breakpointSizes?: BreakpointSizes) => {
 @media (min-width: ${breakpointSizes.base}px) and (max-width: ${
         breakpointSizes.sm - 1
     }px) {
-    .unframer-hidden.unframer-base { 
+    .unframer-hidden.unframer-base {
         display: contents;
     }
 }
@@ -141,7 +141,7 @@ export const breakpointsStylesLegacy = (breakpointSizes?: BreakpointSizes) => {
 @media (min-width: ${breakpointSizes.sm}px) and (max-width: ${
         breakpointSizes.md - 1
     }px) {
-    .unframer-hidden.unframer-sm { 
+    .unframer-hidden.unframer-sm {
         display: contents;
     }
 }
@@ -150,7 +150,7 @@ export const breakpointsStylesLegacy = (breakpointSizes?: BreakpointSizes) => {
 @media (min-width: ${breakpointSizes.md}px) and (max-width: ${
         breakpointSizes.lg - 1
     }px) {
-    .unframer-hidden.unframer-md { 
+    .unframer-hidden.unframer-md {
         display: contents;
     }
 }
@@ -159,7 +159,7 @@ export const breakpointsStylesLegacy = (breakpointSizes?: BreakpointSizes) => {
 @media (min-width: ${breakpointSizes.lg}px) and (max-width: ${
         breakpointSizes.xl - 1
     }px) {
-    .unframer-hidden.unframer-lg { 
+    .unframer-hidden.unframer-lg {
         display: contents;
     }
 }
@@ -168,14 +168,14 @@ export const breakpointsStylesLegacy = (breakpointSizes?: BreakpointSizes) => {
 @media (min-width: ${breakpointSizes.xl}px) and (max-width: ${
         breakpointSizes['2xl'] - 1
     }px) {
-    .unframer-hidden.unframer-xl { 
+    .unframer-hidden.unframer-xl {
         display: contents;
     }
 }
 
 /* 2 Extra Large */
 @media (min-width: ${breakpointSizes['2xl']}px) {
-    .unframer-hidden.unframer-2xl { 
+    .unframer-hidden.unframer-2xl {
         display: contents;
     }
 }
@@ -190,42 +190,42 @@ export const breakpointsStyles = (breakpointSizes?: BreakpointSizes) => {
     return /* css */ `
 /* Base */
 @media (min-width: ${breakpointSizes.base}px) and (max-width: ${breakpointSizes.sm - 1}px) {
-    .unframer:not(.unframer-base) { 
+    .unframer:not(.unframer-base) {
         display: none !important;
     }
 }
 
 /* Small */
 @media (min-width: ${breakpointSizes.sm}px) and (max-width: ${breakpointSizes.md - 1}px) {
-    .unframer:not(.unframer-sm) { 
+    .unframer:not(.unframer-sm) {
         display: none !important;
     }
 }
 
 /* Medium */
 @media (min-width: ${breakpointSizes.md}px) and (max-width: ${breakpointSizes.lg - 1}px) {
-    .unframer:not(.unframer-md) { 
+    .unframer:not(.unframer-md) {
         display: none !important;
     }
 }
 
 /* Large */
 @media (min-width: ${breakpointSizes.lg}px) and (max-width: ${breakpointSizes.xl - 1}px) {
-    .unframer:not(.unframer-lg) { 
+    .unframer:not(.unframer-lg) {
         display: none !important;
     }
 }
 
 /* Extra Large */
 @media (min-width: ${breakpointSizes.xl}px) and (max-width: ${breakpointSizes['2xl'] - 1}px) {
-    .unframer:not(.unframer-xl) { 
+    .unframer:not(.unframer-xl) {
         display: none !important;
     }
 }
 
 /* 2 Extra Large */
 @media (min-width: ${breakpointSizes['2xl']}px) {
-    .unframer:not(.unframer-2xl) { 
+    .unframer:not(.unframer-2xl) {
         display: none !important;
     }
 }

package/src/esbuild.ts

@@ -1,10 +1,11 @@
 import { fetch } from 'undici'
 import { RateLimit, Sema } from 'async-sema'
-import { dispatcher, logger, spinner } from './utils'
+import { logger, spinner } from './utils'
 
 import { Plugin, transform, type OnResolveArgs } from 'esbuild'
 import { resolvePackage } from './exporter'
 import { notifyError } from './sentry'
+import { dispatcher } from './undici-dispatcher'
 
 export const defaultExternalPackages = [
     'react',
@@ -297,13 +298,13 @@ export async function recursiveResolveRedirect(
 
     return url
 }
-let semaphore = new Sema(4)
-let rateLimiter = RateLimit(12, { timeUnit: 1000 })
+let semaphore = new Sema(3)
+let rateLimiter = RateLimit(20, { timeUnit: 1000 })
 
 export const fetchWithRetry = retryTwice(
     async (url: string, options?: RequestInit) => {
         await semaphore.acquire()
-        await rateLimiter()
+
         const timeout = setTimeout(() => {
             logger.error('fetch taking more than 10s', url)
         }, 10000)

package/src/example-code.test.ts

@@ -1,7 +1,6 @@
-import { expect, describe, test } from 'vitest'
+import { describe, expect, test } from 'vitest'
+import { configFromFetch } from './cli.js'
 import { createExampleComponentCode } from './exporter.js'
-import { componentNameToPath } from './utils.js'
-import { Config, configFromFetch } from './cli.js'
 
 describe('createExampleComponentCode', () => {
     test('should create example component code', async () => {
@@ -28,44 +27,44 @@ describe('createExampleComponentCode', () => {
           import ArticlesCardFramerComponent from './src/articles-card'
 
           export default function App() {
-              return (
-                  <div className='flex flex-col items-center gap-3 '>
-                      <NavigationFramerComponent.Responsive
-                          ctaVariant={"Primary"}
-                      />
-                      <HeroFramerComponent.Responsive/>
-                      <PricingBannerFramerComponent.Responsive/>
-                      <FooterFramerComponent.Responsive
-                          year={"2024"}
-                      />
-                      <FeatureListFramerComponent.Responsive/>
-                      <ServiceSliderFramerComponent.Responsive/>
-                      <SectionTitleFramerComponent.Responsive
-                          text={"We are pioneers in harnessing the power of Blockchain and Web3 technologies to drive innovation, security, and decentralization."}
-                          title={"Smart Automation"}
-                          tagline={"Systems and Building Web3"}
-                          iconVisible={true}
-                          textVisible={true}
-                      />
-                      <ButtonFramerComponent.Responsive
-                          link={"/news"}
-                          buttonTitle={"Read all blog"}
-                          iconVisibility={true}
-                      />
-                      <BrandLogoFramerComponent.Responsive/>
-                      <TestmonialItemFramerComponent.Responsive
-                          name1={"Wade Warren"}
-                          paragraph={"Security is non-negotiable in the decentralized world, and we take this aspect very seriously. Our solutions are built with a robust emphasis on security, utilizing advanced cryptographic"}
-                          designation={"Flutter Developer"}
-                      />
-                      <ArticlesCardFramerComponent.Responsive
-                          date={"Mar 06, 2024 "}
-                          link={"/news/:slug"}
-                          title={"Discoveries from Our Thinkers"}
-                          excerpt={"Experience seamless integration with decentralized applications (DApps)."}
-                      />
-                  </div>
-              );
+            return (
+              <div className='flex flex-col items-center gap-3 '>
+                <NavigationFramerComponent.Responsive
+                  ctaVariant={"Primary"}
+                />
+                <HeroFramerComponent.Responsive/>
+                <PricingBannerFramerComponent.Responsive/>
+                <FooterFramerComponent.Responsive
+                  year={"2024"}
+                />
+                <FeatureListFramerComponent.Responsive/>
+                <ServiceSliderFramerComponent.Responsive/>
+                <SectionTitleFramerComponent.Responsive
+                  text={"We are pioneers in harnessing the power of Blockchain and Web3 technologies to drive innovation, security, and decentralization."}
+                  title={"Smart Automation"}
+                  tagline={"Systems and Building Web3"}
+                  iconVisible={true}
+                  textVisible={true}
+                />
+                <ButtonFramerComponent.Responsive
+                  link={"/news"}
+                  buttonTitle={"Read all blog"}
+                  iconVisibility={true}
+                />
+                <BrandLogoFramerComponent.Responsive/>
+                <TestmonialItemFramerComponent.Responsive
+                  name1={"Wade Warren"}
+                  paragraph={"Security is non-negotiable in the decentralized world, and we take this aspect very seriously. Our solutions are built with a robust emphasis on security, utilizing advanced cryptographic"}
+                  designation={"Flutter Developer"}
+                />
+                <ArticlesCardFramerComponent.Responsive
+                  date={"Mar 06, 2024 "}
+                  link={"/news/:slug"}
+                  title={"Discoveries from Our Thinkers"}
+                  excerpt={"Experience seamless integration with decentralized applications (DApps)."}
+                />
+              </div>
+            );
           };"
         `)
     })

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 {