@pie-element/cli 0.1.1 → 0.1.2-next.0

package/src/commands/dev/demo/index.ts

@@ -1,313 +0,0 @@
-import { Command, Flags } from '@oclif/core';
-import { spawn, type ChildProcess } from 'node:child_process';
-import path from 'node:path';
-import { existsSync, readFileSync, rmSync, unlinkSync, writeFileSync } from 'node:fs';
-import { tmpdir } from 'node:os';
-
-/**
- * Start unified demo application for all PIE elements.
- *
- * This command starts the apps/element-demo SvelteKit application which provides
- * a unified demo experience for all 27 PIE elements with multiple demo configurations.
- */
-export default class DevDemo extends Command {
-  static override description = 'Start unified demo app for all PIE elements (apps/element-demo)';
-
-  static override examples = [
-    '<%= config.bin %> <%= command.id %>',
-    '<%= config.bin %> <%= command.id %> --port 5180',
-    '<%= config.bin %> <%= command.id %> --open',
-    '<%= config.bin %> <%= command.id %> --build',
-  ];
-
-  static override flags = {
-    port: Flags.integer({
-      char: 'p',
-      description: 'Vite dev server port',
-      default: 5222,
-    }),
-    build: Flags.boolean({
-      char: 'b',
-      description: 'Build all elements before starting',
-      default: false,
-    }),
-    open: Flags.boolean({
-      char: 'o',
-      description: 'Open browser automatically',
-      default: false,
-      allowNo: true,
-    }),
-  };
-
-  static override args = {};
-
-  private viteProcess: ChildProcess | null = null;
-  private lockFilePath = '';
-  private bundlerInstanceDir = '';
-
-  public async run(): Promise<void> {
-    const { flags } = await this.parse(DevDemo);
-
-    // Find monorepo root - check if we're already at root or need to traverse up
-    let monorepoRoot = process.cwd();
-    const rootPackageJson = path.join(monorepoRoot, 'package.json');
-
-    // If package.json doesn't exist at current level, we're in a subdirectory (like tools/cli)
-    // Traverse up to find the root
-    if (!existsSync(rootPackageJson) || !existsSync(path.join(monorepoRoot, 'apps'))) {
-      monorepoRoot = path.resolve(monorepoRoot, '../..');
-    }
-
-    const demoAppPath = path.join(monorepoRoot, 'apps', 'element-demo');
-
-    this.lockFilePath = this.getLockFilePath(flags.port);
-    this.acquireLock(flags.port);
-    this.bundlerInstanceDir = this.createBundlerInstanceDir(flags.port);
-
-    this.log('Starting unified demo app for all PIE elements...');
-    this.log('');
-    this.log('Bundler mode: local (default)');
-    this.log(`Bundler workspace: ${this.bundlerInstanceDir}`);
-    this.log('');
-
-    try {
-      // 1. Build all elements if requested
-      if (flags.build) {
-        this.log('Building all React elements...');
-        await this.buildAllElements(monorepoRoot);
-      }
-
-      // 2. Install workspace dependencies (only if building)
-      if (flags.build) {
-        this.log('Installing workspace dependencies...');
-        await this.installDependencies(monorepoRoot);
-        this.log('✓ Dependencies installed\n');
-      }
-
-      // 3. Start Vite dev server
-      this.log(`Starting Vite dev server on port ${flags.port}...`);
-      if (!existsSync(demoAppPath)) {
-        this.error(`Demo app not found at ${demoAppPath}`);
-      }
-      this.viteProcess = await this.startVite(demoAppPath, flags.port, {
-        DEMO_BUNDLER_INSTANCE_DIR: this.bundlerInstanceDir,
-      });
-
-      // 4. Open browser
-      if (flags.open) {
-        await this.sleep(3000); // Wait for Vite to start
-        const url = `http://localhost:${flags.port}`;
-        this.log(`Opening ${url}...`);
-        await this.openBrowser(url);
-      }
-
-      this.log('');
-      this.log('✓ Demo app running');
-      this.log(`  URL: http://localhost:${flags.port}`);
-      this.log('');
-      if (!flags.build) {
-        this.log('ℹ️  Running without rebuild. Use --build to rebuild all elements first.');
-        this.log('');
-      }
-      this.log('📖 The demo app showcases all 27 PIE elements with multiple demos');
-      this.log('   Navigate to any element to see available demo configurations');
-      this.log('');
-      this.log('Press Ctrl+C to stop');
-
-      // 7. Handle graceful shutdown
-      process.on('SIGINT', () => {
-        this.log('\nShutting down...');
-        this.cleanup();
-        process.exit(0);
-      });
-
-      process.on('SIGTERM', () => {
-        this.cleanup();
-        process.exit(0);
-      });
-
-      // Keep process alive
-      await new Promise(() => {});
-    } catch (error) {
-      this.cleanup();
-      throw error;
-    }
-  }
-
-  private async buildAllElements(cwd: string): Promise<void> {
-    return new Promise((resolve, reject) => {
-      const build = spawn(
-        'bun',
-        [
-          'run',
-          'turbo',
-          'build',
-          '--force',
-          '--filter',
-          './packages/elements-react/*',
-          '--filter',
-          './packages/elements-svelte/*',
-        ],
-        {
-          stdio: 'inherit',
-          cwd,
-        }
-      );
-
-      build.on('close', (code) => {
-        if (code === 0) {
-          this.log('✓ All elements built\n');
-          resolve();
-        } else {
-          reject(new Error(`Build failed with code ${code}`));
-        }
-      });
-
-      build.on('error', reject);
-    });
-  }
-
-  private async startVite(
-    demoPath: string,
-    port: number,
-    env: Record<string, string>
-  ): Promise<ChildProcess> {
-    const proc = spawn('bunx', ['vite', '--port', port.toString(), '--host'], {
-      cwd: demoPath,
-      stdio: 'inherit',
-      env: {
-        ...process.env,
-        PORT: port.toString(),
-        ...env,
-      },
-    });
-
-    proc.on('error', (error) => {
-      this.error(`Failed to start Vite: ${error.message}`);
-    });
-
-    return proc;
-  }
-
-  private async openBrowser(url: string): Promise<void> {
-    try {
-      const open = await import('open');
-      await open.default(url);
-    } catch (error) {
-      this.warn(`Could not open browser: ${error}`);
-      this.log(`Please open ${url} manually`);
-    }
-  }
-
-  private async installDependencies(cwd: string): Promise<void> {
-    return new Promise((resolve, reject) => {
-      const install = spawn('bun', ['install'], {
-        cwd, // Run from monorepo root to resolve all workspaces
-        stdio: 'inherit',
-      });
-
-      install.on('close', (code) => {
-        if (code === 0) {
-          resolve();
-        } else {
-          reject(new Error(`Dependency installation failed with code ${code}`));
-        }
-      });
-
-      install.on('error', reject);
-    });
-  }
-
-  private cleanup(): void {
-    if (this.viteProcess) {
-      try {
-        this.viteProcess.kill('SIGTERM');
-      } catch (error) {
-        // Ignore errors during cleanup
-      }
-      this.viteProcess = null;
-    }
-
-    if (this.bundlerInstanceDir) {
-      try {
-        rmSync(this.bundlerInstanceDir, { recursive: true, force: true });
-      } catch {
-        // Ignore cleanup errors.
-      }
-      this.bundlerInstanceDir = '';
-    }
-
-    this.releaseLock();
-  }
-
-  private sleep(ms: number): Promise<void> {
-    return new Promise((resolve) => setTimeout(resolve, ms));
-  }
-
-  private acquireLock(port: number): void {
-    if (existsSync(this.lockFilePath)) {
-      try {
-        const raw = readFileSync(this.lockFilePath, 'utf-8');
-        const lock = JSON.parse(raw);
-        if (lock?.pid && this.isProcessRunning(lock.pid)) {
-          this.error(
-            `A demo server is already running (port: ${lock.port ?? 'unknown'}, pid: ${
-              lock.pid
-            }). Stop it or use --port to run on a different port.`
-          );
-        }
-      } catch (error) {
-        // If the lock is unreadable, remove it and continue.
-      }
-
-      try {
-        unlinkSync(this.lockFilePath);
-      } catch {
-        // Ignore cleanup errors.
-      }
-    }
-
-    const lockInfo = {
-      pid: process.pid,
-      port,
-      startedAt: new Date().toISOString(),
-    };
-    writeFileSync(this.lockFilePath, `${JSON.stringify(lockInfo, null, 2)}\n`);
-  }
-
-  private getLockFilePath(port: number): string {
-    return path.join(process.cwd(), `.demo-server.${port}.lock`);
-  }
-
-  private createBundlerInstanceDir(port: number): string {
-    // New run => new temp dir, so local cache is fresh after every restart.
-    const instanceId = `demo-${port}-${process.pid}-${Date.now()}`;
-    return path.join(tmpdir(), 'pie-element-demo-bundler', instanceId);
-  }
-
-  private releaseLock(): void {
-    if (!existsSync(this.lockFilePath)) return;
-    try {
-      const raw = readFileSync(this.lockFilePath, 'utf-8');
-      const lock = JSON.parse(raw);
-      if (lock?.pid !== process.pid) return;
-    } catch {
-      // If parsing fails, still attempt to remove stale lock.
-    }
-
-    try {
-      unlinkSync(this.lockFilePath);
-    } catch {
-      // Ignore cleanup errors.
-    }
-  }
-
-  private isProcessRunning(pid: number): boolean {
-    try {
-      process.kill(pid, 0);
-      return true;
-    } catch {
-      return false;
-    }
-  }
-}

package/src/commands/dev/test-bundler.ts

@@ -1,345 +0,0 @@
-import { Command, Flags } from '@oclif/core';
-import { Logger } from '../../utils/logger.js';
-import {
-  mkDependencyHash,
-  generateEntries,
-  createWebpackConfig,
-  type BuildDependency,
-} from '@pie-element/bundler-shared';
-import webpack from 'webpack';
-import { execSync } from 'node:child_process';
-import { existsSync, readFileSync, rmSync, symlinkSync, mkdirSync, writeFileSync } from 'node:fs';
-import { tmpdir } from 'node:os';
-import { join } from 'node:path';
-
-export default class TestBundler extends Command {
-  static override description = 'Test the PIE bundler service with local workspace packages';
-
-  static override examples = [
-    'bun run cli <%= command.id %>',
-    'bun cli <%= command.id %>',
-    '<%= config.bin %> <%= command.id %>',
-    'bun cli <%= command.id %> --element multiple-choice',
-    'bun cli <%= command.id %> --clean',
-  ];
-
-  static override flags = {
-    element: Flags.string({
-      char: 'e',
-      description: 'Test with specific element (default: multiple-choice)',
-      default: 'multiple-choice',
-    }),
-    clean: Flags.boolean({
-      description: 'Clean test workspace before running',
-      default: false,
-    }),
-    verbose: Flags.boolean({
-      char: 'v',
-      description: 'Show detailed output including webpack logs',
-      default: false,
-    }),
-    'keep-workspace': Flags.boolean({
-      description: 'Keep workspace directory after test (for debugging)',
-      default: false,
-    }),
-  };
-
-  private logger!: Logger;
-
-  public async run(): Promise<void> {
-    const { flags } = await this.parse(TestBundler);
-    this.logger = new Logger(flags.verbose);
-
-    this.logger.section('🚀 Testing PIE Bundler with Workspace Packages');
-
-    // Setup paths
-    const workspaceRoot = join(tmpdir(), 'pie-bundler-workspace-test');
-    const cacheDir = join(workspaceRoot, 'cache');
-    const outputDir = join(workspaceRoot, 'output');
-
-    if (flags.clean && existsSync(workspaceRoot)) {
-      this.logger.info('Cleaning old workspace...');
-      rmSync(workspaceRoot, { recursive: true, force: true });
-    }
-
-    mkdirSync(outputDir, { recursive: true });
-    mkdirSync(cacheDir, { recursive: true });
-
-    // Build local packages first
-    this.log('\n📦 Building local packages');
-    await this.buildLocalPackages(flags.element);
-
-    // Create workspace with local packages
-    this.log('\n🔗 Setting up test workspace');
-    const workspaceDir = await this.setupWorkspace(workspaceRoot, flags.element);
-
-    // Test the bundler - use workspaceDir instead of installing from NPM
-    this.log('\n⚙️  Running bundler test');
-
-    try {
-      this.logger.info(`Building bundle for @pie-element/${flags.element}...`);
-
-      // Call bundler directly without download step - workspace already has packages
-      const result = await this.buildFromWorkspace(workspaceDir, outputDir, flags.element);
-
-      if (flags.verbose) {
-        this.log('\nBuild Result:');
-        this.log(JSON.stringify(result, null, 2));
-      }
-
-      if (!result.success) {
-        this.logger.error('Build failed');
-        if (result.errors) {
-          this.log('\nErrors:');
-          for (const err of result.errors) {
-            this.log(`  - ${err}`);
-          }
-        }
-        this.error('Bundler test failed', { exit: 1 });
-      }
-
-      // Verify results
-      this.log('\n✓ Verifying bundles');
-      await this.verifyBundles(outputDir, result.hash);
-
-      // Summary
-      this.log(`\n${'='.repeat(60)}`);
-      this.log('✅ BUNDLER TEST PASSED');
-      this.log('='.repeat(60));
-      this.log(`Element:        @pie-element/${flags.element}`);
-      this.log(`Hash:           ${result.hash}`);
-      this.log(`Duration:       ${result.duration}ms`);
-      this.log(`Cached:         ${result.cached ? 'Yes' : 'No'}`);
-      this.log(`Bundle dir:     ${join(outputDir, result.hash)}`);
-
-      if (!flags['keep-workspace']) {
-        this.logger.info('\nCleaning up workspace...');
-        rmSync(workspaceRoot, { recursive: true, force: true });
-      } else {
-        this.log(`Workspace:      ${workspaceRoot}`);
-      }
-
-      this.log('='.repeat(60));
-      this.log('');
-    } catch (error: any) {
-      this.logger.error(`Test failed: ${error.message}`);
-      if (flags.verbose) {
-        this.log(error.stack);
-      }
-      this.error('Bundler test failed', { exit: 1 });
-    }
-  }
-
-  private async buildLocalPackages(element: string): Promise<void> {
-    const packages = ['packages/shared/mathquill', `packages/elements-react/${element}`];
-
-    for (const pkg of packages) {
-      if (!existsSync(pkg)) {
-        this.logger.warn(`Package not found: ${pkg}`);
-        continue;
-      }
-
-      this.logger.info(`Building ${pkg}...`);
-      try {
-        execSync('bun run build', {
-          cwd: pkg,
-          stdio: this.logger.isVerbose() ? 'inherit' : 'pipe',
-        });
-      } catch (error: any) {
-        this.logger.warn(`Build failed for ${pkg}: ${error.message}`);
-      }
-    }
-  }
-
-  private async setupWorkspace(workspaceRoot: string, element: string): Promise<string> {
-    const workspaceDir = join(workspaceRoot, 'workspace');
-    const packagesDir = join(workspaceDir, 'packages');
-
-    mkdirSync(packagesDir, { recursive: true });
-
-    // Create workspace package.json with bundler dependencies
-    writeFileSync(
-      join(workspaceDir, 'package.json'),
-      JSON.stringify(
-        {
-          name: 'pie-bundler-test-workspace',
-          private: true,
-          workspaces: [
-            'packages/*',
-            'packages/*/controller',
-            'packages/*/configure',
-            'packages/*/author',
-          ],
-          dependencies: {
-            'esbuild-loader': '^4.4.2',
-            'css-loader': '^7.1.2',
-            'style-loader': '^4.0.0',
-            'url-loader': '^4.1.1',
-          },
-        },
-        null,
-        2
-      )
-    );
-
-    // Symlink local packages
-    const localPackages = {
-      'shared-mathquill': 'packages/shared/mathquill',
-      [element]: `packages/elements-react/${element}`,
-    };
-
-    for (const [name, path] of Object.entries(localPackages)) {
-      if (!existsSync(path)) {
-        this.logger.warn(`Package not found: ${path}`);
-        continue;
-      }
-
-      const linkPath = join(packagesDir, name);
-      if (existsSync(linkPath)) {
-        rmSync(linkPath, { recursive: true, force: true });
-      }
-
-      this.logger.info(`Linking ${name} → ${path}`);
-      symlinkSync(join(process.cwd(), path), linkPath, 'dir');
-    }
-
-    // Install dependencies
-    this.logger.info('Installing workspace dependencies...');
-    try {
-      execSync('bun install', {
-        cwd: workspaceDir,
-        stdio: this.logger.isVerbose() ? 'inherit' : 'pipe',
-      });
-    } catch (error: any) {
-      this.logger.warn(`Workspace install had issues: ${error.message}`);
-    }
-
-    // Create symlinks in node_modules for @pie-element packages
-    const nodeModulesDir = join(workspaceDir, 'node_modules');
-    const pieElementDir = join(nodeModulesDir, '@pie-element');
-    mkdirSync(pieElementDir, { recursive: true });
-
-    // Link shared-mathquill
-    const mathquillLink = join(pieElementDir, 'shared-mathquill');
-    if (existsSync(mathquillLink)) {
-      rmSync(mathquillLink, { recursive: true, force: true });
-    }
-    symlinkSync(join(packagesDir, 'shared-mathquill'), mathquillLink, 'dir');
-    this.logger.info('Linked @pie-element/shared-mathquill in node_modules');
-
-    // Link element package
-    const elementLink = join(pieElementDir, element);
-    if (existsSync(elementLink)) {
-      rmSync(elementLink, { recursive: true, force: true });
-    }
-    symlinkSync(join(packagesDir, element), elementLink, 'dir');
-    this.logger.info(`Linked @pie-element/${element} in node_modules`);
-
-    return workspaceDir;
-  }
-
-  private async buildFromWorkspace(
-    workspaceDir: string,
-    outputDir: string,
-    element: string
-  ): Promise<any> {
-    const dependencies: BuildDependency[] = [{ name: `@pie-element/${element}`, version: '0.1.0' }];
-    const hash = mkDependencyHash(dependencies);
-    const startTime = Date.now();
-
-    this.logger.info(`Bundle hash: ${hash}`);
-
-    // Generate entry files
-    const entryDir = join(workspaceDir, 'entries');
-    mkdirSync(entryDir, { recursive: true });
-
-    const requestedBundles: Array<'player' | 'client-player' | 'editor'> = [
-      'player',
-      'client-player',
-      'editor',
-    ];
-    const entries = generateEntries(dependencies, workspaceDir, requestedBundles);
-
-    writeFileSync(join(entryDir, 'player.js'), entries.player || '');
-    writeFileSync(join(entryDir, 'client-player.js'), entries['client-player'] || '');
-    writeFileSync(join(entryDir, 'editor.js'), entries.editor || '');
-
-    // Create webpack config
-    const bundleOutputPath = join(outputDir, hash);
-    mkdirSync(bundleOutputPath, { recursive: true });
-
-    const webpackConfig = createWebpackConfig({
-      context: entryDir,
-      entry: {
-        player: join(entryDir, 'player.js'),
-        'client-player': join(entryDir, 'client-player.js'),
-        editor: join(entryDir, 'editor.js'),
-      },
-      outputPath: bundleOutputPath,
-      workspaceDir,
-      elements: dependencies.map((d) => d.name.split('/')[1]),
-    });
-
-    // Add repo's node_modules to webpack resolve paths for workspace testing
-    if (!webpackConfig.resolve) webpackConfig.resolve = {};
-    if (!webpackConfig.resolve.modules) webpackConfig.resolve.modules = [];
-    webpackConfig.resolve.modules.push(join(process.cwd(), 'node_modules'));
-
-    // Run webpack
-    return new Promise((resolve, reject) => {
-      webpack(webpackConfig, (err: any, stats: any) => {
-        if (err) {
-          reject(err);
-          return;
-        }
-
-        if (stats?.hasErrors()) {
-          const errors = stats.toString({ colors: false, errorDetails: true });
-          reject(new Error(errors));
-          return;
-        }
-
-        resolve({
-          success: true,
-          hash,
-          bundles: {
-            player: `/bundles/${hash}/player.js`,
-            clientPlayer: `/bundles/${hash}/client-player.js`,
-            editor: `/bundles/${hash}/editor.js`,
-          },
-          duration: Date.now() - startTime,
-          cached: false,
-        });
-      });
-    });
-  }
-
-  private async verifyBundles(outputDir: string, hash: string): Promise<void> {
-    const bundleDir = join(outputDir, hash);
-    const files = ['player.js', 'client-player.js', 'editor.js'];
-
-    let allOk = true;
-
-    for (const file of files) {
-      const filePath = join(bundleDir, file);
-      if (!existsSync(filePath)) {
-        this.logger.error(`❌ ${file} not found`);
-        allOk = false;
-        continue;
-      }
-
-      const content = readFileSync(filePath, 'utf-8');
-      const size = (content.length / 1024).toFixed(1);
-      this.logger.success(`✅ ${file} (${size} KB)`);
-
-      // Verify IIFE format for player bundle
-      if (file === 'player.js' && !content.includes('window.pie')) {
-        this.logger.warn(`⚠️  ${file} doesn't contain window.pie`);
-      }
-    }
-
-    if (!allOk) {
-      this.error('Bundle verification failed', { exit: 1 });
-    }
-  }
-}