From 99c1964900349aa5453d22ee65a99dd4438057a1 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Mon, 11 Sep 2023 11:35:37 +0530 Subject: [PATCH 01/15] fix: remove unwanted props --- .../babel-plugin-styled-resolver/src/index.js | 27 +++++++++---------- .../react/src/generateStylePropsFromCSSIds.ts | 2 +- packages/react/src/styled.tsx | 9 +++---- 3 files changed, 17 insertions(+), 21 deletions(-) diff --git a/packages/babel-plugin-styled-resolver/src/index.js b/packages/babel-plugin-styled-resolver/src/index.js index 9e01b1632..62225668c 100644 --- a/packages/babel-plugin-styled-resolver/src/index.js +++ b/packages/babel-plugin-styled-resolver/src/index.js @@ -447,6 +447,7 @@ module.exports = function (b) { const components = ['@gluestack-ui/themed']; let isStyledPathConfigured = false; let isComponentsPathConfigured = false; + let targetPlatform = process.env.GLUESTACK_STYLE_TARGET; return { name: 'ast-transform', // not required @@ -884,6 +885,17 @@ module.exports = function (b) { let orderResolvedArrayExpression = []; orderedResolvedTheme.forEach((styledResolved) => { + if (targetPlatform === 'native') { + delete styledResolved.original; + delete styledResolved.value; + delete styledResolved.meta.cssRulesSet; + delete styledResolved.meta.weight; + delete styledResolved.meta.weight; + delete styledResolved.type; + delete styledResolved.componentHash; + delete styledResolved.extendedConfig; + delete styledResolved.value; + } let orderedResolvedAst = generateObjectAst(styledResolved); orderResolvedArrayExpression.push(orderedResolvedAst); }); @@ -898,12 +910,6 @@ module.exports = function (b) { t.jsxExpressionContainer(styleIdsAst) ) ); - jsxOpeningElementPath.node.attributes.push( - t.jsxAttribute( - t.jsxIdentifier('toBeInjected'), - t.jsxExpressionContainer(toBeInjectedAst) - ) - ); jsxOpeningElementPath.node.attributes.push( t.jsxAttribute( t.jsxIdentifier('orderedResolved'), @@ -912,15 +918,6 @@ module.exports = function (b) { ) ) ); - jsxOpeningElementPath.node.attributes.push( - t.jsxAttribute(t.jsxIdentifier('sxHash'), t.stringLiteral(sxHash)) - ); - jsxOpeningElementPath.node.attributes.push( - t.jsxAttribute( - t.jsxIdentifier('styledIds'), - t.jsxExpressionContainer(orderedStyleIdsArrayAst) - ) - ); } if ( diff --git a/packages/react/src/generateStylePropsFromCSSIds.ts b/packages/react/src/generateStylePropsFromCSSIds.ts index 915fb4081..d8c3395fa 100644 --- a/packages/react/src/generateStylePropsFromCSSIds.ts +++ b/packages/react/src/generateStylePropsFromCSSIds.ts @@ -149,7 +149,7 @@ export function generateStylePropsFromCSSIds( const nativeStyle = nativeStyleMap.get(cssId); if (nativeStyle) { const queryCondition = nativeStyle?.meta?.queryCondition; - const styleSheetIds = nativeStyle?.value; + const styleSheetIds = nativeStyle?.resolved; const styleSheet = styleSheetIds; if (queryCondition) { diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx index 300de5533..f80b14755 100644 --- a/packages/react/src/styled.tsx +++ b/packages/react/src/styled.tsx @@ -932,8 +932,6 @@ export function verboseStyled( //@ts-ignore verbosedStyleIds: BUILD_TIME_VERBOSED_STYLE_IDS = {}, //@ts-ignore - toBeInjected: BUILD_TIME_toBeInjected = {}, - //@ts-ignore states, // styledIds: BUILD_TIME_STYLE_IDS = [], // sxHash: BUILD_TIME_sxHash = '', @@ -947,7 +945,6 @@ export function verboseStyled( ref: React.ForwardedRef

) => { const isClient = React.useRef(false); - //@ts-ignore style: 222ms let themeDefaultProps = { ...theme.baseStyle?.props }; @@ -1289,9 +1286,11 @@ export function verboseStyled( if (BUILD_TIME_ORDERED_RESOLVED.length > 0 && !isClient.current) { if (!isInjected) { - GluestackStyleSheet.update(BUILD_TIME_ORDERED_RESOLVED); + const toBeInjected = GluestackStyleSheet.update( + BUILD_TIME_ORDERED_RESOLVED + ); if (Platform.OS === 'web') { - GluestackStyleSheet.inject(BUILD_TIME_toBeInjected); + GluestackStyleSheet.inject(toBeInjected); } isInjected = true; } From 224580c30de265254a8f56afd77e7c37c9aa171f Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Mon, 11 Sep 2023 11:36:56 +0530 Subject: [PATCH 02/15] fix: example --- example/ui-examples-babel/App.tsx | 37 +++++++++++++------ example/ui-examples-babel/babel.config.js | 37 +++++++++++++++++-- example/ui-examples-babel/package.json | 7 ++-- example/ui-examples/babel.config.js | 8 ++-- .../babel-plugin-styled-resolver/package.json | 2 +- packages/react/package.json | 2 +- 6 files changed, 67 insertions(+), 26 deletions(-) diff --git a/example/ui-examples-babel/App.tsx b/example/ui-examples-babel/App.tsx index c08e766c5..9fa582648 100644 --- a/example/ui-examples-babel/App.tsx +++ b/example/ui-examples-babel/App.tsx @@ -137,16 +137,27 @@ export function ContextBasedStylesContent() { ); } -const renderItem = (item: any) => ( - - {/* {item} */} - -); +const RenderItem = (item: any) => { + const [active, setActive] = React.useState(false); + return ( + setActive(true)} + onPressOut={() => setActive(false)} + states={{ + active, + }} + sx={{ + 'bg': '$amber400', + ':active': { + bg: '$pink500', + }, + }} + > + {/* {item} */} + + ); +}; const renderItem2 = (item: any) => ( @@ -164,7 +175,7 @@ const MyList = React.memo(() => { }, []); const data = useMemo( () => - Array(100) + Array(1000) .fill(0) .map((_, index) => `Item ${index}`), [] @@ -182,7 +193,9 @@ const MyList = React.memo(() => { > {endTime} - {data.map(renderItem)} + {data.map((_, k) => ( + + ))} ); }); diff --git a/example/ui-examples-babel/babel.config.js b/example/ui-examples-babel/babel.config.js index 1e098b701..929047992 100644 --- a/example/ui-examples-babel/babel.config.js +++ b/example/ui-examples-babel/babel.config.js @@ -1,5 +1,6 @@ const myBabel = require('../../packages/babel-plugin-styled-resolver/src/index.js'); const path = require('path'); +// process.env.GLUESTACK_STYLE_TARGET = 'native'; module.exports = function (api) { api.cache(true); @@ -11,13 +12,41 @@ module.exports = function (api) { { configPath: path.join(__dirname, './gluestack-ui.config.ts'), configThemePath: ['theme'], - // styled: [ - // // '@gluestack-style/react', - // // path.resolve(__dirname, './gluestack-ui-components/core/styled'), - // ], + styled: [ + // '@gluestack-style/react', + path.join(__dirname, '../../packages/react/src'), + ], // components: ['@gluesatck-ui/themed'], }, ], + [ + 'module-resolver', + { + alias: { + // For development, we want to alias the library to the source + ['@gluestack-style/react']: path.join( + __dirname, + '../../packages/react/src' + ), + // ['@gluestack-style/animation-plugin']: path.join( + // __dirname, + // '../../packages/animation-plugin/src' + // ), + // ['@dank-style/react']: path.join( + // __dirname, + // '../../packages/react/src' + // ), + // ['@gluestack-style/animation-plugin']: path.join( + // __dirname, + // '../../packages/animation-plugin/src' + // ), + // ['@dank-style/animation-plugin']: path.join( + // __dirname, + // '../../packages/animation-plugin/src' + // ), + }, + }, + ], ], }; }; diff --git a/example/ui-examples-babel/package.json b/example/ui-examples-babel/package.json index 8f257454b..cc725b2ac 100644 --- a/example/ui-examples-babel/package.json +++ b/example/ui-examples-babel/package.json @@ -4,11 +4,10 @@ "scripts": { "start": "expo start --dev-client", "android": "expo run:android", - "ios": "expo run:ios", - "web": "expo start --web", - "run:ios": "expo start --ios", + "ios": "GLUESTACK_STYLE_TARGET=native expo start --ios", + "web": "GLUESTACK_STYLE_TARGET=web expo start --web", "build": "tsc", - "native:prod": "expo start --no-dev --minify" + "native:prod": "GLUESTACK_STYLE_TARGET=native expo start --no-dev --minify" }, "dependencies": { "@expo-google-fonts/inter": "^0.2.3", diff --git a/example/ui-examples/babel.config.js b/example/ui-examples/babel.config.js index 29fe2917f..4c37cddd7 100644 --- a/example/ui-examples/babel.config.js +++ b/example/ui-examples/babel.config.js @@ -23,10 +23,10 @@ module.exports = function (api) { { alias: { // For development, we want to alias the library to the source - // ['@gluestack-style/react']: path.join( - // __dirname, - // '../../packages/react/lib/commonjs' - // ), + ['@gluestack-style/react']: path.join( + __dirname, + '../../packages/react/src' + ), // ['@gluestack-style/animation-plugin']: path.join( // __dirname, // '../../packages/animation-plugin/src' diff --git a/packages/babel-plugin-styled-resolver/package.json b/packages/babel-plugin-styled-resolver/package.json index ed5c8817e..e624d3c35 100644 --- a/packages/babel-plugin-styled-resolver/package.json +++ b/packages/babel-plugin-styled-resolver/package.json @@ -1,6 +1,6 @@ { "name": "@gluestack-style/babel-plugin-styled-resolver", - "version": "0.2.3", + "version": "0.2.4-alpha.0", "description": "A gluestack-style babel plugin that transpiles your styled function calls and resolves the component styling in build time.", "keywords": [ "css-in-js", diff --git a/packages/react/package.json b/packages/react/package.json index 5fe8cb239..a0c82792a 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.38", + "version": "0.2.39-alpha.0", "keywords": [ "React Native", "Next.js", From fa5ea6ccac99982a127aef6384d2e1f3cc0172bf Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Mon, 11 Sep 2023 11:39:44 +0530 Subject: [PATCH 03/15] fix: first render optimzation for states --- packages/react/src/styled.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx index f80b14755..e8b1017ea 100644 --- a/packages/react/src/styled.tsx +++ b/packages/react/src/styled.tsx @@ -945,6 +945,7 @@ export function verboseStyled( ref: React.ForwardedRef

) => { const isClient = React.useRef(false); + const isFirstRender = React.useRef(false); //@ts-ignore style: 222ms let themeDefaultProps = { ...theme.baseStyle?.props }; @@ -1649,7 +1650,7 @@ export function verboseStyled( }, []); useEffect(() => { - if (states) { + if (states && isFirstRender.current) { const { mergedBaseStyleCSSIds, mergedVariantStyleCSSIds, @@ -1696,6 +1697,7 @@ export function verboseStyled( // mergedSxDescendantsStyle // ); } + isFirstRender.current = true; // eslint-disable-next-line react-hooks/exhaustive-deps }, [states]); From 021ac6119a473d1411f94c0d1bb22ddf62a1f6b7 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Mon, 11 Sep 2023 14:44:41 +0530 Subject: [PATCH 04/15] v0.2.39-alpha.1 --- 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 a0c82792a..980c07413 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.39-alpha.0", + "version": "0.2.39-alpha.1", "keywords": [ "React Native", "Next.js", From b0b5319b74c5dce15886bf2c215d180223e0415c Mon Sep 17 00:00:00 2001 From: Rohit Singh Date: Mon, 11 Sep 2023 15:18:06 +0530 Subject: [PATCH 05/15] feat: prefixed ids for style div tags --- .../react/src/utils/css-injector/utils/inject.web.ts | 12 +++++------- yarn.lock | 8 -------- 2 files changed, 5 insertions(+), 15 deletions(-) diff --git a/packages/react/src/utils/css-injector/utils/inject.web.ts b/packages/react/src/utils/css-injector/utils/inject.web.ts index 22eaef4ee..d706c3068 100644 --- a/packages/react/src/utils/css-injector/utils/inject.web.ts +++ b/packages/react/src/utils/css-injector/utils/inject.web.ts @@ -75,10 +75,10 @@ if (typeof window !== 'undefined') { // Test on all the platforms if (Platform.OS === 'web') { order.forEach((orderKey) => { - let wrapperElement = document.getElementById(orderKey); + let wrapperElement = document.getElementById(`gs-${orderKey}`); if (!wrapperElement) { wrapperElement = document.createElement('div'); - wrapperElement.id = orderKey; + wrapperElement.id = `gs-${orderKey}`; document.head.appendChild(wrapperElement); } }); @@ -100,7 +100,6 @@ export const injectCss = ( styleTagId: string ) => { // let modifiedStylesheet = {} as any; - if (!toBeFlushedStyles[wrapperType]) { toBeFlushedStyles[wrapperType] = {}; } @@ -111,8 +110,7 @@ export const injectCss = ( } if (typeof window !== 'undefined') { - let wrapperElement = document.querySelector('#' + wrapperType); - + let wrapperElement = document.querySelector('#' + `gs-${wrapperType}`); if (wrapperElement) { let style = wrapperElement.querySelector(`[id='${styleTagId}']`); @@ -157,8 +155,8 @@ export const flush = () => { React.createElement( 'div', { - id: orderKey, - key: orderKey, + id: `gs-${orderKey}`, + key: `gs-${orderKey}`, }, styleChildren ) diff --git a/yarn.lock b/yarn.lock index 6d676c504..f186a0857 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2505,14 +2505,6 @@ inline-style-prefixer "^6.0.1" normalize-css-color "^1.0.2" -"@gluestack-style/react@^0.2.11-alpha.0", "@gluestack-style/react@^0.2.16", "@gluestack-style/react@^0.2.21": - version "0.2.27" - resolved "https://registry.yarnpkg.com/@gluestack-style/react/-/react-0.2.27.tgz#9973e14070d4a0ce12ae1c6ac6aa880d71b0c7d4" - integrity sha512-GZUC64Pi/raIjji9cXxkqzBcAkPbxxnme//cBV77g/VzpI4eNU+15jFvJMN1fYXEEPu7vSqB2DawtMgzgGa9qQ== - dependencies: - inline-style-prefixer "^6.0.1" - normalize-css-color "^1.0.2" - "@gluestack-ui/actionsheet@^0.2.16", "@gluestack-ui/actionsheet@^0.2.7", "@gluestack-ui/actionsheet@latest": version "0.2.16" resolved "https://registry.yarnpkg.com/@gluestack-ui/actionsheet/-/actionsheet-0.2.16.tgz#052a733966c517450a3cd6f832932ccf77924867" From e502b338eb356cb601908017e772a93b78b3bc6c Mon Sep 17 00:00:00 2001 From: Rohit Singh Date: Mon, 11 Sep 2023 15:27:24 +0530 Subject: [PATCH 06/15] feat: prefixed ids for style div tags --- 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 5fe8cb239..980c07413 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.38", + "version": "0.2.39-alpha.1", "keywords": [ "React Native", "Next.js", From 2a894ea1047eeaf94b18055565ced5c35fd36cc7 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Mon, 11 Sep 2023 15:31:22 +0530 Subject: [PATCH 07/15] v0.2.39-alpha.2 --- 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 980c07413..50c3fb588 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.39-alpha.1", + "version": "0.2.39-alpha.2", "keywords": [ "React Native", "Next.js", From 18aece1efe2dfe37d423ff3556bd3bb5044d2aeb Mon Sep 17 00:00:00 2001 From: Rohit Singh Date: Mon, 11 Sep 2023 15:58:44 +0530 Subject: [PATCH 08/15] feat: prefixed ids for style div tags --- 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 980c07413..50c3fb588 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.39-alpha.1", + "version": "0.2.39-alpha.2", "keywords": [ "React Native", "Next.js", From 825e6811ef686c3978eff001f86192fed377473a Mon Sep 17 00:00:00 2001 From: Rohit Singh Date: Mon, 11 Sep 2023 15:59:58 +0530 Subject: [PATCH 09/15] v0.2.39-alpha.3 --- 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 50c3fb588..1d545c84d 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.39-alpha.2", + "version": "0.2.39-alpha.3", "keywords": [ "React Native", "Next.js", From c8fd79ad25fb93f5c317cd82f4fab8749cee11a7 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Mon, 11 Sep 2023 16:08:15 +0530 Subject: [PATCH 10/15] fix: add inline base state block --- packages/react/src/types.ts | 3 ++- packages/react/src/utils/css-injector/utils/inject.web.ts | 2 ++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts index d881ef991..9f99f64c5 100644 --- a/packages/react/src/types.ts +++ b/packages/react/src/types.ts @@ -785,7 +785,8 @@ export type IWrapperType = | 'passing-base' | 'inline-base' | 'inline-variant' - | 'inline-descendant-base'; + | 'inline-descendant-base' + | 'inline-base-state'; export type GlobalStyleMap = Map< IWrapperType, diff --git a/packages/react/src/utils/css-injector/utils/inject.web.ts b/packages/react/src/utils/css-injector/utils/inject.web.ts index 22eaef4ee..09f221105 100644 --- a/packages/react/src/utils/css-injector/utils/inject.web.ts +++ b/packages/react/src/utils/css-injector/utils/inject.web.ts @@ -35,6 +35,7 @@ const toBeFlushedStyles: IToBeFlushedStyles = { 'inline-base': {}, 'inline-variant': {}, 'inline-descendant-base': {}, + 'inline-base-state': {}, }; const order: IWrapperType[] = [ @@ -68,6 +69,7 @@ const order: IWrapperType[] = [ 'passing-base', 'inline-variant', 'inline-base', + 'inline-base-state', ]; if (typeof window !== 'undefined') { From 5175a2fce78f869da041918fd68910b4d1977114 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Mon, 11 Sep 2023 16:08:49 +0530 Subject: [PATCH 11/15] fix: optimized first render --- .../react/src/generateStylePropsFromCSSIds.ts | 5 +- packages/react/src/styled.tsx | 233 ++++++++---------- 2 files changed, 109 insertions(+), 129 deletions(-) diff --git a/packages/react/src/generateStylePropsFromCSSIds.ts b/packages/react/src/generateStylePropsFromCSSIds.ts index d8c3395fa..9e5213eeb 100644 --- a/packages/react/src/generateStylePropsFromCSSIds.ts +++ b/packages/react/src/generateStylePropsFromCSSIds.ts @@ -147,11 +147,10 @@ export function generateStylePropsFromCSSIds( const nativeStyleMap = GluestackStyleSheet.getStyleMap(); styleCSSIds.forEach((cssId: any) => { const nativeStyle = nativeStyleMap.get(cssId); + if (nativeStyle) { const queryCondition = nativeStyle?.meta?.queryCondition; - const styleSheetIds = nativeStyle?.resolved; - const styleSheet = styleSheetIds; - + const styleSheet = nativeStyle?.resolved; if (queryCondition) { if (isValidBreakpoint(config, queryCondition)) { styleObj.push(styleSheet); diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx index e8b1017ea..6c2d804d7 100644 --- a/packages/react/src/styled.tsx +++ b/packages/react/src/styled.tsx @@ -918,7 +918,6 @@ export function verboseStyled( let CONFIG: any = {}; let isInjected = false; - let sxStyleIds: any = {}; const containsDescendant = componentStyleConfig?.descendantStyle && @@ -945,7 +944,7 @@ export function verboseStyled( ref: React.ForwardedRef

) => { const isClient = React.useRef(false); - const isFirstRender = React.useRef(false); + //@ts-ignore style: 222ms let themeDefaultProps = { ...theme.baseStyle?.props }; @@ -974,10 +973,10 @@ export function verboseStyled( const ancestorStyleContext = useContext(AncestorStyleContext); let incomingComponentProps = {}; let applyComponentInlineProps = {}; - let sxBaseStyleFlatternStyleObject = {}; - let sxVariantFlatternStyleObject = {}; - let sxCompoundVariantFlatternStyleObject = {}; - let sxDescendantFlattenStyles: any = {}; + const sxBaseStyleFlatternStyleObject = React.useRef({}); + const sxVariantFlatternStyleObject = React.useRef({}); + const sxCompoundVariantFlatternStyleObject = React.useRef({}); + const sxDescendantFlattenStyles: any = React.useRef({}); const COLOR_MODE: any = get(); @@ -1096,10 +1095,6 @@ export function verboseStyled( incomingComponentProps ); - /// - - /// - let mergedBaseStyleCSSIds: any = []; let mergedVariantStyleCSSIds: any = []; let stateProps = []; @@ -1109,6 +1104,77 @@ export function verboseStyled( let mergedSxDescendantsStyle: any = {}; let mergedDescendantsStyle: any = {}; + let orderedComponentSXResolved: any = []; + let orderedPassingSXResolved: any = []; + const sxStyleIds: any = React.useRef(BUILD_TIME_VERBOSED_STYLE_IDS); + + if (BUILD_TIME_ORDERED_RESOLVED.length > 0 && !isClient.current) { + if (!isInjected) { + const toBeInjected = GluestackStyleSheet.update( + BUILD_TIME_ORDERED_RESOLVED + ); + + if (Platform.OS === 'web') { + GluestackStyleSheet.inject(toBeInjected); + } + isInjected = true; + } + sxStyleIds.current = BUILD_TIME_VERBOSED_STYLE_IDS; + + if (!sxStyleIds.current.component) { + sxStyleIds.current.component = {}; + } + sxStyleIds.current.component.variants = componentStyleIds.variants; + //@ts-ignore + sxStyleIds.current.component.compoundVariants = + componentStyleIds.compoundVariants; + // console.setStartTimeStamp('setColorModeBaseStyleIds'); + sxComponentStyleIds.current = sxStyleIds.current?.component; + sxDescendantStyleIds.current = sxStyleIds.current.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; + + const { + componentBaseStyleFlatternStyleIdObject: a, + componentVariantFlatternStyleIdObject: b, + componentCompoundVariantFlatternStyleIdObject: c, + } = getFlattenStyleObjectFromStyleIds(sxComponentStyleIds.current); + + if (sxDescendantStyleIds.current && containsDescendant) { + Object.keys(sxDescendantStyleIds.current).forEach( + (currentDescendant: any) => { + sxDescendantFlattenStyles.current[currentDescendant] = + getFlattenStyleObjectFromStyleIds( + sxDescendantStyleIds.current[currentDescendant] + ); + } + ); + } + + sxBaseStyleFlatternStyleObject.current = a; + sxVariantFlatternStyleObject.current = b; + sxCompoundVariantFlatternStyleObject.current = c; + } + if (!isClient.current) { const { mergedBaseStyleCSSIds: a, @@ -1130,10 +1196,10 @@ export function verboseStyled( componentVariantFlatternStyleIdObject, componentCompoundVariantFlatternStyleIdObject, componentDescendantFlattenStyles, - sxBaseStyleFlatternStyleObject, - sxVariantFlatternStyleObject, - sxCompoundVariantFlatternStyleObject, - sxDescendantFlattenStyles, + sxBaseStyleFlatternStyleObject.current, + sxVariantFlatternStyleObject.current, + sxCompoundVariantFlatternStyleObject.current, + sxDescendantFlattenStyles.current, componentDescendantStyleIds, sxDescendantStyleIds ); @@ -1273,84 +1339,6 @@ export function verboseStyled( ); } - // ancestorCSSStyleId - - // const [applySxStyleCSSIds, setApplySxStyleCSSIds] = useState([]); - - // SX resolution - - // const styleTagId = useRef(`style-tag-sx-${stableHash(sx)}`); - - // FOR SX RESOLUTION - let orderedComponentSXResolved: any = []; - let orderedPassingSXResolved: any = []; - - if (BUILD_TIME_ORDERED_RESOLVED.length > 0 && !isClient.current) { - if (!isInjected) { - const toBeInjected = GluestackStyleSheet.update( - BUILD_TIME_ORDERED_RESOLVED - ); - if (Platform.OS === 'web') { - GluestackStyleSheet.inject(toBeInjected); - } - isInjected = true; - } - sxStyleIds = BUILD_TIME_VERBOSED_STYLE_IDS; - - 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; - - const { - componentBaseStyleFlatternStyleIdObject: a, - componentVariantFlatternStyleIdObject: b, - componentCompoundVariantFlatternStyleIdObject: c, - } = getFlattenStyleObjectFromStyleIds(sxComponentStyleIds.current); - - if (sxDescendantStyleIds.current && containsDescendant) { - Object.keys(sxDescendantStyleIds.current).forEach( - (currentDescendant: any) => { - sxDescendantFlattenStyles[currentDescendant] = - getFlattenStyleObjectFromStyleIds( - sxDescendantStyleIds.current[currentDescendant] - ); - } - ); - } - - sxBaseStyleFlatternStyleObject = a; - sxVariantFlatternStyleObject = b; - sxCompoundVariantFlatternStyleObject = c; - } - function injectAndUpdateSXProps(filteredPassingSx: any) { if (Object.keys(filteredComponentSx).length > 0) { orderedComponentSXResolved = injectSx(filteredComponentSx, 'inline'); @@ -1366,21 +1354,21 @@ export function verboseStyled( ...BUILD_TIME_ORDERED_RESOLVED, ]; // console.setStartTimeStamp('getStyleIds'); - sxStyleIds = getStyleIds(orderedSXResolved, componentStyleConfig); + sxStyleIds.current = getStyleIds(orderedSXResolved, componentStyleConfig); /// // Setting variants to sx property for inline variant resolution //@ts-ignore - if (!sxStyleIds.component) { - sxStyleIds.component = {}; + if (!sxStyleIds.current.component) { + sxStyleIds.current.component = {}; } - sxStyleIds.component.variants = componentStyleIds.variants; + sxStyleIds.current.component.variants = componentStyleIds.variants; //@ts-ignore - sxStyleIds.component.compoundVariants = + sxStyleIds.current.component.compoundVariants = componentStyleIds.compoundVariants; // console.setStartTimeStamp('setColorModeBaseStyleIds'); - sxComponentStyleIds.current = sxStyleIds?.component; - sxDescendantStyleIds.current = sxStyleIds.descendant; + sxComponentStyleIds.current = sxStyleIds.current?.component; + sxDescendantStyleIds.current = sxStyleIds.current.descendant; // 315ms // SX component style //@ts-ignore @@ -1403,12 +1391,7 @@ export function verboseStyled( applySxVariantStyleCSSIds.current = sxVariantStyleCSSIds; sxComponentPassingProps.current = sxPassingProps; } - // if (containsSX) { - // //TODO: Refactor for initial passing props ..... - // // SX descendants - // } - // For subsequest renders sx resolution for dynmic values if (containsSX) { injectAndUpdateSXProps(filteredPassingSx); @@ -1421,7 +1404,7 @@ export function verboseStyled( if (sxDescendantStyleIds.current && containsDescendant) { Object.keys(sxDescendantStyleIds.current).forEach( (currentDescendant: any) => { - sxDescendantFlattenStyles[currentDescendant] = + sxDescendantFlattenStyles.current[currentDescendant] = getFlattenStyleObjectFromStyleIds( sxDescendantStyleIds.current[currentDescendant] ); @@ -1429,9 +1412,9 @@ export function verboseStyled( ); } - sxBaseStyleFlatternStyleObject = a; - sxVariantFlatternStyleObject = b; - sxCompoundVariantFlatternStyleObject = c; + sxBaseStyleFlatternStyleObject.current = a; + sxVariantFlatternStyleObject.current = b; + sxCompoundVariantFlatternStyleObject.current = c; //TODO: start: refactor for sx state + colormode + dynamic variable // for sx state props @@ -1457,13 +1440,13 @@ export function verboseStyled( } = getMergedStateAndColorModeCSSIdsAndProps( sxComponentStyleIds.current, //@ts-ignore - sxBaseStyleFlatternStyleObject, + sxBaseStyleFlatternStyleObject.current, states, variantProps, COLOR_MODE, theme, - sxVariantFlatternStyleObject, - sxCompoundVariantFlatternStyleObject, + sxVariantFlatternStyleObject.current, + sxCompoundVariantFlatternStyleObject.current, currentStateArray ); @@ -1481,17 +1464,17 @@ export function verboseStyled( } = getMergedStateAndColorModeCSSIdsAndProps( //@ts-ignore sxDescendantStyleIds.current, - sxDescendantFlattenStyles[key]?.[ + sxDescendantFlattenStyles.current[key]?.[ 'componentBaseStyleFlatternStyleIdObject' ], states, variantProps, COLOR_MODE, theme, - sxDescendantFlattenStyles[key]?.[ + sxDescendantFlattenStyles.current[key]?.[ 'componentVariantFlatternStyleIdObject' ], - sxDescendantFlattenStyles[key]?.[ + sxDescendantFlattenStyles.current[key]?.[ 'componentCompoundVariantFlatternStyleIdObject' ], currentStateArray @@ -1569,10 +1552,6 @@ export function verboseStyled( setApplyComponentStateBaseStyleIds, ] = useState(mergedBaseStyleCSSIds); - if (!isClient.current) { - isClient.current = true; - } - // START: Unable to optimize because of useEffect overhead and stableHash to prevent rerender useEffect(() => { onChange((colorMode: any) => { @@ -1597,10 +1576,10 @@ export function verboseStyled( componentVariantFlatternStyleIdObject, componentCompoundVariantFlatternStyleIdObject, componentDescendantFlattenStyles, - sxBaseStyleFlatternStyleObject, + sxBaseStyleFlatternStyleObject.current, sxVariantFlatternStyleObject, sxCompoundVariantFlatternStyleObject, - sxDescendantFlattenStyles, + sxDescendantFlattenStyles.current, componentDescendantStyleIds, sxDescendantStyleIds ); @@ -1639,10 +1618,10 @@ export function verboseStyled( componentVariantFlatternStyleIdObject, componentCompoundVariantFlatternStyleIdObject, componentDescendantFlattenStyles, - sxBaseStyleFlatternStyleObject, + sxBaseStyleFlatternStyleObject.current, sxVariantFlatternStyleObject, sxCompoundVariantFlatternStyleObject, - sxDescendantFlattenStyles, + sxDescendantFlattenStyles.current, componentDescendantStyleIds, sxDescendantStyleIds ); @@ -1650,7 +1629,7 @@ export function verboseStyled( }, []); useEffect(() => { - if (states && isFirstRender.current) { + if (states && isClient.current) { const { mergedBaseStyleCSSIds, mergedVariantStyleCSSIds, @@ -1671,10 +1650,10 @@ export function verboseStyled( componentVariantFlatternStyleIdObject, componentCompoundVariantFlatternStyleIdObject, componentDescendantFlattenStyles, - sxBaseStyleFlatternStyleObject, + sxBaseStyleFlatternStyleObject.current, sxVariantFlatternStyleObject, sxCompoundVariantFlatternStyleObject, - sxDescendantFlattenStyles, + sxDescendantFlattenStyles.current, componentDescendantStyleIds, sxDescendantStyleIds ); @@ -1697,7 +1676,9 @@ export function verboseStyled( // mergedSxDescendantsStyle // ); } - isFirstRender.current = true; + if (!isClient.current) { + isClient.current = true; + } // eslint-disable-next-line react-hooks/exhaustive-deps }, [states]); From ae71ef056dc22f6065353c60c28079be5909e949 Mon Sep 17 00:00:00 2001 From: Rohit Singh Date: Mon, 11 Sep 2023 16:13:49 +0530 Subject: [PATCH 12/15] feat: prefixed ids for style div tags --- .../src/utils/css-injector/utils/inject.web.ts | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/react/src/utils/css-injector/utils/inject.web.ts b/packages/react/src/utils/css-injector/utils/inject.web.ts index d706c3068..72ef8bc5d 100644 --- a/packages/react/src/utils/css-injector/utils/inject.web.ts +++ b/packages/react/src/utils/css-injector/utils/inject.web.ts @@ -75,10 +75,12 @@ if (typeof window !== 'undefined') { // Test on all the platforms if (Platform.OS === 'web') { order.forEach((orderKey) => { - let wrapperElement = document.getElementById(`gs-${orderKey}`); + let wrapperElement = document.getElementById( + `gluestack-style-injected-styles-${orderKey}` + ); if (!wrapperElement) { wrapperElement = document.createElement('div'); - wrapperElement.id = `gs-${orderKey}`; + wrapperElement.id = `gluestack-style-injected-styles-${orderKey}`; document.head.appendChild(wrapperElement); } }); @@ -110,7 +112,9 @@ export const injectCss = ( } if (typeof window !== 'undefined') { - let wrapperElement = document.querySelector('#' + `gs-${wrapperType}`); + let wrapperElement = document.querySelector( + '#' + `gluestack-style-injected-styles-${wrapperType}` + ); if (wrapperElement) { let style = wrapperElement.querySelector(`[id='${styleTagId}']`); @@ -155,8 +159,8 @@ export const flush = () => { React.createElement( 'div', { - id: `gs-${orderKey}`, - key: `gs-${orderKey}`, + id: `gluestack-style-injected-styles-${orderKey}`, + key: `gluestack-style-injected-styles-${orderKey}`, }, styleChildren ) From 4b28ac7b457c36b59af934a760d0cfca5b0876c1 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Mon, 11 Sep 2023 16:56:50 +0530 Subject: [PATCH 13/15] fix: add wrapper gs div --- .../utils/css-injector/utils/inject.web.ts | 40 +++++++++++++++---- 1 file changed, 33 insertions(+), 7 deletions(-) diff --git a/packages/react/src/utils/css-injector/utils/inject.web.ts b/packages/react/src/utils/css-injector/utils/inject.web.ts index f006e75d2..9f4675608 100644 --- a/packages/react/src/utils/css-injector/utils/inject.web.ts +++ b/packages/react/src/utils/css-injector/utils/inject.web.ts @@ -72,18 +72,34 @@ const order: IWrapperType[] = [ 'inline-base-state', ]; +const WRAPPER_BLOCK_PREFIX = 'gs-injected'; + if (typeof window !== 'undefined') { //TODO: remvoe platform dependency // Test on all the platforms if (Platform.OS === 'web') { + // create a wrapper div for all injected styles + + // append this wrapper div in + let wrapperBlockDiv = document.getElementById(WRAPPER_BLOCK_PREFIX); + + if (!wrapperBlockDiv) { + const createdWrapperBlockDiv = document.createElement('div'); + createdWrapperBlockDiv.id = WRAPPER_BLOCK_PREFIX; + wrapperBlockDiv = document.head.appendChild(createdWrapperBlockDiv); + } + + // document.head + order.forEach((orderKey) => { let wrapperElement = document.getElementById( - `gluestack-style-injected-styles-${orderKey}` + `${WRAPPER_BLOCK_PREFIX}-${orderKey}` ); if (!wrapperElement) { wrapperElement = document.createElement('div'); - wrapperElement.id = `gluestack-style-injected-styles-${orderKey}`; - document.head.appendChild(wrapperElement); + wrapperElement.id = `${WRAPPER_BLOCK_PREFIX}-${orderKey}`; + + wrapperBlockDiv?.appendChild(wrapperElement); } }); } @@ -115,7 +131,7 @@ export const injectCss = ( if (typeof window !== 'undefined') { let wrapperElement = document.querySelector( - '#' + `gluestack-style-injected-styles-${wrapperType}` + '#' + `${WRAPPER_BLOCK_PREFIX}-${wrapperType}` ); if (wrapperElement) { let style = wrapperElement.querySelector(`[id='${styleTagId}']`); @@ -146,6 +162,7 @@ export const flush = () => { const styleChildren: any = []; Object.keys(toBeFlushedStyles[orderKey]).forEach((styleTagId) => { let rules = toBeFlushedStyles[orderKey][styleTagId]; + styleChildren.push( React.createElement('style', { id: styleTagId, @@ -161,8 +178,8 @@ export const flush = () => { React.createElement( 'div', { - id: `gluestack-style-injected-styles-${orderKey}`, - key: `gluestack-style-injected-styles-${orderKey}`, + id: `${WRAPPER_BLOCK_PREFIX}-${orderKey}`, + key: `${WRAPPER_BLOCK_PREFIX}-${orderKey}`, }, styleChildren ) @@ -197,5 +214,14 @@ export const flush = () => { // ); // }); - return toBeFlushedStylesGlobal; + // create a wrapper div that contains all injected style + + // return wrapper div + + const toBeFlushedStylesWrrapperDiv = React.createElement('div', { + id: WRAPPER_BLOCK_PREFIX, + children: toBeFlushedStylesGlobal, + }); + + return toBeFlushedStylesWrrapperDiv; }; From 42470c67af9865269c38a1e2a385d92786ffdaf4 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Mon, 11 Sep 2023 16:57:42 +0530 Subject: [PATCH 14/15] v0.2.40 --- 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 1d545c84d..57c5bf3c9 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.39-alpha.3", + "version": "0.2.40", "keywords": [ "React Native", "Next.js", From 086112f975ca185aa126498de643865a87ec1ae5 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Mon, 11 Sep 2023 16:58:35 +0530 Subject: [PATCH 15/15] v0.2.4 --- packages/babel-plugin-styled-resolver/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/babel-plugin-styled-resolver/package.json b/packages/babel-plugin-styled-resolver/package.json index e624d3c35..aa376c608 100644 --- a/packages/babel-plugin-styled-resolver/package.json +++ b/packages/babel-plugin-styled-resolver/package.json @@ -1,6 +1,6 @@ { "name": "@gluestack-style/babel-plugin-styled-resolver", - "version": "0.2.4-alpha.0", + "version": "0.2.4", "description": "A gluestack-style babel plugin that transpiles your styled function calls and resolves the component styling in build time.", "keywords": [ "css-in-js",