react-native-unistyles 3.5.2 → 3.5.3

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

@@ -31,6 +31,28 @@ type MappedSecrets = {
     dependencies: Array<UnistyleDependency>
 }
 
+export const getSecrets = (styleProps: Record<string, any> = {}): MappedSecrets => {
+    const styles = Array.isArray(styleProps) ? styleProps.flat(Infinity) : [styleProps]
+
+    const secrets: Array<UnistylesSecrets> = styles.filter(Boolean).reduce((acc, style) => {
+        const unistyleKey = Object.keys(style).find((key) => key.startsWith('unistyles_'))
+
+        return acc.concat([
+            unistyleKey
+                ? style[unistyleKey]
+                : {
+                      uni__getStyles: () => style,
+                      uni__dependencies: [],
+                  },
+        ])
+    }, [])
+
+    return {
+        styles: secrets.reduce((acc, secret) => Object.assign(acc, secret.uni__getStyles()), {} as Record<string, any>),
+        dependencies: secrets.flatMap((secret) => secret.uni__dependencies),
+    }
+}
+
 export const withUnistyles = <TComponent, TMappings extends GenericComponentProps<TComponent>>(
     Component: TComponent,
     mappings?: Mappings<TMappings>,
@@ -44,31 +66,6 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
         contentContainerStyle?: UnistylesValues
     }
 
-    const getSecrets = (styleProps: Record<string, any> = {}): MappedSecrets => {
-        const styles = Array.isArray(styleProps) ? styleProps.flat() : [styleProps]
-
-        const secrets: Array<UnistylesSecrets> = styles.filter(Boolean).reduce((acc, style) => {
-            const unistyleKey = Object.keys(style).find((key) => key.startsWith('unistyles_'))
-
-            return acc.concat([
-                unistyleKey
-                    ? style[unistyleKey]
-                    : {
-                          uni__getStyles: () => style,
-                          uni__dependencies: [],
-                      },
-            ])
-        }, [])
-
-        return {
-            styles: secrets.reduce(
-                (acc, secret) => Object.assign(acc, secret.uni__getStyles()),
-                {} as Record<string, any>,
-            ),
-            dependencies: secrets.flatMap((secret) => secret.uni__dependencies),
-        }
-    }
-
     return forwardRef<GenericComponentRef<TComponent>, PropsWithUnistyles>((props, ref) => {
         const narrowedProps = props as PropsWithUnistyles & UnistyleStyles
         const NativeComponent = Component as ComponentType

package/src/specs/ShadowRegistry/index.ts

@@ -19,7 +19,7 @@ interface ShadowRegistry extends UnistylesShadowRegistrySpec {
     setScopedTheme(themeName?: string): void
     getScopedTheme(): string | undefined
     verify(): VerifyReport
-    takeCommittedTags(): Array<number>
+    takeCommittedInstanceHandles(): Array<any>
     refreshReactNodes(nodes: Array<ShadowNode>): void
 }
 
@@ -73,121 +73,107 @@ 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()
+    const fibers = HybridShadowRegistry.takeCommittedInstanceHandles()
 
-    if (tags.length === 0) {
+    if (fibers.length === 0) {
         return
     }
 
-    const nodes = new Set<ShadowNode>()
-    const visited = new Set<any>()
-
-    for (const tag of tags) {
-        const handle = linkedHandles.get(tag)?.deref()
+    const nodes: Array<ShadowNode> = []
+    const refreshedTags = new Set<number>()
+    const hostFibers: Array<any> = []
 
-        if (!handle) {
+    for (const fiber of fibers) {
+        // collected, unmounted since
+        if (!fiber) {
             continue
         }
 
-        const fiber = findFiberForHandle(handle)
-
-        // hidden by Suspense or a frozen screen
-        if (!fiber || isInsideSuspendedBoundary(fiber)) {
-            continue
-        }
+        let isHidden = false
 
-        for (let current: any = fiber; current && !visited.has(current); current = current.return) {
-            visited.add(current)
+        hostFibers.length = 0
 
-            if (current.alternate) {
-                visited.add(current.alternate)
+        for (let current: any = fiber; current; current = current.return) {
+            // hidden by Suspense or a frozen screen
+            if ((current.tag === SUSPENSE_TAG || current.tag === OFFSCREEN_TAG) && current.memoizedState !== null) {
+                isHidden = true
             }
 
             if (current.tag !== HOST_COMPONENT_TAG) {
                 continue
             }
 
-            for (const target of [current, current.alternate]) {
-                const node = target?.stateNode?.node
+            // its ancestors are visible and already collected
+            if (refreshedTags.has(current.stateNode?.canonical?.nativeTag)) {
+                break
+            }
+
+            hostFibers.push(current)
+        }
+
+        if (isHidden) {
+            continue
+        }
+
+        for (const hostFiber of hostFibers) {
+            const node = hostFiber.stateNode?.node
+            const alternateNode = hostFiber.alternate?.stateNode?.node
+            const hostTag = hostFiber.stateNode?.canonical?.nativeTag
+
+            if (hostTag !== undefined) {
+                refreshedTags.add(hostTag)
+            }
+
+            if (node) {
+                nodes.push(node)
+            }
 
-                if (node) {
-                    nodes.add(node)
-                }
+            if (alternateNode && alternateNode !== node) {
+                nodes.push(alternateNode)
             }
         }
     }
 
-    if (nodes.size > 0) {
-        HybridShadowRegistry.refreshReactNodes(Array.from(nodes))
+    if (nodes.length > 0) {
+        HybridShadowRegistry.refreshReactNodes(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
+// 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>) => {
+    if (!style) {
+        return
+    }
+
+    const keys = Object.keys(style)
+    let unistylesCount = 0
 
-    for (const key in style) {
-        if (!key.startsWith('unistyles_') || !Object.prototype.hasOwnProperty.call(style, key)) {
-            continue
+    for (const key of keys) {
+        if (key.startsWith('unistyles_')) {
+            unistylesCount++
         }
+    }
 
-        if (hasUnistyle) {
-            return Object.keys(style)
-                .filter((unistyleKey) => unistyleKey.startsWith('unistyles_'))
-                .map((unistyleKey) => ({ [unistyleKey]: style[unistyleKey] }))
+    if (unistylesCount < 2) {
+        if (keys.length > 0) {
+            collected.push(style)
         }
 
-        hasUnistyle = true
+        return
     }
 
-    return style
+    for (const key of keys) {
+        if (key.startsWith('unistyles_')) {
+            collected.push({ [key]: style[key] })
+        }
+    }
 }
 
 HybridShadowRegistry.add = (handle, styles, scope) => {
@@ -196,13 +182,13 @@ HybridShadowRegistry.add = (handle, styles, scope) => {
         return
     }
 
-    const stylesArray = Array.isArray(styles) ? styles.flat(Infinity) : [styles]
+    const filteredStyles: Array<any> = []
 
-    // filter styles that are undefined or with no keys
-    const filteredStyles = stylesArray
-        .filter((style) => style && Object.keys(style).length > 0)
-        .filter(Boolean)
-        .flatMap(splitMergedUnistyles)
+    if (Array.isArray(styles)) {
+        styles.flat(Infinity).forEach((style) => collectStyle(style, filteredStyles))
+    } else {
+        collectStyle(styles, filteredStyles)
+    }
 
     if (filteredStyles.length > 0) {
         const node = findShadowNodeForHandle(handle)
@@ -225,8 +211,6 @@ HybridShadowRegistry.add = (handle, styles, scope) => {
         if (scope) {
             HybridShadowRegistry.setScopedTheme(previousScopedTheme)
         }
-
-        trackHandle(handle)
     }
 }
 
@@ -244,11 +228,17 @@ HybridShadowRegistry.remove = (handle) => {
             HybridShadowRegistry.suspend(maybeNode)
         } else {
             HybridShadowRegistry.unlink(maybeNode)
-            untrackHandle(handle)
         }
     }
 }
 
-type PrivateMethods = 'add' | 'remove' | 'link' | 'unlink' | 'suspend' | 'takeCommittedTags' | 'refreshReactNodes'
+type PrivateMethods =
+    | 'add'
+    | 'remove'
+    | 'link'
+    | 'unlink'
+    | 'suspend'
+    | 'takeCommittedInstanceHandles'
+    | 'refreshReactNodes'
 
 export const UnistylesShadowRegistry = HybridShadowRegistry as Omit<ShadowRegistry, PrivateMethods>

package/src/web/css/core.ts

@@ -3,6 +3,31 @@ import type { CSSState } from './state'
 import { isPseudoClass } from '../convert/pseudo'
 import { getMediaQuery } from '../utils'
 
+type SetProps = Parameters<CSSState['set']>[0]
+
+// box-none and box-only aren't CSS values, polyfill them like react-native-web: [element, children]
+const POINTER_EVENTS: Record<string, [string, string]> = {
+    'box-none': ['none', 'auto'],
+    'box-only': ['auto', 'none'],
+}
+
+export const getChildrenClassName = (className: string) => `:where(.${className})>*`
+
+const setStyle = (state: CSSState, props: SetProps) => {
+    if (props.propertyKey !== 'pointerEvents') {
+        state.set(props)
+
+        return
+    }
+
+    const [value, childrenValue] = POINTER_EVENTS[props.value] ?? [props.value]
+
+    state.set({ ...props, value })
+    // :where() has no specificity, so a child's own pointerEvents always wins
+    // set it for every value, so re-applying the style can't leave a stale children rule
+    state.set({ ...props, className: getChildrenClassName(props.className), value: childrenValue })
+}
+
 export const convertToCSS = (hash: string, value: Record<string, any>, state: CSSState) => {
     Object.entries(value).forEach(([styleKey, styleValue]) => {
         if (styleKey[0] === '_') {
@@ -15,7 +40,7 @@ export const convertToCSS = (hash: string, value: Record<string, any>, state: CS
                     Object.entries(pseudoStyleValue).forEach(([breakpointStyleKey, breakpointStyleValue]) => {
                         const mediaQuery = getMediaQuery(pseudoStyleKey, allBreakpoints)
 
-                        state.set({
+                        setStyle(state, {
                             mediaQuery,
                             className: pseudoClassName,
                             propertyKey: breakpointStyleKey,
@@ -26,7 +51,7 @@ export const convertToCSS = (hash: string, value: Record<string, any>, state: CS
                     return
                 }
 
-                state.set({
+                setStyle(state, {
                     className: pseudoClassName,
                     propertyKey: pseudoStyleKey,
                     value: pseudoStyleValue,
@@ -49,7 +74,7 @@ export const convertToCSS = (hash: string, value: Record<string, any>, state: CS
                     .map(([key]) => key)
                 const mediaQuery = getMediaQuery(styleKey, allBreakpoints)
 
-                state.set({
+                setStyle(state, {
                     mediaQuery,
                     className: hash,
                     propertyKey: breakpointStyleKey,
@@ -60,7 +85,7 @@ export const convertToCSS = (hash: string, value: Record<string, any>, state: CS
             return
         }
 
-        state.set({
+        setStyle(state, {
             className: hash,
             propertyKey: styleKey,
             value: styleValue,

package/src/web/css/state.ts

@@ -3,7 +3,7 @@ import type { UnistylesServices } from '../types'
 
 import { convertUnistyles } from '../convert'
 import { hyphenate, isServer } from '../utils'
-import { convertToCSS } from './core'
+import { convertToCSS, getChildrenClassName } from './core'
 
 type MapType = Map<string, Map<string, Map<string, any>>>
 type SetProps = {
@@ -105,11 +105,15 @@ export class CSSState {
     }
 
     remove = (hash: string) => {
+        const childrenClassName = getChildrenClassName(hash)
+
         this.mainMap.forEach((styles) => {
             styles.delete(hash)
+            styles.delete(childrenClassName)
         })
         this.mqMap.forEach((styles) => {
             styles.delete(hash)
+            styles.delete(childrenClassName)
         })
         this.recreate()
     }
@@ -125,7 +129,7 @@ export class CSSState {
             }
 
             for (const [className, thirdLevelMap] of secondLevelMap) {
-                styles += `.${className}{`
+                styles += className[0] === ':' ? `${className}{` : `.${className}{`
 
                 for (const [propertyKey, value] of thirdLevelMap) {
                     if (value === undefined) {

package/src/web/registry.ts

@@ -112,7 +112,7 @@ export class UnistylesRegistry {
 
     add = (value: UnistylesValues, forChild?: boolean) => {
         const generatedHash = generateHash(value)
-        const hash = forChild ? `${generatedHash} > *` : generatedHash
+        const hash = forChild ? `${generatedHash}_child > *` : generatedHash
 
         if (!this.stylesCache.has(hash)) {
             this.applyStyles(hash, value)