From 57e148b5923720f58fc70a590f783be3bc37559d Mon Sep 17 00:00:00 2001 From: Suraj Date: Fri, 8 Sep 2023 13:38:14 +0530 Subject: [PATCH 1/8] fix: passing props issue --- .../DescendantsStyles/ContextBasedStyles.tsx | 62 ++- packages/react/src/styled.tsx | 357 +++++++++--------- 2 files changed, 232 insertions(+), 187 deletions(-) diff --git a/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx b/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx index 8f5f165a3..9edf8f4bf 100644 --- a/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx +++ b/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx @@ -55,12 +55,12 @@ const Pressable = styled( // test: 'sm', // }, // }, - _dark: { - // bg: '$amber200', - props: { - bg: 3 < 2 ? '$yellow400' : 'blue', - }, - }, + // _dark: { + // // bg: '$amber200', + // props: { + // bg: 3 < 2 ? '$yellow400' : 'blue', + // }, + // }, // '@xl': { // props: { @@ -180,10 +180,56 @@ const MyIcon = styled( // 'composed here' // ); +const Box1 = styled( + View, + { + // bg: '$amber400', + // h: 100, + // w: 100, + // _dark: { + // props: { + // bg: '$red500', + // }, + // }, + _text: { + color: '$red500', + }, + }, + { + descendantStyle: ['_text'], + } +); + +const Text1 = styled(Text, {}, { ancestorStyle: ['_text'] }); export function ContextBasedStyles() { return ( - + + {/* */} + {/* + Hello + */} {/* */} @@ -287,7 +333,7 @@ const MyList = React.memo(() => { }, []); const data = useMemo( () => - Array(100) + Array(1) .fill(0) .map((_, index) => `Item ${index}`), [] diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx index 466c13576..d1bd2bf15 100644 --- a/packages/react/src/styled.tsx +++ b/packages/react/src/styled.tsx @@ -1098,6 +1098,10 @@ export function verboseStyled( incomingComponentProps ); + /// + + /// + let mergedBaseStyleCSSIds: any = []; let mergedVariantStyleCSSIds: any = []; let stateProps = []; @@ -1107,11 +1111,6 @@ export function verboseStyled( let mergedSxDescendantsStyle: any = {}; let mergedDescendantsStyle: any = {}; - const applySxStateBaseStyleCSSIds = useRef(mergedSXBaseStyleCSSIds); - const applySxDescendantStateStyleCSSIdsAndPropsWithKey = useRef( - mergedSxDescendantsStyle - ); - if (!isClient.current) { const { mergedBaseStyleCSSIds: a, @@ -1148,26 +1147,19 @@ export function verboseStyled( mergedSXVariantStyleCSSIds = e; mergedSxStateProps = f; mergedSxDescendantsStyle = g; - // setComponentStatePassingProps(stateProps); - // setSxStatePassingProps(f); - // setComponentStatePassingProps(c); - - applySxStateBaseStyleCSSIds.current = mergedSXBaseStyleCSSIds; - applySxDescendantStateStyleCSSIdsAndPropsWithKey.current = - mergedSxDescendantsStyle; - mergedDescendantsStyle = h; } + const applySxStateBaseStyleCSSIds = useRef(mergedSXBaseStyleCSSIds); + const applySxStatePassingProps = useRef(mergedSxDescendantsStyle); + + const applySxDescendantStateStyleCSSIdsAndPropsWithKey = + useRef(mergedSxStateProps); const [componentStatePassingProps, setComponentStatePassingProps] = useState(stateProps); - const [sxStatePassingProps, setSxStatePassingProps] = - useState(mergedSxStateProps); + // const [sxStatePassingProps, setSxStatePassingProps] = + // useState(mergedSxStateProps); - const [ - applyComponentStateBaseStyleIds, - setApplyComponentStateBaseStyleIds, - ] = useState(mergedBaseStyleCSSIds); const [ applyComponentStateVariantStyleIds, setApplyComponentStateVariantStyleIds, @@ -1195,7 +1187,7 @@ export function verboseStyled( applyComponentPassingProps, componentStatePassingProps, sxComponentPassingProps.current, - sxStatePassingProps + applySxStatePassingProps.current ); const { sx: filteredComponentSx, rest: filteredComponentRemainingProps } = @@ -1358,101 +1350,66 @@ export function verboseStyled( sxCompoundVariantFlatternStyleObject = c; } - if (containsSX) { - function injectAndUpdateSXProps() { - if (Object.keys(filteredComponentSx).length > 0) { - orderedComponentSXResolved = injectSx(filteredComponentSx, 'inline'); - } - - if (Object.keys(filteredPassingSx).length > 0) { - orderedPassingSXResolved = injectSx(filteredPassingSx, 'passing'); - } - - const orderedSXResolved = [ - ...orderedPassingSXResolved, - ...orderedComponentSXResolved, - ...BUILD_TIME_ORDERED_RESOLVED, - ]; - // console.setStartTimeStamp('getStyleIds'); - sxStyleIds = getStyleIds(orderedSXResolved, componentStyleConfig); - - /// - // Setting variants to sx property for inline variant resolution - //@ts-ignore - if (!sxStyleIds.component) { - sxStyleIds.component = {}; - } - sxStyleIds.component.variants = componentStyleIds.variants; - //@ts-ignore - sxStyleIds.component.compoundVariants = - componentStyleIds.compoundVariants; - // console.setStartTimeStamp('setColorModeBaseStyleIds'); - sxComponentStyleIds.current = sxStyleIds?.component; - sxDescendantStyleIds.current = sxStyleIds.descendant; - // 315ms - // SX component style - //@ts-ignore - const { - baseStyleCSSIds: sxBaseStyleCSSIds, - variantStyleCSSIds: sxVariantStyleCSSIds, - passingProps: sxPassingProps, - } = getMergedDefaultCSSIdsAndProps( - //@ts-ignore - sxComponentStyleIds.current, - variantProps, - theme, - incomingComponentProps - ); - //@ts-ignore - // applySxStyleCSSIds.current = sxStyleCSSIds; - //@ts-ignore - applySxBaseStyleCSSIds.current = sxBaseStyleCSSIds; - //@ts-ignore - applySxVariantStyleCSSIds.current = sxVariantStyleCSSIds; - sxComponentPassingProps.current = sxPassingProps; + function injectAndUpdateSXProps(filteredPassingSx: any) { + if (Object.keys(filteredComponentSx).length > 0) { + orderedComponentSXResolved = injectSx(filteredComponentSx, 'inline'); } - injectAndUpdateSXProps(); - - //TODO: Refactor for initial passing props ..... - if ( - Object.keys(sxComponentPassingProps.current).length > 0 && - !isClient.current - ) { - const passingPropsUpdated = { - ...passingProps, - ...sxComponentPassingProps.current, - ...sxStatePassingProps, - ...applyAncestorPassingProps, - }; - - const { - sx: filteredPassingSxUpdated, - rest: filteredPassingRemainingPropsUpdated, - } = convertUtiltiyToSXFromProps( - passingPropsUpdated, - styledSystemProps, - componentStyleConfig - ); - - filteredPassingSx = filteredPassingSxUpdated; - injectAndUpdateSXProps(); - - Object.assign( - remainingComponentProps, - filteredPassingRemainingPropsUpdated - ); - Object.assign(remainingComponentProps, filteredComponentRemainingProps); + if (Object.keys(filteredPassingSx).length > 0) { + orderedPassingSXResolved = injectSx(filteredPassingSx, 'passing'); + } - // const { statesUpdated, ...applyComponentInlinePropsUpdated }: any = - // remainingComponentProps; + const orderedSXResolved = [ + ...orderedPassingSXResolved, + ...orderedComponentSXResolved, + ...BUILD_TIME_ORDERED_RESOLVED, + ]; + // console.setStartTimeStamp('getStyleIds'); + sxStyleIds = getStyleIds(orderedSXResolved, componentStyleConfig); - // states = statesUpdated; - // applyComponentInlineProps = applyComponentInlinePropsUpdated; - applyComponentInlineProps = remainingComponentProps; + /// + // Setting variants to sx property for inline variant resolution + //@ts-ignore + if (!sxStyleIds.component) { + sxStyleIds.component = {}; } + sxStyleIds.component.variants = componentStyleIds.variants; + //@ts-ignore + sxStyleIds.component.compoundVariants = + componentStyleIds.compoundVariants; + // console.setStartTimeStamp('setColorModeBaseStyleIds'); + sxComponentStyleIds.current = sxStyleIds?.component; + sxDescendantStyleIds.current = sxStyleIds.descendant; + // 315ms + // SX component style + //@ts-ignore + const { + baseStyleCSSIds: sxBaseStyleCSSIds, + variantStyleCSSIds: sxVariantStyleCSSIds, + passingProps: sxPassingProps, + } = getMergedDefaultCSSIdsAndProps( + //@ts-ignore + sxComponentStyleIds.current, + variantProps, + theme, + incomingComponentProps + ); + //@ts-ignore + // applySxStyleCSSIds.current = sxStyleCSSIds; + //@ts-ignore + applySxBaseStyleCSSIds.current = sxBaseStyleCSSIds; + //@ts-ignore + applySxVariantStyleCSSIds.current = sxVariantStyleCSSIds; + sxComponentPassingProps.current = sxPassingProps; + } + // if (containsSX) { + // //TODO: Refactor for initial passing props ..... + // // SX descendants + // } - //// refactor end .... + // For subsequest renders sx resolution for dynmic values + if (containsSX) { + injectAndUpdateSXProps(filteredPassingSx); const { componentBaseStyleFlatternStyleIdObject: a, @@ -1474,22 +1431,7 @@ export function verboseStyled( sxBaseStyleFlatternStyleObject = a; sxVariantFlatternStyleObject = b; sxCompoundVariantFlatternStyleObject = c; - // SX descendants - } - if (containsDescendant) { - //@ts-ignore - applySxDescendantStyleCSSIdsAndPropsWithKey.current = - getMergeDescendantsStyleCSSIdsAndPropsWithKey( - sxDescendantStyleIds.current, - variantProps, - theme, - incomingComponentProps - ); - } - - // For subsequest renders sx resolution for dynmic values - if (isClient.current && containsSX) { //TODO: start: refactor for sx state + colormode + dynamic variable // for sx state props let stateColorMode: any = {}; @@ -1507,70 +1449,124 @@ export function verboseStyled( // MUST REFACTOR: setStateAndColorModeCssIdsAndProps + const { + baseStyleCSSIds: mergedSXBaseStyleCSSIds, + variantStyleCSSIds: mergedSXVariantStyleCSSIds, + passingProps: mergedSxStateProps, + } = getMergedStateAndColorModeCSSIdsAndProps( + sxComponentStyleIds.current, + //@ts-ignore + sxBaseStyleFlatternStyleObject, + states, + variantProps, + COLOR_MODE, + theme, + sxVariantFlatternStyleObject, + sxCompoundVariantFlatternStyleObject, + currentStateArray + ); + + applySxStateVariantStyleCSSIds.current = mergedSXVariantStyleCSSIds; + applySxStateBaseStyleCSSIds.current = mergedSXBaseStyleCSSIds; + applySxStatePassingProps.current = mergedSxStateProps; + + const mergedSxDescendantsStyle: any = {}; + if (sxDescendantStyleIds.current) { + Object.keys(sxDescendantStyleIds.current).forEach((key) => { + const { + baseStyleCSSIds: sxDescendantBaseStyleCSSIds, + variantStyleCSSIds: sxDescendantVariantStyleCSSIds, + passingProps: mergedPassingProps, + } = getMergedStateAndColorModeCSSIdsAndProps( + //@ts-ignore + sxDescendantStyleIds.current, + sxDescendantFlattenStyles[key]?.[ + 'componentBaseStyleFlatternStyleIdObject' + ], + states, + variantProps, + COLOR_MODE, + theme, + sxDescendantFlattenStyles[key]?.[ + 'componentVariantFlatternStyleIdObject' + ], + sxDescendantFlattenStyles[key]?.[ + 'componentCompoundVariantFlatternStyleIdObject' + ], + currentStateArray + ); + + mergedSxDescendantsStyle[key] = { + baseStyleCSSIds: sxDescendantBaseStyleCSSIds, + variantStyleCSSIds: sxDescendantVariantStyleCSSIds, + passingProps: mergedPassingProps, + }; + }); + + applySxDescendantStateStyleCSSIdsAndPropsWithKey.current = + mergedSxDescendantsStyle; + } + + applySxStateBaseStyleCSSIds.current = mergedSXBaseStyleCSSIds; + applySxDescendantStateStyleCSSIdsAndPropsWithKey.current = + mergedSxDescendantsStyle; + + // applySxStatePassingProps.current = mergedSxStateProps; + // mergedDescendantsStyle = _h; + + ////// + if ( - Object.keys(filteredComponentSx).length > 0 || - Object.keys(filteredPassingSx).length > 0 + Object.keys(applySxStatePassingProps.current).length > 0 || + Object.keys(sxComponentPassingProps.current).length > 0 ) { + const passingPropsUpdated = { + ...passingProps, + ...sxComponentPassingProps.current, + ...applySxStatePassingProps.current, + ...applyAncestorPassingProps, + }; + const { - baseStyleCSSIds: mergedSXBaseStyleCSSIds, - }: // variantStyleCSSIds: mergedSXVariantStyleCSSIds, - // passingProps: mergedSxStateProps, - any = getMergedStateAndColorModeCSSIdsAndProps( - sxComponentStyleIds.current, - //@ts-ignore - sxBaseStyleFlatternStyleObject, - states, - variantProps, - COLOR_MODE, - theme, - sxVariantFlatternStyleObject, - sxCompoundVariantFlatternStyleObject, - currentStateArray + sx: filteredPassingSxUpdated, + rest: filteredPassingRemainingPropsUpdated, + } = convertUtiltiyToSXFromProps( + passingPropsUpdated, + styledSystemProps, + componentStyleConfig ); - applySxStateBaseStyleCSSIds.current = mergedSXBaseStyleCSSIds; - const mergedSxDescendantsStyle: any = {}; - if (sxDescendantStyleIds.current) { - Object.keys(sxDescendantStyleIds.current).forEach((key) => { - const { - baseStyleCSSIds: sxDescendantBaseStyleCSSIds, - variantStyleCSSIds: sxDescendantVariantStyleCSSIds, - passingProps: mergedPassingProps, - } = getMergedStateAndColorModeCSSIdsAndProps( - //@ts-ignore - sxDescendantStyleIds.current, - sxDescendantFlattenStyles[key]?.[ - 'componentBaseStyleFlatternStyleIdObject' - ], - states, - variantProps, - COLOR_MODE, - theme, - sxDescendantFlattenStyles[key]?.[ - 'componentVariantFlatternStyleIdObject' - ], - sxDescendantFlattenStyles[key]?.[ - 'componentCompoundVariantFlatternStyleIdObject' - ], - currentStateArray - ); + filteredPassingSx = filteredPassingSxUpdated; - mergedSxDescendantsStyle[key] = { - baseStyleCSSIds: sxDescendantBaseStyleCSSIds, - variantStyleCSSIds: sxDescendantVariantStyleCSSIds, - passingProps: mergedPassingProps, - }; - }); + injectAndUpdateSXProps(filteredPassingSx); - applySxDescendantStateStyleCSSIdsAndPropsWithKey.current = - mergedSxDescendantsStyle; - } + Object.assign( + remainingComponentProps, + filteredPassingRemainingPropsUpdated + ); + Object.assign(remainingComponentProps, filteredComponentRemainingProps); + applyComponentInlineProps = remainingComponentProps; } - // MUST REFACTOR END: setStateAndColorModeCssIdsAndProps - //TODO: end: refactor for sx state + colormode + dynamic variable + //// refactor end .... + } + + if (containsDescendant) { + //@ts-ignore + applySxDescendantStyleCSSIdsAndPropsWithKey.current = + getMergeDescendantsStyleCSSIdsAndPropsWithKey( + sxDescendantStyleIds.current, + variantProps, + theme, + incomingComponentProps + ); } + const [ + applyComponentStateBaseStyleIds, + setApplyComponentStateBaseStyleIds, + ] = useState(mergedBaseStyleCSSIds); + if (!isClient.current) { isClient.current = true; } @@ -1613,8 +1609,9 @@ export function verboseStyled( applySxStateBaseStyleCSSIds.current = mergedSXBaseStyleCSSIds; // setApplyStateSxBaseStyleCSSIds(); applySxStateVariantStyleCSSIds.current = mergedSXVariantStyleCSSIds; + applySxStatePassingProps.current = mergedSxStateProps; // setApplyStateSxVariantStyleCSSIds(mergedSXVariantStyleCSSIds); - setSxStatePassingProps(mergedSxStateProps); + // setSxStatePassingProps(mergedSxStateProps); // setComponentStatePassingProps(stateProps); setApplyDescendantStateStyleCSSIdsAndPropsWithKey( mergedDescendantsStyle @@ -1686,7 +1683,9 @@ export function verboseStyled( // setApplyStateSxBaseStyleCSSIds(mergedSXBaseStyleCSSIds); applySxStateVariantStyleCSSIds.current = mergedSXVariantStyleCSSIds; // setApplyStateSxVariantStyleCSSIds(mergedSXVariantStyleCSSIds); - setSxStatePassingProps(mergedSxStateProps); + applySxStatePassingProps.current = mergedSxStateProps; + + // setSxStatePassingProps(mergedSxStateProps); setApplyDescendantStateStyleCSSIdsAndPropsWithKey( mergedDescendantsStyle ); From 239ab9aacb8529e650bd17f0918f1b560cc24e80 Mon Sep 17 00:00:00 2001 From: Suraj Date: Fri, 8 Sep 2023 13:39:09 +0530 Subject: [PATCH 2/8] v0.2.35 --- packages/react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/package.json b/packages/react/package.json index 77415882c..60e90876e 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,7 +1,7 @@ { "name": "@gluestack-style/react", "description": "A universal & performant styling library for React Native, Next.js & React", - "version": "0.2.34", + "version": "0.2.35", "keywords": [ "React Native", "Next.js", From 81fda9d456b241e01e7418830bc67872731ce8c1 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Fri, 8 Sep 2023 15:21:45 +0530 Subject: [PATCH 3/8] fix: resolve inline props --- packages/react/src/styled.tsx | 64 +++++++++++++++++------------------ 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx index d1bd2bf15..2b52e6ca3 100644 --- a/packages/react/src/styled.tsx +++ b/packages/react/src/styled.tsx @@ -1183,38 +1183,7 @@ export function verboseStyled( // passingProps is specific to current component - const passingProps = deepMergeObjects( - applyComponentPassingProps, - componentStatePassingProps, - sxComponentPassingProps.current, - applySxStatePassingProps.current - ); - - const { sx: filteredComponentSx, rest: filteredComponentRemainingProps } = - convertUtiltiyToSXFromProps( - componentPropsWithoutVariants, - styledSystemProps, - componentStyleConfig - ); - - let { sx: filteredPassingSx, rest: filteredPassingRemainingProps } = - convertUtiltiyToSXFromProps( - shallowMerge({ ...passingProps }, applyAncestorPassingProps), - styledSystemProps, - componentStyleConfig - ); - - let containsSX = false; - Object.assign(remainingComponentProps, filteredPassingRemainingProps); - Object.assign(remainingComponentProps, filteredComponentRemainingProps); - if ( - Object.keys(filteredComponentSx).length > 0 || - Object.keys(filteredPassingSx).length > 0 - ) { - containsSX = true; - } - - let applyComponentInlineProps: any = remainingComponentProps; + let applyComponentInlineProps: any = componentPropsWithoutVariants; // const STABLEHASH_states = stableHash(states); // 520ms @@ -1263,6 +1232,37 @@ export function verboseStyled( }); } + const passingProps = deepMergeObjects( + applyComponentPassingProps, + componentStatePassingProps, + sxComponentPassingProps.current, + applySxStatePassingProps.current + ); + + const { sx: filteredComponentSx, rest: filteredComponentRemainingProps } = + convertUtiltiyToSXFromProps( + componentPropsWithoutVariants, + styledSystemProps, + componentStyleConfig + ); + + let { sx: filteredPassingSx, rest: filteredPassingRemainingProps } = + convertUtiltiyToSXFromProps( + shallowMerge({ ...passingProps }, applyAncestorPassingProps), + styledSystemProps, + componentStyleConfig + ); + + let containsSX = false; + Object.assign(remainingComponentProps, filteredPassingRemainingProps); + Object.assign(remainingComponentProps, filteredComponentRemainingProps); + if ( + Object.keys(filteredComponentSx).length > 0 || + Object.keys(filteredPassingSx).length > 0 + ) { + containsSX = true; + } + let applyDescendantsStyleCSSIdsAndPropsWithKey = {}; if (containsDescendant) { applyDescendantsStyleCSSIdsAndPropsWithKey = From a1f55253dece6c3aaeabe517eeaf4d696ffa4b4d Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Fri, 8 Sep 2023 15:22:12 +0530 Subject: [PATCH 4/8] v0.2.36 --- packages/react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/package.json b/packages/react/package.json index 60e90876e..c43203c6f 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,7 +1,7 @@ { "name": "@gluestack-style/react", "description": "A universal & performant styling library for React Native, Next.js & React", - "version": "0.2.35", + "version": "0.2.36", "keywords": [ "React Native", "Next.js", From da6ab26ea2545426ba05735bf0c5a2e532abacdd Mon Sep 17 00:00:00 2001 From: Suraj Date: Fri, 8 Sep 2023 16:55:28 +0530 Subject: [PATCH 5/8] fix: as forwarder composition issue --- .../DescendantsStyles/ContextBasedStyles.tsx | 34 ++++++------------- packages/react/src/plugins/font-resolver.tsx | 2 -- packages/react/src/styled.tsx | 9 +---- 3 files changed, 12 insertions(+), 33 deletions(-) diff --git a/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx b/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx index 9edf8f4bf..c1d632c27 100644 --- a/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx +++ b/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx @@ -22,7 +22,7 @@ import { import { Wrapper } from '../../components/Wrapper'; import { AddIcon, Box, Icon } from '@gluestack/design-system'; // import { AddIcon } from '@gluestack/design-system'; -import { AlertCircle, Circle } from 'lucide-react-native'; +import { AlertCircle, Circle, Sun } from 'lucide-react-native'; import { AnimationResolver } from '@gluestack-style/animation-plugin'; @@ -115,6 +115,7 @@ const Text = styled( const StyledIcon = styled( AsForwarder, { + bg: '$red500', variants: { size: { sm: { @@ -131,11 +132,15 @@ const StyledIcon = styled( width: '$4', height: '$4', }, + lg: { + // props: { + // size: 32, + // }, + width: '$6', + height: '$6', + }, }, }, - props: { - size: 'sm', - }, }, { componentName: 'MyIcon', @@ -145,24 +150,6 @@ const StyledIcon = styled( const MyIcon = styled( StyledIcon, { - variants: { - size: { - sm: { - width: 12, - height: 12, - // props: { - // size: 32, - // }, - }, - md: { - width: 32, - height: 32, - // props: { - // size: 32, - // }, - }, - }, - }, props: { size: 'md', }, @@ -204,7 +191,8 @@ const Text1 = styled(Text, {}, { ancestorStyle: ['_text'] }); export function ContextBasedStyles() { return ( - + + {/* */} {/* */} {/* ( let component; if (AsComp) { //@ts-ignore - if (Component.isComposedComponent) { + if (Component.isStyledComponent) { component = ( ( ? 'Styled' + displayName : 'StyledComponent'; - //@ts-ignore - - if (Component.isStyledComponent) { - //@ts-ignore - StyledComp.isComposedComponent = true; - } - //@ts-ignore StyledComp.isStyledComponent = true; From 805c6ddab2d2816df0a7baaed3199905fc1a2f31 Mon Sep 17 00:00:00 2001 From: Suraj Date: Fri, 8 Sep 2023 16:55:52 +0530 Subject: [PATCH 6/8] v0.2.37 --- packages/react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/package.json b/packages/react/package.json index c43203c6f..b5aa6d3dc 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,7 +1,7 @@ { "name": "@gluestack-style/react", "description": "A universal & performant styling library for React Native, Next.js & React", - "version": "0.2.36", + "version": "0.2.37", "keywords": [ "React Native", "Next.js", From e7299f5caf7720f64f3bf848b87ab815fe7a3b8f Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Fri, 8 Sep 2023 18:09:30 +0530 Subject: [PATCH 7/8] fix: lucide icon on mobile --- packages/react/src/styled.tsx | 31 +++++++++++++++++-------------- 1 file changed, 17 insertions(+), 14 deletions(-) diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx index dbca136c9..300de5533 100644 --- a/packages/react/src/styled.tsx +++ b/packages/react/src/styled.tsx @@ -975,7 +975,7 @@ export function verboseStyled( const ancestorStyleContext = useContext(AncestorStyleContext); let incomingComponentProps = {}; - let remainingComponentProps = {}; + let applyComponentInlineProps = {}; let sxBaseStyleFlatternStyleObject = {}; let sxVariantFlatternStyleObject = {}; let sxCompoundVariantFlatternStyleObject = {}; @@ -1183,7 +1183,7 @@ export function verboseStyled( // passingProps is specific to current component - let applyComponentInlineProps: any = componentPropsWithoutVariants; + // let applyComponentInlineProps: any = componentPropsWithoutVariants; // const STABLEHASH_states = stableHash(states); // 520ms @@ -1195,8 +1195,8 @@ export function verboseStyled( Object.keys(componentExtendedConfig).length > 0 ) { componentStyleConfig.resolveProps.forEach((toBeResovledProp: any) => { - if (applyComponentInlineProps[toBeResovledProp]) { - let value = applyComponentInlineProps[toBeResovledProp]; + if (componentPropsWithoutVariants[toBeResovledProp]) { + let value = componentPropsWithoutVariants[toBeResovledProp]; if ( CONFIG.propertyResolver && CONFIG.propertyResolver.props && @@ -1222,12 +1222,12 @@ export function verboseStyled( resolvedInlineProps[toBeResovledProp] = getResolvedTokenValueFromConfig( componentExtendedConfig, - applyComponentInlineProps, + componentPropsWithoutVariants, toBeResovledProp, - applyComponentInlineProps[toBeResovledProp] + componentPropsWithoutVariants[toBeResovledProp] ); } - delete applyComponentInlineProps[toBeResovledProp]; + delete componentPropsWithoutVariants[toBeResovledProp]; } }); } @@ -1254,8 +1254,9 @@ export function verboseStyled( ); let containsSX = false; - Object.assign(remainingComponentProps, filteredPassingRemainingProps); - Object.assign(remainingComponentProps, filteredComponentRemainingProps); + Object.assign(applyComponentInlineProps, filteredPassingRemainingProps); + Object.assign(applyComponentInlineProps, filteredComponentRemainingProps); + if ( Object.keys(filteredComponentSx).length > 0 || Object.keys(filteredPassingSx).length > 0 @@ -1541,14 +1542,15 @@ export function verboseStyled( injectAndUpdateSXProps(filteredPassingSx); Object.assign( - remainingComponentProps, + applyComponentInlineProps, filteredPassingRemainingPropsUpdated ); - Object.assign(remainingComponentProps, filteredComponentRemainingProps); - applyComponentInlineProps = remainingComponentProps; - } - //// refactor end .... + Object.assign( + applyComponentInlineProps, + filteredComponentRemainingProps + ); + } } if (containsDescendant) { @@ -1747,6 +1749,7 @@ export function verboseStyled( ...applySxStateBaseStyleCSSIds.current, ]; Object.assign(resolvedInlineProps, applyComponentInlineProps); + const resolvedStyleProps = generateStylePropsFromCSSIds( resolvedInlineProps, styleCSSIds, From ccd82cec511316e646a19bd5cfbc734e210e297f Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Fri, 8 Sep 2023 18:10:22 +0530 Subject: [PATCH 8/8] v0.2.38 --- packages/react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/package.json b/packages/react/package.json index b5aa6d3dc..5fe8cb239 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,7 +1,7 @@ { "name": "@gluestack-style/react", "description": "A universal & performant styling library for React Native, Next.js & React", - "version": "0.2.37", + "version": "0.2.38", "keywords": [ "React Native", "Next.js",