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

package/src/core/withUnistyles/withUnistyles.tsx

@@ -1,42 +1,11 @@
-import React, { useEffect, useState, type ComponentType, forwardRef, useRef, useMemo, type ComponentProps, type ComponentRef } from 'react'
+import React, { type ComponentType, forwardRef, type ComponentProps, type ComponentRef } from 'react'
 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 type { Mappings, SupportedStyleProps } from './types'
-import { useDependencies } from './useDependencies'
-import { UnistyleDependency } from '../../specs/NativePlatform'
 import type { UnistylesValues } from '../../types'
-
-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]) ?? []
-
-        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])
-        }
-    })
-
-    return classNames
-}
+import { getClassName } from '../getClassname'
+import { maybeWarnAboutMultipleUnistyles } from '../warn'
+import { useProxifiedUnistyles } from '../useProxifiedUnistyles'
 
 // @ts-expect-error
 type GenericComponentProps<T> = ComponentProps<T>
@@ -47,42 +16,36 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
     type TProps = GenericComponentProps<TComponent>
     type PropsWithUnistyles = PartialBy<TProps, keyof TMappings | SupportedStyleProps> & {
         uniProps?: Mappings<TProps>
+    }
+    type UnistyleStyles = {
         style?: UnistylesValues,
         contentContainerStyle?: UnistylesValues
     }
 
     return forwardRef<GenericComponentRef<TComponent>, PropsWithUnistyles>((props, ref) => {
-        const narrowedProps = props as PropsWithUnistyles
-        const styleClassNames = useShadowRegistry(narrowedProps.style)
-        const contentContainerStyleClassNames = useShadowRegistry(narrowedProps.contentContainerStyle)
-        const { mappingsCallback } = useDependencies(({ dependencies, updateTheme, updateRuntime }) => {
-            const disposeTheme = UnistylesListener.addListeners(dependencies.filter(dependency => dependency === UnistyleDependency.Theme), updateTheme)
-            const disposeRuntime = UnistylesListener.addListeners(dependencies.filter(dependency => dependency !== UnistyleDependency.Theme), updateRuntime)
+        const narrowedProps = props as PropsWithUnistyles & UnistyleStyles
+        const styleClassNames = getClassName(narrowedProps.style)
+        const contentContainerStyleClassNames = getClassName(narrowedProps.contentContainerStyle)
+        const { proxifiedRuntime, proxifiedTheme } = useProxifiedUnistyles()
 
-            return () => {
-                disposeTheme()
-                disposeRuntime()
-            }
-        })
-        const mappingsProps = mappings ? mappingsCallback(mappings) : {}
-        const unistyleProps = narrowedProps.uniProps ? mappingsCallback(narrowedProps.uniProps) : {}
+        const mappingsProps = mappings ? mappings(proxifiedTheme, proxifiedRuntime) : {}
+        const unistyleProps = narrowedProps.uniProps ? narrowedProps.uniProps(proxifiedTheme, proxifiedRuntime) : {}
 
         const combinedProps = {
             ...deepMergeObjects(mappingsProps, unistyleProps, props),
             ...narrowedProps.style ? {
-                style: {
-                    $$css: true,
-                    'unistyles': styleClassNames.join(' ')
-                },
+                style: styleClassNames,
             } : {},
             ...narrowedProps.contentContainerStyle ? {
-                style: {
-                    $$css: true,
-                    'unistyles': contentContainerStyleClassNames.join(' ')
-                },
+                style: contentContainerStyleClassNames,
             } : {},
         } as any
 
+        // @ts-ignore
+        maybeWarnAboutMultipleUnistyles(narrowedProps.style, `withUnistyles(${Component.displayName ?? Component.name ?? 'Unknown'})`)
+        // @ts-ignore
+        maybeWarnAboutMultipleUnistyles(narrowedProps.contentContainerStyle, `withUnistyles(${Component.displayName ?? Component.name ?? 'Unknown'})`)
+
         const NativeComponent = Component as ComponentType
 
         return <NativeComponent {...combinedProps} ref={ref} />

package/src/index.ts

@@ -1,6 +1,7 @@
 export { StyleSheet, UnistylesRuntime, StatusBar, NavigationBar } from './specs'
 export { mq } from './mq'
 export type { UnistylesThemes, UnistylesBreakpoints } from './global'
-export { createUnistylesComponent, withUnistyles } from './core'
+export { withUnistyles, useUnistyles } from './core'
 export type { UnistylesVariants } from './types'
-export { Display, Hide, Variants, ScopedTheme } from './components'
+export { Display, Hide, ScopedTheme } from './components'
+export { useServerUnistyles, hydrateServerUnistyles, getServerUnistyles, resetServerUnistyles } from './server'

package/src/server/getServerUnistyles.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { StyleSheet } from 'react-native'
+import { error, isServer } from '../web/utils'
+import { UnistylesWeb } from '../web'
+import { DefaultServerUnistylesSettings, type ServerUnistylesSettings } from './types'
+
+export const getServerUnistyles = ({ includeRNWStyles = true }: ServerUnistylesSettings = DefaultServerUnistylesSettings) => {
+    if (!isServer()) {
+        throw error('Server styles should only be read on the server')
+    }
+    // @ts-ignore
+    const rnwStyle: string | null = includeRNWStyles ? (StyleSheet?.getSheet().textContent ?? '') : null
+    const css = UnistylesWeb.registry.css.getStyles()
+    const state = UnistylesWeb.registry.css.getState()
+    return <>
+        {rnwStyle && <style id='rnw-style'>{rnwStyle}</style>}
+        <style id='unistyles-web'>{css}</style>
+        <script id='unistyles-script'>{`window.__UNISTYLES_STATE__ = ${JSON.stringify(state)}`}</script>
+    </>
+}

package/src/server/hydrateServerUnistyles.ts

@@ -0,0 +1,17 @@
+import { error, isServer } from '../web/utils'
+import { UnistylesWeb } from '../web'
+
+declare global {
+    interface Window {
+        // @ts-ignore
+        __UNISTYLES_STATE__: ReturnType<typeof UnistylesWeb.registry.css.getState>
+    }
+}
+
+export const hydrateServerUnistyles = () => {
+    if (isServer()) {
+        throw error('Server styles should only be hydrated on the client')
+    }
+    UnistylesWeb.registry.css.hydrate(window.__UNISTYLES_STATE__)
+    document.querySelector('#unistyles-script')?.remove()
+}

package/src/server/index.ts

@@ -0,0 +1,5 @@
+export { useServerUnistyles } from './useServerUnistyles'
+export { getServerUnistyles } from './getServerUnistyles'
+export { resetServerUnistyles } from './resetServerUnistyles'
+export { hydrateServerUnistyles } from './hydrateServerUnistyles'
+

package/src/server/resetServerUnistyles.ts

@@ -0,0 +1,9 @@
+import { error, isServer } from '../web/utils'
+import { UnistylesWeb } from '../web'
+
+export const resetServerUnistyles = () => {
+    if (!isServer()) {
+        throw error('Server styles should only be reset on the server')
+    }
+    UnistylesWeb.registry.reset()
+}

package/src/server/types.ts

@@ -0,0 +1,4 @@
+export type ServerUnistylesSettings = {
+  includeRNWStyles?: boolean
+}
+export const DefaultServerUnistylesSettings = {}

package/src/server/useServerUnistyles.tsx

@@ -0,0 +1,22 @@
+import React, { useRef } from 'react'
+import { isServer } from '../web/utils'
+import { DefaultServerUnistylesSettings, type ServerUnistylesSettings } from './types'
+import { getServerUnistyles } from './getServerUnistyles'
+import { resetServerUnistyles } from './resetServerUnistyles'
+import { hydrateServerUnistyles } from './hydrateServerUnistyles'
+
+export const useServerUnistyles = (settings: ServerUnistylesSettings = DefaultServerUnistylesSettings): React.ReactNode | null => {
+    const isServerInserted = useRef(false)
+
+    if (isServer() && !isServerInserted.current) {
+        isServerInserted.current = true
+        const components = getServerUnistyles(settings)
+        resetServerUnistyles()
+        return components
+    }
+
+    if (!isServer()) {
+        hydrateServerUnistyles()
+    }
+    return null
+}

package/src/specs/ShadowRegistry/index.ts

@@ -2,8 +2,6 @@ import { NitroModules } from 'react-native-nitro-modules'
 import type { UnistylesShadowRegistry as UnistylesShadowRegistrySpec } from './ShadowRegistry.nitro'
 import type { ShadowNode, Unistyle, ViewHandle } from './types'
 
-type Variants = Record<string, string | boolean | undefined>
-
 interface ShadowRegistry extends UnistylesShadowRegistrySpec {
     // Babel API
     add(handle?: ViewHandle, styles?: Array<Unistyle>): void,
@@ -11,10 +9,8 @@ interface ShadowRegistry extends UnistylesShadowRegistrySpec {
     // JSI
     link(node: ShadowNode, styles?: Array<Unistyle>): void,
     unlink(node: ShadowNode): void,
-    selectVariants(variants?: Variants): void,
     setScopedTheme(themeName?: string): void,
-    getScopedTheme(): string | undefined,
-    getVariants(): Record<string, string | boolean | undefined> | undefined,
+    getScopedTheme(): string | undefined
 }
 
 const HybridShadowRegistry = NitroModules.createHybridObject<ShadowRegistry>('UnistylesShadowRegistry')
@@ -36,16 +32,23 @@ const findShadowNodeForHandle = (handle: ViewHandle) => {
 
 HybridShadowRegistry.add = (handle, styles) => {
     // virtualized nodes can be null
-    if (!handle || !styles || !Array.isArray(styles)) {
+    if (!handle || !styles) {
         return
     }
 
+    const stylesArray = Array.isArray(styles)
+        ? styles.flat()
+        : [styles]
+
     // filter Reanimated styles and styles that are undefined
-    const filteredStyles = styles
+    const filteredStyles = stylesArray
         .filter(style => !style?.initial?.updater)
-        .filter(Boolean)
+        .filter(style => style && Object.keys(style).length > 0)
+        .flat()
 
-    HybridShadowRegistry.link(findShadowNodeForHandle(handle), filteredStyles)
+    if (filteredStyles.length > 0) {
+        HybridShadowRegistry.link(findShadowNodeForHandle(handle), filteredStyles)
+    }
 }
 
 HybridShadowRegistry.remove = handle => {

package/src/specs/StyleSheet/index.ts

@@ -5,12 +5,16 @@ import type { UnistylesStyleSheet as UnistylesStyleSheetSpec } from './Unistyles
 import type { UnistylesBreakpoints, UnistylesThemes } from '../../global'
 import type { CreateUnistylesStyleSheet } from '../../types'
 
-type UnistylesSettings = {
+type UnistylesThemeSettings = {
     initialTheme: (() => keyof UnistylesThemes) | keyof UnistylesThemes
 } | {
     adaptiveThemes: boolean
 }
 
+type UnistylesSettings = UnistylesThemeSettings & {
+    CSSVars?: boolean
+}
+
 export type UnistylesConfig = {
     settings?: UnistylesSettings,
     themes?: UnistylesThemes,

package/src/utils.ts

@@ -1,20 +1,24 @@
+export const isDefined = <T>(value: T): value is NonNullable<T> => value !== undefined && value !== null
+
 export const deepMergeObjects = <T extends Record<PropertyKey, any>>(...sources: Array<T>) => {
     const target = {} as T
 
-    sources.forEach(source => {
-        Object.keys(source).forEach(key => {
-            const sourceValue = source[key]
-            const targetValue = target[key]
+    sources
+        .filter(isDefined)
+        .forEach(source => {
+            Object.keys(source).forEach(key => {
+                const sourceValue = source[key]
+                const targetValue = target[key]
 
-            if (Object(sourceValue) === sourceValue && Object(targetValue) === targetValue) {
-                // @ts-expect-error - can't assign to generic
-                target[key] = deepMergeObjects(targetValue, sourceValue)
+                if (Object(sourceValue) === sourceValue && Object(targetValue) === targetValue) {
+                    // @ts-expect-error - can't assign to generic
+                    target[key] = deepMergeObjects(targetValue, sourceValue)
 
-                return
-            }
+                    return
+                }
 
-            // @ts-expect-error - can't assign to generic
-            target[key] = sourceValue
+                // @ts-expect-error - can't assign to generic
+                target[key] = sourceValue
         })
     })
 

package/src/web/convert/object/filter.ts

@@ -3,8 +3,8 @@ import { hyphenate } from '../../utils'
 import type { Filters } from '../types'
 import { getObjectStyle } from './objectStyle'
 import { normalizeColor, normalizeNumericValue } from '../utils'
-import { UnistylesRuntime } from '../../runtime'
 import { isUnistylesMq } from '../../../mq'
+import { UnistylesWeb } from '../../index'
 
 const getDropShadowStyle = (dropShadow: DropShadowValue) => {
     const { offsetX = 0, offsetY = 0, standardDeviation = 0, color = '#000' } = dropShadow
@@ -21,7 +21,7 @@ export const getFilterStyle = (filters: Array<Filters>) => {
             return []
         }
 
-        const breakpoints = Object.keys(dropShadowValue).filter(key => Object.keys(UnistylesRuntime.breakpoints).includes(key) || isUnistylesMq(key))
+        const breakpoints = Object.keys(dropShadowValue).filter(key => Object.keys(UnistylesWeb.runtime.breakpoints).includes(key) || isUnistylesMq(key))
         const breakpointsDropShadow = Object.fromEntries(breakpoints.map(breakpoint => [breakpoint, getDropShadowStyle(dropShadowValue[breakpoint])]))
 
         if (breakpoints.length === 0) {

package/src/web/convert/style.ts

@@ -1,15 +1,15 @@
 import { keyInObject } from '../utils'
 
-const SKIP_STYLES = [
+const SKIP_STYLES = new Set([
     'borderCurve',
     'elevation',
     'textAlignVertical',
     'includeFontPadding',
     'overlayColor',
     'tintColor'
-]
+])
 
-const CSS_NUMBER_KEYS = [
+const CSS_NUMBER_KEYS = new Set([
     'animationIterationCount',
     'borderImageOutset',
     'borderImageSlice',
@@ -53,8 +53,9 @@ const CSS_NUMBER_KEYS = [
     'strokeDashoffset',
     'strokeMiterlimit',
     'strokeOpacity',
-    'strokeWidth'
-]
+    'strokeWidth',
+    'aspectRatio'
+])
 
 const convertMap = {
     marginHorizontal: (value: number) => ({
@@ -124,14 +125,14 @@ const convertMap = {
 
 const convertNumber = (key: string, value: any) => {
     if (typeof value === 'number') {
-        return CSS_NUMBER_KEYS.includes(key, value) ? value : `${value}px`
+        return CSS_NUMBER_KEYS.has(key) ? value : `${value}px`
     }
 
     return value
 }
 
 export const getStyle = (key: string, value: any) => {
-    if (SKIP_STYLES.includes(key)) {
+    if (SKIP_STYLES.has(key)) {
         return {}
     }
 

package/src/web/create.ts

@@ -1,36 +1,41 @@
 import type { StyleSheetWithSuperPowers, StyleSheet } from '../types/stylesheet'
+import { UnistylesWeb } from './index'
 import { assignSecrets, error, removeInlineStyles } from './utils'
-import { UnistylesRuntime } from './runtime'
 
-const useVariants = ['useVariants', () => {}]
+type Variants = Record<string, string | boolean | undefined>
 
 export const create = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>, id?: string) => {
     if (!id) {
         throw error('Unistyles is not initialized correctly. Please add babel plugin to your babel config.')
     }
 
-    const computedStylesheet = typeof stylesheet === 'function'
-        ? stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
-        : stylesheet
-
-    const addSecrets = (value: any, key: string, args?: Array<any>) => assignSecrets(value, {
+    const computedStylesheet = UnistylesWeb.registry.getComputedStylesheet(stylesheet)
+    const addSecrets = (value: any, key: string, args = undefined as Array<any> | undefined, variants = {} as Variants) => assignSecrets(value, {
         __uni__key: key,
         __uni__stylesheet: stylesheet,
         __uni__args: args,
-        __uni__refs: new Set()
+        __uni_variants: variants
     })
 
-    const styleSheetStyles = Object.entries(computedStylesheet).map(([key, value]) => {
-        if (typeof value === 'function') {
-            return [key, (...args: Array<any>) => {
-                const result = removeInlineStyles(value(...args))
+    const createStyleSheetStyles = (variants?: Variants) => {
+        const stylesEntries = Object.entries(computedStylesheet).map(([key, value]) => {
+            if (typeof value === 'function') {
+                return [key, (...args: Array<any>) => {
+                    const result = removeInlineStyles(value(...args))
 
-                return addSecrets(result, key, args)
-            }]
-        }
+                    return addSecrets(result, key, args, variants)
+                }]
+            }
 
-        return [key, addSecrets(removeInlineStyles(value), key)]
-    })
+            return [key, addSecrets(removeInlineStyles(value), key, undefined, variants)]
+        })
+
+        return Object.fromEntries(stylesEntries.concat([useVariants]))
+    }
+
+    const useVariants = ['useVariants', (variants: Variants) => {
+        return createStyleSheetStyles(variants)
+    }]
 
-    return Object.fromEntries(styleSheetStyles.concat([useVariants]))
+    return createStyleSheetStyles()
 }

package/src/web/css/core.ts

@@ -0,0 +1,58 @@
+import { getMediaQuery } from '../utils'
+import type { CSSState } from './state'
+
+export const convertToCSS = (hash: string, value: Record<string, any>, state: CSSState) => {
+    Object.entries(value).forEach(([styleKey, styleValue]) => {
+        if (styleKey[0] === '_') {
+            const pseudoClassName = styleKey.replace('_', `${hash}:`)
+
+            Object.entries(styleValue).forEach(([pseudoStyleKey, pseudoStyleValue]) => {
+                if (typeof pseudoStyleValue === 'object' && pseudoStyleValue !== null) {
+                    const allBreakpoints = Object.keys(pseudoStyleValue)
+                    Object.entries(pseudoStyleValue).forEach(([breakpointStyleKey, breakpointStyleValue]) => {
+                        const mediaQuery = getMediaQuery(pseudoStyleKey, allBreakpoints)
+
+                        state.set({
+                            mediaQuery,
+                            className: pseudoClassName,
+                            propertyKey: breakpointStyleKey,
+                            value: breakpointStyleValue,
+                        })
+                    })
+
+                    return
+                }
+
+                state.set({
+                    className: pseudoClassName,
+                    propertyKey: pseudoStyleKey,
+                    value: pseudoStyleValue,
+                })
+            })
+
+            return
+        }
+
+        if (typeof styleValue === 'object') {
+            const allBreakpoints = Object.keys(styleValue)
+            Object.entries(styleValue).forEach(([breakpointStyleKey, breakpointStyleValue]) => {
+                const mediaQuery = getMediaQuery(styleKey, allBreakpoints)
+
+                state.set({
+                    mediaQuery,
+                    className: hash,
+                    propertyKey: breakpointStyleKey,
+                    value: breakpointStyleValue,
+                })
+            })
+
+            return
+        }
+
+        state.set({
+            className: hash,
+            propertyKey: styleKey,
+            value: styleValue,
+        })
+    })
+}

package/src/web/css/index.ts

@@ -0,0 +1 @@
+export * from './state'