react-native-unistyles 3.0.0-alpha.27 → 3.0.0-alpha.28

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/src/web/runtime.ts

@@ -160,7 +160,7 @@ class UnistylesRuntimeBuilder {
             return
         }
 
-        this.setTheme(schemeToTheme(UnistylesRuntime.colorScheme))
+        this.setTheme(schemeToTheme(UnistylesRuntime.colorScheme) as AppThemeName)
     }
 
     setRootViewBackgroundColor = (hex: string, alpha?: number) => {

package/src/web/shadowRegistry.js

@@ -0,0 +1,99 @@
+import { UnistylesRegistry } from './registry';
+import { createDoubleMap, 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 = {
+                ...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/state.ts

@@ -1,6 +1,6 @@
 import type { UnistylesTheme } from '../types'
 import type { UnistylesConfig } from '../specs/StyleSheet'
-import type { AppBreakpoint, AppThemeName } from '../specs/types'
+import type { AppBreakpoint, AppTheme, AppThemeName } from '../specs/types'
 import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
 import { UnistylesRuntime } from './runtime'
 import { isServer, schemeToTheme } from './utils'
@@ -39,7 +39,7 @@ class UnistylesStateBuilder {
 
     private initThemes = (themes = {} as UnistylesThemes) => {
         Object.entries(themes).forEach(([themeName, theme]) => {
-            this.themes.set(themeName, theme)
+            this.themes.set(themeName, theme as AppTheme)
         })
     }
 
@@ -61,7 +61,7 @@ class UnistylesStateBuilder {
 
         // Adaptive themes
         if (settings.adaptiveThemes) {
-            this.themeName = schemeToTheme(UnistylesRuntime.colorScheme)
+            this.themeName = schemeToTheme(UnistylesRuntime.colorScheme) as AppThemeName
 
             return
         }

package/src/web/utils/common.js

@@ -0,0 +1,79 @@
+export const reduceObject = (obj, reducer) => Object.fromEntries(Object.entries(obj).map(([key, value]) => [key, reducer(value, key)]));
+export const keyInObject = (obj, key) => key in obj;
+export const isServer = () => typeof window === 'undefined';
+/**
+* Deeply merges properties of passed object
+*/
+export const deepMergeObjects = (...sources) => {
+    const target = {};
+    sources.forEach(source => {
+        Object.keys(source).forEach(key => {
+            const sourceValue = source[key];
+            const targetValue = target[key];
+            if (Object(sourceValue) == sourceValue && Object(targetValue) === targetValue) {
+                // @ts-expect-error - can't assign to generic
+                target[key] = deepMergeObjects(targetValue, sourceValue);
+                return;
+            }
+            // @ts-expect-error - can't assign to generic
+            target[key] = sourceValue;
+        });
+    });
+    return target;
+};
+export const warn = (message) => console.warn(`🦄 [react-native-unistyles] ${message}`);
+export const equal = (a, b) => {
+    if (Object.is(a, b)) {
+        return true;
+    }
+    if (typeof a !== 'object'
+        || a === null
+        || typeof b !== 'object'
+        || b === null) {
+        return false;
+    }
+    const keysA = Object.keys(a);
+    if (keysA.length !== Object.keys(b).length) {
+        return false;
+    }
+    return keysA.every(key => Object.is(a[key], b[key]) && Object.prototype.hasOwnProperty.call(b, key));
+};
+export const generateHash = (value) => {
+    const str = JSON.stringify(value);
+    let hasher = 5381;
+    let length = str.length;
+    while (length--)
+        hasher = (hasher * 33) ^ str.charCodeAt(length);
+    return `unistyles-${(hasher >>> 0).toString(36)}`;
+};
+export const createDoubleMap = () => {
+    const map = new Map();
+    return {
+        get: (key, secondKey) => {
+            const mapForKey = map.get(key);
+            if (!mapForKey) {
+                return undefined;
+            }
+            return mapForKey.get(secondKey);
+        },
+        set: (key, secondKey, value) => {
+            const mapForKey = map.get(key) ?? new Map();
+            map.set(key, mapForKey);
+            mapForKey.set(secondKey, value);
+        },
+        delete: (key, secondKey) => {
+            const mapForKey = map.get(key);
+            if (!mapForKey) {
+                return;
+            }
+            mapForKey.delete(secondKey);
+        },
+        forEach: (callback) => {
+            map.forEach((mapForKey, key) => {
+                mapForKey.forEach((value, secondKey) => {
+                    callback(key, secondKey, value);
+                });
+            });
+        }
+    };
+};

package/src/web/utils/index.js

@@ -0,0 +1,2 @@
+export * from './common';
+export * from './unistyle';

package/src/web/utils/unistyle.js

@@ -0,0 +1,72 @@
+import { ColorScheme, Orientation } from '../../specs/types';
+import { isUnistylesMq, parseMq } from '../mq';
+import { UnistylesState } from '../state';
+import { keyInObject, reduceObject } from './common';
+export const schemeToTheme = (scheme) => {
+    switch (scheme) {
+        case ColorScheme.Dark:
+            return 'dark';
+        case ColorScheme.Light:
+        default:
+            return 'light';
+    }
+};
+export const hexToRGBA = (hex, opacity) => hex
+    .replace('#', '')
+    .split(/(?=(?:..)*$)/)
+    .map(x => parseInt(x, 16))
+    .filter(num => !isNaN(num))
+    .reduce((acc, color) => `${acc}${color},`, 'rgba(')
+    .concat(`${opacity})`);
+export const assignSecrets = (object, secrets) => {
+    // @ts-expect-error - assign secrets to object
+    object[`__uni__secrets__${Math.random().toString(16).slice(2)}`] = secrets;
+    return object;
+};
+export const extractSecrets = (object) => {
+    const secrets = Object.entries(object).reduce((acc, [key, value]) => {
+        if (key.startsWith('__uni__secrets__')) {
+            acc.push(value);
+        }
+        return acc;
+    }, []);
+    return secrets;
+};
+export const getStyles = (values) => {
+    const returnValue = {};
+    Object.defineProperties(returnValue, reduceObject(values, value => ({
+        value,
+        enumerable: false,
+        configurable: true
+    })));
+    return returnValue;
+};
+export const isInDocument = (element) => document.body.contains(element);
+export const extractMediaQueryValue = (query) => {
+    const [_, px] = query.match(/(\d+)px/) ?? [];
+    if (!px) {
+        return undefined;
+    }
+    const value = Number(px);
+    return isNaN(value) ? undefined : value;
+};
+export const getMediaQuery = (query) => {
+    if (Object.values(Orientation).includes(query)) {
+        return `(orientation: ${query})`;
+    }
+    if (isUnistylesMq(query)) {
+        const { minWidth, maxWidth, minHeight, maxHeight } = parseMq(query);
+        return [
+            minWidth ? `(min-width: ${minWidth}px)` : undefined,
+            maxWidth ? `(max-width: ${maxWidth}px)` : undefined,
+            minHeight ? `(min-height: ${minHeight}px)` : undefined,
+            maxHeight ? `(max-height: ${maxHeight}px)` : undefined
+        ].filter(Boolean).join(' and ');
+    }
+    const minWidth = UnistylesState.breakpoints && keyInObject(UnistylesState.breakpoints, query) ? UnistylesState.breakpoints[query] : undefined;
+    return `(min-width: ${minWidth ?? 0}px)`;
+};
+export const extractUnistyleDependencies = (value) => {
+    const dependencies = keyInObject(value, 'uni__dependencies') ? value.uni__dependencies : [];
+    return dependencies;
+};

package/src/web/utils/unistyle.ts

@@ -1,11 +1,11 @@
 import type { UnistyleDependency } from '../../specs/NativePlatform'
-import { type AppThemeName, ColorScheme, Orientation } from '../../specs/types'
+import { ColorScheme, Orientation } from '../../specs/types'
 import type { StyleSheet, StyleSheetWithSuperPowers, UnistylesValues } from '../../types/stylesheet'
 import { isUnistylesMq, parseMq } from '../mq'
 import { UnistylesState } from '../state'
 import { keyInObject, reduceObject } from './common'
 
-export const schemeToTheme = (scheme: ColorScheme): AppThemeName => {
+export const schemeToTheme = (scheme: ColorScheme): string => {
     switch (scheme) {
         case ColorScheme.Dark:
             return 'dark'

package/src/web/variants/getVariants.js

@@ -0,0 +1,26 @@
+import { deepMergeObjects } from '../utils';
+const hasVariants = (value) => 'variants' in value[1];
+export const getVariants = (styles, selectedVariants) => {
+    return Object.entries(styles)
+        .filter(hasVariants)
+        .filter(([_key, { variants }]) => Object.keys(variants).some(variant => variant in variants))
+        .map(([key, { variants, compoundVariants = [] }]) => {
+        const variantStyles = Object.entries(variants).flatMap(([variant, styles]) => {
+            const selectedVariant = selectedVariants[variant];
+            const selectedVariantStyles = styles[selectedVariant] ?? styles['default'];
+            if (!selectedVariantStyles) {
+                return [];
+            }
+            return selectedVariantStyles;
+        });
+        const compoundVariantStyles = compoundVariants.flatMap(compoundVariant => {
+            const { styles, ...conditions } = compoundVariant;
+            if (Object.entries(conditions).some(([variant, value]) => String(selectedVariants[variant]) !== String(value))) {
+                return [];
+            }
+            return styles;
+        });
+        const mergedVariantStyles = deepMergeObjects(...variantStyles, ...compoundVariantStyles);
+        return [key, mergedVariantStyles];
+    });
+};

package/src/web/variants/index.js

@@ -0,0 +1,2 @@
+export * from './useVariants';
+export * from './getVariants';

package/src/web/variants/useVariants.js

@@ -0,0 +1,50 @@
+import { useMemo, useRef, useState } from 'react';
+import { equal, keyInObject, reduceObject } from '../utils';
+import { getVariants } from './getVariants';
+export const createUseVariants = (styles, setSelectedVariants) => {
+    const useVariants = (selectedVariants) => {
+        const [selectedVariantStylesMap] = useState(() => new Map());
+        const lastSelectedVariantsRef = useRef();
+        // Variable that determines if variants have changed and we need to recalculate styles
+        const variantsChanged = !equal(lastSelectedVariantsRef.current, selectedVariants);
+        if (variantsChanged) {
+            lastSelectedVariantsRef.current = selectedVariants;
+            setSelectedVariants(selectedVariants);
+        }
+        const combinedVariantStyles = useMemo(() => {
+            const result = getVariants(styles, selectedVariants);
+            result.forEach(([key, value]) => {
+                selectedVariantStylesMap.set(key, value);
+            });
+            return result;
+        }, [lastSelectedVariantsRef.current]);
+        combinedVariantStyles.forEach(([key]) => {
+            const styleEntry = styles[key];
+            if (!styleEntry) {
+                return;
+            }
+            const selectedVariantStyles = selectedVariantStylesMap.get(key);
+            Object.defineProperties(styleEntry, reduceObject(selectedVariantStyles ?? {}, value => ({
+                value,
+                enumerable: false,
+                configurable: true
+            })));
+            // Add __uni__variants to static styles
+            Object.keys(styleEntry).forEach(key => {
+                if (!key.startsWith('__uni__secrets__')) {
+                    return;
+                }
+                const secret = keyInObject(styleEntry, key) ? styleEntry[key] : undefined;
+                if (!secret) {
+                    return;
+                }
+                Object.defineProperty(secret, '__uni__variants', {
+                    value: selectedVariants
+                });
+            });
+        });
+    };
+    Object.defineProperty(styles, 'useVariants', {
+        value: useVariants
+    });
+};