diff --git a/cxx/core/UnistylesRegistry.cpp b/cxx/core/UnistylesRegistry.cpp index 44f934cd..2e65e002 100644 --- a/cxx/core/UnistylesRegistry.cpp +++ b/cxx/core/UnistylesRegistry.cpp @@ -197,3 +197,19 @@ std::vector> core::UnistylesRegistry::getStyle return stylesheetsToRefresh; } + +const core::Variants& core::UnistylesRegistry::getScopedVariants() { + return this->_scopedVariants; +} + +const std::optional core::UnistylesRegistry::getScopedTheme() { + return this->_scopedTheme; +} + +void core::UnistylesRegistry::setScopedVariants(core::Variants&& variants) { + this->_scopedVariants = std::move(variants); +} + +void core::UnistylesRegistry::setScopedTheme(std::optional themeName) { + this->_scopedTheme = std::move(themeName); +} diff --git a/cxx/core/UnistylesRegistry.h b/cxx/core/UnistylesRegistry.h index 96a5de68..2426b64b 100644 --- a/cxx/core/UnistylesRegistry.h +++ b/cxx/core/UnistylesRegistry.h @@ -43,10 +43,16 @@ struct UnistylesRegistry: public StyleSheetRegistry { DependencyMap buildDependencyMap(jsi::Runtime& rt, std::vector& deps); void shadowLeafUpdateFromUnistyle(jsi::Runtime& rt, Unistyle::Shared unistyle, jsi::Value& maybePressableId); shadow::ShadowTrafficController trafficController{}; + const core::Variants& getScopedVariants(); + const std::optional getScopedTheme(); + void setScopedVariants(core::Variants&& variants); + void setScopedTheme(std::optional themeName); private: UnistylesRegistry() = default; - + + core::Variants _scopedVariants{}; + std::optional _scopedTheme{}; std::unordered_map _states{}; std::unordered_map>> _styleSheetRegistry{}; std::unordered_map>>> _shadowRegistry{}; diff --git a/cxx/hybridObjects/HybridShadowRegistry.cpp b/cxx/hybridObjects/HybridShadowRegistry.cpp index 01f0ad6f..32b9ab8b 100644 --- a/cxx/hybridObjects/HybridShadowRegistry.cpp +++ b/cxx/hybridObjects/HybridShadowRegistry.cpp @@ -30,10 +30,12 @@ jsi::Value HybridShadowRegistry::link(jsi::Runtime &rt, const jsi::Value &thisVa arguments.push_back({}); } + + auto scopedTheme = registry.getScopedTheme(); // check if scope theme exists - if (this->_scopedTheme.has_value()) { - auto themeName = this->_scopedTheme.value(); + if (scopedTheme.has_value()) { + auto themeName = scopedTheme.value(); helpers::assertThat(rt, registry.getState(rt).hasTheme(themeName), "Unistyles: You're trying to use scoped theme '" + themeName + "' but it wasn't registered."); } @@ -47,15 +49,15 @@ jsi::Value HybridShadowRegistry::link(jsi::Runtime &rt, const jsi::Value &thisVa core::Unistyle::Shared& unistyle = unistyleWrappers[i]; std::shared_ptr unistyleData = std::make_shared( unistyle, - this->_scopedVariants, + registry.getScopedVariants(), arguments[i], - this->_scopedTheme + scopedTheme ); // before linking we need to check if given unistyle is affected by scoped theme - if (this->_scopedTheme.has_value()) { + if (scopedTheme.has_value()) { if (parsedStyleSheet.isUndefined()) { - parsedStyleSheet = parser.getParsedStyleSheetForScopedTheme(rt, unistyle, this->_scopedTheme.value()); + parsedStyleSheet = parser.getParsedStyleSheetForScopedTheme(rt, unistyle, scopedTheme.value()); } // if so we need to force update @@ -91,13 +93,15 @@ jsi::Value HybridShadowRegistry::unlink(jsi::Runtime &rt, const jsi::Value &this jsi::Value HybridShadowRegistry::selectVariants(jsi::Runtime &rt, const jsi::Value &thisValue, const jsi::Value *args, size_t count) { helpers::assertThat(rt, count == 1, "Unistyles: Invalid babel transform 'ShadowRegistry selectVariants' expected 1 arguments."); + + auto& registry = core::UnistylesRegistry::get(); if (args[0].isUndefined()) { - this->_scopedVariants = {}; + registry.setScopedVariants({}); } if (args[0].isObject()) { - this->_scopedVariants = helpers::variantsToPairs(rt, args[0].asObject(rt)); + registry.setScopedVariants(helpers::variantsToPairs(rt, args[0].asObject(rt))); } return jsi::Value::undefined(); @@ -105,20 +109,26 @@ jsi::Value HybridShadowRegistry::selectVariants(jsi::Runtime &rt, const jsi::Val jsi::Value HybridShadowRegistry::setScopedTheme(jsi::Runtime &rt, const jsi::Value &thisValue, const jsi::Value *args, size_t count) { helpers::assertThat(rt, count == 1, "Unistyles: setScopedTheme expected 1 argument."); + + auto& registry = core::UnistylesRegistry::get(); if (args[0].isUndefined()) { - this->_scopedTheme = std::nullopt; + + registry.setScopedTheme(std::nullopt); } if (args[0].isString()) { - this->_scopedTheme = args[0].asString(rt).utf8(rt); + registry.setScopedTheme(args[0].asString(rt).utf8(rt)); } return jsi::Value::undefined(); } jsi::Value HybridShadowRegistry::getScopedTheme(jsi::Runtime &rt, const jsi::Value &thisValue, const jsi::Value *args, size_t count) { - return this->_scopedTheme.has_value() - ? jsi::String::createFromUtf8(rt, this->_scopedTheme.value()) + auto& registry = core::UnistylesRegistry::get(); + auto maybeScopedTheme = registry.getScopedTheme(); + + return maybeScopedTheme.has_value() + ? jsi::String::createFromUtf8(rt, maybeScopedTheme.value()) : jsi::Value::undefined(); } diff --git a/cxx/hybridObjects/HybridShadowRegistry.h b/cxx/hybridObjects/HybridShadowRegistry.h index 436be17a..2ea31b34 100644 --- a/cxx/hybridObjects/HybridShadowRegistry.h +++ b/cxx/hybridObjects/HybridShadowRegistry.h @@ -46,8 +46,6 @@ struct HybridShadowRegistry: public HybridUnistylesShadowRegistrySpec { }; private: - core::Variants _scopedVariants{}; - std::optional _scopedTheme{}; std::shared_ptr _unistylesRuntime; }; diff --git a/cxx/parser/Parser.cpp b/cxx/parser/Parser.cpp index f14bb933..b526d3de 100644 --- a/cxx/parser/Parser.cpp +++ b/cxx/parser/Parser.cpp @@ -501,12 +501,12 @@ jsi::Function parser::Parser::createDynamicFunctionProxy(jsi::Runtime& rt, Unist ? thisVal.asObject(rt) : jsi::Object(rt); auto parser = parser::Parser(unistylesRuntime); - // call user function auto result = unistyle->rawValue.asFunction(rt).call(rt, args, count); // memoize metadata to call it later auto unistyleFn = std::dynamic_pointer_cast(unistyle); + auto& registry = core::UnistylesRegistry::get(); unistyleFn->unprocessedValue = jsi::Value(rt, result).asObject(rt); @@ -514,7 +514,7 @@ jsi::Function parser::Parser::createDynamicFunctionProxy(jsi::Runtime& rt, Unist ? thisObject.getProperty(rt, helpers::STYLE_VARIANTS.c_str()) : jsi::Value::undefined(); std::optional variants = rawVariants.isUndefined() - ? std::nullopt + ? registry.getScopedVariants() : std::optional(helpers::variantsToPairs(rt, rawVariants.asObject(rt))); unistyleFn->parsedStyle = this->parseFirstLevel(rt, unistyleFn, variants); diff --git a/example/Button.tsx b/example/Button.tsx index 9164ad2f..c4cc027e 100644 --- a/example/Button.tsx +++ b/example/Button.tsx @@ -1,4 +1,4 @@ -import { Pressable, PressableProps, Text } from "react-native"; +import { Pressable, PressableProps, Text } from 'react-native' import { StyleSheet, UnistylesVariants } from 'react-native-unistyles' type ButtonProps = PressableProps & UnistylesVariants & { @@ -19,7 +19,7 @@ export const Button: React.FunctionComponent = ({ }); return ( - styles.button} {...props}> + {children} ); diff --git a/plugin/__tests__/stylesheet.spec.js b/plugin/__tests__/stylesheet.spec.js index 57ae83e0..85d421d7 100644 --- a/plugin/__tests__/stylesheet.spec.js +++ b/plugin/__tests__/stylesheet.spec.js @@ -519,266 +519,6 @@ pluginTester({ }, 798826616) ` }, - { - title: 'Should check if pressable takes dynamic function and do nothing if its object', - code: ` - import { View, Pressable, Text } from 'react-native' - import { StyleSheet } from 'react-native-unistyles' - - export const Example = () => { - return ( - - - Hello world - - - ) - } - - const styles = StyleSheet.create((theme, rt) => { - return { - container: () => ({ - backgroundColor: theme.colors.background, - variants: {}, - paddingTop: rt.insets.top - }), - pressable: { - marginRight: 20 - } - } - }) - `, - output: ` - import { Text } from 'react-native-unistyles/src/components/native/Text' - import { Pressable } from 'react-native-unistyles/src/components/native/Pressable' - import { View } from 'react-native-unistyles/src/components/native/View' - - import { StyleSheet } from 'react-native-unistyles' - - export const Example = () => { - return ( - - (typeof styles.pressable === 'function' ? styles.pressable(state) : styles.pressable)}> - Hello world - - - ) - } - - const styles = StyleSheet.create((theme, rt) => { - return { - container: () => ({ - backgroundColor: theme.colors.background, - variants: {}, - paddingTop: rt.insets.top, - uni__dependencies: [0, 4, 9] - }), - pressable: { - marginRight: 20 - } - } - }, 798826616) - ` - }, - { - title: 'Should pass pressable with dependencies', - code: ` - import { View, Pressable, Text } from 'react-native' - import { StyleSheet } from 'react-native-unistyles' - - export const Example = () => { - return ( - - styles.pressable(state.pressed, 1)}> - Hello world - - - ) - } - - const styles = StyleSheet.create((theme, rt) => { - return { - container: () => ({ - backgroundColor: theme.colors.background, - variants: {}, - paddingTop: rt.insets.top - }), - pressable: (state, times) => ({ - marginRight: state.pressed ? 10 : 20 * times, - backgroundColor: state.pressed ? theme.colors.barbie : theme.colors.background - }) - } - }) - `, - output: ` - import { Text } from 'react-native-unistyles/src/components/native/Text' - import { Pressable } from 'react-native-unistyles/src/components/native/Pressable' - import { View } from 'react-native-unistyles/src/components/native/View' - - import { StyleSheet } from 'react-native-unistyles' - - export const Example = () => { - return ( - - styles.pressable(state.pressed, 1)}> - Hello world - - - ) - } - - const styles = StyleSheet.create((theme, rt) => { - return { - container: () => ({ - backgroundColor: theme.colors.background, - variants: {}, - paddingTop: rt.insets.top, - uni__dependencies: [0, 4, 9] - }), - pressable: (state, times) => ({ - marginRight: state.pressed ? 10 : 20 * times, - backgroundColor: state.pressed ? theme.colors.barbie : theme.colors.background, - uni__dependencies: [0] - }) - } - }, 798826616) - ` - }, - { - title: 'Should pass variants to pressable', - code: ` - import { View, Pressable, Text } from 'react-native' - import { StyleSheet } from 'react-native-unistyles' - - export const Example = () => { - styles.useVariants({}) - - return ( - - styles.pressable(state.pressed, 1)}> - Hello world - - - ) - } - - const styles = StyleSheet.create((theme, rt) => { - return { - container: () => ({ - backgroundColor: theme.colors.background, - variants: {}, - paddingTop: rt.insets.top - }), - pressable: (state, times) => ({ - marginRight: state.pressed ? 10 : 20 * times, - backgroundColor: state.pressed ? theme.colors.barbie : theme.colors.background - }) - } - }) - `, - output: ` - import { Text } from 'react-native-unistyles/src/components/native/Text' - import { Pressable } from 'react-native-unistyles/src/components/native/Pressable' - import { View } from 'react-native-unistyles/src/components/native/View' - - import { StyleSheet, Variants } from 'react-native-unistyles' - - export const Example = () => { - const __uni__variants = {} - styles.useVariants(__uni__variants) - - return ( - - - styles.pressable(state.pressed, 1)} variants={__uni__variants}> - Hello world - - - - ) - } - - const styles = StyleSheet.create((theme, rt) => { - return { - container: () => ({ - backgroundColor: theme.colors.background, - variants: {}, - paddingTop: rt.insets.top, - uni__dependencies: [0, 4, 9] - }), - pressable: (state, times) => ({ - marginRight: state.pressed ? 10 : 20 * times, - backgroundColor: state.pressed ? theme.colors.barbie : theme.colors.background, - uni__dependencies: [0] - }) - } - }, 798826616) - ` - }, - { - title: 'Should pass more raw styles to pressable', - code: ` - import { View, Pressable, Text } from 'react-native' - import { StyleSheet } from 'react-native-unistyles' - - export const Example = () => { - return ( - - - Hello world - - - ) - } - - const styles = StyleSheet.create((theme, rt) => { - return { - container: () => ({ - backgroundColor: theme.colors.background, - variants: {}, - paddingTop: rt.insets.top - }), - pressable: (state, times) => ({ - marginRight: state.pressed ? 10 : 20 * times, - backgroundColor: state.pressed ? theme.colors.barbie : theme.colors.background - }) - } - }) - `, - output: ` - import { Text } from 'react-native-unistyles/src/components/native/Text' - import { Pressable } from 'react-native-unistyles/src/components/native/Pressable' - import { View } from 'react-native-unistyles/src/components/native/View' - - import { StyleSheet } from 'react-native-unistyles' - - export const Example = () => { - return ( - - - Hello world - - - ) - } - - const styles = StyleSheet.create((theme, rt) => { - return { - container: () => ({ - backgroundColor: theme.colors.background, - variants: {}, - paddingTop: rt.insets.top, - uni__dependencies: [0, 4, 9] - }), - pressable: (state, times) => ({ - marginRight: state.pressed ? 10 : 20 * times, - backgroundColor: state.pressed ? theme.colors.barbie : theme.colors.background, - uni__dependencies: [0] - }) - } - }, 798826616) - ` - }, { title: 'Should handle pressable with arrow function and array of styles', code: ` @@ -816,14 +556,7 @@ pluginTester({ export const Example = ({ height }) => { return ( - [ - typeof styles.sectionItem === 'function' ? styles.sectionItem() : styles.sectionItem, - styles.other(1), - { height }, - pressed && (typeof styles.pressed === 'function' ? styles.pressed() : styles.pressed) - ]} - > + [styles.sectionItem, styles.other(1), { height }, pressed && styles.pressed]}> Hello world @@ -886,94 +619,10 @@ pluginTester({ [ - typeof styles.sectionItem === 'function' ? styles.sectionItem() : styles.sectionItem, - { height }, - pressed && styles.pressed(pressed), - pressed - ? typeof styles.pressed === 'function' - ? styles.pressed() - : styles.pressed - : typeof styles.notPressed === 'function' - ? styles.notPressed() - : styles.notPressed - ]} - > - Hello world - - - ) - } - - const styles = StyleSheet.create( - (theme, rt) => ({ - sectionItem: { - width: 100, - height: 100, - theme: theme.colors.red, - uni__dependencies: [0] - }, - pressed: pressed => ({ - marginBottom: rt.insets.bottom, - uni__dependencies: [9] - }) - }), - 798826616 - ) - ` - }, - { - title: 'Should handle nested function with no arg', - code: ` - import { View, Pressable, Text } from 'react-native' - import { StyleSheet } from 'react-native-unistyles' - - export const Example = ({ height }) => { - const pressed = true - - return ( - - [styles.sectionItem, { height }, pressed && styles.pressed(pressed), pressed ? styles.pressed : styles.notPressed]}> - Hello world - - - ) - } - - const styles = StyleSheet.create((theme, rt) => ({ - sectionItem: { - width: 100, - height: 100, - theme: theme.colors.red - }, - pressed: pressed => ({ - marginBottom: rt.insets.bottom - }) - })) - `, - output: ` - import { Text } from 'react-native-unistyles/src/components/native/Text' - import { Pressable } from 'react-native-unistyles/src/components/native/Pressable' - import { View } from 'react-native-unistyles/src/components/native/View' - - import { StyleSheet } from 'react-native-unistyles' - - export const Example = ({ height }) => { - const pressed = true - - return ( - - [ - typeof styles.sectionItem === 'function' ? styles.sectionItem() : styles.sectionItem, + styles.sectionItem, { height }, pressed && styles.pressed(pressed), - pressed - ? typeof styles.pressed === 'function' - ? styles.pressed() - : styles.pressed - : typeof styles.notPressed === 'function' - ? styles.notPressed() - : styles.notPressed + pressed ? styles.pressed : styles.notPressed ]} > Hello world @@ -999,223 +648,6 @@ pluginTester({ ) ` }, - { - title: 'Should handle all the weird syntaxes', - code: ` - import { View, Text } from 'react-native' - import { StyleSheet } from 'react-native-unistyles' - - export const Example = ({ height }) => { - return ( - - - Hello world - - - ) - } - - const styles = StyleSheet.create((theme, rt) => ({ - sectionItem: { - width: 100, - height: 100, - theme: theme.colors.red - }, - pressed: { - marginBottom: rt.insets.bottom - } - })) - `, - output: ` - import { Text } from 'react-native-unistyles/src/components/native/Text' - import { View } from 'react-native-unistyles/src/components/native/View' - - import { StyleSheet } from 'react-native-unistyles' - - export const Example = ({ height }) => { - return ( - - - Hello world - - - ) - } - - const styles = StyleSheet.create( - (theme, rt) => ({ - sectionItem: { - width: 100, - height: 100, - theme: theme.colors.red, - uni__dependencies: [0] - }, - pressed: { - marginBottom: rt.insets.bottom, - uni__dependencies: [9] - } - }), - 798826616 - ) - ` - }, - { - title: 'Should handle other pressable cases', - code: ` - import { View, Pressable } from 'react-native' - import { StyleSheet } from 'react-native-unistyles' - - export const Example = () => { - return ( - - state.pressed ? styles.pressed : { height: 20 }} /> - { - return style.pressed - }} /> - { - return style.pressed - }} /> - state.pressed ? { height: 20 }: styles.pressedFn(1, 2)} /> - - ) - } - - const styles = StyleSheet.create((theme, rt) => ({ - pressed: { - width: 100, - height: 100 - }, - pressedFn: (a, b) => ({ - marginBottom: a + b - }) - })) - `, - output: ` - import { Pressable } from 'react-native-unistyles/src/components/native/Pressable' - import { View } from 'react-native-unistyles/src/components/native/View' - - import { StyleSheet } from 'react-native-unistyles' - - export const Example = () => { - return ( - - (state.pressed ? (typeof styles.pressed === 'function' ? styles.pressed() : styles.pressed) : { height: 20 })} - /> - { - return style.pressed - }} - /> - { - return style.pressed - }} - /> - (state.pressed ? { height: 20 } : styles.pressedFn(1, 2))} /> - - ) - } - - const styles = StyleSheet.create( - (theme, rt) => ({ - pressed: { - width: 100, - height: 100 - }, - pressedFn: (a, b) => ({ - marginBottom: a + b - }) - }), - 798826616 - ) - ` - }, - { - title: 'Should handle pressable with identifiers', - code: ` - import { View, Pressable } from 'react-native' - import { StyleSheet } from 'react-native-unistyles' - - export const Example = ({ containerStyles }) => { - const onPressInternal = () => {} - return ( - - - - ) - } - - const styles = StyleSheet.create({ - inputContainer: {} - }) - `, - output: ` - import { Pressable } from 'react-native-unistyles/src/components/native/Pressable' - import { View } from 'react-native-unistyles/src/components/native/View' - - import { StyleSheet } from 'react-native-unistyles' - - export const Example = ({ containerStyles }) => { - const onPressInternal = () => {} - return ( - - - - ) - } - - const styles = StyleSheet.create( - { - inputContainer: {} - }, - 798826616 - ) - ` - }, - { - title: 'Should swap Pressable implementation even if user has two react-native imports', - code: ` - import { View } from 'react-native' - import { Pressable } from 'react-native' - import { StyleSheet } from 'react-native-unistyles' - - export const Example = ({ containerStyles }) => { - const onPressInternal = () => {} - return ( - - - - ) - } - - const styles = StyleSheet.create({ - inputContainer: {} - }) - `, - output: ` - import { Pressable } from 'react-native-unistyles/src/components/native/Pressable' - import { View } from 'react-native-unistyles/src/components/native/View' - - import { StyleSheet } from 'react-native-unistyles' - - export const Example = ({ containerStyles }) => { - const onPressInternal = () => {} - return ( - - - - ) - } - - const styles = StyleSheet.create( - { - inputContainer: {} - }, - 798826616 - ) - ` - }, { title: 'Should use same local name as user name while replacing imports', code: ` diff --git a/plugin/style.js b/plugin/style.js index f7610d0e..7b083d5f 100644 --- a/plugin/style.js +++ b/plugin/style.js @@ -141,145 +141,6 @@ function styleAttributeToArray(t, path) { styleAttribute.value.expression = t.arrayExpression([styleAttribute.value.expression]) } -function handlePressableFromMemberExpression(t, path, metadata, wrapInArrowFunction) { - let expression = undefined - let args = [] - - const members = metadata.at(0).members - - if (members) { - expression = members.slice(1).reduce( - (acc, property) => t.memberExpression(acc, t.identifier(property)), - t.identifier(members[0])) - } - - if (t.isMemberExpression(metadata.at(0))) { - expression = metadata.at(0) - } - - if (t.isCallExpression(metadata.at(0))) { - expression = metadata.at(0).callee - args = metadata.at(0).arguments - } - - if (!expression) { - return - } - - const bindCall = t.callExpression( - expression, - wrapInArrowFunction ? [t.identifier("state")] : args - ) - - if (t.isCallExpression(metadata.at(0))) { - return bindCall - } - - if (!wrapInArrowFunction) { - return t.conditionalExpression( - t.binaryExpression( - "===", - t.unaryExpression( - "typeof", - expression - ), - t.stringLiteral("function") - ), - bindCall, - expression - ) - } - - // state => typeof style.pressable === 'function' - // ? style.pressable(state) - // : style.pressable - return t.arrowFunctionExpression( - [t.identifier("state")], - t.conditionalExpression( - t.binaryExpression( - "===", - t.unaryExpression( - "typeof", - expression - ), - t.stringLiteral("function") - ), - bindCall, - expression - ) - ) -} - -function handlePressableArgs(t, path, styleExpression, metadata, parentWrapper, wrapper, index) { - if (t.isObjectExpression(wrapper)) { - return - } - - if (t.isMemberExpression(wrapper) && t.isArrayExpression(parentWrapper)) { - parentWrapper.elements[index] = handlePressableFromMemberExpression(t, path, [metadata[index]]) - - return - } - - if (t.isMemberExpression(wrapper) && !t.isArrayExpression(parentWrapper)) { - parentWrapper = handlePressableFromMemberExpression(t, path, metadata) - - return - } - - if (t.isLogicalExpression(wrapper)) { - if (t.isIdentifier(wrapper.left) && t.isMemberExpression(wrapper.right)) { - parentWrapper.elements[index].right = handlePressableFromMemberExpression(t, path, [parentWrapper.elements[index].right]) - - return - } - - return - } - - if (t.isConditionalExpression(wrapper) && t.isArrayExpression(parentWrapper)) { - if (t.isMemberExpression(wrapper.alternate) || t.isCallExpression(wrapper.alternate)) { - parentWrapper.elements[index].alternate = handlePressableFromMemberExpression(t, path, [parentWrapper.elements[index].alternate]) - } - - if (t.isMemberExpression(wrapper.consequent) || t.isCallExpression(wrapper.consequent)) { - parentWrapper.elements[index].consequent = handlePressableFromMemberExpression(t, path, [parentWrapper.elements[index].consequent]) - } - - return - } - - if (t.isConditionalExpression(wrapper) && !t.isArrayExpression(parentWrapper)) { - if (t.isMemberExpression(wrapper.alternate) || t.isCallExpression(wrapper.alternate)) { - parentWrapper.alternate = handlePressableFromMemberExpression(t, path, [parentWrapper.alternate]) - } - - if (t.isMemberExpression(wrapper.consequent) || t.isCallExpression(wrapper.consequent)) { - parentWrapper.consequent = handlePressableFromMemberExpression(t, path, [parentWrapper.consequent]) - } - - return - } - - const pressableArgs = t.isCallExpression(wrapper) - ? wrapper.arguments - : wrapper.argument.arguments - const callee = t.isCallExpression(wrapper) - ? wrapper.callee - : wrapper.argument.callee - const bindCall = t.callExpression(callee, pressableArgs) - - if (t.isCallExpression(wrapper) && t.isArrayExpression(parentWrapper)) { - parentWrapper.elements[index] = bindCall - - return - } - - if (t.isCallExpression(wrapper)) { - styleExpression.body = bindCall - } -} - function handlePressable(t, path, styleAttr, metadata, state) { // add variants if (state.file.hasVariants) { @@ -294,90 +155,8 @@ function handlePressable(t, path, styleAttr, metadata, state) { // to add import state.file.hasAnyUnistyle = true - const styleExpression = styleAttr.value.expression - - // {style.pressable} - if (t.isMemberExpression(styleExpression)) { - styleAttr.value.expression = handlePressableFromMemberExpression(t, path, metadata, true) - - return - } - - // {style.pressable(1, 2)} - if (t.isCallExpression(styleExpression)) { - // user already called dynamic function - path.node.openingElement.attributes = path.node.openingElement.attributes.map(attribute => { - if (attribute.name.name === "style") { - attribute.value.expression = t.arrowFunctionExpression([], styleExpression) - } - - return attribute - }) - - return - } - - // {() => style.pressable(1, 2)} - if (t.isArrowFunctionExpression(styleExpression) && styleExpression.params.length === 0) { - let parentWrapper = t.isBlockStatement(styleExpression.body) - ? styleExpression.body.body.find(node => t.isReturnStatement(node)) - : styleExpression.body - - if (t.isMemberExpression(parentWrapper)) { - return - } - - if (t.isArrayExpression(parentWrapper)) { - return parentWrapper.elements.forEach((wrapper, index) => handlePressableArgs(t, path, styleExpression, metadata, parentWrapper, wrapper, index)) - } - - if (t.isReturnStatement(parentWrapper)) { - parentWrapper = parentWrapper.argument - - return handlePressableArgs(t, path, styleExpression, metadata, parentWrapper, parentWrapper) - } - - const pressableArgs = t.isCallExpression(parentWrapper) - ? parentWrapper.arguments - : parentWrapper.argument.arguments - const callee = t.isCallExpression(parentWrapper) - ? parentWrapper.callee - : parentWrapper.argument.callee - const bindCall = t.callExpression( - callee, - pressableArgs - ) - - if (t.isCallExpression(parentWrapper)) { - styleExpression.body = bindCall - - return - } - - if (parentWrapper) { - parentWrapper.argument = bindCall - } - - return - } - - // {state => style.pressable(state, 1, 2)} - if (t.isArrowFunctionExpression(styleExpression) && styleExpression.params.length > 0) { - // user used state with custom args - // detect between arrow function with body and arrow function - let parentWrapper = t.isBlockStatement(styleExpression.body) - ? styleExpression.body.body.find(node => t.isReturnStatement(node)) - : styleExpression.body - - if (t.isArrayExpression(parentWrapper)) { - return parentWrapper.elements.forEach((wrapper, index) => handlePressableArgs(t, path, styleExpression, metadata, parentWrapper, wrapper, index)) - } - - if (t.isReturnStatement(parentWrapper)) { - parentWrapper = parentWrapper.argument - } - - handlePressableArgs(t, path, styleExpression, metadata, parentWrapper, parentWrapper) + if (t.isMemberExpression(styleAttr.value.expression)) { + // styleAttr.value.expression = handlePressableFromMemberExpression(t, path, metadata, true) } } diff --git a/src/components/native/Pressable.native.tsx b/src/components/native/Pressable.native.tsx index 738aaf1d..fac12114 100644 --- a/src/components/native/Pressable.native.tsx +++ b/src/components/native/Pressable.native.tsx @@ -30,6 +30,8 @@ export const Pressable = forwardRef(({ variants, style, .. return passForwardedRef(props, ref, forwardedRef) }} style={state => { + UnistylesShadowRegistry.selectVariants(variants) + const unistyles = typeof style === 'function' ? style(state) : style @@ -40,12 +42,12 @@ export const Pressable = forwardRef(({ variants, style, .. if (storedRef.current) { // @ts-expect-error - this is hidden from TS UnistylesShadowRegistry.remove(storedRef.current) - UnistylesShadowRegistry.selectVariants(variants) // @ts-expect-error - this is hidden from TS UnistylesShadowRegistry.add(storedRef.current, styles) - UnistylesShadowRegistry.selectVariants(undefined) } + UnistylesShadowRegistry.selectVariants(undefined) + return unistyles }} />