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

package/nitrogen/generated/android/kotlin/com/margelo/nitro/unistyles/HybridNativePlatformSpec.kt

@@ -21,10 +21,8 @@ import com.margelo.nitro.core.*
 @Keep
 @Suppress("RedundantSuppression", "KotlinJniMissingFunction", "PropertyName", "RedundantUnitReturnType", "unused")
 abstract class HybridNativePlatformSpec: HybridObject() {
-  protected val TAG = "HybridNativePlatformSpec"
-
   @DoNotStrip
-  val mHybridData: HybridData = initHybrid()
+  private var mHybridData: HybridData = initHybrid()
 
   init {
     // Pass this `HybridData` through to it's base class,
@@ -32,6 +30,13 @@ abstract class HybridNativePlatformSpec: HybridObject() {
     super.updateNative(mHybridData)
   }
 
+  /**
+   * Call from a child class to initialize HybridData with a child.
+   */
+  override fun updateNative(hybridData: HybridData) {
+    mHybridData = hybridData
+  }
+
   // Properties
   
 

package/nitrogen/generated/ios/c++/HybridNativePlatformSpecSwift.hpp

@@ -55,7 +55,7 @@ namespace margelo::nitro::unistyles {
    * the future, HybridNativePlatformSpecCxx can directly inherit from the C++ class HybridNativePlatformSpec
    * to simplify the whole structure and memory management.
    */
-  class HybridNativePlatformSpecSwift final: public HybridNativePlatformSpec {
+  class HybridNativePlatformSpecSwift: public virtual HybridNativePlatformSpec {
   public:
     // Constructor from a Swift instance
     explicit HybridNativePlatformSpecSwift(const Unistyles::HybridNativePlatformSpecCxx& swiftPart):

package/nitrogen/generated/ios/swift/HybridNativePlatformSpec.swift

@@ -27,7 +27,7 @@ import NitroModules
  * }
  * ```
  */
-public protocol HybridNativePlatformSpec: HybridObjectSpec {
+public protocol HybridNativePlatformSpec: AnyObject, HybridObjectSpec {
   // Properties
   
 

package/nitrogen/generated/ios/swift/HybridNativePlatformSpecCxx.swift

@@ -17,7 +17,7 @@ import NitroModules
  * - Other HybridObjects need to be wrapped/unwrapped from the Swift TCxx wrapper
  * - Throwing methods need to be wrapped with a Result<T, Error> type, as exceptions cannot be propagated to C++
  */
-public final class HybridNativePlatformSpecCxx {
+public class HybridNativePlatformSpecCxx {
   /**
    * The Swift <> C++ bridge's namespace (`margelo::nitro::unistyles::bridge::swift`)
    * from `Unistyles-Swift-Cxx-Bridge.hpp`.
@@ -28,7 +28,15 @@ public final class HybridNativePlatformSpecCxx {
   /**
    * Holds an instance of the `HybridNativePlatformSpec` Swift protocol.
    */
-  private(set) var implementation: HybridNativePlatformSpec
+  private var implementation: HybridNativePlatformSpec
+
+  /**
+   * Get the actual `HybridNativePlatformSpec` instance this class wraps.
+   */
+  @inline(__always)
+  public func getHybridNativePlatformSpec() -> HybridNativePlatformSpec {
+    return implementation
+  }
 
   /**
    * Create a new `HybridNativePlatformSpecCxx` that wraps the given `HybridNativePlatformSpec`.
@@ -36,15 +44,18 @@ public final class HybridNativePlatformSpecCxx {
    */
   public init(_ implementation: HybridNativePlatformSpec) {
     self.implementation = implementation
+    /* no base class */
   }
 
   /**
    * Contains a (weak) reference to the C++ HybridObject to cache it.
    */
   public var hybridContext: margelo.nitro.HybridContext {
+    @inline(__always)
     get {
       return self.implementation.hybridContext
     }
+    @inline(__always)
     set {
       self.implementation.hybridContext = newValue
     }
@@ -54,6 +65,7 @@ public final class HybridNativePlatformSpecCxx {
    * Get the memory size of the Swift class (plus size of any other allocations)
    * so the JS VM can properly track it and garbage-collect the JS object if needed.
    */
+  @inline(__always)
   public var memorySize: Int {
     return self.implementation.memorySize
   }

package/nitrogen/generated/shared/c++/HybridNativePlatformSpec.hpp

@@ -43,9 +43,12 @@ namespace margelo::nitro::unistyles {
   /**
    * An abstract base class for `NativePlatform`
    * Inherit this class to create instances of `HybridNativePlatformSpec` in C++.
+   * You must explicitly call `HybridObject`'s constructor yourself, because it is virtual.
    * @example
    * ```cpp
    * class HybridNativePlatform: public HybridNativePlatformSpec {
+   * public:
+   *   HybridNativePlatform(...): HybridObject(TAG) { ... }
    *   // ...
    * };
    * ```

package/nitrogen/generated/shared/c++/HybridUnistylesNavigationBarSpec.hpp

@@ -24,9 +24,12 @@ namespace margelo::nitro::unistyles {
   /**
    * An abstract base class for `UnistylesNavigationBar`
    * Inherit this class to create instances of `HybridUnistylesNavigationBarSpec` in C++.
+   * You must explicitly call `HybridObject`'s constructor yourself, because it is virtual.
    * @example
    * ```cpp
    * class HybridUnistylesNavigationBar: public HybridUnistylesNavigationBarSpec {
+   * public:
+   *   HybridUnistylesNavigationBar(...): HybridObject(TAG) { ... }
    *   // ...
    * };
    * ```

package/nitrogen/generated/shared/c++/HybridUnistylesRuntimeSpec.hpp

@@ -39,9 +39,12 @@ namespace margelo::nitro::unistyles {
   /**
    * An abstract base class for `UnistylesRuntime`
    * Inherit this class to create instances of `HybridUnistylesRuntimeSpec` in C++.
+   * You must explicitly call `HybridObject`'s constructor yourself, because it is virtual.
    * @example
    * ```cpp
    * class HybridUnistylesRuntime: public HybridUnistylesRuntimeSpec {
+   * public:
+   *   HybridUnistylesRuntime(...): HybridObject(TAG) { ... }
    *   // ...
    * };
    * ```

package/nitrogen/generated/shared/c++/HybridUnistylesShadowRegistrySpec.hpp

@@ -24,9 +24,12 @@ namespace margelo::nitro::unistyles {
   /**
    * An abstract base class for `UnistylesShadowRegistry`
    * Inherit this class to create instances of `HybridUnistylesShadowRegistrySpec` in C++.
+   * You must explicitly call `HybridObject`'s constructor yourself, because it is virtual.
    * @example
    * ```cpp
    * class HybridUnistylesShadowRegistry: public HybridUnistylesShadowRegistrySpec {
+   * public:
+   *   HybridUnistylesShadowRegistry(...): HybridObject(TAG) { ... }
    *   // ...
    * };
    * ```

package/nitrogen/generated/shared/c++/HybridUnistylesStatusBarSpec.hpp

@@ -24,9 +24,12 @@ namespace margelo::nitro::unistyles {
   /**
    * An abstract base class for `UnistylesStatusBar`
    * Inherit this class to create instances of `HybridUnistylesStatusBarSpec` in C++.
+   * You must explicitly call `HybridObject`'s constructor yourself, because it is virtual.
    * @example
    * ```cpp
    * class HybridUnistylesStatusBar: public HybridUnistylesStatusBarSpec {
+   * public:
+   *   HybridUnistylesStatusBar(...): HybridObject(TAG) { ... }
    *   // ...
    * };
    * ```

package/nitrogen/generated/shared/c++/HybridUnistylesStyleSheetSpec.cpp

@@ -15,7 +15,7 @@ namespace margelo::nitro::unistyles {
     // load custom methods/properties
     registerHybrids(this, [](Prototype& prototype) {
       prototype.registerHybridGetter("hairlineWidth", &HybridUnistylesStyleSheetSpec::getHairlineWidth);
-      prototype.registerHybridGetter("___unid", &HybridUnistylesStyleSheetSpec::get___unid);
+      prototype.registerHybridGetter("__unid", &HybridUnistylesStyleSheetSpec::get__unid);
     });
   }
 

package/nitrogen/generated/shared/c++/HybridUnistylesStyleSheetSpec.hpp

@@ -24,9 +24,12 @@ namespace margelo::nitro::unistyles {
   /**
    * An abstract base class for `UnistylesStyleSheet`
    * Inherit this class to create instances of `HybridUnistylesStyleSheetSpec` in C++.
+   * You must explicitly call `HybridObject`'s constructor yourself, because it is virtual.
    * @example
    * ```cpp
    * class HybridUnistylesStyleSheet: public HybridUnistylesStyleSheetSpec {
+   * public:
+   *   HybridUnistylesStyleSheet(...): HybridObject(TAG) { ... }
    *   // ...
    * };
    * ```
@@ -42,7 +45,7 @@ namespace margelo::nitro::unistyles {
     public:
       // Properties
       virtual double getHairlineWidth() = 0;
-      virtual double get___unid() = 0;
+      virtual double get__unid() = 0;
 
     public:
       // Methods

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unistyles",
-  "version": "3.0.0-alpha.13",
+  "version": "3.0.0-alpha.15",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "jest",
@@ -74,11 +74,11 @@
     "husky": "9.1.5",
     "jest": "29.7.0",
     "metro-react-native-babel-preset": "0.77.0",
-    "nitro-codegen": "0.10.0",
+    "nitro-codegen": "0.11.0",
     "react": "18.3.1",
     "react-native": "0.75.2",
     "react-native-builder-bob": "0.30.0",
-    "react-native-nitro-modules": "0.10.0",
+    "react-native-nitro-modules": "0.11.0",
     "react-native-web": "0.19.12",
     "react-test-renderer": "18.3.1",
     "release-it": "17.6.0",

package/plugin/index.js

@@ -42,6 +42,37 @@ module.exports = function ({ types: t }) {
                     }
                 }
             },
+            FunctionDeclaration(path, state) {
+                const componentName = path.node.id
+                    ? path.node.id.name
+                    : null
+
+                if (componentName) {
+                    state.file.hasVariants = false
+                }
+            },
+            ClassDeclaration(path, state) {
+                const componentName = path.node.id
+                    ? path.node.id.name
+                    : null
+
+                if (componentName) {
+                    state.file.hasVariants = false
+                }
+            },
+            VariableDeclaration(path, state) {
+                path.node.declarations.forEach((declaration) => {
+                    if (t.isArrowFunctionExpression(declaration.init) || t.isFunctionExpression(declaration.init)) {
+                        const componentName = declaration.id
+                            ? declaration.id.name
+                            : null
+
+                        if (componentName) {
+                            state.file.hasVariants = false
+                        }
+                    }
+                })
+            },
             ImportDeclaration(path, state) {
                 const importSource = path.node.source.value
 

package/src/index.ts

@@ -3,6 +3,9 @@ import React from 'react'
 export * from './specs'
 export { mq } from './mq'
 export type { UnistylesThemes, UnistylesBreakpoints } from './global'
+// TODO: export Native createUnistylesComponent
+// can't import it this way, it will break native build
+// export { createUnistylesComponent } from './web/createUnistylesComponent'
 
 // todo verify true min version
 const minReactVersionRequiredByUnistyles = '18.3.1'

package/src/specs/ShadowRegistry/index.ts

@@ -27,7 +27,13 @@ const findShadowNodeForHandle = (handle: ViewHandle) => {
 }
 
 HybridShadowRegistry.add = (handle, style, variants, args) => {
-    if (!handle || typeof style !== 'object') {
+    // virtualized nodes can be null
+    if (!handle || !style) {
+        return
+    }
+
+    // at this point unistyle can be only object or dynamic function
+    if (typeof style !== 'object' && typeof style !== 'function') {
         return
     }
 

package/src/web/convert/index.ts

@@ -21,7 +21,7 @@ export const convertToTypeStyle = (value: UnistylesValues) => {
         ...value._web
     }).flatMap(([unistylesKey, unistylesValue]) => {
         // Keys to omit
-        if (['_css', '_web', 'variants', 'compoundVariants', 'uni__dependencies'].includes(unistylesKey)) {
+        if (['_css', '_web', 'variants', 'compoundVariants', 'uni__dependencies', '__unistyles-secrets__'].includes(unistylesKey) || unistylesKey.startsWith('variant-')) {
             return []
         }
 

package/src/web/create.ts

@@ -1,105 +1,50 @@
-import type { TypeStyle } from 'typestyle'
 import type { ReactNativeStyleSheet } from '../types'
 import type { StyleSheetWithSuperPowers, StyleSheet } from '../types/stylesheet'
-import { UnistylesRegistry } from './registry'
-import { keyInObject, reduceObject, toReactNativeClassName } from './utils'
+import { assignSecrets, reduceObject, getStyles } from './utils'
 import { UnistylesRuntime } from './runtime'
 import { createUseVariants, getVariants } from './variants'
-import { UnistylesListener } from './listener'
-import type { UnistyleDependency } from '../specs/NativePlatform'
-
-type ListenToDependenciesProps = {
-    value: StyleSheet[keyof StyleSheet],
-    key: PropertyKey,
-    unistyles: TypeStyle,
-    className: string,
-    args?: Array<any>
-}
-
-type WebUnistyle = ReturnType<typeof UnistylesRegistry.createStyles>
 
 export const create = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>) => {
     const computedStylesheet = typeof stylesheet === 'function'
         ? stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
         : stylesheet
-    let lastlySelectedVariants: Record<string, any> = {}
-
-    const listenToDependencies = ({ key, className, unistyles, value, args = [] } : ListenToDependenciesProps) => {
-        const dependencies = ('uni__dependencies' in value ? value['uni__dependencies'] : []) as Array<UnistyleDependency>
-
-        if (dependencies.length === 0) {
-            return
-        }
-
-        return UnistylesListener.addListeners(dependencies, () => {
-            const newComputedStylesheet = typeof stylesheet === 'function'
-                ? stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
-                : stylesheet
-
-            if (!keyInObject(newComputedStylesheet, key)) {
-                return
-            }
-
-            const value = newComputedStylesheet[key]!
-            const result = typeof value === 'function'
-                ? value(...args)
-                : value
+    const selectedVariants = new Map<string, any>()
+
+    const copyVariants = () => Object.fromEntries(selectedVariants.entries())
+    const addSecrets = (value: any, key: string, args?: Array<any>) => assignSecrets(value, {
+        __uni__key: key,
+        __uni__refs: new Set(),
+        __uni__stylesheet: stylesheet,
+        __uni__args: args,
+        __uni__variants: copyVariants()
+    })
 
-            UnistylesRegistry.updateStyles(unistyles, result, className)
-        })
-    }
+    const styles = reduceObject(computedStylesheet, (value, _key) => {
+        const key = String(_key)
 
-    const styles = reduceObject(computedStylesheet, (value, key) => {
         if (typeof value === 'function') {
-            const webUnistyleByRef = new Map<HTMLElement, WebUnistyle>()
-            const disposeByRef = new Map<HTMLElement, VoidFunction | undefined>()
-
-            return (...args: Array<any>) => {
-                const [ref] = args.slice(-1)
+            const dynamicStyle = (...args: Array<any>) => {
                 const result = value(...args)
-                const variants = Object.fromEntries(getVariants({ [key]: result } as ReactNativeStyleSheet<StyleSheet>, lastlySelectedVariants))
+                const variants = Object.fromEntries(getVariants({ [key]: result } as ReactNativeStyleSheet<StyleSheet>, copyVariants()))
                 const resultWithVariants = {
                     ...result,
                     ...variants[key]
                 }
 
-                if (ref instanceof HTMLElement) {
-                    const storedWebUnistyle = webUnistyleByRef.get(ref)
-                    const webUnistyle = storedWebUnistyle ?? UnistylesRegistry.createStyles(resultWithVariants, key)
-
-                    webUnistyleByRef.set(ref, webUnistyle)
-                    disposeByRef.get(ref)?.()
-                    disposeByRef.set(ref, listenToDependencies({
-                        key,
-                        value,
-                        unistyles: webUnistyle.unistyles,
-                        className: webUnistyle.className,
-                        args
-                    }))
-                    ref.classList.add(webUnistyle.className)
-
-                    if (storedWebUnistyle) {
-                        UnistylesRegistry.updateStyles(webUnistyle.unistyles, resultWithVariants, webUnistyle.className)
-                    }
-
-
-                    return
-                }
-
-                return toReactNativeClassName(null, resultWithVariants)
+                // Add secrets to result of dynamic styles function
+                return addSecrets(getStyles(resultWithVariants), key, args)
             }
-        }
-
-        const { className, unistyles } = UnistylesRegistry.createStyles(value, key)
 
-        listenToDependencies({ key, value, unistyles, className })
+            // Add secrets to dynamic styles function
+            return addSecrets(dynamicStyle, key)
+        }
 
-        return toReactNativeClassName(className, value)
+        // Add secrets to static styles
+        return addSecrets(getStyles(value), key)
     }) as ReactNativeStyleSheet<StyleSheet>
 
-    createUseVariants(styles, newVariants => {
-        lastlySelectedVariants = newVariants
-    })
+    // Inject useVariants hook to styles
+    createUseVariants(styles, newVariants => Object.entries(newVariants).forEach(([key, value]) => selectedVariants.set(key, value)))
 
     return styles
 }

package/src/web/createUnistylesComponent.tsx

@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from 'react'
+import { extractHiddenProperties, extractSecrets } from './utils'
+import { UnistylesRuntime } from './runtime'
+import { getVariants } from './variants'
+import { UnistylesListener } from './listener'
+
+const getStyles = (value: Record<string, any>) => {
+    const secrets = extractSecrets(value)
+
+    if (secrets.length === 0) {
+        return undefined
+    }
+
+    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 style = newComputedStylesheet[__uni__key]
+        const resultHidden = typeof style === 'function'
+            ? style(...__uni__args)
+            : style
+        const result = extractHiddenProperties(resultHidden)
+        const { variants } = Object.fromEntries(getVariants({ variants: result }, __uni__variants ))
+        const resultWithVariants = {
+            ...result,
+            ...variants
+        }
+
+        return {
+            ...acc,
+            ...resultWithVariants
+        }
+    }, {} as Record<string, any>)
+}
+
+export const createUnistylesComponent = <TProps extends object>(Component: React.ComponentType<TProps>) => (props: TProps) => {
+    const passedStyles = (props as TProps & { style: Record<string, any> }).style ?? {}
+    const [style, setStyle] = useState(getStyles(passedStyles))
+
+    useEffect(() => {
+        const newStyles = getStyles(passedStyles)
+        const dependencies = newStyles?.['uni__dependencies'] ?? []
+        const dispose = UnistylesListener.addListeners(dependencies, () => setStyle(getStyles(passedStyles)))
+
+        setStyle(newStyles)
+
+        return dispose
+    }, [passedStyles])
+
+    return (
+        <Component
+            {...props}
+            style={style}
+        />
+    )
+}

package/src/web/index.ts

@@ -1,5 +1,4 @@
 import { create } from './create'
-import { UnistylesRuntime } from './runtime'
 import { UnistylesState } from './state'
 import { deepMergeObjects } from './utils'
 
@@ -19,6 +18,8 @@ export const StyleSheet = {
 }
 
 export { UnistylesRuntime } from './runtime'
+export { UnistylesShadowRegistry } from './shadowRegistry'
 export * from './mock'
 
-export const getSSRUnistyles = () => UnistylesRuntime.getSSRUnistyles()
+// TODO: Work on SSR
+export const getSSRUnistyles = () => []

package/src/web/listener/index.ts

@@ -1 +1,2 @@
 export { UnistylesListener } from './listener'
+export { listenToDependencies } from './listenToDependencies'

package/src/web/listener/listenToDependencies.ts

@@ -0,0 +1,50 @@
+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'
+
+type ListenToDependenciesProps = {
+    key: PropertyKey,
+    unistyles: TypeStyle,
+    className: string,
+    stylesheet: StyleSheetWithSuperPowers<StyleSheet>
+    args?: Array<any>
+}
+
+export const listenToDependencies = ({ key, className, unistyles, args = [], stylesheet }: ListenToDependenciesProps) => {
+    const newComputedStylesheet = typeof stylesheet === 'function'
+        ? stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
+        : stylesheet
+    const _value = keyInObject(newComputedStylesheet, key) ? newComputedStylesheet[key] : undefined
+
+    if (!_value) {
+        return
+    }
+
+    const value = typeof _value === 'function' ? _value(...args) : _value
+    const dependencies = ('uni__dependencies' in value ? value['uni__dependencies'] : []) as Array<UnistyleDependency>
+
+    if (dependencies.length === 0) {
+        return
+    }
+
+    return UnistylesListener.addListeners(dependencies, () => {
+        const newComputedStylesheet = typeof stylesheet === 'function'
+            ? stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
+            : stylesheet
+
+        if (!keyInObject(newComputedStylesheet, key)) {
+            return
+        }
+
+        const value = newComputedStylesheet[key]!
+        const result = typeof value === 'function'
+            ? value(...args)
+            : value
+
+        UnistylesRegistry.updateStyles(unistyles, result, className)
+    })
+}

package/src/web/listener/listener.ts

@@ -1,7 +1,7 @@
 import { UnistyleDependency } from '../../specs/NativePlatform'
 import { UnistylesRuntime } from '../runtime'
 
-export class UnistylesListenerBuilder {
+class UnistylesListenerBuilder {
     private isInitialized = false
     private listeners = Array.from({ length: Object.keys(UnistyleDependency).length / 2 }, () => new Set<VoidFunction>())
 

package/src/web/mock.ts

@@ -23,13 +23,3 @@ export const NavigationBar: NavigationBarSpec = {
     __type: 'web',
     name: 'NavigationBar'
 }
-
-export const UnistylesShadowRegistry = {
-    name: 'UnistylesShadowRegistry',
-    __type: 'web',
-    equals: () => true,
-    toString: () => 'UnistylesShadowRegistry',
-    dispose: () => {},
-    add: () => {},
-    remove: () => {},
-}