From 41a21d15b3915a61ef82d41c84caf806582ba92a Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Wed, 7 Jun 2023 18:25:01 +0530 Subject: [PATCH 1/5] feat: adcanced docs for babel plugin --- .../advanced/BabelPlugins/index.stories.mdx | 140 +++++++++++++++++- 1 file changed, 138 insertions(+), 2 deletions(-) diff --git a/example/storybook/src/advanced/BabelPlugins/index.stories.mdx b/example/storybook/src/advanced/BabelPlugins/index.stories.mdx index 0541fec83..063485137 100644 --- a/example/storybook/src/advanced/BabelPlugins/index.stories.mdx +++ b/example/storybook/src/advanced/BabelPlugins/index.stories.mdx @@ -16,11 +16,11 @@ import { Box, AppProvider } from '@gluestack/design-system'; ### **Let us see how this Babel plugin works.** -- First, it traverses your files and tries to find `styled` imported from “@gluestack-style/react”. +- First, it traverses your files and tries to find `styled` imported from `@gluestack-style/react`. - Once it finds a declaration of `styled` it then looks for its function call. - From that function call, it fetches the component style config(2nd Parameter), component config (3rd parameter), and component extended config (4th Parameter). - Then it resolves the styling and generates the CSS rules and corresponding style ids. -- Once resolved it removes the 2nd parameter ( component style ) and adds a 5th param which is an object with ordered resolved style and component style ids that are sorted according to precedence. +- Once resolved it removes the 2nd parameter component style and adds a 5th param which is an object with ordered resolved style and component style ids that are sorted according to precedence. - Now when the components read this 5th param it straightway just passes the style id that should be applied according to the condition the component is in. Here’s a small diagram explaining how the flow works: @@ -81,3 +81,139 @@ Your code gets transpiled in the build files like this: ``` 3. Just make sure your `babel.config.js` and `gluestack-style.config.js/ts` are in the same directory. We suggest you keep both of them at the root of your app codebase. + +## Advanced + +The `@gluestack-style/babel-plugin-styled-resolver` plugin offers advanced functionality with a range of available options. These options allow you to customize the behavior of the plugin according to your specific use cases and requirements. + +- `configPath`: The `configPath` option allows you to define the path to the configuration file. This configuration file contains the aliases and tokens used by the plugin. By default, the plugin assumes that the configuration file is located in the same directory as the `babel.config.js` file. + +```js +const path = require('path'); +const gluestackStyleResolver = require('@gluestack-style/babel-plugin-styled-resolver'); + +module.exports = function (api) { + api.cache(true); + return { + presets: ['babel-preset-expo'], + plugins: [ + [ + gluestackStyleResolver, + { + configPath: path.resolve(__dirname, './gluestack-style.config.js'), // Specify the path of the config file + }, + ], + ], + }; +}; +``` + +- `configThemePath`: The `configThemePath` option provides a way to specify the path of the theme object within your configuration file. + +if your config file looks like below: + +```js +const config = { + componentPath: '/core/components', + theme: { + aliases: {}, + tokens: {}, + }, +}; +``` + +You can use the following babel config: + +```js +// babel.config.js +const path = require('path'); +const gluestackStyleResolver = require('@gluestack-style/babel-plugin-styled-resolver'); + +module.exports = function (api) { + api.cache(true); + return { + presets: ['babel-preset-expo'], + plugins: [ + [ + gluestackStyleResolver, + { + configThemePath: ['config', 'theme'], // Specify the path of the theme object in your config file + }, + ], + ], + }; +}; +``` + +- `styledAlias`: The `styledAlias` option provides the flexibility to define a custom name for the styled aliases function. This option is used to identify the function calls that need to be transformed by the plugin. By default, the plugin searches for the `styled` function. However, with the `styledAlias` option, you can specify a different name for the styled aliases function, allowing you to adapt the plugin to your specific codebase and styling conventions. + +```js +// babel.config.js +const path = require('path'); +const gluestackStyleResolver = require('@gluestack-style/babel-plugin-styled-resolver'); + +module.exports = function (api) { + api.cache(true); + return { + presets: ['babel-preset-expo'], + plugins: [ + [ + gluestackStyleResolver, + { + styledAlias: 'myStyled', // Specify your styled aliases function name if different + }, + ], + ], + }; +}; +``` + +- `libraryName`: The `libraryName` option is useful in scenarios where you are exporting the styled function from a different library. This option allows you to specify the name of the library that provides the styled function. By default, the plugin assumes that the styled function is exported from `@gluestack-style/react`. However, with the `libraryName` option, you can customize it to match the actual library name where the styled function is defined. + +```js +// babel.config.js +const path = require('path'); +const gluestackStyleResolver = require('@gluestack-style/babel-plugin-styled-resolver'); + +module.exports = function (api) { + api.cache(true); + return { + presets: ['babel-preset-expo'], + plugins: [ + [ + gluestackStyleResolver, + { + libraryName: '@gluestack-style/react', // Specify the library name from where the styled function is exported + }, + ], + ], + }; +}; +``` + +- `filename`: The filename option enables you to specify the file path of the styled function. + +```js +// babel.config.js +const path = require('path'); +const gluestackStyleResolver = require('@gluestack-style/babel-plugin-styled-resolver'); + +module.exports = function (api) { + api.cache(true); + return { + presets: ['babel-preset-expo'], + plugins: [ + [ + gluestackStyleResolver, + { + filename: path.resolve(__dirname, './core/styled'), // Specify the file path of the styled function + }, + ], + ], + }; +}; +``` + +Make sure to update the values according to your specific configuration. + +By utilizing these advanced options, you can customize the behavior of the `@gluestack-style/babel-plugin-styled-resolver` plugin to fit your specific needs. From bd48cee7b9db9ee03925c726b5644ce53bba72eb Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Wed, 7 Jun 2023 19:26:43 +0530 Subject: [PATCH 2/5] fix: transform resolution --- example/storybook/babel.config.js | 4 ++++ packages/animation-plugin/src/index.tsx | 19 ++++++++++------- packages/react/src/plugins/font-resolver.tsx | 22 +++++++++++++------- 3 files changed, 30 insertions(+), 15 deletions(-) diff --git a/example/storybook/babel.config.js b/example/storybook/babel.config.js index 6271cb2c0..3ea81068b 100644 --- a/example/storybook/babel.config.js +++ b/example/storybook/babel.config.js @@ -15,6 +15,10 @@ module.exports = function (api) { __dirname, '../../packages/react/src' ), + ['@gluestack-style/animation-plugin']: path.join( + __dirname, + '../../packages/animation-plugin/src' + ), // ['@dank-style/react']: path.join( // __dirname, diff --git a/packages/animation-plugin/src/index.tsx b/packages/animation-plugin/src/index.tsx index 034d000f8..9f2d5ab91 100644 --- a/packages/animation-plugin/src/index.tsx +++ b/packages/animation-plugin/src/index.tsx @@ -18,7 +18,11 @@ function tokenizeAnimationPropsFromConfig( tokenizedAnimatedProps: any = {} ) { for (const prop in props) { - if (animationAliases[prop]) { + if (Array.isArray(props[prop])) { + path.push(prop); + setObjectKeyValue(tokenizedAnimatedProps, path, props[prop]); + path.pop(); + } else if (animationAliases[prop]) { path.push(prop); const tokenizedValue = resolvedTokenization(props[prop], config); setObjectKeyValue(tokenizedAnimatedProps, path, tokenizedValue); @@ -126,9 +130,9 @@ export class AnimationResolver implements IStyledPlugin { styledObj, shouldUpdateConfig ); - const resolvedStyledObjectWithAnimatedProps = deepMergeObjects( - resolvedAnimatedProps, - styledObj + const resolvedStyledObjectWithAnimatedProps = deepMerge( + styledObj, + resolvedAnimatedProps ); if (shouldUpdateConfig) { @@ -205,9 +209,9 @@ export class AnimationResolver implements IStyledPlugin { variantProps, styledConfig ); - const componentStyledObject = deepMergeObjects( - styledConfig, - variantStyledObject + const componentStyledObject = deepMerge( + variantStyledObject, + styledConfig ); const animationAliases = this.styledUtils?.aliases; @@ -330,7 +334,6 @@ export class AnimationResolver implements IStyledPlugin { ); const clonedChild = React.cloneElement(child, { - ...mergedAnimatedProps, exit: mergedAnimatedProps?.[':exit'], ...restProps, }); diff --git a/packages/react/src/plugins/font-resolver.tsx b/packages/react/src/plugins/font-resolver.tsx index e2670a8af..80f71e429 100644 --- a/packages/react/src/plugins/font-resolver.tsx +++ b/packages/react/src/plugins/font-resolver.tsx @@ -251,14 +251,22 @@ export class FontResolver implements IStyledPlugin, FontPlugin { const { sx, fontWeight, fontFamily, fontStyle, ...rest } = restProps; - componentStyledObject = { - ...componentStyledObject, - fontWeight: fontWeight ?? componentStyledObject.fontWeight, - fontFamily: fontFamily ?? componentStyledObject.fontFamily, - fontStyle: fontStyle ?? componentStyledObject.fontStyle, - }; + if (fontWeight || componentStyledObject.fontWeight) { + componentStyledObject.fontWeight = + fontWeight ?? componentStyledObject.fontWeight; + } + + if (fontFamily || componentStyledObject.fontFamily) { + componentStyledObject.fontFamily = + fontFamily ?? componentStyledObject.fontFamily; + } + + if (fontStyle || componentStyledObject.fontStyle) { + componentStyledObject.fontStyle = + fontStyle ?? componentStyledObject.fontStyle; + } - const sxPropsWithThemeProps = deepMergeObjects(componentStyledObject, sx); + const sxPropsWithThemeProps = deepMerge(sx, componentStyledObject); const resolvedSxProps = this.inputMiddleWare( sxPropsWithThemeProps, From ba82768d7b8dbbc78f31984fd1a5d84c9611ae8e Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Wed, 7 Jun 2023 19:27:05 +0530 Subject: [PATCH 3/5] fix: default properties for flex --- packages/react/src/core/styled-system.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/core/styled-system.ts b/packages/react/src/core/styled-system.ts index bf8a2f943..a9f853c01 100644 --- a/packages/react/src/core/styled-system.ts +++ b/packages/react/src/core/styled-system.ts @@ -15,8 +15,8 @@ export const CSSPropertiesMap = { display: 'flex', end: 'unset', start: 'unset', - flex: 'unset', - flexDirection: 'unset', + flex: 'none', + flexDirection: 'column', flexBasis: 'unset', flexGrow: 'unset', flexShrink: 'unset', From ee9eb2f35375c61540a08919d6f18771f8abc0b8 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Wed, 7 Jun 2023 19:32:22 +0530 Subject: [PATCH 4/5] chore: update version --- example/babel-plugin-styled-resolver-expo/package.json | 6 +++--- example/expo-app/package.json | 2 +- example/next/package.json | 2 +- example/storybook/package.json | 6 +++--- packages/benchmark-next/package.json | 2 +- packages/react/CHANGELOG.md | 9 +++++++++ packages/react/package.json | 2 +- 7 files changed, 19 insertions(+), 10 deletions(-) diff --git a/example/babel-plugin-styled-resolver-expo/package.json b/example/babel-plugin-styled-resolver-expo/package.json index 04d47dbaa..c8302220f 100644 --- a/example/babel-plugin-styled-resolver-expo/package.json +++ b/example/babel-plugin-styled-resolver-expo/package.json @@ -10,7 +10,7 @@ "build:web": "expo export:web" }, "dependencies": { - "@gluestack-style/react": "^0.1.12", + "@gluestack-style/react": "^0.1.14", "expo": "~47.0.8", "expo-status-bar": "~1.4.2", "find-yarn-workspace-root": "^2.0.0" @@ -26,10 +26,10 @@ "babel-plugin-relative-path-import": "^2.0.1", "ts-loader": "~8.2.0", "typescript": "^4.6.3", - "@gluestack-style/react": "^0.1.12" + "@gluestack-style/react": "^0.1.14" }, "peerDependencies": { - "@gluestack-style/react": "^0.1.12", + "@gluestack-style/react": "^0.1.14", "react": "*", "react-dom": "*", "react-native": "*", diff --git a/example/expo-app/package.json b/example/expo-app/package.json index 50bc49145..26329ff82 100644 --- a/example/expo-app/package.json +++ b/example/expo-app/package.json @@ -11,7 +11,7 @@ }, "dependencies": { "@gluestack-style/babel-plugin-styled-resolver": "^0.1.0", - "@gluestack-style/react": "^0.1.12", + "@gluestack-style/react": "^0.1.14", "expo": "~47.0.12", "expo-status-bar": "~1.4.2", "react": "18.1.0", diff --git a/example/next/package.json b/example/next/package.json index b3512750b..fd5c4a3a2 100644 --- a/example/next/package.json +++ b/example/next/package.json @@ -23,7 +23,7 @@ "react-native-vector-icons": "^9.1.0", "react-native-vector-icons-for-web": "^0.1.7", "react-native-web-linear-gradient": "^1.1.2", - "@gluestack-style/react": "^0.1.12", + "@gluestack-style/react": "^0.1.14", "@gluestack-style/babel-plugin-styled-resolver": "^0.1.6" }, "devDependencies": { diff --git a/example/storybook/package.json b/example/storybook/package.json index 790390906..570aadcc0 100644 --- a/example/storybook/package.json +++ b/example/storybook/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "@gluestack-style/animation-plugin": "^0.1.6", - "@gluestack-style/react": "^0.1.12", + "@gluestack-style/react": "^0.1.14", "@gluestack/design-system": "latest", "@legendapp/motion": "^2.2.0", "@react-native-async-storage/async-storage": "~1.17.3", @@ -43,7 +43,7 @@ "devDependencies": { "@babel/core": "^7.19.3", "@gluestack-style/animation-plugin": "^0.1.6", - "@gluestack-style/react": "^0.1.12", + "@gluestack-style/react": "^0.1.14", "@storybook/addon-actions": "^6.5.14", "@storybook/addon-controls": "^6.5.14", "@storybook/addon-docs": "^6.5.15", @@ -69,7 +69,7 @@ "typescript": "4.9.4" }, "peerDependencies": { - "@gluestack-style/react": "^0.1.12", + "@gluestack-style/react": "^0.1.14", "react": "*", "react-dom": "*", "react-native": "*", diff --git a/packages/benchmark-next/package.json b/packages/benchmark-next/package.json index e06f7ae70..a3db5649f 100644 --- a/packages/benchmark-next/package.json +++ b/packages/benchmark-next/package.json @@ -26,7 +26,7 @@ }, "devDependencies": { "@gluestack-style/babel-plugin-styled-resolver": "^0.1.6", - "@gluestack-style/react": "^0.1.12", + "@gluestack-style/react": "^0.1.14", "@emotion/styled": "^11.3.0", "@expo/next-adapter": "^4.0.13", "@types/react": "17.0.1", diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index d522d8c10..885b0efcc 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -1,5 +1,14 @@ # @gluestack-style/react +## 0.1.14 + +### Patch Changes + +- - Fixed transform array resolution in plugins + - default properties for flex and flexDirection + + - Advanced documentation for babel plugin + ## 0.1.12 ### Patch Changes diff --git a/packages/react/package.json b/packages/react/package.json index 6e6c1a616..96c1a3012 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.1.13", + "version": "0.1.14", "keywords": [ "react", "native", From 92f3dc70c9b2d860580c93ce769c33fc0e452c53 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Wed, 7 Jun 2023 19:36:37 +0530 Subject: [PATCH 5/5] chore: update version --- example/babel-plugin-styled-resolver-expo/package.json | 6 +++--- example/expo-app/package.json | 2 +- example/next/package.json | 2 +- example/storybook/package.json | 6 +++--- packages/benchmark-next/package.json | 2 +- packages/react/CHANGELOG.md | 9 +++++++++ packages/react/package.json | 2 +- 7 files changed, 19 insertions(+), 10 deletions(-) diff --git a/example/babel-plugin-styled-resolver-expo/package.json b/example/babel-plugin-styled-resolver-expo/package.json index c8302220f..de485ecd1 100644 --- a/example/babel-plugin-styled-resolver-expo/package.json +++ b/example/babel-plugin-styled-resolver-expo/package.json @@ -10,7 +10,7 @@ "build:web": "expo export:web" }, "dependencies": { - "@gluestack-style/react": "^0.1.14", + "@gluestack-style/react": "^0.1.16", "expo": "~47.0.8", "expo-status-bar": "~1.4.2", "find-yarn-workspace-root": "^2.0.0" @@ -26,10 +26,10 @@ "babel-plugin-relative-path-import": "^2.0.1", "ts-loader": "~8.2.0", "typescript": "^4.6.3", - "@gluestack-style/react": "^0.1.14" + "@gluestack-style/react": "^0.1.16" }, "peerDependencies": { - "@gluestack-style/react": "^0.1.14", + "@gluestack-style/react": "^0.1.16", "react": "*", "react-dom": "*", "react-native": "*", diff --git a/example/expo-app/package.json b/example/expo-app/package.json index 26329ff82..d8349c3f6 100644 --- a/example/expo-app/package.json +++ b/example/expo-app/package.json @@ -11,7 +11,7 @@ }, "dependencies": { "@gluestack-style/babel-plugin-styled-resolver": "^0.1.0", - "@gluestack-style/react": "^0.1.14", + "@gluestack-style/react": "^0.1.16", "expo": "~47.0.12", "expo-status-bar": "~1.4.2", "react": "18.1.0", diff --git a/example/next/package.json b/example/next/package.json index fd5c4a3a2..db69d00e5 100644 --- a/example/next/package.json +++ b/example/next/package.json @@ -23,7 +23,7 @@ "react-native-vector-icons": "^9.1.0", "react-native-vector-icons-for-web": "^0.1.7", "react-native-web-linear-gradient": "^1.1.2", - "@gluestack-style/react": "^0.1.14", + "@gluestack-style/react": "^0.1.16", "@gluestack-style/babel-plugin-styled-resolver": "^0.1.6" }, "devDependencies": { diff --git a/example/storybook/package.json b/example/storybook/package.json index 570aadcc0..997a73ad6 100644 --- a/example/storybook/package.json +++ b/example/storybook/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "@gluestack-style/animation-plugin": "^0.1.6", - "@gluestack-style/react": "^0.1.14", + "@gluestack-style/react": "^0.1.16", "@gluestack/design-system": "latest", "@legendapp/motion": "^2.2.0", "@react-native-async-storage/async-storage": "~1.17.3", @@ -43,7 +43,7 @@ "devDependencies": { "@babel/core": "^7.19.3", "@gluestack-style/animation-plugin": "^0.1.6", - "@gluestack-style/react": "^0.1.14", + "@gluestack-style/react": "^0.1.16", "@storybook/addon-actions": "^6.5.14", "@storybook/addon-controls": "^6.5.14", "@storybook/addon-docs": "^6.5.15", @@ -69,7 +69,7 @@ "typescript": "4.9.4" }, "peerDependencies": { - "@gluestack-style/react": "^0.1.14", + "@gluestack-style/react": "^0.1.16", "react": "*", "react-dom": "*", "react-native": "*", diff --git a/packages/benchmark-next/package.json b/packages/benchmark-next/package.json index a3db5649f..e75740c88 100644 --- a/packages/benchmark-next/package.json +++ b/packages/benchmark-next/package.json @@ -26,7 +26,7 @@ }, "devDependencies": { "@gluestack-style/babel-plugin-styled-resolver": "^0.1.6", - "@gluestack-style/react": "^0.1.14", + "@gluestack-style/react": "^0.1.16", "@emotion/styled": "^11.3.0", "@expo/next-adapter": "^4.0.13", "@types/react": "17.0.1", diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index b7d5169f0..c39dc7aec 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -1,5 +1,14 @@ # @gluestack-style/react +## 0.1.16 + +### Patch Changes + +- - transform array resolution in plugin + - default style property for flex and flexDirection + + - Advanced docs for babel plugin + ## 0.1.14 ### Patch Changes diff --git a/packages/react/package.json b/packages/react/package.json index 83347be21..5f02aeaf1 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.1.15", + "version": "0.1.16", "keywords": [ "react", "native",