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

package/web/listener/index.ts

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

package/web/listener/listener.ts

@@ -0,0 +1,33 @@
+import { UnistyleDependency } from '../../src/specs/NativePlatform'
+import { UnistylesRuntime } from '../runtime'
+
+export class UnistylesListenerBuilder {
+    private isInitialized = false
+    private listeners = Array.from({ length: Object.keys(UnistyleDependency).length / 2 }, () => new Set<VoidFunction>())
+
+    emitChange = (dependency: UnistyleDependency) => {
+        this.listeners[dependency]?.forEach(listener => listener())
+    }
+
+    initListeners = () => {
+        if (this.isInitialized) {
+            return
+        }
+
+        this.isInitialized = true
+        UnistylesRuntime.darkMedia?.addEventListener('change', () => this.emitChange(UnistyleDependency.ColorScheme))
+        UnistylesRuntime.lightMedia?.addEventListener('change', () => this.emitChange(UnistyleDependency.ColorScheme))
+        window.addEventListener('orientationchange', () => this.emitChange(UnistyleDependency.Orientation))
+        window.addEventListener('resize', () => this.emitChange(UnistyleDependency.Dimensions))
+    }
+
+    addListeners = (dependencies: Array<UnistyleDependency>, listener: VoidFunction) => {
+        dependencies.forEach(dependency => this.listeners[dependency]?.add(listener))
+
+        return () => {
+            dependencies.forEach(dependency => this.listeners[dependency]?.delete(listener))
+        }
+    }
+}
+
+export const UnistylesListener = new UnistylesListenerBuilder()

package/web/mock.ts

@@ -0,0 +1,35 @@
+import type { UnistylesNavigationBar as NavigationBarSpec } from '../src/specs/NavigtionBar'
+import type { UnistylesStatusBar as StatusBarSpec } from '../src/specs/StatusBar'
+
+export const StatusBar: StatusBarSpec = {
+    width: 0,
+    height: 0,
+    setStyle: () => {},
+    setHidden: () => {},
+    setBackgroundColor: () => {},
+    equals: () => true,
+    toString: () => 'StatusBar',
+    __type: 'web',
+    name: 'StatusBar'
+}
+
+export const NavigationBar: NavigationBarSpec = {
+    width: 0,
+    height: 0,
+    setHidden: () => {},
+    setBackgroundColor: () => {},
+    equals: () => true,
+    toString: () => 'NavigationBar',
+    __type: 'web',
+    name: 'NavigationBar'
+}
+
+export const UnistylesShadowRegistry = {
+    name: 'UnistylesShadowRegistry',
+    __type: 'web',
+    equals: () => true,
+    toString: () => 'UnistylesShadowRegistry',
+    dispose: () => {},
+    add: () => {},
+    remove: () => {},
+}

package/web/mq.ts

@@ -0,0 +1,19 @@
+import type { MediaQuery } from 'typestyle/lib/types'
+
+const IS_UNISTYLES_REGEX = /:([hw])\[(\d+)(?:,\s*(\d+|Infinity))?]/
+const UNISTYLES_WIDTH_REGEX = /:(w)\[(\d+)(?:,\s*(\d+|Infinity))?]/
+const UNISTYLES_HEIGHT_REGEX = /:(h)\[(\d+)(?:,\s*(\d+|Infinity))?]/
+
+export const parseMq = (mq: string): MediaQuery => {
+    const [, width, fromW, toW] = UNISTYLES_WIDTH_REGEX.exec(mq) || []
+    const [, height, fromH, toH] = UNISTYLES_HEIGHT_REGEX.exec(mq) || []
+
+    return {
+        minWidth: !width || fromW === 'Infinity' ? undefined : Number(fromW),
+        maxWidth: !width || toW === 'Infinity' ? undefined : Number(toW),
+        minHeight: !height || fromH === 'Infinity' ? undefined : Number(fromH),
+        maxHeight: !height || toH === 'Infinity' ? undefined : Number(toH),
+    }
+}
+
+export const isUnistylesMq = (mq: string) => IS_UNISTYLES_REGEX.test(mq)

package/web/pseudo.ts

@@ -0,0 +1,11 @@
+// TODO: Add complete list of pseudo selectors
+export const pseudos = [
+    '_hover',
+    '_css',
+    '_before',
+    '_after'
+] as const
+
+export const isPseudo = (selector: string) => pseudos.includes(selector as Pseudo)
+
+export type Pseudo = typeof pseudos[number]

package/web/registry.ts

@@ -0,0 +1,41 @@
+import { createTypeStyle, TypeStyle } from 'typestyle'
+import type { UnistylesValues } from '../src/types'
+import { convertToTypeStyle } from './convert'
+import { UnistylesState } from './state'
+
+class UnistylesRegistryBuilder {
+    createStyles = (stylesheet: UnistylesValues, key: string | number) => {
+        const stylesTag = UnistylesState.createTag()
+        const unistyles = createTypeStyle(stylesTag)
+        const typestyleStylesheet = convertToTypeStyle(stylesheet)
+
+        const className = unistyles.style({
+            $debugName: String(key),
+        }, typestyleStylesheet)
+
+        if (stylesheet._web?._css) {
+            const customClassName = Array.isArray(stylesheet._web._css)
+                ? stylesheet._web._css.join(' ')
+                : stylesheet._web._css
+
+            return {
+                className: `${className} ${customClassName}`,
+                unistyles
+            }
+        }
+
+        return {
+            className,
+            unistyles
+        }
+    }
+
+    updateStyles = (unistyles: TypeStyle, stylesheet: UnistylesValues, className: string) => {
+        const typestyleStylesheet = convertToTypeStyle(stylesheet)
+
+        unistyles.reinit()
+        unistyles.cssRule(`.${className}`, typestyleStylesheet)
+    }
+}
+
+export const UnistylesRegistry = new UnistylesRegistryBuilder()

package/web/runtime.ts

@@ -0,0 +1,198 @@
+import { UnistyleDependency } from '../src/specs/NativePlatform'
+import { ColorScheme, Orientation, type AppTheme, type AppThemeName } from '../src/specs/types'
+import type { UnistylesMiniRuntime } from '../src/specs/UnistylesRuntime'
+import { WebContentSizeCategory } from '../src/types'
+import { UnistylesListener } from './listener'
+import { NavigationBar, StatusBar } from './mock'
+import { UnistylesState } from './state'
+import { hexToRGBA, isServer, schemeToTheme } from './utils'
+
+class UnistylesRuntimeBuilder {
+    lightMedia = this.getLightMedia()
+    darkMedia = this.getDarkMedia()
+
+    private getLightMedia(): MediaQueryList | null {
+        if (isServer()) {
+            return null
+        }
+
+        if (!this.lightMedia) {
+            this.lightMedia = window.matchMedia('(prefers-color-scheme: light)')
+        }
+
+        return this.lightMedia
+    }
+
+    private getDarkMedia(): MediaQueryList | null {
+        if (isServer()) {
+            return null
+        }
+
+        if (!this.darkMedia) {
+            this.darkMedia = window.matchMedia('(prefers-color-scheme: dark)')
+        }
+
+        return this.darkMedia
+    }
+
+    get colorScheme() {
+        switch (true) {
+            case this.getLightMedia()?.matches:
+                return ColorScheme.Light
+            case this.getDarkMedia()?.matches:
+                return ColorScheme.Dark
+            default:
+                return ColorScheme.Unspecified
+        }
+    }
+
+    get themeName() {
+        return UnistylesState.themeName
+    }
+
+    get contentSizeCategory() {
+        return WebContentSizeCategory.Unspecified
+    }
+
+    get breakpoint() {
+        return UnistylesState.breakpoint
+    }
+
+    get orientation() {
+        if (isServer()) {
+            return Orientation.Portrait
+        }
+
+        return screen.orientation.type.includes('portrait') ? Orientation.Portrait : Orientation.Landscape
+    }
+
+    get theme() {
+        if (!this.themeName) {
+            throw new Error('🦄 No theme selected!')
+        }
+
+        const theme = UnistylesState.themes.get(this.themeName)
+
+        if (!theme) {
+            throw new Error(`🦄 Theme "${this.themeName}" is not registered!`)
+        }
+
+        return theme
+    }
+
+    get pixelRatio() {
+        return isServer() ? 1 : window.devicePixelRatio
+    }
+
+    get screen() {
+        if (isServer()) {
+            return {
+                width: 0,
+                height: 0
+            }
+        }
+
+        return {
+            width: window.innerWidth,
+            height: window.innerHeight
+        }
+    }
+
+    get fontScale() {
+        return 1
+    }
+
+    get insets() {
+        return {
+            top: 0,
+            bottom: 0,
+            left: 0,
+            right: 0,
+            ime: 0
+        }
+    }
+
+    get statusBar() {
+        return StatusBar
+    }
+
+    get rtl() {
+        return isServer() ? true : document.documentElement.dir === 'rtl'
+    }
+
+    get hasAdaptiveThemes() {
+        return UnistylesState.hasAdaptiveThemes
+    }
+
+    get navigationBar() {
+        return NavigationBar
+    }
+
+    get miniRuntime(): UnistylesMiniRuntime {
+        return {
+            colorScheme: this.colorScheme,
+            themeName: this.themeName,
+            contentSizeCategory: this.contentSizeCategory,
+            breakpoint: this.breakpoint,
+            orientation: this.orientation,
+            pixelRatio: this.pixelRatio,
+            screen: this.screen,
+            fontScale: this.fontScale,
+            insets: this.insets,
+            statusBar: {
+                width: this.statusBar.width,
+                height: this.statusBar.height
+            },
+            navigationBar: {
+                width: this.navigationBar.width,
+                height: this.navigationBar.height,
+            },
+            rtl: this.rtl,
+            hasAdaptiveThemes: this.hasAdaptiveThemes
+        }
+    }
+
+    setTheme = (themeName: AppThemeName) => {
+        if (themeName === UnistylesRuntime.themeName) {
+            return
+        }
+
+        UnistylesState.themeName = themeName
+        UnistylesListener.emitChange(UnistyleDependency.Theme)
+        UnistylesListener.emitChange(UnistyleDependency.ThemeName)
+    }
+
+    setAdaptiveThemes = (isEnabled: boolean) => {
+        UnistylesState.hasAdaptiveThemes = isEnabled
+
+        if (!isEnabled) {
+            return
+        }
+
+        this.setTheme(schemeToTheme(UnistylesRuntime.colorScheme))
+    }
+
+    setRootViewBackgroundColor = (hex: string, alpha?: number) => {
+        if (isServer()) {
+            return
+        }
+
+        document.documentElement.style.backgroundColor = alpha ? hexToRGBA(hex, alpha) : hex
+    }
+
+    setImmersiveMode = () => {}
+
+    updateTheme = (themeName: AppThemeName, updater: (currentTheme: AppTheme) => AppTheme) => {
+        const oldTheme = UnistylesState.themes.get(themeName)
+
+        if (!oldTheme) {
+            throw new Error(`🦄 Theme "${themeName}" is not registered!`)
+        }
+
+        UnistylesState.themes.set(themeName, updater(oldTheme))
+    }
+
+    getSSRUnistyles = () => UnistylesState.tags
+}
+
+export const UnistylesRuntime = new UnistylesRuntimeBuilder()

package/web/state.ts

@@ -0,0 +1,148 @@
+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

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

package/web/utils.ts

@@ -0,0 +1,95 @@
+import { ColorScheme, type AppThemeName} from '../src/specs/types'
+import type { UnistylesValues } from '../src/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, values: UnistylesValues) => {
+    const returnValue = {
+        $$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))
+}