react-native-unistyles 2.0.0-alpha.4 → 2.0.0-alpha.6

package/src/Unistyles.ts

@@ -1,13 +1,13 @@
 import { UnistylesModule } from './UnistylesModule'
 import { UnistylesRuntime } from './UnistylesRuntime'
-import { UnistylesEngine } from './UnistylesEngine'
+import { UnistylesBuiltInEngine } from './UnistylesEngine'
 import { UnistyleRegistry } from './UnistyleRegistry'
 import type { UnistylesBridge } from './types'
 import { UnistylesError } from './types'
 
 class Unistyles {
     private _runtime: UnistylesRuntime
-    private _engine: UnistylesEngine
+    private _engine: UnistylesBuiltInEngine
     private _registry: UnistyleRegistry
     private _bridge: UnistylesBridge
 
@@ -22,7 +22,7 @@ class Unistyles {
         this._bridge = global.__UNISTYLES__ as UnistylesBridge
         this._registry = new UnistyleRegistry(this._bridge)
         this._runtime = new UnistylesRuntime(this._bridge, this._registry)
-        this._engine = new UnistylesEngine(this._registry, this._runtime)
+        this._engine = new UnistylesBuiltInEngine(this._registry, this._runtime)
     }
 
     public get registry() {

package/src/UnistylesEngine.ts

@@ -1,14 +1,23 @@
 import type { UnistyleRegistry } from './UnistyleRegistry'
 import type { UnistylesRuntime } from './UnistylesRuntime'
+import { getKeyForCustomMediaQuery } from './utils'
+import type { UnistylesEngine, NestedKeys } from './types'
 
-// todo implement engine
-export class UnistylesEngine {
-    // @ts-ignore
+export class UnistylesBuiltInEngine implements UnistylesEngine {
     constructor(private registry: UnistyleRegistry, private runtime: UnistylesRuntime) {
         this.registry = registry
         this.runtime = runtime
     }
 
+    public isMediaQuery = (key: string) => {
+        const regex = /(:w|:h)/
+
+        return key.length > 0 && regex.test(key)
+    }
+
+    public didMatchMediaQuery = (keys: NestedKeys) =>
+        getKeyForCustomMediaQuery(keys, this.runtime.screen, this.registry.breakpoints)
+
     // UnistylesEngine.parseStyleSheet
     // UnistylesEngine.parseStyle
     // UnistylesEngine.proxify

package/src/createStyleSheet.ts

@@ -1,9 +1,6 @@
-import type { CustomNamedStyles } from './types'
-import type { UnistylesThemes } from './global'
+import type { CustomNamedStyles, UnistylesTheme } from './types'
 
-type T = UnistylesThemes[keyof UnistylesThemes]
-
-export const createStyleSheet = <S extends CustomNamedStyles<S>, X>(styles: S | CustomNamedStyles<S> | X | ((theme: T) => X | CustomNamedStyles<X>)): S | X => {
+export const createStyleSheet = <S, X>(styles: S | CustomNamedStyles<S> | X | ((theme: UnistylesTheme) => X | CustomNamedStyles<X>)): S | X => {
     if (typeof styles === 'function') {
         return styles as X
     }

package/src/global.ts

@@ -1,4 +1,5 @@
 export interface UnistylesThemes {}
 export interface UnistylesBreakpoints {
-    default?: 0
+    landscape?: number,
+    portrait?: number,
 }

package/src/types/breakpoints.ts

@@ -1,3 +1,4 @@
+import type { OpaqueColorValue } from 'react-native'
 import type { UnistylesBreakpoints } from '../global'
 import type { MediaQueries } from './mediaQueries'
 
@@ -25,7 +26,9 @@ export type ExtractBreakpoints<T> = T extends Partial<Record<keyof UnistylesBrea
 export type RemoveKeysWithPrefix<T> = T extends (...args: Array<any>) => infer R
     ? (...args: Parameters<T>) => RemoveKeysWithPrefix<R>
     : T extends object
-        ? T extends Record<string, infer _V>
-            ? { [K in keyof T as K extends MediaQueries ? keyof UnistylesBreakpoints & string : K]: RemoveKeysWithPrefix<T[K]> }
-            : { [K in keyof T]: RemoveKeysWithPrefix<T[K]> }
+        ? T extends OpaqueColorValue
+            ? string
+            : T extends Record<string, infer _V>
+                ? { [K in keyof T as K extends MediaQueries ? keyof UnistylesBreakpoints & string : K]: RemoveKeysWithPrefix<T[K]> }
+                : { [K in keyof T]: RemoveKeysWithPrefix<T[K]> }
         : T

package/src/types/core.ts

@@ -15,7 +15,7 @@ import type {
 } from 'react-native/Libraries/StyleSheet/StyleSheetTypes'
 import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
 import type { MediaQueries } from './mediaQueries'
-import type { UnistylesBreakpoints } from '../global'
+import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
 
 type ShadowOffset = {
     width: number,
@@ -37,37 +37,40 @@ type TransformStyles =
     & SkewYTransform
     & MatrixTransform
 
-type UnistyleNested<B> = {
-    shadowOffset?: DeepUniStyle<ShadowOffset, B>,
-    textShadowOffset?: DeepUniStyle<ShadowOffset, B>,
-    transform?: Array<DeepUniStyle<TransformStyles, B>>
+type UnistyleNested = {
+    shadowOffset?: DeepUniStyle<ShadowOffset>,
+    textShadowOffset?: DeepUniStyle<ShadowOffset>,
+    transform?: Array<DeepUniStyle<TransformStyles>>
 }
 
-type UniStyle<V, B> = {
-    [innerKey in keyof B]?: V
+type UniStyle<V> = {
+    [innerKey in keyof UnistylesBreakpoints]: V
 } | {
-    [innerKey in MediaQueries]?: V
-} | V
+    [innerKey in MediaQueries]: V
+}
 
-type DeepUniStyle<T, B> = {
-    [K in keyof T]?: UniStyle<T[K], B>
+type DeepUniStyle<T> = {
+    [K in keyof T]?: UniStyle<T[K]> | T[K]
 }
 
 // these props are treated differently to nest breakpoints and media queries
 type NestedTypes = 'shadowOffset' | 'transform' | 'textShadowOffset'
 
-type UnistyleView<B> = DeepUniStyle<Omit<ViewStyle, NestedTypes>, B>
-type UnistyleText<B> = DeepUniStyle<Omit<TextStyle, NestedTypes>, B>
-type UnistyleImage<B> = DeepUniStyle<Omit<ImageStyle, NestedTypes>, B>
+type UnistyleView = DeepUniStyle<Omit<ViewStyle, NestedTypes>>
+type UnistyleText = DeepUniStyle<Omit<TextStyle, NestedTypes>>
+type UnistyleImage = DeepUniStyle<Omit<ImageStyle, NestedTypes>>
 
-export type StaticStyles<B> =
-    | UnistyleView<B>
-    | UnistyleText<B>
-    | UnistyleImage<B>
-    & UnistyleNested<B>
+export type StaticStyles =
+    | UnistyleView
+    | UnistyleText
+    | UnistyleImage
+    & UnistyleNested
 
 export type CustomNamedStyles<T> = {
-    [K in keyof T]: T[K] extends (...args: infer A) => StaticStyles<UnistylesBreakpoints>
-        ? (...args: A) => StaticStyles<UnistylesBreakpoints>
-        : StaticStyles<UnistylesBreakpoints>
+    [K in keyof T]: T[K] extends (...args: infer A) => StaticStyles
+        ? (...args: A) => StaticStyles
+        : StaticStyles
 }
+
+export type NestedKeys = Array<[keyof UnistylesBreakpoints | MediaQueries, string | number | undefined]>
+export type UnistylesTheme = UnistylesThemes[keyof UnistylesThemes]

package/src/types/cxx.ts

@@ -1,7 +1,10 @@
 import type { UnistylesThemes, UnistylesBreakpoints } from '../global'
+import type { ScreenSize } from './breakpoints'
+import type { NestedKeys } from './core'
 
+export type Optional<T> = T | undefined
 export type Nullable<T> = T | null
-export type ColorSchemeName = 'light' | 'dark' | undefined
+export type ColorSchemeName = Optional<'light' | 'dark'>
 
 export type UnistylesConfig = {
     adaptiveThemes?: boolean
@@ -34,33 +37,26 @@ export type UnistylesBridge = {
 
 export enum CxxUnistylesEventTypes {
     Theme = 'theme',
-    Size = 'size',
-    Breakpoint = 'breakpoint'
+    Layout = 'layout'
 }
 
-export type CxxUnistylesThemeEvent = {
+export type UnistylesThemeEvent = {
     type: CxxUnistylesEventTypes.Theme,
     payload: {
         themeName: keyof UnistylesThemes
     }
 }
 
-export type CxxUnistylesSizeEvent = {
-    type: CxxUnistylesEventTypes.Size,
+export type UnistylesMobileLayoutEvent = {
+    type: CxxUnistylesEventTypes.Layout,
     payload: {
-        width: number,
-        height: number
+        screen: ScreenSize,
+        breakpoint: keyof UnistylesBreakpoints,
+        orientation: ScreenOrientation
     }
 }
 
-export type CxxUnistylesBreakpointEvent = {
-    type: CxxUnistylesEventTypes.Breakpoint,
-    payload: {
-        breakpoint: keyof UnistylesBreakpoints
-    }
-}
-
-export type UnistylesEvents = CxxUnistylesThemeEvent | CxxUnistylesSizeEvent | CxxUnistylesBreakpointEvent
+export type UnistylesEvents = UnistylesThemeEvent | UnistylesMobileLayoutEvent
 
 export enum UnistylesError {
     RuntimeUnavailable = 'UNISTYLES_ERROR_RUNTIME_UNAVAILABLE',
@@ -70,3 +66,8 @@ export enum UnistylesError {
     BreakpointsCannotBeEmpty = 'UNISTYLES_ERROR_BREAKPOINTS_CANNOT_BE_EMPTY',
     BreakpointsMustStartFromZero = 'UNISTYLES_ERROR_BREAKPOINTS_MUST_START_FROM_ZERO',
 }
+
+export interface UnistylesEngine {
+    isMediaQuery(key: string): boolean,
+    didMatchMediaQuery(keys: NestedKeys): Optional<string>,
+}

package/src/types/index.ts

@@ -1,6 +1,6 @@
 export * from './normalizer'
 export * from './cxx'
-export type { CustomNamedStyles } from './core'
+export type { CustomNamedStyles, NestedKeys, UnistylesTheme } from './core'
 export type { MediaQueries } from './mediaQueries'
 export type {
     ScreenSize,

package/src/types/mediaQueries.ts

@@ -1,9 +1,14 @@
 type Optional<TOptional extends string> = TOptional | ''
 type Separator = ',' | ', '
-// this is super weird, but number passes empty string and bigint does not
-type MediaQuery = `[${Separator}${bigint}]` | `[${bigint}${Optional<`${Separator}${bigint}`>}]`
-type WidthMediaQuery = `:w${MediaQuery}`
-type HeightMediaQuery = `:h${MediaQuery}`
+type OpeningBracket = '(' | '['
+type ClosingBracket = ')' | ']'
+
+type NumericMediaQuery =
+    | `${OpeningBracket}${Separator}${bigint}${ClosingBracket}`
+    | `${OpeningBracket}${bigint}${Optional<`${Separator}${bigint}`>}${ClosingBracket}`
+
+type WidthMediaQuery = `:w${NumericMediaQuery}`
+type HeightMediaQuery = `:h${NumericMediaQuery}`
 
 export type MediaQueries =
     | `${WidthMediaQuery}${Optional<HeightMediaQuery>}`

package/src/useStyles.ts

@@ -3,12 +3,9 @@ import { StyleSheet } from 'react-native'
 import { parseStyle, proxifyFunction } from './utils'
 import type { CreateStylesFactory, CustomNamedStyles, ExtractBreakpoints, RemoveKeysWithPrefix } from './types'
 import { useUnistyles } from './useUnistyles'
-import type { UnistylesThemes } from './global'
+import type { UnistylesTheme } from './types'
 
-// todo types
-type T = UnistylesThemes[keyof UnistylesThemes]
-
-export const useStyles = <ST extends CustomNamedStyles<ST>>(stylesheet?: ST | CreateStylesFactory<ST, T>) => {
+export const useStyles = <ST extends CustomNamedStyles<ST>>(stylesheet?: ST | CreateStylesFactory<ST, UnistylesTheme>) => {
     const { theme, breakpoint, screenSize } = useUnistyles()
 
     if (!stylesheet) {
@@ -20,7 +17,7 @@ export const useStyles = <ST extends CustomNamedStyles<ST>>(stylesheet?: ST | Cr
     }
 
     const parsedStyles = useMemo(() => typeof stylesheet === 'function'
-        ? stylesheet(theme!)
+        ? stylesheet(theme)
         : stylesheet, [theme, stylesheet])
 
     const dynamicStyleSheet = useMemo(() => Object
@@ -31,13 +28,13 @@ export const useStyles = <ST extends CustomNamedStyles<ST>>(stylesheet?: ST | Cr
             if (typeof value === 'function') {
                 return {
                     ...acc,
-                    [key]: proxifyFunction(value, breakpoint!, screenSize)
+                    [key]: proxifyFunction(value, breakpoint, screenSize)
                 }
             }
 
             return StyleSheet.create({
                 ...acc,
-                [key]: parseStyle<ST>(style, breakpoint!, screenSize)
+                [key]: parseStyle<ST>(style, breakpoint, screenSize)
             })
         }, {} as ST), [breakpoint, screenSize, parsedStyles])
 

package/src/useUnistyles.ts

@@ -1,22 +1,18 @@
 import { NativeEventEmitter, NativeModules } from 'react-native'
 import { useEffect, useState } from 'react'
-import type {
-    CxxUnistylesBreakpointEvent,
-    CxxUnistylesSizeEvent,
-    CxxUnistylesThemeEvent,
-    UnistylesEvents
-} from './types'
-import { CxxUnistylesEventTypes } from './types'
+import type { UnistylesThemeEvent, UnistylesMobileLayoutEvent, UnistylesEvents } from './types'
+import { CxxUnistylesEventTypes, ScreenOrientation } from './types'
 import { unistyles } from './Unistyles'
 
 const unistylesEvents = new NativeEventEmitter(NativeModules.Unistyles)
 
 export const useUnistyles = () => {
+    const [orientation, setOrientation] = useState<ScreenOrientation>(unistyles.runtime.orientation)
     const [theme, setTheme] = useState(unistyles.runtime.getTheme(unistyles.runtime.themeName))
     const [breakpoint, setBreakpoint] = useState(unistyles.runtime.breakpoint)
     const [screenSize, setScreenSize] = useState({
-        width: 0,
-        height: 0
+        width: unistyles.runtime.screen.width,
+        height: unistyles.runtime.screen.height
     })
 
     useEffect(() => {
@@ -25,27 +21,18 @@ export const useUnistyles = () => {
             (event: UnistylesEvents) => {
                 switch (event.type) {
                     case CxxUnistylesEventTypes.Theme: {
-                        const themeEvent = event as CxxUnistylesThemeEvent
+                        const themeEvent = event as UnistylesThemeEvent
 
                         setTheme(unistyles.runtime.getTheme(themeEvent.payload.themeName))
 
                         return
                     }
-                    // this event is not available on mobile
-                    case CxxUnistylesEventTypes.Size: {
-                        const sizeEvent = event as CxxUnistylesSizeEvent
+                    case CxxUnistylesEventTypes.Layout: {
+                        const layoutEvent = event as UnistylesMobileLayoutEvent
 
-                        setScreenSize({
-                            width: sizeEvent.payload.width,
-                            height: sizeEvent.payload.height
-                        })
-
-                        return
-                    }
-                    case CxxUnistylesEventTypes.Breakpoint: {
-                        const breakpointEvent = event as CxxUnistylesBreakpointEvent
-
-                        setBreakpoint(breakpointEvent.payload.breakpoint)
+                        setBreakpoint(layoutEvent.payload.breakpoint)
+                        setOrientation(layoutEvent.payload.orientation)
+                        setScreenSize(layoutEvent.payload.screen)
 
                         return
                     }
@@ -60,6 +47,7 @@ export const useUnistyles = () => {
 
     return {
         theme,
+        orientation,
         breakpoint,
         screenSize
     }

package/src/utils/breakpoints.ts

@@ -1,28 +1,9 @@
 import { unistyles } from '../Unistyles'
-import { throwError } from './common'
-import type { ScreenSize, MediaQueries } from '../types'
-import { getKeyForCustomMediaQuery, isMediaQuery } from './mediaQueries'
+import { isMobile, Orientation, throwError } from './common'
+import type { MediaQueries } from '../types'
+import { ScreenOrientation } from '../types'
 import type { UnistylesBreakpoints } from '../global'
 
-/**
- * Sorts the breakpoints object based on its numeric values in ascending order and validates them.
- *
- * This function takes an object where keys represent breakpoint names and values are numeric.
- * It returns a new object with the same keys but sorted based on their corresponding numeric values.
- * Additionally, it validates that:
- * 1. The first breakpoint starts with a value of 0.
- * 2. No duplicate breakpoint values exist.
- *
- * If the validation fails, appropriate error messages are logged to the console.
- *
- * @template B - An object type where keys are strings and values are numbers.
- * @param {B} breakpoints - The breakpoints object to be sorted and validated.
- * @returns {B} A new object with sorted and validated breakpoints.
- *
- * @example
- * const input = { md: 768, lg: 1024, sm: 0 }
- * sortAndValidateBreakpoints(input) // returns { sm: 0, md: 768, lg: 1024 }
- */
 export const sortAndValidateBreakpoints = (breakpoints: UnistylesBreakpoints): UnistylesBreakpoints => {
     const sortedPairs = Object
         .entries(breakpoints)
@@ -48,21 +29,6 @@ export const sortAndValidateBreakpoints = (breakpoints: UnistylesBreakpoints): U
     return sortedBreakpoints
 }
 
-/**
- * Determines the appropriate breakpoint key for a given screen width based on provided breakpoints.
- *
- * This function takes a screen width and an object of breakpoints. It returns the key of the breakpoint
- * that the screen width falls into. The breakpoints are assumed to be sorted in ascending order.
- *
- * @template B - An object type where keys are strings and values are numbers representing screen widths.
- * @param {number} width - The screen width to determine the breakpoint for.
- * @param breakpointEntries - sorted pairs of breakpoints
- * @returns {keyof B & string} The key of the breakpoint that the screen width falls into.
- *
- * @example
- * const breakpoints = { sm: 0, md: 768, lg: 1024 }
- * getBreakpointFromScreenWidth(800, breakpoints) // returns 'md'
- */
 export const getBreakpointFromScreenWidth = (width: number, breakpointEntries: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>): keyof UnistylesBreakpoints & string => {
     const [key] = breakpointEntries
         .find(([, value], index, otherBreakpoints) => {
@@ -79,58 +45,49 @@ export const getBreakpointFromScreenWidth = (width: number, breakpointEntries: A
     return key
 }
 
-/**
- * Retrieves the value associated with a given breakpoint or custom media query based on the provided screen size.
- *
- * The function first checks for custom media queries. If a matching custom media query is found, its associated value is returned.
- * If no custom media query matches, the function then checks for a direct breakpoint match.
- * If there's no direct breakpoint match, the function simulates CSS cascading to find the closest matching breakpoint.
- *
- * @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
- *
- * @param {Record<keyof B & string, string | number>} value - An object containing values associated with breakpoints or custom media queries.
- * @param {keyof B & string} breakpoint - The breakpoint name to check against.
- * @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
- * @param breakpointPairs - sorted pairs of breakpoints
- *
- * @returns {string | number | undefined} Returns the value associated with the matching breakpoint or custom media query, or `undefined` if no match is found.
- *
- * @example
- *
- * const values = { ':w[200]': 'value1', sm: 'value2', md: 'value3' }
- * const screenSize = { width: 250, height: 400 }
- * const breakpoints = { sm: 300, md: 600, lg: 900 }
- *
- * getValueForBreakpoint(values, 'sm', screenSize, breakpoints); // 'value1'
- */
-export const getValueForBreakpoint = (
-    value: Record<keyof UnistylesBreakpoints | MediaQueries, string | number | undefined>,
-    breakpoint: keyof UnistylesBreakpoints,
-    screenSize: ScreenSize
-): string | number | undefined => {
+export const getValueForBreakpoint = (value: Record<keyof UnistylesBreakpoints | MediaQueries, string | number | undefined>): string | number | undefined => {
     // the highest priority is for custom media queries
     const customMediaQueries = Object
         .entries(value)
-        .filter(([key]) => isMediaQuery(key))
-    const customMediaQueryKey = getKeyForCustomMediaQuery(customMediaQueries, screenSize) as keyof typeof value
+        .filter(([key]) => unistyles.engine.isMediaQuery(key)) as Array<[keyof UnistylesBreakpoints | MediaQueries, string | number | undefined]>
+    // const customMediaQueryKey = getKeyForCustomMediaQuery(customMediaQueries, screenSize) as keyof typeof value
+    const customMediaQueryKey = unistyles.engine.didMatchMediaQuery(customMediaQueries) as keyof typeof value
 
     if (customMediaQueryKey && customMediaQueryKey in value) {
         return value[customMediaQueryKey]
     }
 
-    // if no custom media query, or didn't match, proceed with defined breakpoints
-    const unifiedKey = breakpoint?.toLowerCase() as keyof typeof value
-    const directBreakpoint = value[unifiedKey]
+    // at this point user didn't use custom media queries (:w, :h)
+    // check if user defined any breakpoints
+    const hasBreakpoints = unistyles.runtime.sortedBreakpoints.length > 0
+
+    // if not then we can fallback to horizontal and portrait (mobile only)
+    if (!hasBreakpoints && isMobile && (Orientation.Landscape in  value || Orientation.Portrait in value)) {
+        return value[
+            unistyles.runtime.orientation === ScreenOrientation.Portrait
+                ? Orientation.Portrait
+                : Orientation.Landscape
+        ]
+    }
+
+    const breakpoint = unistyles.runtime.breakpoint
+
+    if (!breakpoint) {
+        return undefined
+    }
+
+    // if user defined breakpoints, then we look for the valid one
+    const directBreakpoint = value[breakpoint]
 
     // if there is a direct key like 'sm' or 'md', or value for this key exists but its undefined
-    if (directBreakpoint || (unifiedKey in value)) {
+    if (directBreakpoint || (breakpoint in value)) {
         return directBreakpoint
     }
 
-    // there is no direct hit for breakpoint nor media-query, so let's simulate CSS cascading
+    // there is no direct hit for breakpoint nor media-query, let's simulate CSS cascading
     const breakpointPairs = unistyles.runtime.sortedBreakpoints
     const currentBreakpoint = breakpointPairs
-        .findIndex(([key]) => key === unifiedKey)
+        .findIndex(([key]) => key === breakpoint)
 
     const availableBreakpoints = breakpointPairs
         .filter(([key], index) => index < currentBreakpoint && key && key in value)

package/src/utils/common.ts

@@ -8,5 +8,13 @@ export const warn = (message: string) => {
     console.warn(`🦄 [react-native-unistyles]: ${message}`)
 }
 
+export const isMobile = Platform.OS === 'android' || Platform.OS === 'ios'
 export const isWeb = Platform.OS === 'web'
+export const isIOS = Platform.OS === 'ios'
+export const isAndroid = Platform.OS === 'android'
 export const isServer = typeof window === 'undefined'
+
+export const Orientation = {
+    Landscape: 'landscape',
+    Portrait: 'portrait'
+} as const

package/src/utils/index.ts

@@ -2,7 +2,7 @@ export { normalizeStyles } from './normalizeStyles'
 export * from './normalizer'
 export { getBreakpointFromScreenWidth, sortAndValidateBreakpoints, getValueForBreakpoint } from './breakpoints'
 export { proxifyFunction, parseStyle } from './styles'
-export { isServer } from './common'
+export { isServer, Orientation } from './common'
 export {
     extractValues,
     getKeyForCustomMediaQuery,