unframer 2.7.6 → 2.7.8

package/src/babel-plugin-imports.ts

@@ -0,0 +1,441 @@
+import * as BabelTypes from '@babel/types'
+
+import { PluginObj } from '@babel/core'
+import { ImportDeclaration, ImportSpecifier, Identifier } from '@babel/types'
+import BatchRenamer from './renamer'
+import { logger } from './utils'
+
+export function babelPluginDeduplicateImports({
+    types: t,
+}: {
+    types: typeof BabelTypes
+}): PluginObj {
+    const importAliasMap = new Map<
+        string,
+        Map<
+            string,
+            { consolidated: string; importName; path: ImportSpecifier; source }
+        >
+    >()
+
+    function addImport({
+        source,
+        local,
+        consolidated,
+        importName,
+        path,
+    }: {
+        source: string
+        local: string
+        consolidated: string
+        importName: string
+        path
+    }) {
+        if (!importAliasMap.has(source)) {
+            importAliasMap.set(source, new Map())
+        }
+        importAliasMap
+            .get(source)
+            ?.set(local, { consolidated, importName, path, source })
+    }
+
+    function getConsolidatedName({ source, importName, defaultOne }) {
+        const allSpecifiers = [...importAliasMap.values()].flatMap((x) => [
+            ...x.values(),
+        ])
+        const first = allSpecifiers.find((x) => {
+            if (importName === 'default' || importName === 'namespace') {
+                if (source !== x.source) {
+                    return false
+                }
+            }
+            return x.importName === importName
+        })
+        return first?.consolidated || defaultOne
+    }
+
+    return {
+        visitor: {
+            ImportDeclaration(path) {
+                const source = path.node.source.value
+
+                path.node.specifiers.forEach((specifier) => {
+                    if (
+                        t.isImportSpecifier(specifier) &&
+                        BabelTypes.isIdentifier(specifier.imported)
+                    ) {
+                        const importName = specifier.imported.name
+
+                        const consolidatedName = getConsolidatedName({
+                            source,
+                            importName,
+                            defaultOne: specifier.local.name,
+                        })
+                        addImport({
+                            source,
+                            local: specifier.local.name,
+                            importName,
+                            consolidated: consolidatedName,
+                            path,
+                        })
+                    } else if (t.isImportDefaultSpecifier(specifier)) {
+                        const importName = 'default'
+
+                        const consolidatedName = getConsolidatedName({
+                            source,
+                            importName,
+                            defaultOne: specifier.local.name,
+                        })
+                        addImport({
+                            source,
+                            local: specifier.local.name,
+                            importName,
+                            consolidated: consolidatedName,
+                            path,
+                        })
+                    } else if (t.isImportNamespaceSpecifier(specifier)) {
+                        const importName = 'namespace'
+
+                        const consolidatedName = getConsolidatedName({
+                            source,
+                            importName,
+                            defaultOne: specifier.local.name,
+                        })
+                        addImport({
+                            source,
+                            local: specifier.local.name,
+                            importName,
+                            consolidated: consolidatedName,
+                            path,
+                        })
+                    }
+                })
+
+                // Remove the current import declaration to later add the consolidated one
+                // path.remove()
+            },
+            Program: {
+                exit(path) {
+                    console.log(`renaming imports...`)
+                    for (const [source, modMap] of importAliasMap) {
+                        // rename import names to consolidated names
+                        for (let [local, { consolidated, path: p }] of modMap) {
+                            logger.log(
+                                `renaming ${local} to ${consolidated}...`,
+                            )
+                        }
+                    }
+
+                    const map = new Map<string, string>(
+                        [...importAliasMap.values()].flatMap((x) => {
+                            return [...x.entries()]
+                                .map(([prev, x]) => {
+                                    if (prev === x.consolidated) {
+                                        return
+                                    }
+                                    return [prev, x.consolidated]
+                                })
+                                .filter((x) => x !== undefined) as Array<
+                                [string, string]
+                            >
+                        }),
+                    )
+                    // console.log([...map.entries()])
+                    const renamer = new BatchRenamer(path.scope, map)
+                    renamer.rename()
+
+                    const importDecs = path.node.body.filter((node) =>
+                        t.isImportDeclaration(node),
+                    ) as ImportDeclaration[]
+
+                    const definedImports = new Set<string>()
+                    const later = [] as Function[]
+                    console.log(`removing duplicates...`)
+                    for (let importDec of importDecs) {
+                        const source = importDec.source.value
+
+                        const specifiers = importDec.specifiers
+                        for (let specifier of specifiers) {
+                            if (
+                                !BabelTypes.isImportSpecifier(specifier) &&
+                                !BabelTypes.isImportDefaultSpecifier(
+                                    specifier,
+                                ) &&
+                                !BabelTypes.isImportNamespaceSpecifier(
+                                    specifier,
+                                )
+                            ) {
+                                continue
+                            }
+                            let importKey = ''
+                            if (
+                                BabelTypes.isImportDefaultSpecifier(specifier)
+                            ) {
+                                importKey = source + 'default'
+                            } else if (
+                                BabelTypes.isImportNamespaceSpecifier(specifier)
+                            ) {
+                                importKey = source + 'namespace'
+                            } else {
+                                if (
+                                    !BabelTypes.isIdentifier(specifier.imported)
+                                ) {
+                                    continue
+                                }
+                                importKey = specifier.imported.name
+                            }
+
+                            if (definedImports.has(importKey)) {
+                                later.push(() => {
+                                    console.log(
+                                        `removing ${importKey} from ${source}...`,
+                                    )
+
+                                    importDec.specifiers =
+                                        importDec.specifiers.filter(
+                                            (x) => x !== specifier,
+                                        )
+                                    if (!importDec.specifiers.length) {
+                                        const index = path.node.body.findIndex(
+                                            (x) => x === importDec,
+                                        )
+                                        path.node.body.splice(index, 1)
+                                    }
+                                })
+                            }
+                            definedImports.add(importKey)
+                        }
+                    }
+                    for (let fn of later) {
+                        fn()
+                    }
+                },
+            },
+            // Identifier(path) {
+            //     const name = path.node.name
+            //     const binding = path.scope.getBinding(name)
+
+            //     if (binding && t.isImportSpecifier(binding.path.node)) {
+            //         const source = (binding.path.parent as ImportDeclaration)
+            //             .source.value
+            //         const localName = getLocalImportName(source, name)
+
+            //         if (localName && localName !== name) {
+            //             path.node.name = localName
+            //         }
+            //     }
+            // },
+        },
+    }
+}
+
+export function babelPluginRenameExports({
+    map,
+}: {
+    map: Map<string, string>
+}) {
+    return {
+        name: 'rename-exports',
+        visitor: {
+            ExportNamedDeclaration(path) {
+                const { specifiers, declaration } = path.node
+                // Handle export specifiers like: export { something as oldName }
+                for (const specifier of specifiers) {
+                    if (!BabelTypes.isExportSpecifier(specifier)) continue
+                    const exported = specifier.exported
+                    if (!BabelTypes.isIdentifier(exported)) continue
+                    const oldName = exported.name
+                    const newName = map.get(oldName)
+                    if (newName) {
+                        exported.name = newName
+                    }
+                }
+                // Handle function declarations like: export function oldName1() {}
+                if (BabelTypes.isFunctionDeclaration(declaration)) {
+                    const oldName = declaration.id?.name
+                    if (oldName) {
+                        const newName = map.get(oldName)
+                        if (newName && declaration?.id) {
+                            declaration.id.name = newName
+                        }
+                    }
+                }
+            },
+            ExportDefaultDeclaration(path) {
+                const { declaration } = path.node
+                if (BabelTypes.isIdentifier(declaration)) {
+                    const oldName = declaration.name
+                    const newName = map.get(oldName)
+                    if (newName) {
+                        declaration.name = newName
+                    }
+                }
+            },
+        },
+    }
+}
+
+// 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.tsx

@@ -9,19 +9,12 @@ import path, { basename } from 'path'
 import { BreakpointSizes } from './css.js'
 import { logger } from './utils.js'
 const configNames = ['unframer.config.json', 'unframer.json']
+import kebabCase from 'just-kebab-case'
 
 export const cli = cac('unframer')
 
 let defaultOutDir = 'framer'
 
-function nameToFolder(name: string) {
-    return name
-        .replace(/[^a-zA-Z0-9]/g, '-') // Replace non-alphanumeric with dash
-        .replace(/-+/g, '-') // Replace multiple dashes with single dash
-        .replace(/^-|-$/g, '') // Remove leading/trailing dashes
-        .toLowerCase()
-}
-
 cli.command('[projectId]', 'Run unframer with optional project ID')
     .option('--outDir <dir>', 'Output directory', { default: defaultOutDir })
     .action(async function main(projectId, options) {
@@ -40,20 +33,20 @@ cli.command('[projectId]', 'Run unframer with optional project ID')
                 return
             }
             const data = await response.json()
-            return processConfig({
+            logger.log('unframer data', data)
+            let cwd = path.resolve(process.cwd(), outDir || 'framer')
+            return await bundle({
                 config: {
                     outDir,
                     components: Object.fromEntries(
-                        data.components.map((c) => [
-                            nameToFolder(c.name),
-                            c.url,
-                        ]),
+                        data.components.map((c) => [kebabCase(c.name), c.url]),
                     ),
                     tokens: data.colorStyles,
+                    framerWebPages: data.framerWebPages || [],
                 },
                 watch: false,
 
-                configBasename: 'remote config',
+                cwd,
                 signal: new AbortController().signal,
             })
         }
@@ -79,11 +72,11 @@ cli.command('[projectId]', 'Run unframer with optional project ID')
 
         let controller = new AbortController()
         setMaxListeners(0, controller.signal)
-        processConfig({
+        await bundle({
             config,
             watch: false,
             signal: controller.signal,
-            configBasename,
+            cwd: path.resolve(process.cwd(), outDir || 'framer'),
         })
     })
 
@@ -154,46 +147,12 @@ function getNewNames(oldConfig: Config, newConfig: Config) {
     return newNames
 }
 
-type Config = {
+export type Config = {
     components: {
         [name: string]: string
     }
+    framerWebPages?: { webPageId: string; path: string }[]
     breakpoints?: BreakpointSizes
     tokens?: StyleToken[]
     outDir?: string
 }
-async function processConfig({
-    config,
-    watch,
-    signal,
-    configBasename,
-}: {
-    config: Config
-    watch: boolean
-    configBasename: string
-    signal?: AbortSignal
-}) {
-    try {
-        const { components, breakpoints, outDir } = config || {}
-        const installDir = path.resolve(process.cwd(), outDir || 'framer')
-        if (!components) {
-            logger.log(`No components found in ${configBasename}`)
-            return
-        }
-
-        await bundle({
-            components,
-            breakpoints,
-            cwd: installDir,
-            watch,
-            tokens: config.tokens,
-            signal,
-        })
-    } catch (e: any) {
-        if (signal) {
-            logger.log('Error processing config', e.stack)
-            return
-        }
-        throw e
-    }
-}

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/esbuild.ts

@@ -12,6 +12,28 @@ export const externalPackages = [
 ]
 
 let redirectCache = new Map<string, Promise<string>>()
+
+export const replaceWebPageIds = ({
+    elements,
+    code,
+}: {
+    elements: { webPageId: string; path: string }[]
+    code: string
+}) => {
+    // Match webPageId pattern with optional trailing comma
+    const pattern = /{[\s\n]*webPageId[\s\n]*:[\s\n]*(['"])(.*?)\1[\s\n]*,?[\s\n]*}/g
+
+    return code.replace(pattern, (match, quote, id) => {
+        const path = elements.find((e) => e.webPageId === id)?.path
+        if (!path) {
+            return match
+        }
+
+        logger.log(`Replacing relative link to ${id} with fixed path: ${path}`)
+        return `'${path}'`
+    })
+}
+
 export function esbuildPluginBundleDependencies({
     signal = undefined as AbortSignal | undefined,
     externalizeNpm = false,
@@ -96,7 +118,7 @@ export function esbuildPluginBundleDependencies({
             build.onEnd(() => {
                 spinner.stop()
             })
-            
+
             build.onLoad({ filter: /.*/, namespace }, async (args) => {
                 if (signal?.aborted) {
                     throw new Error('aborted')
@@ -119,7 +141,7 @@ export function esbuildPluginBundleDependencies({
                 const promise = Promise.resolve().then(async () => {
                     logger.log('fetching', url.replace(/https?:\/\//, ''))
                     spinner.update(`Fetching ${url.replace(/https?:\/\//, '')}`)
-                    
+
                     const res = await fetchWithRetry(resolved, { signal })
                     if (!res.ok) {
                         throw new Error(

package/src/exporter.test.ts

@@ -1,5 +1,71 @@
 import { describe, test, expect } from 'vitest'
 import { propCamelCase } from './exporter'
+import { replaceWebPageIds } from './esbuild'
+
+describe('replaceWebPageIds', () => {
+    test('replaces webPageIds with paths', () => {
+        const elements = [
+            { webPageId: 'abc123', path: '/page1' },
+            { webPageId: 'def456', path: '/page2' },
+        ]
+        const code = `{ webPageId: 'abc123' }`
+        expect(replaceWebPageIds({ elements, code })).toEqual(`'/page1'`)
+
+        const code2 = `{ webPageId: "def456" }`
+        expect(replaceWebPageIds({ elements, code: code2 })).toEqual(`'/page2'`)
+    })
+
+    test('handles whitespace variations', () => {
+        const elements = [{ webPageId: 'abc123', path: '/page1' }]
+
+        const code = `{webPageId:'abc123'}`
+        expect(replaceWebPageIds({ elements, code })).toEqual(`'/page1'`)
+
+        const code2 = `{  webPageId  :  'abc123'  }`
+        expect(replaceWebPageIds({ elements, code: code2 })).toEqual(`'/page1'`)
+        const code3 = `{ href: { webPageId: 'zRPFqFbvc' } }`
+        expect(
+            replaceWebPageIds({
+                elements: [{ webPageId: 'zRPFqFbvc', path: '/page1' }],
+                code: code3,
+            }),
+        ).toEqual(`{ href: '/page1' }`)
+        const code4 = `/* @__PURE__ */ _jsx(Link, {
+                      href: { webPageId: 'zRPFqFbvc', },
+                      nodeId: 'aU2SMIi6t',`
+        expect(
+            replaceWebPageIds({
+                elements: [{ webPageId: 'zRPFqFbvc', path: '/page1' }],
+                code: code4,
+            }),
+        ).toMatchInlineSnapshot(
+            `
+          "/* @__PURE__ */ _jsx(Link, {
+                                href: '/page1',
+                                nodeId: 'aU2SMIi6t',"
+        `,
+        )
+    })
+
+    test('preserves non-matching webPageIds', () => {
+        const elements = [{ webPageId: 'abc123', path: '/page1' }]
+        const code = `{ webPageId: 'xyz789' }`
+
+        expect(replaceWebPageIds({ elements, code })).toEqual(
+            `{ webPageId: 'xyz789' }`,
+        )
+    })
+
+    test('handles newlines in input', () => {
+        const elements = [{ webPageId: 'abc123', path: '/page1' }]
+
+        const code = `{\n  webPageId: 'abc123'\n}`
+        expect(replaceWebPageIds({ elements, code })).toEqual(`'/page1'`)
+
+        const code2 = `{\n\n  webPageId:\n  'abc123'\n\n}`
+        expect(replaceWebPageIds({ elements, code: code2 })).toEqual(`'/page1'`)
+    })
+})
 
 describe('propCamelCase', () => {
     test('converts dashes to camelCase', () => {