react-native-unistyles 3.0.0-nightly-20250122 → 3.0.0-nightly-20250129

package/src/core/createUnistylesElement.native.tsx

@@ -1,7 +1,8 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useLayoutEffect, useRef } from 'react'
 import { UnistylesShadowRegistry } from '../specs'
 import { passForwardedRef } from './passForwardRef'
 import { maybeWarnAboutMultipleUnistyles } from './warn'
+import { copyComponentProperties } from '../utils'
 
 const getNativeRef = (Component: any, ref: any) => {
     switch (Component.name) {
@@ -16,31 +17,35 @@ const getNativeRef = (Component: any, ref: any) => {
     }
 }
 
-export const createUnistylesElement = (Component: any) => React.forwardRef((props, forwardedRef) => {
-    const storedRef = useRef<unknown>(null)
+export const createUnistylesElement = (Component: any) => {
+    const UnistylesComponent = React.forwardRef((props, forwardedRef) => {
+        const storedRef = useRef<unknown>(null)
 
-    useEffect(() => {
-        return () => {
-            if (storedRef.current) {
-                // @ts-ignore
-                UnistylesShadowRegistry.remove(storedRef.current)
+        useLayoutEffect(() => {
+            return () => {
+                if (storedRef.current) {
+                    // @ts-ignore
+                    UnistylesShadowRegistry.remove(storedRef.current)
+                }
             }
-        }
-    }, [])
+        }, [])
 
-    return (
-        <Component
-            {...props}
-            ref={(ref: unknown) => {
-                if (ref) {
-                    storedRef.current = getNativeRef(Component, ref)
-                }
+        return (
+            <Component
+                {...props}
+                ref={(ref: unknown) => {
+                    if (ref) {
+                        storedRef.current = getNativeRef(Component, ref)
+                    }
 
-                passForwardedRef(props, ref, forwardedRef)
+                    passForwardedRef(props, ref, forwardedRef)
 
-                // @ts-ignore we don't know the type of the component
-                maybeWarnAboutMultipleUnistyles(props.style, Component.displayName)
-            }}
-        />
-    )
-})
+                    // @ts-ignore we don't know the type of the component
+                    maybeWarnAboutMultipleUnistyles(props.style, Component.displayName)
+                }}
+            />
+        )
+    })
+
+    return copyComponentProperties(Component, UnistylesComponent)
+}

package/src/core/createUnistylesElement.tsx

@@ -4,40 +4,45 @@ import { getClassName } from './getClassname'
 import { isServer } from '../web/utils'
 import { UnistylesShadowRegistry } from '../web'
 import { maybeWarnAboutMultipleUnistyles } from './warn'
+import { copyComponentProperties } from '../utils'
 
 type ComponentProps = {
     style?: UnistylesValues | Array<UnistylesValues>
 }
 
-export const createUnistylesElement = (Component: any) => React.forwardRef<unknown, ComponentProps>((props, forwardedRef) => {
-    let storedRef: HTMLElement | null = null
-    const classNames = getClassName(props.style)
+export const createUnistylesElement = (Component: any) => {
+    const UnistylesComponent = React.forwardRef<unknown, ComponentProps>((props, forwardedRef) => {
+        let storedRef: HTMLElement | null = null
+        const classNames = getClassName(props.style)
 
-    return (
-        <Component
-            {...props}
-            style={classNames}
-            ref={isServer() ? undefined : (ref: HTMLElement | null) => {
-                // @ts-ignore we don't know the type of the component
-                maybeWarnAboutMultipleUnistyles(props.style, Component.displayName)
+        return (
+            <Component
+                {...props}
+                style={classNames}
+                ref={isServer() ? undefined : (ref: HTMLElement | null) => {
+                    // @ts-ignore we don't know the type of the component
+                    maybeWarnAboutMultipleUnistyles(props.style, Component.displayName)
 
-                if (!ref) {
+                    if (!ref) {
+                        // @ts-expect-error hidden from TS
+                        UnistylesShadowRegistry.remove(storedRef, classNames?.hash)
+                    }
+
+                    storedRef = ref
                     // @ts-expect-error hidden from TS
-                    UnistylesShadowRegistry.remove(storedRef, classNames?.hash)
-                }
-
-                storedRef = ref
-                // @ts-expect-error hidden from TS
-                UnistylesShadowRegistry.add(ref, classNames?.hash)
-
-                if (typeof forwardedRef === 'function') {
-                    return forwardedRef(ref)
-                }
-
-                if (forwardedRef) {
-                    forwardedRef.current = ref
-                }
-            }}
-        />
-    )
-})
+                    UnistylesShadowRegistry.add(ref, classNames?.hash)
+
+                    if (typeof forwardedRef === 'function') {
+                        return forwardedRef(ref)
+                    }
+
+                    if (forwardedRef) {
+                        forwardedRef.current = ref
+                    }
+                }}
+            />
+        )
+    })
+
+    return copyComponentProperties(Component, UnistylesComponent)
+}

package/src/core/createUnistylesImageBackground.tsx

@@ -1,45 +1,50 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useLayoutEffect, useRef } from 'react'
 import type { Image, ImageBackground, ImageBackgroundProps } from 'react-native'
 import { UnistylesShadowRegistry } from '../specs'
 import { passForwardedRef } from './passForwardRef'
 import { maybeWarnAboutMultipleUnistyles } from './warn'
+import { copyComponentProperties } from '../utils'
 
-export const createUnistylesImageBackground = (Component: typeof ImageBackground) => React.forwardRef<ImageBackground, ImageBackgroundProps>((props, forwardedRef) => {
-    const storedImageRef = useRef<Image | null>(null)
+export const createUnistylesImageBackground = (Component: typeof ImageBackground) => {
+    const UnistylesImageBackground = React.forwardRef<ImageBackground, ImageBackgroundProps>((props, forwardedRef) => {
+        const storedImageRef = useRef<Image | null>(null)
 
-    useEffect(() => {
-        return () => {
-            if (storedImageRef.current) {
-                // @ts-ignore
-                UnistylesShadowRegistry.remove(storedImageRef.current)
+        useLayoutEffect(() => {
+            return () => {
+                if (storedImageRef.current) {
+                    // @ts-ignore
+                    UnistylesShadowRegistry.remove(storedImageRef.current)
+                }
             }
-        }
-    }, [])
+        }, [])
 
-    // @ts-expect-error we don't know the type of the component
-    maybeWarnAboutMultipleUnistyles(props.style, 'ImageBackground')
-    // @ts-ignore we don't know the type of the component
-    maybeWarnAboutMultipleUnistyles(props.imageStyle, 'ImageBackground')
+        // @ts-expect-error we don't know the type of the component
+        maybeWarnAboutMultipleUnistyles(props.style, 'ImageBackground')
+        // @ts-ignore we don't know the type of the component
+        maybeWarnAboutMultipleUnistyles(props.imageStyle, 'ImageBackground')
 
-    return (
-        <Component
-            {...props}
-            ref={ref => {
-                passForwardedRef(props, ref, forwardedRef)
+        return (
+            <Component
+                {...props}
+                ref={ref => {
+                    passForwardedRef(props, ref, forwardedRef)
 
-                return () => {
-                    // @ts-ignore
-                    UnistylesShadowRegistry.remove(ref)
-                }
-            }}
-            imageRef={ref => {
-                if (ref) {
-                    storedImageRef.current = ref
-                }
+                    return () => {
+                        // @ts-ignore
+                        UnistylesShadowRegistry.remove(ref)
+                    }
+                }}
+                imageRef={ref => {
+                    if (ref) {
+                        storedImageRef.current = ref
+                    }
+
+                    // @ts-expect-error web types are not compatible with RN styles
+                    UnistylesShadowRegistry.add(ref, props.imageStyle)
+                }}
+            />
+        )
+    })
 
-                // @ts-expect-error web types are not compatible with RN styles
-                UnistylesShadowRegistry.add(ref, props.imageStyle)
-            }}
-        />
-    )
-})
+    return copyComponentProperties(Component, UnistylesImageBackground)
+}

package/src/core/getClassname.ts

@@ -1,13 +1,14 @@
-import type { UnistylesValues } from '../types';
-import { UnistylesShadowRegistry } from '../web';
+import type { UnistylesValues } from '../types'
+import { UnistylesWeb } from '../web'
 
 export const getClassName = (unistyle: UnistylesValues | undefined | Array<UnistylesValues>) => {
     if (!unistyle) {
         return undefined
     }
 
-    // @ts-expect-error hidden from TS
-    const { hash, injectedClassName } = UnistylesShadowRegistry.addStyles(Array.isArray(unistyle) ? unistyle : [unistyle])
+    const { hash, injectedClassName } = UnistylesWeb.shadowRegistry.addStyles(
+        Array.isArray(unistyle) ? unistyle.flat(Number.POSITIVE_INFINITY) : [unistyle]
+    )
 
     return hash ? { $$css: true, hash, injectedClassName } : undefined
 }

package/src/utils.ts

@@ -24,3 +24,20 @@ export const deepMergeObjects = <T extends Record<PropertyKey, any>>(...sources:
 
     return target
 }
+
+export const copyComponentProperties = (Component: any, UnistylesComponent: any) => {
+    Object.entries(Component).forEach(([key, value]) => {
+        // Filter out the keys we don't want to copy
+        if (['$$typeof', 'render'].includes(key)) {
+            return
+        }
+
+        UnistylesComponent[key] = value
+    })
+
+    // Those are not enumerable, so we need to copy them manually
+    UnistylesComponent.displayName = Component.displayName
+    UnistylesComponent.name = Component.name
+
+    return UnistylesComponent
+}

package/src/web/utils/unistyle.ts

@@ -49,7 +49,13 @@ export const extractSecrets = (object: any) => {
         return undefined
     }
 
-    return reduceObject(Object.getOwnPropertyDescriptors(secrets), secret => secret.value)
+    const hiddenSecrets = Object.getOwnPropertyDescriptors(secrets)
+
+    if (Object.keys(hiddenSecrets).length === 0) {
+        return undefined
+    }
+
+    return reduceObject(hiddenSecrets, secret => secret.value)
 }
 
 export const removeInlineStyles = (values: UnistylesValues) => {