@iselect/select 1.0.1 → 1.0.2

package/lib/commands/build.js

@@ -55,47 +55,112 @@ async function build(target, options) {
     }
 }
 
-// ==================== PROJECT TYPE DETECTION ====================
-async function detectProjectType(projectPath) {
-    const hasPackageJson = await fs.pathExists(path.join(projectPath, 'package.json'));
-    const hasViteConfig = await fs.pathExists(path.join(projectPath, 'vite.config.js')) ||
-        await fs.pathExists(path.join(projectPath, 'vite.config.ts'));
-    const hasIndexHtml = await fs.pathExists(path.join(projectPath, 'index.html'));
-    const hasSrcMain = await fs.pathExists(path.join(projectPath, 'src', 'main.js')) ||
-        await fs.pathExists(path.join(projectPath, 'src', 'main.jsx')) ||
-        await fs.pathExists(path.join(projectPath, 'src', 'main.ts')) ||
-        await fs.pathExists(path.join(projectPath, 'src', 'main.tsx'));
-
-    // Check if package.json has a build script
-    let hasBuildScript = false;
-    if (hasPackageJson) {
-        try {
-            const pkg = await fs.readJson(path.join(projectPath, 'package.json'));
-            hasBuildScript = !!(pkg.scripts && pkg.scripts.build);
-        } catch { }
+// ==================== FRAMEWORK SIGNATURES (Vercel-style) ====================
+const FRAMEWORK_SIGNATURES = {
+    // Next.js
+    'next.config.js': { name: 'Next.js', build: 'npm run build', output: '.next', icon: '▲' },
+    'next.config.mjs': { name: 'Next.js', build: 'npm run build', output: '.next', icon: '▲' },
+    'next.config.ts': { name: 'Next.js', build: 'npm run build', output: '.next', icon: '▲' },
+
+    // Astro
+    'astro.config.mjs': { name: 'Astro', build: 'npm run build', output: 'dist', icon: '🚀' },
+    'astro.config.js': { name: 'Astro', build: 'npm run build', output: 'dist', icon: '🚀' },
+    'astro.config.ts': { name: 'Astro', build: 'npm run build', output: 'dist', icon: '🚀' },
+
+    // SvelteKit
+    'svelte.config.js': { name: 'SvelteKit', build: 'npm run build', output: 'build', icon: '🔶' },
+    'svelte.config.ts': { name: 'SvelteKit', build: 'npm run build', output: 'build', icon: '🔶' },
+
+    // Nuxt
+    'nuxt.config.js': { name: 'Nuxt', build: 'npm run build', output: '.nuxt', icon: '💚' },
+    'nuxt.config.ts': { name: 'Nuxt', build: 'npm run build', output: '.nuxt', icon: '💚' },
+
+    // Remix
+    'remix.config.js': { name: 'Remix', build: 'npm run build', output: 'build', icon: '💿' },
+
+    // Gatsby
+    'gatsby-config.js': { name: 'Gatsby', build: 'npm run build', output: 'public', icon: '💜' },
+    'gatsby-config.ts': { name: 'Gatsby', build: 'npm run build', output: 'public', icon: '💜' },
+
+    // Vite (generic)
+    'vite.config.js': { name: 'Vite', build: 'npm run build', output: 'dist', icon: '⚡' },
+    'vite.config.ts': { name: 'Vite', build: 'npm run build', output: 'dist', icon: '⚡' },
+    'vite.config.mjs': { name: 'Vite', build: 'npm run build', output: 'dist', icon: '⚡' },
+
+    // Angular
+    'angular.json': { name: 'Angular', build: 'npm run build', output: 'dist', icon: '🅰️' },
+
+    // Vue CLI
+    'vue.config.js': { name: 'Vue CLI', build: 'npm run build', output: 'dist', icon: '💚' },
+};
+
+// Package.json dependency-based detection
+const DEPENDENCY_SIGNATURES = {
+    'next': { name: 'Next.js', build: 'npm run build', output: '.next', icon: '▲' },
+    '@remix-run/react': { name: 'Remix', build: 'npm run build', output: 'build', icon: '💿' },
+    'gatsby': { name: 'Gatsby', build: 'npm run build', output: 'public', icon: '💜' },
+    '@angular/core': { name: 'Angular', build: 'npm run build', output: 'dist', icon: '🅰️' },
+    'react-scripts': { name: 'Create React App', build: 'npm run build', output: 'build', icon: '⚛️' },
+};
+
+// ==================== FRAMEWORK DETECTION ====================
+async function detectFramework(projectPath) {
+    // 1. Check for framework config files
+    for (const [configFile, framework] of Object.entries(FRAMEWORK_SIGNATURES)) {
+        if (await fs.pathExists(path.join(projectPath, configFile))) {
+            return { ...framework, detected: 'config', configFile };
+        }
     }
 
-    // Static site: has index.html but no package.json or no build script
-    if (hasIndexHtml && (!hasPackageJson || !hasBuildScript)) {
-        return 'static';
-    }
+    // 2. Check package.json dependencies
+    const pkgPath = path.join(projectPath, 'package.json');
+    if (await fs.pathExists(pkgPath)) {
+        try {
+            const pkg = await fs.readJson(pkgPath);
+            const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
 
-    // Vite project
-    if (hasViteConfig) {
-        return 'vite';
-    }
+            for (const [dep, framework] of Object.entries(DEPENDENCY_SIGNATURES)) {
+                if (allDeps[dep]) {
+                    return { ...framework, detected: 'dependency', dependency: dep };
+                }
+            }
 
-    // Has package.json with build script
-    if (hasPackageJson && hasBuildScript) {
-        return 'bundled';
+            // Check for generic build script
+            if (pkg.scripts?.build) {
+                return {
+                    name: 'Custom',
+                    build: 'npm run build',
+                    output: 'dist',
+                    icon: '📦',
+                    detected: 'build-script'
+                };
+            }
+        } catch { }
     }
 
-    // Default to static if just has HTML
+    // 3. Static site detection
+    const hasIndexHtml = await fs.pathExists(path.join(projectPath, 'index.html'));
     if (hasIndexHtml) {
-        return 'static';
+        return {
+            name: 'Static',
+            build: null, // No build needed
+            output: '.',
+            icon: '📄',
+            detected: 'static'
+        };
     }
 
-    return 'unknown';
+    return null;
+}
+
+// ==================== PROJECT TYPE DETECTION (legacy wrapper) ====================
+async function detectProjectType(projectPath) {
+    const framework = await detectFramework(projectPath);
+
+    if (!framework) return 'unknown';
+    if (framework.detected === 'static') return 'static';
+    if (framework.name === 'Vite') return 'vite';
+    return 'bundled';
 }
 
 // ==================== INLINE BUILD ====================
@@ -242,40 +307,55 @@ async function buildWeb(config, options) {
         return;
     }
 
-    // Auto-detect project type
-    const projectType = await detectProjectType(projectPath);
-    console.log(chalk.gray(`   Detected: ${projectType} project`));
+    // Auto-detect framework (Vercel-style)
+    const framework = await detectFramework(projectPath);
 
-    if (projectType === 'static') {
-        console.log(chalk.gray('   Mode: Static site (copying files directly)\n'));
-        await copyStaticFiles(projectPath, outputDir);
-        console.log(chalk.green('\n✅ Static web build complete!'));
-        console.log(chalk.gray(`   Output: ${outputDir}/\n`));
-        return;
-    }
-
-    if (projectType === 'unknown') {
+    if (!framework) {
         console.log(chalk.yellow('\n⚠️  Could not detect project type'));
         console.log(chalk.gray('   No index.html or package.json found'));
         console.log(chalk.gray('   Try: slct build web --static\n'));
         process.exit(1);
     }
 
+    // Display detected framework
+    console.log(chalk.cyan(`   ${framework.icon}  Detected: ${chalk.bold(framework.name)}`));
+    if (framework.detected === 'config') {
+        console.log(chalk.gray(`      via ${framework.configFile}`));
+    } else if (framework.detected === 'dependency') {
+        console.log(chalk.gray(`      via ${framework.dependency} dependency`));
+    } else if (framework.detected === 'static') {
+        console.log(chalk.gray('      (static HTML/CSS/JS site)'));
+    }
+    console.log('');
+
+    // Handle static sites
+    if (framework.detected === 'static') {
+        await copyStaticFiles(projectPath, outputDir);
+        console.log(chalk.green('\n✅ Static web build complete!'));
+        console.log(chalk.gray(`   Output: ${outputDir}/\n`));
+        return;
+    }
+
     // Run build command for bundled projects
-    const spinner = ora('Running build command...').start();
+    // Priority: select.json config > detected framework > default
+    const buildCommand = config.build?.command || framework.build || 'npm run build';
+    const finalOutputDir = config.build?.outDir
+        ? path.resolve(projectPath, config.build.outDir)
+        : path.resolve(projectPath, framework.output || 'dist');
+
+    const spinner = ora(`Running: ${chalk.cyan(buildCommand)}`).start();
 
     try {
-        const buildCommand = config.build?.command || 'npm run build';
         execSync(buildCommand, {
             stdio: 'inherit',
             cwd: projectPath
         });
-        spinner.succeed('Web build complete!');
+        spinner.succeed(`${framework.icon} ${framework.name} build complete!`);
 
         // Validate output
-        await validateBuildOutput(outputDir);
+        await validateBuildOutput(finalOutputDir);
 
-        console.log(chalk.gray(`   Output: ${outputDir}/\n`));
+        console.log(chalk.gray(`   Output: ${finalOutputDir}/\n`));
     } catch (error) {
         spinner.fail('Web build failed');
         throw error;

package/lib/commands/init.js

@@ -5,125 +5,125 @@ const inquirer = require('inquirer');
 const ora = require('ora');
 
 async function init(name, options) {
-    console.log(chalk.bold('\n📦 Initialize Select Project\n'));
-
-    // If no name provided, ask for it
-    if (!name) {
-        const answers = await inquirer.prompt([
-            {
-                type: 'input',
-                name: 'name',
-                message: 'Project name:',
-                default: 'my-select-app',
-                validate: (input) => {
-                    if (/^[a-z0-9-]+$/.test(input)) return true;
-                    return 'Project name must be lowercase with hyphens only';
-                }
-            }
-        ]);
-        name = answers.name;
-    }
-
-    const projectDir = path.resolve(process.cwd(), name);
+  console.log(chalk.bold('\n📦 Initialize Select Project\n'));
 
-    // Check if directory exists
-    if (await fs.pathExists(projectDir)) {
-        console.log(chalk.red(`\n❌ Directory "${name}" already exists.\n`));
-        process.exit(1);
-    }
-
-    // Ask for project details
+  // If no name provided, ask for it
+  if (!name) {
     const answers = await inquirer.prompt([
-        {
-            type: 'list',
-            name: 'template',
-            message: 'Select a template:',
-            choices: [
-                { name: 'React + Vite', value: 'react' },
-                { name: 'Vue + Vite', value: 'vue' },
-                { name: 'Vanilla JavaScript', value: 'vanilla' }
-            ],
-            default: options.template
-        },
-        {
-            type: 'checkbox',
-            name: 'platforms',
-            message: 'Target platforms:',
-            choices: [
-                { name: 'Web', value: 'web', checked: true },
-                { name: 'Windows', value: 'windows' },
-                { name: 'macOS', value: 'macos' },
-                { name: 'Linux', value: 'linux' }
-            ]
-        },
-        {
-            type: 'list',
-            name: 'desktopFramework',
-            message: 'Desktop framework:',
-            choices: [
-                { name: 'Tauri (Recommended - smaller, faster)', value: 'tauri' },
-                { name: 'Electron (Larger, more compatible)', value: 'electron' }
-            ],
-            when: (ans) => ans.platforms.some(p => ['windows', 'macos', 'linux'].includes(p))
+      {
+        type: 'input',
+        name: 'name',
+        message: 'Project name:',
+        default: 'my-select-app',
+        validate: (input) => {
+          if (/^[a-z0-9-]+$/.test(input)) return true;
+          return 'Project name must be lowercase with hyphens only';
         }
+      }
     ]);
+    name = answers.name;
+  }
+
+  const projectDir = path.resolve(process.cwd(), name);
+
+  // Check if directory exists
+  if (await fs.pathExists(projectDir)) {
+    console.log(chalk.red(`\n❌ Directory "${name}" already exists.\n`));
+    process.exit(1);
+  }
+
+  // Ask for project details
+  const answers = await inquirer.prompt([
+    {
+      type: 'list',
+      name: 'template',
+      message: 'Select a template:',
+      choices: [
+        { name: 'React + Vite', value: 'react' },
+        { name: 'Vue + Vite', value: 'vue' },
+        { name: 'Vanilla JavaScript', value: 'vanilla' }
+      ],
+      default: options.template
+    },
+    {
+      type: 'checkbox',
+      name: 'platforms',
+      message: 'Target platforms:',
+      choices: [
+        { name: 'Web', value: 'web', checked: true },
+        { name: 'Windows', value: 'windows' },
+        { name: 'macOS', value: 'macos' },
+        { name: 'Linux', value: 'linux' }
+      ]
+    },
+    {
+      type: 'list',
+      name: 'desktopFramework',
+      message: 'Desktop framework:',
+      choices: [
+        { name: 'Tauri (Recommended - smaller, faster)', value: 'tauri' },
+        { name: 'Electron (Larger, more compatible)', value: 'electron' }
+      ],
+      when: (ans) => ans.platforms.some(p => ['windows', 'macos', 'linux'].includes(p))
+    }
+  ]);
+
+  const spinner = ora('Creating project...').start();
+
+  try {
+    // Create project directory
+    await fs.ensureDir(projectDir);
+
+    // Create select.json config
+    const selectConfig = {
+      name: name,
+      version: '1.0.0',
+      description: 'A Select app',
+      platforms: answers.platforms,
+      desktop: {
+        framework: answers.desktopFramework || 'tauri'
+      },
+      build: {
+        command: 'npm run build',
+        devCommand: 'npm run dev',
+        outDir: 'dist'
+      }
+    };
+
+    await fs.writeJson(path.join(projectDir, 'select.json'), selectConfig, { spaces: 2 });
+
+    // Create basic package.json
+    const packageJson = {
+      name: name,
+      version: '1.0.0',
+      private: true,
+      scripts: {
+        dev: 'vite',
+        build: 'vite build',
+        preview: 'vite preview',
+        'slct:build': 'slct build all',
+        'slct:deploy': 'slct deploy'
+      },
+      dependencies: {},
+      devDependencies: {
+        'vite': '^5.0.0'
+      }
+    };
+
+    // Add template-specific dependencies
+    if (answers.template === 'react') {
+      packageJson.dependencies['react'] = '^18.2.0';
+      packageJson.dependencies['react-dom'] = '^18.2.0';
+      packageJson.devDependencies['@vitejs/plugin-react'] = '^4.2.0';
+    } else if (answers.template === 'vue') {
+      packageJson.dependencies['vue'] = '^3.4.0';
+      packageJson.devDependencies['@vitejs/plugin-vue'] = '^4.5.0';
+    }
 
-    const spinner = ora('Creating project...').start();
-
-    try {
-        // Create project directory
-        await fs.ensureDir(projectDir);
-
-        // Create select.json config
-        const selectConfig = {
-            name: name,
-            version: '1.0.0',
-            description: 'A Select app',
-            platforms: answers.platforms,
-            desktop: {
-                framework: answers.desktopFramework || 'tauri'
-            },
-            build: {
-                command: 'npm run build',
-                devCommand: 'npm run dev',
-                outDir: 'dist'
-            }
-        };
-
-        await fs.writeJson(path.join(projectDir, 'select.json'), selectConfig, { spaces: 2 });
-
-        // Create basic package.json
-        const packageJson = {
-            name: name,
-            version: '1.0.0',
-            private: true,
-            scripts: {
-                dev: 'vite',
-                build: 'vite build',
-                preview: 'vite preview',
-                'slct:build': 'slct build all',
-                'slct:deploy': 'slct deploy'
-            },
-            dependencies: {},
-            devDependencies: {
-                'vite': '^5.0.0'
-            }
-        };
-
-        // Add template-specific dependencies
-        if (answers.template === 'react') {
-            packageJson.dependencies['react'] = '^18.2.0';
-            packageJson.dependencies['react-dom'] = '^18.2.0';
-            packageJson.devDependencies['@vitejs/plugin-react'] = '^4.2.0';
-        } else if (answers.template === 'vue') {
-            packageJson.dependencies['vue'] = '^3.4.0';
-            packageJson.devDependencies['@vitejs/plugin-vue'] = '^4.5.0';
-        }
-
-        await fs.writeJson(path.join(projectDir, 'package.json'), packageJson, { spaces: 2 });
+    await fs.writeJson(path.join(projectDir, 'package.json'), packageJson, { spaces: 2 });
 
-        // Create basic index.html
-        const indexHtml = `<!DOCTYPE html>
+    // Create basic index.html
+    const indexHtml = `<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
@@ -136,21 +136,22 @@ async function init(name, options) {
 </body>
 </html>`;
 
-        await fs.writeFile(path.join(projectDir, 'index.html'), indexHtml);
+    await fs.writeFile(path.join(projectDir, 'index.html'), indexHtml);
 
-        // Create src directory with basic file
-        await fs.ensureDir(path.join(projectDir, 'src'));
+    // Create src directory with basic file
+    await fs.ensureDir(path.join(projectDir, 'src'));
 
-        // Create GitHub Actions workflow
-        await createGithubWorkflow(projectDir, answers.desktopFramework || 'tauri', name);
+    // Create GitHub Actions workflow
+    await createGithubWorkflow(projectDir, answers.desktopFramework || 'tauri', name);
 
-        if (answers.template === 'react') {
-            await fs.writeFile(path.join(projectDir, 'src', 'main.jsx'), `import React from 'react'
+    if (answers.template === 'react') {
+      await fs.writeFile(path.join(projectDir, 'src', 'main.jsx'), `import React from 'react'
 import ReactDOM from 'react-dom/client'
+import './style.css'
 
 function App() {
     return (
-        <div style={{ padding: '2rem', fontFamily: 'system-ui' }}>
+        <div className="app">
             <h1>Welcome to ${name}</h1>
             <p>Built with Select CLI</p>
         </div>
@@ -159,19 +160,88 @@ function App() {
 
 ReactDOM.createRoot(document.getElementById('app')).render(<App />)
 `);
-        } else {
-            await fs.writeFile(path.join(projectDir, 'src', 'main.js'), `document.getElementById('app').innerHTML = \`
-    <div style="padding: 2rem; font-family: system-ui;">
+      // Create React style.css
+      await fs.writeFile(path.join(projectDir, 'src', 'style.css'), `* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.app {
+    background: white;
+    padding: 3rem 4rem;
+    border-radius: 1rem;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    text-align: center;
+}
+
+h1 {
+    color: #1a202c;
+    margin-bottom: 0.5rem;
+}
+
+p {
+    color: #718096;
+}
+`);
+    } else {
+      // Vanilla JS template
+      await fs.writeFile(path.join(projectDir, 'src', 'main.js'), `import './style.css'
+
+document.getElementById('app').innerHTML = \`
+    <div class="app">
         <h1>Welcome to ${name}</h1>
         <p>Built with Select CLI</p>
     </div>
 \`
 `);
-        }
+      // Create style.css for vanilla
+      await fs.writeFile(path.join(projectDir, 'src', 'style.css'), `* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.app {
+    background: white;
+    padding: 3rem 4rem;
+    border-radius: 1rem;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    text-align: center;
+}
+
+h1 {
+    color: #1a202c;
+    margin-bottom: 0.5rem;
+}
+
+p {
+    color: #718096;
+}
+`);
+    }
 
-        spinner.succeed('Project created successfully!');
+    spinner.succeed('Project created successfully!');
 
-        console.log(chalk.green(`
+    console.log(chalk.green(`
 ✅ Project "${name}" created!
 
 Next steps:
@@ -181,33 +251,33 @@ Next steps:
 
 `));
 
-        // Check for required dependencies
-        await checkDependencies(answers);
+    // Check for required dependencies
+    await checkDependencies(answers);
 
-    } catch (error) {
-        spinner.fail('Failed to create project');
-        console.error(chalk.red(error.message));
-        process.exit(1);
-    }
+  } catch (error) {
+    spinner.fail('Failed to create project');
+    console.error(chalk.red(error.message));
+    process.exit(1);
+  }
 }
 
 async function checkDependencies(answers) {
-    const hasDesktop = answers.platforms?.some(p => ['windows', 'macos', 'linux'].includes(p));
+  const hasDesktop = answers.platforms?.some(p => ['windows', 'macos', 'linux'].includes(p));
 
-    if (hasDesktop && answers.desktopFramework === 'tauri') {
-        console.log(chalk.yellow('\n⚠️  Tauri Requirements:'));
-        console.log(chalk.gray('   Run "slct build desktop" for detailed setup instructions.\n'));
-    }
+  if (hasDesktop && answers.desktopFramework === 'tauri') {
+    console.log(chalk.yellow('\n⚠️  Tauri Requirements:'));
+    console.log(chalk.gray('   Run "slct build desktop" for detailed setup instructions.\n'));
+  }
 }
 
 async function createGithubWorkflow(projectDir, framework, name) {
-    const workflowDir = path.join(projectDir, '.github', 'workflows');
-    await fs.ensureDir(workflowDir);
+  const workflowDir = path.join(projectDir, '.github', 'workflows');
+  await fs.ensureDir(workflowDir);
 
-    let workflowContent = '';
+  let workflowContent = '';
 
-    if (framework === 'tauri') {
-        workflowContent = `name: Build Apps
+  if (framework === 'tauri') {
+    workflowContent = `name: Build Apps
 on:
   push:
     branches: [ main ]
@@ -253,9 +323,9 @@ jobs:
           releaseDraft: true
           prerelease: false
 `;
-    } else {
-        // Electron Workflow
-        workflowContent = `name: Build Apps
+  } else {
+    // Electron Workflow
+    workflowContent = `name: Build Apps
 on:
   push:
     branches: [ main ]
@@ -287,9 +357,9 @@ jobs:
         env:
           GH_TOKEN: \${{ secrets.GITHUB_TOKEN }}
 `;
-    }
+  }
 
-    await fs.writeFile(path.join(workflowDir, 'build.yml'), workflowContent);
+  await fs.writeFile(path.join(workflowDir, 'build.yml'), workflowContent);
 }
 
 module.exports = init;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@iselect/select",
-    "version": "1.0.1",
+    "version": "1.0.2",
     "description": "Build and deploy apps for web, desktop, and mobile from a single codebase",
     "main": "lib/index.js",
     "bin": {