react-native-unistyles 3.0.0-beta.3 → 3.0.0-beta.5

package/src/components/native/Pressable.tsx

@@ -1,7 +1,10 @@
-import React, { forwardRef, useRef } from 'react'
+import React, { forwardRef } from 'react'
 import { Pressable as NativePressableReactNative } from 'react-native'
-import type { PressableProps as Props, View, ViewStyle } from 'react-native'
+import type { PressableProps as Props, View } from 'react-native'
 import { UnistylesShadowRegistry } from '../../specs'
+import type { UnistylesValues } from '../../types'
+import { getClassName } from '../../core'
+import { isServer } from '../../web/utils'
 
 type Variants = Record<string, string | boolean | undefined>
 type WebPressableState = {
@@ -10,88 +13,51 @@ type WebPressableState = {
     focused: boolean
 }
 
-type WebPressableStyle = ((state: WebPressableState) => ViewStyle) | ViewStyle
+type WebPressableStyle = ((state: WebPressableState) => UnistylesValues) | UnistylesValues
 
 type PressableProps = Props & {
     variants?: Variants
     style?: WebPressableStyle,
 }
 
-const initialState: WebPressableState = {
-    pressed: false,
-    hovered: false,
-    focused: false
-}
-
-type UpdateStylesProps = {
-    ref: View | null,
-    style: WebPressableStyle,
-    variants?: Variants,
-    state: WebPressableState
-    scopedTheme?: string
-}
-
-const extractStyleResult = (style: any) => {
-    return typeof style === 'function'
-        ? [style()]
-        : Array.isArray(style)
-            ? style.map(style => typeof style === 'function' ? style() : style)
-            : [style]
-}
-
-const updateStyles = ({ ref, style, state, scopedTheme, variants }: UpdateStylesProps) => {
-    const styleResult = typeof style === 'function'
-        ? style(state)
-        : style
-    const extractedResult = extractStyleResult(styleResult)
-    const previousScopedTheme = UnistylesShadowRegistry.getScopedTheme()
-    const previousVariants = UnistylesShadowRegistry.getVariants()
-
-    UnistylesShadowRegistry.selectVariants(variants as unknown as Variants)
-    UnistylesShadowRegistry.setScopedTheme(scopedTheme as any)
-
-    UnistylesShadowRegistry.add(ref, extractedResult)
-
-    UnistylesShadowRegistry.setScopedTheme(previousScopedTheme)
-    UnistylesShadowRegistry.selectVariants(previousVariants as unknown as Variants)
-}
-
-export const Pressable = forwardRef<View, PressableProps>(({ style, ...props }, passedRef) => {
-    const storedRef = useRef<View | null>(null)
+export const Pressable = forwardRef<View, PressableProps>(({ style, ...props }, forwardedRef) => {
     const scopedTheme = UnistylesShadowRegistry.getScopedTheme()
-    const variants = UnistylesShadowRegistry.getVariants()
+    let storedRef: HTMLElement | null = null
+    let classNames: ReturnType<typeof getClassName> | undefined = undefined
 
     return (
         <NativePressableReactNative
             {...props}
-            style={state => {
-                if (!storedRef.current) {
-                    return {}
-                }
+            ref={isServer() ? undefined : ref => {
+                storedRef = ref as unknown as HTMLElement
+                // @ts-expect-error hidden from TS
+                UnistylesShadowRegistry.add(storedRef, classNames?.hash)
 
-                updateStyles({
-                    ref: storedRef.current,
-                    style: style as WebPressableStyle,
-                    variants,
-                    scopedTheme,
-                    state: state as WebPressableState
-                })
+                if (typeof forwardedRef === 'function') {
+                    return forwardedRef(ref)
+                }
 
-                return {}
+                if (forwardedRef) {
+                    forwardedRef.current = ref
+                }
             }}
-            ref={ref => {
-                storedRef.current = ref
-                updateStyles({
-                    ref,
-                    style: style as WebPressableStyle,
-                    variants,
-                    scopedTheme,
-                    state: initialState
-                })
+            style={state => {
+                const styleResult = typeof style === 'function'
+                    ? style(state as WebPressableState)
+                    : style
+                const previousScopedTheme = UnistylesShadowRegistry.getScopedTheme()
 
-                if (typeof passedRef === 'object' && passedRef !== null) {
-                    passedRef.current = ref
-                }
+                UnistylesShadowRegistry.setScopedTheme(scopedTheme)
+
+                // @ts-expect-error hidden from TS
+                UnistylesShadowRegistry.remove(storedRef, classNames?.hash)
+                classNames = getClassName(styleResult as UnistylesValues)
+                // @ts-expect-error hidden from TS
+                UnistylesShadowRegistry.add(storedRef, classNames?.hash)
+
+                UnistylesShadowRegistry.setScopedTheme(previousScopedTheme)
+
+                return classNames as any
             }}
         />
     )

package/src/core/createUnistylesElement.native.tsx

@@ -0,0 +1,36 @@
+import React, { useEffect, useRef } from 'react'
+import { UnistylesShadowRegistry } from '../specs'
+import { passForwardedRef } from './passForwardRef'
+import { maybeWarnAboutMultipleUnistyles } from './warn'
+
+export const createUnistylesElement = (Component: any) => React.forwardRef((props, forwardedRef) => {
+    const storedRef = useRef<unknown>(null)
+
+    useEffect(() => {
+        return () => {
+            if (storedRef.current) {
+                // @ts-ignore
+                UnistylesShadowRegistry.remove(storedRef.current)
+            }
+        }
+    }, [])
+
+    return (
+        <Component
+            {...props}
+            ref={(ref: unknown) => {
+                if (ref) {
+                    storedRef.current = Component.name === 'KeyboardAvoidingView'
+                        // @ts-ignore this is special case for KeyboardAvoidingView
+                        ? ref.viewRef.current
+                        : ref
+                }
+
+                passForwardedRef(props, ref, forwardedRef)
+
+                // @ts-ignore we don't know the type of the component
+                maybeWarnAboutMultipleUnistyles(props.style, Component.displayName)
+            }}
+        />
+    )
+})

package/src/core/createUnistylesElement.tsx

@@ -1,9 +1,43 @@
 import React from 'react'
-import { passForwardedRef } from './passForwardRef'
-
-export const createUnistylesElement = (Component: any) => React.forwardRef((props, forwardedRef) => (
-    <Component
-        {...props}
-        ref={(ref: unknown) => passForwardedRef(props, ref, forwardedRef)}
-    />
-))
+import type { UnistylesValues } from '../types'
+import { getClassName } from './getClassname'
+import { isServer } from '../web/utils'
+import { UnistylesShadowRegistry } from '../web'
+import { maybeWarnAboutMultipleUnistyles } from './warn'
+
+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)
+
+    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) {
+                    // @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
+                }
+            }}
+        />
+    )
+})

package/src/core/createUnistylesImageBackground.tsx

@@ -1,24 +1,45 @@
-import React from 'react'
-import type { ImageBackground, ImageBackgroundProps } from 'react-native'
+import React, { useEffect, useRef } from 'react'
+import type { Image, ImageBackground, ImageBackgroundProps } from 'react-native'
 import { UnistylesShadowRegistry } from '../specs'
 import { passForwardedRef } from './passForwardRef'
+import { maybeWarnAboutMultipleUnistyles } from './warn'
 
-export const createUnistylesImageBackground = (Component: typeof ImageBackground) => React.forwardRef<ImageBackground, ImageBackgroundProps>((props, forwardedRef) => (
-    <Component
-        {...props}
-        ref={ref => passForwardedRef(props, ref, forwardedRef)}
-        imageRef={ref => {
-            const style = Array.isArray(props.imageStyle)
-                ? props.imageStyle
-                : [props.imageStyle]
+export const createUnistylesImageBackground = (Component: typeof ImageBackground) => React.forwardRef<ImageBackground, ImageBackgroundProps>((props, forwardedRef) => {
+    const storedImageRef = useRef<Image | null>(null)
 
-            // @ts-expect-error - This is hidden from TS
-            UnistylesShadowRegistry.add(ref, style)
-
-            return () => {
-                // @ts-expect-error - This is hidden from TS
-                UnistylesShadowRegistry.remove(ref)
+    useEffect(() => {
+        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')
+
+    return (
+        <Component
+            {...props}
+            ref={ref => {
+                passForwardedRef(props, ref, forwardedRef)
+
+                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)
+            }}
+        />
+    )
+})

package/src/core/getClassname.native.ts

@@ -0,0 +1 @@
+export const getClassName = () => undefined

package/src/core/getClassname.ts

@@ -0,0 +1,13 @@
+import type { UnistylesValues } from '../types';
+import { UnistylesShadowRegistry } 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])
+
+    return hash ? { $$css: true, hash, injectedClassName } : undefined
+}

package/src/core/index.ts

@@ -1,5 +1,6 @@
-export { createUnistylesComponent } from './createUnistylesComponent'
 export { createUnistylesElement } from './createUnistylesElement'
 export { createUnistylesImageBackground } from './createUnistylesImageBackground'
 export { withUnistyles } from './withUnistyles'
 export { passForwardedRef } from './passForwardRef'
+export { getClassName } from './getClassname'
+export { useUnistyles } from './useUnistyles'

package/src/core/passForwardRef.ts

@@ -19,11 +19,10 @@ export const passForwardedRef = <T>(
     }
     const forwardedRefReturnFn = passForwardedRef()
 
+    // @ts-expect-error hidden from TS
     UnistylesShadowRegistry.add(ref, props.style)
 
     return () => {
-        // @ts-expect-error - This is hidden from TS
-        UnistylesShadowRegistry.remove(ref)
         forwardedRefReturnFn?.()
     }
 }

package/src/core/useProxifiedUnistyles/index.ts

@@ -0,0 +1 @@
+export { useProxifiedUnistyles } from './useProxifiedUnistyles'

package/src/core/useProxifiedUnistyles/listener.native.ts

@@ -0,0 +1,18 @@
+import { StyleSheet, UnistyleDependency } from '../../specs'
+import type { ListenerProps } from './types'
+
+export const listener = ({ dependencies, updateTheme, updateRuntime }: ListenerProps) => {
+    const listensToTheme = dependencies.includes(UnistyleDependency.Theme)
+    // @ts-expect-error - this is hidden from TS
+    const dispose = StyleSheet.addChangeListener(changedDependencies => {
+        if (listensToTheme && changedDependencies.includes(UnistyleDependency.Theme)) {
+            updateTheme()
+        }
+
+        if (changedDependencies.some((dependency: UnistyleDependency) => dependencies.includes(dependency))) {
+            updateRuntime()
+        }
+    })
+
+    return () => dispose()
+}

package/src/core/useProxifiedUnistyles/listener.ts

@@ -0,0 +1,13 @@
+import { UnistyleDependency } from '../../specs'
+import { UnistylesWeb } from '../../web'
+import type { ListenerProps } from './types'
+
+export const listener = ({ dependencies, updateTheme, updateRuntime }: ListenerProps) => {
+    const disposeTheme = UnistylesWeb.listener.addListeners(dependencies.filter(dependency => dependency === UnistyleDependency.Theme), updateTheme)
+    const disposeRuntime = UnistylesWeb.listener.addListeners(dependencies.filter(dependency => dependency !== UnistyleDependency.Theme), updateRuntime)
+
+    return () => {
+        disposeTheme()
+        disposeRuntime()
+    }
+}

package/src/core/useProxifiedUnistyles/types.ts

@@ -0,0 +1,7 @@
+import type { UnistyleDependency } from '../../specs'
+
+export type ListenerProps = {
+    updateTheme: VoidFunction,
+    updateRuntime: VoidFunction,
+    dependencies: Array<UnistyleDependency>
+}

package/src/core/{withUnistyles/useDependencies.ts → useProxifiedUnistyles/useProxifiedUnistyles.ts}

@@ -3,7 +3,7 @@ import { UnistylesRuntime, UnistylesShadowRegistry, type UnistylesMiniRuntime }
 // It's imported that way because of circular dependency
 import { UnistyleDependency } from '../../specs/NativePlatform'
 import type { UnistylesTheme } from '../../types'
-import type { Mappings } from './types'
+import { listener } from './listener'
 
 const getMiniRuntime = (): UnistylesMiniRuntime => {
     // @ts-expect-error This is hidden from TS
@@ -26,13 +26,7 @@ const RTDependencyMap = {
     themeName: UnistyleDependency.ThemeName,
 } satisfies Partial<Record<keyof UnistylesMiniRuntime, UnistyleDependency>>
 
-type ListenerProps = {
-    updateTheme: VoidFunction,
-    updateRuntime: VoidFunction,
-    dependencies: Array<UnistyleDependency>
-}
-
-export const useDependencies = (listener: (props: ListenerProps) => VoidFunction) => {
+export const useProxifiedUnistyles = () => {
     const scopedTheme = UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme
     const [dependencies] = useState(() => new Set<number>())
     const [theme, setTheme] = useState(UnistylesRuntime.getTheme(scopedTheme))
@@ -60,27 +54,26 @@ export const useDependencies = (listener: (props: ListenerProps) => VoidFunction
         return () => disposeRef.current?.()
     }, [dependencies.size])
 
-    return {
-        mappingsCallback: (callback: Mappings) => {
-            const proxifiedTheme = new Proxy(theme, {
-                get: (target, prop) => {
-                    dependencies.add(UnistyleDependency.Theme)
+    const proxifiedTheme = new Proxy(theme, {
+        get: (target, prop) => {
+            dependencies.add(UnistyleDependency.Theme)
 
-                    return target[prop]
-                }
-            })
-            const proxifiedRuntime = new Proxy(getMiniRuntime(), {
-                get: (target, prop) => {
-                    if (prop in RTDependencyMap) {
-                        dependencies.add(RTDependencyMap[prop as keyof typeof RTDependencyMap])
-                    }
+            return target[prop]
+        }
+    })
+    const proxifiedRuntime = new Proxy(getMiniRuntime(), {
+        get: (target, prop) => {
+            if (prop in RTDependencyMap) {
+                dependencies.add(RTDependencyMap[prop as keyof typeof RTDependencyMap])
+            }
 
-                    return target[prop as keyof typeof target]
-                }
-            })
+            return target[prop as keyof typeof target]
+        }
+    })
 
-            return callback(proxifiedTheme, proxifiedRuntime)
-        },
+    return {
+        proxifiedTheme,
+        proxifiedRuntime,
         addDependencies: (newDependencies: Array<UnistyleDependency>) => {
             const dependenciesSize = dependencies.size
 

package/src/core/useUnistyles.ts

@@ -0,0 +1,11 @@
+import type { UnistylesTheme } from '../types'
+import { useProxifiedUnistyles } from './useProxifiedUnistyles'
+
+export const useUnistyles = () => {
+    const { proxifiedRuntime, proxifiedTheme } = useProxifiedUnistyles()
+
+    return {
+        theme: proxifiedTheme as UnistylesTheme,
+        rt: proxifiedRuntime
+    }
+}

package/src/core/warn.ts

@@ -0,0 +1,13 @@
+import type { ViewStyle } from 'react-native'
+
+export const maybeWarnAboutMultipleUnistyles = (style: ViewStyle, displayName = 'Unknown') => {
+    if (__DEV__ && style && !Array.isArray(style)) {
+        const unistylesKeys = Object
+            .keys(style)
+            .filter(key => key.startsWith('unistyles-'))
+
+        if (unistylesKeys.length > 1) {
+            console.warn(`Unistyles: we detected style object with ${unistylesKeys.length} unistyles styles. This might cause no updates or unpredictable behavior. Please check style prop for "${displayName}" and use array syntax instead of object syntax.`)
+        }
+    }
+}

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

@@ -1,10 +1,10 @@
-import React, { forwardRef, useEffect, useRef, type ComponentType } from 'react'
-import { StyleSheet, UnistyleDependency } from '../../specs'
+import React, { forwardRef, useEffect, type ComponentType } from 'react'
+import type { UnistyleDependency } from '../../specs'
 import type { PartialBy } from '../../types/common'
 import { deepMergeObjects } from '../../utils'
-import { SUPPORTED_STYLE_PROPS } from './types'
 import type { Mappings, SupportedStyleProps } from './types'
-import { useDependencies } from './useDependencies'
+import { maybeWarnAboutMultipleUnistyles } from '../warn'
+import { useProxifiedUnistyles } from '../useProxifiedUnistyles'
 
 // @ts-expect-error
 type GenericComponentProps<P> = ComponentProps<P>
@@ -16,81 +16,52 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
     type PropsWithUnistyles = PartialBy<TProps, keyof TMappings | SupportedStyleProps> & {
         uniProps?: Mappings<TProps>
     }
+    const getSecrets = (styleProps: Record<string, any> = {}): { uni__getStyles(): any, uni__dependencies: Array<UnistyleDependency> } => {
+        const unistyleKey = Object
+            .keys(styleProps)
+            .find(key => key.startsWith('unistyles-'))
+
+        return unistyleKey
+            ? styleProps[unistyleKey]
+            : {
+                uni__getStyles: () => styleProps,
+                uni__dependencies: [],
+            }
+    }
 
     return forwardRef<GenericComponentRef<TComponent>, PropsWithUnistyles>((props, ref) => {
         const narrowedProps = props as PropsWithUnistyles
-        const stylesRef = useRef<Record<string, any>>({})
-        const isForcedRef = useRef(false)
         const NativeComponent = Component as ComponentType
 
-        if (!isForcedRef.current) {
-            SUPPORTED_STYLE_PROPS.forEach(propName => {
-                if (narrowedProps?.[propName]) {
-                    if (Array.isArray(narrowedProps[propName])) {
-                        console.error(`🦄 Unistyles: withUnistyles requires ${propName} to be an object. Please check props for component: ${NativeComponent.displayName}`)
-                    }
-
-                    // @ts-expect-error - this is hidden from TS
-                    if (props[propName].__unistyles_name && !props[propName].__proto__?.getStyle) {
-                        console.error(`🦄 Unistyles: withUnistyles received style that is not bound. You likely used the spread operator on a Unistyle style. Please check props for component: ${NativeComponent.displayName}`)
-                    }
-
-                    stylesRef.current = {
-                        ...stylesRef.current,
-                        // @ts-expect-error - this is hidden from TS
-                        [propName]: props[propName].__proto__?.getStyle?.() || props[propName]
-                    }
-                }
-            })
-        }
-
-        const { mappingsCallback, addDependencies } = useDependencies(({ dependencies, updateTheme, updateRuntime }) => {
-            const listensToTheme = dependencies.includes(UnistyleDependency.Theme)
-            // @ts-expect-error - this is hidden from TS
-            const dispose = StyleSheet.addChangeListener(changedDependencies => {
-                if (listensToTheme && changedDependencies.includes(UnistyleDependency.Theme)) {
-                    updateTheme()
-                }
-
-                if (changedDependencies.some((dependency: UnistyleDependency) => dependencies.includes(dependency))) {
-                    SUPPORTED_STYLE_PROPS.forEach(propName => {
-                        if (narrowedProps?.[propName]) {
-                            stylesRef.current = {
-                                ...stylesRef.current,
-                                // @ts-expect-error - this is hidden from TS
-                                [propName]: props[propName].__proto__?.getStyle?.() || props[propName]
-                            }
+        // @ts-ignore we don't know the type of the component
+        maybeWarnAboutMultipleUnistyles(narrowedProps.style, `withUnistyles(${Component.displayName ?? Component.name ?? 'Unknown'})`)
+        // @ts-ignore we don't know the type of the component
+        maybeWarnAboutMultipleUnistyles(narrowedProps.contentContainerStyle, `withUnistyles(${Component.displayName ?? Component.name ?? 'Unknown'})`)
 
-                            isForcedRef.current = true
-                        }
-                    })
-
-                    updateRuntime()
-                }
-            })
-
-            return () => dispose()
-        })
+        const { proxifiedRuntime, proxifiedTheme, addDependencies } = useProxifiedUnistyles()
 
         useEffect(() => {
-            const styleDependencies = narrowedProps.style?.__proto__.uni__dependencies ?? [] as Array<UnistyleDependency>
-            const contentContainerStyleDependencies = narrowedProps.contentContainerStyle?.__proto__.uni__dependencies ?? [] as Array<UnistyleDependency>
+            const styleSecrets = getSecrets(narrowedProps.style)
+            const contentContainerStyleSecrets = getSecrets(narrowedProps.contentContainerStyle)
 
-            addDependencies([...styleDependencies, ...contentContainerStyleDependencies])
+            addDependencies(Array.from(new Set([...styleSecrets.uni__dependencies, ...contentContainerStyleSecrets.uni__dependencies])))
         }, [narrowedProps.style, narrowedProps.contentContainerStyle])
 
-        const mappingProps = mappings ? mappingsCallback(mappings) : {}
-        const unistyleProps = narrowedProps.uniProps ? mappingsCallback(narrowedProps.uniProps) : {}
-        const finalProps = deepMergeObjects<Record<string, any>>(mappingProps, unistyleProps, props)
-
-        // override with Unistyles styles
-        SUPPORTED_STYLE_PROPS.forEach(propName => {
-            if (finalProps[propName]) {
-                finalProps[propName] = stylesRef.current[propName]
-            }
-        })
-
-        isForcedRef.current = false
+        const mappingsProps = mappings ? mappings(proxifiedTheme, proxifiedRuntime) : {}
+        const unistyleProps = narrowedProps.uniProps ? narrowedProps.uniProps(proxifiedTheme, proxifiedRuntime) : {}
+
+        const styleSecrets = getSecrets(narrowedProps.style)
+        const contentContainerStyleSecrets = getSecrets(narrowedProps.contentContainerStyle)
+
+        const finalProps = {
+            ...deepMergeObjects(mappingsProps, unistyleProps, props),
+            ...narrowedProps.style ? {
+                style: styleSecrets.uni__getStyles(),
+            } : {},
+            ...narrowedProps.contentContainerStyle ? {
+                contentContainerStyle: contentContainerStyleSecrets.uni__getStyles(),
+            } : {},
+        } as any
 
         return <NativeComponent {...finalProps as TProps} ref={ref} />
     })