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)) {

packages/gluestack-cli/src/util/add/index.ts

@@ -1,7 +1,7 @@
+import { confirm, log } from '@clack/prompts';
 import fs from 'fs-extra';
-import { join } from 'path';
 import os from 'os';
-import { log, confirm } from '@clack/prompts';
+import { join } from 'path';
 import {
   addDependencies,
   cloneRepositoryAtRoot,
@@ -43,14 +43,15 @@ const componentAdder = async ({
       !existingComponentsChecked && showWarning && requestedComponent
         ? await isComponentInConfig(requestedComponents)
         : requestedComponents;
+
     await Promise.all(
       updatedComponents.map(async (component) => {
         const targetPath = join(
           projectRootPath,
           config.writableComponentsPath,
           component
         );
-
+        console.log(`writing component`, component, targetPath);
         await writeComponent(component, targetPath);
       })
     )

packages/gluestack-cli/src/util/config/expo-config-helper.ts

@@ -1,13 +1,14 @@
-import * as path from 'path';
 import fg from 'fast-glob';
+import * as fs from 'fs';
+import * as path from 'path';
+import { generateConfig, getConfigPath } from '.';
+import { projectRootPath } from '..';
+import { config } from '../../config';
 import {
-  RawConfig,
-  PROJECT_SHARED_IGNORE,
   ExpoResolvedConfig,
+  PROJECT_SHARED_IGNORE,
+  RawConfig,
 } from './config-types';
-import { generateConfig, getConfigPath } from '.';
-import { config } from '../../config';
-import { projectRootPath } from '..';
 
 // expo project type initialization
 async function getExpoProjectType(cwd: string): Promise<string | undefined> {
@@ -17,18 +18,29 @@ async function getExpoProjectType(cwd: string): Promise<string | undefined> {
     ignore: PROJECT_SHARED_IGNORE,
   });
 
-  const isExpoProject = files.find((file) => file.startsWith('app.json'));
+  const isExpoProject = files.find(
+    (file) =>
+      file.startsWith('app.json') ||
+      file.startsWith('app.config.js') ||
+      file.startsWith('app.config.ts')
+  );
   if (!isExpoProject) {
     return undefined;
   }
 
-  const isUsingExpoRouter = await getConfigPath(['app/_layout.*']);
+  const expoLayoutPath = fs.existsSync('app')
+    ? 'app/_layout.*'
+    : fs.existsSync('src/app')
+      ? 'src/app/_layout.*'
+      : '**/*_layout.*';
+  const isUsingExpoRouter = await getConfigPath([expoLayoutPath]);
   const isUsingDefaultExpo = await getConfigPath(['App.*']);
+
   return isUsingExpoRouter
     ? 'expo-router'
     : isUsingDefaultExpo
-    ? 'expo-default'
-    : undefined;
+      ? 'expo-default'
+      : undefined;
 }
 
 async function resolvedExpoPaths(resultConfig: ExpoResolvedConfig) {

packages/gluestack-cli/src/util/config/index.ts

@@ -1,9 +1,9 @@
+import fg from 'fast-glob';
 import * as fs from 'fs';
 import * as path from 'path';
-import { config } from '../../config';
 import { projectRootPath } from '..';
-import fg from 'fast-glob';
-import { RawConfig, PROJECT_SHARED_IGNORE } from './config-types';
+import { config } from '../../config';
+import { PROJECT_SHARED_IGNORE, RawConfig } from './config-types';
 
 const fileExtensions = ['.tsx', '.jsx', '.ts', '.js'];
 const possibleIndexFiles = ['_app', 'index', 'App'];
@@ -124,10 +124,10 @@ async function generateGluestackConfig() {
 
 export {
   checkIfInitialized,
-  getEntryPathAndComponentsPath,
+  findDirectory,
   generateConfig,
-  getConfigPath,
-  getComponentsPath,
   generateGluestackConfig,
-  findDirectory,
+  getComponentsPath,
+  getConfigPath,
+  getEntryPathAndComponentsPath,
 };