# JSX Transpiler, Too Many Cooks v0.3.0 & Comprehensive Test Coverage

[MelbourneDeveloper]

TLDR;

Major feature release adding a JSX transpiler for Dart, Too Many Cooks v0.3.0 with admin tools and subscriptions, VSCode extension v0.3.0 with admin commands, plus ~20,000 lines of new tests across all packages.

What Does This Do?

1. New dart_jsx Package - JSX Transpiler for Dart

A complete JSX transpiler that transforms JSX syntax directly in Dart files:

Input (.jsx file):

ReactElement Counter() {
  final count = useState(0);
  return <div className="counter">
    <h1>Dart + JSX</h1>
    <button onClick={() => count.set(count.value + 1)}>+</button>
  </div>;
}

Output (.g.dart file):

ReactElement Counter() {
  final count = useState(0);
  return $div(className: 'counter') >> [
    $h1 >> 'Dart + JSX',
    $button(onClick: () => count.set(count.value + 1)) >> '+',
  ];
}

Features:

• Full JSX parser with AST generation
• Handles fragments (<>...</>), self-closing tags, spread attributes
• Distinguishes JSX from Dart generics (<List<T>> vs <MyComponent>)
• CLI with --watch mode for development
• VSCode syntax highlighting extension

2. Too Many Cooks MCP Server v0.3.0

New capabilities for multi-agent coordination:

Feature	Description
Admin Tool	delete_lock, delete_agent, reset_key actions
Subscriptions	Real-time notifications for state changes
Auto-mark Read	Messages auto-marked read when fetched
96 Integration Tests	Comprehensive test coverage

3. VSCode Extension v0.3.0

Feature	Description
Force Release Lock	Admin command to release any lock
Remove Agent	Admin command to delete agents
Send Message	Send messages to agents from VSCode
Unified Server	Uses npx too-many-cooks (same as Claude Code)

4. React Native Enhancements

• npmComponent() - Generic wrapper to use ANY npm React component
• Navigation types - NavigationProp, RouteProp for React Navigation
• Paper component typed factories - paperButton(), paperFAB(), etc.

5. Massive Test Coverage Expansion

Package	New Test Lines
dart_node_react	~8,500 LOC (semantic elements, SVG, synthetic events, ReactDOM)
dart_node_react_native	~2,800 LOC (npm components, navigation, testing library)
dart_jsx	~1,800 LOC (transpiler, integration tests)
dart_logging	~400 LOC (console logging)
dart_node_mcp	~1,100 LOC (content conversion, server capabilities)
too_many_cooks	~500 LOC (integration, notifications)
VSCode extension	~2,300 LOC (command integration, coverage, MCP integration)

Brief Details?

New Files (Key Additions)

dart_jsx package:

• packages/dart_jsx/lib/src/parser.dart - JSX AST parser (489 LOC)
• packages/dart_jsx/lib/src/transformer.dart - AST to Dart transformer (215 LOC)
• packages/dart_jsx/lib/src/transpiler.dart - Full transpiler with string/comment handling (377 LOC)
• packages/dart_jsx/bin/jsx.dart - CLI with watch mode (146 LOC)

jsx_demo example:

• examples/jsx_demo/lib/counter.jsx - Counter component in JSX
• examples/jsx_demo/lib/tabs_example.jsx - Tabbed interface in JSX
• examples/jsx_demo/test/ - 4 test files with UI tests

Too Many Cooks:

• examples/too_many_cooks/lib/src/tools/admin_tool.dart - Admin operations (175 LOC)
• examples/too_many_cooks/lib/src/db/db.dart - Added admin DB operations (+120 LOC)

React Native:

• packages/dart_node_react_native/lib/src/npm_component.dart - Generic npm component wrapper (502 LOC)
• packages/dart_node_react_native/lib/src/navigation_types.dart - React Navigation types (112 LOC)

VSCode Extension:

• Admin commands: deleteLock, deleteAgent, sendMessage
• Removed serverPath config - uses npx too-many-cooks by default
• Removed Plans panel (simplified UI)

Modified Files (Key Changes)

• Build system: JSX transpilation integrated into tools/build/build.dart
• CI: Updated .github/workflows/ci.yml for new test structure
• Documentation: New pages for logging, MCP, SQLite, Too Many Cooks on website

Stats

136 files changed
+21,642 insertions
-1,146 deletions

How Do The Tests Prove The Change Works?

JSX Transpiler Tests (packages/dart_jsx/test/)

transpiler_test.dart (1,480 LOC):

• Parses and transforms all JSX syntax variants
• Handles edge cases: strings containing <, comments, nested generics
• Verifies fragments, self-closing tags, spread attributes
• Tests error handling for malformed JSX

integration_test.dart (339 LOC):

• End-to-end transpilation of real component files
• Verifies generated code compiles and runs correctly

jsx_demo Tests (examples/jsx_demo/test/)

counter_test.dart - Tests Counter component:

• Initial render shows count 0
• Increment/decrement buttons work
• Reset button resets to 0
• Rapid clicks all register

tabs_example_test.dart - Tests TabsExample component:

• Tab switching changes content
• Active tab has correct CSS class
• All tabs accessible

jsx_demo_test.dart - Integration tests:

• Counter and Tabs work independently
• State isolation between components

Too Many Cooks Tests (examples/too_many_cooks/test/)

integration_test.dart (+302 LOC):

test('admin delete_lock removes a lock', () async {
  // Acquire lock, then admin delete it
  await client.callTool('admin', {
    'action': 'delete_lock',
    'file_path': filePath,
  });
  // Verify lock is gone
  final query = await client.callTool('lock', {'action': 'query', ...});
  expect(queryJson['locked'], isFalse);
});

test('subscribe tool - subscribe and list', () async {
  await client.callTool('subscribe', {
    'action': 'subscribe',
    'subscriber_id': 'test-subscriber',
    'events': ['lock_acquired', 'lock_released'],
  });
  // Verify subscription registered
});

VSCode Extension Tests

command-integration.test.ts (470 LOC):

• Tests admin commands work end-to-end
• Verifies UI updates after operations

mcp-integration.test.ts (+800 LOC):

• Full MCP protocol integration
• Tests all tool calls work correctly

React Package Tests

semantic_elements_test.dart (1,913 LOC):

• All HTML semantic elements render correctly
• Event handlers work (onClick, onChange, etc.)
• Accessibility attributes pass through

svg_elements_test.dart (953 LOC):

• SVG elements render with correct namespace
• Path, circle, rect, etc. all work

synthetic_event_test.dart (506 LOC):

• Event normalization across browsers
• preventDefault, stopPropagation work

---

Generated with multi-agent coordination via Too Many Cooks MCP server.