react-native-unistyles 2.10.0 → 3.0.0-alpha.2

package/plugin/ref.js

@@ -0,0 +1,179 @@
+function getRefProp(t, path) {
+    return path.node.openingElement.attributes.find(attr =>
+        t.isJSXAttribute(attr) &&
+        t.isJSXIdentifier(attr.name, { name: 'ref' }) &&
+        t.isJSXExpressionContainer(attr.value)
+    )
+}
+
+function hasStringRef(t, path) {
+    return path.node.openingElement.attributes.find(attr =>
+        t.isJSXAttribute(attr) &&
+        t.isJSXIdentifier(attr.name, { name: 'ref' }) &&
+        t.isStringLiteral(attr.value)
+    )
+}
+
+function addRef(t, path, styleObj, styleProp) {
+    const newRefFunction = t.arrowFunctionExpression(
+        [t.identifier('ref')],
+        t.blockStatement([
+            t.expressionStatement(
+                t.callExpression(
+                    t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
+                    [t.identifier('ref'), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                )
+            ),
+            t.returnStatement(
+                t.arrowFunctionExpression([],
+                    t.callExpression(
+                        t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
+                        [t.identifier('ref'), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                    )
+                )
+            )
+        ])
+    )
+
+    const newRefProp = t.jsxAttribute(
+        t.jsxIdentifier('ref'),
+        t.jsxExpressionContainer(newRefFunction)
+    )
+
+    path.node.openingElement.attributes.push(newRefProp)
+}
+
+function overrideRef(t, path, refProp, styleObj, styleProp) {
+    const uniqueRefName = path.scope.generateUidIdentifier('ref').name
+    const isIdentifier = t.isIdentifier(refProp.value.expression)
+    const binding = path.scope.getBinding(refProp.value.expression.name)
+
+    // ref={ref}
+    if (isIdentifier && binding && t.isCallExpression(binding.path.node.init)) {
+        const userVariableName = refProp.value.expression.name
+        const newRefFunction = t.arrowFunctionExpression(
+            [t.identifier(uniqueRefName)],
+            t.blockStatement([
+                t.expressionStatement(
+                    t.assignmentExpression('=', t.identifier(userVariableName), t.identifier(uniqueRefName))
+                ),
+                t.expressionStatement(
+                    t.callExpression(
+                        t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
+                        [t.identifier(uniqueRefName), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                    )
+                ),
+                t.returnStatement(
+                    t.arrowFunctionExpression([],
+                        t.callExpression(
+                            t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
+                            [t.identifier(uniqueRefName), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                        )
+                    )
+                )
+            ])
+        )
+
+        refProp.value = t.jsxExpressionContainer(newRefFunction)
+
+        return
+    }
+
+    // ref={ref => { }}
+    if (t.isArrowFunctionExpression(refProp.value.expression)) {
+        const userArrowFunction = refProp.value.expression
+        const userStatements = userArrowFunction.body.body
+        const userReturnStatement = userStatements.find(statement => t.isReturnStatement(statement))
+        const userCleanupFunction = userReturnStatement
+            ? userReturnStatement.argument
+            : null
+
+        const newRefFunction = t.arrowFunctionExpression(
+            [t.identifier('ref')],
+            t.blockStatement([
+                ...userStatements.filter(statement => !t.isReturnStatement(statement)),
+                t.expressionStatement(
+                    t.callExpression(
+                        t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
+                        [t.identifier('ref'), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                    )
+                ),
+                // Merged cleanup function
+                t.returnStatement(
+                    t.arrowFunctionExpression([], t.blockStatement([
+                        ...(userCleanupFunction ? [
+                            t.expressionStatement(
+                                t.callExpression(userCleanupFunction, [])
+                            )
+                        ] : []),
+                        t.expressionStatement(
+                            t.callExpression(
+                                t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
+                                [t.identifier('ref'), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                            )
+                        )
+                    ]))
+                )
+            ])
+        )
+
+        refProp.value = t.jsxExpressionContainer(newRefFunction)
+
+        return
+    }
+
+    // ref={scopedFunction}
+    const isArrowFunction = t.isArrowFunctionExpression(binding.path.node.init)
+    const isFunction = t.isFunctionDeclaration(binding.path.node)
+
+    if (!isArrowFunction && !isFunction) {
+        return
+    }
+
+    const userFunctionName = refProp.value.expression
+    const userFunction = isArrowFunction
+        ? binding.path.node.init
+        : binding.path.node
+    const returnStatement = userFunction.body.body.find(statement => t.isReturnStatement(statement));
+    const userCleanupFunction = returnStatement ? returnStatement.argument : null;
+
+    const newRefFunction = t.arrowFunctionExpression(
+        [t.identifier(uniqueRefName)],
+        t.blockStatement([
+            t.expressionStatement(
+                t.callExpression(userFunctionName, [t.identifier(uniqueRefName)])
+            ),
+            t.expressionStatement(
+                t.callExpression(
+                    t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
+                    [t.identifier(uniqueRefName), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                )
+            ),
+            t.returnStatement(
+                t.arrowFunctionExpression([], t.blockStatement([
+                    ...(userCleanupFunction ? [
+                        t.expressionStatement(
+                            t.callExpression(userCleanupFunction, [])
+                        )
+                    ] : []),
+                    t.expressionStatement(
+                        t.callExpression(
+                            t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
+                            [t.identifier(uniqueRefName), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                        )
+                    )
+                ]))
+            )
+        ])
+    )
+
+    refProp.value = t.jsxExpressionContainer(newRefFunction)
+    userFunction.body.body = userFunction.body.body.filter(statement => !t.isReturnStatement(statement))
+}
+
+module.exports = {
+    getRefProp,
+    addRef,
+    overrideRef,
+    hasStringRef
+}

package/plugin/style.js

@@ -0,0 +1,58 @@
+function getStyleObjectPath(t, node, state) {
+    // {styles.container}
+    if (t.isMemberExpression(node)) {
+        return [node.object.name, node.property.name]
+    }
+
+    // [styles.container]
+    if (t.isArrayExpression(node)) {
+        return node.elements.flatMap(element => getStyleObjectPath(t, element, state))
+    }
+
+    // [...styles.container]
+    if (t.isSpreadElement(node)) {
+        return getStyleObjectPath(t, node.argument, state)
+    }
+
+    // {{ ...styles.container }}
+    if (t.isObjectExpression(node)) {
+        return node.properties.flatMap(prop => getStyleObjectPath(t, prop.argument, state))
+    }
+
+    // {styles.container(arg1, arg2)}
+    if (t.isCallExpression(node)) {
+        const path = getStyleObjectPath(t, node.callee, state)
+        const lastPart = path.slice(-1)
+
+        if (!lastPart) {
+            return path
+        }
+
+        // for web increment counter for dynamic functions
+        if (state.file.webDynamicFunctions[lastPart]) {
+            node.arguments.push(t.numericLiteral(++state.file.webDynamicFunctions[lastPart]))
+
+            return path
+        }
+
+        state.file.webDynamicFunctions[lastPart] = 1
+        node.arguments.push(t.numericLiteral(1))
+
+        return path
+    }
+
+    return []
+}
+
+function getStyleAttribute(t, path) {
+    return path.node.openingElement.attributes.find(attr =>
+        t.isJSXAttribute(attr) &&
+        t.isJSXIdentifier(attr.name, { name: 'style' }) &&
+        t.isJSXExpressionContainer(attr.value)
+    )
+}
+
+module.exports = {
+    getStyleObjectPath,
+    getStyleAttribute
+}

package/plugin/stylesheet.js

@@ -0,0 +1,147 @@
+const { getIdentifierNameFromExpression, getSecondPropertyName } = require('./common')
+
+const UnistyleDependency = {
+    Theme: 0,
+    ThemeName: 1,
+    AdaptiveThemes: 2,
+    Breakpoints: 3,
+    Variants: 4,
+    ColorScheme: 5,
+    Dimensions: 6,
+    Orientation: 7,
+    ContentSizeCategory: 8,
+    Insets: 9,
+    PixelRatio: 10,
+    FontScale: 11,
+    StatusBar: 12,
+    NavigationBar: 13
+}
+
+function isUnistylesStyleSheet(t, path, state) {
+    const callee = path.get('callee')
+
+    return (
+        t.isMemberExpression(callee.node) &&
+        callee.node.property.name === 'create' &&
+        t.isIdentifier(callee.node.object) &&
+        callee.node.object.name === state.file.styleSheetLocalName
+    )
+}
+
+function analyzeDependencies(t, state, name, unistyleObj, themeName, rtName) {
+    const debugMessage = deps => {
+        if (state.opts.debug) {
+            const mappedDeps = deps
+                .map(dep => Object.keys(UnistyleDependency).find(key => UnistyleDependency[key] === dep))
+                .join(', ')
+
+            console.log(`${state.filename.replace(`${state.file.opts.root}/`, '')}: styles.${name}: [${mappedDeps}]`)
+        }
+    }
+    const unistyle = unistyleObj.properties
+    const dependencies = []
+
+    Object.values(unistyle).forEach(uni => {
+        const identifier = getIdentifierNameFromExpression(t, uni.value)
+
+        if (identifier.includes(themeName)) {
+            dependencies.push(UnistyleDependency.Theme)
+        }
+
+        if (identifier.includes(rtName)) {
+            const propertyNames = getSecondPropertyName(t, uni.value)
+
+            propertyNames
+                .filter(Boolean)
+                .forEach(propertyName => {
+                    switch (propertyName) {
+                        case 'themeName': {
+                            dependencies.push(UnistyleDependency.ThemeName)
+
+                            return
+                        }
+                        case 'adaptiveThemes': {
+                            dependencies.push(UnistyleDependency.AdaptiveThemes)
+
+                            return
+                        }
+                        case 'breakpoint': {
+                            dependencies.push(UnistyleDependency.Breakpoints)
+
+                            return
+                        }
+                        case 'colorScheme': {
+                            dependencies.push(UnistyleDependency.ColorScheme)
+
+                            return
+                        }
+                        case 'screen': {
+                            dependencies.push(UnistyleDependency.Dimensions)
+
+                            return
+                        }
+                        case 'orientation': {
+                            dependencies.push(UnistyleDependency.Orientation)
+
+                            return
+                        }
+                        case 'contentSizeCategory': {
+                            dependencies.push(UnistyleDependency.ContentSizeCategory)
+
+                            return
+                        }
+                        case 'insets': {
+                            dependencies.push(UnistyleDependency.Insets)
+
+                            return
+                        }
+                        case 'pixelRatio': {
+                            dependencies.push(UnistyleDependency.PixelRatio)
+
+                            return
+                        }
+                        case 'fontScale': {
+                            dependencies.push(UnistyleDependency.FontScale)
+
+                            return
+                        }
+                        case 'statusBar': {
+                            dependencies.push(UnistyleDependency.StatusBar)
+
+                            return
+                        }
+                        case 'navigationBar': {
+                            dependencies.push(UnistyleDependency.NavigationBar)
+
+                            return
+                        }
+                    }
+                })
+        }
+
+        if (uni.key && uni.key.name === 'variants') {
+            dependencies.push(UnistyleDependency.Variants)
+        }
+
+        // breakpoints are too complex and are handled by C++
+    })
+
+    // add dependencies to the unistyle object if any found
+    if (dependencies.length > 0) {
+        const uniqueDependencies = Array.from(new Set(dependencies))
+
+        debugMessage(uniqueDependencies)
+
+        unistyleObj.properties.push(
+            t.objectProperty(
+                t.identifier('uni__dependencies'),
+                t.arrayExpression(uniqueDependencies.map(dep => t.numericLiteral(dep)))
+            )
+        )
+    }
+}
+
+module.exports = {
+    isUnistylesStyleSheet,
+    analyzeDependencies
+}

package/src/common.ts

@@ -1,63 +1,5 @@
 import { Platform } from 'react-native'
 
-export const warn = (message: string) => {
-    console.warn(`🦄 [react-native-unistyles]: ${message}`)
-}
-
 export const isWeb = Platform.OS === 'web'
 export const isIOS = Platform.OS === 'ios'
 export const isAndroid = Platform.OS === 'android'
-export const isMobile = isIOS || isAndroid
-export const isServer = typeof window === 'undefined'
-export const isDev = process.env.NODE_ENV !== 'production'
-export const isTest = process.env.NODE_ENV === 'test' || process.env.JEST_WORKER_ID !== undefined || typeof jest !== 'undefined'
-
-export const ScreenOrientation = {
-    Landscape: 'landscape',
-    Portrait: 'portrait'
-} as const
-
-export enum IOSContentSizeCategory {
-    AccessibilityExtraExtraExtraLarge = 'accessibilityExtraExtraExtraLarge',
-    AccessibilityExtraExtraLarge = 'accessibilityExtraExtraLarge',
-    AccessibilityExtraLarge = 'accessibilityExtraLarge',
-    AccessibilityLarge = 'accessibilityLarge',
-    AccessibilityMedium = 'accessibilityMedium',
-    ExtraExtraExtraLarge = 'xxxLarge',
-    ExtraExtraLarge = 'xxLarge',
-    ExtraLarge = 'xLarge',
-    Large = 'Large',
-    Medium = 'Medium',
-    Small = 'Small',
-    ExtraSmall = 'xSmall',
-    Unspecified = 'unspecified'
-}
-
-export enum AndroidContentSizeCategory {
-    Small = 'Small',
-    Default = 'Default',
-    Large = 'Large',
-    ExtraLarge = 'ExtraLarge',
-    Huge = 'Huge',
-    ExtraHuge = 'ExtraHuge',
-    ExtraExtraHuge = 'ExtraExtraHuge'
-}
-
-export enum UnistylesEventType {
-    Theme = 'theme',
-    Layout = 'layout',
-    Plugin = 'plugin'
-}
-
-export enum UnistylesError {
-    RuntimeUnavailable = 'Unistyles runtime is not available. Make sure you followed the installation instructions',
-    ThemeNotFound = 'You are trying to get a theme that is not registered with UnistylesRegistry',
-    ThemeNotRegistered = 'You are trying to set a theme that was not registered with UnistylesRegistry',
-    ThemeNotSelected = 'Your themes are registered, but you didn\'t select the initial theme',
-    ThemesCannotBeEmpty = 'You are trying to register empty themes object',
-    BreakpointsCannotBeEmpty = 'You are trying to register empty breakpoints object',
-    BreakpointsMustStartFromZero = 'You are trying to register breakpoints that don\'t start from 0',
-    InvalidPluginName = 'Plugin name can\'t start from reserved prefix __unistyles',
-    DuplicatePluginName = 'You are trying to register a plugin with a name that is already registered',
-    CantRemoveInternalPlugin = 'You are trying to remove an internal unistyles plugin'
-}

package/src/index.ts

@@ -1,56 +1,15 @@
-import { unistyles } from './core'
-import { mq } from './utils'
-import { useInitialTheme } from './hooks'
-import type { UnistylesPlugin, UnistylesValues, UnistyleText, UnistyleView, UnistyleImage, ExtractVariantNames, UnistylesTheme } from './types'
-import type { UnistylesThemes, UnistylesBreakpoints } from './global'
-import { ScreenOrientation, AndroidContentSizeCategory, IOSContentSizeCategory } from './common'
-import { useStyles } from './useStyles'
-import { createStyleSheet } from './createStyleSheet'
+import React from 'react'
 
-/**
- * Utility to interact with the Unistyles
- * (should be called only once)
- */
-const UnistylesRegistry = {
-    /**
-     * Register themes to be used in the app
-     * @param themes - Key value pair of themes
-     */
-    addThemes: unistyles.registry.addThemes,
-    /**
-     * Register breakpoints to be used in the app
-     * @param breakpoints - Key value pair of breakpoints
-     */
-    addBreakpoints: unistyles.registry.addBreakpoints,
-    /**
-     * Register additional config to customize the Unistyles
-     * @param config - Key value pair of config
-     */
-    addConfig: unistyles.registry.addConfig
-}
-
-const UnistylesRuntime = unistyles.runtime
+export * from './specs'
+export { mq } from './mq'
+export type { UnistylesThemes, UnistylesBreakpoints } from './global'
 
-export {
-    mq,
-    useStyles,
-    useInitialTheme,
-    createStyleSheet,
-    ScreenOrientation,
-    AndroidContentSizeCategory,
-    IOSContentSizeCategory,
-    UnistylesRegistry,
-    UnistylesRuntime
-}
+// todo verify true min version
+const minReactVersionRequiredByUnistyles = '18.3.1'
 
-export type {
-    UnistylesTheme,
-    UnistylesThemes,
-    UnistylesBreakpoints,
-    UnistylesPlugin,
-    UnistylesValues,
-    UnistyleText,
-    UnistyleView,
-    UnistyleImage,
-    ExtractVariantNames as UnistylesVariants
+if (React.version < minReactVersionRequiredByUnistyles) {
+    throw new Error(`
+        You are using an outdated version of React (${React.version}).
+        Unistyles requires at least React ${minReactVersionRequiredByUnistyles}.
+    `)
 }

package/src/{utils/mq.ts → mq.ts}

@@ -1,6 +1,5 @@
-import type { Nullable } from '../types'
-import type { UnistylesBreakpoints } from '../global'
-import { unistyles } from '../core'
+import type { Nullable } from './types'
+import type { UnistylesBreakpoints } from './global'
 
 type MQValue = keyof UnistylesBreakpoints | number
 
@@ -30,7 +29,17 @@ const getMQValue = (value: Nullable<MQValue>) => {
         return 0
     }
 
-    return unistyles.registry.breakpoints[value] ?? 0
+    // todo take it from js
+    const breakpoints = {
+        xs: 0,
+        sm: 300,
+        md: 500,
+        lg: 800,
+        xl: 1200
+    }
+
+    // @ts-ignore
+    return breakpoints[value] ?? 0
 }
 
 /**

package/src/specs/NativePlatform/NativePlatform.nitro.ts

@@ -0,0 +1,61 @@
+import type { HybridObject } from 'react-native-nitro-modules'
+import { type Dimensions, type Insets } from '../types'
+
+type ColorScheme = 'dark' | 'light' | 'unspecified'
+type Orientation = 'portrait' | 'landscape'
+
+export enum UnistyleDependency {
+    Theme = 0,
+    ThemeName = 1,
+    AdaptiveThemes = 2,
+    Breakpoints = 3,
+    Variants = 4,
+    ColorScheme = 5,
+    Dimensions = 6,
+    Orientation = 7,
+    ContentSizeCategory = 8,
+    Insets = 9,
+    PixelRatio = 10,
+    FontScale = 11,
+    StatusBar = 12,
+    NavigationBar = 13
+}
+
+export interface UnistylesNativeMiniRuntime {
+    readonly colorScheme: ColorScheme,
+    readonly screen: Dimensions,
+    readonly contentSizeCategory: string,
+    readonly insets: Insets,
+    readonly pixelRatio: number,
+    readonly fontScale: number,
+    readonly rtl: boolean
+    readonly statusBar: Dimensions,
+    readonly navigationBar: Dimensions
+    readonly orientation: Orientation
+}
+
+// represents any native API that can communicate with Unistyles
+// not available from JS
+export interface NativePlatform extends HybridObject<{ ios: 'swift', android: 'kotlin' }> {
+    getInsets(): Insets,
+    getColorScheme(): ColorScheme,
+    getFontScale(): number,
+    getPixelRatio(): number,
+    getOrientation(): Orientation,
+    getContentSizeCategory(): string,
+    getScreenDimensions(): Dimensions,
+    getStatusBarDimensions(): Dimensions,
+    getNavigationBarDimensions(): Dimensions,
+    getPrefersRtlDirection(): boolean,
+
+    setRootViewBackgroundColor(color: number): void,
+    setNavigationBarBackgroundColor?(color: number): void,
+    setNavigationBarHidden?(isHidden: boolean): void,
+    setStatusBarHidden(isHidden: boolean): void,
+    setStatusBarBackgroundColor?(color: number): void,
+    setImmersiveMode(isEnabled: boolean): void,
+
+    // private
+    getMiniRuntime(): UnistylesNativeMiniRuntime,
+    registerPlatformListener(callback: (dependencies: Array<UnistyleDependency>) => void): void
+}

package/src/specs/NativePlatform/index.ts

@@ -0,0 +1,2 @@
+export type { NativePlatform, UnistylesNativeMiniRuntime } from './NativePlatform.nitro'
+export { UnistyleDependency } from './NativePlatform.nitro'

package/src/specs/NavigtionBar/UnistylesNavigationBar.nitro.ts

@@ -0,0 +1,10 @@
+import type { HybridObject } from 'react-native-nitro-modules'
+
+// created from UnistylesRuntime, do not use it directly
+export interface UnistylesNavigationBar extends HybridObject<{ ios: 'c++', android: 'c++' }> {
+    readonly width: number,
+    readonly height: number,
+
+    setBackgroundColor(color: number): void,
+    setHidden(isHidden: boolean): void
+}

package/src/specs/NavigtionBar/index.ts

@@ -0,0 +1,25 @@
+import { processColor } from 'react-native'
+import type { UnistylesNavigationBar as UnistylesNavigationBarSpec } from './UnistylesNavigationBar.nitro'
+import type { Color } from '../types'
+
+interface PrivateUnistylesNavigationBar extends Omit<UnistylesNavigationBarSpec, 'setBackgroundColor'> {
+    setBackgroundColor(color?: string): void,
+    _setBackgroundColor(color?: Color): void
+}
+
+export const attachNavigationBarJSMethods = (hybridObject: UnistylesNavigationBar) => {
+    const privateHybrid = hybridObject as PrivateUnistylesNavigationBar
+
+    privateHybrid._setBackgroundColor = hybridObject.setBackgroundColor
+    hybridObject.setBackgroundColor = (color?: string) => {
+        const parsedColor = processColor(color)
+
+        privateHybrid._setBackgroundColor(parsedColor as number)
+    }
+}
+
+type PrivateMethods =
+    | '_setBackgroundColor'
+    | 'dispose'
+
+export type UnistylesNavigationBar = Omit<PrivateUnistylesNavigationBar, PrivateMethods>

package/src/specs/ShadowRegistry/ShadowRegistry.nitro.ts

@@ -0,0 +1,3 @@
+import type { HybridObject } from 'react-native-nitro-modules'
+
+export interface UnistylesShadowRegistry extends HybridObject<{ ios: 'c++', android: 'c++' }> {}