react-native-unistyles 1.3.0 → 1.4.0

package/src/common.ts

@@ -1,55 +0,0 @@
-import { Platform } from 'react-native'
-
-export const warn = (message: string) => {
-    console.warn(`🦄 [react-native-unistyles]: ${message}`)
-}
-
-export const isWeb = Platform.OS === 'web'
-export const isIOS = Platform.OS === 'ios'
-export const isAndroid = Platform.OS === 'android'
-export const isMobile = isIOS || isAndroid
-export const isServer = typeof window === 'undefined'
-
-export const ScreenOrientation = {
-    Landscape: 'landscape',
-    Portrait: 'portrait'
-} as const
-
-export enum IOSContentSizeCategory {
-    ExtraExtraExtraLarge = 'xxxLarge',
-    ExtraExtraLarge = 'xxLarge',
-    ExtraLarge = 'xLarge',
-    Large = 'Large',
-    Medium = 'Medium',
-    Small = 'Small',
-    ExtraSmall = 'xSmall',
-    Unspecified = 'unspecified'
-}
-
-export enum AndroidContentSizeCategory {
-    Small = 'Small',
-    Default = 'Default',
-    Large = 'Large',
-    ExtraLarge = 'ExtraLarge',
-    Huge = 'Huge'
-}
-
-export enum UnistylesEventType {
-    Theme = 'theme',
-    Layout = 'layout',
-    Plugin = 'plugin',
-    DynamicTypeSize = 'dynamicTypeSize'
-}
-
-export enum UnistylesError {
-    RuntimeUnavailable = 'Unistyles runtime is not available. Make sure you followed the installation instructions',
-    ThemeNotFound = 'You are trying to get a theme that is not registered with UnistylesRegistry',
-    ThemeNotRegistered = 'You are trying to set a theme that was not registered with UnistylesRegistry',
-    ThemeNotSelected = 'Your themes are registered, but you didn\'t select the initial theme',
-    ThemesCannotBeEmpty = 'You are trying to register empty themes object',
-    BreakpointsCannotBeEmpty = 'You are trying to register empty breakpoints object',
-    BreakpointsMustStartFromZero = 'You are trying to register breakpoints that don\'t start from 0',
-    InvalidPluginName = 'Plugin name can\'t start from reserved prefix __unistyles',
-    DuplicatePluginName = 'You are trying to register a plugin with a name that is already registered',
-    CantRemoveInternalPlugin = 'You are trying to remove an internal unistyles plugin'
-}

package/src/core/UnistyleRegistry.ts

@@ -1,108 +0,0 @@
-import type { UnistylesBridge, UnistylesConfig, UnistylesPlugin } from '../types'
-import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
-import { 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)
-        }
-
-        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)
-        }
-
-        if (this.plugins.some(({ name }) => name === plugin.name)) {
-            throw new Error(UnistylesError.DuplicatePluginName)
-        }
-
-        this.plugins = [plugin].concat(this.plugins)
-        this.unistylesBridge.addPlugin(plugin.name, notify)
-    }
-
-    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 hasTheme = (name: keyof UnistylesThemes) => name in this.themes
-}

package/src/core/Unistyles.ts

@@ -1,35 +0,0 @@
-import { UnistylesModule } from './UnistylesModule'
-import { UnistylesRuntime } from './UnistylesRuntime'
-import { UnistyleRegistry } from './UnistyleRegistry'
-import type { UnistylesBridge } from '../types'
-import { UnistylesError, isWeb } from '../common'
-
-class Unistyles {
-    private _runtime: UnistylesRuntime
-    private _registry: UnistyleRegistry
-    private _bridge: UnistylesBridge
-
-    constructor() {
-        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,230 +0,0 @@
-import { NativeEventEmitter, NativeModules } from 'react-native'
-import type { UnistylesThemes, UnistylesBreakpoints } from 'react-native-unistyles'
-import type { ColorSchemeName } from '../types'
-import { normalizeWebStylesPlugin } from '../plugins'
-import { isServer } from '../common'
-
-export class UnistylesBridgeWeb {
-    #timerRef?: ReturnType<typeof setTimeout> = undefined
-    #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'
-
-    constructor() {
-        if (!isServer) {
-            this.setupListeners()
-            this.#screenWidth = window.innerWidth
-            this.#screenHeight = window.innerHeight
-        }
-    }
-
-    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 'useTheme':
-                        return (themeName: keyof UnistylesThemes) => this.useTheme(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)
-                    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 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() {
-        window.addEventListener('resize', () => {
-            clearTimeout(this.#timerRef)
-
-            this.#timerRef = setTimeout(() => {
-                this.#screenWidth = window.innerWidth
-                this.#screenHeight = window.innerHeight
-                this.#breakpoint = this.getBreakpointFromScreenWidth(this.#screenWidth)
-
-                this.emitLayoutChange()
-            }, 100)
-        })
-
-        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()
-            }
-        })
-    }
-
-    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 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/UnistylesRuntime.ts

@@ -1,135 +0,0 @@
-import { ScreenOrientation, UnistylesError } from '../common'
-import type { UnistylesBridge, UnistylesPlugin } from '../types'
-import type { UnistylesThemes } from '../global'
-import type { UnistyleRegistry } from './UnistyleRegistry'
-
-/**
- * Utility to interact with the Unistyles during runtime
- */
-export class UnistylesRuntime {
-    constructor(private unistylesBridge: UnistylesBridge, private unistylesRegistry: UnistyleRegistry) {}
-
-    /**
-     * Get the current color scheme
-     * @returns - The current color scheme
-     */
-    public get colorScheme() {
-        return this.unistylesBridge.colorScheme
-    }
-
-    /**
-     * 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
-     * @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 screen orientation
-     * @returns - The screen orientation
-     */
-    public get orientation() {
-        const { width, height } = this.screen
-
-        if (width > height) {
-            return ScreenOrientation.Landscape
-        }
-
-        return ScreenOrientation.Portrait
-    }
-
-    /**
-     * 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)
-    }
-
-    /**
-     * 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
-     * @param plugin - Plugin that conforms to UnistylesPlugin interface
-     */
-    public addPlugin = (plugin: UnistylesPlugin) => {
-        this.unistylesRegistry.addPlugin(plugin)
-    }
-
-    /**
-     * Disable a plugin
-     * @param plugin - Plugin that conforms to UnistylesPlugin interface
-     */
-    public removePlugin = (plugin: UnistylesPlugin) => {
-        this.unistylesRegistry.removePlugin(plugin)
-    }
-}

package/src/core/index.ts

@@ -1,2 +0,0 @@
-export { unistyles } from './Unistyles'
-export type { UnistylesRuntime } from './UnistylesRuntime'

package/src/createStyleSheet.ts

@@ -1,8 +0,0 @@
-import type { StyleSheetWithSuperPowers } from './types'
-
-/**
- * Utility to create a stylesheet with superpowers
- * Compatible with React Native StyleSheet.create
- * @param stylesheet - The stylesheet with superpowers to be used
- */
-export const createStyleSheet = <S extends StyleSheetWithSuperPowers>(stylesheet: S): S => stylesheet

package/src/global.ts

@@ -1,6 +0,0 @@
-export interface UnistylesThemes {}
-export interface UnistylesBreakpoints {
-    // these breakpoints are only available on mobile, when you didn't specify any breakpoints
-    landscape?: number,
-    portrait?: number,
-}

package/src/hooks/useCSS.native.ts

@@ -1,3 +0,0 @@
-import type { ReactNativeStyleSheet } from '../types'
-
-export const useCSS = <T>(_stylesheet: ReactNativeStyleSheet<T>): void => {}

package/src/hooks/useCSS.ts

@@ -1,51 +0,0 @@
-import { useInsertionEffect, useRef } from 'react'
-import { unistyles } from '../core'
-import type { ReactNativeStyleSheet } from '../types'
-import { generateReactNativeWebId } from '../utils'
-
-export const useCSS = <T>(stylesheet: ReactNativeStyleSheet<T>) => {
-    const insertedIds = useRef<Array<string>>([])
-
-    useInsertionEffect(() => {
-        if (!unistyles.registry.config.experimentalCSSMediaQueries) {
-            return
-        }
-
-        Object
-            .entries(stylesheet)
-            .forEach(([_key, value]) => {
-                Object.entries(value!)
-                    .forEach(([prop, val]) => {
-                        if (!val.toString().includes('@media')) {
-                            return
-                        }
-
-                        const id = generateReactNativeWebId(prop, '""')
-
-                        if (insertedIds.current.includes(id)) {
-                            return
-                        }
-
-                        const style = document.createElement('style')
-
-                        style.id = id
-                        style.innerHTML = val
-
-                        document.head.appendChild(style)
-                        insertedIds.current = [...insertedIds.current, id]
-                    })
-            })
-
-        return () => {
-            insertedIds.current.forEach(id => {
-                const style = document.getElementById(id)
-
-                if (style) {
-                    style.remove()
-                }
-            })
-
-            insertedIds.current = []
-        }
-    }, [stylesheet])
-}

package/src/hooks/useInitialTheme.ts

@@ -1,11 +0,0 @@
-import { useMemo } from 'react'
-import { unistyles } from '../core'
-import type { UnistylesThemes } from '../global'
-
-export const useInitialTheme = (forName: keyof UnistylesThemes) => {
-    useMemo(() => {
-        if (!unistyles.runtime.themeName) {
-            unistyles.runtime.setTheme(forName)
-        }
-    }, [])
-}