unframer 2.7.6 → 2.7.7

package/src/cli.tsx

@@ -40,7 +40,9 @@ 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(
@@ -50,10 +52,11 @@ cli.command('[projectId]', 'Run unframer with optional project ID')
                         ]),
                     ),
                     tokens: data.colorStyles,
+                    framerWebPages: data.framerWebPages || [],
                 },
                 watch: false,
 
-                configBasename: 'remote config',
+                cwd,
                 signal: new AbortController().signal,
             })
         }
@@ -79,11 +82,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 +157,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/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', () => {

package/src/exporter.ts

@@ -1,4 +1,5 @@
 import { BuildResult, context } from 'esbuild'
+import { Config } from './cli'
 import url from 'url'
 
 import { Sema } from 'async-sema'
@@ -21,6 +22,7 @@ import {
 import {
     esbuildPluginBundleDependencies,
     externalPackages,
+    replaceWebPageIds,
     resolveRedirect,
 } from './esbuild'
 import {
@@ -47,13 +49,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 {
@@ -156,6 +162,12 @@ export async function bundle({
                     trailingCommas: 'always',
                     semiColons: 'always',
                 })
+            if (framerWebPages?.length) {
+                codeNew = replaceWebPageIds({
+                    code: codeNew,
+                    elements: framerWebPages,
+                })
+            }
             const lines = findRelativeLinks(codeNew)
             if (lines.length) {
                 spinner.error(
@@ -236,7 +248,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
@@ -663,10 +675,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 +693,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 +708,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 +732,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 +1019,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())

package/src/index.ts

@@ -1,4 +1,6 @@
 export * from './framer.js'
+
+
 export {
     FramerStyles,
     UnframerBreakpoint,

package/src/unframer-loader.ts

@@ -1,10 +1,14 @@
+const mapPackages = JSON.parse(process.env.UNFRAMER_MAP_PACKAGES || '{}')
+
 export async function resolve(specifier, context, defaultResolve) {
-    if (specifier === 'unframer') {
+    if (mapPackages[specifier]) {
         return {
-            url: process.env.UNFRAMER_RUNTIME_PATH,
-            format: 'module', // Specify that unframer is an ES module
+            url: mapPackages[specifier],
+            // format: 'module', // Specify that unframer is an ES module
             shortCircuit: true, // Signal that we're intentionally not calling next hook
         }
     }
+
+
     return defaultResolve(specifier, context, defaultResolve)
 }