react-native-unistyles 3.0.0-beta.3 → 3.0.0-beta.5

package/plugin/import.js

@@ -1,3 +1,4 @@
+/** @param {import('./index').UnistylesPluginPass} state */
 function addUnistylesImport(t, path, state) {
     const localNames = Object.keys(state.reactNativeImports)
     const names = Object.values(state.reactNativeImports)
@@ -38,27 +39,6 @@ function addUnistylesImport(t, path, state) {
         path.node.body.unshift(newImport)
     })
 
-    // import variants
-    if (state.file.hasVariants) {
-        const unistylesImport = path.node.body
-            .find(node => t.isImportDeclaration(node) && node.source.value === 'react-native-unistyles')
-
-        if (unistylesImport) {
-            // prevent duplications
-            if (!unistylesImport.specifiers.some(specifier => specifier.local.name === 'Variants')) {
-                unistylesImport.specifiers.push(t.importSpecifier(t.identifier('Variants'), t.identifier('Variants')))
-            }
-        } else {
-            // Add a new import declaration for "Variants" from "react-native-unistyles"
-            const newImport = t.importDeclaration(
-                [t.importSpecifier(t.identifier('Variants'), t.identifier('Variants'))],
-                t.stringLiteral('react-native-unistyles')
-            )
-
-            path.node.body.unshift(newImport)
-        }
-    }
-
     // cleanup
     nodesToRemove.forEach(node => path.node.body.splice(path.node.body.indexOf(node), 1))
 }

package/plugin/index.d.ts

@@ -0,0 +1,41 @@
+export interface UnistylesPluginOptions {
+  /**
+   * By default babel plugin will look for any `react-native-unistyles` import to start processing your file.
+   * However, in some cases you might want to process files that miss such import:
+   * - ui-kits that aggregates Unistyles components
+   * - monorepos that use Unistyles under absolute path like `@codemask/styles`
+   *
+   * If that's your case, you can configure the Babel plugin to process them.
+   */
+  autoProcessImports?: string[]
+
+  /**
+   * By default babel plugin will ignore `node_modules`.
+   * However similar to `autoProcessImports`, you can configure it to process extra paths.
+   *
+   * Under these paths we will replace `react-native` imports with `react-native-unistyles` factories that will borrow components refs [read more](https://www.unistyl.es/v3/other/babel-plugin#3-component-factory-borrowing-ref).
+   *
+   * Defaults to:
+   *
+   * ```ts
+   * ['react-native-reanimated/src/component', 'react-native-gesture-handler/src/components']
+   * ```
+   */
+  autoProcessPaths?: string[];
+
+  /**
+   * In order to list detected dependencies by the Babel plugin you can enable the `debug` flag.
+   * It will `console.log` name of the file and component with Unistyles dependencies.
+   */
+  debug?: boolean;
+
+  /**
+   * Only applicable for Unistyles monorepo for
+   * path resolution, don't use it!
+   */
+  isLocal?: boolean;
+}
+
+export interface UnistylesPluginPass {
+  opts: UnistylesPluginOptions;
+}

package/plugin/index.js

@@ -1,8 +1,7 @@
 const { addUnistylesImport, isInsideNodeModules } = require('./import')
-const { getStyleMetadata, getStyleAttribute, styleAttributeToArray, handlePressable } = require('./style')
 const { hasStringRef } = require('./ref')
-const { isUnistylesStyleSheet, analyzeDependencies, addStyleSheetTag, getUnistyles } = require('./stylesheet')
-const { isUsingVariants, extractVariants, addJSXVariants } = require('./variants')
+const { isUnistylesStyleSheet, analyzeDependencies, addStyleSheetTag, getUnistyles, isKindOfStyleSheet } = require('./stylesheet')
+const { extractVariants } = require('./variants')
 
 const reactNativeComponentNames = [
     'ActivityIndicator',
@@ -20,38 +19,52 @@ const reactNativeComponentNames = [
     'RefreshControl',
     'TouchableHighlight',
     'TouchableOpacity',
-    'VirtualizedList'
+    'VirtualizedList',
+    // Modal - there is no exposed native handle
+    // TouchableWithoutFeedback - can't accept a ref
 ]
 
-// Modal - there is no exposed native handle
-// TouchableWithoutFeedback - can't accept a ref
+// auto replace RN imports to Unistyles imports under these paths
+// our implementation simply borrows 'ref' to register it in ShadowRegistry
+// so we won't affect anyone's implementation
+const REPLACE_WITH_UNISTYLES_PATHS = [
+    'react-native-reanimated/src/component',
+    'react-native-gesture-handler/src/components'
+]
 
 module.exports = function ({ types: t }) {
     return {
         name: 'babel-react-native-unistyles',
         visitor: {
             Program: {
+                /** @param {import('./index').UnistylesPluginPass} state */
                 enter(path, state) {
-                    if (isInsideNodeModules(state)) {
-                        return
-                    }
+                    state.file.replaceWithUnistyles = REPLACE_WITH_UNISTYLES_PATHS
+                        .concat(state.opts.autoProcessPaths ?? [])
+                        .some(path => state.filename.includes(path))
 
                     state.file.hasAnyUnistyle = false
-                    state.file.hasUnistylesImport = false
-                    state.file.shouldIncludePressable = false
                     state.file.hasVariants = false
                     state.file.styleSheetLocalName = ''
                     state.file.tagNumber = 0
-                    state.file.isClassComponent = false
                     state.reactNativeImports = {}
+                    state.file.forceProcessing = false
                 },
                 exit(path, state) {
-                    if (state.file.hasAnyUnistyle || state.file.hasVariants) {
+                    if (isInsideNodeModules(state) && !state.file.replaceWithUnistyles) {
+                        return
+                    }
+
+                    if (state.file.hasAnyUnistyle || state.file.hasVariants || state.file.replaceWithUnistyles) {
                         addUnistylesImport(t, path, state)
                     }
                 }
             },
             FunctionDeclaration(path, state) {
+                if (isInsideNodeModules(state)) {
+                    return
+                }
+
                 const componentName = path.node.id
                     ? path.node.id.name
                     : null
@@ -61,13 +74,16 @@ module.exports = function ({ types: t }) {
                 }
             },
             ClassDeclaration(path, state) {
+                if (isInsideNodeModules(state)) {
+                    return
+                }
+
                 const componentName = path.node.id
                     ? path.node.id.name
                     : null
 
                 if (componentName) {
                     state.file.hasVariants = false
-                    state.file.isClassComponent = true
                 }
             },
             VariableDeclaration(path, state) {
@@ -87,16 +103,15 @@ module.exports = function ({ types: t }) {
                     }
                 })
             },
+            /** @param {import('./index').UnistylesPluginPass} state */
             ImportDeclaration(path, state) {
-                if (isInsideNodeModules(state)) {
+                if (isInsideNodeModules(state) && !state.file.replaceWithUnistyles) {
                     return
                 }
 
                 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
@@ -104,20 +119,16 @@ module.exports = function ({ types: t }) {
                     })
                 }
 
-                if (importSource.includes('react-native')) {
+                if (importSource === 'react-native') {
                     path.node.specifiers.forEach(specifier => {
-                        if (specifier.imported && specifier.imported.name === 'Pressable' && specifier.local.name !== 'NativePressableReactNative') {
-                            state.file.shouldIncludePressable = true
-                        }
-
                         if (specifier.imported && reactNativeComponentNames.includes(specifier.imported.name)) {
                             state.reactNativeImports[specifier.local.name] = specifier.imported.name
                         }
                     })
                 }
 
-                if (importSource.includes('react-native-web/dist/exports/Pressable')) {
-                    state.file.shouldIncludePressable = true
+                if (!state.file.forceProcessing && Array.isArray(state.opts.autoProcessImports)) {
+                    state.file.forceProcessing = state.opts.autoProcessImports.includes(importSource)
                 }
             },
             JSXElement(path, state) {
@@ -125,63 +136,28 @@ module.exports = function ({ types: t }) {
                     return
                 }
 
-                if (state.file.isClassComponent) {
-                    return
-                }
-
-                const openingElement = path.node.openingElement
-                const openingElementName = openingElement.name.name
-                const isReactNativeComponent = Boolean(state.reactNativeImports[openingElementName])
-                const isAnimatedComponent = (
-                    !isReactNativeComponent &&
-                    openingElement.name.object &&
-                    openingElement.name.object.name === 'Animated'
-                )
-
-                if (!isReactNativeComponent && !isAnimatedComponent) {
-                    return
-                }
-
-                const styleAttr = getStyleAttribute(t, path)
-
-                // component has no style prop
-                if (!styleAttr) {
-                    return
-                }
-
-                const metadata = getStyleMetadata(t, styleAttr.value.expression, null, state)
-
-                if (openingElementName === 'Pressable') {
-                    return handlePressable(t, path, styleAttr, metadata, state)
-                }
-
-                // style prop is using unexpected expression
-                if (metadata.length === 0) {
-                    return
-                }
-
-                styleAttributeToArray(t, path)
-
-                // to add import
-                state.file.hasAnyUnistyle = true
-
                 if (hasStringRef(t, path)) {
                     throw new Error("Detected string based ref which is not supported by Unistyles.")
                 }
             },
-            CallExpression(path, state) {
+            BlockStatement(path, state) {
                 if (isInsideNodeModules(state)) {
                     return
                 }
 
-                if (isUsingVariants(t, path)) {
-                    extractVariants(t, path, state)
+                extractVariants(t, path, state)
+            },
+            CallExpression(path, state) {
+                if (isInsideNodeModules(state)) {
+                    return
                 }
 
-                if (!isUnistylesStyleSheet(t, path, state)) {
+                if (!isUnistylesStyleSheet(t, path, state) && !isKindOfStyleSheet(t, path, state)) {
                     return
                 }
 
+                state.file.hasAnyUnistyle = true
+
                 addStyleSheetTag(t, path, state)
 
                 const arg = path.node.arguments[0]
@@ -227,14 +203,6 @@ module.exports = function ({ types: t }) {
                         })
                     }
                 }
-            },
-            ReturnStatement(path, state) {
-                // ignore nested returns in JSX elements
-                const hasJSXParent = path.findParent(p => p.isJSXElement())
-
-                if (!hasJSXParent && state.file.hasVariants) {
-                    addJSXVariants(t, path, state)
-                }
             }
         }
     }

package/plugin/stylesheet.js

@@ -42,6 +42,20 @@ function isUnistylesStyleSheet(t, path, state) {
     )
 }
 
+function isKindOfStyleSheet(t, path, state) {
+    if (!state.file.forceProcessing) {
+        return false
+    }
+
+    const callee = path.get('callee')
+
+    return (
+        t.isMemberExpression(callee.node) &&
+        callee.node.property.name === 'create' &&
+        t.isIdentifier(callee.node.object)
+    )
+}
+
 function addStyleSheetTag(t, path, state) {
     const callee = path.get('callee')
     const uniqueId = stringToUniqueId(state.filename.replace(state.cwd, '')) + ++state.file.tagNumber
@@ -49,6 +63,7 @@ function addStyleSheetTag(t, path, state) {
     callee.container.arguments.push(t.numericLiteral(uniqueId))
 }
 
+/** @param {import('./index').UnistylesPluginPass} state */
 function analyzeDependencies(t, state, name, unistyleObj, themeName, rtName) {
     const debugMessage = deps => {
         if (state.opts.debug) {
@@ -208,5 +223,6 @@ module.exports = {
     isUnistylesStyleSheet,
     analyzeDependencies,
     addStyleSheetTag,
-    getUnistyles
+    getUnistyles,
+    isKindOfStyleSheet
 }

package/plugin/variants.js

@@ -1,92 +1,66 @@
-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
-}
-
-function wrapVariants(t, path) {
-    const wrapperElement = t.jsxElement(
-        t.jsxOpeningElement(
-            t.jsxIdentifier('Variants'),
-            [
-                t.jsxAttribute(
-                    t.jsxIdentifier('variants'),
-                    t.jsxExpressionContainer(t.identifier('__uni__variants'))
-                ),
-            ],
-            false
-        ),
-        t.jsxClosingElement(t.jsxIdentifier('Variants')),
-        []
-    )
-
-    const element = path.openingElement && path.openingElement.name
-    const isWrappedInRegularFragment = t.isJSXFragment(path)
-    const isWrappedInFragment = (t.isJSXMemberExpression(element) && element.object.name === 'React' && element.property.name === 'Fragment') || (t.isJSXIdentifier(element) && element.name === 'Fragment')
-
-    wrapperElement.children = (isWrappedInRegularFragment || isWrappedInFragment)
-        ? path.children
-        : [path]
+    const maybeVariants = path.node.body.filter(node => (
+        t.isExpressionStatement(node) &&
+        t.isCallExpression(node.expression) &&
+        t.isMemberExpression(node.expression.callee)
+    ))
 
-    // copy Fragment props like key
-    if (isWrappedInFragment) {
-        wrapperElement.openingElement.attributes.push(...path.openingElement.attributes)
+    if (maybeVariants.length === 0) {
+        return
     }
 
-    return wrapperElement
-}
+    const targetVariant = maybeVariants.find(variant => {
+        const calleeName = variant.expression.callee.object.name
+
+        return (
+            t.isIdentifier(variant.expression.callee.object, { name: calleeName }) &&
+            t.isIdentifier(variant.expression.callee.property, { name: 'useVariants' }) &&
+            t.isObjectExpression(variant.expression.arguments[0])
+        )
+    })
 
-function addJSXVariants(t, path) {
-    if (!t.isReturnStatement(path.node)) {
+    if (!targetVariant) {
         return
     }
 
-    const jsxElement = path.node.argument
+    const calleeName = targetVariant.expression.callee.object.name
+    const node = targetVariant.expression
+    const newUniqueName = path.scope.generateUidIdentifier(calleeName)
 
-    if (t.isConditionalExpression(jsxElement)) {
-        const ifStatement = t.ifStatement(
-            jsxElement.test,
-            t.blockStatement([t.returnStatement(jsxElement.consequent)]),
-            t.blockStatement([t.returnStatement(jsxElement.alternate)])
-        )
+    // Create shadow declaration eg. const _styles = styles
+    const shadowDeclaration = t.variableDeclaration('const', [
+        t.variableDeclarator(newUniqueName, t.identifier(calleeName))
+    ])
 
-        path.replaceWith(ifStatement)
+    // Create the new call expression eg. const styles = _styles.useVariants(...)
+    const newCallExpression = t.callExpression(
+        t.memberExpression(t.identifier(newUniqueName.name), t.identifier('useVariants')),
+        node.arguments
+    )
+    const finalDeclaration = t.variableDeclaration('const', [
+        t.variableDeclarator(t.identifier(calleeName), newCallExpression)
+    ])
 
-        return
-    }
+    // Find the current node's index, we will move everything after to new block
+    const pathIndex = path.node.body
+        .findIndex(bodyPath => bodyPath === targetVariant)
+    const rest = path.node.body.slice(pathIndex + 1)
 
-    if (!t.isJSXElement(jsxElement) && !t.isJSXFragment(jsxElement)) {
-        return
-    }
+    // move rest to new block (scope)
+    const blockStatement = t.blockStatement([
+        finalDeclaration,
+        ...rest
+    ])
+
+    path.node.body = [
+        ...path.node.body.slice(0, pathIndex),
+        shadowDeclaration,
+        blockStatement
+    ]
 
-    path.get('argument').replaceWith(wrapVariants(t, jsxElement));
+    state.file.hasVariants = true
 }
 
 module.exports = {
-    isUsingVariants,
-    extractVariants,
-    addJSXVariants
+    extractVariants
 }

package/src/components/ScopedTheme.tsx

@@ -21,7 +21,7 @@ export const ScopedTheme: React.FunctionComponent<React.PropsWithChildren<ThemeP
     const mappedChildren = [
         <Apply key={name} name={name} />,
         children,
-        <Apply key='dispose' name={previousScopedTheme} />
+        <Apply key='dispose' name={previousScopedTheme as keyof UnistylesThemes | undefined} />
     ]
 
     return (

package/src/components/index.ts

@@ -1,4 +1,3 @@
 export { Hide } from './Hide'
 export { Display } from './Display'
-export { Variants } from './Variants'
 export { ScopedTheme } from './ScopedTheme'

package/src/components/native/ImageBackground.native.tsx

@@ -0,0 +1,4 @@
+import { ImageBackground as NativeImageBackground } from 'react-native'
+import { createUnistylesImageBackground } from '../../core'
+
+export const ImageBackground = createUnistylesImageBackground(NativeImageBackground)

package/src/components/native/ImageBackground.tsx

@@ -1,4 +1,56 @@
+import React from 'react'
 import { ImageBackground as NativeImageBackground } from 'react-native'
-import { createUnistylesImageBackground } from '../../core'
+import { forwardRef } from 'react'
+import type { UnistylesValues } from '../../types'
+import { getClassName } from '../../core'
+import { isServer } from '../../web/utils'
+import { UnistylesShadowRegistry } from '../../web'
 
-export const ImageBackground = createUnistylesImageBackground(NativeImageBackground)
+type Props = {
+    style?: UnistylesValues
+    imageStyle?: UnistylesValues
+}
+
+export const ImageBackground = forwardRef<unknown, Props>((props, forwardedRef) => {
+    let storedRef: NativeImageBackground | null = null
+    let storedImageRef: NativeImageBackground | null = null
+    const styleClassNames = getClassName(props.style)
+    const imageClassNames = getClassName(props.imageStyle)
+
+    return (
+        // @ts-expect-error - RN types are not compatible with RNW styles
+        <NativeImageBackground
+            {...props}
+            style={styleClassNames}
+            imageStyle={imageClassNames}
+            ref={isServer() ? undefined : ref => {
+                if (!ref) {
+                    // @ts-expect-error hidden from TS
+                    UnistylesShadowRegistry.remove(storedRef, styleClassNames?.hash)
+                }
+
+                storedRef = ref
+                // @ts-expect-error hidden from TS
+                UnistylesShadowRegistry.add(ref, styleClassNames?.hash)
+
+                if (typeof forwardedRef === 'function') {
+                    return forwardedRef(ref)
+                }
+
+                if (forwardedRef) {
+                    forwardedRef.current = ref
+                }
+            }}
+            imageRef={isServer() ? undefined : ref => {
+                if (!ref) {
+                    // @ts-expect-error hidden from TS
+                    UnistylesShadowRegistry.remove(storedImageRef, imageClassNames?.hash)
+                }
+
+                storedImageRef = ref
+                // @ts-expect-error hidden from TS
+                UnistylesShadowRegistry.add(ref, imageClassNames?.hash)
+            }}
+        />
+    )
+})

package/src/components/native/Pressable.native.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useRef } from 'react'
+import React, { forwardRef, useEffect, useRef } from 'react'
 import { Pressable as NativePressableReactNative } from 'react-native'
 import type { PressableProps as Props, View } from 'react-native'
 import { UnistylesShadowRegistry } from '../../specs'
@@ -11,6 +11,15 @@ type PressableProps = Props & {
 export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ...props }, forwardedRef) => {
     const storedRef = useRef<View | null>()
 
+    useEffect(() => {
+        return () => {
+            if (storedRef.current) {
+                // @ts-expect-error - this is hidden from TS
+                UnistylesShadowRegistry.remove(storedRef.current)
+            }
+        }
+    }, [])
+
     return (
         <NativePressableReactNative
             {...props}
@@ -18,14 +27,13 @@ export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ..
                 const unistyles = typeof style === 'function'
                     ? style({ pressed: false })
                     : style
-                const styles = Array.isArray(unistyles)
-                    ? unistyles
-                    : [unistyles]
 
-                // @ts-expect-error - this is hidden from TS
-                UnistylesShadowRegistry.add(ref, styles)
+                // @ts-expect-error web types are not compatible with RN styles
+                UnistylesShadowRegistry.add(ref, unistyles)
 
-                storedRef.current = ref
+                if (ref) {
+                    storedRef.current = ref
+                }
 
                 return passForwardedRef(props, ref, forwardedRef)
             }}
@@ -33,22 +41,13 @@ export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ..
                 const unistyles = typeof style === 'function'
                     ? style(state)
                     : style
-                const styles = Array.isArray(unistyles)
-                    ? unistyles
-                    : [unistyles]
 
                 if (!storedRef.current) {
                     return unistyles
                 }
 
-                if (state.pressed) {
-                    UnistylesShadowRegistry.selectVariants(variants)
-                }
-
-                // @ts-expect-error - this is hidden from TS
-                UnistylesShadowRegistry.remove(storedRef.current)
                 // @ts-expect-error - this is hidden from TS
-                UnistylesShadowRegistry.add(storedRef.current, styles)
+                UnistylesShadowRegistry.add(storedRef.current, unistyles)
 
                 return unistyles
             }}