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

package/src/web/runtime.js

@@ -1,160 +0,0 @@
-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/shadowRegistry.js

@@ -1,99 +0,0 @@
-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/utils/common.js

@@ -1,79 +0,0 @@
-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

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

package/src/web/utils/unistyle.js

@@ -1,72 +0,0 @@
-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/variants/getVariants.js

@@ -1,26 +0,0 @@
-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

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

package/src/web/variants/useVariants.js

@@ -1,50 +0,0 @@
-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
-    });
-};