@niibase/uniwind 1.7.0 → 1.8.0

package/src/core/native/store.ts

@@ -2,8 +2,7 @@ import { Dimensions, Platform } from 'react-native'
 import type { CSSAnimationKeyframes } from 'react-native-reanimated'
 import { Orientation, Platform as UniwindPlatform, StyleDependency, UNIWIND_PLATFORM_VARIABLES, UNIWIND_THEME_VARIABLES } from '../../common/consts'
 import { UniwindListener } from '../listener'
-import type { ComponentState, GenerateStyleSheetsCallback, RNStyle, Style, StyleSheets, ThemeName, UniwindContextType } from '../types'
-import { cloneWithAccessors } from './native-utils'
+import type { ComponentState, GenerateStyleSheetsCallback, RNStyle, Style, StyleSheets, ThemeName, UniwindContextType, Var, Vars } from '../types'
 import {
     parseBoxShadow,
     parseFontVariant,
@@ -24,8 +23,7 @@ const emptyState: StylesResult = { styles: {}, dependencies: [], dependencySum:
 
 class UniwindStoreBuilder {
     runtime = UniwindRuntime
-    vars = {} as Record<ThemeName, Record<string, unknown>>
-
+    vars = {} as Record<ThemeName, Vars>
     private stylesheet = {} as StyleSheets
     private keyframes = {} as Record<string, CSSAnimationKeyframes>
     private cache = {} as Record<ThemeName, Map<string, StylesResult>>
@@ -72,21 +70,21 @@ class UniwindStoreBuilder {
         const platformVars = scopedVars[`${UNIWIND_PLATFORM_VARIABLES}${platform}`]
 
         if (commonPlatformVars) {
-            Object.defineProperties(vars, Object.getOwnPropertyDescriptors(commonPlatformVars))
+            Object.assign(vars, commonPlatformVars)
         }
 
         if (platformVars) {
-            Object.defineProperties(vars, Object.getOwnPropertyDescriptors(platformVars))
+            Object.assign(vars, platformVars)
         }
 
         this.keyframes = keyframes
         this.stylesheet = stylesheet
         this.vars = Object.fromEntries(themes.map(theme => {
-            const clonedVars = cloneWithAccessors(vars)
+            const clonedVars = Object.create(vars) as Vars
             const themeVars = scopedVars[`${UNIWIND_THEME_VARIABLES}${theme}`]
 
             if (themeVars) {
-                Object.defineProperties(clonedVars, Object.getOwnPropertyDescriptors(themeVars))
+                Object.assign(clonedVars, themeVars)
             }
 
             return [theme, clonedVars]
@@ -104,7 +102,7 @@ class UniwindStoreBuilder {
         state: ComponentState | undefined,
         uniwindContext: UniwindContextType,
     ) {
-        const result = {} as Record<string, any>
+        const resultGetters = {} as Record<string, Var>
         const theme = uniwindContext.scopedTheme ?? this.runtime.currentThemeName
         // At this point we're sure that theme is correct
         let vars = this.vars[theme]!
@@ -167,20 +165,12 @@ class UniwindStoreBuilder {
                     if (property[0] === '-') {
                         // Clone vars object if we are adding inline variables
                         if (vars === originalVars) {
-                            vars = cloneWithAccessors(originalVars)
+                            vars = Object.create(originalVars)
                         }
 
-                        Object.defineProperty(vars, property, {
-                            configurable: true,
-                            enumerable: true,
-                            get: valueGetter,
-                        })
+                        vars[property] = valueGetter
                     } else {
-                        Object.defineProperty(result, property, {
-                            configurable: true,
-                            enumerable: true,
-                            get: () => valueGetter.call(vars),
-                        })
+                        resultGetters[property] = valueGetter
                     }
 
                     bestBreakpoints.set(property, style)
@@ -188,81 +178,49 @@ class UniwindStoreBuilder {
             }
         }
 
+        const result = Object.fromEntries(
+            Object.entries(resultGetters).map(([property, valueGetter]) => [property, valueGetter(vars)]),
+        ) as Record<string, any>
+
         if (result.lineHeight !== undefined && result.lineHeight < 6) {
-            Object.defineProperty(result, 'lineHeight', {
-                value: result.fontSize * result.lineHeight,
-                configurable: true,
-                enumerable: true,
-            })
+            result.lineHeight *= result.fontSize
         }
 
         if (result.boxShadow !== undefined) {
-            Object.defineProperty(result, 'boxShadow', {
-                value: parseBoxShadow(result.boxShadow),
-                configurable: true,
-                enumerable: true,
-            })
+            result.boxShadow = parseBoxShadow(result.boxShadow)
         }
 
         if (result.visibility === 'hidden') {
-            Object.defineProperty(result, 'display', {
-                value: 'none',
-                configurable: true,
-                enumerable: true,
-            })
+            result.display = 'none'
         }
 
         if (
             result.borderStyle !== undefined && result.borderColor === undefined
         ) {
-            Object.defineProperty(result, 'borderColor', {
-                value: '#000000',
-                configurable: true,
-                enumerable: true,
-            })
+            result.borderColor = '#000000'
         }
 
         if (
             result.outlineStyle !== undefined && result.outlineColor === undefined
         ) {
-            Object.defineProperty(result, 'outlineColor', {
-                value: '#000000',
-                configurable: true,
-                enumerable: true,
-            })
+            result.outlineColor = '#000000'
         }
 
         if (result.fontVariant !== undefined) {
-            Object.defineProperty(result, 'fontVariant', {
-                value: parseFontVariant(result.fontVariant),
-                configurable: true,
-                enumerable: true,
-            })
+            result.fontVariant = parseFontVariant(result.fontVariant)
         }
 
         parseTransformsMutation(result)
         parseTransitionsMutation(result)
 
         if (typeof result.animationName === 'string') {
-            Object.defineProperty(result, 'animationName', {
-                value: this.keyframes[result.animationName] ?? [],
-                configurable: true,
-                enumerable: true,
-            })
+            result.animationName = this.keyframes[result.animationName] ?? []
         } else if (Array.isArray(result.animationName)) {
-            Object.defineProperty(result, 'animationName', {
-                value: result.animationName.map(animationName => this.keyframes[animationName] ?? undefined).filter(Boolean),
-                configurable: true,
-                enumerable: true,
-            })
+            result.animationName = result.animationName.map(animationName => this.keyframes[animationName] ?? undefined).filter(Boolean)
         }
 
         if (result.experimental_backgroundImage !== undefined) {
-            Object.defineProperty(result, 'experimental_backgroundImage', {
-                value: resolveGradient(result.experimental_backgroundImage),
-                configurable: true,
-                enumerable: true,
-            })
+            result.experimental_backgroundImage = resolveGradient(result.experimental_backgroundImage)
         }
 
         if (result.textShadow !== undefined) {
@@ -270,7 +228,7 @@ class UniwindStoreBuilder {
         }
 
         return {
-            styles: { ...result } as RNStyle,
+            styles: result,
             dependencies: Array.from(dependencies),
             dependencySum,
             hasDataAttributes,

package/src/core/types.ts

@@ -5,12 +5,15 @@ import type { ControlPoint, CubicBezierEasing, LinearEasing, StepsEasing, StepsM
 import type { ColorScheme, Orientation, StyleDependency } from '../common/consts'
 import type { UniwindContext } from './context'
 
+export type Vars = Record<PropertyKey, Var>
+export type Var = (vars: Vars) => unknown
+
 export type Style = {
-    entries: Array<[string, () => unknown]>
+    entries: Array<[string, Var]>
     minWidth: number
     maxWidth: number
     orientation: Orientation | null
-    theme: ColorScheme | null
+    theme: ThemeName | null
     rtl: boolean | null
     native: boolean
     dependencies: Array<StyleDependency> | null
@@ -28,9 +31,9 @@ export type StyleSheets = Record<string, Array<Style>>
 
 export type GenerateStyleSheetsCallback = (rt: UniwindRuntime) => {
     stylesheet: StyleSheets
-    vars: Record<string, unknown>
+    vars: Vars
     keyframes: Record<string, CSSAnimationKeyframes>
-    scopedVars: Partial<Record<string, Record<string, unknown>>>
+    scopedVars: Partial<Record<string, Vars>>
 }
 
 export interface UniwindConfig {}

package/src/hooks/useCSSVariable/getVariableValue.native.ts

@@ -1,5 +1,8 @@
 import { UniwindRuntime, UniwindStore } from '../../core/native'
 import type { UniwindContextType } from '../../core/types'
 
-export const getVariableValue = (name: string, uniwindContext: UniwindContextType) =>
-    UniwindStore.vars[uniwindContext.scopedTheme ?? UniwindRuntime.currentThemeName]?.[name]
+export const getVariableValue = (name: string, uniwindContext: UniwindContextType) => {
+    const vars = UniwindStore.vars[uniwindContext.scopedTheme ?? UniwindRuntime.currentThemeName]
+
+    return vars?.[name]?.(vars)
+}