react-native-unistyles 3.5.3 → 3.7.0

package/src/unifiber/src/adapters/reanimated.ts

@@ -0,0 +1,204 @@
+// Keeps Reanimated's CSS style copy (`_cssStyle`) in sync with native-only style updates.
+// Private fields are pinned by test/reanimated-contract.test.ts for 4.5 and 4.7.
+import type { Host } from '../host'
+import type { OwnerAdapter, StyleSource } from './registry'
+import * as fiber from '../fiber'
+
+// Bound once: Metro's inline requires
+const { contextReaderFor } = fiber
+const CLASS_COMPONENT = fiber.Tag.ClassComponent
+
+type CSSManagerLike = { update(style: Record<string, unknown>, props?: Record<string, unknown>): void }
+
+type AnimatedComponentLike = {
+    props: Record<string, any>
+    _cssStyle: Record<string, unknown>
+    _CSSManager?: CSSManagerLike
+    // true between componentWillUnmount and componentDidMount: also while frozen, suspended or in a hidden Activity
+    _willUnmount?: boolean
+    _updateStyles(props: Record<string, any>): void
+    shouldComponentUpdate(nextProps: Record<string, any>, ...rest: Array<unknown>): boolean
+}
+
+type AttachedState = {
+    source: StyleSource
+    original: (props: Record<string, any>) => void
+    originalShouldUpdate: AnimatedComponentLike['shouldComponentUpdate']
+    rendering: boolean
+    styleProp: unknown
+    epoch: number
+    contextKeys: Array<unknown>
+    fresh: Record<string, unknown> | undefined
+}
+
+// Symbol.for: two copies of unifiber in one bundle never wrap a component twice
+const STATE = Symbol.for('unifiber.reanimated.css')
+
+// Kept out of AnimatedComponentLike: a unique symbol in a public type breaks consumers' declaration builds (TS4023)
+type Attached = AnimatedComponentLike & { [STATE]?: AttachedState }
+
+const hasCSSConfig = (cssStyle: Record<string, unknown>) => {
+    for (const key in cssStyle) {
+        if (key.startsWith('transition') || key.startsWith('animation')) {
+            return true
+        }
+    }
+
+    return false
+}
+
+// Keyframe animations and pseudo-styles register again on update after componentWillUnmount cleaned them up.
+// React runs no componentWillUnmount for a subtree deleted while hidden, so on a hidden owner they would leak.
+const registersOnUpdate = (cssStyle: Record<string, unknown>) => {
+    for (const key in cssStyle) {
+        if (key.startsWith('animation')) {
+            return true
+        }
+
+        const value = cssStyle[key]
+
+        if (value !== null && typeof value === 'object' && !Array.isArray(value)) {
+            for (const selector in value) {
+                if (selector === 'default' || selector.startsWith(':')) {
+                    return true
+                }
+
+                break
+            }
+        }
+    }
+
+    return false
+}
+
+// Deepest case: ScrollView with refreshControl on Android, 6-7 fibers
+const MAX_OWNER_DEPTH = 12
+
+// The class whose `_componentRef` is this host's public instance. Lists don't match: their ref isn't a host.
+export const animatedComponentOf = (host: Host | null | undefined): AnimatedComponentLike | null => {
+    const fiber = host as any
+
+    if (fiber?.memoizedProps?.collapsable !== false) {
+        return null
+    }
+
+    const publicInstance = fiber.stateNode?.canonical?.publicInstance
+
+    if (!publicInstance) {
+        return null
+    }
+
+    let current = fiber.return
+
+    for (let depth = 0; current && depth < MAX_OWNER_DEPTH; depth++) {
+        if (current.tag === CLASS_COMPONENT && current.stateNode?._componentRef === publicInstance) {
+            return isAnimatedComponent(current.stateNode) ? current.stateNode : null
+        }
+
+        current = current.return
+    }
+
+    return null
+}
+
+const isAnimatedComponent = (owner: any): owner is AnimatedComponentLike =>
+    typeof owner?._updateStyles === 'function' &&
+    typeof owner.shouldComponentUpdate === 'function' &&
+    owner._cssStyle !== null &&
+    typeof owner._cssStyle === 'object'
+
+function updateStylesThroughSource(this: Attached, props: Record<string, any>) {
+    const state = this[STATE]!
+
+    state.original.call(this, props)
+
+    if (!hasCSSConfig(this._cssStyle)) {
+        return
+    }
+
+    const epoch = state.source.epoch()
+    const read = contextReaderFor(this, state.rendering)
+    const contexts = state.source.contexts ?? []
+    let contextChanged = false
+
+    for (let i = 0; i < contexts.length; i++) {
+        const context = contexts[i]!
+        const value = read(context)
+        const key = state.source.contextKey ? state.source.contextKey(context, value) : value
+
+        if (state.contextKeys[i] !== key) {
+            state.contextKeys[i] = key
+            contextChanged = true
+        }
+    }
+
+    if (contextChanged || state.styleProp !== props.style || state.epoch !== epoch) {
+        state.fresh = state.source.resolve(props, read)
+        state.styleProp = props.style
+        state.epoch = epoch
+    }
+
+    const fresh = state.fresh
+
+    if (!fresh) {
+        return
+    }
+
+    // only the keys Reanimated kept: animated styles were split out of _cssStyle
+    for (const key in this._cssStyle) {
+        if (key in fresh) {
+            this._cssStyle[key] = fresh[key]
+        }
+    }
+}
+
+// Marks the render phase, where context must be read from React's stack
+function shouldUpdateMarkingRender(this: Attached, ...args: [Record<string, any>, ...Array<unknown>]) {
+    const state = this[STATE]!
+
+    state.rendering = true
+
+    try {
+        return state.originalShouldUpdate.apply(this, args)
+    } finally {
+        state.rendering = false
+    }
+}
+
+export const reanimatedCSSAdapter: OwnerAdapter<AnimatedComponentLike> = {
+    name: 'react-native-reanimated/css',
+    gate: (host: Host) => (host as unknown as fiber.RawFiber).memoizedProps?.collapsable === false,
+    claim: animatedComponentOf,
+    attach: (owner: Attached, source) => {
+        if (owner[STATE]) {
+            return
+        }
+
+        owner[STATE] = {
+            source,
+            original: owner._updateStyles,
+            originalShouldUpdate: owner.shouldComponentUpdate,
+            rendering: false,
+            styleProp: undefined,
+            epoch: -1,
+            contextKeys: [],
+            fresh: undefined,
+        }
+        owner._updateStyles = updateStylesThroughSource
+        owner.shouldComponentUpdate = shouldUpdateMarkingRender
+    },
+    refresh: (owner) => {
+        // not mounted yet
+        if (typeof owner._CSSManager?.update !== 'function') {
+            return
+        }
+
+        // Hidden transitions still run, so the reveal shows the new value instead of animating from the old one
+        if (owner._willUnmount === true && registersOnUpdate(owner._cssStyle)) {
+            return
+        }
+
+        owner._updateStyles(owner.props)
+        owner._CSSManager.update(owner._cssStyle, owner.props)
+    },
+}

package/src/unifiber/src/adapters/registry.ts

@@ -0,0 +1,102 @@
+import type { Context } from 'react'
+import type { ContextReader } from '../fiber'
+import type { Host } from '../host'
+
+export interface StyleSource {
+    readonly name: string
+    // bumps on every runtime change (theme, breakpoint, ...)
+    epoch(): number
+    readonly contexts?: ReadonlyArray<Context<any>>
+    // cache key for a context value; default: the value itself. Stable scopes renamed in place need `scope?.name`
+    contextKey?(context: Context<any>, value: unknown): unknown
+    // undefined: none of these styles belong to this source
+    resolve(props: Record<string, any>, read: ContextReader): Record<string, unknown> | undefined
+}
+
+export interface OwnerAdapter<Owner extends object = object> {
+    readonly name: string
+    // runs on every link: keep it to a property read or two
+    gate(host: Host): boolean
+    claim(host: Host): Owner | null
+    attach(owner: Owner, source: StyleSource): void
+    // runs for hidden owners too (frozen, suspended, hidden Activity): skip there what can't run while hidden
+    refresh(owner: Owner, source: StyleSource): void
+}
+
+export type OwnerRegistry = {
+    link(host: Host | null | undefined): void
+    refresh(hosts: ReadonlyArray<Host | null | undefined>): void
+}
+
+// An adapter that throws is disabled for the session and reported once
+export const createOwnerRegistry = (
+    source: StyleSource,
+    adapters: ReadonlyArray<OwnerAdapter<any>>,
+    onAdapterError?: (reason: string) => void,
+): OwnerRegistry => {
+    const disabledAdapters = new Set<OwnerAdapter>()
+    const disable = (adapter: OwnerAdapter, error: unknown) => {
+        disabledAdapters.add(adapter)
+        onAdapterError?.(`adapter ${adapter.name} failed: ${String(error)}`)
+    }
+    // Not inline closures: a closure in link() makes Hermes allocate its environment on every call
+    const attachOwner = (adapter: OwnerAdapter, host: Host) => {
+        try {
+            const owner = adapter.claim(host)
+
+            if (owner) {
+                adapter.attach(owner, source)
+            }
+        } catch (error) {
+            disable(adapter, error)
+        }
+    }
+    const refreshOwner = (adapter: OwnerAdapter, host: Host, seen: Set<object>) => {
+        try {
+            const owner = adapter.claim(host)
+
+            if (owner && !seen.has(owner)) {
+                seen.add(owner)
+                adapter.attach(owner, source)
+                adapter.refresh(owner, source)
+            }
+        } catch (error) {
+            disable(adapter, error)
+        }
+    }
+
+    return {
+        link(host) {
+            if (!host) {
+                return
+            }
+
+            for (let i = 0; i < adapters.length; i++) {
+                const adapter = adapters[i]!
+
+                if (adapter.gate(host) && !disabledAdapters.has(adapter)) {
+                    attachOwner(adapter, host)
+                }
+            }
+        },
+        refresh(hosts) {
+            const seen = new Set<object>()
+
+            for (let h = 0; h < hosts.length; h++) {
+                const host = hosts[h]
+
+                if (!host) {
+                    continue
+                }
+
+                for (let i = 0; i < adapters.length; i++) {
+                    const adapter = adapters[i]!
+
+                    if (adapter.gate(host) && !disabledAdapters.has(adapter)) {
+                        refreshOwner(adapter, host, seen)
+                    }
+                }
+            }
+        },
+    }
+}

package/src/unifiber/src/diagnostics.ts

@@ -0,0 +1,55 @@
+import type { RawFiber } from './fiber'
+import type { Host } from './host'
+import * as host from './host'
+
+// Bound once: Metro's inline requires
+const { committedHalf, fiberOf } = host
+
+const styleDiffers = (a: RawFiber, b: RawFiber) => a.memoizedProps?.style !== b.memoizedProps?.style
+
+const flattenInto = (style: unknown, out: Record<string, unknown>) => {
+    if (Array.isArray(style)) {
+        for (let i = 0; i < style.length; i++) {
+            flattenInto(style[i], out)
+        }
+    } else if (style && typeof style === 'object') {
+        Object.assign(out, style)
+    }
+
+    return out
+}
+
+export type Drift = { key: string; react: unknown; expected: unknown }
+
+// Keys that differ from React's committed props: React re-sends them on the view's next render
+export const verify = (host: Host, expected: Record<string, unknown>): Array<Drift> => {
+    const baseline = committedHalf(fiberOf(host), styleDiffers) ?? fiberOf(host)
+    const react = flattenInto(baseline.memoizedProps?.style, {})
+    const drift: Array<Drift> = []
+
+    for (const key in expected) {
+        if (react[key] !== expected[key]) {
+            drift.push({ key, react: react[key], expected: expected[key] })
+        }
+    }
+
+    return drift
+}
+
+// Development builds only
+export const getOwners = (host: Host, max = 8): Array<string> => {
+    const owners: Array<string> = []
+
+    for (let owner = fiberOf(host)._debugOwner; owner && owners.length < max; owner = owner._debugOwner ?? owner.owner) {
+        const name = owner.name ?? owner.type?.displayName ?? owner.type?.name ?? owner.type?.render?.name
+
+        if (name) {
+            owners.push(name)
+        }
+    }
+
+    return owners
+}
+
+// Development builds only
+export const getCreationStack = (host: Host): string | undefined => fiberOf(host)._debugStack?.stack

package/src/unifiber/src/fiber.ts

@@ -0,0 +1,262 @@
+// The only module that reads React's fiber fields. A missing field gives undefined / null for that call, never a throw.
+import type { Context } from 'react'
+
+// ReactWorkTags, React 19
+export const Tag = {
+    ClassComponent: 1,
+    HostRoot: 3,
+    HostComponent: 5,
+    ContextProvider: 10,
+    Suspense: 13,
+    Offscreen: 22,
+    Activity: 31,
+} as const
+
+declare const brand: unique symbol
+export type FiberNode = { readonly [brand]: 'FiberNode' }
+export type ShadowNode = { readonly __hostObjectShadowNodeWrapper?: unknown }
+
+export type RawFiber = {
+    tag: number
+    type: any
+    return: RawFiber | null
+    child: RawFiber | null
+    sibling: RawFiber | null
+    alternate: RawFiber | null
+    stateNode: any
+    memoizedProps: any
+    pendingProps: any
+    memoizedState: any
+    _debugOwner?: any
+    _debugStack?: { stack?: string } | null
+}
+
+export const raw = (fiber: FiberNode | null | undefined) => fiber as unknown as RawFiber | null | undefined
+
+export const hostFiberOf = (instance: unknown): FiberNode | null =>
+    ((instance as any)?.__internalInstanceHandle ?? null) as FiberNode | null
+
+// RN composites that keep their host behind a ref of their own, most common first
+const compositeHostRefs: Array<(handle: any) => unknown> = [
+    (handle) => handle?.getScrollResponder?.()?.getNativeScrollRef?.(), // FlatList, SectionList, VirtualizedList
+    (handle) => handle?.getNativeScrollRef?.(), // ScrollView
+    (handle) => handle?._viewRef, // ImageBackground
+    (handle) => handle?.viewRef?.current, // KeyboardAvoidingView
+    (handle) => handle?._nativeRef, // RefreshControl
+]
+
+export const resolveHostFiber = (handle: unknown): FiberNode | null => {
+    const direct = hostFiberOf(handle)
+
+    if (direct || !handle) {
+        return direct
+    }
+
+    for (let i = 0; i < compositeHostRefs.length; i++) {
+        const fiber = hostFiberOf(compositeHostRefs[i]!(handle))
+
+        if (fiber) {
+            return fiber
+        }
+    }
+
+    return null
+}
+
+export const fiberOfInstance = (instance: unknown): FiberNode | null =>
+    ((instance as any)?._reactInternals ?? null) as FiberNode | null
+
+export const firstHostBelow = (fiber: FiberNode | null): FiberNode | null => {
+    let current = raw(fiber)
+
+    while (current && current.tag !== Tag.HostComponent) {
+        current = current.child
+    }
+
+    return (current ?? null) as FiberNode | null
+}
+
+export const hostAncestor = (fiber: FiberNode | null, levels = 1): FiberNode | null => {
+    let current = raw(fiber)?.return
+
+    while (current) {
+        if (current.tag === Tag.HostComponent && --levels === 0) {
+            return current as unknown as FiberNode
+        }
+
+        current = current.return
+    }
+
+    return null
+}
+
+export const shadowNodesOf = (fiber: FiberNode | null, out: Array<ShadowNode>) => {
+    const current = raw(fiber)
+    const node = current?.stateNode?.node
+    const alternateNode = current?.alternate?.stateNode?.node
+
+    if (node) {
+        out.push(node)
+    }
+
+    if (alternateNode && alternateNode !== node) {
+        out.push(alternateNode)
+    }
+}
+
+const childOfParent = (parent: RawFiber, a: RawFiber, b: RawFiber): RawFiber | null => {
+    for (let child = parent.child; child; child = child.sibling) {
+        if (child === a || child === b) {
+            return child
+        }
+    }
+
+    return null
+}
+
+// React 19.2 findCurrentFiberUsingSlowPath, returning null where React throws
+export const committedOf = (fiber: FiberNode | null): FiberNode | null => {
+    const self = raw(fiber)
+
+    if (!self) {
+        return null
+    }
+
+    const alternate = self.alternate
+
+    if (!alternate) {
+        let root = self
+
+        while (root.return) {
+            root = root.return
+        }
+
+        return root.tag === Tag.HostRoot ? fiber : null
+    }
+
+    let a: RawFiber = self
+    let b: RawFiber = alternate
+
+    while (true) {
+        const parentA = a.return
+
+        if (!parentA) {
+            break
+        }
+
+        const parentB = parentA.alternate
+
+        if (!parentB) {
+            const next = parentA.return
+
+            if (next) {
+                a = next
+                continue
+            }
+
+            break
+        }
+
+        if (parentA.child === parentB.child) {
+            const found = childOfParent(parentA, a, b)
+
+            return found === a ? fiber : found === b ? (alternate as unknown as FiberNode) : null
+        }
+
+        if (a.return !== b.return) {
+            a = parentA
+            b = parentB
+        } else {
+            const inA = childOfParent(parentA, a, b)
+            const inB = inA ? null : childOfParent(parentB, a, b)
+
+            if (!inA && !inB) {
+                return null
+            }
+
+            const aUnderA = inA ? inA === a : inB !== a
+
+            a = aUnderA ? parentA : parentB
+            b = aUnderA ? parentB : parentA
+        }
+
+        if (a.alternate !== b) {
+            return null
+        }
+    }
+
+    if (a.tag !== Tag.HostRoot) {
+        return null
+    }
+
+    return a.stateNode?.current === a ? fiber : (alternate as unknown as FiberNode)
+}
+
+// a provider's other half can hold its previous value
+const committedProviderValue = (provider: RawFiber): unknown => {
+    const alternate = provider.alternate
+
+    if (!alternate || alternate.memoizedProps?.value === provider.memoizedProps?.value) {
+        return provider.memoizedProps?.value
+    }
+
+    return (raw(committedOf(provider as unknown as FiberNode)) ?? provider).memoizedProps?.value
+}
+
+export const readContext = <T>(fiber: FiberNode | null, context: Context<T>, fallback?: T): T | undefined => {
+    for (let current = raw(fiber)?.return; current; current = current.return) {
+        if (current.tag === Tag.ContextProvider && (current.type === context || current.type?._context === context)) {
+            return committedProviderValue(current) as T
+        }
+    }
+
+    return fallback
+}
+
+// Fabric is a secondary renderer: its context stack is `_currentValue2`. Only valid during render.
+export const readContextDuringRender = <T>(context: Context<T>): T | undefined =>
+    (context as any)?._currentValue2
+
+export type ContextReader = <T>(context: Context<T>) => T | undefined
+
+export const contextReaderFor = (instance: unknown, rendering: boolean): ContextReader =>
+    rendering ? readContextDuringRender : (context) => readCommittedContext(instance, context)
+
+const NO_PROVIDER = Symbol('no provider')
+
+const readCommittedContext = <T>(instance: unknown, context: Context<T>): T | undefined => {
+    const value = readContext(committedOf(fiberOfInstance(instance)), context, NO_PROVIDER as T)
+
+    return value === NO_PROVIDER ? readContextDuringRender(context) : value
+}
+
+// pendingProps too, so React still bails out. Replaced, not mutated: props are frozen in dev.
+export const patchRenderedProps = (
+    fiber: FiberNode | null,
+    patch: (props: Record<string, any>) => Record<string, any> | undefined,
+): boolean => {
+    const self = raw(fiber)
+
+    if (!self) {
+        return false
+    }
+
+    const patchedSelf = replaceProps(self, patch)
+    const patchedAlternate = self.alternate ? replaceProps(self.alternate, patch) : false
+
+    return patchedSelf || patchedAlternate
+}
+
+const replaceProps = (target: RawFiber, patch: (props: Record<string, any>) => Record<string, any> | undefined) => {
+    const props = target.memoizedProps
+    const next = props ? patch(props) : undefined
+
+    if (!next) {
+        return false
+    }
+
+    target.memoizedProps = next
+    target.pendingProps = next
+
+    return true
+}