react-native-unistyles 3.0.0-alpha.4 → 3.0.0-alpha.41

package/{web → src/web}/index.ts

@@ -1,7 +1,6 @@
 import { create } from './create'
-import { UnistylesRuntime } from './runtime'
 import { UnistylesState } from './state'
-import { deepMergeObjects } from './utils'
+import { deepMergeObjects } from '../utils'
 
 export const StyleSheet = {
     configure: UnistylesState.init,
@@ -19,6 +18,8 @@ export const StyleSheet = {
 }
 
 export { UnistylesRuntime } from './runtime'
+export { UnistylesShadowRegistry } from './shadowRegistry'
 export * from './mock'
 
-export const getSSRUnistyles = () => UnistylesRuntime.getSSRUnistyles()
+// TODO: Work on SSR
+export const getSSRUnistyles = () => []

package/src/web/listener.ts

@@ -0,0 +1,63 @@
+import { UnistyleDependency } from '../specs/NativePlatform'
+import { UnistylesRuntime } from './runtime'
+
+class UnistylesListenerBuilder {
+    private isInitialized = false
+    private listeners = Array.from({ length: Object.keys(UnistyleDependency).length / 2 }, () => new Set<VoidFunction>())
+    private stylesheetListeners = Array.from({ length: Object.keys(UnistyleDependency).length / 2 }, () => new Set<VoidFunction>())
+
+    emitChange = (dependency: UnistyleDependency) => {
+        this.stylesheetListeners[dependency]?.forEach(listener => listener())
+        this.listeners[dependency]?.forEach(listener => listener())
+    }
+
+    initListeners = () => {
+        if (this.isInitialized) {
+            return
+        }
+
+        this.isInitialized = true
+        UnistylesRuntime.darkMedia?.addEventListener('change', event => {
+            if (!event.matches) {
+                return
+            }
+
+            this.emitChange(UnistyleDependency.ColorScheme)
+
+            if (UnistylesRuntime.hasAdaptiveThemes) {
+                this.emitChange(UnistyleDependency.Theme)
+            }
+        })
+        UnistylesRuntime.lightMedia?.addEventListener('change', event => {
+            if (!event.matches) {
+                return
+            }
+
+            this.emitChange(UnistyleDependency.ColorScheme)
+
+            if (UnistylesRuntime.hasAdaptiveThemes) {
+                this.emitChange(UnistyleDependency.Theme)
+            }
+        })
+        window.addEventListener('orientationchange', () => this.emitChange(UnistyleDependency.Orientation))
+        window.addEventListener('resize', () => this.emitChange(UnistyleDependency.Dimensions))
+    }
+
+    addListeners = (dependencies: Array<UnistyleDependency>, listener: VoidFunction) => {
+        dependencies.forEach(dependency => this.listeners[dependency]?.add(listener))
+
+        return () => {
+            dependencies.forEach(dependency => this.listeners[dependency]?.delete(listener))
+        }
+    }
+
+    addStylesheetListeners = (dependencies: Array<UnistyleDependency>, listener: VoidFunction) => {
+        dependencies.forEach(dependency => this.stylesheetListeners[dependency]?.add(listener))
+
+        return () => {
+            dependencies.forEach(dependency => this.stylesheetListeners[dependency]?.delete(listener))
+        }
+    }
+}
+
+export const UnistylesListener = new UnistylesListenerBuilder()

package/{web → src/web}/mock.ts

@@ -1,12 +1,11 @@
-import type { UnistylesNavigationBar as NavigationBarSpec } from '../src/specs/NavigtionBar'
-import type { UnistylesStatusBar as StatusBarSpec } from '../src/specs/StatusBar'
+import type { UnistylesNavigationBar as NavigationBarSpec } from '../specs/NavigtionBar'
+import type { UnistylesStatusBar as StatusBarSpec } from '../specs/StatusBar'
 
 export const StatusBar: StatusBarSpec = {
     width: 0,
     height: 0,
     setStyle: () => {},
     setHidden: () => {},
-    setBackgroundColor: () => {},
     equals: () => true,
     toString: () => 'StatusBar',
     __type: 'web',
@@ -17,19 +16,9 @@ export const NavigationBar: NavigationBarSpec = {
     width: 0,
     height: 0,
     setHidden: () => {},
-    setBackgroundColor: () => {},
     equals: () => true,
+    dispose: () => {},
     toString: () => 'NavigationBar',
     __type: 'web',
     name: 'NavigationBar'
 }
-
-export const UnistylesShadowRegistry = {
-    name: 'UnistylesShadowRegistry',
-    __type: 'web',
-    equals: () => true,
-    toString: () => 'UnistylesShadowRegistry',
-    dispose: () => {},
-    add: () => {},
-    remove: () => {},
-}

package/src/web/registry.ts

@@ -0,0 +1,215 @@
+import type { UnistylesTheme, UnistylesValues } from '../types'
+import type { StyleSheet, StyleSheetWithSuperPowers } from '../types/stylesheet'
+import { UnistylesRuntime } from './runtime'
+import { extractMediaQueryValue, keyInObject, getMediaQuery, generateHash, extractUnistyleDependencies } from './utils'
+import { UnistylesListener } from './listener'
+import { convertUnistyles } from './convert'
+import type { UnistyleDependency } from '../specs/NativePlatform'
+import type { UnistylesMiniRuntime } from '../specs'
+
+type ApplyRuleProps = {
+    hash: string,
+    key: string,
+    value: any,
+    sheet: CSSStyleSheet | CSSMediaRule
+}
+
+type RemoveReadonlyStyleKeys<T extends string> = T extends 'length' | 'parentRule' ? never : T
+
+class UnistylesRegistryBuilder {
+    private readonly stylesheets = new Map<StyleSheetWithSuperPowers<StyleSheet>, StyleSheet>()
+    private readonly stylesCounter = new Map<string, Set<UnistylesValues>>()
+    #styleTag: HTMLStyleElement | null = null
+    private readonly disposeListenersMap = new Map<object, VoidFunction>()
+    private readonly dependenciesMap = new Map<StyleSheetWithSuperPowers<StyleSheet>, Set<UnistyleDependency>>()
+
+    private get styleTag() {
+        const tag = this.#styleTag
+
+        if (!tag) {
+            const newTag = document.createElement('style')
+
+            newTag.id = 'unistyles-web'
+            this.#styleTag = newTag
+            document.head.appendChild(newTag)
+
+            return newTag
+        }
+
+        return tag
+    }
+
+    getComputedStylesheet = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>) => {
+        if (typeof stylesheet !== 'function') {
+            return stylesheet
+        }
+
+        const computedStylesheet = this.stylesheets.get(stylesheet)
+
+        if (computedStylesheet) {
+            return computedStylesheet
+        }
+
+        const createdStylesheet = stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
+        const dependencies = Object.values(createdStylesheet).flatMap(value => extractUnistyleDependencies(value))
+
+        this.addDependenciesToStylesheet(stylesheet, dependencies)
+        this.stylesheets.set(stylesheet, createdStylesheet)
+
+        return createdStylesheet
+    }
+
+    addDependenciesToStylesheet = (stylesheet: (theme: UnistylesTheme, miniRuntime: UnistylesMiniRuntime) => StyleSheet, dependencies: Array<UnistyleDependency>) => {
+        this.disposeListenersMap.get(stylesheet)?.()
+
+        const dependenciesMap = this.dependenciesMap.get(stylesheet) ?? new Set(dependencies)
+
+        dependencies.forEach(dependency => dependenciesMap.add(dependency))
+
+        const dispose = UnistylesListener.addStylesheetListeners(Array.from(dependenciesMap), () => {
+            const newComputedStylesheet = stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
+
+            this.stylesheets.set(stylesheet, newComputedStylesheet)
+        })
+
+        this.dependenciesMap.set(stylesheet, dependenciesMap)
+        this.disposeListenersMap.set(stylesheet, dispose)
+    }
+
+    add = (value: UnistylesValues) => {
+        const hash = generateHash(value)
+        const existingCounter = this.stylesCounter.get(hash)
+
+        if (!existingCounter || existingCounter.size === 0) {
+            const counter = new Set<UnistylesValues>()
+
+            counter.add(value)
+            this.stylesCounter.set(hash, counter)
+            this.applyStyles(hash, convertUnistyles(value))
+
+            return { hash, existingHash: false }
+        }
+
+        existingCounter.add(value)
+
+        return { hash, existingHash: true }
+    }
+
+    applyStyles = (hash: string, styles: Record<string, any>) => {
+        Object.entries(styles).forEach(([key, value]) => {
+            if (!this.styleTag.sheet) {
+                return
+            }
+
+            if (typeof value === 'object' && !key.startsWith('_')) {
+                const mediaQuery = getMediaQuery(key)
+                const cssRules = Array.from(this.styleTag.sheet.cssRules)
+                let queryRule = cssRules.find(rule => {
+                    if (!(rule instanceof CSSMediaRule)) {
+                        return false
+                    }
+
+                    return rule.media.item(0)?.includes(mediaQuery)
+                }) ?? null
+
+                if (!queryRule) {
+                    const mediaQueryValue = extractMediaQueryValue(mediaQuery)
+                    const ruleIndex = mediaQueryValue
+                        ? cssRules.reduce<number | undefined>((acc, rule, ruleIndex) => {
+                            if (!(rule instanceof CSSMediaRule)) {
+                                return acc
+                            }
+
+                            const ruleMediaQueryValue = extractMediaQueryValue(rule.conditionText)
+
+                            if (ruleMediaQueryValue === undefined) {
+                                return
+                            }
+
+                            return ruleMediaQueryValue > mediaQueryValue ? ruleIndex : acc
+                        }, cssRules.length)
+                        : undefined
+                    queryRule = this.styleTag.sheet.cssRules.item(this.styleTag.sheet.insertRule(`@media ${mediaQuery} {.${hash} {}}`, ruleIndex))
+                }
+
+                if (queryRule instanceof CSSMediaRule) {
+                    Object.entries(value).forEach(([mqKey, mqValue]) => {
+                        this.applyRule({
+                            hash,
+                            key: mqKey,
+                            value: mqValue,
+                            sheet: queryRule
+                        })
+                    })
+                }
+
+                return
+            }
+
+            // Pseudo
+            if (typeof value === 'object') {
+                Object.entries(value).forEach(([pseudoKey, pseudoValue]) => {
+                    this.applyRule({
+                        hash: `${hash}${key.replace('_', ':')}`,
+                        key: pseudoKey,
+                        value: pseudoValue,
+                        sheet: this.styleTag.sheet!
+                    })
+                })
+
+                return
+            }
+
+            this.applyRule({
+                hash,
+                key,
+                value,
+                sheet: this.styleTag.sheet
+            })
+        })
+    }
+
+    private applyRule = ({ hash, key, value, sheet }: ApplyRuleProps) => {
+        let rule = Array.from(sheet.cssRules).find(rule => {
+            if (!(rule instanceof CSSStyleRule)) {
+                return false
+            }
+
+            // In unistyles pseudos are prefixed with ':' but in css some of them are prefixed with '::'
+            return rule.selectorText.replace('::', ':').includes(hash)
+        }) ?? null
+
+        if (!rule) {
+            rule = sheet.cssRules.item(sheet.insertRule(`.${hash} {}`))
+        }
+
+        if (!(rule instanceof CSSStyleRule) || !keyInObject(rule.style, key)) {
+            return
+        }
+
+        rule.style[key as RemoveReadonlyStyleKeys<typeof key>] = value
+    }
+
+    remove = (value: UnistylesValues) => {
+        const hash = generateHash(value)
+        const existingStyles = this.stylesCounter.get(hash)
+
+        if (!existingStyles) {
+            return
+        }
+
+        existingStyles.delete(value)
+
+        if (existingStyles.size === 0) {
+            const ruleIndex = Array.from(this.styleTag.sheet?.cssRules ?? []).findIndex(rule => rule.cssText.includes(`.${hash}`))
+
+            if (ruleIndex === -1) {
+                return
+            }
+
+            this.styleTag.sheet?.deleteRule(ruleIndex)
+        }
+    }
+}
+
+export const UnistylesRegistry = new UnistylesRegistryBuilder()

package/{web → src/web}/runtime.ts

@@ -1,11 +1,11 @@
-import { UnistyleDependency } from '../src/specs/NativePlatform'
-import { ColorScheme, Orientation, type AppTheme, type AppThemeName } from '../src/specs/types'
-import type { UnistylesMiniRuntime } from '../src/specs/UnistylesRuntime'
-import { WebContentSizeCategory } from '../src/types'
+import { UnistyleDependency } from '../specs/NativePlatform'
+import { ColorScheme, Orientation, type AppTheme, type AppThemeName } from '../specs/types'
+import type { UnistylesMiniRuntime } from '../specs/UnistylesRuntime'
+import { WebContentSizeCategory } from '../types'
 import { UnistylesListener } from './listener'
 import { NavigationBar, StatusBar } from './mock'
 import { UnistylesState } from './state'
-import { hexToRGBA, isServer, schemeToTheme } from './utils'
+import { isServer, schemeToTheme } from './utils'
 
 class UnistylesRuntimeBuilder {
     lightMedia = this.getLightMedia()
@@ -47,6 +47,10 @@ class UnistylesRuntimeBuilder {
     }
 
     get themeName() {
+        if (UnistylesState.hasAdaptiveThemes) {
+            return schemeToTheme(this.colorScheme) as AppThemeName
+        }
+
         return UnistylesState.themeName
     }
 
@@ -54,6 +58,10 @@ class UnistylesRuntimeBuilder {
         return WebContentSizeCategory.Unspecified
     }
 
+    get breakpoints() {
+        return UnistylesState.breakpoints ?? {}
+    }
+
     get breakpoint() {
         return UnistylesState.breakpoint
     }
@@ -67,17 +75,7 @@ class UnistylesRuntimeBuilder {
     }
 
     get theme() {
-        if (!this.themeName) {
-            throw new Error('🦄 No theme selected!')
-        }
-
-        const theme = UnistylesState.themes.get(this.themeName)
-
-        if (!theme) {
-            throw new Error(`🦄 Theme "${this.themeName}" is not registered!`)
-        }
-
-        return theme
+        return this.getTheme(this.themeName)
     }
 
     get pixelRatio() {
@@ -134,7 +132,8 @@ class UnistylesRuntimeBuilder {
             themeName: this.themeName,
             contentSizeCategory: this.contentSizeCategory,
             breakpoint: this.breakpoint,
-            orientation: this.orientation,
+            isLandscape: this.orientation === Orientation.Landscape,
+            isPortrait: this.orientation === Orientation.Portrait,
             pixelRatio: this.pixelRatio,
             screen: this.screen,
             fontScale: this.fontScale,
@@ -169,15 +168,15 @@ class UnistylesRuntimeBuilder {
             return
         }
 
-        this.setTheme(schemeToTheme(UnistylesRuntime.colorScheme))
+        this.setTheme(schemeToTheme(UnistylesRuntime.colorScheme) as AppThemeName)
     }
 
-    setRootViewBackgroundColor = (hex: string, alpha?: number) => {
+    setRootViewBackgroundColor = (color: string) => {
         if (isServer()) {
             return
         }
 
-        document.documentElement.style.backgroundColor = alpha ? hexToRGBA(hex, alpha) : hex
+        document.documentElement.style.backgroundColor = color
     }
 
     setImmersiveMode = () => {}
@@ -192,7 +191,19 @@ class UnistylesRuntimeBuilder {
         UnistylesState.themes.set(themeName, updater(oldTheme))
     }
 
-    getSSRUnistyles = () => UnistylesState.tags
+    getTheme = (themeName = this.themeName) => {
+        if (!themeName) {
+            throw new Error('🦄 No theme selected!')
+        }
+
+        const theme = UnistylesState.themes.get(themeName)
+
+        if (!theme) {
+            throw new Error(`🦄 Theme "${this.themeName}" is not registered!`)
+        }
+
+        return theme
+    }
 }
 
 export const UnistylesRuntime = new UnistylesRuntimeBuilder()

package/src/web/shadowRegistry.ts

@@ -0,0 +1,145 @@
+import type { UnistylesValues } from '../types'
+import { convertUnistyles } from './convert'
+import { UnistylesListener } from './listener'
+import { UnistylesRegistry } from './registry'
+import { deepMergeObjects } from '../utils'
+import { equal, extractSecrets, extractUnistyleDependencies, isInDocument } from './utils'
+import { getVariants } from './variants'
+
+type Style = UnistylesValues | ((...args: Array<any>) => UnistylesValues)
+
+class UnistylesShadowRegistryBuilder {
+    // MOCKS
+    name = 'UnistylesShadowRegistry'
+    __type = 'web'
+    equals = () => true
+    toString = () => 'UnistylesShadowRegistry'
+    dispose = () => {}
+    // END MOCKS
+
+    private resultsMap = new Map<HTMLElement, UnistylesValues>()
+    private hashMap = new Map<HTMLElement, string>()
+    private classNamesMap = new Map<HTMLElement, Array<string>>()
+
+    add = (ref: any, _style: Array<Style>, _variants: Record<string, any> | undefined, _args: Array<Array<any>>) => {
+        // Style is not provided
+        if (!_style) {
+            return
+        }
+
+        // Ref is unmounted, remove style tags from the document
+        if (ref === null) {
+            const secrets = extractSecrets(_style)
+
+            secrets.forEach(({ __uni__refs }) => {
+                __uni__refs.forEach(ref => {
+                    if (isInDocument(ref)) {
+                        return
+                    }
+
+                    const oldResult = this.resultsMap.get(ref)
+                    this.resultsMap.delete(ref)
+                    this.classNamesMap.delete(ref)
+
+                    if (oldResult) {
+                        UnistylesRegistry.remove(oldResult)
+                    }
+                })
+            })
+
+            return
+        }
+
+        // Ref is not an HTMLElement
+        if (!(ref instanceof HTMLElement)) {
+            return
+        }
+
+        const styles = _style.filter(style => Object.keys(style ?? {}).some(key => key.startsWith('__uni__')))
+
+        // No unistyles
+        if (styles.length === 0) {
+            return
+        }
+
+        const parsedStyles = styles.flatMap((style, styleIndex) => extractSecrets(style).map(secret => {
+            const { __uni__key, __uni__stylesheet, __uni__variants, __uni__args = [], __uni__refs } = secret
+            const newComputedStylesheet = UnistylesRegistry.getComputedStylesheet(__uni__stylesheet)
+            const style = newComputedStylesheet[__uni__key]!
+            const variants = _variants && Object.keys(_variants).length > 0 ? _variants : __uni__variants
+            const args = _args[styleIndex] ? _args[styleIndex] : __uni__args
+            const result = typeof style === 'function'
+                ? style(...args)
+                : style
+            const { variantsResult } = Object.fromEntries(getVariants({ variantsResult: result }, variants))
+            const resultWithVariants = deepMergeObjects(result, variantsResult ?? {})
+            const dependencies = extractUnistyleDependencies(resultWithVariants)
+
+            if (typeof __uni__stylesheet === 'function') {
+                // Add dependencies from dynamic styles to stylesheet
+                UnistylesRegistry.addDependenciesToStylesheet(__uni__stylesheet, dependencies)
+            }
+
+            __uni__refs.add(ref)
+
+            const dispose = UnistylesListener.addListeners(extractUnistyleDependencies(resultWithVariants), () => {
+                const hash = this.hashMap.get(ref)
+
+                // Dispose listener if there is no hash
+                if (!hash) {
+                    dispose()
+
+                    return
+                }
+
+                const newComputedStyleSheet = UnistylesRegistry.getComputedStylesheet(__uni__stylesheet)
+                const newValue = newComputedStyleSheet[__uni__key]!
+                const result = typeof newValue === 'function'
+                    ? newValue(...args)
+                    : newValue
+                const { variantsResult } = Object.fromEntries(getVariants({ variantsResult: result }, variants))
+                const resultWithVariants = deepMergeObjects(result, variantsResult ?? {})
+
+                UnistylesRegistry.applyStyles(hash, convertUnistyles(resultWithVariants))
+            })
+
+            return resultWithVariants as UnistylesValues
+        }))
+        const combinedStyles = deepMergeObjects(...parsedStyles)
+        const oldStyles = this.resultsMap.get(ref)
+
+        if (equal(combinedStyles, oldStyles)) {
+            return
+        }
+
+        const oldClassNames = this.classNamesMap.get(ref)
+
+        // Remove old styles
+        if (oldStyles) {
+            UnistylesRegistry.remove(oldStyles)
+        }
+
+        // Remove old classnames from the ref
+        oldClassNames?.forEach(className => ref.classList.remove(className))
+        this.resultsMap.set(ref, combinedStyles)
+
+        const { hash, existingHash } = UnistylesRegistry.add(combinedStyles)
+        const injectedClassNames = combinedStyles?._web?._classNames ?? []
+        const newClassNames = (Array.isArray(injectedClassNames) ? injectedClassNames : [injectedClassNames]).concat(hash)
+
+        this.classNamesMap.set(ref, newClassNames)
+        // Add new classnames to the ref
+        ref.classList.add(...newClassNames)
+
+        // If it is new hash add it to the map to use for the listener
+        if (!existingHash) {
+            this.hashMap.set(ref, hash)
+        }
+
+        return newClassNames
+    }
+
+    remove = () => {}
+}
+
+export const UnistylesShadowRegistry = new UnistylesShadowRegistryBuilder()

package/src/web/state.ts

@@ -0,0 +1,94 @@
+import type { UnistylesTheme } from '../types'
+import type { UnistylesConfig } from '../specs/StyleSheet'
+import type { AppBreakpoint, AppTheme, AppThemeName } from '../specs/types'
+import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
+import { UnistylesRuntime } from './runtime'
+import { isServer, schemeToTheme } from './utils'
+import { UnistylesListener } from './listener'
+import { UnistyleDependency } from '../specs/NativePlatform'
+
+class UnistylesStateBuilder {
+    themes = new Map<string, UnistylesTheme>()
+    themeName?: AppThemeName
+
+    private matchingBreakpoints = new Map<string, boolean>()
+
+    get breakpoint() {
+        const [currentBreakpoint] = Array.from(this.matchingBreakpoints)
+            .reverse()
+            .find(([_key, value]) => value) ?? []
+
+        return currentBreakpoint as AppBreakpoint | undefined
+    }
+
+    breakpoints?: UnistylesBreakpoints
+
+    hasAdaptiveThemes = false
+
+    init = (config: UnistylesConfig) => {
+        this.initThemes(config.themes)
+        this.initBreakpoints(config.breakpoints)
+        this.initSettings(config.settings)
+
+        if (isServer()) {
+            return
+        }
+
+        UnistylesListener.initListeners()
+    }
+
+    private initThemes = (themes = {} as UnistylesThemes) => {
+        Object.entries(themes).forEach(([themeName, theme]) => {
+            this.themes.set(themeName, theme as AppTheme)
+        })
+    }
+
+    private initSettings = (settings: UnistylesConfig['settings']) => {
+        this.hasAdaptiveThemes = settings?.adaptiveThemes ?? false
+        const themeNames = Array.from(this.themes.keys()) as Array<AppThemeName>
+
+        // Single theme + no settings
+        if (!settings?.adaptiveThemes && !settings?.initialTheme && themeNames.length === 1) {
+            this.themeName = themeNames[0]
+
+            return
+        }
+
+        // No settings
+        if (!settings?.adaptiveThemes && !settings?.initialTheme) {
+            throw new Error('🦄 You need to specify either "initialTheme" or "adaptiveThemes" in your config')
+        }
+
+        // Adaptive themes
+        if (settings.adaptiveThemes) {
+            this.themeName = schemeToTheme(UnistylesRuntime.colorScheme) as AppThemeName
+
+            return
+        }
+
+        // Initial theme
+        this.themeName = typeof settings.initialTheme === 'function' ? settings.initialTheme() : settings.initialTheme
+    }
+
+    private initBreakpoints = (breakpoints = {} as UnistylesBreakpoints) => {
+        this.breakpoints = breakpoints
+
+        Object.entries(breakpoints)
+            .sort(([, a], [, b]) => a - b)
+            .forEach(([breakpoint, value]) => {
+                if (isServer()) {
+                    return
+                }
+
+                const mediaQuery = window.matchMedia(`(min-width: ${value}px)`)
+                this.matchingBreakpoints.set(breakpoint, mediaQuery.matches)
+
+                mediaQuery.addEventListener('change', event => {
+                    this.matchingBreakpoints.set(breakpoint, event.matches)
+                    UnistylesListener.emitChange(UnistyleDependency.Breakpoints)
+                })
+            })
+    }
+}
+
+export const UnistylesState = new UnistylesStateBuilder()