react-native-unistyles 3.0.0-alpha.3 → 3.0.0-alpha.31

package/web/state.ts

@@ -1,148 +0,0 @@
-import { type ReactElement, createElement, createRef } from 'react'
-import type { UnistylesTheme } from '../src/types'
-import type { UnistylesConfig } from '../src/specs/StyleSheet'
-import type { AppBreakpoint, AppThemeName } from '../src/specs/types'
-import type { UnistylesBreakpoints, UnistylesThemes } from '../src/global'
-import { UnistylesRuntime } from './runtime'
-import { isServer, schemeToTheme } from './utils'
-import { UnistylesListener } from './listener'
-import { UnistyleDependency } from '../src/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/web/useVariants.ts

@@ -1,99 +0,0 @@
-import { useMemo, useRef, useState } from 'react'
-import type { TypeStyle } from 'typestyle'
-import type { ReactNativeStyleSheet, StyleSheet } from '../src/types'
-import { deepMergeObjects, equal, reduceObject } from './utils'
-import { UnistylesRegistry } from './registry'
-
-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 createUseVariants = (styles: ReactNativeStyleSheet<StyleSheet>) => {
-    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
-        }
-
-        const combinedVariantStyles = useMemo(() => {
-            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)
-
-                    selectedVariantStylesMap.set(key, mergedVariantStyles)
-
-                    return [key, mergedVariantStyles] as const
-                })
-        }, [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
-            })))
-            // @ts-expect-error - apply variant className
-            styleEntry[className] = className
-        })
-    }
-
-    Object.defineProperty(styles, 'useVariants', {
-        value: useVariants
-    })
-}