react-native-unistyles 3.0.0-alpha.4 → 3.0.0-alpha.41

package/web/convert/transform.ts

@@ -1,89 +0,0 @@
-import { media } from 'typestyle'
-import type { NestedCSSProperties } from 'typestyle/lib/types'
-import { deepMergeObjects, keyInObject } from '../utils'
-import { normalizeNumericValue } from './utils'
-import { convertBreakpoint } from './breakpoint'
-
-type Transforms = Array<Record<string, any>>
-
-const normalizeTransform = (key: string, value: any) => {
-    if (key.includes('scale')) {
-        return value
-    }
-
-    if (typeof value === 'number') {
-        return normalizeNumericValue(value)
-    }
-
-    return value
-}
-
-const createTransformValue = (transforms: Transforms) => transforms
-    .map(transform => {
-        const [key] = Object.keys(transform)
-
-        if (!key) {
-            return undefined
-        }
-
-        const value = transform[key]
-
-        switch(key) {
-            case 'matrix':
-            case 'matrix3d':
-                return `${key}(${(value as Array<number>).join(',')})`
-            default:
-                return `${key}(${normalizeTransform(key, value)})`
-        }
-    })
-    .filter(Boolean)
-    .join(' ')
-
-export const getTransformStyle = (transforms: Transforms): NestedCSSProperties => {
-    const breakpoints = new Set<string>()
-    const normalTransforms: Transforms = []
-
-    transforms.forEach(transform => {
-        const [property] = Object.keys(transform)
-
-        if (!property) {
-            return
-        }
-
-        const value = transform[property]
-
-        if (typeof value === 'object' && !Array.isArray(value)) {
-            Object.keys(value).forEach(breakpoint => breakpoints.add(breakpoint))
-
-            return
-        }
-
-        normalTransforms.push(transform)
-    })
-
-    const breakpointTransforms = Array.from(breakpoints).flatMap(breakpoint => {
-        const transformsPerBreakpoint = transforms.flatMap(transform => {
-            const [property] = Object.keys(transform)
-
-            if (!property) {
-                return []
-            }
-
-            const value = transform[property]
-
-            if (typeof value === 'object' && !Array.isArray(value)) {
-                return keyInObject(value, breakpoint) ? [{ [property]: value[breakpoint] }] : []
-            }
-
-            return []
-        })
-
-        return media(convertBreakpoint(breakpoint), {
-            transform: createTransformValue(transformsPerBreakpoint)
-        })
-    })
-
-    return deepMergeObjects({
-        transform: createTransformValue(normalTransforms)
-    }, ...breakpointTransforms)
-}

package/web/create.ts

@@ -1,102 +0,0 @@
-import type { TypeStyle } from 'typestyle'
-import type { ReactNativeStyleSheet } from '../src/types'
-import type { StyleSheetWithSuperPowers, StyleSheet } from '../src/types/stylesheet'
-import { UnistylesRegistry } from './registry'
-import { keyInObject, reduceObject, toReactNativeClassName } from './utils'
-import { UnistylesRuntime } from './runtime'
-import { createUseVariants } from './useVariants'
-import { UnistylesListener } from './listener'
-import type { UnistyleDependency } from '../src/specs/NativePlatform'
-
-type ListenToDependenciesProps = {
-    value: StyleSheet[keyof StyleSheet],
-    key: PropertyKey,
-    unistyles: TypeStyle,
-    className: string,
-    args?: Array<any>
-}
-
-export const create = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>) => {
-    const computedStylesheet = typeof stylesheet === 'function'
-        ? stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
-        : stylesheet
-
-    const listenToDependencies = ({ key, className, unistyles, value, args = [] } : ListenToDependenciesProps) => {
-        const dependencies = ('uni__dependencies' in value ? value['uni__dependencies'] : []) as Array<UnistyleDependency>
-
-        if (dependencies.length === 0) {
-            return
-        }
-
-        return UnistylesListener.addListeners(dependencies, () => {
-            const newComputedStylesheet = typeof stylesheet === 'function'
-                ? stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
-                : stylesheet
-
-            if (!keyInObject(newComputedStylesheet, key)) {
-                return
-            }
-
-            const value = newComputedStylesheet[key]!
-            const result = typeof value === 'function'
-                ? value(...args)
-                : value
-
-            UnistylesRegistry.updateStyles(unistyles, result, className)
-        })
-    }
-
-    const styles = reduceObject(computedStylesheet, (value, key) => {
-        if (typeof value === 'function') {
-            const classNameMap = new Map<number, string>()
-            const unistylesMap = new Map<number, TypeStyle>()
-            const disposeMap = new Map<number, VoidFunction | undefined>()
-
-            return (...args: Array<any>) => {
-                const [id] = args.slice(-1)
-                const result = value(...args.slice(0, -1))
-                const dispose = disposeMap.get(id)
-                const unistyles = unistylesMap.get(id)
-                const className = classNameMap.get(id)
-
-                if (unistyles && className && dispose) {
-                    dispose()
-                    UnistylesRegistry.updateStyles(unistyles, result, className)
-                    disposeMap.set(id, listenToDependencies({
-                        key,
-                        value,
-                        unistyles,
-                        className,
-                        args
-                    }))
-
-                    return toReactNativeClassName(className, result)
-                }
-
-                const entry = UnistylesRegistry.createStyles(result, key)
-
-                classNameMap.set(id, entry.className)
-                unistylesMap.set(id, entry.unistyles)
-                disposeMap.set(id, listenToDependencies({
-                    key,
-                    value,
-                    unistyles: entry.unistyles,
-                    className: entry.className,
-                    args
-                }))
-
-                return toReactNativeClassName(entry.className, result)
-            }
-        }
-
-        const { className, unistyles } = UnistylesRegistry.createStyles(value, key)
-
-        listenToDependencies({ key, value, unistyles, className })
-
-        return toReactNativeClassName(className, value)
-    }) as ReactNativeStyleSheet<StyleSheet>
-
-    createUseVariants(styles)
-
-    return styles
-}

package/web/listener/index.ts

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

package/web/listener/listener.ts

@@ -1,33 +0,0 @@
-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/mq.ts

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

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

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

package/web/utils.ts

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