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

package/plugin/index.js

@@ -0,0 +1,132 @@
+const addShadowRegistryImport = require('./import')
+const { getStyleMetadata, getStyleAttribute } = require('./style')
+const { getRefProp, addRef, overrideRef, hasStringRef } = require('./ref')
+const { isUnistylesStyleSheet, analyzeDependencies, addStyleSheetTag, getUnistyle } = require('./stylesheet')
+const { isUsingVariants, extractVariants } = require('./variants')
+
+module.exports = function ({ types: t }) {
+    return {
+        name: 'babel-react-native-unistyles',
+        visitor: {
+            Program: {
+                enter(path, state) {
+                    state.file.hasAnyUnistyle = false
+                    state.file.hasUnistylesImport = false
+                    state.file.styleSheetLocalName = ''
+                    state.file.tagNumber = 0
+                },
+                exit(path, state) {
+                    if (state.file.hasAnyUnistyle) {
+                        addShadowRegistryImport(t, path)
+                    }
+                }
+            },
+            ImportDeclaration(path, state) {
+                const importSource = path.node.source.value
+
+                if (importSource.includes('react-native-unistyles')) {
+                    state.file.hasUnistylesImport = true
+
+                    path.node.specifiers.forEach(specifier => {
+                        if (specifier.imported && specifier.imported.name === 'StyleSheet') {
+                            state.file.styleSheetLocalName = specifier.local.name
+                        }
+                    })
+                }
+            },
+            JSXElement(path, state) {
+                if (!state.file.hasUnistylesImport) {
+                    return
+                }
+
+                const styleAttr = getStyleAttribute(t, path)
+
+                // component has no style prop
+                if (!styleAttr) {
+                    return
+                }
+
+                const metadata = getStyleMetadata(t, styleAttr.value.expression)
+
+                // style prop is not using object expression
+                if (metadata.length === 0) {
+                    return
+                }
+
+                // to add import
+                state.file.hasAnyUnistyle = true
+
+                metadata.forEach(meta => {
+                    const refProp = getRefProp(t, path)
+
+                    if (!refProp && hasStringRef(t, path)) {
+                        throw new Error("Detected string based ref which is not supported by Unistyles.")
+                    }
+
+                    refProp
+                        ? overrideRef(t, path, refProp, meta, state)
+                        : addRef(t, path, meta, state)
+                })
+            },
+            CallExpression(path, state) {
+                if (isUsingVariants(t, path)) {
+                    extractVariants(t, path, state)
+                }
+
+                if (!isUnistylesStyleSheet(t, path, state)) {
+                    return
+                }
+
+                addStyleSheetTag(t, path, state)
+
+                const arg = path.node.arguments[0]
+
+                // Object passed to StyleSheet.create
+                if (t.isObjectExpression(arg)) {
+                    arg.properties.forEach(property => {
+                        if (t.isObjectProperty(property)) {
+                            const propertyValue = getUnistyle(t, property)
+
+                            if (!propertyValue) {
+                                return
+                            }
+
+                            analyzeDependencies(t, state, property.key.name, propertyValue)
+                        }
+                    })
+                }
+
+                // Function passed to StyleSheet.create (e.g., theme => ({ container: {} }))
+                if (t.isArrowFunctionExpression(arg) || t.isFunctionExpression(arg)) {
+                    const params = arg.params
+                    const hasTheme = params.length >= 1
+                    const hasMiniRuntime = params.length === 2
+                    const themeLocalName = hasTheme
+                        ? params[0].name
+                        : undefined
+                    const miniRuntimeLocalName = hasMiniRuntime
+                        ? params[1].name
+                        : undefined
+                    const body = t.isBlockStatement(arg.body)
+                        ? arg.body.body.find(statement => t.isReturnStatement(statement)).argument
+                        : arg.body
+
+                    // Ensure the function body returns an object
+                    if (t.isObjectExpression(body)) {
+                        body.properties.forEach(property => {
+                            if (t.isObjectProperty(property)) {
+                                const propertyValue = getUnistyle(t, property)
+
+                                if (!propertyValue) {
+                                    return
+                                }
+
+                                analyzeDependencies(t, state, property.key.name, propertyValue, themeLocalName, miniRuntimeLocalName)
+                            }
+                        })
+                    }
+                }
+            }
+        }
+    }
+}

package/plugin/ref.js

@@ -0,0 +1,211 @@
+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, metadata, state) {
+    const hasVariants = state.file.hasVariants
+
+    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(metadata.styleObj), t.identifier(metadata.styleProp)),
+                        t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
+                        metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
+                    ]
+                )
+            ),
+            t.returnStatement(
+                t.arrowFunctionExpression([],
+                    t.callExpression(
+                        t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
+                        [t.identifier('ref'), t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))]
+                    )
+                )
+            )
+        ])
+    )
+
+    const newRefProp = t.jsxAttribute(
+        t.jsxIdentifier('ref'),
+        t.jsxExpressionContainer(newRefFunction)
+    )
+
+    path.node.openingElement.attributes.push(newRefProp)
+}
+
+function overrideRef(t, path, refProp, metadata, state) {
+    const hasVariants = state.file.hasVariants
+    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.memberExpression(t.identifier(userVariableName), t.identifier('current')),
+                        t.identifier(uniqueRefName)
+                    )
+                ),
+                t.expressionStatement(
+                    t.callExpression(
+                        t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
+
+                        [
+                            t.identifier(uniqueRefName),
+                            t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp)),
+                            t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
+                            metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
+                        ]
+                    )
+                ),
+                t.returnStatement(
+                    t.arrowFunctionExpression([],
+                        t.callExpression(
+                            t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
+                            [t.identifier(uniqueRefName), t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.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(metadata.styleObj), t.identifier(metadata.styleProp)),
+                            t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
+                            metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
+                        ]
+                    )
+                ),
+                // 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(metadata.styleObj), t.identifier(metadata.styleProp))]
+                            )
+                        )
+                    ]))
+                )
+            ])
+        )
+
+        refProp.value = t.jsxExpressionContainer(newRefFunction)
+
+        return
+    }
+
+    if (!binding) {
+        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(metadata.styleObj), t.identifier(metadata.styleProp)),
+                        t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
+                        metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
+                    ]
+                )
+            ),
+            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(metadata.styleObj), t.identifier(metadata.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,47 @@
+function getStyleMetadata(t, node, dynamicFunction = null) {
+    // {styles.container}
+    if (t.isMemberExpression(node)) {
+        return [
+            {
+                styleObj: node.object.name,
+                styleProp: node.property.name,
+                dynamicFunction
+            }
+        ]
+    }
+
+    // [styles.container]
+    if (t.isArrayExpression(node)) {
+        return node.elements.flatMap(element => getStyleMetadata(t, element))
+    }
+
+    // [...styles.container]
+    if (t.isSpreadElement(node)) {
+        return getStyleMetadata(t, node.argument)
+    }
+
+    // {{ ...styles.container }}
+    if (t.isObjectExpression(node)) {
+        return node.properties.flatMap(prop => getStyleMetadata(t, prop.argument))
+    }
+
+    // {styles.container(arg1, arg2)}
+    if (t.isCallExpression(node)) {
+        return getStyleMetadata(t, node.callee, node)
+    }
+
+    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 = {
+    getStyleMetadata,
+    getStyleAttribute
+}

package/plugin/stylesheet.js

@@ -0,0 +1,190 @@
+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 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) {
+    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 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) {
+            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)))
+            )
+        )
+    }
+}
+
+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,
+    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.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'
-}