react-native-unistyles 3.0.0-alpha.12 → 3.0.0-alpha.14

package/src/web/runtime.ts

@@ -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,121 @@
+import type { UnistylesValues } from '../types'
+import { listenToDependencies } from './listener'
+import { UnistylesRegistry } from './registry'
+import { UnistylesRuntime } from './runtime'
+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 = typeof __uni__stylesheet === 'function'
+                ? __uni__stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
+                : __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')
+
+                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/src/web/state.ts

@@ -1,4 +1,3 @@
-import { type ReactElement, createElement, createRef } from 'react'
 import type { UnistylesTheme } from '../types'
 import type { UnistylesConfig } from '../specs/StyleSheet'
 import type { AppBreakpoint, AppThemeName } from '../specs/types'
@@ -10,7 +9,6 @@ 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/src/web/utils.ts

@@ -1,26 +1,11 @@
 import { ColorScheme, type AppThemeName} from '../specs/types'
-import type { UnistylesValues } from '../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 | null, values: UnistylesValues) => {
-    const returnValue = className ? {
-        $$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/useVariants.ts

@@ -1,14 +1,10 @@
 import { useMemo, useRef, useState } from 'react'
-import type { TypeStyle } from 'typestyle'
 import type { ReactNativeStyleSheet, StyleSheet } from '../../types'
 import { equal, reduceObject } from '../utils'
-import { UnistylesRegistry } from '../registry'
 import { getVariants } from './getVariants'
 
 export const createUseVariants = (styles: ReactNativeStyleSheet<StyleSheet>, setSelectedVariants: (variants: Record<string, any>) => void) => {
     const useVariants = (selectedVariants: Record<string, any>) => {
-        const [unistylesMap] = useState(() => new Map<string, TypeStyle>())
-        const [classNameMap] = useState(() => new Map<string, string>())
         const [selectedVariantStylesMap] = useState(() => new Map<string, Record<string, any>>())
         const lastSelectedVariantsRef = useRef<Record<string, any>>()
         // Variable that determines if variants have changed and we need to recalculate styles
@@ -29,47 +25,15 @@ export const createUseVariants = (styles: ReactNativeStyleSheet<StyleSheet>, set
             return result
         }, [lastSelectedVariantsRef.current])
 
-        if (unistylesMap.size === 0 && combinedVariantStyles.length > 0) {
-            combinedVariantStyles.forEach(([key, value]) => {
-                const { className, unistyles } = UnistylesRegistry.createStyles(value, `variant-${key}`)
-
-                unistylesMap.set(key, unistyles)
-                classNameMap.set(key, className)
-            })
-        }
-
-        combinedVariantStyles.forEach(([key, value]) => {
+        combinedVariantStyles.forEach(([key]) => {
             const styleEntry = styles[key]
-            const unistyles = unistylesMap.get(key)
-            const className = classNameMap.get(key)
             const selectedVariantStyles = selectedVariantStylesMap.get(key)
 
-            if (!unistyles || !className) {
-                return
-            }
-
-            if (variantsChanged) {
-                UnistylesRegistry.updateStyles(unistyles, value, className)
-            }
-
             Object.defineProperties(styleEntry, reduceObject(selectedVariantStyles ?? {}, value => ({
                 value,
                 enumerable: false,
                 configurable: true
             })))
-
-            if (styleEntry) {
-                Object.keys(styleEntry ?? {}).forEach(key => {
-                    if (!key.startsWith('variant-')) {
-                        return
-                    }
-
-                    // @ts-expect-error - remove old variants
-                    delete styleEntry[key]
-                })
-                // @ts-expect-error - apply variant className
-                styleEntry[className] = className
-            }
         })
     }