react-native-unistyles 3.4.0 → 3.5.0

package/src/core/createUnistylesTouchableHighlight.tsx

@@ -0,0 +1,69 @@
+import type { TouchableHighlight } from 'react-native'
+
+import React, { useCallback, useLayoutEffect, useRef, useState } from 'react'
+
+import { UnistylesShadowRegistry } from '../specs'
+import { copyComponentProperties } from '../utils'
+import { passForwardedRef } from './passForwardRef'
+import { maybeWarnAboutMultipleUnistyles } from './warn'
+
+export const createUnistylesTouchableHighlight = (Component: typeof TouchableHighlight) => {
+    const UnistylesTouchableHighlight = (props: any) => {
+        const relinkRef = useRef<() => void>(undefined)
+        const [hiddenUnderlays, setHiddenUnderlays] = useState(0)
+
+        useLayoutEffect(() => {
+            if (hiddenUnderlays > 0) {
+                relinkRef.current?.()
+            }
+        }, [hiddenUnderlays])
+
+        // new props come with a parent render, re-renders for the underlay keep the ref and the scoped theme it captured
+        const ref = useCallback(
+            (ref: unknown) => {
+                maybeWarnAboutMultipleUnistyles(props.style, 'TouchableHighlight')
+
+                const scopedTheme = UnistylesShadowRegistry.getScopedTheme()
+
+                relinkRef.current = () => {
+                    const previousScopedTheme = UnistylesShadowRegistry.getScopedTheme()
+
+                    UnistylesShadowRegistry.setScopedTheme(scopedTheme)
+                    // @ts-ignore this is hidden from TS
+                    UnistylesShadowRegistry.remove(ref)
+                    // @ts-ignore this is hidden from TS
+                    UnistylesShadowRegistry.add(ref, props.style)
+                    UnistylesShadowRegistry.setScopedTheme(previousScopedTheme)
+                }
+
+                return passForwardedRef(
+                    ref,
+                    props.ref,
+                    () => {
+                        // @ts-ignore this is hidden from TS
+                        UnistylesShadowRegistry.add(ref, props.style)
+                    },
+                    () => {
+                        relinkRef.current = undefined
+                        // @ts-ignore this is hidden from TS
+                        UnistylesShadowRegistry.remove(ref)
+                    },
+                )
+            },
+            [props],
+        )
+
+        return (
+            <Component
+                {...props}
+                ref={ref}
+                onHideUnderlay={() => {
+                    setHiddenUnderlays((count) => count + 1)
+                    props.onHideUnderlay?.()
+                }}
+            />
+        )
+    }
+
+    return copyComponentProperties(Component, UnistylesTouchableHighlight)
+}

package/src/core/index.ts

@@ -1,5 +1,7 @@
 export { createUnistylesElement } from './createUnistylesElement'
+export { createUnistylesActivityIndicator } from './createUnistylesActivityIndicator'
 export { createUnistylesImageBackground } from './createUnistylesImageBackground'
+export { createUnistylesTouchableHighlight } from './createUnistylesTouchableHighlight'
 export { withUnistyles } from './withUnistyles'
 export { passForwardedRef } from './passForwardRef'
 export { getClassName } from './getClassname'

package/src/diagnostics/index.ts

@@ -0,0 +1,3 @@
+// package exports resolve this file as is, so the platform split lives in ./verify
+export { verify } from './verify'
+export type { VerifyMismatch, VerifyReport } from './types'

package/src/diagnostics/types.ts

@@ -0,0 +1,25 @@
+export type VerifyMismatch = {
+    tag: number
+    component: string
+    styleKey: string
+    prop: string
+    expected: string
+    actual: string
+}
+
+export type VerifyReport = {
+    // all nodes linked with Unistyles
+    linked: number
+    // nodes compared with the committed shadow tree
+    checked: number
+    // linked nodes that are not part of the committed shadow tree
+    detached: number
+    // nodes hidden by Suspense or frozen screens
+    suspended: number
+    // nodes unmounted without unlink, waiting for the sweep
+    orphans: number
+    // shadow tree updates that were not committed yet
+    pendingUpdates: number
+    mismatches: Array<VerifyMismatch>
+    errors: Array<string>
+}

package/src/diagnostics/verify.native.ts

@@ -0,0 +1,7 @@
+import type { VerifyReport } from './types'
+
+import { UnistylesShadowRegistry } from '../specs'
+
+// Compares props committed to the shadow tree with styles rebuilt for every linked node
+// (its own arguments, variants and the current theme). Meant for tests, it never commits anything.
+export const verify = (): VerifyReport => UnistylesShadowRegistry.verify()

package/src/diagnostics/verify.ts

@@ -0,0 +1,13 @@
+import type { VerifyReport } from './types'
+
+// There is no shadow tree on web
+export const verify = (): VerifyReport => ({
+    linked: 0,
+    checked: 0,
+    detached: 0,
+    suspended: 0,
+    orphans: 0,
+    pendingUpdates: 0,
+    mismatches: [],
+    errors: [],
+})

package/src/index.ts

@@ -8,9 +8,12 @@ if (majorReactVersions === undefined || majorReactVersions < 19) {
 
 export { StyleSheet, UnistylesRuntime } from './specs'
 export { UnistyleDependency } from './specs'
+export type { UnistylesMiniRuntime } from './specs'
+export { ColorScheme, Orientation, StatusBarStyle } from './specs/types'
 export { mq } from './mq'
 export type { UnistylesThemes, UnistylesBreakpoints } from './global'
 export { withUnistyles, useUnistyles, createUnistylesElement } from './core'
-export type { UnistylesVariants, UnistylesValues, IOSContentSizeCategory, AndroidContentSizeCategory } from './types'
+export type { UnistylesVariants, UnistylesValues } from './types'
+export { IOSContentSizeCategory, AndroidContentSizeCategory, WebContentSizeCategory } from './types'
 export { Display, Hide, ScopedTheme } from './components'
 export { useServerUnistyles, hydrateServerUnistyles, getServerUnistyles, resetServerUnistyles } from './server'

package/src/mocks.ts

@@ -146,6 +146,47 @@ jest.mock('react-native-unistyles', () => {
     }
 
     return {
+        ColorScheme: {
+            Light: 'light',
+            Dark: 'dark',
+            Unspecified: 'unspecified',
+        },
+        Orientation: {
+            Portrait: 'portrait',
+            Landscape: 'landscape',
+        },
+        StatusBarStyle: {
+            Default: 'default',
+            Light: 'light',
+            Dark: 'dark',
+        },
+        IOSContentSizeCategory: {
+            AccessibilityExtraExtraExtraLarge: 'accessibilityExtraExtraExtraLarge',
+            AccessibilityExtraExtraLarge: 'accessibilityExtraExtraLarge',
+            AccessibilityExtraLarge: 'accessibilityExtraLarge',
+            AccessibilityLarge: 'accessibilityLarge',
+            AccessibilityMedium: 'accessibilityMedium',
+            ExtraExtraExtraLarge: 'xxxLarge',
+            ExtraExtraLarge: 'xxLarge',
+            ExtraLarge: 'xLarge',
+            Large: 'Large',
+            Medium: 'Medium',
+            Small: 'Small',
+            ExtraSmall: 'xSmall',
+            Unspecified: 'unspecified',
+        },
+        AndroidContentSizeCategory: {
+            Small: 'Small',
+            Default: 'Default',
+            Large: 'Large',
+            ExtraLarge: 'ExtraLarge',
+            Huge: 'Huge',
+            ExtraHuge: 'ExtraHuge',
+            ExtraExtraHuge: 'ExtraExtraHuge',
+        },
+        WebContentSizeCategory: {
+            Unspecified: 'web-unspecified',
+        },
         Hide: () => null,
         Display: () => null,
         ScopedTheme: () => null,

package/src/reanimated/variant/useUpdateVariantColor.native.ts

@@ -1,4 +1,4 @@
-import { useEffect, useLayoutEffect } from 'react'
+import { useEffect, useLayoutEffect, useRef } from 'react'
 import { useSharedValue } from 'react-native-reanimated'
 
 import type { UseUpdateVariantColorConfig } from './types'
@@ -12,6 +12,7 @@ export const useUpdateVariantColor = <T extends Record<string, any>>({
 }: UseUpdateVariantColorConfig<T>) => {
     const fromValue = useSharedValue<string>(style[colorKey])
     const toValue = useSharedValue<string>(style[colorKey])
+    const applied = useRef<{ style: T; colorKey: typeof colorKey }>(undefined)
 
     useEffect(() => {
         const dispose = StyleSheet.addChangeListener((changedDependencies) => {
@@ -31,6 +32,11 @@ export const useUpdateVariantColor = <T extends Record<string, any>>({
     }, [style, colorKey])
 
     useLayoutEffect(() => {
+        if (applied.current?.style === style && applied.current.colorKey === colorKey) {
+            return
+        }
+
+        applied.current = { style, colorKey }
         fromValue.set(toValue.value)
         toValue.set(style[colorKey])
     }, [style, colorKey])

package/src/specs/ShadowRegistry/index.ts

@@ -1,8 +1,11 @@
 import { NitroModules } from 'react-native-nitro-modules'
 
+import type { VerifyReport } from '../../diagnostics/types'
 import type { UnistylesShadowRegistry as UnistylesShadowRegistrySpec } from './ShadowRegistry.nitro'
 import type { ShadowNode, Unistyle, ViewHandle } from './types'
 
+import { StyleSheet } from '../StyleSheet'
+
 interface ShadowRegistry extends UnistylesShadowRegistrySpec {
     // Babel API
     add(handle?: ViewHandle, styles?: Array<Unistyle>): void
@@ -14,10 +17,14 @@ interface ShadowRegistry extends UnistylesShadowRegistrySpec {
     flush(): void
     setScopedTheme(themeName?: string): void
     getScopedTheme(): string | undefined
+    verify(): VerifyReport
+    takeCommittedTags(): Array<number>
+    refreshReactNodes(nodes: Array<ShadowNode>): void
 }
 
 const HybridShadowRegistry = NitroModules.createHybridObject<ShadowRegistry>('UnistylesShadowRegistry')
 
+const HOST_COMPONENT_TAG = 5
 const SUSPENSE_TAG = 13
 const OFFSCREEN_TAG = 22
 
@@ -65,6 +72,123 @@ const findShadowNodeForHandle = (handle: ViewHandle) => {
     return node
 }
 
+const getNativeTag = (handle: ViewHandle): number | undefined =>
+    findFiberForHandle(handle)?.stateNode?.canonical?.nativeTag
+
+// by native tag, weak: views unmounted while frozen never unlink, their dead refs are dropped when the map doubles
+const linkedHandles = new Map<number, WeakRef<ViewHandle>>()
+const MIN_SWEEP_SIZE = 256
+let sweepSize = MIN_SWEEP_SIZE
+
+const sweepUnmountedHandles = () => {
+    linkedHandles.forEach((ref, tag) => {
+        if (!ref.deref()) {
+            linkedHandles.delete(tag)
+        }
+    })
+
+    sweepSize = Math.max(MIN_SWEEP_SIZE, linkedHandles.size * 2)
+}
+
+const trackHandle = (handle: ViewHandle) => {
+    const tag = getNativeTag(handle)
+
+    // views re-link on every render
+    if (tag === undefined || linkedHandles.get(tag)?.deref() === handle) {
+        return
+    }
+
+    linkedHandles.set(tag, new WeakRef(handle))
+
+    if (linkedHandles.size >= sweepSize) {
+        sweepUnmountedHandles()
+    }
+}
+
+const untrackHandle = (handle: ViewHandle) => {
+    const tag = getNativeTag(handle)
+
+    if (tag !== undefined && linkedHandles.get(tag)?.deref() === handle) {
+        linkedHandles.delete(tag)
+    }
+}
+
+// React re-attaches an untouched subtree through its root's node and only follows clones made on the JS thread.
+// Once a node was cloned elsewhere (state updates, Reanimated), React would commit a subtree from before a Unistyles
+// update, so after a Unistyles commit the committed nodes and their host ancestors must point at the committed tree
+const refreshReactNodes = () => {
+    const tags = HybridShadowRegistry.takeCommittedTags()
+
+    if (tags.length === 0) {
+        return
+    }
+
+    const nodes = new Set<ShadowNode>()
+    const visited = new Set<any>()
+
+    for (const tag of tags) {
+        const handle = linkedHandles.get(tag)?.deref()
+
+        if (!handle) {
+            continue
+        }
+
+        const fiber = findFiberForHandle(handle)
+
+        // hidden by Suspense or a frozen screen
+        if (!fiber || isInsideSuspendedBoundary(fiber)) {
+            continue
+        }
+
+        for (let current: any = fiber; current && !visited.has(current); current = current.return) {
+            visited.add(current)
+
+            if (current.alternate) {
+                visited.add(current.alternate)
+            }
+
+            if (current.tag !== HOST_COMPONENT_TAG) {
+                continue
+            }
+
+            for (const target of [current, current.alternate]) {
+                const node = target?.stateNode?.node
+
+                if (node) {
+                    nodes.add(node)
+                }
+            }
+        }
+    }
+
+    if (nodes.size > 0) {
+        HybridShadowRegistry.refreshReactNodes(Array.from(nodes))
+    }
+}
+
+StyleSheet.addChangeListener(refreshReactNodes)
+
+// runs for every style on every link, so it allocates only for the rare merged style (eg. flattened by Animated)
+const splitMergedUnistyles = (style: any) => {
+    let hasUnistyle = false
+
+    for (const key in style) {
+        if (!key.startsWith('unistyles_') || !Object.prototype.hasOwnProperty.call(style, key)) {
+            continue
+        }
+
+        if (hasUnistyle) {
+            return Object.keys(style)
+                .filter((unistyleKey) => unistyleKey.startsWith('unistyles_'))
+                .map((unistyleKey) => ({ [unistyleKey]: style[unistyleKey] }))
+        }
+
+        hasUnistyle = true
+    }
+
+    return style
+}
+
 HybridShadowRegistry.add = (handle, styles) => {
     // virtualized nodes can be null
     if (!handle || !styles) {
@@ -78,6 +202,7 @@ HybridShadowRegistry.add = (handle, styles) => {
         .filter((style) => style && Object.keys(style).length > 0)
         .flat()
         .filter(Boolean)
+        .flatMap(splitMergedUnistyles)
 
     if (filteredStyles.length > 0) {
         const node = findShadowNodeForHandle(handle)
@@ -89,6 +214,7 @@ HybridShadowRegistry.add = (handle, styles) => {
         }
 
         HybridShadowRegistry.link(node, filteredStyles)
+        trackHandle(handle)
     }
 }
 
@@ -106,10 +232,11 @@ HybridShadowRegistry.remove = (handle) => {
             HybridShadowRegistry.suspend(maybeNode)
         } else {
             HybridShadowRegistry.unlink(maybeNode)
+            untrackHandle(handle)
         }
     }
 }
 
-type PrivateMethods = 'add' | 'remove' | 'link' | 'unlink' | 'suspend'
+type PrivateMethods = 'add' | 'remove' | 'link' | 'unlink' | 'suspend' | 'takeCommittedTags' | 'refreshReactNodes'
 
 export const UnistylesShadowRegistry = HybridShadowRegistry as Omit<ShadowRegistry, PrivateMethods>

package/src/specs/ShadowRegistry/types.ts

@@ -1,5 +1,8 @@
 export type StateNode = {
     node?: ShadowNode
+    canonical?: {
+        nativeTag?: number
+    }
 }
 
 export type ShadowNode = {

package/src/specs/StyleSheet/index.ts

@@ -34,8 +34,15 @@ export type UnistylesConfig = {
     breakpoints?: UnistylesBreakpoints
 }
 
+// React Native 0.85 dropped `absoluteFillObject`, where `absoluteFill` is already a plain
+// style object. Older versions still expose both, so the descriptor is read from React Native
+// instead of being duplicated here.
+type AbsoluteFillObject = typeof NativeStyleSheetType extends { absoluteFillObject: infer TStyle }
+    ? TStyle
+    : typeof NativeStyleSheetType.absoluteFill
+
 export interface UnistylesStyleSheet extends UnistylesStyleSheetSpec {
-    absoluteFillObject: typeof NativeStyleSheetType.absoluteFill
+    absoluteFillObject: AbsoluteFillObject
     absoluteFill: typeof NativeStyleSheetType.absoluteFill
     compose: typeof NativeStyleSheetType.compose
     flatten: typeof NativeStyleSheetType.flatten
@@ -52,7 +59,8 @@ export interface UnistylesStyleSheet extends UnistylesStyleSheetSpec {
 
 const HybridUnistylesStyleSheet = NitroModules.createHybridObject<UnistylesStyleSheet>('UnistylesStyleSheet')
 
-HybridUnistylesStyleSheet.absoluteFillObject = NativeStyleSheet.absoluteFill
+HybridUnistylesStyleSheet.absoluteFillObject = ((NativeStyleSheet as Record<string, unknown>).absoluteFillObject ??
+    NativeStyleSheet.absoluteFill) as AbsoluteFillObject
 HybridUnistylesStyleSheet.absoluteFill = NativeStyleSheet.absoluteFill
 HybridUnistylesStyleSheet.flatten = NativeStyleSheet.flatten
 HybridUnistylesStyleSheet.compose = NativeStyleSheet.compose

package/src/specs/UnistylesRuntime/index.ts

@@ -2,7 +2,12 @@ import { processColor } from 'react-native'
 import { NitroModules } from 'react-native-nitro-modules'
 
 import type { UnistylesThemes } from '../../global'
-import type { AndroidContentSizeCategory, IOSContentSizeCategory, UnistylesTheme } from '../../types'
+import type {
+    AndroidContentSizeCategory,
+    IOSContentSizeCategory,
+    UnistylesTheme,
+    WebContentSizeCategory,
+} from '../../types'
 import type { UnistylesNavigationBar } from '../NavigtionBar'
 import type { AppBreakpoint, AppTheme, AppThemeName, Color, ColorScheme, Orientation } from '../types'
 import type { UnistylesMiniRuntime, UnistylesRuntime as UnistylesRuntimeSpec } from './UnistylesRuntime.nitro'
@@ -13,7 +18,7 @@ import { type UnistylesStatusBar, attachStatusBarJSMethods } from '../StatusBar'
 export interface UnistylesRuntimePrivate extends Omit<UnistylesRuntimeSpec, 'setRootViewBackgroundColor'> {
     readonly colorScheme: ColorScheme
     readonly themeName?: AppThemeName
-    readonly contentSizeCategory: IOSContentSizeCategory | AndroidContentSizeCategory
+    readonly contentSizeCategory: IOSContentSizeCategory | AndroidContentSizeCategory | WebContentSizeCategory
     readonly breakpoint?: AppBreakpoint
     readonly orientation: Orientation
 

package/src/types/breakpoints.ts

@@ -9,9 +9,11 @@ type ExtractTransformArray<T> = T extends object ? { [K in keyof T]: ExtractBrea
 type ExtractBreakpoints<T> = T extends object
     ? keyof T extends BreakpointsOrMediaQueries
         ? T[keyof T]
-        : T extends Array<ToDeepUnistyles<TransformStyles>>
-          ? Array<ExtractTransformArray<T[number]>>
-          : T extends Array<infer _U>
+        : T extends ReadonlyArray<ToDeepUnistyles<TransformStyles>>
+          ? T extends Array<infer _U>
+              ? Array<ExtractTransformArray<T[number]>>
+              : ReadonlyArray<ExtractTransformArray<T[number]>>
+          : T extends ReadonlyArray<infer _U>
             ? T
             : {
                   [K in keyof T]: ExtractBreakpoints<T[K]>

package/src/types/stylesheet.ts

@@ -18,9 +18,9 @@ export type UnistyleImage = Omit<ImageStyle, NestedKeys>
 type UnistyleNestedStyles = {
     shadowOffset?: ToDeepUnistyles<ShadowOffset>
     textShadowOffset?: ToDeepUnistyles<ShadowOffset>
-    transform?: Array<ToDeepUnistyles<TransformStyles>>
-    boxShadow?: Array<ToDeepUnistyles<BoxShadowValue>> | string
-    filter?: Array<ToDeepUnistyles<FilterFunction>> | string
+    transform?: ReadonlyArray<ToDeepUnistyles<TransformStyles>>
+    boxShadow?: ReadonlyArray<ToDeepUnistyles<BoxShadowValue>> | string
+    filter?: ReadonlyArray<ToDeepUnistyles<FilterFunction>> | string
 }
 
 type VariantsObject = {

package/src/web/registry.ts

@@ -90,6 +90,9 @@ export class UnistylesRegistry {
         stylesCounter.delete(ref)
 
         if (stylesCounter.size === 0) {
+            // Safe to drop now: connect creates a new Set and the cleanup below only checks the DOM
+            this.stylesCounter.delete(hash)
+
             // Move this to the end of the event loop so the element is removed from the DOM
             return Promise.resolve().then(() => {
                 // Check if element is still in the DOM