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

.github/workflows/ci.yml

@@ -6,25 +6,6 @@ on:
 
 env:
   MIN_COVERAGE: ${{ vars.MIN_COVERAGE }}
-  TIER1: >-
-    packages/dart_logging
-    packages/dart_node_core
-  TIER2: >-
-    packages/reflux
-    packages/dart_node_express
-    packages/dart_node_ws
-    packages/dart_node_better_sqlite3
-    packages/dart_node_mcp
-    packages/dart_node_react_native
-    packages/dart_node_react
-  # TIER3: Examples that can run in CI
-  # Excluded: backend (needs server), mobile (React Native), flutter_counter (Flutter SDK),
-  # too_many_cooks_vscode_extension (VSCode environment)
-  TIER3: >-
-    examples/frontend
-    examples/markdown_editor
-    examples/reflux_demo/web_counter
-    examples/too_many_cooks
 
 jobs:
   ci:
@@ -81,10 +62,10 @@ jobs:
           done
 
       - name: Test Tier 1
-        run: ./tools/test_tier.sh $MIN_COVERAGE $TIER1
+        run: ./tools/test.sh --ci --tier 1
 
       - name: Test Tier 2
-        run: ./tools/test_tier.sh $MIN_COVERAGE $TIER2
+        run: ./tools/test.sh --ci --tier 2
 
       - name: Test Tier 3
-        run: ./tools/test_tier.sh $MIN_COVERAGE $TIER3
+        run: ./tools/test.sh --ci --tier 3

.gitignore

@@ -5,6 +5,7 @@ node_modules/
 .dart_tool/
 
 coverage/
+logs/
 
 # Generated JS files from dart compile js
 *.js.deps
@@ -36,3 +37,6 @@ examples/too_many_cooks_vscode_extension/.vscode-test/vscode-darwin-arm64-1.106.
 examples/too_many_cooks_vscode_extension/.vscode-test/
 
 examples/reflux_demo/flutter_counter/test/failures/
+
+
+mutation-reports

.vscode/extensions/dart-jsx/QUICKSTART.md

@@ -0,0 +1,46 @@
+# Quick Start: JSX Syntax Highlighting
+
+## 1. Reload VS Code
+
+Press `Cmd+Shift+P` (Mac) or `Ctrl+Shift+P` (Windows/Linux), type "reload window", and hit Enter.
+
+## 2. Open a JSX File
+
+Open any of these:
+- `examples/jsx_demo/lib/counter.jsx`
+- `examples/jsx_demo/lib/tabs_example.jsx`
+
+## 3. Check Language Mode
+
+Look at the bottom-right corner of VS Code. It should say **"Dart JSX"**.
+
+If it says "Dart":
+1. Click on "Dart" in the bottom-right
+2. Select "Configure File Association for '.jsx'"
+3. Choose "Dart JSX"
+
+## 4. Verify Highlighting
+
+You should now see:
+- JSX tags like `<div>` in **cyan/teal**
+- Attributes like `className` in **light blue**
+- Curly braces `{}` in **gold**
+- Dart code with normal Dart colors
+
+## That's It!
+
+If it's not working, see `TESTING.md` for troubleshooting.
+
+## Example
+
+In `counter.jsx`, this line:
+```dart
+<button className="btn-inc" onClick={() => count.set(count.value + 1)}>
+```
+
+Should show:
+- `<button>` - teal
+- `className` - light blue
+- `onClick` - light blue
+- `{}` - gold
+- `() => count.set(count.value + 1)` - Dart syntax colors

.vscode/extensions/dart-jsx/README.md

@@ -0,0 +1,34 @@
+# Dart JSX Syntax Extension
+
+This is a local VS Code extension that provides syntax highlighting for JSX syntax in Dart files with the `.jsx` extension.
+
+## Features
+
+- Syntax highlighting for JSX tags (`<div>`, `</div>`, `<Component />`)
+- Syntax highlighting for JSX attributes (`className`, `onClick`, etc.)
+- Syntax highlighting for JSX expressions (`{expression}`)
+- Full Dart syntax support for non-JSX code
+- Embedded Dart expressions within JSX
+
+## Installation
+
+This extension is automatically available when you open this workspace in VS Code. No manual installation required.
+
+## Usage
+
+Create files with the `.jsx` extension and they will automatically use the Dart JSX syntax highlighting.
+
+## Scopes
+
+The following TextMate scopes are used:
+
+- `entity.name.tag.jsx` - JSX tag names
+- `support.class.component.jsx` - JSX component names
+- `entity.other.attribute-name.jsx` - JSX attribute names
+- `punctuation.definition.tag.jsx` - JSX tag brackets (`<`, `>`, `</`, `/>`)
+- `punctuation.section.embedded.jsx` - JSX expression braces (`{`, `}`)
+- `string.quoted.double.jsx` - Double-quoted strings in JSX
+- `string.quoted.single.jsx` - Single-quoted strings in JSX
+- `meta.embedded.expression.jsx` - JSX embedded expressions
+
+Colors can be customized in workspace settings under `editor.tokenColorCustomizations.textMateRules`.

.vscode/extensions/dart-jsx/TESTING.md

@@ -0,0 +1,69 @@
+# Testing the Dart JSX Syntax Extension
+
+## How to Test
+
+1. **Reload VS Code Window**
+   - Press `Cmd+Shift+P` (Mac) or `Ctrl+Shift+P` (Windows/Linux)
+   - Type "Developer: Reload Window" and select it
+   - This will reload the window and activate the local extension
+
+2. **Open a JSX File**
+   - Open `examples/jsx_demo/lib/counter.jsx`
+   - Open `examples/jsx_demo/lib/tabs_example.jsx`
+
+3. **Verify Syntax Highlighting**
+
+   You should see:
+   - **JSX Tags** (like `<div>`, `<button>`, `<h1>`) highlighted in cyan/teal color
+   - **JSX Attributes** (like `className`, `onClick`) highlighted in light blue
+   - **JSX Tag Brackets** (`<`, `>`, `</`, `/>`) in gray
+   - **JSX Expressions** (braces `{` and `}`) in gold/yellow
+   - **Dart Code** inside braces with normal Dart syntax highlighting
+   - **Strings** in JSX with proper string colors
+
+4. **Test Scope Inspector**
+   - Place cursor on a JSX tag (e.g., `<div>`)
+   - Press `Cmd+Shift+P` (Mac) or `Ctrl+Shift+P` (Windows/Linux)
+   - Type "Developer: Inspect Editor Tokens and Scopes"
+   - Verify the scope shows `entity.name.tag.jsx`
+
+## Expected Highlighting Examples
+
+From `counter.jsx`:
+```dart
+return <div className="counter">     // <div> = teal, className = light blue
+  <h1>Dart + JSX</h1>               // <h1> = teal, text = white
+  <div className="value">{count.value}</div>  // {} = gold, count.value = Dart syntax
+  <button onClick={() => count.set(count.value + 1)}>  // onClick = light blue
+    +
+  </button>
+</div>;
+```
+
+## Troubleshooting
+
+If syntax highlighting doesn't work:
+
+1. **Check File Association**
+   - Open a `.jsx` file
+   - Look at the bottom-right corner of VS Code
+   - It should say "Dart JSX" not "Dart"
+   - If it says "Dart", click it and select "Configure File Association for '.jsx'"
+   - Select "Dart JSX"
+
+2. **Reload Window Again**
+   - Sometimes VS Code needs to be reloaded twice for local extensions
+
+3. **Check Extension is Loaded**
+   - Press `Cmd+Shift+X` to open Extensions
+   - Search for "dart-jsx"
+   - You should see "Dart JSX Syntax" listed (may show as disabled but that's OK for local extensions)
+
+4. **Check Grammar File**
+   - Verify `.vscode/extensions/dart-jsx/syntaxes/dart-jsx.tmLanguage.json` exists
+   - Verify it's valid JSON
+
+5. **Clear Extension Cache**
+   - Close VS Code completely
+   - Delete `~/Library/Application Support/Code/CachedExtensions/` (Mac)
+   - Reopen VS Code