From 21198a134e4154e2d0f31650e5e2d43fe70defc1 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Fri, 1 Sep 2023 18:12:41 +0530 Subject: [PATCH 1/3] fix: babel plugin api --- example/ui-examples-babel/webpack.config.js | 4 +- .../babel-plugin-styled-resolver/src/index.js | 254 ++++++++++-------- 2 files changed, 143 insertions(+), 115 deletions(-) diff --git a/example/ui-examples-babel/webpack.config.js b/example/ui-examples-babel/webpack.config.js index edd89fd33..61343d616 100644 --- a/example/ui-examples-babel/webpack.config.js +++ b/example/ui-examples-babel/webpack.config.js @@ -6,7 +6,7 @@ const findWorkspaceRoot = require('find-yarn-workspace-root'); // Find the workspace root, this can be replaced with `find-yarn-workspace-root` // const workspaceRoot = path.resolve(__dirname, "../../.."); -const workspaceRoot = findWorkspaceRoot(__dirname); +// const workspaceRoot = findWorkspaceRoot(__dirname); const styledRoot = path.resolve(__dirname, '../../packages/react/src'); @@ -14,7 +14,7 @@ const animationPluginRoot = path.resolve( __dirname, '../../packages/animation-plugin/src' ); -const node_modules = path.join(workspaceRoot, 'node_modules'); +const node_modules = path.join(__dirname, '../../node_modules'); // const designSystem = path.resolve(__dirname, "../../../glustack-design-system"); module.exports = async function (env, argv) { const config = await createExpoWebpackConfigAsync(env, argv); diff --git a/packages/babel-plugin-styled-resolver/src/index.js b/packages/babel-plugin-styled-resolver/src/index.js index cba7dd7fb..5095daaea 100644 --- a/packages/babel-plugin-styled-resolver/src/index.js +++ b/packages/babel-plugin-styled-resolver/src/index.js @@ -338,6 +338,30 @@ function getIdentifiersObjectFromAstNode(node) { ); } +function isStyledImportedFromLibrary(styled, importName) { + if (styled.includes(importName)) { + return true; + } +} + +function isStyledImportFromAbsolutePath(styled, importName) { + for (const styledPath of styled) { + const filePath = styledPath.split('/'); + filePath.pop(); + + const absoluteStyledImportPath = path.resolve( + filePath.join('/'), + importName + ); + + if (importName === absoluteStyledImportPath) { + return true; + } + } + + return false; +} + const CONFIG = getExportedConfigFromFileString(getConfig()); let ConfigDefault = CONFIG; @@ -397,28 +421,22 @@ module.exports = function (b) { let tempPropertyResolverNode; let isValidConfig = true; let platform = 'all'; - let sourceFileName = IMPORT_NAME; let currentFileName = 'file not found!'; let configPath; - let libraryName = '@gluestack-style/react'; - let uiLibraryName = ''; let outputLibrary; let componentSXProp; let componentUtilityProps; - let uiLibraryPath; - let guessingStyledComponents = []; + const guessingStyledComponents = []; + const styled = ['@gluestack-style/react']; + const components = ['@gluestack-ui/themed']; return { name: 'ast-transform', // not required visitor: { ImportDeclaration(importPath, state) { - sourceFileName = state?.opts?.filename || IMPORT_NAME; currentFileName = state.file.opts.filename; styledAlias = state?.opts?.styledAlias; - libraryName = state?.opts?.libraryName || libraryName; outputLibrary = state?.opts?.outputLibrary || outputLibrary; - uiLibraryName = state?.opts?.uiLibraryName || uiLibraryName; - uiLibraryPath = state?.opts?.uiLibraryPath || uiLibraryPath; if (state?.opts?.configPath) { configPath = state?.opts?.configPath; @@ -452,17 +470,19 @@ module.exports = function (b) { } } - let filePath = state.file.opts.filename.split('/'); - filePath.pop(); + if (state?.opts?.styled && Array.isArray(state?.opts?.styled)) { + styled.push(...state?.opts?.styled); + } - const absoluteStyledImportPath = path.resolve( - filePath.join('/'), - importPath.node.source.value - ); + if (state?.opts?.components && Array.isArray(state?.opts?.components)) { + components.push(...state?.opts?.components); + } + + const importName = importPath.node.source.value; if ( - importPath.node.source.value === uiLibraryName || - absoluteStyledImportPath === uiLibraryPath + isStyledImportFromAbsolutePath(components, importName) || + isStyledImportedFromLibrary(components, importName) ) { importPath.traverse({ ImportSpecifier(importSpecifierPath) { @@ -474,8 +494,8 @@ module.exports = function (b) { } if ( - importPath.node.source.value === libraryName || - absoluteStyledImportPath === sourceFileName + isStyledImportFromAbsolutePath(styled, importName) || + isStyledImportedFromLibrary(styled, importName) ) { importPath.traverse({ ImportSpecifier(importSpecifierPath) { @@ -514,116 +534,124 @@ module.exports = function (b) { let componentConfigNode = args[2] ?? t.objectExpression([]); let extendedThemeNode = args[3] ?? t.objectExpression([]); - // args[1] = t.objectExpression([]); - - let extendedThemeNodeProps = []; - if (extendedThemeNode && extendedThemeNode?.properties) { - extendedThemeNode?.properties.forEach((prop) => { - if (prop.key.name === 'propertyResolver') { - tempPropertyResolverNode = prop; - } else { - extendedThemeNodeProps.push(prop); - } - }); - extendedThemeNode.properties = extendedThemeNodeProps; - } + if ( + !( + t.isIdentifier(componentThemeNode) || + t.isIdentifier(componentConfigNode) || + t.isIdentifier(extendedThemeNode) + ) + ) { + // args[1] = t.objectExpression([]); + + let extendedThemeNodeProps = []; + if (extendedThemeNode && extendedThemeNode?.properties) { + extendedThemeNode?.properties.forEach((prop) => { + if (prop.key.name === 'propertyResolver') { + tempPropertyResolverNode = prop; + } else { + extendedThemeNodeProps.push(prop); + } + }); + extendedThemeNode.properties = extendedThemeNodeProps; + } - let theme = getObjectFromAstNode(componentThemeNode); - let ExtendedConfig = getObjectFromAstNode(extendedThemeNode); - let componentConfig = getObjectFromAstNode(componentConfigNode); + let theme = getObjectFromAstNode(componentThemeNode); + let ExtendedConfig = getObjectFromAstNode(extendedThemeNode); + let componentConfig = getObjectFromAstNode(componentConfigNode); - if (extendedThemeNode && tempPropertyResolverNode) { - extendedThemeNode.properties.push(tempPropertyResolverNode); - } + if (extendedThemeNode && tempPropertyResolverNode) { + extendedThemeNode.properties.push(tempPropertyResolverNode); + } - // getExportedConfigFromFileString(ConfigDefault); - let mergedPropertyConfig = { - ...ConfigDefault?.propertyTokenMap, - ...propertyTokenMap, - }; - let componentExtendedConfig = merge( - {}, - { - ...ConfigDefault, - propertyTokenMap: { ...mergedPropertyConfig }, - }, - ExtendedConfig - ); + // getExportedConfigFromFileString(ConfigDefault); + let mergedPropertyConfig = { + ...ConfigDefault?.propertyTokenMap, + ...propertyTokenMap, + }; + let componentExtendedConfig = merge( + {}, + { + ...ConfigDefault, + propertyTokenMap: { ...mergedPropertyConfig }, + }, + ExtendedConfig + ); - const verbosedTheme = convertStyledToStyledVerbosed(theme); + const verbosedTheme = convertStyledToStyledVerbosed(theme); - let componentHash = stableHash({ - ...theme, - ...componentConfig, - ...ExtendedConfig, - }); + let componentHash = stableHash({ + ...theme, + ...componentConfig, + ...ExtendedConfig, + }); - if (outputLibrary) { - componentHash = outputLibrary + '-' + componentHash; - } + if (outputLibrary) { + componentHash = outputLibrary + '-' + componentHash; + } - const { styledIds, verbosedStyleIds } = updateOrderUnResolvedMap( - verbosedTheme, - componentHash, - 'boot', - componentConfig, - BUILD_TIME_GLUESTACK_STYLESHEET, - platform - ); + const { styledIds, verbosedStyleIds } = updateOrderUnResolvedMap( + verbosedTheme, + componentHash, + 'boot', + componentConfig, + BUILD_TIME_GLUESTACK_STYLESHEET, + platform + ); - const toBeInjected = BUILD_TIME_GLUESTACK_STYLESHEET.resolve( - styledIds, - componentExtendedConfig, - ExtendedConfig - ); + const toBeInjected = BUILD_TIME_GLUESTACK_STYLESHEET.resolve( + styledIds, + componentExtendedConfig, + ExtendedConfig + ); - const current_global_map = - BUILD_TIME_GLUESTACK_STYLESHEET.getStyleMap(); + const current_global_map = + BUILD_TIME_GLUESTACK_STYLESHEET.getStyleMap(); - const orderedResolvedTheme = []; + const orderedResolvedTheme = []; - current_global_map?.forEach((styledResolved) => { - if (styledIds.includes(styledResolved?.meta?.cssId)) { - orderedResolvedTheme.push(styledResolved); - } - }); + current_global_map?.forEach((styledResolved) => { + if (styledIds.includes(styledResolved?.meta?.cssId)) { + orderedResolvedTheme.push(styledResolved); + } + }); - let styleIdsAst = generateObjectAst(verbosedStyleIds); + let styleIdsAst = generateObjectAst(verbosedStyleIds); - let toBeInjectedAst = generateObjectAst(toBeInjected); + let toBeInjectedAst = generateObjectAst(toBeInjected); - let orderedResolvedAst = generateArrayAst(orderedResolvedTheme); + let orderedResolvedAst = generateArrayAst(orderedResolvedTheme); - let orderedStyleIdsArrayAst = t.arrayExpression( - styledIds?.map((cssId) => t.stringLiteral(cssId)) - ); + 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 < 4) { - args.push(t.objectExpression([])); - } - if (!args[4]) { - args.push(resultParamsNode); - } else { - args[4] = resultParamsNode; + 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 < 4) { + args.push(t.objectExpression([])); + } + if (!args[4]) { + args.push(resultParamsNode); + } else { + args[4] = resultParamsNode; + } } } From d1c5a6c58db29c2e914c1c067ef1f1ab474853ff Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Fri, 1 Sep 2023 18:13:23 +0530 Subject: [PATCH 2/3] fix: dev example webpack issue --- example/ui-examples-babel/App.tsx | 57 ++++----------- example/ui-examples-babel/babel.config.js | 6 +- example/ui-examples/App.tsx | 73 ++++--------------- example/ui-examples/babel.config.js | 41 +++++------ .../core/Heading/styled-components/Root.tsx | 9 --- 5 files changed, 52 insertions(+), 134 deletions(-) diff --git a/example/ui-examples-babel/App.tsx b/example/ui-examples-babel/App.tsx index 71c134d3d..294226542 100644 --- a/example/ui-examples-babel/App.tsx +++ b/example/ui-examples-babel/App.tsx @@ -1,53 +1,22 @@ -/* eslint-disable react-native/no-inline-styles */ import React from 'react'; -import { SafeAreaView, StyleSheet } from 'react-native'; +import { View } from 'react-native'; import { config } from './gluestack-ui.config'; -import './styles'; -import { StyledProvider } from '../../packages/react'; -import { Box, Heading } from './src/core'; +import { styled, StyledProvider } from '../../packages/react'; +// import { Box, Heading } from './src/core'; -const bg = '$40'; -const abc = '$pink500'; -export default function App() { - const [hover, setHover] = React.useState(false); - const [active, setActive] = React.useState(false); +const Box = styled(View, { + bg: '$primary100', + h: '$10', + w: '$10', +}); - console.log(hover, active, '+++'); +export default function App() { return ( <> - {/* top SafeAreaView */} - - {/* bottom SafeAreaView */} - - {/* gluestack-ui provider */} - - setHover(true)} - onHoverOut={() => setHover(false)} - onPressIn={() => setActive(true)} - onPressOut={() => setActive(false)} - states={{ - hover, - active, - }} - bg={{}} - sx={{ - bg: '$red500', - }} - /> - - + {/* gluestack-ui provider */} + + + ); } - -const styles = StyleSheet.create({ - container: { - flex: 1, - overflow: 'hidden', - }, -}); diff --git a/example/ui-examples-babel/babel.config.js b/example/ui-examples-babel/babel.config.js index 3af05f17f..9c236bcc2 100644 --- a/example/ui-examples-babel/babel.config.js +++ b/example/ui-examples-babel/babel.config.js @@ -11,8 +11,10 @@ module.exports = function (api) { { configPath: path.join(__dirname, './gluestack-ui.config.ts'), configThemePath: ['theme'], - filename: path.resolve(__dirname, './src/core/styled'), - uiLibraryPath: path.resolve(__dirname, './src/core'), + styled: ['@gluestack-style/react', '../../packages/react'], + components: ['@gluesatck-ui/themed'], + // filename: path.resolve(__dirname, './src/core/styled'), + // uiLibraryPath: path.resolve(__dirname, './src/core'), }, ], [ diff --git a/example/ui-examples/App.tsx b/example/ui-examples/App.tsx index ae07d3900..73ce4b0ac 100644 --- a/example/ui-examples/App.tsx +++ b/example/ui-examples/App.tsx @@ -3,6 +3,7 @@ import React from 'react'; import { SafeAreaView, StyleSheet, + View, // View } from 'react-native'; import { GluestackUIProvider } from './gluestack-ui-components'; @@ -17,62 +18,14 @@ import { Inter_900Black, } from '@expo-google-fonts/inter'; import './styles'; +import { styled } from '@gluestack-style/react'; import HomestayPage from './kitchensink-components/HomestayPage'; -// import { styled } from '@gluestack-style/react'; -// const orderedSXResolved = [ -// { -// meta: { -// path: ['baseStyle'], -// weight: 101, -// cssId: '14kw9po-go7kdf', -// cssRuleset: -// '.gs [data-style~="14kw9po-go7kdf"] {background-color:rgba(239,68,68,1.00);height:80px;width:80px;}', -// }, -// original: { -// bg: '$red500', -// h: '$10', -// w: '$10', -// }, -// resolved: { -// backgroundColor: '#ef4444', -// height: '40px', -// width: '40px', -// }, -// }, -// ]; - -// const sxHash = '14kw9po'; - -// function injectBuildTimeSx() { -// injectComponentAndDescendantStyles(orderedSXResolved, sxHash, 'inline'); -// } - -// const styledIds = { -// component: { -// baseStyle: { -// ids: ['14kw9po-go7kdf'], -// props: {}, -// }, -// compoundVariants: [], -// variants: [], -// }, -// decendant: {}, -// }; - -// injectBuildTimeSx(); - -// const Box = styled(View, {}); - -// const Box = styled(View, { -// bg: '$primary100', -// h: '$10', -// w: '$10', -// }); - -// const ComposedButton = styled(BaseButton, { -// bg: '$red500', -// }); +const Box = styled(View, { + bg: '$primary100', + h: '$10', + w: '$10', +}); type ThemeContextType = { colorMode?: 'dark' | 'light'; @@ -122,11 +75,15 @@ export default function App() { {/* gluestack-ui provider */} - {/* - - - */} + {/* + + */} + {/* */} + {/* + */} + {/* Hello Worlddddd + Hello */} diff --git a/example/ui-examples/babel.config.js b/example/ui-examples/babel.config.js index 9631d8424..29fe2917f 100644 --- a/example/ui-examples/babel.config.js +++ b/example/ui-examples/babel.config.js @@ -6,32 +6,31 @@ module.exports = function (api) { return { presets: ['babel-preset-expo'], plugins: [ - // [ - // myBabel, - // { - // configPath: path.join(__dirname, './gluestack-ui.config.ts'), - // configThemePath: ['theme'], - // // libraryName: '@gluestack-style/react', - // filename: path.join( - // __dirname, - // './gluestack-ui-components/core/styled' - // ), - // uiLibraryPath: path.join(__dirname, './gluestack-ui-components'), - // }, - // ], + [ + myBabel, + { + configPath: path.join(__dirname, './gluestack-ui.config.ts'), + configThemePath: ['theme'], + styled: [ + '@gluestack-style/react', + path.resolve(__dirname, './gluestack-ui-components/core/styled'), + ], + 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' - ), + // ['@gluestack-style/react']: path.join( + // __dirname, + // '../../packages/react/lib/commonjs' + // ), + // ['@gluestack-style/animation-plugin']: path.join( + // __dirname, + // '../../packages/animation-plugin/src' + // ), // ['@dank-style/react']: path.join( // __dirname, // '../../packages/react/src' diff --git a/example/ui-examples/gluestack-ui-components/core/Heading/styled-components/Root.tsx b/example/ui-examples/gluestack-ui-components/core/Heading/styled-components/Root.tsx index 2579522b2..9b6b65413 100644 --- a/example/ui-examples/gluestack-ui-components/core/Heading/styled-components/Root.tsx +++ b/example/ui-examples/gluestack-ui-components/core/Heading/styled-components/Root.tsx @@ -17,62 +17,53 @@ export default styled(H1, { size: { '5xl': { //@ts-ignore - props: { as: H1 }, fontSize: '$6xl', lineHeight: '$7xl', }, '4xl': { //@ts-ignore - props: { as: H1 }, fontSize: '$5xl', lineHeight: '$6xl', }, '3xl': { //@ts-ignore - props: { as: H1 }, fontSize: '$4xl', lineHeight: '$5xl', }, '2xl': { //@ts-ignore - props: { as: H2 }, fontSize: '$3xl', lineHeight: '$3xl', }, 'xl': { //@ts-ignore - props: { as: H3 }, fontSize: '$2xl', lineHeight: '$3xl', }, 'lg': { //@ts-ignore - props: { as: H4 }, fontSize: '$xl', lineHeight: '$2xl', }, 'md': { //@ts-ignore - props: { as: H5 }, fontSize: '$lg', lineHeight: '$lg', }, 'sm': { //@ts-ignore - props: { as: H6 }, fontSize: '$md', lineHeight: '$lg', }, 'xs': { //@ts-ignore - props: { as: H6 }, fontSize: '$sm', lineHeight: '$xs', }, From c3aaa1e48d23b145b9807966a9f546b91e316c64 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Fri, 1 Sep 2023 18:18:16 +0530 Subject: [PATCH 3/3] v0.2.1 --- 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 6c311a0e2..28b10d056 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.0", + "version": "0.2.1", "description": "A gluestack-style babel plugin that transpiles your styled function calls and resolves the component styling in build time.", "keywords": [ "css-in-js",