unframer 2.7.7 → 2.7.9

package/src/css.ts

@@ -1,4 +1,4 @@
-import dedent from 'dedent'
+import dedent from 'string-dedent'
 import { ComponentFont } from './framer.js'
 
 function deduplicateByKey<T>(arr: T[], key: (k: T) => string): T[] {
@@ -92,7 +92,8 @@ export function getFontsStyles(_fontsDefs: ComponentFontBundle[]) {
                     str += dedent`
                     @font-face {
                         font-family: '${x.family}'; 
-                        src: url('${x.url}');\n`
+                        src: url('${x.url}');\n
+                    `
                     if (x.style) {
                         str += `    font-style: ${x.style};\n`
                     }

package/src/exporter.ts

@@ -1,4 +1,9 @@
 import { BuildResult, context } from 'esbuild'
+import {
+    babelPluginDeduplicateImports,
+    babelPluginJsxTransform,
+} from './babel-plugin-imports.js'
+
 import { Config } from './cli'
 import url from 'url'
 
@@ -8,7 +13,7 @@ import dprint from 'dprint-node'
 import { nodeModulesPolyfillPlugin } from 'esbuild-plugins-node-modules-polyfill'
 
 import { exec } from 'child_process'
-import dedent from 'dedent'
+import dedent from 'string-dedent'
 import fs from 'fs'
 import path from 'path'
 import {
@@ -32,6 +37,7 @@ import {
     combinedCSSRules,
 } from './framer.js'
 import { logger, spinner, terminalMarkdown } from './utils.js'
+import { transform } from '@babel/core'
 
 function validateUrl(url: string) {
     try {
@@ -152,11 +158,26 @@ export async function bundle({
                 .readFile(file.path, '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!
+            let inputCode = file.text
+
             let codeNew =
                 `// @ts-nocheck\n` +
                 `/* eslint-disable */\n` +
                 '/* This file was generated by Unframer, do not edit manually */\n' +
-                dprint.format(resultPathAbs, file.text, {
+                dprint.format('file.jsx', inputCode, {
                     lineWidth: 140,
                     quoteStyle: 'alwaysSingle',
                     trailingCommas: 'always',
@@ -171,10 +192,7 @@ export async function bundle({
             const lines = findRelativeLinks(codeNew)
             if (lines.length) {
                 spinner.error(
-                    `found broken links for ${path.relative(
-                        out,
-                        file.path,
-                    )}, don't use relative links in Framer components`,
+                    `found broken links for ${path.relative(out, file.path)}`,
                 )
                 lines.forEach((line) => {
                     logger.log(`${path.resolve(out, file.path)}:${line + 1}`)
@@ -329,17 +347,21 @@ export async function bundle({
         console.log()
         console.log()
 
-        let withBreakpoints = result?.components?.filter((x) => {
-            if (!x.propertyControls) return false
-            const variants = getVariantsFromPropControls(x.propertyControls)
-            return variants?.breakpoints.length >= 2
-        })
-        withBreakpoints = withBreakpoints?.sort((a, b) => {
+        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)
-        })
-        let exampleComponent = withBreakpoints?.[0]
+        })?.[0]
         if (!exampleComponent) {
             logger.log(
                 `No example component found with breakpoints, using random example`,
@@ -365,22 +387,31 @@ export async function bundle({
         const variants = getVariantsFromPropControls(
             exampleComponent?.propertyControls,
         )
-        const breakpoints = variants?.breakpoints
-        if (!breakpoints) {
-            return
-        }
+        const outDir = path.posix.relative(process.cwd(), out)
         logger.log(
             'exampleComponent?.propertyControls',
             exampleComponent?.propertyControls,
         )
-        const variantsExample = {
-            lg: breakpoints[1],
-            base: breakpoints[0],
-        }
-        let prop =
+        const prop =
             findExampleProperty(exampleComponent?.propertyControls) ||
             'exampleFramerVariable'
-        const outDir = path.posix.relative(process.cwd(), out)
+        const responsiveComponent = (() => {
+            const breakpoints = variants?.breakpoints
+            if (!breakpoints?.length) {
+                return ''
+            }
+            const variantsExample = {
+                lg: breakpoints[1],
+                base: breakpoints[0],
+            }
+
+            return dedent`
+            <${exampleComponent?.componentName}.Responsive
+                ${prop}='example'
+                variants={${JSON.stringify(variantsExample || {})}}
+            />
+            `
+        })()
         console.log(
             terminalMarkdown(dedent`
         # How to use the Framer components
@@ -408,10 +439,10 @@ export async function bundle({
                         ${prop}='example'
                         style={{ width: '100%' }}
                     />
-                    <${exampleComponent?.componentName}.Responsive
-                        ${prop}='example'
-                        variants={${JSON.stringify(variantsExample || {})}}
-                    />
+                    ${responsiveComponent
+                        .split('\n')
+                        .map((line, i) => (!i ? line : '            ' + line))
+                        .join('\n')}
                 </div>
             );
         };
@@ -422,6 +453,7 @@ export async function bundle({
         To style components you can pass a \`style\` or \`className\` prop (but remember to use !important to increase the specificity).
 
         Read more on GitHub: https://github.com/remorses/unframer
+        
         `),
         )
         return result
@@ -697,12 +729,15 @@ export async function extractPropControlsUnsafe(
         unframer: url.pathToFileURL(require.resolve('../esm/index.js')).href,
         react: url.pathToFileURL(require.resolve('react')).href,
         'react-dom': url.pathToFileURL(require.resolve('react-dom')).href,
+        'react/jsx-runtime': url.pathToFileURL(
+            require.resolve('react/jsx-runtime'),
+        ).href,
     })
     let stdout = await new Promise<string>((res, rej) => {
         let childProcess = exec(
             `${JSON.stringify(
                 nodePath,
-            )} --input-type=module --loader ${require.resolve(
+            )} --no-warnings --input-type=module --loader ${require.resolve(
                 '../dist/unframer-loader.js',
             )} -e ${JSON.stringify(code)}`,
             {