react-native-unistyles 3.0.0-alpha.2 → 3.0.0-alpha.21

package/{web → src/web}/index.ts

@@ -1,5 +1,4 @@
 import { create } from './create'
-import { UnistylesRuntime } from './runtime'
 import { UnistylesState } from './state'
 import { deepMergeObjects } from './utils'
 
@@ -19,6 +18,8 @@ export const StyleSheet = {
 }
 
 export { UnistylesRuntime } from './runtime'
+export { UnistylesShadowRegistry } from './shadowRegistry'
 export * from './mock'
 
-export const getSSRUnistyles = () => UnistylesRuntime.getSSRUnistyles()
+// TODO: Work on SSR
+export const getSSRUnistyles = () => []

package/src/web/listener/index.ts

@@ -0,0 +1,2 @@
+export { UnistylesListener } from './listener'
+export { listenToDependencies } from './listenToDependencies'

package/src/web/listener/listenToDependencies.ts

@@ -0,0 +1,45 @@
+import type { TypeStyle } from 'typestyle'
+import type { StyleSheet, StyleSheetWithSuperPowers } from '../../types/stylesheet'
+import type { UnistyleDependency } from '../../specs/NativePlatform'
+import { UnistylesListener } from './listener'
+import { keyInObject } from '../utils'
+import { UnistylesRegistry } from '../registry'
+
+type ListenToDependenciesProps = {
+    key: PropertyKey,
+    unistyles: TypeStyle,
+    className: string,
+    stylesheet: StyleSheetWithSuperPowers<StyleSheet>
+    args?: Array<any>
+}
+
+export const listenToDependencies = ({ key, className, unistyles, args = [], stylesheet }: ListenToDependenciesProps) => {
+    const newComputedStylesheet = UnistylesRegistry.getComputedStylesheet(stylesheet)
+    const _value = keyInObject(newComputedStylesheet, key) ? newComputedStylesheet[key] : undefined
+
+    if (!_value) {
+        return
+    }
+
+    const value = typeof _value === 'function' ? _value(...args) : _value
+    const dependencies = ('uni__dependencies' in value ? value['uni__dependencies'] : []) as Array<UnistyleDependency>
+
+    if (dependencies.length === 0) {
+        return
+    }
+
+    return UnistylesListener.addListeners(dependencies, () => {
+        const newComputedStylesheet = UnistylesRegistry.getComputedStylesheet(stylesheet)
+
+        if (!keyInObject(newComputedStylesheet, key)) {
+            return
+        }
+
+        const value = newComputedStylesheet[key]!
+        const result = typeof value === 'function'
+            ? value(...args)
+            : value
+
+        UnistylesRegistry.updateStyles(unistyles, result, className)
+    })
+}

package/{web → src/web}/listener/listener.ts

@@ -1,7 +1,7 @@
-import { UnistyleDependency } from '../../src/specs/NativePlatform'
+import { UnistyleDependency } from '../../specs/NativePlatform'
 import { UnistylesRuntime } from '../runtime'
 
-export class UnistylesListenerBuilder {
+class UnistylesListenerBuilder {
     private isInitialized = false
     private listeners = Array.from({ length: Object.keys(UnistyleDependency).length / 2 }, () => new Set<VoidFunction>())
 

package/{web → src/web}/mock.ts

@@ -1,5 +1,5 @@
-import type { UnistylesNavigationBar as NavigationBarSpec } from '../src/specs/NavigtionBar'
-import type { UnistylesStatusBar as StatusBarSpec } from '../src/specs/StatusBar'
+import type { UnistylesNavigationBar as NavigationBarSpec } from '../specs/NavigtionBar'
+import type { UnistylesStatusBar as StatusBarSpec } from '../specs/StatusBar'
 
 export const StatusBar: StatusBarSpec = {
     width: 0,
@@ -23,13 +23,3 @@ export const NavigationBar: NavigationBarSpec = {
     __type: 'web',
     name: 'NavigationBar'
 }
-
-export const UnistylesShadowRegistry = {
-    name: 'UnistylesShadowRegistry',
-    __type: 'web',
-    equals: () => true,
-    toString: () => 'UnistylesShadowRegistry',
-    dispose: () => {},
-    add: () => {},
-    remove: () => {},
-}

package/src/web/pseudo.ts

@@ -0,0 +1,137 @@
+export const pseudos = [
+    '_-moz-broken',
+    '_-moz-drag-over',
+    '_-moz-first-node',
+    '_-moz-handler-blocked',
+    '_-moz-handler-crashed',
+    '_-moz-handler-disabled',
+    '_-moz-last-node',
+    '_-moz-loading',
+    '_-moz-locale-dir(ltr)',
+    '_-moz-locale-dir(rtl)',
+    '_-moz-only-whitespace',
+    '_-moz-submit-invalid',
+    '_-moz-suppressed',
+    '_-moz-user-disabled',
+    '_-moz-window-inactive',
+    '_active',
+    '_any-link',
+    '_autofill',
+    '_blank',
+    '_buffering',
+    '_checked',
+    '_current',
+    '_default',
+    '_defined',
+    '_dir(',
+    '_disabled',
+    '_empty',
+    '_enabled',
+    '_first',
+    '_first-child',
+    '_first-of-type',
+    '_focus',
+    '_focus-visible',
+    '_focus-within',
+    '_fullscreen',
+    '_future',
+    '_has(',
+    '_host',
+    '_host-context(',
+    '_host(',
+    '_hover',
+    '_in-range',
+    '_indeterminate',
+    '_invalid',
+    '_is(',
+    '_lang(',
+    '_last-child',
+    '_last-of-type',
+    '_left',
+    '_link',
+    '_local-link',
+    '_modal',
+    '_muted',
+    '_not(',
+    '_nth-child(',
+    '_nth-last-child(',
+    '_nth-last-of-type(',
+    '_nth-of-type(',
+    '_only-child',
+    '_only-of-type',
+    '_optional',
+    '_out-of-range',
+    '_past',
+    '_paused',
+    '_picture-in-picture',
+    '_placeholder-shown',
+    '_playing',
+    '_popover-open',
+    '_read-only',
+    '_read-write',
+    '_required',
+    '_right',
+    '_scope',
+    '_seeking',
+    '_stalled',
+    '_state(',
+    '_target',
+    '_target-within',
+    '_user-invalid',
+    '_user-valid',
+    '_valid',
+    '_visited',
+    '_volume-locked',
+    '_where(',
+    '_-moz-color-swatch',
+    '_-moz-focus-inner',
+    '_-moz-list-bullet',
+    '_-moz-list-number',
+    '_-moz-meter-bar',
+    '_-moz-progress-bar',
+    '_-moz-range-progress',
+    '_-moz-range-thumb',
+    '_-moz-range-track',
+    '_-webkit-inner-spin-button',
+    '_-webkit-meter-barDeprecated',
+    '_-webkit-meter-even-less-good-value',
+    '_-webkit-meter-inner-element',
+    '_-webkit-meter-optimum-value',
+    '_-webkit-meter-suboptimum-value',
+    '_-webkit-progress-bar',
+    '_-webkit-progress-inner-element',
+    '_-webkit-progress-value',
+    '_-webkit-scrollbar',
+    '_-webkit-search-cancel-button',
+    '_-webkit-search-results-button',
+    '_-webkit-slider-runnable-track',
+    '_-webkit-slider-thumb',
+    '_after',
+    '_backdrop',
+    '_before',
+    '_cue',
+    '_file-selector-button',
+    '_first-letter',
+    '_first-line',
+    '_grammar-error',
+    '_highlight(',
+    '_marker',
+    '_part(',
+    '_placeholder',
+    '_selection',
+    '_slotted(',
+    '_spelling-error',
+    '_target-text',
+    '_view-transition',
+    '_view-transition-group',
+    '_view-transition-image-pair',
+    '_view-transition-new',
+    '_view-transition-old',
+] as const
+
+export const isPseudo = (selector: string) => pseudos.some(pseudo => selector.startsWith(pseudo))
+
+type AddDynamicSelector<T extends string> = T extends `${infer U}(` ? `${U}(${string})` : T
+
+export type Pseudo = AddDynamicSelector<typeof pseudos[number]>
+

package/src/web/registry.ts

@@ -0,0 +1,60 @@
+import { createTypeStyle, TypeStyle } from 'typestyle'
+import type { UnistylesValues } from '../types'
+import { convertToTypeStyle } from './convert'
+import type { StyleSheet, StyleSheetWithSuperPowers } from '../types/stylesheet'
+import { UnistylesRuntime } from './runtime'
+import { keyInObject } from './utils'
+import { UnistylesListener } from './listener'
+
+class UnistylesRegistryBuilder {
+    private stylesheets = new Map<StyleSheetWithSuperPowers<StyleSheet>, StyleSheet>()
+
+    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)
+        // @ts-expect-error uni__dependencies is hidden
+        const dependencies = Object.values(createdStylesheet).flatMap(value => keyInObject(value, 'uni__dependencies') ? value.uni__dependencies : [])
+
+        UnistylesListener.addListeners(dependencies, () => {
+            const newComputedStylesheet = stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
+
+            this.stylesheets.set(stylesheet, newComputedStylesheet)
+        })
+
+        this.stylesheets.set(stylesheet, createdStylesheet)
+
+        return createdStylesheet
+    }
+
+    createStyles = (stylesheet: UnistylesValues, key: string) => {
+        const unistyles = createTypeStyle()
+        const typestyleStylesheet = convertToTypeStyle(stylesheet)
+
+        const className = unistyles.style({
+            $debugName: `${key}-${Math.random().toString(16).slice(10)}`,
+        }, typestyleStylesheet)
+
+        return {
+            className,
+            unistyles
+        }
+    }
+
+    updateStyles = (unistyles: TypeStyle, stylesheet: UnistylesValues, className: string) => {
+        const typestyleStylesheet = convertToTypeStyle(stylesheet)
+
+        unistyles.reinit()
+        unistyles.cssRule(`.${className}`, typestyleStylesheet)
+    }
+}
+
+export const UnistylesRegistry = new UnistylesRegistryBuilder()

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'
@@ -191,8 +191,6 @@ class UnistylesRuntimeBuilder {
 
         UnistylesState.themes.set(themeName, updater(oldTheme))
     }
-
-    getSSRUnistyles = () => UnistylesState.tags
 }
 
 export const UnistylesRuntime = new UnistylesRuntimeBuilder()

package/src/web/shadowRegistry.ts

@@ -0,0 +1,124 @@
+import type { UnistylesValues } from '../types'
+import { listenToDependencies } from './listener'
+import { UnistylesRegistry } from './registry'
+import { createDoubleMap, extractHiddenProperties, extractSecrets, isInDocument } from './utils'
+import { getVariants } from './variants'
+
+type WebUnistyle = ReturnType<typeof UnistylesRegistry.createStyles>
+
+type Style = UnistylesValues | ((...args: Array<any>) => UnistylesValues)
+
+class UnistylesShadowRegistryBuilder {
+    // MOCKS
+    name = 'UnistylesShadowRegistry'
+    __type = 'web'
+    equals = () => true
+    toString = () => 'UnistylesShadowRegistry'
+    dispose = () => {}
+    // END MOCKS
+
+    private readonly webUnistylesMap = createDoubleMap<HTMLElement, string, WebUnistyle>()
+    private readonly disposeMap = createDoubleMap<HTMLElement, string, VoidFunction | undefined>()
+    private readonly stylesMap = createDoubleMap<HTMLElement, string, HTMLStyleElement>()
+
+    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__refs.forEach(ref => {
+                    if (isInDocument(ref)) {
+                        return
+                    }
+
+                    this.remove(ref, _style)
+                })
+            })
+
+            return
+        }
+
+        // Ref is not an HTMLElement
+        if (!(ref instanceof HTMLElement)) {
+            return
+        }
+
+        extractSecrets(_style).forEach(secret => {
+            const { __uni__key, __uni__stylesheet, __uni__refs, __uni__variants, __uni__args = [] } = secret
+            const newComputedStylesheet = UnistylesRegistry.getComputedStylesheet(__uni__stylesheet)
+            const style = newComputedStylesheet[__uni__key]
+            const args = _args ?? __uni__args
+            const resultHidden = typeof style === 'function'
+                ? style(...args)
+                : style
+            const result = extractHiddenProperties(resultHidden)
+            const { variants } = Object.fromEntries(getVariants({ variants: result }, _variants && Object.keys(_variants).length > 0 ? _variants : __uni__variants))
+            const resultWithVariants = {
+                ...result,
+                ...variants
+            }
+            const storedWebUnistyle = this.webUnistylesMap.get(ref, __uni__key)
+            const webUnistyle = storedWebUnistyle ?? UnistylesRegistry.createStyles(resultWithVariants, __uni__key)
+
+            this.webUnistylesMap.set(ref, __uni__key, webUnistyle)
+            this.disposeMap.get(ref, __uni__key)?.()
+            this.disposeMap.set(ref, __uni__key, listenToDependencies({
+                key: __uni__key,
+                stylesheet: __uni__stylesheet,
+                args,
+                className: webUnistyle.className,
+                unistyles: webUnistyle.unistyles,
+            }))
+
+            if (!storedWebUnistyle) {
+                const styleTag = document.createElement('style')
+
+                const additionalClasses = resultWithVariants?._web?._classNames
+
+                if (additionalClasses) {
+                    ref.classList.add(...Array.isArray(additionalClasses) ? additionalClasses : [additionalClasses])
+                }
+
+                ref.classList.add(webUnistyle.className)
+                webUnistyle.unistyles.setStylesTarget(styleTag)
+                document.head.appendChild(styleTag)
+                __uni__refs.add(ref)
+                this.stylesMap.set(ref, __uni__key, styleTag)
+            }
+
+            if (storedWebUnistyle) {
+                UnistylesRegistry.updateStyles(webUnistyle.unistyles, resultWithVariants, webUnistyle.className)
+            }
+        })
+    }
+
+    remove = (ref: HTMLElement, style: Style) => {
+        extractSecrets(style).forEach(({ __uni__key }) => {
+            this.webUnistylesMap.delete(ref, __uni__key)
+            this.disposeMap.get(ref, __uni__key)?.()
+            this.disposeMap.delete(ref, __uni__key)
+            this.stylesMap.get(ref, __uni__key)?.remove()
+            this.stylesMap.delete(ref, __uni__key)
+        })
+    }
+}
+
+export const UnistylesShadowRegistry = new UnistylesShadowRegistryBuilder()

package/{web → src/web}/state.ts

@@ -1,16 +1,14 @@
-import { type ReactElement, createElement, createRef } from 'react'
-import type { UnistylesTheme } from '../src/types'
-import type { UnistylesConfig } from '../src/specs/StyleSheet'
-import type { AppBreakpoint, AppThemeName } from '../src/specs/types'
-import type { UnistylesBreakpoints, UnistylesThemes } from '../src/global'
+import type { UnistylesTheme } from '../types'
+import type { UnistylesConfig } from '../specs/StyleSheet'
+import type { AppBreakpoint, 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 '../src/specs/NativePlatform'
+import { UnistyleDependency } from '../specs/NativePlatform'
 
 class UnistylesStateBuilder {
     private readonly isSSR = isServer()
-    readonly tags = [] as Array<ReactElement>
 
     themes = new Map<string, UnistylesTheme>()
     themeName?: AppThemeName
@@ -101,48 +99,6 @@ class UnistylesStateBuilder {
                 })
             })
     }
-
-    createTag() {
-        if (!this.isSSR) {
-            const tag = document.createElement('style')
-
-            document.head.appendChild(tag)
-
-            return tag
-        }
-
-        const tagRef = new Proxy(createRef<HTMLStyleElement>(), {
-            set: (target, prop, value) => {
-                // When ref is assigned
-                if ('textContent' in value) {
-                    value.textContent = tag.textContent
-                }
-
-                return Reflect.set(target, prop, value)
-            }
-        })
-        const tagElement = createElement('style', { ref: tagRef, key: this.tags.length }, '')
-        const tag = new Proxy({ textContent: '' }, {
-            set: (target, prop, value) => {
-                if (prop !== 'textContent') {
-                    return false
-                }
-
-                // When css is updated
-                target.textContent = value
-
-                if (tagRef.current) {
-                    tagRef.current.textContent = value
-                }
-
-                return true
-            }
-        })
-
-        this.tags.push(tagElement)
-
-        return tag
-    }
 }
 
 export const UnistylesState = new UnistylesStateBuilder()

package/{web → src/web}/utils.ts

@@ -1,26 +1,11 @@
-import { ColorScheme, type AppThemeName} from '../src/specs/types'
-import type { UnistylesValues } from '../src/types'
+import { ColorScheme, type AppThemeName} from '../specs/types'
+import type { StyleSheet, StyleSheetWithSuperPowers, UnistylesValues } from '../types/stylesheet'
 
 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 => {
@@ -93,3 +78,92 @@ export const equal = <T>(a: T, b: T) => {
 
     return keysA.every(key => Object.is(a[key], b[key]) && Object.prototype.hasOwnProperty.call(b, key))
 }
+
+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 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)
+                })
+            })
+        }
+    }
+}
+
+export const extractHiddenProperties = (object: any) => {
+    const hiddenProperties = Object.getOwnPropertyNames(object)
+
+    return Object.fromEntries(
+        hiddenProperties
+            .filter(key => !key.startsWith('__uni__'))
+            .map(key => [key, object[key]])
+    )
+}
+
+export const isInDocument = (element: HTMLElement) => document.body.contains(element)

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

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