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

package/src/web/convert/transform.ts

@@ -0,0 +1,89 @@
+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/convert/types.ts

@@ -0,0 +1,16 @@
+import type { TextStyle, ViewStyle } from 'react-native'
+import type { ToDeepUnistyles } from '../../types/stylesheet'
+
+export type ShadowOffset = ToDeepUnistyles<{ width: number, height: number }>
+
+export const TEXT_SHADOW_STYLES = ['textShadowColor', 'textShadowOffset', 'textShadowRadius'] as const
+
+export type TextShadow = Required<Pick<TextStyle, typeof TEXT_SHADOW_STYLES[number]>>
+
+export const BOX_SHADOW_STYLES = ['shadowColor', 'shadowRadius', 'shadowOpacity', 'shadowOffset'] as const
+
+export type BoxShadow = Required<Pick<ViewStyle, typeof BOX_SHADOW_STYLES[number]>>
+
+export type AllShadow = TextShadow & BoxShadow
+
+export type AllShadowKeys = keyof AllShadow

package/src/web/convert/utils.ts

@@ -0,0 +1,54 @@
+// based on react-native-web normalizer
+// https://github.com/necolas/react-native-web
+import normalizeColors from '@react-native/normalize-colors'
+import { BOX_SHADOW_STYLES, TEXT_SHADOW_STYLES, type AllShadow, type AllShadowKeys } from './types'
+
+export const isTransform = (key: string, value: any): value is Array<Record<string, any>> => key === 'transform' && Array.isArray(value)
+
+export const isTextShadow = (key: string) => TEXT_SHADOW_STYLES.includes(key as typeof TEXT_SHADOW_STYLES[number])
+
+export const isBoxShadow = (key: string) => BOX_SHADOW_STYLES.includes(key as typeof BOX_SHADOW_STYLES[number])
+
+export const normalizeNumericValue = (value: number) => value ? `${value}px` : value
+
+export const normalizeColor = (color: string, opacity: number = 1) => {
+    // If the opacity is 1 there's no need to normalize the color
+    if (opacity === 1) {
+        return color
+    }
+
+    const integer = normalizeColors(color)
+
+    // If the color is an unknown format, the return value is null
+    if (integer === null) {
+        return color
+    }
+
+    const hex = integer.toString(16).padStart(8, '0')
+
+    if (hex.length === 8) {
+        const [r = 0, g = 0, b = 0, a = 1] = hex
+            .split(/(?=(?:..)*$)/)
+            .map(x => parseInt(x, 16))
+            .filter(num => !isNaN(num))
+
+        return `rgba(${r},${g},${b},${(a / 255) * opacity})`
+    }
+
+    return color
+}
+
+export const extractShadowValue = <TKey extends AllShadowKeys>(key: TKey, breakpoint: string, styles: any): AllShadow[TKey] => {
+    const value = styles[key]
+
+    if (key === 'textShadowOffset' || key === 'shadowOffset') {
+        const { width, height } = value
+
+        return {
+            width: typeof width === 'object' ? width[breakpoint] : width,
+            height: typeof height === 'object' ? height[breakpoint] : height
+        } as AllShadow[TKey]
+    }
+
+    return typeof value === 'object' ? value[breakpoint] : value
+}

package/src/web/create.ts

@@ -0,0 +1,105 @@
+import type { TypeStyle } from 'typestyle'
+import type { ReactNativeStyleSheet } from '../types'
+import type { StyleSheetWithSuperPowers, StyleSheet } from '../types/stylesheet'
+import { UnistylesRegistry } from './registry'
+import { keyInObject, reduceObject, toReactNativeClassName } from './utils'
+import { UnistylesRuntime } from './runtime'
+import { createUseVariants, getVariants } from './variants'
+import { UnistylesListener } from './listener'
+import type { UnistyleDependency } from '../specs/NativePlatform'
+
+type ListenToDependenciesProps = {
+    value: StyleSheet[keyof StyleSheet],
+    key: PropertyKey,
+    unistyles: TypeStyle,
+    className: string,
+    args?: Array<any>
+}
+
+type WebUnistyle = ReturnType<typeof UnistylesRegistry.createStyles>
+
+export const create = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>) => {
+    const computedStylesheet = typeof stylesheet === 'function'
+        ? stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
+        : stylesheet
+    let lastlySelectedVariants: Record<string, any> = {}
+
+    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 webUnistyleByRef = new Map<HTMLElement, WebUnistyle>()
+            const disposeByRef = new Map<HTMLElement, VoidFunction | undefined>()
+
+            return (...args: Array<any>) => {
+                const [ref] = args.slice(-1)
+                const result = value(...args)
+                const variants = Object.fromEntries(getVariants({ [key]: result } as ReactNativeStyleSheet<StyleSheet>, lastlySelectedVariants))
+                const resultWithVariants = {
+                    ...result,
+                    ...variants[key]
+                }
+
+                if (ref instanceof HTMLElement) {
+                    const storedWebUnistyle = webUnistyleByRef.get(ref)
+                    const webUnistyle = storedWebUnistyle ?? UnistylesRegistry.createStyles(resultWithVariants, key)
+
+                    webUnistyleByRef.set(ref, webUnistyle)
+                    disposeByRef.get(ref)?.()
+                    disposeByRef.set(ref, listenToDependencies({
+                        key,
+                        value,
+                        unistyles: webUnistyle.unistyles,
+                        className: webUnistyle.className,
+                        args
+                    }))
+                    ref.classList.add(webUnistyle.className)
+
+                    if (storedWebUnistyle) {
+                        UnistylesRegistry.updateStyles(webUnistyle.unistyles, resultWithVariants, webUnistyle.className)
+                    }
+
+
+                    return
+                }
+
+                return toReactNativeClassName(null, resultWithVariants)
+            }
+        }
+
+        const { className, unistyles } = UnistylesRegistry.createStyles(value, key)
+
+        listenToDependencies({ key, value, unistyles, className })
+
+        return toReactNativeClassName(className, value)
+    }) as ReactNativeStyleSheet<StyleSheet>
+
+    createUseVariants(styles, newVariants => {
+        lastlySelectedVariants = newVariants
+    })
+
+    return styles
+}

package/src/web/index.ts

@@ -0,0 +1,24 @@
+import { create } from './create'
+import { UnistylesRuntime } from './runtime'
+import { UnistylesState } from './state'
+import { deepMergeObjects } from './utils'
+
+export const StyleSheet = {
+    configure: UnistylesState.init,
+    create,
+    absoluteFill: {
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        right: 0,
+        bottom: 0,
+    },
+    compose: (a: object, b: object) => deepMergeObjects(a, b),
+    flatten: (...styles: Array<object>) => deepMergeObjects(...styles),
+    hairlineWidth: 1
+}
+
+export { UnistylesRuntime } from './runtime'
+export * from './mock'
+
+export const getSSRUnistyles = () => UnistylesRuntime.getSSRUnistyles()

package/src/web/listener/index.ts

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

package/src/web/listener/listener.ts

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

@@ -0,0 +1,35 @@
+import type { UnistylesNavigationBar as NavigationBarSpec } from '../specs/NavigtionBar'
+import type { UnistylesStatusBar as StatusBarSpec } from '../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/src/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/src/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/src/web/registry.ts

@@ -0,0 +1,41 @@
+import { createTypeStyle, TypeStyle } from 'typestyle'
+import type { UnistylesValues } from '../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/src/web/runtime.ts

@@ -0,0 +1,198 @@
+import { UnistyleDependency } from '../specs/NativePlatform'
+import { ColorScheme, Orientation, type AppTheme, type AppThemeName } from '../specs/types'
+import type { UnistylesMiniRuntime } from '../specs/UnistylesRuntime'
+import { WebContentSizeCategory } from '../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()