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

package/src/web/state.js

@@ -0,0 +1,68 @@
+import { UnistylesRuntime } from './runtime';
+import { isServer, schemeToTheme } from './utils';
+import { UnistylesListener } from './listener';
+import { UnistyleDependency } from '../specs/NativePlatform';
+class UnistylesStateBuilder {
+    themes = new Map();
+    themeName;
+    matchingBreakpoints = new Map();
+    get breakpoint() {
+        const [currentBreakpoint] = Array.from(this.matchingBreakpoints)
+            .reverse()
+            .find(([_key, value]) => value) ?? [];
+        return currentBreakpoint;
+    }
+    breakpoints;
+    hasAdaptiveThemes = false;
+    init = (config) => {
+        this.initThemes(config.themes);
+        this.initBreakpoints(config.breakpoints);
+        this.initSettings(config.settings);
+        if (isServer()) {
+            return;
+        }
+        UnistylesListener.initListeners();
+    };
+    initThemes = (themes = {}) => {
+        Object.entries(themes).forEach(([themeName, theme]) => {
+            this.themes.set(themeName, theme);
+        });
+    };
+    initSettings = (settings) => {
+        this.hasAdaptiveThemes = settings?.adaptiveThemes ?? false;
+        const themeNames = Array.from(this.themes.keys());
+        // Single theme + no settings
+        if (!settings?.adaptiveThemes && !settings?.initialTheme && themeNames.length === 1) {
+            this.themeName = themeNames[0];
+            return;
+        }
+        // No settings
+        if (!settings?.adaptiveThemes && !settings?.initialTheme) {
+            throw new Error('🦄 You need to specify either "initialTheme" or "adaptiveThemes" in your config');
+        }
+        // Adaptive themes
+        if (settings.adaptiveThemes) {
+            this.themeName = schemeToTheme(UnistylesRuntime.colorScheme);
+            return;
+        }
+        // Initial theme
+        this.themeName = typeof settings.initialTheme === 'function' ? settings.initialTheme() : settings.initialTheme;
+    };
+    initBreakpoints = (breakpoints = {}) => {
+        this.breakpoints = breakpoints;
+        Object.entries(breakpoints)
+            .sort(([, a], [, b]) => a - b)
+            .forEach(([breakpoint, value]) => {
+            if (isServer()) {
+                return;
+            }
+            const mediaQuery = window.matchMedia(`(min-width: ${value}px)`);
+            this.matchingBreakpoints.set(breakpoint, mediaQuery.matches);
+            mediaQuery.addEventListener('change', event => {
+                this.matchingBreakpoints.set(breakpoint, event.matches);
+                UnistylesListener.emitChange(UnistyleDependency.Breakpoints);
+            });
+        });
+    };
+}
+export const UnistylesState = new UnistylesStateBuilder();

package/src/web/state.ts

@@ -0,0 +1,94 @@
+import type { UnistylesTheme } from '../types'
+import type { UnistylesConfig } from '../specs/StyleSheet'
+import type { AppBreakpoint, AppTheme, AppThemeName } from '../specs/types'
+import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
+import { UnistylesRuntime } from './runtime'
+import { isServer, schemeToTheme } from './utils'
+import { UnistylesListener } from './listener'
+import { UnistyleDependency } from '../specs/NativePlatform'
+
+class UnistylesStateBuilder {
+    themes = new Map<string, UnistylesTheme>()
+    themeName?: AppThemeName
+
+    private matchingBreakpoints = new Map<string, boolean>()
+
+    get breakpoint() {
+        const [currentBreakpoint] = Array.from(this.matchingBreakpoints)
+            .reverse()
+            .find(([_key, value]) => value) ?? []
+
+        return currentBreakpoint as AppBreakpoint | undefined
+    }
+
+    breakpoints?: UnistylesBreakpoints
+
+    hasAdaptiveThemes = false
+
+    init = (config: UnistylesConfig) => {
+        this.initThemes(config.themes)
+        this.initBreakpoints(config.breakpoints)
+        this.initSettings(config.settings)
+
+        if (isServer()) {
+            return
+        }
+
+        UnistylesListener.initListeners()
+    }
+
+    private initThemes = (themes = {} as UnistylesThemes) => {
+        Object.entries(themes).forEach(([themeName, theme]) => {
+            this.themes.set(themeName, theme as AppTheme)
+        })
+    }
+
+    private initSettings = (settings: UnistylesConfig['settings']) => {
+        this.hasAdaptiveThemes = settings?.adaptiveThemes ?? false
+        const themeNames = Array.from(this.themes.keys()) as Array<AppThemeName>
+
+        // Single theme + no settings
+        if (!settings?.adaptiveThemes && !settings?.initialTheme && themeNames.length === 1) {
+            this.themeName = themeNames[0]
+
+            return
+        }
+
+        // No settings
+        if (!settings?.adaptiveThemes && !settings?.initialTheme) {
+            throw new Error('🦄 You need to specify either "initialTheme" or "adaptiveThemes" in your config')
+        }
+
+        // Adaptive themes
+        if (settings.adaptiveThemes) {
+            this.themeName = schemeToTheme(UnistylesRuntime.colorScheme) as AppThemeName
+
+            return
+        }
+
+        // Initial theme
+        this.themeName = typeof settings.initialTheme === 'function' ? settings.initialTheme() : settings.initialTheme
+    }
+
+    private initBreakpoints = (breakpoints = {} as UnistylesBreakpoints) => {
+        this.breakpoints = breakpoints
+
+        Object.entries(breakpoints)
+            .sort(([, a], [, b]) => a - b)
+            .forEach(([breakpoint, value]) => {
+                if (isServer()) {
+                    return
+                }
+
+                const mediaQuery = window.matchMedia(`(min-width: ${value}px)`)
+                this.matchingBreakpoints.set(breakpoint, mediaQuery.matches)
+
+                mediaQuery.addEventListener('change', event => {
+                    this.matchingBreakpoints.set(breakpoint, event.matches)
+                    UnistylesListener.emitChange(UnistyleDependency.Breakpoints)
+                })
+            })
+    }
+}
+
+export const UnistylesState = new UnistylesStateBuilder()

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/{web/utils.ts → src/web/utils/common.ts}

@@ -1,46 +1,10 @@
-import { ColorScheme, type AppThemeName} from '../src/specs/types'
-import type { UnistylesValues } from '../src/types'
-
 export const reduceObject = <TObj extends Record<string, any>, TReducer>(
     obj: TObj,
     reducer: (value: TObj[keyof TObj], key: keyof TObj) => TReducer,
 ) => Object.fromEntries(Object.entries(obj).map(([key, value]) => [key, reducer(value as TObj[keyof TObj], key)])) as { [K in keyof TObj]: TReducer }
 
-export const toReactNativeClassName = (className: string, values: UnistylesValues) => {
-    const returnValue = {
-        $$css: true,
-        [className]: className
-    }
-
-    Object.defineProperties(returnValue, reduceObject(values, value => ({
-        value,
-        enumerable: false,
-        configurable: true
-    })))
-
-    return returnValue
-}
-
 export const keyInObject = <T extends Record<string, any>>(obj: T, key: PropertyKey): key is keyof T => key in obj
 
-export const schemeToTheme = (scheme: ColorScheme): AppThemeName => {
-    switch (scheme) {
-        case ColorScheme.Dark:
-            return 'dark'
-        case ColorScheme.Light:
-        default:
-            return 'light'
-    }
-}
-
-export const hexToRGBA = (hex: string, opacity: number) => hex
-    .replace('#', '')
-    .split(/(?=(?:..)*$)/)
-    .map(x => parseInt(x, 16))
-    .filter(num => !isNaN(num))
-    .reduce((acc, color) => `${acc}${color},`, 'rgba(')
-    .concat(`${opacity})`)
-
 export const isServer = () => typeof window === 'undefined'
 
 /**
@@ -93,3 +57,51 @@ export const equal = <T>(a: T, b: T) => {
 
     return keysA.every(key => Object.is(a[key], b[key]) && Object.prototype.hasOwnProperty.call(b, key))
 }
+
+export const generateHash = (value: any) => {
+    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 = <TKey, TSecondKey, TValue>() => {
+    const map = new Map<TKey, Map<TSecondKey, TValue>>()
+
+    return {
+        get: (key: TKey, secondKey: TSecondKey) => {
+            const mapForKey = map.get(key)
+
+            if (!mapForKey) {
+                return undefined
+            }
+
+            return mapForKey.get(secondKey)
+        },
+        set: (key: TKey, secondKey: TSecondKey, value: TValue) => {
+            const mapForKey = map.get(key) ?? new Map<TSecondKey, TValue>()
+
+            map.set(key, mapForKey)
+            mapForKey.set(secondKey, value)
+        },
+        delete: (key: TKey, secondKey: TSecondKey) => {
+            const mapForKey = map.get(key)
+
+            if (!mapForKey) {
+                return
+            }
+
+            mapForKey.delete(secondKey)
+        },
+        forEach: (callback: (key: TKey, secondKey: TSecondKey, value: TValue) => void) => {
+            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/index.ts

@@ -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

@@ -0,0 +1,104 @@
+import type { UnistyleDependency } from '../../specs/NativePlatform'
+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): string => {
+    switch (scheme) {
+        case ColorScheme.Dark:
+            return 'dark'
+        case ColorScheme.Light:
+        default:
+            return 'light'
+    }
+}
+
+export const hexToRGBA = (hex: string, opacity: number) => hex
+    .replace('#', '')
+    .split(/(?=(?:..)*$)/)
+    .map(x => parseInt(x, 16))
+    .filter(num => !isNaN(num))
+    .reduce((acc, color) => `${acc}${color},`, 'rgba(')
+    .concat(`${opacity})`)
+
+export type UnistyleSecrets = {
+    __uni__stylesheet: StyleSheetWithSuperPowers<StyleSheet>,
+    __uni__key: string,
+    __uni__refs: Set<HTMLElement>
+    __uni__variants: Record<string, any>
+    __uni__args?: Array<any>
+}
+
+export const assignSecrets = <T>(object: T, secrets: UnistyleSecrets) => {
+    // @ts-expect-error - assign secrets to object
+    object[`__uni__secrets__${Math.random().toString(16).slice(2)}`] = secrets
+
+    return object
+}
+
+export const extractSecrets = (object: any) => {
+    const secrets = Object.entries(object).reduce((acc, [key, value]) => {
+        if (key.startsWith('__uni__secrets__')) {
+            acc.push(value as UnistyleSecrets)
+        }
+
+        return acc
+    }, [] as Array<UnistyleSecrets>)
+
+    return secrets
+}
+
+export const getStyles = (values: UnistylesValues) => {
+    const returnValue = {}
+
+    Object.defineProperties(returnValue, reduceObject(values, value => ({
+        value,
+        enumerable: false,
+        configurable: true
+    })))
+
+    return returnValue
+}
+
+export const isInDocument = (element: HTMLElement) => document.body.contains(element)
+
+export const extractMediaQueryValue = (query: string) => {
+    const [_, px] = query.match(/(\d+)px/) ?? []
+
+    if (!px) {
+        return undefined
+    }
+
+    const value = Number(px)
+
+    return isNaN(value) ? undefined : value
+}
+
+export const getMediaQuery = (query: string) => {
+    if (Object.values(Orientation).includes(query as Orientation)) {
+        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: any) => {
+    const dependencies: Array<UnistyleDependency> = keyInObject(value, 'uni__dependencies') ? value.uni__dependencies : []
+
+    return dependencies
+}

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/getVariants.ts

@@ -0,0 +1,42 @@
+import type { ReactNativeStyleSheet, StyleSheet } from '../../types'
+import { deepMergeObjects } from '../utils'
+
+type StylesWithVariants = {
+    variants: Record<string, any>,
+    compoundVariants?: Array<Record<string, any> & {
+        styles: Record<string, any>
+    }>
+}
+const hasVariants = <T extends object>(value: [string, T]): value is [string, T & StylesWithVariants] => 'variants' in value[1]
+
+export const getVariants = (styles: ReactNativeStyleSheet<StyleSheet>, selectedVariants: Record<string, any>) => {
+    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] as const
+        })
+}

package/src/web/variants/index.js

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

package/src/web/variants/index.ts

@@ -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
+    });
+};