create-asterui 0.1.1 → 0.1.3

package/README.md

@@ -12,6 +12,25 @@ pnpm create asterui
 yarn create asterui
 ```
 
+### With arguments
+
+```bash
+npm create asterui my-app
+npm create asterui my-app --js
+npm create asterui my-app --themes business
+npm create asterui my-app --js --themes all --pm pnpm
+```
+
+### Options
+
+```
+--js              Use JavaScript instead of TypeScript
+--ts              Use TypeScript (default)
+--themes <preset> Theme preset: light-dark, business, all
+--pm <manager>    Package manager: npm, pnpm, yarn
+-h, --help        Show help message
+```
+
 ## What it does
 
 - Creates a new Vite + React project
@@ -20,15 +39,6 @@ yarn create asterui
 - Sets up theme configuration (light/dark, business/corporate, or custom)
 - Supports TypeScript or JavaScript
 
-## Options
-
-The CLI will prompt you for:
-
-- **Project name** - Directory name for your project
-- **Language** - TypeScript (recommended) or JavaScript
-- **Themes** - Light/Dark, Business/Corporate, All themes, or custom selection
-- **Package manager** - npm, pnpm, or yarn (auto-detected)
-
 ## After scaffolding
 
 ```bash

package/dist/index.js

@@ -13,6 +13,58 @@ const DAISYUI_THEMES = [
     'luxury', 'dracula', 'cmyk', 'autumn', 'business', 'acid', 'lemonade',
     'night', 'coffee', 'winter', 'dim', 'nord', 'sunset'
 ];
+const THEME_PRESETS = ['light-dark', 'business', 'all'];
+function parseArgs() {
+    const args = process.argv.slice(2);
+    const result = {};
+    for (let i = 0; i < args.length; i++) {
+        const arg = args[i];
+        if (arg === '--help' || arg === '-h') {
+            result.help = true;
+        }
+        else if (arg === '--js') {
+            result.language = 'js';
+        }
+        else if (arg === '--ts') {
+            result.language = 'ts';
+        }
+        else if (arg === '--themes' && args[i + 1]) {
+            result.themes = args[++i];
+        }
+        else if (arg === '--pm' && args[i + 1]) {
+            const pm = args[++i];
+            if (pm === 'npm' || pm === 'pnpm' || pm === 'yarn') {
+                result.pm = pm;
+            }
+        }
+        else if (!arg.startsWith('-') && !result.projectName) {
+            result.projectName = arg;
+        }
+    }
+    return result;
+}
+function showHelp() {
+    console.log(`
+${pc.bold('create-asterui')} - Scaffold a new AsterUI project
+
+${pc.bold('Usage:')}
+  npm create asterui [project-name] [options]
+
+${pc.bold('Options:')}
+  --js              Use JavaScript instead of TypeScript
+  --ts              Use TypeScript (default)
+  --themes <preset> Theme preset: light-dark, business, all
+  --pm <manager>    Package manager: npm, pnpm, yarn
+  -h, --help        Show this help message
+
+${pc.bold('Examples:')}
+  npm create asterui
+  npm create asterui my-app
+  npm create asterui my-app --js
+  npm create asterui my-app --themes business
+  npm create asterui my-app --js --themes all --pm pnpm
+`);
+}
 function detectPackageManager() {
     const userAgent = process.env.npm_config_user_agent || '';
     if (userAgent.includes('pnpm'))
@@ -21,46 +73,54 @@ function detectPackageManager() {
         return 'yarn';
     return 'npm';
 }
-function getInstallCommand(pm) {
-    return pm === 'yarn' ? 'yarn' : `${pm} install`;
-}
 function getRunCommand(pm) {
     return pm === 'npm' ? 'npm run' : pm;
 }
 async function main() {
+    const cliArgs = parseArgs();
+    if (cliArgs.help) {
+        showHelp();
+        process.exit(0);
+    }
     console.log();
     p.intro(pc.bgCyan(pc.black(' create-asterui ')));
     const detectedPm = detectPackageManager();
     const options = await p.group({
-        projectName: () => p.text({
-            message: 'Project name',
-            placeholder: 'my-asterui-app',
-            defaultValue: 'my-asterui-app',
-            validate: (value) => {
-                if (!value)
-                    return 'Project name is required';
-                if (!/^[a-z0-9-]+$/.test(value))
-                    return 'Project name must be lowercase with hyphens only';
-                if (fs.existsSync(value))
-                    return `Directory "${value}" already exists`;
-            },
-        }),
-        language: () => p.select({
-            message: 'Language',
-            options: [
-                { value: 'ts', label: 'TypeScript', hint: 'recommended' },
-                { value: 'js', label: 'JavaScript' },
-            ],
-        }),
-        themePreset: () => p.select({
-            message: 'Themes',
-            options: [
-                { value: 'light-dark', label: 'Light/Dark', hint: 'recommended' },
-                { value: 'business', label: 'Business/Corporate' },
-                { value: 'all', label: 'All themes' },
-                { value: 'custom', label: 'Choose specific...' },
-            ],
-        }),
+        projectName: () => cliArgs.projectName
+            ? Promise.resolve(cliArgs.projectName)
+            : p.text({
+                message: 'Project name',
+                placeholder: 'my-asterui-app',
+                defaultValue: 'my-asterui-app',
+                validate: (value) => {
+                    if (!value)
+                        return 'Project name is required';
+                    if (!/^[a-z0-9-]+$/.test(value))
+                        return 'Project name must be lowercase with hyphens only';
+                    if (fs.existsSync(value))
+                        return `Directory "${value}" already exists`;
+                },
+            }),
+        language: () => cliArgs.language
+            ? Promise.resolve(cliArgs.language)
+            : p.select({
+                message: 'Language',
+                options: [
+                    { value: 'ts', label: 'TypeScript', hint: 'recommended' },
+                    { value: 'js', label: 'JavaScript' },
+                ],
+            }),
+        themePreset: () => cliArgs.themes && THEME_PRESETS.includes(cliArgs.themes)
+            ? Promise.resolve(cliArgs.themes)
+            : p.select({
+                message: 'Themes',
+                options: [
+                    { value: 'light-dark', label: 'Light/Dark', hint: 'recommended' },
+                    { value: 'business', label: 'Business/Corporate' },
+                    { value: 'all', label: 'All themes' },
+                    { value: 'custom', label: 'Choose specific...' },
+                ],
+            }),
         customThemes: ({ results }) => results.themePreset === 'custom'
             ? p.multiselect({
                 message: 'Select themes',
@@ -69,14 +129,25 @@ async function main() {
                 required: true,
             })
             : Promise.resolve([]),
-        packageManager: () => p.select({
-            message: 'Package manager',
+        packageManager: () => cliArgs.pm
+            ? Promise.resolve(cliArgs.pm)
+            : p.select({
+                message: 'Package manager',
+                options: [
+                    { value: detectedPm, label: detectedPm, hint: 'detected' },
+                    ...['npm', 'pnpm', 'yarn']
+                        .filter((pm) => pm !== detectedPm)
+                        .map((pm) => ({ value: pm, label: pm })),
+                ],
+            }),
+        optionalDeps: () => p.multiselect({
+            message: 'Optional components (require extra dependencies)',
             options: [
-                { value: detectedPm, label: detectedPm, hint: 'detected' },
-                ...['npm', 'pnpm', 'yarn']
-                    .filter((pm) => pm !== detectedPm)
-                    .map((pm) => ({ value: pm, label: pm })),
+                { value: 'chart', label: 'Chart', hint: 'apexcharts' },
+                { value: 'qrcode', label: 'QRCode', hint: 'qrcode' },
+                { value: 'virtuallist', label: 'VirtualList', hint: '@tanstack/react-virtual' },
             ],
+            required: false,
         }),
     }, {
         onCancel: () => {
@@ -94,7 +165,7 @@ async function main() {
     // Copy template files
     copyDir(templateDir, projectDir);
     // Generate package.json
-    const packageJson = generatePackageJson(options.projectName, options.language);
+    const packageJson = generatePackageJson(options.projectName, options.language, options.optionalDeps);
     fs.writeFileSync(path.join(projectDir, 'package.json'), JSON.stringify(packageJson, null, 2));
     // Generate index.css with theme config
     const themes = getThemes(options.themePreset, options.customThemes);
@@ -137,7 +208,7 @@ function copyDir(src, dest) {
         }
     }
 }
-function generatePackageJson(name, language) {
+function generatePackageJson(name, language, optionalDeps = []) {
     const isTs = language === 'ts';
     const pkg = {
         name,
@@ -163,10 +234,25 @@ function generatePackageJson(name, language) {
             vite: '^7.0.0',
         },
     };
+    // Add optional dependencies
+    const deps = pkg.dependencies;
+    if (optionalDeps.includes('chart')) {
+        deps['apexcharts'] = '^5.0.0';
+    }
+    if (optionalDeps.includes('qrcode')) {
+        deps['qrcode'] = '^1.5.0';
+    }
+    if (optionalDeps.includes('virtuallist')) {
+        deps['@tanstack/react-virtual'] = '^3.0.0';
+    }
     if (isTs) {
-        pkg.devDependencies['typescript'] = '^5.6.0';
-        pkg.devDependencies['@types/react'] = '^19.0.0';
-        pkg.devDependencies['@types/react-dom'] = '^19.0.0';
+        const devDeps = pkg.devDependencies;
+        devDeps['typescript'] = '^5.6.0';
+        devDeps['@types/react'] = '^19.0.0';
+        devDeps['@types/react-dom'] = '^19.0.0';
+        if (optionalDeps.includes('qrcode')) {
+            devDeps['@types/qrcode'] = '^1.5.0';
+        }
     }
     return pkg;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-asterui",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Create a new AsterUI project",
   "type": "module",
   "bin": {