react-native-unistyles 3.0.0-alpha.8 → 3.0.0-beta.1

package/src/web/convert/textShadow.ts

@@ -1,69 +0,0 @@
-import { media } from 'typestyle'
-import type { NestedCSSProperties } from 'typestyle/lib/types'
-import { deepMergeObjects, warn } from '../utils'
-import { validateShadow } from './shadow'
-import { convertBreakpoint } from './breakpoint'
-import { TEXT_SHADOW_STYLES, type TextShadow } from './types'
-import { extractShadowValue, normalizeColor, normalizeNumericValue } from './utils'
-
-const createTextShadowValue = (style: TextShadow) => {
-    const { textShadowColor, textShadowOffset, textShadowRadius } = style
-    const offsetX = normalizeNumericValue(textShadowOffset.width)
-    const offsetY = normalizeNumericValue(textShadowOffset.height)
-    const radius = normalizeNumericValue(textShadowRadius)
-    const color = normalizeColor(textShadowColor as string)
-
-    return `${offsetX} ${offsetY} ${radius} ${color}`
-}
-
-export const getTextShadowStyle = (styles: Record<string, any>): NestedCSSProperties => {
-    const missingStyles = TEXT_SHADOW_STYLES.filter(key => !(key in styles))
-
-    if (missingStyles.length) {
-        warn(`can't apply text shadow as you miss these properties: ${missingStyles.join(', ')}`)
-
-        return {}
-    }
-
-    const breakpointsSet = new Set<string>()
-
-    try {
-        validateShadow(TEXT_SHADOW_STYLES, styles, breakpointsSet)
-    } catch (error) {
-        if (typeof error === 'string') {
-            warn(error)
-        }
-
-        return {}
-    }
-
-    const breakpoints = Array.from(breakpointsSet)
-
-    // If no breakpoints were used return styles without media queries
-    if (breakpoints.length === 0) {
-        return {
-            textShadow: createTextShadowValue(styles as TextShadow)
-        }
-    }
-
-    // Create textShadow for each breakpoint
-    const breakpointStyles = breakpoints.map(breakpoint => {
-        const color = extractShadowValue('textShadowColor', breakpoint, styles)
-        const { width, height } = extractShadowValue('textShadowOffset', breakpoint, styles)
-        const radius = extractShadowValue('textShadowRadius', breakpoint, styles)
-
-        return media(convertBreakpoint(breakpoint), {
-            textShadow: createTextShadowValue({
-                textShadowColor: color,
-                textShadowOffset: {
-                    width,
-                    height
-                },
-                textShadowRadius: radius
-            })
-        })
-    })
-
-    // Merge all breakpoints styles into one
-    return deepMergeObjects(...breakpointStyles)
-}

package/src/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/src/web/listener/index.ts

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

package/src/web/listener/listener.ts

@@ -1,33 +0,0 @@
-import { UnistyleDependency } from '../../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/src/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/src/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/src/web/utils.ts

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

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

package/src/web/variants/useVariants.ts

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