react-native-unistyles 3.0.0-alpha.19 → 3.0.0-alpha.20

package/plugin/__tests__/stylesheet.spec.js

@@ -44,7 +44,7 @@ pluginTester({
                             style={[styles.container]}
                             ref={ref => {
                                 UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
-                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                                return () => UnistylesShadowRegistry.remove(ref)
                             }}
                         >
                             <Text>Hello world</Text>
@@ -93,7 +93,7 @@ pluginTester({
                             style={[styles.container]}
                             ref={ref => {
                                 UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
-                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                                return () => UnistylesShadowRegistry.remove(ref)
                             }}
                         >
                             <Text>Hello world</Text>
@@ -143,7 +143,7 @@ pluginTester({
                             style={[styles.container]}
                             ref={ref => {
                                 UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
-                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                                return () => UnistylesShadowRegistry.remove(ref)
                             }}
                         >
                             <Text>Hello world</Text>
@@ -194,7 +194,7 @@ pluginTester({
                             style={[styles.container]}
                             ref={ref => {
                                 UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
-                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                                return () => UnistylesShadowRegistry.remove(ref)
                             }}
                         >
                             <Text>Hello world</Text>
@@ -246,7 +246,7 @@ pluginTester({
                             style={[styles.container]}
                             ref={ref => {
                                 UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
-                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                                return () => UnistylesShadowRegistry.remove(ref)
                             }}
                         >
                             <Text>Hello world</Text>
@@ -299,7 +299,7 @@ pluginTester({
                             style={[styles.container]}
                             ref={ref => {
                                 UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
-                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                                return () => UnistylesShadowRegistry.remove(ref)
                             }}
                         >
                             <Text>Hello world</Text>
@@ -353,7 +353,7 @@ pluginTester({
                             style={[styles.container]}
                             ref={ref => {
                                 UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
-                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                                return () => UnistylesShadowRegistry.remove(ref)
                             }}
                         >
                             <Text>Hello world</Text>
@@ -409,7 +409,7 @@ pluginTester({
                             style={[styles.container]}
                             ref={ref => {
                                 UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
-                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                                return () => UnistylesShadowRegistry.remove(ref)
                             }}
                         >
                             <Text>Hello world</Text>
@@ -473,7 +473,7 @@ pluginTester({
                             style={[styles.container]}
                             ref={ref => {
                                 UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
-                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                                return () => UnistylesShadowRegistry.remove(ref)
                             }}
                         >
                             <Text>Hello world</Text>

package/plugin/index.js

@@ -34,6 +34,7 @@ module.exports = function ({ types: t }) {
                     state.file.hasUnistylesImport = false
                     state.file.styleSheetLocalName = ''
                     state.file.tagNumber = 0
+                    state.file.isClassComponent = false
                     state.reactNativeImports = {}
                 },
                 exit(path, state) {
@@ -58,6 +59,7 @@ module.exports = function ({ types: t }) {
 
                 if (componentName) {
                     state.file.hasVariants = false
+                    state.file.isClassComponent = true
                 }
             },
             VariableDeclaration(path, state) {
@@ -95,11 +97,20 @@ module.exports = function ({ types: t }) {
                 }
             },
             JSXElement(path, state) {
+                if (state.file.isClassComponent) {
+                    return
+                }
+
                 const openingElement = path.node.openingElement
                 const openingElementName = openingElement.name.name
                 const isReactNativeComponent = Boolean(state.reactNativeImports[openingElementName])
+                const isAnimatedComponent = (
+                    !isReactNativeComponent &&
+                    openingElement.name.object &&
+                    openingElement.name.object.name === 'Animated'
+                )
 
-                if (!isReactNativeComponent) {
+                if (!isReactNativeComponent && !isAnimatedComponent) {
                     return
                 }
 

package/plugin/ref.js

@@ -14,6 +14,17 @@ function hasStringRef(t, path) {
     )
 }
 
+function memberExpressionFromArray(t, identifiers) {
+    // possible for inline styles
+    if (identifiers.length === 0) {
+        return undefined
+    }
+
+    const [base, ...members] = identifiers
+
+    return members.reduce((object, property) => t.memberExpression(object, t.identifier(property)), t.identifier(base))
+}
+
 function addRef(t, path, metadata, state) {
     const hasVariants = state.file.hasVariants
 
@@ -25,9 +36,7 @@ function addRef(t, path, metadata, state) {
                     t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
                     [
                         t.identifier('ref'),
-                        metadata.styleProp
-                            ? t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))
-                            : t.identifier(metadata.styleObj),
+                        memberExpressionFromArray(t, metadata.members) || metadata.inlineStyle,
                         t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
                         metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
                     ]
@@ -37,12 +46,7 @@ function addRef(t, path, metadata, state) {
                 t.arrowFunctionExpression([],
                     t.callExpression(
                         t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
-                        [
-                            t.identifier('ref'),
-                            metadata.styleProp
-                                ? t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))
-                                : t.identifier(metadata.styleObj)
-                        ]
+                        [t.identifier('ref')]
                     )
                 )
             )
@@ -81,9 +85,7 @@ function overrideRef(t, path, refProp, metadata, state) {
                         t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
                         [
                             t.identifier(uniqueRefName),
-                            metadata.styleProp
-                                ? t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))
-                                : t.identifier(metadata.styleObj),
+                            memberExpressionFromArray(t, metadata.members) || metadata.inlineStyle,
                             t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
                             metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
                         ]
@@ -94,10 +96,7 @@ function overrideRef(t, path, refProp, metadata, state) {
                         t.callExpression(
                             t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
                             [
-                                t.identifier(uniqueRefName),
-                                metadata.styleProp
-                                    ? t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))
-                                    : t.identifier(metadata.styleObj)
+                                t.identifier(uniqueRefName)
                             ]
                         )
                     )
@@ -131,9 +130,7 @@ function overrideRef(t, path, refProp, metadata, state) {
                         t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
                         [
                             t.identifier(userRefName),
-                            metadata.styleProp
-                                ? t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))
-                                : t.identifier(metadata.styleObj),
+                            memberExpressionFromArray(t, metadata.members) || metadata.inlineStyle,
                             t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
                             metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
                         ]
@@ -151,10 +148,7 @@ function overrideRef(t, path, refProp, metadata, state) {
                             t.callExpression(
                                 t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
                                 [
-                                    t.identifier(userRefName),
-                                    metadata.styleProp
-                                        ? t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))
-                                        : t.identifier(metadata.styleObj)
+                                    t.identifier(userRefName)
                                 ]
                             )
                         )
@@ -198,9 +192,7 @@ function overrideRef(t, path, refProp, metadata, state) {
                     t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
                     [
                         t.identifier(uniqueRefName),
-                        metadata.styleProp
-                            ? t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))
-                            : t.identifier(metadata.styleObj),
+                        memberExpressionFromArray(t, metadata.members) || metadata.inlineStyle,
                         t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
                         metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
                     ]
@@ -217,14 +209,11 @@ function overrideRef(t, path, refProp, metadata, state) {
                         t.callExpression(
                             t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
                             [
-                                t.identifier(uniqueRefName),
-                                metadata.styleProp
-                                    ? t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))
-                                    : t.identifier(metadata.styleObj)
+                                t.identifier(uniqueRefName)
                             ]
                         )
                     )
-                ]))
+                ].filter(Boolean)))
             )
         ])
     )

package/plugin/style.js

@@ -1,10 +1,14 @@
 function getStyleMetadata(t, node, dynamicFunction = null) {
     // {styles.container}
     if (t.isMemberExpression(node)) {
+        const members = t.isMemberExpression(node.object)
+            ? [node.object.object.name, node.object.property.name, node.property.name]
+            : [node.object.name, node.property.name]
+
         return [
             {
-                styleObj: node.object.name,
-                styleProp: node.property.name,
+                members: members.filter(Boolean),
+                inlineStyle: undefined,
                 dynamicFunction
             }
         ]
@@ -22,7 +26,31 @@ function getStyleMetadata(t, node, dynamicFunction = null) {
 
     // {{ ...styles.container }}
     if (t.isObjectExpression(node)) {
-        return node.properties.flatMap(prop => getStyleMetadata(t, prop.argument))
+        const inlineStyles = []
+
+        const partialResult = node
+            .properties
+            .flatMap(prop => {
+                // handle inline styles
+                if (t.isObjectProperty(prop)) {
+                    inlineStyles.push(prop)
+
+                    return null
+                }
+
+                return getStyleMetadata(t, prop.argument)
+            })
+            .filter(Boolean)
+
+        if (inlineStyles.length > 0) {
+            return partialResult.concat([{
+                members: [],
+                inlineStyle: t.objectExpression(inlineStyles),
+                dynamicFunction: undefined
+            }])
+        }
+
+        return partialResult
     }
 
     // {styles.container(arg1, arg2)}
@@ -30,11 +58,10 @@ function getStyleMetadata(t, node, dynamicFunction = null) {
         return getStyleMetadata(t, node.callee, node)
     }
 
-    // {styles}
     if (t.isIdentifier(node)) {
         return [{
-            styleObj: node.name,
-            styleProp: undefined,
+            members: [node.name],
+            inlineStyle: undefined,
             dynamicFunction: undefined
         }]
     }

package/src/specs/ShadowRegistry/index.ts

@@ -8,7 +8,7 @@ interface ShadowRegistry extends UnistylesShadowRegistrySpec {
     remove(handle?: ViewHandle, style?: Unistyle): void,
     // JSI
     link(node: ShadowNode, style?: Unistyle, variants?: Record<string, string | boolean>, args?: Array<any>): void,
-    unlink(node: ShadowNode, style: Unistyle): void
+    unlink(node: ShadowNode): void
 }
 
 const HybridShadowRegistry = NitroModules.createHybridObject<ShadowRegistry>('UnistylesShadowRegistry')
@@ -32,49 +32,15 @@ HybridShadowRegistry.add = (handle, style, variants, args) => {
         return
     }
 
-    // at this point unistyle can be only object or dynamic function
-    if (typeof style !== 'object' && typeof style !== 'function') {
-        return
-    }
-
-    if (!style.__unid) {
-        console.warn(`Unistyles: Style is not bound!
-
-Potential reasons:
-a) You created a new Expo or React Native project that references StyleSheet from React Native
-b) You used the spread operator on a Unistyle style outside of a JSX component
-c) You're mixing StyleSheet styles from React Native with Unistyles
-
-a) For new projects
-If you're using a freshly generated project, replace StyleSheet imports from React Native with Unistyles:
-
-- import { StyleSheet } from 'react-native'
-+ import { StyleSheet } from 'react-native-unistyles'
-
-b) Merging styles
-If you need to merge styles, do it within the style prop of your JSX component:
-
-style={{...styles.container, ...styles.otherProp}}
-or
-style={[styles.container, styles.otherProp]}
-
-Copying a Unistyle style outside of a JSX element will remove its internal C++ state, leading to unexpected behavior.
-
-c) Mixing styles
-If you're mixing React Native and Unistyle StyleSheet styles, move your static styles into Unistyles to avoid conflicts.\n`)
-
-        return
-    }
-
     HybridShadowRegistry.link(findShadowNodeForHandle(handle), style, variants ?? {}, args ?? [])
 }
 
-HybridShadowRegistry.remove = (handle, style) => {
-    if (!handle || !style?.__unid) {
+HybridShadowRegistry.remove = handle => {
+    if (!handle) {
         return
     }
 
-    HybridShadowRegistry.unlink(findShadowNodeForHandle(handle), style)
+    HybridShadowRegistry.unlink(findShadowNodeForHandle(handle))
 }
 
 type PrivateMethods =

package/src/web/createUnistylesComponent.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react'
 import { extractHiddenProperties, extractSecrets } from './utils'
-import { UnistylesRuntime } from './runtime'
 import { getVariants } from './variants'
 import { UnistylesListener } from './listener'
+import { UnistylesRegistry } from './registry'
 
 const getStyles = (value: Record<string, any>) => {
     const secrets = extractSecrets(value)
@@ -12,9 +12,7 @@ const getStyles = (value: Record<string, any>) => {
     }
 
     return secrets.reduce((acc, { __uni__stylesheet, __uni__key, __uni__args = [], __uni__variants }) => {
-        const newComputedStylesheet = typeof __uni__stylesheet === 'function'
-            ? __uni__stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
-            : __uni__stylesheet
+        const newComputedStylesheet = UnistylesRegistry.getComputedStylesheet(__uni__stylesheet)
         const style = newComputedStylesheet[__uni__key]
         const resultHidden = typeof style === 'function'
             ? style(...__uni__args)

package/src/web/listener/listenToDependencies.ts

@@ -2,7 +2,6 @@ import type { TypeStyle } from 'typestyle'
 import type { StyleSheet, StyleSheetWithSuperPowers } from '../../types/stylesheet'
 import type { UnistyleDependency } from '../../specs/NativePlatform'
 import { UnistylesListener } from './listener'
-import { UnistylesRuntime } from '../runtime'
 import { keyInObject } from '../utils'
 import { UnistylesRegistry } from '../registry'
 
@@ -15,9 +14,7 @@ type ListenToDependenciesProps = {
 }
 
 export const listenToDependencies = ({ key, className, unistyles, args = [], stylesheet }: ListenToDependenciesProps) => {
-    const newComputedStylesheet = typeof stylesheet === 'function'
-        ? stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
-        : stylesheet
+    const newComputedStylesheet = UnistylesRegistry.getComputedStylesheet(stylesheet)
     const _value = keyInObject(newComputedStylesheet, key) ? newComputedStylesheet[key] : undefined
 
     if (!_value) {
@@ -32,9 +29,7 @@ export const listenToDependencies = ({ key, className, unistyles, args = [], sty
     }
 
     return UnistylesListener.addListeners(dependencies, () => {
-        const newComputedStylesheet = typeof stylesheet === 'function'
-            ? stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
-            : stylesheet
+        const newComputedStylesheet = UnistylesRegistry.getComputedStylesheet(stylesheet)
 
         if (!keyInObject(newComputedStylesheet, key)) {
             return

package/src/web/registry.ts

@@ -1,8 +1,40 @@
 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)

package/src/web/shadowRegistry.ts

@@ -1,7 +1,6 @@
 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'
 
@@ -64,9 +63,7 @@ class UnistylesShadowRegistryBuilder {
 
         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 newComputedStylesheet = UnistylesRegistry.getComputedStylesheet(__uni__stylesheet)
             const style = newComputedStylesheet[__uni__key]
             const args = _args ?? __uni__args
             const resultHidden = typeof style === 'function'