Merge pull request #116 from gluestack/fix/next15-support

Fix/next15 support

Author: akash3gtm

packages/gluestack-cli/package.json

@@ -10,7 +10,7 @@
     "cli"
   ],
   "description": "A CLI tool for easily adding components from gluestack to your projects.",
-  "version": "0.7.20",
+  "version": "0.7.22",
   "license": "MIT",
   "main": "dist/index.js",
   "files": [

packages/gluestack-cli/src/commands/init.ts

@@ -12,6 +12,7 @@ import {
 } from '../util';
 import path, { resolve } from 'path';
 import fs from 'fs';
+import { checkNextVersion } from '../util/check-next-version';
 
 const initOptionsSchema = z.object({
   useNpm: z.boolean(),
@@ -59,6 +60,16 @@ export const init = new Command()
         );
         process.exit(1);
       }
+
+      //TODO : remove this check once nextjs 15 is supported properly
+      const isNextjs15 = await checkNextVersion();
+      if (isNextjs15) {
+        log.info(
+          `Next.js 15 is not supported by the init command.\n Please use 'npm create gluestack-ui@latest' to clone a new next 15 project.\n`
+        );
+        process.exit(1);
+      }
+
       //if multiple package managers are used
       if (
         (options.useNpm && options.useYarn) ||

packages/gluestack-cli/template/codemods/nextjs/next15-eslint-config-transform.ts

@@ -0,0 +1,55 @@
+import { Transform } from 'jscodeshift';
+
+const transform: Transform = (file, api) => {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  // Look for eslintConfig array definition
+  root
+    .find(j.VariableDeclarator, { id: { name: 'eslintConfig' } })
+    .forEach((path) => {
+      const arrayExpression = path.node.init;
+
+      if (arrayExpression && arrayExpression.type === 'ArrayExpression') {
+        const newRuleObject = j.objectExpression([
+          j.property(
+            'init',
+            j.identifier('rules'),
+            j.objectExpression([
+              j.property(
+                'init',
+                j.stringLiteral('@typescript-eslint/no-explicit-any'),
+                j.stringLiteral('off')
+              ),
+            ])
+          ),
+        ]);
+
+        // Ensure new rule object isn't already present
+        const hasRuleAlready = arrayExpression.elements.some(
+          (el) =>
+            el &&
+            el.type === 'ObjectExpression' &&
+            el.properties.some(
+              (prop) =>
+                prop.key.type === 'Identifier' &&
+                prop.key.name === 'rules' &&
+                prop.value.type === 'ObjectExpression' &&
+                prop.value.properties.some(
+                  (rule) =>
+                    rule.key.type === 'StringLiteral' &&
+                    rule.key.value === '@typescript-eslint/no-explicit-any'
+                )
+            )
+        );
+
+        if (!hasRuleAlready) {
+          arrayExpression.elements.push(newRuleObject);
+        }
+      }
+    });
+
+  return root.toSource();
+};
+
+export default transform;

packages/gluestack-cli/template/nextjs/next15/registry.tsx

@@ -2,7 +2,7 @@
 import React, { useRef, useState } from 'react';
 import { useServerInsertedHTML } from 'next/navigation';
 import { StyleRegistry, createStyleRegistry } from 'styled-jsx';
-// @ts-ignore
+// @ts-expect-error : AppRegistry is defined in react-native-web but its type is not defined
 import { AppRegistry } from 'react-native-web';
 import { flush } from '@gluestack-ui/nativewind-utils/flush';