Skip to content
This repository has been archived by the owner on Dec 11, 2023. It is now read-only.

Commit

Permalink
Merge pull request #551 from gluestack/release/@gluestack-style/react…
Browse files Browse the repository at this point in the history
…@1.0.20

Release/@gluestack style/[email protected]
  • Loading branch information
ankit-tailor authored Dec 1, 2023
2 parents ca10634 + f26cccb commit 286e70d
Show file tree
Hide file tree
Showing 6 changed files with 225 additions and 18 deletions.
13 changes: 8 additions & 5 deletions packages/babel-plugin-styled-resolver/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@gluestack-style/babel-plugin-styled-resolver",
"version": "1.0.1",
"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",
Expand All @@ -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"
},
Expand All @@ -38,13 +38,16 @@
"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",
"@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",
Expand Down
156 changes: 156 additions & 0 deletions packages/babel-plugin-styled-resolver/src/buildConfig.js
Original file line number Diff line number Diff line change
@@ -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,
};
62 changes: 51 additions & 11 deletions packages/babel-plugin-styled-resolver/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -591,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;
Expand All @@ -611,16 +643,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.')) {
Expand Down
6 changes: 6 additions & 0 deletions packages/react/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/react/package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
4 changes: 3 additions & 1 deletion packages/react/src/styled.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -897,7 +897,8 @@ export function verboseStyled<P, Variants, ComCon>(
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,
Expand Down Expand Up @@ -1166,6 +1167,7 @@ export function verboseStyled<P, Variants, ComCon>(
CONFIG,
componentExtendedConfig
);

if (Platform.OS === 'web') {
GluestackStyleSheet.inject(
toBeInjected,
Expand Down

0 comments on commit 286e70d

Please sign in to comment.