react-native-unistyles 3.4.0 → 3.5.1

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

package/src/web/runtime.ts

@@ -80,6 +80,12 @@ export class UnistylesRuntime {
             return Orientation.Portrait
         }
 
+        // `screen.orientation` is undefined in browsers without the Screen
+        // Orientation API (e.g. iOS Safari <= 16.3), fall back to the viewport
+        if (!screen.orientation) {
+            return window.matchMedia('(orientation: portrait)').matches ? Orientation.Portrait : Orientation.Landscape
+        }
+
         return screen.orientation.type.includes('portrait') ? Orientation.Portrait : Orientation.Landscape
     }