react-native-unistyles 3.0.0-alpha.3 → 3.0.0-alpha.31

package/plugin/style.js

@@ -1,44 +1,69 @@
-function getStyleObjectPath(t, node, state) {
+function getStyleMetadata(t, node, dynamicFunction = null) {
     // {styles.container}
     if (t.isMemberExpression(node)) {
-        return [node.object.name, node.property.name]
+        const members = t.isMemberExpression(node.object)
+            ? [node.object.object.name, node.object.property.name, node.property.name]
+            : [node.object.name, node.property.name]
+
+        return [
+            {
+                members: members.filter(Boolean),
+                inlineStyle: undefined,
+                dynamicFunction
+            }
+        ]
     }
 
     // [styles.container]
     if (t.isArrayExpression(node)) {
-        return node.elements.flatMap(element => getStyleObjectPath(t, element, state))
+        return node.elements.flatMap(element => getStyleMetadata(t, element))
     }
 
     // [...styles.container]
     if (t.isSpreadElement(node)) {
-        return getStyleObjectPath(t, node.argument, state)
+        return getStyleMetadata(t, node.argument)
     }
 
     // {{ ...styles.container }}
     if (t.isObjectExpression(node)) {
-        return node.properties.flatMap(prop => getStyleObjectPath(t, prop.argument, state))
-    }
+        const inlineStyles = []
 
-    // {styles.container(arg1, arg2)}
-    if (t.isCallExpression(node)) {
-        const path = getStyleObjectPath(t, node.callee, state)
-        const lastPart = path.slice(-1)
+        const partialResult = node
+            .properties
+            .flatMap(prop => {
+                // handle inline styles
+                if (t.isObjectProperty(prop)) {
+                    inlineStyles.push(prop)
 
-        if (!lastPart) {
-            return path
-        }
+                    return null
+                }
 
-        // for web increment counter for dynamic functions
-        if (state.file.webDynamicFunctions[lastPart]) {
-            node.arguments.push(t.numericLiteral(++state.file.webDynamicFunctions[lastPart]))
+                return getStyleMetadata(t, prop.argument)
+            })
+            .filter(Boolean)
 
-            return path
+        if (inlineStyles.length > 0) {
+            return partialResult.concat([{
+                members: [],
+                inlineStyle: t.objectExpression(inlineStyles),
+                dynamicFunction: undefined
+            }])
         }
 
-        state.file.webDynamicFunctions[lastPart] = 1
-        node.arguments.push(t.numericLiteral(1))
+        return partialResult
+    }
 
-        return path
+    // {styles.container(arg1, arg2)}
+    if (t.isCallExpression(node)) {
+        return getStyleMetadata(t, node.callee, node)
+    }
+
+    if (t.isIdentifier(node)) {
+        return [{
+            members: [node.name],
+            inlineStyle: undefined,
+            dynamicFunction: undefined
+        }]
     }
 
     return []
@@ -52,7 +77,42 @@ function getStyleAttribute(t, path) {
     )
 }
 
+function styleAttributeToArray(t, path) {
+    const styleAttribute = getStyleAttribute(t, path)
+
+    // {{...style.container, ...style.container}}
+    if (t.isObjectExpression(styleAttribute.value.expression)) {
+        const properties = styleAttribute.value.expression.properties
+            .map(property => t.isSpreadElement(property)
+                ? property.argument
+                : t.objectExpression([property])
+            )
+
+        styleAttribute.value.expression = t.arrayExpression(properties)
+
+        return
+    }
+
+    // [{...style.container, ...style.container}]
+    if (t.isArrayExpression(styleAttribute.value.expression)) {
+        const properties = styleAttribute.value.expression.elements
+            .flatMap(property => {
+                if (t.isSpreadElement(property)) {
+                    return property.argument
+                }
+                return property
+            })
+
+        styleAttribute.value.expression = t.arrayExpression(properties)
+
+        return
+    }
+
+    styleAttribute.value.expression = t.arrayExpression([styleAttribute.value.expression])
+}
+
 module.exports = {
-    getStyleObjectPath,
-    getStyleAttribute
+    getStyleMetadata,
+    getStyleAttribute,
+    styleAttributeToArray
 }

package/plugin/stylesheet.js

@@ -14,7 +14,21 @@ const UnistyleDependency = {
     PixelRatio: 10,
     FontScale: 11,
     StatusBar: 12,
-    NavigationBar: 13
+    NavigationBar: 13,
+    Ime: 14
+}
+
+function stringToUniqueId(str) {
+    let hash = 0;
+
+    for (let i = 0; i < str.length; i++) {
+        hash = (hash << 5) - hash + str.charCodeAt(i)
+        hash |= 0
+    }
+
+    const absHash = Math.abs(hash)
+
+    return absHash % 1000000000
 }
 
 function isUnistylesStyleSheet(t, path, state) {
@@ -28,6 +42,13 @@ function isUnistylesStyleSheet(t, path, state) {
     )
 }
 
+function addStyleSheetTag(t, path, state) {
+    const callee = path.get('callee')
+    const uniqueId = stringToUniqueId(state.filename) + ++state.file.tagNumber
+
+    callee.container.arguments.push(t.numericLiteral(uniqueId))
+}
+
 function analyzeDependencies(t, state, name, unistyleObj, themeName, rtName) {
     const debugMessage = deps => {
         if (state.opts.debug) {
@@ -80,7 +101,8 @@ function analyzeDependencies(t, state, name, unistyleObj, themeName, rtName) {
 
                             return
                         }
-                        case 'orientation': {
+                        case 'isPortrait':
+                        case 'isLandscape': {
                             dependencies.push(UnistyleDependency.Orientation)
 
                             return
@@ -90,6 +112,11 @@ function analyzeDependencies(t, state, name, unistyleObj, themeName, rtName) {
 
                             return
                         }
+                        case 'ime': {
+                            dependencies.push(UnistyleDependency.Ime)
+
+                            return
+                        }
                         case 'insets': {
                             dependencies.push(UnistyleDependency.Insets)
 
@@ -141,7 +168,30 @@ function analyzeDependencies(t, state, name, unistyleObj, themeName, rtName) {
     }
 }
 
+function getUnistyle(t, property) {
+    const propertyValue = t.isArrowFunctionExpression(property.value)
+        ? property.value.body
+        : property.value
+
+    if (t.isObjectExpression(propertyValue)) {
+        return propertyValue
+    }
+
+    if (t.isBlockStatement(propertyValue)) {
+        const returnStatement = propertyValue.body
+            .find(value => t.isReturnStatement(value))
+
+        return returnStatement
+            ? returnStatement.argument
+            : null
+    }
+
+    return null
+}
+
 module.exports = {
     isUnistylesStyleSheet,
-    analyzeDependencies
+    analyzeDependencies,
+    addStyleSheetTag,
+    getUnistyle
 }

package/plugin/variants.js

@@ -0,0 +1,33 @@
+function isUsingVariants(t, path) {
+    const callee = path.get('callee')
+
+    return (
+        t.isMemberExpression(callee) &&
+        t.isIdentifier(callee.node.object, { name: 'styles' }) &&
+        t.isIdentifier(callee.node.property, { name: 'useVariants' }) &&
+        t.isObjectExpression(path.node.arguments[0])
+    )
+}
+
+function extractVariants(t, path, state) {
+    const arg = path.node.arguments[0]
+
+    const variantDeclaration = t.variableDeclaration('const', [
+        t.variableDeclarator(
+            t.identifier('__uni__variants'),
+            arg
+        )
+    ])
+
+    // Replace useVariants argument with __uni__variants
+    path.node.arguments[0] = t.identifier('__uni__variants')
+
+    path.insertBefore(variantDeclaration)
+
+    state.file.hasVariants = true
+}
+
+module.exports = {
+    isUsingVariants,
+    extractVariants
+}

package/src/common.js

@@ -0,0 +1,4 @@
+import { Platform } from 'react-native';
+export const isWeb = Platform.OS === 'web';
+export const isIOS = Platform.OS === 'ios';
+export const isAndroid = Platform.OS === 'android';

package/src/core/createUnistylesComponent.js

@@ -0,0 +1,6 @@
+import React, {} from 'react';
+export const createUnistylesComponent = (Component, mappings) => {
+    return (props) => {
+        return React.createElement(Component, { ...props });
+    };
+};

package/src/core/createUnistylesComponent.native.js

@@ -0,0 +1,31 @@
+import React, { useEffect, useState } from 'react';
+import { StyleSheet, UnistyleDependency, UnistylesRuntime } from '../specs';
+export const createUnistylesComponent = (Component, mappings) => {
+    return (props) => {
+        const [theme, setTheme] = useState(UnistylesRuntime.getTheme());
+        const [, setRt] = useState(0);
+        useEffect(() => {
+            const removeChangeListener = StyleSheet.addChangeListener(dependencies => {
+                const componentDependencies = (props.style?.uni__dependencies || mappings(theme).style?.uni__dependencies);
+                if (dependencies.includes(UnistyleDependency.Theme) && (!componentDependencies || componentDependencies.includes(UnistyleDependency.Theme))) {
+                    setTheme(UnistylesRuntime.getTheme());
+                }
+                if (dependencies.some(dependency => dependency >= 2) && (!componentDependencies || componentDependencies.some(dependency => dependency >= 2))) {
+                    setRt(prevState => prevState + 1);
+                }
+            });
+            return () => {
+                removeChangeListener();
+            };
+        }, []);
+        const mergedProps = { ...mappings(theme) };
+        Object.keys(props).forEach(key => {
+            if (key in mergedProps) {
+                mergedProps[key] = Object.assign(props[key], mergedProps[key]);
+                return;
+            }
+            mergedProps[key] = props[key];
+        });
+        return React.createElement(Component, { ...mergedProps });
+    };
+};

package/src/core/createUnistylesComponent.native.tsx

@@ -0,0 +1,44 @@
+import React, { type ComponentProps, type ComponentType, useEffect, useState } from 'react'
+import type { UnistylesTheme } from '../types'
+import { StyleSheet, UnistyleDependency, UnistylesRuntime, type UnistylesStyleSheet } from '../specs'
+
+type Mappings<T extends ComponentType<any>> = (theme: UnistylesTheme) => Partial<ComponentProps<T>>
+
+export const createUnistylesComponent = <T extends ComponentType<any>>(Component: T, mappings: Mappings<T>) => {
+    return (props: ComponentProps<T>) => {
+        const [theme, setTheme] = useState<UnistylesTheme>(UnistylesRuntime.getTheme())
+        const [, setRt] = useState(0)
+
+        useEffect(() => {
+            const removeChangeListener = (StyleSheet as UnistylesStyleSheet).addChangeListener(dependencies => {
+                const componentDependencies = (props.style?.uni__dependencies || mappings(theme).style?.uni__dependencies) as Array<UnistyleDependency>
+
+                if (dependencies.includes(UnistyleDependency.Theme) && (!componentDependencies ||componentDependencies.includes(UnistyleDependency.Theme))) {
+                    setTheme(UnistylesRuntime.getTheme())
+                }
+
+                if (dependencies.some(dependency => dependency >= 2) && (!componentDependencies || componentDependencies.some(dependency => dependency >= 2))) {
+                    setRt(prevState => prevState + 1)
+                }
+            })
+
+            return () => {
+                removeChangeListener()
+            }
+        }, [])
+
+        const mergedProps = { ...mappings(theme) } as ComponentProps<T>
+
+        Object.keys(props).forEach(key => {
+            if (key in mergedProps) {
+                mergedProps[key] = Object.assign(props[key], mergedProps[key])
+
+                return
+            }
+
+            mergedProps[key] = props[key]
+        })
+
+        return <Component {...mergedProps} />
+    }
+}

package/src/core/createUnistylesComponent.tsx

@@ -0,0 +1,10 @@
+import React, { type ComponentProps, type ComponentType } from 'react'
+import type { UnistylesTheme } from '../types'
+
+type Mappings<T extends ComponentType<any>> = (theme: UnistylesTheme) => Partial<ComponentProps<T>>
+
+export const createUnistylesComponent = <T extends ComponentType<any>>(Component: T, _: Mappings<T>) => {
+    return (props: ComponentProps<T>) => {
+        return <Component {...props} />
+    }
+}

package/src/core/index.js

@@ -0,0 +1,3 @@
+export { useBreakpoint } from './useBreakpoint';
+export { useTheme } from './useTheme';
+export { createUnistylesComponent } from './createUnistylesComponent';

package/src/core/index.ts

@@ -0,0 +1,3 @@
+export { useBreakpoint } from './useBreakpoint'
+export { useTheme } from './useTheme'
+export { createUnistylesComponent } from './createUnistylesComponent'

package/src/core/useBreakpoint.js

@@ -0,0 +1,14 @@
+import { useEffect, useState } from 'react';
+import { UnistylesRuntime } from '../web';
+import { UnistylesListener } from '../web/listener';
+import { UnistyleDependency } from '../specs/NativePlatform';
+export const useBreakpoint = () => {
+    const [breakpoint, setBreakpoint] = useState(UnistylesRuntime.breakpoint);
+    useEffect(() => {
+        const removeChangeListener = UnistylesListener.addListeners([UnistyleDependency.Breakpoints], () => setBreakpoint(UnistylesRuntime.breakpoint));
+        return () => {
+            removeChangeListener();
+        };
+    }, []);
+    return breakpoint;
+};

package/src/core/useBreakpoint.native.js

@@ -0,0 +1,16 @@
+import { useEffect, useState } from 'react';
+import { StyleSheet, UnistyleDependency, UnistylesRuntime } from '../specs';
+export const useBreakpoint = () => {
+    const [breakpoint, setBreakpoint] = useState(UnistylesRuntime.breakpoint);
+    useEffect(() => {
+        const removeChangeListener = StyleSheet.addChangeListener(dependencies => {
+            if (dependencies.includes(UnistyleDependency.Breakpoints)) {
+                setBreakpoint(UnistylesRuntime.breakpoint);
+            }
+        });
+        return () => {
+            removeChangeListener();
+        };
+    }, []);
+    return breakpoint;
+};

package/src/core/useBreakpoint.native.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react'
+import { StyleSheet, UnistyleDependency, UnistylesRuntime } from '../specs'
+import type { UnistylesStyleSheet } from '../specs'
+
+export const useBreakpoint = () => {
+    const [breakpoint, setBreakpoint] = useState(UnistylesRuntime.breakpoint)
+
+    useEffect(() => {
+        const removeChangeListener = (StyleSheet as UnistylesStyleSheet).addChangeListener(dependencies => {
+            if (dependencies.includes(UnistyleDependency.Breakpoints)) {
+                setBreakpoint(UnistylesRuntime.breakpoint)
+            }
+        })
+
+        return () => {
+            removeChangeListener()
+        }
+    }, [])
+
+    return breakpoint
+}

package/src/core/useBreakpoint.ts

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react'
+import { UnistylesRuntime } from '../web'
+import { UnistylesListener } from '../web/listener'
+import { UnistyleDependency } from '../specs/NativePlatform'
+
+export const useBreakpoint = () => {
+    const [breakpoint, setBreakpoint] = useState(UnistylesRuntime.breakpoint)
+
+    useEffect(() => {
+        const removeChangeListener = UnistylesListener.addListeners([UnistyleDependency.Breakpoints], () => setBreakpoint(UnistylesRuntime.breakpoint))
+
+        return () => {
+            removeChangeListener()
+        }
+    }, [])
+
+    return breakpoint
+}

package/src/core/useTheme.js

@@ -0,0 +1,14 @@
+import { useEffect, useState } from 'react';
+import { UnistylesRuntime } from '../web';
+import { UnistylesListener } from '../web/listener';
+import { UnistyleDependency } from '../specs/NativePlatform';
+export const useTheme = () => {
+    const [theme, setTheme] = useState(UnistylesRuntime.getTheme());
+    useEffect(() => {
+        const removeChangeListener = UnistylesListener.addListeners([UnistyleDependency.Theme], () => setTheme(UnistylesRuntime.getTheme()));
+        return () => {
+            removeChangeListener();
+        };
+    }, []);
+    return theme;
+};

package/src/core/useTheme.native.js

@@ -0,0 +1,16 @@
+import { useEffect, useState } from 'react';
+import { StyleSheet, UnistyleDependency, UnistylesRuntime } from '../specs';
+export const useTheme = () => {
+    const [theme, setTheme] = useState(UnistylesRuntime.getTheme());
+    useEffect(() => {
+        const removeChangeListener = StyleSheet.addChangeListener(dependencies => {
+            if (dependencies.includes(UnistyleDependency.Theme)) {
+                setTheme(UnistylesRuntime.getTheme());
+            }
+        });
+        return () => {
+            removeChangeListener();
+        };
+    }, []);
+    return theme;
+};

package/src/core/useTheme.native.ts

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react'
+import { StyleSheet, UnistyleDependency, UnistylesRuntime } from '../specs'
+import type { UnistylesStyleSheet } from '../specs'
+import type { UnistylesTheme } from '../types'
+
+export const useTheme = (): UnistylesTheme => {
+    const [theme, setTheme] = useState(UnistylesRuntime.getTheme())
+
+    useEffect(() => {
+        const removeChangeListener = (StyleSheet as UnistylesStyleSheet).addChangeListener(dependencies => {
+            if (dependencies.includes(UnistyleDependency.Theme)) {
+                setTheme(UnistylesRuntime.getTheme())
+            }
+        })
+
+        return () => {
+            removeChangeListener()
+        }
+    }, [])
+
+    return theme
+}

package/src/core/useTheme.ts

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react'
+import { UnistylesRuntime } from '../web'
+import { UnistylesListener } from '../web/listener'
+import { UnistyleDependency } from '../specs/NativePlatform'
+import type { UnistylesTheme } from '../types'
+
+export const useTheme = (): UnistylesTheme => {
+    const [theme, setTheme] = useState(UnistylesRuntime.getTheme())
+
+    useEffect(() => {
+        const removeChangeListener = UnistylesListener.addListeners([UnistyleDependency.Theme], () => setTheme(UnistylesRuntime.getTheme()))
+
+        return () => {
+            removeChangeListener()
+        }
+    }, [])
+
+    return theme
+}

package/src/global.js

@@ -0,0 +1 @@
+export {};

package/src/index.js

@@ -0,0 +1,3 @@
+export * from './specs';
+export { mq } from './mq';
+export { useTheme, useBreakpoint, createUnistylesComponent } from './core';

package/src/index.ts

@@ -1,15 +1,5 @@
-import React from 'react'
-
 export * from './specs'
 export { mq } from './mq'
 export type { UnistylesThemes, UnistylesBreakpoints } from './global'
-
-// todo verify true min version
-const minReactVersionRequiredByUnistyles = '18.3.1'
-
-if (React.version < minReactVersionRequiredByUnistyles) {
-    throw new Error(`
-        You are using an outdated version of React (${React.version}).
-        Unistyles requires at least React ${minReactVersionRequiredByUnistyles}.
-    `)
-}
+export { useTheme, useBreakpoint, createUnistylesComponent } from './core'
+export type { UnistylesVariants } from './types'

package/src/mq.js

@@ -0,0 +1,38 @@
+const getMQValue = (value) => {
+    if (typeof value === 'number') {
+        return value;
+    }
+    if (value === null) {
+        return 0;
+    }
+    // todo take it from js
+    const breakpoints = {
+        xs: 0,
+        sm: 300,
+        md: 500,
+        lg: 800,
+        xl: 1200
+    };
+    // @ts-ignore
+    return breakpoints[value] ?? 0;
+};
+/**
+ * Utility to create cross-platform media queries
+ * @returns - JavaScript symbol to be used in your stylesheet
+ */
+export const mq = {
+    only: {
+        width: (wMin = 0, wMax = Infinity) => `:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]`,
+        height: (hMin = 0, hMax = Infinity) => `:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]`
+    },
+    width: (wMin = 0, wMax = Infinity) => ({
+        and: {
+            height: (hMin = 0, hMax = Infinity) => `:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]`
+        }
+    }),
+    height: (hMin = 0, hMax = Infinity) => ({
+        and: {
+            width: (wMin = 0, wMax = Infinity) => `:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]`
+        }
+    })
+};

package/src/specs/NativePlatform/NativePlatform.nitro.js

@@ -0,0 +1,19 @@
+import {} from '../types';
+export var UnistyleDependency;
+(function (UnistyleDependency) {
+    UnistyleDependency[UnistyleDependency["Theme"] = 0] = "Theme";
+    UnistyleDependency[UnistyleDependency["ThemeName"] = 1] = "ThemeName";
+    UnistyleDependency[UnistyleDependency["AdaptiveThemes"] = 2] = "AdaptiveThemes";
+    UnistyleDependency[UnistyleDependency["Breakpoints"] = 3] = "Breakpoints";
+    UnistyleDependency[UnistyleDependency["Variants"] = 4] = "Variants";
+    UnistyleDependency[UnistyleDependency["ColorScheme"] = 5] = "ColorScheme";
+    UnistyleDependency[UnistyleDependency["Dimensions"] = 6] = "Dimensions";
+    UnistyleDependency[UnistyleDependency["Orientation"] = 7] = "Orientation";
+    UnistyleDependency[UnistyleDependency["ContentSizeCategory"] = 8] = "ContentSizeCategory";
+    UnistyleDependency[UnistyleDependency["Insets"] = 9] = "Insets";
+    UnistyleDependency[UnistyleDependency["PixelRatio"] = 10] = "PixelRatio";
+    UnistyleDependency[UnistyleDependency["FontScale"] = 11] = "FontScale";
+    UnistyleDependency[UnistyleDependency["StatusBar"] = 12] = "StatusBar";
+    UnistyleDependency[UnistyleDependency["NavigationBar"] = 13] = "NavigationBar";
+    UnistyleDependency[UnistyleDependency["Ime"] = 14] = "Ime";
+})(UnistyleDependency || (UnistyleDependency = {}));

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

@@ -18,7 +18,8 @@ export enum UnistyleDependency {
     PixelRatio = 10,
     FontScale = 11,
     StatusBar = 12,
-    NavigationBar = 13
+    NavigationBar = 13,
+    Ime = 14
 }
 
 export interface UnistylesNativeMiniRuntime {
@@ -31,7 +32,8 @@ export interface UnistylesNativeMiniRuntime {
     readonly rtl: boolean
     readonly statusBar: Dimensions,
     readonly navigationBar: Dimensions
-    readonly orientation: Orientation
+    readonly isPortrait: boolean,
+    readonly isLandscape: boolean
 }
 
 // represents any native API that can communicate with Unistyles
@@ -57,5 +59,7 @@ export interface NativePlatform extends HybridObject<{ ios: 'swift', android: 'k
 
     // private
     getMiniRuntime(): UnistylesNativeMiniRuntime,
-    registerPlatformListener(callback: (dependencies: Array<UnistyleDependency>) => void): void
+    registerPlatformListener(callback: (dependencies: Array<UnistyleDependency>) => void): void,
+    registerImeListener(callback: () => void): void,
+    unregisterPlatformListeners(): void
 }

package/src/specs/NativePlatform/index.js

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

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

@@ -0,0 +1 @@
+export {};

package/src/specs/NavigtionBar/index.js

@@ -0,0 +1,9 @@
+import { processColor } from 'react-native';
+export const attachNavigationBarJSMethods = (hybridObject) => {
+    const privateHybrid = hybridObject;
+    privateHybrid._setBackgroundColor = hybridObject.setBackgroundColor;
+    hybridObject.setBackgroundColor = (color) => {
+        const parsedColor = processColor(color) ?? 0;
+        privateHybrid._setBackgroundColor(parsedColor);
+    };
+};