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

package/src/__tests__/mocks.ts

@@ -1,24 +0,0 @@
-import type { ScreenSize } from '../types'
-
-const TEST_BREAKPOINTS = {
-    xs: 0,
-    sm: 300,
-    md: 500,
-    lg: 750,
-    xl: 1000
-} as const
-
-export const mockRuntime = (screenSize: ScreenSize) => ({
-    breakpoint: Object.entries(TEST_BREAKPOINTS)
-        .reverse()
-        .find(([, value]) => screenSize.width >= value)?.at(0),
-    orientation: screenSize.width > screenSize.height
-        ? 'landscape'
-        : 'portrait',
-    screen: screenSize
-})
-
-export const mockRegistry = () => ({
-    sortedBreakpointPairs: Object.entries(TEST_BREAKPOINTS),
-    plugins: []
-})

package/src/core/UnistyleRegistry.ts

@@ -1,130 +0,0 @@
-import type { UnistylesBridge, UnistylesConfig, UnistylesPlugin } from '../types'
-import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
-import { isAndroid, isDev, isWeb, UnistylesError } from '../common'
-import { cssMediaQueriesPlugin, normalizeWebStylesPlugin } from '../plugins'
-
-export class UnistyleRegistry {
-    public config: UnistylesConfig = {}
-    public plugins: Array<UnistylesPlugin> = isWeb
-        ? [normalizeWebStylesPlugin]
-        : []
-    public themeNames: Array<keyof UnistylesThemes> = []
-    public themes: UnistylesThemes = {} as UnistylesThemes
-    public breakpoints: UnistylesBreakpoints = {} as UnistylesBreakpoints
-    public sortedBreakpointPairs: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]> = []
-
-    constructor(private unistylesBridge: UnistylesBridge) {}
-
-    public addThemes = (themes: UnistylesThemes) => {
-        this.themes = themes
-
-        const keys = Object.keys(themes) as Array<keyof UnistylesThemes>
-
-        this.unistylesBridge.themes = keys
-        this.themeNames = keys
-
-        return {
-            addBreakpoints: this.addBreakpoints,
-            addConfig: this.addConfig
-        }
-    }
-
-    public addBreakpoints = (breakpoints: UnistylesBreakpoints) => {
-        this.breakpoints = breakpoints
-        this.unistylesBridge.useBreakpoints(breakpoints)
-        this.sortedBreakpointPairs = this.unistylesBridge.sortedBreakpointPairs
-
-        return {
-            addThemes: this.addThemes,
-            addConfig: this.addConfig
-        }
-    }
-
-    public addConfig = (config: UnistylesConfig) => {
-        this.config = config
-
-        if (config.adaptiveThemes) {
-            this.unistylesBridge.useAdaptiveThemes(config.adaptiveThemes)
-        }
-
-        if (config.plugins) {
-            config.plugins.forEach(plugin => this.addPlugin(plugin, false))
-        }
-
-        if (config.initialTheme) {
-            this.unistylesBridge.useTheme(config.initialTheme)
-        }
-
-        if (config.experimentalCSSMediaQueries) {
-            this.plugins = [cssMediaQueriesPlugin].concat(this.plugins)
-            this.unistylesBridge.addPlugin(cssMediaQueriesPlugin.name, false)
-        }
-
-        if (isWeb && config.windowResizeDebounceTimeMs !== undefined) {
-            this.unistylesBridge.setWindowResizeDebounceTimeMs(config.windowResizeDebounceTimeMs)
-        }
-
-        if (isAndroid && config.disableAnimatedInsets) {
-            this.unistylesBridge.disableAnimatedInsets()
-        }
-
-        return {
-            addBreakpoints: this.addBreakpoints,
-            addThemes: this.addThemes
-        }
-    }
-
-    public getTheme = (forName: keyof UnistylesThemes) => {
-        if (this.themeNames.length === 0) {
-            return {} as UnistylesThemes[keyof UnistylesThemes]
-        }
-
-        if (this.hasTheme(forName)) {
-            return this.themes[forName]
-        }
-
-        if (this.unistylesBridge.themeName) {
-            throw new Error(UnistylesError.ThemeNotFound)
-        }
-
-        throw new Error(UnistylesError.ThemeNotSelected)
-    }
-
-    public addPlugin = (plugin: UnistylesPlugin, notify: boolean = true) => {
-        if (plugin.name.startsWith('__unistyles')) {
-            throw new Error(UnistylesError.InvalidPluginName)
-        }
-
-        const isAlreadyRegistered = this.plugins.some(({ name }) => name === plugin.name)
-
-        if (!isAlreadyRegistered) {
-            this.plugins = [plugin].concat(this.plugins)
-            this.unistylesBridge.addPlugin(plugin.name, notify)
-
-            return
-        }
-
-        if (!isDev) {
-            throw new Error(UnistylesError.DuplicatePluginName)
-        }
-    }
-
-    public removePlugin = (plugin: UnistylesPlugin) => {
-        if (plugin.name.startsWith('__unistyles')) {
-            throw new Error(UnistylesError.CantRemoveInternalPlugin)
-        }
-
-        this.plugins = this.plugins.filter(({ name }) => name !== plugin.name)
-        this.unistylesBridge.removePlugin(plugin.name)
-    }
-
-    public updateTheme = (name: keyof UnistylesThemes, theme: UnistylesThemes[keyof UnistylesThemes]) => {
-        this.themes[name] = theme
-
-        if (this.unistylesBridge.themeName === name) {
-            this.unistylesBridge.updateTheme(name)
-        }
-    }
-
-    public hasTheme = (name: keyof UnistylesThemes) => name in this.themes
-}

package/src/core/Unistyles.ts

@@ -1,44 +0,0 @@
-import { UnistylesModule } from './UnistylesModule'
-import { UnistylesRuntime } from './UnistylesRuntime'
-import { UnistyleRegistry } from './UnistyleRegistry'
-import type { UnistylesBridge } from '../types'
-import { UnistylesError, isTest, isWeb } from '../common'
-import { UnistylesMockedBridge, UnistylesMockedRegistry, UnistylesMockedRuntime } from './mocks'
-
-class Unistyles {
-    private _runtime: UnistylesRuntime
-    private _registry: UnistyleRegistry
-    private _bridge: UnistylesBridge
-
-    constructor() {
-        if (isTest) {
-            this._bridge = new UnistylesMockedBridge() as unknown as UnistylesBridge
-            this._registry = new UnistylesMockedRegistry(this._bridge) as unknown as UnistyleRegistry
-            this._runtime = new UnistylesMockedRuntime(this._bridge, this._registry) as unknown as UnistylesRuntime
-
-            return
-        }
-
-        const isInstalled = UnistylesModule?.install() ?? false
-
-        if (!isInstalled) {
-            throw new Error(UnistylesError.RuntimeUnavailable)
-        }
-
-        // @ts-ignore
-        // eslint-disable-next-line no-undef
-        this._bridge = (isWeb ? globalThis : global).__UNISTYLES__ as UnistylesBridge
-        this._registry = new UnistyleRegistry(this._bridge)
-        this._runtime = new UnistylesRuntime(this._bridge, this._registry)
-    }
-
-    public get registry() {
-        return this._registry
-    }
-
-    public get runtime() {
-        return this._runtime
-    }
-}
-
-export const unistyles = new Unistyles()

package/src/core/UnistylesModule.native.ts

@@ -1,7 +0,0 @@
-import { NativeModules } from 'react-native'
-
-type UnistylesNativeModule = {
-    install(): boolean
-}
-
-export const UnistylesModule = NativeModules?.Unistyles as UnistylesNativeModule

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