unframer 2.7.6 → 2.7.8

package/src/exporter.ts

@@ -1,4 +1,10 @@
 import { BuildResult, context } from 'esbuild'
+import {
+    babelPluginDeduplicateImports,
+    babelPluginJsxTransform,
+} from './babel-plugin-imports.js'
+
+import { Config } from './cli'
 import url from 'url'
 
 import { Sema } from 'async-sema'
@@ -7,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 {
@@ -21,6 +27,7 @@ import {
 import {
     esbuildPluginBundleDependencies,
     externalPackages,
+    replaceWebPageIds,
     resolveRedirect,
 } from './esbuild'
 import {
@@ -30,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 {
@@ -47,13 +55,17 @@ export type StyleToken = {
 }
 
 export async function bundle({
+    config,
     cwd: out = '',
     watch = false,
-    components = {} as Record<string, string>,
-    tokens = [] as StyleToken[],
-    breakpoints = {} as BreakpointSizes,
     signal = undefined as AbortSignal | undefined,
+}: {
+    config: Config
+    cwd: string
+    watch?: boolean
+    signal?: AbortSignal
 }) {
+    const { components, breakpoints, tokens, outDir, framerWebPages } = config
     out ||= path.resolve(process.cwd(), 'example')
     out = path.resolve(out)
     try {
@@ -146,23 +158,41 @@ 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',
                     semiColons: 'always',
                 })
+            if (framerWebPages?.length) {
+                codeNew = replaceWebPageIds({
+                    code: codeNew,
+                    elements: framerWebPages,
+                })
+            }
             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}`)
@@ -236,7 +266,7 @@ export async function bundle({
             '/* This file was generated by Unframer, do not edit manually */\n' +
             '/* This css file has all the necessary styles to run all your components */\n' +
             '\n' +
-            getStyleTokensCss(tokens) +
+            getStyleTokensCss(tokens || []) +
             breakpointsStyles(breakpoints) +
             '\n\n' +
             combinedCSSRules
@@ -317,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`,
@@ -353,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
@@ -396,10 +439,12 @@ 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>
             );
         };
@@ -410,6 +455,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
@@ -663,10 +709,6 @@ function getTokensCss({
 
 const nodePath = process.argv[0] || 'node'
 
-let UNFRAMER_RUNTIME_PATH = url.pathToFileURL(
-    require.resolve('../esm/index.js'),
-).href
-
 export async function extractPropControlsUnsafe(
     filename,
     name,
@@ -685,6 +727,11 @@ export async function extractPropControlsUnsafe(
     )}); console.log(${propCode}) })`
 
     const TIMEOUT = 5 * 1000
+    const UNFRAMER_MAP_PACKAGES = JSON.stringify({
+        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,
+    })
     let stdout = await new Promise<string>((res, rej) => {
         let childProcess = exec(
             `${JSON.stringify(
@@ -695,14 +742,17 @@ export async function extractPropControlsUnsafe(
             {
                 env: {
                     // ...process.env,
-                    UNFRAMER_RUNTIME_PATH,
+                    UNFRAMER_MAP_PACKAGES,
                 },
             },
-            (err, stdout) => {
+            (err, stdout, stderr) => {
                 clearTimeout(timer)
                 if (err) {
+                    spinner.error(`error extracting types for ${name}`)
+                    spinner.error(stderr)
                     return rej(err)
                 }
+
                 res(stdout)
             },
         )
@@ -716,12 +766,15 @@ export async function extractPropControlsUnsafe(
             )
         }, TIMEOUT)
     }).catch((e) => {
-        spinner.error(`error extracting types for ${name}`)
         logger.log(e.stack)
-        throw e
+        return ''
     })
 
-    stdout = stdout.split(delimiter)[1]
+    stdout = stdout.split(delimiter)[1] || ''
+    if (!stdout) {
+        return {}
+    }
+
     // console.log(stdout)
     return safeJsonParse(stdout)
 }
@@ -1000,7 +1053,7 @@ export function propCamelCase(str: string) {
     }
     // Convert dashes to camelCase (e.g. foo-bar -> fooBar)
     str = str.replace(/-([\w])/g, (g) => g[1].toUpperCase())
-    // Convert underscores to camelCase (e.g. foo_bar -> fooBar) 
+    // Convert underscores to camelCase (e.g. foo_bar -> fooBar)
     str = str.replace(/_([a-z])/g, (g) => g[1].toUpperCase())
     // Remove spaces (e.g. "Foo Bar" -> "fooBar")
     str = str.replace(/\s+(.)/g, (_, c) => c.toUpperCase())