react-native-unistyles 3.0.0-alpha.3 → 3.0.0-alpha.31

package/src/web/registry.ts

@@ -0,0 +1,236 @@
+import type { UnistylesTheme, UnistylesValues } from '../types'
+import type { StyleSheet, StyleSheetWithSuperPowers } from '../types/stylesheet'
+import { UnistylesRuntime } from './runtime'
+import { extractMediaQueryValue, keyInObject, getMediaQuery, generateHash, extractUnistyleDependencies, deepMergeObjects } from './utils'
+import { UnistylesListener } from './listener'
+import { convertUnistyles } from './convert'
+import type { UnistyleDependency } from '../specs/NativePlatform'
+import type { UnistylesMiniRuntime } from '../specs'
+import { getVariants } from './variants'
+
+type AddProps = {
+    value: UnistylesValues,
+    stylesheet: StyleSheetWithSuperPowers<StyleSheet>,
+    key: string,
+    args: Array<any>,
+    variants: Record<string, any>
+}
+
+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.addListeners(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 = ({ key, value, stylesheet, args, variants }: AddProps) => {
+        const hash = generateHash(value)
+        const existingCounter = this.stylesCounter.get(hash)
+
+        if (!existingCounter || existingCounter.size === 0) {
+            const counter = new Set<UnistylesValues>()
+            const dependencies = extractUnistyleDependencies(value)
+
+            counter.add(value)
+            this.stylesCounter.set(hash, counter)
+            this.applyStyles(hash, convertUnistyles(value))
+
+            UnistylesListener.addListeners(dependencies, async () => {
+                // Move this callback to the end of the event loop
+                await Promise.resolve()
+
+                const newComputedStyleSheet = this.getComputedStylesheet(stylesheet)
+                const newValue = newComputedStyleSheet[key]!
+                const result = typeof newValue === 'function'
+                    ? newValue(...args)
+                    : newValue
+                const { variantsResult } = Object.fromEntries(getVariants({ variantsResult: result }, variants))
+                const resultWithVariants = deepMergeObjects(result, variantsResult ?? {})
+
+                this.applyStyles(hash, convertUnistyles(resultWithVariants))
+            })
+
+            return hash
+        }
+
+        existingCounter.add(value)
+
+        return hash
+    }
+
+    private 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}`))
+
+            this.styleTag.sheet?.deleteRule(ruleIndex)
+        }
+    }
+}
+
+export const UnistylesRegistry = new UnistylesRegistryBuilder()

package/src/web/runtime.js

@@ -0,0 +1,160 @@
+import { UnistyleDependency } from '../specs/NativePlatform';
+import { ColorScheme, Orientation } from '../specs/types';
+import { WebContentSizeCategory } from '../types';
+import { UnistylesListener } from './listener';
+import { NavigationBar, StatusBar } from './mock';
+import { UnistylesState } from './state';
+import { hexToRGBA, isServer, schemeToTheme } from './utils';
+class UnistylesRuntimeBuilder {
+    lightMedia = this.getLightMedia();
+    darkMedia = this.getDarkMedia();
+    getLightMedia() {
+        if (isServer()) {
+            return null;
+        }
+        if (!this.lightMedia) {
+            this.lightMedia = window.matchMedia('(prefers-color-scheme: light)');
+        }
+        return this.lightMedia;
+    }
+    getDarkMedia() {
+        if (isServer()) {
+            return null;
+        }
+        if (!this.darkMedia) {
+            this.darkMedia = window.matchMedia('(prefers-color-scheme: dark)');
+        }
+        return this.darkMedia;
+    }
+    get colorScheme() {
+        switch (true) {
+            case this.getLightMedia()?.matches:
+                return ColorScheme.Light;
+            case this.getDarkMedia()?.matches:
+                return ColorScheme.Dark;
+            default:
+                return ColorScheme.Unspecified;
+        }
+    }
+    get themeName() {
+        return UnistylesState.themeName;
+    }
+    get contentSizeCategory() {
+        return WebContentSizeCategory.Unspecified;
+    }
+    get breakpoint() {
+        return UnistylesState.breakpoint;
+    }
+    get orientation() {
+        if (isServer()) {
+            return Orientation.Portrait;
+        }
+        return screen.orientation.type.includes('portrait') ? Orientation.Portrait : Orientation.Landscape;
+    }
+    get theme() {
+        return this.getTheme(this.themeName);
+    }
+    get pixelRatio() {
+        return isServer() ? 1 : window.devicePixelRatio;
+    }
+    get screen() {
+        if (isServer()) {
+            return {
+                width: 0,
+                height: 0
+            };
+        }
+        return {
+            width: window.innerWidth,
+            height: window.innerHeight
+        };
+    }
+    get fontScale() {
+        return 1;
+    }
+    get insets() {
+        return {
+            top: 0,
+            bottom: 0,
+            left: 0,
+            right: 0,
+            ime: 0
+        };
+    }
+    get statusBar() {
+        return StatusBar;
+    }
+    get rtl() {
+        return isServer() ? true : document.documentElement.dir === 'rtl';
+    }
+    get hasAdaptiveThemes() {
+        return UnistylesState.hasAdaptiveThemes;
+    }
+    get navigationBar() {
+        return NavigationBar;
+    }
+    get miniRuntime() {
+        return {
+            colorScheme: this.colorScheme,
+            themeName: this.themeName,
+            contentSizeCategory: this.contentSizeCategory,
+            breakpoint: this.breakpoint,
+            isLandscape: this.orientation === Orientation.Landscape,
+            isPortrait: this.orientation === Orientation.Portrait,
+            pixelRatio: this.pixelRatio,
+            screen: this.screen,
+            fontScale: this.fontScale,
+            insets: this.insets,
+            statusBar: {
+                width: this.statusBar.width,
+                height: this.statusBar.height
+            },
+            navigationBar: {
+                width: this.navigationBar.width,
+                height: this.navigationBar.height,
+            },
+            rtl: this.rtl,
+            hasAdaptiveThemes: this.hasAdaptiveThemes
+        };
+    }
+    setTheme = (themeName) => {
+        if (themeName === UnistylesRuntime.themeName) {
+            return;
+        }
+        UnistylesState.themeName = themeName;
+        UnistylesListener.emitChange(UnistyleDependency.Theme);
+        UnistylesListener.emitChange(UnistyleDependency.ThemeName);
+    };
+    setAdaptiveThemes = (isEnabled) => {
+        UnistylesState.hasAdaptiveThemes = isEnabled;
+        if (!isEnabled) {
+            return;
+        }
+        this.setTheme(schemeToTheme(UnistylesRuntime.colorScheme));
+    };
+    setRootViewBackgroundColor = (hex, alpha) => {
+        if (isServer()) {
+            return;
+        }
+        document.documentElement.style.backgroundColor = alpha ? hexToRGBA(hex, alpha) : hex;
+    };
+    setImmersiveMode = () => { };
+    updateTheme = (themeName, updater) => {
+        const oldTheme = UnistylesState.themes.get(themeName);
+        if (!oldTheme) {
+            throw new Error(`🦄 Theme "${themeName}" is not registered!`);
+        }
+        UnistylesState.themes.set(themeName, updater(oldTheme));
+    };
+    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/{web → src/web}/runtime.ts

@@ -1,7 +1,7 @@
-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'
@@ -67,17 +67,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 +124,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,7 +160,7 @@ class UnistylesRuntimeBuilder {
             return
         }
 
-        this.setTheme(schemeToTheme(UnistylesRuntime.colorScheme))
+        this.setTheme(schemeToTheme(UnistylesRuntime.colorScheme) as AppThemeName)
     }
 
     setRootViewBackgroundColor = (hex: string, alpha?: number) => {
@@ -192,7 +183,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.js

@@ -0,0 +1,96 @@
+import { UnistylesRegistry } from './registry';
+import { createDoubleMap, deepMergeObjects, equal, extractSecrets, extractUnistyleDependencies, isInDocument } from './utils';
+import { getVariants } from './variants';
+class UnistylesShadowRegistryBuilder {
+    // MOCKS
+    name = 'UnistylesShadowRegistry';
+    __type = 'web';
+    equals = () => true;
+    toString = () => 'UnistylesShadowRegistry';
+    dispose = () => { };
+    // END MOCKS
+    resultsMap = createDoubleMap();
+    classNamesMap = createDoubleMap();
+    add = (ref, _style, _variants, _args) => {
+        // Style is not provided
+        if (!_style) {
+            return;
+        }
+        // Array of styles
+        if (Array.isArray(_style)) {
+            _style.forEach(style => this.add(ref, style, _variants, _args));
+            return;
+        }
+        // Not a unistyle
+        if (!Object.keys(_style).some(key => key.startsWith('__uni__'))) {
+            return;
+        }
+        // Ref is unmounted, remove style tags from the document
+        if (ref === null) {
+            const secrets = extractSecrets(_style);
+            secrets.forEach(({ __uni__refs, __uni__key }) => {
+                __uni__refs.forEach(ref => {
+                    if (isInDocument(ref)) {
+                        return;
+                    }
+                    const oldResult = this.resultsMap.get(ref, __uni__key);
+                    this.resultsMap.delete(ref, __uni__key);
+                    this.classNamesMap.delete(ref, __uni__key);
+                    if (oldResult) {
+                        UnistylesRegistry.remove(oldResult);
+                    }
+                });
+            });
+            return;
+        }
+        // Ref is not an HTMLElement
+        if (!(ref instanceof HTMLElement)) {
+            return;
+        }
+        extractSecrets(_style).forEach(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 args = _args ?? __uni__args;
+            const variants = _variants && Object.keys(_variants).length > 0 ? _variants : __uni__variants;
+            const result = typeof style === 'function'
+                ? style(...args)
+                : style;
+            const { variantsResult } = Object.fromEntries(getVariants({ variantsResult: result }, variants));
+            const resultWithVariants = deepMergeObjects(result, variantsResult ?? {});
+            const oldResult = this.resultsMap.get(ref, __uni__key);
+            // If results are the same do nothing
+            if (equal(oldResult, resultWithVariants)) {
+                return;
+            }
+            const oldClassNames = this.classNamesMap.get(ref, __uni__key);
+            // Remove old styles
+            if (oldResult) {
+                UnistylesRegistry.remove(oldResult);
+            }
+            // Remove old classnames from the ref
+            oldClassNames?.forEach(className => ref.classList.remove(className));
+            this.resultsMap.set(ref, __uni__key, resultWithVariants);
+            const className = UnistylesRegistry.add({
+                key: __uni__key,
+                args,
+                stylesheet: __uni__stylesheet,
+                value: resultWithVariants,
+                variants
+            });
+            const injectedClassNames = resultWithVariants?._web?._classNames ?? [];
+            const newClassNames = injectedClassNames.concat(className);
+            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);
+            this.classNamesMap.set(ref, __uni__key, newClassNames);
+            // Add new classnames to the ref
+            ref.classList.add(...newClassNames);
+        });
+    };
+    remove = () => { };
+}
+export const UnistylesShadowRegistry = new UnistylesShadowRegistryBuilder();

package/src/web/shadowRegistry.ts

@@ -0,0 +1,121 @@
+import type { UnistylesValues } from '../types'
+import { UnistylesRegistry } from './registry'
+import { createDoubleMap, deepMergeObjects, 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 = createDoubleMap<HTMLElement, string, UnistylesValues>()
+    private classNamesMap = createDoubleMap<HTMLElement, string, Array<string>>()
+
+    add = (ref: any, _style?: Style | Array<Style>, _variants?: Record<string, any>, _args?: Array<any>) => {
+        // Style is not provided
+        if (!_style) {
+            return
+        }
+
+        // Array of styles
+        if (Array.isArray(_style)) {
+            _style.forEach(style => this.add(ref, style, _variants, _args))
+
+            return
+        }
+
+        // Not a unistyle
+        if (!Object.keys(_style).some(key => key.startsWith('__uni__'))) {
+            return
+        }
+
+        // Ref is unmounted, remove style tags from the document
+        if (ref === null) {
+            const secrets = extractSecrets(_style)
+
+            secrets.forEach(({ __uni__refs, __uni__key }) => {
+                __uni__refs.forEach(ref => {
+                    if (isInDocument(ref)) {
+                        return
+                    }
+
+                    const oldResult = this.resultsMap.get(ref, __uni__key)
+                    this.resultsMap.delete(ref, __uni__key)
+                    this.classNamesMap.delete(ref, __uni__key)
+
+                    if (oldResult) {
+                        UnistylesRegistry.remove(oldResult)
+                    }
+                })
+            })
+
+            return
+        }
+
+        // Ref is not an HTMLElement
+        if (!(ref instanceof HTMLElement)) {
+            return
+        }
+
+        extractSecrets(_style).forEach(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 args = _args ?? __uni__args
+            const variants = _variants && Object.keys(_variants).length > 0 ? _variants : __uni__variants
+            const result = typeof style === 'function'
+                ? style(...args)
+                : style
+            const { variantsResult } = Object.fromEntries(getVariants({ variantsResult: result }, variants))
+            const resultWithVariants = deepMergeObjects(result, variantsResult ?? {})
+            const oldResult = this.resultsMap.get(ref, __uni__key)
+
+            // If results are the same do nothing
+            if (equal(oldResult, resultWithVariants)) {
+                return
+            }
+
+            const oldClassNames = this.classNamesMap.get(ref, __uni__key)
+
+            // Remove old styles
+            if (oldResult) {
+                UnistylesRegistry.remove(oldResult)
+            }
+
+            // Remove old classnames from the ref
+            oldClassNames?.forEach(className => ref.classList.remove(className))
+            this.resultsMap.set(ref, __uni__key, resultWithVariants)
+
+            const className = UnistylesRegistry.add({
+                key: __uni__key,
+                args,
+                stylesheet: __uni__stylesheet,
+                value: resultWithVariants,
+                variants
+            })
+            const injectedClassNames: Array<string> = resultWithVariants?._web?._classNames ?? []
+            const newClassNames = injectedClassNames.concat(className)
+            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)
+            this.classNamesMap.set(ref, __uni__key, newClassNames)
+            // Add new classnames to the ref
+            ref.classList.add(...newClassNames)
+        })
+    }
+
+    remove = () => {}
+}
+
+export const UnistylesShadowRegistry = new UnistylesShadowRegistryBuilder()