react-native-unistyles 3.0.0-alpha.8 → 3.0.0-beta.1

package/src/web/listener.ts

@@ -0,0 +1,65 @@
+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/src/web/mock.ts

@@ -6,7 +6,6 @@ export const StatusBar: StatusBarSpec = {
     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

@@ -1,40 +1,214 @@
-import { createTypeStyle, TypeStyle } from 'typestyle'
-import type { UnistylesValues } from '../types'
-import { convertToTypeStyle } from './convert'
-import { UnistylesState } from './state'
+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 {
-    createStyles = (stylesheet: UnistylesValues, key: string | number) => {
-        const stylesTag = UnistylesState.createTag()
-        const unistyles = createTypeStyle(stylesTag)
-        const typestyleStylesheet = convertToTypeStyle(stylesheet)
-
-        const className = unistyles.style({
-            $debugName: String(key),
-        }, typestyleStylesheet)
-
-        if (stylesheet._web?._css) {
-            const customClassName = Array.isArray(stylesheet._web._css)
-                ? stylesheet._web._css.join(' ')
-                : stylesheet._web._css
-
-            return {
-                className: `${className} ${customClassName}`,
-                unistyles
+    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 as CSSStyleSheet
+                    })
+                })
+
+                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} {}`))
         }
 
-        return {
-            className,
-            unistyles
+        if (!(rule instanceof CSSStyleRule) || !keyInObject(rule.style, key)) {
+            return
         }
+
+        rule.style[key as RemoveReadonlyStyleKeys<typeof key>] = value
     }
 
-    updateStyles = (unistyles: TypeStyle, stylesheet: UnistylesValues, className: string) => {
-        const typestyleStylesheet = convertToTypeStyle(stylesheet)
+    remove = (value: UnistylesValues) => {
+        const hash = generateHash(value)
+        const existingStyles = this.stylesCounter.get(hash)
 
-        unistyles.reinit()
-        unistyles.cssRule(`.${className}`, typestyleStylesheet)
+        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)
+        }
     }
 }
 

package/src/web/runtime.ts

@@ -5,7 +5,7 @@ import { WebContentSizeCategory } from '../types'
 import { UnistylesListener } from './listener'
 import { NavigationBar, StatusBar } from './mock'
 import { UnistylesState } from './state'
-import { hexToRGBA, isServer, schemeToTheme } from './utils'
+import { error, 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,
@@ -153,6 +152,10 @@ class UnistylesRuntimeBuilder {
     }
 
     setTheme = (themeName: AppThemeName) => {
+        if (this.hasAdaptiveThemes) {
+            throw error(`You're trying to set theme to: '${themeName}', but adaptiveThemes are enabled.`)
+        }
+
         if (themeName === UnistylesRuntime.themeName) {
             return
         }
@@ -169,15 +172,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 = () => {}
@@ -186,13 +189,21 @@ class UnistylesRuntimeBuilder {
         const oldTheme = UnistylesState.themes.get(themeName)
 
         if (!oldTheme) {
-            throw new Error(`🦄 Theme "${themeName}" is not registered!`)
+            throw error(`Unistyles: You're trying to update theme "${themeName}" but it wasn't registered.`)
         }
 
         UnistylesState.themes.set(themeName, updater(oldTheme))
     }
 
-    getSSRUnistyles = () => UnistylesState.tags
+    getTheme = (themeName = this.themeName) => {
+        const theme = UnistylesState.themes.get(themeName ?? '')
+
+        if (!themeName || !theme) {
+            throw error(`You're trying to get theme "${themeName}" but it wasn't registered.`)
+        }
+
+        return theme
+    }
 }
 
 export const UnistylesRuntime = new UnistylesRuntimeBuilder()

package/src/web/shadowRegistry.ts

@@ -0,0 +1,149 @@
+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, styles: Array<Style>, _variants: Record<string, any> | undefined, _args: Array<Array<any>>) => {
+        // Styles are not provided
+        if (!styles) {
+            return
+        }
+
+        // Ref is unmounted, remove style tags from the document
+        if (ref === null) {
+            const secrets = extractSecrets(styles)
+
+            if (secrets) {
+                secrets.__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 parsedStyles = styles.flat().flatMap((unistyleStyle, styleIndex) => {
+            if (!unistyleStyle) {
+                return []
+            }
+
+            const secrets = extractSecrets(unistyleStyle)
+
+            // Regular style
+            if (!secrets) {
+                return unistyleStyle as UnistylesValues
+            }
+
+            const { __uni__key, __uni__stylesheet, __uni__variants, __uni__args = [], __uni__refs } = secrets
+                const newComputedStylesheet = UnistylesRegistry.getComputedStylesheet(__uni__stylesheet)
+                const style = newComputedStylesheet[__uni__key] as (UnistylesValues | ((...args: any) => UnistylesValues))
+                const variants = _variants && Object.keys(_variants).length > 0 ? _variants : __uni__variants
+                const args = _args[styleIndex] && _args[styleIndex].length > 0 ? _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] as (UnistylesValues | ((...args: any) => UnistylesValues))
+                    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()