fix: expo 52 issue

gluestack · Nov 18, 2024 · 8d10a55 · 8d10a55
1 parent ecdcd78
commit 8d10a55
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 47 deletions.
diff --git a/packages/gluestack-cli/src/util/config/expo-config-helper.ts b/packages/gluestack-cli/src/util/config/expo-config-helper.ts
@@ -110,13 +110,6 @@ async function initNatiwindExpoApp(
       'expo-add-provider-transform.ts'
     );
 
-    console.log(
-      resolvedConfig,
-      BabeltransformerPath,
-      resolvedConfig.app.sdk50,
-      'resolvedConfig'
-    );
-
     execSync(
       `npx jscodeshift -t ${metroTransformerPath}  ${
         resolvedConfig.config.metroConfig

diff --git a/packages/gluestack-cli/template/codemods/expo/babel-config-transform.ts b/packages/gluestack-cli/template/codemods/expo/babel-config-transform.ts
@@ -54,45 +54,76 @@ const transform: Transform = (file, api, options): string => {
       'react-native-reanimated/plugin'
     );
 
-    // Check if file is empty or has no return statement
-    const returnStatements = root.find(j.ReturnStatement);
-    if (returnStatements.length === 0) {
-      // Create a new module.exports statement with default configuration
-      const newConfig = j.program([
-        j.expressionStatement(
-          j.assignmentExpression(
-            '=',
-            j.memberExpression(j.identifier('module'), j.identifier('exports')),
-            j.functionExpression(
-              null,
-              [],
-              j.blockStatement([
-                j.returnStatement(
-                  j.objectExpression([
-                    j.objectProperty(
-                      j.identifier('presets'),
-                      j.arrayExpression([nativewindPreset, nativewindBabel])
-                    ),
-                    j.objectProperty(
-                      j.identifier('plugins'),
-                      j.arrayExpression(
-                        isSDK50
-                          ? [moduleResolverPlugin]
-                          : [moduleResolverPlugin, reactNativeReanimatedPlugin]
-                      )
-                    ),
-                  ])
-                ),
-              ])
-            )
+    // Create new module.exports with api parameter and cache config
+    const newConfig = j.program([
+      j.expressionStatement(
+        j.assignmentExpression(
+          '=',
+          j.memberExpression(j.identifier('module'), j.identifier('exports')),
+          j.functionExpression(
+            null,
+            [j.identifier('api')],
+            j.blockStatement([
+              j.expressionStatement(
+                j.callExpression(
+                  j.memberExpression(
+                    j.identifier('api'),
+                    j.identifier('cache')
+                  ),
+                  [j.literal(true)]
+                )
+              ),
+              j.returnStatement(
+                j.objectExpression([
+                  j.objectProperty(
+                    j.identifier('presets'),
+                    j.arrayExpression([nativewindPreset, nativewindBabel])
+                  ),
+                  j.objectProperty(
+                    j.identifier('plugins'),
+                    j.arrayExpression(
+                      isSDK50
+                        ? [moduleResolverPlugin]
+                        : [moduleResolverPlugin, reactNativeReanimatedPlugin]
+                    )
+                  ),
+                ])
+              ),
+            ])
           )
-        ),
-      ]);
+        )
+      ),
+    ]);
 
+    // If file is empty or has no return statement, use the new config
+    const returnStatements = root.find(j.ReturnStatement);
+    if (returnStatements.length === 0) {
       return j(newConfig).toSource();
     }
 
-    // If file is not empty, proceed with existing logic
+    // Add api parameter and cache config to existing function
+    root.find(j.FunctionExpression).forEach((path) => {
+      path.node.params = [j.identifier('api')];
+
+      // Add api.cache(true) before the return statement
+      const body = path.node.body.body;
+      const returnIndex = body.findIndex(
+        (node) => node.type === 'ReturnStatement'
+      );
+
+      body.splice(
+        returnIndex,
+        0,
+        j.expressionStatement(
+          j.callExpression(
+            j.memberExpression(j.identifier('api'), j.identifier('cache')),
+            [j.literal(true)]
+          )
+        )
+      );
+    });
+
+    // Process return statements as before
     returnStatements.forEach((path) => {
       const returnObject = path.node.argument as ObjectExpression | null;
 
@@ -120,24 +151,20 @@ const transform: Transform = (file, api, options): string => {
         } else {
           const presetsArray = presetsProperty.value as any;
 
-          // Check if 'babel-preset-expo' exists as a string in the presets array
           const babelPresetIndex = presetsArray.elements.findIndex(
             (element: any) => element.value === 'babel-preset-expo'
           );
 
           if (babelPresetIndex !== -1) {
-            // Replace the string 'babel-preset-expo' with nativewindPreset
             presetsArray.elements[babelPresetIndex] = nativewindPreset;
           }
 
-          // Check if 'nativewind/babel' is already in the presets array
           const nativewindBabelExists = presetsArray.elements.some(
             (element: any) =>
               element.type === 'StringLiteral' &&
               element.value === 'nativewind/babel'
           );
 
-          // Add 'nativewind/babel' to presets array if it's not already present
           if (!nativewindBabelExists) {
             presetsArray.elements.push(nativewindBabel);
           }
@@ -165,7 +192,6 @@ const transform: Transform = (file, api, options): string => {
           const pluginsArray = pluginsProperty.value as any;
           const pluginElements = pluginsArray.elements;
 
-          // Check for module-resolver
           if (
             !pluginElements.some(
               (element: any) =>
@@ -176,7 +202,6 @@ const transform: Transform = (file, api, options): string => {
             pluginElements.push(moduleResolverPlugin);
           }
 
-          // Check for react-native-reanimated/plugin
           if (
             !pluginElements.some(
               (element: any) =>