apexcss-cli 0.1.0

package/cli/commands/watch.js

@@ -0,0 +1,150 @@
+/**
+ * Watch command - Watch for config changes and rebuild automatically
+ */
+
+import { watchFile } from 'node:fs';
+import { resolve } from 'node:path';
+import { buildCommand } from './build.js';
+import { loadConfig } from '../utils/config-loader.js';
+import { logger } from '../utils/logger.js';
+
+/**
+ * Build state manager for watch mode
+ */
+export class WatchBuildState {
+  isBuilding = false;
+  pendingBuild = false;
+
+  /**
+   * Check if a build can start
+   * @returns {boolean}
+   */
+  canStartBuild() {
+    if (this.isBuilding) {
+      this.pendingBuild = true;
+      return false;
+    }
+    return true;
+  }
+
+  /**
+   * Mark build as started
+   */
+  startBuild() {
+    this.isBuilding = true;
+  }
+
+  /**
+   * Mark build as completed
+   * @returns {boolean} - True if another build is pending
+   */
+  finishBuild() {
+    this.isBuilding = false;
+    const hasPending = this.pendingBuild;
+    this.pendingBuild = false;
+    return hasPending;
+  }
+}
+
+/**
+ * Perform a single build in watch mode
+ * @param {object} options - Build options
+ * @param {WatchBuildState} state - Build state manager
+ * @param {object} [deps] - Dependencies (for testing)
+ * @returns {Promise<boolean>} - True if build succeeded
+ */
+/**
+ * Perform a single build in watch mode
+ * @param {object} options - Build options
+ * @param {WatchBuildState} state - Build state manager
+ * @param {object} [deps] - Dependencies (for testing)
+ * @returns {Promise<boolean>} - True if build succeeded
+ */
+export async function performWatchBuild(options, state, deps) {
+  const dependencies = deps || { loadConfig, buildCommand, logger };
+  if (!state.canStartBuild()) {
+    return false;
+  }
+
+  state.startBuild();
+  dependencies.logger.info('Config changed, rebuilding...');
+  dependencies.logger.newline();
+
+  let success = false;
+  try {
+    // Reload config to validate it
+    dependencies.loadConfig(options.configPath);
+
+    // Build
+    await dependencies.buildCommand(options);
+    success = true;
+  } catch (error) {
+    dependencies.logger.error(`Build failed: ${error.message}`);
+  }
+
+  dependencies.logger.newline();
+  dependencies.logger.info('Waiting for changes... (Press Ctrl+C to stop)');
+  dependencies.logger.newline();
+
+  const hasPending = state.finishBuild();
+
+  // If another change occurred during build, rebuild
+  if (hasPending) {
+    return performWatchBuild(options, state, dependencies);
+  }
+
+  return success;
+}
+
+/**
+ * Watch for changes and rebuild
+ * @param {object} options - Command options
+ */
+export async function watchCommand(options) {
+  const cwd = process.cwd();
+  const configPath = resolve(cwd, options.configPath);
+
+  logger.header('ApexCSS Watch Mode');
+  logger.newline();
+  logger.info(`Watching: ${logger.path(options.configPath)}`);
+  logger.info(`Output: ${logger.path(options.outputDir)}`);
+  logger.newline();
+
+  // Perform initial build
+  try {
+    await buildCommand(options);
+    logger.newline();
+    logger.info('Waiting for changes... (Press Ctrl+C to stop)');
+    logger.newline();
+  } catch (error) {
+    logger.error(`Initial build failed: ${error.message}`);
+    logger.info('Continuing to watch for changes...');
+    logger.newline();
+  }
+
+  // Watch the config file
+  const state = new WatchBuildState();
+
+  // Use fs.watchFile for polling (works across all platforms)
+  watchFile(configPath, { interval: 500 }, async (curr, prev) => {
+    if (curr.mtime !== prev.mtime) {
+      await performWatchBuild(options, state);
+    }
+  });
+
+  // Keep the process alive
+  process.stdin.resume();
+
+  // Handle graceful shutdown
+  process.on('SIGINT', () => {
+    logger.newline();
+    logger.info('Stopping watch mode...');
+    process.exit(0);
+  });
+
+  process.on('SIGTERM', () => {
+    logger.newline();
+    logger.info('Stopping watch mode...');
+    process.exit(0);
+  });
+}

package/cli/index.js

@@ -0,0 +1,129 @@
+import { Command } from 'commander';
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+
+import { initCommand } from './commands/init.js';
+import { buildCommand } from './commands/build.js';
+import { watchCommand } from './commands/watch.js';
+import { doctorCommand } from './commands/doctor.js';
+import { logger } from './utils/logger.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Read package.json for version
+let version = '0.0.0';
+const packageJsonPath = join(__dirname, '..', 'package.json');
+const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'));
+version = packageJson.version;
+
+/**
+ * Main CLI entry point
+ * @param {string[]} args - Command line arguments
+ */
+export function cli(args) {
+  const program = new Command();
+
+  program
+    .name('apexcss')
+    .description('ApexCSS CLI - Build and customize your CSS framework')
+    .version(version, '-v, --version');
+
+  // Global options
+  program
+    .option('-c, --config <path>', 'path to config file', './apex.config.js')
+    .option('-o, --output <dir>', 'output directory', './dist/')
+    .option('--minify', 'minify output CSS', false)
+    .option('--sourcemap', 'generate source maps', false);
+
+  // Init command
+  program
+    .command('init')
+    .description('Initialize ApexCSS configuration in your project')
+    .option('-f, --framework <name>', 'specify framework (react, vue, angular, svelte, astro, next, nuxt, vanilla, astro)')
+    .option('--no-interactive', 'skip interactive prompts')
+    .option('--no-import', 'skip adding imports to entry files')
+    .action(async (options) => {
+      try {
+        await initCommand({
+          configPath: program.opts().config,
+          outputDir: program.opts().output,
+          framework: options.framework,
+          interactive: options.interactive,
+          addImport: options.import
+        });
+      } catch (error) {
+        logger.error(error.message);
+        process.exit(1);
+      }
+    });
+
+  // Build command
+  program
+    .command('build')
+    .description('Build custom CSS from configuration')
+    .option('--format <format>', 'output format (css, scss, both)', 'css')
+    .option('-l, --layer <layers>', 'build specific layers (base, utilities, themes, all). Comma-separated for multiple', 'all')
+    .action(async (options) => {
+      try {
+        await buildCommand({
+          configPath: program.opts().config,
+          outputDir: program.opts().output,
+          minify: program.opts().minify,
+          sourcemap: program.opts().sourcemap,
+          format: options.format,
+          layers: options.layer
+        });
+      } catch (error) {
+        logger.error(error.message);
+        process.exit(1);
+      }
+    });
+
+  // Watch command
+  program
+    .command('watch')
+    .description('Watch for config changes and rebuild automatically')
+    .action(async () => {
+      try {
+        await watchCommand({
+          configPath: program.opts().config,
+          outputDir: program.opts().output,
+          minify: program.opts().minify,
+          sourcemap: program.opts().sourcemap
+        });
+      } catch (error) {
+        logger.error(error.message);
+        process.exit(1);
+      }
+    });
+
+  // Doctor command
+  program
+    .command('doctor')
+    .description('Check system setup and diagnose issues')
+    .action(async () => {
+      try {
+        await doctorCommand();
+      } catch (error) {
+        logger.error(error.message);
+        process.exit(1);
+      }
+    });
+
+  // Handle unknown commands
+  program.on('command:*', (operands) => {
+    logger.error(`Unknown command: ${operands[0]}`);
+    logger.info('Run "apexcss --help" for available commands');
+    process.exit(1);
+  });
+
+  // Parse arguments
+  program.parse(args);
+
+  // Show help if no command provided
+  if (!program.args.length) {
+    program.help();
+  }
+}