From cf71e2873701483cecb96c33d3f2272fa8a9a09e Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Thu, 21 Sep 2023 16:23:07 +0530 Subject: [PATCH 01/15] feat: create components and styles api --- packages/react/src/createComponents.ts | 7 ++++ packages/react/src/createStyle.ts | 16 ++++++++ packages/react/src/types.ts | 54 +++++++++++++++++++------- 3 files changed, 62 insertions(+), 15 deletions(-) create mode 100644 packages/react/src/createComponents.ts create mode 100644 packages/react/src/createStyle.ts diff --git a/packages/react/src/createComponents.ts b/packages/react/src/createComponents.ts new file mode 100644 index 000000000..2dc28967f --- /dev/null +++ b/packages/react/src/createComponents.ts @@ -0,0 +1,7 @@ +import type { CreateComponents } from './types'; + +export const createComponents = >( + components: CreateComponents +) => { + return components; +}; diff --git a/packages/react/src/createStyle.ts b/packages/react/src/createStyle.ts new file mode 100644 index 000000000..9f96ad57d --- /dev/null +++ b/packages/react/src/createStyle.ts @@ -0,0 +1,16 @@ +import type { ViewProps, ImageProps, TextProps } from 'react-native'; +import type { IComponentStyleConfig, ITheme } from './types'; + +export const createStyle = ( + theme: T & ITheme, + componentConfig?: Omit, + BUILD_TIME_PARAMS?: any +) => { + const createdStyles = { + theme, + componentConfig, + BUILD_TIME_PARAMS, + }; + + return createdStyles; +}; diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts index 72a55e834..1752aa696 100644 --- a/packages/react/src/types.ts +++ b/packages/react/src/types.ts @@ -85,12 +85,6 @@ export type GlueStackConfig< globalStyle?: GlobalStyles; plugins?: Array; themes?: ThemeStyles; - components?: { - [key: string]: { - theme: Partial>; - componentConfig?: IComponentStyleConfig; - }; - }; }; export type ComponentsThemeType = { @@ -113,6 +107,12 @@ export type CreateGenericConfig = GlueStackConfig< GenericGlobalStyle >; +export type CreateGenericComponents = GlueStackConfig< + Tokens, + GenericAliases, + GenericGlobalStyle +>; + // All Aliases export type Aliases = GSConfig['aliases']; export type Components = GSConfig['components']; @@ -139,14 +139,12 @@ export type SxStyleProps< //@ts-ignore type GlobalVariants = GSConfig['globalStyle']['variants']; -export type IComponentStyleConfig = Partial< - { - descendantStyle: any; - ancestorStyle: any; - resolveProps: any; - componentName: ComCon; - } & { [key: string]: any } ->; +export type IComponentStyleConfig = Partial<{ + descendantStyle: any; + ancestorStyle: any; + resolveProps: any; + componentName: ComCon; +}>; export type Config = { alias: { [K: string]: any }; @@ -650,9 +648,18 @@ export type StyleIds = { export interface ICustomConfig {} +export interface ICustomComponents {} + export interface GSConfig extends Omit, - ICustomConfig {} + ICustomConfig, + GenericComponents { + components: ICustomComponents; +} + +interface GenericComponents { + components: {}; +} /********************* COMPONENT PROPS TYPE *****************************************/ @@ -848,3 +855,20 @@ export type GlobalStyleMap = Map< }>; }> >; + +export type ExtendedTheme = ITheme< + Variants, + ViewProps | ImageProps | TextProps +>; + +// export type CreateStyle = { +// // theme: Component['theme'] & +// // ITheme; +// // componentConfig?: Omit; +// theme: ITheme; +// componentConfig?: IComponentStyleConfig; +// }; + +export type CreateComponents = { + [key in keyof Component]: Component[key]; // CreateStyle; +}; From 4eae834af4d4968de00da4b863b6c1e49bf1ac2a Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Thu, 21 Sep 2023 23:14:36 +0530 Subject: [PATCH 02/15] feat: extend theme build time resolution --- .../babel-plugin-styled-resolver/src/index.js | 132 ++++++++++++++++++ packages/react/src/StyledProvider.tsx | 21 ++- packages/react/src/createConfig.ts | 51 ++++--- packages/react/src/index.ts | 4 + packages/react/src/styled.tsx | 18 ++- 5 files changed, 192 insertions(+), 34 deletions(-) diff --git a/packages/babel-plugin-styled-resolver/src/index.js b/packages/babel-plugin-styled-resolver/src/index.js index 407909053..bd76803da 100644 --- a/packages/babel-plugin-styled-resolver/src/index.js +++ b/packages/babel-plugin-styled-resolver/src/index.js @@ -469,6 +469,10 @@ module.exports = function (b) { let isStyledPathConfigured = false; let isComponentsPathConfigured = false; let targetPlatform = process.env.GLUESTACK_STYLE_TARGET; + let createStyleImportedName = ''; + let createComponentsImportedName = ''; + const CREATE_STYLE = 'createStyle'; + const CREATE_COMPONENTS = 'createComponents'; return { name: 'ast-transform', // not required @@ -554,6 +558,15 @@ module.exports = function (b) { if (importSpecifierPath.node.imported.name === 'styled') { styledImportName = importSpecifierPath.node.local.name; } + if (importSpecifierPath.node.imported.name === CREATE_STYLE) { + createStyleImportedName = importSpecifierPath.node.local.name; + } + if ( + importSpecifierPath.node.imported.name === CREATE_COMPONENTS + ) { + createComponentsImportedName = + importSpecifierPath.node.local.name; + } if (importSpecifierPath.node.imported.name === styledAlias) { styledAliasImportedName = importSpecifierPath.node.local.name; } @@ -747,6 +760,125 @@ module.exports = function (b) { // console.log('\n >>>>>>>>>>>>>>>>>>>>>\n\n'); } } + if (callExpressionPath.node.callee.name === createStyleImportedName) { + callExpressionPath.traverse({ + ObjectProperty(ObjectPath) { + if (t.isIdentifier(ObjectPath.node.value)) { + if (ObjectPath.node.value.name === 'undefined') { + ObjectPath.remove(); + } + } + }, + }); + + if (isValidConfig) { + let args = callExpressionPath.node.arguments; + + let componentThemeNode = args[0]; + let componentConfigNode = args[1] ?? t.objectExpression([]); + + if ( + !( + t.isIdentifier(componentThemeNode) || + t.isIdentifier(componentConfigNode) + ) + ) { + let theme = getObjectFromAstNode(componentThemeNode); + let componentConfig = getObjectFromAstNode(componentConfigNode); + + // getExportedConfigFromFileString(ConfigDefault); + let mergedPropertyConfig = { + ...ConfigDefault?.propertyTokenMap, + ...propertyTokenMap, + }; + let componentExtendedConfig = merge( + {}, + { + ...ConfigDefault, + propertyTokenMap: { ...mergedPropertyConfig }, + } + ); + + if (theme && Object.keys(theme).length > 0) { + const verbosedTheme = convertStyledToStyledVerbosed(theme); + + let componentHash = stableHash({ + ...theme, + ...componentConfig, + }); + + if (outputLibrary) { + componentHash = outputLibrary + '-' + componentHash; + } + + const { styledIds, verbosedStyleIds } = + updateOrderUnResolvedMap( + verbosedTheme, + componentHash, + 'boot', + componentConfig, + BUILD_TIME_GLUESTACK_STYLESHEET, + platform + ); + + const toBeInjected = BUILD_TIME_GLUESTACK_STYLESHEET.resolve( + styledIds, + componentExtendedConfig, + {} + ); + + const current_global_map = + BUILD_TIME_GLUESTACK_STYLESHEET.getStyleMap(); + + const orderedResolvedTheme = []; + + current_global_map?.forEach((styledResolved) => { + if (styledIds.includes(styledResolved?.meta?.cssId)) { + orderedResolvedTheme.push(styledResolved); + } + }); + + let styleIdsAst = generateObjectAst(verbosedStyleIds); + + let toBeInjectedAst = generateObjectAst(toBeInjected); + + let orderedResolvedAst = generateArrayAst(orderedResolvedTheme); + + let orderedStyleIdsArrayAst = t.arrayExpression( + styledIds?.map((cssId) => t.stringLiteral(cssId)) + ); + + let resultParamsNode = t.objectExpression([ + t.objectProperty( + t.stringLiteral('orderedResolved'), + orderedResolvedAst + ), + t.objectProperty( + t.stringLiteral('toBeInjected'), + toBeInjectedAst + ), + t.objectProperty( + t.stringLiteral('styledIds'), + orderedStyleIdsArrayAst + ), + t.objectProperty( + t.stringLiteral('verbosedStyleIds'), + styleIdsAst + ), + ]); + + while (args.length < 3) { + args.push(t.objectExpression([])); + } + if (!args[2]) { + args.push(resultParamsNode); + } else { + args[2] = resultParamsNode; + } + } + } + } + } }, JSXOpeningElement(jsxOpeningElementPath) { if ( diff --git a/packages/react/src/StyledProvider.tsx b/packages/react/src/StyledProvider.tsx index 91fd4d689..de05668b5 100644 --- a/packages/react/src/StyledProvider.tsx +++ b/packages/react/src/StyledProvider.tsx @@ -6,12 +6,18 @@ import type { COLORMODES } from './types'; import { platformSpecificSpaceUnits } from './utils'; import { createGlobalStylesWeb } from './createGlobalStylesWeb'; import { createGlobalStyles } from './createGlobalStyles'; +import { resolveComponentThemes } from './createConfig'; type Config = any; let colorModeSet = false; -export const defaultConfig: { config: Config; colorMode: COLORMODES } = { +export const defaultConfig: { + config: Config; + colorMode: COLORMODES; + components: any; +} = { config: {}, colorMode: 'light', + components: {}, }; const defaultContextData: Config = defaultConfig; @@ -37,7 +43,8 @@ export const StyledProvider: React.FC<{ colorMode?: COLORMODES; children?: React.ReactNode; globalStyles?: any; -}> = ({ config, colorMode, children, globalStyles }) => { + components: any; +}> = ({ config, colorMode, children, globalStyles, components }) => { const currentConfig = React.useMemo(() => { //TODO: Add this later return platformSpecificSpaceUnits(config, Platform.OS); @@ -89,8 +96,14 @@ export const StyledProvider: React.FC<{ config?.globalStyle && createGlobalStyles(config.globalStyle); const contextValue = React.useMemo(() => { - return { config: currentConfig, globalStyle: globalStyleMap }; - }, [currentConfig, globalStyleMap]); + return { + config: { + ...currentConfig, + components: resolveComponentThemes(currentConfig, components), + }, + globalStyle: globalStyleMap, + }; + }, [currentConfig, globalStyleMap, components]); return ( diff --git a/packages/react/src/createConfig.ts b/packages/react/src/createConfig.ts index 5aad9322b..02adf124b 100644 --- a/packages/react/src/createConfig.ts +++ b/packages/react/src/createConfig.ts @@ -5,6 +5,7 @@ import { resolveStringToken } from './utils'; import { stableHash } from './stableHash'; import { propertyTokenMap } from './propertyTokenMap'; import { updateOrderUnResolvedMap } from './updateOrderUnResolvedMap'; +import { GluestackStyleSheet } from './style-sheet'; var globalPluginStore: any = []; @@ -42,24 +43,18 @@ export const createConfig = < } delete config.plugins; - if ( - !config.components && - // @ts-ignore - !config.themes - ) { + if (!config.themes) { return config as any; } - let newConfig = config; - if (config.components) { - newConfig = resolveComponentThemes(config); - } + // if (config.components) { + // newConfig = resolveComponentThemes(config); + // } - // @ts-ignore if (config.themes) { - const newConfigWithThemesResolved = resolveThemes(newConfig); + const newConfigWithThemesResolved = resolveThemes(config); return newConfigWithThemesResolved as any; } - return newConfig as any; + return config as any; }; const resolveThemes = (config: any) => { @@ -86,26 +81,33 @@ const resolveThemes = (config: any) => { return newConfig; }; -const resolveComponentThemes = (config: any) => { - const newConfig = { ...config }; - delete config.components; - +export const resolveComponentThemes = (config: any, components: any) => { + let newComponents: any = {}; const configWithPropertyTokenMap = { ...config, propertyTokenMap, }; - Object.keys(newConfig?.components ?? {}).forEach((componentName: any) => { - const component = newConfig.components[componentName]; - if (component.theme) { - component.theme = resolveTheme( + + Object.keys(components ?? {}).forEach((componentName: any) => { + const component = components[componentName]; + + if ( + Object.keys(component?.BUILD_TIME_PARAMS ?? {}).length === 0 && + component.theme + ) { + newComponents[componentName] = resolveTheme( component.theme, configWithPropertyTokenMap, component?.componentConfig ); + } else { + GluestackStyleSheet.update(component.BUILD_TIME_PARAMS?.orderedResolved); + GluestackStyleSheet.inject(component.BUILD_TIME_PARAMS?.toBeInjected); + newComponents[componentName] = component; } }); - return newConfig; + return newComponents; }; const resolveTheme = ( @@ -124,9 +126,12 @@ const resolveTheme = ( 'extended', extendedConfig ); + return { - extendedStyleIds: styledIds, - extendedVerbosedStyleIds: verbosedStyleIds, + BUILD_TIME_PARAMS: { + styledIds, + verbosedStyleIds, + }, theme: versboseComponentTheme, }; }; diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 38246bd3e..da09a0c59 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -70,6 +70,7 @@ export type { Aliases, AliasesProps, ICustomConfig, + ICustomComponents, GSConfig, } from './types'; export { createStyled } from './createStyled'; @@ -82,6 +83,9 @@ export { AsForwarder } from './AsForwarder'; export { AddCssTokenVariables, FontResolver } from './plugins'; +export { createStyle } from './createStyle'; +export { createComponents } from './createComponents'; + export { INTERNAL_updateCSSStyleInOrderedResolved } from './updateCSSStyleInOrderedResolved'; export { createConfig } from './createConfig'; export * from './core'; diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx index 29d2ef056..32a1cbea0 100644 --- a/packages/react/src/styled.tsx +++ b/packages/react/src/styled.tsx @@ -1033,28 +1033,32 @@ export function verboseStyled( }; const EXTENDED_THEME = - componentName && CONFIG?.components?.[componentName]?.theme?.theme; + componentName && CONFIG?.components?.[componentName]; // Injecting style if (EXTENDED_THEME) { - theme.variants = deepMerge(theme.variants, EXTENDED_THEME.variants); + theme.variants = deepMerge( + theme.variants, + EXTENDED_THEME?.theme?.variants + ); theme.defaultProps = deepMerge( theme.defaultProps, - EXTENDED_THEME.props + EXTENDED_THEME?.props ); // @ts-ignore - theme.props = deepMerge(theme.props, EXTENDED_THEME.props); + theme.props = deepMerge(theme.props, EXTENDED_THEME?.theme?.props); // Merge of Extended Config Style ID's with Component Style ID's deepMergeArray( styleIds, - CONFIG?.components?.[`${componentName}`]?.theme - ?.extendedVerbosedStyleIds + CONFIG?.components?.[`${componentName}`]?.BUILD_TIME_PARAMS + ?.verbosedStyleIds ); // Injecting Extended StyleSheet from Config orderedCSSIds = [ ...orderedCSSIds, - ...CONFIG?.components?.[`${componentName}`]?.theme?.extendedStyleIds, + ...CONFIG?.components?.[`${componentName}`]?.BUILD_TIME_PARAMS + ?.styledIds, ]; } From 7b34e6e70b8a21e3ecf5d92ccacc0b41898a8f8a Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Fri, 22 Sep 2023 14:35:24 +0530 Subject: [PATCH 03/15] feat: create components build time resolution --- .../babel-plugin-styled-resolver/src/index.js | 139 +++++++++++++++++- 1 file changed, 137 insertions(+), 2 deletions(-) diff --git a/packages/babel-plugin-styled-resolver/src/index.js b/packages/babel-plugin-styled-resolver/src/index.js index bd76803da..1dd1b9834 100644 --- a/packages/babel-plugin-styled-resolver/src/index.js +++ b/packages/babel-plugin-styled-resolver/src/index.js @@ -89,6 +89,24 @@ const convertExpressionContainerToStaticObject = ( }; }; +function findThemeAndComponentConfig(node) { + let themeNode = null; + let componentConfigNode = null; + node.forEach((prop) => { + const propKey = prop.key.name ? prop.key.name : prop.key.value; + if (propKey === 'theme') { + themeNode = prop; + } else if (propKey === 'componentConfig') { + componentConfigNode = prop; + } + }); + + return { + themeNode, + componentConfigNode, + }; +} + function addQuotesToObjectKeys(code) { const ast = babel.parse(`var a = ${code}`, { presets: [babelPresetTypeScript], @@ -222,6 +240,9 @@ function getConfig(configPath) { ); } } + +function getBuildTimeParams(theme, componentConfig, extendedConfig) {} + function getSurroundingCharacters(string, index) { let start = Math.max(0, index - 5); let end = Math.min(string.length, index + 6); @@ -588,7 +609,6 @@ module.exports = function (b) { } } }, - CallExpression(callExpressionPath) { if ( callExpressionPath.node.callee.name === styledAliasImportedName || @@ -815,7 +835,7 @@ module.exports = function (b) { updateOrderUnResolvedMap( verbosedTheme, componentHash, - 'boot', + 'extended', componentConfig, BUILD_TIME_GLUESTACK_STYLESHEET, platform @@ -879,6 +899,121 @@ module.exports = function (b) { } } } + if ( + callExpressionPath.node.callee.name === createComponentsImportedName + ) { + callExpressionPath.traverse({ + ObjectProperty(ObjectPath) { + if (t.isIdentifier(ObjectPath.node.value)) { + if (ObjectPath.node.value.name === 'undefined') { + ObjectPath.remove(); + } + } + }, + }); + const fnArgPropeties = + callExpressionPath.node.arguments[0].properties; + fnArgPropeties.forEach((property) => { + const { themeNode, componentConfigNode } = + findThemeAndComponentConfig(property.value.properties); + + if (isValidConfig) { + let theme = themeNode + ? getObjectFromAstNode(themeNode?.value) + : {}; + let componentConfig = componentConfigNode + ? getObjectFromAstNode(componentConfigNode?.value) + : {}; + + let mergedPropertyConfig = { + ...ConfigDefault?.propertyTokenMap, + ...propertyTokenMap, + }; + let componentExtendedConfig = merge( + {}, + { + ...ConfigDefault, + propertyTokenMap: { ...mergedPropertyConfig }, + } + ); + + if (theme && Object.keys(theme).length > 0) { + const verbosedTheme = convertStyledToStyledVerbosed(theme); + + let componentHash = stableHash({ + ...theme, + ...componentConfig, + }); + + if (outputLibrary) { + componentHash = outputLibrary + '-' + componentHash; + } + + const { styledIds, verbosedStyleIds } = + updateOrderUnResolvedMap( + verbosedTheme, + componentHash, + 'extended', + componentConfig, + BUILD_TIME_GLUESTACK_STYLESHEET, + platform + ); + + const toBeInjected = BUILD_TIME_GLUESTACK_STYLESHEET.resolve( + styledIds, + componentExtendedConfig, + {} + ); + + const current_global_map = + BUILD_TIME_GLUESTACK_STYLESHEET.getStyleMap(); + + const orderedResolvedTheme = []; + + current_global_map?.forEach((styledResolved) => { + if (styledIds.includes(styledResolved?.meta?.cssId)) { + orderedResolvedTheme.push(styledResolved); + } + }); + + let styleIdsAst = generateObjectAst(verbosedStyleIds); + + let toBeInjectedAst = generateObjectAst(toBeInjected); + + let orderedResolvedAst = generateArrayAst(orderedResolvedTheme); + + let orderedStyleIdsArrayAst = t.arrayExpression( + styledIds?.map((cssId) => t.stringLiteral(cssId)) + ); + + let resultParamsNode = t.objectExpression([ + t.objectProperty( + t.stringLiteral('orderedResolved'), + orderedResolvedAst + ), + t.objectProperty( + t.stringLiteral('toBeInjected'), + toBeInjectedAst + ), + t.objectProperty( + t.stringLiteral('styledIds'), + orderedStyleIdsArrayAst + ), + t.objectProperty( + t.stringLiteral('verbosedStyleIds'), + styleIdsAst + ), + ]); + property.value.properties.push( + t.objectProperty( + t.stringLiteral('BUILD_TIME_PARAMS'), + resultParamsNode + ) + ); + } + } + }); + } }, JSXOpeningElement(jsxOpeningElementPath) { if ( From f8b60e2776453f57ce24c80d4d70d21ebbb67204 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Fri, 22 Sep 2023 16:14:56 +0530 Subject: [PATCH 04/15] feat: moved create components to boot time --- packages/react/src/StyledProvider.tsx | 3 +-- packages/react/src/createComponents.ts | 5 ++-- packages/react/src/createConfig.ts | 7 ++---- packages/react/src/styled.tsx | 33 ++++++++++++++++---------- packages/react/src/types.ts | 14 +++++------ 5 files changed, 32 insertions(+), 30 deletions(-) diff --git a/packages/react/src/StyledProvider.tsx b/packages/react/src/StyledProvider.tsx index de05668b5..1ead13298 100644 --- a/packages/react/src/StyledProvider.tsx +++ b/packages/react/src/StyledProvider.tsx @@ -6,7 +6,6 @@ import type { COLORMODES } from './types'; import { platformSpecificSpaceUnits } from './utils'; import { createGlobalStylesWeb } from './createGlobalStylesWeb'; import { createGlobalStyles } from './createGlobalStyles'; -import { resolveComponentThemes } from './createConfig'; type Config = any; let colorModeSet = false; @@ -99,7 +98,7 @@ export const StyledProvider: React.FC<{ return { config: { ...currentConfig, - components: resolveComponentThemes(currentConfig, components), + components, }, globalStyle: globalStyleMap, }; diff --git a/packages/react/src/createComponents.ts b/packages/react/src/createComponents.ts index 2dc28967f..c780939ad 100644 --- a/packages/react/src/createComponents.ts +++ b/packages/react/src/createComponents.ts @@ -1,7 +1,8 @@ +import { resolveComponentThemes } from './createConfig'; import type { CreateComponents } from './types'; export const createComponents = >( components: CreateComponents -) => { - return components; +): CreateComponents => { + return resolveComponentThemes({}, components); }; diff --git a/packages/react/src/createConfig.ts b/packages/react/src/createConfig.ts index 02adf124b..24433c1fa 100644 --- a/packages/react/src/createConfig.ts +++ b/packages/react/src/createConfig.ts @@ -102,7 +102,6 @@ export const resolveComponentThemes = (config: any, components: any) => { ); } else { GluestackStyleSheet.update(component.BUILD_TIME_PARAMS?.orderedResolved); - GluestackStyleSheet.inject(component.BUILD_TIME_PARAMS?.toBeInjected); newComponents[componentName] = component; } }); @@ -128,10 +127,8 @@ const resolveTheme = ( ); return { - BUILD_TIME_PARAMS: { - styledIds, - verbosedStyleIds, - }, + styledIds, + verbosedStyleIds, theme: versboseComponentTheme, }; }; diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx index 32a1cbea0..6585dce1e 100644 --- a/packages/react/src/styled.tsx +++ b/packages/react/src/styled.tsx @@ -1047,19 +1047,26 @@ export function verboseStyled( ); // @ts-ignore theme.props = deepMerge(theme.props, EXTENDED_THEME?.theme?.props); - - // Merge of Extended Config Style ID's with Component Style ID's - deepMergeArray( - styleIds, - CONFIG?.components?.[`${componentName}`]?.BUILD_TIME_PARAMS - ?.verbosedStyleIds - ); - // Injecting Extended StyleSheet from Config - orderedCSSIds = [ - ...orderedCSSIds, - ...CONFIG?.components?.[`${componentName}`]?.BUILD_TIME_PARAMS - ?.styledIds, - ]; + if (Object.keys(EXTENDED_THEME?.BUILD_TIME_PARAMS ?? {}).length > 0) { + const EXTENDED_THEME_BUILD_TIME_PARAMS = + EXTENDED_THEME?.BUILD_TIME_PARAMS; + deepMergeArray( + styleIds, + EXTENDED_THEME_BUILD_TIME_PARAMS?.verbosedStyleIds + ); + GluestackStyleSheet.inject( + EXTENDED_THEME_BUILD_TIME_PARAMS?.toBeInjected + ); + } else { + // Merge of Extended Config Style ID's with Component Style ID's + deepMergeArray(styleIds, EXTENDED_THEME?.verbosedStyleIds); + const extendedStylesToBeInjected = GluestackStyleSheet.resolve( + EXTENDED_THEME?.styledIds, + CONFIG, + componentExtendedConfig + ); + GluestackStyleSheet.inject(extendedStylesToBeInjected); + } } //@ts-ignore diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts index 1752aa696..54adebe15 100644 --- a/packages/react/src/types.ts +++ b/packages/react/src/types.ts @@ -861,14 +861,12 @@ export type ExtendedTheme = ITheme< ViewProps | ImageProps | TextProps >; -// export type CreateStyle = { -// // theme: Component['theme'] & -// // ITheme; -// // componentConfig?: Omit; -// theme: ITheme; -// componentConfig?: IComponentStyleConfig; -// }; +export type CreateStyle = { + theme: Component & + ITheme; + componentConfig?: Omit; +}; export type CreateComponents = { - [key in keyof Component]: Component[key]; // CreateStyle; + [key in keyof Component]: Component[key]; }; From ea3ad845feb8702a9d56620a4d22ab955c4f7e98 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Fri, 22 Sep 2023 16:15:17 +0530 Subject: [PATCH 05/15] fix: refactor code --- .../babel-plugin-styled-resolver/src/index.js | 559 +++++++----------- 1 file changed, 218 insertions(+), 341 deletions(-) diff --git a/packages/babel-plugin-styled-resolver/src/index.js b/packages/babel-plugin-styled-resolver/src/index.js index 1dd1b9834..2a005fd37 100644 --- a/packages/babel-plugin-styled-resolver/src/index.js +++ b/packages/babel-plugin-styled-resolver/src/index.js @@ -241,13 +241,96 @@ function getConfig(configPath) { } } -function getBuildTimeParams(theme, componentConfig, extendedConfig) {} +function getBuildTimeParams( + theme, + componentConfig, + extendedConfig, + outputLibrary, + platform, + type +) { + let mergedPropertyConfig = { + ...ConfigDefault?.propertyTokenMap, + ...propertyTokenMap, + }; + let componentExtendedConfig = merge( + {}, + { + ...ConfigDefault, + propertyTokenMap: { ...mergedPropertyConfig }, + } + ); + + if (theme && Object.keys(theme).length > 0) { + const verbosedTheme = convertStyledToStyledVerbosed(theme); + + let componentHash = stableHash({ + ...theme, + ...componentConfig, + }); + + if (outputLibrary) { + componentHash = outputLibrary + '-' + componentHash; + } + + const { styledIds, verbosedStyleIds } = updateOrderUnResolvedMap( + verbosedTheme, + componentHash, + type, + componentConfig, + BUILD_TIME_GLUESTACK_STYLESHEET, + platform + ); + + const toBeInjected = BUILD_TIME_GLUESTACK_STYLESHEET.resolve( + styledIds, + componentExtendedConfig, + {} + ); + + const current_global_map = BUILD_TIME_GLUESTACK_STYLESHEET.getStyleMap(); + + const orderedResolvedTheme = []; + + current_global_map?.forEach((styledResolved) => { + if (styledIds.includes(styledResolved?.meta?.cssId)) { + orderedResolvedTheme.push(styledResolved); + } + }); + + const styleIdsAst = generateObjectAst(verbosedStyleIds); + + const toBeInjectedAst = generateObjectAst(toBeInjected); -function getSurroundingCharacters(string, index) { - let start = Math.max(0, index - 5); - let end = Math.min(string.length, index + 6); - return string.slice(start, end); + const orderedResolvedAst = generateArrayAst(orderedResolvedTheme); + + const orderedStyleIdsArrayAst = types.arrayExpression( + styledIds?.map((cssId) => types.stringLiteral(cssId)) + ); + + const resultParamsNode = types.objectExpression([ + types.objectProperty( + types.stringLiteral('orderedResolved'), + orderedResolvedAst + ), + types.objectProperty( + types.stringLiteral('toBeInjected'), + toBeInjectedAst + ), + types.objectProperty( + types.stringLiteral('styledIds'), + orderedStyleIdsArrayAst + ), + types.objectProperty( + types.stringLiteral('verbosedStyleIds'), + styleIdsAst + ), + ]); + return resultParamsNode; + } + return null; } + function getExportedConfigFromFileString(fileData) { if (!fileData) { return {}; @@ -396,6 +479,48 @@ function getIdentifiersObjectFromAstNode(node) { ); } +function generateObjectAst(obj) { + let properties = Object.entries(obj).map(([key, value]) => { + if (typeof value === 'undefined') { + return; + } else if (typeof value === 'object' && !Array.isArray(value)) { + return types.objectProperty( + types.stringLiteral(key), + generateObjectAst(value) + ); + } else if (typeof value === 'object' && Array.isArray(value)) { + let elements = value.map((obj) => { + if (typeof obj === 'string') { + return types.stringLiteral(obj); + } else { + return generateObjectAst(obj); + } + }); + return types.objectProperty( + types.stringLiteral(key), + types.arrayExpression(elements) + ); + } else if (typeof value === 'boolean') { + return types.objectProperty( + types.stringLiteral(key), + types.booleanLiteral(value) + ); + } else { + return types.objectProperty( + types.stringLiteral(key), + typeof value === 'number' + ? types.numericLiteral(value) + : types.stringLiteral(value) + ); + } + }); + + return types.objectExpression(properties.filter((property) => property)); +} +function generateArrayAst(arr) { + return types.arrayExpression(arr.map((obj) => generateObjectAst(obj))); +} + function isImportedFromLibrary(libraries, importName) { if (libraries.includes(importName)) { return true; @@ -427,41 +552,6 @@ let ConfigDefault = CONFIG; module.exports = function (b) { const { types: t } = b; - function generateObjectAst(obj) { - let properties = Object.entries(obj).map(([key, value]) => { - if (typeof value === 'undefined') { - return; - } else if (typeof value === 'object' && !Array.isArray(value)) { - return t.objectProperty(t.stringLiteral(key), generateObjectAst(value)); - } else if (typeof value === 'object' && Array.isArray(value)) { - let elements = value.map((obj) => { - if (typeof obj === 'string') { - return t.stringLiteral(obj); - } else { - return generateObjectAst(obj); - } - }); - return t.objectProperty( - t.stringLiteral(key), - t.arrayExpression(elements) - ); - } else if (typeof value === 'boolean') { - return t.objectProperty(t.stringLiteral(key), t.booleanLiteral(value)); - } else { - return t.objectProperty( - t.stringLiteral(key), - typeof value === 'number' - ? t.numericLiteral(value) - : t.stringLiteral(value) - ); - } - }); - - return t.objectExpression(properties.filter((property) => property)); - } - function generateArrayAst(arr) { - return t.arrayExpression(arr.map((obj) => generateObjectAst(obj))); - } function checkWebFileExists(filePath) { if (filePath.includes('node_modules')) { return false; @@ -610,26 +700,34 @@ module.exports = function (b) { } }, CallExpression(callExpressionPath) { - if ( - callExpressionPath.node.callee.name === styledAliasImportedName || - callExpressionPath.node.callee.name === styledImportName - ) { - let componentName = callExpressionPath?.parent?.id?.name; - - if (componentName) { - guessingStyledComponents.push(componentName); - } - callExpressionPath.traverse({ - ObjectProperty(ObjectPath) { - if (t.isIdentifier(ObjectPath.node.value)) { - if (ObjectPath.node.value.name === 'undefined') { - ObjectPath.remove(); + if (isValidConfig) { + const calleeName = callExpressionPath.node.callee.name; + if ( + calleeName === styledAliasImportedName || + calleeName === styledImportName || + calleeName === createComponentsImportedName || + calleeName === createStyleImportedName + ) { + callExpressionPath.traverse({ + ObjectProperty(ObjectPath) { + if (t.isIdentifier(ObjectPath.node.value)) { + if (ObjectPath.node.value.name === 'undefined') { + ObjectPath.remove(); + } } - } - }, - }); + }, + }); + } + if ( + calleeName === styledAliasImportedName || + calleeName === styledImportName + ) { + let componentName = callExpressionPath?.parent?.id?.name; + + if (componentName) { + guessingStyledComponents.push(componentName); + } - if (isValidConfig) { let args = callExpressionPath.node.arguments; let componentThemeNode = args[1]; @@ -666,89 +764,16 @@ module.exports = function (b) { extendedThemeNode.properties.push(tempPropertyResolverNode); } - // getExportedConfigFromFileString(ConfigDefault); - let mergedPropertyConfig = { - ...ConfigDefault?.propertyTokenMap, - ...propertyTokenMap, - }; - let componentExtendedConfig = merge( - {}, - { - ...ConfigDefault, - propertyTokenMap: { ...mergedPropertyConfig }, - }, - ExtendedConfig + const resultParamsNode = getBuildTimeParams( + theme, + componentConfig, + ExtendedConfig, + outputLibrary, + platform, + 'boot' ); - if (theme && Object.keys(theme).length > 0) { - const verbosedTheme = convertStyledToStyledVerbosed(theme); - - let componentHash = stableHash({ - ...theme, - ...componentConfig, - ...ExtendedConfig, - }); - - if (outputLibrary) { - componentHash = outputLibrary + '-' + componentHash; - } - - const { styledIds, verbosedStyleIds } = - updateOrderUnResolvedMap( - verbosedTheme, - componentHash, - 'boot', - componentConfig, - BUILD_TIME_GLUESTACK_STYLESHEET, - platform - ); - - const toBeInjected = BUILD_TIME_GLUESTACK_STYLESHEET.resolve( - styledIds, - componentExtendedConfig, - ExtendedConfig - ); - - const current_global_map = - BUILD_TIME_GLUESTACK_STYLESHEET.getStyleMap(); - - const orderedResolvedTheme = []; - - current_global_map?.forEach((styledResolved) => { - if (styledIds.includes(styledResolved?.meta?.cssId)) { - orderedResolvedTheme.push(styledResolved); - } - }); - - let styleIdsAst = generateObjectAst(verbosedStyleIds); - - let toBeInjectedAst = generateObjectAst(toBeInjected); - - let orderedResolvedAst = generateArrayAst(orderedResolvedTheme); - - let orderedStyleIdsArrayAst = t.arrayExpression( - styledIds?.map((cssId) => t.stringLiteral(cssId)) - ); - - let resultParamsNode = t.objectExpression([ - t.objectProperty( - t.stringLiteral('orderedResolved'), - orderedResolvedAst - ), - t.objectProperty( - t.stringLiteral('toBeInjected'), - toBeInjectedAst - ), - t.objectProperty( - t.stringLiteral('styledIds'), - orderedStyleIdsArrayAst - ), - t.objectProperty( - t.stringLiteral('verbosedStyleIds'), - styleIdsAst - ), - ]); - + if (resultParamsNode) { while (args.length < 4) { args.push(t.objectExpression([])); } @@ -779,19 +804,7 @@ module.exports = function (b) { // console.log('final', generate(path.node).code); // console.log('\n >>>>>>>>>>>>>>>>>>>>>\n\n'); } - } - if (callExpressionPath.node.callee.name === createStyleImportedName) { - callExpressionPath.traverse({ - ObjectProperty(ObjectPath) { - if (t.isIdentifier(ObjectPath.node.value)) { - if (ObjectPath.node.value.name === 'undefined') { - ObjectPath.remove(); - } - } - }, - }); - - if (isValidConfig) { + if (calleeName === createStyleImportedName) { let args = callExpressionPath.node.arguments; let componentThemeNode = args[0]; @@ -806,87 +819,16 @@ module.exports = function (b) { let theme = getObjectFromAstNode(componentThemeNode); let componentConfig = getObjectFromAstNode(componentConfigNode); - // getExportedConfigFromFileString(ConfigDefault); - let mergedPropertyConfig = { - ...ConfigDefault?.propertyTokenMap, - ...propertyTokenMap, - }; - let componentExtendedConfig = merge( + const resultParamsNode = getBuildTimeParams( + theme, + componentConfig, {}, - { - ...ConfigDefault, - propertyTokenMap: { ...mergedPropertyConfig }, - } + outputLibrary, + platform, + 'extended' ); - if (theme && Object.keys(theme).length > 0) { - const verbosedTheme = convertStyledToStyledVerbosed(theme); - - let componentHash = stableHash({ - ...theme, - ...componentConfig, - }); - - if (outputLibrary) { - componentHash = outputLibrary + '-' + componentHash; - } - - const { styledIds, verbosedStyleIds } = - updateOrderUnResolvedMap( - verbosedTheme, - componentHash, - 'extended', - componentConfig, - BUILD_TIME_GLUESTACK_STYLESHEET, - platform - ); - - const toBeInjected = BUILD_TIME_GLUESTACK_STYLESHEET.resolve( - styledIds, - componentExtendedConfig, - {} - ); - - const current_global_map = - BUILD_TIME_GLUESTACK_STYLESHEET.getStyleMap(); - - const orderedResolvedTheme = []; - - current_global_map?.forEach((styledResolved) => { - if (styledIds.includes(styledResolved?.meta?.cssId)) { - orderedResolvedTheme.push(styledResolved); - } - }); - - let styleIdsAst = generateObjectAst(verbosedStyleIds); - - let toBeInjectedAst = generateObjectAst(toBeInjected); - - let orderedResolvedAst = generateArrayAst(orderedResolvedTheme); - - let orderedStyleIdsArrayAst = t.arrayExpression( - styledIds?.map((cssId) => t.stringLiteral(cssId)) - ); - - let resultParamsNode = t.objectExpression([ - t.objectProperty( - t.stringLiteral('orderedResolved'), - orderedResolvedAst - ), - t.objectProperty( - t.stringLiteral('toBeInjected'), - toBeInjectedAst - ), - t.objectProperty( - t.stringLiteral('styledIds'), - orderedStyleIdsArrayAst - ), - t.objectProperty( - t.stringLiteral('verbosedStyleIds'), - styleIdsAst - ), - ]); - + if (resultParamsNode) { while (args.length < 3) { args.push(t.objectExpression([])); } @@ -898,121 +840,56 @@ module.exports = function (b) { } } } - } - if ( - callExpressionPath.node.callee.name === createComponentsImportedName - ) { - callExpressionPath.traverse({ - ObjectProperty(ObjectPath) { - if (t.isIdentifier(ObjectPath.node.value)) { - if (ObjectPath.node.value.name === 'undefined') { - ObjectPath.remove(); - } - } + if (calleeName === createComponentsImportedName) { + /* + extended theme components AST + { + box: { + theme: {}, }, - }); - const fnArgPropeties = - callExpressionPath.node.arguments[0].properties; - fnArgPropeties.forEach((property) => { - const { themeNode, componentConfigNode } = - findThemeAndComponentConfig(property.value.properties); - - if (isValidConfig) { - let theme = themeNode - ? getObjectFromAstNode(themeNode?.value) - : {}; - let componentConfig = componentConfigNode - ? getObjectFromAstNode(componentConfigNode?.value) - : {}; - - let mergedPropertyConfig = { - ...ConfigDefault?.propertyTokenMap, - ...propertyTokenMap, - }; - let componentExtendedConfig = merge( - {}, - { - ...ConfigDefault, - propertyTokenMap: { ...mergedPropertyConfig }, - } - ); - - if (theme && Object.keys(theme).length > 0) { - const verbosedTheme = convertStyledToStyledVerbosed(theme); - - let componentHash = stableHash({ - ...theme, - ...componentConfig, - }); - - if (outputLibrary) { - componentHash = outputLibrary + '-' + componentHash; - } - - const { styledIds, verbosedStyleIds } = - updateOrderUnResolvedMap( - verbosedTheme, - componentHash, - 'extended', - componentConfig, - BUILD_TIME_GLUESTACK_STYLESHEET, - platform - ); - - const toBeInjected = BUILD_TIME_GLUESTACK_STYLESHEET.resolve( - styledIds, - componentExtendedConfig, - {} - ); - - const current_global_map = - BUILD_TIME_GLUESTACK_STYLESHEET.getStyleMap(); - - const orderedResolvedTheme = []; - - current_global_map?.forEach((styledResolved) => { - if (styledIds.includes(styledResolved?.meta?.cssId)) { - orderedResolvedTheme.push(styledResolved); - } - }); - - let styleIdsAst = generateObjectAst(verbosedStyleIds); - - let toBeInjectedAst = generateObjectAst(toBeInjected); - - let orderedResolvedAst = generateArrayAst(orderedResolvedTheme); - - let orderedStyleIdsArrayAst = t.arrayExpression( - styledIds?.map((cssId) => t.stringLiteral(cssId)) + button: { + theme: {}, + }, + } + */ + const extendedThemeComponents = + callExpressionPath.node.arguments[0].properties; + extendedThemeComponents.forEach((property) => { + if ( + !t.isIdentifier(property.value) && + !t.isTemplateLiteral(property.value) && + !t.isConditionalExpression(property.value) + ) { + const { themeNode, componentConfigNode } = + findThemeAndComponentConfig(property.value.properties); + + let theme = themeNode + ? getObjectFromAstNode(themeNode?.value) + : {}; + let componentConfig = componentConfigNode + ? getObjectFromAstNode(componentConfigNode?.value) + : {}; + + const resultParamsNode = getBuildTimeParams( + theme, + componentConfig, + {}, + outputLibrary, + platform, + 'extended' ); - let resultParamsNode = t.objectExpression([ - t.objectProperty( - t.stringLiteral('orderedResolved'), - orderedResolvedAst - ), - t.objectProperty( - t.stringLiteral('toBeInjected'), - toBeInjectedAst - ), - t.objectProperty( - t.stringLiteral('styledIds'), - orderedStyleIdsArrayAst - ), - t.objectProperty( - t.stringLiteral('verbosedStyleIds'), - styleIdsAst - ), - ]); - property.value.properties.push( - t.objectProperty( - t.stringLiteral('BUILD_TIME_PARAMS'), - resultParamsNode - ) - ); + if (resultParamsNode) { + property.value.properties.push( + t.objectProperty( + t.stringLiteral('BUILD_TIME_PARAMS'), + resultParamsNode + ) + ); + } } - } - }); + }); + } } }, JSXOpeningElement(jsxOpeningElementPath) { From ce613b2d1a04bd7bc9748e28948ccad104cbaab6 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Fri, 22 Sep 2023 17:20:49 +0530 Subject: [PATCH 06/15] fix: typings --- packages/react/src/createComponents.ts | 2 +- packages/react/src/createStyle.ts | 5 ++++- packages/react/src/types.ts | 16 ++++++++-------- 3 files changed, 13 insertions(+), 10 deletions(-) diff --git a/packages/react/src/createComponents.ts b/packages/react/src/createComponents.ts index c780939ad..24d254196 100644 --- a/packages/react/src/createComponents.ts +++ b/packages/react/src/createComponents.ts @@ -1,7 +1,7 @@ import { resolveComponentThemes } from './createConfig'; import type { CreateComponents } from './types'; -export const createComponents = >( +export const createComponents = ( components: CreateComponents ): CreateComponents => { return resolveComponentThemes({}, components); diff --git a/packages/react/src/createStyle.ts b/packages/react/src/createStyle.ts index 9f96ad57d..72b081c85 100644 --- a/packages/react/src/createStyle.ts +++ b/packages/react/src/createStyle.ts @@ -12,5 +12,8 @@ export const createStyle = ( BUILD_TIME_PARAMS, }; - return createdStyles; + return createdStyles as { + theme: T & ITheme; + componentConfig?: Omit; + }; }; diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts index 54adebe15..7bc99cd17 100644 --- a/packages/react/src/types.ts +++ b/packages/react/src/types.ts @@ -861,12 +861,12 @@ export type ExtendedTheme = ITheme< ViewProps | ImageProps | TextProps >; -export type CreateStyle = { - theme: Component & - ITheme; - componentConfig?: Omit; -}; - -export type CreateComponents = { - [key in keyof Component]: Component[key]; +// export type CreateStyle = { +// theme: Component & +// ITheme; +// componentConfig?: Omit; +// }; + +export type CreateComponents = { + [key in keyof T]: T[key]; }; From 4ded93e86a8888874271af1cbead2a6ae61c7581 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Fri, 22 Sep 2023 17:23:58 +0530 Subject: [PATCH 07/15] v0.2.52-alpha.0 --- 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 fd9c7fe33..780afbf2c 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.51", + "version": "0.2.52-alpha.0", "keywords": [ "React Native", "Next.js", From 356de0c0c1a3b12d994304a3da11d5e7a57e63d2 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Sat, 23 Sep 2023 12:52:16 +0530 Subject: [PATCH 08/15] fix: decendants resolution for extended theme --- packages/react/src/createConfig.ts | 2 +- packages/react/src/updateOrderUnResolvedMap.ts | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/react/src/createConfig.ts b/packages/react/src/createConfig.ts index 24433c1fa..9daff879e 100644 --- a/packages/react/src/createConfig.ts +++ b/packages/react/src/createConfig.ts @@ -109,7 +109,7 @@ export const resolveComponentThemes = (config: any, components: any) => { return newComponents; }; -const resolveTheme = ( +export const resolveTheme = ( componentTheme: {}, _config: any, extendedConfig?: any diff --git a/packages/react/src/updateOrderUnResolvedMap.ts b/packages/react/src/updateOrderUnResolvedMap.ts index 97ccfbb9d..d271f8dfe 100644 --- a/packages/react/src/updateOrderUnResolvedMap.ts +++ b/packages/react/src/updateOrderUnResolvedMap.ts @@ -21,7 +21,10 @@ export function updateOrderUnResolvedMap( platform: string = '' ) { const prefixClassName = declarationType === 'inline' ? 'gs' : ''; - const shouldGuessDescendants = declarationType === 'inline' ? true : false; + const shouldGuessDescendants = + declarationType === 'inline' || declarationType === 'extended' + ? true + : false; const unresolvedTheme = styledToStyledResolved(theme, [], {}, false); const orderedUnResolvedTheme = styledResolvedToOrderedSXResolved(unresolvedTheme); From e04546277d495f72bdf1652e8060201ce5129e35 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Sat, 23 Sep 2023 12:53:11 +0530 Subject: [PATCH 09/15] v0.2.52-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 780afbf2c..0e199a63c 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.52-alpha.0", + "version": "0.2.52-alpha.1", "keywords": [ "React Native", "Next.js", From 463910ec6ce05a9ab1573565dea265af0b1a7ca5 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Mon, 25 Sep 2023 14:39:34 +0530 Subject: [PATCH 10/15] fix: extended theme default props --- packages/react/src/styled.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx index 041575e60..115d5cc54 100644 --- a/packages/react/src/styled.tsx +++ b/packages/react/src/styled.tsx @@ -1041,12 +1041,14 @@ export function verboseStyled( theme.variants, EXTENDED_THEME?.theme?.variants ); - theme.defaultProps = deepMerge( + //@ts-ignore + theme.baseStyle.props = deepMerge( theme.defaultProps, - EXTENDED_THEME?.props + EXTENDED_THEME?.theme?.baseStyle.props ); - // @ts-ignore - theme.props = deepMerge(theme.props, EXTENDED_THEME?.theme?.props); + + //@ts-ignore + Object.assign(themeDefaultProps, theme?.baseStyle?.props); if (Object.keys(EXTENDED_THEME?.BUILD_TIME_PARAMS ?? {}).length > 0) { const EXTENDED_THEME_BUILD_TIME_PARAMS = EXTENDED_THEME?.BUILD_TIME_PARAMS; From a2db3914657cad72f0660ee4a22e333ee0623720 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Mon, 25 Sep 2023 15:41:14 +0530 Subject: [PATCH 11/15] v0.2.52-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 0e199a63c..16aff81b7 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.52-alpha.1", + "version": "0.2.52-alpha.2", "keywords": [ "React Native", "Next.js", From 5c2ca872c028a4cb4782be4f11cfaf5ce4c7258e Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Mon, 25 Sep 2023 18:23:32 +0530 Subject: [PATCH 12/15] fix: create components typings --- packages/react/src/createComponents.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/react/src/createComponents.ts b/packages/react/src/createComponents.ts index 24d254196..8756217db 100644 --- a/packages/react/src/createComponents.ts +++ b/packages/react/src/createComponents.ts @@ -1,8 +1,5 @@ import { resolveComponentThemes } from './createConfig'; -import type { CreateComponents } from './types'; -export const createComponents = ( - components: CreateComponents -): CreateComponents => { +export const createComponents = (components: T): T => { return resolveComponentThemes({}, components); }; From bad5a7dff4ff009848e02f5c5f4bf9bb5633411d Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Mon, 25 Sep 2023 18:24:34 +0530 Subject: [PATCH 13/15] v0.2.52-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 16aff81b7..2fe8a6402 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.52-alpha.2", + "version": "0.2.52-alpha.3", "keywords": [ "React Native", "Next.js", From 0d5e7e3883dfedd6dbc663d10d24ff0a8bdfefbb Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Mon, 25 Sep 2023 18:55:06 +0530 Subject: [PATCH 14/15] v0.2.52-alpha.4 --- 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 2fe8a6402..a6a5473cf 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.52-alpha.3", + "version": "0.2.52-alpha.4", "keywords": [ "React Native", "Next.js", From 4c5df7eb8b59226e2bddbb5018ed993de714d985 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Mon, 25 Sep 2023 19:00:30 +0530 Subject: [PATCH 15/15] fix: create style typings --- packages/react/src/createStyle.ts | 12 +++++++++--- packages/react/src/types.ts | 6 +++--- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/packages/react/src/createStyle.ts b/packages/react/src/createStyle.ts index 72b081c85..8db8b45b3 100644 --- a/packages/react/src/createStyle.ts +++ b/packages/react/src/createStyle.ts @@ -1,8 +1,12 @@ import type { ViewProps, ImageProps, TextProps } from 'react-native'; -import type { IComponentStyleConfig, ITheme } from './types'; +import type { + IComponentStyleConfig, + ITheme, + UnionToIntersection, +} from './types'; export const createStyle = ( - theme: T & ITheme, + theme: T | ITheme, componentConfig?: Omit, BUILD_TIME_PARAMS?: any ) => { @@ -13,7 +17,9 @@ export const createStyle = ( }; return createdStyles as { - theme: T & ITheme; + theme: UnionToIntersection< + T | ITheme + >; componentConfig?: Omit; }; }; diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts index 7bc99cd17..7d60ad7fc 100644 --- a/packages/react/src/types.ts +++ b/packages/react/src/types.ts @@ -767,9 +767,9 @@ export type RNStyles = TokenizedRNStyleProps< > >; -type UnionToIntersection = (U extends any ? (k: U) => void : never) extends ( - k: infer I -) => void +export type UnionToIntersection = ( + U extends any ? (k: U) => void : never +) extends (k: infer I) => void ? I : never;