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

package/src/core/UnistylesModule.ts

@@ -1,305 +0,0 @@
-import { NativeEventEmitter, NativeModules } from 'react-native'
-import type { UnistylesThemes, UnistylesBreakpoints } from 'react-native-unistyles'
-import type { ColorSchemeName, ScreenInsets, StatusBar, NavigationBar, Color } from '../types'
-import { normalizeWebStylesPlugin } from '../plugins'
-import { isServer } from '../common'
-
-export class UnistylesBridgeWeb {
-    #timerRef?: ReturnType<typeof setTimeout> = undefined
-    #windowResizeDebounceTimeMs: number = 100
-    #hasAdaptiveThemes: boolean = false
-    #supportsAutomaticColorScheme = false
-    #screenWidth = isServer ? undefined : window.innerWidth
-    #screenHeight = isServer ? undefined : window.innerHeight
-    #themes: Array<keyof UnistylesThemes> = []
-    #breakpoints: UnistylesBreakpoints = {} as UnistylesBreakpoints
-    #colorScheme: ColorSchemeName = this.getPreferredColorScheme()
-    #themeName: keyof UnistylesThemes = '' as keyof UnistylesThemes
-    #enabledPlugins: Array<string> = [normalizeWebStylesPlugin.name]
-    #unistylesEvents = new NativeEventEmitter(NativeModules.Unistyles)
-    #sortedBreakpointPairs: Array<[keyof UnistylesBreakpoints, number]> = []
-    #breakpoint: keyof UnistylesBreakpoints = '' as keyof UnistylesBreakpoints
-    #contentSizeCategory: string = 'unspecified'
-    #insets: ScreenInsets = {
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0
-    }
-    #statusBar: StatusBar = {
-        height: 0,
-        width: 0,
-        setColor: () => {},
-        setHidden: () => {}
-    }
-    #navigationBar: NavigationBar = {
-        height: 0,
-        width: 0,
-        setColor: () => {},
-        setHidden: () => {}
-    }
-    #pixelRatio = 1.0
-    #fontScale = 1.0
-    #hairlineWidth = 1
-    #rtl = false
-
-    constructor() {
-        if (!isServer) {
-            this.setupListeners()
-            this.#screenWidth = window.innerWidth
-            this.#screenHeight = window.innerHeight
-            this.#rtl = document.documentElement.dir === 'rtl'
-        }
-    }
-
-    public install() {
-        // @ts-ignore
-        // eslint-disable-next-line no-undef
-        globalThis.__UNISTYLES__ = new Proxy({}, {
-            get: (_target, prop) => {
-                switch (prop) {
-                    case 'themeName':
-                        return this.getTheme()
-                    case 'screenWidth':
-                        return this.#screenWidth
-                    case 'screenHeight':
-                        return this.#screenHeight
-                    case 'contentSizeCategory':
-                        return this.#contentSizeCategory
-                    case 'breakpoint':
-                        return this.#breakpoint || undefined
-                    case 'breakpoints':
-                        return this.#breakpoints
-                    case 'hasAdaptiveThemes':
-                        return this.#hasAdaptiveThemes
-                    case 'sortedBreakpointPairs':
-                        return this.#sortedBreakpointPairs
-                    case 'enabledPlugins':
-                        return this.#enabledPlugins
-                    case 'colorScheme':
-                        return this.#colorScheme
-                    case 'insets':
-                        return this.#insets
-                    case 'statusBar':
-                        return this.#statusBar
-                    case 'navigationBar':
-                        return this.#navigationBar
-                    case 'pixelRatio':
-                        return this.#pixelRatio
-                    case 'fontScale':
-                        return this.#fontScale
-                    case 'hairlineWidth':
-                        return this.#hairlineWidth
-                    case 'rtl':
-                        return this.#rtl
-                    case 'useTheme':
-                        return (themeName: keyof UnistylesThemes) => this.useTheme(themeName)
-                    case 'updateTheme':
-                        return (themeName: keyof UnistylesThemes) => this.updateTheme(themeName)
-                    case 'useBreakpoints':
-                        return (breakpoints: UnistylesBreakpoints) => this.useBreakpoints(breakpoints)
-                    case 'useAdaptiveThemes':
-                        return (enable: boolean) => this.useAdaptiveThemes(enable)
-                    case 'addPlugin':
-                        return (pluginName: string, notify: boolean) => this.addPlugin(pluginName, notify)
-                    case 'removePlugin':
-                        return (pluginName: string) => this.removePlugin(pluginName)
-                    case 'setRootViewBackgroundColor':
-                        return (color: Color | string) => this.setRootViewBackgroundColor(color)
-                    case 'setImmersiveMode':
-                        return () => {}
-                    case 'setWindowResizeDebounceTimeMs':
-                        return (timeMs: number) => {
-                            if (timeMs >= 0) {
-                                this.#windowResizeDebounceTimeMs = timeMs
-                            }
-                        }
-                    default:
-                        return Reflect.get(this, prop)
-                }
-            },
-            set: (target, prop, newValue, receiver) => {
-                switch (prop) {
-                    case 'themes': {
-                        this.#themes = newValue
-                        this.#supportsAutomaticColorScheme = newValue.includes('light') && newValue.includes('dark')
-
-                        return true
-                    }
-                    case 'themeName': {
-                        this.#themeName = newValue as keyof UnistylesThemes
-                        this.emitThemeChange()
-
-                        return true
-                    }
-                    default:
-                        return Reflect.set(target, prop, newValue, receiver)
-                }
-            }
-        })
-
-        return true
-    }
-
-    private useTheme(themeName: keyof UnistylesThemes) {
-        this.#themeName = themeName
-        this.emitThemeChange()
-    }
-
-    private updateTheme(themeName: keyof UnistylesThemes) {
-        if (!this.#themeName) {
-            this.#themeName = this.getTheme()
-        }
-
-        if (this.#themeName === themeName) {
-            this.emitThemeChange()
-        }
-    }
-
-    private useBreakpoints(breakpoints: UnistylesBreakpoints) {
-        this.#breakpoints = breakpoints
-        this.#sortedBreakpointPairs = Object
-            .entries(breakpoints)
-            .sort(([, a], [, b]) => (a ?? 0) - (b ?? 0)) as Array<[keyof UnistylesBreakpoints, number]>
-
-        if (!isServer) {
-            this.#breakpoint = this.getBreakpointFromScreenWidth(this.#screenWidth as number)
-        }
-    }
-
-    private useAdaptiveThemes(enable: boolean) {
-        this.#hasAdaptiveThemes = enable
-
-        if (!this.#hasAdaptiveThemes || !this.#supportsAutomaticColorScheme) {
-            return
-        }
-
-        if (this.#themeName !== this.#colorScheme) {
-            this.#themeName = this.#colorScheme as keyof UnistylesThemes
-            this.emitThemeChange()
-        }
-    }
-
-    private addPlugin(pluginName: string, notify: boolean) {
-        this.#enabledPlugins = [pluginName].concat(this.#enabledPlugins)
-
-        if (notify) {
-            this.emitPluginChange()
-        }
-    }
-
-    private removePlugin(pluginName: string) {
-        this.#enabledPlugins = this.#enabledPlugins.filter(name => name !== pluginName)
-        this.emitPluginChange()
-    }
-
-    private getTheme(): keyof UnistylesThemes {
-        if (this.#themes.length === 1) {
-            return this.#themes.at(0) as keyof UnistylesThemes
-        }
-
-        return this.#themeName
-    }
-
-    private setupListeners() {
-        const onResize = () => {
-            this.#screenWidth = window.innerWidth
-            this.#screenHeight = window.innerHeight
-            this.#breakpoint = this.getBreakpointFromScreenWidth(this.#screenWidth)
-
-            this.emitLayoutChange()
-        }
-
-        window.addEventListener('resize', () => {
-            if (this.#windowResizeDebounceTimeMs === 0) {
-                return onResize()
-            }
-
-            clearTimeout(this.#timerRef)
-            this.#timerRef = setTimeout(onResize, this.#windowResizeDebounceTimeMs)
-        })
-
-        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
-            this.#colorScheme = event.matches
-                ? 'dark'
-                : 'light'
-
-            if (!this.#supportsAutomaticColorScheme || !this.#hasAdaptiveThemes) {
-                return
-            }
-
-            if (this.#colorScheme !== this.#themeName) {
-                this.#themeName = this.#colorScheme as keyof UnistylesThemes
-                this.emitThemeChange()
-            }
-        })
-
-        new MutationObserver(() => {
-            this.#rtl = document.documentElement.dir === 'rtl'
-        }).observe(document.documentElement, {
-            attributes: true,
-            attributeFilter: ['dir']
-        })
-    }
-
-    private getBreakpointFromScreenWidth(width: number): keyof UnistylesBreakpoints {
-        const breakpoint = this.#sortedBreakpointPairs
-            .find(([, value], index, otherBreakpoints) => {
-                const minVal = value
-                const maxVal = otherBreakpoints[index + 1]?.[1]
-
-                if (!maxVal) {
-                    return true
-                }
-
-                return width >= minVal && width < maxVal
-            })
-
-        return breakpoint?.at(0) as keyof UnistylesBreakpoints
-    }
-
-    private getPreferredColorScheme() {
-        if (!isServer && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-            return 'dark'
-        }
-
-        return 'light'
-    }
-
-    private setRootViewBackgroundColor(color?: Color | string) {
-        document.body.style.backgroundColor = color as string
-    }
-
-    private emitPluginChange() {
-        this.#unistylesEvents.emit('__unistylesOnChange', {
-            type: 'plugin'
-        })
-    }
-
-    private emitThemeChange() {
-        this.#unistylesEvents.emit('__unistylesOnChange', {
-            type: 'theme',
-            payload: {
-                themeName: this.#themeName
-            }
-        })
-    }
-
-    private emitLayoutChange() {
-        this.#unistylesEvents.emit('__unistylesOnChange', {
-            type: 'layout',
-            payload: {
-                breakpoint: this.#breakpoint,
-                orientation: (this.#screenWidth as number) > (this.#screenHeight as number)
-                    ? 'landscape'
-                    : 'portrait',
-                screen: {
-                    width: this.#screenWidth,
-                    height: this.#screenHeight
-                }
-            }
-        })
-    }
-}
-
-export const UnistylesModule = new UnistylesBridgeWeb()

package/src/core/UnistylesModule.windows.ts

@@ -1,9 +0,0 @@
-import { NativeModules, TurboModuleRegistry } from 'react-native'
-
-type UnistylesNativeModule = {
-    install(): boolean
-}
-
-// while debugging modules will default to NativeModules
-// without debugging/in release mode module will be available in TurboModules
-export const UnistylesModule = (TurboModuleRegistry.getEnforcing('Unistyles') ?? NativeModules?.Unistyles) as UnistylesNativeModule

package/src/core/UnistylesRuntime.ts

@@ -1,284 +0,0 @@
-import { ScreenOrientation, UnistylesError } from '../common'
-import type { Color, UnistylesBridge, UnistylesPlugin } from '../types'
-import type { UnistylesThemes } from '../global'
-import type { UnistyleRegistry } from './UnistyleRegistry'
-import { parseColor } from '../utils/parseColor'
-
-/**
- * Utility to interact with the Unistyles during runtime
- */
-export class UnistylesRuntime {
-    constructor(private unistylesBridge: UnistylesBridge, private unistylesRegistry: UnistyleRegistry) {}
-
-    /**
-     * Get the mini runtime injected to creteStyleSheet
-     * @returns - The mini runtime
-     */
-    public get miniRuntime() {
-        return {
-            contentSizeCategory: this.contentSizeCategory,
-            breakpoint: this.breakpoint,
-            screen: this.screen,
-            insets: this.insets,
-            statusBar: {
-                width: this.statusBar.width,
-                height: this.statusBar.height
-            },
-            navigationBar: {
-                width: this.navigationBar.width,
-                height: this.navigationBar.height
-            },
-            orientation: this.orientation,
-            pixelRatio: this.pixelRatio,
-            fontScale: this.fontScale,
-            hairlineWidth: this.hairlineWidth,
-            rtl: this.rtl
-        }
-    }
-
-    /**
-     * Get the current color scheme
-     * @returns - The current color scheme
-     */
-    public get colorScheme() {
-        return this.unistylesBridge.colorScheme
-    }
-
-    /**
-     * Get the layout direction
-     * @returns - Boolean indicating if the layout direction is RTL
-     */
-    public get rtl() {
-        return this.unistylesBridge.rtl
-    }
-
-    /**
-     * Get info about adaptive themes
-     * @returns - boolean indicating if the adaptive themes are enabled
-     */
-    public get hasAdaptiveThemes() {
-        return this.unistylesBridge.hasAdaptiveThemes
-    }
-
-    /**
-     * Get the current theme name
-     * @returns - The current theme name
-     */
-    public get themeName() {
-        return this.unistylesBridge.themeName
-    }
-
-    /**
-     * Get the current content size category
-     * @returns - The current content size category
-     */
-    public get contentSizeCategory() {
-        return this.unistylesBridge.contentSizeCategory
-    }
-
-    /**
-     * Get the current breakpoint based on device size
-     * @returns - The current breakpoint
-     */
-    public get breakpoint() {
-        return this.unistylesBridge.breakpoint
-    }
-
-    /**
-     * Get registered breakpoints with UnitylesRegistry
-     * @returns - The registered breakpoints
-     */
-    public get breakpoints() {
-        return this.unistylesRegistry.breakpoints
-    }
-
-    /**
-     * Get the names of currently enabled plugins
-     * @deprecated - Plugins will be removed in the next major release
-     * @returns - The names of currently enabled plugins
-     */
-    public get enabledPlugins() {
-        return this.unistylesBridge.enabledPlugins
-    }
-
-    /**
-     * Get the screen size
-     * @returns - The screen size { width, height }
-     */
-    public get screen() {
-        return {
-            width: this.unistylesBridge.screenWidth,
-            height: this.unistylesBridge.screenHeight
-        }
-    }
-
-    /**
-     * Get the safe area insets
-     * @returns - The safe area insets { top, bottom, left, right }
-     */
-    public get insets() {
-        return this.unistylesBridge.insets
-    }
-
-    /**
-     * Get the status bar info
-     * @returns - The status bar api { width, height, setColor, setHidden }
-     */
-    public get statusBar() {
-        return {
-            width: this.unistylesBridge.statusBar.width,
-            height: this.unistylesBridge.statusBar.height,
-            setColor: (color?: Color, alpha?: number) => {
-                const [parsedColor, parsedAlpha] = parseColor(color, alpha)
-
-                this.unistylesBridge.statusBar.setColor(parsedColor, parsedAlpha)
-            },
-            setHidden: (hidden: boolean) => this.unistylesBridge.statusBar.setHidden(hidden)
-        }
-    }
-
-    /**
-     * Get the navigation bar info (Android)
-     * @returns - The navigation bar api { width, height, setColor, setHidden }
-     */
-    public get navigationBar() {
-        return {
-            width: this.unistylesBridge.navigationBar.width,
-            height: this.unistylesBridge.navigationBar.height,
-            setColor: (color?: Color, alpha?: number) => {
-                const [parsedColor, parsedAlpha] = parseColor(color, alpha)
-
-                this.unistylesBridge.navigationBar.setColor(parsedColor, parsedAlpha)
-            },
-            setHidden: (hidden: boolean) => this.unistylesBridge.navigationBar.setHidden(hidden)
-        }
-    }
-
-    /**
-     * Get the screen orientation
-     * @returns - The screen orientation
-     */
-    public get orientation() {
-        const { width, height } = this.screen
-
-        if (width > height) {
-            return ScreenOrientation.Landscape
-        }
-
-        return ScreenOrientation.Portrait
-    }
-
-    /**
-     * Get the pixel ratio
-     * @returns - The pixel ratio
-     */
-    public get pixelRatio() {
-        return this.unistylesBridge.pixelRatio
-    }
-
-    /**
-     * Get the font scale
-     * @returns - The font scale
-     */
-    public get fontScale() {
-        return parseFloat(this.unistylesBridge.fontScale.toFixed(2))
-    }
-
-    /**
-     * Get the hairline width
-     * @returns - The thinnest width of the platform
-     */
-    public get hairlineWidth() {
-        const pixelRatio = this.pixelRatio
-        const nearestPixel = Math.trunc(pixelRatio * 0.4) || 1
-
-        return nearestPixel / pixelRatio
-    }
-
-    /**
-     * Get theme by name
-     * @param themeName - The name of the theme to get or current theme if not specified
-     * @returns - The theme
-     */
-    public getTheme(themeName?: keyof UnistylesThemes) {
-        if (!themeName) {
-            return this.unistylesRegistry.getTheme(this.themeName)
-        }
-
-        return this.unistylesRegistry.getTheme(themeName)
-    }
-
-    /**
-     * Get the immersive mode (both status bar and navigation bar hidden (Android))
-     * @param isEnabled
-     */
-    public setImmersiveMode(isEnabled: boolean) {
-        return this.unistylesBridge.setImmersiveMode(isEnabled)
-    }
-
-    /**
-     * Set the root view background color
-     * @param color - The color to set
-     * @param alpha - Color alpha - default is 1
-     */
-    public setRootViewBackgroundColor = (color?: Color, alpha?: number) => {
-        const [parsedColor, parsedAlpha] = parseColor(color, alpha)
-
-        this.unistylesBridge.setRootViewBackgroundColor(parsedColor, parsedAlpha)
-    }
-
-    /**
-     * Switch to a different theme
-     * @param name - The name of the theme to switch to
-     * @returns - boolean indicating if the theme was switched
-     */
-    public setTheme = (name: keyof UnistylesThemes) => {
-        if (name === this.themeName) {
-            return
-        }
-
-        if (this.unistylesRegistry.hasTheme(name)) {
-            this.unistylesBridge.useTheme(name)
-
-            return true
-        }
-
-        throw new Error(UnistylesError.ThemeNotRegistered)
-    }
-
-    /**
-     * Update the theme at runtime
-     * If current theme is updated, the changes will be applied immediately
-     * @param name - The name of the theme to update
-     * @param updater - Function that receives the current theme and expect modified theme to be returned
-     */
-    public updateTheme = (name: keyof UnistylesThemes, updater: (theme: UnistylesThemes[keyof UnistylesThemes]) => UnistylesThemes[keyof UnistylesThemes]) => {
-        this.unistylesRegistry.updateTheme(name, updater(this.unistylesRegistry.getTheme(name)))
-    }
-
-    /**
-     * Enable or disable adaptive themes
-     * @param enable - boolean indicating if adaptive themes should be enabled
-     */
-    public setAdaptiveThemes = (enable: boolean) => {
-        this.unistylesBridge.useAdaptiveThemes(enable)
-    }
-
-    /**
-     * Enable a plugin
-     * @deprecated - Plugins will be removed in the next major release
-     * @param plugin - Plugin that conforms to UnistylesPlugin interface
-     */
-    public addPlugin = (plugin: UnistylesPlugin) => {
-        this.unistylesRegistry.addPlugin(plugin)
-    }
-
-    /**
-     * Disable a plugin
-     * @deprecated - Plugins will be removed in the next major release
-     * @param plugin - Plugin that conforms to UnistylesPlugin interface
-     */
-    public removePlugin = (plugin: UnistylesPlugin) => {
-        this.unistylesRegistry.removePlugin(plugin)
-    }
-}

package/src/core/index.ts

@@ -1,8 +0,0 @@
-import { unistyles } from './Unistyles'
-export type { UnistylesRuntime } from './UnistylesRuntime'
-
-export type UnistylesMiniRuntime = typeof unistyles.runtime.miniRuntime
-
-export {
-    unistyles
-}

package/src/core/mocks/UnistylesMockedBridge.ts

@@ -1,30 +0,0 @@
-// @ts-nocheck
-import type { UnistylesThemes, UnistylesBreakpoints } from '../../global'
-
-export class UnistylesMockedBridge {
-    constructor() {}
-
-    public screenWidth() {}
-    public screenHeight() {}
-    public enabledPlugins() {}
-    public hasAdaptiveThemes() {}
-    public themeName() {}
-    public breakpoint() {}
-    public colorScheme() {}
-    public contentSizeCategory() {}
-    public sortedBreakpointPairs() {}
-    public insets() {}
-    public pixelRatio() {}
-    public fontScale() {}
-    public statusBar() {}
-    public navigationBar() {}
-    public themes(themes: Array<keyof UnistylesThemes>) {}
-    public useBreakpoints(breakpoints: UnistylesBreakpoints) {}
-    public useTheme(name: keyof UnistylesThemes) {}
-    public updateTheme(name: keyof UnistylesThemes) {}
-    public useAdaptiveThemes(enable: boolean) {}
-    public addPlugin(pluginName: string, notify: boolean) {}
-    public removePlugin(pluginName: string) {}
-    public setRootViewBackgroundColor(color?: string, alpha?: number) {}
-    public setImmersiveMode(isEnabled: boolean) {}
-}

package/src/core/mocks/UnistylesMockedRegistry.ts

@@ -1,47 +0,0 @@
-// @ts-nocheck
-import type { UnistylesBreakpoints, UnistylesThemes } from '../../global'
-import type { UnistylesPlugin, UnistylesConfig, UnistylesBridge } from '../../types'
-
-export class UnistylesMockedRegistry {
-    public config: UnistylesConfig = {}
-    public breakpoints: UnistylesBreakpoints = {} as UnistylesBreakpoints
-    public sortedBreakpointPairs: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]> = []
-    public plugins: Array<UnistylesPlugin> = []
-    public themes: UnistylesThemes = {} as UnistylesThemes
-    public themeNames: Array<keyof UnistylesThemes> = []
-
-    constructor(private unistylesBridge: UnistylesBridge) {}
-
-    public addThemes = (themes: UnistylesThemes) => {
-        this.themes = themes
-        this.themeNames = Object.keys(themes) as Array<keyof UnistylesThemes>
-
-        return this
-    }
-    public addBreakpoints = (breakpoints: UnistylesBreakpoints) => {
-        this.breakpoints = breakpoints
-        this.sortedBreakpointPairs = Object
-            .entries(breakpoints)
-            .sort((breakpoint1, breakpoint2) => {
-                const [, value1] = breakpoint1
-                const [, value2] = breakpoint2
-
-                return value1 - value2
-            }) as Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>
-
-        return this
-    }
-    public addConfig = (config: UnistylesConfig) => {}
-    public getTheme = (forName: keyof UnistylesThemes) => {
-        if (this.themeNames.length === 0) {
-            return {} as UnistylesThemes[keyof UnistylesThemes]
-        }
-
-        return this.themes[forName]
-    }
-
-    public addPlugin = (plugin: UnistylesPlugin, notify: boolean = true) => {}
-    public removePlugin = (plugin: UnistylesPlugin) => {}
-    public updateTheme = (name: keyof UnistylesThemes, theme: UnistylesThemes[keyof UnistylesThemes]) => {}
-    public hasTheme = (name: keyof UnistylesThemes) => true
-}