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

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.14",
   "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/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: () => {},
-}

package/src/web/pseudo.ts

@@ -1,11 +1,137 @@
-// TODO: Add complete list of pseudo selectors
 export const pseudos = [
+    '_-moz-broken',
+    '_-moz-drag-over',
+    '_-moz-first-node',
+    '_-moz-handler-blocked',
+    '_-moz-handler-crashed',
+    '_-moz-handler-disabled',
+    '_-moz-last-node',
+    '_-moz-loading',
+    '_-moz-locale-dir(ltr)',
+    '_-moz-locale-dir(rtl)',
+    '_-moz-only-whitespace',
+    '_-moz-submit-invalid',
+    '_-moz-suppressed',
+    '_-moz-user-disabled',
+    '_-moz-window-inactive',
+    '_active',
+    '_any-link',
+    '_autofill',
+    '_blank',
+    '_buffering',
+    '_checked',
+    '_current',
+    '_default',
+    '_defined',
+    '_dir(',
+    '_disabled',
+    '_empty',
+    '_enabled',
+    '_first',
+    '_first-child',
+    '_first-of-type',
+    '_focus',
+    '_focus-visible',
+    '_focus-within',
+    '_fullscreen',
+    '_future',
+    '_has(',
+    '_host',
+    '_host-context(',
+    '_host(',
     '_hover',
-    '_css',
+    '_in-range',
+    '_indeterminate',
+    '_invalid',
+    '_is(',
+    '_lang(',
+    '_last-child',
+    '_last-of-type',
+    '_left',
+    '_link',
+    '_local-link',
+    '_modal',
+    '_muted',
+    '_not(',
+    '_nth-child(',
+    '_nth-last-child(',
+    '_nth-last-of-type(',
+    '_nth-of-type(',
+    '_only-child',
+    '_only-of-type',
+    '_optional',
+    '_out-of-range',
+    '_past',
+    '_paused',
+    '_picture-in-picture',
+    '_placeholder-shown',
+    '_playing',
+    '_popover-open',
+    '_read-only',
+    '_read-write',
+    '_required',
+    '_right',
+    '_scope',
+    '_seeking',
+    '_stalled',
+    '_state(',
+    '_target',
+    '_target-within',
+    '_user-invalid',
+    '_user-valid',
+    '_valid',
+    '_visited',
+    '_volume-locked',
+    '_where(',
+    '_-moz-color-swatch',
+    '_-moz-focus-inner',
+    '_-moz-list-bullet',
+    '_-moz-list-number',
+    '_-moz-meter-bar',
+    '_-moz-progress-bar',
+    '_-moz-range-progress',
+    '_-moz-range-thumb',
+    '_-moz-range-track',
+    '_-webkit-inner-spin-button',
+    '_-webkit-meter-barDeprecated',
+    '_-webkit-meter-even-less-good-value',
+    '_-webkit-meter-inner-element',
+    '_-webkit-meter-optimum-value',
+    '_-webkit-meter-suboptimum-value',
+    '_-webkit-progress-bar',
+    '_-webkit-progress-inner-element',
+    '_-webkit-progress-value',
+    '_-webkit-scrollbar',
+    '_-webkit-search-cancel-button',
+    '_-webkit-search-results-button',
+    '_-webkit-slider-runnable-track',
+    '_-webkit-slider-thumb',
+    '_after',
+    '_backdrop',
     '_before',
-    '_after'
+    '_cue',
+    '_file-selector-button',
+    '_first-letter',
+    '_first-line',
+    '_grammar-error',
+    '_highlight(',
+    '_marker',
+    '_part(',
+    '_placeholder',
+    '_selection',
+    '_slotted(',
+    '_spelling-error',
+    '_target-text',
+    '_view-transition',
+    '_view-transition-group',
+    '_view-transition-image-pair',
+    '_view-transition-new',
+    '_view-transition-old',
 ] as const
 
-export const isPseudo = (selector: string) => pseudos.includes(selector as Pseudo)
+export const isPseudo = (selector: string) => pseudos.some(pseudo => selector.startsWith(pseudo))
+
+type AddDynamicSelector<T extends string> = T extends `${infer U}(` ? `${U}(${string})` : T
+
+export type Pseudo = AddDynamicSelector<typeof pseudos[number]>
 
-export type Pseudo = typeof pseudos[number]

package/src/web/registry.ts

@@ -1,16 +1,14 @@
 import { createTypeStyle, TypeStyle } from 'typestyle'
 import type { UnistylesValues } from '../types'
 import { convertToTypeStyle } from './convert'
-import { UnistylesState } from './state'
 
 class UnistylesRegistryBuilder {
-    createStyles = (stylesheet: UnistylesValues, key: string | number) => {
-        const stylesTag = UnistylesState.createTag()
-        const unistyles = createTypeStyle(stylesTag)
+    createStyles = (stylesheet: UnistylesValues, key: string) => {
+        const unistyles = createTypeStyle()
         const typestyleStylesheet = convertToTypeStyle(stylesheet)
 
         const className = unistyles.style({
-            $debugName: String(key),
+            $debugName: `${key}-${Math.random().toString(16).slice(10)}`,
         }, typestyleStylesheet)
 
         if (stylesheet._web?._css) {

package/src/web/runtime.ts

@@ -191,8 +191,6 @@ class UnistylesRuntimeBuilder {
 
         UnistylesState.themes.set(themeName, updater(oldTheme))
     }
-
-    getSSRUnistyles = () => UnistylesState.tags
 }
 
 export const UnistylesRuntime = new UnistylesRuntimeBuilder()

package/src/web/shadowRegistry.ts

@@ -0,0 +1,121 @@
+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'
+
+type WebUnistyle = ReturnType<typeof UnistylesRegistry.createStyles>
+
+type Style = UnistylesValues | ((...args: Array<any>) => UnistylesValues)
+
+class UnistylesShadowRegistryBuilder {
+    // MOCKS
+    name = 'UnistylesShadowRegistry'
+    __type = 'web'
+    equals = () => true
+    toString = () => 'UnistylesShadowRegistry'
+    dispose = () => {}
+    // END MOCKS
+
+    private readonly webUnistylesMap = createDoubleMap<HTMLElement, string, WebUnistyle>()
+    private readonly disposeMap = createDoubleMap<HTMLElement, string, VoidFunction | undefined>()
+    private readonly stylesMap = createDoubleMap<HTMLElement, string, HTMLStyleElement>()
+
+    add = (ref: any, _style?: Style | Array<Style>, _variants?: Record<string, any>, _args?: Array<any>) => {
+        // Style is not provided
+        if (!_style) {
+            return
+        }
+
+        // Array of styles
+        if (Array.isArray(_style)) {
+            _style.forEach(style => this.add(ref, style, _variants, _args))
+
+            return
+        }
+
+        // Not a unistyle
+        if (!Object.keys(_style).some(key => key.startsWith('__uni__'))) {
+            return
+        }
+
+        // Ref is unmounted, remove style tags from the document
+        if (ref === null) {
+            const secrets = extractSecrets(_style)
+
+            secrets.forEach(({ __uni__refs }) => {
+                __uni__refs.forEach(ref => {
+                    if (isInDocument(ref)) {
+                        return
+                    }
+
+                    this.remove(ref, _style)
+                })
+            })
+
+            return
+        }
+
+        // Ref is not an HTMLElement
+        if (!(ref instanceof HTMLElement)) {
+            return
+        }
+
+        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 style = newComputedStylesheet[__uni__key]
+            const args = _args ?? __uni__args
+            const resultHidden = typeof style === 'function'
+                ? style(...args)
+                : style
+            const result = extractHiddenProperties(resultHidden)
+            const { variants } = Object.fromEntries(getVariants({ variants: result }, _variants && Object.keys(_variants).length > 0 ? _variants : __uni__variants))
+            const resultWithVariants = {
+                ...result,
+                ...variants
+            }
+            const storedWebUnistyle = this.webUnistylesMap.get(ref, __uni__key)
+            const webUnistyle = storedWebUnistyle ?? UnistylesRegistry.createStyles(resultWithVariants, __uni__key)
+
+            this.webUnistylesMap.set(ref, __uni__key, webUnistyle)
+            this.disposeMap.get(ref, __uni__key)?.()
+            this.disposeMap.set(ref, __uni__key, listenToDependencies({
+                key: __uni__key,
+                stylesheet: __uni__stylesheet,
+                args,
+                className: webUnistyle.className,
+                unistyles: webUnistyle.unistyles,
+            }))
+
+            if (!storedWebUnistyle) {
+                const styleTag = document.createElement('style')
+
+                ref.classList.add(webUnistyle.className)
+                webUnistyle.unistyles.setStylesTarget(styleTag)
+                document.head.appendChild(styleTag)
+                __uni__refs.add(ref)
+                this.stylesMap.set(ref, __uni__key, styleTag)
+            }
+
+            if (storedWebUnistyle) {
+                UnistylesRegistry.updateStyles(webUnistyle.unistyles, resultWithVariants, webUnistyle.className)
+            }
+        })
+    }
+
+    remove = (ref: HTMLElement, style: Style) => {
+        extractSecrets(style).forEach(({ __uni__key }) => {
+            this.webUnistylesMap.delete(ref, __uni__key)
+            this.disposeMap.get(ref, __uni__key)?.()
+            this.disposeMap.delete(ref, __uni__key)
+            this.stylesMap.get(ref, __uni__key)?.remove()
+            this.stylesMap.delete(ref, __uni__key)
+        })
+    }
+}
+
+export const UnistylesShadowRegistry = new UnistylesShadowRegistryBuilder()