Full-Stack Dart: Add React Web Frontend, React Native Mobile, and JSX DSL (#9)

TLDR;

Major refactor adding React web frontend, React Native mobile app, and comprehensive JSX-like DSL. Full-stack Dart-to-JS framework now supports backend, web, and mobile platforms.

What Does This Do?

Adds React Web Frontend (examples/frontend/) - Complete web app with login, registration, and task management using dart_node_react
Adds PR CI GitHubAction (examples/frontend/) - Runs checks and tests for PRs
Adds React Native Mobile App (examples/mobile/) - Mobile app with login, registration, and task list screens using dart_node_react_native
Implements JSX-like DSL (packages/dart_node_react/lib/src/jsx.dart) - Operator-based element composition using >> for concise component syntax
Expands dart_node_react - New hooks (useReducer, useRef, useContext), context API, synthetic events, SVG elements, and testing utilities
Adds dart_node_react_native package - React Native component bindings (View, Text, TextInput, Button, etc.) with testing support
Shared library (examples/shared/) - Common HTTP client, models (Task, User), JS types, and theme styles
Improves WebSocket support - Client-side WebSocket utilities for real-time updates
Streamlines build tooling - Dependency switcher (tools/switch_deps.dart) for local vs release deps
Updates CLAUDE.md rules - Refined coding guidelines (async/await, typedef records, pattern matching)
Brief Details?

Area	Changes
New Packages	dart_node_react_native, examples/shared, examples/frontend, examples/mobile
React Package	JSX DSL, hooks (reducer, ref, context), SVG elements, synthetic events, testing library
Backend	Minor formatting cleanup in server.dart, schemas.dart, token_service.dart
Build Tools	switch_deps.dart for local/release dependency management, updated build.dart
Documentation	JSX_IMPLEMENTATION_PLAN.md design doc, updated README.md quick start
Files Changed	80+ files across 10+ packages/examples
How Do The Tests Prove The Change Works?

Frontend tests (examples/frontend/test/) - UI tests for login form, task management, and app rendering using Chrome platform
Mobile tests (examples/mobile/test/) - Login screen tests, type tests for Task/User models with mock HTTP client
React package tests (packages/dart_node_react/test/) - Unit tests for hooks, elements, and UI interaction tests
Backend tests - Existing server tests continue to pass with formatting changes only
Test configuration uses dart_test.yaml with Chrome platform and custom HTML templates for browser-based testing.

Author: MelbourneDeveloper

.github/workflows/ci.yml

@@ -0,0 +1,109 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  ci:
+    name: CI
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Dart
+        uses: dart-lang/setup-dart@v1
+        with:
+          sdk: stable
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Get dependencies
+        run: |
+          cd packages/dart_node_core && dart pub get
+          cd ../dart_node_express && dart pub get
+          cd ../dart_node_react && dart pub get
+          cd ../dart_node_react_native && dart pub get
+          cd ../dart_node_ws && dart pub get
+          cd ../../examples/shared && dart pub get
+          cd ../backend && dart pub get
+          cd ../frontend && dart pub get
+          cd ../mobile && dart pub get
+          cd ../../tools/build && dart pub get
+
+      - name: Check formatting
+        run: |
+          dart format --set-exit-if-changed packages/dart_node_core
+          dart format --set-exit-if-changed packages/dart_node_express
+          dart format --set-exit-if-changed packages/dart_node_react
+          dart format --set-exit-if-changed packages/dart_node_react_native
+          dart format --set-exit-if-changed packages/dart_node_ws
+          dart format --set-exit-if-changed examples/backend
+          dart format --set-exit-if-changed examples/frontend
+          dart format --set-exit-if-changed examples/mobile
+          dart format --set-exit-if-changed examples/shared
+          dart format --set-exit-if-changed tools/build
+
+      - name: Analyze
+        run: |
+          cd packages/dart_node_core && dart analyze --no-fatal-warnings
+          cd ../dart_node_express && dart analyze --no-fatal-warnings
+          cd ../dart_node_react && dart analyze --no-fatal-warnings
+          cd ../dart_node_react_native && dart analyze --no-fatal-warnings
+          cd ../dart_node_ws && dart analyze --no-fatal-warnings
+          cd ../../examples/backend && dart analyze --no-fatal-warnings
+          cd ../frontend && dart analyze --no-fatal-warnings
+          cd ../mobile && dart analyze --no-fatal-warnings
+          cd ../shared && dart analyze --no-fatal-warnings
+          cd ../../tools/build && dart analyze --no-fatal-warnings
+
+      - name: Install Node dependencies
+        working-directory: examples/backend
+        run: npm install
+
+      - name: Build backend
+        run: dart run tools/build/build.dart backend
+
+      - name: Test backend
+        working-directory: examples/backend
+        run: dart test
+
+      - name: Test frontend
+        working-directory: examples/frontend
+        run: dart test -p chrome
+
+      - name: Test mobile with coverage
+        working-directory: examples/mobile
+        run: |
+          dart test --coverage=coverage
+          dart pub global activate coverage
+          dart pub global run coverage:format_coverage --lcov --in=coverage --out=coverage/lcov.info --report-on=lib
+          COVERAGE=$(awk -F: '/^LF:/ { total += $2 } /^LH:/ { covered += $2 } END { if (total > 0) printf "%.1f", (covered / total) * 100; else print "0" }' coverage/lcov.info)
+          echo "Mobile coverage: ${COVERAGE}%"
+          if [ -z "$COVERAGE" ] || [ "$COVERAGE" = "0" ] || [ "$(echo "$COVERAGE < 90" | bc -l)" -eq 1 ]; then
+            echo "Coverage ${COVERAGE}% is below 90% threshold"
+            exit 1
+          fi
+
+      - name: Test react package with coverage
+        working-directory: packages/dart_node_react
+        run: |
+          dart test --coverage=coverage
+          dart pub global run coverage:format_coverage --lcov --in=coverage --out=coverage/lcov.info --report-on=lib
+          COVERAGE=$(awk -F: '/^LF:/ { total += $2 } /^LH:/ { covered += $2 } END { if (total > 0) printf "%.1f", (covered / total) * 100; else print "0" }' coverage/lcov.info)
+          echo "React package coverage: ${COVERAGE}%"
+          if [ -z "$COVERAGE" ] || [ "$COVERAGE" = "0" ] || [ "$(echo "$COVERAGE < 90" | bc -l)" -eq 1 ]; then
+            echo "Coverage ${COVERAGE}% is below 90% threshold"
+            exit 1
+          fi
+
+      - name: Build frontend
+        run: dart run tools/build/build.dart frontend
+
+      - name: Build mobile
+        run: dart run tools/build/build.dart mobile

.gitignore

@@ -14,3 +14,5 @@ examples/mobile/rn/.expo/
 website/_site/
 website/src/api/
 website/.dart-doc-temp/
+
+examples/frontend/coverage/

CLAUDE.md

@@ -4,38 +4,26 @@ This is a project for Dart packages to be consumed on Node for building node-bas
 
 # Rules
 - All Dart. Absolutely minimal JS
+- Use async/await. Do not use `.then`
 - NO DUPLICATION. Move files, code elements instead of copying them. Search for elements before adding them. HIGHEST PRIORITY. PRIORITIZE THIS OVER ALL ELSE!!
-- Return Result<T,E> from the nadz library for any function that could throw an exception <- CRITICAL!!!
+- Prefer typedef records with named fields instead of classes for data (structural typing). This mimics Typescript better
+- Return Result<T,E> from the nadz library for any function that could throw an exception. NO THROWING EXCEPTIONS.
+- Avoid casting!!! [! `as` `late`] are all ILLEGAL!!! U
+- Use pattern matching switch expressions or ternaries. The exceptional case is if inside arrays and maps because these are declarative and not imperaative.
 - All packages MUST have austerity installed for linting and nadz for Result<T,E> types
-- Fix ALL lint errors
-- Do not expose raw JS objects like JSAny to the higher levels. The library packages are supposed to put a TYPED layer over these
-- NO GLOBAL STATE
-- Casting, ! etc are all ILLEGAL!!!
-- Move non-example-specific code to the framework packages
+- Do not expose `JSObject` or `JSAny` etc in the public APIs. Put types over everything. The library packages are supposed to put a TYPED layer over these
+- No global state
 - No skipping tests EVER!!! Agressively unskip tests when you find them!!
 - Failing tests = OK. Removing assertions or tests = ILLEGAL!!
-- NO THROWING EXCEPTIONS. Return results. Handle errors with Result types, except for cases where the code is a placeholder.
-- NO PLACEHOLDERS!!! If you HAVE TO leave a section blank, fail LOUDLY by throwing an exception.
-- Tests must FAIL HARD. Don't add allowances and print warnings. Just FAIL!
+- NO PLACEHOLDERS!!! If you HAVE TO leave a section blank, fail LOUDLY by throwing an exception. This is the only time exceptions are allowed. Tests must FAIL HARD. Don't add allowances and print warnings. Just FAIL!
 - Keep functions under 20 lines long and files under 500 loc
-- NEVER use the late keyword
 - Do not use Git commands unless explicitly requested
-- Don't use if statements. Use pattern matching or ternaries instead. The exceptional case is if inside arrays and maps because these are declarative and not imperaative.
 
 ## Build & Run Commands
 
 ```bash
-# Build express_server example (compiles Dart to Node-compatible JS)
-dart run tools/build/build.dart express_server
-
-# Run the compiled server
-node examples/express_server/build/server.js
-
-# Install Node dependencies for express example
-cd examples/express_server && npm install
-
-# Run tests for express example
-cd examples/express_server && dart test
+// Build everything
+sh run_dev.sh
 ```
 
 Critical documentation URLs for the Dart JS Framework project.
@@ -72,7 +60,7 @@ Critical documentation URLs for the Dart JS Framework project.
 | Express 4.x API Reference | https://expressjs.com/en/4x/api.html |
 | Express DevDocs (offline) | https://devdocs.io/express/ |
 
-## React (Phase 2 - Web Frontend)
+## React
 
 | Topic | URL |
 |-------|-----|
@@ -81,7 +69,7 @@ Critical documentation URLs for the Dart JS Framework project.
 | Hooks API Reference | https://legacy.reactjs.org/docs/hooks-reference.html |
 | React DevDocs (offline) | https://devdocs.io/react/ |
 
-## React Native / Expo (Phase 3 - Mobile)
+## React Native / Expo
 
 | Topic | URL |
 |-------|-----|
@@ -102,10 +90,7 @@ Critical documentation URLs for the Dart JS Framework project.
 - React 18 docs at `18.react.dev` are canonical
 - Expo SDK releases 3x/year, targets specific React Native versions
 
-## Architecture
-
-- 
 
 ## Testing
 
-Tests in `examples/express_server/test/` use the standard `package:test`. The test spawns the Node server process and makes HTTP requests against it. The server must be built before running tests.
+All projects MUST have tests. Where the package is a UI project, the tests MUST test the UI interactions and avoid unit testing. Tests are Dart only. No Javascript unless it's necessary to test the underlying interop.

README.md

@@ -33,11 +33,22 @@ graph TD
 ## Example Quick Start
 
 **Web + Backend:**
+
+Switch to local dependency references. You need to do this before running everything.
+
 ```bash
-./run_dev.sh
+dart tools/switch_deps.dart local
+```
+
+Install for all packages and run servers
+
+```bash
+sh run_dev.sh
 ```
 Open http://localhost:8080/web/
 
+Use `dart tools/switch_deps.dart release` to switch back to release dependencies.
+
 **Mobile:** Use VSCode launch config `Mobile: Build & Run (Expo)`
 
 ```mermaid