react-native-unistyles 3.6.0 → 3.7.0

package/src/core/withUnistyles/withUnistyles.native.tsx

@@ -1,10 +1,10 @@
 import React, {
-    forwardRef,
     useContext,
     useEffect,
     type ComponentProps,
     type ComponentRef,
     type ComponentType,
+    type Ref,
 } from 'react'
 
 import type { UnistylesValues } from '../../types'
@@ -12,7 +12,7 @@ import type { Mappings } from './types'
 
 import { ScopedThemeContext } from '../../components/ScopedThemeContext'
 import { type UnistyleDependency, UnistylesShadowRegistry } from '../../specs'
-import { deepMergeObjects } from '../../utils'
+import { deepMergeObjects, isAnimatedStyleHandle } from '../../utils'
 import { useProxifiedUnistyles } from '../useProxifiedUnistyles'
 import { maybeWarnAboutMultipleUnistyles } from '../warn'
 
@@ -27,10 +27,30 @@ type UnistylesSecrets = {
 }
 
 type MappedSecrets = {
-    styles: Record<string, any>
+    styles: Record<string, any> | Array<Record<string, any>>
     dependencies: Array<UnistyleDependency>
 }
 
+// Reanimated finds animated styles by their keys, merged with other styles they would hide them
+// so keep every animated style as a separate entry and merge only the styles between them, in order
+const mergeAroundAnimatedStyles = (secrets: Array<UnistylesSecrets>) =>
+    secrets.reduce<Array<Record<string, any>>>((acc, secret) => {
+        const style = secret.uni__getStyles()
+        const lastStyle = acc.at(-1)
+
+        if (isAnimatedStyleHandle(style)) {
+            return acc.concat([style])
+        }
+
+        if (lastStyle && !isAnimatedStyleHandle(lastStyle)) {
+            Object.assign(lastStyle, style)
+
+            return acc
+        }
+
+        return acc.concat([{ ...style }])
+    }, [])
+
 export const getSecrets = (styleProps: Record<string, any> = {}): MappedSecrets => {
     const styles = Array.isArray(styleProps) ? styleProps.flat(Infinity) : [styleProps]
 
@@ -48,7 +68,9 @@ export const getSecrets = (styleProps: Record<string, any> = {}): MappedSecrets
     }, [])
 
     return {
-        styles: secrets.reduce((acc, secret) => Object.assign(acc, secret.uni__getStyles()), {} as Record<string, any>),
+        styles: styles.some(isAnimatedStyleHandle)
+            ? mergeAroundAnimatedStyles(secrets)
+            : secrets.reduce((acc, secret) => Object.assign(acc, secret.uni__getStyles()), {} as Record<string, any>),
         dependencies: secrets.flatMap((secret) => secret.uni__dependencies),
     }
 }
@@ -66,7 +88,7 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
         contentContainerStyle?: UnistylesValues
     }
 
-    return forwardRef<GenericComponentRef<TComponent>, PropsWithUnistyles>((props, ref) => {
+    return ({ ref, ...props }: PropsWithUnistyles & { ref?: Ref<GenericComponentRef<TComponent>> }) => {
         const narrowedProps = props as PropsWithUnistyles & UnistyleStyles
         const NativeComponent = Component as ComponentType
 
@@ -127,5 +149,5 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
         } as any
 
         return <NativeComponent key={uniPropsKey || mappingsKey} {...finalProps} ref={ref} />
-    })
+    }
 }

package/src/core/withUnistyles/withUnistyles.tsx

@@ -1,4 +1,4 @@
-import React, { type ComponentType, forwardRef, type ComponentProps, type ComponentRef } from 'react'
+import React, { type ComponentType, type ComponentProps, type ComponentRef, type Ref } from 'react'
 
 import type { UnistylesValues } from '../../types'
 import type { Mappings } from './types'
@@ -26,9 +26,9 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
         contentContainerStyle?: UnistylesValues
     }
 
-    return forwardRef<GenericComponentRef<TComponent>, PropsWithUnistyles>((props, ref) => {
+    return ({ ref, ...props }: PropsWithUnistyles & { ref?: Ref<GenericComponentRef<TComponent>> }) => {
         const narrowedProps = props as PropsWithUnistyles & UnistyleStyles
-        const styleClassNames = getClassName(narrowedProps.style, true)
+        const [classNames, animatedStyles] = getClassName(narrowedProps.style, true) ?? []
         const contentContainerStyleClassNames = getClassName(narrowedProps.contentContainerStyle)
         const { proxifiedRuntime, proxifiedTheme } = useProxifiedUnistyles()
 
@@ -50,7 +50,8 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
             ...(narrowedProps.style
                 ? {
                       // Override default component styles with undefined values to reset them
-                      style: emptyStyles,
+                      // animated styles can't be a class, so they stay inline
+                      style: animatedStyles?.length ? [emptyStyles, ...animatedStyles] : emptyStyles,
                   }
                 : {}),
             ...(narrowedProps.contentContainerStyle
@@ -68,12 +69,11 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
         maybeWarnAboutMultipleUnistyles(narrowedProps.contentContainerStyle, `withUnistyles(${Component.displayName ?? Component.name ?? 'Unknown'})`)
 
         const NativeComponent = Component as ComponentType
-        const [classNames] = styleClassNames ?? []
 
         return (
             <div className={classNames?.hash} style={{ display: 'contents' }}>
                 <NativeComponent key={uniPropsKey || mappingsKey} {...combinedProps} ref={ref} />
             </div>
         )
-    })
+    }
 }

package/src/mocks.ts

@@ -20,6 +20,7 @@ jest.mock('react-native-nitro-modules', () => ({
         createHybridObject: () => ({
             add: () => {},
             init: () => {},
+            addChangeListener: () => () => {},
             createHybridStatusBar: () => ({
                 setStyle: () => {},
             }),
@@ -199,11 +200,19 @@ jest.mock('react-native-unistyles', () => {
                 Component: TComponent,
                 mapper?: (theme: UnistylesTheme, runtime: typeof miniRuntime) => TComponent,
             ) =>
-            (props: any) =>
-                React.createElement(Component, {
-                    ...mapper?.((Object.values(_REGISTRY.themes).at(0) ?? {}) as UnistylesTheme, miniRuntime),
-                    ...props,
-                }),
+            ({ uniProps, ...props }: any) => {
+                const { deepMergeObjects } = require('./utils')
+                const theme = (Object.values(_REGISTRY.themes).at(0) ?? {}) as UnistylesTheme
+                const { key: mappingsKey, ...mappingsProps } = mapper?.(theme, miniRuntime) ?? ({} as any)
+                const { key: uniPropsKey, ...unistyleProps } = uniProps?.(theme, miniRuntime) ?? {}
+
+                return React.createElement(Component, {
+                    ...deepMergeObjects(mappingsProps, unistyleProps, props),
+                    ...(props.style ? { style: props.style } : {}),
+                    ...(props.contentContainerStyle ? { contentContainerStyle: props.contentContainerStyle } : {}),
+                    key: uniPropsKey || mappingsKey,
+                })
+            },
         mq: {
             only: {
                 width: () => ({

package/src/specs/ShadowRegistry/index.ts

@@ -9,6 +9,7 @@ import type { ShadowNode, Unistyle, ViewHandle } from './types'
 import { Fiber, Reanimated } from '../../unifiber/src'
 import { StyleSheet } from '../StyleSheet'
 import { createUnistylesStyleSource } from './styleSource'
+import { traceSection } from './tracing'
 
 interface ShadowRegistry extends UnistylesShadowRegistrySpec {
     // Babel API
@@ -74,7 +75,7 @@ const refreshReactNodes = () => {
             HybridShadowRegistry.refreshReactNodes(refreshNodes)
         }
 
-        owners.refresh(committedHosts)
+        traceSection('refreshOwners', () => owners.refresh(committedHosts))
     } finally {
         committedHosts.length = 0
         refreshNodes = []
@@ -83,6 +84,16 @@ const refreshReactNodes = () => {
 
 StyleSheet.addChangeListener(refreshReactNodes)
 
+// a unistyle key holds its secrets object. A unistyle spread into another StyleSheet.create keeps its key,
+// but the parser resolves the (hidden) secrets to undefined, so the key no longer points at a unistyle
+const isUnistyleKey = (style: any, key: string) => {
+    if (!key.startsWith('unistyles_')) {
+        return false
+    }
+
+    return typeof style[key] === 'object' && style[key] !== null
+}
+
 // skips empty styles and splits a style merged from many unistyles (eg. flattened by Animated) into one per unistyle
 // runs for every style on every link, so it reads the keys once and allocates only for the rare merged style
 const collectStyle = (style: any, collected: Array<any>) => {
@@ -94,7 +105,7 @@ const collectStyle = (style: any, collected: Array<any>) => {
     let unistylesCount = 0
 
     for (const key of keys) {
-        if (key.startsWith('unistyles_')) {
+        if (isUnistyleKey(style, key)) {
             unistylesCount++
         }
     }
@@ -108,7 +119,7 @@ const collectStyle = (style: any, collected: Array<any>) => {
     }
 
     for (const key of keys) {
-        if (key.startsWith('unistyles_')) {
+        if (isUnistyleKey(style, key)) {
             collected.push({ [key]: style[key] })
         }
     }

package/src/specs/ShadowRegistry/tracing.ts

@@ -0,0 +1,23 @@
+// console.timeStamp(label, start, end, trackName), React Native 0.86+ reports it only while DevTools records and keeps
+// nothing, unlike performance.measure, which adds every entry to an unbounded buffer
+type TracingConsole = {
+    timeStamp?: (label: string, start: number, end: number, trackName: string) => void
+}
+
+const tracingConsole = console as unknown as TracingConsole
+const canTrace = __DEV__ && typeof tracingConsole.timeStamp === 'function'
+
+// Slice on the "Unistyles" track of the React Native DevTools Performance panel, next to the native ones
+export const traceSection = <T>(name: string, fn: () => T): T => {
+    if (!canTrace) {
+        return fn()
+    }
+
+    const start = performance.now()
+
+    try {
+        return fn()
+    } finally {
+        tracingConsole.timeStamp?.(name, start, performance.now(), 'Unistyles')
+    }
+}

package/src/utils.ts

@@ -1,5 +1,10 @@
 export const isDefined = <T>(value: T): value is NonNullable<T> => value !== undefined && value !== null
 
+// Reanimated useAnimatedStyle handle, it's a plain object, not an Animated.Node
+// styleUpdaterContainer was added in Reanimated 4.1, so check only the keys every version has
+export const isAnimatedStyleHandle = (value: unknown): boolean =>
+    typeof value === 'object' && value !== null && 'viewDescriptors' in value && 'initial' in value
+
 export const deepMergeObjects = <T extends Record<PropertyKey, any>>(...sources: Array<T>) => {
     const target = {} as T
 
@@ -23,7 +28,53 @@ export const deepMergeObjects = <T extends Record<PropertyKey, any>>(...sources:
     return target
 }
 
+// React tells a class component from a function component by these keys
+const CLASS_PROTOTYPE_KEYS = ['isReactComponent', 'render']
+const CLASS_STATIC_KEYS = ['contextType', 'contextTypes', 'childContextTypes', 'getDerivedStateFromProps']
+
+// owner doesn't have the key, objects that inherit from owner read it from source
+const hideFromOwner = (owner: object, source: object, key: string) => {
+    Object.defineProperty(owner, key, {
+        configurable: true,
+        get() {
+            return this === owner ? undefined : Reflect.get(source, key, this)
+        },
+        set(value) {
+            Object.defineProperty(this, key, { value, writable: true, enumerable: true, configurable: true })
+        },
+    })
+}
+
+const inheritNativeClass = (Component: any, UnistylesComponent: (props: unknown) => unknown) => {
+    function UnistylesClassComponent(this: unknown, ...args: Array<unknown>) {
+        if (this instanceof UnistylesClassComponent) {
+            return Reflect.construct(Component, args, new.target ?? this.constructor)
+        }
+
+        return UnistylesComponent(args[0])
+    }
+
+    Object.setPrototypeOf(UnistylesClassComponent, Component)
+    UnistylesClassComponent.prototype = Object.create(Component.prototype, {
+        constructor: { value: UnistylesClassComponent, writable: true, configurable: true },
+    })
+    // only the keys of the class, eg. React warns about a subclass with a `contextType` key that isn't a context
+    CLASS_PROTOTYPE_KEYS.filter((key) => key in Component.prototype).forEach((key) =>
+        hideFromOwner(UnistylesClassComponent.prototype, Component.prototype, key),
+    )
+    CLASS_STATIC_KEYS.filter((key) => key in Component).forEach((key) =>
+        hideFromOwner(UnistylesClassComponent, Component, key),
+    )
+
+    return UnistylesClassComponent
+}
+
 export const copyComponentProperties = (Component: any, UnistylesComponent: any) => {
+    // static properties (eg. displayName) are inherited from the class
+    if (Component?.prototype?.isReactComponent && typeof UnistylesComponent === 'function') {
+        return inheritNativeClass(Component, UnistylesComponent)
+    }
+
     Object.entries(Component).forEach(([key, value]) => {
         // Filter out the keys we don't want to copy
         if (['$$typeof', 'render', 'contextType'].includes(key)) {

package/src/web/convert/index.ts

@@ -2,11 +2,38 @@ import type { UnistylesValues } from '../../types'
 import type { UnistylesRuntime } from '../runtime'
 
 import { deepMergeObjects } from '../../utils'
-import { getBoxShadow, getFilterStyle, getTransformStyle } from './object'
+import {
+    getBackgroundLayers,
+    getBoxShadow,
+    getFilterStyle,
+    getFontVariationSettings,
+    getTransformStyle,
+} from './object'
 import { isPseudo } from './pseudo'
 import { getBoxShadowStyle, getTextShadowStyle } from './shadow'
 import { getStyle } from './style'
-import { isBoxShadow, isFilter, isShadow, isTextShadow, isTransform } from './utils'
+import {
+    isBackgroundLayer,
+    isBoxShadow,
+    isFilter,
+    isFontVariationSettings,
+    isShadow,
+    isTextShadow,
+    isTransform,
+} from './utils'
+
+// a breakpoint can hold React Native's array or object syntax too
+const getBreakpointStyle = (key: string, value: any) => {
+    if (isBackgroundLayer(key, value)) {
+        return getBackgroundLayers(key, value)
+    }
+
+    if (isFontVariationSettings(key, value)) {
+        return getFontVariationSettings(value)
+    }
+
+    return getStyle(key, value)
+}
 
 export const convertUnistyles = (value: UnistylesValues, runtime: UnistylesRuntime) => {
     // Flag to mark if textShadow is already created
@@ -65,10 +92,19 @@ export const convertUnistyles = (value: UnistylesValues, runtime: UnistylesRunti
             return getTransformStyle(unistylesValue)
         }
 
+        // React Native's array and object syntaxes, not breakpoints
+        if (isBackgroundLayer(unistylesKey, unistylesValue)) {
+            return getBackgroundLayers(unistylesKey, unistylesValue)
+        }
+
+        if (isFontVariationSettings(unistylesKey, unistylesValue)) {
+            return getFontVariationSettings(unistylesValue)
+        }
+
         // Breakpoints
         if (typeof unistylesValue === 'object' && unistylesValue !== null) {
             return Object.entries(unistylesValue).map(([breakpointKey, breakpointValue]) => {
-                return { [breakpointKey]: getStyle(unistylesKey, breakpointValue) }
+                return { [breakpointKey]: getBreakpointStyle(unistylesKey, breakpointValue) }
             })
         }
 

package/src/web/convert/object/backgroundLayers.ts

@@ -0,0 +1,33 @@
+import { normalizeNumericValue } from '../utils'
+
+type BackgroundLayerKey = 'backgroundSize' | 'backgroundPosition' | 'backgroundRepeat'
+type BackgroundSize = string | { x: string | number; y: string | number }
+type BackgroundPosition = Partial<Record<'top' | 'left' | 'right' | 'bottom', string | number>>
+type BackgroundRepeat = { x: string; y: string }
+
+const createBackgroundSizeValue = (size: BackgroundSize) => {
+    if (typeof size === 'string') {
+        return size
+    }
+
+    return `${normalizeNumericValue(size.x)} ${normalizeNumericValue(size.y)}`
+}
+
+const createBackgroundPositionValue = (position: BackgroundPosition) => {
+    const edges = (['left', 'right', 'top', 'bottom'] as const).filter((edge) => position[edge] !== undefined)
+
+    return edges.map((edge) => `${edge} ${normalizeNumericValue(position[edge]!)}`).join(' ')
+}
+
+const createBackgroundRepeatValue = (repeat: BackgroundRepeat) => `${repeat.x} ${repeat.y}`
+
+const createBackgroundLayerValue = {
+    backgroundSize: createBackgroundSizeValue,
+    backgroundPosition: createBackgroundPositionValue,
+    backgroundRepeat: createBackgroundRepeatValue,
+} as Record<BackgroundLayerKey, (layer: any) => string>
+
+// React Native's processed syntax, one object per background layer
+export const getBackgroundLayers = (key: string, layers: Array<unknown>) => ({
+    [key]: layers.map(createBackgroundLayerValue[key as BackgroundLayerKey]).join(', '),
+})

package/src/web/convert/object/fontVariationSettings.ts

@@ -0,0 +1,7 @@
+// Same output as React Native's processFontVariationSettings, eg. { wght: 700 } -> 'wght' 700
+export const getFontVariationSettings = (fontVariationSettings: Record<string, number>) => ({
+    fontVariationSettings: Object.keys(fontVariationSettings)
+        .sort()
+        .map((axis) => `${axis.includes("'") ? `"${axis}"` : `'${axis}'`} ${fontVariationSettings[axis]}`)
+        .join(', '),
+})

package/src/web/convert/object/index.ts

@@ -1,3 +1,5 @@
 export * from './transform'
 export * from './boxShadow'
 export * from './filter'
+export * from './backgroundLayers'
+export * from './fontVariationSettings'

package/src/web/convert/utils.ts

@@ -21,6 +21,17 @@ export const isFilter = (key: string, value: any): value is Array<Filters> => ke
 export const isBoxShadow = (key: string, value: any): value is Array<BoxShadowValue> =>
     key === 'boxShadow' && Array.isArray(value)
 
+export const isBackgroundLayer = (key: string, value: any): value is Array<unknown> =>
+    ['backgroundSize', 'backgroundPosition', 'backgroundRepeat'].includes(key) && Array.isArray(value)
+
+// { wght: 700 } is the object syntax, a breakpoints object holds strings or objects
+export const isFontVariationSettings = (key: string, value: any): value is Record<string, number> =>
+    key === 'fontVariationSettings' &&
+    typeof value === 'object' &&
+    value !== null &&
+    !Array.isArray(value) &&
+    Object.values(value).every((axisValue) => typeof axisValue === 'number')
+
 export const normalizeNumericValue = (value: number | string) =>
     value && typeof value === 'number' ? `${value}px` : value
 

package/src/web/registry.ts

@@ -32,7 +32,7 @@ export class UnistylesRegistry {
                 )
             }
 
-            return stylesheet(scopedTheme, this.services.runtime.miniRuntime)
+            return stylesheet(scopedTheme, this.services.runtime.getMiniRuntime(scopedThemeName))
         }
 
         const computedStylesheet = this.stylesheets.get(stylesheet)
@@ -41,11 +41,9 @@ export class UnistylesRegistry {
             return computedStylesheet
         }
 
-        const currentTheme = this.services.runtime.getTheme(
-            this.services.runtime.themeName,
-            this.services.state.CSSVars,
-        )
-        const createdStylesheet = stylesheet(currentTheme, this.services.runtime.miniRuntime)
+        const themeName = this.services.runtime.themeName
+        const currentTheme = this.services.runtime.getTheme(themeName, this.services.state.CSSVars)
+        const createdStylesheet = stylesheet(currentTheme, this.services.runtime.getMiniRuntime(themeName))
         const dependencies = Object.values(createdStylesheet).flatMap((value) => extractUnistyleDependencies(value))
 
         this.addDependenciesToStylesheet(stylesheet, dependencies)
@@ -65,9 +63,10 @@ export class UnistylesRegistry {
         dependencies.forEach((dependency) => dependenciesMap.add(dependency))
 
         const dispose = this.services.listener.addStylesheetListeners(Array.from(dependenciesMap), () => {
+            const themeName = this.services.runtime.themeName
             const newComputedStylesheet = stylesheet(
-                this.services.runtime.getTheme(this.services.runtime.themeName, this.services.state.CSSVars),
-                this.services.runtime.miniRuntime,
+                this.services.runtime.getTheme(themeName, this.services.state.CSSVars),
+                this.services.runtime.getMiniRuntime(themeName),
             )
 
             this.stylesheets.set(stylesheet, newComputedStylesheet)

package/src/web/runtime.ts

@@ -49,13 +49,8 @@ export class UnistylesRuntime {
         }
     }
 
+    // App theme, like on native. ScopedTheme is read from React Context (useUnistyles) (#1295)
     get themeName() {
-        const scopedTheme = this.services.shadowRegistry.getScopedTheme()
-
-        if (scopedTheme) {
-            return scopedTheme
-        }
-
         if (this.services.state.hasAdaptiveThemes) {
             return schemeToTheme(this.colorScheme) as AppThemeName
         }
@@ -150,9 +145,14 @@ export class UnistylesRuntime {
     }
 
     get miniRuntime(): UnistylesMiniRuntime {
+        return this.getMiniRuntime(this.themeName)
+    }
+
+    // StyleSheets get the name of the theme they are called with
+    getMiniRuntime = (themeName?: AppThemeName): UnistylesMiniRuntime => {
         return {
             colorScheme: this.colorScheme,
-            themeName: this.themeName,
+            themeName,
             contentSizeCategory: this.contentSizeCategory,
             breakpoint: this.breakpoint,
             isLandscape: this.orientation === Orientation.Landscape,

package/src/web/utils/unistyle.ts

@@ -6,7 +6,7 @@ import type { StyleSheet, StyleSheetWithSuperPowers, UnistylesValues } from '../
 import type { UnistylesRuntime } from '../runtime'
 
 import { ColorScheme, Orientation } from '../../specs/types'
-import { isDefined, isUnistylesMq, parseMq } from '../../utils'
+import { isAnimatedStyleHandle, isDefined, isUnistylesMq, parseMq } from '../../utils'
 import * as unistyles from '../services'
 import { UNI_GENERATED_KEYS, type UniGeneratedKey, type UniGeneratedStyle } from '../types'
 import { hyphenate, keyInObject, reduceObject } from './common'
@@ -142,9 +142,7 @@ export const checkForAnimated = (value: any): boolean => {
     }
 
     if (typeof value === 'object' && value !== null) {
-        // Reanimated useAnimatedStyle handle, it's a plain object, not an Animated.Node
-        // styleUpdaterContainer was added in Reanimated 4.1, so check only the keys every version has
-        if ('viewDescriptors' in value && 'initial' in value) {
+        if (isAnimatedStyleHandle(value)) {
             return true
         }
 

package/lib/commonjs/web/convert/module.d.js

@@ -1,2 +0,0 @@
-"use strict";
-//# sourceMappingURL=module.d.js.map

package/lib/commonjs/web/convert/module.d.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["web/convert/module.d.ts"],"mappings":"","ignoreList":[]}

package/lib/module/web/convert/module.d.js

@@ -1,2 +0,0 @@
-"use strict";
-//# sourceMappingURL=module.d.js.map

package/lib/module/web/convert/module.d.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["web/convert/module.d.ts"],"mappings":"","ignoreList":[]}