Development Workflow Automation

Build a development workflow automation tool that monitors a Stencil component library project during development and provides real-time feedback on build status.

Requirements

Your solution should implement the following functionality:

1. Watch Mode Setup: Create a module that can start a watch process for a Stencil project during development. The watch process should monitor source files and automatically recompile when changes are detected.

2. Build Status Monitoring: Implement functionality to track and report the build status. The system should be able to detect when:

   • A build starts
   • A build completes successfully
   • A build fails with errors

3. Development Configuration: Ensure the watch process runs in development mode, which includes source maps and debugging information for easier troubleshooting.

4. Process Management: Implement proper process lifecycle management:

   • Start the watch process programmatically
   • Capture and parse output from the build process
   • Stop the watch process cleanly when done

Implementation Details

Create a TypeScript module dev-workflow.ts that exports the following:

• A function startDevWatch() that initiates the watch process and returns a handle for managing it
• A function getLastBuildStatus() that returns the status of the most recent build (e.g., "success", "error", "building")
• A function stopWatch() that terminates the watch process

The module should handle the standard output from the build tool to determine build status.

Test Cases

Test 1: Start Watch Mode @test

File: dev-workflow.test.ts

import { startDevWatch, getLastBuildStatus } from './dev-workflow';

test('should start watch mode successfully', async () => {
  const handle = await startDevWatch();
  expect(handle).toBeDefined();
  expect(handle.isRunning).toBe(true);
});

Test 2: Monitor Build Completion @test

File: dev-workflow.test.ts

import { startDevWatch, getLastBuildStatus } from './dev-workflow';

test('should detect when build completes', async () => {
  await startDevWatch();
  // Wait for initial build
  await new Promise(resolve => setTimeout(resolve, 5000));
  const status = getLastBuildStatus();
  expect(['success', 'error']).toContain(status);
});

Test 3: Clean Process Termination @test

File: dev-workflow.test.ts

import { startDevWatch, stopWatch } from './dev-workflow';

test('should stop watch process cleanly', async () => {
  const handle = await startDevWatch();
  await stopWatch();
  expect(handle.isRunning).toBe(false);
});

Dependencies { .dependencies }

@stencil/core { .dependency }

Provides the build tooling and watch command for component compilation.

Notes

• Assume a valid stencil.config.ts file exists in the project root
• The solution should work with Stencil version 4.x
• Focus on creating a robust process management solution that can be integrated into larger development tools