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

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
-            }
         })
     }