react-native-unistyles 3.0.0-alpha.9 → 3.0.0-beta.2

package/src/web/create.ts

@@ -1,105 +1,39 @@
-import type { TypeStyle } from 'typestyle'
-import type { ReactNativeStyleSheet } from '../types'
 import type { StyleSheetWithSuperPowers, StyleSheet } from '../types/stylesheet'
-import { UnistylesRegistry } from './registry'
-import { keyInObject, reduceObject, toReactNativeClassName } from './utils'
+import { assignSecrets, error, removeInlineStyles } from './utils'
 import { UnistylesRuntime } from './runtime'
-import { createUseVariants, getVariants } from './variants'
-import { UnistylesListener } from './listener'
-import type { UnistyleDependency } from '../specs/NativePlatform'
+import { UnistylesShadowRegistry } from '../specs'
 
-type ListenToDependenciesProps = {
-    value: StyleSheet[keyof StyleSheet],
-    key: PropertyKey,
-    unistyles: TypeStyle,
-    className: string,
-    args?: Array<any>
-}
+const useVariants = ['useVariants', (variants: Record<string, string | boolean>) => {
+    UnistylesShadowRegistry.selectVariants(variants)
+}]
 
-type WebUnistyle = ReturnType<typeof UnistylesRegistry.createStyles>
+export const create = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>, id?: string) => {
+    if (!id) {
+        throw error('Unistyles is not initialized correctly. Please add babel plugin to your babel config.')
+    }
 
-export const create = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>) => {
     const computedStylesheet = typeof stylesheet === 'function'
         ? stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
         : stylesheet
-    let lastlySelectedVariants: Record<string, any> = {}
-
-    const listenToDependencies = ({ key, className, unistyles, value, args = [] } : ListenToDependenciesProps) => {
-        const dependencies = ('uni__dependencies' in value ? value['uni__dependencies'] : []) as Array<UnistyleDependency>
-
-        if (dependencies.length === 0) {
-            return
-        }
 
-        return UnistylesListener.addListeners(dependencies, () => {
-            const newComputedStylesheet = typeof stylesheet === 'function'
-                ? stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
-                : stylesheet
-
-            if (!keyInObject(newComputedStylesheet, key)) {
-                return
-            }
-
-            const value = newComputedStylesheet[key]!
-            const result = typeof value === 'function'
-                ? value(...args)
-                : value
-
-            UnistylesRegistry.updateStyles(unistyles, result, className)
-        })
-    }
+    const addSecrets = (value: any, key: string, args?: Array<any>) => assignSecrets(value, {
+        __uni__key: key,
+        __uni__stylesheet: stylesheet,
+        __uni__args: args,
+        __uni__refs: new Set()
+    })
 
-    const styles = reduceObject(computedStylesheet, (value, key) => {
+    const styleSheetStyles = Object.entries(computedStylesheet).map(([key, value]) => {
         if (typeof value === 'function') {
-            const webUnistyleByRef = new Map<HTMLElement, WebUnistyle>()
-            const disposeByRef = new Map<HTMLElement, VoidFunction | undefined>()
+            return [key, (...args: Array<any>) => {
+                const result = removeInlineStyles(value(...args))
 
-            return (...args: Array<any>) => {
-                const [ref] = args.slice(-1)
-                const result = value(...args)
-                const variants = Object.fromEntries(getVariants({ [key]: result } as ReactNativeStyleSheet<StyleSheet>, lastlySelectedVariants))
-                const resultWithVariants = {
-                    ...result,
-                    ...variants[key]
-                }
-
-                if (ref instanceof HTMLElement) {
-                    const storedWebUnistyle = webUnistyleByRef.get(ref)
-                    const webUnistyle = storedWebUnistyle ?? UnistylesRegistry.createStyles(resultWithVariants, key)
-
-                    webUnistyleByRef.set(ref, webUnistyle)
-                    disposeByRef.get(ref)?.()
-                    disposeByRef.set(ref, listenToDependencies({
-                        key,
-                        value,
-                        unistyles: webUnistyle.unistyles,
-                        className: webUnistyle.className,
-                        args
-                    }))
-                    ref.classList.add(webUnistyle.className)
-
-                    if (storedWebUnistyle) {
-                        UnistylesRegistry.updateStyles(webUnistyle.unistyles, resultWithVariants, webUnistyle.className)
-                    }
-
-
-                    return
-                }
-
-                return toReactNativeClassName(null, resultWithVariants)
-            }
+                return addSecrets(result, key, args)
+            }]
         }
 
-        const { className, unistyles } = UnistylesRegistry.createStyles(value, key)
-
-        listenToDependencies({ key, value, unistyles, className })
-
-        return toReactNativeClassName(className, value)
-    }) as ReactNativeStyleSheet<StyleSheet>
-
-    createUseVariants(styles, newVariants => {
-        lastlySelectedVariants = newVariants
+        return [key, addSecrets(removeInlineStyles(value), key)]
     })
 
-    return styles
+    return Object.fromEntries(styleSheetStyles.concat([useVariants]))
 }

package/src/web/index.ts

@@ -1,11 +1,11 @@
 import { create } from './create'
-import { UnistylesRuntime } from './runtime'
 import { UnistylesState } from './state'
-import { deepMergeObjects } from './utils'
+import { deepMergeObjects } from '../utils'
+import type { CreateUnistylesStyleSheet } from '../types'
 
 export const StyleSheet = {
     configure: UnistylesState.init,
-    create,
+    create: create as CreateUnistylesStyleSheet,
     absoluteFill: {
         position: 'absolute',
         left: 0,
@@ -13,12 +13,18 @@ export const StyleSheet = {
         right: 0,
         bottom: 0,
     },
+    absoluteFillObject: {
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        right: 0,
+        bottom: 0
+    },
     compose: (a: object, b: object) => deepMergeObjects(a, b),
     flatten: (...styles: Array<object>) => deepMergeObjects(...styles),
-    hairlineWidth: 1
+    hairlineWidth: 1 as number
 }
 
 export { UnistylesRuntime } from './runtime'
+export { UnistylesShadowRegistry } from './shadowRegistry'
 export * from './mock'
-
-export const getSSRUnistyles = () => UnistylesRuntime.getSSRUnistyles()

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,223 @@
-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, error } from './utils'
+import { UnistylesListener } from './listener'
+import { convertUnistyles } from './convert'
+import type { UnistylesMiniRuntime, UnistyleDependency } 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>, scopedThemeName?: UnistylesTheme) => {
+        if (typeof stylesheet !== 'function') {
+            return stylesheet
+        }
+
+        if (scopedThemeName) {
+            const scopedTheme = UnistylesRuntime.getTheme(scopedThemeName)
+
+            if (!scopedTheme) {
+                throw error(`Unistyles: You're trying to use scoped theme '${scopedThemeName}' but it wasn't registered.`)
+            }
+
+            return stylesheet(scopedTheme, UnistylesRuntime.miniRuntime)
+        }
+
+        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, value)
+
+            return { hash, existingHash: false }
+        }
+
+        existingCounter.add(value)
+
+        return { hash, existingHash: true }
+    }
+
+    applyStyles = (hash: string, styles: Record<string, any>) => {
+        Object.entries(convertUnistyles(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)
+
+        if (!existingStyles) {
+            return
+        }
+
+        existingStyles.delete(value)
 
-        unistyles.reinit()
-        unistyles.cssRule(`.${className}`, typestyleStylesheet)
+        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

@@ -4,8 +4,10 @@ import type { UnistylesMiniRuntime } from '../specs/UnistylesRuntime'
 import { WebContentSizeCategory } from '../types'
 import { UnistylesListener } from './listener'
 import { NavigationBar, StatusBar } from './mock'
+import { error, isServer, schemeToTheme } from './utils'
+
+// Keep this import here, otherwise circular dependency will occur and break the build
 import { UnistylesState } from './state'
-import { hexToRGBA, isServer, schemeToTheme } from './utils'
 
 class UnistylesRuntimeBuilder {
     lightMedia = this.getLightMedia()
@@ -47,6 +49,10 @@ class UnistylesRuntimeBuilder {
     }
 
     get themeName() {
+        if (UnistylesState.hasAdaptiveThemes) {
+            return schemeToTheme(this.colorScheme) as AppThemeName
+        }
+
         return UnistylesState.themeName
     }
 
@@ -54,6 +60,10 @@ class UnistylesRuntimeBuilder {
         return WebContentSizeCategory.Unspecified
     }
 
+    get breakpoints() {
+        return UnistylesState.breakpoints ?? {}
+    }
+
     get breakpoint() {
         return UnistylesState.breakpoint
     }
@@ -67,17 +77,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 +134,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 +154,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 +174,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 +191,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()