unframer 4.1.8 → 4.2.0

package/src/exporter.ts

@@ -8,8 +8,6 @@ const require = createRequire(import.meta.url)
 
 import { Sema } from 'async-sema'
 
-import { nodeModulesPolyfillPlugin } from 'esbuild-plugins-node-modules-polyfill'
-
 import { transform } from '@babel/core'
 import { exec } from 'child_process'
 import { error } from 'console'
@@ -19,6 +17,7 @@ import crypto from 'crypto'
 import { dedent } from './utils.js'
 import {
     babelPluginJsxTransform,
+    babelPluginSuppressHydration,
     removeJsxExpressionContainer,
 } from './babel-jsx.js'
 import { babelPluginTypedoc } from './babel-typedoc.js'
@@ -31,7 +30,7 @@ import {
     getFontsStyles,
     groupBy,
     logFontsUsage,
-} from './css.js'
+} from './css-core.js'
 import {
     propControlsToTypedocComments,
     componentImportedName,
@@ -218,7 +217,6 @@ export async function bundle({
                     missingPackages.add(pkg)
                 },
             }),
-            nodeModulesPolyfillPlugin({}),
             {
                 name: 'virtual loader',
                 setup(build) {
@@ -536,6 +534,15 @@ export async function bundle({
                         name,
                         typedocComments,
                     }
+                } catch (e) {
+                    const name = path
+                        .relative(out, file.path)
+                        .replace(/\.jsx?$/, '')
+                    spinner.error(
+                        `Failed to extract types for ${name}: ${e instanceof Error ? e.message : e}`,
+                    )
+                    logger.log(e instanceof Error ? e.stack : e)
+                    return undefined
                 } finally {
                     sema.release()
                 }
@@ -567,17 +574,28 @@ export async function bundle({
             ?.split('\n')
             .forEach((x) => logger.log(x))
 
+        function isChunkPath(filePath: string) {
+            return (
+                filePath.includes('/chunks/') ||
+                filePath.includes('\\chunks\\')
+            )
+        }
         const jsxFiles = buildResult.outputFiles
             .filter(
                 (x) =>
                     x.path.endsWith('.js') &&
+                    !isChunkPath(x.path) &&
                     fs.existsSync(getFilePaths(x.path, out).jsxPath),
             )
             .map((x) => getFilePaths(x.path, out).jsxPath)
         const outFiles = buildResult.outputFiles
             .map((x) => {
                 const paths = getFilePaths(x.path, out)
-                if (x.path.endsWith('.js') && fs.existsSync(paths.jsxPath)) {
+                if (
+                    x.path.endsWith('.js') &&
+                    !isChunkPath(x.path) &&
+                    fs.existsSync(paths.jsxPath)
+                ) {
                     return null // Will be handled by jsx files
                 }
                 return paths.finalJsPath
@@ -684,6 +702,7 @@ export async function bundle({
                 try {
                     const plugins = [
                         // babelPluginDeduplicateImports,
+                        babelPluginSuppressHydration,
                         babelPluginJsxTransform,
                         removeJsxExpressionContainer,
                     ]
@@ -726,8 +745,17 @@ export async function bundle({
                         formatted = result.content
                     }
                 } catch (e) {
+                    spinner.warn(
+                        `Babel/Biome formatting failed for ${componentName}: ${e instanceof Error ? e.message : e}`,
+                    )
+                    logger.log(e instanceof Error ? e.stack : e)
                     notifyError(e, 'babel transform and format')
                 }
+            } else if (tooBig) {
+                const sizeMB = (file.text.length / (1024 * 1024)).toFixed(2)
+                spinner.warn(
+                    `Skipping JSX formatting for ${componentName} (${sizeMB} MB exceeds ${(tooBigSize / (1024 * 1024)).toFixed(2)} MB limit)`,
+                )
             }
 
             const prefix =
@@ -741,12 +769,24 @@ export async function bundle({
             // Always write the temp .js file for type extraction
             await fs.promises.writeFile(paths.tempJsPath, codeJs, 'utf-8')
 
-            // Only write .jsx file if it's different from existing or if formatting was done
+            // Write .jsx file if formatting succeeded, or fall back to writing
+            // unformatted .js content into the .jsx path when formatting fails
+            // (babel error, component too big, etc.) but a stale .jsx already
+            // exists on disk. Without this fallback the stale .jsx keeps old
+            // chunk imports while the old chunks are deleted, breaking the build.
             if (didFormat && codeJsx !== existing) {
                 await fs.promises.writeFile(paths.jsxPath, codeJsx, 'utf-8')
                 logger.log(`Updated JSX file for ${componentName}`)
             } else if (didFormat) {
                 logger.log(`JSX file unchanged for ${componentName}`)
+            } else if (existing && codeJs !== existing) {
+                // Formatting failed but .jsx exists with stale content (e.g.
+                // old chunk hashes). Overwrite with unformatted JS so imports
+                // stay in sync with the current build's chunks.
+                await fs.promises.writeFile(paths.jsxPath, codeJs, 'utf-8')
+                logger.log(
+                    `Updated JSX file (unformatted) for ${componentName}`,
+                )
             }
         }
         spinner.stop()
@@ -761,8 +801,12 @@ export async function bundle({
             if (file.path.endsWith('.js')) {
                 const paths = getFilePaths(file.path, out)
 
-                if (fs.existsSync(paths.jsxPath)) {
+                if (
+                    !isChunkPath(paths.tempJsPath) &&
+                    fs.existsSync(paths.jsxPath)
+                ) {
                     // Remove temp .js file if .jsx equivalent exists
+                    // (never applies to chunks which stay as .js)
                     logger.log(
                         'removing temp JS file with JSX equivalent:',
                         path.relative(out, paths.tempJsPath),
@@ -975,6 +1019,21 @@ export function getDarkModeSelector(opts: {
     return '.dark {\n' + content + '\n' + '}'
 }
 
+// A CSS custom property value must not contain structural characters that would
+// terminate the declaration or the surrounding `:root {}` block. Framer color
+// styles can in rare cases carry malformed color strings (e.g. text scraped from
+// a code-highlighting component), and an unescaped `}` closes the block early.
+// The leaked text then becomes a top-level class rule like `.[-:=] { -: =; }`,
+// which browsers tolerate but lightningcss (Vite's css minifier) rejects with
+// "Expected identifier in class selector". Skip such tokens to keep styles.css
+// always minifiable. See the getStyleTokensCss regression test.
+function isSafeCssColorValue(value: string | null | undefined): value is string {
+    if (typeof value !== 'string' || value === '') {
+        return false
+    }
+    return !/[;{}\n\r]/.test(value)
+}
+
 export function getStyleTokensCss(
     tokens: StyleToken[],
     darkModeType: 'class' | 'media' = 'class',
@@ -983,12 +1042,34 @@ export function getStyleTokensCss(
         return ''
     }
 
+    // Drop tokens whose color values would produce invalid CSS. Both light and
+    // dark colors must be safe, otherwise the token is skipped entirely so the
+    // --unframer-* and --token-* variables never desync.
+    const validTokens = tokens.filter((token) => {
+        if (
+            !isSafeCssColorValue(token.lightColor) ||
+            !isSafeCssColorValue(token.darkColor)
+        ) {
+            logger.log(
+                `Skipping style token ${JSON.stringify(
+                    token.name || token.id,
+                )}: unsafe color value`,
+            )
+            return false
+        }
+        return true
+    })
+
+    if (!validTokens.length) {
+        return ''
+    }
+
     // Deduplicate --unframer-* names: multiple Framer tokens can share the same
     // user-facing name (e.g. two tokens both called "black" with different UUIDs).
     // Keep only the first occurrence of each kebab-cased name to avoid silent
     // CSS overwrites. The --token-{uuid} variables are always unique and unaffected.
     const seenNames = new Set<string>()
-    const deduplicatedTokens = tokens.filter((token) => {
+    const deduplicatedTokens = validTokens.filter((token) => {
         const name = kebabCase(token.name || token.id)
         if (seenNames.has(name)) {
             return false
@@ -1008,7 +1089,7 @@ export function getStyleTokensCss(
         )
         .join('\n')
 
-    const lightTokens = tokens
+    const lightTokens = validTokens
         .map(
             (token) =>
                 '    --token-' + token.id + ': ' + token.lightColor + ';',
@@ -1026,7 +1107,7 @@ export function getStyleTokensCss(
         )
         .join('\n')
 
-    const darkTokens = tokens
+    const darkTokens = validTokens
         .map(
             (token) => '    --token-' + token.id + ': ' + token.darkColor + ';',
         )
@@ -1136,7 +1217,7 @@ export async function extractPropControlsUnsafe(
     }
 
     // console.log(stdout)
-    return safeJsonParse(stdout)
+    return safeJsonParse(stdout) || {}
 }
 
 function safeJsonParse(text) {

package/src/framer.d.ts

@@ -4859,4 +4859,132 @@ export declare const withVariantFX: <T extends MotionProps>(Component: React_2.C
 export { }
 export declare const combinedCSSRules: string[]
 
+export interface FramerMotionGlobalConfig {
+    useManualTiming?: boolean
+    instantAnimations?: boolean
+    skipAnimations?: boolean
+    mix?: unknown
+    WillChange?: new (value: string) => unknown
+}
+
+export interface FramerInjectedRuntimeImage {
+    src?: string
+    srcSet?: string
+}
+
+export interface FramerInjectedRuntimeRect {
+    width?: number
+    height?: number
+}
+
+export interface FramerInjectedRuntime {
+    imagePlaceholderSvg?: string
+    useImageSource?(image: FramerInjectedRuntimeImage, rect?: FramerInjectedRuntimeRect, nodeId?: string): string
+    useImageElement?(image: FramerInjectedRuntimeImage, rect?: FramerInjectedRuntimeRect, nodeId?: string): HTMLImageElement
+    canRenderOptimizedCanvasImage?(src?: string): boolean
+    isOnPageCanvas?: boolean
+}
+
+export interface FramerMotionFrameData {
+    delta: number
+    timestamp: number
+    isProcessing: boolean
+}
+
+export type FramerMotionFrameCallback = (frameData: FramerMotionFrameData) => void
+
+export interface FramerMotionFrameStep {
+    schedule(callback: FramerMotionFrameCallback, keepAlive?: boolean, immediate?: boolean): FramerMotionFrameCallback
+    cancel(callback: FramerMotionFrameCallback): void
+    process(frameData: FramerMotionFrameData): void
+}
+
+export type FramerMotionFrameStepName =
+    | 'setup'
+    | 'read'
+    | 'resolveKeyframes'
+    | 'preUpdate'
+    | 'update'
+    | 'preRender'
+    | 'render'
+    | 'postRender'
+
+export type FramerMotionFrameSteps = Record<FramerMotionFrameStepName, FramerMotionFrameStep>
+
+export interface FramerMotionTime {
+    now(): number
+    set(newTime: number): void
+}
+
+export interface FramerMotionGeneratorState<Value = unknown> {
+    value: Value
+    done?: boolean
+}
+
+export interface FramerMotionGenerator<Value = unknown> {
+    calculatedDuration?: number | null
+    next(time: number): FramerMotionGeneratorState<Value>
+    velocity?(time: number): number
+}
+
+export interface FramerMotionAnimationDriver {
+    now(): number
+    start(autoplay?: boolean): void
+    stop(): void
+}
+
+export interface FramerMotionAnimationOptions<Value = unknown> {
+    keyframes: Value[]
+    autoplay?: boolean
+    delay?: number
+    repeat?: number
+    repeatDelay?: number
+    repeatType?: 'loop' | 'reverse' | 'mirror'
+    velocity?: number
+    finalKeyframe?: Value
+    startTime?: number
+    allowFlatten?: boolean
+    motionValue?: { updatedAt?: number }
+    type?: (options: FramerMotionAnimationOptions<Value>) => FramerMotionGenerator<Value>
+    driver?: (update: (timestamp: number) => void) => FramerMotionAnimationDriver
+    onUpdate?(latest: Value): void
+    onPlay?(): void
+    onComplete?(): void
+    onCancel?(): void
+    onStop?(): void
+}
+
+export declare class JSAnimation<Value = unknown> implements PromiseLike<void> {
+    constructor(options: FramerMotionAnimationOptions<Value>)
+    options: FramerMotionAnimationOptions<Value>
+    state: 'idle' | 'running' | 'paused' | 'finished'
+    currentTime: number
+    playbackSpeed: number
+    readonly duration: number
+    readonly iterationDuration: number
+    time: number
+    speed: number
+    readonly finished: Promise<void>
+    then<TResult1 = void, TResult2 = never>(
+        onfulfilled?: ((value: void) => TResult1 | PromiseLike<TResult1>) | null,
+        onrejected?: ((reason: Error) => TResult2 | PromiseLike<TResult2>) | null,
+    ): Promise<TResult1 | TResult2>
+    play(): void
+    pause(): void
+    complete(): void
+    finish(): void
+    cancel(): void
+    stop(): void
+    tick(timestamp: number, sample?: boolean): FramerMotionGeneratorState<Value>
+    sample(sampleTime: number): FramerMotionGeneratorState<Value>
+    attachTimeline(timeline: { observe(animation: JSAnimation<Value>): VoidFunction }): VoidFunction
+}
+
+export declare const MotionGlobalConfig: FramerMotionGlobalConfig
+export declare const frameData: FramerMotionFrameData
+export declare const frameSteps: FramerMotionFrameSteps
+export declare const time: FramerMotionTime
+export declare const visualElementStore: WeakMap<object, unknown>
+export declare function _injectRuntime(injectedRuntime: FramerInjectedRuntime): void
+
 export * from 'real-framer-motion'