unframer 2.9.2 → 2.10.0

package/src/exporter.ts

@@ -1,12 +1,7 @@
-import { BuildResult, context } from 'esbuild'
+import { build, BuildResult } from 'esbuild'
 
-import {
-    babelPluginDeduplicateImports,
-    babelPluginJsxTransform,
-} from './babel-plugin-imports.js'
-
-import { Config } from './cli'
 import url from 'url'
+import { Config } from './cli'
 
 import { Sema } from 'async-sema'
 import dprint from 'dprint-node'
@@ -14,11 +9,10 @@ import dprint from 'dprint-node'
 import { nodeModulesPolyfillPlugin } from 'esbuild-plugins-node-modules-polyfill'
 
 import { exec } from 'child_process'
-import dedent from 'string-dedent'
 import fs from 'fs'
 import path from 'path'
+import dedent from 'string-dedent'
 import {
-    BreakpointSizes,
     ComponentFontBundle,
     breakpointsStyles,
     getFontsStyles,
@@ -38,7 +32,6 @@ import {
     combinedCSSRules,
 } from './framer.js'
 import { logger, spinner, terminalMarkdown } from './utils.js'
-import { transform } from '@babel/core'
 
 function validateUrl(url: string) {
     try {
@@ -66,7 +59,7 @@ export async function bundle({
     watch?: boolean
     signal?: AbortSignal
 }) {
-    const { components, breakpoints, tokens, outDir, framerWebPages } = config
+    const { components, breakpoints, tokens, framerWebPages } = config
     out ||= path.resolve(process.cwd(), 'example')
     out = path.resolve(out)
     try {
@@ -74,10 +67,7 @@ export async function bundle({
     } catch (e) {}
 
     spinner.start()
-    const buildContext = await context({
-        // entryPoints: {
-        //     index: url,
-        // },
+    const buildResult = await build({
         absWorkingDir: out,
         entryPoints: Object.keys(components).map((name) => {
             const url = components[name]
@@ -98,7 +88,6 @@ export async function bundle({
 
         treeShaking: true,
         splitting: true,
-        // splitting: true,
         logLevel: 'error',
 
         pure: ['addPropertyControls'],
@@ -190,23 +179,19 @@ export async function bundle({
         ],
         write: false,
 
-        // outfile: 'dist/example.js',
         outdir: out,
-        // outfile: path.resolve(cwd, sourcefile),
     })
     const doNotEditComment = `/* This file was generated by Unframer for Framer project ${
         config.projectId || ''
     } "${config.projectName}", do not edit manually */\n`
     async function rebuild() {
         const prevFiles = recursiveReaddir(out)
-        const result = await buildContext.rebuild()
 
-        for (let file of result.outputFiles!) {
+        for (let file of buildResult.outputFiles!) {
             const resultPathAbs = path.resolve(out, file.path)
             const existing = await fs.promises
                 .readFile(file.path, 'utf-8')
                 .catch(() => null)
-
             // let res = transform(file.text || '', {
             //     babelrc: false,
             //     sourceType: 'module',
@@ -220,6 +205,7 @@ export async function bundle({
             //     sourceMaps: false,
             // })
             // let inputCode = res!.code!
+
             let inputCode = file.text
 
             let codeNew =
@@ -265,14 +251,14 @@ export async function bundle({
             JSON.stringify({ type: 'module' }),
             'utf-8',
         )
-        if (!result?.outputFiles) {
+        if (!buildResult?.outputFiles) {
             throw new Error('Failed to generate result')
         }
         const sema = new Sema(5)
         spinner.start('Extracting types')
         logger.log(`using node path`, nodePath)
         const propControlsData = await Promise.all(
-            result?.outputFiles.map(async (file) => {
+            buildResult?.outputFiles.map(async (file) => {
                 try {
                     await sema.acquire()
                     const name = path
@@ -301,15 +287,12 @@ export async function bundle({
                         fileName: name,
                         config,
                     })
-                    // name = 'framer-' + name
-                    // logger.log('name', name)
                     fs.mkdirSync(out, { recursive: true })
                     fs.writeFileSync(path.resolve(out, `${name}.d.ts`), types)
                     return {
                         propertyControls,
                         fonts,
                         name,
-                        // componentPath: file.path,
                     }
                 } finally {
                     sema.release()
@@ -336,7 +319,7 @@ export async function bundle({
             .split('\n')
             .forEach((x) => logger.log(x))
 
-        const outFiles = result.outputFiles
+        const outFiles = buildResult.outputFiles
             .map((x) => path.resolve(out, x.path))
             .concat([
                 path.resolve(out, 'meta.json'),
@@ -344,7 +327,7 @@ export async function bundle({
                 path.resolve(out, 'styles.css'),
             ])
             .concat(
-                result.outputFiles.map((x) =>
+                buildResult.outputFiles.map((x) =>
                     path.resolve(out, x.path.replace('.js', '.d.ts')),
                 ),
             )
@@ -356,14 +339,13 @@ export async function bundle({
 
         fs.writeFileSync(
             path.resolve(out, 'meta.json'),
-            JSON.stringify(result.metafile, null, 2),
+            JSON.stringify(buildResult.metafile, null, 2),
             'utf-8',
         )
 
         if (signal?.aborted) {
             throw new Error('aborted')
         }
-        // logger.log('result', result)
 
         if (watch) {
             logger.log('waiting for components or config changes')
@@ -372,7 +354,7 @@ export async function bundle({
             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 })
+                getTokensCss({ out, result: buildResult })
             fs.writeFileSync(
                 path.resolve(out, 'tokens.css'),
                 tokensCss,
@@ -398,82 +380,83 @@ export async function bundle({
         return res
     }
 
-    if (!watch) {
-        const result = await rebuild()
-        await buildContext.dispose()
-        console.log()
-        console.log()
-
-        let exampleComponent = result?.components?.sort((a, b) => {
-            const aVariants = getVariantsFromPropControls(a.propertyControls)
-            const bVariants = getVariantsFromPropControls(b.propertyControls)
-            const aHasBreakpoints = (aVariants?.breakpoints?.length || 0) >= 2
-            const bHasBreakpoints = (bVariants?.breakpoints?.length || 0) >= 2
-
-            // Sort components with breakpoints first
-            if (aHasBreakpoints && !bHasBreakpoints) return -1
-            if (!aHasBreakpoints && bHasBreakpoints) return 1
-
-            // Within each group, prefer components with example properties
-            const aProp = findExampleProperty(a.propertyControls)
-            const bProp = findExampleProperty(b.propertyControls)
-            return (bProp ? 1 : 0) - (aProp ? 1 : 0)
-        })?.[0]
-        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 outDir = path.posix.relative(process.cwd(), out)
+    if (watch) {
+        throw new Error('--watch is not supported yet')
+    }
+    const result = await rebuild()
+    console.log()
+    console.log()
+
+    let exampleComponent = result?.components?.sort((a, b) => {
+        const aVariants = getVariantsFromPropControls(a.propertyControls)
+        const bVariants = getVariantsFromPropControls(b.propertyControls)
+        const aHasBreakpoints = (aVariants?.breakpoints?.length || 0) >= 2
+        const bHasBreakpoints = (bVariants?.breakpoints?.length || 0) >= 2
+
+        // Sort components with breakpoints first
+        if (aHasBreakpoints && !bHasBreakpoints) return -1
+        if (!aHasBreakpoints && bHasBreakpoints) return 1
+
+        // Within each group, prefer components with example properties
+        const aProp = findExampleProperty(a.propertyControls)
+        const bProp = findExampleProperty(b.propertyControls)
+        return (bProp ? 1 : 0) - (aProp ? 1 : 0)
+    })?.[0]
+    if (!exampleComponent) {
         logger.log(
-            'exampleComponent?.propertyControls',
-            exampleComponent?.propertyControls,
+            `No example component found with breakpoints, using random example`,
         )
-        const prop =
-            findExampleProperty(exampleComponent?.propertyControls) ||
-            'exampleFramerVariable'
-        const responsiveComponent = (() => {
-            const breakpoints = variants?.breakpoints
-            if (!breakpoints?.length) {
-                return ''
-            }
-            const variantsExample = {
-                lg: breakpoints[1],
-                base: breakpoints[0],
-            }
+        // 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 outDirNice = path.posix.relative(process.cwd(), out)
+    logger.log(
+        'exampleComponent?.propertyControls',
+        exampleComponent?.propertyControls,
+    )
+    const prop =
+        findExampleProperty(exampleComponent?.propertyControls) ||
+        'exampleFramerVariable'
+    const responsiveComponent = (() => {
+        const breakpoints = variants?.breakpoints
+        if (!breakpoints?.length) {
+            return ''
+        }
+        const variantsExample = {
+            lg: breakpoints[1],
+            base: breakpoints[0],
+        }
 
-            return dedent`
+        return dedent`
             <${exampleComponent?.componentName}.Responsive
                 ${prop}='example'
                 variants={${JSON.stringify(variantsExample || {})}}
             />
             `
-        })()
-        console.log(
-            terminalMarkdown(dedent`
+    })()
+    console.log(
+        terminalMarkdown(dedent`
         # How to use the Framer components
 
-        Your components are exported to \`${outDir}\` folder. Now please install the \`unframer\` runtime dependency:
+        Your components are exported to \`${outDirNice}\` folder. Now please install the \`unframer\` runtime dependency:
 
         \`\`\`sh
         npm install unframer
@@ -484,10 +467,10 @@ export async function bundle({
         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
-            }'
+        import './${outDirNice}/styles.css'
+        import ${exampleComponent?.componentName} from './${outDirNice}/${
+            exampleComponent?.path
+        }'
         
         export default function App() {
             return (
@@ -512,9 +495,8 @@ export async function bundle({
         Read more on GitHub: https://github.com/remorses/unframer
         
         `),
-        )
-        return result
-    }
+    )
+    return result
 
     // // when user press ctrl+c dispose
     // process.on('SIGINT', async () => {

package/src/utils.ts

@@ -17,8 +17,9 @@ const shouldDebugUnframer = !!process.env.DEBUG_UNFRAMER
 
 const prefix = '[unframer]'
 export const logger = {
+    debug: shouldDebugUnframer,
     log(...args) {
-        if (!shouldDebugUnframer) {
+        if (!logger.debug) {
             return
         }
         console.log(prefix, ...args)