feat: reduce bundle size

.gitignore

@@ -4,6 +4,7 @@
 
 # XDE
 .expo/
+.yarn
 
 # VSCode
 .vscode/

babel-plugin/.npmignore

@@ -0,0 +1,4 @@
+.yarn
+node_modules
+transform.js
+index.js

babel-plugin/out.js

@@ -1,21 +1,41 @@
-'use strict';
+"use strict";
 
 // index.js
-var CONFIG = {
-  p: 'padding',
-  m: 'margin',
-  t: 'top',
-  b: 'bottom',
-  l: 'left',
-  r: 'right',
-  h: 'height',
-  w: 'width',
-  bg: 'backgroundColor',
-  c: 'color',
-};
-module.exports = function (babel) {
+var fs = require("fs");
+var path = require("path");
+var CONFIG = {};
+var { parse } = require("@babel/parser");
+var { default: traverse } = require("@babel/traverse");
+function ObjectExpressionASTtoJSObject(AstNode) {
+  let obj = {};
+  AstNode.properties.forEach((prop) => {
+    const propName = prop.key.type === "StringLiteral" ? prop.key.value : prop.key.name;
+    if (prop.value.value !== void 0) {
+      obj[propName] = prop.value.value;
+    }
+  });
+  return obj;
+}
+var filePath = path.join(process.cwd(), "rnu.config.ts");
+var fileContent = fs.readFileSync(filePath, "utf8");
+var configAST = parse(fileContent, {
+  sourceType: "module",
+  plugins: ["typescript"]
+});
+traverse(configAST, {
+  CallExpression(path2) {
+    if (path2.node.callee.name === "createConfig") {
+      if (ObjectExpressionASTtoJSObject(path2.node.arguments[0].expression)) {
+        CONFIG = ObjectExpressionASTtoJSObject(
+          path2.node.arguments[0].expression
+        );
+      }
+    }
+  }
+});
+module.exports = function(babel) {
   const { types: t } = babel;
-  let importName = 'react-native-ustyle';
+  let importName = "react-native-ustyle";
   let importedComponents = [];
   let styleId = 0;
   let Styles = [];
@@ -28,37 +48,32 @@ module.exports = function (babel) {
   }
   function checkIfStylesheetImportedAndImport(programPath) {
     let importDeclaration = programPath.node.body.find(
-      (node) =>
-        node.type === 'ImportDeclaration' &&
-        node.source.value === 'react-native'
+      (node) => node.type === "ImportDeclaration" && node.source.value === "react-native"
     );
     if (importDeclaration) {
     }
   }
   function attributesToObject(attributes) {
     if (!Array.isArray(attributes)) {
-      throw new TypeError('Expected attributes to be an array');
+      throw new TypeError("Expected attributes to be an array");
     }
     const obj = {};
     attributes.forEach((attribute) => {
       const key = resolver(attribute.name.name);
       let value;
-      if (attribute.value.type === 'JSXExpressionContainer') {
-        if (attribute.value.expression.type === 'ObjectExpression') {
+      if (attribute.value.type === "JSXExpressionContainer") {
+        if (attribute.value.expression.type === "ObjectExpression") {
           value = {};
           attribute.value.expression.properties.forEach((prop) => {
-            const propName =
-              prop.key.type === 'StringLiteral'
-                ? prop.key.value
-                : prop.key.name;
+            const propName = prop.key.type === "StringLiteral" ? prop.key.value : prop.key.name;
             if (prop.value.value !== void 0) {
               value[propName] = prop.value.value;
             }
           });
         } else {
           value = attribute.value.expression.value;
         }
-      } else if (attribute.value.type === 'JSXElement') {
+      } else if (attribute.value.type === "JSXElement") {
         value = attributesToObject(attribute.value.openingElement.attributes);
       } else {
         value = attribute.value.value;
@@ -70,96 +85,80 @@ module.exports = function (babel) {
     return obj;
   }
   function addRnuStyleIdInStyleArrayOfCOmponent(jsxAttrArray, styleId2) {
-    let styleAttr = jsxAttrArray.find((attr) => attr.name.name === 'style');
+    let styleAttr = jsxAttrArray.find((attr) => attr.name.name === "style");
     if (styleAttr) {
-      if (styleAttr.value.expression.type !== 'ArrayExpression') {
+      if (styleAttr.value.expression.type !== "ArrayExpression") {
         styleAttr.value.expression = t.arrayExpression([
-          styleAttr.value.expression,
+          styleAttr.value.expression
         ]);
       }
       let styleArray = styleAttr.value.expression.elements;
-      styleArray.push(t.identifier('rnuStyles.styles' + styleId2));
+      styleArray.push(t.identifier("rnuStyles.styles" + styleId2));
     } else {
       jsxAttrArray.push(
         t.jSXAttribute(
-          t.jSXIdentifier('style'),
+          t.jSXIdentifier("style"),
           t.jSXExpressionContainer(
-            t.arrayExpression([t.identifier('rnuStyles.styles' + styleId2)])
+            t.arrayExpression([t.identifier("rnuStyles.styles" + styleId2)])
           )
         )
       );
     }
   }
   return {
-    name: 'ast-transform',
+    name: "ast-transform",
     // not required
     visitor: {
-      ImportDeclaration(path, opts) {
-        if (
-          opts.filename.includes('node_modules') ||
-          opts.filename.includes('.expo') ||
-          opts.filename.includes('.next')
-        )
+      ImportDeclaration(path2, opts) {
+        if (opts.filename.includes("node_modules") || opts.filename.includes(".expo") || opts.filename.includes(".next"))
           return;
-        if (path.node.source.value === importName) {
-          path.traverse({
-            ImportSpecifier(path2) {
-              importedComponents.push(path2.node.local.name);
-            },
+        if (path2.node.source.value === importName) {
+          path2.traverse({
+            ImportSpecifier(path3) {
+              importedComponents.push(path3.node.local.name);
+            }
           });
-          path.node.source.value = 'react-native';
+          path2.node.source.value = "react-native";
         }
       },
-      JSXOpeningElement(path, f, o) {
-        if (
-          f.filename.includes('node_modules') ||
-          f.filename.includes('.expo') ||
-          f.filename.includes('.next')
-        )
+      JSXOpeningElement(path2, f, o) {
+        if (f.filename.includes("node_modules") || f.filename.includes(".expo") || f.filename.includes(".next"))
           return;
-        if (importedComponents.includes(path.node.name.name)) {
-          addRnuStyleIdInStyleArrayOfCOmponent(path.node.attributes, styleId);
+        if (importedComponents.includes(path2.node.name.name)) {
+          addRnuStyleIdInStyleArrayOfCOmponent(path2.node.attributes, styleId);
           styleExpression.push(
             t.objectProperty(
-              t.identifier('styles' + styleId++),
-              t.valueToNode(attributesToObject(path.node.attributes))
+              t.identifier("styles" + styleId++),
+              t.valueToNode(attributesToObject(path2.node.attributes))
             )
           );
           let declaration = f.file.ast.program.body.find(
-            (node) =>
-              node.type === 'VariableDeclaration' &&
-              node.declarations[0].id.name === 'rnuStyles'
+            (node) => node.type === "VariableDeclaration" && node.declarations[0].id.name === "rnuStyles"
           );
           if (declaration) {
             f.file.ast.program.body = f.file.ast.program.body.filter(
-              (node) =>
-                node.type !== 'VariableDeclaration' ||
-                node.declarations[0].id.name !== 'rnuStyles'
+              (node) => node.type !== "VariableDeclaration" || node.declarations[0].id.name !== "rnuStyles"
             );
           } else {
-            declaration = t.variableDeclaration('const', [
+            declaration = t.variableDeclaration("const", [
               t.variableDeclarator(
-                t.identifier('rnuStyles'),
+                t.identifier("rnuStyles"),
                 // Not using StyleSheet.create since it is not working in the latest metro version
                 // t.callExpression(t.identifier("StyleSheet.create"), [
                 t.objectExpression(styleExpression)
                 // ])
-              ),
+              )
             ]);
           }
           Styles.push(declaration);
           f.file.ast.program.body.push(declaration);
         }
       },
-      Program(path, opts) {
-        if (
-          opts.filename.includes('node_modules') ||
-          opts.filename.includes('.expo') ||
-          opts.filename.includes('.next')
-        )
+      Program(path2, opts) {
+        if (opts.filename.includes("node_modules") || opts.filename.includes(".expo") || opts.filename.includes(".next"))
           return;
-        checkIfStylesheetImportedAndImport(path);
-      },
-    },
+        checkIfStylesheetImportedAndImport(path2);
+      }
+    }
   };
 };

babel-plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "babel-plugin-react-native-ustyle",
-  "version": "0.6.0",
+  "version": "0.7.2",
   "description": "Official support babel plugin for react-native-ustyle",
   "main": "out.js",
   "module": "out.js",
@@ -14,5 +14,8 @@
   "dependencies": {
     "@babel/parser": "^7.23.9",
     "@babel/traverse": "^7.23.9"
+  },
+  "devDependencies": {
+    "esbuild": "0.20.1"
   }
 }