react-native-unistyles 3.0.0-beta.1 → 3.0.0-beta.2

package/src/components/ScopedTheme.tsx

@@ -0,0 +1,32 @@
+import React, { useLayoutEffect } from 'react'
+import type { UnistylesThemes } from '../global'
+import { UnistylesShadowRegistry } from '../specs'
+
+type ThemeProps = {
+    name: keyof UnistylesThemes
+}
+
+const Apply = ({ name }: { name?: keyof UnistylesThemes }) => {
+    UnistylesShadowRegistry.setScopedTheme(name)
+
+    useLayoutEffect(() => {
+        UnistylesShadowRegistry.setScopedTheme(name)
+    })
+
+    return null
+}
+
+export const ScopedTheme: React.FunctionComponent<React.PropsWithChildren<ThemeProps>> = ({ name, children }) => {
+    const previousScopedTheme = UnistylesShadowRegistry.getScopedTheme()
+    const mappedChildren = [
+        <Apply key={name} name={name} />,
+        children,
+        <Apply key='dispose' name={previousScopedTheme} />
+    ]
+
+    return (
+        <React.Fragment>
+            {mappedChildren}
+        </React.Fragment>
+    )
+}

package/src/components/Variants.tsx

@@ -0,0 +1,29 @@
+import React, { useLayoutEffect } from 'react'
+import { UnistylesShadowRegistry } from '../specs'
+
+type VariantProps = {
+    variants?: Record<string, string | boolean | undefined>
+}
+
+const Apply: React.FunctionComponent<VariantProps> = ({ variants }) => {
+    UnistylesShadowRegistry.selectVariants(variants)
+
+    useLayoutEffect(() => {
+        UnistylesShadowRegistry.selectVariants(variants)
+    })
+
+    return null
+}
+export const Variants: React.FunctionComponent<React.PropsWithChildren<VariantProps>> = ({ variants, children }) => {
+    const mappedChildren = [
+        <Apply key='add' variants={variants} />,
+        children,
+        <Apply key='remove' />
+    ]
+
+    return (
+        <React.Fragment>
+            {mappedChildren}
+        </React.Fragment>
+    )
+}

package/src/components/index.ts

@@ -1,3 +1,4 @@
 export { Hide } from './Hide'
 export { Display } from './Display'
-export { Pressable } from './Pressable'
+export { Variants } from './Variants'
+export { ScopedTheme } from './ScopedTheme'

package/src/components/native/ActivityIndicator.tsx

@@ -0,0 +1,4 @@
+import { ActivityIndicator as NativeActivityIndicator } from 'react-native'
+import { createUnistylesElement } from '../../core'
+
+export const ActivityIndicator = createUnistylesElement(NativeActivityIndicator)

package/src/components/native/FlatList.tsx

@@ -0,0 +1,4 @@
+import { FlatList as NativeFlatList } from 'react-native'
+import { createUnistylesElement } from '../../core'
+
+export const FlatList = createUnistylesElement(NativeFlatList)

package/src/components/native/Image.tsx

@@ -0,0 +1,4 @@
+import { Image as NativeImage } from 'react-native'
+import { createUnistylesElement } from '../../core'
+
+export const Image = createUnistylesElement(NativeImage)

package/src/components/native/ImageBackground.tsx

@@ -0,0 +1,4 @@
+import { ImageBackground as NativeImageBackground } from 'react-native'
+import { createUnistylesImageBackground } from '../../core'
+
+export const ImageBackground = createUnistylesImageBackground(NativeImageBackground)

package/src/components/native/KeyboardAvoidingView.tsx

@@ -0,0 +1,4 @@
+import { KeyboardAvoidingView as NativeKeyboardAvoidingView } from 'react-native'
+import { createUnistylesElement } from '../../core'
+
+export const KeyboardAvoidingView = createUnistylesElement(NativeKeyboardAvoidingView)

package/src/components/native/Pressable.native.tsx

@@ -0,0 +1,55 @@
+import React, { forwardRef, useRef } from 'react'
+import { Pressable as NativePressableReactNative } from 'react-native'
+import type { PressableProps as Props, View } from 'react-native'
+import { UnistylesShadowRegistry } from '../../specs'
+import { passForwardedRef } from '../../core'
+
+type PressableProps = Props & {
+    variants?: Record<string, string | boolean>
+}
+
+export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ...props }, forwardedRef) => {
+    const storedRef = useRef<View | null>()
+
+    return (
+        <NativePressableReactNative
+            {...props}
+            ref={ref => {
+                const unistyles = typeof style === 'function'
+                    ? style({ pressed: false })
+                    : style
+                const styles = Array.isArray(unistyles)
+                    ? unistyles
+                    : [unistyles]
+
+                // @ts-expect-error - this is hidden from TS
+                UnistylesShadowRegistry.add(ref, styles)
+
+                storedRef.current = ref
+
+                return passForwardedRef(props, ref, forwardedRef)
+            }}
+            style={state => {
+                UnistylesShadowRegistry.selectVariants(variants)
+
+                const unistyles = typeof style === 'function'
+                    ? style(state)
+                    : style
+                const styles = Array.isArray(unistyles)
+                    ? unistyles
+                    : [unistyles]
+
+                if (storedRef.current) {
+                    // @ts-expect-error - this is hidden from TS
+                    UnistylesShadowRegistry.remove(storedRef.current)
+                    // @ts-expect-error - this is hidden from TS
+                    UnistylesShadowRegistry.add(storedRef.current, styles)
+                }
+
+                UnistylesShadowRegistry.selectVariants(undefined)
+
+                return unistyles
+            }}
+        />
+    )
+})

package/src/components/native/Pressable.tsx

@@ -0,0 +1,98 @@
+import React, { forwardRef, useRef } from 'react'
+import { Pressable as NativePressableReactNative } from 'react-native'
+import type { PressableProps as Props, View, ViewStyle } from 'react-native'
+import { UnistylesShadowRegistry } from '../../specs'
+
+type Variants = Record<string, string | boolean | undefined>
+type WebPressableState = {
+    pressed: boolean,
+    hovered: boolean,
+    focused: boolean
+}
+
+type WebPressableStyle = ((state: WebPressableState) => ViewStyle) | ViewStyle
+
+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)
+    const scopedTheme = UnistylesShadowRegistry.getScopedTheme()
+    const variants = UnistylesShadowRegistry.getVariants()
+
+    return (
+        <NativePressableReactNative
+            {...props}
+            style={state => {
+                if (!storedRef.current) {
+                    return {}
+                }
+
+                updateStyles({
+                    ref: storedRef.current,
+                    style: style as WebPressableStyle,
+                    variants,
+                    scopedTheme,
+                    state: state as WebPressableState
+                })
+
+                return {}
+            }}
+            ref={ref => {
+                storedRef.current = ref
+                updateStyles({
+                    ref,
+                    style: style as WebPressableStyle,
+                    variants,
+                    scopedTheme,
+                    state: initialState
+                })
+
+                if (typeof passedRef === 'object' && passedRef !== null) {
+                    passedRef.current = ref
+                }
+            }}
+        />
+    )
+})

package/src/components/native/RefreshControl.tsx

@@ -0,0 +1,4 @@
+import { RefreshControl as NativeRefreshControl } from 'react-native'
+import { createUnistylesElement } from '../../core'
+
+export const RefreshControl = createUnistylesElement(NativeRefreshControl)

package/src/components/native/ScrollView.tsx

@@ -0,0 +1,4 @@
+import { ScrollView as NativeScrollView } from 'react-native'
+import { createUnistylesElement } from '../../core'
+
+export const ScrollView = createUnistylesElement(NativeScrollView)

package/src/components/native/SectionList.tsx

@@ -0,0 +1,4 @@
+import { SectionList as NativeSectionList } from 'react-native'
+import { createUnistylesElement } from '../../core'
+
+export const SectionList = createUnistylesElement(NativeSectionList)

package/src/components/native/Switch.tsx

@@ -0,0 +1,4 @@
+import { Switch as NativeSwitch } from 'react-native'
+import { createUnistylesElement } from '../../core'
+
+export const Switch = createUnistylesElement(NativeSwitch)

package/src/components/native/Text.tsx

@@ -0,0 +1,4 @@
+import { Text as NativeText } from 'react-native'
+import { createUnistylesElement } from '../../core'
+
+export const Text = createUnistylesElement(NativeText)

package/src/components/native/TextInput.tsx

@@ -0,0 +1,4 @@
+import { TextInput as NativeTextInput } from 'react-native'
+import { createUnistylesElement } from '../../core'
+
+export const TextInput = createUnistylesElement(NativeTextInput)

package/src/components/native/TouchableHighlight.tsx

@@ -0,0 +1,4 @@
+import { TouchableHighlight as NativeTouchableHighlight } from 'react-native'
+import { createUnistylesElement } from '../../core'
+
+export const TouchableHighlight = createUnistylesElement(NativeTouchableHighlight)

package/src/components/native/TouchableOpacity.tsx

@@ -0,0 +1,4 @@
+import { TouchableOpacity as NativeTouchableOpacity } from 'react-native'
+import { createUnistylesElement } from '../../core'
+
+export const TouchableOpacity = createUnistylesElement(NativeTouchableOpacity)

package/src/components/native/View.tsx

@@ -0,0 +1,4 @@
+import { View as NativeView } from 'react-native'
+import { createUnistylesElement } from '../../core'
+
+export const View = createUnistylesElement(NativeView)

package/src/components/native/VirtualizedList.tsx

@@ -0,0 +1,4 @@
+import { VirtualizedList as NativeVirtualizedList } from 'react-native'
+import { createUnistylesElement } from '../../core'
+
+export const VirtualizedList = createUnistylesElement(NativeVirtualizedList)

package/src/core/createUnistylesComponent.tsx

@@ -1,84 +1,14 @@
-import React, { useEffect, useState, type ComponentType, forwardRef, useRef, useMemo } from 'react'
+import type { ComponentType } from 'react'
 import type { UnistylesTheme } from '../types'
-import { UnistylesRuntime } from '../specs'
-import { UnistyleDependency } from '../specs/NativePlatform'
-import type { PartialBy } from '../types/common'
-import { UnistylesListener } from '../web/listener'
-import { UnistylesShadowRegistry } from '../web'
-import { equal } from '../web/utils'
-import { deepMergeObjects } from '../utils'
+import { withUnistyles } from './withUnistyles'
 
 const SUPPORTED_STYLE_PROPS = ['style', 'contentContainerStyle'] as const
-const ALL_DEPENDENCIES = Object.values(UnistyleDependency).filter((dependency): dependency is UnistyleDependency => typeof dependency === 'number')
 
 type SupportedStyleProps = typeof SUPPORTED_STYLE_PROPS[number]
 
-const useShadowRegistry = (style?: Record<string, any>) => {
-    const [ref] = useState(document.createElement('div'))
-    const oldClassNames = useRef<Array<string>>([])
-    const classNames = useMemo(() => {
-        if (!style) {
-            return []
-        }
-
-        const newClassNames = UnistylesShadowRegistry.add(ref, [style], undefined, []) ?? []
-
-        if (equal(oldClassNames.current, newClassNames)) {
-            return oldClassNames.current
-        }
-
-        oldClassNames.current = newClassNames
-
-        return newClassNames
-    }, [style])
-
-    useEffect(() => () => {
-        // Remove styles on unmount
-        if (style) {
-            UnistylesShadowRegistry.add(null, [style], undefined, [])
-        }
-    })
-
-    return classNames
-}
-
+/**
+ * @deprecated Use withUnistyles instead
+ */
 export const createUnistylesComponent = <TProps extends Record<string, any>, TMappings extends Partial<Omit<TProps, SupportedStyleProps>>>(Component: ComponentType<TProps>, mappings?: (theme: UnistylesTheme) => TMappings) => {
-    return forwardRef<unknown, PartialBy<TProps, keyof TMappings | SupportedStyleProps>>((props, ref) => {
-        const narrowedProps = props as PartialBy<TProps, keyof TMappings | SupportedStyleProps>
-        const [mappingsProps, setMappingsProps] = useState(mappings?.(UnistylesRuntime.getTheme()))
-        const styleClassNames = useShadowRegistry(narrowedProps.style)
-        const contentContainerStyleClassNames = useShadowRegistry(narrowedProps.contentContainerStyle)
-
-        useEffect(() => {
-            const disposeMappings = UnistylesListener.addListeners(ALL_DEPENDENCIES, () => {
-                if (!mappings) {
-                    disposeMappings()
-
-                    return
-                }
-
-                return setMappingsProps(mappings(UnistylesRuntime.getTheme()))
-            })
-
-            return () => disposeMappings()
-        }, [mappingsProps, narrowedProps.style])
-
-        const combinedProps = {
-            ...deepMergeObjects(props, (mappingsProps ?? {}) as object),
-            ...narrowedProps.style ? {
-                style: {
-                    $$css: true,
-                    'unistyles': styleClassNames.join(' ')
-                },
-            } : {},
-            ...narrowedProps.contentContainerStyle ? {
-                style: {
-                    $$css: true,
-                    'unistyles': contentContainerStyleClassNames.join(' ')
-                },
-            } : {},
-        } as unknown as TProps
-
-        return <Component {...combinedProps} ref={ref} />
-    })
+    return withUnistyles(Component as any, mappings as any)
 }

package/src/core/createUnistylesElement.tsx

@@ -0,0 +1,9 @@
+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)}
+    />
+))

package/src/core/createUnistylesImageBackground.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import type { ImageBackground, ImageBackgroundProps } from 'react-native'
+import { UnistylesShadowRegistry } from '../specs'
+import { passForwardedRef } from './passForwardRef'
+
+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]
+
+            // @ts-expect-error - This is hidden from TS
+            UnistylesShadowRegistry.add(ref, style)
+
+            return () => {
+                // @ts-expect-error - This is hidden from TS
+                UnistylesShadowRegistry.remove(ref)
+            }
+        }}
+    />
+))

package/src/core/index.ts

@@ -1,3 +1,5 @@
 export { createUnistylesComponent } from './createUnistylesComponent'
-export { getBoundArgs } from './getBoundArgs'
-export { getId } from './getId'
+export { createUnistylesElement } from './createUnistylesElement'
+export { createUnistylesImageBackground } from './createUnistylesImageBackground'
+export { withUnistyles } from './withUnistyles'
+export { passForwardedRef } from './passForwardRef'

package/src/core/passForwardRef.ts

@@ -0,0 +1,29 @@
+import React from 'react'
+import { UnistylesShadowRegistry } from '../specs'
+
+export const passForwardedRef = <T>(
+    props: any,
+    ref: T,
+    forwardedRef: React.ForwardedRef<T>
+) => {
+    const passForwardedRef = () => {
+        if (typeof forwardedRef === 'function') {
+            return forwardedRef(ref)
+        }
+
+        if (forwardedRef) {
+            forwardedRef.current = ref
+        }
+
+        return () => {}
+    }
+    const forwardedRefReturnFn = passForwardedRef()
+
+    UnistylesShadowRegistry.add(ref, props.style)
+
+    return () => {
+        // @ts-expect-error - This is hidden from TS
+        UnistylesShadowRegistry.remove(ref)
+        forwardedRefReturnFn?.()
+    }
+}

package/src/core/withUnistyles/index.ts

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

package/src/core/withUnistyles/types.ts

@@ -0,0 +1,7 @@
+import type { UnistylesMiniRuntime } from '../../specs';
+import type { UnistylesTheme } from '../../types';
+
+export const SUPPORTED_STYLE_PROPS = ['style', 'contentContainerStyle'] as const
+
+export type SupportedStyleProps = typeof SUPPORTED_STYLE_PROPS[number]
+export type Mappings<T = {}> = (theme: UnistylesTheme, rt: UnistylesMiniRuntime) => Omit<Partial<T>, SupportedStyleProps>

package/src/core/withUnistyles/useDependencies.ts

@@ -0,0 +1,93 @@
+import { useEffect, useReducer, useRef, useState } from 'react'
+import { UnistylesRuntime, UnistylesShadowRegistry, type UnistylesMiniRuntime } from '../../specs'
+// It's imported that way because of circular dependency
+import { UnistyleDependency } from '../../specs/NativePlatform'
+import type { UnistylesTheme } from '../../types'
+import type { Mappings } from './types'
+
+const RTDependencyMap = {
+    breakpoint: UnistyleDependency.Breakpoints,
+    colorScheme: UnistyleDependency.ColorScheme,
+    contentSizeCategory: UnistyleDependency.ContentSizeCategory,
+    hasAdaptiveThemes: UnistyleDependency.AdaptiveThemes,
+    insets: UnistyleDependency.Insets,
+    fontScale: UnistyleDependency.FontScale,
+    isLandscape: UnistyleDependency.Orientation,
+    isPortrait: UnistyleDependency.Orientation,
+    navigationBar: UnistyleDependency.NavigationBar,
+    screen: UnistyleDependency.Dimensions,
+    statusBar: UnistyleDependency.StatusBar,
+    pixelRatio: UnistyleDependency.PixelRatio,
+    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) => {
+    const scopedTheme = UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme
+    const [dependencies] = useState(() => new Set<number>())
+    const [theme, setTheme] = useState(UnistylesRuntime.getTheme(scopedTheme))
+    const [_, runtimeChanged] = useReducer(() => ({}), {})
+    const disposeRef = useRef<VoidFunction>()
+
+    const reinitListener = () => {
+        disposeRef.current?.()
+        disposeRef.current = listener({
+            dependencies: Array.from(dependencies),
+            updateTheme: () => {
+                if (scopedTheme) {
+                    return
+                }
+
+                setTheme(UnistylesRuntime.getTheme(scopedTheme))
+            },
+            updateRuntime: () => runtimeChanged()
+        })
+    }
+
+    useEffect(() => {
+        reinitListener()
+
+        return () => disposeRef.current?.()
+    }, [dependencies.size])
+
+    return {
+        mappingsCallback: (callback: Mappings) => {
+            const proxifiedTheme = new Proxy(theme, {
+                get: (target, prop) => {
+                    dependencies.add(UnistyleDependency.Theme)
+
+                    return target[prop]
+                }
+            })
+            const proxifiedRuntime = new Proxy(UnistylesRuntime.miniRuntime, {
+                get: (target, prop) => {
+                    if (prop in RTDependencyMap) {
+                        dependencies.add(RTDependencyMap[prop as keyof typeof RTDependencyMap])
+                    }
+
+                    return target[prop as keyof typeof target]
+                }
+            })
+
+            return callback(proxifiedTheme, proxifiedRuntime)
+        },
+        addDependencies: (newDependencies: Array<UnistyleDependency>) => {
+            const dependenciesSize = dependencies.size
+
+            newDependencies.forEach(dependency => {
+                dependencies.add(dependency)
+            })
+
+            if (dependenciesSize === dependencies.size) {
+                return
+            }
+
+            reinitListener()
+        }
+    }
+}