add bun support, improve expo detection in v2 cli

Author: evelant

.gitignore

@@ -35,3 +35,6 @@ yarn-error.log*
 # vercel
 .vercel
 package-lock.json
+
+# jetbrains
+.idea

packages/create-expo-app-with-gluestack-ui/src/index.ts

@@ -1,12 +1,19 @@
 #!/usr/bin/env node
 const args = process.argv.slice(2);
 
-let supportedArgs = ['--use-npm', '--use-yarn', '--help', '-h', '--use-pnpm'];
+let supportedArgs = [
+  '--use-npm',
+  '--use-yarn',
+  '--help',
+  '-h',
+  '--use-pnpm',
+  '--use-bun',
+];
 
-import path from 'path';
-import fs from 'fs';
 import { cancel, isCancel, log, text } from '@clack/prompts';
-import { installDependencies, getArgsData } from '@gluestack/cli-utils';
+import { getArgsData, installDependencies } from '@gluestack/cli-utils';
+import fs from 'fs';
+import path from 'path';
 
 async function main() {
   let projectPath = path.join(path.resolve(__dirname, '..'), 'src', 'template');

packages/create-expo-router-app-with-gluestack-ui/src/index.ts

@@ -1,12 +1,19 @@
 #!/usr/bin/env node
 const args = process.argv.slice(2);
 
-let supportedArgs = ['--use-npm', '--use-yarn', '--help', '-h', '--use-pnpm'];
+let supportedArgs = [
+  '--use-npm',
+  '--use-yarn',
+  '--help',
+  '-h',
+  '--use-pnpm',
+  '--use-bun',
+];
 
-import path from 'path';
-import fs from 'fs';
 import { cancel, isCancel, log, text } from '@clack/prompts';
-import { installDependencies, getArgsData } from '@gluestack/cli-utils';
+import { getArgsData, installDependencies } from '@gluestack/cli-utils';
+import fs from 'fs';
+import path from 'path';
 
 async function main() {
   let projectPath = path.join(path.resolve(__dirname, '..'), 'src', 'template');

packages/create-gluestack-v2-app/src/template/client/web/README.md

@@ -10,6 +10,8 @@ npm run dev
 yarn dev
 # or
 pnpm dev
+# or
+bun dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

packages/create-next-app-with-gluestack-ui/src/app-router/README.md

@@ -10,6 +10,8 @@ npm run dev
 yarn dev
 # or
 pnpm dev
+# or
+bun dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
@@ -29,9 +31,10 @@ To learn more about Next.js + Gluestack UI template, take a look at the followin
 - [Gluestack Style Documentaion](https://style.gluestack.io/docs/overview/introduction) - learn about the universal styling library that is used in Gluestack-ui
 
 You can check out:
+
 - [the gluestack-ui GitHub repository](https://github.com/gluestack/gluestack-ui)
 - [the gluestack-style GitHub repository](https://github.com/gluestack/gluestack-style)
-Your feedback and contributions are welcome!
+  Your feedback and contributions are welcome!
 
 ## Deploy on Vercel
 

packages/create-next-app-with-gluestack-ui/src/index.ts

@@ -7,13 +7,14 @@ let supportedArgs = [
   '--help',
   '-h',
   '--use-pnpm',
+  '--use-bun',
   '--app',
   '--page',
 ];
-import path from 'path';
-import fs from 'fs';
-import { cancel, isCancel, log, spinner, text, select } from '@clack/prompts';
+import { cancel, isCancel, log, select, spinner, text } from '@clack/prompts';
 import { spawnSync } from 'child_process';
+import fs from 'fs';
+import path from 'path';
 
 function installDependencies(projectName: string, installationMethod: string) {
   const projectPath = path.join(process.cwd(), projectName);
@@ -81,6 +82,7 @@ async function main() {
                 --use-npm           use npm to install dependencies
                 --use-yarn          use yarn to install dependencies
                 --use-pnpm          use pnpm to install dependencies
+                --use-bun           use bun to install dependencies
               `
         );
         process.exit(0);
@@ -94,6 +96,8 @@ async function main() {
         useAppRouter = 'yes';
       } else if (args[i] === '--page') {
         useAppRouter = 'no';
+      } else if (args[i] === '--use-bun') {
+        installationMethod = 'bun i';
       }
     } else {
       log.warning(

packages/create-next-app-with-gluestack-ui/src/page-router/README.md

@@ -10,6 +10,8 @@ npm run dev
 yarn dev
 # or
 pnpm dev
+# or
+bun dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
@@ -29,9 +31,10 @@ To learn more about Next.js + Gluestack UI template, take a look at the followin
 - [Gluestack Style Documentaion](https://style.gluestack.io/docs/overview/introduction) - learn about the universal styling library that is used in Gluestack-ui
 
 You can check out:
+
 - [the gluestack-ui GitHub repository](https://github.com/gluestack/gluestack-ui)
 - [the gluestack-style GitHub repository](https://github.com/gluestack/gluestack-style)
-Your feedback and contributions are welcome!
+  Your feedback and contributions are welcome!
 
 ## Deploy on Vercel
 

packages/create-react-native-app-with-gluestack-ui/src/index.ts

@@ -2,12 +2,19 @@
 
 const args = process.argv.slice(2);
 
-let supportedArgs = ['--use-npm', '--use-yarn', '--help', '-h', '--use-pnpm'];
+let supportedArgs = [
+  '--use-npm',
+  '--use-yarn',
+  '--help',
+  '-h',
+  '--use-pnpm',
+  '--use-bun',
+];
 
-import path from 'path';
-import fs from 'fs';
 import { cancel, isCancel, log, text } from '@clack/prompts';
-import { installDependencies, getArgsData } from '@gluestack/cli-utils';
+import { getArgsData, installDependencies } from '@gluestack/cli-utils';
+import fs from 'fs';
+import path from 'path';
 
 async function main() {
   let projectPath = path.join(path.resolve(__dirname, '..'), 'src', 'template');

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

@@ -1,18 +1,19 @@
+import { log } from '@clack/prompts';
 import { Command } from 'commander';
 import { z } from 'zod';
-import { handleError } from '../util/handle-error';
-import { log } from '@clack/prompts';
-import { componentAdder } from '../util/add';
 import { config } from '../config';
 import { checkWritablePath, isValidPath, projectRootPath } from '../util';
+import { componentAdder } from '../util/add';
 import { checkIfInitialized, getComponentsPath } from '../util/config';
+import { handleError } from '../util/handle-error';
 
 const addOptionsSchema = z.object({
   components: z.string().optional(),
   all: z.boolean(),
   useNpm: z.boolean(),
   useYarn: z.boolean(),
   usePnpm: z.boolean(),
+  useBun: z.boolean(),
   path: z.string().optional(),
 });
 
@@ -24,6 +25,7 @@ export const add = new Command()
   .option('--use-npm ,useNpm', 'use npm to install dependencies', false)
   .option('--use-yarn, useYarn', 'use yarn to install dependencies', false)
   .option('--use-pnpm, usePnpm', 'use pnpm to install dependencies', false)
+  .option('--use-bun, useBun', 'use bun to install dependencies', false)
   .option('--path <path>', 'path to the components directory')
   .action(async (components, opts, command) => {
     try {
@@ -70,10 +72,16 @@ export const add = new Command()
         process.exit(1);
       }
       let installationMethod;
-      if (options.useNpm || options.useYarn || options.usePnpm) {
+      if (
+        options.useNpm ||
+        options.useYarn ||
+        options.usePnpm ||
+        options.useBun
+      ) {
         if (options.useNpm) installationMethod = 'npm';
         if (options.usePnpm) installationMethod = 'pnpm';
         if (options.useYarn) installationMethod = 'yarn';
+        if (options.useBun) installationMethod = 'bun';
       }
       if (options.all) {
         try {

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

@@ -1,20 +1,21 @@
+import { log } from '@clack/prompts';
 import { Command } from 'commander';
 import { z } from 'zod';
-import { handleError } from '../util/handle-error';
-import { log } from '@clack/prompts';
-import { InitializeGlueStack } from '../util/init';
 import { config } from '../config';
 import {
   checkWritablePath,
   detectProjectType,
   isValidPath,
   projectRootPath,
 } from '../util';
+import { handleError } from '../util/handle-error';
+import { InitializeGlueStack } from '../util/init';
 
 const initOptionsSchema = z.object({
   useNpm: z.boolean(),
   useYarn: z.boolean(),
   usePnpm: z.boolean(),
+  useBun: z.boolean(),
   path: z.string().optional(),
 });
 
@@ -24,6 +25,7 @@ export const init = new Command()
   .option('--use-npm ,useNpm', 'use npm to install dependencies', false)
   .option('--use-yarn, useYarn', 'use yarn to install dependencies', false)
   .option('--use-pnpm, usePnpm', 'use pnpm to install dependencies', false)
+  .option('--use-bun, useBun', 'use bun to install dependencies', false)
   .option(
     '--path <path>',
     'path to the components directory. defaults to components/ui'
@@ -32,10 +34,16 @@ export const init = new Command()
     try {
       const options = initOptionsSchema.parse({ ...opts });
       let installationMethod;
-      if (options.useNpm || options.useYarn || options.usePnpm) {
+      if (
+        options.useNpm ||
+        options.useYarn ||
+        options.usePnpm ||
+        options.useBun
+      ) {
         if (options.useNpm) installationMethod = 'npm';
         if (options.usePnpm) installationMethod = 'pnpm';
         if (options.useYarn) installationMethod = 'yarn';
+        if (options.useBun) installationMethod = 'bun';
       }
       // Check if the string starts with "/" or "."
       if (options.path && !isValidPath(options.path)) {