From 9c8425cb019466abfcadd1ddb09cdbf79058507b Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Wed, 29 Nov 2023 17:28:00 +0530 Subject: [PATCH 1/7] v1.0.2-alpha.0 --- packages/babel-plugin-styled-resolver/package.json | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/babel-plugin-styled-resolver/package.json b/packages/babel-plugin-styled-resolver/package.json index 23991565..69a666a3 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": "1.0.1", + "version": "1.0.2-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", @@ -44,7 +44,10 @@ "@babel/plugin-transform-typescript": "^7.20.2", "@babel/preset-typescript": "^7.18.6", "@babel/traverse": "^7.20.5", - "lodash.merge": "^4.6.2" + "@rollup/plugin-node-resolve": "^15.2.3", + "@rollup/plugin-typescript": "^11.1.5", + "lodash.merge": "^4.6.2", + "rollup": "^4.6.0" }, "react-native-builder-bob": { "source": "src", From 1773a58dbaea548280a6e9cf67a8a2069be28c6d Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Wed, 29 Nov 2023 18:03:15 +0530 Subject: [PATCH 2/7] v1.0.2-alpha.1 --- packages/babel-plugin-styled-resolver/package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/babel-plugin-styled-resolver/package.json b/packages/babel-plugin-styled-resolver/package.json index 69a666a3..6273aea5 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": "1.0.2-alpha.0", + "version": "1.0.2-alpha.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", @@ -14,8 +14,8 @@ "source": "src/index", "scripts": { "prepare": "yarn build", - "build": "babel src/index.js -d lib", - "dev": "babel src/index.js -d lib", + "build": "babel src/* -d lib", + "dev": "babel src/* -d lib", "clean": "rm -rf lib", "dev:web": "cd example/native && yarn web --clear" }, From 9344117df052b84257fe1b568b093059f143dbc3 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Thu, 30 Nov 2023 13:51:58 +0530 Subject: [PATCH 3/7] feat: dynamic config support --- .../src/buildConfig.js | 156 ++++++++++++++++++ .../babel-plugin-styled-resolver/src/index.js | 44 +++-- packages/react/src/styled.tsx | 4 +- 3 files changed, 193 insertions(+), 11 deletions(-) create mode 100644 packages/babel-plugin-styled-resolver/src/buildConfig.js diff --git a/packages/babel-plugin-styled-resolver/src/buildConfig.js b/packages/babel-plugin-styled-resolver/src/buildConfig.js new file mode 100644 index 00000000..214fa440 --- /dev/null +++ b/packages/babel-plugin-styled-resolver/src/buildConfig.js @@ -0,0 +1,156 @@ +/* eslint-disable no-console */ +const rollupTypescriptPlugin = require('@rollup/plugin-typescript'); +const rollup = require('rollup'); +const resolve = require('@rollup/plugin-node-resolve'); +const fs = require('fs'); +const path = require('path'); + +async function buildAndRun(rollupConfig) { + try { + await cleanup(); + const bundle = await rollup.rollup(rollupConfig); + + await bundle.write(rollupConfig.output); + } catch (err) { + console.log(err); + } +} + +function cleanup() { + return new Promise((resolve, reject) => { + if (fs.existsSync(`${process.cwd()}/.gluestack`)) { + fs.rm( + `${process.cwd()}/.gluestack`, + { recursive: true, force: true }, + (err) => { + if (err) { + reject(err); + } else { + resolve(`Removed ${process.cwd()}/.gluestack`); + } + } + ); + } else { + resolve('Preparing for build...'); + } + }); +} + +function getConfigPath() { + const isConfigJSExist = fs.existsSync( + path.join(process.cwd(), './gluestack-style.config.js') + ); + const isGlueStackUIConfigJSExist = fs.existsSync( + path.join(process.cwd(), './gluestack-ui.config.js') + ); + const isConfigTSExist = fs.existsSync( + path.join(process.cwd(), './gluestack-style.config.ts') + ); + const isGlueStackUIConfigTSExist = fs.existsSync( + path.join(process.cwd(), './gluestack-ui.config.ts') + ); + + if (isConfigJSExist) return './gluestack-style.config.js'; + if (isConfigTSExist) return './gluestack-style.config.ts'; + if (isGlueStackUIConfigJSExist) return './gluestack-ui.config.js'; + if (isGlueStackUIConfigTSExist) return './gluestack-ui.config.ts'; +} + +const globals = `const react = { + forwardRef: () => {}, + createElement: () => {}, +}; +const reactNative = { + Platform: { + select: () => {}, + }, + StyleSheet: { + create: () => {}, + }, + PixelRatio: { + getFontScale: () => {}, + }, +}; +const gluestackStyleReact = { + createConfig: (config) => { + return config; + }, + createStyle: (config) => { + return config; + }, + createComponents: (config) => { + return config; + }, +}; +const gluestackStyleAnimationResolver = { + AnimationResolver: class { + constructor() {} + }, +}; +const gluestackStyleLegendMotionAnimationDriver = { +}; +const gluestackStyleMotiAnimationDriver = { +}; +`; + +const generateRollupConfig = (config = {}) => { + const rollupConfig = { + input: getConfigPath(), + output: { + file: `./.gluestack/config-${process.ppid}.js`, // The bundled JavaScript file + format: 'iife', // iife format for Node.js + globals: { + 'react': 'react', + 'react-native': 'reactNative', + '@gluestack-style/react': 'gluestackStyleReact', + '@gluestack-style/animation-resolver': + 'gluestackStyleAnimationResolver', + '@gluestack-style/legend-motion-animation-driver': + 'gluestackStyleLegendMotionAnimationDriver', + '@gluestack-style/moti-animation-driver': + 'gluestackStyleMotiAnimationDriver', + }, + name: 'config', + banner: globals, + footer: 'module.exports = config;', + }, + plugins: [ + resolve({ + extensions: ['.js', '.ts', '.tsx', '.jsx', '.json'], // Add your custom file extensions here + }), + rollupTypescriptPlugin({ + compilerOptions: { lib: ['es5', 'es6', 'dom'], target: 'es5' }, + tsconfig: false, + // typescript: require('some-fork-of-typescript'), + }), + ], + external: [ + 'react', + 'react-native', + '@gluestack-style/react', + '@gluestack-style/animation-resolver', + '@gluestack-style/legend-motion-animation-driver', + '@gluestack-style/moti-animation-driver', + ], + ...config, + }; + return rollupConfig; +}; + +const getConfig = async (configPath) => { + const rollupConfig = generateRollupConfig(); + try { + await buildAndRun(rollupConfig); + console.log('Config built successfully!'); + const { config } = require(`${process.cwd()}/.gluestack/config-${ + process.ppid + }.js`); + return config; + } catch (err) { + console.log('Error: ', rollupConfig, err); + } +}; + +module.exports = { + getConfig, +}; diff --git a/packages/babel-plugin-styled-resolver/src/index.js b/packages/babel-plugin-styled-resolver/src/index.js index 51ee31e6..438321d7 100644 --- a/packages/babel-plugin-styled-resolver/src/index.js +++ b/packages/babel-plugin-styled-resolver/src/index.js @@ -5,6 +5,7 @@ const generate = require('@babel/generator').default; const babelPresetTypeScript = require('@babel/preset-typescript'); const traverse = require('@babel/traverse').default; const types = require('@babel/types'); +const { getConfig: buildAndGetConfig } = require('./buildConfig'); const { convertStyledToStyledVerbosed, @@ -550,10 +551,25 @@ function isImportFromAbsolutePath( return false; } -const CONFIG = getExportedConfigFromFileString(getConfig()); +let CONFIG; +const isConfigExist = fs.existsSync( + `${process.cwd()}/.gluestack/config-${process.ppid}.js` +); let ConfigDefault = CONFIG; +if (!isConfigExist) { + buildAndGetConfig() + .then((res) => { + CONFIG = res; + ConfigDefault = res; + }) + .catch((err) => { + // eslint-disable-next-line no-console + console.log(err); + }); +} + module.exports = function (b) { const { types: t } = b; @@ -611,16 +627,24 @@ module.exports = function (b) { platform = 'all'; } - if (configPath) { - ConfigDefault = getExportedConfigFromFileString( - getConfig(configPath) - ); - } + // `${process.cwd()}/.gluestack/config-${process.ppid}.js` - configThemePath.forEach((path) => { - ConfigDefault = ConfigDefault?.[path]; - }); - configThemePath = []; + // if ( + // configPath && + // !fs.existsSync(path.join(process.cwd(), `.gluestack/config-${process.ppid}.js`)) + // ) { + // // ConfigDefault = getExportedConfigFromFileString( + // // getConfig(configPath) + // // ); + // ConfigDefault = buildAndGetConfig(configPath); + // } + + // configThemePath.forEach((path) => { + // ConfigDefault = ConfigDefault?.[path]; + // }); + // configThemePath = []; + + // console.log(ConfigDefault, '>>>>>>>>>>>>>>>'); if (!currentFileName.includes('node_modules')) { if (currentFileName.includes('.web.')) { diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx index f83ad31e..de1cb521 100644 --- a/packages/react/src/styled.tsx +++ b/packages/react/src/styled.tsx @@ -897,7 +897,8 @@ export function verboseStyled( orderedResolved = BUILD_TIME_PARAMS?.orderedResolved; orderedCSSIds = BUILD_TIME_PARAMS?.styledIds; - GluestackStyleSheet.update(orderedResolved); + BUILD_TIME_PARAMS.toBeInjected = + GluestackStyleSheet.update(orderedResolved); } else { const { styledIds: g, verbosedStyleIds } = updateOrderUnResolvedMap( theme, @@ -1166,6 +1167,7 @@ export function verboseStyled( CONFIG, componentExtendedConfig ); + if (Platform.OS === 'web') { GluestackStyleSheet.inject( toBeInjected, From 0e30536cff3f405fb0dfcc5648bd9ee66266157b Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Fri, 1 Dec 2023 00:37:11 +0530 Subject: [PATCH 4/7] fix: rollup config path --- packages/babel-plugin-styled-resolver/src/buildConfig.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/babel-plugin-styled-resolver/src/buildConfig.js b/packages/babel-plugin-styled-resolver/src/buildConfig.js index 214fa440..c931d784 100644 --- a/packages/babel-plugin-styled-resolver/src/buildConfig.js +++ b/packages/babel-plugin-styled-resolver/src/buildConfig.js @@ -138,7 +138,7 @@ const generateRollupConfig = (config = {}) => { }; const getConfig = async (configPath) => { - const rollupConfig = generateRollupConfig(); + const rollupConfig = generateRollupConfig({ input: configPath }); try { await buildAndRun(rollupConfig); console.log('Config built successfully!'); From 3c472f80cf975e6abee35412f8c2e14d141e4294 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Fri, 1 Dec 2023 12:25:00 +0530 Subject: [PATCH 5/7] fix: version bump --- .../babel-plugin-styled-resolver/package.json | 2 +- .../babel-plugin-styled-resolver/src/index.js | 18 +++++++++++++++++- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/babel-plugin-styled-resolver/package.json b/packages/babel-plugin-styled-resolver/package.json index 6273aea5..a7fbd3ab 100644 --- a/packages/babel-plugin-styled-resolver/package.json +++ b/packages/babel-plugin-styled-resolver/package.json @@ -38,7 +38,7 @@ "typescript": "^4.7.4" }, "dependencies": { - "@babel/core": "^7.20.5", + "@babel/core": "^7.23.5", "@babel/generator": "^7.20.5", "@babel/parser": "^7.20.5", "@babel/plugin-transform-typescript": "^7.20.2", diff --git a/packages/babel-plugin-styled-resolver/src/index.js b/packages/babel-plugin-styled-resolver/src/index.js index 438321d7..4706cc68 100644 --- a/packages/babel-plugin-styled-resolver/src/index.js +++ b/packages/babel-plugin-styled-resolver/src/index.js @@ -607,7 +607,23 @@ module.exports = function (b) { const CREATE_COMPONENTS = 'createComponents'; return { - name: 'ast-transform', // not required + name: 'gluestack-babel-styled-resolver', // not required + // async pre(state) { + // let plugin; + + // state.opts.plugins?.forEach((currentPlugin) => { + // if (currentPlugin.key === 'gluestack-babel-styled-resolver') { + // plugin = currentPlugin; + // } + // }); + + // const configPath = plugin?.options?.configPath; + + // if (!isConfigExist) { + // const res = await buildAndGetConfig(configPath); + // ConfigDefault = res; + // } + // }, visitor: { ImportDeclaration(importPath, state) { currentFileName = state.file.opts.filename; From 8bf8b510b8676f2279ea1170ea9e70d9247dd2e0 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Fri, 1 Dec 2023 12:26:16 +0530 Subject: [PATCH 6/7] fix: config path param --- packages/babel-plugin-styled-resolver/src/buildConfig.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/babel-plugin-styled-resolver/src/buildConfig.js b/packages/babel-plugin-styled-resolver/src/buildConfig.js index c931d784..214fa440 100644 --- a/packages/babel-plugin-styled-resolver/src/buildConfig.js +++ b/packages/babel-plugin-styled-resolver/src/buildConfig.js @@ -138,7 +138,7 @@ const generateRollupConfig = (config = {}) => { }; const getConfig = async (configPath) => { - const rollupConfig = generateRollupConfig({ input: configPath }); + const rollupConfig = generateRollupConfig(); try { await buildAndRun(rollupConfig); console.log('Config built successfully!'); From f26cccb4c2bde9a1ab1eadc9ecf5cbf4ba197470 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Fri, 1 Dec 2023 14:45:00 +0530 Subject: [PATCH 7/7] v1.0.20 --- packages/react/CHANGELOG.md | 6 ++++++ packages/react/package.json | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 74b58d38..daa21388 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -1,5 +1,11 @@ # @gluestack-style/react +## 1.0.20 + +### Patch Changes + +- Fixed build time to be injected styles [PR](https://github.com/gluestack/gluestack-style/pull/550) + ## 1.0.19 ### Patch Changes diff --git a/packages/react/package.json b/packages/react/package.json index 5c3ace6c..a5afe34e 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": "1.0.19", + "version": "1.0.20", "keywords": [ "React Native", "Next.js",