react-native-unistyles 1.2.0 → 1.3.0

package/src/core/UnistylesModule.ts

@@ -0,0 +1,230 @@
+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

@@ -0,0 +1,135 @@
+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

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

package/src/createStyleSheet.ts

@@ -0,0 +1,8 @@
+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

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

@@ -1 +1,4 @@
-export { useDimensions } from './useDimensions'
+export { useInitialTheme } from './useInitialTheme'
+export { useUnistyles } from './useUnistyles'
+export { useVariants } from './useVariants'
+export { useCSS } from './useCSS'

package/src/hooks/useCSS.native.ts

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

package/src/hooks/useCSS.ts

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,11 @@
+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)
+        }
+    }, [])
+}

package/src/hooks/useUnistyles.ts

@@ -0,0 +1,64 @@
+import { NativeEventEmitter, NativeModules } from 'react-native'
+import { useEffect, useState } from 'react'
+import { unistyles } from '../core'
+import { UnistylesEventType } from '../common'
+import type { UnistylesDynamicTypeSizeEvent, UnistylesEvents, UnistylesMobileLayoutEvent, UnistylesThemeEvent } from '../types'
+
+const unistylesEvents = new NativeEventEmitter(NativeModules.Unistyles)
+
+export const useUnistyles = () => {
+    const [plugins, setPlugins] = useState(unistyles.runtime.enabledPlugins)
+    const [theme, setTheme] = useState(unistyles.registry.getTheme(unistyles.runtime.themeName))
+    const [contentSizeCategory, setContentSizeCategory] = useState(unistyles.runtime.contentSizeCategory)
+    const [layout, setLayout] = useState({
+        breakpoint: unistyles.runtime.breakpoint,
+        orientation: unistyles.runtime.orientation,
+        screenSize: {
+            width: unistyles.runtime.screen.width,
+            height: unistyles.runtime.screen.height
+        }
+    })
+
+    useEffect(() => {
+        const subscription = unistylesEvents.addListener(
+            '__unistylesOnChange',
+            (event: UnistylesEvents) => {
+                switch (event.type) {
+                    case UnistylesEventType.Theme: {
+                        const themeEvent = event as UnistylesThemeEvent
+
+                        return setTheme(unistyles.registry.getTheme(themeEvent.payload.themeName))
+                    }
+                    case UnistylesEventType.Layout: {
+                        const layoutEvent = event as UnistylesMobileLayoutEvent
+
+                        return setLayout({
+                            breakpoint: layoutEvent.payload.breakpoint,
+                            orientation: layoutEvent.payload.orientation,
+                            screenSize: layoutEvent.payload.screen
+                        })
+                    }
+                    case UnistylesEventType.Plugin: {
+                        return setPlugins(unistyles.runtime.enabledPlugins)
+                    }
+                    case UnistylesEventType.DynamicTypeSize: {
+                        const dynamicTypeSizeEvent = event as UnistylesDynamicTypeSizeEvent
+
+                        return setContentSizeCategory(dynamicTypeSizeEvent.payload.contentSizeCategory)
+                    }
+                    default:
+                        return
+                }
+            }
+        )
+
+        return subscription.remove
+    }, [])
+
+    return {
+        plugins,
+        theme,
+        layout,
+        contentSizeCategory
+    }
+}

package/src/hooks/useVariants.ts

@@ -0,0 +1,10 @@
+import { useRef } from 'react'
+import type { Optional } from '../types'
+
+export const useVariants = (variantsMap?: Record<string, Optional<string>>) => {
+    const variantsRef = useRef<Optional<Record<string, Optional<string>>>>(variantsMap)
+
+    variantsRef.current = variantsMap
+
+    return variantsRef.current
+}

package/src/index.ts

@@ -1,2 +1,50 @@
-export { UnistylesTheme } from './UnistylesTheme'
-export { createUnistyles } from './createUnistyles'
+import { unistyles } from './core'
+import { mq } from './utils'
+import { useInitialTheme } from './hooks'
+import type { UnistylesPlugin } from './types'
+import type { UnistylesThemes, UnistylesBreakpoints } from './global'
+import { ScreenOrientation, AndroidContentSizeCategory, IOSContentSizeCategory } from './common'
+import { useStyles } from './useStyles'
+import { createStyleSheet } from './createStyleSheet'
+
+/**
+ * Utility to interact with the Unistyles
+ * (should be called only once)
+ */
+const UnistylesRegistry = {
+    /**
+     * Register themes to be used in the app
+     * @param themes - Key value pair of themes
+     */
+    addThemes: unistyles.registry.addThemes,
+    /**
+     * Register breakpoints to be used in the app
+     * @param breakpoints - Key value pair of breakpoints
+     */
+    addBreakpoints: unistyles.registry.addBreakpoints,
+    /**
+     * Register additional config to customize the Unistyles
+     * @param config - Key value pair of config
+     */
+    addConfig: unistyles.registry.addConfig
+}
+
+const UnistylesRuntime = unistyles.runtime
+
+export {
+    mq,
+    useStyles,
+    useInitialTheme,
+    createStyleSheet,
+    ScreenOrientation,
+    AndroidContentSizeCategory,
+    IOSContentSizeCategory,
+    UnistylesRegistry,
+    UnistylesRuntime
+}
+
+export type {
+    UnistylesThemes,
+    UnistylesBreakpoints,
+    UnistylesPlugin
+}

package/src/normalizer/index.ts

@@ -0,0 +1,2 @@
+export { normalizeStyle } from './normalizeStyle'
+export { preprocessor, normalizeNumericValue, normalizeColor } from './normalizer'

package/src/{utils/normalizeStyles.web.ts → normalizer/normalizeStyle.ts}

@@ -1,6 +1,6 @@
-import { warn } from './common'
 import { preprocessor } from './normalizer'
-import type { NormalizedBoxShadow, NormalizedTextShadow, BoxShadow, TextShadow, Transforms } from '../types'
+import { warn } from '../common'
+import type { NormalizedBoxShadow, NormalizedTextShadow, BoxShadow, TextShadow, RNStyle } from '../types'
 
 const normalizeBoxShadow = <T extends BoxShadow>(style: T): NormalizedBoxShadow => {
     const requiredBoxShadowProperties = [
@@ -55,7 +55,7 @@ const normalizeTextShadow = <T extends TextShadow>(style: T): NormalizedTextShad
     }
 }
 
-export const normalizeStyles = <T extends BoxShadow | TextShadow | { transform: Transforms }>(style: T): T => {
+export const normalizeStyle = <T extends RNStyle>(style: T): T => {
     const normalizedTransform = ('transform' in style && Array.isArray(style.transform))
         ? { transform: preprocessor.createTransformValue(style.transform) }
         : {}

package/src/normalizer/normalizer.macos.ts

@@ -0,0 +1 @@
+// keep it empty for macOS

package/src/{utils → normalizer}/normalizer.ts

@@ -1,7 +1,7 @@
 // based on react-native-web normalizer
 // https://github.com/necolas/react-native-web
 import normalizeColors from '@react-native/normalize-colors'
-import type { TextShadow, Transforms, BoxShadow } from '../types'
+import type { TextShadow, Transforms, BoxShadow, Nullable } from '../types'
 
 type Preprocessor = {
     createTextShadowValue(style: TextShadow): string,
@@ -15,9 +15,9 @@ export const normalizeColor = (color: string, opacity: number = 1) => {
         return color
     }
 
-    const integer = normalizeColors(color) as number | null
+    const integer = normalizeColors(color) as Nullable<number>
 
-    // If the colour is an unknown format, the return value is null
+    // If the color is an unknown format, the return value is null
     if (integer === null) {
         return color
     }
@@ -37,7 +37,8 @@ export const normalizeColor = (color: string, opacity: number = 1) => {
 }
 
 export const normalizeNumericValue = (value: number) => value ? `${value}px` : value
-const normalizeTransform = (key: string, value: number | string) => {
+
+const normalizeTransform = <T>(key: string, value: T) => {
     if (key.includes('scale')) {
         return value
     }

package/src/plugins/cssMediaQueriesPlugin.ts

@@ -0,0 +1,8 @@
+// prevent recursive import
+import { createMediaQueryForStyles } from '../utils/cssMediaQuery'
+import type { UnistylesPlugin } from '../types'
+
+export const cssMediaQueriesPlugin: UnistylesPlugin = {
+    name: '__unistylesCSSMediaQueries',
+    onParsedStyle: (_key, styles, runtime) => createMediaQueryForStyles(styles, runtime)
+}

package/src/plugins/index.ts

@@ -0,0 +1,2 @@
+export { normalizeWebStylesPlugin } from './normalizeWebStylesPlugin'
+export { cssMediaQueriesPlugin } from './cssMediaQueriesPlugin'

package/src/plugins/normalizeWebStylesPlugin.ts

@@ -0,0 +1,7 @@
+import type { UnistylesPlugin } from '../types'
+import { normalizeStyle } from '../normalizer'
+
+export const normalizeWebStylesPlugin: UnistylesPlugin = {
+    name: '__unistylesNormalizeWebStyles',
+    onParsedStyle: (_key, styles) => normalizeStyle(styles)
+}