@thelacanians/vue-native-cli 0.1.2 → 0.3.0

package/dist/cli.js

@@ -9,10 +9,15 @@ import { Command } from "commander";
 import { mkdir, writeFile } from "fs/promises";
 import { join } from "path";
 import pc from "picocolors";
-var createCommand = new Command("create").description("Create a new Vue Native project").argument("<name>", "project name").action(async (name) => {
+var createCommand = new Command("create").description("Create a new Vue Native project").argument("<name>", "project name").option("-t, --template <template>", "project template (blank, tabs, drawer)", "blank").action(async (name, options) => {
+  const template = options.template;
+  if (!["blank", "tabs", "drawer"].includes(template)) {
+    console.error(pc.red(`Invalid template "${template}". Choose: blank, tabs, drawer`));
+    process.exit(1);
+  }
   const dir = join(process.cwd(), name);
   console.log(pc.cyan(`
-Creating Vue Native project: ${pc.bold(name)}
+Creating Vue Native project: ${pc.bold(name)} (template: ${template})
 `));
   try {
     await mkdir(dir, { recursive: true });
@@ -29,12 +34,12 @@ Creating Vue Native project: ${pc.bold(name)}
         typecheck: "tsc --noEmit"
       },
       dependencies: {
-        "@thelacanians/vue-native-runtime": "^0.1.0",
-        "@thelacanians/vue-native-navigation": "^0.1.0",
+        "@thelacanians/vue-native-runtime": "^0.3.0",
+        "@thelacanians/vue-native-navigation": "^0.3.0",
         "vue": "^3.5.0"
       },
       devDependencies: {
-        "@thelacanians/vue-native-vite-plugin": "^0.1.0",
+        "@thelacanians/vue-native-vite-plugin": "^0.3.0",
         "@vitejs/plugin-vue": "^5.0.0",
         "vite": "^6.1.0",
         "typescript": "^5.7.0"
@@ -60,79 +65,7 @@ export default defineConfig({
       },
       include: ["app/**/*"]
     }, null, 2));
-    await writeFile(join(dir, "app", "main.ts"), `import { createApp } from 'vue'
-import { createRouter } from '@thelacanians/vue-native-navigation'
-import App from './App.vue'
-import Home from './pages/Home.vue'
-
-const router = createRouter([
-  { name: 'Home', component: Home },
-])
-
-const app = createApp(App)
-app.use(router)
-app.start()
-`);
-    await writeFile(join(dir, "app", "App.vue"), `<template>
-  <VSafeArea :style="{ flex: 1, backgroundColor: '#ffffff' }">
-    <RouterView />
-  </VSafeArea>
-</template>
-
-<script setup lang="ts">
-import { RouterView } from '@thelacanians/vue-native-navigation'
-</script>
-`);
-    await writeFile(join(dir, "app", "pages", "Home.vue"), `<template>
-  <VView :style="styles.container">
-    <VText :style="styles.title">Hello, Vue Native! \u{1F389}</VText>
-    <VText :style="styles.subtitle">Edit app/pages/Home.vue to get started.</VText>
-    <VButton :style="styles.button" @press="count++">
-      <VText :style="styles.buttonText">Count: {{ count }}</VText>
-    </VButton>
-  </VView>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { createStyleSheet } from 'vue'
-
-const count = ref(0)
-
-const styles = createStyleSheet({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 24,
-  },
-  title: {
-    fontSize: 28,
-    fontWeight: 'bold',
-    color: '#1a1a1a',
-    marginBottom: 8,
-    textAlign: 'center',
-  },
-  subtitle: {
-    fontSize: 16,
-    color: '#666',
-    textAlign: 'center',
-    marginBottom: 32,
-  },
-  button: {
-    backgroundColor: '#4f46e5',
-    paddingHorizontal: 32,
-    paddingVertical: 14,
-    borderRadius: 12,
-  },
-  buttonText: {
-    color: '#ffffff',
-    fontSize: 18,
-    fontWeight: '600',
-  },
-})
-</script>
-`);
+    await generateTemplateFiles(dir, name, template);
     const iosDir = join(dir, "ios");
     const iosSrcDir = join(iosDir, "Sources");
     await mkdir(iosSrcDir, { recursive: true });
@@ -388,42 +321,487 @@ android.useAndroidX=true
 kotlin.code.style=official
 android.nonTransitiveRClass=true
 `);
-    console.log(pc.green("\u2713 Project created successfully!\n"));
-    console.log(pc.white("Next steps:\n"));
-    console.log(pc.white(`  cd ${name}`));
-    console.log(pc.white("  bun install"));
-    console.log(pc.white("  vue-native dev\n"));
-    console.log(pc.white("To run on iOS:"));
-    console.log(pc.white("  vue-native run ios\n"));
-    console.log(pc.white("To run on Android:"));
-    console.log(pc.white("  vue-native run android\n"));
+    await writeFile(join(dir, "vue-native.config.ts"), `import { defineConfig } from '@thelacanians/vue-native-cli'
+
+export default defineConfig({
+  name: '${name}',
+  bundleId: '${bundleId}',
+  version: '1.0.0',
+  ios: {
+    deploymentTarget: '16.0',
+  },
+  android: {
+    minSdk: 21,
+    targetSdk: 34,
+  },
+})
+`);
+    await writeFile(join(dir, "env.d.ts"), `/// <reference types="vite/client" />
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+declare const __DEV__: boolean
+`);
+    await writeFile(join(dir, ".gitignore"), `node_modules/
+dist/
+*.xcuserstate
+*.xcuserdatad/
+DerivedData/
+.build/
+build/
+.gradle/
+local.properties
+*.apk
+*.aab
+.DS_Store
+`);
+    console.log(pc.green("  Project created successfully!\n"));
+    console.log(pc.white("  Next steps:\n"));
+    console.log(pc.white(`    cd ${name}`));
+    console.log(pc.white("    bun install"));
+    console.log(pc.white("    vue-native dev\n"));
+    console.log(pc.white("  To run on iOS:"));
+    console.log(pc.white("    vue-native run ios\n"));
+    console.log(pc.white("  To run on Android:"));
+    console.log(pc.white("    vue-native run android\n"));
   } catch (err) {
     console.error(pc.red(`Error creating project: ${err.message}`));
     process.exit(1);
   }
 });
+async function generateTemplateFiles(dir, name, template) {
+  const pagesDir = join(dir, "app", "pages");
+  if (template === "blank") {
+    await generateBlankTemplate(dir, pagesDir);
+  } else if (template === "tabs") {
+    await generateTabsTemplate(dir, pagesDir);
+  } else if (template === "drawer") {
+    await generateDrawerTemplate(dir, pagesDir);
+  }
+}
+async function generateBlankTemplate(dir, pagesDir) {
+  await writeFile(join(dir, "app", "main.ts"), `import { createApp } from 'vue'
+import { createRouter } from '@thelacanians/vue-native-navigation'
+import App from './App.vue'
+import Home from './pages/Home.vue'
+
+const router = createRouter([
+  { name: 'Home', component: Home },
+])
+
+const app = createApp(App)
+app.use(router)
+app.start()
+`);
+  await writeFile(join(dir, "app", "App.vue"), `<template>
+  <VSafeArea :style="{ flex: 1, backgroundColor: '#ffffff' }">
+    <RouterView />
+  </VSafeArea>
+</template>
+
+<script setup lang="ts">
+import { RouterView } from '@thelacanians/vue-native-navigation'
+</script>
+`);
+  await writeFile(join(pagesDir, "Home.vue"), `<script setup lang="ts">
+import { ref } from 'vue'
+import { createStyleSheet } from '@thelacanians/vue-native-runtime'
+
+const count = ref(0)
+
+const styles = createStyleSheet({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 24,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: 'bold',
+    color: '#1a1a1a',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 32,
+  },
+  button: {
+    backgroundColor: '#4f46e5',
+    paddingHorizontal: 32,
+    paddingVertical: 14,
+    borderRadius: 12,
+  },
+  buttonText: {
+    color: '#ffffff',
+    fontSize: 18,
+    fontWeight: '600',
+  },
+})
+</script>
+
+<template>
+  <VView :style="styles.container">
+    <VText :style="styles.title">Hello, Vue Native!</VText>
+    <VText :style="styles.subtitle">Edit app/pages/Home.vue to get started.</VText>
+    <VButton :style="styles.button" :onPress="() => count++">
+      <VText :style="styles.buttonText">Count: {{ count }}</VText>
+    </VButton>
+  </VView>
+</template>
+`);
+}
+async function generateTabsTemplate(dir, pagesDir) {
+  await writeFile(join(dir, "app", "main.ts"), `import { createApp } from 'vue'
+import App from './App.vue'
+
+const app = createApp(App)
+app.start()
+`);
+  await writeFile(join(dir, "app", "App.vue"), `<script setup lang="ts">
+import { createTabNavigator } from '@thelacanians/vue-native-navigation'
+import Home from './pages/Home.vue'
+import Settings from './pages/Settings.vue'
+
+const { TabNavigator } = createTabNavigator()
+</script>
+
+<template>
+  <VSafeArea :style="{ flex: 1, backgroundColor: '#ffffff' }">
+    <TabNavigator
+      :screens="[
+        { name: 'home', label: 'Home', icon: 'H', component: Home },
+        { name: 'settings', label: 'Settings', icon: 'S', component: Settings },
+      ]"
+    />
+  </VSafeArea>
+</template>
+`);
+  await writeFile(join(pagesDir, "Home.vue"), `<script setup lang="ts">
+import { ref } from 'vue'
+import { createStyleSheet } from '@thelacanians/vue-native-runtime'
+
+const count = ref(0)
+
+const styles = createStyleSheet({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 24,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: 'bold',
+    color: '#1a1a1a',
+    marginBottom: 16,
+  },
+  button: {
+    backgroundColor: '#4f46e5',
+    paddingHorizontal: 32,
+    paddingVertical: 14,
+    borderRadius: 12,
+    marginTop: 16,
+  },
+  buttonText: {
+    color: '#ffffff',
+    fontSize: 18,
+    fontWeight: '600',
+  },
+})
+</script>
+
+<template>
+  <VView :style="styles.container">
+    <VText :style="styles.title">Home</VText>
+    <VText>Count: {{ count }}</VText>
+    <VButton :style="styles.button" :onPress="() => count++">
+      <VText :style="styles.buttonText">Increment</VText>
+    </VButton>
+  </VView>
+</template>
+`);
+  await writeFile(join(pagesDir, "Settings.vue"), `<script setup lang="ts">
+import { ref } from 'vue'
+import { createStyleSheet } from '@thelacanians/vue-native-runtime'
+
+const darkMode = ref(false)
+
+const styles = createStyleSheet({
+  container: {
+    flex: 1,
+    padding: 24,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: 'bold',
+    color: '#1a1a1a',
+    marginBottom: 24,
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#e0e0e0',
+  },
+  label: {
+    fontSize: 16,
+    color: '#333',
+  },
+})
+</script>
+
+<template>
+  <VView :style="styles.container">
+    <VText :style="styles.title">Settings</VText>
+    <VView :style="styles.row">
+      <VText :style="styles.label">Dark Mode</VText>
+      <VSwitch v-model="darkMode" />
+    </VView>
+  </VView>
+</template>
+`);
+}
+async function generateDrawerTemplate(dir, pagesDir) {
+  await writeFile(join(dir, "app", "main.ts"), `import { createApp } from 'vue'
+import App from './App.vue'
+
+const app = createApp(App)
+app.start()
+`);
+  await writeFile(join(dir, "app", "App.vue"), `<script setup lang="ts">
+import { createDrawerNavigator } from '@thelacanians/vue-native-navigation'
+import Home from './pages/Home.vue'
+import About from './pages/About.vue'
+
+const { DrawerNavigator } = createDrawerNavigator()
+</script>
+
+<template>
+  <VSafeArea :style="{ flex: 1, backgroundColor: '#ffffff' }">
+    <DrawerNavigator
+      :screens="[
+        { name: 'home', label: 'Home', icon: 'H', component: Home },
+        { name: 'about', label: 'About', icon: 'A', component: About },
+      ]"
+    />
+  </VSafeArea>
+</template>
+`);
+  await writeFile(join(pagesDir, "Home.vue"), `<script setup lang="ts">
+import { createStyleSheet } from '@thelacanians/vue-native-runtime'
+import { useDrawer } from '@thelacanians/vue-native-navigation'
+
+const { toggleDrawer } = useDrawer()
+
+const styles = createStyleSheet({
+  container: {
+    flex: 1,
+    padding: 24,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 24,
+  },
+  menuButton: {
+    backgroundColor: '#f0f0f0',
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 8,
+    marginRight: 16,
+  },
+  menuText: {
+    fontSize: 18,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#1a1a1a',
+  },
+  body: {
+    fontSize: 16,
+    color: '#666',
+    lineHeight: 24,
+  },
+})
+</script>
+
+<template>
+  <VView :style="styles.container">
+    <VView :style="styles.header">
+      <VButton :style="styles.menuButton" :onPress="toggleDrawer">
+        <VText :style="styles.menuText">Menu</VText>
+      </VButton>
+      <VText :style="styles.title">Home</VText>
+    </VView>
+    <VText :style="styles.body">
+      Swipe from the left or tap Menu to open the drawer.
+    </VText>
+  </VView>
+</template>
+`);
+  await writeFile(join(pagesDir, "About.vue"), `<script setup lang="ts">
+import { createStyleSheet } from '@thelacanians/vue-native-runtime'
+import { useDrawer } from '@thelacanians/vue-native-navigation'
+
+const { toggleDrawer } = useDrawer()
+
+const styles = createStyleSheet({
+  container: {
+    flex: 1,
+    padding: 24,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 24,
+  },
+  menuButton: {
+    backgroundColor: '#f0f0f0',
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 8,
+    marginRight: 16,
+  },
+  menuText: {
+    fontSize: 18,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#1a1a1a',
+  },
+  body: {
+    fontSize: 16,
+    color: '#666',
+    lineHeight: 24,
+  },
+})
+</script>
+
+<template>
+  <VView :style="styles.container">
+    <VView :style="styles.header">
+      <VButton :style="styles.menuButton" :onPress="toggleDrawer">
+        <VText :style="styles.menuText">Menu</VText>
+      </VButton>
+      <VText :style="styles.title">About</VText>
+    </VView>
+    <VText :style="styles.body">
+      Built with Vue Native.
+    </VText>
+  </VView>
+</template>
+`);
+}
 
 // src/commands/dev.ts
 import { Command as Command2 } from "commander";
-import { spawn } from "child_process";
+import { spawn, execSync } from "child_process";
 import { readFile } from "fs/promises";
+import { existsSync } from "fs";
 import { join as join2 } from "path";
 import { watch } from "chokidar";
 import { WebSocketServer, WebSocket } from "ws";
 import pc2 from "picocolors";
 var DEFAULT_PORT = 8174;
 var BUNDLE_FILE = "dist/vue-native-bundle.js";
-var devCommand = new Command2("dev").description("Start the Vue Native dev server with hot reload").option("-p, --port <port>", "WebSocket port for hot reload", String(DEFAULT_PORT)).action(async (options) => {
+function detectIOSSimulators() {
+  try {
+    const output = execSync("xcrun simctl list devices available -j", {
+      stdio: "pipe",
+      encoding: "utf8"
+    });
+    const data = JSON.parse(output);
+    const simulators = [];
+    for (const [runtime, devices] of Object.entries(data.devices ?? {})) {
+      if (!runtime.includes("iOS")) continue;
+      for (const device of devices) {
+        if (device.isAvailable !== false) {
+          simulators.push({
+            name: device.name,
+            udid: device.udid,
+            state: device.state
+          });
+        }
+      }
+    }
+    return simulators;
+  } catch {
+    return [];
+  }
+}
+function bootSimulator(udid) {
+  try {
+    execSync(`xcrun simctl boot "${udid}"`, { stdio: "pipe" });
+  } catch {
+  }
+  try {
+    execSync("open -a Simulator", { stdio: "pipe" });
+  } catch {
+  }
+}
+function detectAndroidEmulators() {
+  try {
+    const output = execSync("adb devices", { stdio: "pipe", encoding: "utf8" });
+    const lines = output.split("\n").filter((l) => l.includes("device") && !l.startsWith("List"));
+    return lines.map((l) => l.split("	")[0]).filter(Boolean);
+  } catch {
+    return [];
+  }
+}
+var devCommand = new Command2("dev").description("Start the Vue Native dev server with hot reload").option("-p, --port <port>", "WebSocket port for hot reload", String(DEFAULT_PORT)).option("--ios", "auto-detect and launch iOS Simulator").option("--android", "auto-detect Android emulator").option("--simulator <name>", "specify iOS Simulator name").action(async (options) => {
   const port = parseInt(options.port, 10);
   const cwd = process.cwd();
   const bundlePath = join2(cwd, BUNDLE_FILE);
-  console.log(pc2.cyan("\n\u26A1 Vue Native Dev Server\n"));
+  console.log(pc2.cyan("\n  Vue Native Dev Server\n"));
+  if (options.ios) {
+    console.log(pc2.white("  Detecting iOS Simulators..."));
+    const simulators = detectIOSSimulators();
+    if (simulators.length === 0) {
+      console.log(pc2.yellow("  No iOS Simulators found. Install Xcode and create a simulator."));
+    } else {
+      let target = simulators.find((s) => s.state === "Booted");
+      if (!target && options.simulator) {
+        target = simulators.find((s) => s.name === options.simulator);
+      }
+      if (!target) {
+        target = simulators.find((s) => s.name.includes("iPhone")) ?? simulators[0];
+      }
+      if (target) {
+        if (target.state !== "Booted") {
+          console.log(pc2.white(`  Booting ${target.name}...`));
+          bootSimulator(target.udid);
+        }
+        console.log(pc2.green(`  iOS Simulator ready: ${target.name}`));
+      }
+    }
+    console.log();
+  }
+  if (options.android) {
+    console.log(pc2.white("  Detecting Android emulators..."));
+    const emulators = detectAndroidEmulators();
+    if (emulators.length === 0) {
+      console.log(pc2.yellow("  No Android emulators detected. Start one via Android Studio or `emulator -avd <name>`."));
+    } else {
+      console.log(pc2.green(`  Android emulator(s) connected: ${emulators.join(", ")}`));
+    }
+    console.log();
+  }
   const wss = new WebSocketServer({ port });
   const clients = /* @__PURE__ */ new Set();
   wss.on("connection", (ws) => {
     clients.add(ws);
     ws.send(JSON.stringify({ type: "connected" }));
-    console.log(pc2.green(`  iOS client connected (${clients.size} total)`));
+    console.log(pc2.green(`  Client connected (${clients.size} total)`));
     readFile(bundlePath, "utf8").then((bundle) => {
       if (ws.readyState === WebSocket.OPEN) {
         ws.send(JSON.stringify({ type: "bundle", bundle }));
@@ -433,7 +811,7 @@ var devCommand = new Command2("dev").description("Start the Vue Native dev serve
     });
     ws.on("close", () => {
       clients.delete(ws);
-      console.log(pc2.dim(`  iOS client disconnected (${clients.size} remaining)`));
+      console.log(pc2.dim(`  Client disconnected (${clients.size} remaining)`));
     });
     ws.on("message", (data) => {
       try {
@@ -447,7 +825,15 @@ var devCommand = new Command2("dev").description("Start the Vue Native dev serve
     console.error(pc2.red(`WebSocket server error: ${err.message}`));
   });
   console.log(pc2.white(`  Hot reload server: ${pc2.bold(`ws://localhost:${port}`)}`));
-  console.log(pc2.dim("  Waiting for iOS app to connect...\n"));
+  const iosDir = join2(cwd, "ios");
+  const androidDir = join2(cwd, "android");
+  if (existsSync(iosDir)) {
+    console.log(pc2.dim(`  iOS app should connect to ws://localhost:${port}`));
+  }
+  if (existsSync(androidDir)) {
+    console.log(pc2.dim(`  Android emulator should connect to ws://10.0.2.2:${port}`));
+  }
+  console.log(pc2.dim("  Waiting for app to connect...\n"));
   console.log(pc2.white("  Starting Vite build watcher...\n"));
   const vite = spawn(
     "bun",
@@ -483,8 +869,8 @@ var devCommand = new Command2("dev").description("Start the Vue Native dev serve
           sent++;
         }
       }
-      console.log(pc2.green(`  \u2713 Bundle updated (${Math.round(bundle.length / 1024)}KB) \u2192 sent to ${sent} client(s)`));
-    } catch (err) {
+      console.log(pc2.green(`  Bundle updated (${Math.round(bundle.length / 1024)}KB) -> sent to ${sent} client(s)`));
+    } catch {
     }
   }
   setInterval(() => {
@@ -504,16 +890,16 @@ var devCommand = new Command2("dev").description("Start the Vue Native dev serve
 
 // src/commands/run.ts
 import { Command as Command3 } from "commander";
-import { spawn as spawn2, execSync } from "child_process";
-import { existsSync, readdirSync, readFileSync } from "fs";
+import { spawn as spawn2, execSync as execSync2 } from "child_process";
+import { existsSync as existsSync2, readdirSync, readFileSync } from "fs";
 import { join as join3 } from "path";
 import pc3 from "picocolors";
-function findAppPath(buildDir) {
+function findAppPath(_buildDir) {
   const derivedDataBase = join3(
     process.env.HOME || "~",
     "Library/Developer/Xcode/DerivedData"
   );
-  if (existsSync(derivedDataBase)) {
+  if (existsSync2(derivedDataBase)) {
     try {
       const projects = readdirSync(derivedDataBase);
       for (const project of projects.reverse()) {
@@ -522,7 +908,7 @@ function findAppPath(buildDir) {
           project,
           "Build/Products/Debug-iphonesimulator"
         );
-        if (existsSync(productsDir)) {
+        if (existsSync2(productsDir)) {
           const entries = readdirSync(productsDir);
           const app = entries.find((e) => e.endsWith(".app"));
           if (app) {
@@ -537,7 +923,7 @@ function findAppPath(buildDir) {
 }
 function readBundleId(iosDir) {
   const plistPath = join3(iosDir, "Sources", "Info.plist");
-  if (existsSync(plistPath)) {
+  if (existsSync2(plistPath)) {
     try {
       const content = readFileSync(plistPath, "utf8");
       const match = content.match(
@@ -553,7 +939,7 @@ function readBundleId(iosDir) {
 }
 function findApkPath(androidDir) {
   const apkDir = join3(androidDir, "app", "build", "outputs", "apk", "debug");
-  if (existsSync(apkDir)) {
+  if (existsSync2(apkDir)) {
     try {
       const entries = readdirSync(apkDir);
       const apk = entries.find((e) => e.endsWith(".apk") && !e.includes("androidTest"));
@@ -576,7 +962,7 @@ var runCommand = new Command3("run").description("Build and run the app").argume
 `));
   console.log(pc3.white("  Building JS bundle..."));
   try {
-    execSync("bun run vite build", { cwd, stdio: "inherit" });
+    execSync2("bun run vite build", { cwd, stdio: "inherit" });
     console.log(pc3.green("  \u2713 Bundle built\n"));
   } catch {
     console.error(pc3.red("  \u2717 Bundle build failed"));
@@ -591,7 +977,7 @@ var runCommand = new Command3("run").description("Build and run the app").argume
 function runIOS(cwd, options) {
   let xcodeProject = null;
   const iosDir = join3(cwd, "ios");
-  if (existsSync(iosDir)) {
+  if (existsSync2(iosDir)) {
     for (const ext of [".xcworkspace", ".xcodeproj"]) {
       try {
         const entries = readdirSync(iosDir);
@@ -644,18 +1030,18 @@ function runIOS(cwd, options) {
     const bundleId = options.bundleId || readBundleId(join3(cwd, "ios"));
     console.log(pc3.white(`  Booting simulator "${simulatorName}"...`));
     try {
-      execSync(`xcrun simctl boot "${simulatorName}"`, { stdio: "pipe" });
+      execSync2(`xcrun simctl boot "${simulatorName}"`, { stdio: "pipe" });
     } catch {
     }
     try {
-      execSync("open -a Simulator", { stdio: "pipe" });
+      execSync2("open -a Simulator", { stdio: "pipe" });
     } catch {
     }
     const appPath = findAppPath(join3(cwd, "ios"));
     if (appPath) {
       console.log(pc3.white(`  Installing app on simulator...`));
       try {
-        execSync(`xcrun simctl install booted "${appPath}"`, { stdio: "pipe" });
+        execSync2(`xcrun simctl install booted "${appPath}"`, { stdio: "pipe" });
         console.log(pc3.green("  \u2713 App installed"));
       } catch (err) {
         console.error(pc3.red(`  \u2717 Failed to install app: ${err.message}`));
@@ -663,7 +1049,7 @@ function runIOS(cwd, options) {
       }
       console.log(pc3.white(`  Launching ${bundleId}...`));
       try {
-        execSync(`xcrun simctl launch booted "${bundleId}"`, { stdio: "pipe" });
+        execSync2(`xcrun simctl launch booted "${bundleId}"`, { stdio: "pipe" });
         console.log(pc3.green(`  \u2713 App launched on ${simulatorName}
 `));
       } catch (err) {
@@ -678,14 +1064,14 @@ function runIOS(cwd, options) {
 }
 function runAndroid(cwd, options) {
   const androidDir = join3(cwd, "android");
-  if (!existsSync(androidDir)) {
+  if (!existsSync2(androidDir)) {
     console.log(pc3.yellow("  No android/ directory found."));
     console.log(pc3.dim("  To add Android support, create an Android project in the android/ directory."));
     console.log(pc3.dim("  Bundle has been built to dist/vue-native-bundle.js\n"));
     return;
   }
   const gradlew = join3(androidDir, "gradlew");
-  if (!existsSync(gradlew)) {
+  if (!existsSync2(gradlew)) {
     console.error(pc3.red("  \u2717 gradlew not found in android/ directory"));
     console.log(pc3.dim("  Make sure your Android project has the Gradle wrapper.\n"));
     process.exit(1);
@@ -726,7 +1112,7 @@ function runAndroid(cwd, options) {
     }
     console.log(pc3.white("  Installing APK on device/emulator..."));
     try {
-      execSync(`adb install -r "${apkPath}"`, { stdio: "pipe" });
+      execSync2(`adb install -r "${apkPath}"`, { stdio: "pipe" });
       console.log(pc3.green("  \u2713 APK installed"));
     } catch (err) {
       console.error(pc3.red(`  \u2717 Failed to install APK: ${err.message}`));
@@ -736,7 +1122,7 @@ function runAndroid(cwd, options) {
     const componentName = `${options.package}/${options.activity}`;
     console.log(pc3.white(`  Launching ${componentName}...`));
     try {
-      execSync(`adb shell am start -n "${componentName}"`, { stdio: "pipe" });
+      execSync2(`adb shell am start -n "${componentName}"`, { stdio: "pipe" });
       console.log(pc3.green(`  \u2713 App launched
 `));
     } catch (err) {

package/dist/config.d.ts

@@ -0,0 +1,46 @@
+interface VueNativeConfig {
+    /** Display name for the app. */
+    name: string;
+    /** Bundle identifier (e.g. com.example.myapp). */
+    bundleId: string;
+    /** App version string (semver). */
+    version: string;
+    /** iOS-specific configuration. */
+    ios?: {
+        /** Minimum iOS deployment target. Default: "16.0". */
+        deploymentTarget?: string;
+        /** Xcode scheme name (auto-derived from name if omitted). */
+        scheme?: string;
+    };
+    /** Android-specific configuration. */
+    android?: {
+        /** Minimum Android SDK version. Default: 21. */
+        minSdk?: number;
+        /** Target Android SDK version. Default: 34. */
+        targetSdk?: number;
+        /** Android package name (defaults to bundleId). */
+        packageName?: string;
+    };
+    /** List of Vue Native plugins to include. */
+    plugins?: string[];
+}
+interface ResolvedConfig extends VueNativeConfig {
+    ios: {
+        deploymentTarget: string;
+        scheme: string;
+    };
+    android: {
+        minSdk: number;
+        targetSdk: number;
+        packageName: string;
+    };
+    plugins: string[];
+}
+declare function defineConfig(config: VueNativeConfig): VueNativeConfig;
+/**
+ * Load and resolve the vue-native.config.{ts,js,mjs} file from the project root.
+ * Returns null if no config file is found.
+ */
+declare function loadConfig(cwd: string): Promise<ResolvedConfig | null>;
+
+export { type ResolvedConfig, type VueNativeConfig, defineConfig, loadConfig };

package/dist/config.js

@@ -0,0 +1,72 @@
+// src/config.ts
+import { existsSync } from "fs";
+import { join } from "path";
+import { pathToFileURL } from "url";
+import pc from "picocolors";
+function defineConfig(config) {
+  return config;
+}
+function validateConfig(config) {
+  if (typeof config !== "object" || config === null) return false;
+  const c = config;
+  if (typeof c.name !== "string" || c.name.length === 0) {
+    console.error(pc.red('  Config error: "name" is required and must be a non-empty string.'));
+    return false;
+  }
+  if (typeof c.bundleId !== "string" || !/^[a-z][a-z0-9]*(\.[a-z][a-z0-9]*)+$/i.test(c.bundleId)) {
+    console.error(pc.red('  Config error: "bundleId" must be a valid reverse-domain identifier (e.g. com.example.myapp).'));
+    return false;
+  }
+  if (typeof c.version !== "string" || c.version.length === 0) {
+    console.error(pc.red('  Config error: "version" is required (e.g. "1.0.0").'));
+    return false;
+  }
+  return true;
+}
+var CONFIG_FILES = [
+  "vue-native.config.ts",
+  "vue-native.config.js",
+  "vue-native.config.mjs"
+];
+async function loadConfig(cwd) {
+  let configPath = null;
+  for (const filename of CONFIG_FILES) {
+    const candidate = join(cwd, filename);
+    if (existsSync(candidate)) {
+      configPath = candidate;
+      break;
+    }
+  }
+  if (!configPath) return null;
+  try {
+    const mod = await import(pathToFileURL(configPath).href);
+    const raw = mod.default ?? mod;
+    if (!validateConfig(raw)) {
+      process.exit(1);
+    }
+    const config = raw;
+    const safeName = config.name.replace(/[^a-zA-Z0-9]/g, "");
+    const resolved = {
+      ...config,
+      ios: {
+        deploymentTarget: config.ios?.deploymentTarget ?? "16.0",
+        scheme: config.ios?.scheme ?? safeName
+      },
+      android: {
+        minSdk: config.android?.minSdk ?? 21,
+        targetSdk: config.android?.targetSdk ?? 34,
+        packageName: config.android?.packageName ?? config.bundleId
+      },
+      plugins: config.plugins ?? []
+    };
+    return resolved;
+  } catch (err) {
+    console.error(pc.red(`  Failed to load config from ${configPath}:`));
+    console.error(pc.red(`  ${err.message}`));
+    process.exit(1);
+  }
+}
+export {
+  defineConfig,
+  loadConfig
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thelacanians/vue-native-cli",
-  "version": "0.1.2",
+  "version": "0.3.0",
   "description": "CLI for creating and running Vue Native apps",
   "license": "MIT",
   "author": "Vue Native Contributors",
@@ -17,7 +17,8 @@
     "vue-native": "./dist/cli.js"
   },
   "exports": {
-    ".": "./dist/cli.js"
+    ".": "./dist/config.js",
+    "./cli": "./dist/cli.js"
   },
   "files": ["dist", "README.md"],
   "scripts": {