@shellui/cli 0.0.1 → 0.0.5

package/src/commands/start.js

@@ -0,0 +1,180 @@
+import { createServer } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import fs from 'fs';
+import pc from 'picocolors';
+import {
+  loadConfig,
+  getCoreSrcPath,
+  createResolveAlias,
+  createPostCSSConfig,
+  createViteDefine,
+  resolvePackagePath,
+} from '../utils/index.js';
+import { serviceWorkerDevPlugin } from '../utils/service-worker-plugin.js';
+
+let currentServer = null;
+let configWatcher = null;
+let restartTimeout = null;
+let isFirstStart = true;
+
+/**
+ * Start the Vite server with current configuration
+ * @param {string} root - Root directory
+ * @param {string} cwd - Current working directory
+ * @param {boolean} shouldOpen - Whether to open the browser (only on first start)
+ * @returns {Promise<import('vite').ViteDevServer>}
+ */
+async function startServer(root, cwd, shouldOpen = false) {
+  // Load configuration
+  const config = await loadConfig(root);
+
+  // Get core package paths
+  const corePackagePath = resolvePackagePath('@shellui/core');
+  const coreSrcPath = getCoreSrcPath();
+
+  // Check if static folder exists in project root
+  const staticPath = path.resolve(cwd, root, 'static');
+  const publicDir = fs.existsSync(staticPath) ? staticPath : false;
+
+  const server = await createServer({
+    root: coreSrcPath,
+    plugins: [react(), serviceWorkerDevPlugin(corePackagePath, coreSrcPath)],
+    define: createViteDefine(config),
+    resolve: {
+      alias: createResolveAlias(),
+    },
+    css: {
+      postcss: createPostCSSConfig(),
+    },
+    publicDir: publicDir || false,
+    // Disable source maps in dev mode to avoid errors from missing source map files
+    // Source maps are enabled in build mode for production debugging
+    esbuild: {
+      sourcemap: false,
+    },
+    server: {
+      port: config.port || 3000,
+      open: shouldOpen,
+      fs: {
+        // Allow serving files from core package, SDK package, and user's project
+        allow: [corePackagePath, cwd],
+      },
+    },
+  });
+
+  await server.listen();
+  return server;
+}
+
+/**
+ * Restart the server when config changes
+ * @param {string} root - Root directory
+ * @param {string} cwd - Current working directory
+ */
+async function restartServer(root, cwd) {
+  if (restartTimeout) {
+    clearTimeout(restartTimeout);
+  }
+
+  restartTimeout = setTimeout(async () => {
+    try {
+      console.log(pc.yellow('\n🔄 Config file changed, restarting server...\n'));
+
+      // Close existing server
+      if (currentServer) {
+        await currentServer.close();
+      }
+
+      // Start new server with updated config (don't open browser on restart)
+      currentServer = await startServer(root, cwd, false);
+      currentServer.printUrls();
+    } catch (e) {
+      console.error(pc.red(`Error restarting server: ${e.message}`));
+    }
+  }, 300); // Debounce: wait 300ms before restarting
+}
+
+/**
+ * Watch config file for changes
+ * @param {string} root - Root directory
+ * @param {string} cwd - Current working directory
+ */
+function watchConfig(root, cwd) {
+  const configDir = path.resolve(cwd, root);
+  const tsConfigPath = path.join(configDir, 'shellui.config.ts');
+  const jsonConfigPath = path.join(configDir, 'shellui.config.json');
+
+  // Determine which config file exists (prefer TypeScript)
+  let configPath = null;
+  if (fs.existsSync(tsConfigPath)) {
+    configPath = tsConfigPath;
+  } else if (fs.existsSync(jsonConfigPath)) {
+    configPath = jsonConfigPath;
+  }
+
+  // Only watch if config file exists
+  if (!configPath) {
+    console.log(
+      pc.yellow(`No shellui.config.ts or shellui.config.json found, config watching disabled.`),
+    );
+    return;
+  }
+
+  // Close existing watcher if any
+  if (configWatcher) {
+    configWatcher.close();
+  }
+
+  configWatcher = fs.watch(configPath, { persistent: true }, async (eventType) => {
+    if (eventType === 'change') {
+      await restartServer(root, cwd);
+    }
+  });
+
+  console.log(pc.green(`👀 Watching config file: ${configPath}`));
+}
+
+/**
+ * Start command - Starts the ShellUI development server
+ * @param {string} root - Root directory (default: '.')
+ */
+export async function startCommand(root = '.') {
+  const cwd = process.cwd();
+
+  console.log(pc.blue(`Starting ShellUI...`));
+
+  try {
+    // Start initial server (open browser only on first start)
+    currentServer = await startServer(root, cwd, isFirstStart);
+    isFirstStart = false;
+    currentServer.printUrls();
+
+    // Watch config file for changes
+    watchConfig(root, cwd);
+
+    // Handle graceful shutdown
+    process.on('SIGTERM', async () => {
+      if (configWatcher) {
+        configWatcher.close();
+      }
+      if (currentServer) {
+        await currentServer.close();
+      }
+      process.exit(0);
+    });
+
+    process.on('SIGINT', async () => {
+      if (configWatcher) {
+        configWatcher.close();
+      }
+      if (currentServer) {
+        await currentServer.close();
+      }
+      process.exit(0);
+    });
+  } catch (e) {
+    console.error(pc.red(`Error starting server: ${e.message}`));
+    process.exit(1);
+  }
+}

package/src/utils/__tests__/config-loaders.test.js

@@ -0,0 +1,211 @@
+import { test, describe, beforeEach, afterEach, expect } from 'vitest';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+import { loadJsonConfig, loadTypeScriptConfig } from '../config-loaders.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Create a temporary test directory
+const testDir = path.join(__dirname, 'test-fixtures-loaders');
+const originalConsoleLog = console.log;
+const originalConsoleError = console.error;
+
+describe('Config Loaders', () => {
+  beforeEach(() => {
+    // Create test directory
+    if (!fs.existsSync(testDir)) {
+      fs.mkdirSync(testDir, { recursive: true });
+    }
+    // Suppress console output during tests
+    console.log = () => {};
+    console.error = () => {};
+  });
+
+  afterEach(() => {
+    // Restore console first
+    console.log = originalConsoleLog;
+    console.error = originalConsoleError;
+
+    // Clean up test directory
+    if (fs.existsSync(testDir)) {
+      const files = fs.readdirSync(testDir);
+      for (const file of files) {
+        const filePath = path.join(testDir, file);
+        try {
+          const stat = fs.statSync(filePath);
+          if (stat.isDirectory()) {
+            fs.rmSync(filePath, { recursive: true, force: true });
+          } else {
+            fs.unlinkSync(filePath);
+          }
+        } catch (e) {
+          // Ignore cleanup errors
+        }
+      }
+      try {
+        fs.rmdirSync(testDir);
+      } catch (e) {
+        // Ignore cleanup errors
+      }
+    }
+  });
+
+  describe('loadJsonConfig', () => {
+    test('should load valid JSON config file', () => {
+      const configPath = path.join(testDir, 'test-config.json');
+      const expectedConfig = {
+        name: 'test-app',
+        version: '1.0.0',
+        routes: ['/home', '/about'],
+      };
+
+      fs.writeFileSync(configPath, JSON.stringify(expectedConfig, null, 2));
+
+      const config = loadJsonConfig(configPath);
+
+      expect(config).toStrictEqual(expectedConfig);
+    });
+
+    test('should throw error for invalid JSON', () => {
+      const configPath = path.join(testDir, 'invalid-config.json');
+      fs.writeFileSync(configPath, '{ invalid json }');
+
+      expect(() => {
+        loadJsonConfig(configPath);
+      }).toThrow(/JSON/);
+    });
+
+    test('should throw error for missing file', () => {
+      const configPath = path.join(testDir, 'non-existent.json');
+
+      expect(() => {
+        loadJsonConfig(configPath);
+      }).toThrow(/ENOENT/);
+    });
+
+    test('should handle empty JSON object', () => {
+      const configPath = path.join(testDir, 'empty-config.json');
+      fs.writeFileSync(configPath, '{}');
+
+      const config = loadJsonConfig(configPath);
+
+      expect(config).toStrictEqual({});
+    });
+
+    test('should handle complex nested JSON', () => {
+      const configPath = path.join(testDir, 'complex-config.json');
+      const expectedConfig = {
+        app: {
+          name: 'test',
+          settings: {
+            theme: 'dark',
+            language: 'en',
+          },
+        },
+        features: ['feature1', 'feature2'],
+      };
+
+      fs.writeFileSync(configPath, JSON.stringify(expectedConfig, null, 2));
+
+      const config = loadJsonConfig(configPath);
+
+      expect(config).toStrictEqual(expectedConfig);
+    });
+  });
+
+  describe('loadTypeScriptConfig', () => {
+    test('should load valid TypeScript config file with default export', async () => {
+      const configPath = path.join(testDir, 'test-config.ts');
+      const expectedConfig = {
+        name: 'test-app',
+        version: '2.0.0',
+      };
+
+      const tsConfigContent = `export default ${JSON.stringify(expectedConfig)};`;
+      fs.writeFileSync(configPath, tsConfigContent);
+
+      const config = await loadTypeScriptConfig(configPath, testDir);
+
+      expect(config).toStrictEqual(expectedConfig);
+    });
+
+    test('should load TypeScript config with named export', async () => {
+      const configPath = path.join(testDir, 'test-config-named.ts');
+      const expectedConfig = {
+        name: 'test-app',
+        routes: ['/home'],
+      };
+
+      const tsConfigContent = `export const config = ${JSON.stringify(expectedConfig)};`;
+      fs.writeFileSync(configPath, tsConfigContent);
+
+      const loadedConfig = await loadTypeScriptConfig(configPath, testDir);
+
+      expect(loadedConfig).toStrictEqual(expectedConfig);
+    });
+
+    test('should handle TypeScript config with both default and named exports (prefers default)', async () => {
+      const configPath = path.join(testDir, 'test-config-both.ts');
+      const defaultConfig = { name: 'default' };
+      const namedConfig = { name: 'named' };
+
+      const tsConfigContent = `export default ${JSON.stringify(defaultConfig)};\nexport const config = ${JSON.stringify(namedConfig)};`;
+      fs.writeFileSync(configPath, tsConfigContent);
+
+      const loadedConfig = await loadTypeScriptConfig(configPath, testDir);
+
+      expect(loadedConfig).toStrictEqual(defaultConfig);
+    });
+
+    test('should throw error for invalid TypeScript file', async () => {
+      const configPath = path.join(testDir, 'invalid-config.ts');
+      fs.writeFileSync(configPath, 'export const invalid = syntax error;');
+
+      await expect(loadTypeScriptConfig(configPath, testDir)).rejects.toThrow(
+        /Failed to load TypeScript config/,
+      );
+    });
+
+    test('should throw error for missing TypeScript file', async () => {
+      const configPath = path.join(testDir, 'non-existent.ts');
+
+      await expect(loadTypeScriptConfig(configPath, testDir)).rejects.toThrow(
+        /Failed to load TypeScript config/,
+      );
+    });
+
+    test('should clean up temporary loader script', async () => {
+      const configPath = path.join(testDir, 'cleanup-test.ts');
+      const expectedConfig = { name: 'cleanup-test' };
+
+      const tsConfigContent = `export default ${JSON.stringify(expectedConfig)};`;
+      fs.writeFileSync(configPath, tsConfigContent);
+
+      await loadTypeScriptConfig(configPath, testDir);
+
+      const tempScriptPath = path.join(testDir, '.shellui-config-loader.mjs');
+      expect(fs.existsSync(tempScriptPath)).toBe(false);
+    });
+
+    test('should handle complex TypeScript config with functions and types', async () => {
+      const configPath = path.join(testDir, 'complex-config.ts');
+      const expectedConfig = {
+        name: 'complex-app',
+        settings: {
+          port: 3000,
+          host: 'localhost',
+        },
+      };
+
+      const tsConfigContent = `interface Config { name: string; settings: { port: number; host: string; }; }\nconst config: Config = ${JSON.stringify(expectedConfig)};\nexport default config;`;
+      fs.writeFileSync(configPath, tsConfigContent);
+
+      const loadedConfig = await loadTypeScriptConfig(configPath, testDir);
+
+      expect(loadedConfig).toStrictEqual(expectedConfig);
+    });
+  });
+});

package/src/utils/__tests__/config.test.js

@@ -0,0 +1,146 @@
+import { test, describe, beforeEach, afterEach, expect } from 'vitest';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+import { loadConfig } from '../config.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Create a temporary test directory
+const testDir = path.join(__dirname, 'test-fixtures-config');
+const originalConsoleLog = console.log;
+const originalConsoleError = console.error;
+const originalCwd = process.cwd();
+
+describe('loadConfig', () => {
+  beforeEach(() => {
+    // Create test directory
+    if (!fs.existsSync(testDir)) {
+      fs.mkdirSync(testDir, { recursive: true });
+    }
+    // Change to test directory
+    process.chdir(testDir);
+    // Suppress console output during tests
+    console.log = () => {};
+    console.error = () => {};
+  });
+
+  afterEach(() => {
+    // Restore console first
+    console.log = originalConsoleLog;
+    console.error = originalConsoleError;
+    // Restore original working directory
+    process.chdir(originalCwd);
+    // Clean up test directory
+    if (fs.existsSync(testDir)) {
+      const files = fs.readdirSync(testDir);
+      for (const file of files) {
+        const filePath = path.join(testDir, file);
+        try {
+          const stat = fs.statSync(filePath);
+          if (stat.isDirectory()) {
+            fs.rmSync(filePath, { recursive: true, force: true });
+          } else {
+            fs.unlinkSync(filePath);
+          }
+        } catch (e) {
+          // Ignore cleanup errors
+        }
+      }
+      try {
+        fs.rmdirSync(testDir);
+      } catch (e) {
+        // Ignore cleanup errors
+      }
+    }
+  });
+
+  test('should prefer TypeScript config over JSON config', async () => {
+    const tsConfig = { name: 'ts-config', version: '1.0.0' };
+    const jsonConfig = { name: 'json-config', version: '2.0.0' };
+
+    fs.writeFileSync('shellui.config.ts', `export default ${JSON.stringify(tsConfig)};`);
+    fs.writeFileSync('shellui.config.json', JSON.stringify(jsonConfig, null, 2));
+
+    const config = await loadConfig('.');
+
+    expect(config).toStrictEqual(tsConfig);
+  });
+
+  test('should load JSON config when TypeScript config does not exist', async () => {
+    const jsonConfig = { name: 'json-only', version: '1.0.0' };
+
+    fs.writeFileSync('shellui.config.json', JSON.stringify(jsonConfig, null, 2));
+
+    const config = await loadConfig('.');
+
+    expect(config).toStrictEqual(jsonConfig);
+  });
+
+  test('should return empty object when no config files exist', async () => {
+    const config = await loadConfig('.');
+
+    expect(config).toStrictEqual({});
+  });
+
+  test('should handle custom root directory', async () => {
+    const subDir = path.join(testDir, 'subdir');
+    fs.mkdirSync(subDir, { recursive: true });
+
+    const jsonConfig = { name: 'subdir-config', version: '1.0.0' };
+    fs.writeFileSync(path.join(subDir, 'shellui.config.json'), JSON.stringify(jsonConfig, null, 2));
+
+    const config = await loadConfig(subDir);
+
+    expect(config).toStrictEqual(jsonConfig);
+  });
+
+  test('should handle TypeScript config in custom root', async () => {
+    const subDir = path.join(testDir, 'subdir');
+    fs.mkdirSync(subDir, { recursive: true });
+
+    const tsConfig = { name: 'subdir-ts-config', version: '1.0.0' };
+    fs.writeFileSync(
+      path.join(subDir, 'shellui.config.ts'),
+      `export default ${JSON.stringify(tsConfig)};`,
+    );
+
+    const config = await loadConfig(subDir);
+
+    expect(config).toStrictEqual(tsConfig);
+  });
+
+  test('should handle errors gracefully and return empty object', async () => {
+    const invalidJsonPath = path.join(testDir, 'shellui.config.json');
+    fs.writeFileSync(invalidJsonPath, '{ invalid json }');
+
+    const config = await loadConfig('.');
+
+    // Should return empty object on error
+    expect(config).toStrictEqual({});
+  });
+
+  test('should handle invalid TypeScript config gracefully', async () => {
+    const invalidTsPath = path.join(testDir, 'shellui.config.ts');
+    fs.writeFileSync(invalidTsPath, 'export const invalid = syntax error;');
+
+    const config = await loadConfig('.');
+
+    // Should return empty object on error
+    expect(config).toStrictEqual({});
+  });
+
+  test('should work with relative path', async () => {
+    const jsonConfig = { name: 'relative-config', version: '1.0.0' };
+    fs.writeFileSync('shellui.config.json', JSON.stringify(jsonConfig, null, 2));
+
+    // Change to parent directory
+    process.chdir(path.dirname(testDir));
+
+    const config = await loadConfig(path.basename(testDir));
+
+    expect(config).toStrictEqual(jsonConfig);
+  });
+});

package/src/utils/config-loaders.js

@@ -0,0 +1,142 @@
+import path from 'path';
+import fs from 'fs';
+import { pathToFileURL } from 'url';
+import { spawn } from 'child_process';
+import pc from 'picocolors';
+
+/**
+ * Load TypeScript configuration file using tsx
+ * @param {string} configPath - Path to the TypeScript config file
+ * @param {string} configDir - Directory containing the config file
+ * @returns {Promise<Object>} Configuration object
+ */
+export async function loadTypeScriptConfig(configPath, configDir) {
+  // Load TypeScript config using tsx CLI via child process
+  // This avoids module cycle issues with dynamic registration
+  // Use file URL for the import to ensure proper resolution
+  const configFileUrl = pathToFileURL(configPath).href;
+  const loaderScript = `
+    import * as configModule from ${JSON.stringify(configFileUrl)};
+    // Extract the actual config, handling both default export and named exports
+    let result = configModule.default || configModule.config || configModule;
+    // If result itself has a default property, extract it
+    if (result && typeof result === 'object' && result.default && Object.keys(result).length === 1) {
+      result = result.default;
+    }
+    console.log(JSON.stringify(result));
+  `;
+
+  // Write temporary script to load the config
+  const tempScriptPath = path.join(configDir, '.shellui-config-loader.mjs');
+  fs.writeFileSync(tempScriptPath, loaderScript);
+
+  try {
+    // Find tsx - try to resolve it from node_modules
+    const { createRequire } = await import('module');
+    const require = createRequire(import.meta.url);
+
+    let tsxPath;
+    try {
+      // Try to resolve tsx package
+      const tsxPackagePath = require.resolve('tsx/package.json');
+      const tsxPackageDir = path.dirname(tsxPackagePath);
+      tsxPath = path.join(tsxPackageDir, 'dist/cli.mjs');
+
+      if (!fs.existsSync(tsxPath)) {
+        throw new Error('tsx CLI not found');
+      }
+    } catch (resolveError) {
+      // Fallback to npx if tsx not found
+      tsxPath = null;
+    }
+
+    // Execute tsx to run the loader script
+    const result = await new Promise((resolve, reject) => {
+      const useNpx = !tsxPath;
+      const command = useNpx ? 'npx' : 'node';
+      const args = useNpx ? ['-y', 'tsx', tempScriptPath] : [tsxPath, tempScriptPath];
+
+      // Pass environment variables to child process, including build detection vars
+      const childEnv = {
+        ...process.env,
+        // Ensure build detection variables are passed to the child process
+        NODE_ENV: process.env.NODE_ENV || 'development',
+        SHELLUI_BUILD: process.env.SHELLUI_BUILD || 'false',
+      };
+
+      const child = spawn(command, args, {
+        cwd: configDir,
+        stdio: ['ignore', 'pipe', 'pipe'],
+        env: childEnv,
+      });
+
+      let stdout = '';
+      let stderr = '';
+
+      child.stdout.on('data', (data) => {
+        stdout += data.toString();
+      });
+
+      child.stderr.on('data', (data) => {
+        stderr += data.toString();
+      });
+
+      child.on('close', (code) => {
+        if (code !== 0) {
+          reject(
+            new Error(
+              `Failed to load TypeScript config: ${stderr || `Process exited with code ${code}`}`,
+            ),
+          );
+        } else {
+          try {
+            const parsed = JSON.parse(stdout.trim());
+            // If the parsed result has a 'default' key, extract it
+            const config = parsed.default || parsed.config || parsed;
+            resolve(config);
+          } catch (parseError) {
+            reject(
+              new Error(
+                `Failed to parse config output: ${parseError.message}\nOutput: ${stdout}\nStderr: ${stderr}`,
+              ),
+            );
+          }
+        }
+      });
+
+      child.on('error', (error) => {
+        reject(new Error(`Failed to execute tsx: ${error.message}`));
+      });
+    });
+
+    // Clean up temp script
+    if (fs.existsSync(tempScriptPath)) {
+      fs.unlinkSync(tempScriptPath);
+    }
+
+    console.log(pc.green(`Loaded TypeScript config from ${configPath}`));
+    return result;
+  } catch (execError) {
+    // Clean up temp script on error
+    if (fs.existsSync(tempScriptPath)) {
+      try {
+        fs.unlinkSync(tempScriptPath);
+      } catch (e) {
+        // Ignore cleanup errors
+      }
+    }
+    throw execError;
+  }
+}
+
+/**
+ * Load JSON configuration file
+ * @param {string} configPath - Path to the JSON config file
+ * @returns {Object} Configuration object
+ */
+export function loadJsonConfig(configPath) {
+  const configFile = fs.readFileSync(configPath, 'utf-8');
+  const config = JSON.parse(configFile);
+  console.log(pc.green(`Loaded JSON config from ${configPath}`));
+  return config;
+}