unframer 2.7.7 → 2.7.8

package/esm/renamer.d.ts

@@ -0,0 +1,12 @@
+import type { Scope } from '@babel/traverse';
+import * as t from '@babel/types';
+import { NodePath } from '@babel/core';
+export default class BatchRenamer {
+    constructor(scope: Scope, map: Map<string, string>);
+    map: Map<string, string>;
+    scope: Scope;
+    maybeConvertFromExportDeclaration(parentDeclar: NodePath): void;
+    maybeConvertFromClassFunctionExpression(path: NodePath): NodePath<t.Node>;
+    rename(): void;
+}
+//# sourceMappingURL=renamer.d.ts.map

package/esm/renamer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renamer.d.ts","sourceRoot":"","sources":["../src/renamer.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAI5C,OAAO,KAAK,CAAC,MAAM,cAAc,CAAA;AAEjC,OAAO,EAAE,QAAQ,EAAW,MAAM,aAAa,CAAA;AAgF/C,MAAM,CAAC,OAAO,OAAO,YAAY;gBACjB,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC;IAK1C,GAAG,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAExB,KAAK,EAAE,KAAK,CAAA;IAEpB,iCAAiC,CAAC,YAAY,EAAE,QAAQ;IAyBxD,uCAAuC,CAAC,IAAI,EAAE,QAAQ;IAItD,MAAM;CAwDT"}

package/esm/renamer.js

@@ -0,0 +1,140 @@
+// original https://github.com/babel/babel/blob/9c77558234c87b9220604fbc1519089e2d6334e2/packages/babel-traverse/src/scope/lib/renamer.ts#L61
+import splitExportDeclaration from '@babel/helper-split-export-declaration';
+import { visitors } from '@babel/traverse';
+import { traverseNode } from '@babel/traverse/lib/traverse-node';
+import * as t from '@babel/types';
+import { logger } from './utils';
+const renameVisitor = {
+    ReferencedIdentifier({ node }, state) {
+        for (let [oldName, newName] of state.map) {
+            // console.log(node.name, oldName, newName)
+            if (node.name === oldName) {
+                node.name = newName;
+            }
+        }
+    },
+    // Scope(path, state) {
+    //     if (
+    //         !path.scope.bindingIdentifierEquals(
+    //             state.oldName,
+    //             state.binding.identifier,
+    //         )
+    //     ) {
+    //         path.skip()
+    //         if (path.isMethod()) {
+    //             requeueComputedKeyAndDecorators(path)
+    //         }
+    //     }
+    // },
+    ObjectProperty({ node, scope }, state) {
+        var _a;
+        const { name } = node.key;
+        if (node.shorthand &&
+            // In destructuring the identifier is already renamed by the
+            // AssignmentExpression|Declaration|VariableDeclarator visitor,
+            // while in object literals it's renamed later by the
+            // ReferencedIdentifier visitor.
+            // (name === state.oldName || name === state.newName) &&
+            (state.map.has(name) || inverseMap(state.map).has(name)) &&
+            // Ignore shadowed bindings
+            [...state.map.keys()].some((oldName) => state.scope.getBindingIdentifier(oldName) ===
+                scope.getBindingIdentifier(name))) {
+            node.shorthand = false;
+            if ((_a = node.extra) === null || _a === void 0 ? void 0 : _a.shorthand)
+                node.extra.shorthand = false;
+        }
+    },
+    // @ts-ignore
+    'AssignmentExpression|Declaration|VariableDeclarator'(path, state) {
+        if (path.isVariableDeclaration())
+            return;
+        const ids = path.getOuterBindingIdentifiers();
+        for (const name in ids) {
+            for (let [oldName, newName] of state.map) {
+                // console.log(name, oldName, newName)
+                if (name === oldName)
+                    ids[name].name = newName;
+            }
+        }
+    },
+};
+let cache = new WeakMap();
+function inverseMap(map) {
+    if (cache.has(map))
+        return cache.get(map);
+    const inverse = new Map();
+    for (let [key, value] of map) {
+        inverse.set(value, key);
+    }
+    cache.set(map, inverse);
+    return inverse;
+}
+export default class BatchRenamer {
+    constructor(scope, map) {
+        this.map = map;
+        this.scope = scope;
+    }
+    maybeConvertFromExportDeclaration(parentDeclar) {
+        const maybeExportDeclar = parentDeclar.parentPath;
+        if (!(maybeExportDeclar === null || maybeExportDeclar === void 0 ? void 0 : maybeExportDeclar.isExportDeclaration())) {
+            return;
+        }
+        if (maybeExportDeclar.isExportDefaultDeclaration()) {
+            const { declaration } = maybeExportDeclar.node;
+            if (t.isDeclaration(declaration) && !declaration.id) {
+                return;
+            }
+        }
+        if (maybeExportDeclar.isExportAllDeclaration()) {
+            return;
+        }
+        splitExportDeclaration(maybeExportDeclar);
+    }
+    maybeConvertFromClassFunctionExpression(path) {
+        return path;
+    }
+    rename( /* Babel 7 - block?: t.Pattern | t.Scopable */) {
+        const { scope, map } = this;
+        for (let binding of [...map.keys()].map((name) => scope.getBinding(name))) {
+            if (!binding) {
+                continue;
+            }
+            const path = binding.path;
+            const parentDeclar = path.find((path) => path.isDeclaration() ||
+                path.isFunctionExpression() ||
+                path.isClassExpression());
+            if (parentDeclar) {
+                const bindingIds = parentDeclar.getOuterBindingIdentifiers();
+                const oldNames = Object.keys(bindingIds);
+                for (let oldName of oldNames) {
+                    const binding = scope.getBinding(oldName);
+                    if (binding && bindingIds[oldName] === binding.identifier) {
+                        // When we are renaming an exported identifier, we need to ensure that
+                        // the exported binding keeps the old name.
+                        this.maybeConvertFromExportDeclaration(parentDeclar);
+                    }
+                }
+            }
+        }
+        traverseNode(scope.block, visitors.explode(renameVisitor), scope, this, scope.path, 
+        // When blockToTraverse is a SwitchStatement, the discriminant
+        // is not part of the current scope and thus should be skipped.
+        { discriminant: true });
+        for (let [oldName, newName] of map) {
+            if (oldName === newName)
+                continue;
+            if (!arguments[0]) {
+                scope.removeOwnBinding(oldName);
+                const binding = scope.getBinding(oldName);
+                if (binding) {
+                    binding.identifier.name = newName;
+                    scope.bindings[newName] = binding;
+                }
+                else {
+                    logger.log(`binding not found for ${oldName}`);
+                }
+            }
+        }
+    }
+}
+//# sourceMappingURL=renamer.js.map

package/esm/renamer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renamer.js","sourceRoot":"","sources":["../src/renamer.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unframer",
-  "version": "2.7.7",
+  "version": "2.7.8",
   "description": "Import Framer components directly in your React app, type safe and customizable",
   "sideEffects": false,
   "repository": "https://github.com/remorses/unframer",
@@ -41,7 +41,6 @@
   "dependencies": {
     "async-sema": "^3.1.1",
     "cac": "^6.7.14",
-    "dedent": "^1.5.3",
     "dprint-node": "^1.0.8",
     "esbuild": "^0.24.0",
     "esbuild-plugins-node-modules-polyfill": "^1.6.8",
@@ -49,12 +48,14 @@
     "find-up": "^5.0.0",
     "fs-extra": "^11.2.0",
     "json5": "^2.2.3",
+    "just-kebab-case": "^4.2.0",
     "marked": "^15.0.3",
     "marked-terminal": "^7.2.1",
     "nanospinner": "^1.2.0",
     "native-fetch": "^4.0.2",
     "picocolors": "^1.0.1",
-    "real-framer-motion": "npm:framer-motion@11.2.10"
+    "real-framer-motion": "npm:framer-motion@11.2.10",
+    "string-dedent": "^3.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.24.9",
@@ -70,7 +71,7 @@
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^22.7.4",
     "@types/react": "^18.3.12",
-    "@xmorse/deployment-utils": "^0.2.18",
+    "@xmorse/deployment-utils": "^0.2.19",
     "concurrently": "^8.2.2",
     "openai": "^4.52.7",
     "posthtml": "^0.16.6",

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) {
@@ -46,10 +39,7 @@ cli.command('[projectId]', 'Run unframer with optional project ID')
                 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 || [],