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

package/src/reanimated/variant/useAnimatedVariantColor.ts

@@ -0,0 +1,38 @@
+import { interpolateColor, useDerivedValue, useSharedValue } from 'react-native-reanimated'
+import type { ColorKeys } from './types'
+import { useUpdateVariantColor } from './useUpdateVariantColor'
+
+export const useAnimatedVariantColor = <T extends Record<string, any>>(style: T, colorKey: ColorKeys<T>) => {
+    const secretKey = Object.keys(style).find(key => key.startsWith('unistyles_'))
+    // @ts-ignore this is hidden from TS
+    const hasVariants = style[secretKey]?.__stylesheetVariants
+
+    if (!hasVariants || !colorKey.toLowerCase().includes('color')) {
+        throw new Error('useAnimatedVariantColor: Style was not created by Unistyles, does not have variants or has no color property')
+    }
+
+    const { fromValue, toValue } = useUpdateVariantColor({
+        animateCallback: (from, to) => animate(from, to),
+        colorKey,
+        secretKey,
+        style,
+    })
+
+    const progress = useSharedValue(1)
+    const animate = (from: string, to: string) => {
+        'worklet'
+
+        fromValue.set(from)
+        toValue.set(to)
+    }
+
+    const derivedColor = useDerivedValue(() => {
+        return interpolateColor(
+            progress.value,
+            [0, 1],
+            [fromValue.get(), toValue.get()]
+        )
+    })
+
+    return derivedColor
+}

package/src/reanimated/variant/useUpdateVariantColor.native.ts

@@ -0,0 +1,38 @@
+import { useEffect, useLayoutEffect } from 'react'
+import { useSharedValue } from 'react-native-reanimated'
+import { StyleSheet, UnistyleDependency } from '../../specs'
+import type { UseUpdateVariantColorConfig } from './types'
+
+export const useUpdateVariantColor = <T extends Record<string, any>>({
+    colorKey,
+    style,
+    secretKey
+}: UseUpdateVariantColorConfig<T>) => {
+    const fromValue = useSharedValue<string>(style[colorKey])
+    const toValue = useSharedValue<string>(style[colorKey])
+
+    useEffect(() => {
+        // @ts-ignore this is hidden from TS
+        const dispose = StyleSheet.addChangeListener(changedDependencies => {
+            if (changedDependencies.includes(UnistyleDependency.Theme) || changedDependencies.includes(UnistyleDependency.Breakpoints)) {
+                // @ts-ignore
+                const newStyles = style[secretKey]?.uni__getStyles()
+
+                fromValue.set(toValue.value)
+                toValue.set(newStyles[colorKey])
+            }
+        })
+
+        return () => dispose()
+    }, [style, colorKey])
+
+    useLayoutEffect(() => {
+        fromValue.set(toValue.value)
+        toValue.set(style[colorKey])
+    }, [style, colorKey])
+
+    return {
+        fromValue,
+        toValue
+    }
+}

package/src/reanimated/variant/useUpdateVariantColor.ts

@@ -0,0 +1,81 @@
+import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react'
+import { runOnUI, useSharedValue } from 'react-native-reanimated'
+import { UnistyleDependency } from '../../specs'
+import type { UnistylesValues } from '../../types'
+import { services } from '../../web/services'
+import { getClosestBreakpointValue } from '../../web/utils'
+import type { UseUpdateVariantColorConfig } from './types'
+
+export const useUpdateVariantColor = <T extends Record<string, any>>({
+    animateCallback,
+    colorKey,
+    style
+}: UseUpdateVariantColorConfig<T>) => {
+    const [dummyDiv] = useState(() => {
+        const div = document.createElement('div')
+
+        div.style.display = 'none'
+        document.body.appendChild(div)
+
+        return div
+    })
+    const parsedStyles = useMemo(() => {
+        return services.shadowRegistry.addStyles([style]).parsedStyles
+    }, [style])
+    const getCurrentColor = useCallback(
+        () => {
+            if (!parsedStyles) {
+                return 'rgb(0, 0, 0)'
+            }
+
+            const currentColor = parsedStyles[colorKey as keyof UnistylesValues] as string | Record<string, string>
+            const currentColorVar = typeof currentColor === 'string'
+                ? currentColor
+                : getClosestBreakpointValue<string>(services.runtime, currentColor) ?? 'rgb(0, 0, 0)'
+
+            if (currentColorVar.startsWith('var(--')) {
+                dummyDiv.style.color = currentColorVar
+
+                return getComputedStyle(dummyDiv).color
+            }
+
+            return currentColorVar
+        },
+        [style, colorKey]
+    )
+    const fromValue = useSharedValue<string>(getCurrentColor())
+    const toValue = useSharedValue<string>(getCurrentColor())
+
+    useEffect(() => {
+        const dispose = services.listener.addListeners([UnistyleDependency.Theme], () => {
+            runOnUI(() => {
+                animateCallback?.(toValue.get(), getCurrentColor())
+            })()
+        })
+
+        return () => dispose()
+    }, [style, colorKey])
+
+    useLayoutEffect(() => {
+        animateCallback?.(toValue.get(), getCurrentColor())
+
+        const colorStyle = parsedStyles?.[colorKey as keyof UnistylesValues]
+
+        if (typeof colorStyle !== 'object' || colorStyle === null) {
+            return
+        }
+
+        const dispose = services.listener.addListeners([UnistyleDependency.Breakpoints], () => {
+            animateCallback?.(toValue.get(), getCurrentColor())
+        })
+
+        return () => dispose()
+    }, [style, colorKey])
+
+    useEffect(() => () => dummyDiv.remove(), [])
+
+    return {
+        fromValue,
+        toValue
+    }
+}

package/src/specs/ShadowRegistry/index.ts

@@ -9,6 +9,7 @@ interface ShadowRegistry extends UnistylesShadowRegistrySpec {
     // JSI
     link(node: ShadowNode, styles?: Array<Unistyle>): void,
     unlink(node: ShadowNode): void,
+    flush(): void,
     setScopedTheme(themeName?: string): void,
     getScopedTheme(): string | undefined
 }
@@ -23,8 +24,13 @@ const findShadowNodeForHandle = (handle: ViewHandle) => {
         ?? handle?.viewRef?.current?.__internalInstanceHandle?.stateNode?.node
         ?? handle?._nativeRef?.__internalInstanceHandle?.stateNode?.node
 
+    // @ts-ignore we don't know the type of handle
+    if (!node && handle?.props?.horizontal && handle?.constructor?.name === 'FlatList') {
+        throw new Error('Unistyles: detected an unsupported FlatList with the horizontal prop. This will cause crashes on Android due to a bug in React Native core. Read more: https://github.com/facebook/react-native/issues/51601')
+    }
+
     if (!node) {
-        throw new Error(`Unistyles: Could not find shadow node for one of your components of type ${handle?.__internalInstanceHandle?.elementType ?? 'unknown'}`)
+        throw new Error(`Unistyles: Could not find shadow node for one of your components of type ${handle?.constructor?.name ?? 'unknown'}`)
     }
 
     return node

package/src/specs/StyleSheet/index.ts

@@ -1,6 +1,7 @@
 import { StyleSheet as NativeStyleSheet, processColor } from 'react-native'
 import type { StyleSheet as NativeStyleSheetType } from 'react-native'
 import { NitroModules } from 'react-native-nitro-modules'
+import { parseBoxShadowString } from '../../core/parseBoxShadow'
 import type { UnistylesBreakpoints, UnistylesThemes } from '../../global'
 import type { CreateUnistylesStyleSheet } from '../../types'
 import type { UnistylesStyleSheet as UnistylesStyleSheetSpec } from './UnistylesStyleSheet.nitro'
@@ -33,7 +34,8 @@ export interface UnistylesStyleSheet extends UnistylesStyleSheetSpec {
     create: CreateUnistylesStyleSheet,
     configure(config: UnistylesConfig): void,
     jsMethods: {
-        processColor: typeof processColor
+        processColor: typeof processColor,
+        parseBoxShadowString: typeof parseBoxShadowString
     }
 }
 
@@ -45,7 +47,8 @@ HybridUnistylesStyleSheet.absoluteFill = NativeStyleSheet.absoluteFill
 HybridUnistylesStyleSheet.flatten = NativeStyleSheet.flatten
 HybridUnistylesStyleSheet.compose = NativeStyleSheet.compose
 HybridUnistylesStyleSheet.jsMethods = {
-    processColor
+    processColor,
+    parseBoxShadowString
 }
 
 HybridUnistylesStyleSheet.init()

package/src/specs/UnistylesRuntime/UnistylesRuntime.nitro.ts

@@ -36,6 +36,8 @@ export interface UnistylesRuntime extends HybridObject<{ ios: 'c++', android: 'c
     readonly pixelRatio: number,
     readonly fontScale: number,
     readonly rtl: boolean,
+    readonly isLandscape: boolean,
+    readonly isPortrait: boolean,
 
     setTheme(themeName: string): void,
     setAdaptiveThemes(isEnabled: boolean): void,

package/src/utils.ts

@@ -35,10 +35,8 @@ export const copyComponentProperties = (Component: any, UnistylesComponent: any)
         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/create.ts

@@ -21,7 +21,7 @@ export const create = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>, id?: s
         __uni__key: key,
         __uni__stylesheet: stylesheet,
         __uni__args: args,
-        __uni_variants: variants
+        __stylesheetVariants: variants
     })
 
     const createStyleSheetStyles = (variants?: Variants) => {

package/src/web/css/core.ts

@@ -34,8 +34,16 @@ export const convertToCSS = (hash: string, value: Record<string, any>, state: CS
         }
 
         if (typeof styleValue === 'object') {
-            const allBreakpoints = Object.keys(value)
             Object.entries(styleValue).forEach(([breakpointStyleKey, breakpointStyleValue]) => {
+                const allBreakpoints = Object.entries(value)
+                    .filter(([_, value]) => {
+                        if (typeof value !== 'object' || value === null) {
+                            return false
+                        }
+
+                        return breakpointStyleKey in value
+                    })
+                    .map(([key]) => key)
                 const mediaQuery = getMediaQuery(styleKey, allBreakpoints)
 
                 state.set({

package/src/web/css/state.ts

@@ -32,7 +32,7 @@ export class CSSState {
     mainMap: MapType = new Map()
     mqMap: MapType = new Map()
     private styleTag: HTMLStyleElement | null = null
-    private CSS = ''
+    private themesCSS = new Map<string, string>()
 
     constructor(private services: UnistylesServices) {
         if (isServer()) {
@@ -62,7 +62,10 @@ export class CSSState {
 
     add = (hash: string, values: UnistylesValues) => {
         convertToCSS(hash, convertUnistyles(values, this.services.runtime), this)
+        this.recreate()
+    }
 
+    recreate = () => {
         if (this.styleTag) {
             this.styleTag.innerText = this.getStyles()
         }
@@ -84,10 +87,10 @@ export class CSSState {
         Object.entries(values).forEach(([key, value]) => convertToCSS(key, value))
 
         if (theme === 'light' || theme === 'dark') {
-            this.CSS += `@media (prefers-color-scheme: ${theme}){:root{${themeVars}}}`
+            this.themesCSS.set(`media ${theme}`, `@media (prefers-color-scheme: ${theme}){:root{${themeVars}}}`)
         }
 
-        this.CSS += `:root.${theme}{${themeVars}}`
+        this.themesCSS.set(theme, `:root.${theme}{${themeVars}}`)
     }
 
     remove = (hash: string) => {
@@ -97,14 +100,13 @@ export class CSSState {
         this.mqMap.forEach(styles => {
             styles.delete(hash)
         })
-
-        if (this.styleTag) {
-            this.styleTag.innerText = this.getStyles()
-        }
+        this.recreate()
     }
 
     getStyles = () => {
-        let styles = this.CSS
+        let styles = Array.from(this.themesCSS.entries()).reduce((acc, [, themeCss]) => {
+            return acc + themeCss
+        }, '')
 
         const generate = (mediaQuery: string, secondLevelMap: Map<string, Map<string, string>>) => {
             if (mediaQuery) {

package/src/web/listener.ts

@@ -29,6 +29,7 @@ export class UnistylesListener {
 
             if (this.services.runtime.hasAdaptiveThemes) {
                 this.emitChange(UnistyleDependency.Theme)
+                this.emitChange(UnistyleDependency.ThemeName)
             }
         })
         this.services.runtime.lightMedia?.addEventListener('change', event => {
@@ -40,6 +41,7 @@ export class UnistylesListener {
 
             if (this.services.runtime.hasAdaptiveThemes) {
                 this.emitChange(UnistyleDependency.Theme)
+                this.emitChange(UnistyleDependency.ThemeName)
             }
         })
 

package/src/web/runtime.ts

@@ -4,7 +4,7 @@ import { type AppTheme, type AppThemeName, ColorScheme, Orientation } from '../s
 import { type UnistylesTheme, WebContentSizeCategory } from '../types'
 import { NavigationBar, StatusBar } from './mock'
 import type { UnistylesServices } from './types'
-import { error, isServer, schemeToTheme } from './utils'
+import { convertTheme, error, isServer, schemeToTheme } from './utils'
 
 export class UnistylesRuntime {
     lightMedia = this.getLightMedia()
@@ -76,6 +76,14 @@ export class UnistylesRuntime {
         return screen.orientation.type.includes('portrait') ? Orientation.Portrait : Orientation.Landscape
     }
 
+    get isLandscape() {
+        return this.orientation === Orientation.Landscape
+    }
+
+    get isPortrait() {
+        return this.orientation === Orientation.Portrait
+    }
+
     get theme() {
         return this.getTheme(this.themeName)
     }
@@ -204,7 +212,20 @@ export class UnistylesRuntime {
             throw error(`Unistyles: You're trying to update theme "${themeName}" but it wasn't registered.`)
         }
 
-        this.services.state.themes.set(themeName, updater(oldTheme))
+        const newTheme = updater(oldTheme)
+
+        this.services.state.themes.set(themeName, newTheme)
+
+        if (this.services.state.CSSVars) {
+            this.services.state.cssThemes.set(
+                themeName,
+                Object.fromEntries(Object.entries(newTheme).map(([key, value]) => {
+                    return convertTheme(key, value)
+                })) as UnistylesTheme
+            )
+            this.services.registry.css.addTheme(themeName, newTheme)
+            this.services.registry.css.recreate()
+        }
     }
 
     getTheme = (themeName = this.themeName, CSSVars = false) => {

package/src/web/shadowRegistry.ts

@@ -1,8 +1,8 @@
 import { UnistyleDependency } from '../specs/NativePlatform/NativePlatform.nitro'
 import type { UnistylesTheme, UnistylesValues } from '../types'
 import { deepMergeObjects } from '../utils'
-import type { UnistylesServices } from './types'
-import { extractSecrets, extractUnistyleDependencies } from './utils'
+import type { UniGeneratedStyle, UnistylesServices } from './types'
+import { extractSecrets, extractUnistyleDependencies, isGeneratedUnistyle, isServer } from './utils'
 import { getVariants } from './variants'
 
 export class UnistylesShadowRegistry {
@@ -20,7 +20,7 @@ export class UnistylesShadowRegistry {
     constructor(private services: UnistylesServices) {}
 
     add = (ref: any, hash?: string) => {
-        if (!(ref instanceof HTMLElement) || !hash) {
+        if (isServer() || !(ref instanceof HTMLElement) || !hash) {
             return
         }
 
@@ -28,6 +28,13 @@ export class UnistylesShadowRegistry {
     }
 
     addStyles = (unistyles: Array<UnistylesValues>, forChild?: boolean) => {
+        const [firstStyle] = unistyles
+
+        // If it is already a generated style, return it
+        if (firstStyle && isGeneratedUnistyle(firstStyle)) {
+            return firstStyle as UniGeneratedStyle
+        }
+
         const getParsedStyles = () => {
             const allStyles = unistyles.map(unistyle => {
                 const secrets = extractSecrets(unistyle)
@@ -42,7 +49,7 @@ export class UnistylesShadowRegistry {
                     return {}
                 }
 
-                const { __uni__key, __uni__stylesheet, __uni__args = [], __uni_variants: variants } = secrets
+                const { __uni__key, __uni__stylesheet, __uni__args = [], __stylesheetVariants: variants } = secrets
                 const newComputedStylesheet = this.services.registry.getComputedStylesheet(__uni__stylesheet, scopedTheme)
                 const style = newComputedStylesheet[__uni__key] as (UnistylesValues | ((...args: any) => UnistylesValues))
                 const result = typeof style === 'function'
@@ -87,7 +94,7 @@ export class UnistylesShadowRegistry {
             ? hash.replace(' > *', '')
             : hash
 
-        return { injectedClassName, hash: hashClassname }
+        return { injectedClassName, hash: hashClassname, parsedStyles }
     }
 
     setScopedTheme = (theme?: UnistylesTheme) => {
@@ -97,7 +104,7 @@ export class UnistylesShadowRegistry {
     getScopedTheme = () => this.scopedTheme
 
     remove = (ref: any, hash?: string) => {
-        if (!(ref instanceof HTMLElement) || !hash) {
+        if (isServer() || !(ref instanceof HTMLElement) || !hash) {
             return
         }
 
@@ -111,4 +118,6 @@ export class UnistylesShadowRegistry {
                 this.disposeMap.delete(hash)
             })
     }
+
+    flush = () => {}
 }

package/src/web/state.ts

@@ -5,7 +5,7 @@ import type { AppBreakpoint, AppTheme, AppThemeName } from '../specs/types'
 import type { UnistylesTheme } from '../types'
 import type { UnionToIntersection } from '../types'
 import type { UnistylesServices } from './types'
-import { error, hyphenate, isServer, schemeToTheme } from './utils'
+import { convertTheme, error, isServer, schemeToTheme } from './utils'
 
 type UnistylesSettings = Partial<UnionToIntersection<Required<UnistylesConfig>['settings']>>
 
@@ -72,22 +72,12 @@ export class UnistylesState {
 
             if (CSSVars) {
                 this.services.registry.css.addTheme(themeName, theme)
-
-                const convertTheme = (key: string, value: any, prev = '-'): [string, any] => {
-                    if (typeof value === 'object' && value !== null) {
-                        return [key, Object.fromEntries(Object.entries(value).map(([nestedKey, nestedValue]) => convertTheme(nestedKey, nestedValue, `${prev}-${key}`)))]
-                    }
-
-                    if (typeof value === 'string') {
-                        return [key, `var(${prev}-${hyphenate(key)})`]
-                    }
-
-                    return [key, value]
-                }
-
-                this.cssThemes.set(themeName, Object.fromEntries(Object.entries(theme).map(([key, value]) => {
-                    return convertTheme(key, value)
-                })) as UnistylesTheme)
+                this.cssThemes.set(
+                    themeName,
+                    Object.fromEntries(Object.entries(theme).map(([key, value]) => {
+                        return convertTheme(key, value)
+                    })) as UnistylesTheme
+                )
             }
         })
     }

package/src/web/types.ts

@@ -1,8 +1,9 @@
+import type { UnistylesValues } from '../types'
 import type { UnistylesListener } from './listener'
-import type{ UnistylesRegistry } from './registry'
-import type{ UnistylesRuntime } from './runtime'
-import type{ UnistylesShadowRegistry } from './shadowRegistry'
-import type{ UnistylesState } from './state'
+import type { UnistylesRegistry } from './registry'
+import type { UnistylesRuntime } from './runtime'
+import type { UnistylesShadowRegistry } from './shadowRegistry'
+import type { UnistylesState } from './state'
 
 export type UnistylesServices = {
     runtime: UnistylesRuntime,
@@ -11,3 +12,10 @@ export type UnistylesServices = {
     state: UnistylesState,
     listener: UnistylesListener
 }
+
+export const UNI_GENERATED_KEYS = ['$$css', 'hash', 'injectedClassName'] as const
+export type UniGeneratedKey = typeof UNI_GENERATED_KEYS[number]
+
+export type UniGeneratedStyle = Record<UniGeneratedKey, string> & {
+    parsedStyles?: UnistylesValues
+}

package/src/web/utils/unistyle.ts

@@ -3,9 +3,11 @@ import type { UnistylesBreakpoints } from '../../global'
 import type { UnistyleDependency } from '../../specs/NativePlatform/NativePlatform.nitro'
 import { ColorScheme, Orientation } from '../../specs/types'
 import type { StyleSheet, StyleSheetWithSuperPowers, UnistylesValues } from '../../types/stylesheet'
-import { isUnistylesMq, parseMq } from '../../utils'
+import { isDefined, isUnistylesMq, parseMq } from '../../utils'
+import type { UnistylesRuntime } from '../runtime'
 import * as unistyles from '../services'
-import { keyInObject, reduceObject } from './common'
+import { UNI_GENERATED_KEYS, type UniGeneratedKey, type UniGeneratedStyle } from '../types'
+import { hyphenate, keyInObject, reduceObject } from './common'
 
 export const schemeToTheme = (scheme: ColorScheme) => {
     switch (scheme) {
@@ -21,7 +23,7 @@ export type UnistyleSecrets = {
     __uni__stylesheet: StyleSheetWithSuperPowers<StyleSheet>,
     __uni__key: string,
     __uni__args?: Array<any>,
-    __uni_variants: Record<string, string | boolean | undefined>
+    __stylesheetVariants: Record<string, string | boolean | undefined>
 }
 
 export const assignSecrets = <T>(object: T, secrets: UnistyleSecrets) => {
@@ -139,3 +141,36 @@ export const checkForAnimated = (value: any): boolean => {
 
     return false
 }
+
+export const isGeneratedUnistyle = (value: Record<string, any>): value is UniGeneratedStyle => {
+    const keys = Object.keys(value)
+
+    return keys.length > 0 && keys.every(key => UNI_GENERATED_KEYS.includes(key as UniGeneratedKey))
+}
+
+export const convertTheme = (key: string, value: any, prev = '-'): [string, any] => {
+    if (typeof value === 'object' && value !== null) {
+        return [key, Object.fromEntries(Object.entries(value).map(([nestedKey, nestedValue]) => convertTheme(nestedKey, nestedValue, `${prev}-${key}`)))]
+    }
+
+    if (typeof value === 'string') {
+        return [key, `var(${prev}-${hyphenate(key)})`]
+    }
+
+    return [key, value]
+}
+
+export const getClosestBreakpointValue = <T>(runtime: UnistylesRuntime, values: Partial<Record<keyof UnistylesBreakpoints, T>>) => {
+    const breakpoints = runtime.breakpoints
+    const breakpointValues = Object.entries(values)
+        // Filter out non-breakpoint values
+        .filter((pair): pair is [keyof UnistylesBreakpoints, T] => pair[0] in breakpoints)
+        // Sort in descending order
+        .sort(([a], [b]) => (breakpoints[b] ?? 0) - (breakpoints[a] ?? 0))
+    // Get breakpoint value with highest priority
+    const [_, currentBreakpointValue] = breakpointValues.find(
+        ([key]) => isDefined(runtime.breakpoint) && (breakpoints[key] ?? 0) <= (breakpoints[runtime.breakpoint] ?? 0)
+    ) ?? []
+
+    return currentBreakpointValue
+}

package/src/web-only/getWebProps.ts

@@ -0,0 +1,18 @@
+import type { StyleProp } from 'react-native'
+import { getClassName } from '../core'
+import type { RNStyle, UnistylesValues } from '../types'
+import { createUnistylesRef } from '../web/utils/createUnistylesRef'
+
+export const getWebProps = <T>(style: StyleProp<RNStyle>) => {
+    const styles = getClassName(style as UnistylesValues)
+    const ref = createUnistylesRef<T>(styles)
+    const [generatedStyles] = styles ?? []
+
+    return {
+        className: [
+            generatedStyles?.hash,
+            generatedStyles?.injectedClassName,
+        ].filter(Boolean).join(' '),
+        ref
+    }
+}

package/src/web-only/index.ts

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

package/web/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "../lib/commonjs/web-only/index",
+    "module": "../lib/module/web-only/index",
+    "react-native": "../src/web-only/index",
+    "types": "../lib/typescript/src/web-only/index"
+}

package/cxx/core/UnistylesCommitHook.cpp

@@ -1,52 +0,0 @@
-#include "UnistylesCommitHook.h"
-
-using namespace margelo::nitro::unistyles;
-using namespace facebook::react;
-
-core::UnistylesCommitHook::~UnistylesCommitHook() noexcept {
-    _uiManager->unregisterCommitHook(*this);
-}
-
-void core::UnistylesCommitHook::commitHookWasRegistered(const UIManager &uiManager) noexcept {}
-void core::UnistylesCommitHook::commitHookWasUnregistered(const UIManager &uiManager) noexcept {}
-
-RootShadowNode::Unshared core::UnistylesCommitHook::shadowTreeWillCommit(
-    const ShadowTree &shadowTree,
-    const RootShadowNode::Shared &oldRootShadowNode,
-    const RootShadowNode::Unshared &newRootShadowNode
-) noexcept {
-    RootShadowNode::Unshared rootNode = newRootShadowNode;
-    auto unistylesRootNode = std::reinterpret_pointer_cast<core::UnistylesCommitShadowNode>(newRootShadowNode);
-
-    // this is Unistyles commit, we don't need to override it
-    if (unistylesRootNode->hasUnistylesCommitTrait()) {
-        unistylesRootNode->removeUnistylesCommitTrait();
-        unistylesRootNode->addUnistylesMountTrait();
-
-        return newRootShadowNode;
-    }
-
-    // this is React Native / Reanimated commit
-    // merge Unistyles updates before it completes
-    auto& registry = core::UnistylesRegistry::get();
-
-    return registry.trafficController.withLock([&](){
-        auto& shadowLeafUpdates = registry.trafficController.getUpdates();
-
-        // oops, no updates from Unistyles yet, skip it!
-        if (shadowLeafUpdates.size() == 0) {
-            return newRootShadowNode;
-        }
-
-        auto affectedNodes = shadow::ShadowTreeManager::findAffectedNodes(*rootNode, shadowLeafUpdates);
-
-        registry.trafficController.stopUnistylesTraffic();
-
-        // we have few updates, so merge it
-        return std::static_pointer_cast<RootShadowNode>(shadow::ShadowTreeManager::cloneShadowTree(
-            *rootNode,
-            shadowLeafUpdates,
-            affectedNodes
-        ));
-    });
-}