unframer 2.25.4 → 2.26.0

package/src/babel-jsx.ts

@@ -0,0 +1,277 @@
+import type * as BabelTypes from '@babel/types'
+import type { PluginObj } from '@babel/core'
+
+const noContainerTypes = new Set([
+    'JSXElement',
+    // 'StringLiteral',
+    'NumericLiteral',
+])
+
+export function removeJsxExpressionContainer({
+    types: t,
+}: {
+    types: typeof BabelTypes
+}): PluginObj {
+    const plugin: PluginObj = {
+        name: 'remove-jsx-expression-container',
+        visitor: {
+            JSXExpressionContainer: {
+                exit(path) {
+                    const expr = path.node.expression
+
+                    if (t.isJSXElement(expr) || t.isJSXFragment(expr)) {
+                        path.replaceWith(expr)
+                    } else if (t.isArrayExpression(expr)) {
+                        // Check if array contains only JSX elements/fragments
+                        const allJsx = expr.elements.every(
+                            (element) =>
+                                element &&
+                                (t.isJSXElement(element) ||
+                                    t.isJSXFragment(element)),
+                        )
+                        if (allJsx && 'elements' in expr && expr.elements) {
+                            try {
+                                const fragment: BabelTypes.JSXFragment = {
+                                    type: 'JSXFragment',
+                                    openingFragment: {
+                                        type: 'JSXOpeningFragment',
+                                    },
+                                    closingFragment: {
+                                        type: 'JSXClosingFragment',
+                                    },
+                                    children: expr.elements.filter(isTruthy) as any,
+                                }
+                                path.replaceWith(fragment)
+                            } catch (e) {
+                                console.error(
+                                    `cannot remove expression container for`,
+                                    expr,
+                                    e,
+                                )
+                            }
+                        }
+                    }
+                },
+            },
+        },
+    }
+    return plugin
+}
+
+function isTruthy<T>(value: T): value is NonNullable<T> {
+    return value != null
+}
+
+export function babelPluginJsxTransform({
+    types: t,
+}: {
+    types: typeof BabelTypes
+}) {
+    const jsxFunctions = new Set<string>()
+
+    return {
+        name: 'jsx-transform',
+        visitor: {
+            ImportDeclaration(path) {
+                const source = path.node.source.value
+
+                // Track React JSX runtime imports
+                if (
+                    source === 'react/jsx-runtime' ||
+                    source === 'react/jsx-dev-runtime'
+                ) {
+                    path.node.specifiers.forEach((specifier) => {
+                        if (
+                            t.isImportSpecifier(specifier) &&
+                            t.isIdentifier(specifier.imported)
+                        ) {
+                            const importName = specifier.imported.name
+                            const localName = specifier.local.name
+
+                            // Track common JSX runtime functions
+                            if (
+                                importName === 'jsx' ||
+                                importName === 'jsxs' ||
+                                importName === 'Fragment'
+                            ) {
+                                jsxFunctions.add(localName)
+                            }
+                        }
+                    })
+                }
+
+                // Track React imports that could be JSX functions
+                if (source === 'react') {
+                    path.node.specifiers.forEach((specifier) => {
+                        if (
+                            t.isImportSpecifier(specifier) &&
+                            t.isIdentifier(specifier.imported)
+                        ) {
+                            const importName = specifier.imported.name
+                            const localName = specifier.local.name
+
+                            // Track createElement and other JSX-related functions
+                            if (
+                                importName === 'createElement' ||
+                                importName === 'Fragment'
+                            ) {
+                                jsxFunctions.add(localName)
+                            }
+                        }
+                    })
+                }
+            },
+            CallExpression(path) {
+                // Check if it's a JSX function call
+                if (
+                    !path.node.callee ||
+                    !path.node.callee.name ||
+                    !jsxFunctions.has(path.node.callee.name)
+                ) {
+                    return
+                }
+
+                // Remove /* @__PURE__ */ comments
+                if (path.node.leadingComments) {
+                    path.node.leadingComments =
+                        path.node.leadingComments.filter(
+                            (comment) => !comment.value.includes('@__PURE__'),
+                        )
+                }
+
+                const [elementArg, propsArg] = path.node.arguments
+
+                // Get the element type name
+                let elementName = ''
+                if (elementArg.type === 'MemberExpression') {
+                    elementName = `${elementArg.object.name}.${elementArg.property.name}`
+                } else if (elementArg.type === 'StringLiteral') {
+                    elementName = elementArg.value
+                } else if (elementArg.type === 'Identifier') {
+                    if (!canRenderAsJsx(elementArg.name)) {
+                        return
+                    }
+                    elementName = elementArg.name
+                } else {
+                    // Skip if we can't determine element name
+                    return
+                }
+
+                // Convert to JSX element
+                const jsxElement: BabelTypes.JSXElement = {
+                    type: 'JSXElement',
+                    openingElement: {
+                        type: 'JSXOpeningElement',
+                        name: {
+                            type: 'JSXIdentifier',
+                            name: elementName,
+                        },
+                        attributes: [],
+                        selfClosing: !propsArg.properties.find(
+                            (p) => p.key?.name === 'children',
+                        ),
+                    },
+                    closingElement: propsArg.properties.find(
+                        (p) => p.key?.name === 'children',
+                    )
+                        ? {
+                              type: 'JSXClosingElement',
+                              name: {
+                                  type: 'JSXIdentifier',
+                                  name: elementName,
+                              },
+                          }
+                        : null,
+                    children: [],
+                }
+
+                // Add attributes
+                if (propsArg && propsArg.properties) {
+                    propsArg.properties.forEach((prop) => {
+                        if (prop.type === 'SpreadElement') {
+                            jsxElement.openingElement.attributes.push({
+                                type: 'JSXSpreadAttribute',
+                                argument: prop.argument,
+                            })
+                        } else if (prop.key?.name === 'children') {
+                            if (prop.value.type === 'ArrayExpression') {
+                                jsxElement.children = prop.value.elements.map(
+                                    (element) => {
+                                        if (
+                                            noContainerTypes.has(element.type)
+                                        ) {
+                                            return element
+                                        }
+                                        return {
+                                            type: 'JSXExpressionContainer',
+                                            expression: element,
+                                        }
+                                    },
+                                )
+                            } else {
+                                if (noContainerTypes.has(prop.value.type)) {
+                                    jsxElement.children = [prop.value]
+                                } else {
+                                    jsxElement.children = [
+                                        {
+                                            type: 'JSXExpressionContainer',
+                                            expression: prop.value,
+                                        },
+                                    ]
+                                }
+                            }
+                        } else {
+                            let attrName = prop.key?.name
+                            if (
+                                !attrName &&
+                                prop.key?.type === 'StringLiteral'
+                            ) {
+                                attrName = prop.key.value
+                            }
+                            if (!attrName) {
+                                console.log(
+                                    `no prop.key?.name for ${JSON.stringify(
+                                        prop,
+                                    )}`,
+                                )
+                                return
+                            }
+
+                            jsxElement.openingElement.attributes.push({
+                                type: 'JSXAttribute',
+                                name: {
+                                    type: 'JSXIdentifier',
+                                    name: attrName,
+                                },
+                                value: {
+                                    type: 'JSXExpressionContainer',
+                                    expression: prop.value,
+                                },
+                            })
+                        }
+                    })
+                }
+
+                path.replaceWith(jsxElement)
+            },
+        },
+    }
+}
+
+function jsonStringifyWithMaps(map) {
+    return JSON.stringify(
+        [...map],
+        (key, value) => (value instanceof Map ? [...value] : value),
+        2,
+    )
+}
+
+function canRenderAsJsx(name: string): boolean {
+    // 1. Valid JS identifier?
+    const isIdentifier = /^[$A-Za-z_][$\w]*$/.test(name)
+    if (!isIdentifier) return false
+
+    // 2. First char not lowercase letter?
+    const first = name[0]
+    return first.toUpperCase() === first
+}

package/src/babel-plugin-imports.ts

@@ -1,9 +1,11 @@
 import * as BabelTypes from '@babel/types'
 
 import { PluginObj } from '@babel/core'
-import { ImportDeclaration, ImportSpecifier, Identifier } from '@babel/types'
+import type {
+    ImportDeclaration,
+    ImportSpecifier
+} from '@babel/types'
 import BatchRenamer from './renamer'
-import { logger } from './utils'
 
 export function babelPluginDeduplicateImports({
     types: t,
@@ -116,7 +118,7 @@ export function babelPluginDeduplicateImports({
             },
             Program: {
                 exit(path) {
-                    console.log(`renaming imports...`)
+                    // console.log(`renaming imports...`)
                     for (const [source, modMap] of importAliasMap) {
                         // rename import names to consolidated names
                         for (let [local, { consolidated, path: p }] of modMap) {
@@ -150,7 +152,7 @@ export function babelPluginDeduplicateImports({
 
                     const definedImports = new Set<string>()
                     const later = [] as Function[]
-                    console.log(`removing duplicates...`)
+                    // console.log(`removing duplicates...`)
                     for (let importDec of importDecs) {
                         const source = importDec.source.value
 
@@ -274,168 +276,3 @@ export function babelPluginRenameExports({
         },
     }
 }
-
-// Set of types that don't need expression containers
-const noContainerTypes = new Set([
-    'JSXElement',
-    // 'StringLiteral',
-    'NumericLiteral',
-])
-
-export function babelPluginJsxTransform() {
-    return {
-        name: 'jsx-transform',
-        visitor: {
-            CallExpression(path) {
-                // Check if it's a _jsx or _jsxs call
-                if (
-                    !path.node.callee ||
-                    !path.node.callee.name?.startsWith('_jsx')
-                ) {
-                    return
-                }
-
-                // Remove /* @__PURE__ */ comments
-                if (path.node.leadingComments) {
-                    path.node.leadingComments =
-                        path.node.leadingComments.filter(
-                            (comment) => !comment.value.includes('@__PURE__'),
-                        )
-                }
-
-                const [elementArg, propsArg] = path.node.arguments
-
-                // Get the element type name
-                let elementName = ''
-                if (elementArg.type === 'MemberExpression') {
-                    elementName = `${elementArg.object.name}.${elementArg.property.name}`
-                } else if (elementArg.type === 'StringLiteral') {
-                    elementName = elementArg.value
-                } else if (elementArg.type === 'Identifier') {
-                    elementName = elementArg.name
-                } else {
-                    // Skip if we can't determine element name
-                    return
-                }
-
-                // Convert to JSX element
-                const jsxElement: BabelTypes.JSXElement = {
-                    type: 'JSXElement',
-                    openingElement: {
-                        type: 'JSXOpeningElement',
-                        name: {
-                            type: 'JSXIdentifier',
-                            name: elementName,
-                        },
-                        attributes: [],
-                        selfClosing: !propsArg.properties.find(
-                            (p) => p.key?.name === 'children',
-                        ),
-                    },
-                    closingElement: propsArg.properties.find(
-                        (p) => p.key?.name === 'children',
-                    )
-                        ? {
-                              type: 'JSXClosingElement',
-                              name: {
-                                  type: 'JSXIdentifier',
-                                  name: elementName,
-                              },
-                          }
-                        : null,
-                    children: [],
-                }
-
-                // Add attributes
-                if (propsArg && propsArg.properties) {
-                    propsArg.properties.forEach((prop) => {
-                        if (prop.type === 'SpreadElement') {
-                            jsxElement.openingElement.attributes.push({
-                                type: 'JSXSpreadAttribute',
-                                argument: prop.argument,
-                            })
-                        } else if (prop.key?.name === 'children') {
-                            if (prop.value.type === 'ArrayExpression') {
-                                jsxElement.children = prop.value.elements.map(
-                                    (element) => {
-                                        if (
-                                            noContainerTypes.has(
-                                                element.type,
-                                            ) ||
-                                            (element.type ===
-                                                'CallExpression' &&
-                                                element.callee?.name?.startsWith(
-                                                    '_jsx',
-                                                ))
-                                        ) {
-                                            return element
-                                        }
-                                        return {
-                                            type: 'JSXExpressionContainer',
-                                            expression: element,
-                                        }
-                                    },
-                                )
-                            } else {
-                                if (
-                                    noContainerTypes.has(prop.value.type) ||
-                                    (prop.value.type === 'CallExpression' &&
-                                        prop.value.callee?.name?.startsWith(
-                                            '_jsx',
-                                        ))
-                                ) {
-                                    jsxElement.children = [prop.value]
-                                } else {
-                                    jsxElement.children = [
-                                        {
-                                            type: 'JSXExpressionContainer',
-                                            expression: prop.value,
-                                        },
-                                    ]
-                                }
-                            }
-                        } else {
-                            let attrName = prop.key?.name
-                            if (
-                                !attrName &&
-                                prop.key?.type === 'StringLiteral'
-                            ) {
-                                attrName = prop.key.value
-                            }
-                            if (!attrName) {
-                                console.log(
-                                    `no prop.key?.name for ${JSON.stringify(
-                                        prop,
-                                    )}`,
-                                )
-                                return
-                            }
-
-                            jsxElement.openingElement.attributes.push({
-                                type: 'JSXAttribute',
-                                name: {
-                                    type: 'JSXIdentifier',
-                                    name: attrName,
-                                },
-                                value: {
-                                    type: 'JSXExpressionContainer',
-                                    expression: prop.value,
-                                },
-                            })
-                        }
-                    })
-                }
-
-                path.replaceWith(jsxElement)
-            },
-        },
-    }
-}
-
-function jsonStringifyWithMaps(map) {
-    return JSON.stringify(
-        [...map],
-        (key, value) => (value instanceof Map ? [...value] : value),
-        2,
-    )
-}

package/src/cli.ts

@@ -1,7 +1,7 @@
 import { setMaxListeners } from 'events'
 import { fetch } from 'undici'
 import './sentry.js'
-import JSON from 'json5'
+
 import { bundle, StyleToken } from './exporter.js'
 import { createClient } from './generated/api-client.js'
 
@@ -12,13 +12,13 @@ import path, { basename } from 'path'
 import { BreakpointSizes, defaultBreakpointSizes } from './css.js'
 import {
     componentNameToPath,
-    dispatcher,
     isTruthy,
     logger,
     sleep,
     spinner,
 } from './utils.js'
 import { notifyError } from './sentry.js'
+import { dispatcher } from './undici-dispatcher.js'
 const configNames = ['unframer.config.json', 'unframer.json']
 
 export const cli = cac('unframer')
@@ -35,6 +35,9 @@ cli.command('[projectId]', 'Run unframer with optional project ID')
         },
     )
     .option('--watch', 'Watch for changes and rebuild', { default: false })
+    .option('--jsx', 'Output jsx code instead of minified .js code', {
+        default: false,
+    })
     .option('--debug', 'Enable debug logging', { default: false })
     .action(async function main(projectId, options) {
         const external_ = options.external
@@ -59,8 +62,12 @@ cli.command('[projectId]', 'Run unframer with optional project ID')
                     outDir,
                     projectId,
                 })
+                let jsx = options.jsx
                 const { rebuild, buildContext } = await bundle({
-                    config,
+                    config: {
+                        jsx,
+                        ...config,
+                    },
                     watch,
                     cwd,
                     signal,
@@ -105,8 +112,8 @@ cli.command('[projectId]', 'Run unframer with optional project ID')
             fixOldUnframerPath()
             const cwd = process.cwd()
             logger.log(`Looking for ${configNames.join(', ')} in ${cwd}`)
-            const { findUp } = await import('find-up')
-            const configPath = await findUp(configNames, { cwd })
+
+            const configPath = findUp(configNames, { cwd })
             if (!configPath) {
                 logger.log(`No ${configNames.join(', ')} found`)
                 return
@@ -117,7 +124,12 @@ cli.command('[projectId]', 'Run unframer with optional project ID')
                 logger.log(`No ${configBasename} contents found`)
                 return
             }
-            const config = JSON.parse(configContent)
+            const configContentWithoutComments = configContent.replace(
+                /^\s*\/\/.*$/gm,
+                '',
+            )
+
+            const config = JSON.parse(configContentWithoutComments)
             if (outDir !== defaultOutDir) {
                 config.outDir = outDir
             }
@@ -177,6 +189,7 @@ cli.command('init', 'Init the unframer.config.json config').action(
 )
 
 export type Config = {
+    jsx?: boolean
     components: {
         [name: string]: string
     }
@@ -282,6 +295,7 @@ export async function configFromFetch({
             }) || []
     const config: Config = {
         ...data,
+
         breakpoints: defaultBreakpointSizes,
         outDir,
         externalPackages,
@@ -315,3 +329,28 @@ export async function configFromFetch({
     }
     return { websiteUrl, cwd, config }
 }
+
+function findUp(
+    configNames: string[],
+    { cwd }: { cwd: string },
+): string | null {
+    let currentDir = cwd
+
+    while (true) {
+        for (const configName of configNames) {
+            const configPath = path.join(currentDir, configName)
+            if (fs.existsSync(configPath)) {
+                return configPath
+            }
+        }
+
+        const parentDir = path.dirname(currentDir)
+        if (parentDir === currentDir) {
+            // Reached the root directory
+            break
+        }
+        currentDir = parentDir
+    }
+
+    return null
+}