unframer 2.7.5 → 2.7.7

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
@@ -317,11 +329,17 @@ export async function bundle({
         console.log()
         console.log()
 
-        let exampleComponent = result?.components?.find((x) => {
+        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) => {
+            const aProp = findExampleProperty(a.propertyControls)
+            const bProp = findExampleProperty(b.propertyControls)
+            return (bProp ? 1 : 0) - (aProp ? 1 : 0)
+        })
+        let exampleComponent = withBreakpoints?.[0]
         if (!exampleComponent) {
             logger.log(
                 `No example component found with breakpoints, using random example`,
@@ -507,10 +525,6 @@ export function getStyleTokensCss(
     )
 }
 
-function decapitalize(str: string) {
-    return str.charAt(0).toLowerCase() + str.slice(1)
-}
-
 export function findRelativeLinks(text: string) {
     const regex = /webPageId:\s+/g
     const lines = text.split('\n')
@@ -661,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,
@@ -683,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(
@@ -693,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)
             },
         )
@@ -714,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)
 }
@@ -788,7 +809,7 @@ export function propControlsToType(controls: PropertyControls, fileName) {
                             return 'Function'
                     }
                 }
-                let name = decapitalize(value.title || key || '')
+                let name = propCamelCase(value.title || key || '')
                 if (!name) {
                     return ''
                 }
@@ -990,5 +1011,23 @@ function findExampleProperty(propertyControls?: PropertyControls) {
         return null
     }
 
-    return stringProp[0]
+    return propCamelCase(stringProp[1]?.title || '')
+}
+export function propCamelCase(str: string) {
+    if (!str) {
+        return ''
+    }
+    // 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)
+    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())
+    // Ensure first character is lowercase
+    str = str[0].toLowerCase() + str.slice(1)
+    // Add underscore prefix if starts with number
+    if (/^\d/.test(str)) {
+        str = '_' + str
+    }
+    return str
 }

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)
 }