unframer 2.7.0 → 2.7.2

package/src/exporter.ts

@@ -1,23 +1,15 @@
-import { Plugin, build, transform, context, BuildResult } from 'esbuild'
+import { BuildResult, context } from 'esbuild'
 import url from 'url'
 
 import { Sema } from 'async-sema'
 import dprint from 'dprint-node'
-import tmp from 'tmp'
 
 import { polyfillNode } from 'esbuild-plugin-polyfill-node'
 
-import {
-    ComponentFont,
-    ControlDescription,
-    ControlType,
-    PropertyControls,
-    combinedCSSRules,
-} from './framer'
-import { fetch as _fetch } from 'native-fetch'
+import { exec } from 'child_process'
+import dedent from 'dedent'
 import fs from 'fs'
 import path from 'path'
-import { exec, execSync } from 'child_process'
 import {
     BreakpointSizes,
     ComponentFontBundle,
@@ -26,13 +18,18 @@ import {
     groupBy,
     logFontsUsage,
 } from './css.js'
-import dedent from 'dedent'
-import { logger, terminalMarkdown } from './utils.js'
 import {
     esbuildPluginBundleDependencies,
-    resolveRedirect,
     externalPackages,
+    resolveRedirect,
 } from './esbuild'
+import {
+    ControlDescription,
+    ControlType,
+    PropertyControls,
+    combinedCSSRules
+} from './framer'
+import { logger, spinner, terminalMarkdown } from './utils.js'
 
 function validateUrl(url: string) {
     try {
@@ -63,6 +60,7 @@ export async function bundle({
         fs.mkdirSync(out, { recursive: true })
     } catch (e) {}
 
+    spinner.start()
     const buildContext = await context({
         // entryPoints: {
         //     index: url,
@@ -160,14 +158,14 @@ export async function bundle({
                 })
             const lines = findRelativeLinks(codeNew)
             if (lines.length) {
-                logger.error(
+                spinner.error(
                     `found broken links for ${path.relative(
                         out,
                         file.path,
                     )}, don't use relative links in Framer components`,
                 )
                 lines.forEach((line) => {
-                    logger.error(`${path.resolve(out, file.path)}:${line + 1}`)
+                    logger.log(`${path.resolve(out, file.path)}:${line + 1}`)
                 })
             }
 
@@ -177,8 +175,10 @@ export async function bundle({
             logger.log(`writing`, path.relative(out, file.path))
             fs.writeFileSync(resultPathAbs, codeNew, 'utf-8')
         }
+        spinner.stop()
+
         let allFonts = [] as ComponentFontBundle[]
-        const sema = new Sema(10)
+        
         const packageJson = path.resolve(out, 'package.json')
         fs.writeFileSync(
             packageJson,
@@ -188,7 +188,8 @@ export async function bundle({
         if (!result?.outputFiles) {
             throw new Error('Failed to generate result')
         }
-
+        const sema = new Sema(6)
+        spinner.start('Extracting types')
         const propControlsData = await Promise.all(
             result?.outputFiles.map(async (file) => {
                 try {
@@ -199,6 +200,7 @@ export async function bundle({
                         return
                     }
                     logger.log(`extracting types for ${name}`)
+                    spinner.update(`Extracting types for ${name}`)
                     const { propertyControls, fonts } =
                         await extractPropControlsUnsafe(resultPathAbs, name)
                     if (!propertyControls) {
@@ -227,6 +229,7 @@ export async function bundle({
                 }
             }),
         ).finally(() => fs.rmSync(packageJson))
+        spinner.stop()
 
         const cssString =
             '/* This file was generated by Unframer, do not edit manually */\n' +
@@ -303,41 +306,92 @@ export async function bundle({
                 }
             }),
         }
+
         return res
     }
 
     if (!watch) {
         const result = await rebuild()
         await buildContext.dispose()
+        console.log()
+        console.log()
+
+        let exampleComponent = result?.components?.find((x) => {
+            if (!x.propertyControls) return false
+            const variants = getVariantsFromPropControls(x.propertyControls)
+            return variants?.breakpoints.length >= 2
+        })
+        if (!exampleComponent) {
+            logger.log(
+                `No example component found with breakpoints, using random example`,
+            )
+            // Create an example component if none found with breakpoints
+            exampleComponent = {
+                path: 'hero',
+                componentName: 'HeroFramerComponent',
+                propertyControls: {
+                    variant: {
+                        type: ControlType.Enum,
+                        options: ['Desktop', 'Tablet', 'Mobile'],
+                        optionTitles: ['Desktop', 'Tablet', 'Mobile'],
+                    },
+                } as any,
+                name: 'Hero',
+                url: '',
+            }
+            if (!exampleComponent) {
+                return
+            }
+        }
+        const variants = getVariantsFromPropControls(
+            exampleComponent?.propertyControls,
+        )
+        const breakpoints = variants?.breakpoints
+        if (!breakpoints) {
+            return
+        }
+        logger.log(
+            'exampleComponent?.propertyControls',
+            exampleComponent?.propertyControls,
+        )
+        const variantsExample = {
+            lg: breakpoints[1],
+            base: breakpoints[0],
+        }
+        let prop =
+            findExampleProperty(exampleComponent?.propertyControls) ||
+            'exampleFramerVariable'
+        const outDir = path.posix.relative(process.cwd(), out)
         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).
+        Your components are exported to \`${outDir}\` folder. Now please install the \`unframer\` runtime dependency:
+
+        \`\`\`sh
+        npm install unframer
+        \`\`\`
+
         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'
+        
+        You can use the components like this (try copy pasting the code below into your React app):
+
+        \`\`\`jsx
+        import './${outDir}/styles.css'
+        import ${exampleComponent?.componentName} from './${outDir}/${
+                exampleComponent?.path
+            }'
         
         export default function App() {
             return (
                 <div>
-                    <Logos.Responsive
-                        variants={{
-                            lg: 'Desktop',
-                            md: 'Tablet',
-                            base: 'Mobile',
-                        }}
+                    <${exampleComponent?.componentName}
+                        ${prop}='example'
+                        style={{ width: '100%' }}
+                    />
+                    <${exampleComponent?.componentName}.Responsive
+                        ${prop}='example'
+                        variants={${JSON.stringify(variantsExample || {})}}
                     />
                 </div>
             );
@@ -346,20 +400,9 @@ export async function bundle({
 
         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:
+        To style components you can pass a \`style\` or \`className\` prop (but remember to use !important to increase the specificity).
 
-        \`\`\`tsx
-        import './framer/styles.css'
-        import Logos from './framer/logos'
-        
-        export default function App() {
-            return (
-                <div>
-                    <Logos variant="Desktop" />
-                </div>
-            );
-        };
-        \`\`\`
+        Read more on GitHub: https://github.com/remorses/unframer
         `),
         )
         return result
@@ -614,7 +657,6 @@ function getTokensCss({
     const tokensCss = `:root {\n${cssStrings}\n}`
     return tokensCss
 }
-
 export async function extractPropControlsUnsafe(
     filename,
     name,
@@ -631,19 +673,35 @@ export async function extractPropControlsUnsafe(
     )}).then(x => { console.log(${JSON.stringify(
         delimiter,
     )}); console.log(${propCode}) })`
-    let stdout = await new Promise<string>((res, rej) =>
-        exec(
+
+    const TIMEOUT = 2 * 1000
+    let stdout = await new Promise<string>((res, rej) => {
+        let childProcess = exec(
             `${JSON.stringify(
                 nodePath,
             )} --input-type=module -e ${JSON.stringify(code)}`,
             (err, stdout) => {
+                clearTimeout(timer)
                 if (err) {
                     return rej(err)
                 }
                 res(stdout)
             },
-        ),
-    )
+        )
+
+        const timer = setTimeout(() => {
+            childProcess.kill()
+            rej(
+                new Error(
+                    `Timed out after ${TIMEOUT}ms while extracting types for ${name}`,
+                ),
+            )
+        }, TIMEOUT)
+    }).catch((e) => {
+        logger.error(`error extracting types for ${name}`)
+        logger.log(e.stack)
+        throw e
+    })
 
     stdout = stdout.split(delimiter)[1]
     // console.log(stdout)
@@ -879,3 +937,42 @@ export function componentCamelCase(str: string) {
     str = str + 'FramerComponent'
     return str
 }
+
+const breakpointVariants = ['mobile', 'tablet', 'desktop']
+
+function getVariantsFromPropControls(propControls?: PropertyControls) {
+    if (!propControls?.variant) {
+        return null
+    }
+
+    let variants =
+        propControls.variant?.['optionTitles'] ||
+        propControls.variant?.['options'] ||
+        []
+    // Sort breakpoint-related variants first
+    return {
+        variants: variants,
+        breakpoints: variants.filter((v) =>
+            breakpointVariants.some((device) =>
+                v.toLowerCase().includes(device),
+            ),
+        ),
+    }
+}
+
+function findExampleProperty(propertyControls?: PropertyControls) {
+    if (!propertyControls) {
+        return null
+    }
+
+    const stringProp = Object.entries(propertyControls).find(([_, control]) => {
+        // console.log('control', _, control)
+        return control?.type === ControlType.String
+    })
+
+    if (!stringProp) {
+        return null
+    }
+
+    return stringProp[0]
+}

package/src/utils.ts

@@ -2,6 +2,9 @@ import pico from 'picocolors'
 
 import { marked } from 'marked'
 import { markedTerminal } from 'marked-terminal'
+import { createSpinner } from 'nanospinner'
+
+export const spinner = createSpinner('Downloading Framer Components') as any
 
 marked.use(markedTerminal())
 
@@ -9,9 +12,14 @@ export function terminalMarkdown(markdown: string) {
     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) {