Release/@gluestack style/[email protected]

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.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"
   },
@@ -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",

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,
+};

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;
 
@@ -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;
@@ -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.')) {

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

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",

packages/react/src/styled.tsx

@@ -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,
@@ -1166,6 +1167,7 @@ export function verboseStyled<P, Variants, ComCon>(
           CONFIG,
           componentExtendedConfig
         );
+
         if (Platform.OS === 'web') {
           GluestackStyleSheet.inject(
             toBeInjected,