react-native-unistyles 2.10.0 → 3.0.0-alpha.10

package/src/web/state.ts

@@ -0,0 +1,148 @@
+import { type ReactElement, createElement, createRef } from 'react'
+import type { UnistylesTheme } from '../types'
+import type { UnistylesConfig } from '../specs/StyleSheet'
+import type { AppBreakpoint, AppThemeName } from '../specs/types'
+import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
+import { UnistylesRuntime } from './runtime'
+import { isServer, schemeToTheme } from './utils'
+import { UnistylesListener } from './listener'
+import { UnistyleDependency } from '../specs/NativePlatform'
+
+class UnistylesStateBuilder {
+    private readonly isSSR = isServer()
+    readonly tags = [] as Array<ReactElement>
+
+    themes = new Map<string, UnistylesTheme>()
+    themeName?: AppThemeName
+
+    breakpoint?: AppBreakpoint
+    breakpoints?: UnistylesBreakpoints
+
+    hasAdaptiveThemes = false
+
+    init = (config: UnistylesConfig) => {
+        this.initThemes(config.themes)
+        this.initBreakpoints(config.breakpoints)
+        this.initSettings(config.settings)
+
+        if (this.isSSR) {
+            return
+        }
+
+        UnistylesListener.initListeners()
+    }
+
+    private initThemes = (themes = {} as UnistylesThemes) => {
+        Object.entries(themes).forEach(([themeName, theme]) => {
+            this.themes.set(themeName, theme)
+        })
+    }
+
+    private initSettings = (settings: UnistylesConfig['settings']) => {
+        this.hasAdaptiveThemes = settings?.adaptiveThemes ?? false
+        const themeNames = Array.from(this.themes.keys()) as Array<AppThemeName>
+
+        // Single theme + no settings
+        if (!settings?.adaptiveThemes && !settings?.initialTheme && themeNames.length === 1) {
+            this.themeName = themeNames[0]
+
+            return
+        }
+
+        // No settings
+        if (!settings?.adaptiveThemes && !settings?.initialTheme) {
+            throw new Error('🦄 You need to specify either "initialTheme" or "adaptiveThemes" in your config')
+        }
+
+        // Adaptive themes
+        if (settings.adaptiveThemes) {
+            this.themeName = schemeToTheme(UnistylesRuntime.colorScheme)
+
+            return
+        }
+
+        // Initial theme
+        this.themeName = typeof settings.initialTheme === 'function' ? settings.initialTheme() : settings.initialTheme
+    }
+
+    private initBreakpoints = (breakpoints = {} as UnistylesBreakpoints) => {
+        const breakpointsMap = new Map<string, MediaQueryList>()
+
+        this.breakpoints = breakpoints
+
+        Object.entries(breakpoints)
+            .sort(([, a], [, b]) => a - b)
+            .forEach(([breakpoint, value]) => {
+                if (isServer()) {
+                    return
+                }
+
+                const mediaQuery = window.matchMedia(`(min-width: ${value}px)`)
+                breakpointsMap.set(breakpoint, mediaQuery)
+
+                if (mediaQuery.matches) {
+                    this.breakpoint = breakpoint as AppBreakpoint
+                }
+
+                mediaQuery.addEventListener('change', event => {
+                    if (!event.matches) {
+                        const [currentBreakpoint] = Array.from(breakpointsMap).find(([,mq]) => mq.matches) ?? []
+
+                        if (currentBreakpoint) {
+                            this.breakpoint = currentBreakpoint as AppBreakpoint
+                            UnistylesListener.emitChange(UnistyleDependency.Breakpoints)
+                        }
+
+                        return
+                    }
+
+                    this.breakpoint = breakpoint as AppBreakpoint
+                    UnistylesListener.emitChange(UnistyleDependency.Breakpoints)
+                })
+            })
+    }
+
+    createTag() {
+        if (!this.isSSR) {
+            const tag = document.createElement('style')
+
+            document.head.appendChild(tag)
+
+            return tag
+        }
+
+        const tagRef = new Proxy(createRef<HTMLStyleElement>(), {
+            set: (target, prop, value) => {
+                // When ref is assigned
+                if ('textContent' in value) {
+                    value.textContent = tag.textContent
+                }
+
+                return Reflect.set(target, prop, value)
+            }
+        })
+        const tagElement = createElement('style', { ref: tagRef, key: this.tags.length }, '')
+        const tag = new Proxy({ textContent: '' }, {
+            set: (target, prop, value) => {
+                if (prop !== 'textContent') {
+                    return false
+                }
+
+                // When css is updated
+                target.textContent = value
+
+                if (tagRef.current) {
+                    tagRef.current.textContent = value
+                }
+
+                return true
+            }
+        })
+
+        this.tags.push(tagElement)
+
+        return tag
+    }
+}
+
+export const UnistylesState = new UnistylesStateBuilder()

package/src/web/utils.ts

@@ -0,0 +1,95 @@
+import { ColorScheme, type AppThemeName} from '../specs/types'
+import type { UnistylesValues } from '../types'
+
+export const reduceObject = <TObj extends Record<string, any>, TReducer>(
+    obj: TObj,
+    reducer: (value: TObj[keyof TObj], key: keyof TObj) => TReducer,
+) => Object.fromEntries(Object.entries(obj).map(([key, value]) => [key, reducer(value as TObj[keyof TObj], key)])) as { [K in keyof TObj]: TReducer }
+
+export const toReactNativeClassName = (className: string | null, values: UnistylesValues) => {
+    const returnValue = className ? {
+        $$css: true,
+        [className]: className
+    } : {}
+
+    Object.defineProperties(returnValue, reduceObject(values, value => ({
+        value,
+        enumerable: false,
+        configurable: true
+    })))
+
+    return returnValue
+}
+
+export const keyInObject = <T extends Record<string, any>>(obj: T, key: PropertyKey): key is keyof T => key in obj
+
+export const schemeToTheme = (scheme: ColorScheme): AppThemeName => {
+    switch (scheme) {
+        case ColorScheme.Dark:
+            return 'dark'
+        case ColorScheme.Light:
+        default:
+            return 'light'
+    }
+}
+
+export const hexToRGBA = (hex: string, opacity: number) => hex
+    .replace('#', '')
+    .split(/(?=(?:..)*$)/)
+    .map(x => parseInt(x, 16))
+    .filter(num => !isNaN(num))
+    .reduce((acc, color) => `${acc}${color},`, 'rgba(')
+    .concat(`${opacity})`)
+
+export const isServer = () => typeof window === 'undefined'
+
+/**
+* Deeply merges properties of passed object
+*/
+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]
+
+            if (Object(sourceValue) == sourceValue && Object(targetValue) === targetValue) {
+                // @ts-expect-error - can't assign to generic
+                target[key] = deepMergeObjects(targetValue, sourceValue)
+
+                return
+            }
+
+            // @ts-expect-error - can't assign to generic
+            target[key] = sourceValue
+        })
+    })
+
+    return target
+}
+
+export const warn = (message: string) => console.warn(`🦄 [react-native-unistyles] ${message}`)
+
+export const equal = <T>(a: T, b: T) => {
+    if (Object.is(a, b)) {
+        return true
+    }
+
+    if (
+        typeof a !== 'object'
+        || a === null
+        || typeof b !== 'object'
+        || b === null
+    ) {
+        return false
+    }
+
+    const keysA = Object.keys(a) as Array<keyof T>
+
+    if (keysA.length !== Object.keys(b).length) {
+        return false
+    }
+
+    return keysA.every(key => Object.is(a[key], b[key]) && Object.prototype.hasOwnProperty.call(b, key))
+}

package/src/web/variants/getVariants.ts

@@ -0,0 +1,42 @@
+import type { ReactNativeStyleSheet, StyleSheet } from '../../types'
+import { deepMergeObjects } from '../utils'
+
+type StylesWithVariants = {
+    variants: Record<string, any>,
+    compoundVariants?: Array<Record<string, any> & {
+        styles: Record<string, any>
+    }>
+}
+const hasVariants = <T extends object>(value: [string, T]): value is [string, T & StylesWithVariants] => 'variants' in value[1]
+
+export const getVariants = (styles: ReactNativeStyleSheet<StyleSheet>, selectedVariants: Record<string, any>) => {
+    return Object.entries(styles)
+        .filter(hasVariants)
+        .filter(([_key, { variants }]) => Object.keys(variants).some(variant => variant in variants))
+        .map(([key, { variants, compoundVariants = [] }]) => {
+            const variantStyles = Object.entries(variants).flatMap(([variant, styles]) => {
+                const selectedVariant = selectedVariants[variant]
+                const selectedVariantStyles = styles[selectedVariant] ?? styles['default']
+
+                if (!selectedVariantStyles) {
+                    return []
+                }
+
+                return selectedVariantStyles
+            })
+
+            const compoundVariantStyles = compoundVariants.flatMap(compoundVariant => {
+                const { styles, ...conditions } = compoundVariant
+
+                if (Object.entries(conditions).some(([variant, value]) => String(selectedVariants[variant]) !== String(value))) {
+                    return []
+                }
+
+                return styles
+            })
+
+            const mergedVariantStyles = deepMergeObjects(...variantStyles, ...compoundVariantStyles)
+
+            return [key, mergedVariantStyles] as const
+        })
+}

package/src/web/variants/index.ts

@@ -0,0 +1,2 @@
+export * from './useVariants'
+export * from './getVariants'

package/src/web/variants/useVariants.ts

@@ -0,0 +1,79 @@
+import { useMemo, useRef, useState } from 'react'
+import type { TypeStyle } from 'typestyle'
+import type { ReactNativeStyleSheet, StyleSheet } from '../../types'
+import { equal, reduceObject } from '../utils'
+import { UnistylesRegistry } from '../registry'
+import { getVariants } from './getVariants'
+
+export const createUseVariants = (styles: ReactNativeStyleSheet<StyleSheet>, setSelectedVariants: (variants: Record<string, any>) => void) => {
+    const useVariants = (selectedVariants: Record<string, any>) => {
+        const [unistylesMap] = useState(() => new Map<string, TypeStyle>())
+        const [classNameMap] = useState(() => new Map<string, string>())
+        const [selectedVariantStylesMap] = useState(() => new Map<string, Record<string, any>>())
+        const lastSelectedVariantsRef = useRef<Record<string, any>>()
+        // Variable that determines if variants have changed and we need to recalculate styles
+        const variantsChanged = !equal(lastSelectedVariantsRef.current, selectedVariants)
+
+        if (variantsChanged) {
+            lastSelectedVariantsRef.current = selectedVariants
+            setSelectedVariants(selectedVariants)
+        }
+
+        const combinedVariantStyles = useMemo(() => {
+            const result = getVariants(styles, selectedVariants)
+
+            result.forEach(([key, value]) => {
+                selectedVariantStylesMap.set(key, value)
+            })
+
+            return result
+        }, [lastSelectedVariantsRef.current])
+
+        if (unistylesMap.size === 0 && combinedVariantStyles.length > 0) {
+            combinedVariantStyles.forEach(([key, value]) => {
+                const { className, unistyles } = UnistylesRegistry.createStyles(value, `variant-${key}`)
+
+                unistylesMap.set(key, unistyles)
+                classNameMap.set(key, className)
+            })
+        }
+
+        combinedVariantStyles.forEach(([key, value]) => {
+            const styleEntry = styles[key]
+            const unistyles = unistylesMap.get(key)
+            const className = classNameMap.get(key)
+            const selectedVariantStyles = selectedVariantStylesMap.get(key)
+
+            if (!unistyles || !className) {
+                return
+            }
+
+            if (variantsChanged) {
+                UnistylesRegistry.updateStyles(unistyles, value, className)
+            }
+
+            Object.defineProperties(styleEntry, reduceObject(selectedVariantStyles ?? {}, value => ({
+                value,
+                enumerable: false,
+                configurable: true
+            })))
+
+            if (styleEntry) {
+                Object.keys(styleEntry ?? {}).forEach(key => {
+                    if (!key.startsWith('variant-')) {
+                        return
+                    }
+
+                    // @ts-expect-error - remove old variants
+                    delete styleEntry[key]
+                })
+                // @ts-expect-error - apply variant className
+                styleEntry[className] = className
+            }
+        })
+    }
+
+    Object.defineProperty(styles, 'useVariants', {
+        value: useVariants
+    })
+}

package/android/src/main/java/com/unistyles/Models.kt

@@ -1,27 +0,0 @@
-package com.unistyles
-
-class Dimensions(
-    var width: Int,
-    var height: Int
-) {
-    override fun toString(): String {
-        return "${width}x${height}"
-    }
-}
-
-class Screen(
-    var width: Int,
-    var height: Int,
-    var pixelRatio: Float,
-    var fontScale: Float
-) {
-    override fun toString(): String {
-        return "${width}x${height} ${pixelRatio} ${fontScale}"
-    }
-}
-
-class Insets(var top: Int, var bottom: Int, var left: Int, var right: Int) {
-    override fun toString(): String {
-        return "T:${top}B:${bottom}L:${left}R:${right}"
-    }
-}