react-native-unistyles 3.0.0-beta.5 → 3.0.0-beta.7

package/src/specs/index.native.ts

@@ -1,12 +1,12 @@
 import './TurboUnistyles'
 
-import { Runtime } from './UnistylesRuntime'
+import { UnistyleDependency } from './NativePlatform'
+import { UnistylesShadowRegistry } from './ShadowRegistry'
 import { StyleSheet } from './StyleSheet'
 import type { UnistylesStyleSheet } from './StyleSheet'
-import { UnistylesShadowRegistry } from './ShadowRegistry'
+import { Runtime } from './UnistylesRuntime'
 import type { UnistylesMiniRuntime } from './UnistylesRuntime'
-import { StatusBarStyle, ColorScheme, Orientation } from './types'
-import { UnistyleDependency } from './NativePlatform'
+import { ColorScheme, Orientation, StatusBarStyle } from './types'
 
 export {
     StatusBarStyle,

package/src/types/breakpoints.ts

@@ -1,7 +1,7 @@
 import type { ColorValue, OpaqueColorValue } from 'react-native'
-import type { BreakpointsOrMediaQueries, ToDeepUnistyles } from './stylesheet'
-import type { TransformStyles } from './core'
 import type { SafeReturnType } from './common'
+import type { TransformStyles } from './core'
+import type { BreakpointsOrMediaQueries, ToDeepUnistyles } from './stylesheet'
 
 type ExtractTransformArray<T> = T extends object
     ? { [K in keyof T]: ExtractBreakpoints<T[K]> }

package/src/types/core.ts

@@ -1,3 +1,4 @@
+import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
 import type {
     MatrixTransform,
     PerspectiveTransform,
@@ -13,7 +14,6 @@ import type {
     TranslateXTransform,
     TranslateYTransform
 } from 'react-native/Libraries/StyleSheet/StyleSheetTypes'
-import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
 import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
 
 export type ShadowOffset = {

package/src/types/stylesheet.ts

@@ -1,11 +1,11 @@
-import type { BoxShadowValue, ImageStyle, TextStyle, ViewStyle, FilterFunction } from 'react-native'
-import type { ShadowOffset, TransformStyles, UnistylesTheme } from './core'
+import type { CSSProperties } from 'react'
+import type { BoxShadowValue, FilterFunction, ImageStyle, TextStyle, ViewStyle } from 'react-native'
 import type { UnistylesBreakpoints } from '../global'
 import type { UnistylesMiniRuntime } from '../specs'
+import type { Pseudo } from '../web/convert/pseudo'
 import type { ReactNativeStyleSheet } from './breakpoints'
+import type { ShadowOffset, TransformStyles, UnistylesTheme } from './core'
 import type { ExtractVariantNames } from './variants'
-import type { CSSProperties } from 'react'
-import type { Pseudo } from '../web/convert/pseudo'
 
 // these props are treated differently to nest breakpoints and media queries
 type NestedKeys = 'shadowOffset' | 'transform' | 'textShadowOffset' | 'boxShadow' | 'filter'

package/src/utils.ts

@@ -24,3 +24,20 @@ export const deepMergeObjects = <T extends Record<PropertyKey, any>>(...sources:
 
     return target
 }
+
+export const copyComponentProperties = (Component: any, UnistylesComponent: any) => {
+    Object.entries(Component).forEach(([key, value]) => {
+        // Filter out the keys we don't want to copy
+        if (['$$typeof', 'render'].includes(key)) {
+            return
+        }
+
+        UnistylesComponent[key] = value
+    })
+
+    // Those are not enumerable, so we need to copy them manually
+    UnistylesComponent.displayName = Component.displayName
+    UnistylesComponent.name = Component.name
+
+    return UnistylesComponent
+}

package/src/web/convert/index.ts

@@ -1,10 +1,10 @@
 import type { UnistylesValues } from '../../types'
+import { deepMergeObjects } from '../../utils'
+import { getBoxShadow, getFilterStyle, getTransformStyle } from './object'
 import { isPseudo } from './pseudo'
+import { getBoxShadowStyle, getTextShadowStyle } from './shadow'
 import { getStyle } from './style'
-import { deepMergeObjects } from '../../utils'
-import { getTransformStyle, getBoxShadow, getFilterStyle } from './object'
-import { isShadow, isFilter, isTextShadow, isTransform, isBoxShadow } from './utils'
-import { getTextShadowStyle, getBoxShadowStyle } from './shadow'
+import { isBoxShadow, isFilter, isShadow, isTextShadow, isTransform } from './utils'
 
 export const convertUnistyles = (value: UnistylesValues) => {
     // Flag to mark if textShadow is already created
@@ -17,7 +17,7 @@ export const convertUnistyles = (value: UnistylesValues) => {
         ...value._web
     }).flatMap(([unistylesKey, unistylesValue]) => {
         // Keys to omit
-        if (['_classNames', '_web', 'variants', 'compoundVariants', 'uni__dependencies', '__unistyles-secrets__'].includes(unistylesKey) || unistylesKey.startsWith('variant-')) {
+        if (['_classNames', '_web', 'variants', 'compoundVariants', 'uni__dependencies'].includes(unistylesKey) || unistylesKey.startsWith('unistyles_')) {
             return []
         }
 

package/src/web/convert/object/boxShadow.ts

@@ -1,7 +1,7 @@
 import type { BoxShadowValue } from 'react-native'
-import { normalizeNumericValue } from '../utils'
-import { keyInObject } from '../../utils'
 import { deepMergeObjects } from '../../../utils'
+import { keyInObject } from '../../utils'
+import { normalizeNumericValue } from '../utils'
 
 const createBoxShadowValue = (style: BoxShadowValue) => {
     const { offsetX, offsetY, blurRadius = 0, spreadDistance = 0, color = '#000', inset } = style

package/src/web/convert/object/filter.ts

@@ -1,10 +1,10 @@
 import type { DropShadowValue } from 'react-native'
+import { isUnistylesMq } from '../../../mq'
+import { UnistylesWeb } from '../../index'
 import { hyphenate } from '../../utils'
 import type { Filters } from '../types'
-import { getObjectStyle } from './objectStyle'
 import { normalizeColor, normalizeNumericValue } from '../utils'
-import { isUnistylesMq } from '../../../mq'
-import { UnistylesWeb } from '../../index'
+import { getObjectStyle } from './objectStyle'
 
 const getDropShadowStyle = (dropShadow: DropShadowValue) => {
     const { offsetX = 0, offsetY = 0, standardDeviation = 0, color = '#000' } = dropShadow

package/src/web/convert/object/transform.ts

@@ -1,6 +1,6 @@
-import { getObjectStyle } from './objectStyle'
-import { normalizeNumericValue } from '../utils'
 import type { TransformStyles } from '../../../types/core'
+import { normalizeNumericValue } from '../utils'
+import { getObjectStyle } from './objectStyle'
 
 const normalizeTransform = (key: string, value: any) => {
     if (key.includes('scale')) {

package/src/web/convert/types.ts

@@ -1,6 +1,6 @@
 import type { FilterFunction, TextStyle, ViewStyle } from 'react-native'
-import type { ToDeepUnistyles } from '../../types/stylesheet'
 import type { UnionToIntersection } from '../../types'
+import type { ToDeepUnistyles } from '../../types/stylesheet'
 
 export type ShadowOffset = ToDeepUnistyles<{ width: number, height: number }>
 

package/src/web/convert/utils.ts

@@ -1,9 +1,9 @@
 // based on react-native-web normalizer
 // https://github.com/necolas/react-native-web
 import normalizeColors from '@react-native/normalize-colors'
-import { BOX_SHADOW_STYLES, TEXT_SHADOW_STYLES, type AllShadow, type AllShadowKeys, type Filters } from './types'
-import type { TransformStyles } from '../../types/core'
 import type { BoxShadowValue } from 'react-native'
+import type { TransformStyles } from '../../types/core'
+import { type AllShadow, type AllShadowKeys, BOX_SHADOW_STYLES, type Filters, TEXT_SHADOW_STYLES } from './types'
 
 export const isTransform = (key: string, value: any): value is Array<TransformStyles> => key === 'transform' && Array.isArray(value)
 

package/src/web/create.ts

@@ -1,4 +1,4 @@
-import type { StyleSheetWithSuperPowers, StyleSheet } from '../types/stylesheet'
+import type { StyleSheet, StyleSheetWithSuperPowers } from '../types/stylesheet'
 import { UnistylesWeb } from './index'
 import { assignSecrets, error, removeInlineStyles } from './utils'
 

package/src/web/index.ts

@@ -1,8 +1,8 @@
-import { create } from './create'
-import { deepMergeObjects } from '../utils'
+import type { UnistylesShadowRegistry as NativeUnistylesShadowRegistry } from '../specs/ShadowRegistry'
 import type { StyleSheet as NativeStyleSheet } from '../specs/StyleSheet'
 import type { Runtime as NativeUnistylesRuntime } from '../specs/UnistylesRuntime'
-import type { UnistylesShadowRegistry as NativeUnistylesShadowRegistry } from '../specs/ShadowRegistry'
+import { deepMergeObjects } from '../utils'
+import { create } from './create'
 import { UnistylesServices } from './services'
 import { isServer } from './utils'
 

package/src/web/registry.ts

@@ -1,9 +1,9 @@
+import type { UnistyleDependency, UnistylesMiniRuntime } from '../specs'
 import type { UnistylesTheme, UnistylesValues } from '../types'
 import type { StyleSheet, StyleSheetWithSuperPowers } from '../types/stylesheet'
-import { generateHash, extractUnistyleDependencies, error } from './utils'
-import type { UnistylesMiniRuntime, UnistyleDependency } from '../specs'
 import { CSSState } from './css'
 import type { UnistylesServices } from './types'
+import { error, extractUnistyleDependencies, generateHash } from './utils'
 
 export class UnistylesRegistry {
     private readonly stylesheets = new Map<StyleSheetWithSuperPowers<StyleSheet>, StyleSheet>()

package/src/web/runtime.ts

@@ -1,10 +1,10 @@
 import { UnistyleDependency } from '../specs/NativePlatform'
-import { ColorScheme, Orientation, type AppTheme, type AppThemeName } from '../specs/types'
 import type { UnistylesMiniRuntime } from '../specs/UnistylesRuntime'
+import { type AppTheme, type AppThemeName, ColorScheme, Orientation } from '../specs/types'
 import { WebContentSizeCategory } from '../types'
 import { NavigationBar, StatusBar } from './mock'
-import { error, isServer, schemeToTheme } from './utils'
 import type { UnistylesServices } from './types'
+import { error, isServer, schemeToTheme } from './utils'
 
 export class UnistylesRuntime {
     lightMedia = this.getLightMedia()

package/src/web/shadowRegistry.ts

@@ -1,9 +1,9 @@
+import { UnistyleDependency } from '../specs'
 import type { UnistylesTheme, UnistylesValues } from '../types'
 import { deepMergeObjects } from '../utils'
+import type { UnistylesServices } from './types'
 import { extractSecrets, extractUnistyleDependencies } from './utils'
 import { getVariants } from './variants'
-import type { UnistylesServices } from './types'
-import { UnistyleDependency } from '../specs'
 
 export class UnistylesShadowRegistry {
     // MOCKS

package/src/web/state.ts

@@ -1,11 +1,11 @@
-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 { error, hyphenate, isServer, schemeToTheme } from './utils'
 import { UnistyleDependency } from '../specs/NativePlatform'
+import type { UnistylesConfig } from '../specs/StyleSheet'
+import type { AppBreakpoint, AppTheme, AppThemeName } from '../specs/types'
+import type { UnistylesTheme } from '../types'
 import type { UnionToIntersection } from '../types'
 import type { UnistylesServices } from './types'
+import { error, hyphenate, isServer, schemeToTheme } from './utils'
 
 type UnistylesSettings = Partial<UnionToIntersection<Required<UnistylesConfig>['settings']>>
 

package/src/web/utils/common.ts

@@ -65,5 +65,5 @@ const cyrb53 = (data: string, seed = 0) => {
 export const generateHash = (value: any) => {
     const serialized = serialize(value)
 
-    return `unistyles-${cyrb53(serialized).toString(36)}`
+    return `unistyles_${cyrb53(serialized).toString(36)}`
 }

package/src/web/utils/unistyle.ts

@@ -1,10 +1,10 @@
+import type { UnistylesBreakpoints } from '../../global'
+import { isUnistylesMq, parseMq } from '../../mq'
 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 { keyInObject, reduceObject } from './common'
-import type { UnistylesBreakpoints } from '../../global'
 import { UnistylesWeb } from '../index'
+import { keyInObject, reduceObject } from './common'
 
 export const schemeToTheme = (scheme: ColorScheme) => {
     switch (scheme) {
@@ -27,9 +27,9 @@ export const assignSecrets = <T>(object: T, secrets: UnistyleSecrets) => {
     const secretsId = Math.random().toString(36).slice(8)
 
     // @ts-expect-error assign hidden secrets
-    object[`unistyles-${secretsId}`] = {}
+    object[`unistyles_${secretsId}`] = {}
     // @ts-expect-error assign hidden secrets
-    Object.defineProperties(object[`unistyles-${secretsId}`], reduceObject(secrets, secret => ({
+    Object.defineProperties(object[`unistyles_${secretsId}`], reduceObject(secrets, secret => ({
         value: secret,
         enumerable: false,
         configurable: true
@@ -43,13 +43,19 @@ export const extractSecrets = (object: any) => {
         return undefined
     }
 
-    const [, secrets] = Object.entries(object).find(([key]) => key.startsWith('unistyles-')) ?? []
+    const [, secrets] = Object.entries(object).find(([key]) => key.startsWith('unistyles_')) ?? []
 
     if (!secrets) {
         return undefined
     }
 
-    return reduceObject(Object.getOwnPropertyDescriptors(secrets), secret => secret.value)
+    const hiddenSecrets = Object.getOwnPropertyDescriptors(secrets)
+
+    if (Object.keys(hiddenSecrets).length === 0) {
+        return undefined
+    }
+
+    return reduceObject(hiddenSecrets, secret => secret.value)
 }
 
 export const removeInlineStyles = (values: UnistylesValues) => {

package/plugin/common.js

@@ -1,142 +0,0 @@
-function getIdentifierNameFromExpression(t, memberExpression) {
-    if (t.isMemberExpression(memberExpression)) {
-        if (memberExpression.computed) {
-            return [
-                getIdentifierNameFromExpression(t, memberExpression.property),
-                getIdentifierNameFromExpression(t, memberExpression.object)
-            ].flat()
-        }
-
-        const object = memberExpression.object
-
-        // If the object is an Identifier, return its name
-        if (t.isIdentifier(object)) {
-            return [object.name]
-        }
-
-        // If the object is another MemberExpression, recursively get the identifier
-        if (t.isMemberExpression(object)) {
-            return getIdentifierNameFromExpression(t, object).flat()
-        }
-    }
-
-    if (t.isBinaryExpression(memberExpression)) {
-        return [
-            getIdentifierNameFromExpression(t, memberExpression.left),
-            getIdentifierNameFromExpression(t, memberExpression.right)
-        ].flat()
-    }
-
-    if (t.isCallExpression(memberExpression)) {
-        return getIdentifierNameFromExpression(t, memberExpression.callee)
-    }
-
-    if (t.isConditionalExpression(memberExpression)) {
-        return [
-            getIdentifierNameFromExpression(t, memberExpression.test.left),
-            getIdentifierNameFromExpression(t, memberExpression.test.right),
-            getIdentifierNameFromExpression(t, memberExpression.alternate),
-            getIdentifierNameFromExpression(t, memberExpression.consequent),
-            getIdentifierNameFromExpression(t, memberExpression.test)
-        ].flat()
-    }
-
-    if (t.isArrayExpression(memberExpression)) {
-        return memberExpression.elements.map(expression => getIdentifierNameFromExpression(t, expression)).flat()
-    }
-
-    if (t.isArrowFunctionExpression(memberExpression)) {
-        return memberExpression.body.properties.map(prop => getIdentifierNameFromExpression(t, prop.value)).flat()
-    }
-
-    if (t.isTemplateLiteral(memberExpression)) {
-        return memberExpression.expressions.map(expression => getIdentifierNameFromExpression(t, expression)).flat()
-    }
-
-    if (t.isObjectExpression(memberExpression)) {
-        return memberExpression.properties
-            .filter(property => t.isObjectProperty(property))
-            .flatMap(property => getIdentifierNameFromExpression(t, property.value))
-    }
-
-    if (t.isUnaryExpression(memberExpression)) {
-        return getIdentifierNameFromExpression(t, memberExpression.argument.object)
-    }
-
-    return []
-}
-
-function getSecondPropertyName(t, memberExpression) {
-    if (t.isUnaryExpression(memberExpression)) {
-        return getSecondPropertyName(t, memberExpression.argument.object)
-    }
-
-    if (t.isConditionalExpression(memberExpression)) {
-        return [
-            getSecondPropertyName(t, memberExpression.test.left),
-            getSecondPropertyName(t, memberExpression.test.right),
-            getSecondPropertyName(t, memberExpression.alternate),
-            getSecondPropertyName(t, memberExpression.consequent),
-            getSecondPropertyName(t, memberExpression.test)
-        ].flat()
-    }
-
-    if (t.isTemplateLiteral(memberExpression)) {
-        return memberExpression.expressions.map(expression => getSecondPropertyName(t, expression)).flat()
-    }
-
-    if (t.isBinaryExpression(memberExpression)) {
-        return [
-            getSecondPropertyName(t, memberExpression.left),
-            getSecondPropertyName(t, memberExpression.right)
-        ].flat()
-    }
-
-    if (t.isObjectExpression(memberExpression)) {
-        return memberExpression.properties
-            .filter(property => t.isObjectProperty(property))
-            .flatMap(property => getSecondPropertyName(t, property.value))
-    }
-
-    if (t.isArrayExpression(memberExpression)) {
-        return memberExpression.elements.map(expression => getSecondPropertyName(t, expression)).flat()
-    }
-
-    if (!t.isMemberExpression(memberExpression)) {
-        return []
-    }
-
-    let current = memberExpression.computed
-        ? memberExpression.property
-        : memberExpression
-    let propertyName = null
-
-    while (t.isMemberExpression(current)) {
-        propertyName = current.property
-        current = current.object
-    }
-
-    // special case for IME
-    if (propertyName && t.isIdentifier(propertyName) && propertyName.name === 'insets') {
-        if (t.isIdentifier(memberExpression.property) && memberExpression.property.name === "ime") {
-            return [memberExpression.property.name]
-        }
-
-        return [propertyName.name]
-    }
-
-    if (propertyName && t.isIdentifier(propertyName)) {
-        return [propertyName.name]
-    }
-
-    if (propertyName) {
-        return [propertyName.value]
-    }
-
-    return []
-}
-
-module.exports = {
-    getIdentifierNameFromExpression,
-    getSecondPropertyName
-}